/* Growth Saga AI site: phone pass (every page).
   Loaded last on every page. Everything sits inside the 900px phone breakpoint, so desktop is untouched.
   One system on phones: 56px section rhythm, centred section heads, one type scale, 48px buttons,
   a corner-card menu, swipe rows for long card sets. */

/* phone-only copy: the short line is hidden until the phone breakpoint */
[data-m-only] { display: none; }
.m-swipe-nav { display: none; }

@media (max-width: 900px) {
  :root { --sec: 56px; --gutter: 20px; }

  /* ---------- Header + corner-card menu ---------- */
  .header__logo img { width: 128px; }
  .burger { width: 42px; height: 42px; }
  .burger span { left: 12px; right: 12px; }
  .burger span:first-child { top: 16px; }
  .burger span:last-child { top: 23px; }

  /* The menu is a corner card that unfolds from the menu button along the logo's diagonal
     (a faceted clip-path), over a dimmed page. Each link: an icon tile, the page name and a
     one-line hint. A coral bar slides to the link under your finger; a tap fills the tile with
     coral before the page changes (mobile.js). */
  .menu {
    inset: auto; top: 72px; right: 14px; left: auto; bottom: auto;
    width: min(78vw, 272px); padding: 14px 10px 12px; gap: 0; justify-content: flex-start;
    background:
      radial-gradient(rgba(183, 191, 217, .14) 1px, transparent 1.4px) 0 0 / 14px 14px,
      radial-gradient(80% 60% at 100% 0%, rgba(255, 90, 60, .26), transparent 70%),
      radial-gradient(70% 50% at 0% 100%, rgba(70, 100, 220, .22), transparent 70%),
      linear-gradient(160deg, rgba(30, 42, 90, .86), rgba(11, 15, 47, .94));
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 90, 60, .34);
    opacity: 1;
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0, 100% 0);
    transition: clip-path .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s;
  }
  .menu-open .menu {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    transition: clip-path .75s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  /* coral corner, as on the site's cards */
  .menu::after { content: ''; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: var(--coral); clip-path: polygon(0 0, 100% 0, 100% 100%); }
  /* one sweep of light across the card as it opens */
  .menu::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 154, 106, .22) 48%, rgba(255, 255, 255, .12) 50%, transparent 62%);
    transform: translateX(-120%);
  }
  .menu-open .menu::before { animation: gsSweep 1.1s .3s var(--ease) both; }
  @keyframes gsSweep { to { transform: translateX(120%); } }
  .menu .btn, .menu__foot { display: none; }

  .menu__links { position: relative; display: grid; gap: 4px; }
  .menu__links::before {
    content: 'Where to?'; display: block; padding: 0 8px 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--coral);
  }
  .menu__links a {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; align-items: center; gap: 12px;
    padding: 9px 12px 9px 9px; text-decoration: none; letter-spacing: 0; color: var(--white);
    background: rgba(255, 255, 255, .045);
    transform: none !important; opacity: 1 !important;   /* the shared slide-in is replaced by the one below */
    transition: background-color .35s var(--ease);
  }
  /* tap: the tile fills with coral from the left before the page changes */
  .menu__links a::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, #FF5A3C, #FF7A45); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .45s var(--ease);
  }
  .menu__links a.is-go::before { transform: scaleX(1); }
  .menu__links a.is-go, .menu__links a.is-go small { color: var(--navy); }
  .menu__links a::after { content: '→'; font-size: 14px; font-weight: 700; color: var(--coral); opacity: .35; transform: translateX(-6px); transition: opacity .35s, transform .45s var(--ease); }
  .menu__links a.is-hot { background: rgba(255, 255, 255, .09); }
  .menu__links a.is-hot::after, .menu__links a[aria-current="page"]::after { opacity: 1; transform: none; }
  .menu__links a.is-go::after { color: var(--navy); }

  .menu__links .mi {
    width: 38px; height: 38px; display: grid; place-items: center;
    background: linear-gradient(150deg, #1E2A5A, #0B0F2F 75%); border: 1px solid rgba(183, 191, 217, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: border-color .35s, box-shadow .35s;
  }
  .menu__links .mi svg { width: 20px; height: 20px; fill: #E6EAF7; }
  .menu__links .mi .hot { fill: var(--coral); }
  .menu__links a.is-hot .mi { border-color: rgba(255, 106, 70, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 18px -4px rgba(255, 90, 60, .7); }
  .menu__links .mt { display: grid; font-size: 16px; font-weight: 700; line-height: 1.2; }
  .menu__links .mt small { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--soft); transition: color .35s; }

  /* the page you are on: a coral tile */
  .menu__links a[aria-current="page"] { background: linear-gradient(90deg, rgba(255, 90, 60, .95), rgba(255, 122, 69, .9)); color: var(--navy); }
  .menu__links a[aria-current="page"] small { color: rgba(11, 15, 47, .72); }
  .menu__links a[aria-current="page"]::after { color: var(--navy); }
  .menu__links a[aria-current="page"] .mi { border-color: rgba(11, 15, 47, .3); }

  /* the coral bar that follows your finger */
  .menu__bar {
    position: absolute; left: -10px; top: 0; width: 3px; height: 0; pointer-events: none;
    background: var(--coral); box-shadow: 0 0 14px 1px rgba(255, 90, 60, .8);
    transition: top .45s cubic-bezier(.2, 1.25, .4, 1), height .45s cubic-bezier(.2, 1.25, .4, 1), opacity .3s;
  }

  /* links slide in one after another each time the menu opens */
  .menu-open .menu__links::before { animation: gsIn .6s .12s var(--ease) both; }
  .menu-open .menu__links a > span { animation: gsIn .7s var(--ease) both; }
  .menu-open .menu__links a:nth-of-type(1) > span { animation-delay: .16s; }
  .menu-open .menu__links a:nth-of-type(2) > span { animation-delay: .22s; }
  .menu-open .menu__links a:nth-of-type(3) > span { animation-delay: .28s; }
  .menu-open .menu__links a:nth-of-type(4) > span { animation-delay: .34s; }
  .menu-open .menu__links a:nth-of-type(5) > span { animation-delay: .40s; }
  .menu-open .menu__links a > .mt { animation-name: gsInText; }
  @keyframes gsIn { from { opacity: 0; transform: translateX(22px) scale(.8); } }
  @keyframes gsInText { from { opacity: 0; transform: translateX(28px); } }

  /* the page behind dims while the menu is open; a tap on it closes the menu */
  .menu-dim {
    position: fixed; inset: 0; z-index: 85; background: rgba(4, 6, 22, .55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s;
  }
  .menu-open .menu-dim { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
  /* the menu button turns coral while open */
  .menu-open .burger { border-color: rgba(255, 90, 60, .6); background: rgba(255, 90, 60, .14); }

  /* ---------- Buttons: 48px, 14px text ---------- */
  .btn, .btn--lg, .btn--sm { height: 48px; padding: 0 24px; gap: 8px; font-size: 14px; --cut: 10px; }
  .btn__arrow { width: 11px; height: 11px; }
  /* hero: the button and the text link share one line */
  .hero .cta-row { flex-wrap: nowrap; gap: 22px; }
  .hero .cta-row .btn { flex: none; }
  .hero .cta-row .textlink { white-space: nowrap; font-size: 15px; }
  /* a lone call to action outside the hero sits in the centre */
  section:not(.hero) .cta-row, .section-cta { justify-content: center; align-items: center; text-align: center; }
  .how__cta { display: flex; width: fit-content; margin: 24px auto 0; }

  /* ---------- Type scale ---------- */
  .hero__title { font-size: min(30px, 7.7vw); line-height: 1.06; letter-spacing: -.035em; }
  .hero .label { display: block; margin-bottom: 16px; font-size: 11px; letter-spacing: .14em; }
  .hero .label::before { display: inline-block; margin-right: 12px; vertical-align: 1px; }
  .hero__lead { margin-top: 18px; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
  .hero .cta-row { margin-top: 26px; }
  .h2, .final__title { font-size: min(27px, 6.9vw); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
  .h2 .w, .final__title .w { text-wrap: balance; }

  /* ---------- Section heads: eyebrow, headline and subheading centred on every section ---------- */
  section:not(.hero) .label { justify-content: center; text-align: center; font-size: 11px; margin-bottom: 16px; }
  section:not(.hero) .h2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 22ch; }
  section:not(.hero) .section-head, .svc__head { text-align: center; }
  .section-head { margin-bottom: 32px; }
  .svc__head { gap: 14px; }
  .svc__head .lead, .section-head .lead, .section-head > p:not(.label), .svc__head > p { margin-left: auto; margin-right: auto; text-align: center; font-size: 16px; }
  .faq__head .label { margin-bottom: 16px; }
  /* card titles: one size under the section headline */
  section:not(.hero) h3 { font-size: 19px; line-height: 1.25; text-wrap: balance; }

  /* ---------- Footer: centred ---------- */
  .footer { padding: 48px 0 28px; text-align: center; }
  /* "We ship P&L impact." on one line */
  .footer__mega { flex-direction: row; white-space: nowrap; font-size: min(44px, 9.4vw); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; margin-top: 32px; padding-top: 32px; }
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer__brand img { width: 150px; }
  .footer__brand p { margin: 12px auto 18px; font-size: min(14.5px, 3.7vw); white-space: nowrap; max-width: none; }
  .footer__col { align-items: center; }
  .footer__col:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
  .footer__col:last-child p { flex-basis: 100%; }
  .footer__base { flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }

  /* ---------- Swipe rows (long card sets): cards side by side, next one peeking ---------- */
  [data-m-swipe] {
    display: flex !important; grid-template-columns: none !important; gap: 12px !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 8px; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  [data-m-swipe]::-webkit-scrollbar { display: none; }
  [data-m-swipe] > * { flex: 0 0 84%; scroll-snap-align: start; }
  .m-swipe-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
  .m-swipe-nav button {
    width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid currentColor; color: inherit; opacity: .9;
    transition: opacity .3s, background-color .3s;
  }
  .m-swipe-nav button:disabled { opacity: .25; }
  .m-swipe-nav svg { width: 14px; height: 14px; fill: currentColor; }
  .m-swipe-dots { display: flex; gap: 6px; }
  .m-swipe-dots i { width: 8px; height: 8px; background: currentColor; opacity: .25; transition: width .4s var(--ease), opacity .3s, background-color .3s; }
  .m-swipe-dots i.is-on { width: 22px; opacity: 1; background: var(--coral); }

  /* phone-only copy */
  [data-m-hide] { display: none !important; }
  [data-m-only] { display: inline; }
  [data-m-nobr] { white-space: nowrap; }

  /* ================= Home ================= */
  .hero__bullets { margin-top: 26px; }
  .hero__bullets li { font-size: min(15px, 3.9vw); }
  /* the orange light lines run in the gap under the founder card, clear of its text */
  .hero__grid > .sv-waves { height: 56px; bottom: -52px; }
  /* caption and founder quote: one line each */
  .hero__caption { white-space: nowrap; font-size: min(11px, 2.8vw); letter-spacing: .08em; gap: 8px; }
  .founder-card { gap: 14px; padding-right: 14px; }
  .founder-card figcaption span { white-space: nowrap; font-size: min(14px, 3.55vw); }
  /* services: 4 long cards become a swipe row */
  .svc__grid > .svc-card { display: flex; flex-direction: column; }
  .svc-card__line { margin-top: auto; }
  /* process: steps closer together */
  .step { padding: 26px 0; }
  /* FAQ: a short headline, kept on one line */
  [data-m-oneline] { white-space: nowrap; max-width: none !important; font-size: min(25px, 6.2vw); }
  /* industries: 9 tiles, the last one takes the full row */
  .ind__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }

  /* ================= Services ================= */
  /* headline first, then the screen, then the details */
  .sv-sec__grid { display: flex; flex-direction: column; gap: 0; }
  .sv-sec__copy, .sv-side { display: contents; }
  .sv-sec__copy > .label { order: 1; }
  .sv-sec__copy > .h2 { order: 2; }
  .sv-side > .shot, .sv-side > .mock { order: 3; margin: 24px 0 8px; }
  .sv-sec__copy > *:not(.label):not(.h2) { order: 4; }
  .sv-side > *:not(.shot):not(.mock) { order: 5; margin-top: 12px; }
  /* 6 "every project includes" points as a 2 × 3 grid */
  .incl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .incl__grid li { padding: 18px 14px; gap: 8px; }
  .incl__icon { width: 34px; height: 34px; margin-bottom: 4px; }
  .incl__grid strong { font-size: 15px; line-height: 1.3; }
  .incl__grid p { font-size: 13.5px; line-height: 1.5; }
  /* tools: two columns that never push past the screen edge */
  .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tool { min-width: 0; padding: 16px 14px; }
  .tool b { font-size: 15px; }
  .tool small { padding-right: 40px; font-size: 10px; letter-spacing: .1em; }
  .tools__note { text-align: center; }
  /* pricing: the tick stays on the row it belongs to */
  .pq__rows li { grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; }

  /* ================= Case studies ================= */
  .chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 2px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 9px 14px; font-size: 13px; }
  /* Orange + Colorix logos side by side must fit the card */
  .feat__logos { gap: 12px; }
  .feat__logo { height: 28px; }
  .feat__logo--cx { height: 24px; }
  #nutanvij .feat__logo { height: 24px; }
  .feat__nums b { font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
  .feat__nums li { padding: 12px 10px 10px; }
  .mini-grid > .mini { grid-row: auto; grid-template-rows: none; margin-bottom: 0; display: flex; flex-direction: column; }
  .more-head { margin-top: 48px; }

  /* ================= About ================= */
  .exist__grid { grid-template-columns: 1fr; gap: 32px; }

  /* ================= Contact ================= */
  /* the headline flows as one sentence, balanced */
  .ct-hero .hero__title .h-line { display: inline; }
}

/* phones set to reduce motion: the menu simply appears */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .menu, .menu-open .menu { transition: visibility 0s; }
  .menu-open .menu::before, .menu-open .menu__links::before, .menu-open .menu__links a > span { animation: none; }
}