/* ==========================================================================
   Whutzthat Consulting — Direction A (video hero)
   Tokens + reset + shared utilities. Section styles are appended below.
   ========================================================================== */

:root {
  --ink: #17181A;
  --hero-ink: #0E0F10;
  --cream: #FBF5EA;
  --ochre: #C0801F;
  --ochre-light: #D9A244;
  --ochre-dark: #8A5610;
  --card-dark: #1E2023;

  --muted-ink: rgba(23, 24, 26, .62);
  --body-ink: rgba(23, 24, 26, .72);
  --muted-cream: rgba(251, 245, 234, .68);
  --body-cream: rgba(251, 245, 234, .78);
  --rule-ink: rgba(23, 24, 26, .14);
  --rule-cream: rgba(251, 245, 234, .14);

  --col: 1180px;
  --pad-y: clamp(80px, 14vh, 180px);
  --pad-x: clamp(20px, 4vw, 56px);
  --gap: clamp(18px, 3vw, 48px);
  --header-h: 70px;

  --font: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

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

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
p { margin: 0; }
::selection { background: var(--ochre); color: var(--cream); }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- layout ------------------------------------------------------------- */

.wrap { max-width: var(--col); margin-inline: auto; width: 100%; }
.section { padding: var(--pad-y) var(--pad-x); }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0;
}

.meta {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.h2 {
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 68px);
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 0;
}

.h3 {
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}

.body {
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 52ch;
  color: var(--body-ink);
}

.figure {
  font-weight: 300;
  font-size: clamp(52px, 8vw, 110px);
  line-height: .86;
  letter-spacing: -.04em;
}

.on-dark { color: var(--cream); }
.on-dark .body { color: var(--body-cream); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--ochre); color: var(--ink); }

.btn--ochre { background: var(--ochre-light); color: var(--ink); font-weight: 600; }
.btn--ochre:hover { background: var(--cream); color: var(--ink); }

.btn--ghost-cream { border-color: rgba(251, 245, 234, .32); color: var(--cream); }
.btn--ghost-cream:hover { border-color: var(--ochre-light); color: var(--ochre-light); }

.btn--ghost-ink { border-color: rgba(23, 24, 26, .35); color: var(--ink); }
.btn--ghost-ink:hover { background: rgba(23, 24, 26, .08); }

/* --- motion primitives -------------------------------------------------- */

/* The reveal slides each line up from below, so the wrapper must clip — but
   line-height 0.98 on the H1 puts descenders outside the line box, and they
   were being sliced off ("big guys", "years ago"). Pad the bottom, then pull
   the same amount back with a negative margin so line spacing is unchanged.
   motion.js starts these at translateY(130%), which clears content + padding;
   at the old 110% the top of the glyphs peeked into the padding band. */
.rise {
  --rise-pad: .16em;
  overflow: hidden;
  display: block;
  padding-bottom: var(--rise-pad);
  margin-bottom: calc(-1 * var(--rise-pad));
}
.rise > * { display: block; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===== Sections 1–4: header, hero, marquee, premise ===== */
/* --- 1. scroll progress + fixed header --------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(23, 24, 26, .08);
  z-index: 60;
}

.progress__fill {
  height: 100%;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px clamp(14px, 2.4vw, 28px);
  padding: 18px var(--pad-x);
  background: rgba(251, 245, 234, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-ink);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.site-header__mark {
  /* The lockup is 6.5:1, so height drives a lot of width. At 38px it was
     247px wide and would not sit beside the 42px menu button on a 320px
     screen — the header wrapped to two rows. 30px keeps it on one. */
  height: clamp(30px, 3.4vw, 48px);
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(9px, 1.5vw, 26px);
  row-gap: 10px;
  font-size: clamp(12.5px, 1vw, 13.5px);
  letter-spacing: .01em;
}

/* Touch targets. The bare links were 15px tall — too small to hit reliably and
   under WCAG 2.5.8's 24px floor. min-height plus inline-flex centring gets them
   to 30px without growing the desktop header at all, because the 48px logo is
   what sets its height there. */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  opacity: .72;
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  opacity: 1;
  color: var(--ochre-dark);
}

.site-nav__cta {
  opacity: 1;
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  color: var(--ink);
}

/* --- 2. hero ------------------------------------------------------------ */

.hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Clears the fixed header, which is now at most ~85px anywhere: the nav
     collapses to a single button below 820px instead of wrapping to two rows.
     Measured clearance: +51px at 320, +67px at 375, +77px at 1440. */
  padding: clamp(130px, 18vh, 200px) var(--pad-x) clamp(28px, 4vh, 48px);
  background: var(--hero-ink);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The scrims are shaped around the copy, not applied evenly. All hero text sits
   in the left half, so that half stays as dark as the original spec while the
   right half — where the footage's subjects actually are — opens up to ~65%.
   Measured across the full loop against every text element's real glyph boxes:
   11px eyebrow 6.16:1, 19px sub 8.72:1, headline 4.65:1, ochre stop 3.85:1.
   Re-measure before changing these or swapping the footage. */
.hero__scrim--h {
  background: linear-gradient(90deg,
    rgba(14, 15, 16, .9) 0%,
    rgba(14, 15, 16, .8) 34%,
    rgba(14, 15, 16, .62) 50%,
    rgba(14, 15, 16, .3) 68%,
    rgba(14, 15, 16, .24) 88%,
    rgba(14, 15, 16, .34) 100%);
}

.hero__scrim--v {
  background: linear-gradient(to top,
    rgba(14, 15, 16, .88) 0%,
    rgba(14, 15, 16, .13) 40%,
    rgba(14, 15, 16, .24) 100%);
}

.hero__inner {
  position: relative;
  max-width: var(--col);
  width: 100%;
  margin-inline: auto;
}

.hero__eyebrow {
  color: var(--ochre-light);
  font-weight: 500;              /* JetBrains Mono's heaviest loaded weight */
  margin-bottom: clamp(24px, 5vh, 48px);
}

.hero__h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(40px, 7.4vw, 116px);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 17ch;
  text-wrap: pretty;
}


.hero__h1-strong { font-weight: 800; }

.hero__stop { color: var(--ochre-light); }

.hero__lede {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(32px, 6vh, 64px);
}

.hero__sub {
  max-width: 44ch;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
  color: rgba(251, 245, 234, .82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__actions .btn {
  padding: 16px 26px;
  font-size: 15px;
}

.hero__arrow { font-family: var(--mono); }

.hero__scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(36px, 7vh, 72px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(251, 245, 234, .7);
}

.hero__scroll-rule {
  width: 34px;
  height: 1px;
  background: rgba(251, 245, 234, .4);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* --- 3. ink marquee ribbon ---------------------------------------------- */

.ribbon {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 22px 0;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid var(--rule-cream);
}

.ribbon__row {
  display: flex;
  gap: 44px;
  width: max-content;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ribbon__set {
  display: flex;
  gap: 44px;
}

.ribbon__bracket { color: var(--ochre); }

/* --- 4. premise --------------------------------------------------------- */

.premise {
  position: relative;
  z-index: 2;
  background: var(--ink);
}

.premise__eyebrow {
  color: var(--ochre-light);
  margin-bottom: clamp(28px, 5vh, 56px);
}

.premise__frame {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 3vw, 44px);
}

.premise__bracket {
  flex: 0 0 auto;
  width: clamp(14px, 2.2vw, 34px);
  border-top: 2px solid var(--ochre);
  border-bottom: 2px solid var(--ochre);
}

.premise__bracket--open { border-left: 2px solid var(--ochre); }

.premise__bracket--close { border-right: 2px solid var(--ochre); }

.premise__statement {
  font-weight: 300;
  font-size: clamp(24px, 3.6vw, 54px);
  line-height: 1.22;
  letter-spacing: -.02em;
  max-width: 28ch;
  text-wrap: pretty;
}

.premise__accent { color: var(--ochre); }

.premise__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(56px, 9vh, 110px);
  border-top: 1px solid var(--rule-cream);
  padding-top: 40px;
}

.premise__note {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(251, 245, 234, .66);
}

/* ===== Sections 5–7: services rail, how we work, who we help ===== */
/* --- 5. services rail (#services) --------------------------------------- */

.rail {
  position: relative;
  /* Scroll distance for the whole rail. Lower = the cards travel faster per
     pixel scrolled. 600vh made it feel like wading. */
  height: 420vh;
  background: var(--cream);
}

.rail__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream);
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

/* motion.js drives the rail with a transform. Native scrolling is additive with
   that transform, so it stays off while motion is running and is enabled only
   under reduced motion, where motion.js leaves the track untransformed and this
   is the sole way to reach cards 03 and 04. */
@media (prefers-reduced-motion: reduce) {
  .rail__viewport { overflow-x: auto; }
}

.rail__viewport::-webkit-scrollbar { display: none; }

.rail__bar {
  position: sticky;
  left: 0;
  flex: 0 0 auto;
  width: 100%;
  padding-inline: var(--pad-x);
}

.rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: clamp(28px, 5vh, 56px);
}

.rail__eyebrow {
  color: var(--ochre-dark);
  margin-bottom: 18px;
}

.rail__title { max-width: 20ch; }

.rail__hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .2em;
  color: var(--muted-ink);
}

.rail__bracket { color: var(--ochre-dark); }

/* One grid for the whole track: the four cards share the same row tracks, so the
   index row, icon, H3 and body land on identical baselines no matter how long
   the copy in any one card is. */
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 440px);
  grid-template-rows: auto 1fr auto auto;
  align-items: stretch;
  row-gap: clamp(16px, 2.4vh, 26px);
  column-gap: clamp(18px, 2vw, 32px);
  width: max-content;
  min-height: clamp(300px, 46vh, 440px);
  padding-left: max(var(--pad-x), (100% - var(--col)) / 2);
  will-change: transform;
}

.rail__track:focus-visible { outline-offset: 6px; }

.rail__card {
  --card-pad: clamp(24px, 2.6vw, 40px);
  position: relative;
  overflow: hidden;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  padding: var(--card-pad);
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  background: var(--cream);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

.rail__card:hover {
  border-color: var(--ochre);
  background: #fff;
}

.rail__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.rail__index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ochre-dark);
}

.rail__card-meta {
  text-align: right;
  color: var(--body-ink);
}

.rail__card-title {
  align-self: end;
  margin: 0;
}

.rail__card-text {
  align-self: end;
  margin: 0;
  max-width: 38ch;
}

.rail__progress { margin-top: clamp(24px, 4vh, 44px); }

.rail__progress-track {
  height: 1px;
  background: var(--rule-ink);
}

.rail__progress-fill {
  display: block;
  height: 1px;
  width: 0;
  background: var(--ochre);
}

/* --- 6. how we work (#how) ---------------------------------------------- */

.how {
  background: var(--cream);
  border-top: 1px solid var(--rule-ink);
}

.how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.how__intro {
  position: sticky;
  top: 120px;
  align-self: start;
}

.how__eyebrow {
  color: var(--ochre-dark);
  margin-bottom: 18px;
}

.how__title { margin-bottom: 20px; }

.how__lede { max-width: 34ch; }

.how__steps {
  display: flex;
  flex-direction: column;
}

.how__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--rule-ink);
}

.how__icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-top: 4px;
  color: var(--ochre-dark);
}

.how__step-title { margin-bottom: 10px; }

/* --- 7. who we help (#who) ----------------------------------------------- */

.who {
  background: var(--cream);
  border-top: 1px solid var(--rule-ink);
}

.who__head { margin-bottom: clamp(40px, 7vh, 88px); }

.who__eyebrow {
  color: var(--ochre-dark);
  margin-bottom: 18px;
}

.who__title { margin-bottom: 20px; }

.who__lede { max-width: 46ch; }

.who__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}

.who__card {
  display: flex;
  flex-direction: column;
}

.who__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(135deg, rgba(23, 24, 26, .05) 0 6px, transparent 6px 12px);
  transition: border-color .4s var(--ease);
}

.who__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted-ink);
  transition: transform 600ms var(--ease);
}

.who__corner {
  position: absolute;
  top: 10px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 1;
}

.who__corner--tl {
  left: 10px;
  border-top: 2px solid var(--ochre);
  border-left: 2px solid var(--ochre);
}

.who__corner--tr {
  right: 10px;
  border-top: 2px solid var(--ochre);
  border-right: 2px solid var(--ochre);
}

.who__card:hover .who__frame { border-color: var(--ochre); }

.who__card:hover .who__img { transform: scale(1.03); }

.who__index {
  display: flex;
  gap: 8px;
  margin-top: clamp(18px, 2vw, 24px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ochre-dark);
}

.who__card-title { margin: 10px 0 12px; }

.who__text { margin-bottom: clamp(20px, 2.4vw, 28px); }

.who__tag {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule-ink);
  color: var(--ochre-dark);
}

@media (prefers-reduced-motion: reduce) {
  .who__card:hover .who__img { transform: none; }
}

/* ===== Sections 8–13: results, ribbon, about, FAQ, contact, footer ===== */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.wrap--narrow { max-width: 940px; }

.results {
  position: relative;
  background: var(--ink);
  color: var(--cream);
}

.results__watermarks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70vh;
  display: flex;
  justify-content: center;
  gap: min(46vw, 620px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.results__bracket {
  font-weight: 300;
  font-size: min(40vw, 520px);
  line-height: .72;
  color: rgba(192, 128, 31, .1);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.results__inner {
  position: relative;
  z-index: 1;
}

.results__eyebrow {
  color: var(--ochre-light);
  margin-bottom: 18px;
}

.results__title {
  max-width: 22ch;
  margin-bottom: clamp(40px, 7vh, 90px);
}

.results__card {
  margin-bottom: clamp(28px, 5vh, 56px);
  background: var(--card-dark);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: clamp(28px, 3.4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}

.results__tag {
  display: block;
  color: var(--muted-cream);
  margin-bottom: 22px;
}

.results__headline {
  color: var(--cream);
  max-width: 24ch;
  margin-bottom: 16px;
}

.results__quote { margin: 0; }

.results__quote-text {
  color: var(--body-cream);
  max-width: 50ch;
}

.results__slot {
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-left: 1px solid rgba(192, 128, 31, .4);
  padding-left: clamp(20px, 2.5vw, 40px);
}

.results__figure { color: var(--ochre); }

.results__stars {
  color: var(--ochre);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
}

.results__label { color: var(--muted-cream); }





.pribbon {
  background: var(--cream);
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  padding: 14px 0;
  overflow: hidden;
}

.pribbon__track {
  display: flex;
  gap: 32px;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.pribbon__set {
  display: flex;
  gap: 32px;
}

.pribbon__chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.pribbon__bracket { color: var(--ochre-dark); }

.about { background: var(--cream); }

.about__eyebrow {
  color: var(--ochre-dark);
  margin-bottom: 18px;
}

.about__title {
  max-width: 24ch;
  margin-bottom: clamp(40px, 6vh, 72px);
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.about__frame {
  position: relative;
  /* Square, not the 4:3 used by the Who we help cards — the source headshot is
     1:1 and a landscape crop would take the top of the head off. */
  aspect-ratio: 1 / 1;
  max-width: 460px;
  border: 1px solid var(--rule-ink);
  border-radius: 4px;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, rgba(23, 24, 26, .05) 0 6px, transparent 6px 12px);
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__corner {
  position: absolute;
  top: 12px;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--ochre);
}

.about__corner--tl {
  left: 12px;
  border-left: 2px solid var(--ochre);
}

.about__corner--tr {
  right: 12px;
  border-right: 2px solid var(--ochre);
}

.about__caption {
  display: block;
  margin-top: 14px;
  color: var(--muted-ink);
}

.about__name { margin-bottom: 8px; }

.about__role {
  display: block;
  color: var(--ochre-dark);
  margin-bottom: 20px;
}

.about__para { max-width: 46ch; }

.about__para + .about__para { margin-top: 16px; }

.faq { background: var(--cream); }

.faq__title { margin-bottom: clamp(32px, 5vh, 64px); }

.faq__row { border-top: 1px solid var(--rule-ink); }

.faq__row:last-of-type { border-bottom: 1px solid var(--rule-ink); }

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vh, 28px) 0;
  font-family: var(--font);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .25s var(--ease);
}

.faq__summary::marker { content: ""; }

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary:hover { color: var(--ochre-dark); }

.faq__sign {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ochre-dark);
}

.faq [data-sign]::after { content: "+"; }

.faq__row[open] [data-sign]::after { content: "\2212"; }

.faq__a {
  max-width: 62ch;
  padding-bottom: clamp(22px, 3vh, 32px);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body-ink);
}

.contact {
  --mx: 50%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  background: var(--ochre);
  color: var(--ink);
}

.contact__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 600px at var(--mx) var(--my), rgba(251, 245, 234, .28), transparent 62%);
  pointer-events: none;
}

.contact__inner {
  position: relative;
  border-left: 2px solid rgba(23, 24, 26, .5);
  padding-left: clamp(18px, 3vw, 44px);
}

.contact__title {
  font-size: clamp(34px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -.04em;
  max-width: 18ch;
}


.contact__line--bold { font-weight: 800; }

.contact__body {
  max-width: 46ch;
  margin-top: clamp(28px, 5vh, 48px);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 6vh, 56px);
}

.contact__btn {
  padding: 17px 28px;
  font-size: 15.5px;
}

.contact .btn--ink:hover {
  background: var(--cream);
  color: var(--ink);
}

.contact__arrow { font-family: var(--mono); }

.foot {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(48px, 8vh, 88px) var(--pad-x) 36px;
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.foot__mark {
  height: 52px;
  width: auto;
  max-width: 100%;
  margin-bottom: 18px;
}

.foot__tagline {
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(251, 245, 234, .6);
}

.foot__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 14px;
}

.foot__link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: rgba(251, 245, 234, .72);
}

.foot__link:hover { color: var(--ochre-light); }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px clamp(16px, 3vw, 40px);
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-cream);
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
}

.foot__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--muted-cream);
  letter-spacing: .16em;
}

.foot__legal-link:hover { color: var(--ochre-light); }

.foot__copy {
  display: block;
  color: var(--muted-cream);
  letter-spacing: .16em;
}

/* ===== Stacking correction =====
   The hero is position:sticky, and its containing block is <main> — so it stays
   stuck for the whole page, not just its own scroll span. A positioned element
   also paints above the backgrounds of static siblings, so at 0.1 opacity the
   hero headline ghosted through every static section below it. Pin the hero to
   the bottom layer and lift every following section above it. */
.hero { z-index: 0; }

#services,
#how,
#who,
#results,
.pribbon,
#team,
#faq,
#contact,
.foot {
  position: relative;
  z-index: 1;
}

/* ===== Hero video: deferred load, cross-fade over the poster =====
   The video carries no autoplay attribute and no <source> children in the
   markup — autoplay makes a browser fetch the file regardless of `preload`,
   which would put ~2.5MB on the critical path. hero-video.js attaches the
   sources after load, and only when it is worth doing. */
.hero__video {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.hero__video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__video.is-playing { opacity: 0; }
}


/* ==========================================================================
   ===== Legal pages =====
   Long-form prose styles for privacy.html and terms.html.

   Every rule below is scoped under the .legal container class, so none of it
   can reach index.html. Fluid sizing only — the sole @media permitted here is
   prefers-reduced-motion.
   ========================================================================== */

/* On the legal pages the header is static rather than fixed. A fifteen-clause
   document gains nothing from sticky chrome, and it removes the need to reserve
   space for a header whose nav wraps to two rows on narrow screens — which
   could not be solved with a media query under this stylesheet's rules. */
.legal-page .site-header {
  position: static;
  backdrop-filter: none;
}

.legal-page .hero__progress,
.legal-page [data-progress-bar] { display: none; }

.legal { padding-top: clamp(32px, 6vh, 64px); }

/* Measure. 70ch sits in the 68–72ch band that keeps long prose scannable.
   min() so it can never push past its column on a narrow viewport. */
.legal .legal__measure { max-width: min(70ch, 100%); }

/* --- page head ---------------------------------------------------------- */

.legal .legal__head {
  padding-bottom: clamp(32px, 5vh, 64px);
  border-bottom: 1px solid var(--rule-ink);
}

.legal .legal__eyebrow {
  color: var(--ochre-dark);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.legal .legal__title {
  font-size: clamp(38px, 6.4vw, 84px);
  margin-bottom: clamp(18px, 2.6vh, 30px);
}

/* "Effective date" / "Last updated" line. */
.legal .legal__updated {
  display: block;
  color: var(--muted-ink);
  margin-bottom: clamp(22px, 3.2vh, 36px);
}

.legal .legal__lede {
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.65;
  color: var(--body-ink);
  max-width: min(70ch, 100%);
}

.legal .legal__lede strong { color: var(--ink); font-weight: 600; }

/* --- callout ------------------------------------------------------------ */

.legal .legal__callout {
  max-width: min(70ch, 100%);
  margin-top: clamp(26px, 4vh, 44px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--rule-ink);
  border-left: 3px solid var(--ochre);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ochre) 6%, transparent);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body-ink);
}

.legal .legal__callout strong { color: var(--ink); font-weight: 600; }

/* --- table of contents -------------------------------------------------- */

.legal .legal__toc {
  max-width: min(70ch, 100%);
  margin-top: clamp(34px, 5vh, 60px);
  padding-top: clamp(22px, 3vh, 32px);
  border-top: 1px solid var(--rule-ink);
}

.legal .legal__toc-title {
  color: var(--ochre-dark);
  margin-bottom: clamp(14px, 2vh, 20px);
}

.legal .legal__toc ol {
  margin: 0;
  padding-left: 2.4ch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24ch, 100%), 1fr));
  gap: 8px clamp(18px, 3vw, 44px);
  font-size: 15px;
  line-height: 1.5;
}

.legal .legal__toc li { padding-left: 4px; }
.legal .legal__toc li::marker {
  color: var(--ochre-dark);
  font-family: var(--mono);
  font-size: 12px;
}

/* --- sections ----------------------------------------------------------- */

/* Generous vertical rhythm so each clause reads as its own unit. */
.legal .legal__section { margin-top: clamp(48px, 8vh, 104px); }

.legal .legal__section > .h2 {
  /* The homepage .h2 runs to 68px, far too loud for fifteen numbered
     clauses. Scale it down for prose without leaving the type system. */
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.1;
  margin-bottom: clamp(16px, 2.2vh, 26px);
  scroll-margin-top: calc(var(--header-h) + 28px);
}

/* Sub-heading for subsections inside a clause. */
.legal .legal__h4 {
  font-family: var(--font);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--ink);
  margin: clamp(26px, 3.4vh, 38px) 0 clamp(10px, 1.4vh, 14px);
}

/* --- prose -------------------------------------------------------------- */

.legal .legal__section p,
.legal .legal__section li,
.legal .legal__section dd {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body-ink);
}

.legal .legal__section p { max-width: min(70ch, 100%); }
.legal .legal__section p + p { margin-top: clamp(14px, 1.9vh, 20px); }

.legal .legal__section strong { color: var(--ink); font-weight: 600; }

/* Lists. Markers in ochre; comfortable spacing between items. */
.legal .legal__section ul,
.legal .legal__section ol {
  max-width: min(70ch, 100%);
  margin: clamp(14px, 2vh, 20px) 0 0;
  padding-left: 2.6ch;
  display: grid;
  gap: clamp(9px, 1.3vh, 13px);
}

.legal .legal__section ul { list-style: disc; }
.legal .legal__section ol { list-style: decimal; }

.legal .legal__section li { padding-left: 4px; }
.legal .legal__section li::marker { color: var(--ochre-dark); }

/* Nested lists sit tighter and switch marker shape. */
.legal .legal__section li > ul,
.legal .legal__section li > ol {
  margin-top: clamp(8px, 1.1vh, 11px);
  gap: clamp(7px, 1vh, 10px);
}

.legal .legal__section li > ul { list-style: circle; }
.legal .legal__section li > ol { list-style: lower-alpha; }

/* Definition lists (defined terms, contact blocks). */
.legal .legal__section dl {
  max-width: min(70ch, 100%);
  margin: clamp(14px, 2vh, 20px) 0 0;
  display: grid;
  gap: clamp(10px, 1.5vh, 16px);
}

.legal .legal__section dt {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

.legal .legal__section dd { margin: 4px 0 0; }

/* Tables. Wrapped so a wide table scrolls itself rather than the page. */
.legal .legal__table {
  max-width: min(70ch, 100%);
  margin-top: clamp(16px, 2.2vh, 24px);
  overflow-x: auto;
}

.legal .legal__section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body-ink);
}

.legal .legal__section th,
.legal .legal__section td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule-ink);
}

.legal .legal__section th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ochre-dark);
  white-space: nowrap;
}

/* --- inline links ------------------------------------------------------- */

.legal .legal__lede a,
.legal .legal__callout a,
.legal .legal__toc a,
.legal .legal__section a,
.legal .legal__end a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-ink);
  text-underline-offset: .18em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}

.legal .legal__lede a:hover,
.legal .legal__callout a:hover,
.legal .legal__toc a:hover,
.legal .legal__section a:hover,
.legal .legal__end a:hover,
.legal .legal__lede a:focus-visible,
.legal .legal__callout a:focus-visible,
.legal .legal__toc a:focus-visible,
.legal .legal__section a:focus-visible,
.legal .legal__end a:focus-visible {
  color: var(--ochre-dark);
  text-decoration-color: currentColor;
}

/* --- tail --------------------------------------------------------------- */

.legal .legal__end {
  max-width: min(70ch, 100%);
  margin-top: clamp(48px, 8vh, 104px);
  padding-top: clamp(20px, 2.8vh, 30px);
  border-top: 1px solid var(--rule-ink);
  color: var(--muted-ink);
}

@media (prefers-reduced-motion: reduce) {
  .legal .legal__lede a,
  .legal .legal__callout a,
  .legal .legal__toc a,
  .legal .legal__section a,
  .legal .legal__end a { transition: none; }
}


/* ===== Services rail: faint photo bleed in the top-right corner =====
   Replaces the line-art icons. Each card carries a photograph of that step,
   washed back into the cream and dissolved with a radial mask anchored to the
   same corner on all four cards. Opacity is capped at .22: the card's meta
   line sits over this, and measured against a dark region of a photo it holds
   5.65:1 at .72 ink (it was 4.26:1 — failing — at the old .62). */
.rail__card-bleed {
  position: absolute;
  top: calc(-1 * var(--card-pad));
  right: calc(-1 * var(--card-pad));
  width: 74%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: 50% 40%;
  background-repeat: no-repeat;
  opacity: .22;
  filter: grayscale(.4);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(118% 118% at 100% 0%, #000 0%, #000 28%, transparent 72%);
          mask-image: radial-gradient(118% 118% at 100% 0%, #000 0%, #000 28%, transparent 72%);
}

/* keep every real child above the wash */
.rail__card > *:not(.rail__card-bleed) { position: relative; z-index: 1; }

.rail__card-bleed--01 { background-image: url("media/engage-01.webp"); }
.rail__card-bleed--02 { background-image: url("media/engage-02.webp"); }
.rail__card-bleed--03 { background-image: url("media/engage-03.webp"); }
.rail__card-bleed--04 { background-image: url("media/engage-04.webp"); }

/* the card lifts slightly on hover; let the image come with it */
.rail__card:hover .rail__card-bleed { opacity: .26; }

@media (prefers-reduced-motion: reduce) {
  .rail__card-bleed { transition: none; }
}

.foot__place {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-cream);
}

/* ===== Mobile navigation =====
   This is the one deliberate breakpoint in the stylesheet. Everything else
   reflows on clamp() and auto-fit, but a nav that collapses to a menu is a
   change of pattern, not of proportion, and cannot be expressed that way.
   820px is where six links plus the CTA stop fitting on one row — below it the
   nav used to wrap to two rows and eat 167px of a phone screen. */

.nav-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  line-height: 0;
}

.nav-toggle__icon {
  width: 42px;
  height: 42px;
  border-radius: 3px;
  display: block;
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px var(--pad-x) calc(var(--pad-x) - 4px);
    /* Opaque, not translucent: the hero headline is cream-on-near-black, so
       even 3% bleed-through read as dirt behind the menu items. */
    background: var(--cream);
    border-bottom: 1px solid var(--rule-ink);
    box-shadow: 0 18px 40px -28px rgba(23, 24, 26, .5);
  }

  .site-nav.is-open { display: flex; }

  .site-nav__link {
    min-height: 52px;
    font-size: 16px;
    opacity: 1;
    border-bottom: 1px solid var(--rule-ink);
  }

  .site-nav__cta {
    justify-content: center;
    margin-top: 16px;
    padding-block: 15px;
    font-size: 15px;
  }
}

/* the header is the panel's containing block */
.site-header { position: fixed; }
.legal-page .site-header { position: static; }

/* ===== Mobile layout corrections (same 820px breakpoint as the nav) ===== */
@media (max-width: 820px) {
  /* The toolkit intro is sticky so it holds beside the four rows on a wide
     screen. In one column there is nothing beside it, so it just rides down
     over the rows and sits on top of the text. */
  .how__intro {
    position: static;
    top: auto;
  }

  /* Stacked, the tag's own top rule read as a divider between cards rather
     than inside one, so it was unclear where a business ended. Close each
     card with a rule instead, and give the stack more room to breathe. */
  .who__grid { row-gap: clamp(30px, 6vw, 48px); }

  .who__tag {
    padding-top: 12px;
    border-top: 0;
  }

  .who__card {
    padding-bottom: clamp(26px, 5vw, 38px);
    border-bottom: 1px solid var(--rule-ink);
  }

  .who__card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* The founder section and the FAQ each carried a full --pad-y, stacking up to
   360px of empty cream between them. */
#team { padding-bottom: clamp(48px, 7vh, 92px); }
#faq  { padding-top: clamp(48px, 7vh, 92px); }

/* ===== Services rail on mobile =====
   Sideways travel did not read as an interaction on a phone — people did not
   realise the cards were moving with them. Same pinned section, but the cards
   now come up one at a time as you scroll, and the section releases once the
   last one has landed. Desktop keeps the ribbon. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .rail__viewport { overflow: hidden; }

  .rail__track {
    display: block;
    position: relative;
    width: auto;
    /* abspos children resolve against the padding box, so horizontal breathing
       room has to come from margin here, not padding */
    padding: 0;
    margin-inline: var(--pad-x);
    min-height: clamp(330px, 58vh, 460px);
    transform: none !important;
  }

  .rail__card {
    position: absolute;
    inset: 0;
    /* the track is no longer a grid, so the card cannot inherit its rows */
    grid-row: auto;
    grid-template-rows: auto 1fr auto auto;
    will-change: transform, opacity;
  }
}

/* Reduced motion: nothing is driven by scroll, so the cards must not be stacked
   on top of each other. Let the section collapse to an ordinary vertical list. */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .rail { height: auto; }

  .rail__viewport {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--pad-y);
  }

  .rail__track {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    width: auto;
    padding: 0;
    margin-inline: var(--pad-x);
    row-gap: 20px;
  }

  .rail__card {
    position: static;
    grid-row: auto;
    grid-template-rows: auto 1fr auto auto;
    width: auto;
  }
}