:root{
    --paper:#F4F3EE;
    --paper-2:#E9E7E0;
    --paper-3:#DFDCD3;
    --sage:#DFE4D6;
    --sage-deep:#D4DACA;
    --ink:#1A1A18;
    --ink-2:#56544D;
    --ink-3:#66635A;
    --hair:rgba(26,26,24,.16);
    --hair-2:rgba(26,26,24,.075);
    --max:1300px;
    --pad:clamp(22px,5vw,78px);
    --mast-h:78px;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:'Jost',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.65;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  img{max-width:100%;height:auto;display:block;}
  a{color:inherit;text-decoration:none;}
  p{margin:0;}
  figure{margin:0;}
  h1,h2,h3{margin:0;font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400;}
  ::selection{background:var(--ink);color:var(--paper);}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

  /* every gutter on the page comes from here. never set a `padding` shorthand
     on an element that also carries .wrap, it wipes these two out. */
  .wrap{width:100%;max-width:var(--max);margin:0 auto;
        padding-left:max(var(--pad),env(safe-area-inset-left));
        padding-right:max(var(--pad),env(safe-area-inset-right));}
  .lbl{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);}

  /* paper grain */
  .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;mix-blend-mode:multiply;}

  /* topo texture */
  .topo{position:absolute;display:block;pointer-events:none;z-index:0;}
  .topo-hero{top:50%;left:50%;width:min(150vw,2050px);transform:translate(-50%,-50%);opacity:.07;
    -webkit-mask-image:radial-gradient(ellipse 72% 78% at 56% 48%,#000 30%,transparent 84%);
    mask-image:radial-gradient(ellipse 72% 78% at 56% 48%,#000 30%,transparent 84%);}
  .topo-why{top:50%;left:50%;width:min(140vw,1950px);transform:translate(-50%,calc(-50% + var(--dy,0px)));opacity:.1;transition:transform .1s linear;
    -webkit-mask-image:radial-gradient(ellipse 64% 74% at 50% 50%,#000 26%,transparent 82%);
    mask-image:radial-gradient(ellipse 64% 74% at 50% 50%,#000 26%,transparent 82%);}
  .topo-end{bottom:-38%;left:50%;width:min(150vw,2100px);transform:translate(-50%,var(--dy,0px));opacity:.055;transition:transform .1s linear;
    -webkit-mask-image:radial-gradient(ellipse 60% 68% at 50% 40%,#000 24%,transparent 80%);
    mask-image:radial-gradient(ellipse 60% 68% at 50% 40%,#000 24%,transparent 80%);}
  .co-rule{display:block;width:100%;height:24px;opacity:.3;}

  /* masthead */
  .mast{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(244,243,238,.88);
        backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-2);}
  .mast-in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--mast-h);}
  .id{display:flex;align-items:center;gap:13px;}
  .id img{height:26px;width:auto;}
  .id .nm{font-family:'Bodoni Moda',serif;font-size:19px;letter-spacing:.34em;line-height:1;text-indent:.34em;display:block;}
  .id .sub{display:block;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.3em;
           text-transform:uppercase;color:var(--ink-3);margin-top:6px;text-indent:.3em;}
  .menu{display:flex;gap:clamp(20px,2.2vw,32px);}
  .menu a{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);position:relative;padding:4px 0;}
  .menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .3s;}
  .menu a:hover::after{right:0;}
  .mast-r{display:flex;align-items:center;gap:28px;}
  .mast-tel{font-size:13px;letter-spacing:.08em;}
  .bgr{display:none;width:36px;height:36px;background:none;border:0;padding:0;cursor:pointer;align-items:center;justify-content:center;}
  .bgr i{display:block;width:20px;height:1px;background:var(--ink);position:relative;}
  .bgr i::before,.bgr i::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--ink);transition:transform .28s,top .28s;}
  .bgr i::before{top:-6px;} .bgr i::after{top:6px;}
  .bgr.on i{background:transparent;}
  .bgr.on i::before{top:0;transform:rotate(45deg);}
  .bgr.on i::after{top:0;transform:rotate(-45deg);}
  /* the sheet is top-aligned and scrolls. centering it clipped the first link
     off the top of the screen whenever the links were taller than the viewport. */
  .sheet{position:fixed;inset:0;z-index:49;background:var(--paper);display:flex;flex-direction:column;
         justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
         padding-top:calc(var(--mast-h) + 26px);padding-bottom:40px;
         padding-left:max(var(--pad),env(safe-area-inset-left));
         padding-right:max(var(--pad),env(safe-area-inset-right));
         opacity:0;pointer-events:none;transition:opacity .3s;}
  .sheet.on{opacity:1;pointer-events:auto;}
  .sheet a.lk{font-family:'Bodoni Moda',serif;font-size:clamp(30px,9vw,44px);padding:14px 0;border-bottom:1px solid var(--hair-2);}

  /* links, not buttons */
  .go{position:relative;display:inline-flex;align-items:baseline;gap:12px;font-size:11px;letter-spacing:.26em;
      text-transform:uppercase;padding-bottom:9px;border:0;border-bottom:1px solid var(--ink);
      transition:gap .28s;background:none;color:inherit;}
  .go:hover{gap:20px;}
  .go-q{border-bottom-color:var(--hair);color:var(--ink-2);}
  .go-q:hover{color:var(--ink);border-bottom-color:var(--ink);}

  /* ---------- HERO: split field ---------- */
  .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
        padding-top:124px;padding-bottom:60px;overflow:hidden;}
  .fields{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:56% 44%;}
  .fields .fr{background:var(--sage);border-left:1px solid var(--hair-2);}
  .vword{position:absolute;left:clamp(-14px,-1vw,-4px);top:50%;z-index:1;writing-mode:vertical-rl;
         transform:translateY(-50%) rotate(180deg);font-family:'Bodoni Moda',serif;
         font-size:clamp(64px,8.4vw,124px);line-height:1;letter-spacing:.18em;color:var(--ink);
         opacity:.075;pointer-events:none;user-select:none;}
  .hero > .wrap{position:relative;z-index:3;width:100%;}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,6vw,84px);align-items:center;}
  .hero-meta{display:flex;justify-content:space-between;gap:20px;padding-bottom:20px;
             border-bottom:1px solid var(--hair);margin-bottom:clamp(30px,4.6vw,54px);}
  .hero h1{font-size:clamp(44px,7.2vw,98px);line-height:.96;letter-spacing:-.024em;max-width:11ch;}
  .hero h1 em{font-style:italic;}
  .hero-sub{margin-top:clamp(24px,3vw,36px);font-size:16.5px;line-height:1.78;color:var(--ink-2);max-width:42ch;}
  .hero-acts{margin-top:clamp(26px,3.2vw,38px);display:flex;align-items:baseline;gap:38px;flex-wrap:wrap;}

  /* the plate: a specimen card, layered over the split */
  .plate{position:relative;z-index:3;justify-self:end;width:min(100%,392px);}
  .plate-in{border:1px solid var(--hair);padding:13px;background:rgba(244,243,238,.55);
            box-shadow:0 1px 0 rgba(26,26,24,.05);}
  .plate-in .inner{border:1px solid var(--hair-2);overflow:hidden;}
  .plate .crop-map{width:100%;aspect-ratio:1/1.08;display:block;opacity:.92;}
  .plate-cap{margin-top:14px;display:flex;justify-content:space-between;gap:14px;}
  .plate-in .inner{position:relative;cursor:crosshair;}
  .plate-in .inner .xh{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none;}
  .plate-in .inner:hover .xh{opacity:1;}
  .xh i{position:absolute;background:rgba(26,26,24,.42);}
  .xh .vx{top:0;bottom:0;width:1px;} .xh .hz{left:0;right:0;height:1px;}
  .xh b{position:absolute;width:9px;height:9px;border:1px solid rgba(26,26,24,.75);border-radius:50%;
        transform:translate(-50%,-50%);background:rgba(244,243,238,.5);}
  .plate-read{font-variant-numeric:tabular-nums;}
  /* the survey plate develops on load. it is the only map in the hero:
     the contour texture starts at "Why Apex", where the copy earns it. */
  @keyframes plateIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  .plate-in .inner .crop-map{animation:plateIn 1.5s cubic-bezier(.22,.61,.36,1) .25s both;}
  /* work rows */
  .item{transition:background .35s;}
  .item:hover{background:rgba(26,26,24,.018);}
  .item .n{transition:transform .35s,color .35s;}
  .item:hover .n{transform:translateX(4px);color:var(--ink);}
  @media (prefers-reduced-motion:reduce){
    .plate-in .inner .crop-map{animation:none;}
  }

  /* ---------- sections ---------- */
  .sec{position:relative;padding:clamp(84px,12vw,164px) 0;}
  .sec > .wrap{position:relative;z-index:2;}
  .band{border-top:1px solid var(--hair-2);}
  .sec-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
           padding-bottom:20px;border-bottom:1px solid var(--hair);margin-bottom:clamp(42px,5.6vw,82px);}
  h2{font-size:clamp(30px,4.8vw,62px);line-height:1.06;letter-spacing:-.018em;}
  .body-copy{font-size:16.5px;line-height:1.88;color:var(--ink-2);}
  .body-copy + .body-copy{margin-top:22px;}
  .body-copy b{font-weight:400;color:var(--ink);}

  /* mark */
  .mk{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,8vw,96px);align-items:center;}
  .mk-img{width:min(94%,248px);margin:0 auto;}
  .mk h2{max-width:14ch;margin-bottom:32px;}

  /* brain vs terrain */
  .cmp{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair-2);margin-top:0;}
  .cmp figure{margin:0;padding:clamp(22px,2.6vw,32px) clamp(18px,3vw,38px);display:flex;
              flex-direction:column;align-items:center;gap:20px;}
  .cmp figure:first-child{border-right:1px solid var(--hair-2);}
  .cmp .fbox{width:100%;max-width:380px;aspect-ratio:1.24/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .cmp .fbox img{width:min(100%,228px);}
  .cmp .crop-map{width:100%;height:100%;display:block;}
  .cmp figcaption{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);text-align:center;}

  /* why apex */
  .why{position:relative;overflow:hidden;border-top:1px solid var(--hair-2);background:var(--sage);}
  .why-in{position:relative;z-index:2;padding-top:clamp(78px,14vw,196px);padding-bottom:clamp(78px,14vw,196px);}
  .why-head{text-align:center;max-width:min(92%,880px);margin:0 auto;}
  .why-head h2{font-size:clamp(34px,6.4vw,88px);line-height:1.0;letter-spacing:-.026em;}
  .why-head h2 em{font-style:italic;}
  .why-cols{margin:clamp(50px,7vw,92px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
            gap:clamp(28px,6vw,84px);max-width:920px;}
  .why-cols p{font-size:16.5px;line-height:1.9;color:var(--ink-2);}
  .why-cols p + p{margin-top:20px;}
  .why-cols b{font-weight:400;color:var(--ink);}
  .pull{margin:clamp(64px,9vw,116px) auto 0;max-width:min(92%,760px);text-align:center;}
  .pull p{font-family:'Bodoni Moda',serif;font-size:clamp(27px,4.6vw,58px);line-height:1.1;
          letter-spacing:-.02em;color:var(--ink);}
  .pull p em{font-style:italic;}

  /* work list */
  .list{border-top:1px solid var(--hair);}
  .item{display:grid;grid-template-columns:50px 1fr minmax(0,1.05fr);gap:clamp(16px,3.4vw,50px);
        padding:clamp(26px,3.6vw,40px) 0;border-bottom:1px solid var(--hair-2);align-items:baseline;}
  .item .n{font-family:'Bodoni Moda',serif;font-size:14px;color:var(--ink-3);}
  .item h3{font-size:clamp(21px,2.5vw,30px);line-height:1.14;letter-spacing:-.014em;}
  .item p{font-size:15.5px;line-height:1.78;color:var(--ink-2);}

  .tone{background:var(--paper-2);border-top:1px solid var(--hair-2);}

  .portrait{width:100%;max-width:340px;}
  .portrait img{width:100%;height:auto;display:block;filter:saturate(0);}
  .portrait figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:14px;}

  /* clinician */
  .who{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(40px,7vw,96px);align-items:start;}
  .cred{border-top:1px solid var(--hair);margin:18px 0 0;}
  .cred div{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair-2);}
  .cred dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);flex:0 0 40px;padding-top:4px;}
  .cred dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);}
  .cred dd b{display:block;font-weight:400;color:var(--ink);}

  /* practical */
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair);}
  .facts > div{padding:clamp(28px,3.6vw,42px) clamp(20px,4vw,60px) clamp(28px,3.6vw,42px) 0;
               border-bottom:1px solid var(--hair-2);}
  .facts > div:nth-child(odd){border-right:1px solid var(--hair-2);}
  .facts > div:nth-child(even){padding-left:clamp(20px,4vw,60px);padding-right:0;}
  .facts h3{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);}
  .facts p{margin-top:15px;font-size:16.5px;line-height:1.74;color:var(--ink-2);}
  .facts p b{font-weight:400;color:var(--ink);}

  /* faq */
  .faq{border-top:1px solid var(--hair);}
  .faq details{border-bottom:1px solid var(--hair-2);}
  .faq summary{list-style:none;cursor:pointer;padding:clamp(22px,2.6vw,30px) 46px clamp(22px,2.6vw,30px) 0;
               position:relative;font-family:'Bodoni Moda',serif;font-size:clamp(19px,2vw,25px);
               line-height:1.25;letter-spacing:-.01em;transition:opacity .2s;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:hover{opacity:.62;}
  .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;background:var(--ink);}
  .faq summary::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;background:var(--ink);
                       transform:translateY(-50%);transition:opacity .22s;}
  .faq details[open] summary::before{opacity:0;}
  .faq .ans{padding:0 clamp(30px,8vw,180px) clamp(26px,3vw,34px) 0;font-size:16px;line-height:1.85;color:var(--ink-2);}

  /* contact form, on the dark block */
  .begin-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:start;text-align:left;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .fld{display:flex;flex-direction:column;gap:9px;margin-bottom:26px;}
  .fld label{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);}
  .fld input,.fld textarea,.fld select{font-family:'Jost',sans-serif;font-size:15.5px;color:var(--paper);
        background:rgba(244,243,238,.045);border:0;border-bottom:1px solid rgba(244,243,238,.55);
        padding:11px 12px;outline:none;transition:border-color .25s,background .25s;border-radius:0;}
  .fld input:hover,.fld textarea:hover,.fld select:hover{background:rgba(244,243,238,.1);}
  .fld textarea{resize:vertical;min-height:82px;line-height:1.6;}
  .fld input:focus,.fld textarea:focus,.fld select:focus{border-bottom-color:rgba(244,243,238,.9);background:rgba(244,243,238,.085);}
  .fld select{appearance:none;-webkit-appearance:none;cursor:pointer;}
  .fld select option{background:#1A1A18;color:#F4F3EE;}
  /* close: the one dark block on the page.
     every piece of text here is var(--paper) at full strength */
  .close{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);}
  /* longhands only. .close-in also carries .wrap, whose side padding is the gutter. */
  .close-in{position:relative;z-index:2;padding-top:clamp(84px,12vw,150px);padding-bottom:clamp(84px,12vw,150px);}
  .close .topo{filter:invert(1);opacity:.085;}
  .close h2{color:var(--paper);max-width:13ch;}
  .close p{font-size:16.5px;line-height:1.8;color:var(--paper);}
  .close .lbl{color:var(--paper);}
  .close .go{border:0;border-bottom:1px solid rgba(244,243,238,.85);color:var(--paper);}
  .close .form-note{margin-top:18px;font-family:'Jost',sans-serif;font-size:13.5px;
                    line-height:1.65;color:var(--paper);}
  .close .sent{display:none;font-family:'Jost',sans-serif;font-size:14.5px;
               line-height:1.7;color:var(--paper);}

  /* foot */
  .foot{background:var(--ink);color:var(--paper);}
  .foot .id .nm{color:var(--paper);}
  .foot .id .sub{color:var(--paper);}
  .foot .id img{filter:invert(1);opacity:.9;}
  .foot-in{border-bottom:1px solid rgba(244,243,238,.1);
           padding-top:58px;padding-bottom:32px;
           display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;}
  .foot-cols{display:flex;gap:70px;flex-wrap:wrap;}
  .foot-col{display:flex;flex-direction:column;gap:9px;min-width:148px;}
  .foot-col .h{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);margin-bottom:6px;}
  .foot-col a,.foot-col span{font-size:14px;color:var(--paper);}
  .foot-col a{padding:3px 0;}
  .foot-col a:hover{opacity:.72;}
  .foot-end{padding-top:18px;padding-bottom:30px;
            display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}

  @media (max-width:1020px){
    .menu,.mast-tel{display:none;}
    .begin-grid{grid-template-columns:1fr;gap:46px;}
    .bgr{display:flex;width:44px;height:44px;margin-right:-10px;}
    .sheet a.lk{font-size:clamp(26px,4.4vw,38px);padding:clamp(9px,1.4vh,15px) 0;}
    .sheet .go{font-size:11px;}
    /* the hero stacks HERE, not at 620. everything keyed to the split field
       has to come off at the same width or it lingers as leftovers. */
    .fields{grid-template-columns:1fr;}
    .fields .fr{display:none;}
    .vword{display:none;}
    .hero{min-height:0;padding-top:104px;padding-bottom:80px;}
    .hero h1{max-width:none;}
    .hero-grid{grid-template-columns:1fr;gap:44px;}
    .plate{justify-self:start;width:min(100%,360px);}
    .mk{grid-template-columns:1fr;gap:42px;}
    .cmp{grid-template-columns:1fr;}
    .cmp figure:first-child{border-right:0;border-bottom:1px solid var(--hair-2);}
    .why-cols{grid-template-columns:1fr;gap:22px;}
    .who{grid-template-columns:1fr;gap:46px;}
    .item{grid-template-columns:36px 1fr;}
    .item p{grid-column:2;margin-top:12px;}
    .facts{grid-template-columns:1fr;}
    .facts > div:nth-child(odd){border-right:0;}
    .facts > div:nth-child(even){padding-left:0;}
    .facts > div{padding-right:0;}
  }
  /* touch: grow the hit area without moving a single pixel */
  @media (hover:none),(max-width:1020px){
    .go::before{content:"";position:absolute;inset:-13px -10px;}
    .foot-col a,.sheet a.lk{position:relative;}
  }

  @media (max-width:620px){
    :root{--pad:20px;--mast-h:64px;}
    /* masthead: one line, one control */
    .mast-in{gap:14px;}
    .id{gap:10px;}
    .id img{height:23px;}
    .id .nm{font-size:16px;letter-spacing:.3em;text-indent:.3em;}
    .id .sub{font-size:8.5px;letter-spacing:.2em;text-indent:.2em;margin-top:5px;white-space:nowrap;}
    .mast-r .go{display:none;}

    /* hero: headline first, map second, both inside the gutter */
    .hero{padding-top:92px;padding-bottom:68px;}
    .hero-grid{gap:40px;}
    .hero-meta{flex-direction:column;gap:7px;padding-bottom:16px;margin-bottom:28px;}
    .hero h1{font-size:clamp(40px,11.4vw,56px);}
    .hero-sub{margin-top:22px;font-size:16px;line-height:1.72;}
    .hero-acts{margin-top:30px;gap:26px;}
    .plate{width:100%;}
    .plate .crop-map{aspect-ratio:1/.86;}
    .plate-in{padding:10px;}
    .vword{display:none;}

    /* section rhythm: shorter, so the page is scrollable in a sitting */
    .sec{padding:68px 0;}
    .sec-top{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:16px;
             margin-bottom:34px;}
    .lbl{font-size:11px;letter-spacing:.22em;}
    h2{font-size:clamp(29px,8vw,38px);}
    .why-head h2{font-size:clamp(31px,8.8vw,44px);}
    .why-cols{margin-top:40px;gap:20px;}
    .pull{margin-top:54px;}
    .pull p{font-size:clamp(25px,7.4vw,34px);}
    .topo-why{opacity:.07;}
    .close .topo{opacity:.07;}
    .mk-img{width:min(74%,208px);}
    .cmp figcaption{font-size:10.5px;letter-spacing:.2em;}
    .item{grid-template-columns:30px 1fr;gap:12px;padding:24px 0;}
    .item h3{font-size:20px;}
    .item p{font-size:15px;margin-top:10px;}
    .facts h3,.fld label,.foot-col .h,.cred dt{font-size:10.5px;letter-spacing:.2em;}
    .cred dt{flex:0 0 44px;}
    .close a.lbl{padding-top:7px;}
    .facts p{font-size:16px;}
    .faq summary{font-size:19px;padding-right:40px;}
    .faq .ans{font-size:15.5px;padding-right:0;}
    .form-row{grid-template-columns:1fr;gap:0;}
    .portrait{max-width:none;}
    /* the close block and the footer are one continuous dark field.
       keep the seam between them from reading as dead space. */
    .close-in{padding-top:72px;padding-bottom:52px;}
    .begin-grid{gap:38px;}

    /* footer */
    .foot-in{padding-top:44px;padding-bottom:28px;gap:34px;}
    .foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;}
    .foot-col{min-width:0;gap:5px;}
    .foot-col a{padding:7px 0;}
    .foot-col:first-child{grid-column:1 / -1;}
    .foot-end{padding-top:16px;padding-bottom:26px;gap:6px;flex-direction:column;}
  }

  @media (max-width:380px){
    :root{--pad:17px;}
    .id .sub{font-size:8px;letter-spacing:.16em;}
    .hero h1{font-size:38px;}
    .foot-cols{grid-template-columns:1fr;gap:24px;}
  }
  /* ============================================================
     pages.css — everything the multi-page site adds on top of the
     home page's stylesheet. Same rule as before: never a `padding`
     shorthand on anything that also carries .wrap.
     ============================================================ */

  /* the mark is inline SVG now, so it inherits color from its parent.
     no invert filter, no second raster to keep in sync. */
  /* the mark is a solid 3:2 chevron now, so width follows height */
  .id-mk{display:block;flex:none;height:22px;width:auto;color:var(--ink);}
  .foot .id-mk{color:var(--paper);}

  /* ---------- The Work dropdown ---------- */
  .menu-item{position:relative;display:flex;align-items:center;align-self:stretch;}
  .has-sub .caret{margin-left:7px;width:5px;height:5px;border-right:1px solid var(--ink-3);
                  border-bottom:1px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);
                  transition:transform .25s,border-color .25s;}
  .has-sub:hover .caret,.has-sub:focus-within .caret{border-color:var(--ink);
                  transform:translateY(0) rotate(45deg);}
  .submenu{position:absolute;top:100%;left:-20px;min-width:352px;z-index:6;
       background:var(--paper);
       border:1px solid var(--hair-2);border-top:0;padding:9px 0;
       box-shadow:0 20px 44px rgba(26,26,24,.11);
       opacity:0;visibility:hidden;transform:translateY(-7px);
       transition:opacity .22s,transform .22s,visibility .22s;}
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0);}
  .submenu a{display:block;padding:10px 22px;font-size:10.5px;letter-spacing:.18em;
         text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
         transition:background .2s,color .2s;}
  .submenu a::after{display:none;}
  .submenu a:hover{background:var(--paper-2);color:var(--ink);}

  /* the same seven, nested, in the mobile sheet */
  .lk-sub{display:flex;flex-direction:column;padding:14px 0 18px 2px;
          border-bottom:1px solid var(--hair-2);}
  .lk-sub a{padding:9px 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
            color:var(--ink-2);}
  .lk-sub a:hover{color:var(--ink);}
  .menu a[aria-current="page"]{color:var(--ink);}
  .menu a[aria-current="page"]::after{right:0;}
  .sheet-foot{margin-top:30px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
  .foot-legal{display:flex;gap:20px;}
  .foot-legal a{border-bottom:1px solid rgba(244,243,238,.28);padding-bottom:2px;}
  .foot-legal a:hover{border-bottom-color:var(--paper);}

  /* ---------- inner page head ---------- */
  .phead{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);
         padding-top:calc(var(--mast-h) + clamp(50px,7vw,92px));
         padding-bottom:clamp(44px,6vw,78px);}
  .phead > .wrap{position:relative;z-index:2;}
  .topo-phead{top:50%;left:50%;width:min(140vw,1900px);transform:translate(-50%,-50%);opacity:.055;
    -webkit-mask-image:radial-gradient(ellipse 70% 80% at 62% 50%,#000 22%,transparent 80%);
    mask-image:radial-gradient(ellipse 70% 80% at 62% 50%,#000 22%,transparent 80%);}
  .crumb{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(20px,3vw,30px);}
  .crumb .back{position:relative;padding-left:20px;color:var(--ink-2);}
  .crumb .back::before{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;
                       background:var(--ink-3);transition:width .25s,left .25s;}
  .crumb .back:hover::before{width:16px;left:-4px;}
  .phead h1{font-size:clamp(35px,5.8vw,76px);line-height:1.0;letter-spacing:-.025em;max-width:16ch;}
  .phead h1 em{font-style:italic;}
  .phead .lede{margin-top:clamp(22px,3vw,34px);font-size:17px;line-height:1.82;
               color:var(--ink-2);max-width:54ch;}

  /* ---------- long-form prose ---------- */
  .pbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);
         gap:clamp(40px,7vw,104px);align-items:start;}
  .prose{max-width:64ch;}
  .prose p{font-size:16.5px;line-height:1.9;color:var(--ink-2);}
  .prose p + p{margin-top:22px;}
  .prose b,.prose strong{font-weight:400;color:var(--ink);}
  .prose h2{font-size:clamp(25px,3.4vw,40px);line-height:1.1;letter-spacing:-.018em;
            margin-top:clamp(48px,6.5vw,86px);}
  .prose h2 + p{margin-top:24px;}
  .prose h2 em{font-style:italic;}
  .prose h3{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.26em;
            text-transform:uppercase;color:var(--ink-3);margin-top:clamp(38px,5vw,58px);}
  .prose h3 + p{margin-top:14px;}
  .prose ul{margin:22px 0 0;padding:0;list-style:none;}
  .prose li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.82;
            color:var(--ink-2);}
  .prose li + li{margin-top:13px;}
  .prose li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;
                    background:var(--ink-3);}
  .prose .note{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair-2);
               font-size:14.5px;line-height:1.75;color:var(--ink-3);max-width:52ch;}

  /* ---------- the aside rail ---------- */
  .rail{position:sticky;top:calc(var(--mast-h) + 30px);display:flex;flex-direction:column;gap:30px;}
  .card{border:1px solid var(--hair);padding:clamp(22px,2.6vw,30px);background:rgba(244,243,238,.5);}
  .card .h{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.26em;
           text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
  .card p{font-size:15px;line-height:1.75;color:var(--ink-2);}
  .card p + p{margin-top:12px;}
  .card .go{margin-top:20px;}
  .card.sage{background:var(--sage);border-color:transparent;}
  .facts-mini{display:flex;flex-direction:column;}
  .facts-mini div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
                  border-bottom:1px solid var(--hair-2);}
  .facts-mini div:last-child{border-bottom:0;padding-bottom:0;}
  .facts-mini dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);}
  .facts-mini dd{margin:0;font-size:14.5px;color:var(--ink);text-align:right;}

  /* ---------- services index ---------- */
  .svc{border-top:1px solid var(--hair);}
  a.svc-row{display:grid;grid-template-columns:50px minmax(0,1fr) minmax(0,1.05fr) 34px;
            gap:clamp(16px,3.4vw,50px);align-items:baseline;
            padding:clamp(26px,3.6vw,40px) 0;border-bottom:1px solid var(--hair-2);
            transition:background .35s;}
  a.svc-row:hover{background:rgba(26,26,24,.018);}
  a.svc-row .n{font-family:'Bodoni Moda',serif;font-size:14px;color:var(--ink-3);
               transition:transform .35s,color .35s;}
  a.svc-row:hover .n{transform:translateX(4px);color:var(--ink);}
  a.svc-row h3{font-size:clamp(21px,2.5vw,30px);line-height:1.14;letter-spacing:-.014em;}
  a.svc-row p{font-size:15.5px;line-height:1.78;color:var(--ink-2);}
  a.svc-row .arw{justify-self:end;align-self:center;width:34px;height:1px;background:var(--hair);
                 position:relative;transition:background .3s;}
  a.svc-row .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
                        border-top:1px solid var(--ink-3);border-right:1px solid var(--ink-3);
                        transform:rotate(45deg);transition:border-color .3s;}
  a.svc-row:hover .arw{background:var(--ink);}
  a.svc-row:hover .arw::after{border-color:var(--ink);}

  /* ---------- related rail at the foot of a specialty page ---------- */
  .rel{border-top:1px solid var(--hair);padding-top:clamp(26px,3.4vw,38px);
       margin-top:clamp(56px,8vw,104px);}
  .rel-list{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
            gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);}
  .rel-list a{background:var(--paper);padding:clamp(20px,2.4vw,28px);display:flex;
              flex-direction:column;gap:12px;transition:background .3s;}
  .rel-list a:hover{background:var(--paper-2);}
  .rel-list .n{font-family:'Bodoni Moda',serif;font-size:13px;color:var(--ink-3);}
  .rel-list h4{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:19px;
               line-height:1.2;letter-spacing:-.01em;}

  /* ---------- the closing band on inner pages ---------- */
  .cta-band{border-top:1px solid var(--hair-2);}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start;}
  .cta-grid h2{max-width:14ch;}
  .cta-acts{margin-top:34px;display:flex;flex-wrap:wrap;gap:34px;}

  /* ---------- contact page ---------- */
  .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
                gap:clamp(44px,7vw,110px);align-items:start;}
  .contact-grid .fld label{color:var(--ink-3);}
  .contact-grid .fld input,.contact-grid .fld textarea,.contact-grid .fld select{
      color:var(--ink);background:rgba(26,26,24,.022);
      border-bottom:1px solid var(--hair);}
  .contact-grid .fld input:hover,.contact-grid .fld textarea:hover,.contact-grid .fld select:hover{
      background:rgba(26,26,24,.045);}
  .contact-grid .fld input:focus,.contact-grid .fld textarea:focus,.contact-grid .fld select:focus{
      border-bottom-color:var(--ink);background:rgba(26,26,24,.04);}
  .contact-grid .fld select option{background:var(--paper);color:var(--ink);}
  .contact-grid .form-note{margin-top:18px;font-size:13.5px;line-height:1.65;color:var(--ink-3);}
  .contact-grid .sent{display:none;font-size:14.5px;line-height:1.7;color:var(--ink);}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .form-err{display:none;margin:18px 0 0;font-size:14px;line-height:1.6;color:#8A2F2F;}
  .fld.bad input,.fld.bad textarea{border-bottom-color:#8A2F2F;}
  #contactForm button[disabled]{opacity:.55;cursor:default;}
  .reach{display:flex;flex-direction:column;}
  .reach a,.reach span.v{display:block;font-family:'Bodoni Moda',serif;font-size:clamp(21px,2.4vw,27px);
                         letter-spacing:-.01em;line-height:1.25;}
  .reach > div{padding:clamp(20px,2.4vw,26px) 0;border-bottom:1px solid var(--hair-2);}
  .reach > div:first-child{border-top:1px solid var(--hair);}
  .reach .h{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
            color:var(--ink-3);margin-bottom:11px;}

  /* ---------- legal pages ---------- */
  .legal .prose{max-width:70ch;}
  .legal .prose h2{font-size:clamp(21px,2.6vw,28px);margin-top:clamp(42px,5.5vw,64px);}
  .legal .prose p,.legal .prose li{font-size:15.5px;line-height:1.85;}
  .legal .updated{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);}

  /* ---------- responsive ---------- */
  @media (max-width:1020px){
    .pbody{grid-template-columns:1fr;gap:clamp(44px,7vw,64px);}
    .rail{position:static;}
    .contact-grid{grid-template-columns:1fr;gap:52px;}
    .cta-grid{grid-template-columns:1fr;gap:30px;}
    .rel-list{grid-template-columns:1fr;}
    a.svc-row{grid-template-columns:36px 1fr;}
    a.svc-row p{grid-column:2;margin-top:12px;}
    a.svc-row .arw{display:none;}
  }
  @media (max-width:620px){
    .id-mk{height:19px;}
    .phead{padding-top:calc(var(--mast-h) + 44px);padding-bottom:40px;}
    .phead h1{font-size:clamp(32px,9.6vw,44px);max-width:none;}
    .phead .lede{margin-top:20px;font-size:16px;line-height:1.75;}
    .prose p,.prose li{font-size:16px;}
    .prose h2{font-size:clamp(24px,7vw,30px);margin-top:44px;}
    .card{padding:20px;}
    .reach a,.reach span.v{font-size:20px;}
    .cta-acts{gap:24px;}
    .foot-legal{gap:16px;}
  }


  /* ---------- home: the Why Apex teaser band ---------- */
  .why.teaser .why-in{padding-top:clamp(70px,10vw,124px);padding-bottom:clamp(70px,10vw,124px);}
  .why.teaser .pull{max-width:min(92%,820px);}
  .pull p.teaser-sub{margin-top:26px;font-family:'Jost',sans-serif;font-size:16.5px;
              line-height:1.8;color:var(--ink-2);max-width:52ch;margin-left:auto;
              margin-right:auto;letter-spacing:0;}
  .teaser-act{margin-top:34px;display:flex;justify-content:center;}
  .list-more{margin-top:clamp(32px,4vw,46px);}
  .item-lk{position:relative;}
  .item-lk::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
                  background:var(--ink);transition:right .3s;}
  .item:hover .item-lk::after{right:0;}

  /* ---------- color rhythm ----------
     The hero's right-hand field used to be sage, and the Why Apex band directly
     below it is also sage, so the two ran together as one green block. The hero
     panel is warm tan now: it reads like map paper behind the survey plate, and
     it gives the sage a clean edge to start against. */
  .hero .fields .fr{background:var(--paper-3);border-left:1px solid var(--hair-2);}
  .why.teaser{border-top:1px solid var(--hair-2);}

  /* ---------- home: the full range, as an index rather than seven boxes ---------- */
  .gamut-lede{max-width:64ch;}
  .gamut-lede .body-copy + .body-copy{margin-top:20px;}
  .gamut{margin-top:clamp(46px,6vw,76px);display:grid;
         grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4.5vw,64px);
         border-top:1px solid var(--hair);padding-top:clamp(34px,4vw,50px);}
  .gam-h{display:block;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.26em;
         text-transform:uppercase;color:var(--ink-3);margin-bottom:22px;}
  .gam-col ul{margin:0;padding:0;list-style:none;}
  .gam-col li{font-size:16px;line-height:1.5;color:var(--ink-2);padding:9px 0;
              border-bottom:1px solid var(--hair-2);}
  .gam-col li:last-child{border-bottom:0;}
  .gamut-more{margin-top:clamp(40px,5vw,62px);max-width:62ch;font-size:16.5px;
              line-height:1.85;color:var(--ink-2);}
  .gamut-more .go{margin-left:10px;vertical-align:baseline;}
  @media (max-width:1020px){
    .gamut{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px;}
  }
  @media (max-width:620px){
    .gamut{grid-template-columns:1fr;gap:30px;padding-top:28px;}
    .gam-col li{font-size:15.5px;}
    .gamut-more .go{display:block;margin-left:0;margin-top:18px;}
  }

  .tone .svc{border-top-color:rgba(26,26,24,.2);}
  .tone a.svc-row{border-bottom-color:rgba(26,26,24,.1);}
  .tone a.svc-row:hover{background:rgba(26,26,24,.03);}
  .card .go + .go,.card .facts-mini + .go{margin-top:22px;}

  /* ---------- the wordmark spells the name out ----------
     The domain is apexmhc.com, so "Mental Health Counseling" has to be readable
     in the lockup rather than a hairline of 8px type. */
  .id .sub{font-size:9.5px;letter-spacing:.24em;text-indent:.24em;
           white-space:nowrap;color:var(--ink-2);margin-top:5px;}
  .foot .id .sub{color:var(--paper);}
  @media (max-width:620px){
    .id .sub{font-size:8.5px;letter-spacing:.17em;text-indent:.17em;}
  }
  @media (max-width:380px){
    .id .sub{font-size:8px;letter-spacing:.12em;text-indent:.12em;}
  }