/* The AI Guys, theaiguystxk.com
   One stylesheet for the whole site. Paper, ink, and one brass accent.
   Fonts are self-hosted (Archivo + Source Serif 4, both SIL Open Font License). */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f4f1ea;
  --paper-2: #ebe6da;
  --paper-3: #e1dacb;
  --card: #fbfaf6;
  --ink: #141311;
  --ink-2: #2c2a26;
  --muted: #5d584e;
  --rule: #d5cebd;
  --rule-strong: #b3a992;
  --field-border: #857b66;
  --brass: #a77a2f;
  --brass-ink: #7a5416;
  --brass-light: #dcb065;
  --champagne: #c9a664; /* the footer's quiet gold (Daegan 2026-09-24: the brighter gold looked cheap there) */
  --dark: #141311;
  --dark-2: #1f1d1a;
  --dark-3: #2a2723;
  --on-dark: #f2eee5;
  --on-dark-muted: #b8b1a2;
  --dark-rule: #3b3732;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --bevel: 10px;
  --lift: 0 1px 1px rgba(20, 19, 17, 0.06), 0 18px 40px -24px rgba(20, 19, 17, 0.5);
  --header-h: 76px;
  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Smooth in-page scrolling starts once the page has landed (site.js adds is-landed at load), so a link to another page's
   section opens right at it instead of opening at the top and gliding down for a second (2026-09-25). */
@media (prefers-reduced-motion: no-preference) {
  html.is-landed { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: none) {
  html { scroll-behavior: smooth; } /* with no script at all, smooth as before */
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.99rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.55rem, 1.5rem + 4vw, 4.75rem); letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem); letter-spacing: -0.015em; line-height: 1.15; }
h4 { font-size: 1.05rem; letter-spacing: 0; line-height: 1.25; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--brass-ink); text-decoration-thickness: 2px; }

strong { font-weight: 700; }

ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible,
.site-footer :focus-visible,
.offer--dark :focus-visible,
.side-card--dark :focus-visible,
.reach-card :focus-visible { outline-color: var(--brass-light); }

::selection { background: var(--brass-light); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 700;
  padding: 0.8rem 1.1rem; border-radius: 8px;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }

/* ---------- Type helpers ---------- */

.eyebrow {
  display: inline-flex;
  gap: 0.85em;
  margin: 0 0 1.25rem;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--brass-ink);
  align-items: flex-start;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.6em;
  background: currentColor;
}
.section--dark .eyebrow { color: var(--brass-light); }

.lead {
  font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 36em;
}
.section--dark .lead { color: var(--on-dark); }
.small { font-size: 0.92rem; }
.sans { font-family: var(--sans); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.95em 1.45em;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 104%;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--bevel);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { color: var(--paper); background: var(--ink-2); border-color: var(--ink-2); text-decoration: none; }
.btn:active { transform: translateY(1px); transition-duration: 0.15s, 0.15s, 0.15s, 0s; } /* the press lands at once; letting go still eases (0.15 s) */
.btn .i { width: 1.1em; height: 1.1em; flex: none; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--brass-light); border-color: var(--brass-light); color: var(--ink); }

.btn--ghost-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn--ghost-light:hover { background: var(--on-dark); color: var(--ink); }

.btn--sm { min-height: 44px; padding: 0.7em 1.1em; font-size: 0.95rem; }
.btn--block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--brass);
}
.text-link .i { width: 1.05em; height: 1.05em; transition: transform 0.15s ease; }
.text-link:hover .i { transform: translateX(3px); }
.section--dark .text-link { color: var(--on-dark); text-decoration-color: var(--brass-light); }

/* Octagon corners where the browser can draw them; rounded corners everywhere else. */
@supports (corner-shape: bevel) {
  .btn,
  .offer,
  .tier,
  .ticket,
  .panel,
  .field input,
  .field textarea,
  .nav-mobile summary { corner-shape: bevel; }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.95);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(244, 241, 234, 0.86); backdrop-filter: saturate(1.2) blur(10px); }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 62px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.brand-place {
  margin-top: 0.38rem;
  font-family: var(--sans);
  font-weight: 600;
  font-stretch: 125%;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-list { display: flex; align-items: center; gap: 0.15rem; list-style: none; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--ink-2);
  border-radius: 8px;
}
.nav-list a:hover { color: var(--ink); background: var(--paper-2); }
.nav-list a { transition: background-color 0.15s ease, color 0.15s ease; } /* eases like the Free look button beside it */
.nav-list a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
  text-decoration-color: var(--brass);
}

.hero-tel { margin: -0.35rem 0 0.9rem; }
.hero-tel .ring { display: flex; flex: none; } /* the ringing icon's wrapper: exactly the icon's box */
/* The phone icon rings now and then to draw the eye to the number (Daegan 2026-09-24): two quick rings like a real phone
   (about 1.4 seconds), then about 4.8 seconds of rest, forever (on his word, 2026-09-24: a second less, then 0.2s back) (Daegan 2026-09-24; it first stopped after four rings for the
   accessibility guidance on endless motion, and anyone with motion turned down still sees it still). It uses the rotate and scale properties, so the link's hover nudge (a transform) still works. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* On a wrapper around the icon, not the <svg> itself, so Chrome can run it on the graphics chip (2026-09-25). */
  .hero-tel .ring { transform-origin: 50% 55%; animation: phone-ring 6.2s ease-in-out 1.8s infinite; }
}
@keyframes phone-ring {
  0%, 9.597%, 13.548%, 23.145%, 100% { rotate: 0deg; scale: 1; }
  1.129% { rotate: -18deg; scale: 1.18; }
  2.823% { rotate: 16deg; scale: 1.18; }
  4.516% { rotate: -16deg; scale: 1.18; }
  6.21% { rotate: 14deg; scale: 1.16; }
  7.903% { rotate: -8deg; scale: 1.08; }
  14.677% { rotate: -18deg; scale: 1.18; }
  16.371% { rotate: 16deg; scale: 1.18; }
  18.065% { rotate: -16deg; scale: 1.18; }
  19.758% { rotate: 14deg; scale: 1.16; }
  21.452% { rotate: -8deg; scale: 1.08; }
}

.end-reach { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin: 1rem 0 0; }

.nav-mobile { display: none; position: static; }
.nav-mobile summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  list-style: none;
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: 9px;
  user-select: none;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary .bars { width: 18px; height: 12px; position: relative; }
.nav-mobile summary .bars::before,
.nav-mobile summary .bars::after,
.nav-mobile summary .bars span {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px; background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-mobile summary .bars::before { top: 0; }
.nav-mobile summary .bars span { top: 5px; }
.nav-mobile summary .bars::after { top: 10px; }
.nav-mobile[open] summary .bars::before { transform: translateY(5px) rotate(45deg); }
.nav-mobile[open] summary .bars::after { transform: translateY(-5px) rotate(-45deg); }
.nav-mobile[open] summary .bars span { opacity: 0; }
.nav-mobile[open] summary { background: var(--ink); color: var(--paper); }

.nav-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 40px -28px rgba(20, 19, 17, 0.45);
  padding: 0.75rem var(--gutter) 1.5rem;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
/* Opening the phone menu (2026-09-25): the panel settles 4 px down out of the header while the bars turn to an X, on the
   same 0.2 s. It closes at once, and on a page link it stays up until the next page's crossfade takes it (site.js). */
@media (prefers-reduced-motion: no-preference) {
  .nav-mobile[open] .nav-panel { animation: panel-in 0.2s ease-out; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } }
.nav-panel ul { list-style: none; margin-bottom: 1.1rem; }
.nav-panel li + li { border-top: 1px solid var(--rule); }
.nav-panel a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.nav-panel a[aria-current="page"] { color: var(--brass-ink); }
.nav-panel .i { width: 1.2rem; height: 1.2rem; color: var(--muted); }
.nav-panel a.nav-panel-mail { display: flex; justify-content: flex-start; align-items: center; gap: 0.6rem; min-height: 52px; margin-top: 0.75rem; font-family: var(--sans); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; color: var(--ink); text-decoration: none; }
.nav-panel a.nav-panel-mail .i { width: 1.2rem; height: 1.2rem; flex: none; color: var(--brass-ink); }
.nav-panel a.nav-panel-mail > span { min-width: 0; }
.nav-panel a.nav-panel-mail:hover { color: var(--brass-ink); }
.nav-panel-note { margin-top: 0.9rem; font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }

.cta-short { display: none; }
@media (max-width: 960px) {
  .nav-list { display: none; }
  .nav-mobile { display: block; }
  .site-nav { gap: 0.5rem; }
  .site-nav > .btn { min-height: 44px; padding: 0.55em 0.85em; font-size: 0.92rem; white-space: nowrap; flex: none; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
}
@media (max-width: 600px) {
  .header-inner { gap: 0.6rem; }
  .nav-mobile summary { padding: 0.55rem 0.7rem; }
  .menu-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background-color: var(--paper-2); }
.section--paper3 { background-color: var(--paper-3); }
.section--dark { background-color: var(--dark); color: var(--on-dark); }
.section--dark a:not(.btn):hover,
.site-footer a:hover,
.side-card--dark a:not(.btn):hover { color: var(--brass-light); }
.section-head { max-width: 780px; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.section-head p { color: var(--ink-2); }
.section--dark .section-head p { color: var(--on-dark-muted); }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.75rem, 6.5vw, 6rem) clamp(3.5rem, 8vw, 7rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero h1 { max-width: 11em; }
.hero .lead { margin-top: 1.4rem; }
.hero-sub {
  margin: 1rem 0 0;
  max-width: 34em;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2.1rem 0 1.4rem; }
.hero-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 34em;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}
.hero-note .i { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.1rem; color: var(--brass); }

/* Business cards in the hero */
.cards {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1 / 1.02;
  margin-inline: auto;
  container-type: inline-size;
}
.bizcard {
  position: absolute;
  width: 82%;
  aspect-ratio: 3.5 / 2;
  border-radius: 7px;
  box-shadow: 0 1px 1px rgba(20, 19, 17, 0.08), 0 22px 44px -22px rgba(20, 19, 17, 0.55);
}
.bizcard--front {
  top: 3%;
  left: 0;
  z-index: 2;
  background: var(--card);
  transform: rotate(-4.5deg);
  border: 1px solid rgba(20, 19, 17, 0.06);
}
.bizcard--front img {
  position: absolute;
  inset: 7% 0;
  width: 100%;
  height: 86%;
  object-fit: contain;
}

.bizcard--back {
  bottom: 4%;
  right: 0;
  z-index: 1;
  background: var(--dark);
  color: var(--on-dark);
  transform: rotate(5deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7% 7.5%;
}
.bizcard-closed {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(0.72rem, 3.3cqi, 0.95rem);
  white-space: nowrap;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.bizcard-closed::after { content: ""; flex: 1; height: 1.5px; background: var(--brass-light); opacity: 0.6; }
.bizcard-line { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(0.98rem, 4.6cqi, 1.2rem); line-height: 1.25; }
.bizcard-url { font-family: var(--sans); font-weight: 600; font-stretch: 110%; font-size: clamp(0.62rem, 2.6cqi, 0.72rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }

/* Who-we-serve strip */
.strip {
  border-block: 1px solid var(--rule);
  background: var(--paper);
}
.strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.75rem;
  padding-block: 1.15rem;
  font-family: var(--sans);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.strip-inner .strip-label { color: var(--brass-ink); font-weight: 700; }
.strip-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.35rem; list-style: none; }
.strip-list li { display: inline-flex; align-items: center; gap: 0.6rem; }
/* The bullets are outlined octagons, the shape of the logo's heads (Daegan 2026-09-24). Sized and placed with whole-pixel
   layout only (no translate), so the browser snaps them to the pixel grid and the edges stay crisp; each is centred on
   its label's capitals, measured from rendered pixels at 4x on desktop, laptop, tablet and phones. */
.strip-list li::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin: 0 0 2px;
  background: var(--brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpolygon%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3.6'%20points%3D'7.78%2C1.8%2016.22%2C1.8%2022.2%2C7.78%2022.2%2C16.22%2016.22%2C22.2%207.78%2C22.2%201.8%2C16.22%201.8%2C7.78'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpolygon%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3.6'%20points%3D'7.78%2C1.8%2016.22%2C1.8%2022.2%2C7.78%2022.2%2C16.22%2016.22%2C22.2%207.78%2C22.2%201.8%2C16.22%201.8%2C7.78'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

/* Tablets and small laptops: flowing rows would strand the longest type alone on a last row, so two aligned columns. */
@media (min-width: 601px) and (max-width: 1179px) {
  .strip-inner .strip-label { flex-basis: 100%; }
  .strip-list { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 10px 3rem; } /* whole-pixel row gap keeps every row on the pixel grid */
}

/* ---------- The question + tickets ---------- */

.bigq {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 19em;
  text-wrap: balance;
}
.bigq .qm { color: var(--brass); }

.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.25rem;
  list-style: none;
}
.ticket {
  --notch: var(--paper-2);
  position: relative;
  display: flex;
  flex-direction: column;
  grid-row: span 2;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(20, 19, 17, 0.04);
}
.ticket-top { padding: 1.35rem 1.4rem 1.25rem; flex: 1; }
@supports (grid-template-rows: subgrid) {
  .ticket { display: grid; grid-template-rows: subgrid; row-gap: 0; }
}
.ticket-bottom {
  position: relative;
  padding: 1.2rem 1.4rem 1.4rem;
  border-top: 2px dashed var(--rule-strong);
}
.ticket-bottom::before,
.ticket-bottom::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--notch);
  border: 1px solid var(--rule);
}
.ticket-bottom::before { left: -10px; clip-path: inset(0 0 0 50%); }
.ticket-bottom::after { right: -10px; clip-path: inset(0 50% 0 0); }
.ticket-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticket-bottom .ticket-label { color: var(--brass-ink); }
.ticket-label .i { width: 1.6rem; height: 1.6rem; color: var(--ink); }
.ticket-quote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.38;
  color: var(--ink);
}
.ticket-fix { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Demo phone ---------- */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas: "head phone" "rest phone";
  grid-template-rows: 1fr 1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: 1.5rem;
}
.demo-head { grid-area: head; align-self: end; }
.demo-head .lead { margin: 0; }
.demo-rest { grid-area: rest; align-self: start; }
.demo-grid .phone-wrap { grid-area: phone; align-self: center; margin: 0; }
.demo-rest .facts { list-style: none; margin: 0; display: grid; gap: 0.7rem; }
.demo-rest .facts li { display: flex; gap: 0.75rem; align-items: flex-start; }
.demo-rest .facts .i { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.2rem; color: var(--brass); }
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  background: var(--card);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.98rem;
}
.price-line strong { font-weight: 800; font-size: 1.1rem; }

.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.phone {
  width: min(100%, 350px);
  padding: 11px;
  background: #0e0d0b;
  border-radius: 46px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 34px 60px -30px rgba(20, 19, 17, 0.7);
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 610px;
  padding: 3.25rem 0.95rem 1.1rem;
  background: #f8f6f1;
  border-radius: 36px;
  overflow: hidden;
  font-family: var(--sans);
}
.phone-screen::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  width: 96px; height: 26px;
  transform: translateX(-50%);
  background: #0e0d0b;
  border-radius: 20px;
}
.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #e3ddd0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.phone-head strong { color: var(--ink); font-weight: 800; font-size: 0.92rem; }
.demo-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.sys {
  align-self: center;
  max-width: 92%;
  padding: 0.3rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  background: #ece7dc;
  border-radius: 999px;
}
.msg {
  max-width: 84%;
  padding: 0.62rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.38;
  border-radius: 18px;
}
.msg--in { align-self: flex-start; background: #e6e0d3; color: var(--ink); border-bottom-left-radius: 6px; }
.msg--out { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px; }
.msg-who {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.notify {
  margin-top: 0.35rem;
  padding: 0.8rem 0.9rem;
  background: #fff;
  border: 1.5px solid var(--brass);
  border-radius: 16px;
  box-shadow: 0 10px 22px -16px rgba(20, 19, 17, 0.5);
  font-size: 0.86rem;
  line-height: 1.4;
}
.notify-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .js .demo.is-armed .step { opacity: 0; transform: translateY(10px); } /* armed by site.js only when motion is welcome at load */
  .js .demo.is-armed.is-playing .step {
    animation-name: step-in;
    animation-duration: 0.4s; /* about 30 percent quicker than the first cut (Daegan 2026-09-24) */
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
  .js .demo.is-armed.is-done .step { opacity: 1; transform: none; animation: none; }
  .demo .step:nth-child(1) { animation-delay: 0.1s; }
  .demo .step:nth-child(2) { animation-delay: 0.65s; }
  .demo .step:nth-child(3) { animation-delay: 1.35s; }
  .demo .step:nth-child(4) { animation-delay: 2.05s; }
  .demo .step:nth-child(5) { animation-delay: 3s; }
  .demo .step:nth-child(6) { animation-delay: 3.85s; }
  .demo .step:nth-child(7) { animation-delay: 4.55s; }
  .demo .step:nth-child(8) { animation-delay: 5.5s; }
}
@keyframes step-in { to { opacity: 1; transform: none; } }

/* The checklist under the phone, stacked (phones and narrow screens), Daegan's idea (2026-09-24). When the list itself
   scrolls on screen (its own trigger, so a fast scroller never meets an empty space), each line comes up out of the
   phone's shadow and drifts slowly down into place, its check drawing as it arrives. Then every 10 seconds the lines take
   turns: one drifts down and fades away, comes back in from above with a fresh check, then the next; only one is ever
   away, so the list always reads. site.js arms it; no script or reduced motion shows the list still. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .demo-rest.is-armed .facts li { opacity: 0; transform: translateY(-22px); }
  .demo-rest.is-armed .facts .i { stroke-dasharray: 21; stroke-dashoffset: 21; }
  .demo-rest.is-armed.is-in .facts li { animation: fact-land 1.1s cubic-bezier(0.25, 0.6, 0.3, 1) forwards, fact-wave 10s linear infinite; }
  .demo-rest.is-armed.is-in .facts .i { animation: check-draw 0.4s ease-out forwards, check-wave 10s linear infinite; }
  .demo-rest.is-in .facts li:nth-child(1) { animation-delay: 0.05s, 9s; }
  .demo-rest.is-in .facts li:nth-child(2) { animation-delay: 0.3s, 9.7s; }
  .demo-rest.is-in .facts li:nth-child(3) { animation-delay: 0.55s, 10.4s; }
  .demo-rest.is-in .facts li:nth-child(1) .i { animation-delay: 0.75s, 9s; }
  .demo-rest.is-in .facts li:nth-child(2) .i { animation-delay: 1s, 9.7s; }
  .demo-rest.is-in .facts li:nth-child(3) .i { animation-delay: 1.25s, 10.4s; }
}
/* Desktop (side by side): the words never hide, since the list is read first; only the three checks move, each drawn as
   the phone shows it happen (booked when the caller confirms, the hard calls when the text to you lands, then the number),
   then every 10 seconds all three clear together and draw back in order (Daegan 2026-09-25: the one-at-a-time redraw looked
   bad; the first play stays as it was). Only the check strokes animate, so it stays cheap. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .demo-rest.is-armed .facts .i { stroke-dasharray: 21; stroke-dashoffset: 21; }
  .demo-grid.phone-on .demo-rest.is-armed .facts .i { animation: check-draw 0.4s ease-out forwards, check-round-1 10s linear infinite; }
  .demo-grid.phone-on .demo-rest .facts li:nth-child(1) .i { animation-delay: 0.1s, 13s; } /* with the phone's first message (Daegan 2026-09-24) */
  .demo-grid.phone-on .demo-rest .facts li:nth-child(2) .i { animation-name: check-draw, check-round-2; animation-delay: 3.4s, 13s; }
  .demo-grid.phone-on .demo-rest .facts li:nth-child(3) .i { animation-name: check-draw, check-round-3; animation-delay: 3.85s, 13s; }
}
/* One desktop round (10 s, one clock for all three from 13 s on): all three fade out together (0.3 s), a beat, then they
   draw back in order, 0.45 s apart (each draw 0.4 s, as on the first play), and rest. */
@keyframes check-round-1 {
  0% { opacity: 1; stroke-dashoffset: 0; animation-timing-function: ease-in-out; }
  3% { opacity: 0; stroke-dashoffset: 0; }
  3.01%, 6% { opacity: 1; stroke-dashoffset: 21; animation-timing-function: ease-out; }
  10%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes check-round-2 {
  0% { opacity: 1; stroke-dashoffset: 0; animation-timing-function: ease-in-out; }
  3% { opacity: 0; stroke-dashoffset: 0; }
  3.01%, 10.5% { opacity: 1; stroke-dashoffset: 21; animation-timing-function: ease-out; }
  14.5%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes check-round-3 {
  0% { opacity: 1; stroke-dashoffset: 0; animation-timing-function: ease-in-out; }
  3% { opacity: 0; stroke-dashoffset: 0; }
  3.01%, 15% { opacity: 1; stroke-dashoffset: 21; animation-timing-function: ease-out; }
  19%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes fact-land { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes check-draw { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }
/* One turn of the wave: drift down and fade (0.5s), come back in from above and settle (0.9s), then rest. */
@keyframes fact-wave {
  0% { opacity: 1; transform: none; filter: none; animation-timing-function: ease-in; }
  5% { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  5.01% { opacity: 0; transform: translateY(-16px); filter: blur(2px); animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1); }
  14% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes check-wave {
  0%, 5% { stroke-dashoffset: 0; }
  5.01%, 11% { stroke-dashoffset: 21; animation-timing-function: ease-out; }
  15% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  counter-reset: step;
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.oct {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex: none;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.2rem;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-card h3 { margin: 0.2rem 0 0; }
.step-card p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
/* Each Home step card is a link to its place on Services (Daegan 2026-09-24: you want to click it). The title is the link
   and stretches over the whole card, like the Built cards; a small muted arrow says so, and nudges on hover. */
.step-card { position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* always, so the link's cover stays inside the card */
.step-card h3 a { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.step-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.step-card h3 a .i { width: 1.05rem; height: 1.05rem; color: var(--muted); transition: transform 0.15s ease, color 0.15s ease; }
.step-card:has(h3 a):hover { border-color: var(--rule-strong); box-shadow: var(--lift); }
.step-card:has(h3 a):hover h3 a { color: var(--brass-ink); }
.step-card:has(h3 a):hover h3 a .i { color: var(--brass-ink); transform: translateX(3px); }
.step-card:has(a:focus-visible) { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.step-card h3 a:focus-visible { outline: none; }

/* ---------- Promises (sovereignty) ---------- */
.fineprint {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--dark-rule);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}
.fineprint-label {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.fineprint p { color: var(--on-dark); max-width: 46em; }

/* ---------- Built cards ---------- */

.built-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
}
.built-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
  border-radius: 4px 4px 12px 12px;
}
.built-card h3 { margin: 0; }
.built-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- Panel (founding clients) ---------- */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 2rem 3rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 10px 10px 0 var(--brass);
}
.panel h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); margin-bottom: 0.6rem; }
.panel p { color: var(--ink-2); max-width: 40em; }

/* ---------- Saturday band ---------- */

.saturday { text-align: center; }
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.9rem 1.6rem 0.8rem;
  border: 3px solid var(--brass-ink);
  outline: 1.5px solid var(--brass-ink);
  outline-offset: 4px;
  border-radius: 8px;
  color: var(--brass-ink);
  transform: rotate(-3deg);
  font-family: var(--sans);
  margin-bottom: 2.25rem;
}
.stamp-big { font-weight: 900; font-stretch: 125%; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }
.stamp-small { font-weight: 700; font-stretch: 125%; font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; }
.saturday-line {
  margin: 0 auto 0.9rem;
  max-width: 17em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.saturday .small { color: var(--muted); font-family: var(--sans); }

/* ---------- Page hero (inner pages) ---------- */

.page-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.page-hero h1 { max-width: 13em; }
.page-hero .lead { margin-top: 1.25rem; }

/* ---------- Offers (services) ---------- */

.offer-group + .offer-group { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.group-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-bottom: 1.75rem; max-width: 760px; }
.group-head h2 { margin: 0; }
.group-head p { color: var(--ink-2); margin: 0.4rem 0 0; }

.offers { display: grid; gap: 1.25rem; list-style: none; }
.offer {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.offer-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.offer h3 { margin: 0; font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); }
.offer-sub { margin: 0.35rem 0 0; font-family: var(--sans); font-size: 0.92rem; color: var(--muted); }
.price { text-align: right; font-family: var(--sans); line-height: 1.1; }
.price-big { display: block; font-weight: 800; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-note { display: block; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.offer p { margin: 0; color: var(--ink-2); }
.offer > .text-link { margin-top: auto; align-self: flex-start; }
.offer--feature { border: 2px solid var(--ink); }
.offer--dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.offer--dark p { color: var(--on-dark-muted); }
.offer--dark .offer-sub,
.offer--dark .price-note { color: var(--on-dark-muted); }

/* The Automations card (Daegan 2026-09-25, "make it pop, subtly"): a faint warm light in its top corner, the header over a
   hairline, each system's icon in a small octagon (the site's shape), and the last one, the open invitation, lit in brass. */
.offer--dark { background: radial-gradient(85% 65% at 100% 0%, rgba(220, 176, 101, 0.09), rgba(220, 176, 101, 0) 62%), var(--dark); }
.offer--dark .offer-top { padding-bottom: 1.15rem; border-bottom: 1px solid var(--dark-rule); }
.systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 2.25rem; list-style: none; margin: 0.55rem 0 0.35rem; }
.systems li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; line-height: 1.5; color: var(--on-dark); }
/* Each icon and its octagon are one small drawing (r2-build-pages.cjs octIc), so the icon is exactly centred at any
   position or screen density (Daegan 2026-09-25: they read a touch left when the octagon was a clip-path on the box). */
.systems .i { width: 2.25rem; height: 2.25rem; margin-top: -0.05rem; color: var(--brass-light); }
.systems .oct-bg { fill: var(--dark-3); stroke: none; }
.systems li:last-child .oct-bg { fill: var(--brass-light); }
.systems li:last-child .i { color: var(--ink); }
.systems strong { font-family: var(--sans); font-weight: 700; display: block; }
.systems li:last-child strong { color: var(--brass-light); }
.systems span { color: var(--on-dark-muted); font-size: 0.98rem; }
@media (max-width: 600px) {
  .systems { row-gap: 1.05rem; }
  .systems li { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.8rem; }
  .systems .i { width: 2rem; height: 2rem; }
}

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin-top: 0.5rem; }
.tier {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.15rem;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--paper);
}
.tier-name { font-family: var(--sans); font-weight: 800; font-size: 1.05rem; }
.tier-price { font-family: var(--sans); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier-price small { font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.tier p { font-size: 0.95rem; line-height: 1.5; }

.rules { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2.5rem; }
.rules li,
.ways li,
.systems span,
.tier p { text-wrap: pretty; }
.rules li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.8rem; align-items: start; line-height: 1.5; }
.rules .oct { width: 2rem; height: 2rem; font-size: 0.85rem; }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
#questions .faq,
#questions .section-head { max-width: 820px; }
/* Services "Answers" band (2026-09-24 page rhythm): the pricing rules close the questions, same width as the list. */
.faq-rules { max-width: 820px; margin-top: clamp(3rem, 6vw, 4.5rem); }
.faq-rules .more--big { max-width: none; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
  padding: 1.1rem 0.25rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm {
  position: relative;
  flex: none;
  width: 1.9rem; height: 1.9rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.faq summary .pm::before,
.faq summary .pm::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.8rem; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover { color: var(--brass-ink); }
.faq .answer { padding: 0 0.25rem 1.5rem; max-width: 46em; color: var(--ink-2); }

/* ---------- Built page ---------- */

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.portrait {
  position: static;
  top: calc(var(--header-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.portrait-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 11%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--lift);
}
.portrait-frame img { width: 100%; height: auto; }
.portrait-card {
  padding: 1.1rem 1.25rem;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
}
.portrait-card strong { display: block; font-size: 1.1rem; }
.portrait-card span { color: var(--on-dark-muted); }
.prose p { color: var(--ink-2); }
.prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); margin-top: 2.75rem; }
.prose .lead { color: var(--ink); margin-bottom: 1.5rem; }
.ways { list-style: none; counter-reset: way; display: grid; gap: 1rem; margin: 1.5rem 0 0.5rem; }
.ways li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; align-items: start; color: var(--ink-2); }
.ways .oct { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.ways strong { color: var(--ink); font-family: var(--sans); }
.callout {
  margin: 2rem 0;
  padding: 1.4rem 1.5rem;
  background: var(--paper-2);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.callout p { color: var(--ink); }
.signoff { margin-top: 2.5rem; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink); }
.signoff .sig { display: block; margin-top: 0.4rem; font-style: normal; font-family: var(--sans); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.form-card {
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--lift);
}
.form-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.4rem; }
.form-intro { color: var(--muted); font-family: var(--sans); font-size: 0.95rem; margin-bottom: 1.6rem; }
.field { display: grid; gap: 0.45rem; margin-bottom: 1.35rem; }
.field label,
.field legend {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}
.opt { font-weight: 500; color: var(--muted); font-size: 0.9rem; }
.hint { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin: -0.15rem 0 0.1rem; }
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.95rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--field-border);
  border-radius: 9px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--ink-2); }
.field input:focus,
.field textarea:focus { outline: 3px solid var(--brass-ink); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
.field.has-error input,
.field.has-error textarea { border-color: #9b2c1f; }
.error-msg {
  display: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: #9b2c1f;
}
.field.has-error .error-msg { display: block; }

.check { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.6rem; font-family: var(--sans); font-size: 0.98rem; line-height: 1.45; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.12rem 0 0; flex: none; accent-color: var(--ink); }
.form-foot { margin-top: 1rem; font-family: var(--sans); font-size: 0.88rem; color: var(--muted); }
.error-summary {
  display: none;
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border: 2px solid #9b2c1f;
  border-radius: 10px;
  background: #fbefec;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.error-summary.is-visible { display: block; }
.error-summary h3 { font-size: 1rem; margin: 0 0 0.4rem; color: #9b2c1f; }
.error-summary ul { padding-left: 1.2rem; }
.error-summary a { color: #9b2c1f; font-weight: 600; }

.sent { display: none; }
.sent.is-visible { display: block; }
/* The form's answers appear with the site's quiet fade (0.2 s): each missing-answer line and "Almost there." (2026-09-25). */
@media (prefers-reduced-motion: no-preference) {
  .field.has-error .error-msg,
  .sent.is-visible { animation: appear 0.2s ease-out; }
}
.sent textarea {
  width: 100%;
  min-height: 170px;
  margin: 0.75rem 0 1rem;
  padding: 0.8rem 0.95rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--field-border);
  border-radius: 9px;
  resize: vertical;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.copy-status { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--brass-ink); min-height: 1.4em; margin-top: 0.6rem; }
.side-card .copy-status:empty { min-height: 0; margin-top: 0; }
.side-card--dark .copy-status { color: var(--brass-light); }

.side-stack { display: grid; gap: 1.25rem; }
.side-card {
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.side-card h2,
.side-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.side-card p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.side-card--dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.side-card--dark p { color: var(--on-dark-muted); }
.email-big {
  display: inline-block;
  margin: 0.2rem 0 0.9rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  color: var(--on-dark);
  word-break: break-all;
  text-decoration-color: var(--brass-light);
}
.next-steps { list-style: none; display: grid; gap: 0.8rem; }
.next-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.next-steps .oct { width: 2rem; height: 2rem; font-size: 0.85rem; }
.stateline { margin: 0.4rem 0 1rem; }
.stateline svg { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; }
.stateline text { font-family: var(--sans); }

/* ---------- 404 ---------- */

.lost { min-height: 60vh; display: grid; align-items: center; }
body:has(> main.lost) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main.lost { flex: 1; }
.lost + .site-footer { padding-top: 1.5rem; }
.lost + .site-footer .footer-bottom { padding-top: 0; }

/* ---------- Footer ---------- */

main:has(> .section--dark:last-child) + .site-footer { border-top: 1px solid var(--dark-rule); }
.site-footer {
  background: var(--dark);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--dark-rule);
}
.footer-brand { display: flex; flex-direction: column; gap: 1.1rem; max-width: 22rem; }
.footer-logo {
  width: 150px;
  aspect-ratio: 1872 / 1254;
  background: var(--on-dark);
  /* ?v= because /assets/img is cached for good (2026-09-25): bump it here if logo-mark.svg ever changes. */
  -webkit-mask: url("/assets/img/logo-mark.svg?v=1") center / contain no-repeat;
  mask: url("/assets/img/logo-mark.svg?v=1") center / contain no-repeat;
}
.footer-name {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.footer-brand p { color: #d8d2c6; font-size: 1rem; line-height: 1.55; } /* a touch brighter than the other muted footer text */
/* The footer line (Daegan 2026-09-24): the same sentence and font, a touch brighter, with the services descriptor that opens
   it in soft gold. Subtle on purpose: no added shapes. */
.footer-gold { color: var(--champagne); } /* a single champagne gold: deeper and quieter than the label gold, so it reads as metal (Daegan: the brushed gradient looked cheap) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-gold {
    /* Three thirds: the outer two are the same flat champagne gold (so a loop restart is invisible and the resting state is one
       quiet tone), the middle carries a soft satin sheen that lifts the gold a few shades, never toward white. */
    background: linear-gradient(100deg, #c9a664 0%, #c9a664 44%, #d4b578 46.5%, #e3c993 48.5%, #efdaae 50%, #e3c993 51.5%, #d4b578 53.5%, #c9a664 56%, #c9a664 100%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* A slow, clean shimmer that never stops once the line is on screen (site.js adds is-shining): it starts one second after
     the line is first seen, a narrow light glides across the words in 2.6 seconds, rests 1.4 seconds, and goes again, so the
     dark gap you actually see measures about 2.3 seconds (Daegan's pick) (Daegan 2026-09-24: it felt longer than the rest it had; measured). The keyframes move the light only across the words themselves
     (84% to 16%: the band just off the left edge to just off the right), so no part of a pass is spent out of sight.
     Never for reduced motion. */
  @media (prefers-reduced-motion: no-preference) {
    .footer-gold.is-shining { animation: gold-shimmer 4s linear 1.576s infinite; }
  }
}
@keyframes gold-shimmer { 0% { background-position: 84% 0; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); } 65%, 100% { background-position: 16% 0; } }
/* One light for all the footer's gold (Daegan 2026-09-24: all the gold should shimmer together, and draw the eye to the
   no-trackers icon). The same 4-second clock as the line above, started in the same moment (site.js adds gold-on to the
   footer with is-shining), so they stay locked together. Every light finishes in the same instant, 3.8 s on the clock
   (Daegan 2026-09-25: not a wave, the longer ones start sooner, and what lines up is the moment the last of the glow
   leaves the last letter: the line's light clears "sovereignty" as PAGES and REACH US clear and the no-trackers icon
   settles). The glow's trailing edge is the 46.5% stop, which clears an element's end 84% of the way through its sweep, so
   the line starts at 1.576 s (2.6 s sweep), the labels at 3.282 s (0.64 s), the icon at 3.07 s (0.88 s to rest): measured on the
   pixels (tools/checks/gold-finish.cjs), each last clearly visible glow leaves at 3.8 s.
   Never for reduced motion. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* (.site-footer in front, so this outranks the labels' plain color rule further down) Sized to the words, not the column,
     so the light crosses the letters. */
  .site-footer .footer-col h2 {
    width: fit-content;
    background: linear-gradient(100deg, #c9a664 0%, #c9a664 44%, #d4b578 46.5%, #e3c993 48.5%, #efdaae 50%, #e3c993 51.5%, #d4b578 53.5%, #c9a664 56%, #c9a664 100%) 84% 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .site-footer.gold-on .footer-col h2 { animation: label-glint 4s linear 3.282s infinite; } /* its last glow leaves the last letter at 3.8 s */
  }
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer.gold-on .no-track .i { animation: icon-glint 4s ease-in-out 3.07s infinite; } /* its 0.88 s glint settles at 3.8 s */
}
@keyframes label-glint { 0% { background-position: 84% 0; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); } 16%, 100% { background-position: 16% 0; } }
@keyframes icon-glint {
  0%, 100% { color: var(--champagne); filter: none; }
  9% { color: #f3e3c0; filter: drop-shadow(0 0 3px rgba(239, 218, 174, 0.55)); }
  22% { color: var(--champagne); filter: none; }
}
@media (forced-colors: active) { .site-footer .footer-col h2 { background: none; color: CanvasText; } }
@media (forced-colors: active) { .footer-gold { background: none; color: CanvasText; } }
.footer-col h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 125%;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne); /* one metal across the footer */
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.1rem; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--on-dark);
}
.footer-col a:hover { color: var(--brass-light); text-decoration: underline; }
.footer-col p { font-family: var(--sans); font-size: 0.95rem; color: var(--on-dark-muted); margin-bottom: 0.6rem; line-height: 1.5; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--on-dark-muted);
}
.footer-bottom p { margin: 0; }
.no-track { display: inline-flex; align-items: center; gap: 0.5rem; }
.no-track .i { width: 1rem; height: 1rem; color: var(--champagne); }

/* ---------- Round 2: shared pieces ---------- */

/* Plus/minus mark for any tap-to-open (FAQ, "How it works", "The fine print") */
.pm {
  position: relative;
  flex: none;
  width: 1.9rem; height: 1.9rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.pm::before,
.pm::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.8rem; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Tap to open: depth behind a native <details> */
.more { margin-top: 1rem; border-top: 1px dashed var(--rule-strong); }
.more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.55rem 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary .pm { width: 1.6rem; height: 1.6rem; }
.more > summary .pm::before,
.more > summary .pm::after { width: 0.65rem; }
.more > summary:hover { color: var(--brass-ink); }
.more-body { padding: 0.25rem 0 1rem; color: var(--ink-2); }
.more-body p { font-size: 1rem; line-height: 1.6; }
.more-body p + p:not(.runs-on) { margin-top: 0.7rem; } /* two fine-print paragraphs need air between them (Daegan 2026-09-24) */
.more-body ul { list-style: none; display: grid; gap: 0.55rem; }
.section--dark .more,
.offer--dark .more { border-top-color: var(--dark-rule); }
.section--dark .more > summary,
.offer--dark .more > summary { color: var(--on-dark); }
.section--dark .more > summary:hover,
.offer--dark .more > summary:hover { color: var(--brass-light); }
.section--dark .more-body,
.offer--dark .more-body { color: var(--on-dark-muted); }
/* Tap to open (2026-09-25). Chrome and Edge glide the space open and shut (0.25 s), now on Home's "You're the boss" cards
   too, so every plus/minus on the site behaves the same. Where the height can't glide yet (Safari on iPhone, Firefox), the
   words fade in as it opens, while the plus turns (0.2 s); closing stays instant there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .more::details-content,
    .faq details::details-content,
    .fair details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
    }
    .more[open]::details-content,
    .faq details[open]::details-content,
    .fair details[open]::details-content { block-size: auto; }
  }
  @supports not (interpolate-size: allow-keywords) {
    .more[open] > :not(summary),
    .faq details[open] > :not(summary),
    .fair details[open] > :not(summary) { animation: appear 0.2s ease-out; }
  }
}

/* Links and pills stay easy to tap */
.text-link { min-height: 44px; }

/* Phone number links */
.tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reach-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reach-row .btn { flex: 1 1 10rem; }

/* Page-to-page crossfade where the browser supports it (Chrome, Edge, Android, Safari 18.2+; Firefox simply opens the
   next page). One clock (2026-09-25): the page, the header and their frames all run 0.25 s on the browser's own ease and
   finish together. The page used to fade in 0.22 s under a header that took 0.25 s, so every change ran a beat past its
   fade; the whole change still takes 0.25 s, as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0.25s; }
}
/* A phone on its side: the header isn't pinned there (Short screens, near the end of this file), so it fades with the
   page instead of sliding in from wherever it had scrolled to. */
@media (prefers-reduced-motion: no-preference) and (max-height: 30em) {
  .site-header { view-transition-name: none; }
}
/* The site's one fade for things that appear after a tap: answers where the height can't glide, the form's messages. */
@keyframes appear { from { opacity: 0; } }

/* ---------- Round 2: home ---------- */

.reframe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0.9rem 3rem;
  align-items: center;
}
.reframe h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.2rem); letter-spacing: -0.03em; margin: 0; }
.reframe-band { border-block: 1px solid var(--rule); }
.reframe p { margin: 0; font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ink-2); }
.reframe p + p { margin-top: 0.8rem; }
/* The band's punch line (Daegan 2026-09-24: make it hit harder): the wiring line in the big question's italic serif, full
   ink, so the eye goes heading, then the line that proves it, then the promise at body size. Nothing added but emphasis. */
.reframe .reframe-punch {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.reframe .reframe-punch + p { margin-top: 0.85rem; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); }

.tickets-more { margin-top: 1.25rem; }
.tickets-more > summary { border-top: 0; }
.tickets-more .tickets { margin-top: 0.75rem; }

.fair { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.fair { align-items: start; }
.fair li {
  background: var(--dark-2);
  border: 1px solid var(--dark-rule);
  border-radius: 12px;
}
.fair summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 64px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  color: var(--on-dark);
}
.fair summary::-webkit-details-marker { display: none; }
.fair summary .oct { width: 2.4rem; height: 2.4rem; background: var(--brass-light); color: var(--ink); }
.fair summary .oct .i { width: 1.15rem; height: 1.15rem; }
.fair-q { flex: 1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.01em; }
.fair summary .pm { width: 1.6rem; height: 1.6rem; color: var(--on-dark-muted); }
.fair summary .pm::before,
.fair summary .pm::after { width: 0.65rem; }
.fair summary:hover .fair-q { color: var(--brass-light); }
.fair p { margin: 0; padding: 0 1.2rem 1.2rem calc(1.2rem + 2.4rem + 0.9rem); color: var(--on-dark-muted); font-size: 1.02rem; line-height: 1.55; }
.fair-more { margin: 1.25rem 0 0; }
@supports (corner-shape: bevel) { .fair li { corner-shape: bevel; } }

.promise-list { list-style: none; display: grid; gap: 0.7rem; margin: 1.25rem 0 0; }
.promise-list li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
.promise-list .i { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--brass); }
.panel-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; min-width: 15rem; }
.panel-actions .panel-reach { align-self: center; }
.promise-list { margin: 0 0 0.35rem; }

/* Built teaser: a grid on desktop, a swipe row on phones */
.built-card { position: relative; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } /* eases like the step cards and buttons */
.built-card h3 a { text-decoration: none; color: inherit; }
.built-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Whole-card links: no browser tap flash. Phones drew it on the title line, not under the finger; the card's own response
   is the feedback. Nothing changes at rest, on mouse hover or on keyboard focus (2026-09-25). */
.step-card h3 a,
.built-card h3 a { -webkit-tap-highlight-color: transparent; }
.built-card:hover { border-top-color: var(--brass); }
.built-card:hover h3 a { color: var(--brass-ink); }
.built-card:has(a:focus-visible) { outline: 3px solid var(--brass-ink); outline-offset: 3px; }
.built-card h3 a:focus-visible { outline: none; }
.built-card--all { justify-content: space-between; background: var(--ink); border-color: var(--ink); }
.built-card--all h3 a { color: var(--paper); }
.built-card--all:hover { background: var(--ink-2); }
.built-card--all:hover h3 a { color: var(--brass-light); }
.built-card--all .i { width: 1.8rem; height: 1.8rem; color: var(--brass-light); }
/* Pressing a whole-card link (2026-09-25): the card sinks a touch under the finger and lets go over 0.15 s. The 0.04 s beat
   keeps a card still when a finger lands on it only to scroll (the Home swipe row). site.js's empty touch listener lets
   iPhones show it. Transform only; nothing moves with motion turned down. */
@media (prefers-reduced-motion: no-preference) {
  .step-card:has(h3 a):active,
  .built-card:active { transform: scale(0.985); transition-duration: 0.15s, 0.15s, 0.08s; transition-delay: 0s, 0s, 0.04s; }
}
.built-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rail:focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 6px; }
.rail-more { display: none; margin: 0.25rem 0 0; }
.panel-sig { margin: 0.9rem 0 0; font-family: var(--sans); font-weight: 700; font-size: 0.98rem; }
.panel-sig a { text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* Home's Founding panel on desktop (Daegan 2026-09-28, option A3, the unanimous pick of two rounds of judges): the pitch
   reads down the left, the two reassurances under the sentence and his name to close it; the button sits level with the
   reassurances and the email level with his name, so each row lines up. The markup is unchanged: on desktop the two
   halves step aside (display: contents) and each piece takes its row. Phones keep the stacked panel as it was. */
@media (min-width: 901px) {
  .panel--founding { grid-template-areas: "eyebrow ." "title ." "body ." "checks button" "sig mail"; row-gap: 0; align-items: start; }
  .panel--founding > div, .panel--founding > .panel-actions { display: contents; }
  .panel--founding .eyebrow { grid-area: eyebrow; justify-self: start; }
  .panel--founding h2 { grid-area: title; }
  .panel--founding > div > p:not(.eyebrow):not(.panel-sig) { grid-area: body; margin-bottom: 0; }
  .panel--founding .promise-list { grid-area: checks; margin: 1.1rem 0 0; }
  .panel--founding .panel-actions > .btn { grid-area: button; align-self: center; margin-top: 1.1rem; }
  .panel--founding .panel-sig { grid-area: sig; display: flex; align-items: center; min-height: 44px; margin: 1rem 0 0; }
  .panel--founding .panel-reach { grid-area: mail; justify-self: center; margin-top: 1rem; }
}
/* The button a little wider where there is room (Daegan 2026-09-28: the judges' one note on A3 was a quieter button):
   22rem, about 350 px, on screens 1200 px and up; below that it stays at its own width, so the headline keeps one line. */
@media (min-width: 1200px) { .panel--founding .panel-actions > .btn { min-width: 22rem; } }
/* Wide screens (Daegan 2026-09-24, "lined up"): the same card a little wider, so every row fits on one line and every
   price starts at one shared line. Phones and tablets are unchanged (checked pixel for pixel at 390 and 820). */

.offer-note { font-family: var(--sans); font-size: 0.94rem; line-height: 1.5; color: var(--muted); }
.offer--dark .offer-note { color: var(--on-dark-muted); }
.try-line { margin: 1.25rem 0 0; }
.try-line strong { font-size: 1rem; }
.more--big { max-width: 900px; border-top: 1px solid var(--rule); }
.more--big > summary { text-wrap: balance; min-height: 72px; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.more--big > summary .pm { width: 1.9rem; height: 1.9rem; }
.more--big .rules { margin-top: 0.75rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.not-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.not-list li { padding-left: 1.1rem; border-left: 3px solid var(--brass); }
.not-list strong { display: block; font-family: var(--sans); font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.not-list span { color: var(--ink-2); }

/* ---------- Round 2: what we've built ---------- */

.count-line { margin-top: 1.25rem; font-family: var(--sans); font-weight: 700; font-size: 0.98rem; color: var(--brass-ink); }

.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scrollbar-width: thin;
  min-inline-size: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.filters .chip { position: relative; flex: none; display: inline-flex; }
.filters .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; scroll-margin-top: -88px; }
.filters { -webkit-tap-highlight-color: transparent; } /* the pill's own ink fill is the tap feedback; the flash followed the invisible input's shape (2026-09-25) */
.filters .chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.95rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--card);
  border: 1.5px solid var(--rule-strong);
  border-radius: 999px;
  cursor: pointer;
}
@media (hover: hover) { .filters .chip:hover input:not(:checked) + span { border-color: var(--ink); color: var(--ink); } }
.filters input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters input:focus-visible + span { outline: 3px solid var(--brass-ink); outline-offset: 2px; }
.filters-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main:has(#f-customers:checked) .work:not([data-tags~="customers"]),
main:has(#f-paperwork:checked) .work:not([data-tags~="paperwork"]),
main:has(#f-private:checked) .work:not([data-tags~="private"]),
main:has(#f-apps:checked) .work:not([data-tags~="apps"]),
main:has(#f-family:checked) .work:not([data-tags~="family"]) { display: none; }

.works { padding-top: 0; margin-top: -1px; }
html:has(.filters) { scroll-padding-top: calc(var(--header-h) + 88px); }
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head vis" "shop vis" "more vis";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.5rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.works > .work:first-of-type { border-top: 0; }
.work-head { grid-area: head; padding-bottom: 1.1rem; display: flex; flex-direction: column; }
.work-kicker { order: -1; }
.work-visual { grid-area: vis; align-self: center; margin: 0; container-type: inline-size; }
.work-shop { grid-area: shop; }
.work > .more { grid-area: more; align-self: start; }
.work-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0 0 0.8rem;
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.work-status {
  padding: 0.2rem 0.55rem;
  font-stretch: 100%;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}
.work h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); margin-bottom: 0.7rem; }
.work-hook { font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.28rem); line-height: 1.5; color: var(--ink-2); margin: 0 0 1.1rem; }
.work-shop {
  margin: 0;
  padding: 0.95rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  border-radius: 6px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}
.work-shop strong { font-family: var(--sans); font-weight: 800; font-size: 0.72rem; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink); display: block; margin-bottom: 0.2rem; }
.runs-on { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--rule); font-family: var(--sans); font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.runs-on strong { color: var(--ink-2); }
.work-visual figcaption { margin-top: 0.9rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); text-align: center; }

.toolbelt { max-width: 760px; }
.toolbelt .more-body li { display: grid; gap: 0.1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--dark-rule); }
.toolbelt .more-body li strong { font-family: var(--sans); color: var(--on-dark); font-weight: 700; }

/* ---------- Visual kit for the Built entries (made-up data, drawn in CSS) ---------- */

.v { position: relative; font-family: var(--sans); color: var(--ink); }

/* A small phone frame, shaped like a real phone (9 by 19.5) */
.v-phone {
  display: flex;
  width: min(100%, 190px);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  padding: 5px;
  background: #0e0d0b;
  border-radius: 24px;
  box-shadow: 0 30px 50px -30px rgba(20, 19, 17, 0.7);
}
.v-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.6rem 0.55rem 0.6rem;
  background: #f8f6f1;
  border-radius: 19px;
  position: relative;
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.35;
}
.v-screen::before { content: ""; position: absolute; top: 7px; left: 50%; width: 34%; height: 11px; transform: translateX(-50%); background: #0e0d0b; border-radius: 8px; }

/* A website and a phone side by side (the one-sign-in entry) */
.v-devices { display: grid; grid-template-columns: minmax(0, 1fr) 28%; gap: 0.75rem; align-items: end; max-width: 440px; margin-inline: auto; }
.v-devices .v-phone { width: 100%; }
.v-browser { background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 40px -30px rgba(20, 19, 17, 0.6); }
.v-browser-bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.v-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.v-browser-bar .v-url { flex: 1; height: 10px; margin-left: 6px; background: #fff; border: 1px solid var(--rule); border-radius: 5px; }
.v-browser-body { display: grid; gap: 0.6rem; align-content: start; padding: 0.7rem 0.8rem 1.4rem; }
.v-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 0.65rem; padding-bottom: 0.45rem; list-style: none; border-bottom: 1px solid #e3ddd0; font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.v-nav li.on { color: var(--ink); text-decoration: underline 2px var(--brass); text-underline-offset: 4px; }
.v-signed { justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; font-size: 0.6rem; font-weight: 800; color: var(--brass-ink); background: #fffaf0; border: 1px solid var(--brass); border-radius: 999px; }
.v-signed .i { width: 0.7rem; height: 0.7rem; }
.v-screen .v-signed { font-size: 0; gap: 0; padding: 0.2rem; }
.v-screen .v-signed .i { width: 0.6rem; height: 0.6rem; }
.v-screen .v-lines span { height: 0.34rem; }
.v-dots { margin-top: auto; display: flex; justify-content: space-between; padding: 0.45rem 0.35rem 0; list-style: none; border-top: 1px solid #e3ddd0; }
.v-dots li { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #d5cebd; }
.v-dots li.on { background: var(--ink); }
@container (max-width: 380px) { .v-nav { font-size: 0.6rem; gap: 0.2rem 0.5rem; } }
.v-bubble { max-width: 86%; padding: 0.5rem 0.7rem; border-radius: 15px; }
.v-bubble--in { align-self: flex-start; background: #e6e0d3; border-bottom-left-radius: 5px; }
.v-bubble--out { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; }
.v-lines { display: grid; gap: 0.35rem; }
.v-lines span { display: block; height: 0.42rem; background: #ddd6c7; border-radius: 4px; }
.v-lines span:nth-child(2) { width: 88%; }
.v-lines span:nth-child(3) { width: 94%; }
.v-lines span:nth-child(4) { width: 70%; }
.v-lines span.hi { background: var(--brass-light); }
.v-play { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; font-weight: 700; color: var(--muted); }
/* The app picture's bar reads as a job's progress (Daegan 2026-09-24: owners don't care about the media player), so no play arrow. */
.v-play span { flex: 1; height: 4px; background: linear-gradient(90deg, var(--brass) 40%, #ddd6c7 40%); border-radius: 2px; }

/* Steps: stacked on narrow visuals, a row when there is room */
.v-flow { list-style: none; display: grid; gap: 0.35rem; counter-reset: vflow; max-width: 360px; margin-inline: auto; }
.v-flow > li {
  position: relative;
  padding: 0.75rem 0.9rem 0.75rem 2.9rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.4;
  counter-increment: vflow;
}
.v-flow > li::before {
  content: counter(vflow);
  position: absolute;
  left: 0.8rem; top: 0.72rem;
  display: grid; place-items: center;
  width: 1.45rem; height: 1.45rem;
  background: var(--ink); color: var(--paper);
  font-size: 0.72rem; font-weight: 800;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}
.v-flow > li + li::after {
  content: "";
  position: absolute;
  left: 1.52rem; top: -0.42rem;
  width: 2px; height: 0.45rem;
  background: var(--brass);
}
.v-flow > li.hot { border-color: var(--brass); background: #fffaf0; }
.v-flow small { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--muted); }
.v-flow .v-chips { margin-top: 0.45rem; }

.v-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; }
.v-chips li { padding: 0.25rem 0.55rem; font-size: 0.74rem; font-weight: 700; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; }
.v-chips li.hot { background: var(--brass-light); border-color: var(--brass-light); }
.v-checks { list-style: none; display: grid; gap: 0.4rem; max-width: 420px; margin: 0.9rem auto 0; font-size: 0.88rem; }
.v-checks li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.5rem; align-items: start; }
.v-checks .i { width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; color: var(--brass); }
.v-checks--card { max-width: 340px; margin-top: 0; padding: 1rem 1.1rem; gap: 0.7rem; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; font-size: 0.95rem; }

.v-pair { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); gap: 0.4rem; align-items: center; max-width: 420px; margin-inline: auto; }
.v-pair + .v-pair { margin-top: 1.1rem; }
.i.v-pair-arrow { width: 1.5rem; height: 1.5rem; color: var(--brass); }
.v-tile { position: relative; aspect-ratio: 4 / 5; padding: 0.8rem 0.7rem; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 10px 22px -18px rgba(20, 19, 17, 0.55); overflow: hidden; }
.v-tile-label { display: block; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 700; text-align: center; color: var(--ink-2); }
.v-pair .v-tile { aspect-ratio: 1 / 1; }
.v-scraps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.v-scraps span { height: 0.9rem; background: #e3ddd0; border-radius: 2px; }
.v-scraps span:nth-child(3n) { transform: rotate(-6deg); }
.v-scraps span:nth-child(4n+1) { transform: rotate(5deg); width: 80%; }
.v-cards { display: grid; gap: 4px; }
.v-cards span { height: 1.05rem; background: #fff; border: 1px solid var(--rule-strong); border-left: 3px solid var(--brass); border-radius: 3px; }
.v-qa { display: grid; gap: 0.4rem; max-width: 340px; margin: 1rem auto 0; font-size: 0.86rem; }
.v-source { justify-self: end; font-size: 0.7rem; font-weight: 700; color: var(--brass-ink); }

/* The private-at-home diagram (inline SVG, classes only) */
.v-house { width: 100%; max-width: 340px; margin-inline: auto; display: block; }
.v-house text { font-family: var(--sans); font-weight: 600; fill: var(--ink-2); }
.v-house .t-lab { font-size: 13px; }
.v-house .t-sm { font-size: 10.5px; fill: var(--muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.v-house .s-line { stroke: var(--ink); stroke-width: 1.75; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.v-house .s-dash { stroke: var(--brass); stroke-width: 2; fill: none; stroke-dasharray: 5 6; stroke-linecap: round; }
.v-house .s-box { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.v-house .s-fill { fill: var(--ink); }
.v-house .s-log { fill: #fff; stroke: var(--brass); stroke-width: 1.5; }
.v-house .s-brass { fill: var(--brass); }
.v-house .s-check { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.v-chart { max-width: 360px; }
.v-house .s-dot { fill: var(--brass); }
/* The offline-model computer: a screen, chat bubbles like .v-bubble, and a brass slash through the Wi-Fi. The halo is the
   section's own color, so the slash cuts cleanly through the arcs. */
.v-house .s-screen { fill: #fff; stroke: var(--rule); stroke-width: 1; }
.v-house .s-bub { fill: #e6e0d3; }
.v-house .t-inv { fill: var(--paper); }
.v-house .s-halo { stroke: var(--paper-2); stroke-width: 8; fill: none; stroke-linecap: round; }
.v-house .s-hot { fill: #fffaf0; stroke: var(--brass); stroke-width: 1.5; }
.v-house .s-chip { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
.v-house .t-chip { font-size: 11px; font-weight: 700; fill: var(--ink-2); }
.v-house .s-doc { fill: #fff; stroke: var(--brass); stroke-width: 1.5; stroke-linejoin: round; }
.v-house .s-check-inv { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-house .s-slash { stroke: var(--brass); stroke-width: 3.2; fill: none; stroke-linecap: round; }
.v .fx-dot { opacity: 0; } /* the travelling dot is motion only; a still picture doesn't show it */

/* The writing entry's page: lines checked one by one, then a stamp */
.v-doc { position: relative; max-width: 300px; margin-inline: auto; padding: 1.3rem 1.3rem 3.6rem; background: #fff; border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 14px 28px -20px rgba(20, 19, 17, 0.55); }
.v-doc-title { display: block; width: 55%; height: 0.6rem; margin-bottom: 1.1rem; background: var(--ink-2); border-radius: 3px; opacity: 0.8; }
.v-doc-lines { list-style: none; display: grid; gap: 0.8rem; }
.v-doc-lines li { display: grid; grid-template-columns: minmax(0, 1fr) 1.2rem; align-items: center; gap: 0.8rem; }
.v-doc-lines li > span:first-child { height: 0.42rem; background: #ddd6c7; border-radius: 4px; }
.v-doc-lines li:nth-child(2) > span:first-child { width: 86%; }
.v-doc-lines li:nth-child(4) > span:first-child { width: 92%; }
.v-doc-lines li:nth-child(5) > span:first-child { width: 62%; }
.v-doc-check { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; color: var(--brass); }
.v-doc-check .i { width: 1.1rem; height: 1.1rem; }
.v-stamp { position: absolute; right: 1.1rem; bottom: 1rem; padding: 0.3rem 0.75rem; font-weight: 900; font-stretch: 125%; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink); background: #fffaf0; border: 2px solid var(--brass); border-radius: 6px; transform: rotate(-8deg); }

/* ---------- Built pictures: a short, quiet play-through when each scrolls into view (Daegan 2026-09-24).
   site.js arms each picture (v-armed) and starts it (fx-go) once it's on screen. With reduced motion or no JS nothing is
   armed, so every picture simply shows finished; print never runs it. Steps (t1 to t9) are 0.18s apart; every effect was made
   a third quicker than the first cut (Daegan 2026-09-24: about 30 to 40 percent too slow for someone scrolling), then eased back
   a touch and softened (Daegan 2026-09-25, on his phone: the pop-ups read a little jarring and quick): pieces pop from 90
   percent in 0.4s instead of 80 percent in 0.25s, and drawn pieces grow in place from their own centre (they used to grow from
   the picture's top-left corner, so they slid in diagonally). The caption still lands last. ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .v-armed :is(.fx-in, .fx-pop, .fx-stamp) { opacity: 0; }
  .v-armed .fx-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.5; } /* the gap covers the whole line, so no round cap shows early */
  .v-armed .fx-grow { transform: scaleX(0); transform-origin: left center; }
  .v-armed .fx-bar { background: linear-gradient(var(--brass), var(--brass)) 0 0 / 0% 100% no-repeat, #ddd6c7; }
  .v-house :is(.fx-in, .fx-pop, .fx-dot) { transform-box: fill-box; transform-origin: center; }
  .work-visual svg :is(.fx-pop, .fx-press) { transform-box: fill-box; transform-origin: center; } /* grow in place, not from the corner */
  .v-armed.fx-go .fx-in { animation: fx-in 0.42s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
  .v-armed.fx-go .fx-pop { animation: fx-pop 0.4s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
  .v-armed.fx-go .fx-draw { animation: fx-draw 0.4s ease-out both; }
  .v-armed.fx-go .fx-dot { animation: fx-dot 0.6s ease-in-out both; }
  .v-armed.fx-go .fx-grow { animation: fx-grow 0.52s ease-out both; }
  .v-armed.fx-go .fx-bar { animation: fx-bar 0.65s ease-out both; }
  .v-armed.fx-go .fx-press { animation: fx-press 0.35s ease-out both; }
  .v-armed.fx-go .fx-stamp { animation: fx-stamp 0.38s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
  .v-armed > figcaption { opacity: 0; }
  .v-armed.fx-go > figcaption { animation: fx-in 0.42s cubic-bezier(0.25, 0.8, 0.3, 1) 1.57s both; }
  .v-armed.fx-go .t1 { animation-delay: 0s; }
  .v-armed.fx-go .t2 { animation-delay: 0.18s; }
  .v-armed.fx-go .t3 { animation-delay: 0.37s; }
  .v-armed.fx-go .t4 { animation-delay: 0.55s; }
  .v-armed.fx-go .t5 { animation-delay: 0.73s; }
  .v-armed.fx-go .t6 { animation-delay: 0.91s; }
  .v-armed.fx-go .t7 { animation-delay: 1.1s; }
  .v-armed.fx-go .t8 { animation-delay: 1.28s; }
  .v-armed.fx-go .t9 { animation-delay: 1.46s; }
}
/* Landing on Built (2026-09-25): a phone can draw the page's first frame 0.1-0.2 s before site.js runs, and a picture on
   screen then showed finished, went blank and played, inside the page crossfade. With scripting on, its pieces start
   hidden, just as site.js is about to arm them; when it runs (html.js, in the same moment as v-armed) the rules above take
   over with no visible change. If site.js never runs, they show at 3 s in one step. With no script at all, nothing hides. */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.js) .work-visual :is(.fx-in, .fx-pop, .fx-stamp, .fx-draw, .fx-grow),
  html:not(.js) .work-visual > figcaption { opacity: var(--fx-shown, 0); }
  html:not(.js) .work-visual .fx-bar { background: linear-gradient(var(--brass), var(--brass)) 0 0 / var(--fx-bar, 0%) 100% no-repeat, #ddd6c7; }
  html:not(.js) .works { animation: fx-failsafe 0s 3s forwards; }
}
@keyframes fx-failsafe { from, to { --fx-shown: 1; --fx-bar: 40%; } }
.dot-36 { --dy: 36px; }
.dot-60 { --dy: 60px; }
@keyframes fx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-dot { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; transform: translateY(var(--dy)); } 100% { opacity: 0; transform: translateY(var(--dy)); } }
@keyframes fx-grow { to { transform: none; } }
@keyframes fx-bar { to { background-size: 40% 100%, auto; } }
@keyframes fx-press { 0%, 100% { transform: none; } 45% { transform: scale(0.9); } }
@keyframes fx-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.06); } to { opacity: 1; transform: rotate(-8deg); } }
/* Phones and narrow screens (Daegan 2026-09-25, on his phone): every piece moves once. Where a piece sat inside another
   piece that was still moving, it moved twice (number 6's rows rising inside a rising card, with checks popping inside
   rising rows; number 12's chips rising inside a rising box; the first badges on 8 and 9). So a box whose pieces rise
   fades in place while its pieces rise, and a check or badge that appears while its row is still rising rides the row.
   Everything else keeps its rise and pop; desktop is unchanged. (Fading every piece was tried and was worse.) */
@media screen and (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .v-armed.fx-go .fx-in:has(.fx-in) { animation-name: fx-fade; }
  .v-armed.fx-go .v-checks .fx-pop,
  .v-armed.fx-go .fx-in.t1 .fx-pop:is(.t2, .t3) { animation-name: fx-fade; }
}
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
/* Phones, the pictures built from boxes (#01, #03, #06, #07, #08, #09, #12): a box floats up over 0.7 s on a soft curve
   instead of reaching full strength in a tenth of a second, which on a narrow screen read as a pop (Daegan 2026-09-25:
   "they kind of just pop in"). Pieces of the drawn pictures, and every picture on desktop, are unchanged. */
@media screen and (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .v-armed.fx-go :is(div, li, p).fx-in { animation-name: fx-rise; animation-duration: 0.75s; animation-timing-function: cubic-bezier(0.35, 0, 0.3, 1); }
}
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(12px); } 65% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* An entry with no picture: the words take the row */
.work--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "shop" "more"; grid-template-rows: none; }
.work--text > * { max-width: 760px; }

/* ---------- Round 2: contact ---------- */

.reach-card { padding: 1.4rem 1.4rem 1.5rem; background: var(--dark); color: var(--on-dark); border-radius: 12px; }
@media (max-width: 900px) {
  .side-stack { display: contents; }
  .contact-grid > .reach-card { order: 0; }
  .side-stack > .side-card:nth-child(2) { order: 1; }
  .contact-grid > .form-card { order: 2; }
  .side-stack > .side-card--dark { order: 3; }
  .side-stack > .side-card:nth-child(3) { order: 4; }
}
.contact-grid > .reach-card { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; }
.reach-card p:last-child { margin-bottom: 0; }
.reach-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.reach-actions .tel-big { margin: 0; }
.reach-row .btn .i { width: 1.1em; height: 1.1em; }
.next-note { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule); font-size: 0.95rem; color: var(--muted); }
.reach-card h2 { font-size: 1.15rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.reach-card p { color: var(--on-dark-muted); font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
.reach-card .tel-big { display: block; margin-bottom: 1rem; font-family: var(--sans); font-weight: 800; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); letter-spacing: -0.01em; color: var(--on-dark); text-decoration-color: var(--brass-light); }

/* ---------- Round 2: responsive ---------- */

@media (max-width: 1080px) {
  .built-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .steps--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .reframe { grid-template-columns: minmax(0, 1fr); }
  .fair,
  .not-list { grid-template-columns: minmax(0, 1fr); }
  .demo-grid { grid-template-areas: "head" "phone" "rest"; grid-template-rows: none; }
  /* Stacked, the checklist is the phone's caption: centered under it, clear of its shadow (Daegan 2026-09-24: it sat
     against the left edge and felt off). Desktop unchanged. */
  .demo-rest { margin-top: 1rem; justify-self: center; }
  /* A tighter shadow under the stacked phone, so the checklist sits on clean paper, not in the shadow's tail. */
  .demo-grid .phone { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 34px -20px rgba(20, 19, 17, 0.6); }
  .work { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "shop" "vis" "more"; grid-template-rows: none; }
  .work-visual { margin: 1.4rem 0 0.4rem; }
  .work { padding-block: 2.25rem 1.5rem; }
  .panel-actions { min-width: 0; }
}
@media (max-width: 700px) {
  .built-cards.rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.5rem var(--gutter) 1rem;
    scrollbar-width: thin;
  }
  .built-cards.rail > * { scroll-snap-align: start; }
  .rail-more { display: block; }
}
@media (max-width: 600px) {
  .bizcard--back { display: none; }
  .hero .cards { max-width: 260px; aspect-ratio: 3.5 / 2.35; }
  .bizcard--front { top: 4%; left: 3%; width: 94%; }
  /* Phones: the good-fit list as two tidy columns, same brass bullets as desktop, normal capitals so long names wrap cleanly (Daegan 2026-09-24). */
  .strip .strip-inner { display: block; padding-block: 1.15rem 1.3rem; }
  .strip-inner .strip-label { display: block; margin-bottom: 0.8rem; }
  .strip-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.1rem; }
  .strip-list li { align-items: flex-start; gap: 0.55rem; text-transform: none; letter-spacing: 0; font-size: 0.97rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
  .strip-list li { text-wrap: balance; }
  .strip-list li::before { width: 12px; height: 12px; margin: 4px 0 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpolygon%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'4'%20points%3D'7.86%2C2%2016.14%2C2%2022%2C7.86%2022%2C16.14%2016.14%2C22%207.86%2C22%202%2C16.14%202%2C7.86'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpolygon%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'4'%20points%3D'7.86%2C2%2016.14%2C2%2022%2C7.86%2022%2C16.14%2016.14%2C22%207.86%2C22%202%2C16.14%202%2C7.86'%2F%3E%3C%2Fsvg%3E"); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier { padding: 1rem 0.9rem; }
  .tier-price { font-size: 1.35rem; }
  .reach-actions,
  .reach-row { width: 100%; }
  .reach-row .btn { flex: 1 1 0; }
}

/* ---------- Icons ---------- */

.i { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero-grid,
.demo-grid,
.about-grid,
.contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: 2; }
  .cards { max-width: 400px; }
  .built-cards { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-template-columns: minmax(0, 1fr); box-shadow: 7px 7px 0 var(--brass); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .portrait { position: static; flex-direction: row; align-items: center; }
  .portrait-frame { flex: 0 0 38%; aspect-ratio: auto; padding: 8%; }
  .portrait-card { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .rules,
  .systems { grid-template-columns: minmax(0, 1fr); }
  .fineprint { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  :root { --header-h: 68px; }
  .brand-mark { width: 52px; }
  .brand-name { font-size: 1rem; }
  .steps,
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { flex: 1 1 100%; }
  .offer-top { flex-direction: column; }
  .price { text-align: left; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait { flex-direction: column; align-items: stretch; }
  .portrait-frame { flex: none; aspect-ratio: auto; padding: 1rem 28%; }
  .phone-screen { min-height: 560px; }
  .hero { padding-bottom: 2rem; }
  .hero-grid { gap: 1.75rem; }
  .strip-inner { justify-content: flex-start; }
}

/* Small phones: keep the name in the header as long as it fits beside the button and menu. */
@media (max-width: 374px) {
  .brand-place { display: none; }
  .brand-mark { width: 44px; }
  .brand-name { font-size: 0.9rem; white-space: nowrap; }
  .site-nav > .btn { padding: 0.55em 0.7em; font-size: 0.88rem; }
}
@media (max-width: 359px) {
  .brand-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header,
  .site-footer,
  .hero-art,
  .phone-wrap { display: none; }
  body { background: #fff; }
}

/* Windows high-contrast: keep the chosen filter, the plus/minus marks and the menu bars visible. */
@media (forced-colors: active) {
  .filters input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .pm::before,
  .pm::after,
  .faq summary .pm::before,
  .faq summary .pm::after,
  .nav-mobile summary .bars::before,
  .nav-mobile summary .bars::after,
  .nav-mobile summary .bars span { forced-color-adjust: none; background: CanvasText; }
}

/* Short screens (a phone on its side, or 400% zoom): the header and filter bar scroll away instead of covering half the page. */
@media (max-height: 30em) {
  .site-header,
  .filters { position: relative; top: auto; }
  html,
  html:has(.filters) { scroll-padding-top: 1rem; }
}

/* Email first (Daegan 2026-09-24): the address can break anywhere rather than push a narrow screen sideways. */
.addr { overflow-wrap: anywhere; }
.text-link > span { min-width: 0; }
.reach-card .mail-big { font-size: clamp(1.05rem, 0.8rem + 1.5vw, 1.6rem); overflow-wrap: anywhere; }
.contact-grid > .reach-card { padding-bottom: 0.5rem; }
.reach-card > .copy-status { flex-basis: 100%; margin: 0; min-height: 0; color: var(--brass-light); }
.side-card--dark .email-big { margin-top: 0; }
.contact-grid > .reach-card > div:first-child { flex: 1 1 14rem; }
.reach-card .reach-actions { flex-shrink: 0; max-width: 100%; }
.reach-card .reach-row .btn { flex: 1 1 auto; padding-inline: 1.1em; white-space: nowrap; }

/* Final regression fixes (2026-09-23) */
@media (min-width: 901px) and (min-height: 44em) { .portrait { position: sticky; } }
.faq summary { text-wrap: pretty; }
.systems .sys-price { display: block; margin-top: 0.35rem; font-family: var(--sans); font-weight: 700; font-size: 0.98rem; color: var(--brass-light); }
.not-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
#rules-title { color: var(--ink-2); }

@media (min-width: 1081px) {
  .built-cards--4 { grid-template-rows: auto 1fr; }
  .built-cards--4 > .built-card { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
}

.page-hero .steps,
#promises .not-list { max-width: 58rem; }
/* Services: the three steps sit under the lead, and "It starts free, and you can stop after any step." closes them with a
   brass check (Daegan 2026-09-25: at the bottom of the three steps). */
.page-hero .lead + .steps { margin-top: clamp(2rem, 4.5vw, 3rem); }
.steps-note { display: flex; align-items: flex-start; gap: 0.55rem; margin: 1.35rem 0 0; font-family: var(--sans); font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.steps-note .i { width: 1.25em; height: 1.25em; flex: none; margin-top: 0.03em; color: var(--brass); stroke-width: 2.6; } /* as heavy as the bold words beside it */
.steps-note span { text-wrap: balance; } /* on a phone it breaks into two even lines */
#promises .section-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.page-hero .step-card:target { box-shadow: inset 4px 0 0 var(--brass); }

@media (max-width: 760px) {
  /* Compact step cards in the Services hero: octagon left, words right. */
  .page-hero .step-card { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.45rem; align-items: start; padding: 1.1rem 1rem 1.15rem; }
  .page-hero .step-card .oct { grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; font-size: 0.95rem; }
  .page-hero .step-card > :not(.oct) { grid-column: 2; }
}

/* The Services steps stay three across on tablets (a later two-across rule for four-step lists outranked them). */
@media (min-width: 761px) and (max-width: 1080px) { .page-hero .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- How it goes: the price ladder (Services top and Home "How it goes"; Daegan picked it 2026-09-25) ----------
   Each step leads with its price, set like the price list below: Free (brass), then $750, then Per job, with its terms
   under it (the old tags' own words). One brass line runs through the three octagons, so the steps read as one path taken
   in order: across from 761 px, down the octagon column at 760 px and under, fading out after step 3. Each card owns its
   piece, so a pressed Home card takes its piece with it. Pieces after the first start 1px out, over their own border, and
   the piece before reaches 1px onto that border, so the line never breaks at a card edge. The credit sentence gets a 2px
   brass line under the whole sentence, painted as a background so it can be drawn: Source Serif 4 descends 0.335em, so
   padding-bottom 2px - 0.055em lands it on the pixels of a 2px underline at 0.28em (and it clears the y at 0.26em).
   site.js draws the path, then the credit line, once each, in view. Reduced motion, no script, print and forced colors
   show both finished. */
.ladder { --ladder-gap: 1.25rem; gap: var(--ladder-gap); }
.ladder > .step-card { --rail-t: 0.3s; --rail-at: 0s; }
.ladder > .step-card::before { content: ""; position: absolute; pointer-events: none; background: var(--brass); }
.ladder .oct { position: relative; z-index: 1; pointer-events: none; } /* over the line; a tap still reaches the card's link */
.ladder .step-price { margin: 0; font-family: var(--sans); line-height: 1.1; color: var(--ink); }
.ladder .step-price .price-big { word-spacing: 0.08em; } /* "Per job": the j tucks under the r at this weight */
.ladder .step-price--free .price-big { color: var(--brass-ink); }
/* Arriving from a link (/services/#look, #checkup): that step's octagon lights on the path, in place of the inset bar,
   which would otherwise run beside the line on phones. */
.page-hero .ladder > .step-card:target { box-shadow: none; }
.ladder > .step-card:target .oct { color: var(--brass-light); } /* its number lights brass; a brass octagon read as a stop sign */
.key-line {
  font-weight: inherit;
  padding-bottom: calc(2px - 0.055em);
  background: linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 2px no-repeat;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice; /* one strip across the wrapped lines, so it draws as one stroke in reading order */
}

/* Three across from 761 px. Rows are shared across the cards, so every price, title and paragraph starts on one line even
   when a title wraps. */
@media (min-width: 761px) {
  .steps.ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); row-gap: 0; }
  .ladder > .step-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .ladder > .step-card > .oct { grid-row: 1; }
  .ladder > .step-card > .step-price { grid-row: 2; margin-top: 1.05rem; }
  .ladder > .step-card > h3 { grid-row: 3; margin: 1.1rem 0 0; }
  .ladder > .step-card > p:not(.step-price) { grid-row: 4; margin-top: 0.6rem; }
  /* At the octagons' middle (1.6rem padding + half a 3rem octagon): out of octagon 1, over each card edge and gap, and a
     5rem tail after octagon 3. */
  .ladder > .step-card::before { top: calc(3.1rem - 1px); height: 2px; left: -1px; right: calc(-1 * (var(--ladder-gap) + 2px)); transform-origin: 0 50%; }
  .ladder > .step-card:first-child::before { left: calc(4.4rem - 1px); }
  .ladder > .step-card:last-child::before { right: auto; width: calc(9.4rem + 1px); background: linear-gradient(90deg, var(--brass) calc(4.4rem + 1px), transparent); }
}

/* 760 px and under: stacked on both pages, the compact card (octagon left, price centred on it, words right), and the line
   down the octagon column, through each gap, fading out below step 3. */
@media (max-width: 760px) {
  .steps.ladder { grid-template-columns: minmax(0, 1fr); }
  .ladder > .step-card { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0; align-items: start; padding: 1.1rem 1rem 1.15rem; }
  .ladder > .step-card > .oct { grid-column: 1; grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; font-size: 0.95rem; }
  .ladder > .step-card > .step-price { grid-column: 2; grid-row: 1; }
  .ladder > .step-card > h3 { grid-column: 2; grid-row: 2; margin: 0.7rem 0 0; }
  .ladder > .step-card > p:not(.step-price) { grid-column: 2; grid-row: 3; margin-top: 0.4rem; }
  .ladder .step-price .price-big { display: flex; align-items: center; min-height: 2.25rem; }
  .ladder .step-price .price-note { margin-top: 0; }
  .ladder > .step-card::before { width: 2px; left: calc(2.125rem - 1px); top: -1px; bottom: calc(-1 * (var(--ladder-gap) + 2px)); transform-origin: 50% 0; }
  .ladder > .step-card:first-child::before { top: calc(3.35rem - 1px); }
  .ladder > .step-card:last-child::before { bottom: auto; height: calc(8.35rem + 1px); background: linear-gradient(180deg, var(--brass) calc(3.35rem + 1px), transparent); }
}

/* Drawn once, armed by site.js, which times each card's piece so the path is one steady stroke, then takes the classes
   off when it's done (so nothing replays on a rotate). Transform and background-size only. */
/* Each card's piece is armed and drawn on its own (site.js sets its length-timed duration, start and easing), so on phones
   a piece can wait for its card to come on screen. */
@media screen and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .ladder > .step-card.is-armed::before { transform: scaleX(0); }
  .ladder > .step-card.is-armed.is-in::before { animation-name: ladder-x; }
}
@media screen and (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .ladder > .step-card.is-armed::before { transform: scaleY(0); }
  .ladder > .step-card.is-armed.is-in::before { animation-name: ladder-y; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .ladder > .step-card.is-armed.is-in::before { animation-duration: var(--rail-t, 0.3s); animation-timing-function: var(--rail-ease, linear); animation-delay: var(--rail-at, 0ms); animation-fill-mode: both; }
  .key-line.is-armed { background-size: 0% 2px; }
  .key-line.is-armed.is-in { animation: ladder-ink var(--draw-t, 0.6s) cubic-bezier(0.45, 0, 0.3, 1) var(--draw-wait, 0ms) both; }
}
/* The page's first frame can come before site.js runs: with scripting on, the lines start hidden, just as site.js is
   about to arm them, so they never show finished, vanish, then draw. If site.js never runs, they show at 3 s in one step.
   With no script at all, nothing hides. */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.js) .ladder > .step-card::before { opacity: var(--ladder-shown, 0); }
  html:not(.js) .ladder .key-line { background-size: calc(var(--ladder-shown, 0) * 100%) 2px; }
  html:not(.js) .ladder { animation: ladder-failsafe 0s 3s forwards; }
}
@keyframes ladder-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ladder-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ladder-ink { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
/* About (Daegan 2026-09-25): "In Texarkana, the AI guy is me, Daegan Carey." gets the brass line the Checkup's credit
   sentence has, drawn once as the page opens, starting with the line under "AI guy." on Home (0.35 s in, the same curve) but
   over 1.2 s: it is about three times as long, and at 0.8 s it raced (Daegan 2026-09-25); 1.2 s is about 340 px a second
   on a phone, near the "AI guy." line's feel. It's the one thing that moves up top. CSS only, so it never waits on site.js; with motion turned down it's simply
   there. (Contact had one too, under "There's nothing to prepare, and nothing to sign.", taken off on his word. Only About's
   page-top lead carries a key-line now; the ladders' lines are drawn by site.js.) */
@media screen and (prefers-reduced-motion: no-preference) {
  .page-hero .lead .key-line { animation: ladder-ink 1.2s cubic-bezier(0.45, 0, 0.3, 1) 0.35s both; }
}
@keyframes ladder-failsafe { from, to { --ladder-shown: 1; } }
@media print {
  .key-line { background: none; text-decoration-line: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
}
@media (forced-colors: active) {
  .ladder > .step-card::before { forced-color-adjust: none; background: CanvasText; }
  .key-line { background: none; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
}

/* The short version under the Services steps (Daegan's idea, 2026-09-25): a few checked points in the one place the
   closing line sat, taking turns. Each new point swoops in from the right as its check draws, holds, then slips out to
   the left; the list keeps the height of its tallest point, so nothing below it moves. Turns only while it's on screen,
   and waits while a mouse is over it. Reduced motion or no script: the points simply stand as a list. */
.steps-notes { list-style: none; margin: clamp(2rem, 1.8rem + 0.5vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0.6rem; overflow-x: clip; } /* a point waiting off to the right never widens the page */
.steps-notes > .steps-note { margin: 0; }
.steps-note .note-check { display: flex; flex: none; margin-top: 0.03em; } /* the check's own box, so it can pop on the graphics chip */
.steps-note .note-check .i { margin-top: 0; }
/* The checked points close the Services top, so give them the same air below as the band that follows has above its label
   (phones: 56 px, where the plain page top would leave 40). */
.page-hero:has(.steps-notes) { padding-bottom: clamp(3.1rem, 5.4vw, 3.9rem); } /* the points sit a little lower under the steps (Daegan: a little too high), balanced below */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .steps-notes { gap: 0; }
  .steps-notes > .steps-note { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateX(1.75rem); transition: opacity 0.5s ease-out, transform 0.7s cubic-bezier(0.25, 0.8, 0.3, 1); }
  .steps-notes:not(.is-live) > .steps-note:first-child, .steps-notes > .steps-note.is-on { opacity: 1; transform: none; }
  .steps-notes > .steps-note.is-off { opacity: 0; transform: translateX(-0.9rem); transition-duration: 0.32s, 0.4s; transition-timing-function: ease-in; }
  .steps-notes > .steps-note.no-t { transition: none; }
  .steps-notes > .steps-note.is-on { transition-delay: 0.32s; } /* the old point is nearly gone before the new one comes in */
  .steps-notes > .steps-note { will-change: transform, opacity; }
  .steps-notes.is-first > .steps-note.is-on .note-check { animation-delay: 0.45s; } /* phones: the first check pops soon after the points go live */
  /* Once a point has settled (about a second after it swoops in), its check pops: up and a touch of a turn, a small bounce
     back, and still again, well before the point moves on (Daegan 2026-09-25: "once it's stagnant and sitting, if that check
     mark did a little something"). Transform only, on the check's own span. */
  .steps-notes > .steps-note.is-on .note-check { animation: note-pop 0.62s cubic-bezier(0.3, 0.7, 0.4, 1) 1.55s both; } /* each point on its own layer, so a turn never repaints: measured 104 ms per 6 s on a slowed phone, against 315 with the check redrawn */
}

/* The price list's stamp (Daegan, 2026-09-25): two sides, CHECKUP CREDIT / $750 OFF ANY SERVICE (the line under "$750
   off" matches the credit sentence's) and EVERY SERVICE / INSIDE 60 DAYS, turning over like a hanging sign about
   every 3.6 s while it's on screen (site.js). Built on the CLOSED Saturdays stamp's own proportions (3px border, 1.5px
   ring, bold letters) and drawn as plain 2D at rest, 3D only for the 0.6 s turn, so it's as crisp as that stamp; below
   1000 px, where its letters are smaller, it tilts 1 degree instead of 3.
   Wide screens: the top-right corner of the first price section. Below 1000 px: across the seam where the price list
   begins, a seal on the list's cover. It lands once only when it's scrolled to (never when a link lands you there).
   Reduced motion or no script: the front simply stands; screen readers get both sides as one line. */
.offer-group:has(> .credit-stamp) { position: relative; }
.credit-stamp { --tilt: -3deg; position: absolute; top: 1.9rem; right: 0.5rem; z-index: 1; display: grid; margin: 0; padding: 0; border: 0; outline: 0; background: none; transform: rotate(var(--tilt)); }
.credit-stamp .stamp-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.72rem 1.3rem 0.68rem; border: 3px solid var(--brass-ink); outline: 1.5px solid var(--brass-ink); outline-offset: 4px; border-radius: 8px; background: var(--paper); }
.credit-stamp .stamp-back { visibility: hidden; }
.credit-stamp.is-turning { perspective: 700px; }
.credit-stamp.is-turning .stamp-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.credit-stamp .stamp-big { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.55rem); letter-spacing: 0.08em; white-space: nowrap; }
.credit-stamp .stamp-small { font-size: 0.7rem; letter-spacing: 0.24em; white-space: nowrap; }
.credit-stamp .key-line { background-size: 100% 2px; padding-bottom: 2px; }
@media (max-width: 999px) {
  .credit-stamp { --tilt: -1deg; top: calc(-1 * var(--section) - 1.85rem); right: 0; } /* a smaller tilt keeps the smaller letters crisper */
  .credit-stamp .stamp-face { padding: 0.62rem 1.05rem 0.58rem; }
  .credit-stamp .stamp-big { font-size: 1.16rem; }
  .credit-stamp .stamp-small { font-size: 0.64rem; letter-spacing: 0.2em; }
}
@media (prefers-reduced-motion: no-preference) {
  .credit-stamp.is-armed { opacity: 0; transform: rotate(var(--tilt)) scale(1.08); }
  .credit-stamp.is-armed.is-in { animation: credit-stamp-land 0.4s cubic-bezier(0.25, 0.8, 0.3, 1) 0.1s both; }
  .credit-stamp.is-armed .key-line { background-size: 0% 2px; }
  .credit-stamp.is-armed.is-in .key-line { animation: credit-stamp-line 0.45s cubic-bezier(0.45, 0, 0.3, 1) 0.5s both; }
  .credit-stamp.is-lined .key-line { background-size: 0% 2px; }
  .credit-stamp.is-lined.is-in .key-line { animation: credit-stamp-line 0.45s cubic-bezier(0.45, 0, 0.3, 1) 0.15s both; }
}
@keyframes credit-stamp-land { from { opacity: 0; transform: rotate(var(--tilt)) scale(1.08); } to { opacity: 1; transform: rotate(var(--tilt)); } }
@keyframes credit-stamp-line { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
@media (forced-colors: active) { .credit-stamp .stamp-back { display: none; } }
@keyframes note-pop {
  0% { transform: none; }
  30% { transform: scale(1.32) rotate(-10deg); }
  55% { transform: scale(0.92) rotate(5deg); }
  76% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: none; }
}

/* Free catches the light (Daegan 2026-09-25): the footer labels' narrow glide, in the step's own brass on paper, once, about
   a second after the path and the credit line finish (site.js adds is-glint). At rest the gradient is one flat brass, the
   same color as before. Never for reduced motion. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ladder .step-price--free .price-big {
    width: fit-content;
    background: linear-gradient(100deg, #7a5416 0%, #7a5416 44%, #93692a 46.5%, #b98c40 48.5%, #d9b467 50%, #b98c40 51.5%, #93692a 53.5%, #7a5416 56%, #7a5416 100%) 84% 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ladder .step-price--free .price-big.is-glint { animation: free-glint 0.8s linear both; }
  }
}
@keyframes free-glint { 0% { background-position: 84% 0; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); } 100% { background-position: 16% 0; } }
@media (forced-colors: active) { .ladder .step-price--free .price-big { background: none; color: CanvasText; } }

/* The Automations systems with a real example open it on What we've built (Daegan 2026-09-25). The title is the link and
   the octagon is a second way in (hidden from screen readers, which get the title); a small muted arrow says so. Only
   those react (Daegan: move freely over the words without setting it off): hovered or pressed, the row lights the way
   the last system is lit at rest, brass octagon, brass title, and the arrow nudges. The two open-ended ones (what you
   already own, what you'd want built) have no example, so no link. */
.systems li:has(.sys-link) { position: relative; }
.systems .sys-link { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.systems .sys-oct { position: relative; display: block; width: fit-content; height: fit-content; border-radius: 10px; -webkit-tap-highlight-color: transparent; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.3, 1); }
.systems .sys-link { position: relative; display: inline-block; padding: 0.2rem 0; }
/* A bubble of room around the octagon and the title, and across the gap between them, so the row answers as the pointer
   comes near (Daegan 2026-09-25); it stops at the title's foot, so reading the words below never sets it off. */
.systems .sys-oct::after { content: ""; position: absolute; inset: -0.55rem -0.5rem -0.55rem -0.65rem; }
.systems .sys-link::after { content: ""; position: absolute; top: -0.55rem; bottom: -0.1rem; left: -1.15rem; right: -1rem; }
.systems li .sys-link .i { display: inline-block; width: 0.95rem; height: 0.95rem; margin: 0 0 0 0.35rem; vertical-align: -0.1em; color: var(--on-dark-muted); transition: transform 0.15s ease, color 0.15s ease; }
.systems li:has(.sys-link) .oct-bg { transition: fill 0.18s ease; }
.systems li:has(.sys-link) .oct-i, .systems li:has(.sys-link) strong { transition: color 0.18s ease; }
.systems li:has(a:is(:hover, :active)) .oct-bg , .systems li:has(.sys-link:focus-visible) .oct-bg { fill: var(--brass-light); }
.systems li:has(a:is(:hover, :active)) .sys-oct, .systems li:has(.sys-link:focus-visible) .sys-oct { transform: scale(1.08); }
.systems li:has(a:is(:hover, :active)) .oct-i , .systems li:has(.sys-link:focus-visible) .oct-i { color: var(--ink); }
.systems li:has(a:is(:hover, :active)) strong , .systems li:has(.sys-link:focus-visible) strong { color: var(--brass-light); }
.systems li:has(a:is(:hover, :active)) .sys-link .i , .systems li:has(.sys-link:focus-visible) .sys-link .i { transform: translateX(3px); color: var(--brass-light); }
.systems li:has(.sys-link:focus-visible) { outline: 3px solid var(--brass-light); outline-offset: 6px; border-radius: 10px; }
.systems .sys-link:focus-visible { outline: none; }

/* The Built page's top (Daegan 2026-09-25: inviting, with no added height and nothing more to read). A brass line draws
   under "built." as the page opens, the site's mark for what matters; the filter chips slide in from the right, which on
   a phone invites the swipe; the gap before the first build is tighter; and on wide screens three small cards from real
   builds, in their own words, sit fanned in the empty right side and open their entries. Motion runs once, on the
   graphics chip (transform, opacity) or as one background draw; reduced motion shows it all still. */
.h1-line { background: linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 0.075em no-repeat; padding-bottom: 0.03em; }
.hero h1 .h1-line { padding-bottom: 0.11em; } /* Home's "AI guy.": a little lower, so the g and y clear it */
/* Home's phone line: the same brass 2px line the link had, painted where its old underline sat, and still: it doesn't
   draw. On Home only the line under "AI guy." moves as the page opens; the dash before TEXARKANA stays still too
   (Daegan 2026-09-25). */
.hero-tel .text-link { text-decoration: none; }
.hero-tel .text-link > span:last-child { background: linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 2px no-repeat; } /* the line lands where the old underline did, and the words stay put */
@media (forced-colors: active) { .hero-tel .text-link { text-decoration: underline; } .hero-tel .text-link > span:last-child { background: none; } }
.page-hero + .section:has(.filters) { padding-top: clamp(2.25rem, 5vw, 5rem); }
.work-fan { display: none; }
/* The deck (Daegan 2026-09-25): three sets of three real builds; one set shows at a time, and site.js deals the next. */
.fan-card[data-set]:not([data-set="0"]) { visibility: hidden; }
@media (min-width: 1400px) { .page-hero:has(.work-fan) { overflow: clip; } } /* cards leaving over the top vanish at its edge */
/* From 1400 px there is room right of the words, with the page margin: the fan sits 2.5rem in from the window edge. The
   deck spans the window, so a set can land on either side: at 1920 px and up the sets take turns right and left (the left
   fan tucked a little closer to its edge); narrower, every set lands on the right. */
@media (min-width: 1400px) {
  .page-hero:has(.work-fan) .wrap { position: relative; }
  .work-fan { display: block; position: absolute; top: 50%; left: calc((100% - 100vw) / 2); width: 100vw; height: 17rem; translate: 0 -50%; pointer-events: none; }
  .fan-card { position: absolute; display: flex; flex-direction: column; gap: 0.55rem; width: 13rem; padding: 0.85rem 0.95rem 0.9rem; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--lift); color: var(--ink); text-decoration: none; font-family: var(--sans); pointer-events: auto; transition: translate 0.25s cubic-bezier(0.25, 0.8, 0.3, 1), box-shadow 0.25s ease; }
  .fan-card:hover { translate: 0 -6px; z-index: 4; box-shadow: 0 1px 1px rgba(20, 19, 17, 0.06), 0 26px 50px -24px rgba(20, 19, 17, 0.55); }
  /* a spread hand: the two back cards up high with their labels showing, the front one low and whole */
  .fan-a { right: 10.1rem; top: 0.9rem; rotate: -7deg; z-index: 1; }
  .fan-c { right: 2.5rem; top: 0; rotate: 7deg; z-index: 2; }
  .fan-b { right: 6.6rem; top: 7.4rem; rotate: -1.5deg; z-index: 3; }
  .fan-card.on-left { right: auto; }
  .fan-a.on-left { left: 8.2rem; rotate: 7deg; }
  .fan-c.on-left { left: 1rem; rotate: -7deg; }
  .fan-b.on-left { left: 4.8rem; rotate: 1.5deg; }
}
@media (max-width: 1919px) { .fan-card.on-left { visibility: hidden !important; } } /* the left margin is too narrow below 1920 px */
@media (min-width: 1400px) {
  .fan-label { font-size: 0.6rem; font-weight: 800; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink); }
  .fan-row { display: flex; gap: 0.35rem; }
  .fan-chip { padding: 0.25rem 0.55rem; border-radius: 6px; background: var(--paper-2); font-size: 0.72rem; font-weight: 700; color: var(--ink-2); }
  .fan-chip.is-on { background: var(--brass-light); color: var(--ink); }
  .fan-steps { display: grid; gap: 0.3rem; }
  .fan-steps span { position: relative; padding-left: 0.95rem; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
  .fan-steps span::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.42rem; height: 0.42rem; background: var(--brass); clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
  .fan-cap { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
}
@media (prefers-reduced-motion: no-preference) {
  .h1-line { animation: h1-line 0.8s cubic-bezier(0.45, 0, 0.3, 1) 0.35s both; }
  .filters .chip { animation: chip-in 0.45s cubic-bezier(0.25, 0.8, 0.3, 1) 0.3s both; }
  .filters .chip:nth-of-type(2) { animation-delay: 0.36s; }
  .filters .chip:nth-of-type(3) { animation-delay: 0.42s; }
  .filters .chip:nth-of-type(4) { animation-delay: 0.48s; }
  .filters .chip:nth-of-type(5) { animation-delay: 0.54s; }
  @media (min-width: 1400px) {
    .fan-a { animation: fan-a 0.7s cubic-bezier(0.25, 0.8, 0.3, 1) 0.25s both; }
    .fan-b { animation: fan-b 0.7s cubic-bezier(0.25, 0.8, 0.3, 1) 0.15s both; }
    .fan-c { animation: fan-c 0.7s cubic-bezier(0.25, 0.8, 0.3, 1) 0.35s both; }
  }
}
@keyframes h1-line { from { background-size: 0% 0.075em; } to { background-size: 100% 0.075em; } }
@keyframes chip-in { from { opacity: 0; translate: 1.5rem 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fan-a { from { opacity: 0; translate: 3.5rem 6.5rem; rotate: -1.5deg; } to { opacity: 1; translate: 0 0; rotate: -7deg; } }
@keyframes fan-b { from { opacity: 0; translate: 0 0.6rem; rotate: -1.5deg; } to { opacity: 1; translate: 0 0; rotate: -1.5deg; } }
@keyframes fan-c { from { opacity: 0; translate: -4.1rem 7.4rem; rotate: -1.5deg; } to { opacity: 1; translate: 0 0; rotate: 7deg; } }
@media (forced-colors: active) { .h1-line { background: none; text-decoration: underline; } }
/* Built on phones (Daegan 2026-09-25, on his iPhone 13): as the page opens, the first build's "For your shop" box sits in
   the strip behind Safari's floating bottom bar, and it showed up a beat late there, like a third animation beside the
   line under "built." and the chips. It fades in softly instead, from the very first frame (so there's nothing to show up
   late), 0.3 s to 1 s, finishing with the chips. Opacity only. A filter change stops it (site.js), so it never replays. */
@media screen and (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .works:not(.was-filtered) > .work:first-of-type > .work-shop { animation: shop-in 0.7s ease-out 0.3s both; }
}
@keyframes shop-in { from { opacity: 0; } to { opacity: 1; } }

/* The checked points, each centered in their shared space (Daegan 2026-09-25: on phones a one-line point sat high in a box
   sized for two lines). The fourth is the one question the look promises, set the way Home sets it: the italic serif,
   brass quote marks, and a brass question mark where the check goes. */
.steps-note--q > span:not(.note-check) { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.06em; letter-spacing: -0.01em; }
.steps-note--q .qm { color: var(--brass); }
/* Its question mark doesn't pop like the checks: once the point has settled it spins one turn and fades away, so the
   question stands alone in its quotes (Daegan 2026-09-25: two question marks on the line read as confusing). It stays gone
   while the point slips out, and comes back each time the question comes around. Transform and opacity, on its own span. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .steps-notes > .steps-note--q.is-on .note-check { animation: q-spin-away 1.5s linear 1.45s both; }
  .steps-notes > .steps-note--q.is-off .note-check { opacity: 0; }
}
/* The spin written a quarter turn at a time (2026-09-27; generated by q-keys.cjs): the same motion as before, measured
   within a few degrees on desktop, four accelerating turns then 440 degrees more while it shrinks and fades. iPhone
   Safari blended the old four-whole-turns keyframes as matrices, so it drew no turn at all and the mark only faded
   (Daegan: "doesn't spin before fading like desktop does"); with no two steps more than 90 degrees apart, every step
   is drawn. */
@keyframes q-spin-away {
  0% { transform: perspective(10em) rotateY(0deg) scale(1); opacity: 1; }
  10.543% { transform: perspective(10em) rotateY(15deg) scale(1); opacity: 1; }
  14.797% { transform: perspective(10em) rotateY(30deg) scale(1); opacity: 1; }
  18.014% { transform: perspective(10em) rotateY(45deg) scale(1); opacity: 1; }
  20.693% { transform: perspective(10em) rotateY(60deg) scale(1); opacity: 1; }
  23.027% { transform: perspective(10em) rotateY(75deg) scale(1); opacity: 1; }
  25.115% { transform: perspective(10em) rotateY(90deg) scale(1); opacity: 1; }
  27.017% { transform: perspective(10em) rotateY(105deg) scale(1); opacity: 1; }
  28.77% { transform: perspective(10em) rotateY(120deg) scale(1); opacity: 1; }
  30.403% { transform: perspective(10em) rotateY(135deg) scale(1); opacity: 1; }
  31.933% { transform: perspective(10em) rotateY(150deg) scale(1); opacity: 1; }
  33.377% { transform: perspective(10em) rotateY(165deg) scale(1); opacity: 1; }
  34.744% { transform: perspective(10em) rotateY(180deg) scale(1); opacity: 1; }
  41.769% { transform: perspective(10em) rotateY(270deg) scale(1); opacity: 1; }
  47.416% { transform: perspective(10em) rotateY(360deg) scale(1); opacity: 1; }
  52.163% { transform: perspective(10em) rotateY(450deg) scale(1); opacity: 1; }
  56.251% { transform: perspective(10em) rotateY(540deg) scale(1); opacity: 1; }
  59.826% { transform: perspective(10em) rotateY(630deg) scale(1); opacity: 1; }
  62.981% { transform: perspective(10em) rotateY(720deg) scale(1); opacity: 1; }
  65.778% { transform: perspective(10em) rotateY(810deg) scale(1); opacity: 1; }
  68.264% { transform: perspective(10em) rotateY(900deg) scale(1); opacity: 1; }
  70.472% { transform: perspective(10em) rotateY(990deg) scale(1); opacity: 1; }
  72.425% { transform: perspective(10em) rotateY(1080deg) scale(1); opacity: 1; }
  74.143% { transform: perspective(10em) rotateY(1170deg) scale(1); opacity: 1; }
  75.64% { transform: perspective(10em) rotateY(1260deg) scale(1); opacity: 1; }
  76.923% { transform: perspective(10em) rotateY(1350deg) scale(1); opacity: 1; }
  78% { transform: perspective(10em) rotateY(1440deg) scale(1); opacity: 1; }
  82.4% { transform: perspective(10em) rotateY(1528deg) scale(0.88); opacity: 0.8; }
  86.8% { transform: perspective(10em) rotateY(1616deg) scale(0.76); opacity: 0.6; }
  91.2% { transform: perspective(10em) rotateY(1704deg) scale(0.64); opacity: 0.4; }
  95.6% { transform: perspective(10em) rotateY(1792deg) scale(0.52); opacity: 0.2; }
  100% { transform: perspective(10em) rotateY(1880deg) scale(0.4); opacity: 0; }
}
/* phones: the points a touch lower in their space, balanced between the steps and the band (desktop as it was) */
@media (max-width: 760px) {
  .steps-notes { margin-top: 2.35rem; }
  .page-hero:has(.steps-notes) { padding-bottom: 2.9rem; }
}

/* Staging identification only. */
.staging-notice { padding: .6rem 1rem; background: #24251f; color: #fff; text-align: center; font: 600 12px/1.5 system-ui, sans-serif; }