/* /our-experts/ : section styles from the batch-2 master our-experts.html. Globals
   (chrome/reset/body/.wrap/h1-3/.eyebrow + responsive hero type) from style.css + responsive.css.
   NO stat band: 100svh full-viewport content hero (master .hero renamed .ac-hero so h1 inherits
   responsive --hero-h1; master 72vh + h1 clamp dropped; flex-end). The .member .pic identity
   circle is the only border-radius; member photos fall back to the .mono initial via onerror. */

  .ac-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:radial-gradient(100% 115% at 80% -5%, rgba(201,166,115,.18), rgba(201,166,115,0) 55%),linear-gradient(165deg,#3a2c1b 0%,#2b2015 60%,#241b12 100%);}
  @media(max-width:860px){ header.ac-hero{ min-height:100svh; } }
  @media(max-width:600px){ header.ac-hero{ min-height:100svh; } }
  .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,.65);margin-bottom:26px;}
  .crumb a{color:rgba(255,255,255,.65);text-decoration:none;}
  .crumb a:hover{color:#e8c79a;}
  .ac-hero h1{color:#fff;max-width:18ch;margin-bottom:14px;}
  .ac-hero h1 em{font-family:'Fraunces';font-style:italic;color:#e8c79a;font-size:1.03em;}
  .ac-hero .sub{color:rgba(255,255,255,.85);font-size:1.2rem;max-width:56ch;}
  .ac-hero .sub em{font-family:'Fraunces';font-style:italic;color:#d9b783;}

  .sec{padding:104px 0;}
  .intro{padding-top:110px;}
  .intro p{max-width:64ch;color:var(--ink-soft);font-size:1.18rem;}
  .intro p strong{font-weight:400;color:var(--ink);}
  .intro p em{font-family:'Fraunces';font-style:italic;color:var(--accent);}

  .group-head{max-width:56ch;margin-bottom:44px;}
  .group-head .eyebrow{margin-bottom:14px;display:block;}
  .group-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:16px;}
  .group-head h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .group-head p{color:var(--ink-soft);font-size:1.08rem;}

  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .member{background:var(--paper);border:1px solid var(--line);padding:32px 30px;display:flex;flex-direction:column;}
  .member .pic{position:relative;width:74px;height:74px;border-radius:50%;overflow:hidden;border:1px solid var(--line);margin-bottom:20px;background:var(--paper-deep);}
  .member .pic .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:1.4rem;}
  .member .pic img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;}
  .member .pic.ph{border-style:dashed;border-color:rgba(107,79,46,.45);}
  .member .pic.ph .mono{color:rgba(107,79,46,.5);}
  .member h3{font-size:1.2rem;}
  .member .r{color:var(--ink-soft);font-size:.92rem;margin-top:4px;}
  .member .d{font-family:'Archivo';font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:14px;}
  .member a{margin-top:18px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
  .member a:hover{text-decoration:underline;}
  @media(max-width:820px){.team-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.team-grid{grid-template-columns:1fr;}}

  .deep{background:var(--paper-deep);}

  /* lab cap line */
  .lab-note{margin-top:40px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:1.1rem;max-width:62ch;}
  .lab-note em{color:var(--accent);}
  .lab-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);}

  /* closing: human + AI + CTA */
  .close{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;}
  .close .eyebrow{color:#c79a5e;}
  .close h2{color:#efe4d2;font-size:clamp(2rem,4.2vw,3rem);margin:22px auto 18px;max-width:22ch;}
  .close h2 em{font-family:'Fraunces';font-style:italic;color:#d9b783;}
  .close p{color:#a89c84;max-width:50ch;margin:0 auto 34px;font-size:1.08rem;}
  .close .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
  .close .btn-ghost{display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(232,199,154,.5);color:#e8c79a;padding:16px 32px;text-decoration:none;transition:background-color .4s ease,color .4s ease;}
  .close .btn-ghost:hover{background:rgba(232,199,154,.1);}
  /* mobile: stack the two CTAs full-width + equal (mirrors the .final pattern in style.css:459), so
     the filled "Speak to a specialist" and the ghost "Meet Max" stop rendering at unequal content
     widths (different text length + different padding). Scoped to .close; the global
     .btn-primary/.btn-ghost base is untouched. */
  @media(max-width:560px){
    .close .btns{flex-direction:column;}
    .close .btn-primary,.close .btn-ghost{width:100%;box-sizing:border-box;text-align:center;}
  }

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