/* ============ 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__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: 20px; }
  .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: 27px; }
  .card__foot p { font-size: 15px; }
  .card__plus { display: none; }   /* hover-only control: no use on touch, and it narrows the title */
  .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: var(--ink); color: var(--on-ink); font-size: 18px; letter-spacing: -0.03em; }
  .plan .select-pill { display: none; }
  .sunmark { width: 84px; height: 84px; right: 20px; top: -30px; }
  .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: var(--glass); box-shadow: var(--glass-edge);
    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: var(--glass); box-shadow: var(--glass-edge); 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: 80px; }
  .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; }
}

/* Content version: longer job-title line in the hero meta on phones */
@media (max-width: 809px) {
  .hero__meta { gap: 16px; }
  .hero__scroll { flex: none; white-space: nowrap; }
}

/* AEA: compact logo and hero donate button on phones */
@media (max-width: 809px) {
  .nav__logo img { height: 38px; }
  .hero__lead { width: 251px; gap: 22px; }
  .hero__lead::before { inset: -90px -100px -70px -100px; backdrop-filter: blur(16px) saturate(.8) brightness(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(.8) brightness(1.08); }
  .btn--donate { height: 50px; font-size: 17px; }
  .menu__cta { position: static; margin: 28px 20px 0; }   /* longer link labels: the button sits below them */

  /* Fit the hero to the screen with the browser toolbars showing (100vh on iOS runs under the bottom bar,
     hiding the wordmark), lift the headline block, and keep the scroll cue readable over the sunlight */
  .hero { height: 100vh; height: 100svh; min-height: 560px; }
  .hero__intro { top: 150px; }
  .hero__logo { bottom: 32px; }
  .hero__scroll { padding: 8px 14px; border-radius: 99px; color: var(--fg); font-weight: 500;
    background: var(--glass); box-shadow: var(--glass-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .hero__scroll svg { opacity: .8; }
}
/* short phones: tuck the scroll cue closer to the wordmark so it clears the donate button */
@media (max-width: 809px) and (max-height: 680px) {
  .hero__logo { height: 160px; }
  .hero__scroll { margin-top: 0; }
}

/* AEA: programme cards on phones — the art is laid out at phone size rather than shrunk from desktop,
   main stat note on top, the two small stat notes side by side beneath it */
@media (max-width: 809px) {
  .card__art, .card:hover .card__art { transform: none; }
  .card .note--a { left: 50%; top: 66px; width: 236px; height: 128px; margin: 0 0 0 -118px; padding: 14px 18px; }
  .card .note--a b { font-size: 40px; }
  .card .note--a span { margin-top: 4px; font-size: 14px; }
  .card .note--a em { left: 18px; right: 18px; bottom: 12px; font-size: 12px; }
  .card .note--b, .card .note--c { top: auto; width: 134px; height: 88px; padding: 12px 14px; gap: 5px; border-radius: 14px; }
  .card .note--b { left: 24px; bottom: 134px; }
  .card .note--c { right: 24px; bottom: 128px; }
  .card .note--b b, .card .note--c b { font-size: 26px; }
  .card .note--b, .card .note--c { justify-content: flex-end; }
  .card .note--b span, .card .note--c span { font-size: 11px; }
}