/* hivebreed.com — UNKNOWN full replication (31 July 2026)
   Measured from weareunknown.io's shipped CSS:
   - Headlines: thin text-serif (their Kesslertext w100; stand-in = Newsreader var w200,
     license Kessler before launch), lh 0.74 display / 0.9 h1, ls -0.02em, sentence case
   - Scale: display up to ~270px, h1 ~120px desktop / 80 tablet / 48 mobile
   - Hairline dividers, sharp tiles, pill buttons, fixed light nav
   - Motion: Lenis smooth scroll + GSAP ScrollTrigger (self-hosted in /js)
   Owner palette swap: their #fff → grey #F2F0EB, their #131313 → ink #1A1A1A. NO PINK.
   Klarheit Kurrent = caps labels, nav, footer wordmark. Satoshi = running text (their Inter role). */

@font-face {
  font-family: "Klarheit Kurrent";
  src: url("/fonts/KlarheitKurrent-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Klarheit Kurrent";
  src: url("/fonts/KlarheitKurrent-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Klarheit Kurrent";
  src: url("/fonts/KlarheitKurrent-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --grey: #F2F0EB;       /* their white role */
  --ink: #1A1A1A;        /* their #131313 role */
  --deep: #111110;       /* SPLIT SYSTEM (owner 3 Aug): #111110 = dark surfaces (hero, menu, report cover, solid buttons); --ink #1A1A1A stays the text value */
  --paper: #F2F0EB;
  --mut-on-grey: #1A1A1A;   /* was #6B6862. Owner 24 Aug: no grey letters anywhere */
  --mut-on-ink: #F2F0EB;    /* was #999590 */
  --line-on-grey: #DAD6CE;   /* their #dbdcdd, warmed for the grey base */
  --line-on-ink: rgba(242, 240, 235, 0.16);
  --coral-text: #C2402E;     /* small coral TEXT on the light background; #FF6B57 is ~2.5:1 and fails contrast. Surfaces/large marks keep #FF6B57 */
  --pad-x: clamp(20px, 2.8vw, 40px);
  --max: 1600px;
  --serif: "Klarheit Kurrent", Arial, sans-serif; /* DECIDED 31 July: Klarheit = big-title voice, Satoshi = everything else (FAQ, floating CTA). Fraunces/Newsreader/Bitter kept in /fonts */
  --caps: "Klarheit Kurrent", Verdana, Arial, sans-serif;
  --body: "Satoshi", Inter, Arial, sans-serif; /* their Inter role */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img, svg { max-width: 100%; }
img { height: auto; }   /* width/height attrs are for CLS only; CSS decides the box */

html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
section[id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--grey);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;               /* their paragraph line-height */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: var(--grey); }
.hero-slide ::selection, .menu-overlay ::selection, .band--ink ::selection, .band--deep ::selection, .site-footer ::selection { background: var(--grey); color: var(--ink); }

/* film grain on every dark surface — material instead of flat pixels */
.hero-slide::after, .band--ink::after, .band--deep::after, .site-footer::after, .menu-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.05;
  pointer-events: none;
}
.hero-slide, .band--ink, .band--deep { position: relative; }
.hero-slide > .container, .band--ink > .container, .band--deep > .container { position: relative; z-index: 1; }
.site-footer .foot-inner, .menu-overlay > .container { position: relative; z-index: 1; }

/* ================= type roles ================= */
/* Serif headline voice — the UNKNOWN signature. Thin, tight, sentence case. */
.serif, .statement, .display {
  font-family: var(--serif);
  font-weight: 700; /* EXPERIMENT 3 Sep: titles in Klarheit Bold — revert to 400 to undo */
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.statement { font-size: var(--t-display); line-height: 0.95; }
.display   { font-size: var(--t-display); line-height: 0.9; }

/* No single-word last lines in running text (owner, 15 Sep). Headlines already
   use text-wrap: balance above; browsers without `pretty` support simply ignore it. */
p, li, blockquote, dd, figcaption { text-wrap: pretty; }

/* Caps label layer — Klarheit. */
.label, .eyebrow, .cap, .phase-name, .case .tag, .case dt, .person .role, .capture label {
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}
/* numbered section heads: index + label, full ink (owner: no muted section labels) */
.label { margin-bottom: clamp(36px, 5vw, 64px); }
.label-num { display: inline-block; margin-right: 20px; }

/* ================= buttons (squared, coral sweep on hover) ================= */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding: 15px 26px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: color 220ms ease, border-color 220ms ease, transform 220ms var(--ease-out);
}
/* the coral layer sweeps up from below the button on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FF6B57;
  transform: translateY(101%);
  transition: transform 340ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); color: var(--ink); border-color: #FF6B57; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--deep); color: var(--grey); }
.hero-slide .btn--solid, .band--ink .btn--solid, .band--deep .btn--solid { background: var(--paper); color: var(--deep); }
.hero-slide .btn--solid:hover, .band--ink .btn--solid:hover, .band--deep .btn--solid:hover { color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.hero-slide .btn--ghost { color: var(--paper); border-color: rgba(242, 240, 235, 0.5); }
.hero-slide .btn--ghost:hover { color: var(--ink); border-color: #FF6B57; }

/* ================= header (fixed, always transparent — content self-inverts) ================= */
/* logo at Motto scale (their site-head logo is 3rem = 30px tall), 4 Sep */
.wordmark svg { width: clamp(48px, 4.2vw, 61px); height: auto; }
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  color: #fff;
  mix-blend-mode: difference;
  background: transparent;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: currentColor; }
.wordmark svg { display: block; height: 18px; width: auto; }
.wordmark .name { font-family: var(--caps); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; }
.menu-btn {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: currentColor;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 2px;
  transition: opacity 150ms ease;
}
.menu-btn:hover { opacity: 0.6; }
html:not(.js) .menu-btn { display: none; }
/* legacy inline nav (privacy page) */
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.site-nav .btn { padding: 10px 18px; font-size: 13px; }

/* ================= menu overlay ================= */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--deep);
  color: var(--paper);
  overflow-y: auto;
}
.menu-overlay[hidden] { display: none; }
.menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: clamp(40px, 8vh, 90px);
}
.menu-mark { display: block; height: 18px; width: auto; color: var(--paper); }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.4vh, 16px); }
/* group dim: the link under the cursor stays full, siblings recede */
.menu-links a { transition: opacity 260ms ease; }
.menu-links:hover a:not(:hover) { opacity: 0.35; }
.menu-links a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 7.2vh, 84px);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  text-decoration: none;
  transition: opacity 200ms ease, transform 350ms var(--ease-out);
}
.menu-links a:hover { opacity: 0.55; transform: translateX(10px); }
.menu-links .menu-cta {
  margin-top: clamp(24px, 5vh, 48px);
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid var(--paper);
  border-radius: 0;
  padding: 15px 26px;
  line-height: 1;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.menu-links .menu-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FF6B57;
  transform: translateY(101%);
  transition: transform 340ms var(--ease-out);
}
.menu-links .menu-cta:hover { opacity: 1; transform: none; color: var(--ink); border-color: #FF6B57; }
.menu-links .menu-cta:hover::before { transform: translateY(0); }
html.menu-open { overflow: hidden; }

/* ================= 1 · hero — dark single statement (copy v2: the full sentence lands at once) ================= */
.hero { position: relative; }
.hero-slide {
  position: relative;
  display: flex;
  min-height: 80svh; /* 3 Sep 2026: sized so the timeline intro paragraph shows at the fold */
  background: var(--deep);
  color: var(--paper);
}
.hero-layout {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 700; /* EXPERIMENT 3 Sep: bold titles */
  font-size: var(--t-hero);
  letter-spacing: -0.02em;
  line-height: 0.92;
  font-variation-settings: "opsz" 144;
  width: 100%;
  margin-top: -8svh;
}
.hero-intro {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(28px, 5vh, 56px);
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--paper);
}
/* masked rise: each word climbs out of its own line (script.js staggers .ht-line) */
.ht-mask { display: block; overflow: hidden; }
.ht-line { display: block; }
/* the reframe, directly under the headline */
.hero-sub {
  font-size: var(--t-body);
  line-height: 1.45;
  max-width: 44ch;
  margin: 20px 0 0;
}
/* the concrete claim, one weight up so it lands as a promise, not a caption */
.hero-claim { font-weight: 500; font-size: 16px; margin-top: -10px; }
.actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .hero-layout { justify-content: flex-start; padding-top: 16svh; padding-bottom: 36px; }
  .hero-title { margin-top: 0; }
  .hero-intro { position: static; margin-top: 36px; }
}

/* hero inversion experiment (owner, 3 Sep 2026): grey ground, ink type — the page opens
   as one continuous light field down to the testimonials, closer to the UNKNOWN reference.
   REVERT = remove .hero--invert from the section tag; these rules then go dead. */
/* The hero staging (owner, 4-5 Sep): old-site treatment — Klarheit Bold caps, centered,
   one word per line, masked rise. ALL widths (mobile included, owner call 5 Sep);
   the ≤720 block later in the file adjusts paddings for phones. */
@media (min-width: 0px) {
  .hero--invert .hero-title {
    font-size: min(18vh, 13.5vw); /* maxed: headline + subtitle + claim + CTAs still hold one screen */
    white-space: nowrap;
    line-height: 0.95;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
  }
  /* headline starts two beats under the logo/Menu row; CTAs sit in flow beneath the
     letters instead of absolutely over them */
  .hero--invert .hero-layout { justify-content: flex-start; padding-top: clamp(88px, 10vh, 128px); padding-bottom: 20px; }
  .hero--invert .hero-sub { margin: 2vh auto 0; text-align: center; font-size: 14px; max-width: 52ch; }
  .hero--invert .hero-intro {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 2vh auto 0;
    align-items: center;
    text-align: center;
  }
  .hero--invert .hero-intro .actions { justify-content: center; }
}

/* hero opens on the blush the page closes on, melting into the grey — the same
   chained-gradient move as the bottom drift, run in reverse (owner, 4 Sep) */
.hero--invert .hero-slide { background: linear-gradient(180deg, #FEEFE3 0%, #FBEFE6 55%, #F2F0EB 100%); color: var(--ink); }
.hero--invert .hero-slide::after { opacity: 0; } /* grain is a dark-surface material */
.hero--invert .hero-slide .btn--solid { background: var(--deep); color: var(--paper); }
.hero--invert .hero-slide .btn--ghost { color: var(--ink); border-color: var(--ink); }
.hero--invert .hero-slide .btn--ghost:hover { color: var(--ink); border-color: #FF6B57; }

/* ================= 1b · ten-day timeline (Kalkbrenner-style scrubbed pan) =================
   The track is 4.75 columns wide (lead .5 + 1 + 1 + half .5 + 1 + tail .75) and pans left
   in script.js as the section passes. The Day ten→eleven column is half-width: one day
   passes there. Dots are sized to the letter (0.68 ratio, from the reference's own CSS)
   and each sits ON its day line via the -dot/2 translate. */
.tl {
  --tl-col: clamp(240px, 34vw, 520px);
  --tl-disp: clamp(44px, 8.5vw, 122px);
  --tl-dot: calc(var(--tl-disp) * 0.68);
  --tl-row: calc(var(--tl-disp) * 1.08);
  position: relative;
  overflow: clip;
  background: var(--grey);
  padding: clamp(56px, 8vw, 104px) 0 clamp(12px, 1.5vw, 24px);
}
.tl-mrule { display: none; }
.tl-track { position: relative; width: calc(var(--tl-col) * 4.75); will-change: transform; }
.tl-lines { position: absolute; inset: 0; display: flex; z-index: 1; }
.tl-col { flex: none; width: var(--tl-col); position: relative; border-left: 1px solid var(--ink); }
.tl-col.is-lead { width: calc(var(--tl-col) / 2); border-left: none; }
.tl-col.is-half { width: calc(var(--tl-col) / 2); }
.tl-col.is-tail { width: calc(var(--tl-col) * 0.75); }
.tl-col-label {
  position: absolute;
  top: -1.7em;
  left: 5px;
  font-family: var(--caps);
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.tl-rows { position: relative; z-index: 2; border-bottom: 1px solid var(--ink); }
.tl-row { position: relative; height: var(--tl-row); border-top: 1px solid var(--ink); }
.tl-el {
  position: absolute;
  top: 50%;
  transform: translate(calc(var(--tl-dot) / -2), -50%);
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  white-space: nowrap;
}
.tl-row:nth-child(1) .tl-el { left: calc(var(--tl-col) * 0.5); }
.tl-row:nth-child(2) .tl-el { left: calc(var(--tl-col) * 2.5); }
.tl-row:nth-child(3) .tl-el { left: calc(var(--tl-col) * 3.0); }
.tl-dot { flex: none; width: var(--tl-dot); aspect-ratio: 1; border-radius: 50%; background: var(--deep); }
.tl-el h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--tl-disp);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ================= 3 · the written answer (Kalkbrenner tour-table) =================
   Column proportions, tight row padding, single bold-caps type size and the full-bleed
   grain hover all lifted from the reference's shipped CSS. */
.wa { overflow-x: clip; }
.wa .statement { margin-bottom: clamp(48px, 7vw, 96px); }
.wa-table span { font-family: var(--serif); font-weight: 700; font-size: clamp(12px, 0.95vw, 14px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.wa-num { color: var(--ink); }
.wa-row { display: flex; align-items: center; }
.wa-col { flex: 1; padding-right: 16px; box-sizing: border-box; }
.wa-col3 { flex: 3; }
.wa-col:last-child { padding-right: 0; }
.wa-end { display: flex; justify-content: flex-end; align-items: center; }
.wa-headrow { margin-bottom: clamp(20px, 2.5vw, 36px); }
.wa-list { border-top: 1px solid var(--ink); }
.wa-item { position: relative; border-bottom: 1px solid var(--ink); }
.wa-item-inner { position: relative; z-index: 1; padding-top: 18px; padding-bottom: 22px; }
.wa-item-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* stays inside the row's hairlines, no full-bleed (owner 3 Sep) */
  background: #F8DFD5; /* pinkish, not cappuccino (owner 3 Sep) — coral-family tint, multiply keeps it soft */
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.wa-item-bg::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.18; }
.wa-item:hover .wa-item-bg { opacity: 1; }
/* the "what it says" column reads, the names announce: regular weight there (owner 3 Sep) */
.wa-list .wa-row > .wa-col:nth-child(3) span { font-weight: 400; }
@media (max-width: 720px) {
  /* accordion (owner, 5 Sep): the description column, hidden on phones before,
     expands under its row on tap. Without JS the descriptions simply stay open. */
  .wa-headrow .wa-hide-sm { display: none; }
  .wa-list .wa-row { flex-wrap: wrap; }
  html.js .wa-item .wa-row { cursor: pointer; }
  .wa-list .wa-row > .wa-col.wa-hide-sm {
    flex: 1 1 100%;
    order: 9;
    padding-left: 30px; /* aligns under the name, past the number column */
    overflow: hidden;
  }
  html.js .wa-list .wa-row > .wa-col.wa-hide-sm {
    max-height: 0;
    transition: max-height 0.35s var(--ease-out), margin-top 0.35s var(--ease-out);
  }
  html.js .wa-item.is-open .wa-row > .wa-col.wa-hide-sm { max-height: 6em; margin-top: 8px; }
  .wa-list .wa-row > .wa-col.wa-hide-sm span {
    font-family: var(--sans, inherit);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    line-height: 1.45;
  }
  /* the tell: a plus after the section name, minus when open */
  html.js .wa-item .wa-row > .wa-col:nth-child(2) span::after { content: "\00a0+"; font-weight: 400; }
  html.js .wa-item.is-open .wa-row > .wa-col:nth-child(2) span::after { content: "\00a0\2212"; }
}

/* ================= 2 · where the work goes (three phase cards) ================= */
.phases .statement { margin-bottom: clamp(40px, 5vw, 72px); }
.ph-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); }
.ph-card { background: #FFFFFF; display: flex; flex-direction: column; }
.ph-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-sub);
  letter-spacing: -0.02em;
  margin: 0;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid var(--line-on-grey);
  position: relative;
}
/* group-dim hover (the gesture the owner picked for the old services map):
   one card holds attention, siblings recede, the tag warms coral */
.ph-card { transition: opacity 0.3s ease, transform 0.3s var(--ease-out); }
@media (hover: hover) {
  .ph-cards:hover .ph-card { opacity: 0.45; }
  .ph-cards .ph-card:hover { opacity: 1; transform: translateY(-4px); }
}
.ph-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 32px) clamp(28px, 3vw, 44px);
  flex: 1;
}
.ph-tag { font-weight: 500; font-size: var(--t-body); margin: 0; }
.ph-lead { font-size: var(--t-body); line-height: 1.45; margin: 0; max-width: 34ch; }
.ph-decides { font-size: clamp(13px, 1.15vw, 15px); line-height: 1.45; margin: auto 0 0; max-width: 36ch; }
.ph-foot { margin-top: clamp(28px, 3.5vw, 48px); font-size: var(--t-body); max-width: 56ch; }
.ph-foot + .ph-foot { margin-top: 10px; }
@media (max-width: 860px) { .ph-cards { grid-template-columns: 1fr; } }
.wa .wa-support { margin-bottom: clamp(40px, 5vw, 72px); margin-top: -18px; }

/* ================= 1c · full-bleed image break ================= */
.img-break {
  height: clamp(600px, 129vh, 1400px); /* 1.5x, owner 3 Sep */
  overflow: clip;
  position: relative;
  /* the strong break (owner 3 Sep): coral field shows around the inset frame until the
     clip opens to full bleed. NOTE: overrides the standing "coral backgrounds are
     footer-only" rule at the owner's request — one line to soften to blush #FEEFE3. */
  background: #FF6B57;
}
/* the frame: JS scrubs its clip-path from an inset window to full bleed */
.break-clip { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.img-break img,
.img-break video {
  width: 100%;
  height: 118%; /* headroom for the scroll parallax in script.js */
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

/* ================= 2 · logo tile grid ================= */
body[data-logos="off"] .logo-grid { display: none; }
.logo-grid { background: var(--grey); padding: clamp(12px, 1.5vw, 24px) 0 clamp(12px, 1.5vw, 24px); position: relative; z-index: 1; } /* thin band between hero and timeline (moved 5 Sep) */
/* moving strip: one continuous marquee, full-bleed, seamless loop via a duplicated set */
.logo-marquee {
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(18px, 2.5vw, 34px) 0;
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 36s linear infinite;
}
.logo-set {
  display: flex;
  align-items: center;
  gap: clamp(56px, 7vw, 130px);
  padding-right: clamp(56px, 7vw, 130px);
}
/* equal visual weight: every mark rendered as a single-tone silhouette */
.logo-set img {
  height: clamp(26px, 2.8vw, 44px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0) opacity(0.72);
}
.logo-set img.img--lg { height: clamp(34px, 3.6vw, 58px); }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; width: auto; }
  .logo-set[aria-hidden="true"] { display: none; }
}

/* ================= shared band ================= */
.band { padding-top: clamp(80px, 11vw, 170px); padding-bottom: clamp(80px, 11vw, 170px); position: relative; z-index: 1; }
.band--grey { background: var(--grey); color: var(--ink); }
.band--ink { background: var(--deep); color: var(--paper); }
.band--deep { background: var(--deep); color: var(--paper); }
.support { max-width: 56ch; font-size: var(--t-body); line-height: 1.4; }
.band--ink .support, .band--deep .support { color: var(--paper); }
.band--grey .support { color: var(--ink); }

.conversation .conversation-fit { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ================= offer · map (copy v2 sections) ================= */
.offer .statement, .map .statement { max-width: 24ch; margin-bottom: clamp(28px, 4vw, 52px); }

/* ===== services rework (20 Aug): 01 = one straight line, 02 = three phase rows =====
   Reworked after the path/fork/three-column version read as hectic. Structure now
   follows the reader's own sequence: you come with a problem, we run the Audit, you
   get the answer, then the fork, then the map of where the work lands.
   Layout system borrowed from unknw.com/visionary-branding (their geometry, our type). */

/* ===== /services · composition C, agreed 24 Aug: THE DOCUMENT =====
   The measured page was 8 screens, 5.4 of them two enumerations of three, with no
   block bigger or quieter than any other. C answers that by dropping the landing-page
   register entirely: dense, left-aligned, close-set, no full-viewport moments. The
   firm's promise is a written answer in ten days, so the page reads like the answer.
   Everything here is scoped to .page-services and must not leak to the home page. ===== */

/* the bands close right up: this page has no theatre to give room to */
.page-services .conversation .display { font-size: var(--t-display); line-height: 0.97; }
.page-services .band { padding-top: clamp(48px, 5.5vw, 86px); padding-bottom: clamp(48px, 5.5vw, 86px); }
.page-services .label { margin-bottom: clamp(18px, 2.2vw, 30px); }

/* display type steps down hard. A term sheet does not shout. */
/* ===== the /services type scale =====
   There was no scale before this: the page title sat at 46px, below the board's
   54px and far below the CTA's 120px, and 36px was doing two different jobs.
   Six steps, and every heading on the page is on one of them.
     1  display   88   the page opens and closes on it
     2  section   52   section headings
     3  sub       32   the signpost, sub-statements
     4  object    24   card titles, table row names
     5  body      19
     6  label     12   tracked caps                                        ===== */
:root {
  --t-hero:    clamp(44px, 11.1vw, 160px); /* Motto h1 ratio (16rem fluid), 4 Sep */
  --t-display: clamp(34px, 7.2vw, 104px); /* Motto h2 ratio */
  --t-section: clamp(28px, 3.6vw, 52px);
  --t-sub:     clamp(22px, 3.5vw, 50px); /* Motto h3 ratio */
  --t-body:    clamp(17px, 1.46vw, 21px); /* Motto body: 21px at 1440 */
  --t-object:  clamp(19px, 1.9vw, 24px);
}

/* --- the offer as three cards with one shared drawer (agreed 24 Aug) ---
   The cards are the control; the detail opens once, beneath all three, so the row
   never grows into three open columns. The signpost line above them is the thing
   the page never had: it tells a first-time reader there are three stages and names
   them before they meet any. --- */
.signpost {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-sub);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 34ch;
  margin-top: clamp(44px, 7vw, 120px);
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-on-grey); }
/* option A (owner, 24 Aug): the live card inverts. Literal colours on purpose —
   token values get remapped inside the grey-body re-skin block, and this needs to
   be genuinely dark wherever it is used. Same move the phase rows make on hover,
   so the two sections speak one language. */
.s-card:not([aria-selected="true"]):hover { background: rgba(17, 17, 16, 0.05); }
/* the ink pours in and drains out from the bottom edge, the same gesture the
   buttons make when coral sweeps up through them */
.s-fill {
  position: absolute;
  inset: 0;
  background: #111110;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  z-index: 0;
}
/* colour is animated in script.js so the outgoing card holds its paper text
   until its fill has drained. Without the script nothing here applies. */
/* without the script there is no fill, so the text must stay ink */
.s-card[aria-selected="true"] { background: transparent; }
/* icon left, stage number right, sharing the top line of the card. The icons
   are stroked in currentColor so they ride the same ink/paper colour tween GSAP
   runs on the card when the fill pours in. */
.s-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* a coral segment on the top edge, under whichever card is open */
.drawer::before {
  content: "";
  position: absolute;
  top: -1px;
  height: 1px;
  width: 33.3333%;
  left: calc(var(--tab, 0) * 33.3333%);
  background: #FF6B57;
  transition: left 500ms var(--ease-out);
}

/* the cards arrive in order. Gated on .js, and script.js also carries a timeout
   failsafe, so they can never be left invisible if the observer never fires. */


@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
}

/* --- the phase map, as a table --- */
.doc-table-wrap { overflow-x: auto; }
/* the hovered row inverts: the band goes black and its letters go paper, so the
   row you are reading is unmistakable and the rest of the table stays quiet */
.doc-table tbody tr { transition: background-color 220ms ease; }
/* literals, not tokens: #map sits inside the grey-body re-skin block, which remaps
   --deep to #F2F0EB and --paper to #1A1A1A, so the token version inverted to nothing */
.doc-table tbody tr:hover th, .doc-table tbody tr:hover td {
  background: #111110;
  color: #F2F0EB;
  border-bottom-color: #111110;
}
/* the row keeps its inset from the page edge, so pad the outer cells back in */
.doc-table tbody tr th { padding-left: clamp(10px, 1.2vw, 18px); text-indent: 0; }
@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 820px) {
}
@media (prefers-reduced-motion: reduce) { }

/* board: a bench, not a third act — half the scale, two quiet columns */
.page-services .board .statement { font-size: var(--t-section); line-height: 1.02; }
@media (max-width: 700px) {
}

/* ================= self-diagnostic (/diagnostic) =================
   Full-screen centered stages — an instrument, not an editorial page. No footer. */
.diag-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; background: transparent; }
.diag-bar span { display: block; height: 100%; width: 0; background: #FF6B57; transition: width 320ms var(--ease-out); }
/* single-screen instrument: the page never scrolls, every stage is exactly one viewport */
body.page-diagnostic { height: 100svh; overflow: hidden; }
.diag-stage[hidden] { display: none; } /* .diag-stage's display:flex would otherwise defeat the hidden attribute */
.diag-stage {
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px var(--pad-x);
  overflow: hidden;
}
/* short viewports: tighten the stage so everything keeps fitting without scroll */
@media (max-height: 800px) {
  .diag-center .statement { font-size: clamp(30px, 4.4vw, 56px); }
  .diag-stage--deep .display { font-size: clamp(40px, 6vw, 84px); }
  .diag-center .label, .diag-progress { margin-bottom: 20px; }
  .diag-question { margin-bottom: 28px; min-height: 0; }
  .diag-lead, .diag-read-body { margin-bottom: 24px; }
  .diag-lead p, .diag-read-body p { font-size: 15px; }
  .diag-layers { margin-bottom: 24px; }
  .diag-layers li { padding: 10px 0; }
  .diag-note { margin-top: 16px; font-size: 13px; }
  .diag-founder { margin-top: 20px; }
  .diag-founder img { width: 72px; height: 72px; }
}
.diag-stage--grey { background: var(--grey); }
.diag-stage--deep { background: var(--deep); color: var(--paper); }
.diag-center { max-width: 860px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.diag-center .label { margin-bottom: clamp(24px, 3vw, 40px); }
.diag-center .statement { max-width: 18ch; margin-bottom: clamp(24px, 3vw, 40px); }
.diag-lead { max-width: 56ch; display: flex; flex-direction: column; gap: 1em; margin-bottom: clamp(32px, 4vw, 52px); }
.diag-lead p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
.diag-progress {
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.diag-progress #diag-step { color: var(--coral-text); }
.diag-question {
  font-family: var(--body); /* owner call: the assessment itself is Satoshi, not the display voice */
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 34px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 34ch;
  margin-bottom: clamp(40px, 7vh, 72px);
  min-height: 3.8em; /* steady stage: the scale row does not jump between statements */
}
.diag-scale { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.diag-scale-end {
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--mut-on-grey);
  max-width: 7em;
}
.diag-scale-btns { display: flex; gap: clamp(8px, 1vw, 14px); }
.diag-scale-btn {
  width: clamp(48px, 5.4vw, 64px);
  height: clamp(48px, 5.4vw, 64px);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
}
.diag-scale-btn:hover { background: #FF6B57; border-color: #FF6B57; color: var(--ink); transform: translateY(-2px); }
.diag-scale-btn.is-picked { background: var(--ink); color: var(--grey); }
.diag-hint { margin-top: clamp(20px, 3vh, 32px); font-size: 13px; color: var(--mut-on-grey); }
@media (hover: none) { .diag-hint { visibility: hidden; } }
@media (max-width: 640px) {
  .diag-scale { flex-direction: column; gap: 14px; }
  .diag-scale-end { max-width: none; }
}
.diag-back {
  margin-top: clamp(20px, 3vh, 36px);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--mut-on-grey);
  text-decoration: underline;
  cursor: pointer;
}
/* email gate */
.diag-progress-done { color: var(--coral-text); }
.diag-question--gate { min-height: 0; }
.diag-gate { width: 100%; max-width: 560px; }
.diag-gate-row { display: flex; gap: 12px; }
.diag-gate-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.diag-gate-row input::placeholder { color: var(--mut-on-grey); }
.diag-gate-row input:focus { outline: 2px solid var(--ink); outline-offset: 0; }
@media (max-width: 560px) { .diag-gate-row { flex-direction: column; } }
.diag-gate-err { margin-top: 12px; font-size: 14px; color: var(--coral-text); }
.diag-gate-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mut-on-grey); }
.diag-gate-note a { color: inherit; }
/* founder card on the confirmation stage */
.diag-founder {
  margin-top: clamp(28px, 4vh, 44px);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
  max-width: 520px;
}
.diag-founder img { width: 64px; height: 64px; object-fit: cover; flex: 0 0 auto; }
.diag-founder-name { font-weight: 500; font-size: 15px; }
.diag-founder-role {
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--mut-on-ink);
  margin-top: 3px;
}
.diag-founder-note { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--mut-on-ink); }
.diag-substack { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--paper); text-underline-offset: 3px; }

/* optional context screen */
.diag-context-hint { font-size: 14px; color: var(--mut-on-ink); margin-bottom: clamp(20px, 3vh, 32px); }
.diag-context-input {
  width: 100%;
  max-width: 560px;
  resize: vertical;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 14px 16px;
  border: 1px solid var(--line-on-ink);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.diag-context-input:focus { outline: 2px solid var(--paper); outline-offset: 0; }
.diag-skip {
  margin-top: clamp(16px, 2.5vh, 28px);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 14px;
  color: var(--mut-on-ink);
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 480px) { .diag-founder { flex-direction: column; align-items: center; text-align: center; } }
/* the reading is the one stage allowed to scroll: unlock the document itself,
   NOT an inner scroll container — Lenis only drives window scrolling */
body.page-diagnostic.diag-scrolling { height: auto; overflow: visible; }
.diag-stage--scroll { height: auto; min-height: 100svh; overflow: visible; padding-top: 110px; padding-bottom: 90px; }
.diag-layers { list-style: none; width: 100%; max-width: 640px; margin: 0 auto clamp(32px, 5vh, 56px); }
.diag-layer-bar span { transition: width 900ms var(--ease-out); }
/* perceptual map */
.diag-map { width: 100%; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 60px); }
.diag-map-title {
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  margin-bottom: 18px;
}
.diag-map svg { width: 100%; height: auto; display: block; }
.diag-map-frame { fill: none; stroke: var(--line-on-ink); }
.diag-map-axis { stroke: var(--line-on-ink); stroke-dasharray: 3 5; }
.diag-map-quad {
  fill: var(--mut-on-ink);
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.diag-map-quad.is-you { fill: #FF6B57; }
.diag-map-axis-label { fill: var(--mut-on-ink); font-family: var(--body); font-size: 12px; }
@media (max-width: 640px) {
  .diag-map-quad { font-size: 17px; letter-spacing: 0.08em; }
  .diag-map-axis-label { font-size: 18px; }
  .diag-map-you { font-size: 19px; }
}
.diag-map-dot { fill: #FF6B57; }
.diag-map-ring {
  fill: none;
  stroke: #FF6B57;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: diag-pulse 2.2s var(--ease-out) infinite;
}
@keyframes diag-pulse {
  0% { transform: scale(0.55); opacity: 0.9; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .diag-map-ring { animation: none; opacity: 0.5; } }
.diag-map-you { fill: var(--paper); font-family: var(--body); font-size: 13px; font-weight: 500; }
/* thank-you: quiet, not monumental */
.diag-thanks {
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.35;
  max-width: 30ch;
  letter-spacing: -0.01em;
}
.diag-layers li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-on-ink);
}
.diag-layer-name {
  flex: 0 0 9em;
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}
.diag-layer-bar { flex: 1; height: 2px; background: var(--line-on-ink); position: relative; }
.diag-layer-bar span { position: absolute; inset: 0 auto 0 0; background: #999590; }
.diag-layers .is-weakest .diag-layer-bar span { background: #FF6B57; }
.diag-layers .is-weakest .diag-layer-name, .diag-layers .is-weakest .diag-layer-score { color: #FF6B57; }
.diag-layer-score { flex: 0 0 3.5em; text-align: right; font-size: 13px; color: var(--mut-on-ink); }
.diag-read-body { max-width: 62ch; display: flex; flex-direction: column; gap: 1em; margin-bottom: clamp(32px, 4vw, 52px); text-align: left; }
.diag-read-body p { font-size: var(--t-body); line-height: 1.5; }
.diag-sentences { border: 1px solid var(--line-on-ink); padding: 20px 22px; margin: 28px 0 0; text-align: left; }
.diag-sentences-label { font-family: var(--caps); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.diag-sentences ol { list-style: decimal inside; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-body); line-height: 1.45; }
.diag-sentences-note { font-size: 13px; color: var(--mut-on-ink); margin-top: 14px; }
.diag-note { margin-top: clamp(24px, 3vw, 40px); font-size: 14px; color: var(--mut-on-ink); max-width: 52ch; }

/* ================= manifesto page — the site's one fully dark page ================= */
.manifesto-open { padding-top: clamp(120px, 16vw, 220px); padding-bottom: clamp(32px, 4vw, 56px); }
.manifesto-open .statement { max-width: 20ch; margin-bottom: clamp(28px, 4vw, 52px); }
.manifesto-body { max-width: 62ch; display: flex; flex-direction: column; gap: 1em; }
.manifesto-body p { font-size: var(--t-body); line-height: 1.5; color: var(--paper); }
.manifesto-declaration { padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(32px, 4vw, 56px); }
.manifesto-declaration .statement { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 52px); }
.manifesto-declaration .manifesto-close { margin-top: clamp(28px, 4vw, 52px); margin-bottom: 0; }
.creed { padding-top: clamp(24px, 3vw, 48px); }
.creed .support { margin-bottom: clamp(40px, 5vw, 72px); }
/* method → offer hand-off */

/* ================= 3 · method (charcoal) ================= */

.phases { list-style: none; border-top: 1px solid var(--line-on-ink); }
.phase {
  display: grid;
  grid-template-columns: clamp(64px, 10vw, 180px) 1fr;
  gap: 16px 24px;
  padding: clamp(28px, 3.5vw, 48px) 0;
  border-bottom: 1px solid var(--line-on-ink);
}
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; gap: 10px; } }
.phase .num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  color: var(--mut-on-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.phase .phase-name { color: var(--mut-on-ink); margin-bottom: 12px; }
.phase h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 56px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-variation-settings: "opsz" 144;
  margin-bottom: 14px;
}
.phase p:not(.phase-name) { max-width: 60ch; font-size: var(--t-body); line-height: 1.5; color: var(--paper); }

/* ================= 4 · work: peek-card swiper ================= */
.work .carousel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.work .carousel-head .label { margin-bottom: 0; }
.carousel-ui { display: none; align-items: center; gap: 18px; }
.js .carousel-ui { display: flex; }
.carousel-counter {
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--mut-on-grey);
}
.carousel-counter .current { color: var(--ink); }
.carousel-controls { display: flex; gap: 8px; }
.carousel-controls button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.carousel-controls button:hover { background: var(--deep); color: var(--grey); }
.carousel-controls button:active { transform: scale(0.94); }
.carousel-controls button:disabled { opacity: 0.3; cursor: default; }
.carousel-controls button:disabled:hover { background: transparent; color: var(--ink); }
/* full-bleed carousel: breaks out of .container to the viewport edges */
.carousel {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(var(--pad-x), calc(50vw - var(--max) / 2 + var(--pad-x)));
  padding-right: var(--pad-x);
  scroll-padding-left: max(var(--pad-x), calc(50vw - var(--max) / 2 + var(--pad-x)));
}
.carousel::-webkit-scrollbar { display: none; }
/* white card, attribution on top, roomy Satoshi quote (owner screenshot 31 July) */
.case {
  flex: 0 0 min(88%, 1100px);
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  padding: clamp(28px, 3.5vw, 56px);
  min-height: clamp(340px, 46vh, 540px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 30px); /* reading scale, not the Motto h3 tier */
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: 40ch;
  margin-top: clamp(40px, 6vw, 96px);
}
.quote-by { order: -1; display: flex; align-items: center; gap: 16px; }
.quote-photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ECEAE4;
  overflow: hidden;
}
.quote-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
/* stands in until the real headshot is dropped in; same circle, same weight */
.quote-photo { display: flex; align-items: center; justify-content: center; }
.quote-initials {
  font-family: var(--caps);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--mut-on-grey);
}
.quote-name { font-size: 16px; font-weight: 500; color: var(--ink); }
.quote-role { font-size: 15px; color: var(--mut-on-grey); }

/* ================= 5 · team — photo tiles on black (UNKNOWN caption style) ================= */
/* rotating badge — coral wording only; roams the whole team section with the cursor,
   rests on the first portrait (Demetris) otherwise and on mobile.
   Lives in .team-wrap (NOT the scrolling .team-grid) so it is never clipped by the strip. */
.team-wrap { position: relative; }
.team-badge {
  position: absolute;
  top: 10px;
  left: 14px;   /* rests on the first portrait; desktop JS drives it from here.
                   Was right-anchored for the old one-column mobile grid, which now
                   lands on the second tile of the strip. */
  width: clamp(96px, 10vw, 150px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 2;
}
.team-badge .ring { width: 100%; height: 100%; overflow: visible; }
.team-badge .ring text {
  font-family: var(--caps);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  fill: #FF6B57;
}
@media (prefers-reduced-motion: no-preference) {
  .team-badge .ring { animation: badge-spin 16s linear infinite; }
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

.team-caption {
  font-size: var(--t-body);
  color: var(--paper);
  max-width: 44ch;
  margin-bottom: 14px;
}
.team-sub {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--mut-on-ink);
  max-width: 52ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}
/* Portraits as a bleeding strip (owner 23 Aug, ref: the Motto team row): tiles run
   off both edges, captions plain underneath, one circular arrow floating over the
   strip. Supersedes the 3 Aug static three-up. Still no bios. */
.team-strip-wrap { position: relative; }
.team-strip {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(var(--pad-x), calc(50vw - var(--max) / 2 + var(--pad-x)));
  padding-right: var(--pad-x);
  scroll-padding-left: max(var(--pad-x), calc(50vw - var(--max) / 2 + var(--pad-x)));
}
.team-strip::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .team-strip { scroll-behavior: auto; } }
.member {
  flex: 0 0 clamp(230px, 34vw, 520px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* the arrow rides the portrait, not the figure, so the captions do not pull it down */
.strip-nav {
  position: absolute;
  top: calc(50% - 34px);
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 5.6vw, 88px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: background-color 160ms ease, color 160ms ease, opacity 200ms ease;
}
.js .strip-nav { display: flex; }
.strip-nav:hover { background: #1A1A1A; color: #F2F0EB; }
.strip-nav:active { transform: translateY(-50%) scale(0.94); }
.strip-nav[disabled] { opacity: 0; pointer-events: none; }
.strip-nav--prev { left: 0; }
.strip-nav--next { right: 0; }
@media (max-width: 720px) { .strip-nav, .js .strip-nav { display: none; } }
.member img, .member-photo-tba {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(0.97);
  display: block;
}
.member figcaption { display: flex; flex-direction: column; gap: 2px; }
.member-name { font-size: var(--t-body); font-weight: 500; color: var(--paper); }
.member-role { font-size: var(--t-body); color: var(--mut-on-ink); }
.member--tba .member-name, .member--tba .member-role { color: var(--mut-on-ink); }

/* the methodology line under the report cover. Small, but full-strength ink like
   everything else: this single line is what makes the section read as research
   rather than as a content piece. */
.method-line {
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.5;
}

/* ================= 6 · research ================= */
.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
@media (max-width: 800px) { .research-grid { grid-template-columns: 1fr; } }
.research .statement { margin-bottom: clamp(22px, 3vw, 36px); }
.research .about { max-width: 52ch; font-size: var(--t-body); line-height: 1.5; color: var(--ink); margin-bottom: 16px; }
.research .byline { font-size: 14px; color: var(--mut-on-grey); }
/* the report as a typographic cover — the artifact made tangible, capture built in */
/* OUTLINED (owner pick "A", 3 Sep 2026): hairline box on the ground, pan language —
   replaces the dark printed-cover treatment; grain layer deleted with it */
.capture {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: clamp(28px, 3vw, 48px);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 400ms var(--ease-out);
}
.capture:hover { transform: translateY(-6px); }
.cover-mast {
  font-family: var(--caps);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.35);
}
.cover-year {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(96px, 10vw, 170px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  margin: clamp(20px, 2.5vw, 36px) 0 8px;
}
.cover-sub {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(26, 26, 26, 0.7);
  max-width: 30ch;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.cover-pub {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.35);
  font-size: 13px;
  color: rgba(26, 26, 26, 0.65);
}
.capture form { display: flex; flex-direction: column; gap: 12px; }
.capture label { letter-spacing: 0.14em; }
.capture input[type="email"] {
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(26, 26, 26, 0.45);
  background: transparent;
  color: var(--ink);
}
.capture input[type="email"]::placeholder { color: rgba(26, 26, 26, 0.45); }
.capture input[type="email"]:focus { border-color: var(--ink); outline: none; }
.capture button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 15px 24px;
  background: var(--deep);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 220ms ease;
}
.capture button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FF6B57;
  transform: translateY(101%);
  transition: transform 340ms var(--ease-out);
}
.capture button:hover { color: var(--ink); }
.capture button:hover::before { transform: translateY(0); }
.form-msg { font-size: 14px; line-height: 1.5; display: none; }
.form-msg.show { display: block; }
.form-msg--ok { color: #8FCBA4; }
.form-msg--err { color: #E8A79A; }
@media (max-width: 720px) { }

/* ================= 7 · CTA (deep) ================= */
.conversation .display { margin-bottom: clamp(32px, 4vw, 56px); }
.conversation .outbound { margin-top: clamp(44px, 6vw, 72px); font-size: 15px; color: var(--mut-on-ink); }
/* text links: bare at rest, 1px line draws in from the left on hover (matches footer) */
.conversation .outbound a, .qa-body a, .form-msg a {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease-out);
}
.conversation .outbound a { color: var(--paper); }
.conversation .outbound a:hover, .qa-body a:hover, .form-msg a:hover { background-size: 100% 1px; }

/* ================= 8 · FAQ accordion ================= */
.faq .statement { margin-bottom: clamp(40px, 6vw, 80px); }
.faq-list { border-top: 1px solid var(--line-on-grey); }
.qa { border-bottom: 1px solid var(--line-on-grey); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 38px) 0;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 30px); /* reading scale, not the Motto h3 tier */
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: opacity 150ms ease;
}
.qa summary:hover h3 { opacity: 0.55; }
.qa-icon { position: relative; flex: none; width: 18px; height: 18px; }
.qa-icon::before, .qa-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 250ms var(--ease-out);
}
.qa-icon::before { left: 0; right: 0; top: 8px; height: 1.5px; }
.qa-icon::after { top: 0; bottom: 0; left: 8px; width: 1.5px; }
.qa[open] .qa-icon::after { transform: scaleY(0); }
.qa-body { padding: 0 0 clamp(26px, 3vw, 40px); }
.qa-body p { max-width: 62ch; font-size: var(--t-body); line-height: 1.55; color: var(--ink); }

/* ================= footer — the red footer from live hivebreed.com ================= */
/* Pink returns HERE ONLY, at owner instruction (31 July 2026).
   Flow reveal: the footer sits in normal flow, overflow hidden; GSAP parallaxes its
   inner content from -35% to 0 as it scrolls in, so the page appears to uncover it.
   Works at any footer height — the full-width uncut logo and the reveal coexist. */
main { position: relative; z-index: 1; }
/* Footer: coral signature field, charcoal content — the site's single color moment */
.site-footer {
  background: #FF6B57;
  color: var(--ink);
  position: relative;
  z-index: 0;
  overflow: hidden;
  font-family: var(--body);
}
.foot-inner { will-change: transform; }
.site-footer .container { padding-top: clamp(20px, 2vw, 36px); padding-bottom: clamp(12px, 1.2vw, 20px); }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
@media (max-width: 720px) { .foot-cols { grid-template-columns: 1fr; gap: 32px; } }
.foot-col { display: flex; flex-direction: column; gap: 3px; }
.foot-head { font-weight: 500; margin-bottom: 6px; font-size: 15px; }
.foot-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  padding: 1px 0;
  width: fit-content;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease-out);
}
.foot-col a:hover { background-size: 100% 1px; }
.foot-col a { transition: background-size 320ms var(--ease-out), opacity 260ms ease; }
.foot-col:hover a:not(:hover) { opacity: 0.45; }
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
}
.foot-row a { color: var(--ink); text-underline-offset: 3px; }
/* giant logo full-width at its natural aspect — the bottom bleed is built into the SVG itself */
.foot-image { width: 100%; overflow: hidden; margin-top: clamp(6px, 0.8vw, 12px); }
/* the wordmark always runs edge to edge at its natural aspect (owner 3 Aug) */
.foot-image img { display: block; width: 100%; height: auto; }

/* ================= floating CTA (persistent, bottom right, UNKNOWN box style) ================= */
.floating-cta {
  position: fixed;
  right: clamp(16px, 2.5vw, 36px);
  bottom: clamp(16px, 2.5vw, 36px);
  z-index: 15;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0;
  color: #fff;
  border: 1px solid #fff;
  mix-blend-mode: difference;
  padding: 14px 22px;
  text-decoration: none;
  background: transparent;
  /* entrance is CSS-only: GSAP animating opacity here fought this transition and
     left the element stuck at opacity 0 on every load (found 7 Aug) */
  opacity: 0;
  transition: opacity 400ms ease, transform 250ms ease;
}
.floating-cta.is-in { opacity: 1; }
.floating-cta:hover { transform: translateY(-2px); }
.floating-cta.is-hidden { opacity: 0; pointer-events: none; }
html.menu-open .floating-cta { opacity: 0; pointer-events: none; }
html:not(.js) .floating-cta { display: none; }

/* ================= legacy for privacy page ================= */
.band--grey h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.site-footer--static { position: static; }
body.page-static main { margin-bottom: 0; }

/* scroll-fill statements: words start ghosted, complete as you scroll (live-site effect) */
.js .fill-text .w { will-change: opacity; }

/* ================= reveal (GSAP-driven; CSS fallback) ================= */
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .tl-dot, .tl-mrule { transform: none !important; }
}

/* ===== TEST (31 July): grey body — only hero + footer keep their color fields =====
   Re-skins the dark bands (#firm, #conversation) to warm grey by
   remapping their local color variables. Delete this whole block to restore. */
#map, #firm, #conversation {
  background: var(--grey);
  color: var(--ink);
  --paper: #1A1A1A;          /* paper text roles become ink on grey */
  --mut-on-ink: #1A1A1A;     /* muted-on-dark becomes ink on the re-skinned grey bands */
  --line-on-ink: #DAD6CE;    /* hairlines darken to the grey-surface hairline */
  --deep: #F2F0EB;           /* solid buttons invert: ink block, grey text */
}
#firm::after, #conversation::after { opacity: 0; } /* grain is a dark-surface material */

/* ===== duotone drift — DECIDED 3 Aug: BLUSH. After the testimonials the page
   warms from grey #F2F0EB toward peachy off-white #FEEFE3 (the coral's family),
   section by section, so the coral footer arrives as a resolution. Each gradient
   starts where the previous ended, so the seams are invisible. ===== */
#firm { background: linear-gradient(180deg, #F2F0EB 0%, #F6EFE7 100%); }
#trust-in-tech { background: linear-gradient(180deg, #F6EFE7 0%, #FAF0E6 100%); }
#conversation { background: linear-gradient(180deg, #FAF0E6 0%, #FDF0E5 100%); }
#faq { background: linear-gradient(180deg, #FDF0E5 0%, #FEEFE3 100%); }

/* ================= board of experts (services page) ================= */
.board .statement { max-width: 22ch; margin-bottom: clamp(20px, 3vw, 36px); }
/* typographic rows, matching the offer list and phases — the names are the claim */
/* dim-siblings hover survives from the original list; layout lives in the bench block above */
.board-list:hover .advisor:not(:hover) { opacity: 0.35; }

/* ================= consent gate ================= */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--deep);
  color: var(--paper);
  padding: clamp(16px, 2vw, 22px) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  transform: translateY(100%);
  transition: transform 420ms var(--ease-out);
  border-top: 1px solid var(--line-on-ink);
}
.consent.is-in { transform: translateY(0); }
.consent-text { font-size: 14px; line-height: 1.5; max-width: 72ch; }
.consent-text a { color: var(--paper); text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent .btn { padding: 11px 20px; font-size: 13px; }
.consent .btn--solid { background: var(--paper); color: var(--deep); }
.consent .btn--ghost { color: var(--paper); border-color: rgba(242, 240, 235, 0.5); }
/* the banner owns the bottom edge while it is up */
.consent.is-in ~ .floating-cta { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .consent { flex-direction: column; align-items: flex-start; }
  .consent-actions { width: 100%; }
  .consent .btn { flex: 1; text-align: center; }
}
.foot-consent {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ================= footer city flip ================= */
/* three codes on a vertical track; the fourth is the first repeated so the loop is seamless */
.city-flip {
  display: inline-block;
  height: 1.35em;          /* room for cap height and overshoot, or neighbours bleed in */
  overflow: hidden;
  vertical-align: -0.35em;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
.city-flip-track {
  display: flex;
  flex-direction: column;
  animation: city-swipe 7.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.city-flip-track span { height: 1.35em; line-height: 1.35; }
@keyframes city-swipe {
  0%, 26%   { transform: translateY(0); }
  33%, 59%  { transform: translateY(-1.35em); }
  66%, 92%  { transform: translateY(-2.7em); }
  100%      { transform: translateY(-4.05em); }
}
@media (prefers-reduced-motion: reduce) {
  .city-flip-track { animation: none; }
}

/* ================= footer curtain reveal =================
   Enabled by JS only when the footer fits the viewport (see script.js).
   The footer is pinned behind; main slides over it and leaves it behind as
   you reach the end. The footer is never transformed, so it cannot look cut. */
html.footer-reveal .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--footer-h);   /* capped to the viewport; the logo band crops from the bottom */
}
html.footer-reveal main {
  position: relative;
  z-index: 1;
  background: var(--grey);
  margin-bottom: var(--footer-h, 0px);
}

/* ============ mobile pass (owner, 3 Sep 2026): hero, intro, pan, table, research ============ */
@media (max-width: 720px) {
  :root {
    --t-hero: 44px;
    --t-display: 36px;
    --t-sub: 22px;
  }
  .hero-slide { min-height: 72svh; }
  .hero-layout { padding-top: 13svh; }

  /* timeline: the intro joins the reading flow, words sized to be words again */
  .tl { --tl-col: clamp(190px, 52vw, 220px); --tl-disp: clamp(34px, 10.5vw, 44px); --tl-row: calc(var(--tl-disp) * 1.2); padding-top: 44px; }
    .tl-col-label { font-size: 10px; top: -1.5em; }

  /* written answer: the number column stops eating a third of the width */
  .wa .statement { margin-bottom: 32px; }
  .wa .wa-support { margin-top: -6px; margin-bottom: 36px; }
  .wa-col { padding-right: 10px; }
  .wa-row > .wa-col:first-child { flex: 0 0 30px; }
  .wa-item-inner { padding-top: 14px; padding-bottom: 16px; }

  /* research: the box breathes, the year stops shouting */
  .cover-year { font-size: 64px; }
  .capture { padding: 22px 18px; }
  .cover-sub { margin-bottom: 22px; }
}

/* ============ mobile pass 2 (owner phone screenshots, 4 Sep 2026) ============ */
@media (max-width: 720px) {
  /* the floating CTA is transparent and collided with copy on nearly every screen;
     the hero, closing band and menu asks carry mobile */
  .floating-cta { display: none !important; }

  /* section labels were rendering through the transparent fixed header */
  .band { padding-top: 76px; }

  /* hero: content-sized, no dead band before the timeline */
  .hero-slide { min-height: auto; }
  .hero-layout { padding-top: 108px; padding-bottom: 44px; }

  /* timeline: the pan is desktop behaviour — phones get the grid stacked in flow,
     day labels via ::before so nothing depends on the hidden lines layer */
  .tl { padding-top: 60px; }
  .tl-lines { display: none; }
  .tl-track { width: auto; transform: none !important; }
  .tl-rows { border-bottom: none; }
  .tl-row { height: auto; padding: 12px 0 16px; border-top: none; }
  html.js .tl-dot { transform: scale(0); } /* lands via the row's scrub in script.js */
  .tl-mrule {
    display: block;
    height: 1px;
    background: var(--ink);
    margin: 16px var(--pad-x) 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .tl-row::before {
    content: "Day one";
    display: block;
    margin: 0 var(--pad-x) 8px;
    font-family: var(--caps);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .tl-row:nth-child(2)::before { content: "Day ten"; }
  .tl-row:nth-child(3)::before { content: "Day eleven, ongoing"; }
  .tl-el { position: static; transform: none; margin-left: var(--pad-x); }
  .tl-el h2 { transform: none !important; }

  /* dead band between the logos and section 01 */
  .logo-grid { padding-bottom: 36px; }

  /* the roaming team badge landed on faces at phone widths */
  .team-badge { display: none; }
}

/* ============ tablet pass (screen-pass renders, 4 Sep 2026): 721-1060px ============ */
@media (min-width: 721px) and (max-width: 1060px) {
  /* the 80svh hero was mostly air at tablet heights; size it to its content */
  .hero-slide { min-height: auto; }
  .hero-layout { padding-top: 150px; padding-bottom: 64px; }
  /* the intro paragraph kept its desktop side-column at 768, leaving half the row empty */
    /* same header clearance the phones got */
  .band { padding-top: 84px; }
}

/* ============ mobile reading floor (owner, 4 Sep 2026): no sentence below the FAQ body's 15px.
   Caps labels and table micro-type stay small by design. ============ */
@media (max-width: 720px) {
  .method-line, .cover-pub, .form-msg, .consent-text, .research .byline { font-size: 15px; }
  .btn { font-size: 15px; }
    .ph-decides { font-size: 15px; }
}

/* ============ assessment veil: ink curtain, small coral mark ============ */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #FF6B57; /* coral curtain (owner correction) */
  transform: translateY(100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.page-veil .page-veil-mask { overflow: hidden; }
.page-veil svg { display: block; }