/* ============================================================
   keith.com — Keith Brand Guidelines, July 2026
   Keith Red #E90000 · Keith Black #000000
   Keith Cream #FCF8F0 · Keith White #FFFFFF
   Red is an accent only (≈1:7:7 against black and cream):
   highlights, annotations, the logo dot + cross, CTA full stops.
   Logo, highlighter strokes and favicon are the supplied brand
   assets in /assets. Ritmica (Optimo) is the brand font, licensed
   for keith.com (web licence, Jul 2026) and served from /fonts.
   Libre Baskerville = fine print only.
   Nanum Pen = annotations only.
   ============================================================ */

/* LEGAL DISCLAIMER
 * These Fonts are licensed only for use on these domains and their subdomains:
 * keith.com
 * It is illegal to download or use them on other websites.
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 * Optimo webfonts are protected by copyright law and provided under license.
 * To modify, alter, translate, convert, decode or reverse engineer in any
 * manner whatsoever, including converting the Font Software into a different
 * format is strictly prohibited. The webfont files are not to be used for
 * anything other than web font use.
 * optimo.ch
 */
@font-face { font-family: "Ritmica"; src: url("/fonts/Ritmica-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Ritmica"; src: url("/fonts/Ritmica-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ritmica"; src: url("/fonts/Ritmica-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --red: #E90000;
  --black: #000000;
  --cream: #FCF8F0;
  --white: #FFFFFF;
  --black-80: #333333;
  --black-60: #666666;
  --black-20: #cccccc;

  --sans: "Ritmica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  --pen: "Nanum Pen Script", cursive;

  --size-hero: clamp(52px, min(8.5vw, 13svh), 124px);
  --size-h1: clamp(38px, 5vw, 68px);
  --size-h2: clamp(26px, 3vw, 40px);
  --size-lead: clamp(18px, 1.6vw, 21px);

  --shell: 1160px;
  --gutter: clamp(20px, 4vw, 48px);
}

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

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--black);
  background: var(--cream);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: var(--cream); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* bands: white canvas · cream surface · black statement */
.band { padding: clamp(52px, 7vw, 104px) 0; }
.band-cream { background: var(--cream); }
.band-black { background: var(--black); color: var(--cream); }

.rule { border: 0; border-top: 1px solid var(--black); }
.band-black .rule { border-color: rgba(252,248,240,0.3); }

/* type — deck rules: display leading 100%, tracking −5%→0%, sentence case, full stops */
h1, h2, h3 { font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.display-hero { font-size: var(--size-hero); letter-spacing: -0.03em; }
.display-1 { font-size: var(--size-h1); letter-spacing: -0.03em; }
.display-2 { font-size: var(--size-h2); }

.lead { font-size: var(--size-lead); line-height: 1.45; }
.measure { max-width: 34em; }
.muted { color: var(--black-60); }
.band-black .muted { color: rgba(252,248,240,0.6); }

.fine { font-family: var(--serif); font-size: 13.5px; line-height: 1.65; }

/* numbered section eyebrow, deck-style ("2. Copy") */
.eyebrow { font-size: 14px; margin-bottom: clamp(18px, 3vw, 32px); }
.eyebrow .no { color: var(--red); }

.stop { color: var(--red); }

/* highlight device — the brand highlighter strokes (real assets).
   Four variants; hl-2/3/4 pick an alternative stroke. */
mark {
  background: transparent;
  color: var(--cream);
  position: relative;
  z-index: 0;
  padding: 0 0.14em;
  white-space: nowrap;
}
mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.14em; right: -0.12em; top: -0.04em; bottom: -0.08em;
  background: url("/assets/highlight-1.png") center / 100% 100% no-repeat;
}
mark.hl-2::before { background-image: url("/assets/highlight-2.png"); }
mark.hl-3::before { background-image: url("/assets/highlight-3.png"); }
mark.hl-4::before { background-image: url("/assets/highlight-4.png"); }

/* nerdy note — red handwritten annotation, ±4° */
.note {
  font-family: var(--pen);
  color: var(--red);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.05;
  display: inline-block;
  transform: rotate(-4deg);
}
.note-block { display: block; margin: 0.5em 0 0 clamp(24px, 8vw, 110px); }

/* red dash divider (business-card motif) */
.dash { display: block; width: 34px; height: 5px; background: var(--red); border: 0; }

/* ---------- logo lockup ----------
   The real wordmark SVGs from the brand asset pack:
   keith-logo-cream.svg on black, keith-logo-black.svg on light. */
.keith { display: inline-block; line-height: 0; text-decoration: none; }
.keith img, .keith svg { display: block; height: 100%; width: auto; }
.site-head .keith img { height: 36px; }
.site-foot .keith img { height: 52px; }

/* hero band composes to one viewport: content on top, wordmark
   pinned to the bottom of the first screen */
.band-hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 74px);
  padding: clamp(28px, 4svh, 48px) 0 clamp(24px, 3.5svh, 40px);
}
.band-hero > .shell { display: flex; flex-direction: column; flex: 1; width: 100%; }
.band-hero .mt-3 { margin-top: 28px; }
.band-hero .note-block { margin-top: 0.35em; }

/* hero lockup: inline SVG so the dot + crossbar can animate in.
   Sized against the viewport, bottom-anchored by the flex column. */
.keith-hero {
  display: block;
  margin-top: auto;
  padding-top: clamp(20px, 3svh, 40px);
  height: clamp(90px, 16svh, 200px);
  box-sizing: content-box;
  max-width: 100%;
}
.keith-hero svg { height: 100%; width: auto; max-width: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .keith-hero .logo-dot {
    transform-box: fill-box; transform-origin: center;
    animation: dot-i 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.9s backwards;
  }
  .keith-hero .logo-bar {
    transform-box: fill-box; transform-origin: left center;
    animation: cross-t 0.4s cubic-bezier(0.22,1,0.36,1) 1.35s backwards;
  }
}
@keyframes dot-i { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cross-t { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

/* ---------- header ---------- */
.site-head { background: var(--black); color: var(--cream); }
.site-head .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.site-head nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.site-head nav a { color: var(--cream); text-decoration: none; font-size: 15px; }
.site-head nav a:hover, .site-head nav a.active { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .site-head nav a.hide-s { display: none; } }

/* ---------- buttons — sharp; labels end in a red full stop ---------- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--black);
  color: var(--black);
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-solid { background: var(--black); color: var(--cream); }
.btn-solid:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn-ghost:hover { background: var(--black); color: var(--cream); }
.band-black .btn, .site-head .btn { border-color: var(--cream); color: var(--cream); }
.band-black .btn-solid, .site-head .btn-solid { background: var(--cream); color: var(--black); }
.band-black .btn-solid:hover, .site-head .btn-solid:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
.band-black .btn-ghost:hover { background: var(--cream); color: var(--black); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.site-head .btn { padding: 10px 18px; font-size: 15px; }

/* ---------- grids ---------- */
.split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px, 3vw, 36px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px, 2.5vw, 32px); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0,1fr); } .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) { .grid-2, .grid-4 { grid-template-columns: minmax(0,1fr); } }

/* stat cell */
.stat { border-top: 1px solid var(--black); padding-top: 18px; }
.band-black .stat { border-color: rgba(252,248,240,0.35); }
.stat .n { font-weight: 600; font-size: clamp(42px, 5vw, 76px); line-height: 1; letter-spacing: -0.03em; }
.stat .n .unit { font-size: 0.34em; font-weight: 400; margin-left: 6px; }
.stat p { margin-top: 12px; font-size: 15px; }

/* ---------- tables ---------- */
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th, .fee-table td {
  text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--black-20);
  vertical-align: top; font-size: 15.5px;
}
.fee-table th { font-weight: 600; border-bottom-color: var(--black); }
.fee-table .num { text-align: right; padding-right: 0; white-space: nowrap; }

/* fee card */
/* on cream the card is defined by its keyline, not a white fill —
   the page never puts white behind copy (.band-black gives it a
   cream tile instead) */
.fee-card { background: transparent; border: 1px solid var(--black); padding: clamp(24px, 3vw, 40px); }
.fee-card .price { font-weight: 600; font-size: clamp(42px, 4.5vw, 60px); line-height: 1; letter-spacing: -0.03em; margin: 16px 0 4px; }

/* ---------- process steps ----------
   base: a narrow number rail beside the content, used inside the
   home page's .split column */
.step {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(22px, 3vw, 40px) 0;
  border-top: 1px solid var(--black);
}
.step .step-no { font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; }
.step .step-no::after { content: "."; color: var(--red); }
.step h3 { font-size: clamp(21px, 2.2vw, 28px); margin-bottom: 10px; }
.step p { max-width: 62ch; }

/* .steps — the full-page list. Number and heading share a left rail so
   the rail carries content rather than white space, and every step's
   copy starts on one edge. Buying / Selling are split by a single
   vertical hairline; step dividers drop to a tint so those hairlines
   read as the stronger rule. */
.steps .step {
  grid-template-columns: clamp(200px, 22vw, 260px) minmax(0,1fr);
  gap: clamp(24px, 4vw, 56px);
  border-top-color: var(--black-20);
}
.steps .step:first-child { border-top-color: var(--black); }
.steps .step-no { margin-bottom: 12px; }
.steps .step h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.05; margin-bottom: 0; }
.steps .bs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.steps .bs > div { padding-right: clamp(20px, 3vw, 36px); }
.steps .bs > div + div {
  padding-right: 0;
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--black-20);
}
.steps .bs h4 { font-size: 14px; margin-bottom: 7px; }
.steps .bs p { font-size: 15px; line-height: 1.5; color: var(--black-80); }
.steps .note-trail {
  max-width: none;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--black-20);
  font-size: 15px;
}
/* the rail has nowhere to go on narrow screens: stack it over the content */
@media (max-width: 900px) {
  .steps .step { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .steps .step-no { margin-bottom: 6px; }
}
@media (max-width: 700px) {
  .steps .bs { grid-template-columns: minmax(0,1fr); }
  .steps .bs > div { padding-right: 0; }
  .steps .bs > div + div { padding-top: 18px; padding-left: 0; border-left: 0; }
}

/* ---------- faq ---------- */
.faq details { border-top: 1px solid var(--black); }
.faq details:last-child { border-bottom: 1px solid var(--black); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.02em;
  padding: 18px 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-weight: 600; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding: 0 0 20px; max-width: 62ch; }
.faq a { color: inherit; text-underline-offset: 3px; }

/* ---------- prose ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(23px, 2.4vw, 31px); margin: clamp(34px, 4.5vw, 52px) 0 14px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.55; margin-bottom: 13px; }
.prose ul { padding-left: 22px; margin-bottom: 13px; }
.prose li { margin-bottom: 7px; }
.prose a { color: inherit; text-underline-offset: 3px; }
.prose a.btn { text-decoration: none; }
.prose a.btn-solid { color: var(--cream); }
.prose h3 { font-size: clamp(17px, 1.5vw, 20px); margin: 28px 0 10px; }
.prose h2 .no { color: var(--red); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--black-20); font-size: 15px; }
.prose th { font-weight: 600; border-bottom-color: var(--black); }

/* defined-terms table: the th is a row label, not a column header, so it takes
   the same light rule as the cell beside it rather than the heavier header rule */
.prose .terms th { width: 11em; vertical-align: top; white-space: normal; padding-right: 24px; border-bottom-color: var(--black-20); }
.prose .terms td { vertical-align: top; }

/* contents list for long documents — rules rather than a filled box */
.prose .contents { margin-top: 22px; padding: 22px 0; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black-20); }
.prose .contents ol { columns: 2; column-gap: 40px; padding-left: 20px; margin: 0; }
.prose .contents li { font-size: 15px; line-height: 1.5; margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 540px) { .prose .contents ol { columns: 1; } }

/* quiet aside, set off by a rule */
.prose .aside { margin-bottom: 13px; padding-left: 18px; border-left: 2px solid var(--black-20); }

/* ---------- footer ---------- */
.site-foot { background: var(--black); color: var(--cream); padding: clamp(44px, 6vw, 80px) 0 32px; }
.site-foot .cols { display: grid; grid-template-columns: minmax(0,2fr) repeat(3, minmax(0,1fr)); gap: clamp(24px, 4vw, 52px); margin: 36px 0 44px; }
@media (max-width: 860px) { .site-foot .cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.site-foot h4 { font-size: 13px; font-weight: 400; color: rgba(252,248,240,0.55); margin-bottom: 13px; }
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { color: var(--cream); text-decoration: none; font-size: 15px; }
.site-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-foot .reg {
  border-top: 1px solid rgba(252,248,240,0.25);
  padding-top: 24px;
  display: flex; gap: 28px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
}
.site-foot .reg p { font-family: var(--serif); font-size: 12.5px; line-height: 1.7; color: rgba(252,248,240,0.65); max-width: 72ch; }
.clc-badge { width: 200px; max-width: 100%; flex: 0 0 auto; }
.clc-badge .frame { position: relative; padding-bottom: 36%; overflow: hidden; }
.clc-badge iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ---------- spacing ---------- */
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mt-4 { margin-top: clamp(40px, 6vw, 64px); }
.mb-2 { margin-bottom: 24px; } .mb-3 { margin-bottom: 40px; }

/* ============================================================
   APPENDED — "Always on" 2am chat (section 04)
   Editorial illustration of a chat, not an iOS screenshot: no card
   and no phone, the bubbles sit straight on the band. Red = the
   client, the band's opposite = Keith. Red pen annotation above.

   Every colour routes through the four custom properties on
   .chat-thread, so the block follows whatever band it is dropped
   into. The declaration below is the light-band case (cream/white
   surfaces); .band-black flips it. Restyle by setting the four
   properties, not by overriding the bubble rules.
   ============================================================ */

.chat-split {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

/* the four knobs. Light-band default; .band-black flips them below.
   Keith's bubble needs a surface that reads against the band, so on
   light bands it is white with a hairline, on black it is cream. */
.chat-col {
  max-width: 460px;
  --chat-in-bg: transparent;
  --chat-in-fg: var(--black);
  --chat-in-edge: var(--black-20);
  --chat-rule: var(--black-20);
  --chat-stamp: var(--black-60);
}
.band-black .chat-col {
  --chat-in-bg: var(--cream);
  --chat-in-fg: var(--black);
  --chat-in-edge: var(--cream);
  --chat-rule: rgba(252, 248, 240, 0.25);
  --chat-stamp: rgba(252, 248, 240, 0.55);
}

/* red pen annotation, aligned to the thread's right edge */
.chat-note { text-align: right; margin-bottom: 10px; padding-right: 6px; }
.chat-note .note { font-size: clamp(22px, 2.2vw, 30px); }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--chat-rule, var(--black-20));
}
.chat-who {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }

.chat-thread { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }

.msg { display: flex; flex-direction: column; max-width: 86%; }
.msg-in { align-self: flex-start; align-items: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }

.msg .bubble {
  font-size: 15px;
  line-height: 1.42;
  padding: 12px 15px;
  border-radius: 16px;
}
.msg-in .bubble {
  background: var(--chat-in-bg);
  color: var(--chat-in-fg);
  border: 1px solid var(--chat-in-edge);
  border-bottom-left-radius: 5px;
}
.msg-out .bubble {
  background: var(--red);
  color: var(--cream);
  border: 1px solid var(--red);
  border-bottom-right-radius: 5px;
}

/* timestamps — small, muted, mono-ish */
.msg .stamp {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 0 4px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--chat-stamp);
}
.msg .ticks { width: 14px; height: 7px; fill: none; stroke: var(--red); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* supporting copy — red dash motif, scaled down */
.chat-points { list-style: none; display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); max-width: 31em; }
.chat-points li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.chat-points .d { width: 22px; height: 4px; background: var(--red); flex: 0 0 auto; transform: translateY(-5px); }
.chat-points .t { text-wrap: balance; }

/* screen-reader-only */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 860px) {
  .chat-split { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 44px); }
  .chat-col { max-width: none; }
  .chat-note { padding-right: 14px; }
  .msg { max-width: 92%; }
  .chat-points { max-width: none; }
}

/* ---------- benefits grid (Why Keith) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px, 2.5vw, 32px); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) { .grid-3 { grid-template-columns: minmax(0,1fr); } }
.benefit { border-top: 1px solid var(--black); padding-top: 16px; }
.benefit h3 { font-size: clamp(19px, 1.8vw, 24px); }
.benefit p { margin-top: 10px; font-size: 15px; }
.benefit .credential { margin-top: 6px; font-size: 13.5px; font-weight: 300; }

/* ---------- waitlist ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.waitlist { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; max-width: 46em; }
.waitlist-input {
  flex: 1 1 16em; min-width: 0;
  font-family: var(--sans); font-size: 17px; color: var(--black);
  background: transparent; border: 1px solid var(--black); padding: 14px 16px;
}
.waitlist-input::placeholder { color: var(--black-60); }
.waitlist-input[type="tel"] { flex: 0 1 12em; }
.waitlist-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.waitlist .btn { flex: 0 0 auto; }
.waitlist-msg { margin-top: 16px; font-size: 15px; color: var(--black-60); }
.waitlist-msg.is-error { color: var(--red); }


/* ---------- blog teaser ---------- */
.post h3 { font-size: clamp(23px, 2.4vw, 31px); }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- contact page ---------- */
.contact-hero { padding: clamp(56px, 6.5vw, 92px) 0; }
.contact-line { font-size: clamp(38px, 5vw, 70px); letter-spacing: -0.03em; line-height: 1.1; }

.contact-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 860px) { .contact-split { grid-template-columns: minmax(0,1fr); } }

.contact-mark { display: block; width: 100%; max-width: 420px; }
.contact-mark img { width: 100%; height: auto; }
.contact-note { margin-top: clamp(24px, 3vw, 34px); }

.contact-list { list-style: none; border-top: 1px solid var(--black); }
.contact-item { border-bottom: 1px solid var(--black); padding: 22px 0; }
.contact-item .k { font-size: 13px; color: var(--black-60); margin-bottom: 8px; }
.contact-item .val {
  display: block;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}
.contact-item .val:hover { color: var(--red); }

/* closing CTA band — cream so it reads apart from the black footer */
.contact-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 56px); }
.contact-cta h2 { max-width: 10em; }
@media (max-width: 640px) { .contact-cta { flex-direction: column; align-items: flex-start; gap: 28px; } }

/* keeps a hyphenated word from breaking at its hyphen */
.nowrap { white-space: nowrap; }

/* ============================================================
   APPENDED — "The small print, everywhere" (section 04)
   The brand image system from the K&F deck: an idyllic photograph
   that Keith has pedantically annotated. The photo is a clean
   rectangle straight onto the cream; the annotation is live text
   in the pen face plus a hand-drawn-style arrow, so it stays
   sharp, translatable and re-flowable rather than baked in.
   ============================================================ */

.pedantry {
  --pedantry-gap: clamp(16px, 2.4vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 860px) minmax(0, 250px);
  gap: var(--pedantry-gap);
  align-items: start;
}

.pedantry img {
  display: block;
  width: 100%;
  height: auto;
}

/* the annotation: pen text, then the arrow curving back into the photo */
.pedantry-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(6px, 1.5vw, 20px);
}
.pedantry-mark .note { font-size: clamp(22px, 2.4vw, 32px); transform: rotate(-3deg); }

.pedantry-arrow {
  width: clamp(100px, 10vw, 140px);
  height: auto;
  /* pull back across the gutter so the tip lands on the wall in the photo */
  margin: 2px 0 0 calc(-1 * var(--pedantry-gap) - 55px);
  fill: none;
  stroke: var(--red);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px) {
  /* stack: photo, then the annotation tucked under its right edge,
     with the arrow flipped so it still points back at the photo */
  .pedantry { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pedantry-mark {
    flex-direction: column-reverse;
    align-items: flex-end;
    padding: 0 clamp(8px, 4vw, 40px) 0 0;
  }
  .pedantry-arrow { transform: scaleY(-1); margin: -14px 6px 0 0; }
}

/* ============================================================
   APPENDED — phones (mobile optimisation pass)
   Everything below is scoped to a max-width media query, so it
   only ever corrects the small-screen rendering of rules above.
   ============================================================ */

/* ---------- header: a second link row on phones ----------
   Under 640px the main nav keeps only Log in + Hire Keith, so the
   four section links move to their own row above the hairline rule.
   No JS, no disclosure, everything one tap away. */
.site-head .nav-s { display: none; }

@media (max-width: 640px) {
  .site-head .bar { padding-bottom: 12px; gap: 16px; }
  .site-head .nav-s {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding-bottom: 14px;
  }
  .site-head .nav-s a {
    color: var(--cream);
    text-decoration: none;
    font-size: 14.5px;
    padding: 6px 0;              /* keeps the tap target ~30px tall */
  }
  .site-head .nav-s a.active { text-decoration: underline; text-underline-offset: 4px; }
  .site-head nav { gap: 16px; }
  .site-head nav a { padding: 6px 0; }
  .site-head nav a.btn { padding: 10px 16px; }
}

@media (max-width: 640px) {
  /* ---------- display type ----------
     Desktop line breaks inside display headings orphan a word at
     phone widths; let the browser rewrap instead. (Each such <br>
     is preceded by a space so the words stay separated.) */
  .display-1 br { display: none; }

  /* ---------- process steps ----------
     A fixed 64px number column eats a fifth of the measure. Stack
     the number over the copy so the text gets the full width. */
  .step { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .step .step-no { font-size: 22px; }

  /* ---------- footer ----------
     Full-width intro line so the three link groups sit together
     rather than leaving a tall gap beside it. */
  .site-foot .cols { grid-column-gap: 24px; row-gap: 32px; margin: 28px 0 36px; }
  .site-foot .cols > :first-child { grid-column: 1 / -1; }
  /* the long Keith column holds the left track so Legal and Talk to us
     can stack in the right one instead of leaving a gap beside it */
  .site-foot .cols > :nth-child(2) { grid-row: span 2; }
  .site-foot li { margin-bottom: 2px; }
  .site-foot li a { display: inline-block; padding: 5px 0; }
  .site-foot .reg { gap: 24px; }
}

@media (max-width: 540px) {
  /* ---------- stats ----------
     Four stats stacked one-up runs to three screens; the numbers
     read fine two-up and the section stays scannable. */
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 18px; }
  .stat .n { font-size: 40px; }
  .stat p { font-size: 14.5px; }
}



/* ============================================================
   APPENDED — statement bands (warm paper)
   The hero and closing statement sections used to be black slabs.
   They are now cream, with black used only as ink: a hairline rule
   at the head of the band and a heavy rule at its foot. Header and
   footer stay black, so the page is still bookended in black.

   .band-statement is deliberately separate from .band-black rather
   than a redefinition of it — the header and footer share the
   .band-black-scoped button and rule colours, and must not move.
   ============================================================ */

.band-statement {
  background: var(--cream);
  color: var(--black);
  border-top: 1px solid var(--black);
  border-bottom: 11px solid var(--black);
}

/* the 2am chat on a cream band: Keith's replies hold their shape
   against the paper with an ink keyline rather than a fill. */
.band-statement .msg-in .bubble {
  background: transparent;
  border-color: var(--black-20);
}

/* ============================================================
   APPENDED — hero film (the brand film beside the headline)
   The agency banner with its title card trimmed off: the words
   live in the HTML on the left, the film sits in a clean
   editorial rectangle on the right, pen note hanging off it.
   ============================================================ */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero-split .display-hero { font-size: clamp(34px, 3.6vw, 56px); white-space: nowrap; }
.hero-lockup { display: inline-block; }
.hero-lockup .note { display: block; text-align: right; margin-top: 10px; font-size: clamp(22px, 2vw, 30px); }
/* Andy's hero paragraph is four sentences, so it needs a wider,
   quieter setting than the one-line lead it replaced: the film
   gives back some column, and the type steps down a size. */
.hero-split .lead {
  margin-top: 14px;
  font-size: clamp(16px, 1.25vw, 18px);
  max-width: 42em;
}

.hero-film { position: relative; margin: 0; }
.hero-film video { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-film { margin-top: 30px; }
}

/* the industry number, corrected: red pen strike at the brand's -4d */
.n-strike { position: relative; display: inline-block; }
.n-strike::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 50%;
  height: 0.075em;
  background: var(--red);
  border-radius: 0.04em;
  transform: rotate(-4deg);
}

/* fitted display heading: keeps a long highlighted phrase inside its column */
.h2-fit { font-size: clamp(32px, 3.6vw, 52px); }

/* the hero fills the first viewport: band stretches to the fold,
   content vertically centred (74px = rendered header height) */
.band-fold { display: flex; align-items: center; min-height: calc(100svh - 74px); }
.band-fold > .shell { width: 100%; }

/* clip guards the highlighter marks' deliberate edge overhangs */
body { overflow-x: clip; }
@media (max-width: 640px) {
  .h2-fit { font-size: clamp(28px, 8vw, 36px); }
}

/* ============================================================
   APPENDED — alternating cream and black bands
   The page surface is cream (see body) and never white; sections
   alternate cream / black down the page, so black is a full band
   rather than only the header, footer and hero rules.

   .band-black already carried the type, button, stat and chat
   flips. The rules below finish the set: every remaining component
   that draws a black hairline or a white fill gets its inverse, so
   any band can be flipped by swapping one class in the HTML.
   ============================================================ */

/* hairline rules: black ink on cream, a cream tint on black */
.band-black .benefit,
.band-black .step,
.band-black .steps .step:first-child,
.band-black .contact-list,
.band-black .contact-item { border-color: rgba(252, 248, 240, 0.35); }

.band-black .steps .step,
.band-black .steps .bs > div + div,
.band-black .steps .note-trail,
.band-black .fee-table th,
.band-black .fee-table td,
.band-black .prose th,
.band-black .prose td { border-color: rgba(252, 248, 240, 0.22); }

.band-black .steps .step:first-child,
.band-black .fee-table th,
.band-black .prose th { border-bottom-color: rgba(252, 248, 240, 0.35); }

/* secondary copy that was set in black tints */
.band-black .steps .bs p,
.band-black .contact-item .k { color: rgba(252, 248, 240, 0.6); }

/* fee card: a cream tile on the black band (the socials' tile device),
   rather than the white card it is on light bands */
.band-black .fee-card {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--black);
}
.band-black .fee-card .muted { color: var(--black-60); }

/* faq: the rules bookending each question */
.band-black .faq details,
.band-black .faq details:last-child { border-color: rgba(252, 248, 240, 0.35); }

/* on black the solid button is cream, so its label has to be ink */
.band-black .prose a.btn-solid { color: var(--black); }

/* a black band running into the black footer needs a seam */
.site-foot { border-top: 1px solid rgba(252, 248, 240, 0.25); }

/* ============================================================
   APPENDED — nerdy note placement
   Brand: the note is offset from the headline and angled ±4°, and
   it finishes the headline rather than sitting under its first
   word. .note-right hangs it off the end of the line and takes the
   opposite angle, so consecutive pages don't repeat the same tilt.
   ============================================================ */

.note-block.note-right {
  width: fit-content;
  margin: 0.45em clamp(4px, 5vw, 80px) 0 auto;
  text-align: right;
  transform: rotate(4deg);
}
@media (max-width: 640px) {
  /* the tilt throws the tail of a full-width note past the gutter:
     shrink it and let it wrap rather than run off the page */
  .note-block.note-right {
    max-width: 100%;
    margin-right: 4px;
    font-size: clamp(20px, 5.2vw, 26px);
  }
}

/* ============================================================
   APPENDED — annotated photograph, stacked
   The same pedantry device, for a column too narrow to seat the
   annotation beside the photo: the note drops under the picture's
   right edge and the arrow flips so it still points back into it.
   These are the ≤860px rules, made available at any width.
   ============================================================ */

.pedantry-stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pedantry-stack .pedantry-mark {
  flex-direction: column-reverse;
  align-items: flex-end;
  padding: 0 clamp(8px, 4vw, 40px) 0 0;
}
/* the tip overlaps back into the photograph, so the note reads as
   attached to the thing it is pointing at rather than floating
   under the picture */
.pedantry-stack .pedantry-arrow { transform: scaleY(-1); margin: -62px 6px 0 0; }

/* ============================================================
   APPENDED — leasehold: priced, not yet open
   The fee is published so people can plan, and the card is drawn
   as an outline instead of a filled tile so "not yet" reads from
   the shape, not only from the label.
   ============================================================ */

.fee-card-soon { border-style: dashed; }
.band-black .fee-card-soon {
  background: transparent;
  border-color: rgba(252, 248, 240, 0.45);
  color: var(--cream);
}
.band-black .fee-card-soon .muted { color: rgba(252, 248, 240, 0.6); }
.fee-card .soon {
  margin-top: 16px;
  font-size: 13px;
  color: var(--red);
}

/* ============================================================
   APPENDED — "Take a test drive" (section 06)
   Keith's voice, as an object: a black disc with red liquid
   moving inside it, echoing the red dot on the logo's i. Pure
   CSS — three blurred radial blobs drifting on their own timing,
   so no two loops line up and the motion never reads as a GIF.

   The button is deliberately inert: the voice agent is not wired
   up yet, so it carries a data-test-drive hook and nothing else.
   ============================================================ */

.testdrive {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 860px) {
  .testdrive { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 6vw, 48px); }
}

/* the button is a real <button>, so it needs the type reset an <a> doesn't */
button.btn {
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.orb-stage { display: flex; justify-content: center; }

.orb {
  position: relative;
  width: clamp(210px, 25vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
}
/* a hairline of black around the rim, not a spherical shade — the
   disc has to stay flat and graphic, never a rendered 3D ball */
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 clamp(10px, 1.4vw, 18px) var(--black);
  z-index: 2;
}

.orb-blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(clamp(12px, 1.6vw, 22px));
  will-change: transform;
}
.orb-blob-1 {
  top: -8%; left: -12%;
  width: 66%;
  background: radial-gradient(circle at 50% 50%, var(--red) 48%, rgba(233, 0, 0, 0) 76%);
  animation: orb-drift-1 11s ease-in-out infinite;
}
.orb-blob-2 {
  right: -14%; bottom: -6%;
  width: 74%;
  background: radial-gradient(circle at 50% 50%, #ff2d00 44%, rgba(255, 45, 0, 0) 74%);
  animation: orb-drift-2 14s ease-in-out infinite;
}
/* black, and the reason it reads as liquid: it carves voids through
   the red as it drifts instead of the whole disc glowing evenly */
.orb-blob-3 {
  top: 22%; left: 18%;
  width: 58%;
  background: radial-gradient(circle at 50% 50%, var(--black) 42%, rgba(0, 0, 0, 0) 74%);
  animation: orb-drift-3 9s ease-in-out infinite;
}

@keyframes orb-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  34%      { transform: translate3d(52%, 34%, 0) scale(1.18); }
  67%      { transform: translate3d(22%, 62%, 0) scale(0.86); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  30%      { transform: translate3d(-58%, -30%, 0) scale(0.84); }
  70%      { transform: translate3d(-18%, -62%, 0) scale(1.2); }
}
@keyframes orb-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(44%, -34%, 0) scale(1.3); }
  75%      { transform: translate3d(-38%, 26%, 0) scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .orb-blob { animation: none; }
}

/* ============================================================
   APPENDED — in-page brand film
   The banner film dropped into a section column (not the hero):
   a clean editorial rectangle, same treatment as .hero-film.
   ============================================================ */

.section-film { margin: clamp(28px, 3.5vw, 44px) 0 0; }
.section-film video { display: block; width: 100%; height: auto; }

/* ============================================================
   APPENDED — full-width brand photograph
   A black-and-white brand still used as a section rest point.
   ============================================================ */

.band-photo { margin: 0; }
.band-photo img { display: block; width: 100%; height: auto; }

/* ============================================================
   APPENDED — one hover + focus language
   Two signals, and nothing uses both: a BUTTON flips colour, a
   TEXT LINK carries an underline. That distinction is the point,
   so the bar reads as "four links and a call to action" rather
   than five of the same thing.

   What was actually inconsistent: Hire Keith. is an <a> inside
   .site-head nav, so it picked up the nav's hover underline on
   top of its colour flip, while the identical hero button only
   flipped. And several interactive things (the mobile nav row,
   the FAQ questions, body-copy links, the logo) had no hover
   state at all, so the ones that did looked arbitrary.

   Everything interactive also takes one shared red focus ring,
   because a hover-only signal leaves keyboard users with nothing.
   ============================================================ */

/* ---------- the focus ring ----------
   One ring for every control on the site. Red clears 3:1 against
   both the cream and the black bands, and the offset keeps it
   clear of a solid button that has just flipped to red. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---------- buttons: the colour flip is the whole signal ----------
   Strip the nav underline back off the header's button so it
   behaves exactly like the same button in the hero. */
.site-head nav a.btn:hover,
.site-head nav a.btn:focus-visible { text-decoration: none; }

/* the label's red full stop is invisible against the red hover
   fill, so for the duration it borrows the label's colour */
.btn-solid:hover .stop { color: inherit; }

/* ---------- text links: an underline is the whole signal ----------
   Links carrying no underline at rest gain one on hover, at the
   same offset the nav and footer already use, so the header, the
   footer, the blog teaser and the contact page all read alike. */
.site-head .nav-s a:hover,
.post h3 a:hover,
.site-foot a:hover,
.site-head nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the contact page's display-size links flipped to red where
   every other link underlines; they underline now too, with the
   offset scaled to the type so it clears the descenders */
.contact-item .val:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.11em;
  text-decoration-thickness: 0.045em;
}

/* ---------- body-copy links ----------
   These already carry an underline at rest (they have to: inside
   a paragraph there is nothing else marking them), so hover
   strengthens the line rather than adding one. Red is not an
   option here - #E90000 on cream is 4.4:1, under AA for body
   size - so the signal stays in the underline itself. */
.prose a:not(.btn),
.faq a {
  text-decoration-color: var(--black-60);
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):hover,
.faq a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
/* on a black band the muted rest colour is a cream tint, and the
   hover has to be restated at the same weight or the rest rule
   (one class heavier) would win over it */
.band-black .prose a:not(.btn),
.band-black .faq a { text-decoration-color: rgba(252, 248, 240, 0.35); }
.band-black .prose a:not(.btn):hover,
.band-black .faq a:hover { text-decoration-color: currentColor; }

/* ---------- the FAQ question is a control too ----------
   summary had no hover state at all. Underline the question, but
   not the +/- marker: an underline on the summary propagates to
   its in-flow children, and the marker is one, so it would take
   the line too and read as a stray dash out at the right edge.
   Taking the marker out of flow is what stops that (propagated
   decorations skip absolutely positioned boxes); right: 0 holds
   it exactly where space-between had it. */
.faq summary { position: relative; }
.faq summary::after { position: absolute; right: 0; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- the logo ----------
   In the header and the footer the mark is a home link sitting in
   a row of other links, so it underlines like they do. Two things
   it can't do the ordinary way: it holds an <img>, and .keith sets
   line-height: 0, so text-decoration has no line box to draw on -
   hence a rule drawn as a pseudo-element instead, positioned so it
   costs no height and can't nudge the bar or the footer.

   The contact page's oversized mark is deliberately not included:
   there it is artwork rather than navigation, and a rule that wide
   reads as a divider. It still takes the focus ring.

   .keith never set a colour, so an <a> falls back to the UA link
   blue and currentColor came out blue; inherit gives it the cream
   of whichever band it sits on. */
.keith { color: inherit; }
.site-head .keith,
.site-foot .keith { position: relative; }
.site-head .keith:hover::after,
.site-foot .keith:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  border-bottom: 1px solid currentColor;
}

/* ============================================================
   APPENDED — phones, second pass
   Fixes found in a mobile audit across 360 / 390 / 430px.
   ============================================================ */

/* the "Talk to us" column holds a 188px unbreakable email address
   against a ~159px track once the footer goes two-up, so the end of
   it was being cut off the screen. Give the group its own row. */
@media (max-width: 640px) {
  .site-foot .cols > :last-child { grid-column: 1 / -1; }
  .site-foot .cols > :nth-child(2) { grid-row: auto; }
}

/* the footer is black but is not a .band-black, so .muted stayed at
   #666 on black - 3.7:1, under AA. Same cream tint the bands use. */
.site-foot .muted { color: rgba(252, 248, 240, 0.6); }

/* display type sets leading at 100%, and the highlighter bleeds
   above its em box, so on phones - where these headings rewrap to
   two lines - the stroke painted over the line above's descenders. */
@media (max-width: 640px) {
  .display-hero, .display-1 { line-height: 1.12; }
}

/* tap targets: the header row, the footer links and the contact
   page's primary actions were all 28-32px against a 44px minimum */
@media (max-width: 860px) {
  .site-head .nav-s a { padding: 12px 0; }
  .site-foot li a { padding: 11px 0; }
  .contact-item .val { display: block; padding: 8px 0; }
}

/* at 360 the nav wrapped to three rows and ate a fifth of the screen */
@media (max-width: 380px) {
  .site-head .nav-s { gap: 2px 14px; }
  .site-head .nav-s a { font-size: 14px; }
}

/* .band-photo zeroed its own margin, which beat .mb-3 (same
   specificity, later in the file) and sat the headline flush on the
   photograph. Restore the utility where it is asked for. */
.band-photo.mb-3 { margin-bottom: 40px; }
.band-photo.mt-4 { margin-top: clamp(40px, 6vw, 64px); }

/* the annotation arrow's tip lands wherever the photo's corner
   happens to be, which is rarely the thing being annotated. Each
   figure nudges it onto its own subject. */
.pedantry-arrow { translate: var(--arrow-x, 0) var(--arrow-y, 0); }

/* the fence runs across the upper half, so the tip has to climb
   well clear of the child on the slide at the bottom of the frame */
.pedantry-fence { --arrow-y: -150px; --arrow-x: 10px; }
@media (max-width: 700px) {
  .pedantry-fence { --arrow-y: -45px; }
}

/* the pencil height-marks are the joke, and they sit up the wall on
   the right - only relevant once the mark stacks under the photo */
@media (max-width: 860px) {
  .pedantry-heightmarks { --arrow-y: -130px; --arrow-x: -20px; }
}
@media (max-width: 640px) {
  .pedantry-heightmarks { --arrow-y: -95px; }
}