/* ============================================================
   PAIR OF DOTS — "Connect the dots"
   Ink on paper. Two dots. One line between them.
   ============================================================ */

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

:root {
  --paper: #F4F2E9;
  --paper-2: #ECE9DC;
  --ink: #17180F;
  --ink-soft: #4B4C3E;
  /* Faint mono labels come in two weights of the same olive.
     On paper the old #8E8F7C only reached 2.7:1, so captions, kickers and fine
     print failed AA. This one reads 5.0:1 on paper and 4.6:1 on paper 2. */
  --ink-faint: #686957;
  /* One step lighter than the old #8E8F7C, which fell to 4.4:1 on the
     lightest card in the dark ramp. Clears 4.5:1 on all four ink surfaces. */
  --ink-faint-dark: #93947F;
  --line: #D8D5C4;
  --dot: #B4E019;          /* electric peridot */
  --dot-deep: #8FB700;     /* peridot as a mark: dots, strokes, offset shadows */
  /* Peridot as ink. DESIGN.md's "Peridot Is Never Prose" rule steps down to
     Peridot Deep for small marks on paper, but at 2.1:1 that still fails as
     text. This is the same green pressed dark enough to read: 4.9:1 on paper,
     4.5:1 on paper 2. Use it wherever peridot has to be legible rather than
     decorative, including the focus ring. */
  --dot-ink: #5A7100;
  --dot-dark: #202310;

  /* Ink-section ramp. Named in DESIGN.md, so it lives here rather than as
     loose hex scattered through the dark acts. */
  --card-dark: #202216;
  --card-dark-2: #24261A;
  --card-dark-3: #282B1C;
  --line-dark: #3A3D27;
  --body-on-dark: #E4E5D7;
  --body-on-dark-muted: #B9BAA6;

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Archivo', -apple-system, sans-serif;
  --f-mono: 'Spline Sans Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: clamp(20px, 4vw, 56px);
}

/* Smooth scroll is a motion effect, so it answers to the same preference
   every other animation on the site does. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html:focus-within { scroll-behavior: smooth; }
}

/* ============ FOCUS ============
   Every interactive surface gets the same ring, drawn in the system's own
   accent rather than the browser's blue. Outlines follow border-radius, so
   pills stay pills. */
:focus-visible {
  outline: 2.5px solid var(--dot-ink);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.price-card.featured :focus-visible { outline-color: var(--dot); }

body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; border: none; background: none; cursor: pointer; }

/* Paper grain over everything */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ CURSOR: a pair of dots ============
   Both dots start hidden and stay hidden until main.js has taken over the
   pointer. Otherwise they paint in the top-left corner on every page load,
   and a JS failure would leave the real cursor hidden with nothing drawn
   in its place. */
.cursor-dot, .cursor-tail {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  opacity: 0;
}
.cursor-dot {
  width: 10px; height: 10px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: background 0.25s, width 0.25s var(--ease-out), height 0.25s var(--ease-out), opacity 0.2s;
}
.cursor-tail {
  width: 34px; height: 34px;
  border: 1.5px solid var(--ink);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              background 0.3s, border-color 0.3s, opacity 0.3s;
}
body.pointer-live .cursor-dot { opacity: 1; }
body.pointer-live .cursor-tail { opacity: 0.75; }
body.cursor-hover .cursor-dot { background: var(--dot); width: 14px; height: 14px; }
body.cursor-hover .cursor-tail {
  width: 56px; height: 56px;
  background: rgba(180, 224, 25, 0.16);
  border-color: var(--dot-deep);
}
body.cursor-down .cursor-tail { width: 26px; height: 26px; }
.on-dark .cursor-dot { background: var(--paper); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-tail { display: none; }
}
/* Only hide the system cursor once ours is actually running. */
body.custom-cursor,
body.custom-cursor a, body.custom-cursor button,
body.custom-cursor input, body.custom-cursor select,
body.custom-cursor textarea, body.custom-cursor label { cursor: none; }

/* ============ LOADER ============
   Held back until the `js-anim` class lands. Without it the ink panel would cover
   the page forever if main.js never ran. */
.loader { display: none; }
.js-anim .loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 28px;
  transition: clip-path 0.9s var(--ease-out);
  clip-path: inset(0 0 0 0);
}
.loader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.loader-dots { display: flex; gap: 22px; }
.loader-dots span {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--dot);
  animation: hop 0.55s var(--ease-spring) infinite alternate;
}
.loader-dots span:nth-child(2) { background: var(--paper); animation-delay: 0.18s; }
@keyframes hop { from { transform: translateY(9px) scale(0.92); } to { transform: translateY(-9px); } }
.loader-word {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--paper); opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) { .js-anim .loader { display: none; } }

/* ============ UTILITIES ============ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* For a heading the outline needs but the layout already says visually. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.mono-label {
  font-family: var(--f-mono);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.mono-label::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot); outline: 1.5px solid var(--ink); outline-offset: 2.5px;
  flex-shrink: 0;
}
.on-dark .mono-label { color: var(--body-on-dark-muted); }
.on-dark .mono-label::before { outline-color: var(--dot); }

/* Highlighter swipe.
   Every hidden-until-scrolled state below is scoped to `.js-anim`. That class is set
   by an inline one-liner in each page head, so if main.js never loads the
   content is simply there instead of permanently invisible. */
.hl {
  position: relative; white-space: nowrap; z-index: 1;
}
.hl::before {
  content: ''; position: absolute; z-index: -1;
  left: -0.08em; right: -0.08em; top: 0.12em; bottom: 0.02em;
  background: var(--dot);
  border-radius: 0.12em;
  transform-origin: left center;
  transition: transform 0.8s var(--ease-out) 0.35s;
}
.js-anim .hl::before { transform: scaleX(0); }
.js-anim .in-view .hl::before, .js-anim .hl.in-view::before { transform: scaleX(1); }

/* A swipe and the period that closes it are one unit. Without this the dot is a
   separate inline-block and can break to the next line on its own: at 1440 the
   pricing head read "One site. [Two ways to pay]" with a lone peridot dot
   stranded at the left margin of a third line. */
.hl-stop { white-space: nowrap; }

/* Scroll reveals */
.reveal {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-anim .reveal { opacity: 0; transform: translateY(36px); }
.js-anim .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal, .js-anim .reveal.in-view { opacity: 1; transform: none; transition: none; }
  /* The manifesto's scroll-fill is an animation too, and its unlit colour is
     1.3:1. Under reduced motion the sentence is simply set in ink. */
  .manifesto-text .w { color: var(--ink); transition: none; }
  .js-anim .hl::before { transform: scaleX(1); transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(15px, 1.2vw, 17px);
  padding: 17px 30px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.35s;
  isolation: isolate;
}
.btn::before {
  content: ''; position: absolute; z-index: -1;
  left: 20px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translate(0, -50%) scale(1);
  transition: transform 0.55s var(--ease-out);
}
.btn .dot-ind {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  transition: opacity 0.2s;
}
.btn:hover::before { transform: translate(0, -50%) scale(340); }
.btn:hover .dot-ind { opacity: 0; }
.btn:active { transform: scale(0.97); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink::before { background: var(--dot); }
.btn-ink .dot-ind { background: var(--dot); }
.btn-ink:hover { color: var(--ink); }

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

.on-dark .btn-ghost { color: var(--paper); border-color: var(--paper); }
.on-dark .btn-ghost::before { background: var(--dot); }
.on-dark .btn-ghost .dot-ind { background: var(--dot); }
.on-dark .btn-ghost:hover { color: var(--ink); }

/* Primary CTA on an ink background. btn-ink would be dark on dark. */
.btn-lime { background: var(--dot); color: var(--ink); border-color: var(--dot); }
.btn-lime::before { background: var(--paper); }
.btn-lime .dot-ind { background: var(--ink); }
.btn-lime:hover { color: var(--ink); border-color: var(--paper); }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 18px; left: 0; right: 0;
  z-index: 900;
  display: flex; justify-content: center;
  padding: 0 var(--gutter);
  transition: transform 0.5s var(--ease-out);
}
.nav.hidden { transform: translateY(-120%); }
.nav-inner {
  width: 100%; max-width: 1180px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(244, 242, 233, 0.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 12px 10px 24px;
  box-shadow: 0 2px 0 var(--ink);
}
.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--f-display); font-weight: 900; font-size: 21px;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "WONK" 0;
}
.brand-dots { display: flex; gap: 5px; }
.brand-dots i {
  width: 10px; height: 10px; border-radius: 50%; background: var(--dot);
  border: 1.5px solid var(--ink);
}
.brand-dots i:last-child { background: var(--ink); }
.brand:hover .brand-dots i:first-child { animation: hop 0.4s var(--ease-spring) 2 alternate; }
.brand:hover .brand-dots i:last-child { animation: hop 0.4s var(--ease-spring) 0.15s 2 alternate; }

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 15px; font-weight: 500;
  padding: 9px 16px; border-radius: 999px;
  transition: background 0.25s;
  position: relative;
}
.nav-links a:hover { background: var(--paper-2); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--dot); color: var(--ink);
  font-weight: 600; font-size: 15px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 11px 22px;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
  box-shadow: 0 0 0 transparent;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.nav-cta i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .brand { font-size: 18px; white-space: nowrap; gap: 8px; }
  .brand-dots i { width: 8px; height: 8px; }
  .nav-inner { padding: 8px 8px 8px 18px; }
  .nav-cta { white-space: nowrap; font-size: 14px; padding: 10px 16px; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px 0 80px;
  overflow: clip;
}
#dotfield {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }

.hero-eyebrow { margin-bottom: clamp(20px, 3vh, 36px); }
.hero-eyebrow .mono-label { background: var(--paper); padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); }

.hero h1 {
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  font-size: clamp(48px, 8.6vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 12ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: inline-block;
  transform-origin: left bottom;
  transition: transform 1.1s var(--ease-out);
}
.js-anim .hero h1 .line > span { transform: translateY(110%) rotate(2deg); }
.js-anim body.loaded .hero h1 .line > span { transform: none; }
.hero h1 .line:nth-child(2) > span { transition-delay: 0.09s; }
.hero h1 .line:nth-child(3) > span { transition-delay: 0.18s; }
.hero h1 em {
  font-style: italic; font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.hero h1 .hl::before { transition-delay: 1.15s; }

/* The period. A full stop, set as a real element so it can carry the accent. */
.period-dot {
  display: inline-block;
  width: 0.14em; height: 0.14em;
  border-radius: 50%;
  background: var(--dot-deep);
  margin-left: 0.06em;
}
/* After a highlighted phrase the swipe bleeds 0.08em past the text, which put
   a fifth of the dot on the bar in the same green. Clearing the bleed and then
   holding the same 0.06em gap keeps the period optically identical to the ones
   that follow plain text. */
.hl + .period-dot { margin-left: 0.14em; }

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(143, 183, 0, 0.5); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 0.18em rgba(143, 183, 0, 0); }
}

/* The lede and the two CTAs are one group, so they sit next to each other.
   space-between used to fling the buttons to the far edge of a 1280px wrapper,
   leaving ~300px of dead paper between the sentence and the thing it asks you
   to do. */
.hero-foot {
  margin-top: clamp(36px, 6vh, 64px);
  display: flex; align-items: flex-end;
  gap: clamp(28px, 4vw, 64px); flex-wrap: wrap;
}
.hero-sub {
  max-width: 44ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  transition: opacity 0.9s var(--ease-out) 0.55s, transform 0.9s var(--ease-out) 0.55s;
}
.hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  transition: opacity 0.9s var(--ease-out) 0.7s, transform 0.9s var(--ease-out) 0.7s;
}
.js-anim .hero-sub, .js-anim .hero-ctas { opacity: 0; transform: translateY(24px); }
.js-anim body.loaded .hero-sub, .js-anim body.loaded .hero-ctas { opacity: 1; transform: none; }

.hero-scroll {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; transition: opacity 1s ease 1.6s;
}
body.loaded .hero-scroll { opacity: 1; }
.hero-scroll i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
  animation: drip 1.8s var(--ease-out) infinite;
}
@keyframes drip {
  0% { transform: translateY(-8px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ============ MARQUEE ============ */
.marquee {
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: var(--dot);
  overflow: clip;
  padding: 16px 0;
  transform: rotate(-1.2deg) scale(1.02);
  position: relative; z-index: 3;
}
.marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: scroll-x 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > div {
  display: flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--f-display); font-weight: 600; font-style: italic;
  font-size: clamp(18px, 2vw, 26px); color: var(--ink);
  white-space: nowrap;
}
.marquee-track i {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex-shrink: 0;
}
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ============ MANIFESTO (scroll-fill words) ============ */
.manifesto {
  padding: clamp(110px, 16vh, 190px) 0 clamp(80px, 12vh, 150px);
  position: relative;
}
.manifesto .mono-label { margin-bottom: 36px; }
.manifesto-text {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.manifesto-text .w {
  color: var(--line);
  transition: color 0.35s ease;
}
.manifesto-text .w.lit { color: var(--ink); }
.manifesto-text .w.accent-w.lit { color: var(--dot-ink); font-style: italic; }

/* Four outcomes */
.outcomes {
  margin-top: clamp(64px, 10vh, 110px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
.outcome {
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: clamp(24px, 2.6vw, 40px);
  position: relative;
  transition: background 0.4s var(--ease-out);
  overflow: hidden;
}
.outcome:hover { background: var(--paper-2); }
.outcome::after {
  content: ''; position: absolute; right: -22px; bottom: -22px;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--dot); border: 1.5px solid var(--ink);
  transform: scale(0);
  transition: transform 0.5s var(--ease-spring);
}
.outcome:hover::after { transform: scale(1); }
.outcome .num {
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint);
  display: block; margin-bottom: clamp(28px, 4vw, 64px);
}
.outcome h3 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(20px, 1.8vw, 26px);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  line-height: 1.1; margin-bottom: 12px;
}
.outcome p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; max-width: 30ch; }
@media (max-width: 960px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .outcomes { grid-template-columns: 1fr; } }

/* ============ SERVICES — dark act, sticky stack ============ */
.services {
  background: var(--ink);
  color: var(--paper);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding: clamp(90px, 13vh, 160px) 0 clamp(90px, 13vh, 160px);
  position: relative;
}
.services::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,242,233,0.07) 1px, transparent 1.5px);
  background-size: 26px 26px;
  border-radius: inherit;
  pointer-events: none;
}
.sec-head { margin-bottom: clamp(48px, 8vh, 90px); position: relative; z-index: 1; }
.sec-head h2 {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  font-size: clamp(38px, 5.6vw, 82px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-top: 22px;
  max-width: 16ch;
}
.sec-head p { margin-top: 22px; max-width: 52ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-soft); }
.on-dark .sec-head p { color: var(--body-on-dark-muted); }
/* Emphasis words inside a section head, matching the hero and page-head rule.
   Both index headings were setting this inline. */
.sec-head h2 em { font-style: italic; font-weight: 500; }
.sec-head h2 em.accent { color: var(--dot); }

.stack { position: relative; z-index: 1; }
.stack-card {
  position: sticky;
  top: clamp(90px, 12vh, 130px);
  background: var(--card-dark);
  border: 1.5px solid var(--line-dark);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(20px, 3vh, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  transform-origin: center top;
  will-change: transform;
  box-shadow: 0 -18px 50px rgba(0,0,0,0.35);
}
.stack-card:nth-child(2) { background: var(--card-dark-2); }
.stack-card:nth-child(3) { background: var(--card-dark-3); }
.stack-num {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(15px, 1.4vw, 19px); color: var(--dot);
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.stack-num::after { content: ''; height: 1px; flex: 0 0 56px; background: var(--dot); opacity: 0.5; }
.stack-card h3 {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.stack-card .lede { color: var(--body-on-dark-muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 42ch; }
.stack-price {
  margin-top: 34px;
  display: flex; align-items: baseline; gap: 12px;
}
.stack-price strong {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(30px, 3vw, 44px);
  color: var(--dot);
}
.stack-price span { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint-dark); }
.stack-feats { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.stack-feats li {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(15px, 1.2vw, 17px); color: var(--body-on-dark);
}
.stack-feats li:first-child { border-top: 1px solid var(--line-dark); }
.stack-feats li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot); flex-shrink: 0;
}
@media (max-width: 860px) {
  .stack-card { grid-template-columns: 1fr; }
}

/* ============ STATS ============ */
.stats {
  background: var(--ink); color: var(--paper);
  padding: 0 0 clamp(90px, 12vh, 150px);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
}
.stat {
  padding: clamp(30px, 3.5vw, 52px) clamp(18px, 2vw, 32px) 0;
  border-left: 1px solid var(--line-dark);
}
.stat:first-child { border-left: none; }
.stat .big {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1;
  font-variation-settings: "SOFT" 75, "WONK" 0;
}
.stat .big em { font-style: italic; color: var(--dot); }
.stat p { margin-top: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint-dark); }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat { padding-bottom: 10px; }
}

/* ============ WORK ============ */
.work { padding: clamp(100px, 15vh, 180px) 0 clamp(60px, 8vh, 110px); }
/* The staggered .push cards hang below the last grid row, so a work section
   that uses them has to reserve the room instead of letting them run into
   whatever comes next. Three pages were doing this with an inline style. */
.work.has-stagger { padding-bottom: clamp(130px, 17vh, 200px); }
.work.tight-top { padding-top: clamp(40px, 6vh, 70px); }
.work-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 7vh, 80px);
}
.work-card { position: relative; }
.work-card.push { transform: translateY(clamp(30px, 5vw, 80px)); }
.work-media {
  position: relative;
  border-radius: clamp(16px, 2vw, 26px);
  overflow: hidden;
  border: 1.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  aspect-ratio: 4 / 3;
}
.work-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 1s var(--ease-out), filter 0.6s;
  filter: saturate(0.92);
}
.work-card:hover .work-media img { transform: scale(1.05); filter: saturate(1.05); }
.work-badge {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 999px; padding: 7px 15px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.work-badge.is-live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dot-deep);
  animation: pulse-dot 2s ease-in-out infinite;
}
.work-visit {
  position: absolute; right: 18px; bottom: 18px;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--dot); border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  transform: scale(0) rotate(-40deg);
  transition: transform 0.45s var(--ease-spring);
}
.work-card:hover .work-visit { transform: scale(1) rotate(0deg); }
.work-visit svg { width: 22px; height: 22px; }
.work-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 6px 0; }
.work-meta h3 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 2.2vw, 30px);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  letter-spacing: -0.01em;
}
.work-meta p { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.work-more { display: flex; justify-content: center; margin-top: clamp(70px, 10vw, 120px); }

/* A work-grid cell that carries a note instead of a screenshot. Both landing
   pages had this, each rebuilding it with six inline overrides fighting
   .work-meta's mono uppercase treatment. */
.work-card.is-note { display: flex; align-items: center; }
.work-card.is-note .work-meta { display: block; padding-top: 0; }
.work-card.is-note h3 { margin-bottom: 14px; }
.work-card.is-note p {
  font-family: var(--f-body); font-size: 16px; line-height: 1.65;
  text-align: left; text-transform: none; letter-spacing: 0;
  color: var(--ink-soft);
}
.work-card.is-note .btn { margin-top: 22px; }

/* Section head that sits directly above its own grid, so the grid's top
   margin owns the gap. Repeated inline as style="margin-bottom:0". */
.sec-head.tight { margin-bottom: 0; }
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.push { transform: none; }
  .work-more { margin-top: clamp(40px, 8vw, 64px); }
}
@media (max-width: 560px) {
  /* Title and category fight for the same line at this width. Stack them. */
  .work-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .work-meta p { text-align: left; }
}

/* ---- Portfolio page (work.html) ---- */
.page-head {
  padding: clamp(150px, 20vh, 220px) 0 clamp(20px, 4vh, 50px);
  position: relative;
}
.page-head h1 {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-size: clamp(46px, 8.5vw, 108px);
  line-height: 0.95; letter-spacing: -0.03em;
  margin: 18px 0 26px;
}
.page-head h1 em { font-style: italic; font-weight: 500; }
.page-head .lede {
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6;
  color: var(--ink-soft); max-width: 60ch;
}
.crumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint);
  text-decoration: none;
}
.crumb:hover { color: var(--ink); }
.work-note {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: 10px; padding: 0 6px;
}

/* ---- Landing pages (service area + trade) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.chips span {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 15px;
  background: var(--paper);
}
.chips span.is-home { border-color: var(--ink); background: var(--dot); color: var(--ink); }

.needs { padding: clamp(80px, 12vh, 150px) 0; border-top: 1.5px solid var(--line); }
.needs-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 60px) clamp(34px, 5vw, 80px);
  margin-top: clamp(48px, 7vh, 76px);
}
.need { border-top: 1.5px solid var(--ink); padding-top: 22px; }
.need .num {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--dot-ink); display: block; margin-bottom: 14px;
}
.need h3 {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.need p { color: var(--ink-soft); line-height: 1.65; }
@media (max-width: 760px) { .needs-grid { grid-template-columns: 1fr; } }

/* Cross-links between landing pages */
.also { padding: 0 0 clamp(80px, 12vh, 140px); }
/* When .also is its own section rather than a tail on the one above it. */
.also.standalone { padding-top: clamp(60px, 9vh, 100px); }
.also-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.also-row a {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 12px 20px;
  transition: background 0.3s, color 0.3s;
}
.also-row a:hover { background: var(--ink); color: var(--paper); }

/* Service-area line in the footer */
.footer-area {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ink-faint-dark); margin-bottom: 14px; line-height: 1.7;
}
.footer-area a { text-decoration: underline; text-underline-offset: 3px; }
.footer-area a:hover { color: var(--dot); }

/* ============ PROCESS — the dotted line ============ */
.process { padding: clamp(80px, 12vh, 160px) 0; }
.process-rail { position: relative; margin-top: clamp(50px, 8vh, 90px); }
.process-line {
  position: absolute; left: 27px; top: 10px; bottom: 10px;
  width: 2px;
}
.process-line svg { height: 100%; width: 2px; overflow: visible; }
.process-line line {
  stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 10;
  stroke-linecap: round;
}
.process-line .prog {
  stroke: var(--dot-deep); stroke-dasharray: none;
  stroke-width: 2.5;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(26px, 4vh, 48px) 0;
  align-items: baseline;
}
.step + .step { border-top: 1px solid var(--line); }
.step-dot {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  margin-left: 16px;
  align-self: start;
  transition: background 0.4s, transform 0.4s var(--ease-spring), box-shadow 0.4s;
}
.step.lit .step-dot {
  background: var(--dot);
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(180, 224, 25, 0.25);
}
.step h3 {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(26px, 3.2vw, 46px);
  font-variation-settings: "SOFT" 75, "WONK" 1;
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--line);
  transition: color 0.5s;
}
.step.lit h3 { color: var(--ink); }
.step h3 .step-no {
  font-family: var(--f-mono); font-size: 0.32em; font-weight: 500;
  vertical-align: super; letter-spacing: 0.1em;
  color: var(--dot-ink); margin-right: 0.5em;
}
.step p { color: var(--ink-soft); font-size: clamp(15px, 1.25vw, 18px); max-width: 46ch; }
@media (max-width: 720px) {
  .step { grid-template-columns: 44px 1fr; }
  .step p { grid-column: 2; }
  .process-line { left: 21px; }
  .step-dot { margin-left: 10px; }
}

/* ============ PRICING ============ */
.pricing {
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  padding: clamp(90px, 13vh, 170px) 0;
  position: relative; overflow: clip;
}
.pricing::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,24,15,0.06) 1px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
}
.price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(44px, 7vh, 76px);
  position: relative; z-index: 1;
  align-items: stretch;
}
.price-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(28px, 3vw, 42px);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  box-shadow: 0 2px 0 var(--ink);
}
.price-card:hover { transform: translateY(-8px); box-shadow: 0 10px 0 var(--ink); }
.price-card.featured {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 6px 0 var(--dot-deep);
}
.price-card.featured:hover { box-shadow: 0 14px 0 var(--dot-deep); }
.price-tag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: var(--dot); border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.price-kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.price-card.featured .price-kicker { color: var(--ink-faint-dark); }
.price-card h3 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(24px, 2.2vw, 32px);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  margin-bottom: 6px;
}
.price-amount {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(40px, 4vw, 58px);
  letter-spacing: -0.02em;
  margin: 16px 0 4px;
}
.price-amount sup { font-size: 0.45em; font-weight: 600; vertical-align: 0.7em; }
.price-card.featured .price-amount { color: var(--dot); }
.price-per { font-size: 13px; color: var(--ink-faint); margin-bottom: 22px; }
.price-card.featured .price-per { color: var(--ink-faint-dark); }
.price-feats { list-style: none; margin-bottom: 30px; flex: 1; }
.price-feats li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; font-size: 15px;
  border-bottom: 1px dashed var(--line);
}
.price-card.featured .price-feats li { border-color: var(--line-dark); }
.price-feats li::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot-deep); flex-shrink: 0; margin-top: 7px;
}
.price-card.featured .price-feats li::before { background: var(--dot); }
.price-card .btn { justify-content: center; }
.price-card.featured .btn-ghost { color: var(--paper); border-color: var(--paper); }
.price-card.featured .btn-ghost::before { background: var(--dot); }
.price-card.featured .btn-ghost .dot-ind { background: var(--dot); }
.price-card.featured .btn-ghost:hover { color: var(--ink); }

.care-bar {
  margin-top: clamp(28px, 4vh, 44px);
  background: var(--dot);
  border: 1.5px solid var(--ink);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(24px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  position: relative; z-index: 1;
  box-shadow: 0 3px 0 var(--ink);
}
.care-bar h3 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 2.4vw, 34px);
  font-variation-settings: "SOFT" 75, "WONK" 1;
}
.care-bar p { max-width: 52ch; font-size: 15px; margin-top: 6px; color: var(--dot-dark); }
.care-amount { display: flex; align-items: baseline; gap: 10px; }
.care-amount strong { font-family: var(--f-display); font-weight: 900; font-size: clamp(36px, 3.6vw, 54px); }
.care-amount span { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }

.price-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 1060px; margin-left: auto; margin-right: auto; }
.price-grid.one { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
.care-list {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; max-width: 720px;
}
.care-list li {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  padding: 8px 16px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.fine-print {
  margin-top: 24px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-faint); text-align: center;
  position: relative; z-index: 1;
}
@media (max-width: 900px) { .price-grid, .price-grid.two { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } .care-list li { white-space: normal; } }

/* ============ CONTACT ============ */
.contact {
  background: var(--ink); color: var(--paper);
  padding: clamp(100px, 14vh, 180px) 0;
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  position: relative;
}
.contact::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,242,233,0.06) 1px, transparent 1.5px);
  background-size: 26px 26px; border-radius: inherit; pointer-events: none;
}
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(44px, 6vw, 100px);
  position: relative; z-index: 1;
}
/* The closing CTA band on the secondary pages: a heading beside a short
   paragraph and two buttons, no form. All three pages built it inline. */
.contact-grid.cta-band { align-items: center; }
.contact-grid.cta-band .hero-ctas { margin-top: 36px; }
.contact h2 {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-top: 22px;
}
.contact h2 em { font-style: italic; font-weight: 500; color: var(--dot); }
.contact-side p.lede { margin-top: 24px; color: var(--body-on-dark-muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 40ch; }
.contact-ways { margin-top: 44px; display: flex; flex-direction: column; }
.contact-way {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 4px;
  border-top: 1px solid var(--line-dark);
  transition: padding-left 0.35s var(--ease-out);
}
.contact-way:last-child { border-bottom: 1px solid var(--line-dark); }
.contact-way:hover { padding-left: 14px; }
.contact-way .cw-dot {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--dot); color: var(--dot);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background 0.3s;
}
.contact-way:hover .cw-dot { background: var(--dot); color: var(--ink); }
.contact-way .cw-dot svg { width: 18px; height: 18px; }
.contact-way strong { display: block; font-size: 17px; }
.contact-way span { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint-dark); }

.form-panel {
  background: var(--paper); color: var(--ink);
  border-radius: clamp(18px, 2.4vw, 30px);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--dot-deep);
  padding: clamp(28px, 3.4vw, 52px);
  transform: rotate(0.6deg);
}
.form-panel form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;
  background: transparent;
  border: none; border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 10px 2px;
  color: var(--ink);
  transition: border-color 0.3s, background 0.3s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2317180F' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--dot-ink);
  background: rgba(180, 224, 25, 0.08);
}
.form-panel .btn { grid-column: 1 / -1; justify-content: center; margin-top: 8px; }
.form-note { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); text-align: center; }

/* In flight. The label swaps and the button's own dot picks up the loader's
   hop, so the form says something is happening in the site's own vocabulary
   rather than borrowing a spinner. */
.btn-sending { display: none; }
.is-sending .btn-idle { display: none; }
.is-sending .btn-sending { display: inline; }
.is-sending .btn[type="submit"] { pointer-events: none; }
.is-sending .btn[type="submit"] .dot-ind {
  animation: hop 0.55s var(--ease-spring) infinite alternate;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-panel form { grid-template-columns: 1fr; }
}

/* ============ FOOTER ============ */
.footer {
  background: var(--ink); color: var(--paper);
  padding: 0 0 34px;
  overflow: clip;
}
.footer-mark {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  font-size: clamp(64px, 14.5vw, 230px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-soft);
  transition: color 0.6s, -webkit-text-stroke-color 0.6s;
  user-select: none;
  padding-top: 40px;
}
.footer-mark:hover { color: var(--dot); -webkit-text-stroke-color: var(--dot); }
.footer-mark .fm-dot {
  display: inline-block; width: 0.13em; height: 0.13em;
  border-radius: 50%; background: var(--dot);
  -webkit-text-stroke: 0;
}
.footer-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-faint-dark);
}
.footer-row a { transition: color 0.25s; }
.footer-row a:hover { color: var(--dot); }
/* Six links plus a 26px gap ran past the right edge on a 375px phone, and
   overflow-x: clip on the body meant the last of them were simply gone. */
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
@media (max-width: 560px) {
  .footer-row { justify-content: flex-start; }
  .footer-links { gap: 12px 20px; }
}

/* ---- Before & after page (/before-and-after) ----
   Three exhibits of the same fictional lawn company: two bad builds shown as
   marked-up specimens (tilted shots, ink stamps, numbered damage notes) and
   the good build presented straight. The only red flag in the system is the
   absence of peridot: before-exhibits mark in plain ink, the fix marks in
   the accent. */

.exhibit { padding: clamp(70px, 10vh, 130px) 0; position: relative; }
.exhibit.alt { background: var(--paper-2); }

/* The specimen stamp: a tilted mono pill, inked for the befores, peridot for
   the fix. Sits above the section head like a tag stapled to a proof. */
.ex-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 9px 18px; background: var(--paper);
  transform: rotate(-2deg);
  margin-bottom: 26px;
  box-shadow: 0 2px 0 var(--ink);
}
.ex-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.ex-tag.is-fix { background: var(--dot); }

.ex-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
  margin-top: clamp(40px, 6vh, 64px);
  align-items: start;
}

/* Screenshot specimens. The befores hang slightly crooked on purpose; the
   fix sits straight. Mobile shot overlaps the desktop one like a print
   dropped on top of another. */
.ex-shots { position: relative; padding-bottom: clamp(60px, 9vw, 110px); }
.ex-shot {
  border: 1.5px solid var(--ink);
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.ex-shot img { display: block; width: 100%; height: auto; }
.ex-shot.is-phone {
  position: absolute; right: clamp(-6px, -0.5vw, -12px); bottom: 0;
  width: clamp(120px, 34%, 220px);
  box-shadow: 6px 6px 0 var(--ink);
}
.exhibit .ex-shot.is-desk { transform: rotate(-1.1deg); }
.exhibit .ex-shot.is-phone { transform: rotate(1.6deg); }
.exhibit .is-fix-shots .ex-shot { transform: none; }
.ex-cap {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: 12px;
}
/* The phone shot overhangs the desktop shot's bottom-right corner in the
   two-column layout, so the caption keeps left of it instead of running
   underneath. Below 900px the phone sits in flow and the cap isn't needed. */
@media (min-width: 901px) { .ex-cap { max-width: 58%; } }

/* Numbered damage notes (ink) and fix notes (peridot numerals). */
.ex-notes { list-style: none; }
.ex-notes li {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.ex-notes li:first-child { border-top: 1.5px solid var(--ink); }
.ex-notes .num {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--ink-faint);
}
.ex-notes.is-fix .num { color: var(--dot-ink); }
.ex-notes p { color: var(--ink-soft); line-height: 1.6; font-size: clamp(15px, 1.2vw, 17px); }
.ex-notes p strong { color: var(--ink); font-weight: 600; }

/* The verdict: what this build actually does to the business. */
.ex-verdict {
  margin-top: clamp(40px, 6vh, 64px);
  border: 1.5px solid var(--ink);
  border-radius: clamp(18px, 2vw, 26px);
  background: var(--paper);
  padding: clamp(24px, 2.8vw, 38px) clamp(24px, 3vw, 44px);
  box-shadow: 6px 6px 0 var(--ink);
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 40px); align-items: baseline;
}
.ex-verdict.is-fix { box-shadow: 6px 6px 0 var(--dot-deep); }
.ex-verdict .kicker {
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.ex-verdict p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); max-width: 56ch; }
.ex-verdict p em { font-style: italic; font-family: var(--f-display); font-weight: 500; }

/* The thesis band: a bad site does damage a missing site can't. */
.ba-claim {
  background: var(--ink); color: var(--paper);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  padding: clamp(90px, 13vh, 160px) 0;
  position: relative;
}
.ba-claim::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,242,233,0.07) 1px, transparent 1.5px);
  background-size: 26px 26px;
  border-radius: inherit;
  pointer-events: none;
}
.ba-claim .wrap { position: relative; z-index: 1; }
.ba-claim h2 {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin-top: 22px; max-width: 18ch;
}
.ba-claim h2 em { font-style: italic; font-weight: 500; color: var(--dot); }
.claim-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(48px, 8vh, 90px);
}
.claim-cell { border-top: 1px solid var(--line-dark); padding-top: 22px; }
.claim-cell h3 {
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dot); margin-bottom: 14px;
}
.claim-cell p { color: var(--body-on-dark-muted); line-height: 1.65; font-size: clamp(15px, 1.2vw, 17px); }
.claim-cell p strong { color: var(--body-on-dark); font-weight: 600; }

/* One question, three answers. */
.ans-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
  margin-top: clamp(44px, 7vh, 72px);
}
.ans {
  border: 1.5px solid var(--ink);
  border-radius: clamp(18px, 2vw, 26px);
  background: var(--paper);
  padding: clamp(24px, 2.8vw, 38px);
  box-shadow: 0 2px 0 var(--ink);
  display: flex; flex-direction: column;
}
.ans-src {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
}
.ans-quote {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 16px 0 14px;
}
.ans p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin-top: auto; }
.ans.is-ours { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 6px 0 var(--dot-deep); }
.ans.is-ours .ans-src { color: var(--ink-faint-dark); }
.ans.is-ours .ans-quote { color: var(--dot); }
.ans.is-ours p { color: var(--body-on-dark-muted); }

/* The scoreboard: ruled boxes like a checklist on a form. Peridot dot = yes,
   empty ring = no; each dot carries screen-reader text. */
.score {
  border: 1.5px solid var(--ink);
  border-radius: clamp(18px, 2vw, 26px);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  margin-top: clamp(44px, 7vh, 72px);
}
.score-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(70px, 1fr));
  align-items: center;
}
.score-row + .score-row { border-top: 1px solid var(--line); }
.score-row > * { padding: 16px clamp(14px, 2vw, 26px); }
.score-row > * + * { border-left: 1px solid var(--line); text-align: center; }
.score-head { background: var(--paper-2); }
.score-head > * {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.score-what { font-weight: 500; font-size: clamp(15px, 1.2vw, 17px); }
.sd {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  vertical-align: middle;
}
.sd.yes { background: var(--dot); outline: 1.5px solid var(--ink); outline-offset: 2px; }
.sd.no { border: 1.5px solid var(--ink-faint); background: transparent; }
.score-legend {
  margin-top: 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; gap: 26px; align-items: center;
}
.score-legend .sd { margin-right: 8px; }
/* The demo-disclosure note reads as a caption for the page, not a centered
   pricing footnote. */
.fine-print.left { text-align: left; margin-top: 34px; max-width: 72ch; }

@media (max-width: 900px) {
  .ex-grid { grid-template-columns: 1fr; }
  .ex-shots { padding-bottom: 0; margin-bottom: 8px; }
  .ex-shot.is-phone { position: static; width: 52%; margin: -14vw 0 0 auto; }
  .ans-grid { grid-template-columns: 1fr; max-width: 520px; }
  .claim-grid { grid-template-columns: 1fr; }
  .ex-verdict { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .score-row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(48px, 1fr)); }
  .score-row > * { padding: 13px 10px; }
  .score-head > * { font-size: 9.5px; letter-spacing: 0.1em; }
  .score-what { font-size: 14px; }
}