/* ─────────────────────────────────────────────────────────────────
   STRATUM — Editorial Minimalism × Refined Brutalism
   ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #080808;
  --bg-raised:    #101010;
  --bg-raised-2:  #161616;
  --border:       rgba(255,255,255,.08);
  --border-hard:  rgba(255,255,255,.18);
  --text:         #F0ECE6;
  --text-2:       #9A9690;
  --text-3:       #4A4744;
  --accent:       #F0ECE6;
  --red:          #C8503A;

  --f-sans:    'IBM Plex Sans', system-ui, sans-serif;
  --f-display: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:    'Space Mono', monospace;

  --max:     100%;
  --gutter:  0px;
  --gap:     clamp(12px, 1.5vw, 24px);

  --ease:    cubic-bezier(.16,1,.3,1);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background: var(--bg);
}

body {
  background: transparent;
  color: var(--text);
  font-family: var(--f-sans);
  font-weight: 400;
  line-height: 1.6;
  /* clip, not hidden: hidden makes body a scroll container ("hidden auto"),
     a known trigger for Chromium dropping smooth viewport scrolls entirely.
     clip gives the same visual result without creating a scroller. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

#hero, #thesis, #industries, #work, #team, #footer { position: relative; z-index: 1; }

/* ── Utilities ── */
.label {
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--text-3);
}

.mono {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .06em;
}

.serif-italic { font-family: var(--f-display); font-style: italic; font-weight: 300; letter-spacing: -.01em; }

a { color: inherit; text-decoration: none; }

img, video { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}

#nav.scrolled {
  background: rgba(8,8,8,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border);
}

/* Over a dark section the bar goes to glass — translucent enough to read as
   floating over the artwork, with its contents flipped to light ink.
   `.over-dark` is set from script.js by testing the nav strip against the
   elements marked [data-nav-dark]. */
#nav.over-dark {
  background: rgba(12,11,10,.45);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-color: rgba(255,255,255,.1);
}

#nav.over-dark .nav-logo        { color: #F5F1EB; }
#nav.over-dark .nav-location    { color: rgba(240,236,230,.42); }
#nav.over-dark .nav-links a     { color: rgba(240,236,230,.74); }
#nav.over-dark .nav-links a:hover { color: #F5F1EB; }
#nav.over-dark .nav-burger span { background: #F5F1EB; }

#nav.over-dark .nav-cta {
  background: #F0ECE6;
  color: #14110F !important;
  border-color: #F0ECE6;
}

#nav.over-dark .nav-cta:hover {
  background: #FFF;
  border-color: #FFF;
  color: #000 !important;
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  height: 60px;
  /* Logo left, menu hard right — flex rather than a 3-column grid so the
     links sit at the edge instead of being centred by a trailing column. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav-logo-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding-top: 6px;
}

/* The wordmark PNG is white letterforms on transparency, which would vanish
   on the cream themes. Used as a mask instead, so it's painted in the
   current theme's text colour and adapts everywhere. */
.logo-mark {
  display: block;
  background-color: currentColor;
  -webkit-mask: url('images/Logo_Asymmetry_V3.png') left center / contain no-repeat;
          mask: url('images/Logo_Asymmetry_V3.png') left center / contain no-repeat;
}

.nav-logo {
  color: var(--text);
  width: 132px;   /* wordmark is 5.48:1 */
  height: 24px;
}

.nav-location {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  color: var(--text-3);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-2);
  transition: color .2s;
}

.nav-links a:hover { color: var(--text); }

/* Solid black pill. On the dark theme (and over dark sections) it inverts to
   light, since black-on-black would disappear — see the overrides below. */
.nav-cta {
  font-family: var(--f-mono);
  font-size: .7rem !important;
  letter-spacing: .1em !important;
  background: #14110F;
  color: #F5F1EB !important;
  border: 1px solid #14110F;
  padding: 8px 16px;
  transition: background .2s, color .2s, border-color .2s !important;
}

.nav-cta:hover {
  background: #000;
  border-color: #000;
  color: #FFF !important;
}

/* Minimal Brutal runs on a near-black page — flip the pill so it reads */
html:not([data-theme]) .nav-cta {
  background: #F0ECE6;
  color: #14110F !important;
  border-color: #F0ECE6;
}

html:not([data-theme]) .nav-cta:hover {
  background: #FFF;
  border-color: #FFF;
  color: #000 !important;
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  justify-self: end;
  cursor: pointer;
  padding: 4px;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

/* Open state: the two rules meet in the middle and cross into a close X.
   3px is half the 5px gap plus the 1px rule, i.e. each span's offset from the
   button's centre line — keep them in step if the gap changes. */
#nav.nav-open .nav-burger span:first-child { transform: translateY(3px) rotate(45deg); }
#nav.nav-open .nav-burger span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ─────────────────────────────────────────────────────────────────
   SECTION 01 · HERO
   ───────────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px 0 80px; /* horizontal padding lives on hero-inner */
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ── Horizontal row line above headline ── */
.hero-row-line {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter); /* matches nav-inner — guarantees left-edge alignment */
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

/* Headline + vertical nav side by side */
.hero-top {
  padding-top: clamp(12px, 2vh, 24px);
}

.hero-headline {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 80px);
  line-height: .96;
  letter-spacing: -.03em;
  text-align: center;
}

.hero-headline .line {
  display: block;
}

.hero-headline .serif-italic {
  font-weight: 300;
  font-size: clamp(36px, 5.6vw, 90px);
  letter-spacing: -.025em;
}

/* Vertical nav list */
.hero-nav-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 6px;
}

.hero-nav-list a {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-2);
  text-align: right;
  transition: color .2s;
  padding: 4px 0;
}

.hero-nav-list a:hover { color: var(--text); }

.hero-nav-cta {
  margin-top: 12px;
  border: 1px solid var(--border-hard) !important;
  padding: 8px 14px !important;
  color: var(--text) !important;
  transition: background .2s, color .2s !important;
}

.hero-nav-cta:hover {
  background: var(--text) !important;
  color: var(--bg) !important;
}

.hero-sub-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}

.hero-sub {
  max-width: 56ch;
  margin: 80px auto 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(10px, .7vw, 12px);
  color: var(--text-2);
  line-height: 1.65;
  text-align: center;
}

.hl-blue {
  color: #1E1EFF;
  font-weight: 500;
}

/* The "and" between the two highlighted sectors — same weight, ink */
.hl-ink {
  color: var(--text);
  font-weight: 500;
}

.hero-stat-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(165,145,118,.05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.stat {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: transparent;
}

.stat:last-child { border-right: none; }

.stat-n {
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.stat-l {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--text-3);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: .4;
}

.hero-scroll-hint .mono { font-size: .6rem; letter-spacing: .18em; }

.scroll-line {
  width: 1px;
  height: 40px;
  background: var(--text-2);
  animation: scrollPulse 2s var(--ease) infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION 02 · THESIS
   ───────────────────────────────────────────────────────────────── */
#thesis {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.thesis-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 10vh, 140px) clamp(20px, 4vw, 64px) 0;
}

.thesis-tag { margin-bottom: 48px; }

.thesis-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: clamp(60px, 10vh, 120px);
  border-bottom: 1px solid var(--border);
}

.thesis-statement h2 {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.thesis-statement h2 em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
}

.thesis-detail { padding-top: 8px; }

.thesis-detail > p {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 48px;
}

.thesis-pillars {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.thesis-pillars li {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.pillar-n {
  color: var(--text-3);
  font-size: .65rem;
  padding-top: 3px;
  grid-row: 1 / 3;
}

.pillar-t {
  font-weight: 300;
  font-size: .92rem;
  letter-spacing: -.01em;
  color: var(--text);
}

.pillar-d {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Marquee */
.thesis-marquee {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  gap: 40px;
  animation: marquee 22s linear infinite;
}

.marquee-track span {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--text-3);
}

.marquee-track .sep { color: var(--text-3); }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION 03 · INDUSTRIES (PARALLAX)
   ───────────────────────────────────────────────────────────────── */
#industries {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* Tall section = scrub track; the sticky accordion pins while scroll
     progress drives the panel slide (see accScrub in script.js) */
  position: relative;
  height: 260vh;
}

.section-title {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 64px);
  letter-spacing: -.03em;
  line-height: 1;
}

.section-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
  transition: opacity .2s;
}
.section-title a:hover { opacity: .65; }

#contact-form { scroll-margin-top: 80px; }

/* ── Horizontal Accordion ── */
.accordion {
  position: sticky;
  top: calc((100svh - 68vh) / 2);
  display: flex;
  flex-direction: row;
  height: 68vh;
  overflow: hidden;
}

.acc-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;
  color: rgba(255,255,255,.45);
  pointer-events: none;
}

.acc-item {
  position: relative;
  isolation: isolate; /* own stacking context — prevents z-index leaking between items */
  flex: 0 0 72px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis .55s var(--ease);
  background-size: cover;
  background-position: center;
}

.acc-item:last-child { border-right: none; }

/* Dark overlay — heavier when collapsed, lifted when open */
.acc-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,.82);
  transition: background .55s var(--ease);
  z-index: 1;
  pointer-events: none; /* never intercepts clicks */
}

.acc-item.open::before {
  background: rgba(8,8,8,.55);
}

.acc-item.open {
  flex: 1 1 0;
  cursor: default;
}

/* Always-visible vertical strip */
.acc-strip {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 28px 0;
  gap: 16px;
  z-index: 2;
}

.acc-n {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--text-3);
}

.acc-v-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
  transition: opacity .25s;
}

.acc-item.open .acc-v-title { opacity: 0; }

/* Expanded content */
.acc-expanded {
  position: absolute;
  inset: 0;
  left: 72px;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .3s;
}

.acc-item.open .acc-expanded {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .35s .2s;
}

.acc-inner { max-width: 480px; }

/* Split layout for deep-dive panels: narrative + workflow tags */
.acc-inner--split {
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}

.acc-inner--split .acc-copy p { margin-bottom: 16px; }
.acc-inner--split .acc-copy p:last-child { margin-bottom: 0; }

.acc-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 4px;
}

@media (max-width: 900px) {
  .acc-inner--split { grid-template-columns: 1fr; align-items: start; }
  .acc-side { display: none; }
}

.acc-title {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 16px;
}

.acc-inner p {
  font-size: clamp(12px, .9vw, 14px);
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 24px;
}

.panel-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-tags li {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: 5px 10px;
  transition: border-color .2s, color .2s;
}

.panel-tags li:hover {
  border-color: var(--border-hard);
  color: var(--text-2);
}

/* ─────────────────────────────────────────────────────────────────
   SECTION 04 · CASE STUDIES
   ───────────────────────────────────────────────────────────────── */
#work {
  border-bottom: 1px solid #e0ddd8;
  padding-bottom: clamp(60px, 10vh, 120px);
  background: #f8f5f0;
  color: #1a1614;
}

/* Light overrides for work section */
#work .work-header .label { color: #a8998e; }
#work .section-title { color: #1a1614; }

#work .work-grid { background: #e0ddd8; border-color: #e0ddd8; }

#work .case-card { background: #f8f5f0; }
#work .case-card:hover { background: #f0ece6; }

#work .case-img { background: #e8e3dc; }
#work .case-img::before { background: #f8f5f0; color: #a8998e; border-color: #d8d4ce; }
#work .case-img::after {
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.015) 3px, rgba(0,0,0,.015) 4px
  );
}

#work .case-tag { color: #a8998e; }
#work .case-meta h3 { color: #1a1614; }
#work .case-meta p { color: #6b5e56; }
#work .case-link { color: #a8998e; border-top-color: #e0ddd8; }
#work .case-link:hover { color: #1a1614; }

.work-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(80px, 12vh, 160px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work-grid-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.case-card {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: background .3s;
}

.case-card:hover { background: var(--bg-raised); }

.case-card--large {
  grid-column: span 3;
  grid-row: span 2;
}

.case-card:not(.case-card--large) {
  grid-column: span 3;
}

.case-img-wrap {
  overflow: hidden;
  aspect-ratio: 16/9;
}

.case-card--large .case-img-wrap {
  aspect-ratio: 4/3;
  flex: 1;
}

.case-img {
  width: 100%;
  height: 100%;
  background: var(--bg-raised-2);
  position: relative;
  transition: transform .6s var(--ease);
}

.case-img::before {
  content: attr(data-label);
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: 4px 10px;
  background: var(--bg);
}

/* Grid noise texture on case imgs */
.case-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,.012) 3px,
      rgba(255,255,255,.012) 4px
    );
}

.case-card:hover .case-img { transform: scale(1.03); }

.case-meta {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-tag {
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--text-3);
}

.case-meta h3 {
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
}

.case-card--large .case-meta h3 {
  font-size: clamp(18px, 1.8vw, 26px);
}

.case-meta p {
  font-size: clamp(12px, .85vw, 14px);
  color: var(--text-2);
  line-height: 1.7;
}

.case-link {
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--text-3);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  transition: color .2s;
  width: fit-content;
}

.case-link:hover { color: var(--text); }

/* ── Impact cards — text-only variant of case cards ── */
.impact-card { grid-column: span 3 !important; grid-row: span 1 !important; }

.impact-card .case-meta {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
  gap: 16px;
  height: 100%;
}

.impact-card .case-meta h3 {
  font-size: clamp(18px, 1.7vw, 26px);
  max-width: 22ch;
}

.impact-card .case-meta p {
  max-width: 58ch;
  margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────────── */
#faq {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 64px) 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Two columns: Asymmetry (7 questions) fills the left, the two sector groups
   stack in the right. The groups are 7/3/2, so one-group-per-column would
   strand the HR column with two items and a screen of dead space under it —
   7 against 5 balances, and measures shorter than three columns did (891px
   vs 959px at 1440x900, against 1604px stacked). Collapses below 900px. */
.faq-list {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 64px) clamp(80px, 12vh, 160px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: 48px;
  align-items: start;
}

/* Grouped by audience (Asymmetry / Insurance brokerage / HR services) so 12
   questions stay scannable. Purely a reading aid: the FAQPage schema is a
   flat list, and grouping has no bearing on it. */
.faq-group:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.faq-group:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.faq-group:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

@media (max-width: 900px) {
  /* Single column — grid-area auto lets the groups flow in DOM order, and
     row-gap already spaces them, so no flow margin needs restoring. */
  .faq-list { grid-template-columns: 1fr; }
  .faq-group:nth-child(1),
  .faq-group:nth-child(2),
  .faq-group:nth-child(3) { grid-area: auto; }
}

.faq-group-title {
  display: block;
  margin-bottom: 16px;
  font-weight: 400;
}

/* Tighter than the page's other body rhythm on purpose: 12 collapsed rows
   read as a reference list to scan, not prose to read through, and the
   section is already the longest on the page. */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
/* of-type, not first-child: the group heading is the section's first child,
   so this has to match the first <details> within each group instead. */
.faq-item:first-of-type { border-top: 1px solid var(--border); }

.faq-item summary {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-right: 26px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary h4 {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 17px);
  margin: 0;
}

/* A hairline plus that flips to a minus on [open] — mirrors the burger's own
   open-state cross so the two disclosure affordances read as one system.
   Deliberately not transitioned: animating this transform races Chrome's own
   open/close animation on <details> and the icon gets stuck mid-flip,
   reproducible even via a plain user click. An instant flip sidesteps it. */
.faq-item summary::before,
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 0;
  background: var(--text-2);
}
/* Both bars share a center, not a top edge — the horizontal bar's `top` sits
   6px (half the vertical bar's 13px height) below the vertical bar's `top`,
   so their midpoints coincide instead of the vertical bar's top edge lining
   up with the horizontal bar, which reads as a "T" rather than a "+". */
.faq-item summary::before { top: calc(.55em + 6px); width: 13px; height: 1px; }
.faq-item summary::after  { top: .55em; width: 1px; height: 13px; right: 6px; }
.faq-item[open] summary::after { transform: scaleY(0); }

.faq-item p {
  max-width: 68ch;
  color: var(--text-2);
  font-size: 15px;
  margin: 12px 0 0;
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────────
   SECTION 06 · TEAM + CONTACT
   ───────────────────────────────────────────────────────────────── */
#team {
  border-bottom: 1px solid var(--border);
}

.team-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(100px, 18vh, 220px) clamp(20px, 4vw, 64px) clamp(80px, 12vh, 160px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* ── Who we are ── */
.who-lead {
  max-width: 780px;
  font-size: clamp(16px, 1.35vw, 21px);
  color: var(--text-2);
  line-height: 1.75;
}

/* ── Client quote — its own full-width tonal band ── */
.quote-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: clamp(80px, 14vh, 160px) clamp(20px, 4vw, 64px);
}

.who-quote {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 0 clamp(48px, 6vw, 96px);
}

.who-quote::before {
  content: '\201C';
  position: absolute;
  left: -.04em;
  top: -.28em;
  font-family: var(--f-display);
  font-size: clamp(120px, 14vw, 220px);
  line-height: 1;
  color: #0D0DD6;
}

.who-quote blockquote {
  font-size: clamp(21px, 2vw, 32px);
  font-weight: 300;
  letter-spacing: -.015em;
  line-height: 1.38;
  color: var(--text);
  text-wrap: pretty;
}

.who-quote figcaption {
  margin-top: clamp(22px, 3vh, 32px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.who-quote-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-raised-2);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 8px,
    rgba(255,255,255,.05) 8px, rgba(255,255,255,.05) 9px
  );
  border: 1px solid var(--border);
}

.who-quote-img--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.who-quote-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.who-quote-name {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--text-2);
}

.who-quote-role {
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-3);
}

/* Hairline rules instead of a boxed grid — the same three columns read as
   more open when the borders don't enclose them. */
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 72px);
  margin-top: clamp(48px, 8vh, 104px);
}

.who-item {
  padding: 28px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.who-n {
  color: var(--text-3);
  font-size: .65rem;
}

.who-item h3 {
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.who-item p {
  font-size: .92rem;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.8;
}

.team-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.team-member {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: background .3s;
}

.team-member:hover { background: var(--bg-raised); }

.member-img {
  aspect-ratio: 3/4;
  background: var(--bg-raised-2);
  position: relative;
  overflow: hidden;
}

.member-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 50%,
    rgba(8,8,8,.8) 100%
  );
}

/* Placeholder pattern for member imgs */
.member-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(255,255,255,.02) 20px,
      rgba(255,255,255,.02) 21px
    );
}

.member-meta {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-meta h4 {
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: -.02em;
}

.member-meta .mono {
  color: var(--text-3);
  font-size: .65rem;
  letter-spacing: .1em;
}

.member-meta p {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-top: 4px;
}

/* CONTACT */
.contact-team {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.contact-member {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.contact-member:last-child {
  border-bottom: 1px solid var(--border);
}

.contact-member-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-raised-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.contact-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-member-name {
  font-family: var(--f-sans);
  font-size: .95rem;
  color: var(--text);
  font-weight: 500;
}

.contact-member-role {
  color: var(--text-2);
  font-size: .68rem;
  letter-spacing: .1em;
}

.contact-member-email {
  font-size: .82rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  width: fit-content;
  margin-top: 4px;
  transition: border-color .2s;
}

.contact-member-email:hover {
  border-color: var(--text);
}

.contact-block {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 180px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}

/* The contact block, FAQ and footer run dark in every theme — re-scoping the
   theme vars here flips text, borders, inputs and the submit button in one
   place. All three are adjacent (FAQ sits right before the footer), so
   together they read as one dark band closing out the page; each section's
   own border divides it from the next. */
.contact-block,
#faq,
#footer {
  --bg:           #080808;
  --bg-raised:    #101010;
  --bg-raised-2:  #1A1A1A;
  --border:       rgba(255,255,255,.10);
  --border-hard:  rgba(255,255,255,.24);
  --text:         #F0ECE6;
  --text-2:       #9A9690;
  /* Lifted from #6E6963: tertiary text here is the footer links, member
     roles and form placeholders — all small, and 3.7:1 missed WCAG AA. */
  --text-3:       #8A857F;
  background: #080808;
  color: var(--text);
}

/* Contact sits on artwork, under a scrim that holds the text legible.
   Two layers rather than one so the scrim can be tuned without touching
   the image, and #080808 stays the fallback if the asset is missing. */
.contact-block {
  position: relative;
  isolation: isolate;
}

.contact-block::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('images/ContactBG.png') center / cover no-repeat;
}

.contact-block::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6,6,14,.68);
}

.contact-left h2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(10px, .7vw, 12px);
  letter-spacing: -.03em;
  line-height: 1.65;
  margin-bottom: 48px;
}

.contact-left h2 em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

.contact-info > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-info a {
  font-size: .92rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  width: fit-content;
  transition: border-color .2s;
}

.contact-info a:hover { border-color: var(--text); }

.contact-locations .mono {
  color: var(--text-3);
  font-size: .68rem;
  letter-spacing: .14em;
}

/* FORM */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form input,
.contact-form textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: .88rem;
  padding: 14px 16px;
  outline: none;
  resize: none;
  transition: border-color .2s;
  -webkit-appearance: none;
  border-radius: 0;
}

/* The text-field skin above (appearance:none, painted box) applies to
   every input — but an appearance-less checkbox has no box and no
   checkmark to paint, so it vanishes. Give checkboxes/radios their
   native rendering back; the theme's accent-color does the tinting. */
.contact-form input[type="checkbox"],
.contact-form input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  background: none;
  border: none;
  padding: 0;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-3);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--border-hard);
}

.btn-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 18px 24px;
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  margin-top: 8px;
  transition: background .2s, transform .15s;
}

.btn-submit:hover { background: #fff; }
.btn-submit:active { transform: scale(.98); }

.btn-arrow {
  font-size: 1.1rem;
  transition: transform .2s;
}

.btn-submit:hover .btn-arrow { transform: translateX(4px); }

/* ── HubSpot form: match existing contact-form design ── */
.contact-form--hubspot .hs-form,
.contact-form--hubspot form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form--hubspot .hs-form fieldset {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-form--hubspot .hs-form fieldset.form-columns-2 {
  grid-template-columns: 1fr 1fr;
}

.contact-form--hubspot .hs-form fieldset .hs-form-field {
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

.contact-form--hubspot .hs-form fieldset .input {
  margin-right: 0 !important;
}

.contact-form--hubspot .hs-form-field > label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--text-3);
}

.contact-form--hubspot .hs-form-field > label .hs-form-required {
  color: var(--text-2);
  margin-left: 2px;
}

.contact-form--hubspot .hs-field-desc {
  color: var(--text-3);
  font-family: var(--f-mono);
  font-size: .65rem;
  margin: 4px 0 0;
}

.contact-form--hubspot .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important;
  box-sizing: border-box;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: .88rem;
  padding: 14px 16px;
  outline: none;
  resize: none;
  transition: border-color .2s;
  -webkit-appearance: none;
  border-radius: 0;
}

.contact-form--hubspot input[type="checkbox"].hs-input,
.contact-form--hubspot input[type="radio"].hs-input {
  width: 14px !important;
  height: 14px;
  flex-shrink: 0;
  margin: 3px 10px 0 0;
  padding: 0;
  accent-color: var(--text);
  vertical-align: top;
}

.contact-form--hubspot textarea.hs-input {
  min-height: 120px;
}

.contact-form--hubspot .hs-input::placeholder {
  color: var(--text-3);
}

.contact-form--hubspot .hs-input:focus {
  border-color: var(--border-hard);
}

.contact-form--hubspot select.hs-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.contact-form--hubspot .hs-input.invalid,
.contact-form--hubspot .hs-input.error {
  border-color: #b8443a;
}

.contact-form--hubspot .hs-error-msgs,
.contact-form--hubspot .hs-error-msg,
.contact-form--hubspot ul.hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  color: #d17870;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .06em;
}

.contact-form--hubspot .inputs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form--hubspot .hs-form-checkbox,
.contact-form--hubspot .hs-form-booleancheckbox,
.contact-form--hubspot .hs-form-radio {
  display: block;
  margin: 4px 0;
}

.contact-form--hubspot .hs-form-checkbox-display,
.contact-form--hubspot .hs-form-booleancheckbox-display,
.contact-form--hubspot .hs-form-radio-display,
.contact-form--hubspot .hs-form-checkbox label,
.contact-form--hubspot .hs-form-booleancheckbox label,
.contact-form--hubspot .hs-form-radio label {
  display: flex !important;
  /* .contact-form label stacks text-field labels into a column — a
     checkbox label is box-beside-text, so put the row back */
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-2);
  font-family: var(--f-sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  line-height: 1.5;
  cursor: pointer;
}

.contact-form--hubspot .hs-form-booleancheckbox-display > span,
.contact-form--hubspot .hs-form-checkbox-display > span {
  flex: 1;
  /* HubSpot's own stylesheet indents the span 20px for its stacked
     layout; the flex gap already spaces the row (!important — their
     sheet loads after this one) */
  margin-left: 0 !important;
}

/* Hide the empty field-group label HubSpot injects above the legal-consent
   checkbox — otherwise it renders as a bare input-shaped box. */
.contact-form--hubspot .hs-legal-consent > label:empty,
.contact-form--hubspot .hs-form-field.legal-consent-container > label:empty,
.contact-form--hubspot .legal-consent-container > label:empty,
.contact-form--hubspot label:empty {
  display: none !important;
}

.contact-form--hubspot .legal-consent-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form--hubspot .legal-consent-container .hs-richtext {
  order: 2;
  font-size: .75rem;
  color: var(--text-3);
}

.contact-form--hubspot .legal-consent-container .hs-dependent-field,
.contact-form--hubspot .legal-consent-container > div > .hs-form-booleancheckbox,
.contact-form--hubspot .legal-consent-container .hs-form-booleancheckbox {
  order: 1;
}

.contact-form--hubspot .hs-richtext,
.contact-form--hubspot .hs-richtext p {
  color: var(--text-2);
  font-family: var(--f-sans);
  font-size: .82rem;
  line-height: 1.5;
}

.contact-form--hubspot .hs-richtext a {
  color: var(--text);
  border-bottom: 1px solid var(--border-hard);
}

.contact-form--hubspot .hs-submit {
  margin-top: 8px;
}

.contact-form--hubspot .hs-button,
.contact-form--hubspot input[type="submit"].hs-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 18px 24px;
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .2s, transform .15s;
  -webkit-appearance: none;
  border-radius: 0;
}

.contact-form--hubspot .hs-button:hover { background: #fff; }
.contact-form--hubspot .hs-button:active { transform: scale(.98); }

.contact-form--hubspot .submitted-message {
  color: var(--text);
  font-family: var(--f-sans);
  font-size: .95rem;
  line-height: 1.5;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
}

@media (max-width: 720px) {
  .contact-form--hubspot .hs-form fieldset.form-columns-2 {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
#footer {
  padding: 24px clamp(20px, 4vw, 64px);
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text-2);
}

.footer-logo .logo-mark {
  width: 110px;
  height: 20px;
  flex-shrink: 0;
}

.footer-copy {
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--text-3);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--text-3);
  transition: color .2s;
}

.footer-links a:hover { color: var(--text-2); }

/* ─────────────────────────────────────────────────────────────────
   SCROLL REVEAL ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-sub-row { grid-template-columns: 1fr; }
  .hero-stat-block { grid-template-columns: repeat(3, 1fr); }
  .thesis-body { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .case-card--large { grid-column: span 2; grid-row: span 1; }
  .case-card:not(.case-card--large) { grid-column: span 1; }
  .impact-card { grid-column: span 1 !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: 1fr; }
  .contact-block { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }

  .hero-top { padding-left: 20px; padding-right: 20px; }
  .hero-headline { font-size: clamp(40px, 11vw, 80px); }
  .hero-headline .serif-italic { font-size: clamp(46px, 12vw, 88px); }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-stat-block { grid-template-columns: 1fr 1fr; }

  #industries { height: auto; }
  .accordion { position: static; height: auto; flex-direction: column; }
  .acc-item { flex: none !important; border-right: none; border-bottom: 1px solid var(--border); }
  .acc-item:last-child { border-bottom: none; }
  .acc-strip { position: relative; width: 100%; flex-direction: row; justify-content: flex-start; padding: 20px; gap: 12px; }
  .acc-v-title { writing-mode: horizontal-tb; transform: none; opacity: 1 !important; }
  .acc-expanded { position: relative; left: 0; inset: auto; padding: 0 20px 24px; opacity: 0; height: 0; overflow: hidden; }
  .acc-item.open .acc-expanded { opacity: 1; height: auto; }

  .work-grid { grid-template-columns: 1fr; }
  .case-card, .case-card--large { grid-column: span 1 !important; grid-row: span 1 !important; }

  .team-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .hero-stat-block { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────
   NAV MOBILE OPEN STATE
   ───────────────────────────────────────────────────────────────── */
/* A dropdown panel that sizes to its links — deliberately not `inset: 60px 0 0`.
   The bar's .scrolled / .over-dark states carry a backdrop-filter, which makes
   #nav the containing block for this fixed child, so `bottom` resolves against
   the 61px bar and collapses the panel to its own padding — that is what left
   the links sitting over the page with no background behind them. Height comes
   from the content instead, so no ancestor can shrink it. `top`/`left`/`right`
   are safe either way, since #nav is itself pinned to the viewport edges.
   max-height is only a guard for short landscape viewports. */
#nav.nav-open .nav-links {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  background: var(--bg);
  padding: 40px clamp(20px, 4vw, 64px);
  gap: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  z-index: 99;
}

#nav.nav-open .nav-links a { font-size: 1.1rem; }

/* The open drawer always paints the cream panel, so its ink must stay dark
   even while the bar is .over-dark — that class tracks the section behind
   the strip, which the drawer is covering. */
#nav.nav-open .nav-links a:not(.nav-cta),
#nav.nav-open.over-dark .nav-links a:not(.nav-cta)       { color: var(--text-2); }
#nav.nav-open .nav-links a:not(.nav-cta):hover,
#nav.nav-open.over-dark .nav-links a:not(.nav-cta):hover { color: var(--text); }

#nav.nav-open .nav-links .nav-cta {
  background: #14110F;
  color: #F5F1EB !important;
  border-color: #14110F;
}

/* ─────────────────────────────────────────────────────────────────
   COOKIE CONSENT
   Rendered by tracking.js, and only when no choice is stored yet, so
   returning visitors never see a flash of banner. Sits above the nav
   (z-index 100) and its mobile drawer (99).
   ───────────────────────────────────────────────────────────────── */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 18px clamp(20px, 4vw, 64px);
  background: var(--bg);
  border-top: 1px solid var(--border-hard);
}

.consent-copy {
  flex: 1;
  margin: 0;
  font-family: var(--f-sans);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text-2);
}

.consent-copy a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Both choices carry the same visual weight on purpose — a louder Accept than
   Decline is exactly the dark pattern the GDPR guidance singles out. */
.consent-btn {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  padding: 11px 22px;
  background: none;
  color: var(--text);
  border: 1px solid var(--border-hard);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.consent-btn:hover,
.consent-btn:focus-visible {
  background: var(--text);
  color: var(--bg);
}

@media (max-width: 768px) {
  .consent { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
  .consent-btn { flex: 1; }
}