/* ScaleSource Local business page.
 * Structure from DESIGN.md (flat, single-weight type, mono labels, hairlines, one micro accent,
 * dark/light bands); colours, logo and content from ScaleSource Local (jobs.scalesource.com).
 * Motion: one authored moment (the film and its text), quiet supporting reveals and feedback. */
:root {
  --bone: #F7F5F0;
  --paper: #FFFFFF;
  --ink: #25211B;
  --muted: #5F564A;
  --night: #1B2620;
  --forest: #1D432B;
  --leaf: #234D2C;        /* header: dark leaf green */
  --line: #E0D9CB;
  --sand: #EFEBE2;
  --mint: #EEF5EF;
  --mint-2: #D6E8D9;
  --line-dark: #3C4A42;
  --signal: #B9C98A;
  --amber: #A8561B;       /* keyword accent on cream/white: the autumn-leaf colour from the Guarantee pile (4.8:1 on bone) */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .9);
  --on-dark-3: rgba(255, 255, 255, .74);
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --nav-h: 76px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* confident arrival */
  --ease-in: cubic-bezier(.4, 0, 1, 1);      /* quick departure */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #B9AF9D var(--bone); }
/* Hero intro: nothing scrolls until Skip intro (or the end of the film) */
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
html { scrollbar-gutter: stable; }
html.is-locked .hero { touch-action: none; }
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font: 400 18px/1.45 var(--sans); letter-spacing: -0.001em; -webkit-font-smoothing: antialiased;
  caret-color: var(--forest);
}
::selection { background: var(--signal); color: var(--night); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--sans); font-weight: 400; margin: 0 0 .4em; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(44px, 6vw, 96px); line-height: 1; letter-spacing: -0.03em; }
h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -0.02em; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -0.006em; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: -0.02em; }
.wrap { width: min(1200px, 100% - 2 * max(var(--gutter), 24px)); margin: 0 auto; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- Keywords: the phrases that carry the pitch get the accent ----------
 * On light bands: amber, tying to the leaves in the Guarantee section.
 * On the film and dark bands: a light olive-lime that reads over footage. */
.key { color: var(--amber); }
p .key, li .key { font-weight: 500; }
.band--light h2 .key, .band--light h2 .w.key { color: var(--amber); }
:is(.hero__frame, .hero__float, .band--dark, .plan--star) .key { color: #D5E6A6; }
/* the masked word keeps its padding so descenders aren't clipped */
.w.key { padding: 0 .02em .1em; margin: 0 -.02em -.1em; }

/* ---------- Buttons: compact, mono, press feedback, the arrow nudges toward its target ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  font: 400 13.5px/1 var(--mono); letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .15s var(--ease-out);
}
.btn .ico { transition: transform .25s var(--ease-out); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--dark { background: var(--night); color: #fff; }
.btn--dark:hover { background: var(--forest); }
.btn--light:hover { background: var(--bone); }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
:is(.btn, a, button, summary):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---------- Labels ---------- */
.counter {
  display: inline-block; margin: 0 0 22px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6); color: var(--on-dark);
  font: 400 13px/1 var(--mono); letter-spacing: -0.02em;
}
.tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 400 13.5px/1.4 var(--mono); letter-spacing: -0.02em; color: var(--muted); }
.tag--light { color: var(--on-dark-2); }
.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }

/* ---------- Header: one flat bar with a sliding pill under the hovered link ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: 28px; padding: 0 max(var(--gutter), calc((100% - 1200px) / 2));
  background: var(--leaf); color: var(--on-dark);
}
/* the logo's dark lettering sits on a cream tile so it reads on the dark bar */
.nav__brand { display: inline-flex; padding: 6px 12px; border-radius: 12px; background: var(--bone); transition: transform .15s var(--ease-out); }
.nav__brand:active { transform: scale(.97); }
.nav__brand img { width: 78px; }
.nav__links { position: relative; display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  position: relative; z-index: 1; padding: 10px 14px; border-radius: 12px;
  font: 400 13.5px/1 var(--mono); letter-spacing: -0.02em; text-decoration: none; color: rgba(255, 255, 255, .85);
  transition: color .2s var(--ease-out);
}
.nav__links a:hover { color: var(--on-dark); }
.nav__pill {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); opacity: 0;
  transition: transform .35s var(--ease-out), opacity .2s;
}

/* ---------- Hero: the film in a rounded frame inset from the page edges ---------- */
.film-on .hero { perspective: 1100px; perspective-origin: 50% 45%; }
/* The scene tilts as one 3D object: the film panel at the back, the text layer floating in front */
.hero__scene { position: relative; height: 100%; container-type: size; /* hero text sizes itself to the panel */ }
.film-on .hero__scene { transform-origin: 50% 60%; }
.is-3d .hero__scene { transform-style: preserve-3d; will-change: transform; }
.film-on .hero__frame { backface-visibility: hidden; }
.hero__float { position: absolute; inset: 0; pointer-events: none; color: var(--on-dark); }
/* 90px in front of the film; scaled back so it lines up with the panel when flat */
.film-on .hero__float { animation: float-in .9s var(--ease-out) .35s backwards; }
.is-3d .hero__float { transform: translateZ(90px) scale(.918); }
@keyframes float-in { from { opacity: 0; } to { opacity: 1; } }
/* a soft shadow falls from the floating text onto the footage */
.film-on .say { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 34px rgba(0, 0, 0, .45); }
.film-on .tags li { box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .6); }
.hero { height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); min-height: 560px; padding: 0 var(--gutter) var(--gutter); background: var(--bone); }
/* Desktop: the film panel floats smaller than the page, with room around it for the tilt to read */
@media (min-width: 768px) {
  .hero {
    --pad-top: clamp(14px, 3vh, 40px); --pad-bot: clamp(28px, 5vh, 64px);
    padding: var(--pad-top) 0 var(--pad-bot);
    display: flex; align-items: center; justify-content: center;
  }
  /* 80% of the page width at 16:9; on shorter screens the height is capped to fit the window */
  .hero__scene {
    flex: none; width: 80%;
    height: min(calc(80vw * 9 / 16), calc(100dvh - var(--nav-h) - var(--pad-top) - var(--pad-bot)));
  }
  .film-on .hero__frame { box-shadow: 0 50px 90px -40px rgba(27, 38, 32, .55), 0 18px 36px -24px rgba(27, 38, 32, .35); }
}
.hero__frame {
  position: relative; height: 100%; overflow: hidden; border-radius: 28px; isolation: isolate;
  background: var(--night) url(assets/frames/K0-seed.webp) 30% 55% / cover no-repeat; color: var(--on-dark);
}
.hero__stage { position: absolute; inset: 0; }
.film-on .hero__frame { background-image: none; }
.hero__videos { position: absolute; inset: 0; z-index: 0; }
.hero__videos video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* A shade under the text: dark enough for white type over the brightest footage */
.hero__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(10, 15, 12, .86) 0%, rgba(10, 15, 12, .55) 38%, rgba(10, 15, 12, 0) 68%),
    linear-gradient(to top, rgba(10, 15, 12, .55), rgba(10, 15, 12, 0) 45%);
}

/* Opening: the frame opens out of the page as the film settles into place */
.film-on .hero__frame { animation: frame-open 1.2s var(--ease-out) backwards; }
@keyframes frame-open { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Scene text: straight on the video, in the right third every keyframe keeps clear ---------- */
.beat { display: none; }
.beat--lead { display: flex; }
.beat {
  position: absolute; inset: 0; z-index: 3; align-items: flex-end; justify-content: flex-end;
  padding: clamp(20px, 6cqh, 64px) clamp(24px, 4.4cqw, 64px) clamp(44px, 10cqh, 84px); pointer-events: none;
}
.say { width: min(640px, 54%); max-height: 100%; pointer-events: auto; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.say h1 { font-size: clamp(32px, min(5.4cqw, 9.5cqh), 92px); }
.say h1 { margin-bottom: clamp(12px, 3cqh, 24px); }
.lede, .say__body { font-size: clamp(16px, min(1.75cqw, 3.4cqh), 23px); line-height: 1.4; letter-spacing: -0.006em; color: var(--on-dark-2); max-width: 34em; }
.say__title { font-size: clamp(34px, min(5.6cqw, 10cqh), 89px); line-height: 1; letter-spacing: -0.025em; margin: 0 0 20px; }
.say__title--xl { font-size: clamp(36px, min(6cqw, 11cqh), 100px); }
.tags { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6);
  font: 400 13.5px/1 var(--mono); letter-spacing: -0.02em; color: var(--on-dark); text-shadow: none;
  background: rgba(10, 15, 12, .25);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }

/* Split headlines: each word rises out of its own mask */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.w > span { display: inline-block; }

/* Scene choreography (film running). Handover is sequential: the old text leaves quickly with no
 * blur, and the new text only starts once it has gone, so two captions never overlap. */
.film-on .beat { display: flex; visibility: hidden; transition: visibility 0s linear .28s; }
.film-on .beat.is-on { visibility: visible; transition: none; }
.film-on .beat .w > span { transform: translateY(110%); transition: transform .25s var(--ease-in); }
.film-on .beat.is-on .w > span { transform: none; transition: transform .9s var(--ease-out) calc(.34s + var(--i, 0) * 60ms); }
.film-on .beat .say > :not([data-split]) {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .22s var(--ease-in), transform .25s var(--ease-in);
}
.film-on .beat.is-on .say > :not([data-split]) {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out) .34s, transform .9s var(--ease-out) .34s;
}
.film-on .beat.is-on .say > :nth-child(3) { transition-delay: .62s; }
.film-on .beat.is-on .say > :nth-child(4) { transition-delay: .74s; }
.film-on .beat .tags li { opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease-in); }
.film-on .beat.is-on .tags li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(.84s + var(--i, 0) * 70ms); }

/* Film controls: progress rail, skip, pause, and the cue that appears when it ends */
.hero__rail, .hero__skip, .hero__toggle, .hero__cue { display: none; }
.film-on .hero__rail { display: block; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.16); }
.hero__rail-fill { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
.film-on .hero__skip, .film-on .hero__cue {
  display: inline-flex; gap: 8px; align-items: center; position: absolute; z-index: 4;
  height: 38px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.6); color: var(--on-dark); background: rgba(10, 15, 12, .25);
  font: 400 13px/1 var(--mono); letter-spacing: -0.02em; text-transform: uppercase;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s, border-color .2s;
}
.film-on .hero__skip { top: 20px; right: 20px; }
.film-on .hero__cue { left: 50%; bottom: 22px; translate: -50% 0; }
.film-on :is(.hero__skip, .hero__cue).is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.film-on :is(.hero__skip, .hero__cue):hover { border-color: var(--on-dark); }
.film-on .hero__cue .ico { transition: transform .3s var(--ease-out); }
.film-on .hero__cue:hover .ico { transform: translateY(2px); }
.film-on .hero__toggle {
  display: grid; place-items: center; position: absolute; z-index: 4; left: 20px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
  background: rgba(10, 15, 12, .25); color: var(--on-dark); cursor: pointer;
  transition: border-color .2s, transform .15s var(--ease-out);
}
.film-on .hero__toggle:hover { border-color: var(--on-dark); }
.film-on .hero__toggle:active { transform: scale(.94); }
.hero__toggle .ico--play { display: none; }
.film-on .hero__toggle[hidden] { display: none; }
.hero__toggle.is-paused .ico--play { display: block; }
.hero__toggle.is-paused .ico--pause { display: none; }

/* ---------- Bands ---------- */
.band { padding: 128px 0; }
.band--light { background: var(--bone); color: var(--ink); }
/* Drifting leaves: the pattern sits on its own layer and slides one tile diagonally over two and a
 * half minutes, then loops seamlessly. Moving a layer costs the GPU nothing, unlike repainting. */
.band--light { position: relative; isolation: isolate; overflow: hidden; }
.band--light::before {
  content: ""; position: absolute; z-index: -1; inset: -560px; pointer-events: none;
  background: url(assets/brand/leaf-pattern.svg) 0 0 / 560px 560px;
  animation: leaves-drift 150s linear infinite; will-change: transform;
}
#plans::before { animation-delay: -50s; }
#faq::before { animation-delay: -100s; }
.is-locked .band--light::before { display: none; } /* off entirely while the film plays */
@keyframes leaves-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(560px, 560px, 0); } }
.band--dark { background: var(--night); color: var(--on-dark); }
.band__title { max-width: 16em; }
.band__sub { color: var(--muted); font-size: 22px; letter-spacing: -0.006em; max-width: 30em; margin-bottom: 64px; }
.band--dark .band__sub { color: var(--on-dark-3); }
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }

.rows { list-style: none; padding: 0; margin: 0; }
.rows li { padding: 28px 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows h3 { margin-bottom: 8px; }
.rows p { margin: 0; color: var(--muted); }
.rows--dark li { border-color: var(--line-dark); }
.rows--dark p { color: var(--on-dark-3); }

/* The bench: every trade, ready before you need them */
/* THE BENCH wordmark: letters cut from each trade's material fly in, then the bench-shaped H drops */
.wordbench { margin: 0; }
.wordbench svg { display: block; width: 100%; height: auto; overflow: visible; }
.wordbench:not(.is-laid-out) svg { visibility: hidden; }
.wb-shape { font: 800 252px/1 var(--sans); letter-spacing: -0.02em; stroke: rgba(10, 15, 12, .45); stroke-width: 3px; paint-order: stroke; }
.wb-fly { transform-box: fill-box; transform-origin: 50% 100%; }
.motion-on .wordbench .wb-fly { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -1000px)) rotate(var(--fr, 0)); }
.wordbench.is-in .wb-fly { animation: wb-land 1s cubic-bezier(.3, 1.4, .55, 1) var(--d) both; }
.wordbench.is-in .wb-letter--bench .wb-fly { animation: wb-thud 1.15s var(--d) both; }
@keyframes wb-land {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
  20% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes wb-thud { /* drops in, squashes on impact, settles */
  0% { opacity: 0; transform: translateY(-1000px); animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
  12% { opacity: 1; }
  62% { transform: translateY(0) scale(1.07, .88); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  80% { transform: translateY(-28px) scale(.97, 1.04); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  100% { opacity: 1; transform: none; }
}

/* Photo on the left, the three steps stacked on the right */
.how { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.how .steps { grid-template-columns: 1fr; gap: 0; align-content: space-between; }
.how .steps li { padding: 26px 0; }
.how .steps li:last-child { border-bottom: 1px solid var(--line-dark); }
.how .steps__num { margin-bottom: 14px; }
.bench { margin: 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #2a3a30; }
.bench img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.04); transition: transform 1.6s var(--ease-out); }
.motion-on .bench.is-in img { transform: none; }
/* the live 3D bench sits over the photo once WebGL is running; drag to orbit */
.bench { position: relative; }
.bench__3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.bench__3d:active { cursor: grabbing; }
.bench.is-3d-ready img { visibility: hidden; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps li { padding-top: 24px; border-top: 1px solid var(--line-dark); }
.steps__num { font: 400 13px/1 var(--mono); text-transform: uppercase; color: var(--signal); margin-bottom: 40px; }
.steps p:last-child { color: var(--on-dark-3); margin: 0; }

/* The leaf pile over the guarantee, blown clear by a gust (see setupLeafBlow) */
#guarantee { position: relative; overflow: hidden; isolation: isolate; }
.leafpile { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.leafpile--fly { z-index: 6; }
/* the leaf blower: small, high on the left, tilted down across the section (angle matches film.js) */
.blower {
  position: absolute; left: 0; z-index: 7; width: auto; pointer-events: none;
  transform-origin: 0 53.3%;
  transform: translateX(-105%) rotate(14deg); transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
}
.blower.is-on { transform: translateX(0) rotate(14deg); }
.blower.is-running { animation: blower-rev .07s linear infinite; }
@keyframes blower-rev { 0% { translate: 0 0; } 25% { translate: .7px -.5px; } 50% { translate: -.5px .6px; } 75% { translate: .6px .3px; } 100% { translate: 0 0; } }
.blower:not(.is-on) { transition-duration: .55s; transition-timing-function: cubic-bezier(.5, 0, .75, 0); }

/* Plans: the flagship leads, the other two stack beside it */
.plans { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; gap: 16px; }
.plan {
  padding: 36px 40px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line);
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out);
}
.plan:hover { border-color: #C9BFAA; transform: translateY(-2px); }
.plan h3 { font-size: 32px; line-height: 1.15; letter-spacing: -0.006em; margin-bottom: 8px; }
.plan__for { color: var(--muted); margin-bottom: 22px; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 17px; color: var(--muted); }
.plan--star { grid-row: span 2; padding: 48px; background: var(--night); color: var(--on-dark); border-color: var(--night); }
.plan--star:hover { border-color: var(--night); }
.plan--star h3 { font-size: clamp(36px, 3.6vw, 52px); letter-spacing: -0.015em; }
.plan--star .plan__for { color: var(--on-dark-3); }
.plan--star li { border-color: var(--line-dark); color: var(--on-dark-2); font-size: 18px; }

/* FAQ: answers ease open */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-size: 22px; line-height: 1.35; letter-spacing: -0.006em; transition: color .2s;
}
.faq summary:hover { color: var(--forest); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--muted); transition: transform .35s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a p { margin: 0 0 22px; color: var(--muted); max-width: 60ch; }
.motion-on .faq details[open] .faq__a { animation: answer-in .45s var(--ease-out) both; }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.footer { background: #0C110E; color: rgba(255,255,255,.72); padding: 64px 0 72px; }
.footer__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; }
.footer__logo { display: inline-block; padding: 12px 16px; border-radius: 12px; background: var(--paper); margin-bottom: 14px; }
.footer__small p { margin: 0; font-size: 15px; max-width: 52ch; }

/* ---------- Scroll reveals (page below the hero) ---------- */
.motion-on [data-split] .w > span { transform: translateY(110%); }
.motion-on [data-split].is-in .w > span { transform: none; transition: transform 1s var(--ease-out) calc(var(--i, 0) * 55ms); }
.motion-on [data-reveal] > * { opacity: 0; transform: translateY(20px); }
.motion-on [data-reveal].is-in > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(.15s + var(--i, 0) * 90ms);
}
.motion-on [data-reveal-self] { opacity: 0; transform: translateY(12px); }
.motion-on [data-reveal-self].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) .2s, transform .9s var(--ease-out) .2s; }
/* the plan cards keep their hover lift after revealing */
.motion-on .plans.is-in > .plan:hover { transform: translateY(-2px); transition-delay: 0s; }

/* ---------- Smaller screens ---------- */
@media (max-width: 900px) {
  .split, .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }

  .plans { grid-template-columns: 1fr; }
  .plan--star { grid-row: auto; }
  .band { padding: 92px 0; }
}
@media (max-width: 767px) {
  :root { --nav-h: 64px; --gutter: 12px; }
  .nav__links { display: none; }
  .nav__brand img { width: 64px; }
  .hero__frame { border-radius: 20px; }
  .beat { padding: 22px 20px 78px; justify-content: flex-start; }
  .say { width: 100%; }
  .hero__shade { background: linear-gradient(to top, rgba(10, 15, 12, .9) 0%, rgba(10, 15, 12, .55) 48%, rgba(10, 15, 12, 0) 75%); }
  .film-on .hero__toggle { left: 14px; bottom: 14px; }
  .film-on .hero__skip { top: 14px; right: 14px; }
  .plan, .plan--star { padding: 28px; }
}

/* Reduced motion: no travel, no zoom, no blur; meaning still arrives by gentle fades */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .film-on .hero__frame, .film-on .hero__videos video { animation: none; }
  .w > span, .film-on .beat .w > span, .motion-on [data-split] .w > span { transform: none !important; }
  .film-on .beat .say > *, .motion-on [data-reveal] > *, .motion-on [data-reveal-self] { transform: none !important; filter: none !important; }
  .plan:hover { transform: none; }
  .bench img { transform: none; transition: none; }
  .band--light::before { animation: none; }
  .motion-on .wordbench .wb-fly { opacity: 1; transform: none; animation: none !important; }
}

/* ---------- Problem lead ---------- */
.band__lead { color: var(--muted); font-size: 20px; letter-spacing: -0.006em; max-width: 26em; }

/* ---------- Why us: the five things nobody else does together ---------- */
.gap { list-style: none; padding: 0; margin: 0 0 72px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); }
.gap li { display: grid; gap: 22px; align-content: start; padding: 28px 24px 8px 0; }
.gap li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.gap__num { font: 400 13px/1 var(--mono); color: var(--forest); }
.gap h3 { font-size: 22px; margin-bottom: 8px; }
.gap p { margin: 0; color: var(--muted); font-size: 16.5px; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.fit h3 { margin-bottom: 18px; }
.chips-light { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-light li { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 400 14px/1 var(--mono); letter-spacing: -0.02em; color: var(--ink); }

/* ---------- What hiring costs you today ---------- */
.costs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.costs li { padding: 30px 24px 8px 0; }
.costs li + li { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.costs__what { font: 400 13.5px/1.4 var(--mono); letter-spacing: -0.02em; color: var(--on-dark-3); min-height: 2.8em; margin-bottom: 20px; }
.costs__amt { font-size: clamp(38px, 3.6vw, 54px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 18px; color: var(--on-dark); }
.costs__amt small { font-size: max(.38em, 15px); letter-spacing: 0; color: var(--on-dark-3); margin-left: 4px; }
.costs__vs { margin: 0; color: var(--on-dark-3); font-size: 16px; }

/* ---------- Pricing ---------- */
.pricing { position: relative; }
.pricing__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(to right, rgba(95, 86, 74, .12) 1px, transparent 1px), linear-gradient(to bottom, rgba(95, 86, 74, .12) 1px, transparent 1px);
  background-size: 35px 35px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 60%, transparent 100%);
}
.pricing .wrap { position: relative; z-index: 1; }
.pricing__head { text-align: center; display: grid; justify-items: center; }
.pricing__head .band__title, .pricing__head .band__sub { margin-left: auto; margin-right: auto; }
.pricing__head .band__sub { margin-bottom: 32px; }

.freq { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sand); border: 1px solid var(--line); margin-bottom: 56px; }
.freq__pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px;
  background: var(--paper); box-shadow: 0 1px 3px rgba(37, 33, 27, .14);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.no-anim .freq__pill { transition: none; }
.freq__tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 400 14px/1 var(--mono); letter-spacing: -0.02em; color: var(--muted); transition: color .2s;
}
.freq__tab.is-on { color: var(--ink); }
.freq__badge { padding: 4px 9px; border-radius: 999px; background: var(--forest); color: #fff; font-size: 12px; }

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column; gap: 28px; overflow: hidden;
  padding: 28px 26px 26px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); text-align: left;
  transition: transform .35s var(--ease-out), border-color .25s var(--ease-out);
}
.tier:hover { transform: translateY(-3px); border-color: #C9BFAA; }
.tier__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 22px; margin: 0; }
.tier__badge { position: absolute; top: 24px; right: 22px; padding: 5px 10px; border-radius: 999px; background: var(--mint-2); color: var(--forest); font: 400 12px/1 var(--mono); letter-spacing: -0.02em; }
.tier__price { min-height: 70px; }
.price { display: inline-flex; font-size: 44px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price .p { display: inline-block; }
.price .d { display: inline-block; height: 1em; overflow: hidden; }
.price .d__strip { display: block; width: 1ch; white-space: pre-wrap; word-break: break-all; line-height: 1; text-align: center; transform: translateY(0); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.no-anim .price .d__strip { transition: none; }
.tier__per { margin: 8px 0 0; font: 400 12.5px/1.2 var(--mono); letter-spacing: -0.02em; color: var(--muted); }
.tier__body { flex: 1; }
.tier__desc { font-weight: 500; font-size: 16px; margin: 0 0 14px; }
.tier__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tier__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--muted); }
.tier__list li::before {
  content: ""; width: 18px; height: 18px; margin-top: 1px; background: currentColor; color: var(--forest);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><path d='m9 12 2 2 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/><path d='m9 12 2 2 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.tier__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 8px;
  background: var(--night); color: #fff; text-decoration: none; font: 400 13px/1 var(--mono); letter-spacing: -0.01em; text-transform: uppercase;
  transition: background .2s, transform .15s var(--ease-out);
}
.tier__cta:hover { background: var(--forest); }
.tier__cta:active { transform: scale(.97); }
.tier__cta .ico { transition: transform .25s var(--ease-out); }
.tier__cta:hover .ico { transform: translateX(3px); }

/* the most popular plan: a forest ring and a soft glow from the top */
.tier--popular { border: 2px solid var(--forest); padding: 27px 25px 25px; }
.tier--popular::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(185, 201, 138, .32), transparent 70%); }
.tier--popular { isolation: isolate; }
/* the top plan: dark, with a faint grid like the section background */
.tier--top { background: var(--night); border-color: var(--night); color: #fff; isolation: isolate; }
.tier--top::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 45px 45px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 60%, transparent 110%); mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 60%, transparent 110%);
}
.tier--top:hover { border-color: var(--night); }
.tier--top .tier__per, .tier--top .tier__list li { color: rgba(255,255,255,.78); }
.tier--top .tier__list li::before { color: var(--signal); }
.tier--top .tier__cta { background: var(--paper); color: var(--ink); }
.tier--top .tier__cta:hover { background: var(--bone); }
.pricing__note { margin: 24px auto 0; max-width: 60ch; text-align: center; color: var(--muted); font-size: 15px; }

.audit { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 56px; padding: 32px 36px; border-radius: 20px; background: var(--mint); border: 1px solid var(--mint-2); }
.audit h3 { margin-bottom: 6px; }
.audit p:not(.tag) { margin: 0; color: var(--muted); }
.audit .tag { margin-bottom: 12px; }

.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 64px; }
.extras h3 { margin-bottom: 14px; }
.extras__list { list-style: none; padding: 0; margin: 0; }
.extras__list li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
.extras__list li:last-child { border-bottom: 1px solid var(--line); }
.extras__list li span:last-child { font: 400 14px/1.5 var(--mono); letter-spacing: -0.02em; color: var(--forest); white-space: nowrap; }

.guarantee__note { margin: 28px 0 0; color: var(--on-dark-3); font-size: 14.5px; max-width: 52ch; }

@media (max-width: 1100px) {
  .tiers { grid-template-columns: 1fr 1fr; }
  .gap { grid-template-columns: 1fr 1fr; }
  .gap li, .gap li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .costs { grid-template-columns: 1fr 1fr; }
  .costs li, .costs li + li { padding: 26px 20px 20px 0; border-left: 0; border-bottom: 1px solid var(--line-dark); }
}
@media (max-width: 767px) {
  .tiers, .gap, .costs, .fit, .extras { grid-template-columns: 1fr; gap: 16px; }
  .fit, .extras { gap: 40px; }
  .audit { flex-direction: column; align-items: flex-start; padding: 26px; }
  .freq__tab { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .price .d__strip, .freq__pill { transition: none; }
  .tier:hover { transform: none; }
}

/* ---------- Terms ---------- */
.band--terms { border-bottom: 1px solid var(--line); }
.terms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.terms li { padding: 22px 0; border-top: 1px solid var(--line); }
.terms h3 { font-size: 20px; margin-bottom: 6px; }
.terms p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 767px) { .terms { grid-template-columns: 1fr; } }

/* ---------- The crew tree (Why us): a transparent looping clip, the still underneath as fallback ---------- */
.why-top { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.why-top .band__sub { margin-bottom: 0; }
.treecrew { position: relative; width: 100%; margin: 0; aspect-ratio: 1100 / 846; }
.treecrew img, .treecrew video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.treecrew video { opacity: 0; transition: opacity .6s var(--ease-out); }
.treecrew.is-playing video { opacity: 1; }
.treecrew.is-playing img { opacity: 0; transition: opacity .6s var(--ease-out) .25s; }

/* the "built for" and "you need a bench if" lists now sit in the dark bench section */
.fit--dark { margin-top: 72px; border-top-color: var(--line-dark); }
.fit--dark h3 { color: var(--on-dark); }
.fit--dark .chips-light li { background: transparent; border-color: rgba(255,255,255,.45); color: var(--on-dark); }
.fit--dark .checks { color: var(--on-dark-2); }

/* counting figures keep a steady width while they count */
.costs__amt [data-count] { font-variant-numeric: tabular-nums; }

/* pricing cards: lift, deepen and light up on hover (beats the reveal rule's transform) */
.motion-on .tiers.is-in > .tier, .tier {
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), border-color .3s;
  transition-delay: 0s;
}
.motion-on .tiers.is-in > .tier:hover, .tier:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 50px -28px rgba(27, 38, 32, .45), 0 10px 18px -12px rgba(27, 38, 32, .25);
  border-color: var(--forest);
}
.tier--top:hover { border-color: var(--night); box-shadow: 0 34px 60px -28px rgba(27, 38, 32, .7); }
.tier--popular:hover::before { background: radial-gradient(ellipse 90% 90% at 50% -20%, rgba(185, 201, 138, .5), transparent 70%); }
.tier:hover .tier__name { color: var(--forest); }
.tier--top:hover .tier__name { color: var(--signal); }
.tier__name { transition: color .3s; }
.tier:hover .tier__cta { background: var(--forest); }
.tier--top:hover .tier__cta { background: var(--signal); color: var(--night); }
.tier:hover .tier__cta .ico { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .motion-on .tiers.is-in > .tier:hover, .tier:hover { transform: none; }
}
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 7px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }