:root{
  --paper:#F7F3E8;
  --paper-2:#FBF8F0;
  --white:#FFFFFF;
  --butter:#F6E7A7;
  --butter-soft:#FDF6DC;
  --plum:#503747;
  --plum-2:#3A2733;
  --ink:#211E20;
  --ink-soft:#54494E;
  --ink-mute:#6F656A;
  --line:#E4DCCB;
  --line-2:#C6BAAE;

  --serif:"Newsreader",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --surface:#F7F3E8;
  --wrap:1240px;
  --pad:clamp(1.15rem,4vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1rem,.97rem + .2vw,1.09rem);line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---- type roles ---- */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.1;letter-spacing:-.015em;
}
.display em{font-style:italic;font-weight:300;color:var(--plum)}
.display em.on-plum{color:var(--butter)}
.h-xl{font-size:clamp(2.4rem,6vw,5rem);line-height:1.04}

.eyebrow{
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.67rem;font-weight:400;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-mute);
}
.eyebrow::before{content:"";width:clamp(24px,3vw,44px);height:1px;background:var(--line-2);flex:none}
.eyebrow b{color:var(--plum);font-weight:500}
.eyebrow--light{color:rgba(247,243,232,.6)}
.eyebrow--light b{color:var(--butter)}
.eyebrow--light::before{background:rgba(247,243,232,.3)}

.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--ink-soft)}
.tiny{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--plum)}

/* ---- buttons ---- */
.btn{
  display:inline-block;background:var(--plum);color:var(--paper);
  padding:1.02rem 1.9rem;font-weight:600;font-size:.86rem;text-decoration:none;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--plum-2);transform:translateY(-2px)}
.btn--butter{background:var(--butter);color:var(--ink)}
.btn--butter:hover{background:#F1DE8E}
.btn--ghost{background:transparent;color:var(--ink);padding:1.02rem .25rem;border-bottom:1px solid var(--ink)}
.btn--ghost:hover{background:transparent;color:var(--plum);border-bottom-color:var(--plum)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}

/* ---- nav ---- */
.nav{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;gap:1.4rem;min-height:74px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:500;font-size:1.4rem;text-decoration:none;letter-spacing:.02em}
.brand span{
  display:block;font-family:var(--mono);font-size:.53rem;
  letter-spacing:.24em;color:var(--ink-mute);margin-top:.12rem;text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:1.55rem;margin-inline-start:auto;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;font-size:.9rem;font-weight:500;
  padding-block:.28rem;border-bottom:1px solid transparent;transition:border-color .18s ease;
}
.nav-links a:hover{border-bottom-color:var(--ink)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--plum);color:var(--plum)}
.nav-links .cta{
  background:var(--butter);border:1px solid #EBDB97;
  padding:.62rem 1.3rem;font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.nav-links .cta:hover{background:#F1DE8E;border-bottom-color:#EBDB97}

/* ============ HERO ============ */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero__in{padding-block:clamp(1.9rem,3.4vw,3.1rem) clamp(3rem,6.5vw,5.5rem);display:flex;flex-direction:column;gap:1.7rem;max-width:66ch}
.hero .lead{max-width:52ch}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.4rem;
}
.hero__strip span{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}

/* ============ SECTIONS ============ */
.sec{padding-block:clamp(3.25rem,6.5vw,6rem)}
.sec--paper{background:var(--paper)}
.sec--paper2{background:var(--paper-2)}
.sec--white{background:var(--white)}
.sec--butter{background:var(--butter-soft)}
.sec--plum{background:var(--plum);color:var(--paper)}
.sec--plum .lead{color:rgba(247,243,232,.78)}

.head{max-width:46ch;display:flex;flex-direction:column;gap:1.15rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.head--wide{max-width:62ch}
.prose{max-width:60ch;display:flex;flex-direction:column;gap:1.05rem;color:var(--ink-soft)}
.sec--plum .prose{color:rgba(247,243,232,.84)}

/* pull line */
.pull{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,3.1vw,2.2rem);line-height:1.3;
  max-width:34ch;color:var(--plum);
  border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2rem;
}
.sec--plum .pull{color:var(--butter);border-top-color:rgba(247,243,232,.25)}

/* outcome band */
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.outcome{background:var(--white);padding:clamp(1.3rem,2.4vw,1.8rem);font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.35rem);color:var(--ink)}

/* checklist */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:.1rem 2.5rem}
.checks li{
  display:flex;gap:.8rem;align-items:flex-start;
  padding-block:.85rem;border-bottom:1px solid var(--line);color:var(--ink-soft);
}
.checks li::before{
  content:"";flex:none;width:9px;height:9px;margin-top:.62rem;
  background:var(--butter);border:1px solid #E0CE84;
}

/* services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.1rem,2.3vw,1.8rem)}
.svc{
  background:var(--white);border:1px solid var(--line);
  padding:clamp(1.7rem,2.9vw,2.4rem);
  display:flex;flex-direction:column;gap:1rem;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.svc:hover,.svc:focus-visible{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 18px 36px rgba(33,30,32,.08)}
.svc b{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--plum)}
.svc h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.18}
.svc p{color:var(--ink-soft);font-size:.98rem}
.svc p + p{margin-top:-.2rem}
.svc .go{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--plum)}

/* process */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:clamp(1.3rem,2.6vw,2.2rem)}
/* light ground: gold on off-white fails contrast, so numbers and rule are plum */
.step{display:flex;flex-direction:column;gap:.55rem;padding-top:1.15rem;border-top:1px solid var(--line-2)}
.step b{font-family:var(--mono);font-size:1.6rem;font-weight:400;color:var(--plum);line-height:1;margin-bottom:.35rem}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--ink)}
.step p{font-size:.95rem;color:var(--ink-soft)}
/* keep a dark variant available for any dark section */
.sec--plum .step,.sec--dark .step{border-top-color:rgba(247,243,232,.25)}
.sec--plum .step b,.sec--dark .step b{color:var(--butter)}
.sec--plum .step h3,.sec--dark .step h3{color:var(--paper)}
.sec--plum .step p,.sec--dark .step p{color:rgba(247,243,232,.8)}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.portrait{position:relative;aspect-ratio:4/5;background:var(--butter);border:1px solid #E0CE84}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .slot{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.5rem;
  background:repeating-linear-gradient(-45deg,rgba(80,55,71,.05) 0 15px,transparent 15px 30px),var(--butter);
}
.portrait .slot b{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--plum)}
.portrait .slot span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-soft)}
.sig{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.sig b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500}
.sig span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--white);padding:clamp(1.4rem,2.5vw,2rem) 1.1rem;display:flex;flex-direction:column;gap:.35rem;text-align:center}
.stat b{font-family:var(--serif);font-weight:400;color:var(--plum);font-size:clamp(2rem,4.2vw,3rem);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);line-height:1.5}

/* beliefs */
.beliefs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3rem)}
.belief{display:flex;flex-direction:column;gap:.6rem;padding-top:1.15rem;border-top:2px solid var(--plum)}
.belief b{font-family:var(--mono);font-size:.74rem;color:var(--plum)}
.belief h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;line-height:1.25}
.belief p{font-size:.95rem;color:var(--ink-soft)}

/* solutions list */
.sols{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.sols li{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding-block:1.15rem;border-bottom:1px solid var(--line-2);
  font-size:clamp(1rem,1.9vw,1.14rem);color:var(--ink);
}
.sols li b{font-family:var(--mono);font-size:.7rem;color:var(--plum);flex:none;margin-top:.42rem}

/* newsletter */
.news__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.news form{display:flex;flex-direction:column;gap:.7rem}
.news label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.news input{font-family:var(--sans);font-size:1rem;padding:.95rem 1.05rem;border:1px solid #E0CE84;background:var(--white);color:var(--ink)}
.news input:focus-visible{outline:2px solid var(--plum);outline-offset:1px}
.news .btn{align-self:flex-start;margin-top:.3rem}
.news small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft)}

/* closing */
.close__in{max-width:50ch;display:flex;flex-direction:column;gap:1.4rem}

/* footer */
.foot{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem)}
.foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:2rem}
.foot h4{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:1rem;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.foot a{text-decoration:none;font-size:.94rem}
.foot a:hover{color:var(--plum)}
.foot__blurb{max-width:36ch;color:var(--ink-soft);font-size:.94rem}
.foot__line{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,3.6vw,2.4rem);color:var(--plum);
  margin-top:clamp(2rem,4vw,3rem);text-align:center;
}
.foot__bar{
  border-top:1px solid var(--line);margin-top:clamp(1.75rem,3.5vw,2.5rem);padding-top:1.3rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
}

a:focus-visible,button:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

@media (max-width:820px){
  .founder{grid-template-columns:1fr}
  .portrait{max-width:340px}
}
/* ----------------------------------------------------------------- MOTION -- */
/* Everything enters ONCE. Nothing loops. No parallax, no button sheen,
   no hover motion beyond a colour or border change.
   The hidden state is applied by JS (see the starter page) so that the
   content is fully readable if JS never runs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================================
   MOTION — the full layer, as it runs on the website
   ----------------------------------------------------------------------------
   One easing for everything: var(--ease).
   Everything enters ONCE. Nothing loops.
   No parallax. No shine sweeping a button. No hover motion beyond colour/border.
   (Both of those were built, reviewed, and deliberately removed.)

   Pair this with alchemix-motion.js, which applies the hidden state from
   JavaScript so the page stays readable if the script never runs.
   ========================================================================== */

/* -- The hero assembly: three fragments lock into formation over dashed
      guides. This is the signature moment of the brand. Runs once, on load. -- */
@keyframes axLockA { from { transform: translate(34px,-40px) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes axLockB { from { transform: translate(-40px,26px) rotate(11deg);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes axLockC { from { transform: translate(30px,34px) rotate(-8deg);   opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes axGuide { from { opacity: 0; } to { opacity: 1; } }

/* Input labels settle at 30% — they must NOT disappear, or the left-to-right
   flow stops reading once the animation is at rest. */
@keyframes axOut   { 0%, 45% { opacity: 0.62; } 100% { opacity: 0.3; } }
@keyframes axIn    { 0%, 62% { opacity: 0; }    100% { opacity: 1; } }
@keyframes axSlide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* Lines draw themselves in. This is how EVERY line on the site animates —
   stroke-dashoffset, never scaling the element. */
@keyframes axDraw  { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }

/* Put .motif--animated on a motif in state C to have it assemble on load. */
.motif--animated .motif__guides { animation: axGuide 1.2s ease .2s both; }
.motif--animated .motif__slab,
.motif--animated .motif__dark,
.motif--animated .motif__light {
  transform-box: fill-box;
  transform-origin: center;
}
.motif--animated .motif__slab  { animation: axLockA 1.7s var(--ease) 1s both; }
.motif--animated .motif__dark  { animation: axLockB 1.7s var(--ease) 1.2s both; }
.motif--animated .motif__light { animation: axLockC 1.7s var(--ease) 1.4s both; }

/* Helpers for diagram parts. Set the delay per element with style="--d:.45s"
   and, where it differs, the duration with --dur. */
.ax-out   { animation: axOut  var(--dur, 3.4s) ease-out var(--d, 0s) both; }
.ax-in    { animation: axIn   var(--dur, 3.4s) ease-out var(--d, 0s) both; }
.ax-slide { animation: axSlide .8s var(--ease) var(--d, 0s) both; }
.ax-draw  { animation: axDraw var(--dur, 1.5s) ease-out var(--d, 0s) both; }
/* A path using .ax-draw needs stroke-dasharray="520" on the element itself. */

/* -- The scroll-progress hairline in the header. 1px of plum, width = scroll %.
      Add <div class="header__progress" data-scroll-progress></div> inside
      .header (which is position:sticky, so it is the containing block). -- */
.header__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 0;
  background: var(--plum);
}

/* ============================================================================
   THE LARGER PATTERNS
   ----------------------------------------------------------------------------
   Markup for each of these is in components/ — paste it, then style comes
   from here. All values lifted from the built site.
   ========================================================================== */


/* ---- hero signature: the motif assembles on load (Gal's motion, my layout) ---- */
.hero{position:relative}
.hero__motif{
  position:absolute; inset-inline-end:var(--pad); top:50%;
  transform:translateY(-50%); width:min(28vw,320px); display:none; z-index:1;
}
.hero__in{position:relative; z-index:2}
@media (min-width:1120px){ .hero__motif{display:block} }

/* the scroll-progress hairline sits on my sticky nav */
.nav{position:sticky; top:0; z-index:50}
.nav .header__progress{position:absolute; left:0; bottom:-1px}


/* ---- animated components (Gal's kit, fitted to this page) ---- */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
.hero-panel{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:520px}
.hero-panel__block{position:absolute;inset:0 -50vw 0 0;background:var(--plum);clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.hero-panel__inner{position:relative;z-index:2;width:100%;padding:clamp(1.5rem,3vw,2.5rem)}
.dia{width:100%;height:auto;display:block}
.dia--lg{max-width:530px;overflow:visible;margin-inline:auto}
.dia--sm{display:none;max-width:340px;margin-inline:auto}
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr}
  .hero-panel{min-height:0;margin-inline:calc(var(--pad)*-1);padding-block:2.5rem}
  .hero-panel__block{inset:0;clip-path:none}
}
@media (max-width:640px){ .dia--lg{display:none} .dia--sm{display:block} }

/* the method spine */
.spine{width:100%;height:auto;display:block;margin-bottom:4px}
@media (max-width:1080px){ .spine{display:none} }
.method-rule{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}

/* a large motif sitting behind the philosophy band */
.sec--sig{position:relative;overflow:hidden}
.sec--sig .sig{position:absolute;inset-inline-end:-4%;top:50%;transform:translateY(-50%);width:min(46vw,520px);opacity:.09;z-index:0;pointer-events:none}
.sec--sig .wrap{position:relative;z-index:1}



/* ===== consulting page ===== */
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4{margin:0;text-wrap:balance}
.display em{font-style:italic;font-weight:300;color:var(--plum)}
.eyebrow::before{content:"";width:clamp(24px,3vw,44px);height:1px;background:var(--line-2);flex:none}
.btn:hover{background:var(--plum-2);transform:translateY(-2px)}
.nav-links{display:flex;align-items:center;gap:1.55rem;margin-inline-start:auto;flex-wrap:wrap}
.nav-links a:hover{border-bottom-color:var(--ink)}
.nav-links .cta:hover{background:#F1DE8E;border-bottom-color:#EBDB97}
.sec--plum .pull{color:var(--butter);border-top-color:rgba(247,243,232,.25)}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(1.1rem,2.3vw,1.8rem)}
.blk{background:var(--white);border:1px solid var(--line);padding:clamp(1.6rem,2.8vw,2.2rem);display:flex;flex-direction:column;gap:.85rem}
.blk b{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--plum)}
.blk h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.28rem,2.2vw,1.62rem);line-height:1.18}
.blk .who{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding-block:.55rem;border-block:1px solid var(--line)}
.blk p{font-size:.97rem;color:var(--ink-soft)}
.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:.1rem 2.5rem}
.qs p{
  font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.28rem);
  padding-block:1rem;border-bottom:1px solid rgba(247,243,232,.22);color:var(--paper);
}
.gets{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.gets li{display:flex;gap:1.1rem;align-items:flex-start;padding-block:1.15rem;border-bottom:1px solid var(--line-2)}
.gets b{font-family:var(--mono);font-size:.7rem;color:var(--plum);flex:none;margin-top:.42rem}
.gets div h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:.25rem}
.gets div p{font-size:.97rem;color:var(--ink-soft)}
.spectrum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sp{background:var(--white);padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.5rem}
.sp .bar{height:5px;background:var(--butter)}
.sp:nth-child(2) .bar{background:linear-gradient(90deg,var(--butter) 66%,var(--line) 66%)}
.sp:nth-child(1) .bar{background:linear-gradient(90deg,var(--butter) 25%,var(--line) 25%)}
.sp:nth-child(3) .bar{background:linear-gradient(90deg,var(--plum) 85%,var(--line) 85%)}
.sp:nth-child(4) .bar{background:var(--plum)}
.sp h3{font-family:var(--serif);font-weight:400;font-size:1.22rem}
.sp p{font-size:.94rem;color:var(--ink-soft)}
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.fit article{background:var(--white);border:1px solid var(--line);padding:clamp(1.6rem,2.9vw,2.3rem)}
.fit h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:.6rem 0 1rem}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{display:flex;gap:.8rem;align-items:flex-start;padding-block:.7rem;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--ink-soft)}
.fit li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55rem;background:var(--butter);border:1px solid #E0CE84}
.fit--no li::before{background:transparent;border-color:var(--line-2)}
.path{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:clamp(1.3rem,2.6vw,2.2rem)}
.stage{display:flex;flex-direction:column;gap:.55rem;padding-top:1.15rem;border-top:2px solid var(--butter)}
.stage b{font-family:var(--mono);font-size:.74rem;color:var(--butter)}
.stage h3{font-family:var(--serif);font-weight:400;font-size:1.32rem}
.stage p{font-size:.95rem;color:rgba(247,243,232,.8)}
.stage .tag{
  align-self:flex-start;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.3rem .7rem;border:1px solid rgba(247,243,232,.35);
  color:rgba(247,243,232,.8);margin-top:.3rem;
}
.stage .tag--paid{background:var(--butter);color:var(--ink);border-color:var(--butter)}
.faq{border-top:1px solid var(--line-2);max-width:70ch}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding-block:1.25rem;font-family:var(--serif);font-size:clamp(1.1rem,2.1vw,1.4rem);display:flex;gap:1rem;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;color:var(--plum);font-family:var(--sans);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--plum)}
.faq p{padding-bottom:1.4rem;color:var(--ink-soft);max-width:62ch}
.close__note{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:rgba(247,243,232,.62);line-height:1.9}
.foot__bar{border-top:1px solid var(--line);margin-top:clamp(1.75rem,3.5vw,2.5rem);padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* ===== training page ===== */
.btn--sm{padding:.82rem 1.5rem;font-size:.76rem}
.hero__note{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-mute);
  border-top:1px solid var(--line);padding-top:1.3rem;margin-top:.4rem;max-width:60ch;line-height:1.9;
}
.fmt{
  background:var(--white);border:1px solid var(--line);
  margin-bottom:clamp(1.1rem,2.2vw,1.8rem);
}
.fmt__top{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;
  padding:1.1rem clamp(1.4rem,3vw,2.4rem);
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.fmt__dur{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.fmt__best{font-style:italic;font-family:var(--serif);font-size:1rem;color:var(--ink-mute);margin-inline-start:auto;max-width:52ch}
.fmt__body{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(1.4rem,3.5vw,3rem);padding:clamp(1.5rem,3.2vw,2.6rem);
}
.fmt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12;margin-bottom:1.1rem}
.fmt__body p{color:var(--ink-soft)}
.fmt__body p + p{margin-top:.9rem}
.fmt__claim{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.12rem,2.1vw,1.45rem);line-height:1.35;color:var(--plum);
  border-inline-start:2px solid var(--butter);padding-inline-start:1.1rem;margin-top:1.3rem;
}
.fmt ul{list-style:none;margin:0;padding:0}
.fmt li{
  display:flex;gap:.8rem;align-items:flex-start;
  padding-block:.7rem;border-bottom:1px solid var(--line);
  font-size:.98rem;color:var(--ink-soft);
}
.fmt li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55rem;background:var(--butter);border:1px solid #E0CE84}
.fmt__get{
  background:var(--butter-soft);border:1px solid #EFE0B0;
  padding:1rem 1.2rem;margin-top:1.3rem;font-size:.96rem;color:var(--ink-soft);
}
.fmt__foot{padding:0 clamp(1.5rem,3.2vw,2.6rem) clamp(1.5rem,3.2vw,2.4rem)}
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.inc{display:flex;flex-direction:column;gap:.6rem;padding-top:1.15rem;border-top:2px solid var(--butter)}
.inc h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.2}
.inc p{font-size:.95rem;color:rgba(247,243,232,.82)}
.diff{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.diff article{background:var(--white);border:1px solid var(--line);padding:clamp(1.5rem,2.8vw,2.2rem);display:flex;flex-direction:column;gap:.75rem}
.diff b{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--plum);line-height:1}
.diff h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;line-height:1.22}
.diff p{font-size:.96rem;color:var(--ink-soft)}
.diff__end{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(3rem,10vw,7rem);color:var(--plum);
  text-align:center;margin-top:clamp(2rem,4vw,3rem);line-height:1;
}
/* ---- nav brand lockup: mark + wordmark, gold/plum X ---- */
.brand--logo{display:flex;align-items:center;gap:.7rem}
.brand__mark{width:42px;height:42px;display:block;flex:none}
.brand--logo .brand__txt{display:block;font-family:var(--serif);font-weight:500;font-size:1.85rem;letter-spacing:.02em;color:var(--ink);text-transform:none;line-height:1.06;margin:0}
.brand--logo .brand__x{font:inherit;letter-spacing:inherit;text-transform:none;font-style:normal;background:linear-gradient(90deg,#C7A24A 0 50%,#503747 50% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand--logo .brand__tag{display:block;font-family:var(--mono);font-style:normal;font-size:.53rem;letter-spacing:.24em;color:var(--ink-mute);margin-top:.12rem;text-transform:uppercase}
@media(max-width:560px){.brand__mark{width:34px;height:34px}}

/* ---- hero actions: v2 button treatment ---- */
.hero .actions{gap:1.1rem}
.btn--hero{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:18px 28px;font-size:15.5px;font-weight:500;letter-spacing:0;
  text-transform:none;background:var(--plum);color:var(--paper);
  transition:background .2s ease;
}
.btn--hero:hover{background:var(--ink);transform:none}
.btn--hero .btn__arrow{font-family:var(--mono);color:var(--butter)}
.btn--hero-ghost{
  display:inline-flex;align-items:center;
  padding:18px 4px;font-size:15.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ink);background:transparent;
  border-bottom:1px solid rgba(33,30,32,.25);transition:border-color .2s ease;
}
.btn--hero-ghost:hover{border-bottom-color:var(--plum);color:var(--ink);transform:none}

/* ---- hero diagram (Option 3 assembly) ---- */
@keyframes axFade { from { opacity:0 } to { opacity:1 } }
@keyframes axRise { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes axPulse { 0%,100% { opacity:.32; transform:scale(1) } 50% { opacity:.7; transform:scale(1.06) } }
.dia--lg{max-width:540px}
@media (prefers-reduced-motion: reduce){
  .dia *{animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important}
  [data-ax-dots]{display:none}
}

/* ---- hero panel: clear the wedge so no diagram label is clipped ---- */
.hero-panel__block{clip-path:polygon(96px 0,100% 0,100% 100%,0 100%)}
.hero-panel__inner{padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,96px) clamp(96px,8vw,120px)}
@media (max-width:1080px){
  .hero-panel__block{clip-path:none}
  .hero-panel__inner{padding:clamp(32px,5vw,56px) var(--pad)}
}

/* ---- more room for the hero diagram ---- */
.hero__grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
.dia--lg{max-width:580px}
@media (max-width:1080px){ .hero__grid{grid-template-columns:1fr} }

/* ---- 01 where we come in: prose + illustration ---- */
.pos__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.prose--01{max-width:52ch;gap:1.35rem}
.prose__strong{color:var(--ink)}
.prose__quiet{color:var(--ink-mute);font-size:.98rem;margin-top:.4rem}
.findings{margin-top:.4rem;border-top:1px solid rgba(33,30,32,.12)}
.finding{display:flex;gap:1.1rem;padding:1rem 0;border-bottom:1px solid rgba(33,30,32,.12)}
.finding__mark{font-family:var(--mono);font-size:.7rem;color:var(--plum);padding-top:.28rem;flex:none}
.finding span:last-child{font-size:1.03rem;line-height:1.5;color:var(--ink)}
.pos__art{margin:0;align-self:center}
.pos__art img{width:100%;max-width:560px;height:auto;display:block;margin-inline:auto}
@media (max-width:900px){
  .pos__grid{grid-template-columns:1fr}
  .pos__art{max-width:460px;margin-inline:auto}
}

/* ---- 02: the faded mark behind the philosophy band ---- */
.sec--sig .sig{border:0;padding:0;margin:0;height:auto;opacity:.075;width:min(40vw,440px)}

/* ---- 03 the shift: dark band, Option 3 treatment ---- */
.shift{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;padding-block:clamp(5.5rem,11vw,8.75rem)}
.shift__glow{position:absolute;top:-10%;right:-6%;width:520px;height:520px;background:radial-gradient(circle,rgba(80,55,71,.55),transparent 68%);pointer-events:none}
.shift .wrap{position:relative;z-index:1}
.eyebrow--gold{color:var(--butter)}
.eyebrow--gold::before{background:rgba(246,231,167,.55)}
.shift__h{font-weight:300;font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.05;letter-spacing:-.022em;max-width:22ch;margin:clamp(1.5rem,3vw,2.1rem) 0 clamp(2.25rem,4.4vw,3.75rem)}
.shift__h em{color:var(--butter)}
.shift__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.9rem,5vw,5.5rem);align-items:start;padding-bottom:clamp(2.75rem,5vw,4.5rem);border-bottom:1px solid rgba(247,243,232,.18)}
.shift__cols p{margin:0;font-size:1.09rem;line-height:1.68;color:rgba(247,243,232,.72);max-width:52ch;text-wrap:pretty}
.shift__p2{color:rgba(247,243,232,.9) !important;max-width:46ch !important}
.shift__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(247,243,232,.16);margin-top:1px}
.shiftcard{background:var(--ink);padding:clamp(1.75rem,3.2vw,2.75rem) clamp(1.5rem,2.6vw,2.25rem);display:flex;flex-direction:column;gap:1rem;transition:background .35s ease}
.shiftcard:hover{background:var(--ink)}
.shiftcard__k{font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;color:var(--butter)}
.shiftcard__t{font-family:var(--serif);font-weight:300;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.14;color:var(--paper)}
.shiftcard__p{font-size:.97rem;line-height:1.62;color:rgba(247,243,232,.6)}
@media (max-width:900px){ .shift__grid{grid-template-columns:1fr} }

/* ---- 04 who we work with ---- */
.who__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start;margin-bottom:clamp(2.5rem,5vw,4.25rem)}
.who__h{font-weight:300;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.016em;max-width:18ch;margin-top:clamp(1.4rem,2.6vw,2.1rem)}
.who__lead{padding-top:clamp(0px,5vw,4rem);max-width:50ch}
.whorows{border-top:1px solid rgba(33,30,32,.14)}
.whorow{display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(0,.85fr);align-items:baseline;gap:clamp(.9rem,2vw,1.5rem);padding:1.5rem .5rem;border-bottom:1px solid rgba(33,30,32,.14);transition:background .25s ease}
.whorow:hover{background:rgba(80,55,71,.045)}
.whorow__n{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;color:var(--ink-mute)}
.whorow h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.22;letter-spacing:-.01em;margin:0;text-wrap:pretty}
.whorow p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.who__close{margin-top:clamp(2.5rem,5vw,4.25rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.75rem,4vw,4.5rem);align-items:center}
.who__close h3{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.7vw,2.35rem);line-height:1.14;letter-spacing:-.014em;color:var(--ink);max-width:22ch;text-wrap:pretty}
.who__close > div{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start;max-width:52ch}
.who__close p{margin:0;font-size:1.06rem;line-height:1.68;color:var(--ink-soft)}
@media (max-width:820px){
  .who__head{grid-template-columns:1fr}
  .who__lead{padding-top:0}
  .whorow{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .whorow p{grid-column:2}
}

/* ---- 03: four cards, gold section number ---- */
.shift__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){ .shift__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .shift__grid{grid-template-columns:1fr} }
.eyebrow--gold b{color:var(--butter);font-weight:400}

/* ---- 04: cream ground, hairline on top ---- */
.sec--hair{border-top:1px solid rgba(33,30,32,.14)}

/* ---- 04 closing pull line spans the page ---- */
.pull--wide{max-width:none;width:100%}

/* ---- 05 services: white ground, full-width head, cream cards ---- */
.head--full{max-width:none}
.svc__head{max-width:none}
.svc{background:var(--paper);border:1px solid var(--line);position:relative;overflow:hidden;transition:background .3s ease,transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease}
.svc__tick{position:absolute;top:0;left:0;height:2px;width:10px;background:var(--plum);transition:width .5s var(--ease)}
.svc:hover,.svc:focus-visible{background:var(--paper-2);transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 22px 44px rgba(33,30,32,.1)}
.svc:hover .svc__tick,.svc:focus-visible .svc__tick{width:100%}
.svc:hover .go,.svc:focus-visible .go{color:var(--ink)}
.svc .go{transition:color .3s ease}
@media (prefers-reduced-motion: reduce){ .svc:hover{transform:none} }

/* ---- hero: contain the full-bleed panel bleed below 1080px ---- */
.hero{overflow-x:clip}
@media (max-width:1080px){
  .hero-panel{margin-inline:0;width:100%}
  .hero-panel__block{inset:0 -50vw 0 calc(var(--pad)*-1)}
}

/* Root cause: the scroll container is <html>, which was overflow-x:visible, so
   pre-reveal translateX offsets on cream sections escaped the viewport. Clip it. */
html{overflow-x:clip}

/* ---- 06 how we work: full-width head, five steps in one row ---- */
.how__head{max-width:none}
.process{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.9rem)}
@media (max-width:900px){ .process{grid-template-columns:1fr} }

/* ---- 06: one mark per step, aligned by the grid itself ---- */
.step{border-top:0;padding-top:0;gap:0}
.stepmark{display:block;width:clamp(46px,4.4vw,62px);height:auto;margin-bottom:.85rem}
.step__body{display:flex;flex-direction:column;gap:.55rem;padding-top:1.15rem;border-top:1px solid var(--line-2)}

/* ---- footer: Option 3 treatment ---- */
.foot--dark{background:var(--ink);border-top:0;color:rgba(247,243,232,.7);padding-block:clamp(3.5rem,7vw,4.75rem) clamp(2.4rem,4.4vw,3.4rem)}
.foot--dark .foot-in{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(2rem,4.4vw,4rem);align-items:start}
.foot__brand{max-width:36ch}
.foot__brand img{height:34px;width:auto;display:block;margin-bottom:1.5rem}
.foot--dark .foot__blurb{font-size:.97rem;line-height:1.65;color:rgba(247,243,232,.6);margin:0;max-width:36ch}
.foot--dark h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,243,232,.4);margin-bottom:1.1rem;font-weight:400}
.foot--dark ul{gap:.75rem}
.foot--dark a{font-size:.94rem;color:rgba(247,243,232,.78);text-decoration:none;transition:color .2s ease}
.foot--dark a:hover{color:var(--butter)}
.foot--dark li span{font-size:.94rem;color:rgba(247,243,232,.6)}
.foot--dark .foot__bar{border-top:1px solid rgba(247,243,232,.14);margin-top:clamp(2.25rem,4.4vw,3.25rem);padding-top:1.5rem;color:rgba(247,243,232,.42);justify-content:space-between}

/* ============================================================================
   UI/UX AUDIT PASS 1 — spacing rhythm, one button spec, grid cell counts,
   small-text contrast. Every value here replaces an inconsistency, not a
   design decision.
   ========================================================================== */

/* -- 1. ONE button spec (plum 18/28, 15.5px, 500, sentence case). The old
      uppercase 13.76px/600 treatment is gone; gold and ghost inherit metrics. */
.btn,.btn--sm{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:18px 28px;font-size:15.5px;font-weight:500;letter-spacing:0;text-transform:none;
}
.btn:hover{transform:none}
.btn--butter{background:var(--butter);color:var(--ink)}
.btn--butter:hover{background:#F1DE8E}
.btn--butter .btn__arrow{color:var(--plum)}
.btn--ghost,.btn--hero-ghost{padding:18px 4px;background:transparent}
.sec--plum .btn--ghost{color:var(--paper);border-bottom-color:rgba(247,243,232,.4)}
.sec--plum .btn--ghost:hover{color:var(--butter);border-bottom-color:var(--butter)}

/* -- 2. Section rhythm: every band is symmetric 96/96. The dark band was 140. */
.shift{padding-block:clamp(4rem,7vw,6rem)}
/* head-to-body distance is one number across the page (was 51.2 vs 68) */
.who__head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.head{margin-bottom:clamp(2rem,4vw,3.2rem)}

/* -- 3. Grids: explicit cell counts, no auto-fit leaving an empty column. */
.shift__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .shift__cols{grid-template-columns:1fr} }
.news__in{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){ .news__in{grid-template-columns:1fr} }
.foot--dark .foot-in{grid-template-columns:1.35fr repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .foot--dark .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .foot--dark .foot-in{grid-template-columns:1fr} }

/* -- 4. Micro-text: nothing below 11px, and everything under 13px clears 4.5:1.
      Footer labels were .4 alpha (3.5:1) and the bottom bar .42 (3.7:1). */
.foot--dark h4{color:rgba(247,243,232,.72);font-size:.7rem}
.foot--dark .foot__bar{color:rgba(247,243,232,.66);font-size:.68rem}
.news label{font-size:.7rem;color:var(--ink-soft)}
.news small{font-size:.68rem;color:var(--ink-soft);line-height:1.7}

/* ============================================================================
   UI/UX AUDIT PASS 2 — breakpoint integrity at 1440 / 1024 / 768 / 390.
   Every grid now has a cell count that divides at every width, and no tap
   target on a phone is under 44px.
   ========================================================================== */

/* 3 service cards: 3 across or 1 — a 2-column state left one card orphaned. */
.services{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .services{grid-template-columns:1fr} }

/* 4 beliefs: 4 / 2 / 1. The auto-fit produced 3 columns at 1024 (orphan). */
.beliefs{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 1080, not 1024: at exactly 1024 the query rounds off on fractional-DPR
   screens and four 208px columns break words. */
@media (max-width:1080px){ .beliefs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .beliefs{grid-template-columns:1fr} }

/* 5 steps: five across down to 1080, where 170px columns start breaking words.
   Below that each step becomes a row — mark left, text right — so the sequence
   still reads top to bottom instead of five tall blocks. */
@media (max-width:1080px){
  .process{grid-template-columns:1fr;gap:0}
  .step{display:grid;grid-template-columns:clamp(52px,9vw,72px) minmax(0,1fr);
        column-gap:clamp(1rem,3vw,1.75rem);align-items:start;
        padding-block:1.35rem;border-top:1px solid var(--line-2)}
  .step:last-child{border-bottom:1px solid var(--line-2)}
  .stepmark{width:100%;margin:.15rem 0 0}
  .step__body{border-top:0;padding-top:0}
}

/* Phone: footer and inline list links reach a 44px target. */
@media (max-width:640px){
  .foot--dark ul{gap:.1rem}
  .foot--dark li a,.foot--dark li span{display:flex;align-items:center;min-height:44px}
  .svc .go{min-height:44px;display:flex;align-items:center}
}

/* ============================================================================
   UI/UX AUDIT PASS 3 — one vertical rhythm for eyebrow → heading, and no
   widows in body copy.
   ========================================================================== */

/* Measured: 18px in six sections, 34px in 03 and 04, 22px in 09. One value. */
.shift__h{margin-top:1.15rem}
.who__h{margin-top:1.15rem}
.close__in .display{margin-top:0}
.close__in{gap:1.15rem}

/* Body copy breaks on sense, not on the last word left alone. */
p,li,.pull,.shift__cols p,.whorow p{text-wrap:pretty}

/* ============================================================================
   AUDIT PASS 4 — the assembly marks were rendering at ~0.23px per viewBox
   unit: shards under 26px and a dashed guide below 1px. Bigger box, tighter
   viewBox on stages 02-05, heavier guide stroke.
   ========================================================================== */
.stepmark{width:clamp(84px,7vw,120px);margin-bottom:1rem}
@media (max-width:1080px){
  .step{grid-template-columns:clamp(84px,13vw,120px) minmax(0,1fr)}
  .stepmark{width:100%;margin:.1rem 0 0}
}

/* ============================================================================
   NAV — "What we do" menu. Opens on hover (pointer), on click (touch) and on
   focus (keyboard); Escape closes. Panel geometry follows the house rules:
   zero radius, 1px hairline, hairlines between items, plum tick on hover.
   ========================================================================== */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop__btn{
  font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink);
  background:none;border:0;border-bottom:1px solid transparent;
  padding:.28rem 0;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  transition:border-color .18s ease;
}
.nav-drop__btn i{font-style:normal;font-size:.6rem;line-height:1;color:var(--plum);transition:transform .18s ease}
.nav-drop:hover .nav-drop__btn,.nav-drop__btn[aria-expanded="true"]{border-bottom-color:var(--ink)}
.nav-drop__btn[aria-expanded="true"] i{transform:rotate(180deg)}
.nav-drop--current .nav-drop__btn{color:var(--plum);border-bottom-color:var(--plum)}
.nav-drop__panel{
  position:absolute;top:calc(100% + .95rem);left:50%;
  transform:translate(-50%,-2px);min-width:236px;
  background:var(--paper-2);border:1px solid var(--line);
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:60;
}
.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel,
.nav-drop__panel[data-open]{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-drop__panel a{
  position:relative;display:flex;align-items:center;min-height:46px;
  padding:.5rem 1.15rem;font-size:.9rem;font-weight:500;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s ease;
}
.nav-drop__panel a:last-child{border-bottom:0}
.nav-drop__panel a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--plum);transition:width .3s var(--ease)}
.nav-drop__panel a:hover{color:var(--plum)}
.nav-drop__panel a:hover::before{width:2px}
/* No burger menu in this design: on a phone the three items simply sit open. */
@media (max-width:700px){
  .nav-drop{display:block;width:100%}
  .nav-drop__btn{display:none}
  .nav-drop__panel{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;width:100%;background:transparent;border:0;
    display:flex;flex-wrap:wrap;gap:0 1.55rem;
  }
  .nav-drop__panel a{min-height:34px;padding:.28rem 0;border-bottom:1px solid transparent}
  .nav-drop__panel a::before{display:none}
  .nav-drop__panel a:hover{border-bottom-color:var(--ink);color:var(--ink)}
}

/* ============================================================================
   CASE STUDY — the reusable pattern for Selected work.
   Three layout variants share one type and rhythm system:
     .case--split  head column + blocks column (desktop), stacked on tablet
     .case--flip   the same, mirrored
     .case--wide   full-width head, blocks in a 2x2 grid
   ========================================================================== */
.case{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
.case--split,.case--flip{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
.case--flip .case__head{order:2}
.case--flip .case__blocks{order:1}
@media (max-width:980px){
  .case--split,.case--flip{grid-template-columns:1fr}
  .case--flip .case__head{order:0}
  .case--flip .case__blocks{order:0}
}

.case__head{display:flex;flex-direction:column;gap:1rem}
.case__n{
  font-family:var(--serif);font-weight:300;font-size:clamp(3.25rem,7vw,6rem);
  line-height:.85;letter-spacing:-.02em;color:var(--plum);
  font-variant-numeric:tabular-nums;
}
.case__cat{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);padding-top:.9rem;border-top:1px solid var(--line-2);
}
.case__h{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.12;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty;
}

.case__blocks{border-top:1px solid var(--line-2)}
.case--wide .case__blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4.5vw,4.5rem)}
@media (max-width:820px){ .case--wide .case__blocks{grid-template-columns:1fr} }
.case__block{padding-block:1.35rem;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:.7rem}
.case__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
.case__block p{font-size:1.03rem;line-height:1.62;color:var(--ink-soft);max-width:56ch}
.case__list{list-style:none;margin:.15rem 0 0;padding:0;display:grid;gap:.1rem}
.case__list li{display:flex;gap:.75rem;align-items:flex-start;font-size:.97rem;color:var(--ink-soft);padding-block:.4rem}
.case__list li::before{content:"";flex:none;width:8px;height:8px;margin-top:.52rem;background:#C7A24A}

/* the impact is set apart: a serif line, not another paragraph */
.case__impact{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.32;color:var(--plum);
  max-width:44ch;
}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--plum);border:1px solid var(--line-2);padding:.34rem .72rem;
}

/* dark ground variant (one case per page, mid-scroll) */
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--dark .case__n{color:var(--butter)}
.sec--dark .case__cat{color:rgba(247,243,232,.66);border-top-color:rgba(247,243,232,.16)}
.sec--dark .case__h{color:var(--paper)}
.sec--dark .case__blocks{border-top-color:rgba(247,243,232,.16)}
.sec--dark .case__block{border-bottom-color:rgba(247,243,232,.16)}
.sec--dark .case__label{color:var(--butter)}
.sec--dark .case__block p{color:rgba(247,243,232,.72)}
.sec--dark .case__list li{color:rgba(247,243,232,.72)}
.sec--dark .case__list li::before{background:var(--butter)}
.sec--dark .case__impact{color:var(--butter)}
.sec--dark .tag{color:var(--butter);border-color:rgba(247,243,232,.3)}
.sec--dark .eyebrow{color:rgba(247,243,232,.66)}
.sec--dark .eyebrow::before{background:rgba(247,243,232,.3)}
.sec--dark .eyebrow b{color:var(--butter)}

/* the Assembly axis under the Selected work intro — used once on the page */
.axis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);
  border-top:1px solid var(--line-2);padding-top:1.6rem;margin-top:.4rem}
.axis__step{display:flex;flex-direction:column;gap:.85rem}
.axis__mark{display:block;width:clamp(72px,7vw,104px);height:auto}
.axis__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}

/* the "it supports / it brings together" sub-label — a class, not an inline
   colour, so the dark-ground override can win (it measured 2.95:1 inline) */
.case__label--quiet{color:var(--ink-mute);margin-top:.35rem}
.sec--dark .case__label--quiet{color:rgba(247,243,232,.72)}

/* the Assembly axis marks were rendering 18-29px shards with a 1.3px dashed
   stroke — same illegibility as the step marks. Match their box. */
.axis__mark{width:clamp(104px,10vw,140px)}

/* All three axis stages share one viewBox now, so one box width gives one
   scale — the three moments read as the same logo, not three logos. */
.axis__mark{width:clamp(140px,14vw,190px)}

/* The menu button is a <button>: it resets line-height, so its 1px underline
   sat ~3px above the underline of the neighbouring links. */
.nav-drop__btn{line-height:1.7;white-space:nowrap}

/* Root cause A: .case--wide has 5 blocks in a 2-column grid — an odd child
   count in an even grid. "Built with" is the case's footer, so it spans. */
.case--wide .case__block:last-child{grid-column:1 / -1}

/* Root cause B: the axis mark carried a fixed 140px floor inside a 1fr column
   that is 87px wide on a phone. The mark is now fluid, and below 640px each
   step becomes a row (3 items in 1 column divides). */
.axis__mark{width:min(100%,190px)}
@media (max-width:640px){
  .axis{grid-template-columns:1fr;gap:1.5rem}
  /* 30vw = 117px at 390, so the slab clears 29px and the dashed guide 1.7px */
  .axis__step{display:grid;grid-template-columns:clamp(110px,30vw,140px) minmax(0,1fr);
              align-items:center;column-gap:1.1rem;gap:0}
  .axis__mark{width:100%}
}

/* Root cause: .tag was authored at .62rem (9.92px), under the 11px floor this
   design sets for itself. The tag row is flex-wrap, so size costs nothing. */
.tag{font-size:.7rem;letter-spacing:.1em;padding:.36rem .78rem}

/* One case composition for the whole page (the 05 / 03 layout): full-width
   head, blocks in 2 columns, "Built with" spanning both. .case--split and
   .case--flip are retired — keeping two compositions made the five cases read
   as different templates rather than one system. */
.case{display:block}
.case__head{margin-bottom:clamp(2rem,4.5vw,3.25rem)}
.case__n{display:block}
.case__cat{display:block}

/* List markers: the gold squares were a foreign shape. The recurring device in
   this system is the short hairline that precedes every eyebrow, so the list
   markers become the same rule — 16px of 1px gold, set at the first line's
   optical centre. Quiet, editorial, and already part of the language. */
.case__list{gap:0}
.case__list li{gap:1rem;padding-block:.5rem;align-items:baseline}
.case__list li::before{
  content:"";flex:none;width:16px;height:1px;background:#C7A24A;
  transform:translateY(-.35em);
}
.sec--dark .case__list li::before{background:var(--butter)}

/* ============================================================================
   WHAT WE DO pages (consulting + training) — audit fixes
   ========================================================================== */

/* 1. List markers: the same 8px gold squares that were replaced on Selected
      work. One device across the site — 16px of 1px gold, the eyebrow rule. */
.checks li::before,.fit li::before,.fmt li::before{
  width:16px;height:1px;background:#C7A24A;border:0;margin-top:0;
  transform:translateY(-.35em);
}
.checks li,.fit li,.fmt li{align-items:baseline;gap:1rem}
.fit--no li::before{background:var(--line-2)}
.sec--plum .checks li::before,.sec--dark .checks li::before{background:var(--butter)}

/* 2. Grid cell counts that divide at every breakpoint (auto-fit was leaving
      empty cells: 4 blocks in 3 columns, 4 spectrum cards in 5, 2 fit cards in
      3, 5 include cards in 3, 5 difference cards in 3). */
.blocks{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){ .blocks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .blocks{grid-template-columns:1fr} }

.spectrum{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .spectrum{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .spectrum{grid-template-columns:1fr} }

.fit{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){ .fit{grid-template-columns:1fr} }

.incl,.diff{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){ .incl,.diff{grid-template-columns:1fr} }

/* 3. The stage tags were 9.6px — under the micro-label band. */
.stage .tag{font-size:.7rem;padding:.36rem .78rem;letter-spacing:.1em}

/* Two .blocks grids on the consulting page hold 3 and 4 cards, so one fixed
   column count always orphans the other. The count derives from the children. */
.blocks{grid-template-columns:repeat(3,minmax(0,1fr))}
.blocks:has(> :nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){
  .blocks{grid-template-columns:1fr}
  .blocks:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .blocks,.blocks:has(> :nth-child(4)){grid-template-columns:1fr}
}

/* .path was the last auto-fit grid left: 4 stages resolved to 3 columns
   between ~790 and 1090px, stranding the fourth on its own row. */
.path{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .path{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .path{grid-template-columns:1fr} }

/* Root cause of the dead sticky nav: body{overflow-x:hidden} in the base rule
   forces overflow-y to compute to auto, so body became the scroll container and
   position:sticky had nothing to pin against. html{overflow-x:clip} above
   already stops horizontal scrolling, so body goes back to visible. */
body{overflow:visible}

/* ============================================================================
   ONE card on the What we do pages. .blk (steps and stages), .sp (spectrum)
   and .fit article were three different treatments; they are now the Services
   card: white ground, 1px hairline, and the plum tick that draws itself across
   the top edge on hover. The tick is a ::before, so no markup changes.
   ========================================================================== */
.blk,.sp,.fit article{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  padding:clamp(1.6rem,2.9vw,2.3rem);
  display:flex;flex-direction:column;gap:.85rem;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.blk::before,.sp::before,.fit article::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:10px;
  background:var(--plum);transition:width .5s var(--ease);
}
.blk:hover,.sp:hover,.fit article:hover{
  transform:translateY(-6px);border-color:var(--line-2);
  box-shadow:0 22px 44px rgba(33,30,32,.1);
}
.blk:hover::before,.sp:hover::before,.fit article:hover::before{width:100%}
@media (prefers-reduced-motion: reduce){
  .blk:hover,.sp:hover,.fit article:hover{transform:none}
}
/* the spectrum grid drew its own 1px dividers behind the cards; with real
   borders on every card that produced a double rule */
.spectrum{gap:clamp(1.1rem,2.3vw,1.8rem);background:transparent;border:0}

/* the card index and meta line, shared by all three */
.blk b,.sp b,.fit b{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--plum)}
.blk h3,.sp h3,.fit h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.28rem,2.2vw,1.62rem);line-height:1.18;margin:0}
.blk .who{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);padding-block:.6rem;border-block:1px solid var(--line);
}
.blk p,.sp p,.fit article p{font-size:.97rem;color:var(--ink-soft)}

/* gold on a light ground must be the cream-safe gold, never #F6E7A7 */
.sp .bar{height:5px;background:#C7A24A}
.sp:nth-child(1) .bar{background:linear-gradient(90deg,#C7A24A 25%,var(--line) 25%)}
.sp:nth-child(2) .bar{background:linear-gradient(90deg,#C7A24A 66%,var(--line) 66%)}
.sp:nth-child(3) .bar{background:linear-gradient(90deg,var(--plum) 85%,var(--line) 85%)}
.sp:nth-child(4) .bar{background:var(--plum)}

/* the pale-gold callout panel was #FDF6DC, outside the palette */
.fmt__get{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft)}
.fmt__top{background:var(--paper)}

/* A card must always be one tonal step off its ground. Instead of a fixed
   colour, the card takes the opposite of the section it sits in — cream card on
   a white band, white card on a cream band (the home Services pattern). */
.sec--white .blk,.sec--white .sp,.sec--white .fit article,.sec--white .fmt{background:var(--paper-2)}
.sec--paper .blk,.sec--paper .sp,.sec--paper .fit article,.sec--paper .fmt{background:var(--white)}
.sec--white .blk .who,.sec--white .fmt__top{background:transparent}

/* ============================================================================
   BUTTONS — one final treatment, overriding every earlier button rule.
   Zero radius stays (project rule); the quality comes from the interaction.

   Root cause of the broken secondary button: a later duplicate
   .btn:hover{background:var(--plum-2)} overrode .btn--ghost:hover{background:
   transparent} at equal specificity, so "See how the audit works" filled dark
   while its label stayed near-black. All painting now happens in two
   pseudo-elements, so no background rule can leak between variants.

     ::before  the resting fill
     ::after   the hover fill, wiping up from the bottom edge
     label     colour transitions with it, so it is always readable
   ========================================================================== */
.btn,.btn--sm,.btn--hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.75rem;
  padding:18px 28px;font-family:var(--sans);font-size:15.5px;font-weight:500;
  letter-spacing:0;text-transform:none;text-decoration:none;border:0;cursor:pointer;
  background:transparent;color:var(--paper);line-height:1.7;
  transition:color .26s ease,transform .18s ease;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--plum)}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .34s cubic-bezier(.22,.68,.16,1);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{background:transparent;transform:none}
.btn:active{transform:translateY(1px)}
.btn__arrow{font-family:var(--mono);color:var(--butter);transition:transform .26s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(5px)}

/* the single gold moment: gold at rest, inverts to plum with a gold label */
.btn--butter{color:var(--ink)}
.btn--butter::before{background:var(--butter)}
.btn--butter::after{background:var(--plum)}
.btn--butter:hover,.btn--butter:focus-visible{color:var(--butter)}
.btn--butter .btn__arrow{color:var(--plum)}
.btn--butter:hover .btn__arrow{color:var(--butter)}

/* secondary: never a fill. A 1px rule draws itself in from the left. */
.btn--ghost,.btn--hero-ghost{
  overflow:visible;padding:18px 4px;color:var(--ink);background:transparent;
  border-bottom:1px solid rgba(33,30,32,.22);
}
.btn--ghost::before,.btn--hero-ghost::before{display:none}
.btn--ghost::after,.btn--hero-ghost::after{
  content:"";position:absolute;left:0;right:0;top:auto;bottom:-1px;height:1px;
  background:var(--plum);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.btn--ghost:hover,.btn--ghost:focus-visible,
.btn--hero-ghost:hover,.btn--hero-ghost:focus-visible{color:var(--plum);background:transparent}
.btn--ghost:hover::after,.btn--ghost:focus-visible::after,
.btn--hero-ghost:hover::after,.btn--hero-ghost:focus-visible::after{transform:scaleX(1)}
.sec--plum .btn--ghost,.sec--dark .btn--ghost{color:var(--paper);border-bottom-color:rgba(247,243,232,.35)}
.sec--plum .btn--ghost::after,.sec--dark .btn--ghost::after{background:var(--butter)}
.sec--plum .btn--ghost:hover,.sec--dark .btn--ghost:hover{color:var(--butter)}

/* the locked nav CTA keeps its resting look; only the interaction is new */
.nav-links .cta{position:relative;isolation:isolate;overflow:hidden;transition:color .24s ease}
.nav-links .cta::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--plum);
  transform:translateY(101%);transition:transform .3s cubic-bezier(.22,.68,.16,1);
}
.nav-links .cta:hover,.nav-links .cta:focus-visible{background:var(--butter);color:var(--butter);border-bottom-color:#EBDB97}
.nav-links .cta:hover::after,.nav-links .cta:focus-visible::after{transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  .btn::after,.btn--ghost::after,.nav-links .cta::after{transition:none}
  .btn:hover .btn__arrow{transform:none}
}

/* ============================================================================
   QA SWEEP — measured defects, fixed at the root
   ========================================================================== */

/* 1. Consulting "what you get" rows ran 102-125 characters per line (the
      readable band is 45-80). The text column is capped, not the row. */
.gets div,.gets div p{max-width:66ch}

/* 2. Training: five cards across gave 17-character lines. Five is prime, so
      instead of an orphaned row each item becomes a full-width row — number,
      heading, then the paragraph at a readable measure. */
.incl,.diff{grid-template-columns:1fr;gap:0}
.inc,.diff article{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(1.4rem,2.6vw,2rem);
}
.diff article{grid-template-columns:auto minmax(0,.38fr) minmax(0,.52fr)}
.diff article b{align-self:start}
.inc p,.diff article p{max-width:62ch}
@media (max-width:820px){
  .inc,.diff article{grid-template-columns:1fr;row-gap:.6rem}
  .diff article{grid-template-columns:1fr}
}

/* 3. The footer column label carries its own class so the heading LEVEL is free
      to be whatever keeps document order valid on every page. It is an <h2>:
      as an <h3> it skipped a level on thanks.html, which has no <h2>. */
.foot .foot__col{
  font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,243,232,.72);margin:0 0 1.1rem;
}

/* 4. The watermark mark is a 228px asset; it was displayed at 440px. Capped to
      its native size — no upscaled raster anywhere on the site. */
.sec--sig .sig{width:min(24vw,228px)}

/* ============================================================================
   MOBILE MENU — measured defect: at 390px the sticky bar was 219px tall (27%
   of the viewport) because seven links plus the CTA wrapped onto four rows.
   Desktop is untouched: the button is display:none above 700px and .nav-links
   keeps its existing row layout.
   ========================================================================== */
.nav-burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  margin-inline-start:auto;padding:0;background:transparent;
  border:1px solid var(--line-2);cursor:pointer;
}
.nav-burger span{display:block;position:relative;width:20px;height:1px;background:var(--ink);transition:background .2s ease}
.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:var(--ink);
  transition:transform .26s var(--ease);
}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:700px){
  .nav-burger{display:flex}
  .nav-in{min-height:64px;flex-wrap:nowrap}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:0 var(--pad) 1.15rem;
    background:var(--paper);border-bottom:1px solid var(--line);
  }
  .nav-links[data-open]{display:flex}
  .nav-links > a{
    min-height:48px;display:flex;align-items:center;padding-block:0;
    border-bottom:1px solid var(--line);font-size:1rem;
  }
  .nav-links > a:hover{border-bottom-color:var(--line)}
  /* the group label stays visible as a label, not a control */
  .nav-drop{display:block;width:100%}
  .nav-drop__btn{
    display:flex;pointer-events:none;width:100%;min-height:42px;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-mute);border-bottom:1px solid var(--line);
  }
  .nav-drop__btn i{display:none}
  .nav-drop__panel{flex-direction:column;gap:0;width:100%}
  .nav-drop__panel a{min-height:48px;padding:0 0 0 1.1rem;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links .cta{
    margin-top:1.15rem;min-height:54px;justify-content:center;
    border:1px solid #EBDB97;font-size:.82rem;
  }
}

/* aria-current on the gold CTA must not repaint it: the locked button looks the
   same on every page, current or not (the generic current-link rule is more
   specific, so it is answered here). */
.nav-links .cta[aria-current]{color:var(--ink);border-bottom-color:#EBDB97}
.nav-links .cta[aria-current]:hover{color:var(--butter)}
/* the current item inside the menu panel */
.nav-drop__panel a[aria-current]{color:var(--plum)}
.nav-drop__panel a[aria-current]::before{width:2px}

/* In a tight .actions row the flex items were shrinking, so labels wrapped to
   two lines instead of the buttons stacking. */
.actions .btn{flex:0 0 auto;max-width:100%}

/* Labels must never break mid-button; the row wraps instead. Checked against
   the longest label on the site at 390px ("Tell us what is not working"). */
.btn{white-space:nowrap}
.actions{row-gap:1rem}

/* ============================================================================
   INNER-PAGE HEROES — the block was centred on desktop.
   .wrap gives margin-inline:auto, and .hero__in caps itself at 66ch, so the
   whole column floated in the middle of the page instead of starting on the
   page's left gutter like every other section. The container now spans the full
   wrap and the CHILDREN carry the measure. Home is untouched: its .hero__in is
   a grid child, not a .wrap. Mobile is untouched (66ch already exceeds the
   viewport, so the column reads full-width there).
   ========================================================================== */
@media (min-width:701px){
  /* Above the phone breakpoint (the same 700px where the burger menu takes
     over) the hero aligns to the page gutter. Below it, the centred column is
     the intended phone treatment.
     The container keeps .wrap's centred page grid (so the hero starts on the
     same gutter as the nav and every section); the CHILDREN carry the column
     measure. 34rem is the 66ch the column had before, expressed in a unit that
     does not re-resolve against each child's own font-size. */
  .hero__in.wrap{max-width:var(--wrap);align-items:flex-start}
  .hero__in.wrap > *{width:100%;max-width:34rem;margin-inline:0}
  .hero__in.wrap > .actions,
  .hero__in.wrap > .hero__strip{max-width:none}
}

/* ============================================================================
   MOBILE PASS
   ========================================================================== */

/* Selected work — the three Assembly stages read as one row on a phone (marks
   side by side, name under each), not as three stacked rows. 3 marks in 3
   columns divides exactly, so no orphaned cell. */
@media (max-width:640px){
  .axis{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;padding-top:1.4rem}
  .axis__step{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
  .axis__mark{width:100%}
  /* 11px floor: .63rem computed to 10.1px */
  .axis__label{font-size:11px;letter-spacing:.1em;line-height:1.5;color:var(--ink-mute)}
}

/* Footer on a phone: one straight stack of four identical blocks was a column
   of ruled lists. The brand keeps the full width; the two short link columns
   pair up beside each other; the contact column takes the full width again.
   Hairlines separate the rows so the rhythm is visible, not implied. */
@media (max-width:560px){
  .foot--dark .foot-in{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.4rem;row-gap:0;
  }
  .foot--dark .foot__brand{grid-column:1 / -1;margin-bottom:1.9rem}
  .foot--dark .foot-in > div:not(.foot__brand){
    padding-block:1.35rem;
    border-top:1px solid rgba(247,243,232,.16);
  }
  .foot--dark .foot-in > div:nth-of-type(4){grid-column:1 / -1}
  .foot--dark ul{gap:.85rem}
  .foot--dark .foot-in > div:nth-of-type(4) ul{
    flex-direction:row;flex-wrap:wrap;gap:.6rem 1.6rem;
  }
  .foot__line{text-align:left;margin-top:2rem}
  .foot--dark .foot__bar{gap:.5rem;flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   02 Core philosophy — the watermark was anchored to the VIEWPORT's right edge
   at -4%, so on a wide screen it slid off the page and only a sliver of the
   mark was left, cropped by the section. It now sits inside the page grid,
   beside the text column, at the scale of the reference.
   ========================================================================== */
.sec--sig{overflow:hidden}
.sec--sig .sig{
  inset-inline-end:max(var(--pad), calc((100% - var(--wrap)) / 2));
  width:min(38vw,440px);
  opacity:.10;
}
@media (min-width:1400px){ .sec--sig .sig{width:min(34vw,480px)} }
@media (max-width:900px){
  /* below the two-column threshold the text runs full width, so the mark goes
     back to a corner wash rather than sitting on top of the paragraphs */
  .sec--sig .sig{inset-inline-end:calc(var(--pad) * -1);width:min(56vw,340px);opacity:.07}
}

/* ============================================================================
   07 Start here — chosen treatment: centred, text only (option 1a).
   The 50ch column left the right half of the plum band empty and broke the
   lines short. Centring balances the band without adding imagery; each element
   keeps its own measure so the headline breaks long and the copy stays inside
   the readable 45-80 character range.
   ========================================================================== */
.close__in--center{max-width:none;align-items:center;text-align:center;margin-inline:auto;gap:1.5rem}
.close__in--center .display{max-width:30ch}
.close__in--center .lead{max-width:58ch;margin-inline:auto}
.close__in--center .actions{justify-content:center;margin-top:.55rem}
.close__in--center .close__note{margin-top:.2rem;text-align:center}
@media (max-width:700px){
  /* on a phone the band is a single column already — keep the copy left-read
     so the lines start on the gutter like every other section */
  .close__in--center{text-align:left;align-items:stretch}
  .close__in--center .lead{margin-inline:0}
  .close__in--center .actions{justify-content:flex-start}
  .close__in--center .close__note{text-align:left}
}

/* Two containers kept their desktop column widths on a phone, so their
   children overflowed both gutters (measured: 18px of horizontal scroll, copy
   starting at -18px). Same collapse the hero grid, the axis and the footer
   already have. */
@media (max-width:700px){
  .shift__cols{grid-template-columns:1fr;gap:1.15rem}
  .who__head{grid-template-columns:1fr;gap:1.15rem}
  .shift__cols > *,.who__head > *{max-width:100%;min-width:0}
}

/* 07 Start here: the centred treatment is withdrawn — the site's structure is a
   single left axis and a centred band read as a second, competing one. The band
   is filled by structure instead (see the closing-band rule below), not by
   moving the type off the gutter. */
.close__in--center{max-width:50ch;align-items:stretch;text-align:left;margin-inline:0}
.close__in--center .display,.close__in--center .lead{max-width:none;margin-inline:0}
.close__in--center .actions{justify-content:flex-start}
.close__in--center .close__note{text-align:left}

/* ============================================================================
   THE FADED MARK — ONE RULE.
   Six competing .sec--sig .sig widths had accumulated (46vw/520, 40vw/440,
   24vw/228, 38vw/440, 34vw/480, plus the phone wash); the last ones silently
   reverted the QA cap and the shipped watermark was displaying a 198px asset
   at 480px — a 2.42x upscale on Home and Selected work.

   The cap is now the asset's real pixel size. It stays here, last in the file,
   so nothing above it can win. If the mark is wanted at reference scale
   (roughly a third of the band) it needs a large export: a vector SVG, or a
   PNG of at least 1000px on the long edge.
   ========================================================================== */
.sec--sig .sig{
  position:absolute;top:50%;transform:translateY(-50%);
  inset-inline-end:max(var(--pad), calc((100% - var(--wrap)) / 2));
  width:min(28vw,198px);   /* alchemix-mark-cutout.png is 198px wide */
  opacity:.12;z-index:0;pointer-events:none;
}
@media (max-width:900px){
  .sec--sig .sig{inset-inline-end:calc(var(--pad) * -1);width:min(42vw,198px);opacity:.08}
}


/* ############################################################################
   APPROVED: head tier system (variant A) — promoted from heads-tiers.css
   ######################################################################## */


:root{
  --head-t1:40rem;   /* 640px — statement head, ~24 characters of display type */
  --head-t2:34rem;   /* 544px — split head, the column both 03 and 04 share    */
  --lead-max:33rem;  /* 528px — ~62 characters of body copy                    */
}

.display,.shift__h,.who__h,.svc__head,.how__head{text-wrap:balance}

/* ---- Tier 1: statement head ------------------------------------------------
   The container stops carrying the measure; the type roles carry their own, so
   the head breaks into full lines instead of one long line with a short tail. */
.head--wide{max-width:none}
.head--wide .display{max-width:var(--head-t1)}
.head--wide .lead,.head--wide .prose{max-width:var(--lead-max)}

/* section 07 is the same tier, so it gets the same numbers */
.close__in{max-width:none}
.close__in .display{max-width:var(--head-t1)}
.close__in .lead{max-width:var(--lead-max)}

/* ---- Tier 2: split head ---------------------------------------------------
   Head left, lead right. One shared column for both heads: 03 was 22ch of
   64px type (750px) and 04 was 18ch of 50px type (575px) — a 175px difference
   for the same job. */
.shift__h,.who__h{max-width:var(--head-t2)}
.shift__cols p,.who__lead{max-width:var(--lead-max)}
.shift__p2{max-width:var(--lead-max) !important}

/* ---- Tier 3: full-width head ----------------------------------------------
   A head above a row of cards spans the band, or it reads as a caption to the
   first card. Balance holds it to even lines. */
.head--full{max-width:none}
.head--full .display{max-width:none}
.head--full .lead{max-width:var(--lead-max)}

/* ---- One pull-line rule ---------------------------------------------------
   Every closing line spans the band under its hairline. Section 01's line was
   capped and broke mid-sentence while section 04's ran full width. */
.pull{max-width:none;width:100%}

@media (max-width:700px){
  /* every cap is wider than a phone viewport, so the phone layout is untouched
     by this variant; released explicitly so nothing can clip */
  .head--wide .display,.close__in .display,.shift__h,.who__h,
  .head--wide .lead,.head--wide .prose,.close__in .lead,
  .shift__cols p,.who__lead{max-width:none}
  .shift__p2{max-width:none !important}
}


/* ############################################################################
   APPROVED: training format records (variant A) — promoted from training-a.css
   ######################################################################## */


/* ---- the record ---------------------------------------------------------- */
#formats{counter-reset:fmt}

.fmt{
  position:relative;
  background:transparent !important;
  border:0;
  border-top:1px solid rgba(33,30,32,0.14);
  margin:0;
  padding:clamp(2.2rem,4vw,3.2rem) 0 clamp(2.4rem,4.4vw,3.4rem);
  counter-increment:fmt;
}
.fmt:first-of-type{border-top-width:1px}
.fmt:last-of-type{border-bottom:1px solid rgba(33,30,32,0.14)}

/* the record number, in the eyebrow's own type */
.fmt::before{
  content:counter(fmt,decimal-leading-zero);
  position:absolute;top:clamp(2.2rem,4vw,3.2rem);left:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:#C7A24A;
}
/* a gold hairline draws across the record on hover — the site's motion motif */
.fmt::after{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:#C7A24A;transition:width .55s var(--ease);
}
.fmt:hover::after{width:100%}

/* everything in the record sits on one indent, clear of the number */
.fmt__top,.fmt__body,.fmt__foot{padding-inline:clamp(2.6rem,5vw,4.5rem) 0}

/* ---- the meta line ------------------------------------------------------- */
.fmt__top{
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  background:transparent !important;border:0;padding-top:0;padding-bottom:0;
  margin-bottom:1.15rem;
}
.fmt__dur{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--plum);
}
/* was italic serif pushed to the right edge, competing with the title */
.fmt__best{
  font-family:var(--sans);font-style:normal;font-size:.98rem;line-height:1.62;
  color:var(--ink-mute);margin-inline-start:0;max-width:62ch;
}

/* ---- title and body ------------------------------------------------------ */
.fmt h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.014em;
  max-width:22ch;margin:0 0 1.3rem;
}
.fmt__body{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
  gap:clamp(1.8rem,4vw,4rem);padding-block:0;
}
.fmt__body > div:last-child{
  border-inline-start:1px solid rgba(33,30,32,0.14);
  padding-inline-start:clamp(1.6rem,3.5vw,3rem);
}
.fmt__body p{max-width:52ch}

/* the claim: a hairline above it instead of a rule down its side */
/* .fmt__body p (0,2,0) beats a bare .fmt__claim, so the claim is qualified —
   it must read plum, not body grey. */
.fmt__body p.fmt__claim,.fmt__claim{
  border-inline-start:0;padding-inline-start:0;
  border-top:1px solid rgba(33,30,32,0.14);
  padding-top:1.15rem;margin-top:1.5rem;
  font-size:clamp(1.15rem,2.2vw,1.5rem);color:#503747;max-width:30ch;
  font-family:var(--serif);font-style:italic;font-weight:300;line-height:1.32;
}

/* the curriculum list keeps the site's gold rule markers */
.fmt li{padding-block:.78rem}
.fmt li:first-child{padding-top:0}

/* "participants receive" was a panel inside a panel */
.fmt__get{
  background:transparent !important;border:0 !important;
  border-top:1px solid rgba(33,30,32,0.14) !important;
  padding:1.15rem 0 0;margin-top:1.4rem;
  font-size:.97rem;line-height:1.65;color:var(--ink-soft);max-width:44ch;
}
.fmt__get::before{
  content:"You take away";display:block;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:.6rem;
}
.fmt__get strong{color:var(--ink);font-weight:500}

.fmt__foot{padding-top:1.9rem;padding-bottom:0}

@media (max-width:900px){
  .fmt__body{grid-template-columns:1fr;gap:1.6rem}
  .fmt__body > div:last-child{
    border-inline-start:0;padding-inline-start:0;
    border-top:1px solid rgba(33,30,32,0.14);padding-top:1.5rem;
  }
}
@media (max-width:700px){
  .fmt__top,.fmt__body,.fmt__foot{padding-inline:0}
  .fmt::before{position:static;display:block;margin-bottom:.7rem}
  .fmt h3{max-width:none}
}


/* ############################################################################
   APPROVED: inner-page hero — option 05.
   The wedge geometry, the plum block and the bleed are the home hero's own
   .hero-panel classes, reused verbatim so the inner pages are literally the
   same construction. What the panel carries is the page's own contents: four
   or five numbered links, one line each, plus one line of fact.
   ######################################################################## */

.hero__grid .hero__in{max-width:none;padding-block:clamp(1.9rem,3.4vw,3.1rem) clamp(2.4rem,5vw,4rem)}
.hero-panel--idx{min-height:0}
/* the home panel has no right padding (its diagram bleeds); an index needs air
   between the last character and the clip line */
.hero-panel--idx .hero-panel__inner{
  padding:clamp(2.4rem,4.5vw,3.4rem) clamp(1.6rem,3vw,3rem)
          clamp(2.4rem,4.5vw,3.4rem) clamp(96px,8vw,120px);
}
.hero__idxlabel{margin-bottom:1.1rem}
.hero__idx{display:flex;flex-direction:column}
.hero__idx a{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;
  gap:.8rem;min-height:44px;padding:.85rem 0;
  border-top:1px solid rgba(247,243,232,.16);
  color:var(--paper);text-decoration:none;
}
.hero__idx a:last-child{border-bottom:1px solid rgba(247,243,232,.16)}
.hero__idx a:hover{color:var(--butter)}
.hero__idx b{
  font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.1em;
  color:var(--butter);
}
.hero__idx span{font-size:1.02rem;line-height:1.45;white-space:nowrap}
.hero__idxnote{
  margin-top:1.15rem;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  line-height:1.9;color:rgba(247,243,232,.72);
}
@media (max-width:1080px){
  /* the panel becomes a full-width band under the copy, as the home hero does */
  .hero-panel--idx .hero-panel__inner{padding:clamp(2rem,5vw,3rem) var(--pad)}
}
@media (max-width:560px){
  .hero__idx span{white-space:normal}
}

/* ############################################################################
   APPROVED: one closing band, five pages.
   Identical structure everywhere — numbered eyebrow, tier-1 head, lead,
   gold button + email, closing note, and the faded mark as the sign-off. The
   mark appears once per page, and the closing band has priority.
   ######################################################################## */
.close__in .actions{margin-top:.55rem}
.close__note{margin-top:.2rem}
.sec--plum .btn--ghost{color:var(--paper);border-bottom-color:rgba(247,243,232,.55)}
.sec--plum .btn--ghost:hover{color:var(--butter);border-bottom-color:var(--butter)}

/* empty in-page anchors: land the target below the sticky bar */
.anchor{display:block;height:0;scroll-margin-top:104px}

/* ############################################################################
   HERO HEAD — the split hero's headline is a tier-2 head, not a poster line.
   At 1440 the copy column is 504px wide while .h-xl was still 80px type, so
   "Making business dreams happen with AI." broke into five one-word lines. The
   type now steps to the column the same way the split section heads do, and
   balance evens the lines instead of leaving a one-word tail. Applies to every
   hero built on .hero__grid — the home hero and the four index heroes — so
   they all break the same way.
   ######################################################################## */
/* Contact and Thanks have no panel, so their hero is .hero__in.wrap rather
   than a grid child — but their measure is 544px, so the same 80px type broke
   one word per line there too. Both shapes are covered. */
.hero__grid .hero__in .h-xl,
.hero__in.wrap .h-xl{
  font-size:clamp(2.2rem,3.4vw,3.15rem);
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance;
}
@media (max-width:1080px){
  /* the grid hero becomes one column here, so its headline has the full band */
  .hero__grid .hero__in .h-xl{font-size:clamp(2.4rem,6vw,4rem)}
}
@media (max-width:700px){
  /* the panel-less hero keeps its 544px measure until the phone breakpoint
     releases it — raising the type at 1080 put 17 characters on a line */
  .hero__in.wrap .h-xl{font-size:clamp(2.4rem,6vw,4rem)}
}

/* Palette compliance: six hard-coded greys (#3A3235 #5A5054 #5A4E3A #5C4E37
   #6B5C42 #282425) were swapped for the three text tokens the palette allows.
   Two of them were painting on the home page — .prose__strong and the finding
   rows in section 01, and the .whorow paragraphs in section 04. */

/* The index label is gold and carries no rule: the hairline that opens every
   section eyebrow would read as a second divider inside the panel, and the
   panel already has the block edge. The closing fact line was removed — the
   index now lists every section, so the panel needs no footnote. */
.hero__idxlabel{color:var(--butter);margin-bottom:1.2rem}
.hero__idxlabel::before{display:none}

/* ############################################################################
   ONE LIST MARKER, EVERYWHERE: 16px of 1px gold — the eyebrow rule at list
   scale. #C7A24A on light grounds, #F6E7A7 on plum and near-black.
   The findings rows in home section 01 were still using a mono arrow glyph;
   the arrow is replaced by the rule (the span keeps its place in the DOM, so
   no markup changes and nothing shifts).
   ######################################################################## */
.finding__mark{
  align-self:baseline;width:16px;height:1px;background:#C7A24A;
  font-size:0;line-height:0;color:transparent;padding:0;
  margin-top:.72rem;overflow:hidden;
}
.sec--plum .finding__mark,.sec--dark .finding__mark{background:var(--butter)}

/* every marker on a dark ground takes the dark-ground gold */
.sec--plum .case__list li::before,.sec--plum .fit li::before,
.sec--plum .fmt li::before,.sec--dark .fit li::before,
.sec--dark .fmt li::before{background:var(--butter)}

/* the mobile hero index and the phone list rows inherit the same rule, so no
   separate phone treatment is needed */

/* ############################################################################
   THE RULE IS GOLD — the eyebrow rule included.
   The short rule that opens every eyebrow (and therefore every hero) was the
   one line still drawn in grey #C6BAAE at 1.3:1; the reference is a gold dash.
   Light grounds take #C7A24A, dark grounds the light gold. The negative list
   on Consulting keeps the gold rule too, so no page is an exception — the
   words carry the negative, not a faded marker.
   ######################################################################## */
.eyebrow::before{background:#C7A24A}
.eyebrow--light::before,.sec--plum .eyebrow::before,
.sec--dark .eyebrow::before,.shift .eyebrow::before{background:var(--butter)}
.fit--no li::before{background:#C7A24A}
.sec--plum .fit--no li::before,.sec--dark .fit--no li::before{background:var(--butter)}


/* ############################################################################
   MOBILE MENU OVERLAY (approved: "Mobile Menu Demo.dc.html")
   Full-screen plum overlay opened by .nav-burger under 700px. The old inline
   .nav-links[data-open] panel is no longer used on a phone; the burger opens
   this instead. Desktop is untouched (the overlay is display:none above 700px).
   ######################################################################## */
@keyframes mmIn{from{opacity:0}to{opacity:1}}
@keyframes mmRow{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mmRowAlt{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes mmDraw{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
@keyframes mmGlow{from{opacity:0}to{opacity:1}}

.mmenu{
  position:fixed;inset:0;z-index:200;display:none;overflow:hidden;
  background:linear-gradient(165deg,#503747 0%,#4A3342 46%,#3A2733 100%);
}
.mmenu[data-open]{display:block;animation:mmIn .34s var(--ease) both}
.mmenu__glow{
  position:absolute;right:-90px;bottom:-140px;width:min(420px,108vw);height:min(420px,108vw);
  background:radial-gradient(circle,rgba(246,231,167,.22) 0%,rgba(246,231,167,.08) 42%,rgba(246,231,167,0) 70%);
  pointer-events:none;animation:mmGlow 1s ease .15s both;
}
.mmenu__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.mmenu__lines g{stroke:#C7A24A;fill:none;stroke-width:1;stroke-dasharray:520}
.mmenu__lines .g1{animation:mmDraw 1.6s var(--ease) .2s both}
.mmenu__lines .g2{animation:mmDraw 1.9s var(--ease) .35s both}
.mmenu__in{
  position:relative;height:100%;display:flex;flex-direction:column;
  padding:0 22px 22px;box-sizing:border-box;overflow-y:auto;
}
.mmenu__top{display:flex;align-items:center;min-height:64px;flex:none;animation:mmRow .5s var(--ease) .06s both}
.mmenu__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mmenu__mark{display:block;padding:3px;border:1px solid rgba(199,162,74,.5)}
.mmenu__mark img{display:block;width:30px;height:30px;object-fit:contain}
.mmenu__txt{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:var(--paper);
}
.mmenu__txt i{
  font-style:normal;
  background:linear-gradient(90deg,#211E20 0 50%,#F6E7A7 50% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mmenu__x{
  margin-inline-start:auto;width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.mmenu__rule{display:block;height:1px;width:58%;background:rgba(199,162,74,.5);flex:none;animation:mmRowAlt .6s var(--ease) .12s both}
.mmenu__nav{flex:0 0 auto;margin-block:auto;display:flex;flex-direction:column;min-height:0;padding-block:6px}
.mmenu__nav a{
  display:block;padding:14px 0;text-decoration:none;
  border-bottom:1px solid rgba(199,162,74,.28);
}
.mmenu__nav a:last-child{border-bottom:0}
.mmenu__nav a:nth-child(1){animation:mmRow .55s var(--ease) .16s both}
.mmenu__nav a:nth-child(2){animation:mmRow .55s var(--ease) .22s both}
.mmenu__nav a:nth-child(3){animation:mmRow .55s var(--ease) .28s both}
.mmenu__nav a:nth-child(4){animation:mmRow .55s var(--ease) .34s both}
.mmenu__nav a:nth-child(5){animation:mmRow .55s var(--ease) .40s both}
.mmenu__nav a:nth-child(6){animation:mmRow .55s var(--ease) .46s both}
.mmenu__nav a:nth-child(7){animation:mmRow .55s var(--ease) .52s both}
.mmenu__t{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(24px,7vw,30px);line-height:1.1;color:var(--paper)}
.mmenu__s{display:block;margin-top:5px;font-size:14.5px;font-weight:300;line-height:1.4;color:rgba(247,243,232,.62)}
.mmenu__cta{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:74%;min-height:46px;margin:0 auto;
  background:linear-gradient(180deg,#EFD98F 0%,#E2C15E 100%);color:#3A2733;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;animation:mmRow .55s var(--ease) .56s both;
}
.mmenu__foot{
  flex:none;margin:26px 0 0;max-width:74%;
  font-family:var(--mono);font-size:9.5px;font-weight:500;line-height:1.9;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(246,231,167,.78);
  animation:mmRowAlt .6s var(--ease) .64s both;
}
body[data-menu-open]{overflow:hidden}
@media (max-height:800px){
  .mmenu__nav a{padding:11px 0}
  .mmenu__t{font-size:clamp(22px,6.4vw,26px)}
  .mmenu__s{font-size:13.5px;margin-top:3px}
  .mmenu__foot{margin-top:18px}
}
@media (max-height:700px){
  .mmenu__nav a{padding:8px 0}
  .mmenu__t{font-size:21px}
  .mmenu__s{font-size:13px;margin-top:2px}
  .mmenu__foot{margin-top:14px}
}
@media (min-width:701px){.mmenu{display:none !important}}
@media (prefers-reduced-motion:reduce){
  .mmenu,.mmenu *{animation:none !important}
}