/* North Bound site - the universal draft, 2026-09-18. The house blend of the three round 2 looks:
   Field Book's survey frame (a traverse line down the page, a station at each section, ocean ink
   for linework and notes), Work Order's color blocks and stamp, and Shop Lights' warm charcoal
   dark mode with a "Switch to light" button.

   Colors are set once on :root with light-dark(), so each token names its light and its dark value
   on one line. The page follows the device until the visitor presses the switch; the choice is saved
   under nb-theme, the same key the client pages use. Color blocks set plain values of their own and
   look the same in both themes.

   Rules: north-bound/design.md, voice.md and client-pages.md. Where this stretches design.md is
   listed in this folder's README.md. Fonts are served from /fonts (copies of brand/fonts); nothing
   loads from Google or any other host. */

@font-face {
  font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/bitter-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Karla"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/fonts/karla-300-600-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  /* brand, fixed */
  --cream: #FAF7F2;
  --stone: #3B3832;
  --forest: #2D5A3D;
  --night: #1A2118;
  --gold-light: #C9A263;
  /* page, light then dark */
  --ground: light-dark(#FAF7F2, #1D1B18);
  --sheet: light-dark(#FFFDF9, #282521);
  --ink: light-dark(#3B3832, #EDE7DC);
  --ink-2: light-dark(#6B655B, #B5AC9E);
  --rule: light-dark(rgba(59, 56, 50, .16), rgba(237, 231, 220, .13));
  --edge: light-dark(rgba(59, 56, 50, .36), rgba(237, 231, 220, .3));
  --pen: light-dark(#2671A6, #7FB2D8);
  --pen-soft: light-dark(rgba(38, 113, 166, .45), rgba(127, 178, 216, .42));
  --link: light-dark(#2671A6, #7FB2D8);
  --label: light-dark(#6B655B, #C9A263);
  --disc: light-dark(#B48847, #C9A263);
  --ai: light-dark(#9A7337, #C9A263);
  --hl: light-dark(#E9D6AC, #5A4822);
  --mix-1: light-dark(#2D5A3D, #4F7D5E);
  --button: #2D5A3D;
  --button-ink: #FAF7F2;
  --button-hover: light-dark(#1F4630, #36694A);
  --button-edge: light-dark(#2D5A3D, #4F7D5E);
  --amber-ink: light-dark(#8A4B08, #E9BC7E);
  --amber-bg: light-dark(#FDF5E9, #2A2517);
  --amber-rule: light-dark(#E0B56A, #7A5E2A);
  --foot: light-dark(#3B3832, #141311);
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24 0V120M48 0V120M72 0V120M96 0V120M0 24H120M0 48H120M0 72H120M0 96H120' stroke='%232B7CB5' stroke-opacity='.07' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='%232B7CB5' stroke-opacity='.15' fill='none'/%3E%3C/svg%3E");
  --serif: "Bitter", Georgia, serif;
  --sans: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1rem, 4vw, 2.5rem);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The two things light-dark() can't carry: the graph paper and which logo file shows */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24 0V120M48 0V120M72 0V120M96 0V120M0 24H120M0 48H120M0 72H120M0 96H120' stroke='%237FB2D8' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='%237FB2D8' stroke-opacity='.1' fill='none'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark { display: block; }
}
:root[data-theme="dark"] {
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24 0V120M48 0V120M72 0V120M96 0V120M0 24H120M0 48H120M0 72H120M0 96H120' stroke='%237FB2D8' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='%237FB2D8' stroke-opacity='.1' fill='none'/%3E%3C/svg%3E");
}
.on-dark { display: none; }
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: block; }

/* Color blocks: each resets the page tokens for its own ground */
.block-gold {
  --ground: var(--gold-light);
  --ink: #1A2118; --ink-2: #3B3832; --rule: rgba(26, 33, 24, .28); --edge: rgba(26, 33, 24, .5);
  --pen: #1A2118; --pen-soft: rgba(26, 33, 24, .5); --link: #1A2118; --label: #1A2118;
  background: var(--ground); color: var(--ink);
}
.block-forest {
  --ground: #2D5A3D;
  --ink: #FAF7F2; --ink-2: #DCE6DD; --rule: rgba(250, 247, 242, .22); --edge: rgba(250, 247, 242, .42);
  --pen: #FAF7F2; --pen-soft: rgba(250, 247, 242, .5); --link: #FAF7F2; --label: #FAF7F2;
  --amber-ink: #E9BC7E;
  --button: #FAF7F2; --button-ink: #2D5A3D; --button-hover: #EAE4D9; --button-edge: #FAF7F2;
  background: var(--ground); color: var(--ink);
}
.block-stone {
  --ground: light-dark(#3B3832, #2E2B26); --sheet: light-dark(#46423B, #37332D);
  --ink: #FAF7F2; --ink-2: #D6CFC2; --rule: rgba(250, 247, 242, .16); --edge: rgba(250, 247, 242, .32);
  --pen: #7FB2D8; --pen-soft: rgba(127, 178, 216, .45); --link: #7FB2D8; --label: var(--gold-light);
  --disc: var(--gold-light);
  --button-hover: #36694A; --button-edge: #4F7D5E;
  background: var(--ground); color: var(--ink);
}
.paper { background-color: var(--ground); background-image: var(--grid); background-position: -1px -1px; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height: 1.65;
  overflow-wrap: break-word;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 2px; }
strong, b { font-weight: 600; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); line-height: .98; letter-spacing: -.03em; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.25; }
p, ul, ol, dl, figure { margin: 0; }
button, input { font-family: inherit; }
.disc { fill: var(--disc); }
.ai { color: var(--ai); }
.hl {
  text-decoration: underline; text-decoration-color: var(--hl);
  text-decoration-thickness: .34em; text-underline-offset: -.2em; text-decoration-skip-ink: none;
}

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 40;
  background: var(--forest); color: var(--cream);
  padding: .6rem 1rem; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Labels: stations in ocean ink, plain labels in muted stone (gold light on dark) */
.sta {
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pen);
}
.sta span { display: inline-block; margin-right: .6rem; padding: .1rem .45rem; border: 1.5px solid var(--pen); border-radius: 2px; letter-spacing: .12em; }
.label {
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--label);
}
.note-ink { font: 600 .9375rem/1.4 var(--sans); color: var(--pen); }

/* Header: stays at the top of the screen while the page scrolls (2026-09-18). It sits above the cookie
   banner so the open menu is never under it. Anything that scrolls into view (a skipped-to heading, a
   #link, a focused field) stops below it, not under it. */
html { scroll-padding-top: 5.5rem; }
.site-head {
  position: sticky; top: 0; z-index: 35;
  background: var(--ground); border-bottom: 1.5px solid var(--pen-soft);
  transition: box-shadow .2s cubic-bezier(.25, 1, .5, 1);
}
.site-head.scrolled { box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .5); }
.head-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; padding-block: .9rem .5rem; }
.brand { display: flex; flex-direction: column; align-items: flex-start; margin-right: auto; padding-bottom: .4rem; }
.brand-link { display: block; line-height: 0; }
.brand-link img { width: 154px; height: 44px; }
.tagline {
  margin: -.7rem 0 0 54px;
  font: 600 .6875rem/1.3 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--label); white-space: nowrap;
}
.nav { order: 3; flex: 1 1 100%; }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; list-style: none; padding: 0; margin: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 1rem; text-decoration: none; }
.nav a:hover { color: var(--pen); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.nav .client a { font-weight: 600; }
.nav .tools { margin-left: auto; }
.theme-toggle {
  min-height: 44px; padding: .45rem .85rem;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 600 .8125rem/1 var(--sans); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }

/* The Menu button: phones and tablets only, and only when JavaScript runs (the "js" class, set in the
   page head before anything draws). The links drop down over the page, so nothing below them moves. */
.menu-toggle {
  display: none; flex: none; align-items: center; justify-content: center; gap: .5rem;
  min-width: 44px; min-height: 44px; padding: .5rem .8rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 600 .9375rem/1 var(--sans); cursor: pointer;
}
.menu-toggle:hover { border-color: var(--ink-2); }
.menu-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle .x, .menu-toggle[aria-expanded="true"] .bars { display: none; }
.menu-toggle[aria-expanded="true"] .x { display: inline; }
@media (max-width: 59.99rem) {
  .js .head-in { flex-wrap: nowrap; gap: .75rem; padding-block: .6rem; }
  .js .brand { padding-bottom: 0; }
  .js .menu-toggle { display: inline-flex; }
  .js .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
    background: var(--ground); border-bottom: 1.5px solid var(--pen-soft);
    box-shadow: 0 18px 32px -20px rgba(0, 0, 0, .55);
  }
  .js .site-head.open .nav { display: block; }
  .js .nav ul {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    max-width: 76rem; margin-inline: auto; padding: .25rem var(--pad) 1.25rem;
  }
  .js .nav li a { display: flex; min-height: 52px; font-size: 1.125rem; border-bottom: 1px solid var(--rule); }
  .js .nav a[aria-current="page"] { font-weight: 600; text-decoration: none; box-shadow: inset 3px 0 0 var(--pen); padding-left: .85rem; }
  .js .nav .tools { margin: 1rem 0 0; }
}
/* Small phones: the button drops its word and keeps the icon, so the name and tagline stay whole. */
@media (max-width: 24rem) {
  .js .menu-toggle { padding-inline: .6rem; }
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Buttons and links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.2rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  background: var(--button); color: var(--button-ink);
  border: 1.5px solid var(--button-edge); border-radius: 3px;
  font: 600 1.0625rem/1.2 var(--sans);
  padding: .85rem 1.5rem; text-decoration: none; cursor: pointer;
  transition: background-color .18s cubic-bezier(.25, 1, .5, 1), transform .18s cubic-bezier(.25, 1, .5, 1);
}
.button:hover { background: var(--button-hover); transform: translateY(-1px); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Stations: every home section is one. The traverse line runs down the left on wide screens. */
.st-in { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.st-in > .sta { margin-bottom: 1.4rem; }

/* STA 0: first screen */
.hero .st-in { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6rem); display: grid; gap: 2.5rem; }
.hero .st-in > .sta { margin-bottom: 0; }
.hero h1 { max-width: 12.5em; font-size: clamp(2.6rem, 1.2rem + 6vw, 6.4rem); }
.hero .lede { max-width: 31em; font-size: clamp(1.2rem, 1.06rem + .6vw, 1.5rem); line-height: 1.5; }
.hero .sub { margin-top: 1rem; color: var(--ink-2); max-width: 52ch; }
.bench { position: relative; justify-self: start; width: clamp(9rem, 6rem + 12vw, 17rem); aspect-ratio: 1; }
.bench .mark { position: absolute; inset: 20%; }
.bench .mark img { width: 100%; height: auto; }
.bench-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pen); overflow: visible; }
.bench figcaption { position: absolute; left: 88%; top: 88%; width: 13rem; }

/* STA 1: Listen. Translate. Build. on gold */
.method-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.stamp {
  display: inline-block; padding: .55rem .85rem; border: 2px solid var(--ink); border-radius: 3px;
  font: 600 .8125rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.method-head p:not(.stamp) { max-width: 40ch; font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem); }
.rim { display: grid; gap: 0 3rem; margin-top: 2.25rem; list-style: none; padding: 0; }
.rim > li { padding-block: 1.4rem 1.6rem; border-top: 2px solid var(--ink); }
.rim h3 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); line-height: 1; letter-spacing: -.03em; }
.rim p { margin-top: .9rem; max-width: 32ch; }
.method-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; margin-top: 1.5rem; }
.method-foot a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* STA 2: where you can start, on forest. Three ways in, as ruled rows. */
.ways-head { max-width: 16ch; }
.ways { list-style: none; padding: 0; margin-top: clamp(2rem, 5vw, 3.25rem); border-bottom: 1px solid var(--rule); counter-reset: way; }
.ways > li {
  counter-increment: way; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem 1rem;
  padding-block: 1.5rem 1.7rem; border-top: 1px solid var(--rule);
}
.ways > li::before { content: counter(way); grid-row: span 2; font: 600 1.6rem/1.1 var(--serif); color: var(--ink-2); }
.ways h3 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.12; letter-spacing: -.015em; }
.ways p { color: var(--ink-2); max-width: 52ch; }
.ways-foot { margin-top: 1.6rem; font: 600 1.05rem/1.4 var(--sans); }

/* STA 3: what a working system is made of */
.sys-head { display: grid; gap: 1.2rem 4rem; }
.sys-head h2 { max-width: 14ch; }
.sys-head p { max-width: 46ch; font-size: clamp(1.1rem, 1.02rem + .35vw, 1.25rem); }
.mix { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.mix-bar { display: grid; grid-template-columns: 6fr 3fr 1fr; gap: 5px; height: clamp(3rem, 2rem + 3vw, 4.75rem); }
.mix-bar span { border-radius: 2px; transform-origin: left center; }
.mix-bar .p1 { background: var(--mix-1); }
.mix-bar .p2 { background: var(--pen); }
.mix-bar .p3 { background: var(--gold-light); }
.mix-key { display: grid; gap: 1.5rem 2.5rem; list-style: none; padding: 0; margin-top: 1.75rem; }
.mix-key li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .15rem .85rem; align-items: start; }
.mix-key li::before { content: ""; grid-row: span 2; width: 1.1rem; height: 1.1rem; margin-top: .3rem; border-radius: 2px; }
.mix-key .k1::before { background: var(--mix-1); }
.mix-key .k2::before { background: var(--pen); }
.mix-key .k3::before { background: var(--gold-light); }
/* At least 19px, so the gold "AI" (4.0:1 on cream) counts as large text and passes contrast on phones */
.mix-key h3 { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3rem); }
.mix-key p { color: var(--ink-2); max-width: 36ch; }
.mix figcaption { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .9375rem; max-width: 70ch; }

/* STA 4: working together, on stone, with the shared record as a sheet on the desk */
.meet-grid { display: grid; gap: 3rem 4rem; }
.meet-grid > .sta { margin-bottom: -1.6rem; }
.meet-text > * + * { margin-top: 1.15rem; }
.meet-text h2 { max-width: 12ch; margin-bottom: .4rem; }
.meet-text p { max-width: 48ch; }
.record {
  /* the sheet follows the page's own theme, not the stone block's */
  --ink: light-dark(#3B3832, #EDE7DC); --ink-2: light-dark(#6B655B, #B5AC9E);
  --rule: light-dark(rgba(59, 56, 50, .16), rgba(237, 231, 220, .13));
  --pen: light-dark(#2671A6, #7FB2D8); --label: light-dark(#6B655B, #C9A263);
  justify-self: start; width: min(100%, 26rem); padding: 1.4rem 1.5rem 1.2rem;
  background-color: light-dark(#FFFDF9, #1D1B18); background-image: var(--grid);
  color: var(--ink); border-radius: 3px; transform: rotate(.8deg);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}
.record-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--ink); }
.record-name { font: 600 1.15rem/1.2 var(--serif); }
.record-list { list-style: none; padding: 0; }
.record-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding-block: .75rem; border-bottom: 1px solid var(--rule); }
.record-list li:last-child { border-bottom: 0; }
.record-list .n { font: 600 .8125rem/1.6 var(--sans); letter-spacing: .08em; color: var(--pen); }
.record-list .t { font-weight: 600; line-height: 1.35; }
.record-list .note { display: block; margin-top: .15rem; font: 600 .875rem/1.35 var(--sans); color: var(--pen); }

/* The working client page in a phone, from round 2. Not on any page for now; kept for when
   the client pages are live and can be shown again. */
.phone-wrap { justify-self: center; width: min(100%, 21.5rem); }
.phone {
  position: relative; padding: .7rem; border-radius: 2.4rem;
  background: #0F0E0C; border: 1px solid rgba(237, 231, 220, .16);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55), 0 0 0 7px #24211D;
}
.screen {
  /* the client pages' own palette (client-pages.md), whatever the site theme */
  --c-ground: #1A2118; --c-card: #212A1F; --c-field: #161C15; --c-ink: #E2DED5; --c-ink-2: #A8A49A;
  --c-rule: rgba(226, 222, 213, .14); --c-edge: rgba(226, 222, 213, .3); --c-label: var(--gold-light);
  --c-amber-ink: #E9BC7E; --c-amber-bg: #2A2517; --c-amber-rule: #7A5E2A;
  color-scheme: dark;
  position: relative; height: 34rem; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 1.8rem; background: var(--c-ground); color: var(--c-ink);
  padding: 2.4rem 1rem 0; font-size: .9375rem; line-height: 1.5; scrollbar-width: none;
}
.screen:focus-visible { outline: 2px solid #7FB2D8; outline-offset: 4px; }
.screen .disc { fill: var(--gold-light); }
.notch { position: absolute; top: 1.15rem; left: 50%; z-index: 2; width: 5.5rem; height: 1.1rem; transform: translateX(-50%); border-radius: 1rem; background: #0F0E0C; }
.demo-mast { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--c-rule); }
.screen .label { color: var(--c-label); font-size: .65rem; }
.demo-title { margin-top: .4rem; font: 600 1.2rem/1.2 var(--serif); color: var(--c-ink); }
.demo-prep { margin-top: .45rem; font-size: .8125rem; }
.demo-mark { flex: none; }
.demo-intro { margin-top: .9rem; font-size: .875rem; color: var(--c-ink-2); }
.demo-findings { list-style: none; padding: 0; margin-top: .9rem; display: grid; gap: .7rem; }
.finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; padding: .85rem .85rem .95rem; background: var(--c-card); border: 1px solid var(--c-rule); border-radius: 3px; }
.finding .n { font: 600 1rem/1.5 var(--serif); color: var(--c-ink-2); }
.src { margin-top: .3rem; font-size: .75rem; color: var(--c-ink-2); }
.respond { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.choice {
  min-height: 44px; padding: .45rem .8rem; background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-edge); border-radius: 3px; font: 600 .8125rem/1.2 var(--sans); cursor: pointer;
  transition: background-color .15s cubic-bezier(.25, 1, .5, 1), border-color .15s cubic-bezier(.25, 1, .5, 1);
}
.choice:hover { border-color: var(--c-ink-2); }
.choice:focus-visible { outline: 2px solid #7FB2D8; outline-offset: 2px; }
.choice[data-v="right"][aria-pressed="true"] { background: #2D5A3D; border-color: #4F7D5E; color: #FAF7F2; }
.choice[data-v="off"][aria-pressed="true"] { background: var(--c-amber-bg); border-color: var(--c-amber-rule); color: var(--c-amber-ink); }
.note { margin-top: .75rem; }
.note label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .8125rem; }
.note textarea {
  display: block; width: 100%; min-height: 4.5rem; padding: .6rem .7rem;
  background: var(--c-field); color: var(--c-ink); border: 1px solid var(--c-edge); border-radius: 3px;
  font: 400 1rem/1.45 var(--sans); resize: vertical;
}
.note textarea:focus-visible { outline: 2px solid #7FB2D8; outline-offset: 1px; }
.demo-save {
  position: sticky; bottom: -1px; display: flex; align-items: center; gap: .5rem;
  margin: 1rem -1rem 0; padding: .7rem 1rem .9rem; background: var(--c-ground); border-top: 1px solid var(--c-rule);
  font-size: .8125rem;
}
.demo-save .dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: #4F7D5E; }
.demo-save[data-s="saving"] .dot { background: var(--c-ink-2); }

/* STA 5: who it's for */
.who { display: grid; gap: 2rem 4rem; }
.roles { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; list-style: none; padding: 0; margin-top: 1.75rem; }
.roles li {
  padding: .45rem 1.15rem .5rem;
  border: 2px solid var(--pen); border-radius: 50%;
  font: 600 clamp(1rem, .96rem + .25vw, 1.15rem)/1.2 var(--serif); color: var(--ink);
}
.roles li:nth-child(1) { transform: rotate(-2deg); }
.roles li:nth-child(2) { transform: rotate(1.5deg); }
.roles li:nth-child(3) { transform: rotate(-1deg); }
.who-body > * + * { margin-top: 1.1rem; }
.who-body p { max-width: 60ch; }
.who-body .first { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.25rem); }

/* STA 6: past work, as two field-book pages */
.cases { display: grid; gap: 1.75rem; margin-top: 2rem; }
.case {
  position: relative; padding: 1.5rem 1.5rem 1.6rem;
  background-color: var(--sheet); background-image: var(--grid);
  border: 1px solid var(--rule); border-radius: 3px;
}
.case .note-ink { margin-bottom: .6rem; }
.case .meta { margin-top: .3rem; font-size: .9375rem; color: var(--ink-2); }
.case .meta + p { margin-top: .8rem; }
.more-link { margin-top: 1.5rem; }
.more-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* STA 7 and every inner page's close: on forest */
.close { display: grid; gap: 2rem 4rem; align-items: end; }
.close h2 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem); line-height: 1; max-width: 11ch; }
.close .body > * + * { margin-top: 1.1rem; }
.close .body p { max-width: 46ch; }
.close .actions { margin-top: 1.6rem; }
.arrow { display: none; color: var(--pen); }

/* Inner pages */
.page-top { border-bottom: 1.5px solid var(--pen-soft); }
.page-head { max-width: 50rem; padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); }
.page-head > .sta + h1 { margin-top: 1.2rem; }
.page-head > h1 + * { margin-top: 1.5rem; }
.page-head > * + * { margin-top: 1rem; }
.page-head h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.6rem); }
.lede { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.45rem); line-height: 1.5; max-width: 32em; }
.sub { color: var(--ink-2); max-width: 58ch; }
.note-small { font-size: .9375rem; color: var(--ink-2); max-width: 60ch; }

.sec + .sec { border-top: 1px solid var(--rule); }
.sec-in { display: grid; gap: .9rem 3rem; padding-block: clamp(3rem, 7vw, 5rem); }
.sec-in > .label::before {
  content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .55rem; vertical-align: -.05em;
  border: 2px solid var(--pen); border-radius: 50%;
}
.sec-body { min-width: 0; }
.sec-body > * + * { margin-top: 1.1rem; }
.sec-body > h2 + * { margin-top: 1.3rem; }
.sec-body > p + h3, .sec-body > dl + h3, .sec-body > ul + h3 { margin-top: 2.1rem; }
.sec-body > h3 + p { margin-top: .4rem; }
.sec-body h2 { max-width: 22ch; }
.sec-body p, .sec-body li, .sec-body dd { max-width: 64ch; }
.close-in { display: grid; gap: 2rem 4rem; padding-block: clamp(3.5rem, 9vw, 6.5rem); align-items: end; }
.close-in h2 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.8rem); line-height: 1.02; max-width: 13ch; }
.close-in .body > * + * { margin-top: 1.1rem; }
.close-in p { max-width: 48ch; }

.facts { display: flex; flex-wrap: wrap; gap: .75rem 2.75rem; padding-block: .95rem; border-block: 1.5px solid var(--pen-soft); }
.facts dt { font: 600 .75rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--pen); }
.facts dd { margin: .15rem 0 0; }

.example {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem;
  max-width: 40rem; padding: 1.15rem 1.35rem 1.3rem;
  background: var(--sheet); border: 1.5px solid var(--pen-soft); border-radius: 3px;
}
.example figcaption { grid-column: 1 / -1; margin-bottom: .25rem; }
.example-n { font: 600 1.25rem/1.4 var(--serif); color: var(--pen); }
.example-src { margin-top: .35rem; font-size: .875rem; color: var(--ink-2); }
.example-ask { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule); font-size: .9375rem; color: var(--ink-2); }
.example-ask b { color: var(--ink); }

/* How we work, step 2: a page from an example plan, on field-book paper */
.plan {
  max-width: 44rem; padding: clamp(1.2rem, 3.5vw, 1.9rem);
  background-color: var(--sheet); background-image: var(--grid);
  border: 1.5px solid var(--pen-soft); border-radius: 3px;
}
.sec-body .plan p, .sec-body .plan dd { max-width: none; }
.plan-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--ink); }
.plan-note { font-size: .875rem; color: var(--ink-2); }
.plan-finding { padding-block: 1rem 1.2rem; }
.plan-k { font: 600 .75rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pen); }
.plan-text { margin-top: .45rem; font: 600 clamp(1.1rem, 1.04rem + .3vw, 1.25rem)/1.4 var(--serif); }
.plan-src { margin-top: .5rem; font-size: .875rem; color: var(--ink-2); }
.plan-cost { margin-top: .75rem; padding: .55rem .8rem; background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-rule); border-radius: 3px; font-size: .9375rem; }
.plan-cost b { color: inherit; }
.plan-k2 { padding-top: 1rem; border-top: 1px solid var(--rule); }
.plan-layers { margin-top: .6rem; }
.plan-layers > div { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .1rem .75rem; padding-block: .7rem; border-bottom: 1px solid var(--rule); }
.plan-layers > div::before { content: ""; grid-row: span 2; width: 1rem; height: 1rem; margin-top: .25rem; border-radius: 2px; }
.plan-layers .l1::before { background: var(--mix-1); }
.plan-layers .l2::before { background: var(--pen); }
.plan-layers .l3::before { background: var(--gold-light); }
.plan-layers .l4::before { border: 2px solid var(--ink); }
.plan-layers dt { font-weight: 600; }
.plan-layers dd { margin: 0; color: var(--ink-2); }
.plan-done { margin-top: 1rem; font-size: .9375rem; }
@media (min-width: 40rem) {
  .plan-layers > div { grid-template-columns: 1rem 9.5rem minmax(0, 1fr); }
  .plan-layers > div::before { grid-row: auto; }
}

.list { padding-left: 1.2em; }
.list li + li { margin-top: .55rem; }
.list li::marker { color: var(--pen); }
.list-plain { list-style: none; padding: 0; }
.list-plain li + li { margin-top: .4rem; }
.list-plain a { display: inline-flex; align-items: center; min-height: 44px; }
.principles, .qa { border-bottom: 1px solid var(--rule); }
.principles > div, .qa > div { border-top: 1px solid var(--rule); padding-block: 1.05rem 1.2rem; }
.principles dt { font: 600 1.15rem/1.35 var(--serif); }
.principles dd { margin: .3rem 0 0; }
.qa h3 { font-size: 1.15rem; }
.qa p { margin-top: .3rem; }
.prose { max-width: 64ch; padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.prose h2 { font-size: clamp(1.3rem, 1.18rem + .45vw, 1.55rem); letter-spacing: 0; }
.prose h2:not(:first-child) { margin-top: 2.25rem; }
.prose h2 + p { margin-top: .5rem; }
.prose p + p { margin-top: 1rem; }
.prose h3 { font-size: clamp(1.1rem, 1.05rem + .25vw, 1.2rem); margin-top: 1.6rem; }
.prose h3 + * { margin-top: .5rem; }
.prose .list { margin-top: .75rem; }
.prose .list + p, .prose dl + p { margin-top: 1rem; }
.callout { padding: 1rem 1.2rem; background: var(--sheet); border: 1.5px solid var(--pen-soft); border-radius: 3px; }
.cookie-list { border-bottom: 1px solid var(--rule); }
.cookie-list > div { padding-block: .75rem .85rem; border-top: 1px solid var(--rule); }
.cookie-list dt { font-weight: 600; }
.cookie-list dd { margin: .2rem 0 0; color: var(--ink-2); font-size: .9375rem; }

/* The cookie banner: fixed to the bottom, never blocking the page. Accept and decline look the same.
   It never grows past the screen (its choices scroll inside it), and while it shows, site.js pads the
   bottom of the page by its height so the footer can scroll clear of it. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); color: var(--ink);
  border-top: 1.5px solid var(--pen-soft);
  box-shadow: 0 -12px 32px -18px rgba(0, 0, 0, .45);
}
.consent[hidden] { display: none; }
.consent-in { max-width: 76rem; margin-inline: auto; padding: 1rem var(--pad) 1.1rem; display: grid; gap: .6rem 2rem; }
.consent-title { font: 600 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.consent-title:focus { outline: none; }
.consent-title:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.consent-text { font-size: .9375rem; max-width: 70ch; }
.consent-choose { display: grid; gap: .5rem; }
.consent-choose[hidden] { display: none; }
.consent-choose label {
  display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .8rem;
  background: var(--ground); border: 1.5px solid var(--edge); border-radius: 3px; cursor: pointer; font-size: .9375rem;
}
.consent-choose input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: #2D5A3D; }
.consent-note { font-size: .875rem; color: var(--ink-2); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.consent-actions .button { min-height: 44px; padding: .6rem 1.1rem; font-size: 1rem; }
.consent-more {
  min-height: 44px; padding: .6rem .4rem; background: transparent; border: 0; cursor: pointer;
  color: var(--link); font: 600 1rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: .18em;
}
@media (min-width: 60rem) {
  .consent-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .consent-title, .consent-choose { grid-column: 1 / -1; }
}

/* Sign-in */
.signin { display: grid; gap: 2.5rem 4rem; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.form { max-width: 26rem; padding: clamp(1.25rem, 4vw, 2rem); background: var(--sheet); border: 1.5px solid var(--pen-soft); border-radius: 3px; }
.form > * + * { margin-top: 1.25rem; }
.field label { display: block; font-weight: 600; margin-bottom: .45rem; }
.field input {
  display: block; width: 100%; min-height: 52px; padding: .7rem .85rem;
  background: var(--ground); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 3px;
  font: 400 1.125rem/1.3 var(--sans);
}
.field textarea {
  display: block; width: 100%; min-height: 9rem; padding: .7rem .85rem; resize: vertical;
  background: var(--ground); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 3px;
  font: 400 1.0625rem/1.5 var(--sans);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px; border-color: var(--pen); }
.field .opt { font-weight: 400; color: var(--ink-2); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-grid { display: grid; gap: 2.5rem 4rem; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.contact-grid .form { max-width: 38rem; }
.field select {
  display: block; width: 100%; min-height: 52px; padding: .7rem .85rem;
  background: var(--ground); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 3px;
  font: 400 1.0625rem/1.3 var(--sans);
}
.field select:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px; border-color: var(--pen); }
.intake .group { padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.intake .group > * + * { margin-top: 1.2rem; }
.group-title { font-size: clamp(1.2rem, 1.12rem + .35vw, 1.4rem); }
.choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: .5rem; font-weight: 600; }
.choices legend .opt { display: block; font-size: .9375rem; }
.choices label {
  display: flex; align-items: flex-start; gap: .65rem; min-height: 48px; padding: .7rem .85rem; margin-bottom: 0;
  background: var(--ground); border: 1.5px solid var(--edge); border-radius: 3px; cursor: pointer; font-weight: 400;
  transition: border-color .15s cubic-bezier(.25, 1, .5, 1);
}
.choices label + label { margin-top: .5rem; }
.choices label:hover { border-color: var(--ink-2); }
.choices label:has(input:checked) { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.choices input { flex: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: .2rem 0 0; padding: 0; border: 0; accent-color: #2D5A3D; }
.choices.row, .choices.grid { display: grid; gap: .5rem; }
.choices.row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.choices.row label + label, .choices.grid label + label { margin-top: 0; }
.contact-side { align-self: start; }
@media (min-width: 60rem) { .contact-side { position: sticky; top: 7rem; } }
.form .fine { font-size: .9375rem; color: var(--ink-2); }
.field .hint { margin-top: .45rem; font-size: .9375rem; color: var(--ink-2); }
.form .button { width: 100%; }
/* The bot check and its note take no room until they have something to show */
.form-end > * + * { margin-top: 1.25rem; }
.form-end > .form-wait:empty { margin-top: 0; }

/* The contact form, a few questions at a time (2026-09-19). site.js adds the steps class, the line of
   stations along the top and the Back and Next buttons; without JavaScript the form stays one list.
   The consent line and Send wait for the last step. The bot check is shrunk out of sight, not
   removed, so it keeps working and shows on the last step if it needs a tick. */
.steps { overflow-x: clip; }
/* Safari before 16 has no overflow: clip, so there the page itself stops sideways scrolling while the
   motion layer and the form's steps slide things in. */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}
.steps .group { padding-top: 0; border-top: 0; }
.steps .group[hidden] { display: none; }
.step-rail { display: flex; align-items: center; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.step-count {
  flex: none; margin: 0;
  font: 600 .75rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--pen); font-variant-numeric: tabular-nums;
}
.step-track { position: relative; flex: 1; height: 14px; margin-inline: 7px; }
.step-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px dashed var(--pen-soft); }
.step-ink { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--pen); transform-origin: 0 50%; transform: scaleX(0); }
.step-dot {
  position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px;
  background: var(--sheet); border: 2px solid var(--pen); border-radius: 50%;
}
.step-dot.done, .step-dot.here { background: var(--pen); }
.step-dot.here { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--pen); }
.step-nav { display: flex; gap: .75rem; }
.form .step-nav .button { flex: 1; width: auto; }
.step-back {
  min-height: 52px; padding: .85rem 1.25rem;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 3px;
  font: 600 1.0625rem/1.2 var(--sans); cursor: pointer;
}
.step-back:hover { border-color: var(--ink-2); }
.step-back[hidden], .steps.at-last .step-next, .steps:not(.at-last) .step-nav > [type="submit"],
.steps:not(.at-last) .form-end > :not(.step-nav):not(.cf-turnstile) { display: none; }
.steps:not(.at-last) .form-end > .cf-turnstile { height: 0; margin: 0; overflow: hidden; visibility: hidden; }
.signin-main { max-width: 26rem; }
.or { display: flex; align-items: center; gap: .9rem; margin-block: 1.4rem; color: var(--ink-2); font-size: .9375rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.alt-ways { display: grid; gap: .6rem; }
.alt-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 52px;
  padding: .7rem 1rem; background: var(--sheet); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 3px; cursor: pointer;
  font: 600 1rem/1.25 var(--sans);
  transition: border-color .15s cubic-bezier(.25, 1, .5, 1);
}
.alt-btn:hover { border-color: var(--ink-2); }
.alt-note { font-weight: 400; font-size: .8125rem; color: var(--ink-2); }
.alt-email summary {
  display: flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer;
  color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .18em;
}
.alt-email summary::-webkit-details-marker { display: none; }
.alt-email form > * + * { margin-top: .9rem; }
.alt-email form { margin-top: .5rem; }
.signin-side > * + * { margin-top: 1.1rem; }
.signin-side h2 { font-size: clamp(1.3rem, 1.18rem + .45vw, 1.55rem); letter-spacing: 0; }
.signin-side p { max-width: 44ch; }
.signin-side h2:not(:first-child) { margin-top: 2rem; }

/* Footer */
.site-foot {
  --ink: #FAF7F2; --ink-2: #D6CFC2; --disc: var(--gold-light); --link: #FAF7F2; --pen: #7FB2D8;
  background: var(--foot); color: var(--ink-2);
}
.foot-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 1.25rem 2rem; padding-block: 2.25rem 2.75rem; font-size: .9375rem;
}
.foot-brand { display: flex; align-items: center; gap: .9rem; }
.foot-brand p:first-child { color: var(--ink); }
.foot-copy { font-size: .875rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; padding: 0; margin: 0; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.foot-legal { padding-block: 0 1.75rem; margin-top: -1.25rem; font-size: .875rem; }
.foot-legal .foot-nav a { min-height: 44px; }
.foot-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: transparent; border: 0;
  color: var(--ink-2); font: inherit; cursor: pointer;
}
.foot-button:hover { color: var(--ink); text-decoration: underline; }
.foot-button[hidden] { display: none; }

/* First-screen entrance */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
.hero .sta, .hero h1, .hero .lede, .hero .sub, .hero .actions, .bench { animation: rise .8s cubic-bezier(.22, 1, .36, 1) both; }
.hero h1 { animation-delay: .06s; }
.hero .lede { animation-delay: .14s; }
.hero .sub { animation-delay: .2s; }
.hero .actions { animation-delay: .26s; }
.bench { animation-delay: .3s; }
.bench-lines circle.ring { stroke-dasharray: 520; animation: draw 1.4s .45s cubic-bezier(.22, 1, .36, 1) both; }

/* Tablets and up */
@media (min-width: 48rem) {
  .mix-key { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sys-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

/* Wide screens */
@media (min-width: 60rem) {
  .nav { order: 0; flex: 0 1 auto; }
  .nav .client { display: flex; align-items: center; gap: 1.25rem; }
  .nav .client::before { content: ""; width: 1px; height: 1.4rem; background: var(--rule); }
  .nav .tools { margin-left: .25rem; }
  .head-in { padding-block: .9rem; }
  .brand { padding-bottom: 0; }

  .st-in { padding-left: 6.5rem; }
  .st-in::before {
    content: ""; position: absolute; left: 1.15rem; top: 0; bottom: 0;
    border-left: 2px dashed var(--pen-soft);
  }
  .hero .st-in::before { top: clamp(2.5rem, 6vw, 5rem); }
  .st-in > .sta { position: relative; }
  .st-in > .sta::before {
    content: ""; position: absolute; left: calc(-6.5rem + 1.15rem - .55rem + 1px); top: .1rem;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--ground); border: 2px solid var(--pen);
  }
  .hero .st-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 6vw, 6rem); align-items: center; row-gap: 2rem; }
  .hero .sta, .hero h1 { grid-column: 1 / -1; }
  .bench { margin: -1rem 9rem 0 0; }
  .rim { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meet-grid { grid-template-columns: minmax(0, 1fr) 26rem; align-items: center; }
  .meet-grid > .sta { grid-column: 1 / -1; margin-bottom: -1.5rem; }
  .ways > li { grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; column-gap: 2.5rem; }
  .ways > li::before { grid-row: auto; }
  .who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .case:nth-child(1) { transform: rotate(-.6deg); }
  .case:nth-child(2) { transform: rotate(.5deg); margin-top: 1.5rem; }
  .close { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .arrow { display: block; width: 7rem; height: 4.5rem; margin: 0 0 -.5rem -1rem; }
  .sec-in { grid-template-columns: 13rem minmax(0, 1fr); }
  .sec-in > .label { padding-top: .75rem; }
  .close-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .signin { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; }
  .contact-grid { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); align-items: start; }
}
/* Just past the Menu button's width, the links sit a little closer so the header stays one row
   ("Past work", 2026-09-22, is the longest label) */
@media (min-width: 60rem) and (max-width: 68rem) {
  .nav ul, .nav .client { column-gap: 1rem; }
}
@media (min-width: 60rem) and (max-width: 75rem) {
  .bench { margin-right: 0; }
  .bench figcaption { display: none; }
}
@media (max-width: 59.99rem) {
  .bench figcaption { display: none; }
}

@media print {
  :root, :root[data-theme] { color-scheme: light; }
  .site-head { position: static; box-shadow: none; border-bottom-color: #3B3832; }
  .theme-toggle, .menu-toggle, .nav, .actions, .phone-wrap, .skip, .consent, .foot-button { display: none !important; }
  .on-dark { display: none !important; }
  .on-light { display: block !important; }
  .st-in::before, .st-in > .sta::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Motion layer, 2026-09-19: "the traverse". The page is surveyed as it is read: a measuring
   wheel rolls down the survey line and inks it, each station is shot as it is reached, a tape
   under the header measures the whole page, and each band arrives its own way. Classes and the
   few extra elements come from the motion block at the end of site.js (Home, How we work, Work,
   About). Everything that moves is inside prefers-reduced-motion: no-preference and screen; with
   reduced motion or without JavaScript, nothing is hidden and nothing moves.
   2026-09-21 (Bryson: a lot going on when he scrolled fast): turned down a notch, with about half
   the travel and spin and no entrance waiting much over half a second, and a reading pace in
   site.js: while the reader skims, whatever arrives just fades in (.nb-soft). */

.nb-polish #main .button:focus-visible { background: var(--button-hover); }
.nb-polish .site-head .theme-toggle:focus-visible { color: var(--ink); border-color: var(--ink-2); }
.nb-polish .site-head .menu-toggle:focus-visible { border-color: var(--ink-2); }
.nb-polish .site-head .nav a:focus-visible { color: var(--pen); }
.nb-polish #main a:not(.button):focus-visible,
.nb-polish .site-foot a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }

.nb-tape, .nb-ink, .nb-rod, .nb-sight { display: none; }

@media screen and (prefers-reduced-motion: no-preference) {

  /* Nothing moves sideways off the page, whatever an entrance does. */
  .nb-motion #main > * { overflow-x: clip; }

  /* ---- Waiting to be surveyed: hidden only once the script has started ---- */
  .nb-motion .nb-reveal:not(.nb-seen) { opacity: 0; }

  /* ---- Default arrival: a firm rise, list items one after another ---- */
  .nb-motion .nb-reveal.nb-seen:not(.nb-static) {
    animation: nb-rise 750ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--nb-i, 0) * 90ms);
  }
  .nb-motion .nb-reveal.nb-seen:focus-within { animation: none; }
  @keyframes nb-rise { from { opacity: 0; translate: 0 24px; } }

  /* ---- Skimming: whatever arrives while the reader scrolls fast just fades in ---- */
  .nb-motion .nb-reveal.nb-soft,
  .nb-motion .nb-band.nb-soft::before { animation: nb-fade 250ms linear backwards; }
  .nb-motion .nb-reveal.nb-soft:focus-within { animation: none; }
  @keyframes nb-fade { from { opacity: 0; } }

  /* ---- Headings are written on, left to right ---- */
  .nb-motion h2.nb-reveal.nb-seen:not(.nb-static),
  .nb-motion .nb-reveal.nb-seen:not(.nb-static) h2:not(.stamp) {
    animation: nb-write 1000ms cubic-bezier(.6, 0, .2, 1) backwards;
  }
  @keyframes nb-write {
    from { clip-path: inset(-.3em 100% -.4em -.3em); }
    to { clip-path: inset(-.3em -.3em -.4em -.3em); }
  }
  @keyframes nb-sweep {
    from { clip-path: inset(-12% 100% -12% -2%); }
    to { clip-path: inset(-12% -2% -12% -2%); }
  }
  @keyframes nb-pop { from { opacity: 0; scale: .6; } }

  /* ---- First screen: the benchmark is set, the needle hunts for north, the highlight is inked ---- */
  .nb-motion .hero .bench .mark.nb-pointer {
    animation: nb-hunt 2100ms linear 450ms backwards;
    transform-origin: 50% 50%;
  }
  @keyframes nb-hunt {
    0% { transform: rotate(-80deg); animation-timing-function: cubic-bezier(.3, 0, .45, 1); }
    30% { transform: rotate(34deg); animation-timing-function: ease-in-out; }
    50% { transform: rotate(-17deg); animation-timing-function: ease-in-out; }
    66% { transform: rotate(8deg); animation-timing-function: ease-in-out; }
    82% { transform: rotate(-3deg); animation-timing-function: ease-in-out; }
    100% { transform: rotate(0deg); }
  }
  .nb-motion .hero .bench-lines path:nth-of-type(1) {
    transform-box: view-box; transform-origin: 50% 50%;
    animation: nb-ticks 800ms cubic-bezier(.3, 1.5, .5, 1) 1100ms backwards;
  }
  @keyframes nb-ticks { from { opacity: 0; scale: .55; } }
  /* The dotted outer ring turns with the scroll, like a dial being read (after Grok's orbit crawl) */
  .nb-motion .hero .bench-lines circle:nth-of-type(2) { transform-box: view-box; transform-origin: 50% 50%; }
  .nb-motion .hero .bench-lines path:nth-of-type(2) {
    stroke-dasharray: 90;
    animation: nb-lead 700ms cubic-bezier(.65, 0, .35, 1) 1700ms backwards;
  }
  @keyframes nb-lead { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
  .nb-motion .hero .hl {
    animation: nb-marker 750ms cubic-bezier(.65, 0, .35, 1) 800ms backwards;
  }
  @keyframes nb-marker { from { text-decoration-thickness: 0; text-decoration-color: transparent; } }

  /* Inner pages: the title is written on and the page's station flagged */
  .nb-motion .page-head h1 { animation: nb-write 1100ms cubic-bezier(.6, 0, .2, 1) 120ms backwards; }
  .nb-motion .page-head .lede { animation: nb-rise 850ms cubic-bezier(.16, 1, .3, 1) 450ms backwards; }
  .nb-motion .page-head .sta span { animation: nb-flag 900ms cubic-bezier(.3, 1.5, .5, 1) 900ms backwards; }

  /* ---- Stations are shot as the traverse reaches them ---- */
  .nb-motion .st-in.nb-shot:not(.nb-quiet) > .sta > span {
    animation: nb-flag 900ms cubic-bezier(.3, 1.5, .5, 1) backwards;
  }
  @keyframes nb-flag {
    0% { background-color: var(--pen); color: var(--ground); scale: 1.2; }
    55% { background-color: var(--pen); color: var(--ground); scale: 1; }
  }
  /* Inner pages: each section's ring is filled as it is reached */
  .nb-motion .sec-in > .label.nb-seen::before { background-color: var(--pen); }
  .nb-motion .sec-in > .label.nb-seen:not(.nb-static)::before {
    animation: nb-dot 800ms cubic-bezier(.3, 1.6, .5, 1) 150ms backwards;
  }
  @keyframes nb-dot { from { scale: 1.8; background-color: transparent; } }

  /* ---- Gold band: the stamp slams down, the band jolts, the three words are pressed in ---- */
  .nb-motion .stamp { position: relative; }
  .nb-motion .nb-reveal.nb-seen:not(.nb-static) .stamp {
    animation: nb-slam 620ms linear 180ms backwards;
  }
  @keyframes nb-slam {
    0% { opacity: 0; scale: 1.6; rotate: -6deg; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    52% { opacity: 1; scale: .95; rotate: .5deg; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
    72% { scale: 1.02; rotate: -.2deg; animation-timing-function: ease-in-out; }
    100% { scale: 1; rotate: 0deg; }
  }
  .nb-motion .nb-reveal.nb-seen:not(.nb-static) .stamp::after {
    content: ""; position: absolute; inset: -5px; border: 2px solid currentColor; border-radius: 4px;
    opacity: 0; pointer-events: none;
    animation: nb-splat 650ms cubic-bezier(.2, .8, .3, 1) 500ms;
  }
  @keyframes nb-splat { from { opacity: .5; scale: 1; } to { opacity: 0; scale: 1.25; } }
  .nb-motion .block-gold:has(.method-head.nb-seen:not(.nb-static)) > .wrap {
    animation: nb-jolt 420ms cubic-bezier(.3, .7, .4, 1) 500ms;
  }
  @keyframes nb-jolt { 25% { translate: 0 3px; } 55% { translate: 0 -1px; } }
  .nb-motion .rim > li.nb-reveal.nb-seen:not(.nb-static) {
    animation: nb-sweep 700ms cubic-bezier(.65, 0, .35, 1) backwards;
    animation-delay: calc(150ms + var(--nb-i, 0) * 120ms);
  }
  .nb-motion .rim > li.nb-reveal.nb-seen:not(.nb-static) h3 {
    transform-origin: 0 100%;
    animation: nb-press 560ms cubic-bezier(.3, 1.5, .5, 1) backwards;
    animation-delay: calc(250ms + var(--nb-i, 0) * 120ms);
  }
  @keyframes nb-press { from { opacity: 0; scale: 1.25; } }

  /* ---- Forest band: the three ways in are dealt onto the table, their numbers stamped ---- */
  .nb-motion .ways > li.nb-reveal.nb-seen:not(.nb-static) {
    animation: nb-deal 850ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--nb-i, 0) * 150ms);
  }
  @keyframes nb-deal { from { opacity: 0; translate: 32px 12px; rotate: 1.5deg; } }
  .nb-motion .ways > li.nb-reveal.nb-seen:not(.nb-static)::before {
    animation: nb-pop 520ms cubic-bezier(.3, 1.6, .5, 1) backwards;
    animation-delay: calc(300ms + var(--nb-i, 0) * 100ms);
  }

  /* ---- The 60/30/10 bar is measured out, one part after another ---- */
  .nb-motion .mix-bar.nb-seen:not(.nb-static) span {
    animation: nb-measure 450ms cubic-bezier(.65, 0, .35, 1) backwards;
  }
  .nb-motion .mix-bar.nb-seen:not(.nb-static) .p2 { animation-delay: 350ms; animation-duration: 300ms; }
  .nb-motion .mix-bar.nb-seen:not(.nb-static) .p3 { animation-delay: 550ms; animation-duration: 250ms; }
  @keyframes nb-measure { from { scale: 0 1; } }

  /* ---- Stone band: the shared record slides onto the desk and is filled in line by line ---- */
  .nb-motion .record.nb-reveal.nb-seen:not(.nb-static) {
    animation: nb-sheet 900ms cubic-bezier(.16, 1, .3, 1) backwards;
  }
  @keyframes nb-sheet {
    from { opacity: 0; translate: 12% 48px; rotate: 4deg; box-shadow: 0 40px 50px -30px rgba(0, 0, 0, .45); }
  }
  .nb-motion .record.nb-seen:not(.nb-static) .record-head,
  .nb-motion .record.nb-seen:not(.nb-static) .record-list li {
    animation: nb-sweep 450ms cubic-bezier(.65, 0, .35, 1) backwards;
  }
  .nb-motion .record.nb-seen:not(.nb-static) .record-head { animation-delay: 250ms; }
  .nb-motion .record.nb-seen:not(.nb-static) .record-list li:nth-child(1) { animation-delay: 300ms; }
  .nb-motion .record.nb-seen:not(.nb-static) .record-list li:nth-child(2) { animation-delay: 350ms; }
  .nb-motion .record.nb-seen:not(.nb-static) .record-list li:nth-child(3) { animation-delay: 400ms; }
  .nb-motion .record.nb-seen:not(.nb-static) .record-list li:nth-child(4) { animation-delay: 450ms; }
  .nb-motion .record.nb-seen:not(.nb-static) .record-list li:nth-child(5) { animation-delay: 500ms; }

  /* ---- Who it's for: the three roles are circled in pen ---- */
  .nb-motion .roles > li.nb-reveal.nb-seen:not(.nb-static) {
    animation: nb-circle 700ms cubic-bezier(.3, 1.3, .5, 1) backwards;
    animation-delay: calc(var(--nb-i, 0) * 170ms);
  }
  @keyframes nb-circle { from { opacity: 0; scale: .75; rotate: -8deg; } }

  /* ---- Past work: the two field-book pages are dropped onto the desk ---- */
  .nb-motion .case.nb-reveal.nb-seen:not(.nb-static) {
    animation: nb-drop 950ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--nb-i, 0) * 200ms);
  }
  .nb-motion .case:nth-child(2) { --nb-from: 3.5deg; }
  @keyframes nb-drop { from { opacity: 0; translate: 0 60px; rotate: var(--nb-from, -3deg); } }

  /* ---- The close: the arrow is drawn to the button, and the button is stamped ---- */
  .nb-motion .nb-seen:not(.nb-static) .arrow path {
    stroke-dasharray: 130;
    animation: nb-arrow 350ms cubic-bezier(.65, 0, .35, 1) 200ms backwards;
  }
  .nb-motion .nb-seen:not(.nb-static) .arrow path + path { animation-delay: 500ms; animation-duration: 180ms; }
  @keyframes nb-arrow { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }
  .nb-motion .block-forest .nb-seen:not(.nb-static) .actions .button {
    animation: nb-pop 650ms cubic-bezier(.3, 1.6, .5, 1) 450ms backwards;
  }

  /* ---- The traverse (wide screens, Home): the wheel rolls down the line and inks it ---- */
  .nb-motion.nb-traverse .nb-ink {
    display: block; position: absolute; left: 1.15rem; top: 0; bottom: 0; width: 0;
    border-left: 2px solid var(--pen); transform-origin: 50% 0; transform: scaleY(0); pointer-events: none;
  }
  .nb-motion.nb-traverse .nb-rod {
    display: block; position: absolute; left: calc(1.15rem + 1px); top: 0; z-index: 2; width: 0; height: 0;
    color: var(--pen); pointer-events: none; opacity: 0; transition: opacity 200ms linear;
  }
  .nb-motion.nb-traverse .nb-here > .nb-rod { opacity: 1; }
  .nb-rod .nb-wheel { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; overflow: visible; }
  .nb-rod .bg { fill: var(--ground); }
  .nb-rod .nb-chain {
    position: absolute; left: 22px; top: -.7rem; padding: .1rem .4rem;
    background: var(--ground); border: 1.5px solid var(--pen); border-radius: 2px;
    font: 600 .6875rem/1.3 var(--sans); letter-spacing: .1em; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .nb-motion.nb-traverse .st-in.nb-shot > .sta::before { background-color: var(--pen); transition: background-color 250ms linear 500ms; }
  /* The instrument's sight closes onto the station and locks (after Astra's survey shots) */
  .nb-motion.nb-traverse .nb-sight {
    display: block; position: absolute; left: calc(-6.5rem + 1.15rem + 1px - 24px); top: calc(.65rem - 24px);
    width: 48px; height: 48px; overflow: visible; color: var(--pen); pointer-events: none; opacity: 0;
  }
  .nb-motion.nb-traverse .st-in.nb-shot:not(.nb-quiet) > .sta > .nb-sight {
    animation: nb-sight 1500ms cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes nb-sight {
    0% { opacity: 0; scale: 1.7; rotate: -15deg; }
    15% { opacity: 1; }
    55% { scale: 1; rotate: 0deg; }
    80% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: .9; }
  }

  /* ---- First screen: a datum line is drawn under the first station label ---- */
  .nb-motion .hero .sta, .nb-motion .page-head .sta { position: relative; }
  .nb-motion .hero .sta::after, .nb-motion .page-head .sta::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.6rem; height: 2px;
    background: var(--pen); transform-origin: 0 50%;
    animation: nb-datum 1300ms cubic-bezier(.16, 1, .3, 1) 250ms backwards;
  }
  @keyframes nb-datum { from { scale: 0 1; } }

  /* ---- The bands open as they arrive (after Astra's band entrances): the gold sheet is laid
     across with an angled edge, the forest opens from a center seam, the stone unrolls ---- */
  /* Only the band's color sheet is clipped, on a layer behind the words, so nothing the reader
     can see or reach ever sits inside a clip. */
  .nb-motion .nb-band { position: relative; isolation: isolate; background: transparent; }
  .nb-motion .nb-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground); }
  .nb-motion .block-gold.nb-band:not(.nb-open)::before { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  .nb-motion .block-forest.nb-band:not(.nb-open)::before { clip-path: inset(0 50% 0 50%); }
  .nb-motion .block-stone.nb-band:not(.nb-open)::before { clip-path: inset(0 0 100% 0); }
  .nb-motion .block-gold.nb-open:not(.nb-still)::before { animation: nb-lay 950ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .nb-motion .block-forest.nb-open:not(.nb-still)::before { animation: nb-seam 900ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .nb-motion .block-stone.nb-open:not(.nb-still)::before { animation: nb-unroll 900ms cubic-bezier(.16, 1, .3, 1) backwards; }
  @keyframes nb-lay {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    65% { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  }
  @keyframes nb-seam { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes nb-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

  /* ---- The tape under the header measures the whole page (every width) ---- */
  .nb-motion .nb-tape { display: block; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; pointer-events: none; }
  .nb-motion .site-head.open .nb-tape { display: none; }
  .nb-tape-fill { position: absolute; inset: 0; background: var(--pen); transform-origin: 0 50%; transform: scaleX(0); }
  .nb-tape-tick {
    position: absolute; top: -3px; width: 2px; height: 9px; margin-left: -1px;
    background: var(--pen-soft); transition: background-color 250ms linear;
  }
  .nb-tape-tick.nb-passed { background: var(--pen); }
  .nb-tape-read {
    position: absolute; top: 10px; left: 0; padding: .15rem .45rem;
    background: var(--ground); color: var(--pen); border: 1.5px solid var(--pen); border-radius: 2px;
    font: 600 .6875rem/1.3 var(--sans); letter-spacing: .12em; white-space: nowrap; font-variant-numeric: tabular-nums;
    opacity: 0; transition: opacity 350ms linear;
  }
  .nb-tape.nb-moving .nb-tape-read { opacity: 1; transition-duration: 120ms; }
  .nb-traverse .nb-tape-read { display: none; }

  /* ---- The contact form's steps (classes from the forms part of site.js): the ink runs to the
     next station, the station is filled as it lands, and the step's questions are walked on ---- */
  .steps .step-ink { transition: transform 650ms cubic-bezier(.65, 0, .35, 1); }
  .steps .step-dot.here { animation: nb-dot 700ms cubic-bezier(.3, 1.6, .5, 1) 350ms backwards; }
  .steps .group.nb-fwd > *, .steps .group.nb-rev > * {
    animation: nb-step 600ms cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .steps .group.nb-rev > * { --nb-step-x: -40px; }
  .steps .group > :nth-child(2) { animation-delay: 80ms; }
  .steps .group > :nth-child(3) { animation-delay: 160ms; }
  .steps .group > :nth-child(4) { animation-delay: 240ms; }
  .steps .group.nb-fwd > .group-title, .steps .group.nb-rev > .group-title {
    animation: nb-write 800ms cubic-bezier(.6, 0, .2, 1) backwards;
  }
  @keyframes nb-step { from { opacity: 0; translate: var(--nb-step-x, 40px) 0; } }
  .steps.at-last .form-end > :not(.step-nav) { animation: nb-rise 700ms cubic-bezier(.16, 1, .3, 1) 250ms backwards; }

  /* ---- Feedback you can feel: buttons lift off the page and press into it ---- */
  .nb-polish #main .button {
    transition: background-color 180ms cubic-bezier(.25, 1, .5, 1), transform 180ms cubic-bezier(.25, 1, .5, 1), box-shadow 180ms cubic-bezier(.25, 1, .5, 1);
  }
  .nb-polish #main .button:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--nb-shade, var(--pen)); transition-duration: 60ms; }
  .nb-polish .block-forest { --nb-shade: rgba(26, 33, 24, .55); }
  .nb-polish #main a,
  .nb-polish .site-head a,
  .nb-polish .site-foot a {
    transition: color 160ms cubic-bezier(.25, 1, .5, 1), text-underline-offset 160ms cubic-bezier(.25, 1, .5, 1), text-decoration-color 160ms cubic-bezier(.25, 1, .5, 1);
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .nb-polish #main .button:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--nb-shade, var(--pen)); }
  .nb-polish #main a:not(.button):hover,
  .nb-polish .site-foot a:hover { text-underline-offset: .32em; }
  /* Field-book pages and the record tilt toward the pointer, like paper picked up off the desk */
  .nb-motion #main .case,
  .nb-motion #main .record {
    transition: transform 280ms cubic-bezier(.25, 1, .5, 1), box-shadow 280ms cubic-bezier(.25, 1, .5, 1);
  }
  .nb-motion #main .case.nb-tilt,
  .nb-motion #main .record.nb-tilt {
    transform: perspective(900px) rotateX(var(--nb-rx, 0deg)) rotateY(var(--nb-ry, 0deg)) translateY(-8px) rotate(var(--nb-rest, 0deg));
    box-shadow: 0 34px 50px -26px rgba(0, 0, 0, .55);
    transition-duration: 120ms;
  }
  .nb-motion #main .record { --nb-rest: .8deg; }
  .nb-motion #main .ways > li { transition: translate 220ms cubic-bezier(.25, 1, .5, 1); }
  .nb-motion #main .ways > li:hover { translate: 12px 0; }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 60rem) {
  .nb-motion #main .case:nth-child(1) { --nb-rest: -.6deg; }
  .nb-motion #main .case:nth-child(2) { --nb-rest: .5deg; }
}