/* /divisions/air/ hub: page-scoped section styles from the batch-2 master air-hub.html.
   Global chrome (nav/footer/buttons .cta|.btn-*), reset, body, .wrap, h1-h3, .serif,
   .eyebrow, the .hero-unit height system and responsive hero type all come from
   style.css + responsive.css; only the hub's own section vocabulary lives here. The
   master's min-height:92vh and the .ac-hero h1 clamp(2.6rem,6vw,5rem) are deliberately
   NOT shipped; the .hero-unit system and responsive.css header.ac-hero h1{var(--hero-h1)}
   own height + heading size, so the hero matches the live service pages by construction.
   Loaded only on this page. Reusable pattern for water + surfaces hubs. */

  sup.cite{font-family:'Archivo';font-weight:500;font-size:.62em;line-height:0;vertical-align:super;}
  sup.cite a{color:var(--accent);text-decoration:none;padding:0 1px;}
  sup.cite a:hover{text-decoration:underline;}

  /* Hero (base only; height via .hero-unit, h1 size via responsive.css). The gradient
     is the fallback behind the bg image; flat-dark over the photo, like the siblings. */
  .ac-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(160deg,#2a2620,#15110d);}
  .ac-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
  .ac-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,26,18,.46) 0%,rgba(33,26,18,.12) 35%,rgba(33,26,18,.80) 100%);}
  .ac-hero .inner{position:relative;padding-bottom:74px;width:100%;}
  .crumb{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:26px;}
  .crumb a{color:rgba(255,255,255,.7);text-decoration:none;}
  .crumb a:hover{color:#e8c79a;}
  .ac-hero h1{color:#fff;max-width:18ch;margin-bottom:22px;}
  .ac-hero h1 em{font-family:'Fraunces';font-style:italic;color:#e8c79a;font-size:1.04em;}
  .ac-hero .sub{color:rgba(255,255,255,.9);font-size:1.2rem;max-width:54ch;margin-bottom:18px;}
  .ac-hero .servesline{color:rgba(255,255,255,.62);font-size:.92rem;letter-spacing:.04em;}
  .ac-hero .cta-row{margin-top:34px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;}

  /* Stat strip: .stat .n converged to the live service-page scale (clamp), not the
     master's fixed 2.1rem, so it shrinks on phone like the residential/IAQ stat band. */
  .stats{background:var(--night);color:var(--night-text);padding:40px 0;}
  .stats .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
  .stat{flex:1;min-width:170px;}
  .stat .n{font-family:'Archivo';font-weight:500;font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);color:#efe4d2;letter-spacing:-.03em;line-height:1;}
  .stat .t{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;margin-top:10px;max-width:25ch;}
  .stat .t sup.cite a{color:#c9a673;}

  .sec{padding:120px 0;}
  .sec-head{max-width:48ch;margin-bottom:60px;}
  .sec-head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0;}
  .sec-head h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .sec-head p{color:var(--ink-soft);font-size:1.1rem;}

  .lead-prose{max-width:60ch;}
  .lead-prose p{color:var(--ink-soft);font-size:1.16rem;}

  /* air-path flow, the signature */
  .flow-sec{background:var(--paper-deep);}
  .flow{display:flex;align-items:stretch;margin-top:54px;}
  .node{flex:1;min-width:0;text-align:center;position:relative;padding:0 10px;}
  .node .dot{width:14px;height:14px;border-radius:50%;margin:0 auto;border:3px solid var(--paper-deep);position:relative;z-index:2;}
  .node.surface .dot{background:var(--ink-soft);}
  .node.deep .dot{background:var(--accent);}
  .node .name{margin-top:20px;font-family:'Archivo';font-weight:400;font-size:1.3rem;color:var(--ink);}
  .node .desc{margin-top:8px;font-size:.92rem;color:var(--ink-soft);line-height:1.5;}
  .node .verdict{margin-top:12px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;}
  .node.surface .verdict{color:var(--ink-soft);}
  .node.deep .verdict{color:var(--accent);}
  .link{flex:0 0 50px;display:flex;align-items:flex-start;padding-top:5px;}
  .link .bar{height:2px;width:100%;background:var(--line);}
  .link.into .bar{background:linear-gradient(90deg,var(--ink-soft),var(--accent));}
  .handoff-note{margin-top:44px;text-align:center;}
  .handoff-note .pill{display:inline-block;border:1px solid var(--accent);color:var(--accent);padding:9px 20px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;}
  .handoff-note p{margin-top:16px;color:var(--ink-soft);font-size:1rem;max-width:62ch;margin-left:auto;margin-right:auto;}
  .handoff-note p em{font-family:'Fraunces';font-style:italic;color:var(--accent);}

  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
  .svc-grid .svc{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column;}
  .svc .idx{font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:.95rem;}
  .svc h3{font-size:1.4rem;margin:8px 0 12px;}
  .svc p{color:var(--ink-soft);font-size:1rem;flex-grow:1;}
  .svc a{margin-top:20px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
  .svc a:hover{text-decoration:underline;}
  @media(max-width:760px){.svc-grid{grid-template-columns:1fr;}}

  .caps-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .cap{background:var(--paper);border:1px solid var(--line);padding:40px 38px;}
  .cap .role{font-family:'Archivo';font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
  .cap h3{font-size:1.7rem;margin:12px 0 14px;}
  .cap p{color:var(--ink-soft);}
  .cap .tagrole{margin-top:18px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:.95rem;}
  @media(max-width:680px){.caps-grid{grid-template-columns:1fr;}}

  .oli{background:var(--night);color:var(--night-text);}
  .oli .eyebrow{color:#c79a5e;}
  .oli-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
  .oli h2{font-size:clamp(2rem,4vw,3rem);color:#efe4d2;margin:18px 0;}
  .oli h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .oli p{color:#b3a78f;font-size:1.08rem;margin-bottom:18px;}
  .oli p sup.cite a{color:#c9a673;}
  .oli .go{display:inline-block;margin-top:14px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#efe4d2;text-decoration:none;border-bottom:1px solid #c9a673;padding-bottom:5px;}
  .dial{aspect-ratio:1/1;border:1px solid rgba(239,228,210,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(201,166,115,.10),rgba(239,228,210,.02));}
  .dial .score{font-family:'Fraunces';font-style:italic;font-weight:300;font-size:6rem;line-height:1;color:#efe4d2;}
  .dial .score b{font-weight:300;color:#c9a673;font-size:1.9rem;}
  .dial .lbl{margin-top:16px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#9b8e74;}
  .dial .dom{margin-top:22px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#7c715c;}
  .dial .dom b{color:#c9a673;font-weight:400;}
  /* stacked (<=760): the score box spans the full content width of the .wrap (padding:0 40px), so its
     edges line up with the body copy above it. (Was capped at max-width:320px, which inset it on
     wider phones / small tablets.) Stays a 1:1 square; desktop/tablet keep the 2-col text|dial grid. */
  @media(max-width:760px){.oli-grid{grid-template-columns:1fr;gap:40px;}}

  .diff .eyebrow{color:var(--accent);}
  .diff h2{color:var(--ink);font-size:clamp(1.9rem,3.8vw,3rem);margin:18px 0;max-width:26ch;}
  .diff h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .diff .sub{color:var(--ink-soft);font-size:1.1rem;max-width:54ch;}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px;}
  .compare>div{background:var(--paper);padding:38px 36px;}
  .compare .them{background:var(--paper-deep);}
  .compare h4{font-family:'Archivo';font-weight:600;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px;}
  .compare .them h4{color:var(--ink-soft);}
  .compare .us h4{color:var(--accent);}
  .compare .us h4::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent);vertical-align:middle;margin-right:10px;}
  .compare ul{list-style:none;}
  .compare li{padding:11px 0;border-top:1px solid var(--line);font-size:.98rem;color:var(--ink-soft);}
  .compare .us li{color:var(--ink);}
  .frontier{margin-top:26px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:.98rem;max-width:72ch;}
  @media(max-width:680px){.compare{grid-template-columns:1fr;}}

  .nextstep{background:var(--paper-deep);}
  .next-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .next-card{background:var(--paper);border:1px solid var(--line);padding:40px 38px;display:flex;flex-direction:column;}
  .next-card .eyebrow{color:var(--accent);}
  .next-card h3{font-size:1.6rem;margin:14px 0;}
  .next-card h3 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .next-card p{color:var(--ink-soft);flex-grow:1;}
  .next-card a{margin-top:20px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
  .next-card a:hover{text-decoration:underline;}
  @media(max-width:760px){.next-grid{grid-template-columns:1fr;}}

  .final{background:var(--night);color:var(--night-text);text-align:center;padding:120px 0;}
  .final .eyebrow{color:#c79a5e;}
  .final h2{color:#efe4d2;font-size:clamp(2rem,4.4vw,3.4rem);margin:22px auto;max-width:24ch;}
  .final h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .final p{color:#a89c84;max-width:48ch;margin:0 auto 30px;}

  .refs{background:var(--paper-deep);padding:70px 0;}
  .refs .eyebrow{margin-bottom:26px;}
  .refs ol{margin:0;padding-left:22px;max-width:94ch;}
  .refs li{font-size:.82rem;color:var(--ink-soft);line-height:1.6;margin-bottom:14px;}
  .refs li b{color:var(--ink);font-weight:500;}
  .refs a{color:var(--accent);text-decoration:none;}
  .refs a:hover{text-decoration:underline;}
  .refs .note{margin-top:26px;font-family:'Fraunces';font-style:italic;font-size:.86rem;color:var(--ink-soft);max-width:80ch;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  :target{scroll-margin-top:90px;}

  @media(max-width:760px){
    .flow{flex-direction:column;}
    .node{text-align:left;display:flex;gap:16px;align-items:flex-start;padding:0;}
    .node .dot{margin:6px 0 0;}
    .node .ntxt{flex:1;}
    .node .name{margin-top:0;}
    .link{flex:0 0 auto;width:2px;height:28px;margin-left:5px;padding:0;}
    .link .bar{width:2px;height:100%;}
    .link.into .bar{background:linear-gradient(180deg,var(--ink-soft),var(--accent));}
  }
  @media(max-width:600px){
    /* Air hero phone-portrait crop: weight horizontal to 72% to center the sofa and floor-lamp grouping (the subject) on the narrow crop; vertical stays 30% to match the desktop center 30% base (page-air.css:17). header.ac-hero img.bg is (0,2,2), beating the .ac-hero img.bg (0,2,1) base regardless of load order. */
    header.ac-hero img.bg{ object-position:72% 30%; }
  }
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}