/* NukuBafaan site styles.
   Every colour and every type value comes from tokens.css. Nothing is
   hardcoded here. If a value is missing, add a token, do not inline it. */

/* woff2, subset to latin. All four stay declared so Regular and Medium are one
   font-weight away if later copy needs them, but only the two weights actually
   used get fetched: see the body font-weight note below. */
@font-face {
  font-family: "Acens";
  src: url("../assets/fonts/acens.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  /* Light is the only Poppins weight the design actually sets. Defaulting the
     document to it stops the browser fetching Regular purely to typeset the
     whitespace text nodes at the inherited weight of 400. */
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.page { position: relative; overflow-x: clip; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Anchor targets clear the shrunk nav plus a little air. */
[id] { scroll-margin-top: calc(var(--nav-h-small) + 16px); }

/* ---------- shared type ---------- */

.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  margin: 0;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--ink); text-wrap: balance; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--orange); }

.accent { color: var(--orange); }
.on-ink { color: var(--ink); }

.label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--orange);
  margin: 0 0 12px;
}

.body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
}

.quill { display: block; margin: 18px 0 0; }

/* ---------- buttons ---------- */

.btn-solid,
.btn-outline {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-btn);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: pointer;
}

.btn-solid {
  background: var(--orange);
  color: var(--white);
  border: none;
  font-size: var(--fs-btn);
  padding: 15px 34px;
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.btn-solid:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }

.btn-outline {
  border: 1.4px solid var(--white);
  color: var(--white);
  background: none;
  font-size: var(--fs-btn-outline);
  padding: 14px 32px;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.btn-outline:hover { background: var(--white); color: var(--orange); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height var(--dur-nav) ease, background var(--dur-nav) ease, backdrop-filter var(--dur-nav) ease;
}
.nav.is-small {
  height: var(--nav-h-small);
  background: var(--nav-scrolled-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.nav .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
  transition: height var(--dur-nav) ease;
}
.nav.is-small .nav-logo img { height: var(--logo-h-small); }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px); }

.nav-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  color: var(--ink);
  transition: color var(--dur-hover) ease;
}
.nav-link:hover { color: var(--orange); }

.nav-cta {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  color: var(--orange);
  border: 1.4px solid var(--orange);
  border-radius: var(--radius-pill);
  padding: 11px 26px;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.nav-cta:hover { background: var(--orange); color: var(--white); }
/* On the contact page the pill is already solid. */
.nav-cta.is-current { background: var(--orange); color: var(--white); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.burger span { display: block; width: 26px; height: 2px; background: var(--ink); }
.burger span:nth-child(2) { width: 18px; background: var(--orange); }

/* ---------- mobile menu panel ---------- */

.menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: var(--white);
  border-left: 1px solid var(--hairline);
  z-index: 70;
  transform: translateX(100%);
  transition: transform var(--dur-menu) var(--ease-menu);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu.is-open { transform: translateX(0); }

.menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: var(--fs-menu-close);
  color: var(--ink);
  cursor: pointer;
  padding: 6px 4px;
  margin-bottom: 18px;
}

.menu a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-nav-panel);
  letter-spacing: var(--ls-nav);
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.menu a:last-child { color: var(--orange); border-bottom: none; }

/* ---------- scroll progress rail ---------- */

.rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.rail span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--rail-dot);
  background: transparent;
  transition: background var(--dur-card) ease, border-color var(--dur-card) ease;
}
.rail[data-dark] span { border-color: var(--rail-dot-dark); }
.rail span[data-on] { background: var(--orange); border-color: var(--orange); }
.rail[data-dark] span[data-on] { background: var(--white); border-color: var(--white); }

/* ---------- reveal motion ----------
   The armed state is added by JS, so with no JS everything paints visible. */

[data-reveal][data-armed] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-reveal) ease, transform var(--dur-reveal) var(--ease-reveal);
}
[data-reveal][data-armed].is-in { opacity: 1; transform: none; }

[data-wipe][data-armed] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-wipe) var(--ease-wipe);
}
[data-wipe][data-armed].is-in { transform: scaleX(1); }

@keyframes cue {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}

/* ---------- main ---------- */

main { padding-top: var(--nav-h); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(70px, 8vw, 110px);
}

.watermark {
  position: absolute;
  right: -11vw;
  top: 2vw;
  width: min(660px, 58vw);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.hero .wrap { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr .95fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}

.hero-kicker {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-label);
  color: var(--body);
  margin: 26px 0 0;
}

.hero-side { padding-top: clamp(10px, 3vw, 42px); }

.hero-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  font-size: var(--fs-hero-h2);
  line-height: var(--lh-hero-h2);
  color: var(--ink);
  margin: 0;
}

.hero-side .btn-solid { margin-top: 24px; }

.cue { margin-top: clamp(40px, 6vw, 84px); display: flex; align-items: center; gap: 14px; }
.cue-rail {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  background: var(--hairline);
  overflow: hidden;
}
.cue-dot {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 12px;
  background: var(--orange);
  animation: cue 2.1s ease-in-out infinite;
}
.cue-word {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-cue);
  letter-spacing: var(--ls-label);
  color: var(--muted);
}

/* ---------- welcome band ---------- */

.band {
  position: relative;
  overflow: hidden;
  margin-top: -2vw;
  clip-path: polygon(0 var(--band-slope), 100% 0, 100% calc(100% - var(--band-slope)), 0 100%);
  padding: clamp(120px, 14vw, 190px) 0 clamp(130px, 15vw, 200px);
}
/* The orange sits on its own child so it can wipe in inside the clip. */
.band-fill, .cta-fill { position: absolute; inset: 0; background: var(--orange-body-bg); }
.band .wrap, .cta .wrap { position: relative; }

.split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.lockup { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lockup img { width: min(210px, 52vw); display: block; }
.lockup-word {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--lh-lockup);
  font-size: var(--fs-lockup);
  letter-spacing: var(--ls-name);
  margin-top: 18px;
}
.lockup-word .nuku { color: var(--white); }
.lockup-word .bafaan { color: var(--ink); }
.lockup-sub {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-lockup);
  color: var(--white);
  margin-top: 12px;
}

.band .h2 { color: var(--white); }
.band .body { color: var(--white); max-width: 56ch; margin: 26px 0 0; }
.band .body + .body { margin: 18px 0 0; }
.band .btn-outline { margin-top: 30px; }

/* ---------- services ---------- */

.services { padding: clamp(70px, 8vw, 110px) 0 clamp(60px, 7vw, 96px); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.8vw, 26px);
  margin-top: clamp(34px, 4vw, 52px);
}

.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 30px 28px 34px;
  background: var(--white);
  transition: border-color var(--dur-card) ease, transform var(--dur-card) ease, box-shadow var(--dur-card) ease;
}
.card h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  font-size: var(--fs-card-title);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-card-title);
  color: var(--orange);
  margin: 0;
}
.card-rule {
  display: block;
  height: 2px;
  width: 34px;
  background: var(--orange);
  margin: 14px 0 16px;
  transition: width var(--dur-card) ease;
}
.card:hover { border-color: var(--orange); transform: translateY(-6px); box-shadow: var(--shadow-card); }
.card:hover .card-rule { width: 64px; }

/* ---------- brand bible ---------- */

/* Full bleed --ink ground, white type, orange accents and solid orange number
   chips. Option B of the stage 1 art direction gate, approved by Ben. The
   site's first charcoal surface. White on --ink is 14.46:1, so every size in
   here clears AA. */

.bb {
  background: var(--ink);
  padding: clamp(70px, 8vw, 110px) 0 clamp(76px, 8vw, 110px);
}

.bb .h2   { color: var(--white); }
.bb .body { color: var(--white); }

.bb-block + .bb-block { margin-top: clamp(56px, 6.5vw, 92px); }

.bb-sub { max-width: 62ch; margin: 20px 0 0; }

/* Block 1, the problem. Four cards with orange number chips. The card keeps
   its shape from the services block and swaps its two surface colours for the
   ones that read on ink. */
.bb-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 1.8vw, 26px);
  margin-top: clamp(34px, 4vw, 52px);
}

.bb .card {
  background: none;
  border-color: var(--hairline-on-ink);
}
.bb .card h3 { color: var(--white); }
.bb .card:hover {
  border-color: var(--orange);
  box-shadow: none;
}

/* Numeral is --ink, not white. White on --orange is 3.13:1 and fails AA,
   --ink on --orange is 4.62:1 and passes. */
.bb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 16px;
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--radius-tile);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-numeral);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-tight);
}

/* Block 2, the ten sections. Same chip, smaller. */
.bb-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(24px, 3vw, 56px);
  margin-top: clamp(34px, 4vw, 52px);
}

.bb-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 20px 2px;
  border-top: 1px solid var(--hairline-on-ink);
}

.bb-row .bb-chip {
  width: 38px;
  height: 38px;
  margin: 0;
  font-size: var(--fs-card-title);
}

.bb-row h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-tight);
  color: var(--white);
  margin: 0 0 8px;
}

.bb-cta { margin-top: clamp(40px, 4.5vw, 60px); }

/* .btn-solid unchanged is wrong on this ground twice over: its white label sits
   at 3.13:1 on the orange, and its hover turns the button --ink, which vanishes
   into the section. This modifier swaps both and leaves .btn-solid alone for
   the hero and the other two pages. */
.btn-solid-ink { color: var(--ink); }
.btn-solid-ink:hover { background: var(--white); color: var(--ink); }

/* The global focus ring is solid --ink, which is this section's own background,
   so on the charcoal it disappears entirely. White is the only thing that reads
   here, at 14.46:1. Everywhere else on the site keeps the ink ring. */
.bb a:focus-visible { outline-color: var(--white); }

/* ---------- why we stand out ---------- */

.standout-sec { padding: clamp(60px, 7vw, 96px) 0; }
.standout-sec .h2 { text-align: center; }

.standout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(44px, 5vw, 70px);
}
.standout > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.standout p {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-standout);
  line-height: var(--lh-standout);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
  max-width: 14ch;
}
.standout p.wide { max-width: 16ch; }

/* ---------- client wall ---------- */

.clients { background: var(--wash); padding: clamp(64px, 7.5vw, 104px) 0; }
.clients .label { color: var(--orange-on-wash); text-align: center; }
.clients .h2 { text-align: center; }
/* The accent takes the same on-wash orange as the label above it. Plain
   --orange on --wash measures 2.86:1, under the 3:1 large text threshold. */
.clients .accent { color: var(--orange-on-wash); }

.wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: clamp(34px, 4vw, 50px);
}
.tile {
  background: var(--white);
  border-radius: var(--radius-tile);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-card) ease, box-shadow var(--dur-card) ease;
}
/* The shared 0 0 255 100 viewBox does the optical balancing. Do not cap by height. */
.tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.55;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity var(--dur-card) ease, filter var(--dur-card) ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-tile); }
.tile:hover img { opacity: 1; filter: none; }

.wall-note {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-field);
  color: var(--muted-on-wash);
  margin: 26px 0 0;
  text-align: center;
}

/* ---------- CTA strip ---------- */

.cta { position: relative; overflow: hidden; padding: clamp(44px, 5vw, 64px) 0; }

.cta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.cta .h2 {
  font-size: var(--fs-cta-h2);
  line-height: var(--lh-cta-h2);
  color: var(--white);
}
.cta .body { color: var(--white); margin: 10px 0 0; }
.cta .btn-outline { justify-self: start; }

/* ---------- statement ---------- */

.statement { padding: clamp(96px, 13vw, 190px) 0; text-align: center; }
.statement .h2 { font-size: var(--fs-statement); line-height: var(--lh-statement); }

/* ---------- who we are ---------- */

.about { padding: clamp(50px, 6vw, 86px) 0 clamp(70px, 8vw, 110px); }
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(36px, 4vw, 56px);
  align-items: start;
}
.about-split .body + .body { margin: 18px 0 0; }

/* ---------- team ---------- */

.team { padding: 0 0 clamp(80px, 9vw, 130px); overflow: hidden; }

.team-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 28px);
  /* top padding so the heads breaking above the discs are not clipped */
  padding: clamp(56px, 7vw, 92px) var(--gutter) 20px;
  margin: 0 auto;
  max-width: var(--maxw);
}
.team-card { scroll-snap-align: start; }
.team-disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
}
.team-disc img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 117%;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: var(--shadow-team);
}
.team-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-team-name);
  letter-spacing: var(--ls-name);
  color: var(--orange);
  margin: 26px 0 0;
  text-align: center;
}
.team-role {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-role);
  color: var(--ink);
  margin: 8px 0 0;
  text-align: center;
}

/* ---------- contact view ---------- */

.contact-main { position: relative; overflow: hidden; }
.contact-main .watermark { top: 8vw; width: min(620px, 56vw); }
.contact-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(80px, 9vw, 120px);
  position: relative;
}
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}
.contact-h1 { font-size: var(--fs-contact-h1); line-height: var(--lh-contact-h1); letter-spacing: normal; }
.contact-sub {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-label);
  color: var(--body);
  margin: 20px 0 0;
}

.form { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-cue);
  letter-spacing: var(--ls-field);
  color: var(--body);
  padding-left: 4px;
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-field);
  color: var(--ink);
  background: var(--white);
  border: 1.3px solid var(--orange);
  border-radius: var(--radius-field);
  padding: 16px 24px;
  transition: border-color var(--dur-hover) ease;
}
.field textarea { padding: 18px 24px; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--ink); }

::placeholder {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-role);
  font-size: var(--fs-placeholder);
  color: var(--placeholder);
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Validation. The error paragraph is hidden until the script fills it, so a
   no JS visitor gets native required validation and never sees empty space. */
.field-error {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-cue);
  letter-spacing: var(--ls-field);
  line-height: 1.5;
  color: var(--error);
  margin: 2px 0 0;
  padding-left: 4px;
}
.field-error[hidden] { display: none; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }

.form button { align-self: flex-start; margin-top: 8px; padding: 16px 38px; }

.contact-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: var(--lh-hero-h2);
  color: var(--ink);
  margin: 0;
}
.contact-addr {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-addr);
  letter-spacing: var(--ls-field);
  line-height: var(--lh-addr);
  color: var(--body);
  margin: 22px 0 0;
}

.map { position: relative; margin-top: 36px; }
/* solid orange block offset up and to the right, behind the map */
.map-block {
  position: absolute;
  right: -18px;
  top: -18px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  background: var(--orange);
  border-radius: var(--radius-map);
}
.map a { display: block; position: relative; }
.map img { display: block; width: 100%; height: auto; border-radius: var(--radius-map); }

/* ---------- thanks view ---------- */

.thanks-spacer { height: clamp(70px, 9vw, 130px); }
.thanks-band { background: var(--orange-body-bg); padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
.thanks-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  font-size: var(--fs-thanks-h1);
  line-height: var(--lh-thanks-h1);
  color: var(--white);
  margin: 0;
}
.thanks-band .body { color: var(--white); margin: 22px 0 0; }
.thanks-band .btn-outline { margin-top: 34px; padding: 14px 34px; }

/* ---------- legal view ---------- */

.legal-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(80px, 9vw, 120px);
}
.legal {
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
}
.legal-h1 { font-size: var(--fs-contact-h1); line-height: var(--lh-contact-h1); letter-spacing: normal; }
.legal .lede { margin-top: 24px; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  font-size: var(--fs-card-title);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-card-title);
  color: var(--ink);
  margin: 44px 0 12px;
}
.legal p { margin: 0 0 14px; }
.legal ol, .legal ul { margin: 0 0 14px; padding-left: 1.4em; }
.legal li { margin: 0 0 6px; }

/* ---------- footer ---------- */

.footer { background: var(--orange); padding: clamp(56px, 6.5vw, 90px) 0 0; }

.foot-grid {
  display: grid;
  grid-template-columns: .8fr 1.3fr .7fr;
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.foot-lockup { display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot-lockup img { width: 120px; display: block; }
.foot-lockup .lockup-word { font-size: var(--fs-footer-word); margin-top: 14px; }
.foot-lockup .lockup-sub { font-size: var(--fs-micro-sm); letter-spacing: var(--ls-lockup-sm); margin-top: 10px; }

.foot-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.foot-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-footer-name);
  letter-spacing: var(--ls-footer-name);
  color: var(--white);
  margin: 0;
}
.foot-role {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-field);
  color: var(--ink);
  margin: 6px 0 16px;
}
.foot-detail {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-footer-body);
  line-height: var(--lh-footer);
  color: var(--white);
  margin: 0;
}
.foot-detail a { color: var(--white); }
.foot-detail a:hover { color: var(--ink); }

.foot-addr {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-field);
  line-height: var(--lh-addr);
  color: var(--white);
  margin: 32px 0 0;
}

.foot-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.foot-links-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-role);
  color: var(--ink);
  margin: 0 0 6px;
}
.foot-links a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-btn);
  color: var(--white);
}
.foot-links a:hover { color: var(--ink); }

.socials { display: flex; gap: 12px; margin-top: 18px; }
.socials a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
  transition: opacity var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials img { width: 100%; height: 100%; display: block; }

.foot-bar {
  border-top: 1px solid var(--footer-hairline);
  margin-top: clamp(40px, 5vw, 64px);
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.foot-bar p {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-role);
  color: var(--white);
  margin: 0;
}
.foot-credit { color: var(--ink); }
.foot-credit a { color: var(--ink); }
.foot-credit a:hover { color: var(--white); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .rail { display: none; }
  .hero-grid,
  .split,
  .about-split,
  .contact-split { grid-template-columns: 1fr; }
  /* 15 logos divide exactly at 5 and at 3, and go ragged at 4 (4/4/4/3).
     Ben's call, 2026-07-30, overriding the handoff's "4 across below 900". */
  .wall { grid-template-columns: repeat(3, 1fr); }
  .team-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
  }
  .team-track::-webkit-scrollbar { display: none; }
  .team-card { flex: 0 0 64%; }
  .bb-cards { grid-template-columns: repeat(2, 1fr); }
  .bb-list  { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .cards,
  .bb-cards,
  .standout,
  .cta-row,
  .foot-grid,
  .foot-contacts { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(3, 1fr); }
  .team-card { flex: 0 0 78%; }
  .foot-links { align-items: flex-start; }
}

/* Nothing moves while it is being read. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-reveal][data-armed] { opacity: 1; transform: none; }
  [data-wipe][data-armed] { transform: none; }
}