/* Layout: a structural grid. Full-bleed photography carries the work; a quiet
   column grid with gridline bubbles and a drawing title block frame it. */
:root {
  --paper: #F3F4F5;      /* page ground, cool concrete */
  --card: #FFFFFF;
  --ink: #0E1217;        /* text */
  --steel: #5A6470;      /* secondary text */
  --rule: #D5DAE0;       /* hairlines */
  --accent: #1A5BCB;     /* Tucker-Jones blue */
  --accent-ink: #FFFFFF;
  --night: #0A0D11;      /* dark bands, hero, footer */
  --night-2: #12171D;
  --night-ink: #EEF1F4;
  --night-muted: #8C96A1;
  --night-rule: #232A32;
  --night-accent: #79A6F7;
  --logo-filter: invert(1);
  --portrait-fade: saturate(.42) contrast(.94) brightness(1.04);
  --mono: brightness(0);

  --f-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;   /* narrow technical face, like drawing-sheet lettering */
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Barlow Semi Condensed", "Arial Narrow", sans-serif;   /* small labels use the heading face, no typewriter font */

  --wrap: 1360px;
  --gut: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --gut-r: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
  --head-h: 92px;
  --ease: cubic-bezier(.2,.7,.1,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1115; --card: #151A20; --ink: #E8ECEF; --steel: #9AA4AE; --rule: #262D35;
    --accent: #6E9CF2; --accent-ink: #0A0D11; --night: #07090C; --night-2: #0F1318;
    --night-ink: #EEF1F4; --night-muted: #8C96A1; --night-rule: #1E242B; --night-accent: #79A6F7;
    --logo-filter: none; --mono: brightness(0) invert(1); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1115; --card: #151A20; --ink: #E8ECEF; --steel: #9AA4AE; --rule: #262D35;
  --accent: #6E9CF2; --accent-ink: #0A0D11; --night: #07090C; --night-2: #0F1318;
  --night-ink: #EEF1F4; --night-muted: #8C96A1; --night-rule: #1E242B; --night-accent: #79A6F7;
  --logo-filter: none; --mono: brightness(0) invert(1); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
/* the footer makes its own room for an iPhone's home bar (footer.foot .foot-grid), so the page adds none below it */
:root { padding-top: env(safe-area-inset-top, 0px); }
/* the page's light ground is the body's; outside it (when a phone bounces past the end of the page, or a short page
   leaves room below the footer) it's the footer's dark, so no light strip shows under the footer */
html { scroll-behavior: smooth; background: var(--night); }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: calc(var(--wrap) + 112px); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.band { padding-block: clamp(72px, 9vw, 136px); }
.band.tight { padding-block: clamp(48px, 6vw, 88px); }
.dark { background: var(--night); color: var(--night-ink); --rule: var(--night-rule); --steel: var(--night-muted); --accent: var(--night-accent); }

/* type */
.eyebrow { font: 500 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 10px; }
.eyebrow.acc { color: var(--accent); }
.eyebrow .tick { width: 8px; height: 1px; background: currentColor; flex-shrink: 0; margin-right: -2px; }   /* a short dash before the label */
.d1, .d2, .d3 { font-family: var(--f-display); font-stretch: 112%; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
.d1 { font-weight: 650; font-size: clamp(44px, 7.4vw, 112px); line-height: .94; }
.d1 .ln { display: block; }   /* a headline phrase on its own line, so the break is the same on every screen */
.d2 { font-weight: 620; font-size: clamp(34px, 4.6vw, 68px); line-height: 1; }
.d3 { font-weight: 600; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.015em; }
.lede { font: 400 clamp(20px, 2vw, 27px)/1.42 var(--f-body); letter-spacing: -.005em; text-wrap: pretty; max-width: 34ch; margin: 0; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1.1em; text-wrap: pretty; }
.prose h3 { font: 600 22px/1.2 var(--f-display); font-stretch: 108%; margin: 1.8em 0 .5em; letter-spacing: -.01em; }
.muted { color: var(--steel); }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--f-body); padding-block: 8px; border-bottom: 1px solid currentColor; }
.link-arrow svg { transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--f-body); padding: 15px 22px; background: var(--accent); color: var(--accent-ink); border-radius: 2px; transition: filter .2s; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }

.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head > div { display: grid; gap: 18px; min-width: 0; }

/* ───────── header ───────── */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: background .35s, border-color .35s, color .35s;
}
.site-head .bar { height: var(--head-h); display: flex; align-items: center; gap: 32px; }
.brand img { height: 60px; width: auto; filter: var(--logo-filter); transition: filter .35s; }
.site-head.over { background: transparent; border-color: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-head.over .brand img { filter: none; }
.site-head.over::after { content: ""; position: absolute; inset: 0 0 -60px; background: linear-gradient(rgba(5,7,10,.55), transparent); z-index: -1; pointer-events: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* the Projects heading is a button (it only opens its menu), so it drops the button look and matches the links */
button.mega-t { background: none; border: 0; color: inherit; cursor: pointer; }
.nav > a, .nav > .has-mega > .mega-t { font: 500 15px/1 var(--f-body); padding: 12px 14px; border-radius: 2px; position: relative; display: inline-flex; align-items: center; gap: 6px; }
.nav > a::after, .nav > .has-mega > .mega-t::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav > a:hover::after, .nav > a[aria-current="page"]::after, html:not(.nav-hold) .has-mega:hover > .mega-t::after, .has-mega:focus-within > .mega-t::after, .has-mega > .mega-t[aria-current="page"]::after { transform: scaleX(1); }
.nav .cta { margin-left: 10px; background: var(--accent); color: var(--accent-ink); padding: 13px 18px; }
.nav .cta::after { display: none; }
.site-head.over .nav .cta { background: #fff; color: #0A0D11; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }

/* mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  background: var(--night); color: var(--night-ink); border-top: 1px solid var(--night-rule);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
/* html.nav-hold (set as each page loads) keeps a menu shut under a cursor that was already resting on it */
html:not(.nav-hold) .has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
/* an invisible strip under the Projects heading, down to the top of its menu panel, so the pointer stays "on" the
   menu while it crosses the gap (the Firm menu has the same, .drop::before) */
/* It reaches 120px further left, for a pointer coming down from Projects at an angle, and is only there while the menu
   is open, so passing under the neighbouring Home link doesn't open Projects by itself. */
html:not(.nav-hold) .has-mega:not(.has-drop):hover > .mega-t::before, .has-mega:not(.has-drop).open > .mega-t::before { content: ""; position: absolute; left: -120px; right: 0; top: 100%; height: calc(var(--head-h) - 100% + 8px); }
.mega-in { display: grid; grid-template-columns: 1.5fr .8fr 1.2fr; gap: 48px; padding-block: 40px 48px; }
/* group headings in the blue of the phone menu's (.dr-gh) */
.mega h4 { margin: 0 0 16px; font: 600 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-accent); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega .cols2 { columns: 2; column-gap: 32px; }
.mega li a { display: block; padding: 7px 0; font: 500 16px/1.25 var(--f-body); color: var(--night-ink); transition: color .2s, padding .3s var(--ease); }
.mega li a:hover, .mega li a:focus-visible { color: var(--night-accent); padding-left: 6px; }
.mega figure { margin: 0; display: grid; gap: 12px; }
.mega figure .mega-ph { overflow: hidden; }   /* clips a zoomed cover */
.mega figure img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--night-2); }
.mega figcaption { font-size: 14px; color: var(--night-muted); line-height: 1.45; }
.mega .all { margin-top: 22px; display: flex; gap: 24px; flex-wrap: wrap; }
.mega .all a { font: 600 14px/1 var(--f-body); color: var(--night-ink); border-bottom: 1px solid var(--night-muted); padding-bottom: 6px; }

/* mobile menu (views.js drawerMenu): a drawer sliding in from the right over the dimmed page; site.js adds .on to
   slide it in */
.drawer { position: fixed; inset: 0; z-index: 70; }
.dr-scrim { position: absolute; inset: 0; background: rgba(5, 8, 12, .55); opacity: 0; transition: opacity .28s; }
.dr-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 380px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--night); color: var(--night-ink); box-shadow: -10px 0 40px rgba(0,0,0,.35); transform: translateX(100%); transition: transform .28s var(--ease);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer.on .dr-scrim { opacity: 1; }
.drawer.on .dr-panel { transform: none; }
.dr-bar { height: var(--head-h); display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 20px; border-bottom: 1px solid var(--night-rule); }
.dr-bar img { height: 38px; display: block; }
.dr-bar .close-x { font-size: 34px; font-weight: 300; }
.dr-nav { display: grid; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 4px 20px 20px; }
.dr-l { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; font: 600 22px/1.2 var(--f-display); letter-spacing: -.01em;
  color: var(--night-ink); padding: 14px 0; border-bottom: 1px solid var(--night-rule); }
.dr-l[aria-current] { color: var(--night-accent); }
.dr-acc svg { width: 14px; height: auto; color: var(--night-muted); transition: rotate .2s; }
.dr-acc[aria-expanded="true"] svg { rotate: 180deg; }
.dr-sub { padding: 6px 0 16px; border-bottom: 1px solid var(--night-rule); }
.dr-gh { display: block; margin-top: 12px; padding: 6px 0; font: 600 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-accent); }
.dr-mk { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dr-mk.one { grid-template-columns: 1fr; }
.dr-mk a { font: 500 16px/1.25 var(--f-body); color: var(--night-ink); padding: 9px 0; }
.dr-mk a[aria-current] { color: var(--night-accent); }
.dr-all { display: inline-block; margin-top: 14px; padding-bottom: 5px; font: 600 15px/1 var(--f-body); color: var(--night-ink); border-bottom: 1px solid var(--night-muted); }
.dr-foot { padding: 16px 20px 20px; border-top: 1px solid var(--night-rule); }
.dr-foot p { margin: 12px 0 0; font: 400 13px/1.5 var(--f-body); color: var(--night-muted); }
.dr-acts { display: flex; gap: 10px; }
.dr-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 4px; background: var(--accent); color: #fff; font: 600 15px/1 var(--f-body); }
.dr-act.line { background: transparent; color: var(--night-ink); box-shadow: inset 0 0 0 1px var(--night-muted); }
.dr-act.ic { flex: none; width: 46px; }
.dr-act.ic svg { width: 18px; height: 18px; }
.dr-act.ic svg g { fill: var(--night); }
@media (prefers-reduced-motion: reduce) { .dr-scrim, .dr-panel { transition: none; } }
.close-x { width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; line-height: 1; }

main { min-height: 60vh; }
.page-top { padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }

/* ───────── hero ───────── */
.hero { position: relative; height: clamp(560px, 88svh, 920px); overflow: hidden; background: var(--night); color: #fff; isolation: isolate; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s linear; }
.slide.on { opacity: 1; }
.slide.on img { transform: scale(1); }
.slide .slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* over the slide's photo */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(5,8,12,.72) 0%, rgba(5,8,12,.25) 55%, rgba(5,8,12,0) 75%),
  linear-gradient(0deg, rgba(5,8,12,.85) 0%, rgba(5,8,12,0) 45%); }
.hero-in { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto; padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }
/* the slogan sits near the top of the photo, a little below the menu, rather than halfway down */
.hero-copy { align-self: start; padding-top: clamp(28px, 7vh, 88px); display: grid; gap: 28px; max-width: 100%; }   /* the full page width, so a headline row only wraps when it truly runs out of room */
.hero-copy .eyebrow { color: rgba(255,255,255,.78); }
/* the large B carries about .05em of space on its left; pulling the headline back by that lines its letters up with the small line above */
.hero-copy .d1 { color: #fff; margin-left: -.05em; }
/* headline lines set in the admin: ">" indents a line one step (">>" two), ">|" sets it flush right with the
   longest line, so the headline is only as wide as that line */
.hero-copy .d1 { width: fit-content; max-width: 100%; }
/* the headline's size and the slogan block's place on the photo, both set in the admin's Headline box:
   --hl scales the usual headline size; data-at is top, middle or bottom with left, center or right */
.hero-copy .d1 { font-size: calc(clamp(44px, 7.4vw, 112px) * var(--hl, 1)); }
.hero-copy[data-at^="middle"] { align-self: center; padding-top: 0; }
.hero-copy[data-at^="bottom"] { align-self: end; padding-top: 0; padding-bottom: clamp(24px, 4vh, 48px); }
.hero-copy[data-at$="-center"] { justify-self: center; justify-items: center; }
.hero-copy[data-at$="-right"] { justify-self: end; justify-items: end; }
/* a soft shadow on the letters only (the admin's "shadow" checkbox), so the words stay clear over a light photo */
.hero-copy[data-shadow] .d1 { text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 4px 22px rgba(0, 0, 0, .35); }
.hero-copy[data-shadow] .eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* the slight pull to the left that lines the big first letter up with the small line only suits a left-hand block;
   elsewhere it would leave the headline a few pixels short of room and wrap its longest line */
.hero-copy[data-at$="-center"] .d1, .hero-copy[data-at$="-right"] .d1 { margin-left: 0; }
.hero-copy .d1 .ln { padding-left: calc(var(--in, 0) * 1em); }
.hero-copy .d1 .ln.r { text-align: right; }
.hero-copy .d1.flat .ln { padding-left: 0; text-align: left; }   /* a line wraps here, and the admin says to go flush left then (site.js) */
.hero-copy .d1 em { font-style: normal; color: var(--night-accent); }
.hero-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px 48px; align-items: end; padding-block: 28px 36px; border-top: 1px solid rgba(255,255,255,.18); }
.cap { display: grid; gap: 8px; min-width: 0; }
.cap .eyebrow { color: var(--night-accent); }
.cap a { font: 600 clamp(20px, 2vw, 28px)/1.15 var(--f-display); font-stretch: 108%; letter-spacing: -.01em; }
.cap a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cap .loc { font-size: 15px; color: rgba(255,255,255,.72); }
.ctrl { display: flex; align-items: center; gap: 18px; }
.count { font: 500 13px/1 var(--f-mono); letter-spacing: .08em; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.count b { color: #fff; font-weight: 500; }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.arrows button:hover { background: #fff; color: #0A0D11; border-color: #fff; }
.ticks { display: flex; gap: 6px; margin-top: 18px; grid-column: 1 / -1; }
.ticks button { flex: 1; height: 18px; position: relative; }
.ticks button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(255,255,255,.25); }
.ticks button i { position: absolute; left: 0; top: 8px; height: 2px; width: 0; background: #fff; }
.ticks button.done i { width: 100%; }
.ticks button.on i { animation: fill var(--dur, 7s) linear forwards; }
.hero.paused .ticks button.on i { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }

/* ───────── intro + stats ───────── */
.intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px 80px; align-items: end; }
.intro .lede { max-width: 30ch; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.25; font-family: var(--f-display); font-stretch: 104%; font-weight: 450; letter-spacing: -.015em; }
.intro .side { display: grid; gap: 22px; max-width: 46ch; }
.intro .side p { margin: 0; color: var(--steel); }

.grid-stats { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); position: relative; }
.grid-stats > div { position: relative; padding: 64px 28px 8px 28px; border-left: 1px dashed var(--rule); min-width: 0; }
.grid-stats > div:last-child { border-right: 1px dashed var(--rule); }
.grid-stats .bub { position: absolute; top: 0; left: -17px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--steel); background: var(--paper); display: grid; place-items: center; font: 500 13px/1 var(--f-mono); color: var(--steel); }
.grid-stats > div:last-child .bub.r { left: auto; right: -17px; }
.grid-stats .num { font: 600 clamp(48px, 5.6vw, 84px)/.9 var(--f-display); font-stretch: 115%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.grid-stats .num sup { font-size: .42em; vertical-align: top; position: relative; top: .25em; margin-left: 2px; color: var(--accent); }
.grid-stats .lbl { margin-top: 14px; font-size: 15px; color: var(--steel); max-width: 22ch; line-height: 1.45; }
.dim { margin-top: 18px; display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--f-mono); color: var(--steel); letter-spacing: .06em; }
.dim::before, .dim::after { content: ""; height: 1px; flex: 1; background: var(--rule); }

/* ───────── markets index ───────── */
.markets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: start; }
.mk-group + .mk-group { margin-top: 44px; }
.mk-group > .eyebrow { margin-bottom: 10px; }
.mk-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); transition: padding .35s var(--ease), color .2s; }
.mk-row:first-of-type { border-top: 1px solid var(--rule); }
.mk-row .nm { font: 600 clamp(22px, 2.4vw, 34px)/1.1 var(--f-display); font-stretch: 110%; letter-spacing: -.02em; }
.mk-row .ct { font: 400 13px/1 var(--f-mono); color: var(--steel); font-variant-numeric: tabular-nums; }
.mk-row svg { opacity: .35; transition: opacity .2s, transform .35s var(--ease); }
.mk-row .th { display: none; }
.mk-row:hover, .mk-row.act { padding-left: 14px; color: var(--accent); }
.mk-row:hover svg, .mk-row.act svg { opacity: 1; transform: translateX(4px); }
.mk-fig { position: sticky; top: calc(var(--head-h) + 40px); margin: 0; }
.mk-fig .frame { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--night-2); }
.mk-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform 1.2s var(--ease); transform: scale(1.04); }
.mk-fig img.on { opacity: 1; transform: none; }
.mk-fig figcaption { margin-top: 16px; display: grid; gap: 6px; }
.mk-fig figcaption b { font: 600 18px/1.2 var(--f-display); font-stretch: 108%; }
.mk-fig figcaption span { color: var(--steel); font-size: 15px; }

/* ───────── project cards ───────── */
.feat { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.feat > :nth-child(4n+1) { grid-column: span 7; }
.feat > :nth-child(4n+2) { grid-column: span 5; }
.feat > :nth-child(4n+3) { grid-column: span 5; }
.feat > :nth-child(4n+4) { grid-column: span 7; }
.pcard { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pcard .ph { overflow: hidden; background: var(--night-2); aspect-ratio: 16/10; position: relative; }
.feat > :nth-child(4n+1) .ph, .feat > :nth-child(4n+4) .ph { aspect-ratio: 16/9.2; }
.feat > :nth-child(4n+2) .ph, .feat > :nth-child(4n+3) .ph { aspect-ratio: 16/12.9; }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard .pcard-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }   /* over the card's photo */
.pcard:hover img, .pcard:hover .pcard-video { transform: scale(1.045); }
.pcard .meta { display: grid; gap: 7px; }
.pcard .nm { font: 600 clamp(19px, 1.6vw, 23px)/1.18 var(--f-display); font-stretch: 106%; letter-spacing: -.012em; text-wrap: balance; }
.pcard:hover .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pcard .loc { font-size: 15px; color: var(--steel); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 44px 28px; }

/* ───────── statement ───────── */
.statement { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 40px 64px; }
.statement .words { font: 560 clamp(30px, 4.3vw, 64px)/1.08 var(--f-display); font-stretch: 108%; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.statement .words span { color: var(--night-muted); transition: color .5s ease; }
.statement .words span.lit { color: var(--night-ink); }
.statement .sig { margin-top: 40px; display: flex; gap: 14px; align-items: center; color: var(--night-muted); font-size: 15px; }
.statement .sig img { height: 44px; opacity: .9; }

/* ───────── services ───────── */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--rule); }
.svc > div { padding: 36px 32px 40px 0; display: grid; gap: 18px; align-content: start; border-right: 1px solid var(--rule); min-width: 0; }
.svc > div + div { padding-left: 32px; }
.svc > div:last-child { border-right: 0; }
.svc svg.ic { width: 56px; height: 56px; stroke: var(--accent); }
.svc p { margin: 0; color: var(--steel); }
.svc .more { font: 600 14px/1 var(--f-body); display: inline-flex; gap: 8px; align-items: center; }

/* ───────── people ───────── */
.people { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; }
.person { display: grid; gap: 14px; align-content: start; min-width: 0; }
.person .ph { aspect-ratio: 4/5; overflow: hidden; background: var(--night-2); }
/* principals' portraits show as a faded version of their color photo (--portrait-fade), full color on hover */
.person img { width: 100%; height: 100%; object-fit: cover; filter: var(--portrait-fade); transition: filter .6s, transform 1s var(--ease); }
.person:hover img { filter: none; transform: scale(1.03); }
.person .nm { font: 600 19px/1.2 var(--f-display); font-stretch: 106%; letter-spacing: -.01em; }
.person .tt { font-size: 14px; color: var(--steel); margin-top: 4px; }
.people.lg { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 48px 24px; }
.people.lg > :nth-child(-n+2) { grid-column: span 3; }
.people.lg > :nth-child(n+3) { grid-column: span 2; }
.people.lg > :nth-child(-n+2) .ph { aspect-ratio: 5/4; }
.people.lg > :nth-child(-n+2) img { object-position: 50% 22%; }
.people.lg .nm { font-size: 24px; }

/* ───────── journal ───────── */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 44px 28px; }
.post { display: grid; gap: 16px; align-content: start; min-width: 0; }
.post .ph { aspect-ratio: 3/2; overflow: hidden; background: var(--night-2); }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.post:hover img { transform: scale(1.045); }
.post p { margin: 0; color: var(--steel); font-size: 16px; }
.post:hover .d3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; margin-bottom: 72px; }
.post-lead .ph { aspect-ratio: 16/10; }
.post-lead .d2 { font-size: clamp(30px, 3.6vw, 52px); }

/* ───────── careers band ───────── */
.join { display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; }
.join .ph { position: relative; overflow: hidden; background: var(--night-2); min-height: 240px; }
.join .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.join .tx { padding: clamp(36px, 4vw, 56px) var(--gut-r) clamp(36px, 4vw, 56px) clamp(32px, 5vw, 80px); display: grid; gap: 20px; align-content: center; background: var(--accent); color: var(--accent-ink); }
.join .tx .eyebrow { color: inherit; opacity: .8; }
.join .tx p { margin: 0; max-width: 44ch; opacity: .9; }
.join .btn { background: var(--accent-ink); color: var(--accent); justify-self: start; }

/* ───────── footer + title block ───────── */
.foot { background: var(--night); color: var(--night-ink); padding-top: clamp(64px, 8vw, 112px); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: 40px; padding-bottom: max(64px, calc(40px + env(safe-area-inset-bottom, 0px))); }
.foot-grid img { height: 72px; margin-bottom: 24px; }
.foot-grid p { margin: 0; color: var(--night-muted); max-width: 36ch; }
.foot h5 { margin: 0 0 16px; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--night-muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot li a:hover { color: var(--night-accent); }
/* the firm's LinkedIn page under Contact us: the same small icon as on the Leadership cards, in the footer's colors */
.foot .foot-in { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: 4px; border: 1px solid var(--night-rule); border-radius: 2px; color: var(--night-muted); transition: color .2s, border-color .2s; }
.foot .foot-in:hover { color: var(--night-accent); border-color: var(--night-accent); }

/* ───────── page header (inner pages) ───────── */
.phead { padding-block: clamp(36px, 4.4vw, 68px) clamp(28px, 3vw, 44px); display: grid; gap: 20px; border-bottom: 1px solid var(--rule); }
/* inner page titles: smaller than the home page headline (.d1) */
.phead .d1 { font-size: clamp(38px, 4.4vw, 64px); }
.phead .row { display: flex; justify-content: space-between; align-items: end; gap: 24px 64px; flex-wrap: wrap; }
.phead .row > * { min-width: 0; }
.phead p { margin: 0; max-width: 52ch; color: var(--steel); font-size: 18px; }

/* filters */
.filters { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.filters .in { display: flex; align-items: flex-start; gap: 12px 24px; padding-block: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.chip { flex: none; font: 500 13px/1 var(--f-body); padding: 7px 11px; border: 1px solid var(--rule); border-radius: 99px; color: var(--steel); transition: all .2s; white-space: nowrap; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.sep { border: 0; padding-inline: 4px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; align-self: center; }
.search { flex: none; position: relative; }
.search input { width: 220px; font: 400 14px/1 var(--f-body); padding: 8px 14px 8px 36px; border: 1px solid var(--rule); border-radius: 99px; background: var(--card); color: var(--ink); }
.search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--steel); }
.result-line { font: 400 13px/1 var(--f-mono); color: var(--steel); margin-block: 36px 28px; letter-spacing: .04em; }
.empty { padding: 64px 0; color: var(--steel); }

/* project index */
.pindex { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px; }
.pindex details { border-bottom: 1px solid var(--rule); }
.pindex summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 600 20px/1.2 var(--f-display); font-stretch: 106%; }
.pindex summary::-webkit-details-marker { display: none; }
.pindex summary span { font: 400 13px/1 var(--f-mono); color: var(--steel); display: flex; gap: 14px; align-items: center; }
.pindex summary span::after { content: "+"; font-size: 20px; width: 14px; text-align: center; }
.pindex details[open] summary span::after { content: "-"; }
.pindex ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--steel); }
.pindex li { padding-left: 16px; position: relative; }
.pindex li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--steel); }

/* project detail */
.phero { position: relative; height: clamp(420px, 74svh, 820px); background: var(--night); color: #fff; overflow: hidden; }
.phero img { width: 100%; height: 100%; object-fit: cover; }
.phero .phero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* a cover video, over its still */
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,8,12,.85), rgba(5,8,12,0) 55%), linear-gradient(rgba(5,8,12,.45), rgba(5,8,12,0) 22%); }
.phero .in { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(32px, 5vw, 64px); display: grid; gap: 18px; }
.phero .eyebrow { color: var(--night-accent); }
.phero .d1 { font-size: clamp(36px, 5.8vw, 88px); max-width: 18ch; }
.phero .loc { font-size: 18px; color: rgba(255,255,255,.8); }
.pbody { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px clamp(48px, 7vw, 120px); }
.facts { border: 1px solid var(--rule); align-self: start; background: var(--card); }
.facts .hd { padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); display: flex; justify-content: space-between; }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.facts dt, .facts dd { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.facts dt { font: 500 11px/1.9 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); border-right: 1px solid var(--rule); }
.facts dl > :nth-last-child(-n+2) { border-bottom: 0; }
.pending { border: 1px dashed var(--rule); padding: 28px; display: grid; gap: 10px; color: var(--steel); max-width: 60ch; }
.pending b { color: var(--ink); font: 600 18px/1.3 var(--f-display); font-stretch: 106%; }
.pnav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.pnav a { padding: 32px 0; display: grid; gap: 8px; min-width: 0; }
.pnav a + a { text-align: right; border-left: 1px solid var(--rule); padding-left: 24px; }
.pnav a:hover .d3 { color: var(--accent); }

/* person detail */
.bio { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px clamp(48px, 7vw, 112px); align-items: start; }
.bio .ph { position: sticky; top: calc(var(--head-h) + 32px); aspect-ratio: 4/5; overflow: hidden; background: var(--night-2); }
.bio .ph img { width: 100%; height: 100%; object-fit: cover; }
/* the name's capitals start level with the top of the photo (the line's own space above them is taken back) */
.bio h1 { margin-top: -.165em; }
.bio .cred { font: 500 15px/1 var(--f-mono); color: var(--accent); letter-spacing: .06em; margin-top: 14px; }
.bio .about { font-size: 19px; line-height: 1.6; margin: 40px 0 0; max-width: 60ch; text-wrap: pretty; }
/* the email, copy and LinkedIn buttons under the title line (the same ones as on the Leadership cards) */
.bio .lead-links { margin-top: 16px; }
.bio .lead-links + .about { margin-top: 32px; }
.kv { margin-top: 44px; display: grid; gap: 32px; }
.kv h4 { margin: 0 0 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); display: flex; gap: 10px; }
.kv ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.states { display: flex; flex-wrap: wrap; gap: 6px; }
.states span { font: 400 13px/1 var(--f-mono); padding: 8px 10px; border: 1px solid var(--rule); border-radius: 2px; }
.states span.hot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* firm */
.firm-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 48px clamp(48px, 8vw, 128px); align-items: start; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { font-size: 15px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 99px; }
.wide-img { aspect-ratio: 21/8; overflow: hidden; background: var(--night-2); }
.wide-img img { width: 100%; height: 100%; object-fit: cover; }

/* photos */
.masonry { columns: 3 320px; column-gap: 16px; margin-top: 32px; }
.masonry button { display: block; width: 100%; margin-bottom: 16px; break-inside: avoid; position: relative; overflow: hidden; background: var(--night-2); text-align: left; }
.masonry img { width: 100%; height: auto; transition: transform 1s var(--ease), filter .4s, opacity .45s ease; }
/* each photo fades in as it arrives, rather than popping over its dark box (site.js marks it loaded) */
.masonry.fade img:not(.ld) { opacity: 0; }
.masonry button:nth-child(3n+2) img { aspect-ratio: 4/3; object-fit: cover; }
.masonry button:nth-child(5n+4) img { aspect-ratio: 1/1; object-fit: cover; }
.masonry button span { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(5,8,12,.8)); color: #fff; font: 500 14px/1.3 var(--f-body); opacity: 0; transition: opacity .3s; }
.masonry button:hover span, .masonry button:focus-visible span { opacity: 1; }
.masonry button:hover img { transform: scale(1.04); }
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(5,7,10,.96); color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }
.lb .top { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.lb .stage { display: grid; place-items: center; min-height: 0; position: relative; }
/* the whole photo, as large as the space between the top bar and caption allows */
.lb .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lb .nav-b { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; background: rgba(5,7,10,.4); }
.lb .nav-b:hover { background: #fff; color: #000; }
.lb .prev { left: 8px; } .lb .next { right: 8px; }
.lb .bot { padding-block: 18px 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.lb .bot b { font: 600 20px/1.2 var(--f-display); font-stretch: 106%; }
.lb .bot a { font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.5); }

/* contact */
.contact { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--rule); }
.contact > div { padding: 32px 28px 36px 0; border-right: 1px solid var(--rule); display: grid; gap: 14px; align-content: start; min-width: 0; }
.contact > div + div { padding-left: 28px; }
.contact > div:last-child { border-right: 0; }
.contact .big { font: 600 clamp(20px, 1.9vw, 26px)/1.25 var(--f-display); font-stretch: 106%; letter-spacing: -.01em; overflow-wrap: anywhere; user-select: all; }
.copy { justify-self: start; font: 500 13px/1 var(--f-mono); padding: 9px 12px; border: 1px solid var(--rule); border-radius: 2px; color: var(--steel); }
.copy:hover { color: var(--ink); border-color: var(--ink); }

/* responsive */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .people { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .people > * { scroll-snap-align: start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
      }
@media (max-width: 900px) {
  .intro, .markets, .post-lead, .join, .firm-split, .bio, .pbody, .statement { grid-template-columns: 1fr; }
  .mk-fig { display: none; }
  .mk-row { grid-template-columns: 64px minmax(0,1fr) auto; }
  .mk-row .th { display: block; width: 64px; height: 44px; object-fit: cover; }
  .mk-row .ct { display: none; }
  .grid-stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .grid-stats > div:nth-child(2) { border-right: 1px dashed var(--rule); }
  .grid-stats > div:nth-child(2) .bub.r { display: grid; left: auto; right: -17px; }
  .feat > * { grid-column: span 12 !important; }
  .feat .ph { aspect-ratio: 16/10 !important; }
  .pgrid, .posts { grid-template-columns: 1fr 1fr; }
  .svc, .contact { grid-template-columns: 1fr; }
  .svc > div, .svc > div + div, .contact > div, .contact > div + div { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pindex { grid-template-columns: 1fr; }
  .people.lg { grid-template-columns: 1fr 1fr; overflow: visible; }
  .people.lg > * { grid-column: auto !important; }
  .people.lg > :nth-child(-n+2) .ph { aspect-ratio: 4/5; }
  .bio .ph { position: static; max-width: 420px; }
  .search input { width: 160px; }
  .join .tx { padding-left: var(--gut); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .pgrid, .posts { grid-template-columns: 1fr; }
  .hero-bar { grid-template-columns: 1fr; }
  .ctrl { justify-content: space-between; }
  .grid-stats > div { padding-inline: 18px 8px; }
  .filters .in { flex-wrap: wrap; }
  .search, .search input { width: 100%; }
  .people.lg { grid-template-columns: 1fr 1fr; gap: 32px 14px; }
  .people.lg .nm { font-size: 18px; }
  .pnav a + a { padding-left: 14px; }
  .foot-grid { grid-template-columns: 1fr; }
  }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .slide img { transform: none !important; }
}

/* multipage additions */
.d2.sm { font-size: clamp(30px, 3.4vw, 48px); }
.prose a.inline { color: var(--accent); border-bottom: 1px solid currentColor; }
.article { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.article .prose { font-size: 19px; }
.copyline { display: grid; gap: 14px; justify-items: start; }
.copyline .big, .contact .big { font: 600 clamp(20px, 1.9vw, 26px)/1.25 var(--f-display); font-stretch: 106%; letter-spacing: -.01em; overflow-wrap: anywhere; user-select: all; }
.xlist { list-style: none; margin: 0; padding: 0; columns: 2 240px; column-gap: 40px; color: var(--steel); font-size: 15px; }
.xlist li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--night-ink); }
.mk-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--rule); }
.mk-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); font: 600 18px/1.2 var(--f-display); font-stretch: 106%; }
.mk-links a svg { opacity: .35; transition: transform .35s var(--ease), opacity .2s; }
.mk-links a:hover { color: var(--accent); }
.mk-links a:hover svg { opacity: 1; transform: translateX(4px); }
.pgal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pgal img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pcard[hidden], .masonry button[hidden] { display: none; }

/* ───────── project page: fixed full-screen photo with panels scrolling over it ───────── */

.pj-panel { position: relative; background: var(--night); }
.pj-light { background: var(--paper); color: var(--ink); }
.pj-sec { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--rule); }
.pj-panel > .pj-sec:first-child { border-top: 0; }
.pj-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 72px; }
.pj-h { margin: 0 0 14px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.pj-prose { font-size: 19px; }
.pj-svc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pj-svc li { font-size: 15px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 99px; }
.pj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px 24px; }
.pj-stats > div { border-left: 1px solid var(--rule); padding-left: 22px; min-width: 0; }
.pj-stats .num { font: 600 clamp(44px, 5vw, 76px)/.95 var(--f-display); font-stretch: 112%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pj-stats .num span { font-size: .42em; margin-left: 6px; color: var(--accent); letter-spacing: 0; }
.pj-stats .lbl { margin-top: 12px; font-size: 15px; color: var(--steel); max-width: 24ch; }
.pj-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pj-track::-webkit-scrollbar { display: none; }
/* the photos can be grabbed and dragged with a mouse (site.js) */
@media (pointer: fine) { .pj-track { cursor: grab; } .pj-track.dragging { cursor: grabbing; } }
.pj-track img { user-select: none; -webkit-user-drag: none; }
/* every photo is shown whole at one shared height; wide and tall photos keep their own widths */
.pj-track { --gal-h: clamp(240px, 64vh, 680px); }
.pj-track figure { flex: 0 0 auto; max-width: 100%; margin: 0; scroll-snap-align: start; }
.pj-track img { display: block; height: var(--gal-h); width: auto; max-width: 100%; object-fit: contain; }
/* phones: a height that lets a typical 3:2 landscape photo fill the screen width */
@media (max-width: 700px) { .pj-track { --gal-h: min(58vw, 42vh); } }
.pj-galbar { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
/* the project's photo credit (admin: Photos > Photo credit), one line under the slider */
.pj-credit { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--steel); }
/* a project with one photo has no slider; the credit takes its place as a slim band */
.pj-sec.pj-credit-only { padding-block: 18px; }
.pj-credit-only .pj-credit { margin: 0; }
.pj-rows { display: grid; }
.pj-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 12px 40px; padding: 22px 0; border-top: 1px solid var(--rule); }
.pj-row:first-child { border-top: 0; padding-top: 0; }
.pj-row h3 { margin: 0; font: 600 20px/1.25 var(--f-display); font-stretch: 106%; letter-spacing: -.01em; }
.pj-row p { margin: 0; color: var(--steel); }
.pj-quote { margin: 0; display: grid; gap: 28px; max-width: 1000px; }
.pj-quote blockquote { margin: 0; font: 500 clamp(26px, 3.2vw, 46px)/1.18 var(--f-display); font-stretch: 104%; letter-spacing: -.018em; text-wrap: balance; }
.pj-quote figcaption { font: 500 13px/1.6 var(--f-mono); letter-spacing: .06em; color: var(--night-accent); display: grid; }
.pj-quote figcaption span { color: var(--night-muted); }
.pj-team { display: grid; gap: 14px; }
.pj-team a { display: flex; align-items: center; gap: 16px; }
.pj-team img { width: 64px; height: 80px; object-fit: cover; filter: var(--portrait-fade); transition: filter .4s; }
.pj-team a:hover img { filter: none; }
.pj-team span { display: grid; font-size: 14px; color: var(--steel); }
.pj-team b { font: 600 18px/1.25 var(--f-display); font-stretch: 106%; color: var(--ink); }
.pj-awards { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pj-awards li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 900px) {
  .pj-split,       }
.chip-br { flex-basis: 100%; height: 0; }

/* project first screen (after walterpmoore.com): everything a visitor needs is on it without scrolling */
.pj-hero { position: relative; min-height: 100svh; background: #000; color: #fff; overflow: hidden; display: grid; }
.pj-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .pj-video { display: none; } }
/* the top of the photo deepens behind the title like a graded sky; --shade is measured per photo
   (tools/title_shade.py) so bright skies get more and dark photos almost none */
.pj-hero { --shade: var(--shade-desk, .35); }
.pj-shade { position: absolute; inset: 0; background:
  radial-gradient(75% 55% at 76% 20%, rgba(0,0,0, calc(var(--shade) * .4)) 0%, rgba(0,0,0,0) 70%),
  linear-gradient(180deg, rgba(0,0,0, calc(.3 + var(--shade) * .45)) 0%, rgba(0,0,0, calc(var(--shade) * .68)) 24%, rgba(0,0,0,0) 46%),
  linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 68%, rgba(0,0,0,.9) 100%); }
.pj-hero-in { position: relative; width: 100%; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: auto 1fr auto; column-gap: clamp(32px, 7vw, 120px);
  padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px) + clamp(40px, 9vh, 112px)); padding-bottom: clamp(28px, 6vh, 64px); }
.pj-name { grid-column: 2; grid-row: 1; margin: 0; font: 400 clamp(30px, 3vw, 44px)/1.15 var(--f-display); letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 0 1px rgba(0,0,0,.35), 0 1px 18px rgba(0,0,0,.45); }
.pj-tag { grid-column: 1; grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.pj-cat { font: 500 15px/1.3 var(--f-body); color: #fff; }
a.pj-cat:hover { text-decoration: underline; text-underline-offset: 4px; }
span.pj-cat { color: var(--night-accent); }
.pj-tagline { flex-basis: 100%; margin: 14px 0 0; max-width: 20ch; font: 300 clamp(30px, 3.1vw, 46px)/1.12 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.pj-facts { grid-column: 2; grid-row: 3; align-self: end; }
.pj-facts h2 { margin: 0 0 12px; font: 500 15px/1.3 var(--f-body); }
.pj-facts table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; }
.pj-facts th, .pj-facts td { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.24); vertical-align: top; text-align: left; }
.pj-facts th { width: 46%; padding-right: 16px; font-weight: 400; color: rgba(255,255,255,.72); }
.pj-facts td { overflow-wrap: anywhere; }
.pj-prose { font-weight: 300; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; }
@media (max-width: 900px) {
  .pj-shade { background:
    linear-gradient(180deg, rgba(0,0,0, calc(.3 + var(--shade) * .45)) 0%, rgba(0,0,0, calc(var(--shade) * .7)) 22%, rgba(0,0,0,0) 40%),
    linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.92) 100%); }
  .pj-hero-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; row-gap: 28px; padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px) + 24px); }
  .pj-hero { --shade: var(--shade-phone, .35); }
  .pj-name { grid-column: 1; }
  .pj-tag { grid-row: 3; }
  .pj-facts { grid-column: 1; grid-row: 4; }
  .pj-facts th, .pj-facts td { padding: 6px 0; font-size: 14px; }
}
/* careers team photo: shown whole, never cropped */
.team-photo { margin: clamp(36px, 5vw, 64px) 0 0; display: grid; gap: 12px; }
.team-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--night-2); }
.team-photo figcaption { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
/* full-screen opening photo for an inner page (Careers), title at bottom left */
.page-hero { position: relative; min-height: min(100svh, 980px); display: grid; align-content: end; background: #000; color: #fff; overflow: hidden; }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%),
  linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 64%, rgba(0,0,0,.88) 100%),
  linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%); }
.page-hero-in { position: relative; z-index: 2; width: 100%; display: grid; gap: 22px; padding-block: calc(var(--head-h) + 48px) clamp(40px, 8vh, 88px); }
.page-hero-in .eyebrow { color: rgba(255,255,255,.8); }
.page-hero-in .d1 { color: #fff; }
.page-hero-in p { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255,255,255,.86); }
.page-hero + .wrap .team-photo { margin-top: clamp(56px, 7vw, 104px); }

/* group landing pages (Architectural / Industrial) */
.grp-lede { max-width: 40ch; font: 450 clamp(24px, 2.6vw, 38px)/1.25 var(--f-display); font-stretch: 104%; letter-spacing: -.015em; }
.grp-markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 44px 28px; }
.mkcard { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mkcard .ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--night-2); }
.mkcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mkcard:hover img { transform: scale(1.045); }
.mkcard p { margin: 0; color: var(--steel); font-size: 15px; }
.mkcard:hover .d3 { color: var(--accent); }
.grp-next { position: relative; display: grid; align-content: end; min-height: clamp(320px, 50vh, 520px); color: #fff; overflow: hidden; background: #000; }
.grp-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: transform 1.2s var(--ease), opacity .4s; }
.grp-next:hover img { transform: scale(1.03); opacity: .5; }
.grp-next .wrap { position: relative; display: grid; gap: 14px; width: 100%; padding-block: clamp(40px, 6vw, 80px); }
.grp-next .eyebrow { color: rgba(255,255,255,.8); }
.grp-next .d2 svg { width: .6em; height: auto; margin-left: .2em; }
.mega h4 a { color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.mega h4 a:hover { color: var(--night-ink); }
/* owner logo wall: every logo in one tint, sized by its proportions so wide and round marks weigh the same */
.owners-band { border-bottom: 1px solid var(--rule); }
.owners { padding-block: clamp(32px, 4vw, 48px); display: grid; gap: 24px; }
.owners h2 { margin: 0; }
.owners ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 36px 48px; }
.owners img { height: var(--h); width: auto; max-width: 180px; filter: var(--mono); opacity: .62; transition: opacity .25s; }
.owners li:hover img { opacity: 1; }
@media (max-width: 600px) {
  .owners ul { justify-content: center; gap: 28px 36px; }
  .owners img { height: calc(var(--h) * .8); }
}
.owners ul.few { justify-content: flex-start; gap: 36px 72px; }
.owners img { max-width: 220px; }
/* phones: a smaller header, logo still larger than before */
@media (max-width: 600px) {
  :root { --head-h: 76px; }
  .brand img { height: 48px; }
}

/* ───────── type, links and services (2026-11 redesign) ─────────
   Narrow technical type, plain text links and photo-led services. Text links have four styles while one
   is being picked: html[data-links] = chevron, caps or box, or none for underlined text. "Try link styles.cmd"
   opens the site with a switcher; the published site uses underlined text until one is chosen. */
.d1, .d2, .d3 { letter-spacing: 0; }
.d1 { font-weight: 600; line-height: .98; }
.d2 { font-weight: 600; line-height: 1.04; }
.d3 { font-weight: 600; letter-spacing: .005em; }
.eyebrow { font-weight: 600; font-size: 13px; letter-spacing: .1em; }
.mk-row .nm, .mk-links a { letter-spacing: 0; }
.grid-stats .num { letter-spacing: -.01em; }

/* text links: no arrows; arrows stay on buttons and previous/next controls */
.tlink { display: inline-block; font: 600 16px/1.3 var(--f-body); color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-thickness .15s; }
.tlink:hover { text-decoration-thickness: 2px; }
html[data-links="chevron"] .tlink { text-decoration: none; }
html[data-links="chevron"] .tlink::after { content: " ›"; font-weight: 500; }
html[data-links="chevron"] .tlink:hover { text-decoration: underline; text-underline-offset: 5px; }
html[data-links="caps"] .tlink { font: 600 13px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: inherit; text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
html[data-links="caps"] .tlink:hover { color: var(--accent); }
html[data-links="box"] .tlink { font: 600 14px/1 var(--f-body); color: inherit; text-decoration: none; padding: 11px 16px; box-shadow: inset 0 0 0 1px var(--rule); border-radius: 2px; transition: box-shadow .15s, color .15s; }
html[data-links="box"] .tlink:hover { box-shadow: inset 0 0 0 1px currentColor; color: var(--accent); }

/* menu links: a plain line under the current page, no sliding underline */
.nav > a::after, .nav > .has-mega > .mega-t::after { transition: none; }
.nav > a:hover, html:not(.nav-hold) .has-mega:hover > .mega-t { color: var(--accent); }
.site-head.over .nav > a:hover, html:not(.nav-hold) .site-head.over .has-mega:hover > .mega-t { color: #fff; opacity: .75; }
.nav > a:hover::after, html:not(.nav-hold) .has-mega:hover > .mega-t::after, .has-mega:focus-within > .mega-t::after { transform: scaleX(0); }

/* market lists: the name alone, no count or arrow, no shift on hover */
.mk-row { grid-template-columns: minmax(0,1fr); transition: color .2s; }
.mk-row:hover, .mk-row.act { padding-left: 0; }
.mk-links a { padding-right: 0; }

/* services: a project photo above each one in place of a line icon */
.svc > div { gap: 14px; }
/* equal columns: the space and rule between them sit in the gap, so all three photos are the same width */
.svc { column-gap: 64px; }
.svc > div, .svc > div + div { padding-left: 0; padding-right: 0; border-right: 0; position: relative; }
.svc > div + div::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0; border-left: 1px solid var(--rule); }
.svc .ph { height: clamp(200px, 17vw, 260px); overflow: hidden;   /* one height for all three, though the first column is wider */
  background: var(--rule); margin-bottom: 8px; }
.svc .ph img { width: 100%; height: 100%; object-fit: cover; }
.svc .ph-hold { display: grid; place-items: center; padding: 20px; text-align: center;
  background: repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--steel) 22%, transparent) 9px 10px), var(--card);
  box-shadow: inset 0 0 0 1px var(--rule); }
.svc .ph-hold span { font: 600 13px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); background: var(--card); padding: 6px 10px; }
@media (max-width: 900px) {
  .mk-row { grid-template-columns: 64px minmax(0,1fr); }
  .svc > div + div::before { display: none; }
}

/* home: one stat sentence in place of the four-column stats row */
.stat-line { margin: clamp(56px, 7vw, 96px) 0 0; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); font: 600 clamp(30px, 3.6vw, 52px)/1.1 var(--f-display); text-wrap: balance; }
.stat-line .tbd { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 0 .2em; border-radius: 2px; }
.map-hold { margin-top: clamp(28px, 3vw, 40px); aspect-ratio: 16 / 7; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--steel) 22%, transparent) 9px 10px), var(--card);
  box-shadow: inset 0 0 0 1px var(--rule); }
.map-hold span { font: 600 13px/1.3 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); background: var(--card); padding: 6px 10px; }

/* ───────── home: project map ─────────
   Drawn at build time (tools/map-svg.mjs); site.js plays it through the years. */
/* shared by the project map and the licensure maps, so they read as a pair */
.pmap, .lic { --land: color-mix(in srgb, var(--steel) 14%, var(--paper)); }
.pmap { margin: clamp(28px, 3vw, 40px) 0 0;
  --land-home: color-mix(in srgb, var(--accent) 76%, var(--paper));
  --land-on: color-mix(in srgb, var(--accent) 58%, var(--paper)); --dot: color-mix(in srgb, var(--accent) 55%, var(--ink)); --dot-new: #E07B24; }
.pmap-stage { position: relative; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.pmap svg { display: block; width: 100%; height: auto; aspect-ratio: 975 / 610; }
.pmap-states path { fill: var(--land); stroke: var(--card); stroke-width: .8; vector-effect: non-scaling-stroke; transition: fill .6s ease; }
.pmap-states path.on { fill: var(--land-on); }
.pmap-states path.home { fill: var(--land-home); }
.pmap-dots circle { fill: var(--dot); fill-opacity: .72; stroke: var(--card); stroke-width: .6; vector-effect: non-scaling-stroke; transition: r .45s var(--ease), fill .3s; }
.pmap-dots circle.new { fill: var(--dot-new); fill-opacity: .95; }
/* the year, large in the lower left, above the timeline */
.pmap-year { position: absolute; left: clamp(12px, 1.4vw, 18px); bottom: clamp(10px, 1.2vw, 16px); font: 700 clamp(22px, 2.2vw, 32px)/1 var(--f-display); color: var(--ink); opacity: .8; pointer-events: none; font-variant-numeric: tabular-nums; }
/* timeline along the bottom of the map: play/pause and how far through the years it has got */
/* the timeline sits under the map's frame, the way the engineer buttons sit under the licensure map */
.pmap-bar { display: flex; align-items: center; gap: 16px; padding-top: 14px; }
.pmap-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; }
.pmap-btn[hidden] { display: none; }
.pmap-line { flex: 1; min-width: 0; padding-bottom: 18px; position: relative; }
.pmap-track { height: 3px; background: var(--rule); position: relative; }
.pmap-track i { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .5s linear; }
.pmap-ticks { position: absolute; left: 0; right: 0; top: 10px; height: 14px; font: 500 12px/1 var(--f-display); color: var(--steel); font-variant-numeric: tabular-nums; }
.pmap-ticks span { position: absolute; transform: translateX(-50%); }
.pmap-ticks span:first-child { transform: none; }
.pmap-ticks span:last-child { transform: translateX(-100%); }
@media (max-width: 600px) {
  .pmap-ticks span:not(:first-child):not(:last-child) { display: none; }
  .pmap-year { bottom: 8px; left: 10px; font-size: 20px; }
}

/* the stat line beside the map: the sentence on the left (room below it for more), the map on the right */
/* two equal columns, each a line over its map; subgrid keeps the two maps level when one line wraps more */
.statmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px clamp(32px, 4vw, 64px); align-items: start; margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.statmap .stat-line { margin: 0; padding: 0; border: 0; font-size: clamp(28px, 2.6vw, 40px); }
.stat-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: inherit; min-width: 0; }
.statmap .pmap { margin: 0; }
@media (max-width: 900px) { .statmap { grid-template-columns: 1fr; grid-template-rows: none; row-gap: clamp(48px, 8vw, 72px); } .stat-col { grid-row: auto; grid-template-rows: none; gap: 20px; } }

/* ───────── licensure map (leadership page, and small beside the home project map) ───────── */
.lic { margin: 0; }
.lic-count { margin: 0; font: 600 clamp(20px, 1.8vw, 26px)/1 var(--f-display); color: var(--steel); }
.lic-map { position: relative; min-width: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.lic:not(.sm) .lic-map { max-width: 1000px; margin-inline: auto; }
.lic:not(.sm) .lic-chips { max-width: 1000px; margin-inline: auto; }
.lic-svg { display: block; width: 100%; height: auto; aspect-ratio: 975 / 610; }
.lic-states path { fill: var(--land); stroke: var(--card); stroke-width: .8; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .2s var(--ease); outline: none; }
.lic-states path.on { fill: var(--accent); cursor: pointer; }
.lic.still .lic-states path.on { cursor: default; }
a.lic-map { display: block; }
.lic.still a.lic-map .lic-states path.on { cursor: pointer; }   /* the whole map is a link (home page) */
a.lic-map { transition: box-shadow .2s; }
a.lic-map:hover, a.lic-map:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }
.lic-states path.on.hot, .lic-states path.on:focus-visible { fill: var(--ink); }
.lic.filtering .lic-states path.on:not(.match) { fill: var(--land); }
.lic-labels text { font: 600 11px/1 var(--f-display); letter-spacing: .06em; text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: var(--steel); opacity: .6; }
.lic-labels text.on { fill: var(--accent-ink); opacity: 1; }
.lic-labels text.hot { fill: var(--paper); }
.lic.filtering .lic-labels text.on:not(.match) { fill: var(--steel); opacity: .6; }
.lic-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px;
  padding: 14px 16px; min-width: 170px; max-width: 240px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.35); transform: translate(14px, 14px); opacity: 0; transition: opacity .15s; }
.lic-tip.show { opacity: 1; }
.lic-tip h3 { margin: 0 0 10px; font: 600 20px/1.1 var(--f-display); }
.lic-tip ul { list-style: none; margin: 0; padding: 0; display: grid; }
.lic-tip li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 6px; border-top: 1px solid var(--rule); font-size: 15px; }
.lic-tip li:first-child { border-top: 0; padding-top: 0; }
.lic-tip .tag { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 2px; color: var(--steel); }
.lic-tip .tag.se { border-color: var(--accent); color: var(--accent); }
.lic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 3vw, 36px); }
/* the buttons stretch so each row spans the map's width */
.lic-chips .chip { background: transparent; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; flex: 1 1 auto; }
.lic-chips .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lic-chips .chip b { font-weight: 600; }
.lic-chips .chip small { font: 500 12px/1 var(--f-mono); letter-spacing: .04em; opacity: .8; }
/* home: the right half of the stat section */
.lic.sm .lic-chips { margin-top: 14px; gap: 6px; }
.lic.sm .lic-chips .chip { padding: 7px 10px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .lic-states path, .lic-tip { transition: none; } }

/* licensure filter styles to choose from (html[data-licf]; none = the rounded buttons above).
   tabs: names in a row over a rule, the picked one underlined in blue.
   list: a short schedule of names and state counts, ruled like a drawing's table.
   bar: one square-cornered strip, split into cells. */
html[data-licf="tabs"] .lic-chips { gap: 0 clamp(18px, 2.4vw, 32px); border-bottom: 1px solid var(--rule); }
html[data-licf="tabs"] .lic-chips .chip { border: 0; border-radius: 0; padding: 12px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--steel); background: none; }
html[data-licf="tabs"] .lic-chips .chip:hover { color: var(--ink); }
html[data-licf="tabs"] .lic-chips .chip[aria-pressed="true"] { background: none; color: var(--ink); border-bottom-color: var(--accent); }
html[data-licf="tabs"] .lic.sm .lic-chips .chip { padding: 9px 0; }

html[data-licf="list"] .lic-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0 32px; border-top: 1px solid var(--ink); }
html[data-licf="list"] .lic.sm .lic-chips { grid-template-columns: 1fr 1fr; gap: 0 20px; }
html[data-licf="list"] .lic-chips .chip { display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 12px 0 12px 12px; color: var(--ink); background: none; text-align: left; position: relative; }
html[data-licf="list"] .lic-chips .chip::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: transparent; }
html[data-licf="list"] .lic-chips .chip:hover::before { background: var(--rule); }
html[data-licf="list"] .lic-chips .chip[aria-pressed="true"] { background: none; color: var(--ink); }
html[data-licf="list"] .lic-chips .chip[aria-pressed="true"]::before { background: var(--accent); }
html[data-licf="list"] .lic-chips .chip small { color: var(--steel); opacity: 1; }
html[data-licf="list"] .lic.sm .lic-chips .chip { padding: 8px 0 8px 10px; }

html[data-licf="bar"] .lic-chips { gap: 0; flex-wrap: wrap; }
html[data-licf="bar"] .lic-chips .chip { border-radius: 0; margin: 0 -1px -1px 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; font: 600 15px/1 var(--f-display); letter-spacing: .02em; color: var(--ink); background: none; }
html[data-licf="bar"] .lic-chips .chip:hover { border-color: var(--rule); background: color-mix(in srgb, var(--ink) 5%, transparent); }
html[data-licf="bar"] .lic-chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-licf="bar"] .lic.sm .lic-chips .chip { padding: 9px 11px; font-size: 13px; }

/* services: the Revit and BIM before/after slider. The second picture is clipped to the right of --at. */
.svc .ph-slide { position: relative; user-select: none; touch-action: pan-y; }
.svc .ph-slide img.b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--at)); }
.slide-bar { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.slide-bar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper);
  box-shadow: 0 2px 8px rgba(0,0,0,.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M14 11l-6 6 6 6M20 11l6 6-6 6' fill='none' stroke='%230E1217' stroke-width='2'/%3E%3C/svg%3E"); }
.slide-tag { position: absolute; bottom: 10px; font: 600 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 6px 8px; pointer-events: none; }
.slide-tag.l { left: 10px; } .slide-tag.r { right: 10px; background: var(--accent); color: var(--accent-ink); }
.ph-slide input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ph-slide:has(input:focus-visible) .slide-bar::after { outline: 2px solid var(--accent); outline-offset: 2px; }

/* markets: the whole section fits one screen on desktops (the user's request). The list flows into two
   columns of tighter rows, and the photo fills the list's height instead of a fixed 4:5. */
@media (min-width: 901px) {
  .mk-band { padding-block: clamp(40px, 6vh, 88px); }
  .mk-band .sec-head { margin-bottom: clamp(20px, 3vh, 36px); }
  .mk-band .markets { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
  .mk-band #mkList { columns: 2; column-gap: 40px; }
  .mk-band .mk-group { display: contents; }
  .mk-band .mk-group > .eyebrow { display: block; break-after: avoid; margin: 0 0 6px; padding-top: 4px; }
  .mk-band .mk-group + .mk-group > .eyebrow { padding-top: 22px; }
  .mk-band .mk-row { break-inside: avoid; padding: clamp(8px, 1.3vh, 13px) 0; }
  .mk-band .mk-row:first-of-type { border-top: 0; }
  .mk-band .mk-row .nm { font-size: clamp(18px, 1.6vw, 24px); }
  .mk-band .mk-fig { position: static; display: flex; flex-direction: column; min-height: 0; }
  .mk-band .mk-fig .frame { aspect-ratio: auto; flex: 1; min-height: 260px; }
  .mk-band .mk-fig figcaption { margin-top: 12px; }
}
/* phones: the same idea, two columns of names without the thumbnails, so it fits one screen there too */
@media (max-width: 900px) {
  .mk-band { padding-block: 40px; }
  .mk-band .sec-head { margin-bottom: 18px; }
  .mk-band #mkList { columns: 2; column-gap: 20px; }
  .mk-band .mk-group { display: contents; }
  .mk-band .mk-group > .eyebrow { display: block; break-after: avoid; margin: 0 0 4px; }
  .mk-band .mk-group + .mk-group > .eyebrow { padding-top: 18px; }
  .mk-band .mk-row { break-inside: avoid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
  .mk-band .mk-row:first-of-type { border-top: 0; }
  .mk-band .mk-row .th { display: none; }
  .mk-band .mk-row .nm { font-size: 16px; }
}

/* home Recent Projects: three to a row, all the same size. The admin's Misc tab can switch back to the older
   layout, two to a row alternating wide and narrow (html[data-recent="pairs"], the .feat rules above). */
html:not([data-recent="pairs"]) .feat > :nth-child(n) { grid-column: span 4; }
html:not([data-recent="pairs"]) .feat > :nth-child(n) .ph { aspect-ratio: 4 / 3; }
@media (max-width: 1080px) { html:not([data-recent="pairs"]) .feat > :nth-child(n) { grid-column: span 6; } }


/* ───────── Firm dropdown (Design-Build, Leadership, About): a short list under its link, same timing as the
   Projects menu (it shares .has-mega for the hover, focus and nav-hold rules) ───────── */
.has-mega.has-drop { position: relative; }
.drop { position: absolute; left: 0; top: calc(100% + 6px); min-width: 210px; display: grid; padding: 8px 0;
  background: var(--night); border: 1px solid var(--night-rule); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* keeps hover across the gap */
html:not(.nav-hold) .has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
.drop a { padding: 10px 20px; font: 500 16px/1.25 var(--f-body); color: var(--night-ink); transition: color .2s, padding .3s var(--ease); }
.drop a:hover, .drop a:focus-visible { color: var(--night-accent); padding-left: 26px; }
.drop a[aria-current="page"] { color: var(--night-accent); }

/* ───────── Design-Build page ───────── */
/* the film beside the opening line and the two buttons (as in Nick's page); stacked on narrower screens */
.db-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 56px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); }
.db-intro-tx { display: grid; gap: 28px; }
.db-intro .lede { margin: 0; }
.db-intro .lede em { font-style: normal; color: var(--accent); }
.db-actions { display: grid; justify-items: start; gap: 12px; }
@media (max-width: 980px) { .db-intro { grid-template-columns: minmax(0, 1fr); } .db-actions { display: flex; flex-wrap: wrap; } }
.db-film-band { padding-top: clamp(32px, 4vw, 56px); }
.db-film { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1621; }
.db-film img, .db-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc.db-points { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 40px; }
.svc.db-points > div + div::before { left: -20px; }
.db-points .d3 { font-size: clamp(20px, 1.6vw, 24px); }
@media (max-width: 1080px) { .svc.db-points { grid-template-columns: 1fr 1fr; } .svc.db-points > div + div::before { display: none; } }
@media (max-width: 600px) { .svc.db-points { grid-template-columns: 1fr; } }

.sec-head > .db-mode { display: flex; gap: 0 28px; border-bottom: 1px solid var(--rule); }
.sec-head > .db-mode[hidden] { display: none; }
.db-mode button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0; font: 500 15px/1 var(--f-body); color: var(--steel); cursor: pointer; }
.db-mode button:hover { color: inherit; }
.db-mode button[aria-pressed="true"] { color: inherit; border-bottom-color: var(--accent); }
.gantt { border-top: 1px solid var(--rule); }
.g-row { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.g-row .lab { display: grid; gap: 2px; }
.g-row .lab b { font: 600 18px/1.15 var(--f-display); }
.g-row .lab span { font-size: 13px; color: var(--steel); }
.track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--rule) calc(10% - 1px) 10%); }
.g-bar { position: absolute; top: 5px; height: 20px; border-radius: 2px; background: var(--steel); opacity: .55; transition: left .7s var(--ease), width .7s var(--ease), background .4s, opacity .4s; }
.g-bar.tje { background: var(--accent); opacity: 1; }
.g-row.g-foot { border-bottom: 0; padding-bottom: 0; }
.finish { position: relative; height: 56px; }
.finish .flag { position: absolute; top: 0; transform: translateX(-100%); text-align: right; white-space: nowrap; padding-right: 10px; border-right: 2px solid var(--accent); transition: left .7s var(--ease); }
.finish .flag b { display: block; font: 600 22px/1 var(--f-display); }
.finish .flag span { font-size: 13px; color: var(--steel); }
.db-note { font-size: 13px; color: var(--steel); margin: 16px 0 0; }
@media (max-width: 640px) { .g-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .g-foot > div:first-child { display: none; } }

.db-sub { max-width: 64ch; margin: 0; color: var(--steel); }
.shots { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px); align-items: start; }
.shot { margin: 0; display: grid; gap: 14px; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--card); }
.shot figcaption { font-size: 15px; color: var(--steel); max-width: 60ch; }
.shot figcaption b, .shot-notes b { color: var(--ink); font-weight: 600; }
.shot-notes { grid-column: 1 / -1; margin: 0; padding: 24px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; border-top: 1px solid var(--rule); }
.shot-notes li { color: var(--steel); font-size: 16px; padding-left: 20px; position: relative; }
.shot-notes li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--accent); }
@media (max-width: 980px) { .shots { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .shot-notes { grid-template-columns: minmax(0, 1fr); } }

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.stage { padding: 26px 22px 26px 0; display: grid; gap: 12px; align-content: start; position: relative; }
.stage::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.stage ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.stage li { font-size: 15px; line-height: 1.45; padding-left: 16px; position: relative; color: var(--steel); }
.stage li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }
@media (max-width: 980px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } }

.db-cta { display: flex; justify-content: space-between; align-items: end; gap: 28px 48px; flex-wrap: wrap; }
.db-cta > div { display: grid; gap: 16px; max-width: 40ch; }
.db-cta p { margin: 0; color: var(--steel); }
@media (prefers-reduced-motion: reduce) { .g-bar, .finish .flag, .drop { transition: none; } }

/* the Projects page ends with its card grid (the project index is gone), so it needs a section's room before the footer */
.plist { padding-bottom: clamp(72px, 9vw, 136px); }

/* Careers: the title and its line on the left, the photo on the right, inside the usual page header */
.careers-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 32px clamp(40px, 5vw, 80px); }
.careers-tx { display: grid; gap: 22px; }
.careers-photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--night-2); }
.careers-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .careers-head { grid-template-columns: minmax(0, 1fr); } }

/* page header styles, picked in the admin's Misc tab (html[data-phead]; slim is the default, and no attribute
   means "large", the first design above).
   slim:   the same layout, with a smaller title and tighter spacing.
   inline: title and intro on one line, split by a thin rule.
   block:  a dark strip under the menu bar, like a drawing's title block. */
html[data-phead="slim"] .phead { padding-block: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 30px); gap: 14px; }
html[data-phead="slim"] .phead .d1 { font-size: clamp(32px, 3vw, 44px); }
html[data-phead="slim"] .phead .row { align-items: center; }
html[data-phead="slim"] .phead p { font-size: 16px; max-width: 60ch; }

html[data-phead="inline"] .phead { padding-block: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px); gap: 12px; }
html[data-phead="inline"] .phead .row { flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0; }
html[data-phead="inline"] .phead .d1 { font-size: clamp(28px, 2.4vw, 36px); white-space: nowrap; padding-right: clamp(18px, 2vw, 28px); margin-right: clamp(18px, 2vw, 28px); border-right: 1px solid var(--rule); }
html[data-phead="inline"] .phead p { font-size: 15px; max-width: 80ch; }
@media (max-width: 700px) {
  html[data-phead="inline"] .phead .row { flex-wrap: wrap; gap: 8px; }
  html[data-phead="inline"] .phead .d1 { border-right: 0; padding-right: 0; margin-right: 0; }
}

html[data-phead="block"] .page-top { background: var(--night); color: var(--night-ink); }
html[data-phead="block"] .phead { padding-block: clamp(26px, 3vw, 40px); gap: 14px; border-bottom: 0; }
html[data-phead="block"] .phead .d1 { font-size: clamp(32px, 3vw, 44px); }
html[data-phead="block"] .phead .row { align-items: center; }
html[data-phead="block"] .phead p { color: var(--night-muted); font-size: 16px; max-width: 60ch; }

/* Careers carries its photo in the header; the lower options give it a wide, short crop */
html[data-phead] .careers-head .d1 { font-size: clamp(32px, 3vw, 44px); }
html[data-phead] .careers-photo { aspect-ratio: 3 / 1; }
html[data-phead="block"] .careers-head p { color: var(--night-muted); }

/* phones: one Filter button in place of the row of filter buttons (views.js filterBtn), opening a list of the
   markets from the bottom of the screen (filterList); wider screens never show either */
.fbtn, .flist { display: none; }
@media (max-width: 700px) {
  .filters .in { flex-wrap: wrap; }
  .filters .chips { display: none; }
  .fbtn { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 99px;
    background: var(--card); color: var(--ink); font: 400 14px/1 var(--f-body); }
  .fbtn span { color: var(--steel); }
  .fbtn b { flex: 1; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fbtn svg { width: 12px; height: auto; color: var(--steel); }
  .filters .search { flex: 1 1 100%; }
  .filters .search input { width: 100%; height: 42px; }
  .flist:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 85; }
}
.fl-scrim { position: absolute; inset: 0; background: rgba(5, 8, 12, .55); opacity: 0; transition: opacity .28s; }
.fl-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--night); color: var(--night-ink); border-radius: 16px 16px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .28s var(--ease); }
.flist.on .fl-scrim { opacity: 1; }
.flist.on .fl-panel { transform: none; }
.fl-grab { width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--night-rule); }
.fl-panel h3 { margin: 4px 0 6px; font: 600 22px/1.2 var(--f-display); }
.fl-h { margin-top: 16px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-accent); }
.fl-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--night-rule);
  text-align: left; font: 500 16px/1.25 var(--f-body); color: var(--night-ink); }
.fl-opt[aria-pressed="true"] { color: var(--night-accent); }
.fl-opt[aria-pressed="true"]::after { content: "✓"; }
@media (prefers-reduced-motion: reduce) { .fl-scrim, .fl-panel { transition: none; } }

/* Design-Build: less space between sections than the site's usual bands */
body[data-page="designBuild"] .band { padding-block: clamp(48px, 6vw, 88px); }
body[data-page="designBuild"] .band[style*="padding-top:0"] { padding-top: 0; }
body[data-page="designBuild"] .db-film-band { padding-top: clamp(24px, 3vw, 40px); }
body[data-page="designBuild"] .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
body[data-page="designBuild"] .db-intro { margin-bottom: clamp(32px, 4vw, 52px); }
body[data-page="designBuild"] .band.dark:last-child { padding-block: clamp(40px, 5vw, 72px); }

/* main-level pages: section titles, the Careers banner's included, stay smaller than the page title (.phead .d1) */
main:has(> .page-top) .d2 { font-size: clamp(24px, 2.4vw, 34px); }

/* ───────── About ───────── */
.ab-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.ab-stats > div { display: grid; gap: 6px; align-content: start; padding: clamp(18px, 2vw, 28px) 20px clamp(18px, 2vw, 28px) 0; }
.ab-stats > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.ab-stats b { font: 600 clamp(26px, 2.6vw, 38px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ab-stats span { font-size: 14px; color: var(--steel); line-height: 1.4; }
@media (max-width: 900px) { .ab-stats { grid-template-columns: 1fr 1fr; } .ab-stats > div + div { border-left: 0; padding-left: 0; } .ab-stats > div { border-top: 1px solid var(--rule); } }
.ab-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; margin-top: clamp(36px, 4vw, 56px); }
.ab-strip .pcard .ph { aspect-ratio: 4 / 3; }
.ab-strip .pcard .nm { font-size: 16px; }
@media (max-width: 1080px) { .ab-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ab-strip { grid-template-columns: 1fr 1fr; } }
.svc.ab-four { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; }
.svc.ab-four > div + div::before { left: -24px; }
.svc.ab-three > div { align-content: start; }
.svc .tlink { justify-self: start; }
@media (max-width: 1080px) { .svc.ab-four { grid-template-columns: 1fr 1fr; } .svc.ab-four > div + div::before { display: none; } }
@media (max-width: 600px) { .svc.ab-four { grid-template-columns: 1fr; } }
.ab-mk { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 4vw, 64px); }
.ab-mk > div { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ab-mk .ph { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px; background: var(--night-2); }
.ab-mk .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ab-mk .ph:hover img { transform: scale(1.03); }
.ab-mk p { margin: 0; color: var(--steel); }
.ab-mk .mk-links { margin-top: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ab-mk .mk-links a { padding-block: 12px; font-size: 16px; }
@media (max-width: 900px) { .ab-mk { grid-template-columns: 1fr; } }
.ab-special { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--rule); display: grid; gap: 18px; }
.ab-special ul { margin: 0; padding: 0; list-style: none; columns: 4 200px; column-gap: 32px; }
.ab-special li { padding: 6px 0 6px 16px; position: relative; color: var(--steel); break-inside: avoid; }
.ab-special li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1px; background: var(--accent); }


/* About: the leadership timeline. Each year spans its principals' columns: a rule with a dot, the year, a label,
   then a portrait card per principal; "Today" closes it with the firm's promise. */
.ab-tl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 28px; row-gap: 48px; }
.tl-g { grid-column: span var(--n); display: grid; grid-template-columns: subgrid; align-content: start; row-gap: 28px; }
.tl-h { grid-column: 1 / -1; position: relative; display: grid; gap: 10px; padding-top: 30px; border-top: 1px solid var(--rule); }
.tl-h::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.tl-now .tl-h::before { background: var(--night); border: 2px solid var(--accent); width: 7px; height: 7px; }
.tl-h b { font: 600 clamp(40px, 4.2vw, 64px)/.95 var(--f-display); font-variant-numeric: tabular-nums; }
.tl-h span { font: 500 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.tl-p { display: grid; gap: 6px; align-content: start; min-width: 0; }
.tl-p .ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-2); margin-bottom: 10px; }
.tl-p img { width: 100%; height: 100%; object-fit: cover; filter: var(--portrait-fade); transition: filter .5s, transform 1s var(--ease); }
.tl-p:hover img { filter: none; transform: scale(1.03); }
.tl-p b { font: 600 18px/1.2 var(--f-display); }
.tl-p:hover b { color: var(--accent); }
.tl-p small { font-size: 13px; color: var(--steel); }
.tl-p > span:last-child { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--steel); }
.tl-now p { margin: 0; font: 600 clamp(20px, 1.8vw, 26px)/1.3 var(--f-display); }
@media (max-width: 1080px) {
  .ab-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-g { grid-column: 1 / -1; }
  .tl-g[style*="--n:1"] .tl-p { grid-column: span 1; }
}

/* About: the project map and the licensure map side by side, as on the home page */
.statmap.ab-maps { margin-top: 0; padding-top: 0; border-top: 0; }
.ab-maps-h { display: grid; gap: 10px; align-content: end; }
.ab-maps-h p { margin: 0; color: var(--steel); }
.ab-maps-h .d2 { font-size: clamp(24px, 2.4vw, 34px); }   /* the same size on the home page as on About, where main-page titles are capped */

/* About: less space between sections than the site's usual bands (as on Design-Build) */
body[data-page="firm"] .band { padding-block: clamp(48px, 6vw, 88px); }
body[data-page="firm"] .band[style*="padding-top:0"] { padding-top: 0; }
body[data-page="firm"] .page-top + .wrap + .band { padding-top: clamp(40px, 5vw, 72px); }
body[data-page="firm"] .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.ab-founders { margin: 0; display: grid; gap: 10px; }
.ab-founders img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; background: var(--night-2); }
.firm-split:has(> .ab-founders) .prose > .d2 { margin: 0 0 18px; }
.ab-founders figcaption { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
body[data-page="firm"] .ab-strip { margin-top: clamp(28px, 3vw, 40px); }
body[data-page="firm"] .ab-special { margin-top: clamp(32px, 4vw, 48px); }
body[data-page="firm"] .ab-tl { row-gap: 36px; }

/* Leadership page layouts, picked in the admin's Misc tab (html[data-lead]; one row is the default, and no
   attribute means the first design, large cards).
   row:    all five portraits in one row.
   roster: two columns of compact entries, each with a small portrait, title, first line of the bio and a Full bio cue.
   Both put the licensure map beside its engineer buttons. */
.lead-band .ex, .lead-band .more-bio { display: none; }
html[data-lead="row"] .lead-band .people.lg { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; }
html[data-lead="row"] .lead-band .people.lg > * { grid-column: auto; }
html[data-lead="row"] .lead-band .people.lg .ph { aspect-ratio: 4 / 5; }
html[data-lead="row"] .lead-band .people.lg img { object-position: 50% 30%; }
html[data-lead="row"] .lead-band .people.lg .nm { font-size: 19px; }
html[data-lead="row"] .lead-band .ex { display: block; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--steel); }

html[data-lead="roster"] .lead-band .people.lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
html[data-lead="roster"] .lead-band .people.lg > * { grid-column: auto; padding-block: 22px; border-top: 1px solid var(--rule); }
html[data-lead="roster"] .lead-band .people.lg .person { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
html[data-lead="roster"] .lead-band .people.lg .ph { aspect-ratio: 4 / 5; }
html[data-lead="roster"] .lead-band .people.lg img { object-position: 50% 25%; }
html[data-lead="roster"] .lead-band .people.lg .nm { font-size: 21px; }
html[data-lead="roster"] .lead-band .ex { display: block; margin: 10px 0 8px; font-size: 15px; line-height: 1.5; color: var(--steel); }
html[data-lead="roster"] .lead-band .more-bio { display: inline-block; font: 600 14px/1 var(--f-body); color: var(--accent); }
html[data-lead="roster"] .lead-band .person:hover .more-bio { text-decoration: underline; text-underline-offset: 4px; }

html[data-lead] .lead-band { padding-top: clamp(32px, 4.4vw, 64px); padding-bottom: clamp(36px, 4vw, 56px); }
html[data-lead] .lead-lic { padding-top: clamp(36px, 4vw, 56px); }
html[data-lead] .lead-lic .lic:not(.sm) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 32px clamp(32px, 4vw, 64px); align-items: center; }
html[data-lead] .lead-lic .lic:not(.sm) .lic-map { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
html[data-lead] .lead-lic .lic:not(.sm) .lic-chips { grid-column: 1; grid-row: 1; margin: 0; max-width: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
html[data-lead] .lead-lic .lic:not(.sm) .lic-chips .chip { justify-content: space-between; flex: none; }
/* the write-up in place of the engineer buttons, beside the map */
.lic-note { margin: 0; }
.lic-note p { margin: 0; max-width: 34ch; font: 600 clamp(19px, 1.7vw, 24px)/1.4 var(--f-display); text-wrap: pretty; }
/* with the write-up, the map takes the wide left column and the write-up sits to its right */
html[data-lead] .lead-lic .lic:not(.sm):has(.lic-note) { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
html[data-lead] .lead-lic .lic:not(.sm):has(.lic-note) .lic-map { grid-column: 1; }
html[data-lead] .lead-lic .lic:not(.sm) .lic-note { grid-column: 2; grid-row: 1; }

@media (max-width: 1080px) {
  html[data-lead="row"] .lead-band .people.lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-lead="roster"] .lead-band .people.lg { grid-template-columns: minmax(0, 1fr); }
  html[data-lead] .lead-lic .lic:not(.sm) { grid-template-columns: minmax(0, 1fr); }
  html[data-lead] .lead-lic .lic:not(.sm) .lic-map, html[data-lead] .lead-lic .lic:not(.sm) .lic-chips, html[data-lead] .lead-lic .lic:not(.sm) .lic-note { grid-column: 1; grid-row: auto; }
  html[data-lead] .lead-lic .lic:not(.sm) .lic-note { order: -1; }   /* the write-up reads first, above the map */
  html[data-lead] .lead-lic .lic:not(.sm) .lic-chips { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  html[data-lead="row"] .lead-band .people.lg { grid-template-columns: 1fr 1fr; }
  html[data-lead="roster"] .lead-band .people.lg .person { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
}
/* Leadership: each card with its email and LinkedIn icons below the summary (the card's own layout is unchanged) */
.lead-card { min-width: 0; }
.lead-links { display: flex; gap: 8px; margin-top: 14px; }
.lead-links a, .lead-links button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: none; border: 1px solid var(--rule); border-radius: 2px; color: var(--steel); cursor: pointer; transition: color .2s, border-color .2s; }
.lead-links a:hover, .lead-links button:hover { color: var(--accent); border-color: var(--accent); }
/* the copy button: a check and a small "Copied" tag for a moment once the address is on the clipboard */
.copy-ic { position: relative; }
.copy-ic .ck, .copy-ic.done .cp { display: none; }
.copy-ic.done .ck { display: block; }
.copy-ic.done { color: var(--accent); border-color: var(--accent); }
.copy-ic.done::after { content: "Copied"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 7px; font: 500 11px/1.2 var(--f-body); color: var(--paper); background: var(--ink); border-radius: 2px; white-space: nowrap; pointer-events: none; }
html[data-lead="roster"] .lead-links { margin-left: 140px; margin-top: 0; }
@media (max-width: 600px) { html[data-lead="roster"] .lead-links { margin-left: 102px; } }

/* Leadership: a short strip between the portraits and the map, pointing to About */
.lead-about .in { display: flex; justify-content: space-between; align-items: center; gap: 16px 48px; flex-wrap: wrap; padding-block: clamp(24px, 3vw, 36px); border-block: 1px solid var(--rule); }
.lead-about p { margin: 0; max-width: 60ch; font: 600 clamp(19px, 1.6vw, 24px)/1.35 var(--f-display); }

/* ───────── Contact ───────── the details stacked on the left, the photo beside them */
.ct .big { font: 600 clamp(20px, 1.9vw, 26px)/1.25 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ct a.big:hover { color: var(--accent); }
.ct-photo { margin: 0; display: grid; gap: 10px; align-content: start; }
.ct-photo img { width: 100%; height: auto; background: var(--night-2); }
.ct-photo figcaption { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }

.ct-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center; }
.band.ct { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 4.5vw, 64px); }
.ct-list { display: grid; align-content: start; }
.ct-list > div:first-child { padding-top: 0; }
.ct-list > div { display: grid; gap: 8px; justify-items: start; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.ct-who { font-weight: 600; margin-bottom: -6px; }
/* a row that leads to another page reads as a link: blue and underlined, like the site's text links */
.ct .ct-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ct .ct-link:hover { text-decoration-thickness: 2px; }
.ct-list .muted a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .ct-split { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Careers ───────── a photo across the top with the title over it, then the roles and how to apply */
.cr .d2 { font-size: clamp(24px, 2.4vw, 34px); }
.cr .big { font: 600 clamp(20px, 1.9vw, 26px)/1.25 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cr a.big:hover { color: var(--accent); }
.cr .acts { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; }
.band.cr { padding-block: clamp(28px, 3.4vw, 48px); }
.band.cr + .band.cr { padding-top: 0; }
.cr .prose p:last-child { margin-bottom: 0; }
.cr-side { display: grid; gap: 18px; align-content: start; }
.cr-roles { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.cr-roles li { padding-block: 12px; border-bottom: 1px solid var(--rule); font: 600 clamp(18px, 1.5vw, 21px)/1.2 var(--f-display); }
.cr-email { display: grid; gap: 14px; justify-items: start; }
.cr-apply .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px clamp(40px, 6vw, 96px); align-items: center; padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--ink); }
.cr-apply .in p { margin: 10px 0 0; max-width: 44ch; color: var(--steel); }
.cr-apply { padding-bottom: clamp(48px, 5vw, 72px) !important; }
.cr-hero { position: relative; min-height: clamp(320px, 44vh, 480px); display: grid; align-content: end; background: #000; color: #fff; overflow: hidden; }
.cr-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cr-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,12,18,.8) 0%, rgba(8,12,18,.45) 45%, rgba(8,12,18,0) 75%); }
.cr-hero .wrap { position: relative; z-index: 2; width: 100%; }
.cr-hero .in { display: grid; gap: 18px; justify-items: start; max-width: 520px; padding-block: 40px clamp(28px, 3.6vw, 48px); }
.cr-hero .d1 { color: #fff; font-size: clamp(40px, 4.4vw, 64px); }
.cr-hero p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255,255,255,.88); }
@media (max-width: 900px) {
  .cr-apply .in { grid-template-columns: minmax(0, 1fr); }
  .cr .firm-split { row-gap: 24px; }
  .cr-hero::before { background: linear-gradient(0deg, rgba(8,12,18,.85) 0%, rgba(8,12,18,.5) 55%, rgba(8,12,18,.1) 100%); }
}

/* Home page: tighter vertical spacing between sections */
body[data-page="home"] .band:not(.mk-band) { padding-block: clamp(44px, 5vw, 72px); }
body[data-page="home"] .band.tight { padding-block: clamp(36px, 4vw, 56px); }
body[data-page="home"] .band[style*="padding-top:0"] { padding-top: 0; }
body[data-page="home"] .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
body[data-page="home"] .statmap { margin-top: clamp(32px, 4vw, 56px); }
.svc .d3 a:hover { color: var(--accent); }

/* Home: the philosophy and the principals side by side in one dark band; the principals are a list of names with
   one photo beside it that follows the name under the cursor (site.js), with that principal's one-line summary */
.band.hp-band { padding-block: clamp(40px, 4.4vw, 60px); }
.hp-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px clamp(48px, 6vw, 96px); align-items: start; }
.hp-split .statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; }
.hp-split .statement .words { padding-top: 18px; border-top: 1px solid var(--rule); font-size: clamp(24px, 2.7vw, 40px); line-height: 1.2; letter-spacing: -.015em; }
.hp-split .statement .sig { margin-top: 24px; font-size: 14px; }
.hp-split .statement .sig img { height: 36px; }
.hp-split .sec-head { margin-bottom: 14px; min-height: 34px; }
.hp-split .d2 { font-size: clamp(24px, 2.4vw, 34px); }
.hp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: stretch; }
.hp-list { display: grid; border-top: 1px solid var(--rule); }
.hp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-block: 9px; border-bottom: 1px solid var(--rule); }
.hp-row .th { display: none; }
.hp-row .tx { display: grid; gap: 2px; min-width: 0; }
.hp-row b { font: 600 17px/1.2 var(--f-display); }
.hp-row small { font-size: 12.5px; color: var(--steel); }
.hp-row .ar { color: var(--steel); transition: transform .3s var(--ease), color .3s; }
.hp-row:hover b, .hp-row.act b, .hp-row:hover .ar, .hp-row.act .ar { color: var(--accent); }
.hp-row:hover .ar { transform: translateX(4px); }
/* the name list sets the height (about 308px; its type is in px, so it holds at every width). The photo runs that
   full height at the portraits' own 4:5 shape, so no one is cropped, with the summary line over its lower edge. */
.hp-spot { position: relative; margin: 0; width: 246px; overflow: hidden; background: var(--night-2); }
.hp-spot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .4s; }
.hp-spot > img.on { opacity: 1; }
.hp-spot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(8,12,18,.9), rgba(8,12,18,0)); pointer-events: none; }
.hp-spot figcaption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 0 14px 12px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.86); }
@media (max-width: 1080px) { .hp-split { grid-template-columns: minmax(0, 1fr); } }
/* phones have no hover: the list gets small portraits and the large photo goes */
@media (max-width: 600px) {
  .hp-body { grid-template-columns: minmax(0, 1fr); }
  .hp-spot { display: none; }
  .hp-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .hp-row .th { display: block; aspect-ratio: 1; overflow: hidden; background: var(--night-2); }
  .hp-row img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: var(--portrait-fade); }
}

/* Design-Build: the joist supplier's quote beside the 30% figure, under the joist screenshots
   (these rules were lost in the stylesheet wipe and written again) */
.db-proof { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.db-quote { margin: 0; display: grid; gap: 14px; padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--accent); }
.db-quote blockquote { margin: 0; }
.db-quote p { margin: 0; font: 600 clamp(21px, 2vw, 28px)/1.3 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.db-quote figcaption { font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.db-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: center; }
.db-stat b { font: 600 clamp(48px, 5vw, 72px)/1 var(--f-display); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.db-stat p { margin: 0; max-width: 30ch; color: var(--steel); line-height: 1.5; }
@media (max-width: 900px) { .db-proof { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .db-stat { grid-template-columns: minmax(0, 1fr); } }

/* principal pages: less space between the menu and the photo and name */
body[data-page="person"] .page-top > .band { padding-top: clamp(32px, 3.6vw, 56px); }

/* a more compact footer: less space above and below, a smaller logo and tighter link lists */
footer.foot { padding-top: clamp(40px, 4.4vw, 64px); }
footer.foot .foot-grid { gap: 28px 40px; padding-bottom: max(40px, calc(28px + env(safe-area-inset-bottom, 0px))); }
footer.foot .foot-grid img { height: 56px; margin-bottom: 16px; }
footer.foot h5 { margin-bottom: 12px; }
footer.foot ul { gap: 6px; }
/* phones: two columns of links under the logo, rather than one long stack */
@media (max-width: 600px) {
  footer.foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  footer.foot .foot-grid > :first-child { grid-column: 1 / -1; }
}

/* Leadership page: the principals' portraits in full color from the start (elsewhere they're faded until hovered);
   the zoom on hover stays */
body[data-page="leadership"] .lead-band .person img { filter: none; }

/* Page not found (404.html): one full screen, the photo behind the header, the message and the ways back in */
.nf-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; background: #000; color: #fff; overflow: hidden; }
.nf-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.nf-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,12,18,.85) 0%, rgba(8,12,18,.55) 45%, rgba(8,12,18,.1) 80%); }
.nf-hero .wrap { position: relative; z-index: 2; width: 100%; }
.nf-hero .in { display: grid; gap: 18px; justify-items: start; max-width: 560px; padding-block: calc(var(--head-h) + 32px) 48px; }
.nf-hero .eyebrow { color: rgba(255,255,255,.75); }
.nf-hero .d1 { color: #fff; font-size: clamp(40px, 5vw, 76px); }
.nf-hero p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255,255,255,.88); }
.nf-hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nf-hero .btn.ghost { color: #fff; }
@media (max-width: 900px) {
  .nf-hero::before { background: linear-gradient(0deg, rgba(8,12,18,.88) 0%, rgba(8,12,18,.6) 60%, rgba(8,12,18,.2) 100%); }
  .nf-hero { align-content: end; }
}

/* launch day (site.js): the old site under glass, broken with three hammer strikes. html.unveil covers the page
   before site.js runs; html.unveil-on holds the scroll while the glass is up. Remove after launch day. */
html.unveil, html.unveil-on { overflow: hidden; }
html.unveil body::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: #006ab6 url(../img/old-site.webp) no-repeat 50% 0 / min(1898px, 165vw) auto; }
.unveil-box { position: fixed; inset: 0; z-index: 10001; cursor: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.unveil-box.calm { cursor: pointer; }
.unveil-box.fade { opacity: 0; transition: opacity .35s; }
.unveil-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.unveil-ham { position: absolute; left: 0; top: 0; width: 140px; height: 140px; pointer-events: none; opacity: 0; rotate: 15deg;
  transform-origin: 92.86% 92.86%; filter: drop-shadow(4px 10px 8px rgba(0,0,0,.45)); }
.unveil-ham.swing { animation: unveil-swing .34s ease-in; }
@keyframes unveil-swing { 0% { rotate: 15deg; } 20% { rotate: 30deg; } 45% { rotate: -8deg; } 60% { rotate: 0deg; } 100% { rotate: 15deg; } }
.unveil-hint { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; margin: 0; padding: 10px 20px;
  background: rgba(8,12,18,.8); color: #fff; font: 500 16px/1.3 var(--f-body); border-radius: 999px; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.unveil-skip { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; cursor: pointer; padding: 6px 14px; border-radius: 2px;
  background: rgba(8,12,18,.6); color: #fff; border: 1px solid rgba(255,255,255,.45); font: 500 14px/1.3 var(--f-body); }
.unveil-skip:hover, .unveil-skip:focus-visible { background: rgba(8,12,18,.85); border-color: #fff; }
@media (max-width: 600px) { .unveil-ham { width: 100px; height: 100px; } .unveil-hint { font-size: 14px; } }