/* ==========================================================================
   SiteYourStory — the through-line.

   Loaded last, and deliberately so: this file is not a section stylesheet,
   it is the layer that makes the separate ones read as one film. Three
   things live here and nothing else.

   1. ONE TYPEFACE, ONE VOICE
      Taken from the film's own burned-in type — "THIS IS HOW YOUR WEBSITE
      CHANGES." / "NOT JUST BETTER LOOKING." Studied off the frame, that
      treatment is: capitals, a light weight, wide positive tracking,
      restrained scale, centred, pure white, and a full stop at the end of
      a short declarative line. It is confident because it is quiet.

      So the whole site now speaks in it. The site had been set in Inter at
      700 with -0.042em tracking — the loud startup-headline register, the
      exact opposite of the reference. Weight is now 300–500 everywhere;
      nothing is 700. Capitals carry wide tracking, lower case carries
      almost none, and hierarchy is made from scale and space rather than
      from boldness.

   2. ONE PALETTE, SAMPLED NOT INVENTED
      Every colour below was measured out of the actual assets:
        #08080A  the corridor the page opens in
        #F5F2EB  the doorway light, and the statement that follows it
        #655341  the film's own opening frame at 6.2s
        #DCD1CA  the film's own closing frame at 29.8s
      The page had been cutting between these with flat black. Black is
      nowhere in the footage, which is why those joins read as section
      breaks. Each background now hands over to the tone the next moving
      image actually starts on.

   3. ONE TIMELINE
      Scroll drives everything, through the single rAF engine already in
      film.js. No second animation library is introduced — a competing
      scroll layer is what produces the jitter this file exists to remove.
   ========================================================================== */

/* --- The typeface ---------------------------------------------------------
   Switzer, a Swiss-modernist grotesque. Chosen over the Inter that was here
   because Inter is the default voice of every generated interface, and this
   page needs one that was decided on: Switzer's narrower apertures, flatter
   terminals and lower contrast hold together at 300 weight and wide caps
   tracking, which is precisely the register the film is set in. One variable
   file, 43KB, licence shipped beside it in assets/fonts.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/switzer-var.woff2') format('woff2');
}

:root {
  --font: 'Switzer', 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Weights. The top of this range is 500. Nothing on this site is bold. */
  --fw-light: 300;
  --fw-book: 400;
  --fw-med: 500;

  /* Tracking, by role. Capitals open up, lower case stays nearly neutral. */
  --tr-mark: 0.26em;   /* labels, nav, buttons — small caps set wide */
  --tr-say: 0.085em;   /* the film voice: large caps, lightly opened */
  --tr-title: -0.014em;/* lower-case titles; nowhere near the old -0.042 */

  /* Scale. Deliberately smaller than before — the reference is restrained,
     and scale is bought back with space rather than with size. */
  --t-say: clamp(1.6rem, 3.5vw, 3.5rem);
  --t-title: clamp(1.75rem, 3.6vw, 3.5rem);
  --t-lede: clamp(1.05rem, 1.3vw, 1.28rem);
  --t-mark: 0.7rem;

  /* ── The master palette ────────────────────────────────────────────────
     One warm family, sampled from the assets rather than invented, listed
     in the order the page travels through it. Nothing outside this list is
     allowed to become a background — the literal #0a0a0b greys that used to
     sit in film.css and hero.css now point at these tokens, so there is a
     single place the palette can change.

     The dark end is deliberately warm (#17130f, not #08080a). A blue-black
     beside warm stone is a large part of what read as "a different
     website"; the same value pulled toward the footage disappears into it. */
  --bg-dark: #17130f;       /* the corridor, and the page ground */
  --bg-primary: #f5f2eb;    /* the doorway light, and the statement */
  --bg-surface: #efeae0;    /* raised warm off-white */
  --bg-umber: #655341;      /* the film's own opening frame, 6.2s */
  --bg-bone: #dcd1ca;       /* the film's own closing frame, 29.8s */
  --bg-secondary: #e2d9cd;  /* warm stone — work and process */
  --bg-stone: #cec2b4;
  --bg-warm-deep: #5d5348;  /* why us */
  --bg-close: #6b6054;      /* the contact scene */

  --text-primary: #1e1a16;  /* warm charcoal, never neutral black */
  --text-secondary: rgba(30, 26, 22, 0.8);
  --text-muted: rgba(30, 26, 22, 0.68);
  --text-on-dark: #f6f2ec;
  --border: rgba(30, 26, 22, 0.14);
  --surface: var(--bg-surface);
  --accent-soft: rgba(192, 57, 43, 0.14);

  /* Aliases, so rules written against the earlier names resolve to the
     master palette instead of carrying their own values. */
  --c-void: var(--bg-dark);
  --c-ivory: var(--bg-primary);
  --c-ivory-2: var(--bg-surface);
  --c-umber: var(--bg-umber);
  --c-bone: var(--bg-bone);
  --c-bone-2: var(--bg-secondary);
  --c-sand: var(--bg-stone);
  --c-ink: var(--text-primary);
  --c-ink-2: var(--text-secondary);
  --c-ink-3: var(--text-muted);

  /* ── Spacing rhythm ────────────────────────────────────────────────────
     One scale, so a gap in the process means what a gap in the work means.
     Tighter than what was here: several sections were tall enough to read
     as blank, and minimal is not the same as empty. */
  --space-xs: clamp(10px, 1.2vh, 16px);
  --space-s: clamp(18px, 2.2vh, 30px);
  --space-m: clamp(30px, 4vh, 56px);
  --space-l: clamp(48px, 7vh, 92px);
  --space-xl: clamp(72px, 11vh, 140px);
  --section-pad: clamp(64px, 10vh, 132px);
  --rhythm: var(--space-xl);
}

body { font-family: var(--font); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- The two voices -------------------------------------------------------
   `mark` is the small tracked capital — labels, nav, buttons, numerals.
   `say` is the film's own register, used for the statements.
   Everything else is the same family at 300–400, so a title and a label are
   audibly the same brand speaking at different volumes.
   ------------------------------------------------------------------------ */
.f-eyebrow,
.cf-ind,
.nav-link,
.stage b,
.btn,
.hero-cue,
.hero-alt,
.finale-line,
.usp-num {
  font-family: var(--font);
  text-transform: uppercase;
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-mark);
  font-size: var(--t-mark);
  line-height: 1.2;
}

/* Titles: same family, light, lower case, only a whisper of negative
   tracking. These replace headings that were set at 600–700. */
.cf-title,
.process-title,
.usp-title,
.close-head,
.f-ind,
.beat-line,
.hero-head {
  font-family: var(--font);
  font-weight: var(--fw-light) !important;
  letter-spacing: var(--tr-title) !important;
  font-size: var(--t-title);
  line-height: 1.14;
}

.lede, .close-sub, .usp-copy p, .stage p, .cf-kind {
  font-weight: var(--fw-book);
  letter-spacing: -0.004em;
}

/* --- Navigation -----------------------------------------------------------
   Shown, not hidden behind a button. Small tracked capitals, widely spaced,
   at low opacity until you approach them — a studio index rather than a
   navbar. No pills, no underlines that grow, no movement.
   ------------------------------------------------------------------------ */
.nav-index {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin-left: auto;
  margin-right: clamp(20px, 2.6vw, 40px);
}
.nav-index .nav-link {
  color: currentColor;
  opacity: 0.55;
  transition: opacity 0.45s var(--ease);
  padding-block: 6px;
}
.nav-index .nav-link::after { display: none; }  /* no growing rule */
.nav-index .nav-link:hover,
.nav-index .nav-link:focus-visible { opacity: 1; }

.nav--film .nav-index { color: #fff; }
.nav--film[data-ink='dark'] .nav-index { color: var(--c-ink); }

/* The burger is a narrow-viewport affordance only. */
@media (min-width: 1000px) {
  .nav--film .burger { display: none; }
}
@media (max-width: 999px) {
  .nav-index { display: none; }
}

/* --- Buttons --------------------------------------------------------------
   The filled red pill is gone from the opening. What is left is a rule, a
   tracked capital, and a line that fills on hover — tactile without shadow,
   gradient or bounce.
   ------------------------------------------------------------------------ */
.btn--line {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0;
  color: #fff;
  padding: 15px 30px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn--line::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.btn--line:hover { border-color: var(--accent); color: #fff; }
.btn--line:hover::before { transform: scaleX(1); }

/* --- Hero -----------------------------------------------------------------
   Stripped to the shot. The eyebrow, the headline and the sub-line have all
   been removed: a film does not open with three lines of copy over it.
   ------------------------------------------------------------------------ */
.hero-in {
  /* The actions sit low-left, where the corridor floor is darkest. */
  padding-bottom: clamp(8px, 2vh, 26px);
}
.hero-cta { margin-top: 0; animation-delay: 0.5s; }
.hero-alt {
  border-bottom: 0;
  opacity: 0.72;
  transition: opacity 0.4s var(--ease);
}
.hero-alt:hover { opacity: 1; }

/* Less veil is needed now that there is far less type to hold. */
.hero-veil {
  background:
    linear-gradient(to top,
      rgba(6, 6, 9, 0.78) 0%,
      rgba(6, 6, 9, 0.34) 26%,
      rgba(6, 6, 9, 0.04) 54%,
      transparent 100%) !important;
}

/* --- The statement --------------------------------------------------------
   Inside the hero stage, not in a section under it. The white-out resolves
   and the line is already standing in the light — which is what removes the
   blank screen that used to sit between the two. Set in the film's own
   register: capitals, 300, opened up, centred.
   ------------------------------------------------------------------------ */
.hero-say {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
  opacity: var(--o, 0);
}
.say-line {
  max-width: 20ch;
  text-align: center;
  text-transform: uppercase;
  font-weight: var(--fw-light);
  font-size: var(--t-say);
  letter-spacing: var(--tr-say);
  line-height: 1.32;
  color: var(--c-ink);
  transform: translate3d(0, var(--y, 26px), 0) scale(var(--s, 0.985));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* --- Into the film --------------------------------------------------------
   A short bridge, not a section: ivory carrying down into the umber the film
   opens on. This is the join that used to be a black gradient.
   ------------------------------------------------------------------------ */
.bridge {
  position: relative;
  z-index: 2;
  height: 46svh;
  background: linear-gradient(180deg,
    var(--c-ivory) 0%,
    var(--c-ivory-2) 30%,
    #cdbfa9 62%,
    #8e7659 84%,
    var(--c-umber) 100%);
}

/* --- Out of the film ------------------------------------------------------
   The film ends on warm bone. So does everything after it. The dark plates
   that used to start here are what made the page feel like it had ended and
   restarted.
   ------------------------------------------------------------------------ */
.cf {
  background: linear-gradient(180deg, var(--c-bone) 0%, var(--c-bone) 62%, var(--c-bone-2) 100%) !important;
  border-top: 0 !important;
}
/* The pinned layers were painting flat #0a0a0b over their own sections —
   that black band between the film and the work was not a gradient anyone
   wrote, it was a sticky child covering the section behind it. The pin is
   now transparent so the bone shows through, and the film's stage is set to
   the umber its own first frame opens on so any edge that does show belongs
   to the footage. */
.cf-pin { background: transparent !important; }
.film-stage { background: var(--c-umber) !important; }
.process {
  background: linear-gradient(180deg, var(--c-bone-2) 0%, var(--c-sand) 70%, #b3a596 90%, #8a7c6d 100%) !important;
  border-top: 0 !important;
}
.usp {
  background: linear-gradient(180deg, #8a7c6d 0%, #6b5f52 9%, #5d5348 55%, #4f473d 100%) !important;
  border-top: 0 !important;
}
.close { background: #6b6054; }

/* Ink follows the light — and only where the light actually is.
   An unscoped .f-eyebrow rule here is a trap: the same class labels the
   film's chapters over dark footage and the close's label over warm-dark,
   so painting it charcoal globally hides it in both places. Each ground
   names its own ink.

   Specificity matters as much as colour: .stage h3 is (0,1,1) and beats a
   .process * at (0,1,0), which is why the stage headings stayed white on
   sand until they were addressed directly. */

/* The light run: bone through sand. */
.cf, .cf *, .process, .process * { color: var(--c-ink); }
.cf-title, .process-title, .process h3, .stage h3 { color: var(--c-ink) !important; }
.cf-kind, .cf-ind, .stage p, .process p { color: var(--c-ink-2) !important; }
.cf .f-eyebrow, .process .f-eyebrow, .finale .f-eyebrow { color: var(--c-ink-3) !important; }

/* The dark run: Why-Us and the close. Light ink, at an alpha that survives
   the ground rather than one that looks refined in a swatch. */
.usp, .usp * { color: #f6f2ec; }
.usp-head { color: #fff !important; }
.usp-copy p { color: rgba(246, 242, 236, 0.9) !important; }
.usp .f-eyebrow { color: rgba(246, 242, 236, 0.95) !important; }
.close .f-eyebrow { color: rgba(246, 242, 236, 0.95) !important; }

/* The film keeps its own light-on-footage treatment untouched. */
.film .f-eyebrow, .film-stage .f-eyebrow { color: rgba(255, 255, 255, 0.82) !important; }
.process-rail, .cf-track { background: rgba(25, 24, 23, 0.12); }
.stage-list .stage { border-color: rgba(25, 24, 23, 0.14) !important; }
.stage-art { color: rgba(25, 24, 23, 0.5); }

/* --- Selected work --------------------------------------------------------
   The arrows and dots are gone. Scroll moves the gallery; the card is the
   link. The active project is bright and forward, its neighbours sit back
   in tone rather than in heavy perspective.
   ------------------------------------------------------------------------ */
.cf-card { cursor: pointer; }
.cf-screen {
  display: block;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(40, 30, 22, 0.7);
  transition: box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}
.cf-card[data-live='true'] .cf-screen {
  box-shadow: 0 60px 120px -46px rgba(40, 30, 22, 0.82);
}
.cf-card[data-live='true'] .cf-screen:hover { transform: translateY(-6px); }
.cf-card:not([data-live='true']) { pointer-events: none; }

.cf-go a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-weight: var(--fw-med);
  font-size: var(--t-mark);
  letter-spacing: var(--tr-mark);
  color: var(--c-ink);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(25, 24, 23, 0.28);
  transition: border-color 0.4s var(--ease), gap 0.4s var(--ease);
}
.cf-go a:hover { border-bottom-color: var(--accent); gap: 16px; }

/* --- How it happens -------------------------------------------------------
   The four stages are choreographed rather than listed: each arrives from
   the side it is given in the markup and settles as it is read. Driven by
   --p per stage from reveal.js, so it rides the same scroll as everything
   else.
   ------------------------------------------------------------------------ */
.stage-list { --gap: clamp(28px, 4vw, 64px); }
.stage[data-from] {
  --p: 0;
  opacity: calc(0.06 + var(--p) * 0.94);
  transform:
    translate3d(calc((1 - var(--p)) * var(--dx, 0px)), calc((1 - var(--p)) * 26px), 0)
    scale(calc(0.965 + var(--p) * 0.035));
  transition: none;
  will-change: transform, opacity;
}
.stage[data-from='right'] { --dx: clamp(60px, 14vw, 210px); }
.stage[data-from='left'] { --dx: clamp(-210px, -14vw, -60px); }
/* Build sits lower in the composition, so the sequence is not a flat row. */
.stage[data-step='3'] { --dy-extra: 1; }
@media (min-width: 900px) {
  .stage[data-step='3'], .stage[data-step='4'] { margin-top: clamp(20px, 4vh, 60px); }
}
.stage b {
  color: var(--text-secondary);
  opacity: 1;
}
.stage h3 {
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-title);
  text-transform: none;
}

/* --- The last frame -------------------------------------------------------
   Ivory again — the same light the doorway opened into, closing the loop the
   page began with. Texture rather than a flat block: a very low-contrast
   grain drifting slowly, so the final screen is still moving.
   ------------------------------------------------------------------------ */
.finale {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #efeae0 0%, var(--c-ivory) 42%, #faf8f3 100%);
  padding-block: clamp(96px, 17vh, 210px);
  text-align: center;
}
.finale-grain {
  position: absolute;
  inset: -20%;
  opacity: 0.5;
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(197, 175, 148, 0.28), transparent 62%),
    radial-gradient(ellipse 50% 45% at 74% 74%, rgba(192, 57, 43, 0.07), transparent 60%);
  animation: finale-drift 34s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes finale-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to { transform: translate3d(1.5%, 1.5%, 0) scale(1.08); }
}
.finale-in { position: relative; z-index: 2; }
.finale-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  letter-spacing: 0.2em;
  color: var(--c-ink);
}
.finale-line .heartmark {
  width: 1.05em;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(192, 57, 43, 0.3));
}
.finale-sub {
  margin-top: clamp(22px, 3.4vh, 40px);
  font-size: clamp(1.35rem, 3vw, 2.6rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--tr-title);
  line-height: 1.28;
  color: var(--c-ink);
}

/* The close now sits on warm taupe rather than near-black, so the CTA video
   behind it belongs to the same world as the film. */
.close-wash {
  background: linear-gradient(180deg,
    rgba(107, 96, 84, 0.82) 0%,
    rgba(93, 83, 73, 0.88) 46%,
    rgba(120, 109, 96, 0.9) 100%) !important;
}

/* --- Reveals --------------------------------------------------------------
   One entrance for the whole site: opacity, a short rise, a touch of scale.
   Nothing slides in from off-screen, nothing bounces.
   ------------------------------------------------------------------------ */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.995);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
}
[data-rise].is-in { opacity: 1; transform: none; }

/* --- Narrow viewports -----------------------------------------------------
   The story survives; only the horizontal choreography is simplified,
   because sideways travel on a 390px screen is motion for its own sake.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  .stage[data-from] { --dx: 0px; }
  .say-line { max-width: 16ch; }
  .bridge { height: 34svh; }
}

@media (prefers-reduced-motion: reduce) {
  .finale-grain { animation: none; }
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .stage[data-from] { opacity: 1; transform: none; }
  .hero-say { opacity: 1; }
  .say-line { transform: none; }
}

/* --- The loudest type on the page, brought into the system ----------------
   Measured, these were the three holdouts: the film's own overlay statements
   at 700 weight and -0.038em, the Why-Us heading at 600, and the project
   names at 600. They were the "oversized startup heading" register the whole
   refinement is moving away from — and they sat directly over footage whose
   own burned-in type is 300 and opened up, so the mismatch was visible in a
   single frame. Same words, same placement, film's voice.
   ------------------------------------------------------------------------ */
.f-head {
  font-weight: var(--fw-light) !important;
  letter-spacing: -0.016em !important;
  font-size: clamp(1.85rem, 4.3vw, 4.15rem) !important;
  line-height: 1.1 !important;
}
.usp-head {
  font-weight: var(--fw-light) !important;
  letter-spacing: var(--tr-title) !important;
  font-size: var(--t-title) !important;
  line-height: 1.14 !important;
}
.cf-name {
  font-weight: var(--fw-book) !important;
  letter-spacing: -0.012em !important;
}

/* Why-Us ink: this section sits on the deepest tone of the warm run, so it
   is the one place the type goes light-on-dark. */
.usp-head { color: #fff !important; }

/* --- The last frame, on top of its own section ---------------------------
   .close-wash is a z-index 1 layer spanning the whole close; the finale is
   a later sibling but was at z-index auto, so the wash was painting over it
   and turning the ivory into mud. It gets its own layer.
   ------------------------------------------------------------------------ */
.finale {
  z-index: 2;
  isolation: isolate;
}

/* The heartbeat: two beats and a long rest, which is what reads as a pulse
   rather than as a loading state. */
.finale .heartmark {
  display: inline-flex;
  transform-origin: 50% 62%;
  animation: heartbeat 3.6s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}
.finale .heartmark svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .finale .heartmark { animation: none; }
}

/* --- How it happens, built as you scroll ---------------------------------
   This was a four-across grid: every stage on screen at once, all of it
   arriving together, which is a list rather than a sequence. It is now a
   column with real scroll between the stages, and each one enters from the
   side its markup gives it — Discover from the right settling left, Design
   answering from the left, Build lower and from the right again, Launch
   last. The travel is driven per-stage by --p from reveal.js, so it is the
   same scroll timeline as the film and the doorway, not a second one.
   ------------------------------------------------------------------------ */
@media (min-width: 900px) {
  .stage-list {
    display: flex !important;
    flex-direction: column;
    gap: clamp(60px, 11vh, 150px);
    max-width: 1100px;
    margin-inline: auto;
  }
  .stage {
    max-width: 46ch;
    margin: 0 !important;
    padding-top: clamp(20px, 3vh, 40px);
  }
  /* Alternating anchor, so the eye is carried across the page rather than
     down a single edge. */
  .stage[data-step='1'] { align-self: flex-start; }
  .stage[data-step='2'] { align-self: flex-end; text-align: right; }
  .stage[data-step='3'] { align-self: flex-start; margin-left: clamp(0px, 6vw, 90px) !important; }
  .stage[data-step='4'] { align-self: flex-end; text-align: right; }
  .stage[data-step='2'] .stage-art,
  .stage[data-step='4'] .stage-art { margin-left: auto; }
}

/* The stage art is the existing drawn SVG — no stock illustration is
   introduced. It just sits quieter now, and brightens as its stage lands. */
.stage-art {
  display: block;
  width: clamp(58px, 6vw, 86px);
  margin-bottom: clamp(16px, 2.4vh, 30px);
  opacity: calc(0.25 + var(--p, 0) * 0.55);
  transition: opacity 0.6s var(--ease);
}
.stage-art svg { width: 100%; height: auto; }
.stage b {
  display: block;
  margin-bottom: 10px;
  font-size: var(--t-mark);
}
.stage h3 { font-size: clamp(1.4rem, 2.4vw, 2.15rem); }
.stage p {
  margin-top: 10px;
  font-size: var(--t-lede);
  color: var(--c-ink-2) !important;
}

/* --- The footer, still inside the film ------------------------------------
   It was a dark block bolted under an ivory ending, which undid the last
   frame. It now carries the same light.
   ------------------------------------------------------------------------ */
.foot {
  background: linear-gradient(180deg, #faf8f3 0%, var(--c-ivory) 100%) !important;
  color: var(--c-ink) !important;
  border-top: 1px solid rgba(25, 24, 23, 0.1);
}
.foot *, .foot a, .foot-nav a, .foot-love { color: var(--c-ink-2) !important; }
.foot .logo { color: var(--c-ink) !important; }
.foot-nav a:hover { color: var(--c-ink) !important; }

/* ==========================================================================
   PASS TWO — connect what was still reading as separate pages.
   ========================================================================== */

/* --- Hero actions, made legible without darkening the film ----------------
   The two actions were dissolving into the corridor floor. The fix is local
   rather than global: a small pool of shade sized to the actions themselves,
   so contrast arrives exactly where the type is and the rest of the frame
   stays as bright as it was shot.
   ------------------------------------------------------------------------ */
.hero-in { isolation: isolate; }
.hero-in::before {
  content: '';
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: -10%;
  bottom: -40%;
  top: -70%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 100% at 22% 68%,
    rgba(10, 8, 6, 0.66) 0%,
    rgba(10, 8, 6, 0.42) 38%,
    rgba(10, 8, 6, 0.14) 66%,
    transparent 82%);
}

.btn--line {
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
  letter-spacing: 0.2em;
  padding: 16px 32px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}
.hero-alt {
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.hero-cue {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* --- The statement -------------------------------------------------------
   It was set ultra-thin and very wide, which at this size reads as fashion
   rather than as a studio with a point of view. Weight up to 400, tracking
   pulled back, and a short accent rule above it so it composes as an
   editorial slip instead of floating in the middle of an empty screen.
   ------------------------------------------------------------------------ */
.say-line {
  font-weight: var(--fw-book);
  font-size: clamp(1.45rem, 2.9vw, 2.95rem);
  letter-spacing: 0.035em;
  line-height: 1.42;
  max-width: 24ch;
  color: var(--text-primary);
}
.hero-say::before {
  content: '';
  position: absolute;
  top: calc(50% - clamp(78px, 9vh, 130px));
  left: 50%;
  width: 46px;
  height: 1px;
  background: var(--accent);
  opacity: calc(var(--o, 0) * 0.85);
  transform: translateX(-50%) scaleX(var(--o, 0));
}

/* --- Into the film -------------------------------------------------------
   Shorter, so the light does not outstay its welcome, and ending on the
   umber the film actually opens with.
   ------------------------------------------------------------------------ */
.bridge {
  height: 30svh;
  background: linear-gradient(180deg,
    var(--bg-primary) 0%,
    var(--bg-surface) 26%,
    #d9c9b2 58%,
    #977d5e 84%,
    var(--bg-umber) 100%);
}

/* --- The warm run, retuned to the master palette -------------------------- */
.cf {
  background: linear-gradient(180deg,
    var(--bg-bone) 0%, var(--bg-bone) 58%, var(--bg-secondary) 100%) !important;
}
.process {
  background: linear-gradient(180deg,
    var(--bg-secondary) 0%, var(--bg-stone) 86%, #bcae9d 96%, #8a7c6d 100%) !important;
  padding-block: var(--section-pad) !important;
}
.usp {
  background: linear-gradient(180deg,
    #8a7c6d 0%, #6b5f52 9%, var(--bg-warm-deep) 52%, #524839 100%) !important;
  padding-block: var(--section-pad) !important;
}
.close {
  background: linear-gradient(180deg, #524839 0%, var(--bg-close) 22%, #7a6f61 100%);
}

/* --- How it happens, as a route ------------------------------------------
   It was two blocks of text at opposite ends of a large empty canvas — the
   arrangement carried no order, so it never read as a sequence. There is now
   an actual path: a hairline down the centre, a marker where each stage
   meets it, and a tick joining the stage to the line. Architectural plan,
   not corporate infographic.
   ------------------------------------------------------------------------ */
.process .wrap { position: relative; }
.stage-list { position: relative; }

@media (min-width: 900px) {
  .stage-list { gap: clamp(48px, 8vh, 104px); }
  .stage-list::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg,
      transparent, var(--border) 8%, var(--border) 92%, transparent);
  }
  .stage {
    width: min(42%, 44ch);
    max-width: none;
    position: relative;
  }
  .stage[data-step='3'] { margin-left: 0 !important; }

  .stage::before {
    content: '';
    position: absolute;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: calc(0.25 + var(--p, 0) * 0.75);
    transform: scale(calc(0.6 + var(--p, 0) * 0.4));
  }
  .stage::after {
    content: '';
    position: absolute;
    top: 15px;
    height: 1px;
    background: var(--border);
    transform: scaleX(var(--p, 0));
  }
  .stage[data-from='right']::before { right: -19.5%; }
  .stage[data-from='right']::after { right: -19%; width: 19%; transform-origin: right; }
  .stage[data-from='left']::before { left: -19.5%; }
  .stage[data-from='left']::after { left: -19%; width: 19%; transform-origin: left; }
}

/* Arrive, then give way. Without the second half all four stages simply
   accumulate on screen and the sequence flattens back into a list. */
.stage[data-from] {
  opacity: calc((0.05 + var(--p) * 0.95) * (1 - var(--q, 0) * 0.68));
  transform:
    translate3d(
      calc((1 - var(--p)) * var(--dx, 0px)),
      calc((1 - var(--p)) * 26px - var(--q, 0) * 30px), 0)
    scale(calc(0.965 + var(--p) * 0.035 - var(--q, 0) * 0.03));
}

/* --- Why us, brought into the system -------------------------------------
   Same type, same rhythm, same palette as everything above it. The
   supporting lines arrive one at a time instead of landing as a block.
   ------------------------------------------------------------------------ */
.usp-copy p {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  border-top: 1px solid rgba(246, 242, 236, 0.16);
  padding-top: var(--space-s);
  margin-top: var(--space-s);
}
.usp-copy.is-in p,
.usp-copy p.is-in { opacity: 1; transform: none; }
.usp-copy.is-in p:nth-of-type(2) { transition-delay: 0.1s; }
.usp-copy.is-in p:nth-of-type(3) { transition-delay: 0.2s; }
.usp-copy.is-in p:nth-of-type(4) { transition-delay: 0.3s; }

/* --- The last frame ------------------------------------------------------
   One line and a heart. Everything propped around it — the pricing
   reassurances, the second call to action — has gone, so what is left can be
   the closing image rather than another block to read.
   ------------------------------------------------------------------------ */
.finale {
  background: linear-gradient(180deg,
    #7a6f61 0%, #c9bdad 26%, var(--bg-surface) 62%, var(--bg-primary) 100%);
  padding-block: clamp(84px, 14vh, 170px);
}
.finale-line {
  font-size: clamp(1.15rem, 2.1vw, 1.8rem);
  letter-spacing: 0.24em;
  color: var(--text-primary);
}
.finale-line .heartmark { width: 1.15em; }

/* --- Spacing rhythm applied ---------------------------------------------- */
.cf-head { margin-bottom: var(--space-l); }
.process-title { margin-bottom: var(--space-l); }
.foot { padding-block: var(--space-l) var(--space-m) !important; }

@media (max-width: 899px) {
  .stage-list::before,
  .stage::before,
  .stage::after { display: none; }
  .stage { width: auto; }
  .say-line { max-width: 18ch; font-size: clamp(1.3rem, 5.6vw, 1.9rem); }
  .bridge { height: 22svh; }
}

/* The old horizontal rail belonged to the four-across grid. The centre
   path replaces it, so it would only read as a stray line. */
.process-rail { display: none; }


/* --- The light dims as you pass through it -------------------------------
   The statement sat on flat ivory for a full viewport while the sticky stage
   scrolled away, which is most of why the moment read as a page rather than
   an interlude. The wash now carries a second layer that comes up as the
   stage leaves, taking the ivory into the umber the film opens on — so the
   exit is part of the transition instead of dead scroll after it.
   ------------------------------------------------------------------------ */
.hero-wash { position: absolute; }
.hero-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--dusk, 0);
  background: linear-gradient(180deg,
    var(--bg-surface) 0%,
    #d9c9b2 40%,
    #a98a63 72%,
    var(--bg-umber) 100%);
}

/* The bridge only has to finish the handover now, not perform all of it. */
.bridge { height: 16svh; }
@media (max-width: 899px) { .bridge { height: 12svh; } }


/* ==========================================================================
   PASS THREE — what the fresh-eyes audit surfaced.
   ========================================================================== */

/* --- The bridge lands on the film's real first pixels ---------------------
   Measured off the frame at 6.2s the film opens on rgb(99,88,77), not the
   whole-frame median the bridge was ending on. Twelve points of blue-channel
   difference was the visible line at the join. Both sides now carry the
   same value.
   ------------------------------------------------------------------------ */
.bridge {
  background: linear-gradient(180deg,
    var(--bg-primary) 0%,
    var(--bg-surface) 26%,
    #d9c9b2 56%,
    #97836c 84%,
    #63584d 100%);
}
.film-stage { background: #63584d !important; }

/* --- The route, actually visible ------------------------------------------
   The path was drawn in the global border token — 14% charcoal, which on
   stone disappears. The process draws its own line.
   ------------------------------------------------------------------------ */
@media (min-width: 900px) {
  .stage-list::before {
    background: linear-gradient(180deg,
      transparent, rgba(30, 26, 22, 0.26) 8%, rgba(30, 26, 22, 0.26) 92%, transparent);
  }
  .stage::after { background: rgba(30, 26, 22, 0.26); }
}
/* A stage never fades below half while it may still be being read. */
.stage[data-from] {
  opacity: calc((0.05 + var(--p) * 0.95) * (1 - var(--q, 0) * 0.5));
}

/* --- The form joins the palette -------------------------------------------
   The fields were the old theme verbatim: jet black, heavy radius, and a
   pill submit — a block of the previous website sitting inside the new one.
   Warm-dark translucent fields, square geometry, same accent.
   ------------------------------------------------------------------------ */
.close input,
.close select,
.close textarea {
  background: rgba(28, 23, 18, 0.34) !important;
  border: 1px solid rgba(246, 242, 236, 0.24) !important;
  border-radius: 2px !important;
  color: var(--text-on-dark) !important;
}
.close input::placeholder,
.close textarea::placeholder { color: rgba(246, 242, 236, 0.6) !important; }
.close select { color: var(--text-on-dark) !important; }
.close input:focus,
.close select:focus,
.close textarea:focus {
  border-color: rgba(246, 242, 236, 0.55) !important;
  outline: none;
}
.close .btn {
  border-radius: 2px !important;
  letter-spacing: var(--tr-mark);
}

/* --- The ending, continuous ------------------------------------------------
   Close ends at the form; the finale is its own scene and performs the only
   taupe→ivory handover; the footer continues the ivory. One rest, not four
   stripes.
   ------------------------------------------------------------------------ */
.finale-scene { position: relative; z-index: 2; }
.finale {
  background: linear-gradient(180deg,
    #7a6f61 0%, #c9bdad 30%, var(--bg-surface) 64%, var(--bg-primary) 100%);
  padding-block: clamp(90px, 15vh, 180px);
}

/* --- Inner-page navigation -------------------------------------------------
   The index shown outright, same as home. Inner pages run the dark theme,
   so the index is light ink there.
   ------------------------------------------------------------------------ */
.nav--inner .nav-index { color: #fff; }
@media (min-width: 1000px) {
  .nav--inner .burger { display: none; }
}

/* --- The closing waves ----------------------------------------------------
   Slow glowing lines behind the contact scene, drawn by assets/js/waves.js
   in the site's own palette. They sit between the wash and the content, at
   an opacity that decorates the ground without costing the form contrast.
   ------------------------------------------------------------------------ */
.close-waves {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.close .wrap { position: relative; z-index: 2; }

/* ==========================================================================
   PASS FOUR — one canvas.

   The earlier passes built a *progression*: bone → stone → taupe → warm-deep
   → close. It was sampled from the footage and internally consistent, and it
   is exactly what now has to go. A progression means every section boundary
   is a colour change, and a colour change is what tells the eye "new page".

   So there is one background for every non-video section, and the videos are
   the only exceptions. Everything below either sets that ground or removes a
   gradient that used to sit between two sections.
   ========================================================================== */

:root {
  --site-bg: #f1eee8;        /* the single ground for all normal sections */
  --site-ink: #1e1a16;       /* warm charcoal */
  --site-ink-2: rgba(30, 26, 22, 0.72);
  --site-ink-3: rgba(30, 26, 22, 0.68);
  --site-line: rgba(30, 26, 22, 0.13);
}

/* Every normal section, flat, no gradient, no exceptions. */
html, body,
.bridge,
.cf, .cf-pin,
.process,
.usp,
.close,
.finale, .finale-scene,
.foot,
.proof {
  background: var(--site-bg) !important;
  background-image: none !important;
}

/* The two video environments keep their own dark world. */
.hero, .hero-stage { background: #17130f !important; }
.film-stage { background: var(--site-bg) !important; }

/* --- Ink, once ------------------------------------------------------------
   With one ground there is one ink. The light-on-dark rules that Why-Us and
   the close carried are gone; those sections are part of the canvas now.
   ------------------------------------------------------------------------ */
.cf, .cf *,
.process, .process *,
.usp, .usp *,
.close, .close *,
.finale, .finale *,
.foot, .foot * { color: var(--site-ink); }

.cf-title, .process-title, .usp-head, .close-head,
.stage h3, .cf-name, .finale-line, .finale-sub { color: var(--site-ink) !important; }

.cf-kind, .cf-ind, .stage p, .usp-copy p, .close-sub, .lede,
.foot-nav a, .foot-love, .form-note { color: var(--site-ink-2) !important; }

.f-eyebrow { color: var(--site-ink-3) !important; }
/* The film keeps its own light-on-footage treatment. */
.film .f-eyebrow, .film-stage .f-eyebrow { color: rgba(255, 255, 255, 0.82) !important; }

.beat-rule, .process-rail, .cf-track { background: var(--site-line) !important; }
.foot { border-top: 1px solid var(--site-line) !important; }

/* --- Hero: lift the grade, finish the actions -----------------------------
   The frame was being carried at contrast 1.05 under a heavy veil, which is
   why it read as dark rather than cinematic. The grade now lifts the
   architectural highlights and lets the doorway glow, and the veil is only
   as strong as the words actually need.
   ------------------------------------------------------------------------ */
.hero-plate video {
  filter: contrast(0.97) saturate(1.04) brightness(1.1) !important;
}
.hero-veil {
  background:
    linear-gradient(to top,
      rgba(8, 6, 4, 0.62) 0%,
      rgba(8, 6, 4, 0.24) 24%,
      rgba(8, 6, 4, 0.02) 48%,
      transparent 100%) !important;
}
/* A soft pool under the actions instead of a rectangle around them. */
.hero-in::before {
  background: radial-gradient(ellipse 58% 92% at 20% 72%,
    rgba(8, 6, 4, 0.5) 0%,
    rgba(8, 6, 4, 0.28) 42%,
    rgba(8, 6, 4, 0.08) 70%,
    transparent 84%) !important;
}

/* The action was a bordered box sitting on the video — a sticker. It is now
   a rule under the words, which is what the rest of the site uses. */
.btn--line {
  border: 0 !important;
  padding: 6px 0 10px !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.24em !important;
  color: #fff !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55) !important;
  position: relative;
  overflow: visible !important;
}
.btn--line::before { display: none !important; }
.btn--line::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 0.4s var(--ease), background-color 0.4s var(--ease);
}
.btn--line:hover::after { background: var(--accent); opacity: 1; }
.btn--line svg { display: none; }

.hero-alt {
  font-size: 0.82rem !important;
  letter-spacing: 0.24em !important;
  opacity: 0.78;
  position: relative;
  padding: 6px 0 10px;
}
.hero-alt::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
  transition: opacity 0.4s var(--ease);
}
.hero-alt:hover { opacity: 1; }
.hero-alt:hover::after { opacity: 0.8; }
.hero-cta { gap: clamp(28px, 3.4vw, 52px) !important; }

/* Navigation: white, spaced, readable over footage. */
.nav--film .nav-index,
.nav--film[data-ink='dark'] .nav-index { color: #fff !important; }
.nav-index .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 1 !important;
  letter-spacing: 0.2em !important;
  font-size: 0.68rem !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  transition: color 0.35s var(--ease);
}
.nav-index .nav-link:hover { color: #fff !important; }
/* Over the light canvas the nav takes ink instead. */
.nav[data-ink='dark'] .nav-index .nav-link {
  color: rgba(30, 26, 22, 0.78) !important;
  text-shadow: none;
}
.nav[data-ink='dark'] .nav-index .nav-link:hover { color: var(--site-ink) !important; }
.nav--film[data-ink='dark'] .logo { color: var(--site-ink) !important; }
.nav--film[data-ink='dark'] .burger span { background: var(--site-ink) !important; }

/* --- The statement, compact ----------------------------------------------
   The words sit in the middle of the stage rather than filling it, with a
   thin path drawn beside them as the scroll arrives: marketing → click →
   website → trust, as four marks on one line. Editorial, not infographic.
   ------------------------------------------------------------------------ */
.hero-say { padding-block: 0; }
.say-line {
  font-size: clamp(1.4rem, 2.6vw, 2.6rem) !important;
  line-height: 1.38 !important;
  max-width: 21ch !important;
}
.say-path {
  position: absolute;
  left: 50%;
  bottom: calc(50% - clamp(96px, 11vh, 150px));
  transform: translateX(-50%);
  width: clamp(180px, 22vw, 320px);
  height: 12px;
  opacity: var(--o, 0);
}
.say-path i {
  position: absolute;
  top: 5px;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--site-line);
  transform: scaleX(var(--draw, 0));
  transform-origin: left;
}
.say-path b {
  position: absolute;
  top: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.say-path b:nth-of-type(1) { left: 0; }
.say-path b:nth-of-type(2) { left: 33%; }
.say-path b:nth-of-type(3) { left: 66%; }
.say-path b:nth-of-type(4) { left: calc(100% - 5px); }
.say-path[data-lit='1'] b:nth-of-type(1),
.say-path[data-lit='2'] b:nth-of-type(-n+2),
.say-path[data-lit='3'] b:nth-of-type(-n+3),
.say-path[data-lit='4'] b { opacity: 0.9; transition: opacity 0.5s var(--ease); }

/* --- The bridge is gone ---------------------------------------------------
   It existed to carry ivory into the film's umber. With one ground there is
   nothing to carry, and an element whose only job was a colour ramp is
   exactly the "gradient gap" this pass removes.
   ------------------------------------------------------------------------ */
.bridge { display: none !important; }

/* The dusk under the statement now resolves to the canvas, not to umber. */
.hero-wash::after {
  background: var(--site-bg) !important;
}

/* --- The film arrives, and leaves, by scale ------------------------------
   No colour ramp on either side: the video itself opens out of the canvas
   and settles back into it.
   ------------------------------------------------------------------------ */
.film-video {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.film-stage { overflow: hidden; }

/* --- Selected work, on the canvas ---------------------------------------- */
.cf-screen {
  box-shadow: 0 30px 70px -44px rgba(60, 48, 36, 0.55);
  border-radius: 2px;
}
.cf-card[data-live='true'] .cf-screen {
  box-shadow: 0 44px 96px -42px rgba(60, 48, 36, 0.62);
}
/* Neighbours are clickable — that is how you change project without arrows. */
.cf-card { pointer-events: auto !important; cursor: pointer; }
.cf-card:not([data-live='true']) .cf-screen { cursor: pointer; }
.cf-go a {
  color: var(--site-ink) !important;
  border-bottom-color: var(--site-line) !important;
}
.cf-go a:hover { border-bottom-color: var(--accent) !important; }

/* --- How it happens: the line draws itself ------------------------------- */
.process .wrap { position: relative; }
@media (min-width: 900px) {
  .stage-list::before {
    background: var(--site-line) !important;
    transform: scaleY(var(--route, 0));
    transform-origin: top;
  }
  .stage::after { background: var(--site-line) !important; }
}
.stage-art { color: var(--site-ink-3) !important; }
.stage b { color: var(--site-ink-2) !important; }

/* Word-by-word arrival for the opening statement. */
.process-title .w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.process-title.is-in .w { opacity: 1; transform: none; }

/* --- Why us, on the canvas ----------------------------------------------- */
.usp-copy p {
  border-top: 1px solid var(--site-line) !important;
  color: var(--site-ink-2) !important;
}

/* --- The close, lightened ------------------------------------------------
   The video behind it is removed in the markup; what is left is the canvas,
   the fine moving lines, and a form that belongs to the same site.
   ------------------------------------------------------------------------ */
.close-bg, .close-vid, .close-wash { display: none !important; }
.close input,
.close select,
.close textarea {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid var(--site-line) !important;
  border-radius: 2px !important;
  color: var(--site-ink) !important;
}
.close input::placeholder,
.close textarea::placeholder { color: var(--site-ink-3) !important; }
.close input:focus,
.close select:focus,
.close textarea:focus {
  border-color: rgba(30, 26, 22, 0.4) !important;
  background: #fff !important;
  outline: none;
}
.close .field > span,
.close label { color: var(--site-ink-3) !important; }
.close .btn,
.close .btn--glass {
  background: var(--accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 2px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.close .btn:hover { background: var(--accent-deep) !important; }
.close-waves { opacity: 0.75; }

/* --- The last frame ------------------------------------------------------- */
.finale { padding-block: clamp(72px, 12vh, 140px) !important; }
.finale-grain { display: none !important; }
.finale-line { color: var(--site-ink) !important; }
.finale-line .heartmark { color: var(--accent); }

/* --- Section rhythm, one scale ------------------------------------------- */
.cf, .process, .usp, .close { padding-block: var(--section-pad) !important; }

/* --- Audit corrections ----------------------------------------------------
   Two things the colour audit caught.

   The statement was still landing on #F5F2EB — the old ivory — four points
   off the canvas. Every earlier token that used to mean "light" is now an
   alias of --site-bg, so nothing can resolve to a near-miss.

   And the gallery's card shadows were 96px of blur across seven cards,
   which tinted the whole section several points darker than the sections
   either side of it. Measured as a background change even though no
   background had changed. They are now short and tight to the card.
   ------------------------------------------------------------------------ */
:root {
  --bg-primary: var(--site-bg);
  --bg-surface: var(--site-bg);
  --bg-secondary: var(--site-bg);
  --bg-bone: var(--site-bg);
  --bg-stone: var(--site-bg);
  --c-ivory: var(--site-bg);
  --c-ivory-2: var(--site-bg);
  --c-bone: var(--site-bg);
  --c-bone-2: var(--site-bg);
  --c-sand: var(--site-bg);
}
.hero-wash { background: var(--site-bg) !important; }
.hero-wash::after { background: var(--site-bg) !important; }

.cf-screen {
  box-shadow: 0 14px 30px -18px rgba(60, 48, 36, 0.4) !important;
}
.cf-card[data-live='true'] .cf-screen {
  box-shadow: 0 20px 40px -20px rgba(60, 48, 36, 0.46) !important;
}

/* Why-Us and the close were given light-on-dark eyebrows when those sections
   were dark. They are part of the canvas now, and those rules out-specify the
   plain .f-eyebrow, so they were painting ivory on ivory. */
.usp .f-eyebrow,
.close .f-eyebrow,
.finale .f-eyebrow,
.cf .f-eyebrow,
.process .f-eyebrow { color: var(--site-ink-3) !important; }
.usp-copy p,
.close .lede,
.close-sub { color: var(--site-ink-2) !important; }

/* Small tracked capitals render thinner than their nominal colour once
   antialiased, so the nav takes near-solid ink over the canvas rather than
   the 0.78 that merely passes on paper. */
.nav[data-ink='dark'] .nav-index .nav-link { color: rgba(30, 26, 22, 0.9) !important; }
.nav[data-ink='dark'] .nav-index .nav-link:hover { color: var(--site-ink) !important; }