/*
 * Ectonomic. One continuous charcoal surface from the hero to the footer.
 * No section has a colour of its own (the hero paints the body's charcoal
 * token and the rest paint nothing), so nothing can draw an edge: the
 * orb fades into the charcoal, each photo lights the charcoal around it in
 * its own colours, and the brand's light pools softly behind the two things
 * a visitor acts on: the prices and the form that closes the page. Cards are
 * tonal, a step lighter than the ground, never black.
 *
 * The type follows one hierarchy: small uppercase labels, bold headings of
 * moderate size, and small body text in narrow, deliberately spaced columns.
 * Lime is the brand's light and signal; on white it becomes a deep green for
 * small signals, and as a flat fill it is never used.
 */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-Variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* the light half: white and a soft grey, near-black ink */
  --bg: #ffffff;
  --bg-soft: #f5f5f4;
  --fg: #141414;
  --fg-2: #333333;
  --muted: #5c5c5c;
  --subtle: #6e6e6e;
  --soft: #a3a3a3;
  --line: #e7e7e5;
  --line-2: #d7d7d4;
  --field: #ffffff;
  --accent: #4d7c0f;
  --btn-bg: #141414;
  --btn-fg: #ffffff;
  --btn-hover: #2e2e2e;
  --ghost-line: #cfcfcc;
  --ghost-line-hover: #8f8f8c;
  --ghost-hover-bg: rgba(0, 0, 0, 0.03);
  --ring: #cfcfcc;
  --lime: #c8f22e;
  --lime-deep: #9be012;
  --ok: #15803d;
  --info: #1d4ed8;

  /* the dark half's ground: a charcoal, never black */
  --night: #121212;

  /* type: small labels, bold headings, small text */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-display: clamp(32px, 3.5vw, 52px);
  --t-h2: clamp(26px, 2.7vw, 40px);
  --t-h3: 19px;
  --t-body: 16px;
  --t-small: 14px;
  --t-meta: 13px;

  /* space: generous around sections, tight inside them */
  --wrap: 1080px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(80px, 9vw, 128px);
  --head-gap: clamp(36px, 4vw, 56px);
  /* the hero's body is drawn on a canvas this many times the hero's height,
     so it can continue below the hero and end on its own rim */
  --orb-extend: 1.4;
  /* how much of the body the reel's veil hides while the reel plays */
  --reel-dim: 0.86;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* grey noise centred on middle grey, so blended as an overlay it adds
     texture without lightening or darkening anything on average */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2 0 0 0 -0.5 2 0 0 0 -0.5 2 0 0 0 -0.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --splat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M28.20,2.63 C28.73,2.57 29.27,2.54 29.80,2.54 C30.33,2.55 30.87,2.58 31.40,2.64 C31.93,2.70 32.46,2.80 32.98,2.92 C33.50,3.04 34.01,3.20 34.52,3.37 C35.02,3.55 35.51,3.76 36.00,3.99 C36.48,4.21 36.95,4.47 37.41,4.74 C37.87,5.02 38.32,5.31 38.75,5.62 C39.18,5.94 39.60,6.27 40.02,6.61 C40.43,6.95 40.82,7.31 41.21,7.67 C41.61,8.04 41.98,8.41 42.36,8.79 C42.74,9.17 43.11,9.56 43.48,9.94 C43.85,10.33 44.22,10.72 44.59,11.10 C44.97,11.48 45.34,11.86 45.73,12.23 C46.12,12.60 46.51,12.96 46.91,13.31 C47.32,13.66 47.74,13.99 48.17,14.31 C48.60,14.63 49.04,14.92 49.50,15.21 C49.95,15.49 50.42,15.74 50.89,15.99 C51.37,16.24 51.85,16.46 52.34,16.69 C52.82,16.92 53.31,17.14 53.79,17.37 C54.27,17.60 54.76,17.83 55.23,18.08 C55.70,18.33 56.17,18.59 56.62,18.87 C57.07,19.16 57.52,19.46 57.94,19.79 C58.36,20.12 58.76,20.47 59.14,20.84 C59.52,21.22 59.88,21.62 60.20,22.04 C60.53,22.47 60.83,22.91 61.09,23.38 C61.36,23.84 61.59,24.33 61.78,24.82 C61.98,25.32 62.14,25.83 62.25,26.35 C62.37,26.87 62.45,27.41 62.49,27.94 C62.53,28.47 62.53,29.01 62.49,29.54 C62.44,30.07 62.36,30.60 62.24,31.12 C62.13,31.64 61.97,32.16 61.78,32.66 C61.59,33.16 61.36,33.64 61.11,34.11 C60.85,34.58 60.56,35.04 60.26,35.47 C59.95,35.91 59.61,36.32 59.26,36.72 C58.91,37.13 58.53,37.51 58.15,37.88 C57.76,38.25 57.36,38.61 56.96,38.96 C56.56,39.32 56.15,39.66 55.75,40.01 C55.34,40.36 54.94,40.71 54.54,41.07 C54.15,41.43 53.76,41.80 53.40,42.19 C53.03,42.57 52.67,42.98 52.34,43.39 C52.00,43.81 51.68,44.24 51.38,44.68 C51.08,45.12 50.80,45.58 50.54,46.04 C50.28,46.51 50.03,46.99 49.81,47.47 C49.58,47.95 49.38,48.45 49.18,48.95 C48.99,49.44 48.81,49.95 48.63,50.45 C48.46,50.96 48.29,51.47 48.11,51.97 C47.94,52.47 47.76,52.98 47.57,53.48 C47.37,53.97 47.17,54.47 46.94,54.95 C46.71,55.43 46.47,55.91 46.19,56.37 C45.92,56.83 45.63,57.28 45.31,57.71 C44.99,58.13 44.64,58.55 44.27,58.93 C43.90,59.32 43.51,59.68 43.09,60.01 C42.67,60.34 42.23,60.65 41.77,60.92 C41.31,61.19 40.83,61.44 40.34,61.64 C39.85,61.84 39.33,62.01 38.82,62.14 C38.30,62.27 37.77,62.36 37.24,62.42 C36.71,62.47 36.17,62.48 35.64,62.46 C35.11,62.44 34.57,62.37 34.05,62.27 C33.52,62.18 33.00,62.04 32.50,61.87 C31.99,61.70 31.49,61.50 31.01,61.27 C30.53,61.03 30.06,60.77 29.61,60.48 C29.16,60.20 28.73,59.88 28.31,59.55 C27.89,59.22 27.49,58.87 27.09,58.51 C26.70,58.14 26.33,57.76 25.95,57.38 C25.58,57.00 25.22,56.60 24.86,56.21 C24.49,55.82 24.13,55.42 23.76,55.04 C23.39,54.66 23.01,54.27 22.62,53.91 C22.24,53.54 21.84,53.18 21.43,52.84 C21.01,52.50 20.59,52.17 20.16,51.86 C19.73,51.54 19.28,51.25 18.83,50.96 C18.38,50.68 17.92,50.41 17.45,50.15 C16.98,49.89 16.50,49.65 16.02,49.42 C15.54,49.19 15.05,48.98 14.55,48.77 C14.06,48.56 13.57,48.36 13.07,48.16 C12.58,47.96 12.08,47.76 11.58,47.56 C11.09,47.35 10.60,47.14 10.11,46.92 C9.63,46.69 9.15,46.45 8.68,46.19 C8.22,45.94 7.75,45.66 7.31,45.36 C6.87,45.06 6.44,44.74 6.03,44.40 C5.62,44.06 5.23,43.69 4.86,43.30 C4.50,42.91 4.15,42.50 3.84,42.07 C3.52,41.64 3.23,41.19 2.98,40.72 C2.72,40.25 2.50,39.76 2.31,39.26 C2.12,38.76 1.96,38.25 1.84,37.73 C1.72,37.21 1.64,36.68 1.59,36.15 C1.54,35.62 1.53,35.08 1.56,34.55 C1.58,34.01 1.64,33.48 1.74,32.95 C1.83,32.43 1.97,31.91 2.13,31.40 C2.29,30.89 2.49,30.39 2.71,29.91 C2.93,29.42 3.19,28.95 3.46,28.49 C3.73,28.03 4.04,27.59 4.35,27.16 C4.67,26.73 5.01,26.32 5.36,25.91 C5.71,25.51 6.08,25.12 6.45,24.74 C6.82,24.35 7.21,23.98 7.59,23.60 C7.96,23.22 8.35,22.86 8.73,22.47 C9.10,22.09 9.48,21.71 9.84,21.32 C10.20,20.92 10.55,20.52 10.89,20.11 C11.22,19.69 11.55,19.26 11.86,18.83 C12.16,18.39 12.46,17.95 12.74,17.49 C13.03,17.04 13.30,16.58 13.57,16.12 C13.83,15.65 14.09,15.18 14.35,14.72 C14.60,14.25 14.85,13.77 15.11,13.31 C15.37,12.84 15.62,12.37 15.89,11.91 C16.16,11.44 16.43,10.98 16.72,10.53 C17.01,10.09 17.31,9.64 17.63,9.21 C17.94,8.78 18.27,8.36 18.62,7.95 C18.97,7.55 19.33,7.15 19.71,6.78 C20.10,6.41 20.50,6.05 20.91,5.72 C21.33,5.38 21.77,5.07 22.22,4.78 C22.67,4.49 23.13,4.23 23.61,3.99 C24.09,3.75 24.58,3.54 25.08,3.36 C25.59,3.18 26.10,3.03 26.62,2.91 C27.14,2.78 27.67,2.69 28.20,2.63 Z'/%3E%3C/svg%3E");
}

/* the dark tokens, used by the hero, the page and the footer alike */
.dark {
  color-scheme: dark;
  --bg: var(--night);
  --bg-soft: #191919;
  --fg: #f3f3f1;
  --fg-2: #d6d6d2;
  --muted: #aaaaa5;
  --subtle: #8a8a86;
  --soft: rgba(242, 244, 238, 0.44);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --field: rgba(0, 0, 0, 0.35);
  --accent: #c8f22e;
  --btn-bg: #f3f3f1;
  --btn-fg: #141414;
  --btn-hover: #d8dcd0;
  --ghost-line: rgba(242, 244, 238, 0.3);
  --ghost-line-hover: rgba(242, 244, 238, 0.55);
  --ghost-hover-bg: rgba(242, 244, 238, 0.08);
  --ring: rgba(255, 255, 255, 0.28);
  --card: #191919;
  --card-line: rgba(255, 255, 255, 0.07);
  --focus-ring: rgba(200, 242, 46, 0.18);
  --placeholder: rgba(255, 255, 255, 0.34);
  --ok: #4ade80;
  --info: #60a5fa;
  color: var(--fg);
}

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

html { scroll-behavior: smooth; background: var(--night); }
/* the one surface: every part of the page sits on it */
body { background: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(155, 224, 18, 0.4); color: #141414; }

img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f3f3f1;
  color: #141414;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.label, .eyebrow {
  font: 700 12px/1.3 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--subtle);
}
.dark .label, .eyebrow { color: var(--fg-2); }
h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.section-lead { color: var(--muted); font-size: var(--t-body); line-height: 1.7; max-width: 48ch; text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* two columns: a heading on the left, the words that go with it on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(40px, 7vw, 104px);
  row-gap: 20px;
  align-items: end;
}
.split.top { align-items: start; }

/* ---------------- buttons and links ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 22px;
  border-radius: 999px;
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 14px/1 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.12s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--ghost-line); }
.btn.ghost:hover { background: var(--ghost-hover-bg); box-shadow: inset 0 0 0 1px var(--ghost-line-hover); }
.btn.small { height: 38px; padding-inline: 16px; font-size: 13px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.arrow-link::after {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--accent);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: translate 0.3s var(--ease);
}
.arrow-link:hover::after, .arrow-link:focus-visible::after { translate: 4px 0; }
a.inline { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a.inline:hover { text-decoration-color: var(--accent); }

/* ---------------- navigation ---------------- */

/* the bar takes the tone of whatever it sits over: dark over the showing
   half, white over the deciding half */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  --fg: #f3f3f1;
  color: var(--fg);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav.scrolled {
  background: rgba(18, 18, 18, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav.scrolled.on-light {
  --fg: #141414;
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: #e7e7e5;
}
.nav-in {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.brand-mark { width: 26px; height: 26px; display: block; }
.nav nav { margin-left: auto; }
.nav-links { list-style: none; padding: 0; display: flex; gap: 30px; }
.nav-links a {
  color: var(--fg);
  opacity: 0.78;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav .nav-cta {
  height: 36px;
  padding-inline: 16px;
  font-size: 13px;
  background: rgba(242, 244, 238, 0.12);
  color: #f3f3f1;
  box-shadow: inset 0 0 0 1px rgba(242, 244, 238, 0.26);
}
.nav .nav-cta:hover { background: rgba(242, 244, 238, 0.2); }
.nav.scrolled.on-light .nav-cta { background: #141414; color: #ffffff; box-shadow: none; }
.nav.scrolled.on-light .nav-cta:hover { background: #2e2e2e; }

/* ---------------- hero ---------------- */

/* the hero paints the page's own charcoal, the same token as the body, and
   its body does not stop at the hero's foot: it continues into the work
   below and ends on its own lime rim. So the hero sits beneath the page,
   which paints its words over that part of the body, and only clips
   sideways. The grain blends with the charcoal and so leaves it unchanged.
   While the reel plays, a black stage rises behind it and fades out at the
   foot, so even then there is no edge */
.hero {
  position: relative;
  z-index: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow-x: clip;
  isolation: isolate;
  background: var(--night);
}
/* While the reel plays, the body stays alive underneath it: a veil of the
   page's own charcoal sits between the body and the reel and dims the body,
   over its whole height, including the part below the hero. Over the empty
   charcoal the veil is the same colour as the page, so it has no edge
   anywhere. reel.js sets its strength (--dim) frame by frame, so the veil
   rises as the reel starts and lifts as it ends; skipping fades it out. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% * var(--orb-extend));
  z-index: 1;
  background: var(--night);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.hero.is-playing::before { opacity: var(--dim, var(--reel-dim)); transition: none; }
/* The body is composed in the hero and drawn on a canvas --orb-extend
   times the hero's height, so it continues below the hero until it ends on
   its own rim. The canvas is transparent wherever the body is not. Below the
   hero the layer paints the charcoal, so the grain has the same ground to
   blend with there as it has in the hero. */
.orb-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% * var(--orb-extend));
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent calc(100% / var(--orb-extend)), var(--night) 0);
}
#orb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the grain covers the whole body, including the part below the hero; on
   the flat charcoal it averages out to nothing */
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% * var(--orb-extend));
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: var(--grain);
  mix-blend-mode: overlay;
}
.hero-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 980px;
  padding: clamp(96px, 15vh, 140px) var(--gutter) clamp(96px, 15vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mark-wrap { position: relative; display: block; width: clamp(76px, 11vh, 104px); margin-bottom: clamp(20px, 3.2vh, 30px); }
.mark { width: 100%; height: auto; display: block; }
.eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: var(--t-display);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 20ch;
  text-wrap: balance;
}
.hero h1 .soft { color: var(--soft); }
.hero .lead {
  margin-top: 18px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(26px, 4vh, 36px);
}
.reel-play svg { width: 13px; height: 13px; flex: none; color: var(--lime); }
.reel-play small { color: var(--subtle); font-size: 12px; font-weight: 500; }

.reel-controls {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.reel-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-inline: 12px;
  border-radius: 999px;
  border: 1px solid rgba(242, 244, 238, 0.18);
  background: rgba(14, 16, 12, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #b7bbb0;
  font: 500 12px/1 var(--sans);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.3s var(--ease);
}
.reel-btn svg { width: 13px; height: 13px; flex: none; }
.reel-btn:hover { color: #f3f3f1; border-color: rgba(242, 244, 238, 0.36); }
.reel-btn.skip { margin-left: auto; }
.hero:not(.is-playing) .reel-btn.skip { opacity: 0; visibility: hidden; }

/* ---------------- the page ---------------- */

.page { position: relative; z-index: 1; overflow-x: clip; }
.page > section { position: relative; z-index: 1; }
.section { padding-block: var(--section-y); scroll-margin-top: 64px; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--head-gap); }

/* a card: one step lighter than the charcoal, a hairline edge and a soft
   shadow, so it rests on the surface instead of punching a hole in it */
.card {
  position: relative;
  border-radius: 16px;
  background: var(--card, #ffffff);
  box-shadow:
    0 0 0 1px var(--card-line, rgba(0, 0, 0, 0.06)),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -32px rgba(0, 0, 0, 0.7);
}

/* ---------------- the work ---------------- */

/* The work opens below the hero's body. Its rim reaches at most a quarter
   of the hero's height past the hero on a landscape screen, and less on a
   portrait one (measured over five minutes of its motion with
   tools/orbreach.js), so the heading starts clear of it at every moment.
   --hero-h is the hero's height, which site.js keeps; until then it is one
   screen, which it is everywhere but on a landscape phone. A link to the
   work lands with the heading just under the navigation. */
.work {
  --work-top: calc(var(--hero-h, 100svh) * 0.26 + 72px);
  position: relative;
  padding-block: var(--work-top) clamp(40px, 5vw, 72px);
  scroll-margin-top: calc(112px - var(--work-top));
}
@media (max-aspect-ratio: 99/100) { .work { --work-top: calc(var(--hero-h, 100svh) * 0.22 + 64px); } }
@media (max-aspect-ratio: 3/5) { .work { --work-top: calc(var(--hero-h, 100svh) * 0.18 + 56px); } }
.work > .wrap { position: relative; z-index: 1; }

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(36px, 4.5vw, 64px);
}
.chapter.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chapter.flip .chapter-media { order: 2; }
/* each picture lights the charcoal around it in its own colours */
.chapter-media { position: relative; margin: 0; }
.chapter-media .glow {
  position: absolute;
  inset: 6% 4%;
  z-index: 0;
  border-radius: 30px;
  background-position: center;
  background-size: cover;
  filter: blur(48px) saturate(1.5);
  opacity: 0.42;
  pointer-events: none;
}
.chapter-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  /* Each picture is the product's own screen, shown as it is: a light grade
     takes the glare off a white window on the charcoal without making it
     grey, and pointing at the product brings it to full brightness. */
  filter: brightness(0.94);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  transition: translate 0.6s var(--ease), filter 0.6s var(--ease);
}
.chapter.is-on .chapter-media img { translate: 0 -6px; filter: none; }
.chapter-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.chapter-kind { font: 700 12px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--subtle); }
.chapter-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.chapter-head h3 { font-size: 26px; letter-spacing: -0.025em; }
.chapter-text { color: var(--muted); font-size: var(--t-body); line-height: 1.7; max-width: 40ch; text-wrap: pretty; }
.chapter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.chapter-actions .arrow-link { font-size: var(--t-meta); }

.lab {
  display: grid;
  grid-template-columns: 170px repeat(3, minmax(0, 1fr));
  gap: 20px clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.lab-head { color: var(--fg); font: 700 12px/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.lab-head small { display: block; margin-top: 6px; color: var(--subtle); font-size: var(--t-meta); font-weight: 500; letter-spacing: 0; text-transform: none; }
.lab-item { display: flex; flex-direction: column; gap: 6px; }
/* the range of the work beyond the products: the same row as the one above,
   a label on the left and one paragraph beside it */
.range {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.range-text { color: var(--muted); font-size: var(--t-body); line-height: 1.7; max-width: 64ch; text-wrap: pretty; }
.product-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.product-head .status { margin-left: auto; }
.lab-item .product-head h3 { font-size: 16px; }
.lab-item p { color: var(--muted); font-size: var(--t-small); line-height: 1.6; text-wrap: pretty; }
.product-icon { width: 26px; height: 26px; display: block; flex: none; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--subtle); }
.status.live::before { background: #22c55e; }
.status.progress::before { background: #3b82f6; }

/* a product's mark is its glyph; its splat comes up only when it is pointed at */
.mark-slot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
  margin: -5px -2px -5px -6px;
}
.mark-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mark-slot .splat {
  fill: url(#lime);
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: scale(0.35) rotate(-40deg);
  opacity: 0;
  transition: transform 0.6s var(--spring), opacity 0.2s var(--ease);
}
.mark-slot .glyph { color: var(--fg); transition: color 0.25s var(--ease); }
.chapter.is-on .mark-slot .splat, .lab-item.is-on .mark-slot .splat { transform: none; opacity: 1; }
.chapter.is-on .mark-slot .glyph, .lab-item.is-on .mark-slot .glyph { color: #13200a; }
.mark-slot.tiny { width: 22px; height: 22px; margin: -3px 0 -3px -5px; }
.mark-slot.tiny .glyph { color: currentColor; }

/* ---------------- pricing ---------------- */

/* a soft pool of the brand's light behind what a visitor acts on, the
   offers here and the form at the close. It fades out on every side along a
   smooth curve, so it has no edge anywhere and no visible ring. */
.pool {
  position: absolute;
  z-index: -1;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(155, 224, 18, 0.2), rgba(155, 224, 18, 0.16) 22%, rgba(155, 224, 18, 0.1) 42%,
    rgba(155, 224, 18, 0.045) 62%, rgba(155, 224, 18, 0.012) 82%, rgba(155, 224, 18, 0));
}
.pricing .pool { left: 50%; top: 52%; width: min(1500px, 120vw); height: 1000px; }
.contact-section .pool { left: 69%; top: 56%; width: min(1200px, 110vw); height: 880px; }
.offers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px 26px;
  transition: translate 0.5s var(--ease), box-shadow 0.4s var(--ease);
}
.offer:hover { translate: 0 -3px; }
/* the place to start: a thin bar of the brand's light along its top edge */
.offer.featured::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--lime), var(--lime-deep));
}
/* the flag sits in the corner, so every offer's name, price and list line up */
.offer-flag {
  position: absolute;
  top: 31px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.offer-flag::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--accent);
  -webkit-mask: var(--splat) center / contain no-repeat;
  mask: var(--splat) center / contain no-repeat;
}
.offer h3 { font-size: 20px; }
.offer-promise { margin-top: 6px; color: var(--fg-2); font-size: var(--t-small); line-height: 1.55; min-height: 3.1em; text-wrap: pretty; }
.price {
  margin-top: 20px;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price small { font-size: var(--t-meta); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.price small:first-child { margin-right: 6px; }
.gets {
  list-style: none;
  padding: 18px 0 0;
  margin: 20px 0 24px;
  width: 100%;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.gets li { position: relative; padding-left: 22px; color: var(--fg-2); font-size: var(--t-meta); line-height: 1.5; }
.gets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 11px;
  height: 11px;
  background: var(--accent);
  -webkit-mask: var(--splat) center / contain no-repeat;
  mask: var(--splat) center / contain no-repeat;
}
.offer .btn { width: 100%; }

/* how we work, under the offers, where it helps someone decide */
.promises { margin-top: clamp(48px, 5vw, 72px); scroll-margin-top: 96px; }
.promises > .label { display: block; margin-bottom: 18px; }
/* the principle that sets the studio apart leads, larger, over the other three */
.how-lead {
  max-width: 40ch;
  margin-bottom: clamp(28px, 3vw, 40px);
  color: var(--muted);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.how-lead b { color: var(--fg); font-weight: 700; }
.principles {
  list-style: none;
  counter-reset: pr;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 44px);
}
.principles li { counter-increment: pr; padding-top: 18px; border-top: 1px solid var(--line-2); }
.principles li::before {
  content: '0' counter(pr);
  display: block;
  margin-bottom: 12px;
  color: var(--subtle);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.principles h3 { font-size: 16px; }
.principles p { margin-top: 6px; color: var(--muted); font-size: var(--t-small); line-height: 1.6; text-wrap: pretty; }
.fine { margin-top: 32px; color: var(--subtle); font-size: var(--t-meta); max-width: 72ch; }

/* ---------------- what people say ---------------- */

.testimonials .section-head { margin-bottom: 0; }
.quote-lead { padding-top: 6px; }
.quote-lead blockquote p {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--fg);
  text-indent: -0.42em;
  text-wrap: pretty;
}
.quote-lead blockquote p::before, .quotes blockquote p::before { content: '\201C'; color: var(--accent); }
.quote-lead blockquote p::after, .quotes blockquote p::after { content: '\201D'; color: var(--accent); }
.quote-lead figcaption, .quotes figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; font-size: var(--t-small); }
.quote-lead figcaption strong, .quotes figcaption strong { font-weight: 700; }
.quote-lead figcaption span, .quotes figcaption span { color: var(--subtle); font-size: var(--t-meta); }
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 3vw, 44px);
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 28px;
  border-top: 1px solid var(--line-2);
}
.quotes blockquote p { font-size: 16px; line-height: 1.55; font-weight: 500; letter-spacing: -0.01em; text-indent: -0.42em; text-wrap: pretty; }
.quotes figcaption { margin-top: 12px; }

/* ---------------- about ---------------- */

.about {
  display: grid;
  grid-template-columns: minmax(200px, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}
/* your portrait inside the splat, resting on the white with a soft shadow */
.portrait { position: relative; max-width: 400px; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.14)); }
.portrait img { display: block; width: 100%; height: auto; clip-path: url(#splat-clip); }
.about-body { display: flex; flex-direction: column; gap: 16px; }
.about-body h2 { margin-bottom: 4px; }
.principle { margin: 2px 0 4px; }
.principle p {
  color: var(--fg);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 30ch;
  text-indent: -0.42em;
  text-wrap: balance;
}
.principle p::before { content: '\201C'; color: var(--accent); }
.principle p::after { content: '\201D'; color: var(--accent); }
.principle footer { margin-top: 8px; color: var(--subtle); font-size: var(--t-meta); }
.about-body > p:not(.label):not(.links) { color: var(--muted); font-size: var(--t-body); line-height: 1.75; max-width: 46ch; text-wrap: pretty; }
.links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 6px; }

/* ---------------- getting in touch ---------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px clamp(40px, 7vw, 104px);
  align-items: start;
}
.contact-head { display: flex; flex-direction: column; gap: 16px; }
.next { list-style: none; counter-reset: step; padding: 0; margin: 10px 0 4px; display: flex; flex-direction: column; gap: 16px; }
.next li { counter-increment: step; position: relative; padding-left: 40px; color: var(--muted); font-size: var(--t-small); line-height: 1.6; max-width: 44ch; }
.next li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--fg);
  font: 700 12px/1 var(--sans);
}
.next b { color: var(--fg); font-weight: 600; }
.contact-note { color: var(--muted); font-size: var(--t-small); line-height: 1.6; max-width: 40ch; }
.addr { color: var(--fg); user-select: all; }
.form-core { padding: clamp(24px, 3vw, 36px); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form .field.full, .form-status.full { grid-column: 1 / -1; }
.form .field label { font-size: var(--t-meta); font-weight: 600; color: var(--fg-2); }
.form .field input, .form .field textarea, .form .field select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form .field select option { color: #141414; }
.form .field input:hover, .form .field textarea:hover, .form .field select:hover { border-color: var(--ghost-line-hover); }
.form .field input:focus, .form .field textarea:focus, .form .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(77, 124, 15, 0.14)); }
.form .field input:focus-visible, .form .field textarea:focus-visible, .form .field select:focus-visible { outline: none; }
.form .field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.form .field ::placeholder { color: var(--placeholder, #9a9a97); }
.form .field [aria-invalid="true"] { border-color: #dc2626; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.form-foot { display: flex; align-items: flex-end; }
.form-foot.full { grid-column: 1 / -1; }
.form-foot .btn { width: 100%; }
.form-status { font-size: var(--t-small); color: var(--muted); }
/* a field people never see, which only bots fill in */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: #f87171; }

/* ---------------- footer ---------------- */

.footer { position: relative; z-index: 1; padding-block: 0 32px; }
/* the footer's rules run across the content column, the same width as every
   other rule on the page, not out into the gutters */
.footer-cols, .footer-base { position: relative; }
.footer-cols::before, .footer-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 3vw, 48px);
  padding-top: 36px;
}
.footer-brand p { margin-top: 12px; color: var(--muted); font-size: var(--t-meta); line-height: 1.6; max-width: 30ch; }
.footer-cols nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.col-head { margin-bottom: 4px; color: var(--fg); font: 700 12px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.footer-cols nav a, .footer-elsewhere a { color: var(--muted); font-size: var(--t-meta); text-decoration: none; transition: color 0.2s var(--ease); }
.footer-cols nav a:hover, .footer-elsewhere a:hover { color: var(--fg); }
.footer-elsewhere { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 36px;
  padding-top: 22px;
  color: var(--subtle);
  font-size: 12px;
}

/* ---------------- responsive ---------------- */

@media (max-width: 1080px) {
  .lab, .range { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; max-width: 520px; }
  .offer-promise { min-height: 0; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
/* offers side by side: every card keeps an equal row at the top, and the flag
   sits in that row above the name, so the names and prices still line up and
   the flag never crowds the name */
@media (min-width: 1081px) {
  .offer { padding-top: 54px; }
  .offer-flag { top: 26px; left: 26px; right: auto; }
}
@media (max-width: 900px) {
  .split, .contact, .about { grid-template-columns: 1fr; }
  .split { align-items: start; }
  .chapter, .chapter.flip { grid-template-columns: 1fr; gap: 24px; }
  .chapter.flip .chapter-media { order: 0; }
  .portrait { max-width: 300px; }
  .quotes { grid-template-columns: 1fr; }
  .contact-section .pool { left: 50%; top: 66%; }
}
@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav-in { justify-content: space-between; height: 62px; }
  .hero-copy { padding-top: 104px; padding-bottom: 112px; }
  .mark-wrap { width: 84px; margin-bottom: 22px; }
  .reel-btn span { display: none; }
  .reel-btn { width: 32px; padding: 0; justify-content: center; }
  .principles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  /* stacked offers need no shared rows, so the flag goes back above the name */
  .offer-flag { position: static; margin-bottom: 12px; }
  .form { grid-template-columns: 1fr; }
  .actions { flex-direction: column; gap: 12px; width: 100%; }
  .actions .btn { width: 100%; max-width: 340px; }
}
/* short phones: the hero tightens so both next steps stay above the fold */
@media (max-width: 560px) and (max-height: 700px) {
  .hero-copy { padding-top: 80px; padding-bottom: 72px; }
  .mark-wrap { width: 64px; margin-bottom: 16px; }
  .eyebrow { margin-bottom: 12px; }
  .hero .lead { margin-top: 12px; font-size: 15px; }
  .actions { margin-top: 20px; gap: 10px; }
  .actions .btn { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .arrow-link::after, .mark-slot .splat, .offer, .chapter-media img, .hero { transition: none; }
  .offer:hover { translate: none; }
}