/* Captain 2026-09-10: no pale rails on navy surfaces, except the approved restored two edge rails and interrupted horizontal rule in the statement band. The hero lockup rule stays. */
/* Home v3, variant E (2026-09-08): D plus the Atelier Norr take. Loads after a.css and d.css; scoped to .v3-e.
   Taken: inset framed blocks with a small radius, navy statement band with concentric rings and the mark above the line,
   glass cards over a photo for the why points, a centred photo CTA, outlined rectangular buttons, corner-tick eyebrows. */
.v3-e{--gut-e:8px;--r:6px;--line-paper:rgba(250,250,248,.16)}
body.v3-e{background:var(--paper)}

/* Framed blocks */
.v3-e .hero{margin:var(--gut-e) var(--gut-e) 0;width:auto;border-radius:var(--r);overflow:hidden}

/* Buttons: outlined rectangle, small radius */
.v3-e .btn-e{display:inline-block;margin-top:18px;padding:14px 22px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.2;color:var(--ink);background:#fff;border:1px solid rgba(3,12,27,.28);border-radius:4px;text-decoration:none;transition:border-color .2s,background .2s}
.v3-e .btn-e:hover,.v3-e .btn-e:focus-visible{border-color:var(--ink);text-decoration:none}

/* Corner-tick eyebrow (Norr): the label sits between two small corner marks */
.v3-e .eyebrow--ticks{display:inline-flex;align-items:center;gap:0;padding:0 10px;position:relative;margin-bottom:22px}
.v3-e .eyebrow--ticks::before,.v3-e .eyebrow--ticks::after{content:"";position:absolute;width:7px;height:7px;border:1px solid currentColor}
.v3-e .eyebrow--ticks::before{left:0;top:-3px;border-right:0;border-bottom:0}
.v3-e .eyebrow--ticks::after{right:0;bottom:-3px;border-left:0;border-top:0}



/* Contact: centred photo CTA in the frame */
.v3-e .foot{border-top:0;margin-top:0}

@media (max-width:900px){
  .v3-e{--gut-e:6px}
  
  
  
  
  
  
  
  
  
  
}
@media (prefers-reduced-motion:reduce){.v3-e .btn-e{transition:none}}

/* Rings ripple out from the mark. The static ring field stays underneath, fainter. */
@keyframes e-ripple{0%{transform:scale(.06);opacity:0}10%{opacity:.9}70%{opacity:.35}100%{transform:scale(1.3);opacity:0}}
@keyframes e-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- Mason 2026-09-08, Verkas round ---------- */
/* Eyebrows in square brackets (replaces the corner ticks) */
.v3-e .eyebrow--ticks{padding:0;gap:0}
.v3-e .eyebrow--ticks::before,.v3-e .eyebrow--ticks::after{position:static;width:auto;height:auto;border:0;display:inline}
.v3-e .eyebrow--ticks::before{content:"[\00a0"}
.v3-e .eyebrow--ticks::after{content:"\00a0]"}






/* Fix (Mason 2026-09-08, "overlap around the images"): main paints above the sticky hero, so the frame gutters and the
   rounded corners show paper, not the hero video underneath. Background photos skip the wipe-in clip. */
.v3-e main{position:relative;z-index:1;background:var(--paper)}

/* Mason 2026-09-08: no white outline. The frame is gone: no gutters, no radius, bands butt against the sections above and
   below, and no gap is left between the last band and the footer (that gap was showing the pinned hero video). */
.v3-e{--gut-e:0;--r:0}
.v3-e .hero{margin:0;border-radius:0}
.v3-e main{padding-bottom:0}

/* ---------- Mason 2026-09-08: deck colouring. Navy-graded photos instead of black and white; deck palette; no baby blue ---------- */
.v3-e{--paper:#F2F3F5;--paper-2:#E7EDF4;--navy:#0C121D;--navy-deep:#080D17;--ink:#181E2A;--ink-2:#485361;--ink-80:rgba(24,30,42,.82);--ink-66:rgba(24,30,42,.66);--line:#CCD3DC;--mute:#5B6778;--acc:#315782;--acc-dark:#A9BBD3;--sky:#315782;--v3b-accent:#315782}
body.v3-e{background:#F2F3F5}
.v3-e main{background:#F2F3F5}
/* Navy grade: grayscale under a navy multiply and a steel screen, so shadows go navy and highlights go cool paper */
.v3-e .fx-clip{position:relative;overflow:hidden}
.v3-e .fx-clip img{filter:grayscale(1) contrast(1.08)}
.v3-e .fx-clip::before{content:"";position:absolute;inset:0;z-index:1;background:#2B3E5F;mix-blend-mode:screen;opacity:.42;pointer-events:none}
.v3-e .fx-clip::after{content:"";position:absolute;inset:0;z-index:1;background:#0C121D;mix-blend-mode:multiply;opacity:.6;pointer-events:none}
/* Accents on dark surfaces use the deck's steel grey-blue, not the sky */
.v3-e .btn-e{background:#fff;border-color:#B7C1CE;color:#181E2A}
.v3-e .btn-e:hover{border-color:#181E2A}
.v3-e .eyebrow{color:var(--acc)}


/* ---------- Mason 2026-09-08: coherence. The statement band's instrument feel (rings, hairlines, slow motion) carried through the page ---------- */
@font-face{font-family:"Geist Mono";src:url("/assets/home-v3/d/fonts/geist-mono-400.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.v3-e{--mono:"Geist Mono",ui-monospace,Menlo,monospace;--field:rgba(24,30,42,.09);--field-dark:rgba(250,250,248,.06)}
/* 1. Mono metadata: every label, date and small link in the mono face, uppercase, tracked */
.v3-e .eyebrow,.v3-e .res-e time,.v3-e .what-w__link,.v3-e .res-e__more,.v3-e .foot__col h4{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
/* 4. Rules that draw: a tick ruler under each section head, drawn left to right as the block scrolls in (--p from focus.js) */
.v3-e .rule-e{position:relative;height:9px;margin:0 0 clamp(36px,calc(5vh / var(--z,1)),56px)}
.v3-e .rule-e::before{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px) left bottom/100% 4px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 96px) left bottom/100% 9px no-repeat;transform-origin:left;transform:scaleX(var(--p,1))}
/* Photos: the who portrait */
@media (prefers-reduced-motion:reduce){.v3-e .rule-e::before,.v3-e .what-w3__item::after{transform:none}}
/* Mason 2026-09-08: the tick ruler is out (plain hairlines that still draw in); the step is not the logo, so it leaves the statement band */
.v3-e .rule-e::before{background:linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}

/* ---------- Mason 2026-09-08: one page. The deck type (Spectral headlines, labels, callouts; Hanken Grotesk body and data) is E's type now, folded in from the e-serif overlay. ---------- */
@font-face{font-family:"Spectral";src:url("/assets/home-v3/d/fonts/spectral-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Spectral";src:url("/assets/home-v3/d/fonts/spectral-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Spectral";src:url("/assets/hero-focus/fonts/spectral-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/home-v3/d/fonts/hanken-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/home-v3/d/fonts/hanken-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
:root{--brand:"Spectral",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",Arial,sans-serif;--hw:400}
body.v3-e{font-family:var(--sans)}
.v3-e .btn-e,.v3-e .btn-br,.v3-e .nav__links,.v3-e .nav__dd-btn,.v3-e .nav__panel,.v3-e .nav__mobile,.v3-e .foot,.v3-e p{font-family:var(--sans)}
/* Headlines and callouts: Spectral regular, near-neutral tracking (the tight grotesk tracking is wrong for a serif) */
.v3-e h2,.v3-e h3,.v3-e .stmt-e p,.v3-e .why-e__card p,.v3-e .pause-e__line p,.v3-e .cta-e h2,.v3-e .who-e h2,.v3-e .res-e h2,.v3-e .res-e h3,.v3-e .what-w h2,.v3-e .what-w3__item h3{font-family:var(--brand);font-weight:400;letter-spacing:-.012em}
/* The name: Spectral regular, a hair of positive tracking */
.hero-focus.v3-e .hero__name{font-family:var(--brand);font-weight:400;letter-spacing:.005em}
.hero-focus.v3-e .hero__lines{font-family:var(--sans);font-weight:400}
/* Labels: the deck's tracked small serif caps (eyebrows, column heads, small links); data copy (dates) in Hanken */
.v3-e .eyebrow,.v3-e .foot__col h4,.v3-e .what-w__link,.v3-e .res-e__more{font-family:var(--brand);font-weight:500;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase}
/* Mason 2026-09-08 (Fable p9): the bracket eyebrows open. The two brackets start touching, split apart as the block scrolls in
   (--p 0 → .37), then the label is revealed between them from the centre (--p .4 → .75). Scroll-scrubbed like the rest of Fluid;
   open and still under reduced motion or without JS. */
.v3-e .eyebrow--ticks{display:inline-flex;align-items:center;gap:calc(var(--o,1) * .55em)}
.v3-e .eyebrow--ticks::before,.v3-e .eyebrow--ticks::after{content:none}
.v3-e .eyebrow--ticks .eyebrow__t{display:inline-flex;justify-content:center;white-space:nowrap;overflow:hidden}
html[data-fx="fluid"].motion-ready .v3-e .eyebrow--ticks{--o:clamp(0,calc(var(--p,1) * 2.7),1);--t:clamp(0,calc((var(--p,1) - .4) * 2.86),1);opacity:clamp(0,calc(var(--p,1) * 6),1);transform:none}
html[data-fx="fluid"].motion-ready .v3-e .eyebrow--ticks .eyebrow__t{max-width:calc(var(--o) * 40ch);opacity:var(--t)}
@media (prefers-reduced-motion:reduce){html[data-fx="fluid"].motion-ready .v3-e .eyebrow--ticks{--o:1;--t:1;opacity:1}html[data-fx="fluid"].motion-ready .v3-e .eyebrow--ticks .eyebrow__t{max-width:none;opacity:1}}
/* Mason 2026-09-08 (Fable p9): the hero name slightly thinner: Spectral Light (300) for the name and the opening; headlines stay at 400 */
@font-face{font-family:"Spectral";src:url("/assets/home-v3/d/fonts/spectral-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:block}
.hero-focus.v3-e .hero__name,.v3-e .praxus-opening__name{font-weight:300}
/* Mason 2026-09-08 (Fable p9): the hero lockup from the root page. The name on the left, a vertical rule in the middle, the three
   lines stacked on the right, and the lines in the root page's sans (Source Sans 3). The name stays Spectral Light. */
@font-face{font-family:"Source Sans Praxus";src:url("/assets/hero-focus/fonts/source-sans-3-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.hero-focus.v3-e .hero__lockup{flex-direction:row;align-items:center;justify-content:center;gap:clamp(28px,calc(3.4vw / var(--z,1)),52px);text-align:left;padding:calc(var(--navh,96px) + 16px) var(--pad) 72px}
.hero-focus.v3-e .hero__name{font-size:clamp(52px,calc(6.4vw / var(--z,1)),100px);line-height:1.02;margin:0;white-space:nowrap}
html .hero-focus.v3-e .hero__rule{flex:none;width:1px;height:clamp(64px,calc(9vh / var(--z,1)),96px);margin:0;background:rgba(250,250,248,.55);transform:none}
.hero-focus.v3-e .hero__lines{font-family:"Source Sans Praxus",var(--sans);font-weight:400;font-size:clamp(16px,calc(1.35vw / var(--z,1)),20px);line-height:1.8;letter-spacing:-.015em;text-align:left;margin:0;padding:0}
@media (min-width:1900px) and (max-width:1600px){.hero-focus.v3-e .hero__lines{font-size:22px}}
@media (max-width:900px){
  .hero-focus.v3-e .hero__lockup{flex-direction:column;gap:22px;text-align:center;padding:calc(var(--navh,72px) + 12px) 24px 64px}
  .hero-focus.v3-e .hero__name{font-size:clamp(38px,calc(11vw / var(--z,1)),64px);white-space:normal}
  html .hero-focus.v3-e .hero__rule{width:48px;height:1px}
  .hero-focus.v3-e .hero__lines{font-size:16px;line-height:1.85;text-align:center}
}
/* Mason 2026-09-08 (Fable p9): a new button hover. A navy panel wipes in from the left behind the label and the label turns paper;
   on leave it wipes out to the right. On the navy bands the white button keeps a paper border so it stays visible. */
.v3-e .btn-e{position:relative;overflow:hidden;isolation:isolate;transition:color .35s ease,border-color .35s ease}
.v3-e .btn-e::after{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;border:0;background:var(--navy);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.22,1,.36,1);z-index:-1;pointer-events:none}
.v3-e .btn-e:hover,.v3-e .btn-e:focus-visible{color:var(--paper);border-color:var(--navy)}
.v3-e .btn-e:hover::after,.v3-e .btn-e:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (prefers-reduced-motion:reduce){.v3-e .btn-e,.v3-e .btn-e::after{transition:none}}
/* Mason 2026-09-08 (Fable p9): "I don't like the border around the button" → no border. Buttons are solid: navy with paper text on the
   paper sections, paper with ink text on the navy bands. The hover wipe stays: navy wipes to the accent blue, paper wipes to steel. */
.v3-e .btn-e,.v3-e .btn-e:hover,.v3-e .btn-e:focus-visible,.v3-e .btn-e--paper,.v3-e .btn-e--paper:hover,.v3-e .btn-e--paper:focus-visible{border-color:transparent}
.v3-e .btn-e{background:var(--navy);color:var(--paper)}
.v3-e .btn-e::after{background:var(--acc)}
.v3-e .btn-e:hover,.v3-e .btn-e:focus-visible{color:var(--paper)}
.v3-e .btn-e:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* Mason 2026-09-09: Dia (and Safari 26 / iOS) tint the browser bar from the top strip of the page; over the see-through nav that strip was the raw sky in the video. The nav is solid navy from the start, as it already is once scrolled and on every inner page. */
.hero-focus.v3-e .nav{background:var(--navy)}
/* Mason 2026-09-12: keep the statement and photo bands full-screen on phones ("easy to just scroll past"); do not fit them to content. */
/* Mason 2026-09-23: logo and menu stay visible on the film from the first frame. Transparent over the video — no header bar. Inner pages keep the solid navy bar. */
.home-v3.v3-e .nav{transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.home-v3.v3-e .nav.nav--hidden{opacity:1;pointer-events:auto}
.home-v3.v3-e #site-navigation.integrated-nav,
.home-v3.v3-e .nav.nav--clear:not(.nav--open):not(.nav--dd-open),
.home-v3.v3-e #site-navigation.integrated-nav.nav--clear:not(.nav--open):not(.nav--dd-open){background:transparent;box-shadow:none;color:#f8fafc}
.home-v3.v3-e #site-navigation.integrated-nav.nav--past:not(.nav--open):not(.nav--dd-open){background:#0c121d}
.home-v3.v3-e #site-navigation .wordmark,
.home-v3.v3-e #site-navigation .nav-links,
.home-v3.v3-e #site-navigation .menu-toggle-label,
.home-v3.v3-e #site-navigation .menu-toggle-icon{color:#f8fafc;text-shadow:0 1px 12px rgba(0,0,0,.45)}
/* Mason 2026-09-09: "the scroll feel on mobile is very clunky" — on phones the navy grade is one flat tint instead of the screen + multiply pair (same tone curve: white lands near .42, black near .03) so nothing blends while scrolling, and the glass cards drop the backdrop blur */
@media (max-width:900px){
.v3-e .fx-clip::before{display:none}
.v3-e .fx-clip::after{mix-blend-mode:normal;opacity:.61}
}
/* Mason 2026-09-23: drop the navy veil. Neutral black wash only — film should read black and white, not blue. */
.home-v3.hero-focus.v3-e .hero__wash{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 28%,rgba(0,0,0,.22) 68%,rgba(0,0,0,.48) 100%)}
.home-v3.hero-focus .hero__poster,.home-v3.hero-focus .hero__video{filter:grayscale(1) contrast(1.06)}
@media(max-width:900px){.home-v3.hero-focus .hero__video{filter:none}}

/* C2: practice-page controls and fully legible phone labels. The home hero is unchanged. */
@media (hover:none) and (pointer:coarse){html[data-fx="fluid"].motion-ready .v3-e .eyebrow--ticks .eyebrow__t{max-width:none;opacity:1}}
.v3-e.page-e .media-toggle:focus-visible,.v3-e.page-e .nav a:focus-visible,.v3-e.page-e .nav button:focus-visible{outline:2px solid #A9BBD3;outline-offset:4px}
@media (max-width:900px){
 .v3-e.page-e .nav__burger{width:44px;height:44px}
 .v3-e.page-e .nav--open .nav__mobile{gap:8px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .v3-e.page-e .nav__mobile a{display:flex;align-items:center;min-height:44px}
 
 
}

/* ---------- Services panel (2026-09-10, wave two, shell crew; captain: "updating the drop down menu"). Part of the family: the two rails draw down
   from the bar, hairlines only, no shadow, bracket label, Spectral names, Hanken ledes, arrow links, one graded New York photo per practice.
   Open is a curtain (the panel unclips from the bar) while the four columns rise in turn; close is quick. Phone menu grouped by Services / Company. ---------- */
html .hero-focus.v3-e .nav .nav__panel{box-shadow:none;opacity:1;transform:none;visibility:hidden;pointer-events:none;clip-path:inset(0 0 100% 0);transition:clip-path .26s cubic-bezier(.65,0,.35,1),visibility 0s .26s}  /* html + .nav: outranks motion.css's panel transition */
html .hero-focus.v3-e .nav.nav--dd-open .nav__panel{visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.22,1,.36,1),visibility 0s}
/* the label: the family's bracket eyebrow, drawn here so it never depends on a scroll or reveal state */
.hero-focus.v3-e .nav__row-ph{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B1F3A;margin-bottom:16px}
.hero-focus.v3-e .nav__row-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1) contrast(1.08);transform:scale(1.06);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.hero-focus.v3-e .nav__row-ph::before{content:"";position:absolute;inset:0;z-index:1;background:#2B3E5F;mix-blend-mode:screen;opacity:.42;pointer-events:none}
.hero-focus.v3-e .nav__row-ph::after{content:"";position:absolute;inset:0;z-index:1;background:#0C121D;mix-blend-mode:multiply;opacity:.5;pointer-events:none;transition:opacity .6s ease}
.hero-focus.v3-e .nav--dd-open .nav__row-ph img{transform:none}
/* phone menu: grouped, the practices first */
@media (max-width:900px){
  .hero-focus.v3-e .nav--open .nav__mobile{gap:6px;padding-top:24px}
  
  
  .hero-focus.v3-e .nav__mobile>a{font-size:22px;min-height:44px;display:flex;align-items:center}
  
}
@media (prefers-reduced-motion:reduce){
  .hero-focus.v3-e .nav__panel,.hero-focus.v3-e .nav__panel-inner::before,.hero-focus.v3-e .nav__panel-inner::after,.hero-focus.v3-e .nav__panel-inner>*,.hero-focus.v3-e .nav__row-ph img,.hero-focus.v3-e .nav__row-more::before{transition:none}
  .hero-focus.v3-e .nav__panel{clip-path:none}
  
  .hero-focus.v3-e .nav__row-ph img{transform:none}
}

/* Depth (astra-design idea C, 2026-09-10): the names column extends 32px over the photograph, so the picture sits behind a fixed navy edge; on a swap the
   outgoing photo darkens and retreats 8px behind that edge while the next arrives in place. No text moves. Reduced motion swaps instantly. */
.hero-focus.v3-e .nav__row--b{display:flex;align-items:center;gap:20px;padding:10px 0;border-top:0}
.hero-focus.v3-e .nav__m{grid-area:1/1;margin:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.hero-focus.v3-e .nav__m.is-on{opacity:1}
.hero-focus.v3-e .nav__m .nav__row-ph{aspect-ratio:2/1;max-height:calc(40vh / var(--z,1));margin:0}
.hero-focus.v3-e .nav__m figcaption{font-size:17px;line-height:1.6;color:rgba(250,250,248,.78);margin-top:16px;max-width:36em}
@media (prefers-reduced-motion:reduce){.hero-focus.v3-e .nav__m,.hero-focus.v3-e .nav__row--b .nav__row-name,.hero-focus.v3-e .nav__row--b .nav__row-more{transition:none}}
/* Rule: hairlines only, no radii. The outlined buttons carried a 4px radius from the Norr take; squared on every page (2026-09-10, shell crew) */
.v3-e .btn-e{border-radius:0}


/* Research head: a one-line framing under the title, in the What we do lede style. */
@media(max-width:900px){.v3-e .res-e__lede{font-size:17px;margin-top:12px}}

/* Figures at the foot of the hero: a centred group, thin lines between, counting numerals. */
@media(max-width:760px){.v3-e .hero__figs{padding:24px 0 60px}.v3-e .hero__figs li{padding:2px 12px 0}.v3-e .hero__figs b{font-size:24px}.v3-e .hero__figs span{font-size:11px;letter-spacing:.08em;margin-top:6px;white-space:normal;max-width:10em}}
/* The lockup centres in the space left above the figures, not on the whole screen. */
.hero-focus.v3-e .hero__lockup{padding-bottom:calc(72px + 150px)}
@media(max-width:760px){.hero-focus.v3-e .hero__lockup{padding-bottom:calc(64px + 36px)}}  /* Mason, 2026-09-12: the lockup sat too high on phones; less bottom padding lets it centre in the screen while still clearing the figures. */
@media(max-width:760px){.v3-e .what-w__link,.v3-e .res-g__meta .res-g__foot .what-w__link{padding:8px 0;margin:-8px 0}.v3-e .cta-e__v a,.v3-e .page-e__v a{display:inline-block;padding:2px 0}.v3-e .foot__wm{padding:4px 0}}
@media(min-width:761px) and (max-width:1200px){.v3-e .hero__figs li{padding:4px 24px 0}.v3-e .hero__figs span{white-space:normal;max-width:12em}}