/* =====================================================================
   Big Blue Badger website styles (v2, motion redesign, 7 October 2026)

   Brand (rebranded 2 October 2026): no blue anywhere. Warm charcoal ink,
   warm off-white paper, and four working accents (safety orange,
   sunflower, site green, brick). Every colour lives in the tokens below,
   so the palette can be changed in one place. Hex values and where each
   one is used are listed in the README.

   Wordmark: bigbluebadger in Sora. "big" and "badger" Light 300, "blue"
   Bold 700, all in the same colour. "blue" is picked out by weight only.

   Contrast rules (WCAG AA, checked 2 October 2026):
   - Orange is never text on a light background (2.75:1) and never sits
     behind white text (3.05:1). Orange buttons carry ink text (5.7:1).
   - Orange-family text on light backgrounds uses --rust (5.2:1 on paper,
     4.6:1 on sand).

   How motion works
   - boot.js adds .js to <html> (and .rm when the visitor prefers reduced
     motion). Hidden "before" states only apply under .js, so with no
     JavaScript every word is visible.
   - boot.js also adds .intro-on when the opening animation should play.
     The overlay (.intro) covers the page from the first paint; site.js
     runs the timeline and removes .intro-on when the wordmark lands.
   - site.js adds .in to elements as they scroll into view, .hero-in when
     the hero should animate, and .ready when it has started. Scroll
     driven effects (pins, wipes, scrubbed photo frames, the trades rows)
     write transforms directly from one requestAnimationFrame loop.
   - If site.js never starts, boot.js adds .reveal-all after 4 seconds and
     everything is shown.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/sora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: the whole palette ---------- */
:root {
  /* Neutrals */
  --ink: #1C1A17;        /* text on light, dark sections, header, footer */
  --ink-2: #2A2622;      /* raised surfaces on dark */
  --paper: #F7F3EC;      /* main light background */
  --sand: #EFE5D3;       /* second light background (For owners) */
  --cream: #E9E0D0;      /* secondary text on dark */
  --muted: #5E574E;      /* secondary text on light */
  /* Accents */
  --orange: #F26B1D;     /* safety orange: primary buttons, bars, dots. Never text on light */
  --rust: #B0430D;       /* orange-family text and focus rings on light */
  --sun: #FFC531;        /* sunflower: accents on dark, Growth section, Invest card */
  --green: #1E7A55;      /* site green: Expand card, ticks, bars */
  --forest: #173F30;     /* deep green section (For your people) */
  --mint: #86D5AA;       /* green on dark backgrounds */
  --brick: #B23A2B;      /* brick: bars, outline trades row */
  --clay: #E2775A;       /* brick on dark backgrounds (fourth process step) */
  /* Lines */
  --line-dark: rgba(28, 26, 23, .14);
  --line-light: rgba(255, 255, 255, .16);
  /* Hero and photo overlays: warm charcoal, never blue */
  --shade: 20, 18, 16;   /* RGB of the overlay colour, used inside rgba() */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 76px;      /* header height at the top of the page */
  --header-h-s: 62px;    /* header height once scrolled (it shrinks) */
  --focus: var(--sun);   /* focus ring; light sections switch this to --rust */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;   /* html is the root scroller, so it needs this as well as body */
  overflow-x: clip;     /* clip, where supported, does not break position: sticky */
  scroll-behavior: smooth;
  background: var(--ink);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: "Sora", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
section[id], main [id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 980px; }
.center { text-align: center; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 10px;
  background: var(--sun); color: var(--ink); font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.section-light, .section-sand, .section-sun, .legal { --focus: var(--rust); }
.section-sun { --focus: var(--ink); }

/* ---------- Wordmark: "blue" is bold, same colour as the rest ---------- */
.wordmark {
  font-size: 26px; letter-spacing: -.024em; line-height: 1; text-decoration: none; color: #fff; white-space: nowrap;
}
.wordmark .l { font-weight: 300; }
.wordmark .b { font-weight: 700; color: inherit; }
.wordmark-lg { font-size: clamp(40px, 6vw, 76px); }

/* ---------- Eyebrows, headings, text ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sun);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow-dark { color: var(--rust); }
.section-sun .eyebrow { color: var(--ink); }
.section-sun .eyebrow::before { background: var(--ink); }
.center .eyebrow::before { display: none; }

.h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.028em; line-height: 1.08; }
.h2-big { font-size: clamp(40px, 6vw, 84px); }
.lead { font-size: clamp(17px, 1.45vw, 20px); font-weight: 300; line-height: 1.65; color: var(--muted); margin-top: 24px; max-width: 620px; }
.lead-on-dark { color: var(--cream); }
.section-sun .lead { color: var(--ink); font-weight: 400; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Animated divider: a hairline with an orange stroke that draws across */
/* The track is a 1px hairline drawn in the middle of a 3px box, so the orange stroke can be thicker than the line */
.rule {
  position: relative; height: 3px; margin-top: 36px; overflow: hidden;
  background: linear-gradient(var(--line-dark), var(--line-dark)) 0 50% / 100% 1px no-repeat;
}
.rule::after {
  content: ""; position: absolute; inset: 0; background: var(--orange); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .2s;
}
.rule.in::after { transform: scaleX(.18); }
.section-dark .rule { background-image: linear-gradient(var(--line-light), var(--line-light)); }
.section-dark .rule::after { background: var(--sun); }

/* ---------- Buttons (fill sweeps in on hover) ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1.2 "Sora", Arial, sans-serif; text-decoration: none; cursor: pointer;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .arrow, .text-link .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow, .text-link:hover .arrow { transform: translateX(5px); }
.btn-small { padding: 11px 20px; font-size: 14.5px; }
.btn-full { width: 100%; }
/* Magnetic buttons (desktop with a mouse): site.js moves them, so CSS must not also animate transform */
.has-magnet [data-magnetic] { transition: color .5s var(--ease), border-color .5s var(--ease); }
.has-magnet [data-magnetic]:active { transform: none; }

/* Orange: the main call to action. Ink text, sunflower sweep on hover. */
.btn-accent { background: var(--orange); color: var(--ink); }
.btn-accent::before { background: var(--sun); }
/* Ghost: outline on dark */
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost::before { background: #fff; }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ink); border-color: #fff; }
/* Ink: solid dark button on light sections. Orange sweep, text turns ink for contrast. */
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink::before { background: var(--orange); }
.btn-ink:hover, .btn-ink:focus-visible { color: var(--ink); }
/* Outline: secondary button on light sections */
.btn-outline { color: var(--ink); border-color: rgba(28, 26, 23, .35); background: transparent; }
.btn-outline::before { background: var(--ink); }
.btn-outline:hover, .btn-outline:focus-visible { color: #fff; border-color: var(--ink); }

.text-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  font-weight: 600; color: var(--rust); text-decoration: none; position: relative; padding-bottom: 4px;
}
.text-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.text-link::after {
  content: ""; position: absolute; left: 0; right: 28px; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(.3); transform-origin: left; transition: transform .6s var(--ease);
}
.text-link:hover::after { transform: scaleX(1); }

/* ---------- Scroll progress: runs through the accents ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.progress span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--sun) 50%, var(--mint));
  transform: scaleX(0); transform-origin: left;
}

/* ---------- Cursor dot (desktop with a mouse only; site.js adds .has-cursor) ---------- */
.cursor-dot { display: none; position: fixed; left: 0; top: 0; z-index: 90; width: 0; height: 0; pointer-events: none; }
.has-cursor .cursor-dot { display: block; }
.cursor-dot::before {
  content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px rgba(28, 26, 23, .35);
  transform: scale(.22); opacity: 0;
  transition: transform .45s var(--ease), opacity .3s ease, background-color .35s ease, box-shadow .35s ease;
}
.cursor-dot.on::before { opacity: 1; }
.cursor-dot.hover::before { transform: scale(1); background: rgba(242, 107, 29, .16); box-shadow: 0 0 0 1.5px var(--orange); }
.cursor-dot.down::before { transform: scale(.16); }

/* ---------- Header: shrinks once scrolled, and takes the colour of the section beneath ---------- */
.site-header {
  --hbg: rgba(28, 26, 23, 0); --hline: rgba(255, 255, 255, .35); --hnav: rgba(255, 255, 255, .86); --hunder: var(--sun);
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h);
  color: #fff; background-color: var(--hbg);
  transition: background-color .5s var(--ease), color .5s var(--ease), height .5s var(--ease), transform .6s var(--ease), box-shadow .5s var(--ease);
}
.site-header.scrolled {
  height: var(--header-h-s);
  --hbg: rgba(28, 26, 23, .9);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(var(--shade), .2);
}
/* Section colours (only once scrolled; over the hero at the top it stays clear) */
.site-header.scrolled[data-htheme="forest"] { --hbg: rgba(23, 63, 48, .93); }
.site-header.scrolled[data-htheme="paper"],
.site-header.scrolled[data-htheme="sand"],
.site-header.scrolled[data-htheme="sun"] {
  color: var(--ink); --hline: rgba(28, 26, 23, .32); --hnav: rgba(28, 26, 23, .82); --hunder: var(--rust); --focus: var(--rust);
  box-shadow: 0 1px 0 rgba(28, 26, 23, .08), 0 10px 30px rgba(var(--shade), .08);
}
.site-header.scrolled[data-htheme="paper"] { --hbg: rgba(247, 243, 236, .93); }
.site-header.scrolled[data-htheme="sand"] { --hbg: rgba(239, 229, 211, .94); }
.site-header.scrolled[data-htheme="sun"] { --hbg: rgba(255, 197, 49, .95); --hunder: var(--ink); --focus: var(--ink); }
.site-header.tucked { transform: translateY(-100%); }
html.nav-open .site-header[data-htheme] {
  --hbg: transparent; color: #fff; --hline: rgba(255, 255, 255, .35); --focus: var(--sun);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header .wordmark { color: inherit; transform-origin: 0 50%; transition: transform .5s var(--ease); }
.site-header.scrolled .wordmark { transform: scale(.92); }

.nav { display: flex; align-items: center; gap: 30px; transition: opacity .8s var(--ease) .05s, transform 1s var(--ease) .05s; }
.nav > a:not(.btn) {
  position: relative; font-size: 14.5px; font-weight: 400; text-decoration: none; color: var(--hnav); padding: 6px 0;
  transition: color .3s;
}
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hunder);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav > a:not(.btn):hover { color: inherit; }
.nav > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.burger {
  display: none; position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hline); background: transparent; cursor: pointer; color: inherit;
  transition: opacity .8s var(--ease), transform 1s var(--ease), border-color .5s var(--ease);
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.nav-open .burger span:first-child { top: 22px; transform: rotate(45deg); }
.nav-open .burger span:last-child { top: 22px; transform: rotate(-45deg); }

/* Mobile menu overlay: opens as a circle growing from the menu button */
.mobile-nav {
  position: fixed; inset: 0; z-index: 55; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
  clip-path: circle(0px at calc(100% - var(--gutter) - 23px) 38px);
  visibility: hidden;
  transition: clip-path .8s var(--ease-in-out), visibility 0s linear .8s;
}
/* Four-colour strip along the bottom of the open menu */
.mobile-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, var(--orange) 0 25%, var(--sun) 25% 50%, var(--green) 50% 75%, var(--brick) 75%);
}
.nav-open .mobile-nav { clip-path: circle(150% at calc(100% - var(--gutter) - 23px) 38px); visibility: visible; transition: clip-path .8s var(--ease-in-out), visibility 0s; }
.nav-open, .nav-open body { overflow: hidden; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav nav a, .mobile-nav-foot {
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.mobile-nav nav a {
  color: #fff; text-decoration: none; font-size: clamp(30px, 8.5vw, 44px); font-weight: 300; letter-spacing: -.02em; padding: 6px 0;
}
.mobile-nav nav a:last-child { font-weight: 700; color: var(--sun); }
.nav-open .mobile-nav nav a, .nav-open .mobile-nav-foot {
  opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * 60ms);
}
.mobile-nav-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-light); }
.mobile-nav-foot a { color: var(--cream); }

/* =====================================================================
   OPENING ANIMATION
   The overlay is display:none unless html has .intro-on (set by boot.js
   before the first paint) or .intro-run (set by site.js while the
   timeline plays). Four columns, each an ink sheet over a colour sheet,
   cover the page; the stage on top holds the scaffold, the wordmark, the
   measuring line and the four-colour strip. The "before" states below
   match the timeline's first frame, so nothing jumps when it starts.
   ===================================================================== */
.intro { display: none; }
.intro-on .intro, .intro-run .intro { display: block; position: fixed; inset: 0; z-index: 80; }
.intro-on, .intro-on body { overflow: hidden; }         /* the page cannot scroll under the intro */
.intro.fading { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

.intro-cols { position: absolute; inset: 0; display: flex; }
.ic { position: relative; flex: 1 1 0; }
/* right: -1px overlaps neighbouring columns so no hairline of video shows between them */
.ic-c, .ic-k { position: absolute; top: 0; bottom: 0; left: 0; right: -1px; will-change: transform; }
.ic-c { background: var(--c); }
.ic-k { background: var(--ink); }

.intro-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.intro-rig { position: relative; font-size: clamp(40px, 8.4vw, 132px); line-height: 1; }
.intro-mask { position: relative; z-index: 2; overflow: hidden; padding: .16em .08em .3em; }
.intro-mask.open { overflow: visible; }
.intro-mark.wordmark { display: block; font-size: 1em; color: #fff; opacity: 0; transform-origin: 50% 100%; will-change: transform; }
.intro-mark .ch { display: inline-block; will-change: transform; }

/* Scaffold: poles, ledgers and orange couplers around the wordmark */
.intro-scaffold { position: absolute; z-index: 1; left: -.55em; right: -.55em; top: -.6em; bottom: -.8em; }
.intro-scaffold i { position: absolute; display: block; background: rgba(233, 224, 208, .3); }
.intro-scaffold .pole { top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; transform: scaleY(0); transform-origin: 50% 100%; }
.intro-scaffold .ledger { left: 0; right: 0; top: var(--y); height: 2px; margin-top: -1px; transform: scaleX(0); transform-origin: 0 50%; }
.intro-scaffold .cp { left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 2px; background: var(--orange); transform: scale(0); }

/* Measuring line under the wordmark: sunflower base, orange weld seam, tick marks, spark */
.intro-line { position: absolute; z-index: 3; left: .08em; right: .08em; top: 100%; height: 2px; margin-top: -2px; }
.il-base, .il-weld { position: absolute; inset: 0; transform: scaleX(0); }
.il-base { background: var(--sun); transform-origin: 50% 50%; }
.il-weld { background: var(--orange); transform-origin: 0 50%; box-shadow: 0 0 10px rgba(242, 107, 29, .6); }
.il-ticks { position: absolute; left: 0; right: 0; top: 4px; height: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.il-ticks i { display: block; width: 1.5px; height: 7px; background: rgba(255, 197, 49, .7); transform: scaleY(0); transform-origin: 50% 0; }
.il-ticks i.major { height: 14px; background: var(--sun); }
.il-spark {
  position: absolute; left: 0; top: 1px; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; opacity: 0;
  box-shadow: 0 0 10px 3px rgba(255, 197, 49, .9), 0 0 28px 9px rgba(242, 107, 29, .5);
}
.il-sparks { position: absolute; left: 0; top: 1px; width: 0; height: 0; }
.il-sparks i { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--sun); opacity: 0; }
.il-sparks i:nth-child(3n) { background: #fff; }
.il-sparks i:nth-child(3n+1) { background: var(--orange); }

/* The brand's four colour blocks, sweeping across under the wordmark */
.intro-strip { position: absolute; z-index: 3; left: .08em; right: .08em; top: 100%; height: max(6px, .06em); margin-top: -3px; display: flex; }
.intro-strip span { flex: 1 1 0; transform: scaleX(0); transform-origin: 0 50%; }
.intro-strip span:nth-child(1) { background: var(--orange); }
.intro-strip span:nth-child(2) { background: var(--sun); }
.intro-strip span:nth-child(3) { background: var(--green); }
.intro-strip span:nth-child(4) { background: var(--brick); }

/* Skip: always visible, bottom right, reachable with Tab */
.intro-skip {
  position: absolute; z-index: 4; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(28, 26, 23, .6); color: var(--cream);
  font: 500 13.5px/1 "Sora", Arial, sans-serif; letter-spacing: .02em; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.intro-skip:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .6); }
.intro-skip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* While the intro runs, the header keeps its wordmark hidden (the flying one lands on it) and its menu tucked */
.intro-on .site-header .wordmark { opacity: 0; }
.intro-on .nav, .intro-on .burger { opacity: 0; transform: translateY(-12px); }
/* Skipping snaps straight to the end state: no transitions for the frame it happens in */
.intro-snap [data-hero-in], .intro-snap .hero-title .wi, .intro-snap .nav, .intro-snap .burger { transition: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  color: #fff; background: var(--ink); display: flex; flex-direction: column;
}
.hero-media { position: absolute; inset: 0; transform-origin: 50% 40%; background: var(--ink); will-change: transform; }
.hero-zoom {
  position: absolute; inset: 0; transform-origin: 50% 45%;
  background: var(--ink) url(/media/hero-poster-v1.jpg) center / cover no-repeat;
}
.intro-on .hero-zoom { transform: scale(1.14); }   /* the intro settles this back to 1 as the columns lift */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
}
.hero-video.playing { opacity: 1; }
/* Warm charcoal shade so the white headline stays legible, with a faint
   safety-orange glow rising from the bottom left. Same on the poster. */
.hero-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(242, 107, 29, .26) 0%, rgba(242, 107, 29, 0) 70%),
    linear-gradient(90deg, rgba(var(--shade), .86) 0%, rgba(var(--shade), .6) 55%, rgba(var(--shade), .42) 100%),
    linear-gradient(180deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 30%, rgba(var(--shade), 0) 60%, rgba(var(--shade), .9) 100%);
}
.hero-shade { position: absolute; inset: 0; background: rgb(var(--shade)); opacity: 0; pointer-events: none; }
.hero-content {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + 20px); padding-bottom: 40px; will-change: transform, opacity;
}
.hero-eyebrow { color: var(--cream); }
.hero-title {
  font-size: clamp(44px, 7.6vw, 118px); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; max-width: 12.5em;
}
.hero-title .line { display: block; }
.hero-title .accent { font-weight: 700; color: var(--sun); }
.hero-lede { margin-top: 30px; max-width: 600px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 300; line-height: 1.6; color: var(--cream); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.hero-foot {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.scroll-cue {
  display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
}
.scroll-line { position: relative; width: 1px; height: 46px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.scroll-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--sun);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.video-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(var(--shade), .4); color: var(--cream);
  font: 400 13px/1 "Sora", Arial, sans-serif; cursor: pointer; transition: background .3s, color .3s;
}
.video-toggle[hidden] { display: none; }
.video-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.video-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-toggle .i-play { display: none; }
.video-toggle.is-paused .i-play { display: block; }
.video-toggle.is-paused .i-pause { display: none; }

/* Kinetic headline: site.js wraps each word; words rise into place one after another */
.js .hero-title .w { display: inline-block; clip-path: inset(-.2em -.3em -.24em -.3em); vertical-align: top; }
.js .hero-title .wi {
  display: inline-block; transform: translateY(118%) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1.25s var(--ease); transition-delay: calc(180ms + var(--wi) * 85ms);
}
.js [data-hero-in] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(200ms + var(--d) * 95ms);
}
.hero-in .hero-title .wi, .hero-in [data-hero-in] { transform: none; opacity: 1; }

/* ---------- Section headings: split into words that rise out of a mask (site.js adds .split-ready) ---------- */
.js .split-ready .w { display: inline-block; clip-path: inset(-.2em -.3em -.26em -.3em); vertical-align: top; }
.js .split-ready .wi {
  display: inline-block; transform: translateY(112%) rotate(3deg); transform-origin: 0 100%;
  transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + var(--wi) * 60ms);
}
.js .split-ready[data-reveal] { opacity: 1; transform: none; }
.js .split-ready.in .wi { transform: none; }

/* ---------- Sections: each has its own background ---------- */
.section-light { background: var(--paper); color: var(--ink); }
.section-sand { background: var(--sand); color: var(--ink); }
.section-dark { background: var(--ink); color: #fff; }
.section-forest { background: var(--forest); color: #fff; }
.section-sun { background: var(--sun); color: var(--ink); }
.intro-statement, .approach, .owners, .people, .management, .growth, .lookfor, .process, .contact {
  padding: clamp(84px, 11vw, 160px) 0;
}
.section-head { max-width: 860px; margin-bottom: clamp(44px, 6vw, 80px); }
.approach { padding-top: 0; }
.people, .growth, .process { position: relative; }

/* Colour wipe (desktop): the section starts as the previous section's colour, and its own colour
   opens out from a rounded panel to full width as it scrolls in. site.js adds html.wipe-on and
   writes the clip-path on .wipe-bg. Without it, sections are plain colour. */
.wipe-bg { display: none; }
.wipe-on [data-wipe] { background: var(--wipe-from); }
.wipe-on [data-wipe] > .wipe-bg {
  display: block; position: absolute; inset: 0; z-index: 0; background: var(--wipe-to);
  clip-path: inset(0 24px 0 24px round 48px);   /* starting point only; site.js sets the real inset from the text edge */
}
.wipe-on [data-wipe] > :not(.wipe-bg) { position: relative; z-index: 1; }
[data-wipe="sand"] { --wipe-from: var(--sand); }
[data-wipe="paper"] { --wipe-from: var(--paper); }
.people { --wipe-to: var(--forest); }
.growth { --wipe-to: var(--sun); }
.process { --wipe-to: var(--ink); }

/* Pinned sections (desktop, when the content fits the screen): the track is taller than the
   screen and its inner panel sticks while the scroll progress drives the motion. site.js adds
   .pinned to the track (and .is-pinned to the section) and sets --travel. */
.pinned { height: calc(100vh + var(--travel, 100vh)); }
.pinned > .pin-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.pinned .pin-inner { padding-top: calc(var(--header-h-s) + 8px); }
.approach.is-pinned, .process.is-pinned { padding-top: 0; padding-bottom: 0; }

/* Intro statement: words light up as it scrolls through the screen */
.statement { font-size: clamp(26px, 3.3vw, 46px); font-weight: 400; line-height: 1.32; letter-spacing: -.02em; }
.statement.scrubbing .sw { display: inline-block; color: rgba(28, 26, 23, .2); transform: translateY(.18em); transition: color .4s ease, transform .7s var(--ease); }
.statement.scrubbing .sw.lit { color: var(--ink); transform: none; }

/* Pillars: Invest (sunflower), Buy (orange), Expand (green). Each card sets
   its own background, text and icon colour through --bg, --fg and --icon. */
.pillars { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pillar {
  --bg: #fff; --fg: var(--ink); --icon: var(--ink);
  position: relative; background: var(--bg); color: var(--fg); border-radius: 22px; padding: clamp(28px, 3vw, 40px);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.pillar-sun { --bg: var(--sun); }
.pillar-orange { --bg: var(--orange); }
.pillar-green { --bg: var(--green); --fg: #fff; --icon: #fff; }
.pillar h3 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 26px 0 12px; }
.pillar p { color: var(--fg); font-weight: 400; }
/* Without the pin (phones, short screens): cards rise in one after another, with a slight tilt */
.js .pillar {
  opacity: 0; transform: translateY(70px) rotate(calc((var(--i) - 1) * 3deg));
  transition: opacity 1s var(--ease), transform 1.3s var(--ease), box-shadow .6s var(--ease); transition-delay: calc(var(--i) * 110ms);
}
.js .pillar.in { opacity: 1; transform: none; }
.pillars:not(.dealing) .pillar.in:hover { transform: translateY(-6px); transition-delay: 0s; box-shadow: 0 24px 50px rgba(var(--shade), .18); }
/* With the pin: site.js deals the cards out of a stack, writing each card's transform as you scroll */
.js .pillars.dealing .pillar { opacity: 1; transition: box-shadow .6s var(--ease); transition-delay: 0s; will-change: transform; box-shadow: 0 18px 40px rgba(var(--shade), .14); }

/* Line drawings: each path is pathLength=1, so a dash of 1 hides or shows the whole stroke */
svg.draw { width: 56px; height: 56px; fill: none; stroke: var(--icon, var(--ink)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.js svg.draw > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.js .in svg.draw > *, .js svg.draw.in > * { stroke-dashoffset: 0; }
.js svg.draw > *:nth-child(2) { transition-delay: .15s; }
.js svg.draw > *:nth-child(3) { transition-delay: .3s; }
.js svg.draw > *:nth-child(n+4) { transition-delay: .45s; }

/* Image bands: the frame opens out of a rounded inset as you scroll (site.js writes the clip-path),
   and the image drifts and settles inside it */
.band { background: var(--paper); padding: 0; }
.band-frame {
  position: relative; height: clamp(440px, 78vh, 820px); overflow: hidden; background: var(--ink);
}
.band-frame img, .people-photo img, .mgmt-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform;
}
.band-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--shade), .12) 0%, rgba(var(--shade), .32) 45%, rgba(var(--shade), .88) 100%);
}
.band-quote {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) clamp(36px, 6vw, 80px); max-width: 1240px; margin: 0 auto;
  color: #fff; font-size: clamp(26px, 3.7vw, 54px); font-weight: 300; line-height: 1.16; letter-spacing: -.025em;
}
.band-quote span { display: inline; }
.band-quote span + span { font-weight: 700; color: var(--sun); }
.js .band-quote [data-reveal] { display: inline-block; transform: translateY(40px); }
.js .band-quote [data-reveal].in { transform: none; }
.js [data-scrub-clip] { clip-path: inset(10% 8% 10% 8% round 32px); }
.js [data-clip] { clip-path: inset(9% 7% 9% 7% round 28px); transition: clip-path 1.7s var(--ease); }
.js [data-clip].in { clip-path: inset(0 0 0 0 round var(--r, 0px)); }

/* Owners: sticky heading on the left, points scroll past on the right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.split-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.points { counter-reset: none; }
.point { position: relative; padding: clamp(36px, 4.4vw, 60px) 0 clamp(38px, 4.6vw, 64px); border-top: 1px solid var(--line-dark); }
.point:last-child { border-bottom: 1px solid var(--line-dark); }
.point::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: 100%; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease);
}
.point.is-active::before { transform: scaleX(.4); }
.point h3 { font-size: clamp(22px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; transition: color .5s var(--ease), transform .8s var(--ease); }
.point.is-active h3 { color: var(--rust); transform: translateX(10px); }
.point p { margin-top: 12px; color: var(--muted); font-weight: 300; font-size: 18px; max-width: 560px; transition: transform .8s var(--ease); }
.point.is-active p { transform: translateX(10px); }

/* People (deep green section) */
.people-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.ticks { margin-top: 40px; display: grid; gap: 4px; }
.ticks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-light); }
.ticks li:last-child { border-bottom: 1px solid var(--line-light); }
.ticks svg.tick { width: 26px; height: 26px; stroke: var(--sun); stroke-width: 2.2; margin-top: 2px; }
.ticks h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ticks p { color: var(--cream); font-weight: 300; margin-top: 2px; }
.js .ticks li[data-reveal] { transform: translateX(-28px); }
.js .ticks li[data-reveal].in { transform: none; }
.people-photo, .mgmt-photo { position: relative; overflow: hidden; border-radius: 24px; --r: 24px; aspect-ratio: 4 / 5; background: var(--ink-2); }
.people-photo img { object-position: 50% 50%; }

/* Management */
.mgmt-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.mgmt-photo img { object-position: 62% 50%; }
.mini { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.mini > div { border-top: 1px solid var(--line-dark); padding-top: 18px; position: relative; }
.mini > div::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 40px; height: 3px; background: var(--c, var(--orange));
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .3s;
}
.mini > div:nth-child(1) { --c: var(--orange); }
.mini > div:nth-child(2) { --c: var(--sun); }
.mini > div:nth-child(3) { --c: var(--green); }
.mini > div:nth-child(4) { --c: var(--brick); }
.mini > div.in::before { transform: scaleX(1); }
.mini dt { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.mini dd { color: var(--muted); font-weight: 300; margin-top: 6px; font-size: 16px; }

/* Growth (sunflower section): two rows of trades. Each row is one sequence repeated by site.js so it
   can loop endlessly; scrolling moves it (faster when you scroll faster) and it leans with the speed. */
.growth { overflow: hidden; }
.trades { position: relative; margin-top: clamp(56px, 8vw, 110px); display: grid; gap: 10px; overflow: hidden; }
.trades-row {
  display: flex; width: max-content; will-change: transform;
  font-size: clamp(40px, 7vw, 104px); font-weight: 700; letter-spacing: -.035em; line-height: 1.12;
  color: var(--ink);
}
.trades-seq { display: flex; align-items: center; flex: none; gap: clamp(22px, 3vw, 44px); padding-right: clamp(22px, 3vw, 44px); white-space: nowrap; }
.trades-row i { flex: none; width: .22em; height: .22em; border-radius: 50%; background: var(--orange); }
.trades-row i:nth-of-type(3n+2) { background: var(--green); }
.trades-row i:nth-of-type(3n) { background: var(--brick); }
.trades-row.outline { color: transparent; -webkit-text-stroke: 1.5px var(--brick); font-weight: 600; }
.trades-row.outline i { background: transparent; border: 2px solid var(--brick); }

/* What we look for: white cards, each with its own accent bar and pointer-following glow.
   They tip up out of the page as they arrive. */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; perspective: 1200px; }
.card {
  --c: var(--orange); --glow: rgba(242, 107, 29, .14);
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line-dark); border-radius: 20px;
  padding: 32px 28px 36px; min-height: 230px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.card:nth-child(2) { --c: var(--sun); --glow: rgba(255, 197, 49, .22); }
.card:nth-child(3) { --c: var(--green); --glow: rgba(30, 122, 85, .13); }
.card:nth-child(4) { --c: var(--brick); --glow: rgba(178, 58, 43, .12); }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 70%);
}
.card.in:hover, .js .card[data-reveal].in:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(var(--shade), .1); border-color: var(--c); transition-delay: 0s; }
.card:hover::before { opacity: 1; }
.card::after {
  content: ""; position: absolute; left: 28px; top: 0; width: 44px; height: 5px; background: var(--c); border-radius: 0 0 4px 4px;
  transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease) .35s;
}
.card.in::after { transform: scaleY(1); }
.card h3 { position: relative; font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin-top: 18px; }
.card p { position: relative; margin-top: 12px; color: var(--muted); font-weight: 300; font-size: 16px; }
.js .card[data-reveal] { transform: translateY(60px) rotateX(18deg); transform-origin: 50% 100%; transition: opacity 1s var(--ease), transform 1.3s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease); transition-delay: calc(var(--i, 0) * 100ms); }
.js .card[data-reveal].in { transform: none; }
.aside { margin-top: 40px; font-size: 18px; color: var(--muted); font-weight: 300; }

/* Process: a line fills as you scroll and each step lights up in its own colour.
   Phones: the line runs down the page. Desktop (pinned, .steps-h): it draws across four columns. */
.process .split { align-items: start; }
.steps-wrap { position: relative; padding-left: 58px; max-width: 760px; }
.steps-line { position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: var(--line-light); border-radius: 2px; overflow: hidden; }
.steps-line span {
  position: absolute; inset: 0; transform: scaleY(0); transform-origin: top;
  background: linear-gradient(180deg, var(--orange), var(--sun) 36%, var(--mint) 68%, var(--clay));
}
.step { position: relative; padding-bottom: clamp(44px, 6vw, 72px); --c: var(--orange); }
.step:nth-child(2) { --c: var(--sun); }
.step:nth-child(3) { --c: var(--mint); }
.step:nth-child(4) { --c: var(--clay); }
.step:last-child { padding-bottom: 0; }
.step-dot {
  position: absolute; left: -51px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 2px solid rgba(255, 255, 255, .3); transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .7s var(--ease), transform .7s var(--ease);
}
.step h3 { font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; transition: color .6s var(--ease); }
.step p { margin-top: 12px; color: var(--cream); font-weight: 300; font-size: 18px; max-width: 560px; transition: color .6s var(--ease); }
/* Steps not yet reached are dimmed, only when the script is running (still AA contrast on ink) */
.js .step:not(.on) h3 { color: rgba(255, 255, 255, .58); }
.js .step:not(.on) p { color: rgba(233, 224, 208, .72); }
.step.on .step-dot { border-color: var(--c); background: var(--c); box-shadow: 0 0 0 8px rgba(255, 255, 255, .08); transform: scale(1.15); }
.reveal-all .step h3 { color: #fff !important; }
.reveal-all .step p { color: var(--cream) !important; }

.steps-h .process-layout { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vh, 64px); }
.steps-h .split-sticky { position: static; }
.steps-h .section-head { margin-bottom: 0; max-width: 980px; }
.steps-h .steps-wrap { padding-left: 0; padding-top: 58px; max-width: none; }
.steps-h .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.steps-h .steps-line { left: 9px; right: 0; top: 16px; bottom: auto; width: auto; height: 2px; }
.steps-h .steps-line span { transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--orange), var(--sun) 36%, var(--mint) 68%, var(--clay)); }
.steps-h .step { padding-bottom: 0; transform: translateY(26px); transition: transform .9s var(--ease); }
.steps-h .step.on { transform: none; }
.steps-h .step-dot { left: 0; top: -50px; }
.steps-h .step h3 { font-size: clamp(20px, 1.75vw, 27px); }
.steps-h .step p { font-size: 16.5px; }

/* Contact */
.contact { position: relative; overflow: hidden; }
.contact-bg {
  position: absolute; right: -6vw; bottom: -16vw; font-size: 48vw; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--orange); opacity: .09; pointer-events: none; user-select: none; will-change: transform;
}
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.copy-status { min-height: 1.6em; margin-top: 14px; font-size: 15px; color: var(--muted); }

.composer {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line-dark); border-radius: 24px; padding: clamp(26px, 3vw, 40px);
  box-shadow: 0 30px 70px rgba(var(--shade), .12); display: grid; gap: 16px;
}
/* Four-colour strip across the top of the form */
.composer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--orange) 0 25%, var(--sun) 25% 50%, var(--green) 50% 75%, var(--brick) 75%);
}
.composer h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 4px; }
.composer label { display: grid; gap: 7px; font-size: 14.5px; font-weight: 600; }
.composer .opt { font-weight: 300; color: var(--muted); }
.composer input, .composer textarea {
  width: 100%; font: 400 16px/1.5 "Sora", Arial, sans-serif; color: var(--ink); /* 16px stops iPhone zooming in */
  padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(28, 26, 23, .24); background: var(--paper);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.composer textarea { resize: vertical; min-height: 110px; }
.composer input:focus, .composer textarea:focus { outline: none; border-color: var(--rust); background: #fff; box-shadow: 0 0 0 4px rgba(242, 107, 29, .2); }
.composer a { color: var(--rust); }
.form-error { color: #B42318; font-size: 14.5px; min-height: 0; }
.form-error:empty { display: none; }
.composer .small { font-size: 13.5px; color: var(--muted); font-weight: 300; line-height: 1.55; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--ink); color: #fff; padding: clamp(64px, 8vw, 110px) 0 32px; }
/* Four-colour strip across the top of the footer: each block sweeps in */
.footer-strip { position: absolute; left: 0; right: 0; top: 0; height: 8px; display: flex; }
.footer-strip span { flex: 1 1 0; transform-origin: 0 50%; }
.footer-strip span:nth-child(1) { background: var(--orange); }
.footer-strip span:nth-child(2) { background: var(--sun); }
.footer-strip span:nth-child(3) { background: var(--green); }
.footer-strip span:nth-child(4) { background: var(--brick); }
.js .footer-strip[data-reveal] { opacity: 1; transform: none; }
.js .footer-strip span { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.js .footer-strip span:nth-child(2) { transition-delay: .12s; }
.js .footer-strip span:nth-child(3) { transition-delay: .24s; }
.js .footer-strip span:nth-child(4) { transition-delay: .36s; }
.js .footer-strip.in span { transform: none; }
.footer-top { display: grid; gap: 18px; }
.footer-top .wordmark-lg { width: max-content; max-width: 100%; }
.footer-line { color: var(--cream); font-weight: 300; font-size: 17px; }
.footer-mail { color: #fff; font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.015em; text-decoration: none; width: max-content; max-width: 100%; position: relative; }
.footer-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--sun); transform: scaleX(.25); transform-origin: left; transition: transform .6s var(--ease); }
.footer-mail:hover::after { transform: scaleX(1); }
.footer-bottom {
  margin-top: clamp(48px, 7vw, 90px); padding-top: 24px; border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 14px; color: var(--cream); font-weight: 300;
}
.footer-bottom a { color: var(--cream); }
.footer-bottom a:hover { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* "Replay intro" only makes sense with JavaScript and without reduced motion */
.replay { display: none; }
.js .replay { display: inline; }
.rm .replay { display: none; }

/* ---------- Scroll reveals ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js .rule[data-reveal] { transform: none; }

/* ---------- Failsafe and reduced motion: show everything, move nothing ---------- */
.reveal-all [data-reveal], .reveal-all [data-hero-in], .reveal-all .hero-title .wi, .reveal-all .split-ready .wi,
.reveal-all .pillar, .reveal-all .footer-strip span { opacity: 1 !important; transform: none !important; }
.reveal-all [data-clip], .reveal-all [data-scrub-clip] { clip-path: none !important; }
.reveal-all svg.draw > * { stroke-dashoffset: 0 !important; }
.reveal-all .intro { display: none !important; }
.reveal-all .site-header .wordmark, .reveal-all .nav, .reveal-all .burger { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}
/* Reduced motion: no intro, nothing moves, content simply fades in */
.rm .intro { display: none !important; }
.rm [data-reveal], .rm [data-hero-in] { transform: none !important; transition: opacity .7s ease !important; }
.rm .hero-title .wi, .rm .split-ready .wi, .rm .pillar, .rm .footer-strip span, .rm .statement .sw { transform: none !important; }
.rm .pillar { opacity: 1 !important; }
.rm [data-clip], .rm [data-scrub-clip] { clip-path: inset(0 0 0 0 round var(--r, 0px)) !important; }
.rm svg.draw > * { stroke-dashoffset: 0 !important; }
.rm .hero-video { display: none; }
.rm .band-frame img, .rm .people-photo img, .rm .mgmt-photo img { transform: none; }
.rm .scroll-line::after { animation: none; transform: none; }
.rm .trades-row { transform: none !important; }
.rm .cursor-dot { display: none !important; }

/* ---------- Privacy and other plain pages ---------- */
.page-hero { background: var(--ink); color: #fff; padding: calc(var(--header-h) + clamp(60px, 9vw, 120px)) 0 clamp(56px, 7vw, 90px); position: relative; overflow: hidden; }
.page-hero .bgmark {
  position: absolute; right: -4vw; bottom: -14vw; font-size: 38vw; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--orange); opacity: .14; pointer-events: none; user-select: none;
}
.page-hero h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; position: relative; }
.page-hero p { position: relative; color: var(--cream); margin-top: 18px; font-weight: 300; }
.legal { background: var(--paper); padding: clamp(56px, 8vw, 110px) 0; }
.legal .wrap { max-width: 820px; }
.legal h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.02em; margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: #3A352F; font-weight: 300; font-size: 17px; }
.legal p + p { margin-top: 14px; }
.legal ul { margin: 14px 0; display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 26px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 10px; height: 3px; border-radius: 2px; background: var(--orange); }
.legal strong { font-weight: 600; color: var(--ink); }
.legal a { color: var(--rust); }
.placeholder { background: #FFF4CC; color: #6B4E00; padding: 2px 6px; border-radius: 6px; font-weight: 600; }
.back-link { display: inline-flex; margin-top: 56px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --header-h: 68px; --header-h-s: 60px; }
  .nav { display: none; }
  .burger { display: block; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .split, .people-grid, .mgmt-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .split-sticky { position: static; }
  .people-photo, .mgmt-photo { aspect-ratio: 4 / 3; }
  .mgmt-photo { order: 2; }
  .process .section-head { margin-bottom: 40px; }
  .point.is-active h3, .point.is-active p { transform: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wordmark { font-size: 23px; }
  .hero { min-height: 560px; }
  .hero-title { font-size: clamp(40px, 11.4vw, 60px); }
  .hero-ctas .btn { width: 100%; padding: 16px 18px; font-size: 15px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .15em; }
  .hero-eyebrow::before { display: none; }
  .hero-foot .scroll-cue { font-size: 11px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .mini { grid-template-columns: minmax(0, 1fr); }
  .band-frame { height: 70vh; height: 70svh; min-height: 420px; }
  .steps-wrap { padding-left: 46px; }
  .steps-line { left: 9px; }
  .step-dot { left: -45px; }
  .contact-actions .btn { width: 100%; }
  .point p, .step p { font-size: 16.5px; }
  .intro-skip { font-size: 13px; padding: 10px 14px; }
}

/* ---------- Print: plain, readable, backgrounds kept ---------- */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header, .progress, .mobile-nav, .hero-video, .video-toggle, .scroll-cue, .composer, .contact-bg, .trades, .intro, .cursor-dot { display: none !important; }
  [data-reveal], [data-hero-in], .hero-title .wi, .split-ready .wi, .pillar { opacity: 1 !important; transform: none !important; }
  [data-clip], [data-scrub-clip], .wipe-bg { clip-path: none !important; }
  .pinned { height: auto !important; }
  .pinned > .pin-sticky { position: static !important; height: auto !important; }
  .hero { height: auto; min-height: 0; padding: 40px 0; }
}