/* ── 00-nav.html ── */
/* ── bar (owner 25.09.2026): TOTALLY TRANSPARENT over the hero (no ground, no border, no blur); once the hero has
passed under the bar, FROSTED GLASS (white .72 + blur + hairline). Glass is also the no-JS state.
Legibility over the film comes from the hero's own top fade (01-hero .hr-scrim), not from a bar. ── */
#nav .navpill{ background:rgba(255,255,255,.72); border:0; border-bottom:1px solid rgba(16,24,21,.08); border-radius:0; box-shadow:none;
-webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
transition:background-color .35s var(--ease-out), border-color .35s var(--ease-out), -webkit-backdrop-filter .35s var(--ease-out), backdrop-filter .35s var(--ease-out) }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #nav .navpill{ background:rgba(255,255,255,.96) } }
#nav.over-hero .navpill{ background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none }
/* logo: primary on white, reversed over the hero */
#nav .nv-logo{ height:34px; width:auto; display:block }
@media (min-width:1024px){ #nav .nv-logo{ height:40px } }
#nav .nv-logo--reversed{ display:none }
#nav.over-hero .nv-logo--primary{ display:none }
#nav.over-hero .nv-logo--reversed{ display:block }
/* desktop links: quiet text, a gold hairline grows on hover (no chip) */
#nav .nv-link{ position:relative; display:inline-block; padding:10px 0; font-size:13.5px; font-weight:500; letter-spacing:.02em;
color:var(--ink); transition:color .2s var(--ease-out) }
#nav .nv-link::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:var(--gold-500);
transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease-out) }
#nav .nv-link:hover{ color:var(--green-700) }
#nav .nv-link:hover::after, #nav .nv-link:focus-visible::after{ transform:scaleX(1) }
#nav.over-hero .navpill a:not(.nav-home):hover{ background:transparent }
#nav.over-hero .navpill .nv-link{ color:rgba(255,255,255,.94) }
#nav.over-hero .navpill .nv-link:hover{ color:#fff }
/* the Contact button keeps its gold ground and green-900 text over the hero (beats _head's white link colour) */
#nav.over-hero .navpill a.nv-cta{ background:var(--gold-500); color:var(--green-900) }
#nav.over-hero .navpill a.nv-cta:hover, #nav .nv-cta:hover{ background:var(--gold-400,#D6B56C) }
/* focus: gold ring on the dark ground */
#nav.over-hero .navpill :focus-visible{ outline-color:var(--gold-500) }
/* menu toggle: label + two-line icon that turns into a cross */
#nav .nv-toggle{ color:var(--ink) }
#nav .nv-toggle__close{ display:none }
#nav .nv-toggle[aria-expanded="true"] .nv-toggle__open{ display:none }
#nav .nv-toggle[aria-expanded="true"] .nv-toggle__close{ display:inline }
#nav .nv-burger{ position:relative; width:22px; height:12px; display:inline-block }
#nav .nv-burger i{ position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:1px;
transition:transform .3s var(--ease-out), top .3s var(--ease-out) }
#nav .nv-burger i:first-child{ top:0 } #nav .nv-burger i:last-child{ top:10.5px }
#nav .nv-toggle[aria-expanded="true"] .nv-burger i:first-child{ top:5.25px; transform:rotate(45deg) }
#nav .nv-toggle[aria-expanded="true"] .nv-burger i:last-child{ top:5.25px; transform:rotate(-45deg) }
/* menu open: the bar turns solid white so bar + panel read as one sheet, even over the hero */
#nav[data-open="true"] .navpill,
#nav.over-hero[data-open="true"] .navpill{ background:#fff; border-bottom-color:var(--line) }
#nav.over-hero[data-open="true"] .navpill .nv-logo--primary{ display:block }
#nav.over-hero[data-open="true"] .navpill .nv-logo--reversed{ display:none }
#nav.over-hero[data-open="true"] .navpill button{ color:var(--ink) }
#nav.over-hero[data-open="true"] .navpill .nv-link{ color:var(--ink) }
#nav.over-hero[data-open="true"] .navpill :focus-visible{ outline-color:var(--green-700) }
/* mobile panel: full width, large serif links on hairlines */
#nav .nv-panel{ max-height:calc(100svh - 64px); overflow-y:auto; overscroll-behavior:contain;
box-shadow:0 24px 40px -28px rgba(0,31,15,.35) }
#nav .nv-mlink{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line);
font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:28px; line-height:1.15; color:var(--ink);
transition:color .2s var(--ease-out) }
#nav .nv-mlink::after{ content:""; width:9px; height:9px; border-top:1.5px solid var(--gold-700); border-right:1.5px solid var(--gold-700);
transform:rotate(45deg); margin-right:4px }
#nav .nv-mlink:hover{ color:var(--green-700) }
#nav .nv-mail:hover{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px }
.js #nav #mobileMenu:not([hidden]) .nv-panel{ animation:nv-drop .35s var(--ease-out) both }
@keyframes nv-drop{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
/* ── 01-hero.html ── */
#hero{ min-height:max(620px, 88svh) }
@supports not (height:1svh){ #hero{ min-height:max(620px, 88vh) } }
#hero .hr-photo{ object-position:50% 45% }
/* pause control + credit: bottom-right, quiet */
#hero .hr-pause{ position:absolute; right:20px; bottom:20px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
border:1px solid rgba(255,255,255,.4); border-radius:3px; color:#fff; background:rgba(11,14,13,.35);
transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out) }
#hero .hr-pause:hover{ background:rgba(11,14,13,.7); border-color:rgba(255,255,255,.7) }
#hero .hr-pause .hr-ic-play{ display:none }
#hero .hr-pause[aria-pressed="true"] .hr-ic-play{ display:block }
#hero .hr-pause[aria-pressed="true"] .hr-ic-pause{ display:none }
#hero .hr-credit{ position:absolute; right:64px; bottom:28px; z-index:2; font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.55) }
@media (max-width:767px){ #hero .hr-pause{ top:84px; bottom:auto; right:16px } #hero .hr-credit{ display:none } }
@media (prefers-reduced-motion:reduce){ #hero .hr-pause{ display:none } }
/* Scrim v3 (owner 25.09.2026: "more brightness, green is fine but bright").
The film grade caps highlights at ~75% (worst text-band pixel ≈190), so the copy needs far less darkness.
Tint = brand green-800 #012D18. Solved with tools/contrast.py against the graded frames, at WCAG AA:
headline (large) 3:1 · sub-line and ghost button 4.5:1 · eyebrow (ivory) 4.5:1 · figures: gold numerals (large) 3:1, labels 4.5:1.
1) .hr-scrim: .18 over the whole film (the bright green tint) + a left gradient .30 → 0 by 70%.
2) .hr-body::before: .45 behind the text block, fading out 160px above it.
3) .hr-figs: its own band, .62, full width: the gold figures sit on a deliberate green data bar.
Composites: headline/sub (left) ≈ .68, CTAs (right) ≈ .55, figures ≈ .83 (numbers verified in the report). */
#hero .hr-scrim{
background-color:rgba(1,45,24,.18);
background-image:
linear-gradient(to bottom, rgba(1,45,24,.45) 0, rgba(1,45,24,.45) 64px, rgba(1,45,24,0) 200px), /* top fade: carries the transparent nav */
linear-gradient(to right, rgba(1,45,24,.30) 0%, rgba(1,45,24,.30) 28%, rgba(1,45,24,0) 70%);
}
#hero .hr-body::before{ content:""; position:absolute; z-index:-1; top:-160px; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
background:linear-gradient(to top, rgba(1,45,24,.45) 0%, rgba(1,45,24,.45) calc(100% - 160px), rgba(1,45,24,0) 100%); pointer-events:none }
#hero .hr-figs{ position:relative }
#hero .hr-figs::before{ content:""; position:absolute; z-index:-1; top:0; bottom:-40px; left:50%; width:100vw; transform:translateX(-50%);
background:rgba(1,45,24,.62); pointer-events:none }
#hero .eyebrow{ color:#F3EAD2 } /* ivory in the hero: gold-500 would need a .7+ scrim at 11px; the gold rule stays */
/* headline: Cormorant 600, sentence case; second clause italic on its own line */
#hero .hr-title{ font-size:clamp(44px, 5.8vw, 84px); line-height:1.02; letter-spacing:-.012em }
#hero .hr-em{ display:block }
#hero .hr-sub{ color:var(--green-100, #D6E3DA) }
/* entrance: words rise in sequence once, 700ms each, 80ms apart. Pure CSS: shows in full if the animation can't run. */
.js #hero .hr-w{ display:inline-block; animation:hr-rise .7s var(--ease-out) both; animation-delay:calc(var(--i) * 80ms + 140ms) }
@keyframes hr-rise{ from{ opacity:0; transform:translateY(.28em) } to{ opacity:1; transform:none } }
/* buttons: square-ish (3px), 48px tall */
#hero .hr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px;
border-radius:3px; font-size:14px; font-weight:600; letter-spacing:.02em; white-space:nowrap }
#hero .hr-btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.62);
transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out) }
#hero .hr-btn--ghost:hover{ background:#fff; color:var(--green-900); border-color:#fff }
/* figures strip: hairline above, hairlines between; number in gold serif, label in small caps */
#hero .hr-figs{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.2) }
#hero .hr-fig{ grid-column:span 2; display:flex; flex-direction:column; gap:4px; padding:18px 12px 4px 14px;
border-left:1px solid rgba(255,255,255,.2) }
#hero .hr-fig:nth-child(1), #hero .hr-fig:nth-child(4){ border-left:0; padding-left:0 }
#hero .hr-fig:nth-child(n+4){ grid-column:span 3; border-top:1px solid rgba(255,255,255,.2); margin-top:14px; padding-top:18px }
#hero .hr-num{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:30px; line-height:1; color:var(--gold-500); font-variant-numeric:lining-nums }
#hero .hr-lab{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--green-100, #D6E3DA) }
@media (min-width:768px){
#hero .hr-figs{ grid-template-columns:repeat(5, minmax(0,1fr)) }
#hero .hr-fig, #hero .hr-fig:nth-child(n+4){ grid-column:auto; flex-direction:row; align-items:baseline; gap:12px;
margin-top:0; border-top:0; padding:20px 16px 4px 24px }
#hero .hr-fig:nth-child(4){ border-left:1px solid rgba(255,255,255,.2); padding-left:24px }
#hero .hr-num{ font-size:34px }
#hero .hr-lab{ font-size:11px }
}
@media (min-width:1024px){ #hero .hr-num{ font-size:38px } }
/* ── 02-forums.html ── */
/* Hairline table: the grid's 1px gaps show the line colour through; top and bottom rules, open sides. */
#forums .fr-grid{ position:relative; overflow:hidden; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px; padding-block:1px; background:var(--line) } /* the 1px block padding draws the top and bottom rules */
#forums .fr-list{ display:contents; list-style:none; margin:0; padding:0 }
#forums .fr-head, #forums .fr-cell{ background:var(--ivory); min-width:0 }
/* Caption: a header row on phones/tablets, the first cell of the row on desktop */
#forums .fr-head{ grid-column:1 / -1; display:flex; flex-direction:column; gap:14px; padding:26px 0 24px }
#forums .fr-caption{ font-size:24px; line-height:1.2; color:var(--ink); max-width:22ch; margin:0 }
#forums .fr-cell{ --fr-px:16px; padding:22px var(--fr-px) 24px }
#forums .fr-in{ display:flex; flex-direction:column; gap:8px }
#forums .fr-cell--apex{ grid-column:1 / -1 } /* phones: the apex court takes the full row, leaving 4 even rows */
/* first-column cells sit flush with the caption (open sides, so the text aligns to the container edge) */
#forums .fr-cell:nth-child(1), #forums .fr-cell:nth-child(2n){ padding-left:0 }
#forums .fr-short{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:26px; line-height:1.05;
letter-spacing:.01em; color:var(--green-700) }
#forums .fr-full{ font-family:'Montserrat',sans-serif; font-weight:500; font-size:12px; line-height:1.5;
color:var(--ink-soft); overflow-wrap:break-word; hyphens:manual }
@media (max-width:379px){ #forums .fr-short{ font-size:23px } #forums .fr-cell{ --fr-px:14px } }
@media (min-width:640px){
#forums .fr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
#forums .fr-cell--apex{ grid-column:auto }
#forums .fr-cell{ --fr-px:18px; padding-block:26px 28px }
#forums .fr-cell:nth-child(n){ padding-left:var(--fr-px) }
#forums .fr-cell:nth-child(3n+1){ padding-left:0 }
#forums .fr-short{ font-size:24px }
#forums .fr-caption{ font-size:26px; max-width:none }
}
@media (min-width:768px){
#forums .fr-cell{ --fr-px:22px; padding-block:28px 30px }
#forums .fr-short{ font-size:27px }
}
/* Desktop: 5 × 2. The caption is the first cell, the nine forums fill the rest.
Sizes are set so "Supreme Court" (the longest label) holds one line in the narrowest cell of each band. */
@media (min-width:1024px){
#forums .fr-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) }
#forums .fr-head{ grid-column:auto; padding:30px 24px 32px 0; justify-content:flex-start }
#forums .fr-caption{ font-size:23px }
#forums .fr-cell{ --fr-px:20px; padding-block:30px 32px }
#forums .fr-cell:nth-child(n){ padding-left:var(--fr-px) }
#forums .fr-cell:nth-child(5){ padding-left:0 }
#forums .fr-in{ gap:10px }
#forums .fr-short{ font-size:24px }
}
@media (min-width:1200px){
#forums .fr-short{ font-size:28px }
#forums .fr-full{ font-size:12.5px }
#forums .fr-caption{ font-size:26px }
}
/* One slow gold sweep along the top rule when the row enters view. Runs once, so no pause is needed. */
#forums .fr-sweep{ position:absolute; top:0; left:0; z-index:1; width:24%; height:1px; pointer-events:none; opacity:0;
background:linear-gradient(90deg,transparent,var(--gold-500) 45%,var(--gold-500) 55%,transparent);
transform:translateX(-100%) }
#forums .fr-grid.fr-go .fr-sweep{ animation:fr-sweep 2.4s var(--ease-in-out) .35s 1 both }
@keyframes fr-sweep{
0%{ opacity:0; transform:translateX(-100%) }
12%{ opacity:1 }
88%{ opacity:1 }
100%{ opacity:0; transform:translateX(420%) }
}
@media (prefers-reduced-motion:reduce){ #forums .fr-sweep{ display:none } }
/* ── 03-expertise.html ── */
#expertise .ex-title{ font-size:clamp(38px,5.2vw,52px); color:var(--green-700); margin:0 }
#expertise .ex-sub{ font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:44ch; margin:0 }
/* ── Toolbar: tabs + filter on one hairline (desktop); stacked on phones ── */
#expertise .ex-tools{ display:flex; flex-direction:column; gap:20px }
#expertise .ex-tablist{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--line) }
#expertise .ex-tab{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:44px;
padding:10px 8px 16px 0; font:600 13.5px/1.3 'Montserrat',sans-serif; color:var(--ink-soft); text-align:left;
background:none; border:0; cursor:pointer; transition:color .2s var(--ease-out) }
#expertise .ex-tab-count{ font-weight:500; font-size:12px; color:var(--gold-700); font-variant-numeric:tabular-nums; letter-spacing:.02em }
#expertise .ex-tab::after{ content:''; position:absolute; left:0; right:14px; bottom:-1px; height:2px; background:var(--green-700);
transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease-out) }
#expertise .ex-tab:hover{ color:var(--ink) }
#expertise .ex-tab[aria-selected="true"]{ color:var(--green-700) }
#expertise .ex-tab[aria-selected="true"]::after{ transform:scaleX(1) }
#expertise .ex-filter{ position:relative; display:flex; align-items:center }
#expertise .ex-filter-icon{ position:absolute; left:2px; color:var(--ink-soft); pointer-events:none }
#expertise .ex-input{ width:100%; height:44px; padding:0 36px 0 28px; font:500 14px/1 'Montserrat',sans-serif; color:var(--ink);
background:transparent; border:0; border-bottom:1px solid #838B86; border-radius:0; transition:border-color .2s var(--ease-out) }
#expertise .ex-input::placeholder{ color:var(--ink-soft); opacity:1 }
#expertise .ex-input:hover{ border-bottom-color:var(--ink-soft) }
#expertise .ex-input:focus{ border-bottom-color:var(--green-700) }
#expertise .ex-input:focus-visible{ outline-offset:4px }
#expertise .ex-clear{ position:absolute; right:0; display:grid; place-items:center; width:32px; height:32px; color:var(--ink-soft);
background:none; border:0; cursor:pointer; border-radius:3px }
#expertise .ex-clear:hover{ color:var(--green-700) }
#expertise .ex-clear[hidden]{ display:none }
@media (min-width:768px){
#expertise .ex-tools{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; border-bottom:1px solid var(--line) }
#expertise .ex-tablist{ display:flex; gap:28px; border-bottom:0 }
#expertise .ex-tab{ flex-direction:row; align-items:baseline; gap:6px; padding:12px 0 20px; font-size:14px; white-space:nowrap }
#expertise .ex-tab::after{ right:0 }
#expertise .ex-filter{ flex:0 1 280px; min-width:190px; margin-bottom:12px }
}
@media (min-width:1024px){ #expertise .ex-tablist{ gap:40px } #expertise .ex-tab{ font-size:14.5px } }
/* ── The index: column-major like a printed index, hairline under every row ── */
#expertise .ex-panel{ padding-top:12px }
#expertise .ex-list{ list-style:none; margin:0; padding:0; columns:1; column-gap:56px }
#expertise .ex-list li{ break-inside:avoid; border-bottom:1px solid var(--line) }
#expertise .ex-list li[hidden]{ display:none }
#expertise .ex-link{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px;
min-height:60px; padding:14px 0; color:var(--ink); text-decoration:none }
#expertise .ex-name{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:21px; line-height:1.2;
letter-spacing:.003em; transition:color .25s var(--ease-out) }
#expertise .ex-name mark{ background:var(--gold-100); color:inherit; border-radius:2px; padding:0 1px }
#expertise .ex-arrow{ flex:none; color:var(--green-700); opacity:0; transform:translateX(-10px);
transition:opacity .3s var(--ease-out), transform .35s var(--ease-out) }
#expertise .ex-link::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--gold-500);
transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease-out) }
#expertise .ex-link:hover .ex-name, #expertise .ex-link:focus-visible .ex-name{ color:var(--green-700) }
#expertise .ex-link:hover .ex-arrow, #expertise .ex-link:focus-visible .ex-arrow{ opacity:1; transform:none }
#expertise .ex-link:hover::after, #expertise .ex-link:focus-visible::after{ transform:scaleX(1) }
@media (hover:none) and (pointer:coarse){ #expertise .ex-arrow{ opacity:.6; transform:none } }
@media (min-width:768px){ #expertise .ex-list{ columns:2 } }
@media (min-width:1024px){ #expertise .ex-list{ columns:3 } #expertise .ex-name{ font-size:22px } }
/* panel switch: a short settle, opacity/transform only */
#expertise .ex-panel.ex-enter{ animation:ex-in .42s var(--ease-out) both }
@keyframes ex-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
#expertise .ex-empty{ display:flex; align-items:baseline; gap:20px; padding:28px 0 30px; border-bottom:1px solid var(--line) }
#expertise .ex-empty[hidden]{ display:none }
#expertise .ex-empty-text{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:24px; color:var(--ink) }
#expertise .ex-empty-clear{ min-height:32px; font:600 13px/1 'Montserrat',sans-serif; color:var(--green-700); background:none; border:0;
padding:0; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; cursor:pointer }
#expertise .ex-foot{ display:flex; justify-content:flex-end; margin-top:36px }
#expertise .ex-more{ display:inline-flex; align-items:center; gap:14px; min-height:44px; font:600 14px/1 'Montserrat',sans-serif;
color:var(--green-700); text-decoration:none; letter-spacing:.01em }
#expertise .ex-more .ex-arrow{ opacity:1; transform:none; transition:transform .35s var(--ease-out) }
#expertise .ex-more:hover .ex-arrow{ transform:translateX(5px) }
/* No-JS fallback: all three lists stay visible under their own headings, the tools are hidden */
#expertise:not(.ex-ready) .ex-tools{ display:none }
#expertise:not(.ex-ready) .ex-panel + .ex-panel{ margin-top:48px }
#expertise .ex-nojs{ margin:0 0 8px; font:700 11.5px/1 'Montserrat',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700) }
#expertise.ex-ready .ex-nojs{ display:none }
#expertise .ex-panel[hidden]{ display:none }
@media (prefers-reduced-motion:reduce){ #expertise .ex-panel.ex-enter{ animation:none } }
/* ── Finder grid: phones/tablets = film (16:9) above the tabs; desktop = lists 2/3 + tall film 1/3, sticky ── */
#expertise .ex-finder{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"media" "tools" "main" }
#expertise .ex-tools{ grid-area:tools }
#expertise .ex-main{ grid-area:main; min-width:0 }
#expertise .ex-media{ grid-area:media; margin:0 0 36px }
@media (min-width:1024px){
#expertise .ex-finder{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); column-gap:56px; grid-template-areas:"tools tools" "main media" }
#expertise .ex-list{ columns:2 }
#expertise .ex-media{ align-self:start; position:sticky; top:112px; margin:14px 0 0 }
}
/* the film: 3px radius, thin gold frame offset down-right (as in #firm), caption under it, never over the footage */
#expertise .ex-shot{ position:relative; margin:0 10px 10px 0 }
#expertise .ex-line{ position:absolute; inset:10px -10px -10px 10px; border:1px solid var(--gold-500); border-radius:3px; pointer-events:none }
#expertise .ex-screen{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:3px; background:var(--green-900); isolation:isolate }
#expertise .ex-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
opacity:0; transition:opacity .9s var(--ease-out) }
#expertise .ex-vid.is-on{ opacity:1 }
#expertise .ex-vid:nth-child(3){ object-position:50% 40% } /* 16:9 crop of the ship: bow and bridge, not the wake */
@media (min-width:1024px){ #expertise .ex-vid:nth-child(3){ object-position:50% 50% } }
@media (min-width:1024px){
#expertise .ex-shot{ margin:0 16px 16px 0 }
#expertise .ex-line{ inset:16px -16px -16px 16px }
#expertise .ex-screen{ aspect-ratio:4/5 }
}
#expertise .ex-pause{ position:absolute; right:12px; bottom:12px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
border:1px solid rgba(255,255,255,.45); border-radius:3px; color:#fff; background:rgba(11,14,13,.4); cursor:pointer;
transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out) }
#expertise .ex-pause:hover{ background:rgba(11,14,13,.72); border-color:rgba(255,255,255,.75) }
#expertise .ex-pause:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px var(--green-700) }
#expertise .ex-pause .ex-ic-play{ display:none }
#expertise .ex-pause[aria-pressed="true"] .ex-ic-play{ display:block }
#expertise .ex-pause[aria-pressed="true"] .ex-ic-pause{ display:none }
#expertise:not(.ex-ready) .ex-pause{ display:none }
#expertise .ex-cap{ display:flex; align-items:baseline; gap:8px; margin:22px 0 0; font:600 11px/1.3 'Montserrat',sans-serif;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft) }
#expertise .ex-cap-dot{ color:var(--gold-700) }
#expertise .ex-cap-n{ color:var(--gold-700); font-variant-numeric:tabular-nums }
@media (min-width:1024px){ #expertise .ex-cap{ margin-top:32px } }
@media (prefers-reduced-motion:reduce){ #expertise .ex-vid{ transition:none } #expertise .ex-pause{ display:none } }
/* ── 04-industries.html ── */
#industries .id-title{ font-size:clamp(38px,5.2vw,52px); color:var(--green-700); margin:0 }
#industries .id-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:18px }
#industries .id-sub{ font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:44ch; margin:0 }
#industries .id-all{ display:inline-flex; align-items:center; gap:14px; min-height:44px; font:600 14px/1 'Montserrat',sans-serif;
color:var(--green-700); text-decoration:none; letter-spacing:.01em }
#industries .id-all .id-arrow{ transition:transform .35s var(--ease-out) }
#industries .id-all:hover .id-arrow{ transform:translateX(5px) }
/* ── Grid. Phone (default): a horizontal snap rail with a peek of the next card ── */
#industries .id-grid{ list-style:none; margin:0 -24px; padding:4px 24px 6px; display:grid; grid-auto-flow:column;
grid-auto-columns:min(78%,320px); gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding:0 24px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
#industries .id-grid::-webkit-scrollbar{ display:none }
#industries .id-cell{ scroll-snap-align:start; aspect-ratio:4/5; min-width:0 }
#industries .id-progress{ position:relative; height:1px; margin-top:22px; background:var(--line-strong,#D6D0BE); overflow:hidden }
#industries .id-progress-bar{ position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--green-700);
transform-origin:0 50%; transform:scaleX(.143) }
/* Tile */
#industries .id-tile{ position:relative; display:block; height:100%; overflow:hidden; border-radius:3px; background:var(--green-900);
color:#fff; text-decoration:none; isolation:isolate }
#industries .id-media{ position:absolute; inset:0; display:block; overflow:hidden;
transition:transform 1.8s var(--ease-out) }
#industries .id-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transform-origin:60% 55%; will-change:transform }
/* Scrim: brand green-800 #012D18. Solid alpha .66 over the text band (bottom 50%; 62% on the two three-line names), easing to 0 over the next 32%.
Solved with tools/contrast.py against each photo's rendered crop (band .55–1.0, 99th-pct pixel): white ≥ 4.5:1 on every tile. */
#industries .id-tile::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(1,45,24,.66) 0%, rgba(1,45,24,.66) var(--id-solid), rgba(1,45,24,.30) calc(var(--id-solid) + 16%), rgba(1,45,24,0) calc(var(--id-solid) + 32%)) }
#industries .id-tile{ --id-solid:50% }
#industries .id-c .id-tile, #industries .id-g .id-tile{ --id-solid:62% }
#industries .id-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start;
gap:10px; padding:22px 22px 24px }
#industries .id-num{ font:600 11px/1 'Montserrat',sans-serif; letter-spacing:.16em; color:#fff; font-variant-numeric:tabular-nums }
#industries .id-name{ position:relative; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:25px; line-height:1.1;
letter-spacing:.003em; text-wrap:balance; padding-bottom:10px; max-width:18ch }
#industries .id-name::after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:2px; background:var(--gold-500);
transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease-out) }
#industries .id-tile:hover .id-name::after, #industries .id-tile:focus-visible .id-name::after{ transform:scaleX(1) }
#industries .id-tile:hover .id-media, #industries .id-tile:focus-visible .id-media{ transform:scale(1.045) }
#industries .id-tile:focus-visible{ outline:2px solid var(--green-700); outline-offset:3px }
@media (hover:none){ #industries .id-name::after{ transform:scaleX(1) } }
/* Ken Burns: one slow drift (no loop), started when the tile enters view, paused when it leaves */
@keyframes id-drift{ from{ transform:scale(1.02) translate3d(0,0,0) } to{ transform:scale(1.1) translate3d(-1.6%,-1.2%,0) } }
#industries.id-ready .id-img{ animation:id-drift 32s cubic-bezier(.33,.0,.2,1) forwards; animation-play-state:paused }
#industries.id-ready .id-cell:nth-child(even) .id-img{ animation-duration:38s; transform-origin:35% 45% }
#industries.id-ready .id-cell.id-on .id-img{ animation-play-state:running }
/* ── Tablet: two columns, the lead tile and the two wide tiles span both ── */
@media (min-width:768px){
#industries .id-grid{ margin:0; padding:0; overflow:visible; grid-auto-flow:row dense; grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-columns:auto; grid-auto-rows:250px; gap:16px; scroll-snap-type:none }
#industries .id-cell{ aspect-ratio:auto }
#industries .id-a{ grid-column:span 2; grid-row:span 2 }
#industries .id-d, #industries .id-f{ grid-column:span 2 }
#industries .id-progress{ display:none }
#industries .id-body{ padding:26px 28px 28px }
#industries .id-name{ font-size:27px }
#industries .id-a .id-name{ font-size:40px; max-width:17ch }
}
/* ── Desktop: 4 × 3 bento ── */
@media (min-width:1024px){
#industries .id-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:268px;
grid-template-areas:"a a b c" "a a d d" "e f f g" }
#industries .id-a{ grid-area:a } #industries .id-b{ grid-area:b } #industries .id-c{ grid-area:c } #industries .id-d{ grid-area:d }
#industries .id-e{ grid-area:e } #industries .id-f{ grid-area:f } #industries .id-g{ grid-area:g }
#industries .id-a .id-name{ font-size:46px }
#industries .id-a .id-body{ padding:36px 38px 40px }
#industries .id-name{ font-size:25px }
}
@media (min-width:1280px){ #industries .id-name{ font-size:27px } }
@media (prefers-reduced-motion:reduce){
#industries.id-ready .id-img{ animation:none; transform:none }
#industries .id-media, #industries .id-name::after{ transition:none }
#industries .id-tile:hover .id-media, #industries .id-tile:focus-visible .id-media{ transform:none }
#industries .id-grid{ scroll-behavior:auto }
}
/* ── 05-firm.html ── */
/* statement */
#firm .fm-statement{ text-wrap:pretty }
/* figures: hairline grid, gold-500 Cormorant numerals (large text on green-700: 4.82:1) */
#firm .fm-figures{ border-top:1px solid rgba(255,255,255,.16) }
#firm .fm-fig{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:10px;
padding:26px 20px 26px 0; border-bottom:1px solid rgba(255,255,255,.16) }
#firm .fm-fig:nth-child(2n){ padding-left:24px; border-left:1px solid rgba(255,255,255,.16) }
#firm .fm-num{ margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; color:var(--gold-500);
font-size:60px; line-height:.9; letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums }
#firm .fm-label{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#D6E3DA; line-height:1.4 }
@media (min-width:640px) and (max-width:1023.98px){
#firm .fm-fig{ padding-left:24px; border-left:1px solid rgba(255,255,255,.16) }
#firm .fm-fig:first-child{ padding-left:0; border-left:0 }
}
@media (min-width:1024px){
#firm .fm-num{ font-size:72px }
#firm .fm-fig{ padding-top:30px; padding-bottom:30px }
}
/* text link: gold hairline underline that grows on hover */
#firm .fm-link__text{ background:linear-gradient(var(--gold-500),var(--gold-500)) 0 100%/100% 1px no-repeat; padding-bottom:4px;
transition:background-size .5s var(--ease-out) }
#firm .fm-link:hover .fm-link__text{ background-size:100% 2px }
#firm .fm-link__arrow{ color:var(--gold-500); transition:transform .5s var(--ease-out) }
#firm .fm-link:hover .fm-link__arrow{ transform:translateX(4px) }
/* photo: tall crop, green duotone (shadows → green-900, lights → warm ivory), gold frame offset */
#firm .fm-photo{ position:relative; margin:0 12px 12px 0; height:100%; min-height:440px }
#firm .fm-frame{ position:absolute; inset:12px -12px -12px 12px; border:1px solid var(--gold-500); border-radius:3px; pointer-events:none }
#firm .fm-duo{ position:relative; height:100%; min-height:inherit; overflow:hidden; border-radius:3px; background:#CCD8C6; isolation:isolate }
#firm .fm-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
filter:grayscale(1) contrast(1.08) brightness(1.02); mix-blend-mode:multiply }
#firm .fm-duo::after{ content:""; position:absolute; inset:0; background:var(--green-900); mix-blend-mode:lighten }
#firm .fm-duo::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg,rgba(0,66,37,.10),rgba(0,66,37,0) 40%,rgba(0,31,15,.28)) }
/* film: same duotone as the still (grayscale × multiply over the sage ground, green-900 lighten on top); fades in once it has frames */
#firm .fm-film{ opacity:0; transition:opacity 1.2s var(--ease-out); filter:grayscale(1) contrast(1.45) brightness(.78) } /* the graded film is paler than the still: deepen it to the same duotone density */
#firm .fm-film.is-on{ opacity:1 }
#firm .fm-duo img.fm-img{ transition:opacity 1.2s var(--ease-out) }
#firm .fm-duo.fm-duo--film img.fm-img{ opacity:0 } /* both layers multiply, so the still steps out as the film steps in */
/* pause control: bottom-right inside the picture, 34px, as the hero's */
#firm .fm-pause{ position:absolute; right:12px; bottom:12px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
border:1px solid rgba(255,255,255,.45); border-radius:3px; color:#fff; background:rgba(0,19,7,.45);
transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out) }
#firm .fm-pause[hidden]{ display:none }
#firm .fm-pause:hover{ background:rgba(0,19,7,.75); border-color:rgba(255,255,255,.8) }
#firm .fm-pause:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px }
#firm .fm-pause .fm-ic-play{ display:none }
#firm .fm-pause[aria-pressed="true"] .fm-ic-play{ display:block }
#firm .fm-pause[aria-pressed="true"] .fm-ic-pause{ display:none }
@media (prefers-reduced-motion:reduce){ #firm .fm-film, #firm .fm-pause{ display:none } }
@media (min-width:640px){ #firm .fm-photo{ min-height:560px } }
@media (min-width:1024px){
#firm .fm-photo{ margin:0 20px 20px 0; min-height:620px }
#firm .fm-frame{ inset:20px -20px -20px 20px }
}
/* ── 06-insights.html ── */
/* ── Header band: 21:9 library film (media/video/in-library.mp4 · Pexels 18969594), 220px on phones → 360px on desktop ──
Scrim tint = green-900 #001F0F, solved with tools/contrast.py scrim over the clip's frames (2 fps, 16 frames), WCAG AA:
base .30 over the whole band + a left field .50 (to 45%, gone by 80%) = composite .65 behind the eyebrow/heading;
on phones the field spans the full band (.65 everywhere). Heading white (large, 3:1) · eyebrow gold-500 11px (4.5:1). */
#insights .in-band{ position:relative; isolation:isolate; overflow:hidden; border-radius:3px; background:var(--green-900);
height:clamp(220px, 28vw, 360px) }
#insights .in-film{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 50% }
#insights .in-scrim{ position:absolute; inset:0; z-index:-1; background-color:rgba(0,31,15,.30);
background-image:linear-gradient(to right, rgba(0,31,15,.5) 0%, rgba(0,31,15,.5) 45%, rgba(0,31,15,0) 80%) }
#insights .in-band-copy{ position:absolute; left:0; right:0; bottom:0; padding:0 64px 22px 20px }
#insights .in-h2{ font-size:32px; line-height:1.04; max-width:15ch }
#insights .in-h2 em{ color:var(--gold-300, #E3CA94) }
#insights .in-pause{ position:absolute; right:14px; bottom:14px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
border:1px solid rgba(255,255,255,.45); border-radius:3px; color:#fff; background:rgba(0,19,7,.45);
transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out) }
#insights .in-pause[hidden]{ display:none }
#insights .in-pause:hover{ background:rgba(0,19,7,.75); border-color:rgba(255,255,255,.8) }
#insights .in-pause:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px }
#insights .in-pause .in-ic-play{ display:none }
#insights .in-pause[aria-pressed="true"] .in-ic-play{ display:block }
#insights .in-pause[aria-pressed="true"] .in-ic-pause{ display:none }
@media (max-width:639.98px){
#insights .in-scrim{ background-image:linear-gradient(rgba(0,31,15,.5), rgba(0,31,15,.5)) }
}
@media (min-width:640px){
#insights .in-band-copy{ padding:0 88px 36px 40px }
#insights .in-h2{ font-size:44px; max-width:20ch }
#insights .in-pause{ right:20px; bottom:20px }
}
@media (min-width:1024px){
#insights .in-band-copy{ padding:0 96px 44px 56px }
#insights .in-h2{ font-size:52px }
}
@media (prefers-reduced-motion:reduce){ #insights .in-pause{ display:none } }
/* ── Article cards: the title link is stretched over the whole card (one link, name = the title) ── */
#insights .in-card{ position:relative; display:flex; flex-direction:column; height:100% }
#insights .in-link{ color:inherit; text-decoration:none }
#insights .in-link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:3px }
#insights .in-link:focus-visible{ outline:none }
#insights .in-link:focus-visible::after{ outline:2px solid var(--green-700); outline-offset:3px }
#insights .in-feat .in-link:focus-visible::after{ outline-color:var(--gold-500); outline-offset:-6px }
#insights .in-title{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:-.003em; text-wrap:pretty;
hyphens:manual; overflow-wrap:break-word }
/* hover: the title underlines, the gold rule extends */
#insights .in-title .in-link{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
text-decoration-color:transparent; transition:text-decoration-color .3s var(--ease-out) }
#insights .in-card:hover .in-title .in-link, #insights .in-card:focus-within .in-title .in-link{ text-decoration-color:currentColor }
#insights .in-rule{ display:block; height:1px; width:32px; background:var(--gold-500); transition:width .5s var(--ease-out) }
#insights .in-card:hover .in-rule, #insights .in-card:focus-within .in-rule{ width:72px }
#insights .in-feat .in-rule{ height:2px; width:44px }
#insights .in-feat:hover .in-rule, #insights .in-feat:focus-within .in-rule{ width:96px }
#insights .in-arrow{ transition:transform .35s var(--ease-out) }
#insights .in-card:hover .in-arrow, #insights .in-card:focus-within .in-arrow{ transform:translateX(4px) }
/* featured: an inset gold hairline frame, like a bound document */
#insights .in-feat::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(203,161,59,.26); border-radius:2px; pointer-events:none }
#insights .in-small{ transition:border-color .3s var(--ease-out) }
#insights .in-small:hover{ border-color:var(--line-strong) }
#insights .in-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden }
/* ── Newsletter mastheads ── */
#insights .in-mast{ position:relative; transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out) }
#insights .in-mast:hover{ border-color:var(--green-700) }
#insights .in-mast-name{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; text-transform:uppercase;
letter-spacing:.06em; line-height:1; white-space:nowrap }
#insights .in-dbl{ display:block; height:5px; border-top:2px solid var(--green-700); border-bottom:1px solid var(--green-700) }
#insights .in-mast:hover .in-dbl{ border-color:var(--gold-500) }
/* phone: newsletters become a snap-scrolling shelf with a peek */
@media (max-width:639.98px){
#insights .in-shelf{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:24px;
margin-inline:-24px; padding:4px 24px 14px; scrollbar-width:none; overscroll-behavior-x:contain }
#insights .in-shelf::-webkit-scrollbar{ display:none }
#insights .in-shelf > li{ flex:0 0 72%; scroll-snap-align:start }
}
@media (prefers-reduced-motion:reduce){
#insights .in-rule, #insights .in-arrow, #insights .in-title .in-link{ transition:none }
}
/* ── 07-people.html ── */
/* "All people": green-700 on white 11.6:1; the gold underline is decoration only */
#people .pp-line{ background:linear-gradient(var(--gold-500),var(--gold-500)) 0 100%/100% 1px no-repeat; padding-bottom:3px;
transition:background-size .5s var(--ease-out) }
#people .pp-all:hover .pp-line{ background-size:0 1px; background-position:100% 100% }
#people .pp-arrow{ transition:transform .5s var(--ease-out) }
#people .pp-all:hover .pp-arrow{ transform:translateX(3px) }
/* the index: hairline-topped rows, portrait left, text right */
#people .pp-card{ position:relative; display:flex; align-items:center; gap:24px; padding:28px 0; border-top:1px solid var(--line) }
@media (min-width:1024px){ #people .pp-card{ padding:36px 0 } }
#people .pp-grid{ border-bottom:1px solid var(--line) }
/* ONE ring treatment for everyone: the old baked-in ring is cropped away (scale 1.1 keeps it outside the circle),
then a crisp 2px gold-500 ring sits 4px off the photo on the section's white. */
#people .pp-ring{ --pp-size:96px; flex:none; width:var(--pp-size); height:var(--pp-size); border-radius:50%; overflow:hidden;
background:var(--ivory); box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--gold-500); margin:6px }
@media (min-width:1024px){ #people .pp-ring{ --pp-size:112px } }
#people .pp-ring img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.1);
transition:transform .7s var(--ease-out) }
#people .pp-card:hover .pp-ring img{ transform:scale(1.15) }
#people .pp-mono{ display:grid; place-items:center; background:#EBF2ED } /* green-50 */
#people .pp-mono span{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:calc(var(--pp-size) * .36);
letter-spacing:.04em; color:var(--green-700); line-height:1; transform:translateY(-.03em) } /* green-700 on green-50: 10.22:1 */
#people .pp-body{ min-width:0 }
#people .pp-name{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:25px; line-height:1.12; color:var(--ink);
letter-spacing:-.005em; text-wrap:balance }
@media (min-width:1024px){ #people .pp-name{ font-size:27px } }
#people .pp-role{ margin-top:6px; font-size:13.5px; line-height:1.45; color:var(--ink-soft) }
#people .pp-link{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; min-height:28px;
font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--green-700) }
#people .pp-link svg{ transition:transform .5s var(--ease-out) }
/* the whole row is the target; the link keeps the accessible name */
#people .pp-link::after{ content:''; position:absolute; inset:0 }
#people .pp-card:hover .pp-link svg{ transform:translateX(3px) }
#people .pp-card:hover .pp-name{ color:var(--green-700) }
#people .pp-name{ transition:color .3s var(--ease-out) }
#people .pp-link:focus-visible{ outline:none }
#people .pp-link:focus-visible::after{ outline:2px solid var(--green-700); outline-offset:-2px; border-radius:3px }
/* ── 08-offices.html ── */
/* direct contact */
#offices .of-k{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft) }
#offices .of-line{ display:inline-block; padding:4px 0; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
font-size:26px; line-height:1.2; color:var(--green-700); font-variant-numeric:lining-nums;
background:linear-gradient(var(--gold-500),var(--gold-500)) 0 100%/100% 1px no-repeat; transition:background-size .4s var(--ease-out) }
#offices .of-line:hover{ background-size:100% 2px }
/* cards: white on ivory, hairline, 3px radius */
#offices .of-card{ position:relative; display:flex; flex-direction:column; min-width:0; padding:30px 28px 26px;
background:#fff; border:1px solid var(--line); border-radius:3px; transition:border-color .3s var(--ease-out) }
#offices .of-card:hover{ border-color:var(--line-strong) }
#offices .of-card::before{ content:""; position:absolute; top:-1px; left:28px; width:44px; height:2px; background:var(--gold-500) }
#offices .of-name{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:27px; line-height:1.12; color:var(--green-700) }
#offices .of-name--lg{ font-size:32px; line-height:1.05; margin-top:10px }
#offices .of-tag{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700) }
#offices .of-addr{ margin-top:18px; font-style:normal; font-size:15px; line-height:1.7; color:var(--ink-soft); overflow-wrap:anywhere }
#offices .of-tel{ margin-top:14px; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums }
#offices .of-tel .of-k{ margin-right:6px }
#offices .of-tel a{ display:inline-block; padding:2px 0; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong);
text-underline-offset:4px; transition:text-decoration-color .3s var(--ease-out) }
#offices .of-tel a:hover{ text-decoration-color:var(--green-700) }
#offices .of-dir{ margin-top:auto; padding-top:22px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px;
font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--green-700) }
#offices .of-dir svg{ color:var(--gold-700); transition:transform .4s var(--ease-out) }
#offices .of-dir:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold-500) }
#offices .of-dir:hover svg{ transform:translate(2px,-2px) }
/* address line breaks only where the card is wide enough to honour them */
@media (max-width:1199.98px){ #offices .of-br{ display:none } }
@media (min-width:640px){ #offices .of-card--head .of-br{ display:inline } }
@media (max-width:639.98px){ #offices .of-card{ padding:28px 22px 22px } #offices .of-card::before{ left:22px } }
/* head office: the wide card, split inside from sm up */
#offices .of-card--head{ padding-top:34px }
#offices .of-card--head .of-card__body{ display:flex; flex-direction:column; flex:1 }
@media (min-width:640px){
#offices .of-card--head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding:40px 36px 30px }
#offices .of-card--head::before{ left:36px }
#offices .of-card--head .of-addr{ margin-top:0; font-size:16px }
#offices .of-name--lg{ font-size:34px } /* global positioning: the city is a fact, not the headline */
}
@media (min-width:1024px){
#offices .of-name--lg{ font-size:36px }
#offices .of-card--head{ padding:44px 40px 32px }
#offices .of-card--head::before{ left:40px }
}
/* ── 90-footer.html ── */
/* white 15.11:1 · white/80 10.08:1 · white/70 8.03:1 · gold-500 (eyebrows) 6.26:1, all on green-800 #012D18 */
.ft .ft-link{ display:inline-flex; align-items:center; min-height:32px; color:#fff; font-size:15px;
background:linear-gradient(var(--gold-500),var(--gold-500)) 0 calc(100% - 4px)/0 1px no-repeat;
transition:background-size .5s var(--ease-out) }
.ft .ft-link:hover{ background-size:100% 1px }
.ft .ft-btn{ color:#fff; border:1px solid rgba(203,161,59,.7); transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out) }
.ft .ft-btn:hover{ border-color:var(--gold-500); background:rgba(255,255,255,.06) }
.ft .ft-btn svg{ transition:transform .5s var(--ease-out) }
.ft .ft-btn:hover svg{ transform:translateX(3px) }
/* ── 95-disclaimer.html ── */
/* green-800 card: white 15.11:1 · white/85 11.26:1 · gold-500 eyebrow 6.26:1 · green-900 on gold-500 (btn-gold) */
#dc-dialog{ width:min(680px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0;
border:1px solid rgba(203,161,59,.35); border-radius:4px; background:var(--green-800); color:#fff;
overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
box-shadow:0 30px 80px -20px rgba(0,0,0,.55) }
#dc-dialog:focus{ outline:none } /* the container takes focus so the text is read and keyboard-scrollable; controls keep the ring */
#dc-dialog::backdrop{ background:rgba(0,19,7,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) }
#dc-dialog .dc-inner{ padding:32px 24px 20px }
@media (min-width:640px){ #dc-dialog .dc-inner{ padding:56px 56px 48px } }
#dc-dialog .dc-mark{ display:block; width:36px; height:auto }
#dc-dialog .dc-title{ margin-top:8px; font-size:40px; color:#fff }
@media (min-width:640px){ #dc-dialog .dc-title{ font-size:48px } }
#dc-dialog .dc-text{ margin-top:24px; max-width:62ch; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.85) }
#dc-dialog .dc-text p + p{ margin-top:14px }
#dc-dialog .dc-lead{ font-size:16px; line-height:1.6; font-weight:500; color:#fff }
/* the actions stay in reach while the text scrolls on short screens */
#dc-dialog .dc-actions{ position:sticky; bottom:0; margin-top:16px; padding:16px 0 4px; display:flex; flex-direction:column; gap:12px;
background:var(--green-800); box-shadow:0 -18px 18px -6px var(--green-800) }
@media (min-width:640px){ #dc-dialog .dc-actions{ margin-top:20px; padding-top:16px } }
@media (min-width:480px){ #dc-dialog .dc-actions{ flex-direction:row; align-items:center } }
#dc-dialog .dc-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px;
border-radius:3px; font-size:14.5px; font-weight:600; letter-spacing:.01em }
#dc-dialog .dc-leave{ color:#fff; border:1px solid rgba(255,255,255,.35); transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out) }
#dc-dialog .dc-leave:hover{ border-color:#fff; background:rgba(255,255,255,.06) }
/* quiet entrance; reduced motion shows the final state */
#dc-dialog[open]{ animation:dc-in .6s var(--ease-out) both }
#dc-dialog[open]::backdrop{ animation:dc-fade .6s var(--ease-out) both }
@keyframes dc-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes dc-fade{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ #dc-dialog[open], #dc-dialog[open]::backdrop{ animation:none } }
html:has(#dc-dialog[open]){ overflow:hidden }