/* /ermi-mold-testing/ Lab diagnostic page: section styles from the batch-2 master
   ermi-mould-testing.html. Global chrome (nav/footer/buttons), reset, body, .wrap, h1-h3,
   .eyebrow, the .hero-unit height system + responsive hero type come from style.css +
   responsive.css; only this page's section vocabulary lives here. The master's
   min-height:86vh and the .ac-hero h1 clamp(2.4rem,5.4vw,4.4rem) are NOT shipped. Stat .n
   converged to the live clamp. The .tie .go button uses exact-property transitions matched
   to the theme ghost-button cadence, not the master's transition:all. Same recipe as the
   other Lab pages. */

  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;}

  .ac-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:radial-gradient(100% 115% at 78% -5%, rgba(201,166,115,.17), rgba(201,166,115,0) 55%),linear-gradient(165deg,#36291a 0%,#271d13 60%,#1d160f 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,.6);margin-bottom:26px;}
  .crumb a{color:rgba(255,255,255,.6);text-decoration:none;}
  .crumb a:hover{color:#e8c79a;}
  .ac-hero h1{color:#fff;max-width:19ch;margin-bottom:22px;}
  .ac-hero h1 em{font-family:'Fraunces';font-style:italic;color:#e8c79a;font-size:1.03em;}
  .ac-hero .sub{color:rgba(255,255,255,.86);font-size:1.18rem;max-width:58ch;}
  .ac-hero .sub em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .ac-hero .cta-row{margin-top:32px;display:flex;gap:18px;flex-wrap:wrap;}

  /* Stat strip: .stat .n converged to the live service-page clamp (was fixed 2rem). */
  .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:.06em;text-transform:uppercase;margin-top:10px;max-width:26ch;}

  .sec{padding:110px 0;}
  .sec-head{max-width:52ch;margin-bottom:50px;}
  .sec-head h2{font-size:clamp(2rem,4vw,3rem);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 p{color:var(--ink-soft);font-size:1.16rem;max-width:64ch;margin-bottom:22px;}
  .lead p em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .lead p strong{font-weight:400;color:var(--ink);}

  /* SIGNATURE: candor */
  .candor{background:var(--paper-deep);}
  .candor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:46px;}
  .candor-grid>div{background:var(--paper);padding:44px 40px;}
  .candor .can h3,.candor .cannot h3{font-family:'Archivo';font-weight:600;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;}
  .candor .can h3{color:var(--accent);}
  .candor .can h3::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent);vertical-align:middle;margin-right:10px;}
  .candor .cannot{background:var(--night)!important;color:var(--night-text);}
  .candor .cannot h3{color:#c79a5e;}
  .candor ul{list-style:none;}
  .candor li{padding:14px 0;border-top:1px solid var(--line);font-size:1rem;color:var(--ink-soft);}
  .candor li:first-child{border-top:none;}
  .candor .cannot li{border-color:rgba(239,228,210,.16);color:#b3a78f;}
  .candor .cannot li b{color:#efe4d2;font-weight:400;}
  .candor .can li b{color:var(--ink);font-weight:400;}
  .candor-note{margin-top:30px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:1.1rem;max-width:64ch;}
  .candor-note em{color:var(--accent);font-style:italic;}
  @media(max-width:760px){.candor-grid{grid-template-columns:1fr;}}

  /* how we use it */
  .steps{margin-top:20px;}
  .step{display:grid;grid-template-columns:50px 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--line);}
  .step:last-child{border-bottom:1px solid var(--line);}
  .step .num{font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:1.6rem;line-height:1;}
  .step h3{font-size:1.4rem;margin-bottom:10px;}
  .step p{color:var(--ink-soft);font-size:1rem;max-width:60ch;}
  @media(max-width:680px){.step{grid-template-columns:36px 1fr;gap:18px;}}

  /* tie to mold remediation */
  .tie{background:var(--paper-deep);}
  .tie .card{background:var(--paper);border:1px solid var(--line);padding:46px 44px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
  .tie .stag{font-family:'Archivo';font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
  .tie h3{font-size:1.7rem;margin:12px 0;max-width:28ch;}
  .tie h3 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .tie p{color:var(--ink-soft);max-width:56ch;}
  .tie .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;}
  .tie .go:hover{background:var(--ink);color:var(--paper);}
  /* mobile (<=760): the tie card stacks (text over button); center its text, matching the surfaces
     own-team (25c90e6) + surface-testing (cfd07b9) cards. text-align centers the eyebrow, the h3
     (+ its italic "end" accent) and the button label; margin-inline:auto centers the readable-width
     h3/p boxes in the column (so they aren't 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). (.tie .card here is this page's own copy; the
     cfd07b9 centering lives in page-surface-testing.css and does not load here.) */
  @media(max-width:760px){
    .tie .card{grid-template-columns:1fr;gap:26px;padding:34px 30px;text-align:center;}
    .tie h3, .tie p{margin-left:auto;margin-right:auto;}
  }

  .final{background:radial-gradient(90% 120% at 80% -10%, rgba(201,166,115,.15), rgba(201,166,115,0) 55%),linear-gradient(165deg,#352819 0%,#271d12 100%);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.2rem);margin:22px auto;max-width:24ch;}
  .final h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .final p{color:#a89c84;max-width:50ch;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;}}