/* ============================================================
   COMPONENTS - buttons, logo, cards, statement panels, process
   steps, offerings, accordion, badges. All reference tokens.
   ============================================================ */

/* ---- Logo --------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.15rem;
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
/* Logo mark = an "R" cut from a structural-section profile, hard corners.
   Inline SVG (.logo__mark svg) so currentColor / accent theme it. */
.logo__mark {
  display: block;
  width: 34px; height: 34px;
  flex: none;
}
.logo__mark svg { width: 100%; height: 100%; display: block; }
.footer .logo { color: var(--color-ink); }
.footer .logo__mark { width: 30px; height: 30px; }

/* ---- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.4rem;
  min-height: 44px;        /* comfortable touch target */
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }

/* Primary = hi-vis orange pill (the one action color) */
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { box-shadow: var(--shadow-md); }
/* Orange-on-orange focus reads as a detached line - ring in bone instead */
.btn--primary:focus-visible { outline-color: var(--color-ink); }

/* Ghost = outlined pill (nav links). Border is the only shape affordance,
   so it sits at >=3:1 (line-strong), not the decorative hairline. */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--color-line-strong);
}
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Solid navy */
.btn--dark { background: var(--text); color: var(--bg); }
.btn--dark:hover { box-shadow: var(--shadow-md); }

.btn--lg { padding: 1rem 2rem; font-size: 1rem; }

/* Text link with animated chevron */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;          /* comfortable touch target */
  padding-block: 0.4rem;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.link-cta::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.link-cta:hover::after { transform: translateX(4px); }

/* ---- Drafting note (dimension-tick annotation) ---------------
   Replaces the old side-stripe/eyebrow patterns: a short accent
   dimension line (|——|) drawn above the note, like a drafted
   callout on a sheet. Pure CSS, themes via tokens. */
.dim-note::before {
  content: "";
  display: block;
  width: 30px; height: 9px;
  margin-bottom: var(--space-3);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 100% 0 / 1px 100% no-repeat;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.badge__dot {
  width: 7px; height: 7px;
  background: var(--color-ink-soft);   /* passive decoration is bone, not orange */
}

/* ---- Hero (full-bleed engineered schematic) ----------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 900px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--color-bg);
}
/* The hero schematic IS the imagery - an inline SVG span drawing, not a photo. */
/* Schematic sits BEHIND the message — dropped back so the headline dominates. */
.hero__media { position: absolute; inset: 0; z-index: 0; color: var(--color-ink); opacity: 0.58; }
.hero__media svg { width: 100%; height: 100%; display: block; }
/* Value structure / legibility scrim baked over the line-art so text sits clean. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* horizontal: darken behind the (left-anchored) headline, clear on the office side */
    linear-gradient(90deg, rgb(22 20 18 / 0.88) 0%, rgb(22 20 18 / 0.64) 42%, rgb(22 20 18 / 0) 68%),
    /* vertical: depth + bottom anchor */
    linear-gradient(180deg, rgb(22 20 18 / 0.45) 0%, rgb(22 20 18 / 0.12) 30%, rgb(22 20 18 / 0.6) 72%, rgb(22 20 18 / 0.96) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 8rem; padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero h1 { text-transform: uppercase; max-width: 16ch; color: var(--color-ink); }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero__sub {
  margin-top: var(--space-6); font-size: var(--fs-lead);
  color: var(--color-ink); opacity: 0.92; max-width: 52ch;
}
.hero__actions { margin-top: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---- Statement panels (sticky stack) ------------------------ */
.panels { position: relative; }
.panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding-block: var(--section-y);
  color: var(--color-ink);
  overflow: hidden;
}
.panel__bg { position: absolute; inset: 0; z-index: 0; }
/* Faint drafting plan-grid + dimension ticks layered behind each panel
   (one deliberate texture system, not a generic noise filter). */
.panel__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  opacity: 0.5;
}
.panel--1 .panel__bg::before { background-size: 56px 56px; background-position: 0 0; }
.panel--2 .panel__bg::before { background-size: 40px 40px; background-position: 20px 20px; }
.panel--3 .panel__bg::before { background-size: 72px 72px; background-position: 0 0; }
.panel__content { position: relative; z-index: 1; }
.panel h2 { color: inherit; max-width: 15ch; font-size: clamp(2.6rem, 6.5vw, 5.25rem); line-height: 0.95; }
.panel p { margin-top: var(--space-6); max-width: 50ch; color: var(--text-on-dark-soft); font-size: var(--fs-lead); }
/* Temperature arc: legacy (cool/dark) -> leverage (warm ember). */
.panel--1 .panel__bg { background: linear-gradient(160deg, var(--color-surface-cream), var(--color-bg)); }
.panel--2 .panel__bg { background: linear-gradient(160deg, var(--color-bg) 55%, oklch(19% 0.03 50)); }
.panel--3 .panel__bg { background: linear-gradient(160deg, var(--color-bg) 35%, oklch(24% 0.07 48)); }
/* Statement + schematic vignette split: the text carries the claim, the
   drawing occupies the field that used to sit empty at wide viewports. */
.panel__content {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.panel__fig { color: var(--color-ink); max-width: 480px; justify-self: end; width: 100%; }
.panel__fig svg { width: 100%; height: auto; display: block; }
/* Alternate the drawing side so the stack reads choreographed, not stamped. */
.panel--2 .panel__fig { order: -1; justify-self: start; }
.panel--3 h2 em, .panel em { color: var(--color-accent); font-style: normal; }
@media (max-width: 860px) {
  .panel__content { grid-template-columns: 1fr; gap: var(--space-8); }
  .panel--2 .panel__fig { order: 0; }
  .panel__fig { max-width: 380px; justify-self: start; }
}
/* Short viewports (landscape phones): the fig would push text past 100vh. */
@media (max-height: 700px) and (max-width: 860px) {
  .panel__fig { display: none; }
}

/* ---- About -------------------------------------------------- */
/* Portrait slot now holds the engineered "backbone" schematic (inline SVG),
   not a photo - no crop frame, let the drawing breathe to the edge. */
.about__portrait { align-self: stretch; margin: 0; }
.about__portrait img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--color-line-strong);
}
.about__cap { margin-top: var(--space-5); }
.about__cap-name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.2rem; letter-spacing: var(--ls-tight); color: var(--color-ink);
}
.about__cap-name::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--color-accent); margin-right: 0.55rem;
}
.about__cap-role { display: block; font-size: var(--fs-small); color: var(--text-muted); letter-spacing: 0.04em; margin-top: 3px; }
.about__portrait svg { width: 100%; height: auto; display: block; }
.about__body p + p { margin-top: var(--space-5); }
.about__body p { color: var(--text-muted); font-weight: var(--fw-medium); }
/* Lead line: one display voice per viewport - the h2 is the poster,
   the lead drops to Archivo 800 so hierarchy has a real second level. */
.about__body .lead-line {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  color: var(--text);
  margin-bottom: var(--space-6);
}

/* ---- Framework - horizontal blueprint cross-section ---------
   Not a card grid: one continuous drawing that builds left->right
   (Ground -> Bridge -> Scale), with the three stages hung as
   dimension-line annotations climbing in size along a shared datum.
   The Process steps live inside this same macro-arc. */
.framework { position: relative; margin-top: var(--space-12); }

/* The three stages strung along the datum rule. */
.framework__arc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;            /* stages climb from a common baseline */
  position: relative;
  padding-top: var(--space-8);
}
/* The shared datum line the whole arc sits on. */
.framework__arc::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0;
  border-bottom: 2px solid var(--color-line-strong);
}
.stage {
  position: relative;
  padding-bottom: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
/* Stage marker tick dropping onto the datum (drafting station mark). */
.stage::after {
  content: ""; position: absolute;
  left: 0; bottom: -1px;
  width: 2px; height: 16px;
  background: var(--color-line-strong);
}
.stage__icon { color: var(--color-ink); margin-bottom: var(--space-2); }
.stage__icon svg { display: block; }
/* Stages climb in size + voice: Ground quiet, Scale loud. */
.stage--ground   .stage__icon svg { width: 40px; height: 40px; }
.stage--bridge   .stage__icon svg { width: 52px; height: 52px; }
.stage--scale    .stage__icon svg { width: 68px; height: 68px; }
.stage__label {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
}
.stage--ground .stage__label { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--text-muted); }
.stage--bridge .stage__label { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.stage--scale  .stage__label { font-size: clamp(1.8rem, 3.8vw, 2.7rem); color: var(--color-accent); }
.stage p { color: var(--text-muted); max-width: 34ch; }
.stage__example {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.stage__example::before {
  content: "";
  display: block;
  width: 30px; height: 9px;
  margin-bottom: var(--space-2);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 100% 0 / 1px 100% no-repeat;
}
@media (max-width: 760px) {
  .framework__arc { grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
  .framework__arc::after { display: none; }
  .stage { border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-8); }
  .stage::after { display: none; }
}

/* ---- Engagement stations (on the framework datum) ------------
   Five compact stations under the Ground/Bridge/Scale arc: the
   engagement steps drawn on the SAME datum, not a second framework. */
.stations { margin-top: var(--space-10); }
.stations__k {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-6);
}
.stations__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  counter-reset: station;
}
.station {
  position: relative;
  padding-top: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
/* Station tick dropping from the arc's datum rhythm. */
.station::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 2px; height: 12px; background: var(--color-line-strong);
}
.station__icon { color: var(--color-ink); margin-bottom: var(--space-2); }
.station__icon svg { width: 28px; height: 28px; display: block; }
.station b { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.005em; }
.station > span:not(.station__icon) { color: var(--text-muted); font-size: 0.9rem; max-width: 24ch; }
@media (max-width: 860px) {
  .stations__list { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
}
@media (max-width: 520px) {
  .stations__list { grid-template-columns: 1fr; }
}

/* ---- Process steps (vertical spine / timeline) --------------
   No numeral column, no rounded icon-tiles. A single drawn spine
   in the left gutter encodes progression; the step icon sits inline
   on the heading baseline. The ledger hangs outside the text column. */
.steps {
  display: grid;
  gap: 0;
  margin-top: var(--space-12);
  position: relative;
  padding-left: clamp(0px, 2vw, 40px);   /* negative-pull the spine into the gutter */
}
/* The continuous spine line connecting all steps. */
.steps::before {
  content: ""; position: absolute;
  left: clamp(15px, calc(2vw + 15px), 55px);
  top: var(--space-6); bottom: var(--space-6);
  width: 2px;
  background: var(--color-line-strong);
}
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
}
.step:last-child { border-bottom: 1px solid var(--color-line); }
/* Icon sits ON the spine - a station along the timeline. */
.step__icon {
  width: 32px; height: 32px;
  color: var(--color-ink);
  background: var(--color-bg);   /* mask the spine where the icon sits */
  display: grid; place-items: center;
  margin-left: -1px;
}
.step__icon svg { width: 32px; height: 32px; display: block; }
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--text-muted); max-width: 60ch; }
/* Statement lines: accent spec-labels, not italic serif. */
.process__statements {
  margin-top: var(--space-16);
  display: grid; gap: var(--space-5);
  max-width: 60ch;
}
.process__statements p {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.05;
}
.process__statements p em { font-style: normal; color: var(--color-accent); }

/* ---- Offerings ---------------------------------------------- */
/* Offerings as full-width alternating editorial rows - not a card grid. */
.offers { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 7rem); margin-top: var(--space-16); }
.offer {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.offer:nth-child(even) .offer__media { order: 2; }   /* alternate drawing side */
/* Media now holds an inline bespoke SVG schematic on a faint drafting field. */
.offer__media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-cream);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
}
.offer__media svg { width: 100%; height: 100%; display: block; }
/* Quiet aside: drafted callout with a dimension tick, no stripe/italic. */
.offer__body { max-width: 44ch; }
.offer__quote {
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  font-size: var(--fs-lead);
}
.offer__quote::before {
  content: "";
  display: block;
  width: 30px; height: 9px;
  margin-bottom: var(--space-3);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 100% 0 / 1px 100% no-repeat;
}
.offer h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  line-height: 1.08;
  margin-bottom: var(--space-4);
}
.offer p { color: var(--text-muted); margin-bottom: var(--space-6); font-size: var(--fs-lead); }
@media (max-width: 760px) {
  .offer { grid-template-columns: 1fr; gap: var(--space-6); }
  .offer:nth-child(even) .offer__media { order: 0; }
}

/* ---- Principles ("Built to be trusted") ---------------------
   Not a 3-col grid: three stacked hairline-ruled rows, each with a
   bespoke icon in the left gutter. Grouping by proximity + rules,
   not equal-width boxes - a tight, quiet strip. */
.principles {
  margin-top: var(--space-10);
  display: flex; flex-direction: column;
  max-width: 880px;
}
.principle {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-line);
}
.principle:last-child { border-bottom: 1px solid var(--color-line); }
.principle__icon { color: var(--color-ink); }
.principle__icon svg {
  width: 32px; height: 32px; display: block;
  /* draws left->right on reveal (gated below) */
}
.principle h3 { margin-bottom: var(--space-2); }
.principle p { color: var(--text-muted); max-width: 60ch; }

/* ---- FAQ accordion ------------------------------------------ */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.005em;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.25;
  color: var(--text);
}
.faq__icon {
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  display: grid; place-items: center;
  position: relative;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after  { width: 2px; height: 12px; }
.faq__trigger[aria-expanded="true"] .faq__icon { background: var(--color-accent); border-color: var(--color-accent); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
/* Animated via grid-template-rows 0fr->1fr (GPU-friendly, no layout thrash,
   no JS height measurement). JS flips gridTemplateRows inline. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq__panel-inner {
  overflow: hidden;          /* also gives the grid item min-height:0 so it can collapse */
  color: var(--text-muted);
  max-width: var(--maxw-text);
}
/* Spacing lives INSIDE the clipped box: padding on the inner itself still
   paints at 0fr and leaks a 24px sliver of every "closed" answer. */
.faq__panel-inner > :last-child { margin-bottom: var(--space-6); }

/* ---- Final CTA - stark type-only hard full-stop -------------
   Differs from the hero deliberately: no photo, flat asphalt, oversized
   Anton left-anchored, with a reused bridge-span detail pushed to the
   right so the page bookends rhyme by MOTIF, not by repeated photo. */
.cta-band {
  background: var(--color-surface-cream);
  color: var(--color-ink);
  border-top: 2px solid var(--color-accent);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem);
  text-align: left;
  position: relative;
  overflow: hidden;
}
/* Reused span detail - quiet bone line-art, asymmetric to the right. */
.cta-band__media {
  position: absolute; right: 0; bottom: 0;
  width: min(46%, 560px);
  z-index: 0; color: var(--color-ink); opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
          mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.cta-band__media svg { width: 100%; height: auto; display: block; }
.cta-band h2 {
  color: var(--color-ink);
  max-width: 16ch;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: 0.96;
}
.cta-band h2 em { font-style: normal; color: var(--color-accent); }
.cta-band p { color: var(--text-on-dark-soft); margin-top: var(--space-5); margin-bottom: var(--space-8); max-width: 46ch; font-size: var(--fs-lead); }
.cta-band > * { position: relative; z-index: 1; }
/* For readers whose desktop has no mail client bound to mailto:. */
.cta-band__alt { font-size: var(--fs-small) !important; margin-top: var(--space-4) !important; margin-bottom: 0 !important; }
.cta-band__email { color: var(--color-ink); font-weight: var(--fw-semibold); user-select: all; }
@media (max-width: 720px) {
  .cta-band__media { width: 70%; opacity: 0.32; }
}

/* ---- Scroll-reveal animation hook ---------------------------
   Reserved for genuine lists (offer rows, framework stages, steps,
   principles) - not a default on every element. Hidden state is scoped
   to .js so the page is fully visible without JS (no permanent blank). */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Calmer entrance for the big statement panels: pure crossfade, no slide. */
.js .reveal--calm { transform: none; }

/* Stagger grouped lists so they cascade rather than firing at once. */
.framework__arc > .reveal:nth-child(2),
.steps > .reveal:nth-child(2),
.principles > .reveal:nth-child(2) { transition-delay: 70ms; }
.framework__arc > .reveal:nth-child(3),
.steps > .reveal:nth-child(3),
.principles > .reveal:nth-child(3) { transition-delay: 140ms; }
.steps > .reveal:nth-child(4) { transition-delay: 210ms; }
.steps > .reveal:nth-child(5) { transition-delay: 280ms; }

/* ---- SVG "drawn-on-paper" reveal ----------------------------
   The engineered gesture: line-art draws itself in as it enters view.
   Applied to illustration SVGs flagged .draw-on; JS adds .is-visible. */
.js .draw-on svg [stroke]:not([stroke-dasharray]),
.js .draw-on svg path:not([stroke-dasharray]),
.js .draw-on svg line:not([stroke-dasharray]),
.js .draw-on svg rect:not([stroke-dasharray]) {
  /* dash the strokes; large dash so any path length is covered.
     Elements with an authored dasharray (drafted dashed lines) are
     excluded - the draw trick would overwrite their dash pattern. */
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.js .draw-on svg [stroke-dasharray] {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.6s;
}
.js .draw-on.is-visible svg [stroke-dasharray] { opacity: 1; }
.js .draw-on.is-visible svg [stroke]:not([stroke-dasharray]),
.js .draw-on.is-visible svg path:not([stroke-dasharray]),
.js .draw-on.is-visible svg line:not([stroke-dasharray]),
.js .draw-on.is-visible svg rect:not([stroke-dasharray]) {
  stroke-dashoffset: 0;
}
/* Filled elements (nodes, accent fields) shouldn't flicker - fade them. */
.js .draw-on svg [fill]:not([fill="none"]) { opacity: 0; transition: opacity 0.6s var(--ease) 0.5s; }
.js .draw-on.is-visible svg [fill]:not([fill="none"]) { opacity: 1; }

/* Hero: ONE signature load sequence - kicker -> h1 -> sub -> actions,
   faster than the body reveal, staggered via --i. */
.js .hero__inner > * {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rise 0.6s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.12s);
}
.js .hero__media svg { animation: hero-settle 1.2s var(--ease) both; }
@keyframes hero-rise { to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { transform: scale(1.03); opacity: 0; } to { transform: none; opacity: 1; } }

/* Principles icons / rules draw left->right on entry. */
.js .principle__icon svg { transform-origin: left center; }

/* Hard-edge hover for offer rows (replaces the soft card-lift):
   a 2px accent rule draws across the top edge + hard-offset shadow. */
.offer { position: relative; }
.offer::before {
  content: ""; position: absolute;
  left: 0; top: calc(-1 * var(--space-4)); height: 2px; width: 0;
  background: var(--color-accent);
  transition: width var(--dur) var(--ease);
}
.offer:hover::before { width: 100%; }
.offer:hover .offer__media {
  border-color: var(--color-line-strong);
  box-shadow: 4px 4px 0 0 var(--color-accent);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal, .framework__arc > .reveal, .steps > .reveal, .principles > .reveal { transition-delay: 0ms; }
  .js .draw-on svg [stroke]:not([stroke-dasharray]),
  .js .draw-on svg path:not([stroke-dasharray]), .js .draw-on svg line:not([stroke-dasharray]), .js .draw-on svg rect:not([stroke-dasharray]) { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .js .draw-on svg [stroke-dasharray] { opacity: 1; transition: none; }
  .js .draw-on svg [fill]:not([fill="none"]) { opacity: 1; transition: none; }
  .js .hero__inner > * { opacity: 1; transform: none; animation: none; }
  .js .hero__media svg { animation: none; }
  .offer::before { transition: none; }
}

/* ---- Case sheet chrome (SHEET A-101) -------------------------
   The one project story drafted as a drawing sheet: number strip +
   revision history. Sits above the dashboard "drawing". */
.sheet { margin-top: var(--space-10); border: 1px solid var(--color-line-strong); }
.sheet__bar {
  display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
}
.sheet__no {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-accent);
}
.sheet__title { font-weight: var(--fw-semibold); color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; }
.sheet__client { margin-left: auto; color: var(--text-muted); }
.sheet__revs { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.sheet__revs th {
  text-align: left; font-weight: var(--fw-semibold); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem;
  padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--color-line);
}
.sheet__revs td { padding: var(--space-3) var(--space-5); color: var(--text-muted); border-bottom: 1px solid var(--color-line); }
.sheet__revs tr:last-child td { border-bottom: none; }
.sheet__revs td:first-child { font-family: var(--font-display); color: var(--text); width: 3.5rem; }
.sheet__acc { color: var(--color-accent); font-weight: var(--fw-semibold); white-space: nowrap; }

/* ---- Offer ladder (Three ways in) ----------------------------
   Three rungs climbing a shared datum; the flagship rung carries the
   accent frame. Same elevation grammar as the framework arc. */
.ladder {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  position: relative;
  padding-bottom: var(--space-4);
}
.ladder::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 2px solid var(--color-line-strong);
}
.rung { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0 var(--space-6); position: relative; }
.rung::after {
  content: ""; position: absolute; left: 0; bottom: calc(-1 * var(--space-4) - 1px);
  width: 2px; height: 14px; background: var(--color-line-strong);
}
/* Rungs climb: padding-top staggers the tops against the shared datum. */
.rung--1 { padding-top: var(--space-16); }
.rung--2 { padding-top: var(--space-8); }
.rung--3 { padding-top: 0; }
.rung__meta { font-size: var(--fs-small); color: var(--text-muted); }
.rung__meta::before {
  content: "";
  display: block;
  width: 30px; height: 9px;
  margin-bottom: var(--space-3);
  background:
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 100% 0 / 1px 100% no-repeat;
}
.rung__name { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.rung p { color: var(--text-muted); }
.rung .link-cta { margin-top: auto; }
/* The flagship rung: accent frame + accent dimension tick. */
.rung--hot { border: 1px solid var(--color-accent); padding-inline: var(--space-5); }
.rung--hot .rung__meta::before {
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) 100% 0 / 1px 100% no-repeat;
}
.rung--hot .rung__meta { color: var(--color-accent-2-ink); }
@media (max-width: 860px) {
  .ladder { grid-template-columns: 1fr; align-items: start; }
  .ladder::after { display: none; }
  .rung, .rung--1, .rung--2, .rung--3 { padding-top: var(--space-6); }
  .rung { border-bottom: 1px solid var(--color-line); }
  .rung::after { display: none; }
  .rung--hot { border: 1px solid var(--color-accent); }
}

/* ---- Stage disclosures ("On a real job") ---------------------
   The RAW Method's interactive layer: drafted annotations that open
   on demand. Same intrinsic-size animation as the FAQ. */
.stage__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: 0.02em;
}
.stage__toggle-icon {
  width: 18px; height: 18px; position: relative; flex: none;
  border: 1px solid var(--color-line-strong);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.stage__toggle-icon::before, .stage__toggle-icon::after {
  content: ""; position: absolute; background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.stage__toggle-icon::before { width: 8px; height: 2px; left: 4px; top: 7px; }
.stage__toggle-icon::after { width: 2px; height: 8px; left: 7px; top: 4px; }
.stage__toggle[aria-expanded="true"] .stage__toggle-icon { background: var(--color-accent); border-color: var(--color-accent); }
.stage__toggle[aria-expanded="true"] .stage__toggle-icon::before { background: var(--color-accent-ink); }
.stage__toggle[aria-expanded="true"] .stage__toggle-icon::after { transform: scaleY(0); opacity: 0; }
.stage__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.stage__detail-inner { overflow: hidden; }
.stage__detail-inner p {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding-top: var(--space-3);
  max-width: 34ch;
}
.stage__detail-inner p:last-child { padding-bottom: var(--space-2); }

/* ---- Proof: recreated executive dashboard ------------------- */
.dash { margin-top: var(--space-12); background: var(--color-bg); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-lg); }
.dash__bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); background: var(--color-surface); font-size: var(--fs-small); }
.dash__id { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.dash__sq { width: 12px; height: 12px; background: var(--color-accent); display: inline-block; }
.dash__proj { color: var(--text-muted); }
.dash__period { margin-left: auto; color: var(--text-muted); letter-spacing: 0.04em; }
.dash__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-line); }
.dash__tile { background: var(--color-surface); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 148px; }
.dash__tile--wide { grid-column: span 2; }
.dash__k { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); }
.dash__big { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 0.9; color: var(--color-ink); }
.dash__big small { font-size: 0.45em; color: var(--text-muted); margin-left: 2px; }
.dash__sub { font-size: var(--fs-small); color: var(--text-muted); margin-top: auto; }
.dash--acc { color: var(--color-accent); }
.dash__rows { display: flex; flex-direction: column; gap: 6px; }
.dash__rows li { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; border-bottom: 1px solid var(--color-line); padding-bottom: 5px; }
.dash__rows li span { color: var(--text-muted); }
.dash__rows li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash__tbl { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dash__tbl th { text-align: right; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.1em; padding: 0 0 6px; border-bottom: 1px solid var(--color-line); }
.dash__tbl th:first-child { text-align: left; }
.dash__tbl td { text-align: right; padding: 5px 0; color: var(--color-ink); }
.dash__tbl td:first-child { text-align: left; color: var(--text-muted); }
.dash__tbl tfoot td { border-top: 1px solid var(--color-line-strong); font-weight: 700; padding-top: 7px; }
.dash__bar2 { height: 6px; background: color-mix(in srgb, var(--color-ink) 12%, transparent); }
.dash__bar2 span { display: block; height: 100%; background: var(--color-accent); }
.dash__metrics { display: flex; flex-direction: column; gap: 9px; }
.dash__metrics li { display: grid; grid-template-columns: 64px 1fr 26px; align-items: center; gap: 8px; font-size: 0.74rem; }
.dash__metrics li span { color: var(--text-muted); }
.dash__metrics li b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .dash__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dash__grid { grid-template-columns: 1fr; } .dash__tile--wide { grid-column: span 1; } .dash__period { margin-left: 0; } }

/* Phones: the schematic's drafted labels collide with the headline at
   narrow widths - drop them and let the linework read as pure texture. */
@media (max-width: 640px) {
  .hero__media text { display: none; }
  .hero__media { opacity: 0.42; }
}

/* ---- Scroll performance --------------------------------------
   The SVG "draw-on" is paint-bound (stroke-dashoffset re-rasterizes each
   frame). On phones that can chop, so below 720px we drop the draw and
   fade the SVG in via opacity (compositor-cheap). Desktop keeps the draw. */
@media (max-width: 720px) {
  .js .draw-on svg [stroke]:not([stroke-dasharray]),
  .js .draw-on svg path:not([stroke-dasharray]), .js .draw-on svg line:not([stroke-dasharray]), .js .draw-on svg rect:not([stroke-dasharray]) {
    stroke-dasharray: none; stroke-dashoffset: 0; transition: none;
  }
  .js .draw-on svg [stroke-dasharray] { opacity: 1; transition: none; }
  .js .draw-on svg [fill]:not([fill="none"]) { opacity: 1; transition: none; }
  .js .draw-on { opacity: 0; transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .js .draw-on.is-visible { opacity: 1; transform: none; }
}
/* Skip rendering the heavy below-fold sections until they near the viewport. */
#work     { content-visibility: auto; contain-intrinsic-size: auto 760px; }
#services { content-visibility: auto; contain-intrinsic-size: auto 1700px; }

/* ---- Dashboard disclaimer caption ---- */
.dash__note { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-muted); letter-spacing: 0.01em; }

/* ---- Founder note (personal, first-person, under the About) ---- */
.founder-note { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-line); max-width: var(--maxw-text); }
/* Drafted small signage heading, not a tracked eyebrow. */
.founder-note__k {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.founder-note__k::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--color-accent);
  margin-right: 0.55rem;
}
.founder-note p { margin-top: var(--space-4); color: var(--text-muted); }
.founder-note p:first-of-type { color: var(--text); }
.founder-note__sign { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--color-ink); margin-top: var(--space-6) !important; letter-spacing: var(--ls-tight); }

/* ---- Funnel: hero reversal, Walkthrough offer, dashboard CTA ---- */
.hero__reversal { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--color-ink); opacity: 0.72; letter-spacing: 0.02em; }
.walk { max-width: 820px; }
.walk h2 { margin-top: var(--space-3); margin-bottom: var(--space-5); }
.walk__lead { font-size: var(--fs-lead); max-width: var(--maxw-text); }
.walk__terms { margin-top: var(--space-4); }
.walk__cta { margin-top: var(--space-7); display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.walk__reversal { font-size: var(--fs-small); letter-spacing: 0.02em; }
.dash__cta { margin-top: var(--space-5); }

/* ---- Drenched section: the offer is the loudest thing on the page.
   The one full-orange moment - asphalt type on the hi-vis field,
   inverted button, no competing accent. ---- */
.section--drench {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding-block: clamp(5rem, 11vw, 10rem);
}
.section--drench h2 {
  color: var(--color-accent-ink);
  font-size: clamp(2.6rem, 6vw, 5rem);
}
.section--drench .walk__lead { color: var(--color-accent-ink); }
.section--drench .walk__terms,
.section--drench .walk__reversal { color: rgb(22 20 18 / 0.72); }
.section--drench .btn--dark { background: var(--color-accent-ink); color: var(--color-ink); }
.section--drench .btn--dark:hover { box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }
.section--drench .btn--dark:focus-visible { outline-color: var(--color-accent-ink); }
.section--drench ::selection { background: var(--color-accent-ink); color: var(--color-accent); }

/* ============================================================
   MOTION LAYER (GSAP) - gating + rail + micro-interactions.
   html.motion-pre  = set synchronously by main.js when the motion
                      layer WILL load (not reduced-motion, desktop-ish):
                      hides GSAP-owned elements so they can draft in.
   html.motion-on   = set by motion.js once GSAP owns the page.
   If vendor files fail, main.js removes .motion-pre and the CSS
   fallbacks (hero-settle, draw-on) take over untouched.
   ============================================================ */

/* Lenis owns scrolling; native smooth-behavior would fight it. */
html.motion-on { scroll-behavior: auto; }

/* GSAP-owned entrances: suppress the CSS fallback animations. */
.motion-pre .hero__media svg { opacity: 0; animation: none; }
.motion-pre .hero__inner > * { opacity: 0; animation: none; }
/* GSAP-owned SVG scenes: suppress the CSS draw-on so they don't fight. */
.motion-pre .offer__media.draw-on svg *,
.motion-pre .panel__fig.draw-on svg *,
.motion-pre .cta-band__media.draw-on svg * {
  transition: none !important;
}

/* ---- Scroll rail (the through-line) --------------------------
   A drafted station line down the left gutter: hairline + scroll
   progress fill + the travelling signal head + current-station label.
   Built by motion.js; desktop, fine-pointer only. */
.rail {
  position: fixed;
  left: 22px; top: 0; bottom: 0;
  width: 2px;
  z-index: calc(var(--z-nav) - 1);
  pointer-events: none;
  opacity: 0;                        /* motion.js flips this after the hero */
  transition: opacity var(--dur-slow) var(--ease);
}
.rail__line { position: absolute; inset: 0; background: var(--color-line); }
.rail__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: var(--color-accent);
}
.rail__tick {
  position: absolute; left: -3px; width: 8px; height: 1px;
  background: var(--color-line-strong);
}
.rail__head {
  position: absolute; left: -3px; top: 0;
  width: 8px; height: 8px;
  background: var(--color-accent);
}
.rail__lbl {
  position: absolute; left: 12px; top: -4px;
  font-size: 0.62rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 1279px), (pointer: coarse) { .rail { display: none; } }

/* ---- Continuous signal: seam conduits (built by motion.js) ---- */
.sig-link {
  position: absolute;
  top: -70px;
  left: clamp(2.5rem, 8vw, 9rem);
  width: 80px; height: 140px;
  pointer-events: none;
  z-index: 3;
  color: var(--color-accent);
}
.sig-link--r { left: auto; right: clamp(2.5rem, 8vw, 9rem); }
.sig-link svg { width: 100%; height: 100%; display: block; }
/* On the drenched section the signal prints in asphalt. */
.section--drench .sig-link { color: var(--color-accent-ink); }
@media (max-width: 1099px) { .sig-link { display: none; } }
@media print { .sig-link { display: none; } }

/* ---- Crosshair: cursor-as-instrument over the schematics ---- */
.xhair { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease); overflow: hidden; }
.xhair.is-live { opacity: 1; }
.xhair__h { position: absolute; left: 0; right: 0; height: 1px; background: var(--color-accent); opacity: 0.4; }
.xhair__v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-accent); opacity: 0.4; }
.xhair__coord {
  position: absolute;
  font-size: 0.62rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Micro-interactions --------------------------------------
   Primary button: drafting corner ticks extend on hover. */
.btn--primary { position: relative; }
.btn--primary::before, .btn--primary::after {
  content: ""; position: absolute;
  width: 10px; height: 10px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  pointer-events: none;
}
.btn--primary::before {
  top: -5px; left: -5px;
  border-top: 2px solid var(--color-ink);
  border-left: 2px solid var(--color-ink);
  transform: translate(4px, 4px);
}
.btn--primary::after {
  bottom: -5px; right: -5px;
  border-bottom: 2px solid var(--color-ink);
  border-right: 2px solid var(--color-ink);
  transform: translate(-4px, -4px);
}
.btn--primary:hover::before, .btn--primary:hover::after,
.btn--primary:focus-visible::before, .btn--primary:focus-visible::after {
  opacity: 1; transform: translate(0, 0);
}

/* Text link: the arrow rides a dimension line that draws on hover. */
.link-cta {
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.link-cta:hover, .link-cta:focus-visible { background-size: 100% 1px; }

/* Logo mark: quick re-draft of the R on hover. */
.logo:hover .logo__mark path {
  stroke-dasharray: 60;
  animation: logo-redraft 0.5s var(--ease);
}
@keyframes logo-redraft {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-pre .hero__media svg, .motion-pre .hero__inner > * { opacity: 1; animation: none; }
  .rail { display: none; }
  .logo:hover .logo__mark path { animation: none; stroke-dasharray: none; }
  .btn--primary::before, .btn--primary::after { transition: none; }
}

/* JEFF-EGG START (joke easter egg; remove this block to revert) */
.jeff-egg { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: rgb(10 9 8 / 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s var(--ease); }
.jeff-egg.is-open { opacity: 1; }
.jeff-egg[hidden] { display: none; }
.jeff-egg__close { position: absolute; top: 18px; right: 24px; font-size: 2rem; line-height: 1; color: var(--color-ink-soft); background: none; border: 0; cursor: pointer; }
.jeff-egg__card { position: relative; max-width: 380px; width: 100%; text-align: center; background: var(--color-surface); border: 1px solid var(--color-line-strong); padding: 2.5rem 2rem; transform: translateY(12px) scale(0.98); transition: transform 0.3s var(--ease); }
.jeff-egg.is-open .jeff-egg__card { transform: none; }
.jeff-egg__kicker { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }
.jeff-egg__photo { width: 132px; height: 132px; object-fit: cover; object-position: 62% 32%; border-radius: 50%; border: 2px solid var(--color-accent); margin: 1.2rem auto 1rem; display: block; }
.jeff-egg__quote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.12; color: var(--color-ink); margin: 0; }
.jeff-egg__quote s { color: var(--color-ink-soft); text-decoration-color: var(--color-accent); }
.jeff-egg__cite { margin-top: 1rem; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
.jeff-egg__cite strong { color: var(--color-ink); }
/* JEFF-EGG END */

/* ---- Field Notes (essays as drafted sheets) ---- */
.note { max-width: 720px; margin-inline: auto; padding-block: var(--space-12) var(--space-16); }
.note__bar {
  display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line-strong);
  margin-bottom: var(--space-8);
  font-size: var(--fs-small);
}
.note__no {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-accent);
}
.note__meta { color: var(--text-muted); margin-left: auto; }
.note h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: var(--space-6); text-transform: uppercase; }
.note p, .note li { color: var(--text-muted); line-height: 1.7; }
.note p { margin-bottom: var(--space-5); }
.note p strong { color: var(--text); }
.note h2 {
  font-family: var(--font-body); font-weight: 800; text-transform: none;
  letter-spacing: -0.01em; line-height: 1.2; font-size: 1.35rem;
  margin-top: var(--space-10); margin-bottom: var(--space-4); color: var(--text);
}
.note__cta {
  margin-top: var(--space-10); padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.note-list { display: flex; flex-direction: column; max-width: 820px; }
.note-card {
  display: block;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
}
.note-card:last-child { border-bottom: 1px solid var(--color-line); }
.note-card__no { font-family: var(--font-display); color: var(--color-accent); font-size: 0.95rem; text-transform: uppercase; letter-spacing: var(--ls-tight); }
.note-card h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: var(--space-2) 0 var(--space-3); transition: color var(--dur-fast) var(--ease); }
.note-card:hover h2 { color: var(--color-accent-2-ink); }
.note-card p { color: var(--text-muted); max-width: 62ch; }

/* ---- 404 (sheet not found) ---- */
.notfound { min-height: 72vh; display: grid; align-content: center; }
.notfound h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); text-transform: uppercase; max-width: 14ch; }
.notfound h1 em { font-style: normal; color: var(--color-accent); }
.notfound p { margin-top: var(--space-5); color: var(--text-muted); max-width: 52ch; font-size: var(--fs-lead); }
.notfound .btn { margin-top: var(--space-8); justify-self: start; }

/* ---- Legal pages (privacy, terms) + footer legal links ---- */
.legal-bar { border-bottom: 1px solid var(--color-line); padding-block: var(--space-5); }
.legal-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.legal { max-width: 760px; margin-inline: auto; padding-block: var(--space-12) var(--space-16); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.legal__updated { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: var(--space-8); }
.legal h2 { font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.25; font-size: 1.2rem; margin-top: var(--space-9); margin-bottom: var(--space-3); color: var(--text); }
.legal p, .legal li { color: var(--text-muted); line-height: 1.7; }
.legal p { margin-bottom: var(--space-4); }
.legal ul { padding-left: 1.3em; list-style: disc; margin-bottom: var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--color-accent); }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); font-weight: var(--fw-semibold); }
.footer__legal a { color: var(--text-on-dark-soft); }
.footer__legal a:hover { color: var(--color-ink); }