/* ==========================================================================
   jameswarrack.com — design system
   Built from the Claude design export (design-import/), converted from that
   design's inline styles into reusable classes.

   Fonts are self-hosted and subset to latin (65KB total, down from ~250KB
   if loaded whole from Google). No third-party requests anywhere on the site.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────
   Courier Prime is the display face: it sets every heading in the design and
   is the typeface named in the brand guide. Bricolage Grotesque is declared
   in the design's token file but used precisely nowhere, so it isn't loaded.
   Hanken and JetBrains are variable, so one file covers all their weights.
   font-display:swap means text paints immediately in the fallback and never
   blocks the first render.                                                 */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/courier-prime-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/courier-prime-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand. Ginger is the only accent colour; the field behind the logo
     flips between paper and slate but the brackets never change. */
  /* The brand ginger, used for the logo brackets and solid fills where it
     sits on white. Against bone it only reaches 4.07:1, so body links use
     --ginger-link instead. */
  --ginger: #c1521d;
  --ginger-link: #ab4718;      /* 5.02:1 on bone, 5.57:1 on paper */
  --ginger-dark: #8f3a13;
  --ginger-bright: #d9642c;
  --ginger-deep: #ab4718;
  --ginger-on-slate: #e58f5f;   /* 4.63:1 on slate; #e08a5a was 4.37 and failed AA */

  --slate: #2a3b49;
  --slate-raised: #22303c;
  --paper: #fdfbf6;
  --bone: #f3efe6;
  --bone-deep: #ece6d8;

  /* Ink — cool near-blacks for type on light grounds */
  --ink-900: #14161b;
  --ink-700: #2b313c;
  --ink-600: #3d4f5e;
  --ink-500: #576877;           /* 4.62:1 on the sunken band; #5c6d7c was 4.29 */

  /* Type on dark grounds */
  --on-dark: #eaf0f4;
  --on-dark-soft: #c7d2db;
  --on-dark-muted: #9fb0bf;

  /* States */
  /* Two greens: the darker one carries ticks on paper and bone, the lighter
     one on slate. A single value cannot clear 3:1 against both. */
  --green: #0f8a58;            /* 3.5:1 on the sunken band; #16a06b was 2.69 */
  --green-on-slate: #2ec27e;   /* 5.4:1 on slate */
  --red: #c8462a;
  --gold: #c79a3e;

  --line: rgba(42, 59, 73, 0.12);
  --line-strong: rgba(42, 59, 73, 0.20);
  --line-on-dark: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: 'Courier Prime', 'Courier New', monospace;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --container: 1280px;
  --gutter: 32px;
  --nav-height: 68px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
}

/* ── Reset and base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ginger-link);
  text-decoration: none;
}

a:hover {
  color: var(--ginger-dark);
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--slate);
  margin: 0;
  text-wrap: balance;
}

/* Courier Prime is monospace, so it wants far looser tracking than a grotesk
   would. These are the design's own values. */
h1 {
  font-weight: 700;
  font-size: clamp(38px, 4.9vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.005em;
}

h2 {
  font-weight: 700;
  font-size: clamp(27px, 3vw, 43px);
  line-height: 1.02;
  letter-spacing: -0.005em;
}

h3 {
  font-weight: 700;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.05;
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

p + p {
  margin-top: 1rem;
}

/* Keyboard users must be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--ginger);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--slate);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--paper);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(56px, 8vw, 112px) 0;
}

/* Dark bands. The design alternates bone and slate down the page. */
.band-slate {
  background: var(--slate);
  color: var(--on-dark);
}

.band-slate h1,
.band-slate h2,
.band-slate h3,
.band-slate h4 {
  color: var(--paper);
}

.band-slate p {
  color: var(--on-dark-muted);
}

.band-paper {
  background: var(--paper);
}

.band-sunken {
  background: var(--bone-deep);
}

/* ── Hero background ─────────────────────────────────────────────────────
   A drifting dot grid, and nothing else. The colour comes from a custom
   property so the same rules work on a light or a slate ground.            */
.hero {
  --hero-dot: rgba(42, 59, 73, 0.11);
  position: relative;
  overflow: hidden;
}

.band-slate.hero {
  /* Dots need a little more contrast than lines did — they cover far less
     area, so the same alpha reads as almost nothing. */
  --hero-dot: rgba(255, 255, 255, 0.10);
}

/* Content has to sit above both pseudo-elements. */
.hero > * {
  position: relative;
  z-index: 1;
}

/* Dot grid. Bled one tile past every edge and translated by exactly one tile
   on both axes, so the drift loops seamlessly and no edge is ever exposed. */
.hero::before {
  content: '';
  position: absolute;
  inset: -32px;
  background-image: radial-gradient(var(--hero-dot) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  pointer-events: none;
  /* 32px over 24s — slow enough to stay calm behind text, quick enough that
     you can actually see it move if you look. */
  animation: hero-dots 24s linear infinite;
  will-change: transform;
}

@keyframes hero-dots {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(32px, 32px, 0); }
}

/* Hold the dots still rather than letting the global reduced-motion rule
   freeze them mid-drift at whatever the end state happens to be. */
@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
}


/* ── Mono eyebrow labels ────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 14px;
}

.band-slate .eyebrow {
  color: var(--on-dark-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button-primary {
  background: var(--ginger);
  color: #fff;
}

.button-primary:hover {
  background: var(--ginger-bright);
  color: #fff;
}

.button-secondary {
  background: transparent;
  color: var(--slate);
  border-color: var(--line-strong);
}

.button-secondary:hover {
  background: rgba(42, 59, 73, 0.06);
  color: var(--slate);
}

.band-slate .button-secondary {
  color: var(--paper);
  border-color: var(--line-on-dark);
}

.band-slate .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Arrow and tick glyphs are drawn as SVG rather than typed as → and ✓.
   None of the three subset fonts contain those characters, so as text they
   would silently fall back to whatever the OS supplies. */
.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Site nav ───────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 239, 230, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* Full-width bar: the contents span the viewport rather than being held to
   the 1280px content column, so the lockup and the CTA anchor to the screen
   edges. Symmetric gutters keep both off the edge itself. */
.nav-shell {
  max-width: none;
  margin: 0;
  padding: 0 var(--gutter);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.nav-brand:hover {
  opacity: 0.85;
}

.nav-brand-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The logo lockup: ginger brackets either side of a slate field. */
.lockup {
  display: flex;
  align-items: stretch;
  height: 34px;
}

.lockup-bracket {
  background: var(--ginger);
  padding: 0 8px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--paper);
  line-height: 1;
}

.lockup-field {
  background: var(--slate);
  padding: 0 11px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--paper);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-600);
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  background: rgba(42, 59, 73, 0.06);
  color: var(--slate);
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* display:flex with line-height:1 makes the box hug the glyphs, so the
   parent's align-items:center lands on the type rather than on a 19px line
   box with uneven space above and below it. */
.nav-phone {
  display: flex;
  align-items: center;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  white-space: nowrap;
}

.nav-phone:hover {
  color: var(--slate);
}

.nav-cta {
  font-size: 14px;
  font-weight: 600;
  background: var(--ginger);
  color: #fff;
  padding: 10px 17px;
  border-radius: 7px;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--ginger-bright);
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  color: var(--slate);
  cursor: pointer;
}

/* ── Mobile nav overlay ──────────────────────────────────────────────────
   The design sheds nav items at narrow widths with no replacement, which
   would leave Data, Tools and Writing unreachable on a phone. This keeps a
   full menu behind a toggle instead.
   visibility (not just opacity) is what takes the closed menu out of the
   tab order — without it, keyboard users tab into an invisible menu.      */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--slate);
  padding: 24px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 260ms ease, opacity 200ms ease, visibility 0s linear 260ms;
  overflow-y: auto;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: transform 260ms ease, opacity 200ms ease, visibility 0s;
}

.nav-overlay-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.nav-overlay-close {
  background: none;
  border: 0;
  color: var(--paper);
  padding: 8px;
  cursor: pointer;
}

.nav-overlay a {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--paper);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-on-dark);
}

.nav-overlay a:hover {
  color: var(--ginger-on-slate);
}

.nav-overlay .nav-overlay-cta {
  margin-top: 20px;
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--ginger);
  border-radius: var(--radius);
  padding: 14px 22px;
  text-align: center;
  color: #fff;
}

body.nav-open {
  overflow: hidden;
}

/* ── Hero rotator ───────────────────────────────────────────────────────
   The same bracket lockup as the logo, with a service name typing inside.
   min-width holds the field open so the line doesn't jitter as it types. */
.rotator {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  vertical-align: middle;
}

.rotator-bracket {
  background: var(--ginger);
  padding: 0 7px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  line-height: 1;
}

.rotator-field {
  background: var(--slate-raised);
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 17ch;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--paper);
  white-space: nowrap;
}

.rotator-caret {
  width: 8px;
  height: 16px;
  background: var(--ginger);
  animation: caret-blink 620ms step-end infinite;
}

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (max-width: 620px) {
  .rotator-field {
    min-width: 0;
    font-size: 13px;
  }
}

/* ── Cards and lists ────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.band-slate .card {
  background: var(--slate-raised);
  border-color: var(--line-on-dark);
}

.grid {
  display: grid;
  gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Numbered service rows — number, title and blurb sit in their own columns,
   with the arrow on the right. On hover the whole row slides right as the
   ground turns to paper. */
.numbered {
  border-top: 1px solid rgba(42, 59, 73, 0.18);
}

.numbered-item {
  display: grid;
  grid-template-columns: 88px 1.1fr 1.3fr 40px;
  gap: 28px;
  align-items: center;
  padding: 30px 12px;
  border-bottom: 1px solid rgba(42, 59, 73, 0.14);
  color: inherit;
  transition: background 160ms ease, padding 160ms ease;
}

.numbered-item:hover {
  background: var(--paper);
  padding-left: 24px;
  color: inherit;
}

.numbered-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.numbered-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--slate);
}

.numbered-blurb {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-500);
}

.numbered-arrow {
  font-family: var(--font-mono);
  color: var(--ginger);
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

.numbered-arrow .icon {
  width: 22px;
  height: 22px;
}

/* Heading with a mono index label pushed to the right of it */
.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* ── Sticky split layout ─────────────────────────────────────────────────
   Heading and intro hold position on the left while the list scrolls past. */
.split-sticky {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}

.split-sticky > :first-child {
  position: sticky;
  top: 106px;
}

.split-sticky p {
  font-size: 18px;
  line-height: 1.62;
  max-width: 42ch;
}

/* Bordered list panel. The 1px flex gap lets the container's background show
   through between rows, which is what draws the dividing lines. */
.panel-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel-row {
  background: var(--slate);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 22px;
  align-items: start;
}

/* Stat blocks — "0.6s / typical load time" */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--slate);
}

.band-slate .stat-num {
  color: var(--paper);
}

.stat-label {
  font-size: 14px;
  color: var(--ink-500);
  margin-top: 10px;
}

.band-slate .stat-label {
  color: var(--on-dark-muted);
}

/* Rows inside .panel-list */
.detail-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ginger-on-slate);
  padding-top: 4px;
}

.detail-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.detail-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--paper);
  margin: 0;
}

.detail-why {
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark-muted);
  margin: 0;
}

/* Ginger eyebrow, for use on slate where the grey one disappears */
.eyebrow-ginger {
  color: var(--ginger-on-slate);
}

.band-slate .eyebrow-ginger {
  color: var(--ginger-on-slate);
}

/* Faint graph-paper grid, used behind the web design band */
.band-grid {
  position: relative;
  overflow: hidden;
}

.band-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.band-grid > * {
  position: relative;
}

/* Stat tiles on dark */
.stat-tile {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-tile-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 33px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--paper);
}

.stat-tile-label {
  font-size: 14px;
  line-height: 1.45;
  color: #f2c9ae;
}

/* DNS record chips */
.record {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bone-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--ink-700);
}

.band-slate .record {
  background: rgba(0, 0, 0, 0.22);
  border-color: var(--line-on-dark);
  color: var(--on-dark-soft);
}

/* Lead paragraph under a hero */
.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 62ch;
  margin-top: 20px;
}

.band-slate .lead {
  color: var(--on-dark-muted);
}

/* ── Site footer ────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--slate);
  color: var(--on-dark);
  padding: clamp(56px, 8vw, 96px) var(--gutter) 40px;
}

.footer-shell {
  max-width: var(--container);
  margin: 0 auto;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line-on-dark);
}

.footer-brand .lockup {
  height: 40px;
}

.footer-brand .lockup-bracket {
  font-size: 21px;
  padding: 0 10px;
}

.footer-brand .lockup-field {
  font-size: 19px;
  padding: 0 13px;
}

.footer-blurb {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 34ch;
  margin: 20px 0 0;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  background: var(--ginger-deep);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius);
  margin-top: 24px;
}

.footer-cta:hover {
  background: var(--ginger-bright);
  color: #fff;
}

.footer-col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  font-size: 15px;
  color: var(--on-dark-soft);
  padding: 6px 0;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  padding-top: 32px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--on-dark-muted);
}

.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-policies a {
  font-size: 13px;
  color: var(--on-dark-muted);
}

.footer-policies a:hover {
  color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .nav-phone {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* .nav-links carries the auto margin that pushes everything right, and it is
     hidden here — so .nav-end has to take over, or the CTA and burger sit
     against the logo with dead space to their right. */
  .nav-end {
    gap: 8px;
    margin-left: auto;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .numbered-item {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }

  .numbered-cta {
    grid-column: 2;
  }

}

@media (max-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .nav-cta {
    padding: 9px 14px;
    font-size: 13px;
  }
}

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

/* Two equal columns, vertically centred — used by the web design band */
.split-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.stat-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .split-sticky,
  .split-even {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Sticky only makes sense beside a scrolling column */
  .split-sticky > :first-child {
    position: static;
  }

  .numbered-item {
    grid-template-columns: 44px 1fr 28px;
    gap: 16px;
    align-items: start;
  }

  .numbered-blurb {
    grid-column: 2 / -1;
    font-size: 15px;
  }
}

/* Kicker row above the h1: the "Since 2007" label beside the rotator */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 34px;
  margin-bottom: 36px;
}

/* ── Hero portrait ────────────────────────────────────────────────────────
   Framed as a card in the same idiom as the design's other panels: paper
   ground, 12px radius, deep soft shadow, with a mono caption bar. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 72px;
  align-items: center;
}

.hero-portrait {
  margin: 0;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.65);
  max-width: 440px;
  justify-self: end;
  width: 100%;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.hero-portrait figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  background: #f8f5ee;
  border-top: 1px solid var(--line);
}

.hero-portrait-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--slate);
}

.hero-portrait-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Portrait first on a phone, so the headline is not pushed below the fold */
  .hero-portrait {
    order: -1;
    max-width: 260px;
    justify-self: start;
  }
}

/* ── DNS record card (hero) ───────────────────────────────────────────────
   The design's own visual argument for the authentication work: a dig
   readout with everything passing. Decorative, so hidden from screen
   readers — the same information is stated in prose further down. */
.dns-card {
  border: 1px solid rgba(42, 59, 73, 0.18);
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6);
  justify-self: end;
  width: 100%;
  max-width: 440px;
}

.dns-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #f8f5ee;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.dns-head-pass {
  color: #0e7a53;
}

.dns-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(42, 59, 73, 0.09);
}

.dns-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dns-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.dns-value {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dns-pass {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #0e7a53;
  background: #eafaf2;
  border: 1px solid rgba(14, 122, 83, 0.2);
  padding: 4px 9px;
  border-radius: 5px;
  flex: 0 0 auto;
}

.dns-foot {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fbf0e8;
}

/* The bracket mark, built from borders rather than shipped as an image */
.dns-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--slate);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
}

.dns-mark-bar {
  width: 5px;
  height: 22px;
  border-top: 2px solid var(--ginger);
  border-bottom: 2px solid var(--ginger);
}

.dns-mark-bar-l { border-left: 2px solid var(--ginger); }
.dns-mark-bar-r { border-right: 2px solid var(--ginger); }

.dns-mark-jw {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  color: var(--paper);
  line-height: 1;
}

.dns-foot-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dns-foot-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}

.dns-foot-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ginger-on-slate);
}

@media (max-width: 900px) {
  .dns-card {
    justify-self: start;
    max-width: 420px;
  }
}

/* ── About ────────────────────────────────────────────────────────────────
   Photo left, bio right, as the design lays it out. */
/* The photo column is sized to the photo rather than taking a share of the
   width, so it stays modest and the bio gets the room. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 56px;
  align-items: center;
}

.about-photo {
  display: block;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(42, 59, 73, 0.14);
  background: var(--bone-deep);
}

/* No measure cap — the copy fills the column to the right edge of the
   container. Shrinking the photo column widened this one, and a 56ch cap
   left a large gap on the right. */
.about-copy {
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-500);
  margin: 0 0 18px;
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-photo {
    max-width: 320px;
  }

  .about-copy {
    font-size: 17px;
  }
}

/* ══ Service page components ═══════════════════════════════════════════ */

.body-lg {
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-500);
}

.body-lg + .body-lg {
  margin-top: 18px;
}

.band-slate .body-lg {
  color: var(--on-dark-muted);
}

.stat-tiles-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Key/value facts */
.fact-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ginger);
  margin: 0 0 6px;
}

.fact-value {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
}

/* Comparison table. Built from grid rows rather than a <table> so it can
   collapse to stacked cards on a phone. */
.cmp {
  border-top: 1px solid var(--line-strong);
}

.cmp-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 18px 12px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.cmp-head .cmp-v,
.cmp-head .cmp-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.cmp-k {
  font-weight: 600;
  color: var(--slate);
  font-size: 15px;
}

.cmp-v {
  font-size: 15px;
  color: var(--ink-500);
}

/* The column that is mine gets the accent, so the eye lands on it */
.cmp-mine {
  color: var(--slate);
  font-weight: 600;
}

.cmp-head .cmp-mine {
  color: var(--ginger);
}

/* Numbered process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.step {
  border-top: 2px solid var(--ginger);
  padding-top: 16px;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ginger);
}

.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--slate);
  margin: 8px 0 6px;
}

.step-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
}

/* Speed instructions */
.speed-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line-on-dark);
}

.speed-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ginger-on-slate);
  padding-top: 4px;
}

.speed-step p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}


/* FAQ rows */
.faq {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.faq h3 {
  font-size: 20px;
}

.faq p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-500);
}





@media (max-width: 900px) {
  .stat-tiles-4 { grid-template-columns: repeat(2, 1fr); }
  .steps        { grid-template-columns: repeat(2, 1fr); }
  .faq          { grid-template-columns: 1fr; gap: 10px; }

  /* Stack each comparison row into a labelled card */
  .cmp-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cmp-head {
    display: none;
  }

  .cmp-v::before {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
    display: block;
  }

  .cmp-row .cmp-v:nth-of-type(1)::before { content: 'Website builder'; }
  .cmp-row .cmp-v:nth-of-type(2)::before { content: 'Agency'; }
  .cmp-row .cmp-v:nth-of-type(3)::before { content: 'Me'; }
}

@media (max-width: 620px) {
  .stat-tiles-4 { grid-template-columns: 1fr; }
  .steps        { grid-template-columns: 1fr; }
}

/* ── Email before/after samples (cold email page) ─────────────────────── */
.email-sample {
  border-radius: var(--radius-lg);
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.email-sample p + p {
  margin-top: 12px;
}

.email-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.email-bad {
  background: #fdf0eb;
  border-color: rgba(155, 48, 21, 0.22);
}

.email-bad .email-label { color: #9b3015; }
.email-bad p:not(.email-label) { color: var(--ink-500); }

/* Key/value lines (targeting filters) */
.spec-lines {
  border-top: 1px solid var(--line-on-dark);
}

.spec-line {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-on-dark);
}

.spec-line-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ginger-on-slate);
  padding-top: 3px;
}

.spec-line-v {
  font-size: 16px;
  color: var(--on-dark-soft);
}

.steps-4 { grid-template-columns: repeat(4, 1fr); }

/* Feature tick list */
.feature-list {
  display: grid;
  gap: 2px;
}

.feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.band-slate .feature-item,
.band-sunken .feature-item {
  border-top-color: var(--line);
}

.feature-item .tick {
  color: var(--green);
  font-size: 15px;
  line-height: 1.5;
  flex: 0 0 auto;
}

.feature-item strong {
  display: block;
  font-size: 17px;
  color: var(--slate);
  margin-bottom: 3px;
}

.feature-item p {
  font-size: 15px;
  color: var(--ink-500);
  margin: 0;
}

.band-slate .feature-item strong { color: var(--paper); }
.band-slate .feature-item p      { color: var(--on-dark-muted); }
.band-slate .feature-item        { border-top-color: var(--line-on-dark); }

/* ── Data cleaning before/after table ─────────────────────────────────── */
.clean-table {
  border-top: 1px solid var(--line-strong);
  font-size: 15px;
}

.clean-row {
  display: grid;
  grid-template-columns: 1.3fr 28px 1.1fr 110px 56px;
  gap: 16px;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
}

.clean-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.clean-raw {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-500);
}

.clean-arrow {
  color: var(--ginger);
  display: flex;
}

.clean-arrow .icon { width: 18px; height: 18px; }

.clean-fixed {
  font-weight: 600;
  color: var(--slate);
}

.clean-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 5px;
  text-align: center;
}

.clean-ok   { background: #d6f0e3; color: #0a6244; }
.clean-bad  { background: #f7ddd4; color: #9b3015; }
.clean-warn { background: #f1e4c6; color: #b1842f; }

.clean-score {
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: right;
  color: var(--slate);
}

@media (max-width: 900px) {
  .steps-4 { grid-template-columns: repeat(2, 1fr); }

  .clean-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }

  .clean-arrow,
  .clean-head { display: none; }

  .clean-raw   { grid-column: 1 / -1; }
  .clean-fixed { grid-column: 1; }
}

@media (max-width: 620px) {
  .steps-4 { grid-template-columns: 1fr; }
  .spec-line { grid-template-columns: 1fr; gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LEGACY CONTENT COMPATIBILITY

   The blog, opt-out, tools and legal pages keep their original markup so the
   writing, structured data, tool logic and status trackers stay untouched.
   These rules map those older class names onto the new design tokens.
   As each page's markup is modernised, the matching block here can go.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page shells ──────────────────────────────────────────────────────── */
.page-body,
.page-hero {
  padding: clamp(40px, 5vw, 72px) 0;
}

.page-intro {
  padding: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 40px);
}

.page-intro h1,
.page-hero h1 {
  font-size: clamp(34px, 4.2vw, 58px);
}

.intro-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ginger);
  margin: 14px 0 0;
}

.article-layout,
.post-layout {
  max-width: 820px;
  margin: 0 auto;
}

/* Legacy pages drop a bare .container straight into <main>, with no section
   wrapper supplying vertical rhythm — so the content runs headlong into the
   footer. Only direct children of <main> are targeted, which leaves the new
   design pages alone: their last band is slate and should meet the slate
   footer with no gap. */
main > .container {
  padding-top: clamp(24px, 3vw, 40px);
}

/* When a bare container is the last thing on the page, it has to supply the
   space before the footer itself. Nothing else will. */
main > .container:last-child {
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* Long-form content sits on paper rather than in a shadowed panel. */
.article-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 20px;
}

.article-card h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin: 28px 0 14px;
}

.article-card h2:first-child {
  margin-top: 0;
}

.article-card h3 {
  font-size: 20px;
  margin: 24px 0 10px;
}

.article-card p,
.article-card li {
  color: var(--ink-500);
  font-size: 17px;
  line-height: 1.65;
}

.article-card ul,
.article-card ol {
  margin: 12px 0 0;
  padding-left: 1.2rem;
}

.article-card li + li {
  margin-top: 8px;
}

.section-title {
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 20px;
}

.stack > * + * {
  margin-top: 20px;
}

.callout,
.note {
  background: var(--bone-deep);
  border-left: 3px solid var(--ginger);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 20px 0;
  font-size: 16px;
  color: var(--ink-500);
}

/* The hero image is a direct child of <main>, outside any container, so it
   needs its own width constraint — otherwise it fills the viewport and pushes
   the headline below the fold. Matches the 820px article column. */
.post-hero-img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: clamp(24px, 4vw, 48px) auto 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* ── Buttons carried over from the old markup ─────────────────────────── */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.button-accent {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius);
}

.button-accent:hover {
  background: rgba(42, 59, 73, 0.06);
  color: var(--slate);
}

/* ── Blog index cards ─────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}

.blog-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.5);
}

.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card-body {
  padding: 22px;
}

.blog-card-body h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.blog-card-body p {
  font-size: 15px;
  color: var(--ink-500);
}

/* ── Opt-out: source list, status tracker, share row ──────────────────── */
.source-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.source-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.source-logo {
  height: 26px;
  width: auto;
}

.source-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}

.source-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--slate);
}

.source-time,
.status-tracker-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.source-desc {
  font-size: 15px;
  color: var(--ink-500);
  margin-top: 10px;
}

.source-item-actions,
.status-btns,
.share-buttons,
.opt-out-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.opt-out-cta,
.hub-btn,
.status-btn,
.share-btn,
.opt-out-related-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.opt-out-cta,
.hub-btn {
  background: var(--ginger);
  border-color: var(--ginger);
  color: #fff;
}

.opt-out-cta:hover,
.hub-btn:hover {
  background: var(--ginger-bright);
  border-color: var(--ginger-bright);
  color: #fff;
}

.status-btn:hover,
.share-btn:hover,
.opt-out-related-links a:hover {
  background: rgba(42, 59, 73, 0.06);
  color: var(--slate);
}

.status-btn.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.status-tracker {
  background: var(--bone-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin: 28px 0;
}

.progress-bar-wrap {
  height: 6px;
  background: rgba(42, 59, 73, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}

.progress-bar {
  height: 100%;
  background: var(--ginger);
  border-radius: 999px;
  transition: width 300ms ease;
}

.share-section {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.share-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.opt-out-related {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

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

@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ── Campaign timeline (telesales page) ──────────────────────────────── */
.timeline {
  border-top: 1px solid var(--line-strong);
}

.tl-row {
  display: grid;
  grid-template-columns: 130px 92px 1fr;
  gap: 20px;
  align-items: start;
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
}

.tl-when {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  padding-top: 3px;
}

.tl-chan {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px;
  border-radius: 5px;
}

.tl-both  { background: #eaf0f4; color: var(--ink-500); }
.tl-mail  { background: #e4e9fe; color: #1733a8; }
.tl-phone { background: #d6f0e3; color: #0a6244; }

.tl-what {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-500);
}

@media (max-width: 700px) {
  .tl-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }

  .tl-what { grid-column: 1 / -1; }
}

/* ── Rules carried over from the old stylesheet ───────────────────────────
   These classes were styled in styles.css rather than inline, so they had no
   equivalent when the site moved to site.css. Ported here onto the new tokens.
   ─────────────────────────────────────────────────────────────────────── */

/* Blog post headers */
.post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--slate);
  margin: 12px 0 6px;
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* Book a meeting: one card per meeting type */
.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 40px;
}

.booking-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking-card h2 {
  font-size: 22px;
  margin: 2px 0 0;
}

.booking-card p {
  font-size: 15px;
  color: var(--ink-500);
  margin: 0;
  flex: 1;
}

.booking-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ginger);
}

.booking-card-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 14px;
  padding: 10px 20px;
  background: var(--ginger);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}

.booking-card-btn:hover {
  background: var(--ginger-bright);
  color: #fff;
}

/* Highlighted panel used on a couple of pages */
.feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.quote-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
}

/* Share buttons keep each platform's own colour so they stay recognisable, but
   WhatsApp green and Reddit orange carry white text at only 1.98:1 and 3.44:1
   respectively, so both are darkened just far enough to clear AA. */
.share-btn-linkedin { background: #0077b5; border-color: #0077b5; color: #fff; }
.share-btn-x        { background: #000;    border-color: #000;    color: #fff; }
.share-btn-whatsapp { background: #178641; border-color: #178641; color: #fff; }
.share-btn-reddit   { background: #d93a00; border-color: #d93a00; color: #fff; }
.share-btn-email    { background: #128559; border-color: #128559; color: #fff; }
.share-btn-copy     { background: #555;    border-color: #555;    color: #fff; cursor: pointer; }

.share-btn-linkedin:hover,
.share-btn-x:hover,
.share-btn-whatsapp:hover,
.share-btn-reddit:hover,
.share-btn-email:hover,
.share-btn-copy:hover {
  color: #fff;
  filter: brightness(1.12);
}

@media (max-width: 700px) {
  .booking-grid,
  .quote-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Booking embed ────────────────────────────────────────────────────────
   The calendar is a cross-origin OneCal iframe, so its interior background is
   theirs and cannot be restyled from here. Framing it as a panel makes the
   colour change read as a deliberate edge rather than a mismatch. */
#cal-embed {
  max-width: 900px;
  margin: 2rem auto 0;
}

#cal-iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 18px 44px -32px rgba(0, 0, 0, 0.45);
}

/* ── Header lockup ────────────────────────────────────────────────────────
   The lockup is an SVG with its text converted to outlines, so the geometry
   is exactly the supplied artwork and it needs no webfont to render. Sized by
   height; the width follows the 521:144 aspect ratio.
   ───────────────────────────────────────────────────────────────────────── */
/* The artwork is cropped to its ink, so the lockup's own height is all mark
   and no padding. Aspect is 500:83.7, and height drives width. */
.nav-logo {
  display: block;
  height: 40px;
  width: auto;
}

.nav-brand:hover {
  opacity: 0.88;
}

@media (max-width: 620px) {
  .nav-logo { height: 32px; }
}

/* ── Mobile menu: click to call ───────────────────────────────────────────
   The header phone number is hidden below 1060px, so without this there is no
   way to ring from a phone — which is the device most likely to want it. */
.nav-overlay .nav-overlay-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 22px;
  border: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.nav-overlay .nav-overlay-phone:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}

.nav-overlay .nav-overlay-phone svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--ginger-on-slate);
}

/* ── Web design pricing ───────────────────────────────────────────────────
   Three parts, as the design has it: the headline price, what is included at
   that price, and the monthly plan underneath. */
.price-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.price-main,
.price-included {
  padding: clamp(28px, 3.5vw, 44px);
}

.price-included {
  border-left: 1px solid var(--line);
}

.price-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}

.price-figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 5.5vw, 68px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--slate);
}

.price-vat {
  font-size: 17px;
  color: var(--ink-500);
}

.price-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 46ch;
}

.price-then {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-500);
}

.price-then strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--slate);
}

.price-phone {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-500);
}

.price-phone:hover { color: var(--slate); }

/* Tick lists */
.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.tick-list-2 {
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}

.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-700);
}

.tick-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--green);
  stroke-width: 2.5;
}

/* The looked-after plan, on slate */
.care-plan {
  margin-top: 20px;
  background: var(--slate);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.care-title {
  color: var(--paper);
  margin-bottom: 12px;
}

.care-price {
  margin-bottom: 16px;
  color: var(--on-dark-muted);
  font-size: 16px;
}

.care-price strong {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--paper);
}

.care-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

.care-plan .tick-list li { color: var(--on-dark-soft); }
.care-plan .tick-icon { color: var(--green); }

.price-note-foot {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 78ch;
}

@media (max-width: 900px) {
  .price-split,
  .care-plan { grid-template-columns: 1fr; }
  .price-included { border-left: 0; border-top: 1px solid var(--line); }
  .tick-list-2 { grid-template-columns: 1fr; }
}

/* ── Client logo grid ─────────────────────────────────────────────────────
   The source logos each ship with their own opaque background in a different
   colour, so they are pre-mounted on uniform tiles rather than floated in a
   row. Equal blocks, each still in its own brand colour. */
.work-logos {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

/* No hover state — these are not links, and a lift would imply otherwise. */
.work-logo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.work-logo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .work-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .work-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .work-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* An aside inside an eyebrow: keeps its own case so a parenthetical reads as
   a quiet remark rather than shouting alongside the uppercase label. */
.eyebrow-aside {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* ── Descendant rules missed in the stylesheet migration ──────────────────
   My earlier audit compared class names, so rules like ".share-btn svg" were
   invisible to it — they introduce no new class. These are the ones whose
   markup is still live. Old typography (Georgia serif, the previous hero) is
   deliberately not carried over; the new design owns that. */

/* Without this the icons have a viewBox and no dimensions, so they balloon
   and force the labels to wrap. */
.share-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.share-btn {
  white-space: nowrap;
}

/* Long-form blog posts sit in .post-layout with no .article-card wrapper, so
   their headings and lists inherit the global margin:0 and run together. */
.post-layout h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 38px 0 14px;
}

.post-layout h3 {
  font-size: 20px;
  margin: 28px 0 10px;
}

.post-layout p,
.post-layout li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-500);
}

.post-layout ul,
.post-layout ol,
.page-body ul,
.page-body ol {
  margin: 12px 0 0;
  padding-left: 1.2rem;
}

.post-layout li + li {
  margin-top: 8px;
}

.post-layout .cta-row {
  margin-top: 32px;
}

.blog-card-body h3 a {
  color: var(--slate);
}

.blog-card-body h3 a:hover {
  color: var(--ginger);
}

.callout h3,
.note h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.opt-out-related h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 12px;
}

/* Registered/working address in the footer contact column */
.footer-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-muted);
  margin-top: 16px;
}

/* Ticks and success marks need the lighter green once they sit on slate. */
.band-slate .tick,
.band-slate .tick-icon,
.band-slate .feature-item .tick,
.care-plan .tick-icon,
.panel-list .tick {
  color: var(--green-on-slate);
}

/* ══ Case study ════════════════════════════════════════════════════════ */
.cs-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: end; }
.cs-facts { border-top: 1px solid var(--line-on-dark); }
.cs-fact { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-on-dark); }
.cs-fact-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); flex: 0 0 auto; }
.cs-fact-v { font-size: 15px; color: var(--paper); text-align: right; }

.cs-scorecard { background: var(--slate); border-radius: 18px; padding: clamp(28px,4vw,48px); color: var(--paper); }
.cs-scorehead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
.cs-tabs { display: flex; gap: 8px; }
.cs-tab { font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 7px; border: 0; cursor: pointer; background: rgba(255,255,255,.08); color: var(--on-dark-muted); }
.cs-tab.is-active { background: var(--ginger); color: #fff; }
.cs-scores { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.cs-score { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: rgba(255,255,255,.05); border: 1px solid var(--line-on-dark); border-radius: 14px; }
.cs-score-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--on-dark-muted); }
.cs-score-nums { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); }
.cs-before { font-weight: 700; font-size: 30px; color: var(--on-dark-muted); }
.cs-arrow  { font-size: 18px; color: var(--on-dark-muted); }
.cs-after  { font-weight: 700; font-size: 44px; color: #5fbf8f; }
.cs-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.cs-bar span { display: block; height: 100%; background: #5fbf8f; border-radius: 3px; }
.cs-scorenote { margin-top: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-muted); }

.cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.cs-shot-before { border-color: rgba(193,82,29,.28); }
.cs-shot figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cs-shot-before figcaption { background: #f7e4da; color: #8f3a13; border-bottom: 1px solid rgba(193,82,29,.28); }
.cs-shot-after  figcaption { background: #efeae0; color: var(--slate); border-bottom: 1px solid var(--line); }
.cs-shot-frame { max-height: 620px; overflow: hidden; }
.cs-shot-frame img { width: 100%; display: block; height: auto; }

.cs-table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.cs-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--line); align-items: center; }
.cs-row > span { padding: 18px 24px; font-size: 15px; }
.cs-row-head { background: var(--slate); border-top: 0; }
.cs-row-head > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--on-dark-muted); }
.cs-row-k { font-size: 16px; font-weight: 600; color: var(--slate); }
.cs-row-before { color: var(--ink-500); }
.cs-row-after { background: rgba(95,191,143,.09); color: var(--slate); }

.cs-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cs-metric { background: var(--paper); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.cs-metric-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.cs-metric-nums { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); }
.cs-metric-nums s { font-size: 18px; color: #8a97a3; }
.cs-metric-nums strong { font-size: 26px; color: var(--slate); }
.cs-metric-delta { font-family: var(--font-mono); font-size: 10.5px; color: #0e7a53; }

.cs-builds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cs-build { background: var(--paper); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.cs-build-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ginger); }
.cs-build-t { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--slate); line-height: 1.2; }
.cs-build-d { font-size: 15.5px; line-height: 1.55; color: var(--ink-500); }

.cs-extras-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 48px 0 8px; }
.cs-extras { border-top: 1px solid var(--line); }
.cs-extra { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cs-extra-t { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--slate); }
.cs-extra-lede { font-family: var(--font-mono); font-size: 11px; color: var(--ginger); margin-top: 6px; }
.cs-extra-d { font-size: 16.5px; line-height: 1.62; color: var(--ink-700); }

@media (max-width: 1000px) {
  .cs-scores  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cs-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cs-builds  { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .cs-hero, .cs-compare, .cs-extra { grid-template-columns: 1fr; gap: 32px; }
  .cs-scores, .cs-metrics, .cs-builds { grid-template-columns: 1fr; }
  .cs-row { grid-template-columns: 1fr; }
  .cs-row > span { padding: 10px 20px; }
  .cs-row-head { display: none; }
}

/* The UA rule for [hidden] is a bare attribute selector, so any class that
   sets display beats it. Anything scripted to hide should actually hide. */
[hidden] { display: none !important; }

/* One tile is a link now the Integri case study exists. The rest aren't, so it
   needs to say so on hover without the tiles jumping about. */
.work-logo-linked { position: relative; }
.work-logo-linked a { display: block; text-decoration: none; }
.work-logo-tag {
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--ginger);
  color: #fff;
}
.work-logo-linked:hover,
.work-logo-linked:focus-within { border-color: var(--ginger); }
.work-logo-linked a:focus-visible { outline: 3px solid var(--ginger); outline-offset: 2px; }