/* ============================================================
   ARKENWELL — shared stylesheet. Extracted from index.html, which
   is the authoritative design. Two colours, two faces, hairlines.
   ============================================================ */

/* Self-hosted. No third-party font request. */
@font-face{
  font-family:"Geist";
  src:url("assets/fonts/geist-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;
}

/* ============================================================
   ARKENWELL
   Warm black and paper. Two faces. Hairlines, never boxes.
   ============================================================ */

/* --- 1. TOKENS ------------------------------------------------ */
:root{
  --black: #080807;
  --white: #F3F1EA;

  --news: "Newsreader", Georgia, "Times New Roman", serif;
  --grot: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --t: .3s;
  --t-slow: .5s;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1560px;
  --rail: clamp(120px, 14vw, 208px);
  --railgap: clamp(1.5rem, 4vw, 4rem);
}

/* Ground / ink pairs. Inversion is a variable swap, nothing else. */
.on-black { --ground: var(--black); --ink: var(--white); }
.on-white{ --ground: var(--white); --ink: var(--black);  }

.on-black, .on-white{ background: var(--ground); color: var(--ink); }

/* Derived tones. Never a new hue — only ink at reduced opacity. */
.on-black, .on-white{
  --ink-58:  color-mix(in srgb, var(--ink) 58%, transparent);
  --ink-45:  color-mix(in srgb, var(--ink) 45%, transparent);
  --ink-18:  color-mix(in srgb, var(--ink) 18%, transparent);
  --ink-12:  color-mix(in srgb, var(--ink) 12%, transparent);
}

/* --- 2. RESET ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  font-family:var(--grot);
  font-size:clamp(1rem,.94rem + .28vw,1.1875rem);
  font-weight:350;
  line-height:1.68;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--white);color:var(--black)}
.on-white ::selection{background:var(--black);color:var(--white)}

:focus-visible{
  outline:1px solid currentColor;
  outline-offset:.4em;
}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--white);color:var(--black);
  padding:.85em 1.4em;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* --- 3. LAYOUT ------------------------------------------------ */
.container{
  width:100%;max-width:var(--max);margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(4rem,7.5vw,7.5rem); }
.section--tight{ padding-block:clamp(4rem,7vw,7rem); }
.section--open{ padding-block:clamp(4rem,8vw,8rem); }

/* Editorial rail: sticky label column beside the main column. */
.rail{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:var(--railgap);
  align-items:start;
}
.rail__label{
  position:sticky; top:clamp(5rem,9vw,7.5rem);
  align-self:start;
}
/* Section counters read as one set, not five unrelated numbers. */
.label--counter{ font-variant-numeric:tabular-nums; }
@media (max-width:900px){
  .rail{grid-template-columns:minmax(0,1fr);gap:2rem}
  .rail__label{position:static}
}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,5vw,5rem);
}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .split--wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr)}
}

/* --- 4. TYPE -------------------------------------------------- */
.label{
  font-family:var(--news);
  font-variation-settings:"opsz" 16;
  font-size:.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--ink-58);
  line-height:1.5;
}
.label--counter::before{
  content:attr(data-n) " / 03";
  display:block;
  font-variant-numeric:tabular-nums;
  color:var(--ink-58);
  letter-spacing:.16em;
  margin-bottom:.9em;
}

.display{
  font-family:var(--news);
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 72;
  font-weight:340;
  line-height:.98;
  letter-spacing:-.026em;
  text-wrap:balance;
  hanging-punctuation:first;
}
.d1{ font-size:clamp(2.7rem, 1.3rem + 6.5vw, 7rem); }
.d2{ font-size:clamp(2.25rem, 1.3rem + 4.1vw, 4.75rem); line-height:1.02; }
.d3{ font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem); line-height:1.12; letter-spacing:-.015em; }

.lead{
  font-size:clamp(1.1rem,1.02rem + .42vw,1.375rem);
  line-height:1.55;
  letter-spacing:-.004em;
  max-width:34ch;
  text-wrap:pretty;
}
.body{ max-width:50ch; color:var(--ink-58); text-wrap:pretty; font-variation-settings:"opsz" 16; }
.body + .body{ margin-top:1.15em; }
.body strong{ font-weight:450; color:var(--ink); }

/* --- 5. WORDMARK ---------------------------------------------- */
/* One construction at both sizes: a single text node, tracked with
   letter-spacing. Tracking tightens as the mark grows — wide tracking reads as
   deliberate at 1rem and as loose at 7rem. text-indent cancels the trailing
   letter-space so the mark aligns optically to the left edge.
   white-space:nowrap is load-bearing on .wm--xl. */
.wm{
  font-family:var(--news);
  font-variation-settings:"opsz" 72;
  font-weight:400;
  text-transform:uppercase;
  line-height:1;
  display:inline-block;
  white-space:nowrap;
}
/* Cap height, not font-size, is the thing being set. Measured off rendered
   pixels, not font metrics: Newsreader's cap renders at .703em here, so a 16px
   cap needs 22.76px = 1.4223rem. Tracking drops from .34em to .17em to hold the
   mark under 200px; strict proportional would have been .26em. */
.wm--sm{
  font-size:1.28rem;letter-spacing:.16em;text-indent:.16em;
  /* Optical, measured from pixels: the cap sat 1.6px high at desktop and .9px
     high at mobile. .06em lands both within .3px of the header centre line. */
  transform:translateY(.06em);
}
.wm--xl{
  /* 11.7cqi measured, not estimated: Newsreader caps average ~0.66em here,
     so the mark renders 8.15x its font-size. 7.5rem clamped before the
     target fill was reached, so the ceiling rose with it. */
  font-size:clamp(2.2rem, 11.7cqi, 10.5rem);
  letter-spacing:.16em; text-indent:.16em;
  color:var(--ink-45);
  max-width:100%;
}

/* --- 6. HEADER ------------------------------------------------ */
.header{
  background:var(--black);
  position:fixed; inset:0 0 auto 0; z-index:100;
  color:var(--white);
  transition:background-color var(--t) var(--ease);
}
.header__in{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  width:100%;max-width:var(--max);min-height:80px;margin-inline:auto;padding:0 var(--gutter);
  position:relative;
}
.header::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:color-mix(in srgb, var(--white) 16%, transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease);
}
.header.is-stuck{ background:var(--black); }
.header.is-stuck::after{ transform:scaleX(1); }

.brand{text-decoration:none;display:inline-block}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,1.9vw,2.1rem)}
@media (max-width:860px){ .nav{display:none} }

/* Vertical hairline: separates orientation from action. */
.nav__sep{
  display:block;width:1px;height:1.05rem;
  background:color-mix(in srgb, var(--white) 18%, transparent);
  margin-inline:clamp(.2rem,.9vw,.85rem);
}

.navlink{
  position:relative;text-decoration:none;
  font-size:.775rem;font-weight:350;letter-spacing:.055em;
  color:color-mix(in srgb, var(--white) 58%, transparent);
  transition:color .62s var(--ease);
}
.navlink:focus-visible,.navlink[aria-current],.navlink.is-active{ color:var(--white); }

/* The only hover effect: a 1px underline drawing left to right in the link's
   own colour. The same rule marks the section you are in. */
.navlink::after{
  content:"";position:absolute;inset:auto 0 -.5em 0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease-out;
}
.navlink:hover::after,.navlink:focus-visible::after,
.navlink[aria-current]::after,.navlink.is-active::after{ transform:scaleX(1); }

/* The action carries the button's circled arrow, at nav scale. */
.navlink--cta{ display:inline-flex;align-items:center;gap:.8rem;color:var(--white); }
.navlink--cta::after{ display:none; }
.navlink__c{
  position:relative;flex:none;width:1.95rem;height:1.95rem;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--white) 45%, transparent);
  display:grid;place-items:center;
  transition:border-color .28s cubic-bezier(.22,.61,.36,1), background-color .28s cubic-bezier(.22,.61,.36,1);
}
.navlink__c svg{
  grid-area:1/1;width:11px;height:11px;
  fill:none;stroke:var(--white);stroke-width:1.2;stroke-linecap:square;
  stroke-opacity:.55;
  transition:stroke-opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
}
.navlink--cta:hover .navlink__c,.navlink--cta:focus-visible .navlink__c{
  border-color:color-mix(in srgb, var(--white) 72%, transparent);
  background:color-mix(in srgb, var(--white) 4%, transparent);
}
.navlink--cta:hover .navlink__c svg,.navlink--cta:focus-visible .navlink__c svg{
  stroke-opacity:1; transform:translateX(3px);
}

.menu-btn{
  display:none;align-items:center;gap:.7rem;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--news);
}
@media (max-width:860px){ .menu-btn{display:inline-flex} }
.menu-btn__bars{display:grid;gap:5px;width:22px}
.menu-btn__bars i{display:block;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child{transform:translateY(3px) rotate(9deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child{transform:translateY(-3px) rotate(-9deg)}

.menu{
  position:fixed;inset:0;z-index:99;
  background:var(--black);color:var(--white);
  display:grid;align-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--ease);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__list{display:grid;gap:.4rem}
.menu__list a{
  font-family:var(--news);font-size:clamp(2rem,10vw,3.25rem);
  letter-spacing:-.02em;text-decoration:none;
  padding:.5rem 0;
  border-top:1px solid color-mix(in srgb, var(--white) 14%, transparent);
  transition:padding-left .6s var(--ease);
}
.menu__list a:hover{padding-left:.5rem}
.menu__foot{
  margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-size:.85rem;color:color-mix(in srgb, var(--white) 60%, transparent);
}
.menu__foot a{text-decoration:none}

/* --- 7. BUTTONS ----------------------------------------------- */
/* One pattern: type on a hairline bottom rule, circled arrow at right. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:clamp(1.1rem,2.2vw,2rem);
  padding:0 .15rem 1.15rem 0;
  text-decoration:none;
  font-size:.94rem;font-weight:400;letter-spacing:.02em;
  color:var(--ink);
}
.btn::before,.btn::after{content:"";position:absolute;inset:auto 0 0 0;height:1px}
.btn::before{background:var(--ink-45)}
.btn::after{
  background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}

.btn__c{
  position:relative;flex:none;
  width:2.9rem;height:2.9rem;border-radius:50%;
  border:1px solid var(--ink-45);
  display:grid;place-items:center;
  transition:border-color .28s cubic-bezier(.22,.61,.36,1), background-color .28s cubic-bezier(.22,.61,.36,1);
}
.btn__c svg{
  grid-area:1/1;width:15px;height:15px;
  fill:none;stroke:var(--ink);stroke-width:1.1;
  stroke-linecap:square;
  stroke-opacity:.55;
  transition:stroke-opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
}
.btn:hover .btn__c,.btn:focus-visible .btn__c{
  border-color:color-mix(in srgb, var(--ink) 72%, transparent);
  background:color-mix(in srgb, var(--ink) 4%, transparent);
}
.btn:hover .btn__c svg,.btn:focus-visible .btn__c svg{
  stroke-opacity:1; transform:translateX(4.5px);
}

/* Secondary: type with a wiping underline. There is no third style. */
.tlink{
  position:relative;display:inline-block;
  text-decoration:none;padding-bottom:.35em;
  font-size:.94rem;letter-spacing:.02em;
  color:var(--ink-58);
  transition:color var(--t) var(--ease);
}
.tlink:hover{color:var(--ink)}
.tlink::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}

.actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.75rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
/* Risk-removal line. Sits under the action, never above it. */
.reassure{
  margin-top:clamp(1.25rem,2vw,1.6rem);
  max-width:44ch;
  font-size:.875rem;line-height:1.6;
  color:var(--ink-58);
  text-wrap:pretty;
}

/* --- 8. HERO -------------------------------------------------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(7rem,10vw,10rem);
  padding-bottom:clamp(3rem,5vw,4.5rem);
}
/* The homepage should feel expansive, but not sink to the bottom of a tall
   display. Capping the stage reveals the next section and keeps the statement
   in the visual field rather than beneath a screen of empty black. */
.hero--home{
  min-height:min(100svh,68rem);
  justify-content:center;
  padding-top:clamp(8rem,10vw,10rem);
  padding-bottom:clamp(4.5rem,7vw,7rem);
}
/* Short viewports: release the full-height floor rather than clip the CTA. */
@media (max-height:760px){
  .hero{ min-height:0; padding-top:clamp(6.5rem,9vw,8rem); padding-bottom:clamp(4rem,7vw,6rem); }
}
.hero__label{
  display:flex;align-items:center;gap:.85rem;
  margin-bottom:clamp(2rem,4vw,3rem);
  color:color-mix(in srgb,var(--ink) 68%,transparent);
}
.hero__label span{ color:var(--ink-45); }
.hero__label::after{
  content:"";width:clamp(2.5rem,5vw,4.75rem);height:1px;
  background:var(--ink-18);
}
@media (max-width:520px){
  .hero__label{font-size:.63rem;letter-spacing:.17em;gap:.6rem;white-space:nowrap}
  .hero__label::after{width:auto;min-width:1.5rem;flex:1}
}
.hero-h{margin-bottom:clamp(2.75rem,5vw,4.25rem)}
.hero-h--home{font-size:clamp(2.8rem,1.25rem + 4.7vw,5.75rem)}
.hero--home .lead{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.hero__rule{margin-bottom:clamp(2.75rem,5vw,4.25rem)}
.hero__grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.hero__index{display:grid;gap:0;align-content:end}
.hero__index .label{margin-bottom:1.4rem}
.hero__index li{
  padding:.85rem 0;
  border-top:1px solid var(--ink-12);
  font-size:.94rem;
  color:var(--ink-58);
  display:flex;justify-content:space-between;gap:1.5rem;
  transition:color var(--t) var(--ease);
}
.hero__index li:hover{color:var(--ink)}
.hero__index em{
  font-family:var(--news);font-style:normal;
  color:var(--ink-58);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;font-size:.8rem;
}

/* Opening rule of a section: a denser rail segment, a deliberate gap, then
   the long content measure. This echoes the layout instead of merely drawing
   a generic line across it. */
.section__rule{
  margin-bottom:clamp(2.75rem,5vw,4.5rem);
  background:linear-gradient(to right,
    var(--ink-45) 0 var(--rail),
    transparent var(--rail) calc(var(--rail) + var(--railgap)),
    var(--ink-18) calc(var(--rail) + var(--railgap)) 100%);
}
@media (max-width:900px){ .section__rule{background:var(--ink-18)} }

/* --- 9. RULES & STATEMENT ------------------------------------- */
.rule{
  height:1px;background:var(--ink-18);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.25s var(--ease);
}
.rule.is-in{transform:scaleX(1)}


/* --- 10. INDEX ROWS ------------------------------------------- */
.rows{margin-top:clamp(3rem,6vw,5rem)}
.row{
  position:relative;
  display:grid;gap:.75rem clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr);
  padding:clamp(1.75rem,3vw,2.6rem) 0;
}
@media (min-width:760px){
  .row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline}
}
.row::before,.row::after{content:"";position:absolute;inset:0 0 auto 0;height:1px}
.row::before{background:var(--ink-18)}
.row::after{
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.row:last-child{border-bottom:1px solid var(--ink-18)}
.row > *{transition:transform var(--t-slow) var(--ease)}
@media (hover:hover){
  .row:hover::after{transform:scaleX(1)}
  .row:hover .row__t{color:var(--ink)}
}
.row__t{
  font-family:var(--news);
  font-variation-settings:"opsz" 16;
  font-size:clamp(1.35rem,1.1rem + 1.15vw,2rem);
  font-weight:360;line-height:1.1;letter-spacing:-.018em;
  color:var(--ink);
}
.row__d{ color:var(--ink-58); max-width:52ch; font-size:.98rem; line-height:1.6; transition:color var(--t) var(--ease), transform var(--t-slow) var(--ease); }

/* Compact index inside a section: label left, detail right, hairline each row. */
.minilist{ margin-top:clamp(1.75rem,3vw,2.4rem); }
.minilist li{
  display:grid; gap:.25rem clamp(1rem,2vw,2rem);
  grid-template-columns:minmax(0,1fr);
  padding:.95rem 0;
  border-top:1px solid var(--ink-18);
  font-size:.92rem; line-height:1.5;
}
@media (min-width:520px){ .minilist li{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)} }
.minilist li:last-child{ border-bottom:1px solid var(--ink-18); }
.minilist span:first-child{ font-family:var(--news); font-size:1rem; letter-spacing:-.01em; }
.minilist span + span{ color:var(--ink-58); }

/* --- 11. PHASES (a real sequence, so it carries numerals) ------ */
.phase{
  padding:clamp(1.75rem,3vw,2.4rem) 0;
  border-top:1px solid var(--ink-18);
}
@media (min-width:900px){
  .phase{ padding-right:clamp(1rem,2vw,2rem); }
}
.phase__n{
  font-family:var(--news);font-variant-numeric:tabular-nums;
  font-size:.78rem;letter-spacing:.2em;color:var(--ink-58);
  display:flex;justify-content:space-between;gap:1rem;
  margin-bottom:1.6rem;
}
.phase__t{
  font-family:var(--news);font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  font-weight:360;letter-spacing:-.015em;line-height:1.15;margin-bottom:.75rem;
}
.phase__d{color:var(--ink-58);font-size:.96rem;line-height:1.6;max-width:34ch}

/* --- 12. FOOTER ----------------------------------------------- */
.footer{padding-block:clamp(3rem,5vw,5.5rem) clamp(2rem,4vw,3rem)}
.footer__mark{
  container-type:inline-size;
  padding-bottom:clamp(1.75rem,3vw,2.75rem);
  border-bottom:1px solid var(--ink-18);
  margin-bottom:clamp(2rem,3.5vw,3rem);
}
.footer__grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Two balanced columns. The wordmark already provides the large compositional
   gesture above, so the navigation should use the width rather than reserving
   an empty first column. */
@media (min-width:900px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--railgap)}
}
.footer__col{display:grid;gap:.55rem;align-content:start}
.footer__col .label{margin-bottom:.9rem}
.footer__col a{
  text-decoration:none;font-size:.94rem;color:var(--ink-58);
  width:fit-content;position:relative;padding-bottom:.2em;
  transition:color var(--t) var(--ease);
}
.footer__col a::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);
}
.footer__col a:hover{color:var(--ink)}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__bar{
  margin-top:clamp(2.5rem,4vw,4rem);padding-top:1.4rem;
  border-top:1px solid var(--ink-18);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.82rem;color:var(--ink-58);
}

/* --- 13. THE ONE ORCHESTRATED MOMENT: hero load --------------- */
/* Newsreader at .98 line-height drops ink .041em to .055em below the line box,
   so the mask needs room. The ceiling is .078em: the inner span slides from
   108% of a .98em box, and any more padding than that lets the incoming line
   peek out before it animates. .065em sits between the two. The negative
   margin keeps layout identical. */
.lm{display:block;overflow:hidden;padding-bottom:.065em;margin-bottom:-.065em}
.lm > span{display:block;will-change:transform}
.js .lm > span{ transform:translateY(108%); }
.js .fade{ opacity:0; transform:translateY(14px); }

.js .lm > span,
.js .fade{
  transition:transform 1.05s var(--ease) var(--d,0s), opacity 1.05s var(--ease) var(--d,0s);
}
.is-ready .lm > span{ transform:none; }
/* Release the clip once the slide has landed, so nothing can be cropped at
   rest. The reveal is driven by body.is-ready, not a class on .lm or its span,
   and overflow is discrete, so a 1ms animation delayed past the longest
   staggered line (1.05s + .40s) flips it. */
.is-ready .lm{ animation:lm-unclip 1ms linear 1.6s forwards; }
@keyframes lm-unclip{ to{ overflow:visible; } }
.is-ready .fade{ opacity:1; transform:none; }

/* Scroll-revealed content: quiet, and only on group leads. */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease) var(--d,0s), transform var(--t-slow) var(--ease) var(--d,0s)}
.rv.is-in{opacity:1;transform:none}

/* --- 14. REDUCED MOTION: final state, no exceptions ------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .lm > span,.js .fade,.js .rv{opacity:1 !important;transform:none !important}
  .lm{overflow:visible !important;animation:none !important}
  .rule{transform:scaleX(1) !important}
  .header::after{transform:scaleX(1) !important}
  .menu{transition:none}
  .btn__c svg,.navlink__c svg{transform:none !important}
}

/* ============================================================
   COMPONENTS for capabilities / engagement / contact / diagnostic.
   Same system: Newsreader for display, headings, labels, numerals;
   the grotesque for body, buttons and fields. Hairlines only.
   ============================================================ */

.hero--page{ min-height:0; }
.small{ font-size:.9rem; line-height:1.6; }

/* Diagnostic hero: the outcome leads. */
.diagnostic-hero{
  min-height:clamp(38rem,68svh,46rem);
  padding-top:clamp(6rem,8vw,8rem);
  padding-bottom:clamp(2.75rem,4vw,3.75rem);
}
.diagnostic-hero .hero__label{margin-bottom:clamp(1.75rem,3vw,2.25rem)}
.diagnostic-hero .hero__rule{margin-bottom:clamp(2rem,3.5vw,3rem)}
.diagnostic-hero__head{
  display:block;
}
.diagnostic-hero__title{
  max-width:14ch;
  font-size:clamp(2.65rem,1.25rem + 5.4vw,5.75rem);
}
.diagnostic-hero__lead{max-width:42ch;color:color-mix(in srgb,var(--ink) 76%,transparent)}
@media (max-width:719px){
  .diagnostic-hero{min-height:0}
  .diagnostic-hero__title{max-width:none}
}

/* composition variants */
@media (min-width:900px){
  .split--4-8{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
}
.lede{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}

/* three columns divided by nothing but their own top rules */
.cols3{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:0}
@media (min-width:900px){.cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(2rem,4vw,4rem)}}

/* capability detail */
.cap__pos{margin-top:1.4rem;max-width:30ch;color:var(--ink-58)}
.block{padding-top:clamp(1.75rem,3vw,2.5rem);margin-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--ink-18)}
.block:first-of-type{border-top:0;margin-top:clamp(2rem,4vw,3rem);padding-top:0}
.block > .label{margin-bottom:1.1rem}

.qlist{display:grid;gap:.85rem;counter-reset:q}
.qlist li{
  display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:.9rem;align-items:baseline;
  font-family:var(--news);font-weight:340;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.32;letter-spacing:-.015em;
  color:var(--ink);max-width:48ch;
}
.qlist li::before{
  counter-increment:q;content:counter(q,decimal-leading-zero);
  font-family:var(--news);font-variant-numeric:tabular-nums;
  font-size:.74rem;letter-spacing:.16em;color:var(--ink-45);
}

.wlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,3rem);border-top:1px solid var(--ink-18)}
@media (max-width:640px){.wlist{grid-template-columns:1fr}}
.wlist li{padding:.7rem 0;border-bottom:1px solid var(--ink-18);font-size:.92rem;color:var(--ink-58);line-height:1.5}

/* engagement terms — a list on hairlines, no fee, no card */
.terms{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:900px){.terms{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
.terms__list{border-top:1px solid var(--ink-18)}
.terms__list li{display:flex;justify-content:space-between;gap:1.5rem;padding:.9rem 0;border-bottom:1px solid var(--ink-18);font-size:.92rem}
.terms__list b{font-family:var(--news);font-weight:400;color:var(--ink)}
.terms__list span{color:var(--ink-58);text-align:right}

/* questions */
.faq{border-top:1px solid var(--ink-18);margin-top:clamp(2.5rem,5vw,4rem)}
.faq > div{display:grid;gap:.6rem clamp(1.5rem,4vw,4rem);grid-template-columns:minmax(0,1fr);padding:clamp(1.5rem,2.6vw,2.2rem) 0;border-bottom:1px solid var(--ink-18)}
@media (min-width:760px){.faq > div{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.faq dt{font-family:var(--news);font-weight:400;letter-spacing:-.012em;color:var(--ink);max-width:26ch;font-size:1.06rem}
.faq dd{color:var(--ink-58);max-width:56ch;font-size:.96rem;line-height:1.6}

/* ------------------------------------------------------------
   Homepage placement. These were inline style attributes; only the
   per-element --d stagger values stay in the markup.
   ------------------------------------------------------------ */
.d2--tight{max-width:14ch}
.d2--wide{max-width:16ch}
.sec__lead{margin-top:1.75rem;color:var(--ink-58)}
.actions--full{width:100%}
.firm-section{padding-block:clamp(4rem,7vw,7rem)}
.firm__statement{max-width:13ch}

/* Closing invitation: statement first, proof and action on the same measured
   right column. The inner rules make it feel like a final editorial folio. */
.contact-close__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.75rem,6vw,5.5rem);
  align-items:start;
}
.contact-close__label{margin-bottom:clamp(1.25rem,2.5vw,1.9rem)}
.contact-close__title{max-width:12ch}
.contact-close__body{font-size:clamp(1rem,.95rem + .3vw,1.16rem);line-height:1.65}
.contact-close .actions{
  margin-top:clamp(2.25rem,4vw,3.25rem);padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--ink-18);
}
.contact-close .reassure{
  margin-top:clamp(1.5rem,2.5vw,2rem);padding-top:1.25rem;
  border-top:1px solid var(--ink-12);
}
@media (min-width:900px){
  .contact-close__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* One size step above the other section headings: the only heading on the page
   that names what is for sale. Sits between .d2 and .d1. */
.d2--lg{ font-size:clamp(2.5rem, 1.3rem + 5.2vw, 5.75rem); }

/* Artifacts: a single editorial ledger. Number, deliverable and description
   share one baseline; horizontal rules provide order without boxing the work. */
.handoff__subhead{
  margin-top:clamp(2rem,3.5vw,3rem);margin-bottom:1.15rem;
  color:color-mix(in srgb,var(--ink) 68%,transparent);letter-spacing:.26em;
}
.artifacts{
  margin-top:0;
  border-top:1px solid var(--ink-18);
  border-bottom:1px solid var(--ink-18);
}
.artifacts > li{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;
  padding:clamp(1.5rem,2.5vw,2rem) 0;
}
.artifacts > li + li{ border-top:1px solid var(--ink-18); }
@media (min-width:720px){
  .artifacts > li{
    grid-template-columns:3rem minmax(12rem,.75fr) minmax(0,1.25fr);
    column-gap:clamp(1.5rem,3vw,3.25rem);align-items:baseline;
  }
}
.artifacts__t{
  font-size:clamp(1.65rem,1.2rem + 1.35vw,2.3rem);
  line-height:1.08;letter-spacing:-.018em;
  font-variation-settings:"opsz" 72;
  margin:0;
}
.artifacts .row__d{max-width:48ch}

.artifacts__n{ margin:0;align-self:baseline; }

/* The featured engagement is carried by its name and the measured ledger below;
   no decorative watermark competes for attention. */
.handoff__head{position:relative}
.handoff__title{max-width:15ch}
.handoff__head .sec__lead{
  max-width:37ch;color:color-mix(in srgb,var(--ink) 68%,transparent);
}

/* The engagement closes more tightly than a general content section. The
   final three statements need room to breathe, not an empty black field. */
#handoff{padding-bottom:clamp(4rem,7vw,7rem)}

/* Below 680px: a 13px cap (19.65px at the same .6616 ratio) in a 72px header. */
@media (max-width:679px){
  .wm--sm{ font-size:1.1556rem; }
  .header__in{ min-height:72px; }
}

/* Fixed headers and positional hover do not mix with measured editorial grids.
   Anchor clearance keeps headings visible; hover changes tone and rules only. */
section[id]{scroll-margin-top:calc(84px + 1.5rem)}
@media (max-width:679px){section[id]{scroll-margin-top:calc(72px + 1rem)}}

/* ============================================================
   PREMIUM FINISH
   The structure stays strictly editorial. Refinement comes from warmer
   materials, sharper microtype, quieter depth and more decisive motion.
   ============================================================ */

/* A nearly imperceptible paper grain takes the digital edge off the two-colour
   system. It is fixed, non-interactive and introduces no additional hue. */
body::after{
  content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;
  opacity:.032;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
html{scrollbar-color:color-mix(in srgb,var(--white) 32%,transparent) var(--black)}

/* Microtype moves to the grotesque. This creates a cleaner contrast with the
   expressive display face and makes folios feel precise rather than historic. */
.label{
  font-family:var(--grot);font-size:.875rem;font-weight:480;
  letter-spacing:.14em;
}
.display{font-weight:335;line-height:.97;letter-spacing:-.031em}
.wm--sm{font-size:1.31rem;letter-spacing:.175em;text-indent:.175em}

/* The header remains the same warm black over every section. */
.header__in{min-height:84px}
.header.is-stuck{
  background:var(--black);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.navlink{font-size:.875rem;font-weight:410;letter-spacing:.035em;min-height:44px;display:inline-flex;align-items:center}
.navlink__c,.btn__c{
  transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .55s var(--ease);
}
.navlink--cta:hover .navlink__c,.navlink--cta:focus-visible .navlink__c,
.btn:hover .btn__c,.btn:focus-visible .btn__c{
  border-color:var(--ink,var(--white));background:var(--ink,var(--white));transform:rotate(-4deg);
}
.navlink--cta:hover .navlink__c svg,.navlink--cta:focus-visible .navlink__c svg{
  stroke:var(--black);stroke-opacity:1;transform:translateX(3px);
}
.btn:hover .btn__c svg,.btn:focus-visible .btn__c svg{
  stroke:var(--ground);stroke-opacity:1;transform:translateX(4.5px);
}

/* Dark sections share one uninterrupted warm-black ground. Depth comes from
   type, rules and spacing rather than competing black gradients. */
.hero.on-black,.footer{background-image:none}
.hero-h--home{font-size:clamp(2.8rem,1.2rem + 4.9vw,6rem);max-width:none}

/* Ledger interactions are directional and measured. They reward inspection
   without making a professional-services site feel animated for its own sake. */
.hero__index li{transition:color var(--t) var(--ease),background-color var(--t) var(--ease)}
.hero__index li:hover{padding-left:0;background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.phase{transition:border-color var(--t) var(--ease)}
.phase__t,.phase__d{transition:color var(--t) var(--ease)}
.artifacts > li{
  transition:background-color var(--t) var(--ease);
}
@media (hover:hover){
  .row:hover .row__t{transform:none}
  .row:hover .row__d{
    color:color-mix(in srgb,var(--ink) 78%,transparent);transform:none;
  }
  .phase:hover{padding-left:0;border-color:var(--ink-45)}
  .artifacts > li:hover{
    padding-left:0;
    background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 3.5%,transparent),transparent 55%);
  }
}

@media (max-width:679px){
  .wm--sm{font-size:1.18rem}
  .header__in{min-height:72px}
  body::after{opacity:.024}
}

/* Readable editorial hierarchy and a compact, factual offer summary. */
.on-black, .on-white{
  --ink-58:color-mix(in srgb,var(--ink) 72%,transparent);
}
.hero--home{min-height:0;padding-block:clamp(7.5rem,9vw,9rem) clamp(3rem,5vw,5rem)}
.hero--home .hero-h{margin-bottom:clamp(2rem,3.5vw,3rem)}
.hero--home .hero__rule{margin-bottom:clamp(2rem,3.5vw,3rem)}
.hero--home .lead{max-width:43ch}
.hero--home .actions{margin-top:1.75rem}
.hero--home .hero__grid{align-items:start}
.offer-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;margin:clamp(2.5rem,4vw,4rem) 0 0;
  padding-top:1.5rem;border-top:1px solid var(--ink-18);
}
.offer-facts dt{font-size:.875rem;color:var(--ink-58);margin-bottom:.5rem}
.offer-facts dd{margin:0;font:400 clamp(1.6rem,2.5vw,2.3rem)/1.15 var(--news);letter-spacing:-.02em}
.offer-facts dd span{display:block;font:400 .875rem/1.5 var(--grot);letter-spacing:0;color:var(--ink-58);margin-top:.5rem}
.row__d,.phase__d,.faq dd,.wlist li,.minilist li,.terms__list li,.hero__index li{font-size:1rem}
.phase__n{font-size:.875rem;letter-spacing:.08em}
.small{font-size:1rem}
.faq{margin-left:0;margin-right:0}
.faq dd{margin:0}
.booking-alternative{max-width:46ch;margin-top:1rem;font-size:1rem;color:var(--ink-58)}
.booking-alternative a{text-underline-offset:.22em;overflow-wrap:anywhere}
.header__in{z-index:101}
.menu[hidden]{display:none}
.menu{overflow-y:auto;overscroll-behavior:contain;padding:6rem 0 2rem;align-content:safe center}
.menu-btn{min-height:44px}
:focus-visible{outline-width:2px}
.footer__col a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:860px){
  html:not(.js) .header{position:relative}
  html:not(.js) .header__in{flex-wrap:wrap;padding-block:1rem;gap:1rem}
  html:not(.js) .nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
  html:not(.js) .nav__sep{display:none}
  html:not(.js) .menu-btn{display:none}
}
@media (max-width:520px){
  .hero__label{font-size:.875rem;letter-spacing:.08em;white-space:normal;flex-wrap:wrap;gap:.4rem .65rem}
  .hero__label::after{display:none}
  .hero-h--home{font-size:clamp(2.5rem,8.8vw,3.8rem);line-height:1.04}
  .offer-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer-facts > div:last-child{grid-column:1/-1;border-top:1px solid var(--ink-18);padding-top:1.25rem}
  .terms__list li{display:grid;gap:.3rem}
  .terms__list span{text-align:left}
}

/* Final editorial pass: one action hierarchy, readable column measures,
   and a consistent rhythm across the four page templates. */
.hero--page{padding-top:clamp(8rem,10vw,10rem)}
.hero-h--engagement{font-size:clamp(2.6rem,1.2rem + 4.9vw,6rem)}
.hero--home .hero__label{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.diagnostic-hero__title{margin-bottom:clamp(2rem,3.5vw,3rem);max-width:18ch}
.diagnostic-hero{min-height:0}
.section__rule{margin-bottom:clamp(2rem,3.3vw,3rem)}
.hero__index .label{margin-bottom:1rem}
.hero__index li:last-child{border-bottom:1px solid var(--ink-12)}
.hero__index li{padding:.75rem 0}
.reassure{max-width:48ch}
.btn--primary{
  background:var(--ink);color:var(--ground);
  padding:.85rem 1.1rem;gap:1.5rem;min-height:56px;
  border:1px solid var(--ink);font-weight:450;
}
.btn--primary::before,.btn--primary::after{display:none}
.btn--primary .btn__c{width:1.5rem;height:1.5rem;border:0;border-radius:0}
.btn--primary .btn__c svg{stroke:var(--ground);stroke-opacity:1}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--ground);color:var(--ink)}
.btn--primary:hover .btn__c,.btn--primary:focus-visible .btn__c{background:none;transform:none}
.btn--primary:hover .btn__c svg,.btn--primary:focus-visible .btn__c svg{stroke:var(--ink);transform:translateX(2px)}
.btn--primary:focus-visible{outline-color:var(--ink)}
.navlink{white-space:nowrap}
.display,.row__t,.phase__t,.lead,.row__d,.faq dt,.phase__d{overflow-wrap:anywhere}
.rail > *{min-width:0}
.header__in{gap:clamp(.5rem,2vw,2rem)}
.brand{container-type:inline-size;flex:1 1 13rem;max-width:13rem;min-width:0}
.brand .wm--sm{font-size:min(1.31rem,12cqi)}
.menu-btn{flex-shrink:0}
.navlink::after{bottom:.2rem}
.tlink{min-height:44px;display:inline-flex;align-items:center;line-height:1.5;max-width:100%;overflow-wrap:anywhere}
.menu-btn{font-family:var(--grot);font-size:.875rem;letter-spacing:.08em}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu__foot{margin-top:2rem}
.footer__bar p:last-child{max-width:56ch}
.footer__col{gap:.15rem}
.qlist li::before{font-size:.8125rem;color:var(--ink-58)}
.terms__list li{align-items:baseline}
.practice-rail .block:first-of-type{margin-top:0}
.practice-rail .rail__label .display{font-size:clamp(2rem,1.2rem + 2vw,3rem);line-height:1.06}
@media (min-width:901px){
  .practice-rail{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(3rem,7vw,7rem)}
  .practice-rail .rail__label{max-width:28ch}
  .practice-rail .rail__label .display{max-width:16ch}
}
/* Three detailed process columns need more room than three short phases. */
#approach .minilist li{grid-template-columns:1fr;gap:.4rem}
#approach .minilist span:first-child{font-family:var(--grot);font-size:.875rem}
@media (min-width:900px) and (max-width:1199px){
  #approach .cols3{grid-template-columns:1fr}
  #approach .phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem 2rem;padding-right:0}
  #approach .phase__n{grid-column:1/-1;margin-bottom:.5rem}
  #approach .phase__t{margin:0}
  #approach .phase__d{grid-column:1}
  #approach .minilist{grid-column:2;grid-row:2/4;margin-top:0}
}
@media (min-width:720px) and (max-width:1100px){
  .artifacts > li{grid-template-columns:2rem minmax(0,1fr);gap:.5rem 1rem}
  .artifacts .row__d{grid-column:2;max-width:55ch}
}
@media (max-width:900px){
  .rail{gap:1.5rem}
  .label--counter::before{display:inline;margin-right:1rem;letter-spacing:.08em}
  .rows{margin-top:2rem}
  .practice-rail .rail__label .display{max-width:20ch}
}
@media (max-width:520px){
  .brand .wm--sm{font-size:min(1.18rem,12cqi)}
  .btn--primary{max-width:100%;padding:.75rem;gap:.75rem}
  .btn--primary .btn__c{width:1.25rem;height:1.25rem}
  .hero--home,.hero--page{padding-top:7rem;padding-bottom:3rem}
  .hero-h--home,.hero-h--engagement{font-size:clamp(2.25rem,9.8vw,3rem);line-height:1.04;text-wrap:balance}
  .hero-h .lm,.hero-h .lm > span{display:inline;overflow:visible;transform:none!important}
  .hero__label{font-size:.8125rem;letter-spacing:.055em}
  .hero__grid{gap:2rem}
  .hero-h{margin-bottom:2rem}
  .hero__rule{margin-bottom:2rem}
  .hero--home .lead{font-size:1.0625rem;line-height:1.6}
  .hero--home .reassure{margin-top:1rem}
  .offer-facts{margin-top:2rem;gap:1.25rem}
  .offer-facts dd{font-size:1.65rem}
  .offer-facts > div:last-child{padding-top:1rem}
  .actions{gap:1.25rem;margin-top:2rem}
  .artifacts > li{grid-template-columns:1.5rem minmax(0,1fr);gap:.65rem .75rem;padding-block:1.5rem}
  .artifacts .row__d{grid-column:2}
  .artifacts__n{font-size:.8125rem}
  .artifacts__t{font-size:1.7rem}
  .handoff__title{font-size:clamp(2.25rem,9vw,3rem);max-width:none}
  .d2--tight{max-width:18ch}
  .contact-close__title{max-width:16ch}
  .contact-close__grid{gap:2rem}
  .contact-close .actions{margin-top:1.75rem;padding-top:1.5rem}
  .contact-close .reassure{border-top:0;padding-top:0;margin-top:1rem}
  .footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1rem}
  .footer__col a{font-size:.875rem;overflow-wrap:anywhere}
  .footer__mark{margin-bottom:1.5rem}
  .footer__col .label{margin-bottom:.5rem}
  .footer__bar{margin-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  .btn--primary:hover .btn__c svg{transform:none}
}
/* The Arkenwell edition: warm-metal annotations, expressive display type,
   and measured editorial surfaces. The accent is never the body-text color. */
:root{--accent:#c7ae83}
.on-black{--accent:#c7ae83}
.on-white{--accent:#77613e}
.display{font-weight:350;letter-spacing:-.035em}
.hero-h--home{font-size:clamp(3rem,1.3rem + 5.15vw,6.5rem);line-height:1.01;letter-spacing:-.043em}
.hero-h--home .lm:last-child{color:var(--ink)}
.hero--home{padding-top:clamp(8rem,10vw,10rem);padding-bottom:clamp(3.5rem,5vw,5rem)}
.hero--home .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(3rem,8vw,8rem)}
.hero__intro .lead{font-size:clamp(1.25rem,1rem + .45vw,1.5rem);max-width:37ch;line-height:1.55}
.hero__context{font-size:1rem;color:var(--ink-58);line-height:1.65;max-width:43ch;margin-top:1.25rem}
.hero--home .actions{margin-top:2rem}
.hero__label{letter-spacing:.14em}
.hero__label::after{background:var(--accent);width:3rem}
.hero__rule{position:relative}
.hero__rule::before{content:"";position:absolute;inset:0 auto 0 0;width:3rem;background:var(--accent)}
.engagement-note{border-left:1px solid var(--ink-18);padding-left:clamp(1.5rem,3vw,3rem)}
.engagement-note > .label{color:var(--ink);font-size:.8125rem;letter-spacing:.09em}
.engagement-note__duration{display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem;margin:1rem 0 .75rem}
.engagement-note__duration > span{font:350 clamp(5rem,7vw,7rem)/.9 var(--news);letter-spacing:-.07em;color:var(--ink);padding-top:.1em}
.engagement-note__duration > p{font:400 1.45rem/1.12 var(--news);letter-spacing:-.015em}
.engagement-note__fit{font-size:1rem;line-height:1.6;color:var(--ink-58);max-width:36ch}
.engagement-note__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--ink-18)}
.engagement-note__facts dt{font-size:.8125rem;color:var(--ink-58);margin-bottom:.5rem}
.engagement-note__facts dd{font:400 1.1rem/1.3 var(--news);margin:0}
.engagement-note__facts dd span{display:block;font:400 .8125rem/1.5 var(--grot);color:var(--ink-58);margin-top:.4rem}
.btn{transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.btn--primary{background:var(--accent);border-color:var(--accent);padding:.95rem 1.3rem;gap:1.5rem;min-height:58px;letter-spacing:.015em}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--ground);border-color:var(--accent);color:var(--ink)}
.btn--primary:focus-visible{outline-color:var(--accent)}
.navlink--cta{font-weight:450}
.navlink--cta .navlink__c{border-color:var(--accent)}
.navlink--cta .navlink__c svg{stroke:var(--accent);stroke-opacity:1}
.navlink--cta:hover .navlink__c{background:var(--accent);border-color:var(--accent)}
.navlink--cta:hover .navlink__c svg{stroke:var(--black)}
.label--counter::before,.artifacts__n,.phase__n{color:var(--ink)}
.label--counter::before{font-family:var(--news);font-size:1.1rem;letter-spacing:.06em}
.artifacts__n{font-family:var(--news);font-size:1rem}
.artifacts > li{padding-block:clamp(1.5rem,2.5vw,2.25rem)}
.artifacts__t{font-size:clamp(1.7rem,1.15rem + 1.35vw,2.35rem)}
.artifacts .row__d{max-width:44ch}
.handoff__title{max-width:17ch}
.handoff__head .sec__lead{max-width:42ch;font-size:clamp(1.05rem,1rem + .25vw,1.25rem)}
.handoff__subhead{font-size:.8125rem;letter-spacing:.13em}
#practice .d2--tight{max-width:20ch}
.firm__statement{max-width:14ch}
.firm-section .split{gap:clamp(2rem,4vw,4rem)}
.firm-section .body:first-child{font-size:clamp(1.1rem,1rem + .3vw,1.3rem);line-height:1.6;color:var(--ink)}
.contact-close__title{max-width:17ch}
.contact-close .actions{border-top:0;padding-top:0;margin-top:2rem}
.contact-close .reassure{border-top:0;padding-top:0;margin-top:1.5rem}
.footer .wm--xl{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.footer__bar{font-size:.8125rem;letter-spacing:.01em}
.practice-rail .block:last-child .lead{font-family:var(--news);font-size:clamp(1.6rem,1.3rem + .6vw,2rem);line-height:1.2;letter-spacing:-.015em;max-width:36ch!important}
.phase__n{font-family:var(--grot);font-size:.8125rem}
.phase__t{font-size:clamp(1.6rem,1.25rem + .65vw,2rem);line-height:1.13}
.faq dt{font-size:clamp(1.2rem,1.05rem + .4vw,1.5rem);line-height:1.3;max-width:28ch}
.faq > div{gap:1rem 3rem}
.contact-direct{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--ink-18);max-width:38rem}
.contact-direct > .label{font-size:.8125rem;letter-spacing:.08em;margin-bottom:.8rem}
.contact-direct__row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem}
.contact-direct__row > a{font:400 clamp(1.25rem,1rem + .5vw,1.5rem)/1.3 var(--news);text-decoration-thickness:1px;text-underline-offset:.25em;overflow-wrap:anywhere}
.copy-email{font-size:.875rem;min-height:44px;padding:.4rem 0;color:var(--ink-58);text-decoration:underline;text-underline-offset:.3em}
.copy-email:hover{color:var(--ink)}
.copy-email:disabled{cursor:wait;opacity:.65}
.copy-email[hidden]{display:none}
.copy-status{font-size:.875rem;line-height:1.5;max-width:45ch;color:var(--ink)}
.copy-status:not(:empty){margin-top:.75rem}
@media (max-width:900px){
  .hero--home .hero__grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .engagement-note{border-left:0;border-top:1px solid var(--ink-18);padding:1.5rem 0 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 2rem}
  .engagement-note > .label{grid-column:1/-1}
  .engagement-note__duration{grid-column:1;grid-row:2/4;margin-bottom:0}
  .engagement-note__fit{grid-column:2;margin-top:1rem}
  .engagement-note__facts{grid-column:2;margin-top:1rem;padding-top:1rem}
}
@media (max-width:600px){
  .hero-h--home{font-size:clamp(2.35rem,9.9vw,3.75rem);line-height:1.04;letter-spacing:-.035em}
  .hero--home{padding-top:7rem;padding-bottom:3rem}
  .hero__intro .lead{font-size:1.125rem;line-height:1.6}
  .hero__context{font-size:.9375rem}
  .hero__label{font-size:.8125rem;letter-spacing:.07em}
  .engagement-note{grid-template-columns:minmax(0,1fr);gap:0}
  .engagement-note > .label,.engagement-note__duration,.engagement-note__fit,.engagement-note__facts{grid-column:1;grid-row:auto}
  .engagement-note__duration{margin:1rem 0}
  .engagement-note__duration > span{font-size:5.5rem}
  .engagement-note__fit{margin-top:0;max-width:40ch}
  .engagement-note__facts{margin-top:1.25rem;padding-top:1rem}
  .btn--primary{padding:.85rem 1rem;gap:1rem;max-width:100%}
  .artifacts__t{font-size:1.7rem}
  .firm-section .body:first-child{font-size:1.125rem}
  .contact-close__title br{display:none}
  .contact-close__title{max-width:14ch}
  .contact-direct{margin-top:1.5rem}
  .contact-direct__row{gap:.5rem 1rem}
}

@media (min-width:1000px){
  .diagnostic-hero > .fade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(3rem,7vw,7rem);align-items:start}
  .diagnostic-hero__lead{grid-column:1;grid-row:1}
  .diagnostic-hero > .fade > .actions{grid-column:1;grid-row:2;margin-top:1.75rem}
  .diagnostic-hero > .fade > .reassure{grid-column:1;grid-row:3;margin-top:1rem}
  .diagnostic-hero .contact-direct{grid-column:2;grid-row:1/4;margin:0;padding:1rem 0 1rem 2rem;border-top:0;border-left:1px solid var(--ink-18);align-self:stretch}
  .diagnostic-hero .contact-direct__row{display:grid;gap:.75rem;justify-items:start}
}

/* Warm ivory actions with a restrained brass detail. */
.btn--primary{background:#f3f1ea;color:#080807;border:1px solid #d5d0c5;border-radius:999px;padding:.5rem .55rem .5rem 1.5rem;gap:1.65rem;min-height:60px;font-weight:500;letter-spacing:.01em;box-shadow:inset 0 1px 0 #ffffff80}
.btn--primary .btn__c{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid #08080740;background:transparent;color:#080807;opacity:1}
.btn--primary .btn__c svg{stroke:#080807;stroke-opacity:1}
.btn--primary:hover,.btn--primary:focus-visible{background:#e6e1d5;border-color:#c7ae83;color:#080807}
.btn--primary:hover .btn__c,.btn--primary:focus-visible .btn__c{background:#080807;border-color:#080807;color:#c7ae83}
.btn--primary:hover .btn__c svg,.btn--primary:focus-visible .btn__c svg{stroke:#c7ae83}
.btn--primary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.offer-check{margin-top:2rem;padding:1.5rem 0;border-top:1px solid var(--ink-18);max-width:55rem}
.offer-check .label{color:var(--ink);margin-bottom:.75rem}
@media(max-width:600px){.btn--primary{padding:.45rem .5rem .45rem 1.15rem;gap:1rem}.btn--primary .btn__c{width:2.25rem;height:2.25rem}}

@media print{
  .header,.skip,.menu,.actions,.reassure,.footer,body::after{display:none!important}
  .on-black,.on-white{--ground:#fff;--ink:#111;--ink-58:#444;background:#fff;color:#111}
  .hero,.section{min-height:0;padding:1.5rem 0;break-inside:auto}
  .container{max-width:none;padding-inline:0}
  .rv,.fade,.lm>span{opacity:1!important;transform:none!important}
  .lm{overflow:visible!important}
  .rail__label{position:static}
  .artifacts>li,.row,.phase,.faq>div{break-inside:avoid}
}