/* ============================================================
   RESPONSIVE  ·  designed per breakpoint, not shrunk
   ============================================================ */

/* ---------- Large laptop ---------------------------------- */
@media (max-width:1120px){
  :root{ --sec-y:104px; }
  .site-nav ul{ gap:20px; }
  .site-nav a{ font-size:14px; }
  .header-actions .btn--ghost{ display:none; }
}

/* ---------- Tablet ---------------------------------------- */
@media (max-width:960px){
  :root{ --sec-y:88px; --gutter:24px; }

  /* nav becomes a drawer */
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--bleach); border-bottom:1px solid var(--line);
    margin:0; padding:0;
    max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .site-nav.is-open{ max-height:420px; }
  .site-nav ul{ flex-direction:column; gap:0; padding:8px 24px 20px; }
  .site-nav li{ border-bottom:1px solid var(--line); }
  .site-nav li:last-child{ border-bottom:0; }
  .site-nav a{ display:block; padding:16px 0; font-size:16px; }
  .site-nav a::after{ display:none; }
  .header-inner{ min-height:68px; position:relative; }
  .header-actions{ margin-left:auto; }

  /* hero */
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__visual{ aspect-ratio:4/3; order:2; }
  .hero__copy{ order:1; }

  /* two-column blocks collapse */
  .heritage,
  .brief-cta,
  .network,
  .split,
  .contact{ grid-template-columns:1fr; }

  .section-head--split{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .section-head{ margin-bottom:48px; }

  .network__map{ max-width:520px; margin-inline:auto; width:100%; }
  .brief-cta__preview{ max-width:460px; }

  .metrics{ grid-template-columns:repeat(2,1fr); gap:36px 0; }
  .metric{ padding-inline:24px; }
  .metric:nth-child(odd){ border-left:0; padding-left:0; }

  .fabric-grid{ grid-template-columns:1fr; }

  .reasons{ grid-template-columns:repeat(2,1fr); }
  .reason{ padding:32px 0; }
  .reason:nth-child(n){ padding-left:0; padding-right:28px; border-right:1px solid var(--line); }
  .reason:nth-child(2n){ padding-left:28px; padding-right:0; border-right:0; }

  .apps{ grid-template-columns:repeat(2,1fr); }
  .app{ min-height:124px; padding:32px 22px; }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand{ grid-column:1 / -1; }

  /* brief becomes full-screen */
  .brief__panel{ width:100%; transform:translateY(24px); }
}

/* ---------- Mobile ---------------------------------------- */
@media (max-width:640px){
  :root{ --sec-y:72px; --gutter:20px; }

  body{ font-size:16px; }

  /* room for the sticky action bar */
  .site-footer{ padding-bottom:78px; }
  .mobile-bar{ display:flex; }
  .brief__foot{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }

  .header-actions .btn--sm{ display:none; }
  .brandmark__sub{ display:none; }
  .brandmark__name{ font-size:18px; }

  .hero{ padding-top:40px; }
  .hero__actions{ flex-direction:column; align-items:stretch; margin-bottom:38px; }
  .hero__actions .btn{ width:100%; }
  .hero__visual{ aspect-ratio:1/1; }
  .heritage-strip{ gap:12px; }
  .heritage-strip__span{ font-size:22px; }
  .heritage-strip__span i{ width:36px; }

  .timeline__item{ grid-template-columns:1fr; gap:6px; padding:22px 0; }

  .metrics{ gap:30px 0; }
  .metric{ padding-inline:16px; }

  .fabric-card__body{ padding:24px; }
  .fabric-card__swatch{ height:180px; }
  .fabric-card__top{ flex-direction:column; gap:12px; }

  .reasons{ grid-template-columns:1fr; }
  .reason:nth-child(n){ padding:26px 0; border-right:0; }

  .apps{ grid-template-columns:1fr 1fr; }
  .app{ min-height:104px; padding:24px 16px; }
  .app__name{ font-size:1.05rem; }

  .final__actions{ flex-direction:column; }
  .final__actions .btn{ width:100%; }

  .contact__cards{ grid-template-columns:1fr; }
  .contact-card{ padding:22px; }

  .footer-grid{ grid-template-columns:1fr; gap:34px; padding-bottom:40px; }
  .footer-base{ flex-direction:column; gap:8px; }

  /* Fabric Brief on mobile — the priority surface */
  .brief__head{ padding:20px 20px 16px; }
  .brief__title{ font-size:1.35rem; }
  .brief__progress{ padding:14px 20px; }
  .brief__body{ padding:26px 20px 32px; }
  .brief__foot{ padding-inline:20px; }
  .fields--2{ grid-template-columns:1fr; }
  .choice{ padding:16px; min-height:58px; }
  .summary__row{ grid-template-columns:1fr auto; row-gap:4px; }
  .summary__k{ grid-column:1 / -1; }
  .step__q{ font-size:1.4rem; }
}

/* ---------- Very small ------------------------------------ */
@media (max-width:380px){
  .apps{ grid-template-columns:1fr; }
  .btn--lg{ padding-inline:22px; font-size:14.5px; }
}

/* ---------- Print ----------------------------------------- */
@media print{
  .site-header,.mobile-bar,.brief,.hero__visual,.section--final{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; }
}