/* NewMethodThinking — the whole look, one file.
   The four brand colours are below; everything else is mixed from them with color-mix().
   Motion: things rise in as they're scrolled to ([data-reveal]), headlines arrive word by word ([data-split]),
   pages cross-fade between each other (view transitions, or site.js where the browser can't).
   With prefers-reduced-motion everything is simply there. */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/manrope-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;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the brand, pushed toward pink (it began as #4A101C, #171516, #EDE5DC, #B98A70) */
  --oxblood: #631A3C;
  --ink: #050304;          /* true black, a breath of warmth: the dark grounds read as black, never plum */
  --bone: #FAF3F3;          /* the page: a soft, rosy white */
  --copper: #D4928F;        /* rose copper: the detail colour */
  --blush: #F3DCDD;         /* a pale pink for small fills (never washed behind the white page) */
  --wine: #1F0A14;          /* the stages: a black with burgundy in it, so they read against the true-black page */
  --neon: #FF2D8A;          /* punch points only, a handful on the whole site: never text, never large areas */

  /* mixed from it */
  --paper: var(--bone);
  --paper-2: color-mix(in srgb, var(--bone) 70%, var(--blush));
  --paper-3: color-mix(in srgb, var(--bone) 40%, var(--blush));
  --ink-2: color-mix(in srgb, var(--ink) 78%, var(--bone));
  --ink-3: color-mix(in srgb, var(--ink) 62%, var(--bone));
  --line: color-mix(in srgb, var(--ink) 14%, var(--bone));
  --line-2: color-mix(in srgb, var(--ink) 24%, var(--bone));
  --oxblood-2: color-mix(in srgb, var(--oxblood) 82%, var(--copper));
  --oxblood-deep: color-mix(in srgb, var(--oxblood) 55%, var(--ink));
  --copper-ink: color-mix(in srgb, var(--copper) 45%, var(--oxblood));   /* copper dark enough for text on bone */
  --on-dark: var(--bone);
  --on-dark-2: color-mix(in srgb, var(--bone) 70%, var(--ink));
  --on-dark-3: color-mix(in srgb, var(--bone) 48%, var(--ink));
  --line-dark: color-mix(in srgb, var(--bone) 11%, var(--ink));

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r: 18px;
  --r-sm: 12px;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* ------------------------------------------------------------ the page transitions -- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
::view-transition-group(top) { animation: none; }
::view-transition-old(top), ::view-transition-new(top) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
/* where the browser can't, site.js fades the page out and the next one in */
html.js body { transition: opacity .3s var(--ease-io), transform .3s var(--ease-io); }
html.js body.leaving { opacity: 0; transform: translateY(-10px); }
html.js.no-vt body.entering { opacity: 0; transform: translateY(14px); }

/* ------------------------------------------------------------------------ basics -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 "Manrope", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
::selection { background: var(--copper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bone); padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dark { background: var(--ink); color: var(--on-dark); position: relative; isolation: isolate; overflow: hidden; }
.dark .lede, .dark p { color: var(--on-dark-2); }

/* the glow that drifts on its own and leans toward the pointer ([data-spot], site.js sets --mx/--my) */
.glow {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 44% at var(--mx, 70%) var(--my, 30%), color-mix(in srgb, var(--oxblood) 40%, transparent), transparent 70%),
    radial-gradient(28% 34% at 15% 85%, color-mix(in srgb, var(--oxblood-deep) 28%, transparent), transparent 70%),
    radial-gradient(25% 30% at 90% 90%, color-mix(in srgb, var(--copper) 14%, transparent), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
  transition: background-position .6s;
}
@keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.05); } 100% { transform: translate3d(2%, -2%, 0) scale(1.02); } }
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* faint engineering grid on the dark grounds */
.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* ---------------------------------------------------------------------- the type -- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-ink);
}
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.dark .kicker { color: var(--copper); }
.display { font-size: clamp(2.7rem, 7.4vw, 6.4rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.display-2 { font-size: clamp(2.1rem, 4.8vw, 4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.03em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.display em, .display-2 em, .h3 em { font-style: normal; color: var(--copper); position: relative; white-space: nowrap; }
.display-2 em, .h3 em { color: var(--oxblood-2); }
.dark .display-2 em, .dark .h3 em { color: var(--copper); }
/* the copper word gets a line drawn under it once the headline has arrived */
.display em::after {
  content: ""; position: absolute; left: .02em; right: .02em; bottom: .02em; height: .06em; border-radius: 1em;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .9s;
}
.display.in em::after, html:not(.js) .display em::after { transform: scaleX(1); }
.hero .display em::after { background: var(--neon); box-shadow: 0 0 18px color-mix(in srgb, var(--neon) 70%, transparent); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }

/* ----------------------------------------------------------------- the wordmark -- */
/* one weight, one detail: the second i in "Thinking" has a copper dot, nudged up and over */
.wm { display: inline-block; font-weight: 700; letter-spacing: -.04em; font-size: 1.32rem; line-height: 1; white-space: nowrap; color: inherit; }
.wm-i { position: relative; display: inline-block; }
.wm-i::after {
  content: ""; position: absolute; width: .2em; height: .2em; border-radius: 50%; background: var(--copper);
  left: 50%; top: .13em; transform: translate(-22%, -.05em);
  transition: transform .5s var(--ease);
}
.brand:hover .wm-i::after { animation: hop .9s var(--ease); }
@keyframes hop { 0% { transform: translate(-22%, -.05em); } 35% { transform: translate(-22%, -.4em) scale(.9); } 60% { transform: translate(-22%, .02em) scale(1.15, .85); } 80% { transform: translate(-22%, -.1em); } 100% { transform: translate(-22%, -.05em); } }

/* ------------------------------------------------------------------- the buttons -- */
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.btn {
  --bg: var(--oxblood); --fg: var(--bone);
  position: relative; display: inline-flex; align-items: center; gap: 12px; overflow: hidden; isolation: isolate;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--bg); color: var(--fg); font: 600 1rem/1 "Manrope", system-ui, sans-serif; letter-spacing: -.01em; text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bone) 18%, transparent) inset, 0 10px 30px -12px color-mix(in srgb, var(--oxblood) 70%, transparent);
}
.btn::before {     /* the copper that floods in from the left on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--copper);
  transform: translateX(-101%); transition: transform .5s var(--ease); border-radius: inherit;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover { color: var(--ink); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--copper) 80%, transparent); }
.btn .ic { transition: transform .35s var(--ease); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn-light { --bg: var(--bone); --fg: var(--ink); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--bone) 40%, transparent); }
.btn-sm { padding: 11px 18px; font-size: .92rem; gap: 8px; }
.btn-link {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px;
  transition: background-size .45s var(--ease);
}
.btn-link:hover { background-size: 100% 1px; }
.btn-link .ic { transition: transform .35s var(--ease); }
.btn-link:hover .ic { transform: translateX(3px); }
.btn-link.light { color: var(--bone); }

/* --------------------------------------------------------------------- the top bar -- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; color: var(--bone); view-transition-name: top;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s, transform .45s var(--ease);
}
.top.scrolled { background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line-dark); }
.top.hide { transform: translateY(-100%); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { text-decoration: none; color: inherit; display: inline-flex; padding: 6px 0; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a:not(.btn) { position: relative; padding: 10px 14px; text-decoration: none; font-weight: 500; font-size: .96rem; color: var(--on-dark-2); transition: color .25s; }
.nav > a:not(.btn) span { position: relative; }
.nav > a:not(.btn) span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; background: var(--copper);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--bone); }
.nav > a:not(.btn):hover span::after, .nav > a[aria-current] span::after { transform: scaleX(1); transform-origin: left; }
.nav > a[aria-current]:not(.btn) { color: var(--bone); }
.nav-cta { margin-left: 12px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 26px; }
.menu-open .burger i:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
    padding: 90px var(--gut) 40px; background: var(--ink);
    clip-path: circle(0 at calc(100% - 44px) 39px); transition: clip-path .7s var(--ease-io); visibility: hidden;
  }
  .menu-open .nav { clip-path: circle(150% at calc(100% - 44px) 39px); visibility: visible; }
  .nav > a:not(.btn) { font-size: clamp(2rem, 9vw, 3rem); font-weight: 600; letter-spacing: -.04em; padding: 6px 0; color: var(--bone);
    opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .menu-open .nav > a { opacity: 1; transform: none; }
  .menu-open .nav > a:nth-child(2) { transition-delay: .05s; } .menu-open .nav > a:nth-child(3) { transition-delay: .1s; }
  .menu-open .nav > a:nth-child(4) { transition-delay: .15s; } .menu-open .nav > a:nth-child(5) { transition-delay: .2s; }
  .nav-cta { margin: 28px 0 0; opacity: 0; transition: opacity .5s .25s; }
  .menu-open .nav-cta { opacity: 1; }
  .menu-open { overflow: hidden; }
}

/* --------------------------------------------------------------------- arriving -- */
html.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 55ms + 80ms); }
[data-split].in .w > span { transform: none; }

/* --------------------------------------------------------------------- the home hero -- */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; }
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero .lede { margin-top: 28px; max-width: 32em; }
.hero-in > *, .intro-in > *, .nerds > *, .contact > *, .case > *, .area > *, .already-in > *, .spot-form > * { min-width: 0; }
.hero-note { margin-top: 26px; font-size: .9rem; color: var(--on-dark-3); display: flex; align-items: center; gap: 10px; }
.hero-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 0 var(--copper); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--copper) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 22px; height: 36px; border-radius: 12px; border: 1.5px solid var(--on-dark-3); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--copper); animation: cue 2s var(--ease-io) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(12px); } }

/* the process that untangles (site.js: .untangle) */
.untangle {
  position: relative; border-radius: 26px; padding: 18px;
  background: color-mix(in srgb, var(--bone) 4%, transparent);
  border: 1px solid var(--line-dark);
  box-shadow: 0 40px 80px -40px #000, inset 0 1px 0 color-mix(in srgb, var(--bone) 8%, transparent);
  backdrop-filter: blur(6px);
}
.ut-bar { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line-dark); }
.ut-label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); font-weight: 600; }
.ut-toggle { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--bone) 7%, transparent); }
.ut-toggle button { white-space: nowrap; position: relative; z-index: 1; border: 0; background: none; color: var(--on-dark-2); font: 600 .84rem/1 "Manrope", system-ui, sans-serif; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.ut-toggle button[aria-pressed="true"] { color: var(--ink); }
.ut-toggle .pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--bone); transition: transform .55s var(--ease), width .55s var(--ease); }
.ut-stage { position: relative; height: clamp(380px, 46vw, 500px); }
.ut-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ut-path { fill: none; stroke: var(--on-dark-3); stroke-width: 1.5; stroke-dasharray: 4 6; animation: march 1.2s linear infinite; }
.better .ut-path { stroke: var(--copper); stroke-dasharray: none; stroke-width: 2; }
@keyframes march { to { stroke-dashoffset: -20; } }
.ut-pulse { fill: var(--neon); filter: drop-shadow(0 0 8px var(--neon)); }
.ut-node {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 9px 14px; border-radius: 12px; font-size: .86rem; font-weight: 500; color: var(--bone);
  background: color-mix(in srgb, var(--ink) 88%, var(--bone)); border: 1px solid var(--line-dark);
  box-shadow: 0 10px 24px -14px #000; will-change: left, top, opacity;
}
.ut-node b { display: inline-block; min-width: 1.5em; margin-right: 6px; color: var(--copper); font-weight: 700; font-variant-numeric: tabular-nums; }
.ut-node.manual::after { content: "by hand"; margin-left: 8px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3); }
.ut-node .strike { position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.ut-node.struck .strike { transform: scaleX(1); }
.ut-node.kept { border-color: color-mix(in srgb, var(--copper) 55%, transparent); background: color-mix(in srgb, var(--oxblood) 55%, var(--ink)); }
.ut-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px 2px; border-top: 1px solid var(--line-dark); font-size: .86rem; color: var(--on-dark-2); }
.ut-foot strong { color: var(--bone); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- sections -- */
.sec { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px; align-items: end; margin-bottom: clamp(40px, 6vw, 70px); }
.sec-head p { margin: 0; color: var(--ink-2); font-size: 1.1rem; max-width: 34em; }
.sec-head.solo { grid-template-columns: 1fr; }
.dark .sec-head p { color: var(--on-dark-2); }

/* the closing band */
.cta { padding: clamp(90px, 12vw, 160px) 0; border-bottom: 1px solid var(--line-dark); }
.cta-in { max-width: 860px; }
.cta-in p { font-size: 1.15rem; margin-top: 22px; max-width: 38em; }
.paper-2 { background: var(--paper-2); }

/* the sentence that lights up as it's read (site.js: [data-read]) */
.statement { font-size: clamp(1.8rem, 3.9vw, 3.3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.18; max-width: 22em; }
.statement .rw { transition: color .3s; color: color-mix(in srgb, var(--ink) 18%, var(--bone)); }
.statement .rw.lit { color: var(--ink); }
.statement .rw.hl.lit { color: var(--oxblood); }
html:not(.js) .statement .rw { color: var(--ink); }

/* the questions sliding past */
.marquee { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); background: var(--paper); user-select: none; }
.marquee + .marquee { border-top: 0; }
.mq-track { display: flex; width: max-content; gap: 0; animation: slide 60s linear infinite; }
.marquee.rev .mq-track { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; color: var(--ink-2); }
.mq-track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.mq-track span:hover { color: var(--oxblood); }
@keyframes slide { to { transform: translateX(-50%); } }

/* four kinds of work (home and /what-we-do) */
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile {
  position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 28px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease), background .4s;
}
.tile:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--oxblood) 35%, var(--line)); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--oxblood) 60%, transparent); background: color-mix(in srgb, var(--bone) 70%, #fff); }
.tile .n { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--copper-ink); }
.tile h3 { font-size: 1.9rem; margin: auto 0 10px; letter-spacing: -.04em; }
.tile p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.tile .glyph { width: 84px; height: 84px; margin: 26px 0 30px; color: var(--oxblood); }
.tile .more { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--oxblood); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.tile:hover .more { opacity: 1; transform: none; }

/* the small drawings that keep moving */
.glyph * { vector-effect: non-scaling-stroke; }
.g-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-faint { stroke: color-mix(in srgb, currentColor 30%, transparent); }
.g-dot { fill: var(--copper); }
.g-optimize .wig { stroke-dasharray: 120; animation: wig 4.5s var(--ease-io) infinite; }
@keyframes wig { 0%, 15% { d: path("M8 60 C 20 20, 30 80, 42 40 S 62 70, 76 24"); } 50%, 65% { d: path("M8 60 C 20 52, 30 46, 42 42 S 62 32, 76 24"); } 100% { d: path("M8 60 C 20 20, 30 80, 42 40 S 62 70, 76 24"); } }
.g-connect .link { stroke-dasharray: 4 5; animation: march 1s linear infinite; }
.g-connect .p1 { offset-path: path("M18 42 L 66 42"); animation: ride 2.2s var(--ease-io) infinite; }
.g-connect .p2 { offset-path: path("M42 18 L 42 66"); animation: ride 2.2s var(--ease-io) 1.1s infinite; }
@keyframes ride { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.g-automate .spin { transform-origin: 42px 42px; animation: spin 7s linear infinite; }
.g-automate .orbit { offset-path: path("M42 14 A 28 28 0 1 1 41.9 14"); animation: orbit 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { offset-distance: 100%; } }
.g-create .draw { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 4s var(--ease-io) infinite; }
.g-create .spark { transform-origin: 62px 22px; animation: spark 4s var(--ease-io) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 160; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -160; } }
@keyframes spark { 0%, 40% { transform: scale(0); } 55% { transform: scale(1.3); } 65%, 80% { transform: scale(1); } 100% { transform: scale(0); } }

/* how we think (home) */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.principle { padding: 34px 30px 10px 0; position: relative; }
.principle + .principle { padding-left: 30px; border-left: 1px solid var(--line); }
.principle .big { font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 300; letter-spacing: -.06em; line-height: 1; color: var(--copper); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.principle h3 { font-size: 1.45rem; margin-bottom: 12px; }
.principle p { color: var(--ink-2); }

/* examples (home) and the cards that tilt toward the pointer ([data-tilt]) */
.examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ex {
  position: relative; display: block; padding: 34px; border-radius: var(--r); text-decoration: none; color: var(--on-dark);
  background: var(--ink); min-height: 260px; overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .5s;
}
.ex::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at var(--gx, 80%) var(--gy, 0%), color-mix(in srgb, var(--oxblood) 55%, transparent), transparent 70%); transition: opacity .4s; }
.ex:hover { box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--oxblood) 90%, #000); }
.ex .tag { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: 60px; }
.ex h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); max-width: 18em; margin-bottom: 12px; }
.ex p { color: var(--on-dark-2); margin: 0; max-width: 32em; }
.ex .go { position: absolute; right: 26px; top: 26px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-dark); transition: background .4s, color .4s, transform .5s var(--ease); }
.ex:hover .go { background: var(--copper); color: var(--ink); transform: rotate(-45deg); border-color: var(--copper); }

/* the terminal (home, about) */
.nerds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.term { border-radius: var(--r); background: var(--ink); color: var(--on-dark); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--oxblood) 80%, #000); overflow: hidden; border: 1px solid color-mix(in srgb, var(--bone) 8%, var(--ink)); }
.term-bar { display: flex; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--line-dark); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-dark); }
.term-bar i:first-child { background: var(--oxblood-2); } .term-bar i:nth-child(2) { background: var(--copper); }
.term-bar span { margin-left: auto; font-size: .76rem; color: var(--on-dark-3); font-family: var(--mono); }
.term pre { margin: 0; padding: 22px 22px 26px; min-height: 290px; font: .9rem/1.75 var(--mono); white-space: pre-wrap; color: var(--on-dark-2); }
.term .p { color: var(--copper); }
.term .ok { color: var(--bone); }
.term .caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--copper); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.facts li { display: flex; gap: 14px; align-items: baseline; color: var(--ink-2); }
.facts li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); transform: translateY(-2px); }

/* ---------------------------------------------------------------- the inner pages -- */
.intro { padding: clamp(150px, 20vw, 220px) 0 clamp(80px, 10vw, 130px); }
.intro-in { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: end; }
.intro.has-art .intro-in { grid-template-columns: 1.15fr .85fr; align-items: center; }
.intro .lede { margin-top: 30px; }
.intro .display { font-size: clamp(2.6rem, 6.6vw, 5.6rem); }

/* /what-we-do: the four areas, one after another, the label sticking while its text goes by */
.area { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 6vw, 90px); padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--line-2); }
.area:first-child { border-top: 0; padding-top: 0; }
.area-side { position: sticky; top: 120px; align-self: start; }
.area-side .n { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--copper-ink); }
.area-side h2 { font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -.055em; margin: 10px 0 16px; }
.area-side .glyph { width: 120px; height: 120px; color: var(--oxblood); margin-top: 26px; }
.area-side .one { font-size: 1.2rem; color: var(--ink-2); max-width: 22em; }
.area-body > p:first-child { font-size: 1.22rem; line-height: 1.6; color: var(--ink); }
.area-body h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 40px 0 16px; font-weight: 700; }
.looks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.looks li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease), color .3s; }
.looks li::before { content: ""; flex: none; width: 18px; height: 1.5px; background: var(--copper); margin-top: .8em; transition: width .4s var(--ease); }
.looks li:hover { padding-left: 6px; }
.looks li:hover::before { width: 30px; }
.heard { display: flex; flex-wrap: wrap; gap: 10px; }
.heard q { quotes: "“" "”"; display: inline-block; padding: 12px 18px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: .98rem; border: 1px solid var(--line); transition: background .3s, color .3s, transform .4s var(--ease); }
.heard q:hover { background: var(--oxblood); color: var(--bone); transform: translateY(-2px) rotate(-1deg); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chips span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark-2); font-size: .95rem; transition: border-color .3s, color .3s, background .3s; }
.chips span:hover { border-color: var(--copper); color: var(--bone); background: color-mix(in srgb, var(--copper) 12%, transparent); }

/* /approach: the five steps, a line filling as you read ([data-progress]) */
.steps { position: relative; display: grid; gap: 0; }
.steps::before, .steps .fill { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 2px; background: var(--line-2); }
.steps .fill { background: var(--oxblood); transform-origin: top; transform: scaleY(var(--p, 0)); }
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: clamp(20px, 4vw, 50px); padding: 30px 0 60px; }
.step .dot { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line-2); font-weight: 700; color: var(--ink-3); transition: background .5s, border-color .5s, color .5s, transform .6s var(--ease); }
.step.on .dot { background: var(--oxblood); border-color: var(--oxblood); color: var(--bone); transform: scale(1.06); }
.step h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -.05em; margin: 4px 0 18px; transition: color .5s; color: var(--ink-3); }
.step.on h2 { color: var(--ink); }
.step-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px 50px; }
.step-body > p { font-size: 1.12rem; color: var(--ink-2); }
.step-meta { display: grid; gap: 14px; align-content: start; }
.step-meta div { padding: 18px 20px; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); }
.step-meta b { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); margin-bottom: 6px; }
.step-meta span { color: var(--ink-2); font-size: .98rem; }
.loop { display: flex; align-items: center; gap: 18px; margin: 0 0 0 0; padding: 26px 30px; border-radius: var(--r); background: var(--ink); color: var(--on-dark-2); }
.loop svg { flex: none; width: 46px; height: 46px; color: var(--copper); animation: spin 9s linear infinite; }
.loop strong { color: var(--bone); }
.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.belief { padding: 30px; border-radius: var(--r); border: 1px solid var(--line-dark); background: color-mix(in srgb, var(--bone) 3%, transparent); transition: border-color .4s, background .4s, transform .5s var(--ease); }
.belief:hover { border-color: color-mix(in srgb, var(--copper) 60%, transparent); background: color-mix(in srgb, var(--oxblood) 30%, transparent); transform: translateY(-4px); }
.belief h3 { font-size: 1.35rem; margin-bottom: 10px; color: var(--bone); }
.belief p { margin: 0; font-size: .98rem; }

/* questions that open */
.faq { border-top: 1px solid var(--line-2); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .5s var(--ease), background .3s, color .3s; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--oxblood); color: var(--bone); border-color: var(--oxblood); }
.faq summary:hover { color: var(--oxblood); }
.faq .ans { overflow: hidden; }
.faq .ans p { color: var(--ink-2); max-width: 46em; padding-bottom: 20px; margin: 0; }

/* /work: each case, its drawing beside it */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--line-2); }
.case:first-of-type { border-top: 0; }
.case:nth-of-type(even) .case-art { order: -1; }
.case .tag { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); }
.case h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.045em; margin: 12px 0 26px; }
.case dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.case dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.case dt { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: .3em; }
.case dd { margin: 0; color: var(--ink-2); }
.case dd.res { color: var(--oxblood); font-weight: 600; }
.case-art { position: relative; aspect-ratio: 5 / 4; border-radius: 24px; background: var(--ink); overflow: hidden; isolation: isolate; box-shadow: 0 40px 80px -46px color-mix(in srgb, var(--oxblood) 90%, #000); }
.case-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 30% 20%, color-mix(in srgb, var(--oxblood) 45%, transparent), transparent 70%); }
.case-art svg { width: 100%; height: 100%; }
.case-art .cap { position: absolute; left: 18px; bottom: 14px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); }
/* the schematics: wires that carry pulses, parts that swap, all started when in view (.in) */
.sx { fill: none; stroke: var(--on-dark-3); stroke-width: 1.4; }
.sx-box { fill: color-mix(in srgb, var(--ink) 80%, var(--bone)); stroke: var(--line-dark); stroke-width: 1.2; }
.sx-hot { stroke: var(--copper); }
.sx-fill-hot { fill: color-mix(in srgb, var(--oxblood) 70%, var(--ink)); stroke: var(--copper); stroke-width: 1.4; }
.sx-t { fill: var(--on-dark-2); font: 600 11px "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.sx-t.hot { fill: var(--copper); }
.sx-t.big { fill: var(--bone); font-size: 22px; letter-spacing: -.02em; text-transform: none; font-weight: 700; }
.sx-flow { stroke: var(--copper); stroke-width: 1.8; fill: none; stroke-dasharray: 3 9; stroke-linecap: round; }
.in .sx-flow { animation: march .9s linear infinite; }
.sx-dot { fill: var(--copper); }
.sx-old { transition: opacity 1s var(--ease) .6s, transform 1.2s var(--ease) .6s; transform-box: fill-box; transform-origin: center; }
.in .sx-old { opacity: 0; transform: scale(.7); }
.sx-new { opacity: 0; transform: scale(1.15); transition: opacity 1s var(--ease) 1.4s, transform 1.2s var(--ease) 1.4s; transform-box: fill-box; transform-origin: center; }
.in .sx-new { opacity: 1; transform: none; }
.sx-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(.15); transition: transform 1.4s var(--ease); }
.in .sx-bar { transform: scaleY(1); }
.in .sx-bar.b2 { transition-delay: .15s; } .in .sx-bar.b3 { transition-delay: .3s; } .in .sx-bar.b4 { transition-delay: .45s; } .in .sx-bar.b5 { transition-delay: .6s; }
.in .sx-bar.live { animation: bar 3.2s ease-in-out 1.6s infinite alternate; }
@keyframes bar { 0% { transform: scaleY(1); } 50% { transform: scaleY(.72); } 100% { transform: scaleY(1.08); } }
.sx-spin { transform-box: fill-box; transform-origin: center; }
.in .sx-spin { animation: spin 6s linear infinite; }
.sx-ping { transform-box: fill-box; transform-origin: center; }
.in .sx-ping { animation: sxping 2.4s var(--ease) infinite; }
@keyframes sxping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.sx-hand { transition: opacity .8s .6s, transform 1s var(--ease) .6s; }
.in .sx-hand { opacity: 0; transform: translateY(16px); }
.sx-ride { offset-rotate: 0deg; }
.in .sx-ride { animation: ride 2.6s var(--ease-io) infinite; }
.in .sx-ride.d2 { animation-delay: .9s; } .in .sx-ride.d3 { animation-delay: 1.8s; }
.note { font-size: .92rem; color: var(--ink-3); max-width: 46em; }

/* /about */
.prose-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(30px, 6vw, 90px); }
.prose-grid h2 { position: sticky; top: 120px; align-self: start; }
.prose { font-size: 1.15rem; line-height: 1.7; color: var(--ink-2); max-width: 40em; }
.prose p:first-child { font-size: 1.4rem; line-height: 1.5; color: var(--ink); letter-spacing: -.015em; }
.prose strong { color: var(--ink); font-weight: 600; }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line-dark); }
.value { padding: 36px 36px 36px 0; border-bottom: 1px solid var(--line-dark); }
.value:nth-child(even) { padding-left: 36px; padding-right: 0; border-left: 1px solid var(--line-dark); }
.value h3 { font-size: 1.6rem; color: var(--bone); margin-bottom: 12px; display: flex; gap: 16px; align-items: baseline; }
.value h3 span { font-size: .85rem; font-weight: 600; color: var(--copper); letter-spacing: .08em; }
.value p { margin: 0; }

/* /contact */
.contact { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.form { display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; padding: 26px 18px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bone) 55%, #fff);
  font: 500 1.05rem/1.5 "Manrope", system-ui, sans-serif; color: var(--ink); transition: border-color .3s, box-shadow .3s, background .3s; resize: vertical;
}
.field textarea { min-height: 170px; }
.field label { position: absolute; left: 19px; top: 19px; color: var(--ink-3); font-size: 1.02rem; pointer-events: none; transform-origin: left top; transition: transform .35s var(--ease), color .3s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--oxblood); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oxblood) 14%, transparent); background: #fff; }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.76); color: var(--oxblood); }
.field textarea::placeholder, .field input::placeholder { color: transparent; transition: color .3s; }
.field textarea:focus::placeholder { color: var(--ink-3); }
.field .opt { position: absolute; right: 16px; top: 19px; font-size: .8rem; color: var(--ink-3); }
.field.bad input, .field.bad textarea, .drop.bad { border-color: var(--oxblood-2); background: color-mix(in srgb, var(--oxblood) 6%, var(--bone)); }
.err { color: var(--oxblood-2); font-size: .9rem; font-weight: 600; margin: 8px 2px 0; }
.err:empty { display: none; }
.form-err { padding: 14px 18px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--oxblood) 10%, var(--bone)); border: 1px solid color-mix(in srgb, var(--oxblood) 35%, transparent); color: var(--oxblood); font-weight: 600; }
.form-err:empty { display: none; }
.drop {
  position: relative; display: block; padding: 26px; border-radius: var(--r-sm); border: 1.5px dashed var(--line-2); background: color-mix(in srgb, var(--bone) 40%, var(--paper-2));
  text-align: center; cursor: pointer; transition: border-color .3s, background .3s, transform .4s var(--ease);
}
.drop:hover, .drop.over { border-color: var(--oxblood); background: color-mix(in srgb, var(--oxblood) 5%, var(--bone)); }
.drop.over { transform: scale(1.01); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .ic { margin: 0 auto 10px; color: var(--oxblood); transition: transform .5s var(--ease); }
.drop:hover .ic, .drop.over .ic { transform: translateY(-4px); }
.drop strong { display: block; font-size: 1.05rem; }
.drop span { color: var(--ink-3); font-size: .92rem; }
.files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.files li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--paper-2); font-size: .94rem; animation: pop .45s var(--ease); }
.files li .ic { color: var(--oxblood); flex: none; }
.files li em { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: .85rem; }
.files li button { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--ink-3); border-radius: 6px; }
.files li button:hover { color: var(--oxblood); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send { justify-self: start; }
.send .done { display: none; }
.form.busy .send { pointer-events: none; }
.form.busy .send span { opacity: .6; }
.form.busy .send .ic { animation: nudge .8s var(--ease-io) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.sent { text-align: left; padding: 50px 40px; border-radius: 24px; background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate; }
.sent::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 80% 10%, color-mix(in srgb, var(--oxblood) 90%, transparent), transparent 70%); }
.sent .tick { width: 66px; height: 66px; border-radius: 50%; background: var(--copper); color: var(--ink); display: grid; place-items: center; margin-bottom: 26px; animation: tick .8s var(--ease); }
.sent .tick svg { width: 30px; height: 30px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: dash .6s var(--ease) .35s forwards; }
@keyframes tick { from { transform: scale(0) rotate(-40deg); } }
@keyframes dash { to { stroke-dashoffset: 0; } }
.sent h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.sent p { color: var(--on-dark-2); max-width: 30em; }
.aside { display: grid; gap: 16px; position: sticky; top: 110px; }
.next { padding: 30px; border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--line); }
.next h3 { font-size: 1.25rem; margin-bottom: 18px; }
.next ol { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; gap: 16px; }
.next li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 12px; color: var(--ink-2); font-size: .98rem; }
.next li::before { content: counter(n); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--oxblood); color: var(--bone); font-weight: 700; font-size: .85rem; }
.next li b { color: var(--ink); display: block; }
.reach { padding: 26px 30px; border-radius: var(--r); background: var(--ink); color: var(--on-dark); display: grid; gap: 12px; }
.reach a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; color: var(--bone); transition: color .3s, transform .4s var(--ease); }
.reach a:hover { color: var(--copper); transform: translateX(4px); }
.reach .ic { color: var(--copper); }
.ideas { margin-top: 6px; font-size: .9rem; color: var(--ink-3); min-height: 1.5em; }
.ideas b { color: var(--oxblood); font-weight: 600; }

/* /brand: the wordmark explorations */
.marks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mark-card { padding: 50px 34px 28px; border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--line); display: grid; gap: 30px; }
.mark-card.dark-card { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.mark-card.pick { border: 1.5px solid var(--oxblood); }
.mark-card .wm { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.mark-card p { margin: 0; font-size: .95rem; color: var(--ink-3); }
.mark-card.dark-card p { color: var(--on-dark-2); }
.mark-card h3 { font-size: 1rem; margin-bottom: 6px; }
.wm-alt-b .b2 { font-weight: 300; }
.wm-alt-c .o { position: relative; display: inline-block; }
.wm-alt-c .o::after { content: ""; position: absolute; left: 50%; top: 50%; width: .14em; height: .14em; margin: -.07em 0 0 -.07em; border-radius: 50%; background: var(--copper); }
.wm-alt-d { letter-spacing: -.04em; }
.wm-alt-d .t { display: inline-block; position: relative; }
.wm-alt-d .t::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: .42em; height: .085em; background: var(--copper); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.sw i { display: block; height: 110px; }
.sw div { padding: 12px 14px; font-size: .88rem; background: var(--paper); }
.sw b { display: block; }

/* 404 */
.lost { min-height: 92svh; display: flex; align-items: center; padding: 120px 0 60px; }

/* ---------------------------------------------------------------------- the footer -- */
/* the footer sits on the black page (the closing band above it is the last wine ground), and says who and where */
.foot { position: relative; z-index: 0; color: var(--on-dark); padding: clamp(70px, 9vw, 120px) 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: clamp(40px, 6vw, 70px); }
.foot-brand .wm { font-size: 1.6rem; }
.foot-line { margin: 18px 0 14px; max-width: 24em; font-size: 1.05rem; line-height: 1.5; color: var(--on-dark-2); }
.foot-where { margin: 0; font-size: .9rem; color: var(--on-dark-3); }
.foot-where a { color: var(--on-dark-2); }
.foot-col span { color: var(--on-dark-3); font-size: .95rem; line-height: 1.5; }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-col b { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 6px; }
.foot-col a { color: var(--on-dark-2); text-decoration: none; transition: color .25s, transform .35s var(--ease); justify-self: start; }
.foot-col a:hover { color: var(--copper); transform: translateX(3px); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .86rem; color: var(--on-dark-3); }
.foot-base a { color: var(--on-dark-2); }
.foot-base a:hover { color: var(--copper); }

/* ------------------------------------------------------------------- smaller screens -- */
@media (max-width: 1080px) {
  .four { grid-template-columns: repeat(2, 1fr); }
  .beliefs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-in, .intro.has-art .intro-in, .nerds, .contact, .prose-grid, .area, .case, .sec-head { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 130px; }
  .scroll-cue { display: none; }
  .area-side, .prose-grid h2, .aside { position: static; }
  .case:nth-of-type(even) .case-art { order: 0; }
  .principles { grid-template-columns: 1fr; }
  .principle + .principle { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .examples, .values, .marks { grid-template-columns: 1fr; }
  .value:nth-child(even) { padding-left: 0; border-left: 0; }
  .value { padding-right: 0; }
  .step-body { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .four, .beliefs { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .form .row2 { grid-template-columns: 1fr; }
  .case dl > div { grid-template-columns: 1fr; gap: 4px; }
  .step { grid-template-columns: 44px 1fr; }
  .step .dot { width: 44px; height: 44px; }
  .steps::before, .steps .fill { left: 21px; }
  .ut-node { font-size: .76rem; padding: 7px 10px; }
  .ut-node.manual::after { display: none; }
  .ut-stage { height: 420px; }
  .foot-grid { grid-template-columns: 1fr; }
  .ex { padding: 26px; }
  .sent { padding: 36px 26px; }
}

/* ================================================================= the stage ==
   What lifts the pages off the flat grid: the light grounds stay clean white (no colour washed behind them); the
   dark grounds have moving edges, liquid or angled, with layers behind them; shapes drift across the
   boundaries at their own depths; and the openings blur away as you leave them. */

body { background: var(--bone); }

/* ---------------------------------------------------------------- the boundaries --
   No boxes: a dark ground is drawn by its ::after, and its edges are angled cuts that swing as you scroll
   past (--a, --b, site.js). Behind each edge sits a second, see-through layer (.grain) with
   its own shape, frosting what's behind it, so the boundary always reads as layers, never as a line. */
:root {
  --edge: clamp(56px, 8vw, 130px);
}
.dark { background: transparent; }
.dark::after {      /* the ground itself: ink, with the grain baked in */
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), var(--ink);
}
.dark .grain {      /* the see-through layer behind each edge */
  inset: 0; z-index: -4; opacity: 1; mix-blend-mode: normal; background: color-mix(in srgb, var(--oxblood) 42%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.dark .glow { inset: var(--edge) -20%; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.dark::before { inset: var(--edge) 0; }

/* angled edges that swing as you scroll past: every stage. The openings are cut at the foot only, the
   footer at the top only; the rest at both ends */
.sec.dark, .cta { --a: .3; --b: .7; }
.hero, .intro, .lost { --b: .3; }
.hero::after, .intro::after, .lost::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge) * var(--b)), 0 calc(100% - var(--edge) * (1 - var(--b)))); }
.hero .grain, .intro .grain, .lost .grain { background: color-mix(in srgb, var(--copper) 34%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge) * (1 - var(--b)) * .95), 0 calc(100% - var(--edge) * var(--b) * .95)); }
.cta::after { clip-path: polygon(0 calc(var(--edge) * var(--a)), 100% calc(var(--edge) * (1 - var(--a))), 100% calc(100% - var(--edge) * var(--b)), 0 calc(100% - var(--edge) * (1 - var(--b)))); }
.cta .grain { background: color-mix(in srgb, var(--copper) 34%, transparent);
  clip-path: polygon(0 calc(var(--edge) * (1 - var(--a)) * .95), 100% calc(var(--edge) * var(--a) * .95), 100% calc(100% - var(--edge) * (1 - var(--b)) * .95), 0 calc(100% - var(--edge) * var(--b) * .95)); }
.hero .glow, .intro .glow, .lost .glow, .hero::before, .intro::before { top: 0; }
.sec.dark::after { clip-path: polygon(0 calc(var(--edge) * var(--a)), 100% calc(var(--edge) * (1 - var(--a))), 100% calc(100% - var(--edge) * var(--b)), 0 calc(100% - var(--edge) * (1 - var(--b)))); }
.sec.dark .grain { background: color-mix(in srgb, var(--copper) 34%, transparent);
  clip-path: polygon(0 calc(var(--edge) * (1 - var(--a)) * .95), 100% calc(var(--edge) * var(--a) * .95), 100% calc(100% - var(--edge) * (1 - var(--b)) * .95), 0 calc(100% - var(--edge) * var(--b) * .95)); }

/* the space each moving edge needs, and the overlap with the ground next to it */
.sec.dark, .cta { padding-top: calc(var(--edge) + clamp(60px, 8vw, 110px)); padding-bottom: calc(var(--edge) + clamp(60px, 8vw, 110px)); margin: calc(var(--edge) * -.6) 0; }
.hero, .intro, .lost { padding-bottom: calc(var(--edge) + clamp(70px, 9vw, 140px)); margin-bottom: calc(var(--edge) * -.5); }
.sec:not(.dark) { position: relative; z-index: 1; }
.sec.dark, .cta { z-index: 0; }

/* light grounds that need a tint get a wash that fades in and out, never an edge */
.sec.paper-2 { background: none; }

/* the openings: as you leave, the words lift, fade and blur away (--shrink 0→1, site.js) */
.hero, .intro, .lost { --shrink: 0; }
.hero > .wrap, .intro > .wrap { transform: translateY(calc(var(--shrink) * -70px)); opacity: calc(1 - var(--shrink) * .95); filter: blur(calc(var(--shrink) * 10px)); }

/* the shapes that drift across the boundaries, each at its own depth ([data-depth], site.js): angles and lines, no bubbles */
main { position: relative; }
.shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shape { position: absolute; transform: translate3d(0, calc(var(--dy, 0) * 1px), 0) rotate(calc(var(--rot, 0deg) + var(--dy, 0) * var(--spin, 0) * 1deg)); will-change: transform; }
.sh-square { width: clamp(70px, 8vw, 120px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--oxblood) 60%, transparent); --rot: 18deg; }
.sh-tri { width: 0; height: 0; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 76px solid color-mix(in srgb, var(--copper) 40%, transparent); filter: blur(.3px); }
.sh-line { width: 46vw; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--copper) 80%, transparent), transparent); --rot: -24deg; }
.sh-dots { width: 120px; height: 120px; background-image: radial-gradient(color-mix(in srgb, var(--oxblood) 55%, transparent) 1.6px, transparent 1.8px); background-size: 16px 16px; }
@keyframes morph { 50% { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; } 100% { border-radius: 40% 60% 54% 46% / 38% 50% 50% 62%; transform: translate3d(0, calc(var(--dy, 0) * 1px), 0) rotate(40deg) scale(1.1); } }


/* the giant word behind an inner page's opening, sliding as you scroll (--sy, site.js) */
.ghost {
  position: absolute; z-index: -1; left: 0; bottom: -.18em; white-space: nowrap; pointer-events: none; user-select: none;
  font-size: clamp(7rem, 21vw, 22rem); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--copper) 30%, transparent);
  transform: translateX(calc(4vw - var(--sy, 0) * .25px));
}

/* ------------------------------------------------------------- the first visit -- */
/* a curtain with the wordmark: its letters rise, the copper dot drops into place, the curtain lifts.
   Only on the first page of a visit (html.intro, set in the head); CSS alone runs it, so it can't get stuck. */
.loader { display: none; }
html.intro .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--bone);
  border-radius: 0 0 50% 50% / 0 0 0 0; animation: lift 1.1s var(--ease-io) 1.55s forwards;
}
html.intro .loader .wm { font-size: clamp(2rem, 6vw, 4.4rem); overflow: hidden; padding: .1em 0 .2em; }
html.intro .loader .wm > span { display: inline-block; animation: rise 1s var(--ease) .15s both; }
html.intro .loader .wm-i::after { animation: drop .9s var(--ease) .85s both; }
html.intro .loader .bar { position: absolute; left: 50%; bottom: 18%; width: 120px; height: 1px; margin-left: -60px; background: var(--line-dark); overflow: hidden; }
html.intro .loader .bar::after { content: ""; position: absolute; inset: 0; background: var(--copper); transform: scaleX(0); transform-origin: left; animation: fillbar 1.4s var(--ease-io) .1s forwards; }
@keyframes rise { from { transform: translateY(110%); } }
@keyframes drop { 0% { transform: translate(-22%, -2.4em); opacity: 0; } 60% { transform: translate(-22%, .05em) scale(1.2, .8); opacity: 1; } 100% { transform: translate(-22%, -.05em); } }
@keyframes fillbar { to { transform: scaleX(1); } }
@keyframes lift { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 30% 30%; visibility: hidden; } }
html.intro .hero [data-reveal], html.intro .intro [data-reveal], html.intro .hero [data-split] .w > span, html.intro .intro [data-split] .w > span { transition-delay: calc(1.75s + var(--d, 0) * 90ms) !important; }
html.intro [data-split] .w > span { transition-delay: calc(1.75s + var(--i) * 55ms) !important; }

/* --------------------------------------------------------------- the cursor halo -- */
.halo, .halo-dot { display: none; }
@media (pointer: fine) {
  .halo, .halo-dot { display: block; position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
  .halo { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid color-mix(in srgb, var(--copper) 80%, transparent); transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s; }
  .halo-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--copper); }
  .halo.live, .halo-dot.live { opacity: 1; }
  .halo.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: color-mix(in srgb, var(--copper) 16%, transparent); border-color: transparent; }
  .halo.text { width: 4px; height: 30px; margin: -15px 0 0 -2px; border-radius: 3px; background: var(--copper); border-color: transparent; }
}

/* ---------------------------------------------------------------- the home page -- */
.hero { min-height: 100svh; }
.hero .display { font-size: clamp(3rem, 8.2vw, 7.4rem); }
.untangle { transform: perspective(1400px) rotateY(calc(var(--tx, 0) * 1deg)) rotateX(calc(var(--ty, 0) * 1deg)); transition: transform .6s var(--ease); }

/* the statement, set big with a quote mark hung outside it */
.manifesto { position: relative; padding-top: clamp(110px, 14vw, 190px); }
.manifesto .statement { font-size: clamp(2.1rem, 5vw, 4.6rem); max-width: 17em; letter-spacing: -.045em; line-height: 1.08; position: relative; }
.manifesto .statement::before { content: "“"; position: absolute; left: -.55em; top: -.28em; font-size: 2.4em; line-height: 1; color: var(--copper); font-weight: 300; }
.manifesto .signoff { display: flex; align-items: center; gap: 16px; margin-top: 40px; color: var(--ink-3); font-size: .95rem; }
.manifesto .signoff .wm { font-size: 1.05rem; color: var(--ink); }


/* the four, as a bento: one big, two beside it, one wide; each lit from where the pointer is (--px/--py) */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(250px, auto); gap: 16px; }
.bento .tile { min-height: 0; border-radius: 28px; background: color-mix(in srgb, #fff 55%, transparent); border-color: color-mix(in srgb, var(--copper) 22%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.bento .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--copper) 26%, transparent), transparent 60%); }
.bento .tile:hover::before { opacity: 1; }
.bento .tile { isolation: isolate; }
.bento .t-optimize { grid-column: span 7; grid-row: span 2; background: linear-gradient(150deg, var(--oxblood) 0%, color-mix(in srgb, var(--oxblood) 60%, var(--ink)) 70%); color: var(--bone); border: 0; padding: clamp(28px, 4vw, 48px); }
.bento .t-optimize p { color: var(--on-dark-2); font-size: 1.12rem; max-width: 26em; }
.bento .t-optimize .n, .bento .t-optimize .more { color: var(--copper); }
.bento .t-optimize h3 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.bento .t-optimize .glyph { width: clamp(140px, 18vw, 230px); height: auto; color: var(--copper); margin: 30px 0 auto; }
.bento .t-optimize::before { background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--copper) 30%, transparent), transparent 60%); }
.bento .t-connect, .bento .t-automate { grid-column: span 5; }
.bento .t-create { grid-column: span 12; flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 60px); background: var(--ink); color: var(--bone); border: 0; min-height: 220px; }
.bento .t-create p { color: var(--on-dark-2); max-width: 34em; }
.bento .t-create h3 { margin: 6px 0 10px; font-size: clamp(2rem, 3.6vw, 3rem); }
.bento .t-create .glyph { color: var(--copper); margin: 0; width: 120px; height: 120px; flex: none; order: 2; margin-left: auto; }
.bento .t-create .n, .bento .t-create .more { color: var(--copper); }
.bento .t-create::before { background: radial-gradient(500px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--oxblood) 70%, transparent), transparent 60%); }
.bento .tile:hover { transform: translateY(-6px); }
.bento .tile .more { opacity: 1; transform: none; }
.bento .tile > div { margin-top: auto; }
.bento .tile .glyph { margin: 0 0 24px; }
.bento .tile h3 { margin: 8px 0 10px; }
.bento .t-create > div { margin-top: 0; }

/* big outline numerals */
.principle .big { color: transparent; -webkit-text-stroke: 1.2px var(--copper-ink); font-weight: 700; font-size: clamp(4rem, 7vw, 6.4rem); transition: color .5s, -webkit-text-stroke-color .5s; }
.principle:hover .big { color: var(--copper); -webkit-text-stroke-color: var(--copper); }

/* the workbench: four cards, the second column set lower, so the grid reads as layers, not a table */
.bench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.bench-grid .ex:nth-child(even) { margin-top: clamp(40px, 7vw, 110px); }
.bench-grid .ex:nth-child(odd) { margin-bottom: calc(clamp(40px, 7vw, 110px) * -1); }
.bench .ex { min-height: clamp(320px, 34vw, 430px); display: flex; flex-direction: column; border: 1px solid var(--line-dark); background: linear-gradient(160deg, color-mix(in srgb, var(--oxblood) 32%, var(--ink)), var(--ink) 65%); }
.bench .ex .tag { margin-bottom: auto; }
.bench .ex h3 { margin-top: 30px; }
.bench .ex .idx { position: absolute; right: 22px; bottom: -.12em; font-size: 9rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--copper) 35%, transparent); z-index: -1; transition: -webkit-text-stroke-color .5s, transform .8s var(--ease); }
.bench .ex:hover .idx { -webkit-text-stroke-color: var(--copper); transform: translateY(-10px); }
.bench .btns { margin-top: clamp(60px, 9vw, 130px); }

/* stickers you can pick up and move (site.js: [data-drag]) */
.stickers { position: relative; }
.sticker {
  position: absolute; z-index: 3; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap;
  cursor: grab; user-select: none; touch-action: none; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--oxblood) 60%, #000); transition: box-shadow .3s, scale .3s var(--ease);
}
.sticker:hover { scale: 1.06; }
.sticker.held { cursor: grabbing; scale: 1.1; box-shadow: 0 24px 40px -16px color-mix(in srgb, var(--oxblood) 70%, #000); z-index: 5; }
.sticker.s1 { --rot: -8deg; left: -26px; top: -22px; background: var(--copper); color: var(--ink); }
.sticker.s2 { --rot: 6deg; right: -18px; top: 38%; background: var(--bone); color: var(--oxblood); border: 1.5px solid var(--oxblood); }
.sticker.s3 { --rot: -4deg; left: 18%; bottom: -20px; background: var(--oxblood); color: var(--bone); }
.term { transform: rotate(1.6deg); transition: transform .8s var(--ease); }
.term:hover { transform: rotate(0); }

/* ------------------------------------------------------------------ inner pages -- */
.intro { padding-bottom: clamp(120px, 14vw, 190px); }
.area-side h2 { background: linear-gradient(120deg, var(--ink) 30%, var(--oxblood) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.looks li:hover { color: var(--oxblood); }
.heard q { background: color-mix(in srgb, #fff 60%, transparent); }
.step-meta div { background: color-mix(in srgb, #fff 55%, transparent); backdrop-filter: blur(10px); }
.faq { background: color-mix(in srgb, #fff 45%, transparent); border-radius: 28px; padding: 6px 30px; border: 1px solid color-mix(in srgb, var(--copper) 20%, transparent); backdrop-filter: blur(14px); }
.faq details:last-child { border-bottom: 0; }
.faq { border-top: 1px solid color-mix(in srgb, var(--copper) 20%, transparent); }
.case-art { outline: 1px solid color-mix(in srgb, var(--copper) 40%, transparent); outline-offset: 12px; translate: 0 calc(var(--par, 0) * 1px); }
.case:nth-of-type(even) .case-art { rotate: -1deg; } .case:nth-of-type(odd) .case-art { rotate: 1deg; }
.case-art:hover { rotate: 0deg; }
.case-art { transition: rotate .8s var(--ease); }
.next { background: color-mix(in srgb, #fff 55%, transparent); backdrop-filter: blur(14px); }
/* contact: the form lifted onto a card that overlaps the opening */
.page-contact .contact { position: relative; z-index: 2; margin-top: clamp(-150px, -12vw, -90px); }
.page-contact .sec { padding-top: 0; }
.form-card { padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: color-mix(in srgb, #fff 78%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid color-mix(in srgb, var(--copper) 25%, transparent); box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--oxblood) 55%, transparent); }
.page-contact .aside { top: 130px; padding-top: clamp(90px, 12vw, 150px); }
.field input, .field textarea { background: color-mix(in srgb, var(--bone) 70%, #fff); }

/* ------------------------------------------------------------------- the footer -- */
.foot-giant { display: block; padding: clamp(30px, 5vw, 60px) 0 clamp(24px, 4vw, 44px); border-top: 1px solid var(--line-dark); text-decoration: none; color: var(--bone); line-height: 1; }
.foot-giant { container-type: inline-size; }
.foot-giant .wm { display: block; font-size: 9.3vw; font-size: 10.85cqi; letter-spacing: -.055em; }      /* the word measures about 9.2 font-sizes wide: this fills the line, gutter to gutter */
.foot-giant:hover .wm-i::after { animation: hop .9s var(--ease); }
.foot-giant .wm > span { background: linear-gradient(180deg, var(--bone) 40%, color-mix(in srgb, var(--bone) 25%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento .tile, .bento .t-optimize, .bento .t-connect, .bento .t-automate, .bento .t-create { grid-column: auto; grid-row: auto; }
  .bento .t-create { flex-direction: column; align-items: flex-start; }
  .bento .t-create .glyph { order: 0; margin: 0; }
  .sticker.s2 { right: 6px; }
  .bench-grid { grid-template-columns: 1fr; }
  .bench-grid .ex:nth-child(n) { margin: 0; }
  .sticker.s1 { left: 6px; }
  .page-contact .aside { padding-top: 0; }
  .manifesto .statement::before { left: -.1em; top: -.75em; font-size: 1.6em; }
}

/* ============================================================ the curiosity pieces ==
   What keeps a visitor thinking about their own work: the system that lights up with what it can already do
   (.sys), advice against doing (.vs), the signs to tick (.spot), questions that turn over (.flip), the walk to
   try today (.walk), and where else a case's better way hides (.hides). */

/* the system: twelve things it can do, three in use; the rest light up on request (site.js: [data-sys]) */
.already-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.sys { padding: 18px; border-radius: 26px; background: var(--ink); color: var(--on-dark); box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--oxblood) 70%, #000); }
.sys-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--line-dark); }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 0; }
.cell { position: relative; display: flex; align-items: flex-end; min-height: 76px; padding: 12px; border-radius: 12px; font-size: .86rem; font-weight: 600; line-height: 1.25;
  color: var(--on-dark-3); border: 1px dashed var(--line-dark); transition: color .5s, background .6s, border-color .6s, transform .6s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.cell.used { color: var(--bone); border-style: solid; border-color: color-mix(in srgb, var(--bone) 25%, transparent); background: color-mix(in srgb, var(--bone) 7%, transparent); }
.cell::before { content: ""; position: absolute; top: 12px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-dark); transition: background .5s, box-shadow .5s; transition-delay: inherit; }
.cell.used::before { background: var(--bone); }
.could .cell:not(.used) { color: var(--bone); border-style: solid; border-color: color-mix(in srgb, var(--copper) 60%, transparent); background: color-mix(in srgb, var(--oxblood) 45%, transparent); transform: translateY(-3px); }
.could .cell:not(.used)::before { background: var(--neon); box-shadow: 0 0 12px var(--neon); }

/* advice against doing */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 28px; overflow: hidden; }
.vs-col { padding: clamp(28px, 4vw, 50px); }
.vs-col b { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vs-col li { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; position: relative; }
.vs-them { background: color-mix(in srgb, #fff 50%, transparent); color: var(--ink-3); border: 1px solid color-mix(in srgb, var(--copper) 22%, transparent); border-right: 0; border-radius: 28px 0 0 28px; }
.vs-them b { color: var(--ink-3); }
.vs-them li { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--copper) 0%, transparent); text-decoration-thickness: 1.5px; transition: text-decoration-color .8s; transition-delay: calc(var(--n, 0) * 180ms + 600ms); }
.vs-them.in li { text-decoration-color: var(--copper); }
.vs-them li:nth-child(2) { --n: 1; } .vs-them li:nth-child(3) { --n: 2; } .vs-them li:nth-child(4) { --n: 3; }
.vs-us { background: var(--ink); color: var(--bone); border-radius: 0 28px 28px 0; position: relative; isolation: isolate; }
.vs-us::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(70% 80% at 90% 0%, color-mix(in srgb, var(--oxblood) 55%, transparent), transparent 70%); }
.vs-us b { color: var(--copper); }
.vs-us li { padding-left: 30px; }
.vs-us li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 1.5px; background: var(--copper); }

/* the signs to tick */
.spot-in { display: grid; gap: 40px; }
.spot-head { max-width: 46em; }
.spot-form { display: grid; grid-template-columns: 1fr 300px; gap: clamp(20px, 4vw, 50px); align-items: start; }
.signs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sign { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 20px; border-radius: 16px; cursor: pointer; user-select: none;
  background: color-mix(in srgb, #fff 55%, transparent); border: 1px solid color-mix(in srgb, var(--copper) 22%, transparent); backdrop-filter: blur(10px);
  font-weight: 500; line-height: 1.35; transition: background .35s, color .35s, border-color .35s, transform .45s var(--ease); }
.sign input { position: absolute; opacity: 0; pointer-events: none; }
.sign span { flex: 1; }
.sign i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); color: transparent; transition: background .35s, border-color .35s, color .35s, transform .5s var(--ease); }
.sign:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--oxblood) 40%, transparent); }
.sign:has(input:checked) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.sign:has(input:checked) i { background: var(--neon); border-color: var(--neon); color: #fff; transform: rotate(360deg); }
.sign:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 3px; }
.spot-side { position: sticky; top: 110px; display: grid; gap: 18px; justify-items: start; padding: 28px; border-radius: 24px; background: var(--ink); color: var(--on-dark); }
.dial { position: relative; width: 120px; height: 120px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-bg { fill: none; stroke: var(--line-dark); stroke-width: 6; }
.dial-fg { fill: none; stroke: var(--neon); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--neon) 70%, transparent)); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--fill, 0) * 100); transition: stroke-dashoffset .8s var(--ease); }
.dial strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 300; letter-spacing: -.05em; color: var(--bone); font-variant-numeric: tabular-nums; }
.spot-say { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; color: var(--bone) !important; min-height: 3em; }
.spot-note { margin: 0; font-size: .82rem; color: var(--on-dark-3) !important; }
.spot-side .btn { --bg: var(--bone); --fg: var(--ink); }

/* questions that turn over */
.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1400px; }
.flip { position: relative; min-height: 250px; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transform-style: preserve-3d; transition: transform .9s var(--ease); }
html .flip.over, html.js .flip.over[data-reveal].in { transform: rotateY(180deg); }     /* beats the arriving rule's transform: none */
.flip > span { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .front { background: color-mix(in srgb, #fff 55%, transparent); border: 1px solid color-mix(in srgb, var(--copper) 22%, transparent); backdrop-filter: blur(10px); }
.flip .front q { quotes: none; font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.flip .front small { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--copper-ink); font-weight: 600; font-size: .85rem; }
.flip .back { background: var(--ink); color: var(--on-dark-2); transform: rotateY(180deg); }
.flip .back b { color: var(--copper); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.flip .back span { font-size: 1.02rem; line-height: 1.55; }
html.js .flip:hover:not(.over)[data-reveal].in, .flip:hover:not(.over) { transform: rotateY(-8deg) translateY(-4px); }

/* the walk to try today */
.walk { counter-reset: w; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.walk li { list-style: none; counter-increment: w; position: relative; padding: 70px 24px 26px; border-radius: 22px; background: color-mix(in srgb, #fff 50%, transparent); border: 1px solid color-mix(in srgb, var(--copper) 20%, transparent); }
.walk li::before { content: counter(w, decimal-leading-zero); position: absolute; top: 18px; left: 24px; font-size: 2.6rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--copper-ink); }
.walk b { display: block; font-size: 1.12rem; letter-spacing: -.02em; margin-bottom: 8px; }
.walk p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* where else a case's better way hides */
.case dl > div.hides { border-bottom: 0; margin-top: 10px; padding: 18px 20px; border-radius: 16px; background: color-mix(in srgb, var(--blush) 55%, transparent); }
.case dl > div.hides dt { color: var(--copper-ink); }
.case dl > div.hides dd { color: var(--ink); }

/* contact: the ticks carried over, and lines to start from */
.carried { display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; font-size: .92rem; font-weight: 600; color: var(--oxblood); }
.starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.starters span { font-size: .85rem; color: var(--ink-3); margin-right: 4px; }
.starters button { border: 1px solid color-mix(in srgb, var(--copper) 35%, transparent); background: color-mix(in srgb, #fff 60%, transparent); color: var(--ink-2); font: 500 .88rem/1.2 "Manrope", system-ui, sans-serif; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease); }
.starters button:hover { background: var(--ink); color: var(--bone); transform: translateY(-2px); }

/* what we notice in the first hour */
.notice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 50px; counter-reset: n; }
.notice li { list-style: none; counter-increment: n; display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 1.08rem; color: var(--ink-2); }
.notice li::before { content: counter(n, decimal-leading-zero); color: var(--copper-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .already-in, .spot-form, .vs { grid-template-columns: 1fr; }
  .vs-them { border-radius: 28px 28px 0 0; border-right: 1px solid color-mix(in srgb, var(--copper) 22%, transparent); border-bottom: 0; }
  .vs-us { border-radius: 0 0 28px 28px; }
  .spot-side { position: static; }
  .flips, .walk { grid-template-columns: 1fr 1fr; }
  .notice { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .signs, .flips, .walk { grid-template-columns: 1fr; }
  .cells { grid-template-columns: repeat(2, 1fr); }
  .sys .ut-toggle button { white-space: normal; text-align: center; line-height: 1.2; }
}

/* ================================================================ the dark page ==
   Three grounds. The page is true black, and most sections sit straight on it (light text), with crisp white
   cards on top, like paper on a dark desk. The stages (.dark: openings, the workbench, the closing band, the
   footer) are wine, with their moving edges. The sheets (.sheet) are full white grounds with angled, swinging
   edges, for the light-mode moments. On the black, the light-page text tokens are remapped; a white card puts
   them back (--l-*). */
:root {
  --l-ink-2: color-mix(in srgb, var(--ink) 78%, var(--bone)); --l-ink-3: color-mix(in srgb, var(--ink) 62%, var(--bone));
  --l-line: color-mix(in srgb, var(--ink) 14%, var(--bone)); --l-line-2: color-mix(in srgb, var(--ink) 24%, var(--bone));
  --l-copper-ink: color-mix(in srgb, var(--copper) 45%, var(--oxblood)); --l-oxblood-2: color-mix(in srgb, var(--oxblood) 82%, var(--copper));
}
body { background: var(--ink); color: var(--bone); }
.sec:not(.sheet):not(.dark) {
  --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3); --line: var(--line-dark); --line-2: color-mix(in srgb, var(--bone) 18%, var(--ink));
  --copper-ink: var(--copper); --oxblood-2: var(--copper); --paper-2: color-mix(in srgb, var(--bone) 7%, var(--ink));
  color: var(--bone);
}
/* a white card on the black: light tokens back */
.bento .tile:not(.t-optimize), .flip .front, .walk li, .faq, .next, .form-card, .vs-us, .case dl > div.hides, .mark-card:not(.dark-card), .sw div, .sent ~ .form, .heard q:hover {
  --ink-2: var(--l-ink-2); --ink-3: var(--l-ink-3); --line: var(--l-line); --line-2: var(--l-line-2); --copper-ink: var(--l-copper-ink); --oxblood-2: var(--l-oxblood-2);
  --paper-2: color-mix(in srgb, var(--bone) 70%, var(--blush));
}
.bento .tile:not(.t-optimize), .flip .front, .walk li, .faq, .next, .form-card, .vs-us, .case dl > div.hides, .mark-card:not(.dark-card), .sw div {
  background: var(--bone); color: var(--ink); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 40px 80px -50px #000, 0 0 0 1px color-mix(in srgb, var(--bone) 8%, transparent);
}

/* text on the black */
.sec:not(.sheet):not(.dark) .btn-link { color: var(--bone); }
.sec:not(.sheet):not(.dark) .statement .rw { color: color-mix(in srgb, var(--bone) 20%, var(--ink)); }
.sec:not(.sheet):not(.dark) .statement .rw.lit { color: var(--bone); }
.sec:not(.sheet):not(.dark) .statement .rw.hl.lit { color: var(--copper); }
.sec:not(.sheet):not(.dark) .signoff .wm { color: var(--bone); }
.sec:not(.sheet):not(.dark) .area-side h2 { background: linear-gradient(120deg, var(--bone) 30%, var(--copper) 100%); -webkit-background-clip: text; background-clip: text; }
.sec:not(.sheet):not(.dark) .area-body > p:first-child, .sec:not(.sheet):not(.dark) .prose p:first-child, .sec:not(.sheet):not(.dark) .prose strong { color: var(--bone); }
.sec:not(.sheet):not(.dark) .looks li:hover { color: var(--copper); }
.sec:not(.sheet):not(.dark) .case dd.res { color: var(--copper); }
.sec:not(.sheet):not(.dark) .principle:hover .big { color: var(--copper); }
.sec:not(.sheet):not(.dark) .heard q { background: color-mix(in srgb, var(--bone) 7%, var(--ink)); border-color: var(--line-dark); color: var(--on-dark-2); }
.sec:not(.sheet):not(.dark) .heard q:hover { background: var(--oxblood); color: var(--bone); }
.sec:not(.sheet):not(.dark) .area-side .glyph { color: var(--copper); }

/* dark things that sit on the black get lifted: a wine ground or a line round them */
.flip .back { background: var(--oxblood); color: color-mix(in srgb, var(--bone) 82%, var(--oxblood)); }
.flip .back b { color: var(--bone); }
.term { background: color-mix(in srgb, var(--bone) 4%, var(--ink)); border-color: var(--line-dark); }
.case-art { background: var(--wine); }
.reach, .sent { background: var(--wine); }
.bento .t-create { --ink-2: var(--l-ink-2); }
.bento .t-create p { color: var(--l-ink-2); }
.bento .t-create .glyph, .bento .t-create .n, .bento .t-create .more { color: var(--oxblood); }
.bento .t-create::before { background: radial-gradient(500px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--copper) 26%, transparent), transparent 60%); }
.vs-them { background: transparent; border-color: var(--line-dark); }
.vs-us { border-radius: 0 28px 28px 0; }
.vs-us::before { display: none; }
.vs-us b, .vs-us li::before { color: var(--oxblood); }
.vs-us li::before { background: var(--oxblood); }
.form-card { background: var(--bone); }
.sh-square { border-color: color-mix(in srgb, var(--copper) 55%, transparent); }
.sh-dots { background-image: radial-gradient(color-mix(in srgb, var(--copper) 55%, transparent) 1.6px, transparent 1.8px); }

/* the stages are wine */
.dark::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"), var(--wine); }
.bench .ex { background: linear-gradient(160deg, color-mix(in srgb, var(--oxblood) 30%, var(--ink)), var(--ink) 70%); }

/* the sheets: white grounds with angled edges that swing as they pass (--a, --b), a copper layer crossing behind */
.sheet { --a: .3; --b: .3; position: relative; isolation: isolate; color: var(--ink);
  padding-top: calc(var(--edge) + clamp(60px, 8vw, 110px)); padding-bottom: calc(var(--edge) + clamp(60px, 8vw, 110px)); margin: calc(var(--edge) * -.5) 0; }
.sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone);
  clip-path: polygon(0 calc(var(--edge) * (1 - var(--a))), 100% calc(var(--edge) * var(--a)), 100% calc(100% - var(--edge) * (1 - var(--b))), 0 calc(100% - var(--edge) * var(--b))); }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, color-mix(in srgb, var(--copper) 70%, transparent), color-mix(in srgb, var(--oxblood) 80%, transparent));
  clip-path: polygon(0 calc(var(--edge) * var(--a) * .9), 100% calc(var(--edge) * (1 - var(--a)) * .9), 100% calc(100% - var(--edge) * var(--b) * .9), 0 calc(100% - var(--edge) * (1 - var(--b)) * .9)); }

/* ====================================================================== the mark ==
   The brand's iconograph is the wordmark's own detail: an i whose dot has moved (site_mark()). It recurs for
   continuity and texture: huge and faint behind the stages, small on every kicker and bullet, and as a dot field
   where, now and then, one copper dot sits out of line. */
:root { --mark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 80'%3E%3Crect x='12' y='30' width='16' height='50' rx='3.5'/%3E%3Ccircle cx='27.5' cy='12' r='9'/%3E%3C/svg%3E"); --field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FAF3F3' fill-opacity='.13'%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='36' cy='12' r='1.3'/%3E%3Ccircle cx='60' cy='12' r='1.3'/%3E%3Ccircle cx='84' cy='12' r='1.3'/%3E%3Ccircle cx='108' cy='12' r='1.3'/%3E%3Ccircle cx='132' cy='12' r='1.3'/%3E%3Ccircle cx='156' cy='12' r='1.3'/%3E%3Ccircle cx='180' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='36' r='1.3'/%3E%3Ccircle cx='36' cy='36' r='1.3'/%3E%3Ccircle cx='60' cy='36' r='1.3'/%3E%3Ccircle cx='84' cy='36' r='1.3'/%3E%3Ccircle cx='108' cy='36' r='1.3'/%3E%3Ccircle cx='132' cy='36' r='1.3'/%3E%3Ccircle cx='156' cy='36' r='1.3'/%3E%3Ccircle cx='180' cy='36' r='1.3'/%3E%3Ccircle cx='12' cy='60' r='1.3'/%3E%3Ccircle cx='36' cy='60' r='1.3'/%3E%3Ccircle cx='60' cy='60' r='1.3'/%3E%3Ccircle cx='108' cy='60' r='1.3'/%3E%3Ccircle cx='132' cy='60' r='1.3'/%3E%3Ccircle cx='156' cy='60' r='1.3'/%3E%3Ccircle cx='180' cy='60' r='1.3'/%3E%3Ccircle cx='12' cy='84' r='1.3'/%3E%3Ccircle cx='36' cy='84' r='1.3'/%3E%3Ccircle cx='60' cy='84' r='1.3'/%3E%3Ccircle cx='84' cy='84' r='1.3'/%3E%3Ccircle cx='108' cy='84' r='1.3'/%3E%3Ccircle cx='132' cy='84' r='1.3'/%3E%3Ccircle cx='156' cy='84' r='1.3'/%3E%3Ccircle cx='180' cy='84' r='1.3'/%3E%3Ccircle cx='12' cy='108' r='1.3'/%3E%3Ccircle cx='36' cy='108' r='1.3'/%3E%3Ccircle cx='60' cy='108' r='1.3'/%3E%3Ccircle cx='84' cy='108' r='1.3'/%3E%3Ccircle cx='108' cy='108' r='1.3'/%3E%3Ccircle cx='132' cy='108' r='1.3'/%3E%3Ccircle cx='156' cy='108' r='1.3'/%3E%3Ccircle cx='180' cy='108' r='1.3'/%3E%3Ccircle cx='12' cy='132' r='1.3'/%3E%3Ccircle cx='36' cy='132' r='1.3'/%3E%3Ccircle cx='60' cy='132' r='1.3'/%3E%3Ccircle cx='84' cy='132' r='1.3'/%3E%3Ccircle cx='108' cy='132' r='1.3'/%3E%3Ccircle cx='132' cy='132' r='1.3'/%3E%3Ccircle cx='156' cy='132' r='1.3'/%3E%3Ccircle cx='180' cy='132' r='1.3'/%3E%3Ccircle cx='12' cy='156' r='1.3'/%3E%3Ccircle cx='36' cy='156' r='1.3'/%3E%3Ccircle cx='60' cy='156' r='1.3'/%3E%3Ccircle cx='84' cy='156' r='1.3'/%3E%3Ccircle cx='108' cy='156' r='1.3'/%3E%3Ccircle cx='132' cy='156' r='1.3'/%3E%3Ccircle cx='180' cy='156' r='1.3'/%3E%3Ccircle cx='12' cy='180' r='1.3'/%3E%3Ccircle cx='36' cy='180' r='1.3'/%3E%3Ccircle cx='60' cy='180' r='1.3'/%3E%3Ccircle cx='84' cy='180' r='1.3'/%3E%3Ccircle cx='108' cy='180' r='1.3'/%3E%3Ccircle cx='132' cy='180' r='1.3'/%3E%3Ccircle cx='156' cy='180' r='1.3'/%3E%3Ccircle cx='180' cy='180' r='1.3'/%3E%3Ccircle cx='89' cy='55' r='2.2' fill='%23D4928F' fill-opacity='.9'/%3E%3Ccircle cx='161' cy='151' r='2.2' fill='%23D4928F' fill-opacity='.9'/%3E%3C/svg%3E"); }
.mark-bg { position: absolute; z-index: -1; pointer-events: none; width: auto; height: clamp(360px, 58vw, 880px); right: -3vw; top: 16%;
  color: color-mix(in srgb, var(--bone) 6%, transparent); transform: rotate(9deg); animation: markFloat 24s ease-in-out infinite alternate; }
.mark-bg * { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }     /* drawn as a fine outline, like an engraving: never a filled blob */
.mark-bg .mk-stem { fill: color-mix(in srgb, var(--bone) 3%, transparent); stroke: color-mix(in srgb, var(--bone) 16%, transparent); }
.mark-bg .mk-dot { fill: none; stroke: color-mix(in srgb, var(--copper) 70%, transparent); }
@keyframes markFloat { to { transform: rotate(5deg) translate(-2vw, 3vh); } }
.intro .mark-bg { height: clamp(300px, 40vw, 620px); top: 14%; right: 3vw; }
.cta .mark-bg { right: auto; left: -4vw; top: -6%; height: 120%; transform: rotate(-10deg); animation-direction: alternate-reverse; }
.kicker::before { width: 9px; height: 15px; background: currentColor; -webkit-mask: var(--mark-mask) center / contain no-repeat; mask: var(--mark-mask) center / contain no-repeat; }
.facts li::before { width: 8px; height: 13px; border-radius: 0; -webkit-mask: var(--mark-mask) center / contain no-repeat; mask: var(--mark-mask) center / contain no-repeat; transform: translateY(1px); }
.dark::before { background-image: var(--field); background-size: 192px 192px; opacity: 1; mask-image: radial-gradient(75% 70% at 60% 40%, #000 15%, transparent 80%); -webkit-mask-image: radial-gradient(75% 70% at 60% 40%, #000 15%, transparent 80%); }
.sec:not(.sheet):not(.dark)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--field); background-size: 192px 192px; opacity: .55;
  mask-image: radial-gradient(60% 55% at 85% 30%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(60% 55% at 85% 30%, #000 10%, transparent 75%); }

/* more grounds: solid burgundy stages, and flat blush sheets */
.dark.burgundy { --on-dark-2: color-mix(in srgb, var(--bone) 82%, var(--oxblood)); --on-dark-3: color-mix(in srgb, var(--bone) 62%, var(--oxblood)); --line-dark: color-mix(in srgb, var(--bone) 20%, var(--oxblood)); }
.dark.burgundy::after { background: linear-gradient(160deg, color-mix(in srgb, var(--oxblood) 88%, var(--copper)) 0%, var(--oxblood) 45%, color-mix(in srgb, var(--oxblood) 70%, var(--ink)) 100%); }
.dark.burgundy .glow { background: radial-gradient(34% 44% at var(--mx, 70%) var(--my, 30%), color-mix(in srgb, var(--copper) 22%, transparent), transparent 70%); }
.dark.burgundy .grain { background: color-mix(in srgb, var(--ink) 70%, transparent); }
.dark.burgundy .kicker, .dark.burgundy .display-2 em, .dark.burgundy .display em { color: color-mix(in srgb, var(--copper) 45%, var(--bone)); }
.dark.burgundy .mark-bg .mk-stem { stroke: color-mix(in srgb, var(--bone) 22%, transparent); }
.dark.burgundy .mark-bg .mk-dot { stroke: color-mix(in srgb, var(--neon) 75%, transparent); }
.dark.burgundy .belief, .dark.burgundy .value { border-color: var(--line-dark); }
.dark.burgundy .belief:hover { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.dark.burgundy .chips span { border-color: var(--line-dark); color: var(--on-dark-2); }
.dark .statement .rw { color: color-mix(in srgb, var(--bone) 30%, var(--oxblood)); }
.dark .statement .rw.lit { color: var(--bone); }
.dark .statement .rw.hl.lit { color: color-mix(in srgb, var(--copper) 40%, var(--bone)); }
.dark .signoff, .dark .signoff .wm, .dark .btn-link { color: var(--bone); }
.manifesto.dark .statement::before { color: color-mix(in srgb, var(--copper) 40%, var(--bone)); }
.manifesto.dark { padding-top: calc(var(--edge) + clamp(80px, 10vw, 140px)); }
.sheet.blush::after { background: var(--blush); }
.sheet .vs-them { border-color: var(--line-2); }
.sheet.blush .mark-bg .mk-stem { fill: none; stroke: color-mix(in srgb, var(--oxblood) 18%, transparent); }

/* --------------------------------------------------------------------- less motion -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  html.intro .loader { display: none; }
  .hero > .wrap, .intro > .wrap { transform: none; opacity: 1; filter: none; }
  .shape { transform: rotate(var(--rot, 0deg)); }
  .halo, .halo-dot { display: none !important; }
  [data-split] .w > span { transform: none; }
  @view-transition { navigation: none; }
}