/* ==========================================================================
   Deakin Studio — Direction D. The whole stylesheet.

   Replaces site-3.css (and direct-line.css, whose hero diagram this design
   does not have). The filename is fingerprinted: /assets/* is cached
   immutable for a year, so a returning visitor only sees a change when the
   name changes. Bump to site-8.css next time — see _headers.

   House rules, carried over from the previous build:
   - No colour or measurement is written twice. Everything comes from a token
     below. Sanctioned exceptions: clamp() type sizes, breakpoint widths and
     grid track sizes.
   - No `style` attribute appears in any page. That is what allows the CSP to
     set `style-src 'self'` with no 'unsafe-inline' — and it is why the
     Direction D design export could not be shipped as exported: every rule in
     it was an inline style attribute, and the browser would have dropped the
     lot.

   Where this file departs from the design export, and why:
   - Muted text is #686c72, not #8f939a. The export's grey is 3.0:1 on white
     and 2.9:1 on the #f6f7f8 cards, under the 4.5:1 AA minimum for the 13–14px
     labels it is used for. #686c72 is 5.3:1 and 4.9:1.
   - Muted text on ink is #7f858c, not #6b7076 (3.8:1 → 5.1:1).
   - Borders that bound something interactive or carry meaning use #8d9299
     (3.15:1), not #c6c9cd or #dcdee1, which are ~1.3:1 and fail the 3:1
     non-text minimum. Purely decorative hairlines stay at the export's
     #e7e9ec.
   - There is a mobile nav. The export's nav is a single flex row of six links
     plus a button, which does not fit a phone.
   ========================================================================== */

/* --- Font ----------------------------------------------------------------
   One variable file covering 400–700, latin subset, self-hosted. The design
   export loads this from the Google CDN; the site's own CSP sets
   `font-src 'self'`, which would block it. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Light surfaces */
  --ink: #101113;          /* 19:1 on paper */
  --ink-hover: #2c2e32;
  --body: #5b5e63;         /* 6.5:1 on paper, 6.1:1 on surface */
  --mute: #686c72;         /* 5.3:1 on paper, 4.9:1 on surface */
  --paper: #ffffff;
  --surface: #f6f7f8;
  --surface-hover: #eef0f2;
  --line: #e7e9ec;         /* decorative hairline */
  --line-2: #dcdee1;       /* decorative pill outline */
  --edge: #8d9299;         /* 3.15:1 — anything interactive or load-bearing */

  /* Ink surfaces */
  --d-text: #f4f5f6;
  --d-strong: #d3d6d9;
  --d-body: #c9ccd0;
  --d-mute: #9ba0a7;       /* 7.1:1 on ink */
  --d-label: #8f939a;      /* 6.2:1 on ink */
  --d-faint: #7f858c;      /* 5.1:1 on ink */
  --d-line: #33363b;
  --d-line-2: #26282c;
  --d-field: #1c1e23;
  --d-chip: #2c2e32;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Radii */
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 16px;
  --r-xs: 14px;
  --pill: 999px;

  /* Rhythm */
  --band-pad: clamp(56px, 6vw, 88px);
  --sec-pad: clamp(40px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: #4a4d52; }

/* height: auto is load-bearing, not tidiness. Every <img> carries width/height
   attributes so the box is reserved before the bytes arrive; those attributes
   also map to a presentational `height` hint, and an author `width: 100%` with
   no `height` beside it leaves that hint in force — so the image renders full
   width at its INTRINSIC pixel height, stretched. It shipped that way once: the
   1104x884 SERP shot rendered 640x884 instead of 640x512, and the Lighthouse
   score rings came out as ovals. Components that genuinely want a fixed height
   (.casecard__img) override this with a class, which wins. */
img { max-width: 100%; height: auto; }

::selection { background: #d9f2e6; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Ink sections invert the ring, or it disappears into the background. */
.band :focus-visible,
.form :focus-visible,
.sitefoot--dark :focus-visible { outline-color: var(--paper); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-xs) 0;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0; color: var(--paper); }

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Full-bleed ink section. .band__in restores the measure inside it. */
.band { background: var(--ink); color: var(--d-text); }
.band__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--band-pad) var(--gutter);
}

.section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.section--flush-top { padding-top: 0; }
.section--tall { padding-top: var(--band-pad); padding-bottom: var(--band-pad); }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g2--wide, .g3--wide { gap: clamp(24px, 3vw, 44px); }

.center { text-align: center; }

/* --- Type --------------------------------------------------------------- */
.h-hero {
  font-weight: 700;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 auto;
  max-width: 15ch;
}

.h-page {
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 auto;
  max-width: 17ch;
}
.h-page--wide { max-width: 18ch; }
.h-page--left { margin-left: 0; margin-right: 0; }
.h-page--sm {
  font-size: clamp(36px, 4.6vw, 64px);
  max-width: 15ch;
}
.h-page--xs {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.04;
  max-width: 18ch;
}
.h-page--case {
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1;
  max-width: 16ch;
}

.h-sec {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.h-band {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
}

.h-close {
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 auto;
  max-width: 18ch;
}
.h-close--sm {
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.04;
  max-width: 24ch;
}
.h-close--md {
  font-size: clamp(32px, 4.6vw, 64px);
  max-width: 16ch;
}
.h-close--light {
  font-size: clamp(28px, 3.8vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 24ch;
}

.h-card {
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 20px;
}

.lead {
  margin: 24px auto 0;
  max-width: 56ch;
  color: var(--body);
  font-size: 17.5px;
}
.lead--hero { margin-top: 26px; max-width: 52ch; font-size: 18px; }
.lead--left { margin-left: 0; margin-right: 0; }

.note {
  margin: 16px auto 0;
  max-width: 60ch;
  color: var(--mute);
  font-size: 15px;
}
.note--left { margin-left: 0; margin-right: 0; }

.prose {
  font-size: 16.5px;
  color: var(--body);
  margin: 26px 0 0;
  max-width: 58ch;
}
.prose + .prose { margin-top: 16px; }

.link-cta { font-weight: 600; font-size: 15.5px; }

.back {
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
}
.back:hover { color: var(--ink); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border: 1px solid transparent;
  text-align: center;
}

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

.btn--ghost { color: var(--ink); border-color: var(--edge); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }

/* On ink. */
.btn--paper { color: var(--ink); background: var(--paper); font-weight: 700; }
.btn--paper:hover { color: var(--ink); background: var(--line-2); }

.btn--sm { padding: 13px 24px; font-size: 15px; font-weight: 700; }
.btn--xs { padding: 11px 22px; font-size: 14px; font-weight: 700; }

.btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.topbar__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 30px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-right: auto;
  text-decoration: none;
}

/* One path with fill-rule: evenodd, so the D is a hole rather than a second
   colour. The mark then takes whatever surface it sits on — ink tile with a
   paper D here, and the reverse on a dark one — out of a single file. Pinned
   to --ink so it does not travel with the link's hover colour. */
.wordmark__mark {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--ink);
}

.nav { display: flex; align-items: center; gap: 30px; }

.nav a {
  text-decoration: none;
  color: var(--body);
  font-size: 14.5px;
  font-weight: 500;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 700; }

.nav a.btn-nav {
  color: var(--paper);
  background: var(--ink);
  padding: 10px 20px;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.nav a.btn-nav:hover { color: var(--paper); background: var(--ink-hover); }

/* Mobile disclosure. Hidden above the breakpoint; see the responsive block.
   <details> opens and closes without script — site.js only adds the outside
   click and Escape dismissals. */
.menu { display: none; position: relative; }

.menu > summary {
  list-style: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--pill);
}
.menu > summary::-webkit-details-marker { display: none; }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  display: grid;
  gap: 2px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 8px;
  box-shadow: 0 24px 48px -24px rgba(16, 20, 28, 0.35);
}

.menu__panel a {
  text-decoration: none;
  color: var(--body);
  font-size: 15px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 8px;
}
.menu__panel a:hover { color: var(--ink); background: var(--surface); }
.menu__panel a[aria-current='page'] { color: var(--ink); font-weight: 700; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 84px var(--gutter) 0;
  text-align: center;
}

.hero--page {
  padding: 76px var(--gutter) 24px;
}

/* Two-column page head (About, Contact). */
.hero--split {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px clamp(32px, 5vw, 96px);
  align-items: start;
  padding: 76px var(--gutter) 40px;
}

/* --- Browser-chrome screenshot ------------------------------------------ */
.shot { margin: 64px 0 0; }

.shot__frame {
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-bottom: 0;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 40px 80px -40px rgba(16, 20, 28, 0.35);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid #eef0f2;
}

.shot__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e4e6e9;
}

.shot__url {
  font-size: 12.5px;
  color: var(--mute);
  margin-left: 10px;
}

.shot img { width: 100%; display: block; }

/* --- Figures ------------------------------------------------------------ */
.fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 24px 48px -32px rgba(16, 20, 28, 0.3);
}
.fig img { width: 100%; display: block; }

.fig--lg { border-radius: var(--r-md); }
.fig--flat { box-shadow: none; }

/* On an ink band the frame must not keep .fig's white background, or the
   caption strip renders --d-mute on white: 2.7:1, and fails. */
.fig--ink { background: var(--ink); border-color: var(--d-line); }
.fig--ink .fig__cap { color: var(--d-mute); border-color: var(--d-line); }

.fig__cap {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--mute);
  border-top: 1px solid var(--line);
}
.fig__cap--top { border-top: 0; border-bottom: 1px solid var(--line); }

/* --- Capability ticker -------------------------------------------------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
}

.marquee__track {
  display: flex;
  gap: clamp(26px, 3.5vw, 52px);
  width: max-content;
  padding-left: 48px;
  animation: marquee 42s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* One item per thing the studio actually ships. The middot lives on the item
   rather than between items, so the set still reads right where the loop
   wraps around to itself. */
.tick {
  font-size: 15.5px;
  color: var(--body);
  white-space: nowrap;
}

.tick::after {
  content: "·";
  margin-left: clamp(26px, 3.5vw, 52px);
  color: var(--line-2);
}

/* --- Alternating feature rows (home) ------------------------------------ */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 5vw, 96px);
  align-items: center;
  padding: 40px 0;
}

/* Image first, text second, without reordering the source. */
.feat--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feat--flip .fig { order: -1; }

.feat__n {
  font-size: 14px;
  font-weight: 700;
  color: var(--mute);
  margin: 0 0 12px;
  font-feature-settings: 'tnum' 1;
}

.feat__text {
  font-size: 15.5px;
  color: var(--body);
  margin: 14px 0 0;
  max-width: 46ch;
}

/* --- Founder card ------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 64px);
  margin: 64px 0 96px;
}

.founder__fig { margin: 0; }
.founder__fig img { width: 100%; display: block; border-radius: var(--r-sm); }

.founder__h {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  max-width: 22ch;
}

.founder__text {
  font-size: 15.5px;
  color: var(--body);
  margin: 16px 0 0;
  max-width: 58ch;
}

.founder__by { font-size: 14px; color: var(--mute); margin: 18px 0 0; }
.founder__by strong { color: var(--ink); font-weight: 600; }

/* --- Close band --------------------------------------------------------- */
.close { text-align: center; padding: 104px var(--gutter); }
.close--sm { padding: clamp(64px, 7vw, 96px) var(--gutter); }

.close__text {
  font-size: 16px;
  color: var(--d-mute);
  margin: 22px auto 0;
  max-width: 50ch;
}

/* --- Case card (work) --------------------------------------------------- */
.casecard {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.casecard:hover { color: inherit; background: var(--surface-hover); }

.casecard__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.casecard__body {
  padding: clamp(28px, 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.casecard__h {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
}

.casecard__text { font-size: 15px; color: var(--body); margin: 12px 0 0; }

.casecard__stats {
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.casecard__n {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
}

.casecard__l { font-size: 12.5px; color: var(--mute); margin: 4px 0 0; }

.casecard__go { font-weight: 700; font-size: 15px; margin-top: auto; }

/* --- Kicker (small uppercase label inside cards) ------------------------ */
.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 10px;
}
.kicker--sm { font-size: 12px; margin-bottom: 4px; }
.kicker--gap { margin-bottom: 16px; }
.kicker--ink { color: var(--d-label); }

/* --- Slots (dashed cards) ----------------------------------------------- */
.slot {
  border: 1px dashed var(--edge);
  border-radius: var(--r-md);
  padding: 26px;
}

.slot__text { font-size: 14.5px; color: var(--body); margin: 0; }

.slot--ink {
  background: var(--ink);
  color: var(--d-text);
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.slot--ink .slot__text { color: var(--d-body); margin-bottom: 18px; }
.slot--ink .btn { margin-top: auto; }

.slot__h { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; }

/* --- Service rows ------------------------------------------------------- */
.svcs { display: grid; gap: 20px; }

.svc {
  display: grid;
  grid-template-columns: 72px minmax(0, 320px) minmax(0, 1fr);
  gap: 20px clamp(24px, 4vw, 64px);
  align-items: start;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 44px);
}

.svc__n {
  font-weight: 700;
  font-size: 15px;
  color: var(--mute);
  margin: 0;
  font-feature-settings: 'tnum' 1;
}

.svc__h {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0;
}

.svc__text { font-size: 15.5px; color: var(--body); margin: 0; max-width: 58ch; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.tag {
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  padding: 5px 13px;
  background: var(--paper);
}

/* --- Numbered rules (process, beliefs, risk, what-I-built) -------------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.5vw, 36px); }

.step { border-top: 1px solid var(--d-line); padding-top: 18px; }

.step__n {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-label);
  margin: 0 0 8px;
  font-feature-settings: 'tnum' 1;
}

.step__h { font-size: 16.5px; font-weight: 700; margin: 0 0 6px; }
.step__h--lg { font-size: 17px; }
.step__text { font-size: 14px; color: var(--d-mute); margin: 0; }
.step__text--lg { font-size: 14.5px; }

.step__belief {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  max-width: 40ch;
}

.band__lede {
  font-size: 15.5px;
  color: var(--d-mute);
  margin: 14px 0 0;
  max-width: 60ch;
}

/* --- Q&A cards ---------------------------------------------------------- */
.qa { background: var(--surface); border-radius: var(--r-md); padding: 26px; }
.qa__q { font-size: 16.5px; font-weight: 700; margin: 0 0 8px; }
.qa__a { font-size: 14.5px; color: var(--body); margin: 0; }

/* --- Pricing ------------------------------------------------------------ */
.prices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; }

.plan {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}

.plan--ink { background: var(--ink); color: var(--d-text); }

.plan__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }

.plan__name { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; margin: 0; }

.plan__badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--d-chip);
  color: var(--d-strong);
  border-radius: var(--pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.plan__price {
  font-weight: 700;
  font-size: clamp(38px, 3.6vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 14px 0 4px;
}

.plan__meta { font-size: 13.5px; color: var(--mute); margin: 0 0 22px; }
.plan--ink .plan__meta { color: var(--d-mute); }

.plan__list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--body);
}
.plan__list li { border-top: 1px solid var(--line); padding-top: 10px; }
.plan--ink .plan__list { color: var(--d-body); }
.plan--ink .plan__list li { border-top-color: var(--d-line); }

.plan .btn { margin-top: auto; }

/* --- Add-ons ------------------------------------------------------------ */
.addon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
}

.addon__price {
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1;
}

.addon__unit { font-size: 13px; color: var(--mute); margin: 6px 0 0; }
.addon__h { font-size: 16.5px; font-weight: 700; margin: 0 0 6px; }
.addon__text { font-size: 14.5px; color: var(--body); margin: 0; }

/* --- Small fact cells (contact, case study) ----------------------------- */
.cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.cell { background: var(--surface); border-radius: var(--r-xs); padding: 18px 20px; }
.cell--lg { padding: 18px 22px; }

.cell__val { font-size: 14.5px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.cell__val--lg { font-size: 15px; }

/* --- Ordered list with a rule above each row (contact) ------------------ */
.nextlist { display: grid; gap: 20px; }

.nextlist__row {
  display: flex;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.nextlist__n {
  font-weight: 700;
  font-size: 14px;
  color: var(--mute);
  font-feature-settings: 'tnum' 1;
}

.nextlist__h { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.nextlist__text { font-size: 14.5px; color: var(--body); margin: 0; }

/* --- Spec table (about) ------------------------------------------------- */
.spec { background: var(--surface); border-radius: var(--r-md); padding: 26px; margin-top: 16px; }
.spec__rows { display: grid; gap: 12px; font-size: 15px; }

.spec__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.spec__row span { color: var(--body); }
.spec__row strong { font-weight: 700; }

.portrait { margin: 0; }
.portrait img { width: 100%; display: block; border-radius: var(--r-md); }

/* --- Contact form ------------------------------------------------------- */
.form {
  background: var(--ink);
  color: var(--d-text);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px);
  display: grid;
  gap: 18px;
  border: 0;
  margin: 0;
}

.form__title { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0; }

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-mute);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  background: var(--d-field);
  border: 1px solid var(--d-line);
  border-radius: 10px;
  color: var(--d-text);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
}
.input::placeholder { color: var(--d-faint); }
textarea.input { resize: vertical; }

/* Required fields on the contact form — email and website. The palette carries
   no red, so the invalid state is signalled in the site's own neutral language,
   a bright double hairline, rather than by introducing the only chromatic
   colour on the site. Colour is not doing the work alone either way: the
   browser's own validation bubble states the rule, from the input's `title`
   where one is set and from the browser's own wording where it is not. */
.field__req {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-faint);
  margin-left: 6px;
}

.field__hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--d-faint);
  margin: 6px 0 0;
}

/* :user-invalid, not :invalid — a required field is invalid the moment the
   page loads, and :invalid would flag an untouched form before the visitor
   has typed a character. */
.input:user-invalid {
  border-color: var(--paper);
  box-shadow: 0 0 0 1px var(--paper);
}

.homes { border: 0; padding: 0; margin: 0; min-width: 0; }

.homes__legend { font-size: 13px; font-weight: 600; color: var(--d-mute); padding: 0; margin-bottom: 8px; }

.homes__opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Radio + label chips. The design export drove these from component state and
   an inline onClick; a radio group does the same thing with no script, and
   still works with JavaScript off. */
.homes__input { position: absolute; opacity: 0; width: 0; height: 0; }

.homes__chip {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--pill);
  padding: 8px 16px;
  cursor: pointer;
  background: var(--d-field);
  color: var(--d-body);
  border: 1px solid var(--d-line);
}
.homes__chip:hover { border-color: var(--d-faint); }

.homes__input:checked + .homes__chip {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.homes__input:focus-visible + .homes__chip {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.form__submit {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  padding: 14px 24px;
  cursor: pointer;
}
.form__submit:hover { background: var(--line-2); }

.form__note { font-size: 13px; color: var(--d-faint); margin: 0; }

/* --- Case study --------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 96px);
}

.split__text { font-size: 16px; color: var(--body); margin: 0; max-width: 62ch; }
.split__text + .split__text { margin-top: 14px; }

.result { background: var(--surface); border-radius: var(--r-sm); padding: 26px; }
.result--ink { background: var(--ink); color: var(--d-text); }

.result__n {
  font-weight: 700;
  font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1;
}

.result__l { font-size: 13.5px; color: var(--mute); margin: 8px 0 0; }
.result--ink .result__l { color: var(--d-mute); }

.scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.score {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 22px;
  text-align: center;
}
.score--ink { background: var(--ink); color: var(--d-text); border-color: var(--ink); }

.score__n { font-weight: 700; font-size: 34px; letter-spacing: -0.02em; margin: 0; line-height: 1; }
.score__l { font-size: 13px; color: var(--mute); margin: 6px 0 0; }
.score--ink .score__l { color: var(--d-mute); }

.body-text { font-size: 16px; color: var(--body); margin: 0; max-width: 66ch; }

/* --- Footer ------------------------------------------------------------- */
.sitefoot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--mute);
  border-top: 1px solid var(--line);
}

.sitefoot__brand { font-weight: 700; color: var(--ink); }

.sitefoot__links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.sitefoot__links a { color: var(--body); }

/* The ink variant sits inside a .band, so it needs no background of its own. */
.sitefoot--dark { color: var(--d-faint); border-top-color: var(--d-line-2); }
.sitefoot--dark .sitefoot__brand { color: var(--d-strong); }
.sitefoot--dark .sitefoot__links a { color: var(--d-mute); }
.sitefoot--dark .sitefoot__links a:hover { color: var(--d-text); }

/* --- Spacing utilities --------------------------------------------------
   Last, deliberately. These have the same specificity as the component rules
   they adjust, so they only win by coming after them — .fig and .body-text
   both zero their own margin, and a utility declared earlier would lose. */
.after-block { margin-top: 32px; }
.after-band { margin-top: 44px; }

/* --- Responsive ---------------------------------------------------------
   One block, so every breakpoint is in one place. 900px is the design's own
   breakpoint; 880px is where the nav runs out of room; 620px is where the
   remaining multi-column grids stop working on a phone. */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .scores { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .feat,
  .feat--flip,
  .founder,
  .svc,
  .hero--split,
  .split,
  .casecard,
  .prices,
  .addon { grid-template-columns: 1fr; }

  /* Without an explicit order the image would sit above the number it
     illustrates on every other row; source order is text-then-image. */
  .feat--flip .fig { order: 0; }

  .founder__fig img { max-width: 280px; }

  .casecard__img { height: auto; aspect-ratio: 1104 / 574; }

  .hero { padding-top: 56px; }
  .hero--page { padding-top: 56px; }
  .hero--split { padding-top: 56px; }

  .shot { margin-top: 44px; }
  .founder { margin: 48px 0 64px; }
  .close { padding: 72px var(--gutter); }
}

@media (max-width: 880px) {
  .nav { display: none; }
  .menu { display: block; }
  .topbar__in { gap: 16px; }
}

@media (max-width: 620px) {
  .g2,
  .g3,
  .cells,
  .steps,
  .scores { grid-template-columns: 1fr; }

  .casecard__stats { gap: 20px; }
  .btn { width: 100%; }
  .btn-nav, .menu > summary { width: auto; }
  .btn-row { gap: 10px; }
  .marquee { padding: 18px 0; }
}

/* --- Motion -------------------------------------------------------------
   The marquee is the only thing that moves without a user gesture, and it
   duplicates its content, so stopping it leaves the first set legible.
   site.js's scroll reveals check the same query in JavaScript. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  * { scroll-behavior: auto; }
}