/* ============ Home page — phone layout (measured from the original at 375px) ============ */
.plan-tabs, .plan__select { display: none; }

@media (max-width: 809px) {
  /* Hero: tagline right-aligned block at 240, meta + small wordmark at the bottom */
  .hero__intro { top: 240px; left: auto; right: 20px; width: 251px; gap: 0; }
  .hero__title { width: 251px; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
  .hero__logo { left: 20px; right: 20px; bottom: 20px; height: 205px; }
  .hero__meta { align-items: flex-start; }
  .hero__meta-left { flex-direction: column; gap: 13px; }
  .hero__time { font-size: 12px; }
  .hero__scroll { margin-top: 29px; }
  .wordmark--hero { height: 102px; }

  /* Section headings */
  .h-xl { font-size: 42px; line-height: 1; letter-spacing: -0.04em; }
  .container-900 { max-width: calc(100% - 40px); }

  /* About */
  .about { padding-top: 160px; }
  .about__body { margin-top: 80px; gap: 40px; }
  .about__cols { gap: 40px; padding-top: 0; }
  .about__image-wrap { height: 450px; margin-top: 80px; padding: 0 20px; }
  .about__image { height: 450px; border-radius: 16px; }

  /* Works */
  .works { padding: 200px 0 160px; }
  .works__body { margin-top: 80px; gap: 40px; padding-bottom: 80px; }
  .projects { padding: 0 20px; gap: 12px; }
  .card { height: 421px; border-radius: var(--radius); }
  .card__tags { top: 20px; right: 20px; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
  .card__tags i { font-size: 14px; padding: 6px 10px; }
  .card__foot { left: 24px; right: 24px; bottom: 24px; }
  .card__foot h3 { font-size: 28px; }
  .card__foot p { font-size: 16px; }
  .card__art { transform: scale(.72); }
  .card:hover .card__art { transform: scale(.68); }
  .card .select-pill { display: none; }

  /* Reviews */
  .reviews { padding-bottom: 140px; }
  .reviews__row { flex-direction: column; height: auto; gap: 20px; margin-top: 80px; max-width: calc(100% - 40px); }
  .reviews__trust { width: 100%; height: 363px; padding: 32px; }
  .reviews__card { min-height: 500px; padding: 32px; }
  .review p { font-size: 28px; }
  .reviews__viewport { height: 400px; }

  /* Services: 52px headings, icons in a horizontal scroll row between the lines */
  .services { padding: 120px 20px; }
  .services__intro { height: auto; display: flex; flex-direction: column; gap: 10px; }
  .services__h { position: relative; font-size: 52px; line-height: 1; letter-spacing: -0.04em; }
  .services__h--1 { flex-direction: column; align-items: flex-start; gap: 24px; white-space: nowrap; flex-wrap: nowrap; }
  .services__h--2 { top: auto; right: auto; align-self: flex-end; margin-top: 0; }
  .tools { width: calc(100vw - 0px); margin-left: -20px; padding: 6px 20px 30px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tools::-webkit-scrollbar { display: none; }
  .tool { flex: none; width: 60px; height: 60px; border-radius: 14px; font-size: 20px; }
  .services__grid { margin-top: 80px; padding: 0; gap: 20px; flex-direction: column; }
  .services__col, .services__col--left { width: 100%; margin-top: 0; gap: 20px; }
  .services__text { padding: 0 40px 20px; }
  .services__text p { font-size: 18px; }

  /* Pricing: one plan at a time behind a switch, "Select plan" button inside the card */
  .pricing { padding: 160px 0 200px; }
  .pricing .h-xl { font-size: 52px; }
  .pricing__label { margin: 80px 0 20px; }
  .plan-tabs { display: inline-flex; margin-bottom: 20px; }
  .plan-tabs .seg__opt { font-size: 14px; }
  .plans { display: block; }
  .plans .plan { display: none; }
  .plans .plan.is-shown { display: block; }
  .plan { min-height: 0; padding: 32px; }
  .plan__price { font-size: 52px; margin-top: 40px; flex-wrap: wrap; }
  .plan__select { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; margin-top: 24px; border-radius: 20px;
    background: #fff; color: #000; font-size: 18px; letter-spacing: -0.03em; }
  .plan .select-pill { display: none; }
  .switch { width: 120px; height: 120px; right: 8px; top: -34px; }
  .perks { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .perk { padding: 0; }
  .project-model { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
  .project-model .select-pill { display: none; }
  .faq__cols { grid-template-columns: 1fr; gap: 10px; }
  .pricing__label--faq { font-size: 32px; }
}

/* ============ Phone menu (original): pill stays 95x45, a separate frosted panel drops in below it ============ */
@media (max-width: 809px) {
  .menu, body.is-loading .menu, .menu.is-open { width: 95px; height: 45px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: visible; border-radius: 14px; box-shadow: none; }
  .menu__bar, .menu.is-open .menu__bar { width: 95px; height: 45px; border-radius: 14px; background: rgb(var(--surface-rgb) / .8);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .menu__label .menu__label-brand { display: none; }    /* "Menu" rolls to "Close" on phones */
  .menu__panel { position: absolute; top: 57px; right: 0; left: auto; width: calc(100vw - 40px); padding-bottom: 20px;
    border-radius: 14px; background: rgba(21,21,21,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: scale(.9); transform-origin: 50% 0; pointer-events: none; visibility: hidden;
    transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
  .menu.is-open .menu__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .45s var(--ease), transform .6s var(--ease); }
  .menu__panel > .menu__line { display: none; }         /* dividers only after each item */
  .menu__item { height: 99px; }
  .menu__item .menu__line { bottom: -1px; }
  .menu__list { gap: 1px; }
  .menu__social { padding: 40px 20px 0; }
  .menu__cta { display: inline-flex; position: absolute; right: 20px; bottom: 20px; }
  .menu.is-open .menu__cta { opacity: 1; }
}