/* /divisions/surfaces/ hub: page-scoped section styles from the batch-2 master
   surfaces-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; .hero-unit + responsive.css header.ac-hero h1{var(--hero-h1)}
   own height + heading size. Same recipe as page-air.css. This hub has no tank/air flow;
   its signature is the four-layer .stack plus the .specialist (mold) callout. */

  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 warm
     gradient is the surfaces-toned fallback behind the bg image. */
  .ac-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:radial-gradient(100% 115% at 78% -5%, rgba(201,166,115,.18), rgba(201,166,115,0) 55%),linear-gradient(165deg,#3a2c1b 0%,#2b2015 60%,#241b12 100%);}
  .ac-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;}
  .ac-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,26,18,.40) 0%,rgba(33,26,18,.12) 35%,rgba(33,26,18,.72) 100%);}
  @media(max-width:600px){
    /* Surface hub hero phone-portrait crop: weight horizontal to 74% to keep the lit hand on the wood (the subject) framed; vertical stays 35% to match the desktop center 35% base. 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:74% 35%; }
  }
  .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:17ch;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:50ch;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:62ch;}
  .lead-prose p{color:var(--ink-soft);font-size:1.16rem;}

  /* four-layer stack, the signature */
  .stack-sec{background:var(--paper-deep);}
  .stack{margin-top:50px;position:relative;}
  .stack::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:2px;background:linear-gradient(180deg,var(--accent),rgba(107,79,46,.25));}
  .layer{display:grid;grid-template-columns:48px 1fr;gap:34px;padding:38px 0;border-top:1px solid var(--line);position:relative;}
  .layer:last-child{border-bottom:1px solid var(--line);}
  .layer .lnum{position:relative;z-index:2;font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:1.7rem;line-height:1;background:var(--paper-deep);padding-top:2px;}
  .layer .ltag{font-family:'Archivo';font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
  .layer h3{font-size:1.7rem;margin:8px 0 12px;}
  .layer h3 .svc{font-family:'Fraunces';font-style:italic;color:var(--accent);font-weight:300;}
  .layer p{color:var(--ink-soft);font-size:1.04rem;max-width:62ch;}
  .layer a{display:inline-block;margin-top:16px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
  .layer a:hover{text-decoration:underline;}
  .stack-note{margin-top:40px;max-width:64ch;color:var(--ink-soft);font-size:1.05rem;}
  .stack-note em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  @media(max-width:680px){.layer{grid-template-columns:36px 1fr;gap:20px;}.stack::before{left:17px;}}

  /* specialist (mold) callout. The .go button matches the theme's global ghost-button
     transition (exact properties, .4s) rather than the master's transition:all. */
  .specialist{background:var(--paper);border:1px solid var(--line);padding:48px 46px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
  .specialist .stag{font-family:'Archivo';font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
  .specialist h3{font-size:1.9rem;margin:12px 0 12px;max-width:24ch;}
  .specialist h3 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .specialist p{color:var(--ink-soft);max-width:58ch;}
  .specialist .go{white-space:nowrap;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);color:var(--ink);padding:15px 26px;text-decoration:none;transition:background-color .4s ease,color .4s ease;}
  .specialist .go:hover{background:var(--ink);color:var(--paper);}
  /* mobile (<=760): the specialist card stacks (text over button); center its text. text-align centers
     the eyebrow, the h3 (+ its italic "sign" accent) and the button label; margin-inline:auto centers
     the readable-width h3/p boxes in the column (so they don't sit left-positioned at small-tablet
     widths). The .go button keeps its full-width grid stretch + border; only its label is centered.
     Desktop/tablet card stays left-aligned (no text-align above this query). */
  @media(max-width:760px){
    .specialist{grid-template-columns:1fr;gap:28px;padding:36px 30px;text-align:center;}
    .specialist h3, .specialist p{margin-left:auto;margin-right:auto;}
  }

  .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.
     Matches the air (0a00cee) and water (7a5a3b7) hubs. */
  @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(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}