/* ============================================================
   AquaLayer™ — mobile.css   (loads LAST; ≤767px only)
   Phones: lay repeating content two-across so pages read composed,
   not an endless single-column tower. Tighten spacing, cards, type.
   Desktop (≥768px) is untouched — every rule is inside max-width:767.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- repeating content → TWO COLUMNS ---- */
  .auto-grid, .svc-grid, .pkg-grid, .fit-grid, .related-grid, .hub-pkg,
  .reframe__grid, .stat-row, .case-grid, .checklist--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 3.5vw, 18px);
  }
  .svc-list .svc-row,
  .related-list .related-row,
  .process-list .process-row { grid-column: 1 / -1; }
  .hub-pkg__item:last-child { grid-column: 1 / -1; }
  /* tiny spec tiles → three across */
  .chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* opt-out for any tile whose content can't fit 2-up */
  .span-2 { grid-column: 1 / -1; }

  /* ---- tighten reading type on phones ---- */
  .lead { font-size: 1.02rem; line-height: 1.5; }
  .sec-head .lead { max-width: 60ch; }
  .body { font-size: .92rem; line-height: 1.55; }
  .body p + p { margin-top: var(--s2); }
  h2, .h2 { line-height: 1.08; }

  /* ---- tighter vertical rhythm (mobile ~40–72px) ---- */
  .section { padding-block: clamp(32px, 8vw, 56px); }
  .section--sm { padding-block: clamp(28px, 7vw, 44px); }
  .sec-head { margin-bottom: var(--s4) !important; }   /* beat the inline --s6 */
  .sec-head h2 { margin-bottom: var(--s2); }
  .sec-head .lead { margin-top: var(--s2); }
  .flow-cta { margin-top: var(--s4); }
  .site-footer { padding-block: 48px 28px; margin-top: 0; padding-bottom: max(28px, env(safe-area-inset-bottom)); }

  /* ---- header logo: smaller on phones ---- */
  :root { --nav-h: 64px; }
  .brand__logo { height: 40px; }
  .condensed .brand__logo { height: 34px; }

  /* ---- footer: brand full width, cols two-up ---- */
  .footer-top { gap: var(--s5); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-col--reach { grid-column: 1 / -1; }
  .footer-col--reach ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px var(--s4);
  }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-col ul { gap: 8px; }
  .footer-tagline { max-width: 22ch; font-size: 1.15rem; }
  .footer-locales {
    font-size: .55rem;
    letter-spacing: .04em;
    white-space: normal;
    text-align: center;
    overflow: hidden;
    line-height: 1.45;
  }
  .split { gap: var(--s4); }
  .layerstack-wrap, .surfacemap { gap: var(--s4); }
  .stack-lg > * + * { margin-top: var(--s4); }

  /* ---- hero: full-bleed cover ---- */
  .hero { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 72px; min-height: 100svh; }
  .hero-brand__logo { width: min(70vw, 280px); }
  .hero .hero-title { letter-spacing: .16em; font-size: clamp(.92rem, 3.8vw, 1.15rem); -webkit-text-stroke-width: .8px; }
  .hero-cta { margin-top: 0; }
  .hero-cta .btn { padding-inline: 18px; font-size: .7rem; }
  .hero__meta { font-size: .5rem; letter-spacing: .18em; }
  .hero__cue { display: none; }
  .hero-lockup { margin-bottom: 40px; }

  /* ---- page heroes (inner pages): trim the big top/bottom ---- */
  .page-hero, .contact-hero,
  .services-hero, .svc-page-hero, .about-hero {
    padding-top: calc(var(--nav-h) + 24px) !important;
    padding-bottom: var(--s5);
  }
  .page-hero .breadcrumb,
  .services-hero .breadcrumb,
  .svc-page-hero .breadcrumb { margin-bottom: var(--s4); }
  .page-hero .lead, .about-hero__lead, .faq-hero__lead, .gallery-hero__lead,
  .services-hero .lead, .svc-page-hero .lead { margin-top: var(--s3); }
  .svc-page-hero__cta { margin-top: var(--s4); }
  .chip-row { margin-top: var(--s4); }
  .chip {
    margin-right: 0;
    padding: 10px 8px;
    border-right: 1px solid var(--hair);
  }
  .chip:last-child { border-right: 0; }

  /* ---- process steps (vertical sequence) tightened ---- */
  .steps { gap: var(--s4); }
  .step { grid-template-columns: 32px 1fr; gap: var(--s3); }
  .step__n { font-size: 1.25rem; }
  .step__t { font-size: 1.05rem; }
  .step__b { font-size: .85rem; line-height: 1.5; }
  .steps__track { left: 15px; }

  /* ---- FAQ groups + accordion tightened ---- */
  .faq-group { margin-bottom: var(--s5); padding-bottom: var(--s5); }
  .faq-layout { gap: var(--s3); }
  .faq-group__head h2 { font-size: 1.25rem; max-width: none; }
  .faq-hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .acc__q { padding: 14px 0; min-height: 52px; font-size: 1.02rem; }
  .acc__panel p { font-size: .88rem; }

  /* ---- service lifespan feature numeral (smaller on phones) ---- */
  .lifespan { gap: var(--s4); }
  .lifespan__big { font-size: clamp(3rem, 1rem + 9vw, 9rem); }
  .lifespan__big small { margin-top: var(--s2); }

  /* ---- compact cards ---- */
  .card { padding: 14px; }
  .card__title { font-size: 1.04rem; line-height: 1.18; }
  .card__body { font-size: .84rem; line-height: 1.5; }
  .card__num { margin-bottom: 10px; }
  .layer-card__phase { font-size: .88rem; margin-bottom: 4px; }
  .card a.card__link { margin-top: 14px; font-size: .68rem; }
  .svc-card .meta { margin-bottom: 12px; }

  /* ---- stat tiles ---- */
  .stat__value { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .stat__unit { font-size: .56rem; letter-spacing: .14em; }
  .stat__label { font-size: .8rem; margin-top: 6px; }

  /* ---- pillar / reframe / fit / mvp / ls tiles ---- */
  .reframe__item h3, .fit h3, .ls-item h3 { font-size: 1.04rem; }
  .reframe__item p, .fit p, .ls-item p { font-size: .82rem; line-height: 1.5; }
  .reframe__item, .fit { padding-top: var(--s3); }
  .mvp-col__title { font-size: 1.15rem; }
  .mvp-col__body { font-size: .9rem; max-width: none; }
  .pillar-row__body h3 { font-size: 1rem; }
  .pillar-row__body p { font-size: .88rem; }

  /* ---- packages (match template specificity) ---- */
  .pkg { padding: 16px; }
  .pkg .pkg__name { font-size: 1.08rem; margin-bottom: var(--s2); }
  .pkg .pkg__level { margin-bottom: 12px; }
  .pkg .card__body { font-size: .82rem; }
  .pkg ul { margin-top: 12px; gap: 8px; }
  .pkg ul li { font-size: .78rem; padding-left: 20px; }

  /* ---- service-hero spec chips ---- */
  .chip { padding: 9px 8px; }
  .chip b { font-size: 1rem; }
  .chip span { font-size: .5rem; letter-spacing: .1em; margin-top: 4px; }

  /* ---- what's-included ---- */
  .included { padding: 18px; }
  .checklist { gap: 10px; }
  .checklist li { font-size: .84rem; padding-left: 22px; }

  /* ---- gallery ---- */
  .gallery-hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .case h3 { font-size: 1.02rem; }
  .case-cap { font-size: .58rem; gap: 4px 10px; margin-top: 10px; }

  /* ---- diagnostic options: keep the description readable on phones ---- */
  .diag-opt { padding: var(--s3); }
  .diag-opt .ttl { font-size: 1.04rem; }
  .diag-opt .dsc { font-size: .82rem; }

  /* ---- footer handled above in spacing block ---- */

  /* ---- in-content image slots → one consistent ratio on phones ---- */
  .surface[data-ratio="3x2"], .surface[data-ratio="16x9"] { aspect-ratio: 4 / 3; }

  /* ============================================================
     PER-PAGE 2-COLUMN REFINEMENTS
     ============================================================ */

  /* A · GLOBAL — dividers sit close to content (collapse the doubled section gap) */
  .section-divider { margin-block: clamp(-30px, -7vw, -15px); }
  /* A · GLOBAL — closing CTA / invitation blocks: tighter */
  .cta-band { padding-block: clamp(36px, 8vw, 52px) !important; }
  .cta-band h2 { margin-bottom: var(--s3); }
  .cta-band .lead { margin-bottom: var(--s4); }

  /* B · HOME — cover hero + journey + protection */
  .journey__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .journey-step__panel { min-height: 0; padding: 18px; }
  .journey-step__body { font-size: .92rem; max-width: none; }
  .ox-grid { grid-template-columns: 1fr; }
  .ox-level { border-right: 0; }
  .pkg-deck { grid-template-columns: 1fr; gap: var(--s4); }
  .hz-grid,
  .menu-grid { grid-template-columns: 1fr; }
  .hz-col__span { font-size: .9rem; }
  .philosophy__copy { padding-block: clamp(40px, 10vw, 64px); }
  .philosophy__copy h2 { font-size: clamp(1.4rem, 6vw, 1.95rem); }
  .philosophy__grid { min-height: 0; }
  .deck-head h2,
  .journey h2 { font-size: clamp(1.15rem, 4.6vw, 1.5rem); letter-spacing: .03em; }
  .oxidation .deck-head h2 { white-space: normal; }
  .horizon .deck-head h2 { font-size: clamp(1.05rem, 4.2vw, 1.35rem); }
  .closing__grid { min-height: 0; }
  .closing__media {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .closing__copy h2 { font-size: clamp(1.3rem, 5.5vw, 1.85rem); max-width: none; }
  .hero__footer { bottom: clamp(48px, 9vh, 72px); }
  .hero .hero-title { letter-spacing: .18em; font-size: clamp(.78rem, 3.2vw, 1.05rem); }
  /* nicer paragraph rag on phones */
  p { text-wrap: pretty; }

  /* C · SERVICES HUB — layer-stack stacks on phone */
  .layerstack-wrap { grid-template-columns: 1fr; }
  .layerstack { aspect-ratio: 5 / 4; }
  .svc-row {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
  .services-hero h1,
  .svc-page-hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); max-width: 12ch; }

  /* D · DIAGNOSTIC — single column on phone */
  .diagnostic { grid-template-columns: 1fr; gap: var(--s3); }
  .diag-panels { margin-top: var(--s2); }

  /* E · SERVICE PAGES — process + related full width */
  .process-row { gap: var(--s3); }
  .related-row { grid-template-columns: 1fr; }

  /* G · ABOUT — hero scale + mvp stack */
  .about-hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); max-width: 12ch; }
  .about-hero__lead { font-size: 1rem; }
  .mvp-grid { grid-template-columns: 1fr; }
  .mvp-col { border-right: 0; }

  /* H · CONTACT — compact 2-col detail pairs + tight form */
  .contact-layout { gap: var(--s5); }
  .contact-blocks { grid-template-columns: 1fr 1fr; gap: 0 var(--s4); margin-top: var(--s4); }
  .cblock .lbl { font-size: .58rem; }
  .form { gap: var(--s3); }

  /* very small phones (<360px): stack the split heroes/sections gracefully */
  @media (max-width: 359px) {
    .layerstack-wrap, .contact-blocks, .hub-pkg { grid-template-columns: 1fr; }
    .layerstack { aspect-ratio: 16 / 10; }
    .chip-row { grid-template-columns: 1fr; }
  }
}