/* ==========================================================================
   Redhead Digital Agency — design system v2
   Palette and illustration language taken from the brand moodboard:
   warm paper ground, ink black, vermilion, one deep blue.
   Everything visual is a token below — change here, the whole site follows.
   ========================================================================== */

/* --- 0. Fonts (self-hosted, no third-party requests) --------------------- */
@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/bricolage-var.woff2') format('woff2-variations'),
       url('/assets/fonts/bricolage-var.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-var.woff2') format('woff2-variations'),
       url('/assets/fonts/outfit-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/caveat.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* ground */
  --paper:     #e9e2d2;   /* the moodboard's board colour — the site's ground */
  --paper-hi:  #f4efe3;   /* raised: cards, form fields */
  --paper-lo:  #ded6c4;   /* recessed: rules, dividers, inactive */

  /* ink */
  --ink:       #141210;   /* text and the dark full-bleed bands */
  --ink-soft:  #4a443c;   /* secondary text — warm, biased to the paper */
  --ink-faint: #8b8375;

  /* accents, straight off the illustrations */
  --vermilion: #fa5621;
  /* The brand orange is 2.5:1 on paper — fine as a fill, unreadable as type.
     This is the same hue darkened until it clears AA (4.8:1 on --paper).
     Rule: --vermilion fills shapes, --vermilion-text sets words. */
  --vermilion-text: #b8320c;
  /* Type at 24px+ only has to clear 3:1, so display-size orange stays brighter. */
  --vermilion-display: #e8430f;
  --red:       #fe4a4d;
  --blue:      #00398a;
  --blue-hi:   #0b4dab;

  /* the logo's own gradient — reserved for the mark and primary CTAs */
  --grad:      linear-gradient(96deg, #ff455b 0%, #ff7c32 100%);

  /* on-dark equivalents */
  --on-ink:        #f4efe3;
  --on-ink-soft:   rgba(244, 239, 227, .68);
  --on-ink-line:   rgba(244, 239, 227, .18);

  /* type */
  --display: 'Bricolage', 'Outfit', Georgia, sans-serif;
  --body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hand:    'Caveat', 'Bricolage', cursive;

  --fs-poster: clamp(3.25rem, 9vw, 7.5rem);
  --fs-h1:     clamp(2.75rem, 6.4vw, 5.5rem);
  --fs-h2:     clamp(2.125rem, 4.6vw, 3.75rem);
  --fs-h3:     clamp(1.4rem, 2.4vw, 2.125rem);
  --fs-lead:   clamp(1.125rem, 1.5vw, 1.4375rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9375rem;
  --fs-xs:     0.8125rem;

  /* space */
  --gutter: 24px;
  --maxw: 1240px;
  --sect-y: clamp(64px, 8.5vw, 132px);
  --r-sm: 6px;
  --r:    14px;
  --r-lg: 26px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2, .7, .3, 1);

  /* hand-drawn zigzag rule, used instead of hairline dividers */
  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'%3E%3Cpath d='M0 9 L8 3 L16 9 L24 3 L32 9 L40 3 L48 9 L56 3 L64 9' fill='none' stroke='%23fa5621' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* Any class that sets `display` outranks the UA rule for [hidden], so a card
   marked hidden by script stays on screen. Make the attribute win outright. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding-left: 1.2em; }
::selection { background: var(--vermilion); color: var(--paper-hi); }
:focus-visible { outline: 3px solid var(--vermilion-text); outline-offset: 3px; border-radius: 3px; }
.section--ink :focus-visible, .section--blue :focus-visible { outline-color: var(--vermilion); }

/* Keyboard users land here first and can jump past the nav. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
  transition: top .18s var(--ease);
}
.skip-link:focus-visible { top: 12px; }
main:focus { outline: none; }

/* --- 3. Layout ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sect-y); }
.section--tight { padding-block: clamp(44px, 5.5vw, 80px); }

.section--paper { background: var(--paper); }
.section--hi    { background: var(--paper-hi); }
.section--ink   { background: var(--ink); color: var(--on-ink); }
.section--blue  { background: var(--blue); color: var(--on-ink); }

/* the ink and blue bands carry a faint glow field instead of a flat fill */
.section--ink, .section--blue { position: relative; isolation: isolate; overflow: hidden; }
.section--ink::before, .section--blue::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 6%, rgba(250,86,33,.10), transparent 34%),
    radial-gradient(circle at 94% 96%, rgba(254,74,77,.07), transparent 32%);
}
.section--blue::before {
  background-image:
    radial-gradient(circle at 10% 8%, rgba(250,86,33,.16), transparent 34%),
    radial-gradient(circle at 92% 94%, rgba(255,255,255,.07), transparent 32%);
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.split > .split__body { padding-top: .4em; }
.split--wide { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 880px) { .split, .split--wide { grid-template-columns: 1fr; } }

.center { text-align: center; }
.mt-xl { margin-top: clamp(40px, 6vw, 84px); }
.mt-l  { margin-top: clamp(24px, 3.4vw, 44px); }
.stack > * + * { margin-top: 20px; }

/* hand-drawn divider */
.zig {
  height: 12px; border: 0; margin: 0;
  background: var(--zig) repeat-x center / 64px 12px;
  opacity: .85;
}

/* --- 4. Type ------------------------------------------------------------- */
.poster {
  font-family: var(--display);
  font-size: var(--fs-poster);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--display);
  font-size: var(--fs-h1); font-weight: 700; line-height: .98;
  letter-spacing: -.028em; text-wrap: balance;
}
h2, .h2 {
  font-family: var(--display);
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.02;
  letter-spacing: -.024em; text-wrap: balance;
}
h3, .h3 {
  font-family: var(--display);
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.12;
  letter-spacing: -.014em; text-wrap: balance;
}
h4, .h4 { font-family: var(--display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; }

.lead  { font-size: var(--fs-lead); line-height: 1.5; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.section--ink .muted, .section--blue .muted, .on-ink .muted { color: var(--on-ink-soft); }

.verm { color: var(--vermilion-display); }
.section--ink .verm, .section--blue .verm, .on-ink .verm { color: var(--vermilion); }
.eyebrow {
  font-family: var(--display);
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--vermilion-text);
}
.section--ink .eyebrow, .section--blue .eyebrow, .on-ink .eyebrow { color: var(--vermilion); }
/* handwritten margin note, like the annotations on the moodboard */
.note {
  font-family: var(--hand);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  color: var(--vermilion-text);
  transform: rotate(-2.5deg);
  display: inline-block;
}
.note--ink { color: var(--ink); }
.section--ink .note, .section--blue .note { color: var(--vermilion); }

/* --- 5. Buttons & links -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 26px;
  border-radius: var(--r-pill);
  background: var(--grad); color: var(--ink);
  font-family: var(--display); font-size: var(--fs-body); font-weight: 600;
  line-height: 1; position: relative; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); display: grid; place-items: center;
  transition: transform .3s var(--ease);
  /* The arrow is a <use> of a sprite symbol whose stroke is currentColor, and
     CSS cannot reach inside the shadow tree — so colour it here, not on `path`. */
  color: var(--ink);
}
.btn__icon svg { width: 19px; height: 19px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(250,86,33,.85); }
.btn:hover .btn__icon { transform: rotate(45deg); }
.btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease);
}
.btn:hover::after { left: 130%; }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink .btn__icon { background: var(--vermilion); color: #fff; }

.btn--outline {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); padding-left: 24px;
}
/* Outline buttons: the arrow always follows the button's own text colour. */
.btn--outline .btn__icon { background: transparent; border: 2px solid currentColor; color: inherit; }
.btn--outline:hover { background: var(--ink); color: var(--on-ink); box-shadow: none; }

.section--ink .btn--outline, .section--blue .btn--outline, .on-ink .btn--outline {
  color: var(--on-ink); border-color: var(--on-ink);
}
.section--ink .btn--outline:hover, .section--blue .btn--outline:hover {
  background: var(--on-ink); color: var(--ink);
}

.btn--sm { padding: 5px 5px 5px 18px; font-size: var(--fs-sm); gap: 9px; }
.btn--sm .btn__icon { width: 32px; height: 32px; }
.btn--sm .btn__icon svg { width: 15px; height: 15px; }

/* "Learn more ↗" — underline is a hand-drawn scribble, not a rule */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding-bottom: 9px;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink);
  background: var(--zig) repeat-x left bottom / 44px 8px;
  transition: gap .22s var(--ease), color .22s var(--ease);
}
.link-arrow svg { width: 17px; height: 17px; }
.link-arrow svg path { stroke: currentColor; }
.link-arrow:hover { gap: 15px; color: var(--vermilion-text); }
.section--ink .link-arrow, .section--blue .link-arrow, .on-ink .link-arrow { color: var(--on-ink); }

.link-u { position: relative; color: var(--vermilion-text); }
.section--ink .link-u, .on-ink .link-u { color: var(--vermilion); }
.section--blue .link-u { color: var(--on-ink); }
.link-u::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.link-u:hover::after { transform: scaleX(1); }

/* --- 6. Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 2px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.is-stuck { border-color: var(--ink); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 78px;
}
/* The mark stays the original artwork; the wordmark is set in the site's own type. */
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--ink); }
.brand__mark { width: auto; height: 50px; display: block; }
.brand__word { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 29px;
  letter-spacing: -.022em;
}
/* The sub-line sits centred under "Redhead", narrower than it. The negative right
   margin cancels the trailing letter-space, which would otherwise push the
   centring a couple of pixels to the left. */
.brand__sub {
  font-family: var(--body); font-weight: 500; font-size: 9.4px;
  letter-spacing: .19em; margin-right: -.19em; text-transform: uppercase;
  align-self: center;
  color: var(--ink-soft); margin-top: 6px;
}
@media (max-width: 560px) {
  .brand__mark { height: 40px; }
  .brand__name { font-size: 24px; }
  .brand__sub { font-size: 8.1px; margin-top: 5px; }
}

.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav a, .nav__toggle {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .07em;
}
.nav__item { position: relative; }
.nav__toggle { display: inline-flex; align-items: center; gap: 7px; }
.nav__toggle svg { width: 10px; height: 6px; transition: transform .25s var(--ease); }
.nav__toggle svg path { stroke: var(--ink); }
.nav__item:hover .nav__toggle svg, .nav__item:focus-within .nav__toggle svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 16px); left: 50%; translate: -50% 0;
  min-width: 236px; padding: 10px;
  background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: 6px 6px 0 var(--ink);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { padding: 10px 12px; border-radius: var(--r-sm); white-space: nowrap; transition: background .18s, color .18s; }
.nav__menu a:hover { background: var(--ink); color: var(--on-ink); }

.burger { display: none; width: 44px; height: 44px; place-items: center; margin-right: -8px; }
.burger svg { width: 26px; }
.burger svg path { stroke: var(--ink); }

.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; }
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer__bg { position: absolute; inset: 0; background: rgba(20,18,16,.45); }
.drawer__panel {
  position: absolute; inset: 0 0 auto auto; height: 100%; width: min(430px, 90vw);
  background: var(--paper); padding: 24px 26px 44px; overflow-y: auto;
  border-left: 2px solid var(--ink);
  transform: translateX(100%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; gap: 24px;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close { align-self: flex-end; width: 44px; height: 44px; display: grid; place-items: center; }
.drawer__close svg { width: 22px; }
.drawer__close svg path { stroke: var(--ink); }
.drawer__group h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--vermilion); margin-bottom: 10px; }
.drawer__group a {
  display: block; padding: 9px 0;
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em;
}
/* The hit area needs 24px minimum; the negative margin keeps the visual
   spacing of the bar unchanged while the target itself grows. */
.nav > a, .nav__toggle { padding-block: 10px; }
.nav { margin-block: -10px; }
.nav__menu a { padding-block: 10px; }
@media (max-width: 1020px) { .nav { display: none; } .burger { display: grid; } }

/* Breadcrumb trail, sitting between the header and the hero. */
.crumbs { padding-top: clamp(14px, 1.8vw, 22px); font-size: var(--fs-sm); color: var(--ink-soft); }
.crumbs .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs a { padding-block: 4px; }
.crumbs a:hover { color: var(--vermilion-text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__sep { opacity: .5; }
/* a link that is the whole line is a standalone target, not an inline one */
.card p > .link-u:only-child, .doc__box p > a:only-child { display: inline-block; padding-block: 4px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumbs + .hero { padding-top: clamp(20px, 2.6vw, 40px); }

/* --- 7. Hero (poster) ---------------------------------------------------- */
.hero { position: relative; padding-block: clamp(44px, 6vw, 92px) clamp(56px, 7vw, 104px); overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }
.hero__kicker { display: inline-flex; align-items: center; gap: 12px; }

/* the YOUR VISION / OUR MISSION lockup, set as type */
.lockup { display: grid; gap: 0; margin-top: clamp(18px, 2.6vw, 34px); position: relative; }
.lockup__line { display: flex; align-items: baseline; gap: clamp(12px, 2.2vw, 30px); flex-wrap: wrap; }
.lockup__line--b { padding-left: clamp(0px, 5vw, 72px); }
/* sized to keep each phrase on one line inside the text column — at the old
   --fs-poster both phrases wrapped, which cost ~200px of first-screen height */
.lockup__word { font-family: var(--display); font-size: clamp(2.5rem, 6.2vw, 5.75rem); font-weight: 800; line-height: .86; letter-spacing: -.04em; text-transform: uppercase; }
.lockup__word--verm { color: var(--vermilion-display); }
.lockup__small { font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.375rem); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.hero__cta { margin-top: clamp(26px, 3.6vw, 46px); display: flex; gap: 14px 18px; align-items: center; flex-wrap: wrap; }

/* hero with an art column */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__art img { width: 100%; border-radius: var(--r-lg); border: 2px solid var(--ink); }
/* the homepage hero: a free-standing illustration on the paper ground, no frame */
/* a touch larger than its column: it reaches 12% into the gap on the left and,
   where the viewport has room, up to 60px past the container on the right —
   never past the page gutter, or .hero's overflow:hidden would clip the art */
.hero__art .hero__illus {
  --ov-l: 12%;
  --ov-r: clamp(0px, (100vw - var(--maxw)) / 2 - var(--gutter), 60px);
  border: 0; border-radius: 0; max-width: none;
  width: calc(100% + var(--ov-l) + var(--ov-r)); margin-left: calc(-1 * var(--ov-l));
}
@media (max-width: 1080px) { .hero__art .hero__illus { --ov-l: 6%; } }
@media (max-width: 900px)  { .hero__art .hero__illus { --ov-l: 0%; --ov-r: 0px; } }
/* art cut off at its bottom edge (/catalog): fade the cut into the ground */
.hero__illus--fade { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }

/* hero art: a navy ellipse with three figures cut out of the brand poster.
   Percentages are of .art, whose aspect ratio is the artwork's bounding box.
   The box overhangs the column to the left so the laptop reaches into the
   empty right half of the text column; the overhang is dropped under 1080px. */
.art { position: relative; width: 112%; margin-left: -12%; aspect-ratio: 1356 / 1048; }
.art__oval { position: absolute; left: 8%; top: 6.9%; width: 89.2%; height: 88%;
             border-radius: 50%; background: var(--blue); transform: rotate(-7deg); }
.art__fig { position: absolute; height: auto; display: block; }
.fig--heart  { left: 7.3%;  top: 0;     width: 46.7%; }
.fig--laptop { left: 3%;    top: 63.3%; width: 47.3%; }
.fig--girl   { left: 51.3%; top: 27.3%; width: 48.7%; }
@media (max-width: 1240px) { .art { width: 106%; margin-left: -6%; } }
@media (max-width: 1080px) { .art { width: 100%; margin-left: 0; } }
/* One column: the redhead and the heart-person, the same tilted oval — only the
   laptop is dropped, there is no room for a third figure at this width. The box
   is a touch taller than wide to fit the two of them; that costs ~20px of the
   first screen and leaves the buttons where they were. */
@media (max-width: 900px) {
  .art { width: 100%; margin-left: 0; max-width: 440px; margin-inline: auto; aspect-ratio: 1 / 1.06; }
  .art__oval { left: 3%; top: 9%; width: 94%; height: 74%; }
  .fig--laptop { display: none; }
  .fig--heart { left: 1%;  top: 0;   width: 66%; }
  .fig--girl  { left: 20%; top: 34%; width: 80%; }
}

/* On a laptop the first screen has to reach the buttons, so the hero tightens
   up: less padding, smaller lockup, shorter gaps. Tall screens are untouched. */
@media (min-width: 901px) and (max-height: 900px) {
  .hero { padding-block: clamp(28px, 3.4vw, 52px) clamp(36px, 4vw, 64px); }
  .lockup { margin-top: clamp(12px, 1.6vw, 20px); }
  .lockup__word { font-size: clamp(2.25rem, 6.3vw, 5.75rem); }
  .lockup__line--b { padding-left: clamp(0px, 4.4vw, 64px); }
  .hero .hero__grid .lead { margin-top: clamp(18px, 2vw, 26px); }
  .hero__cta { margin-top: clamp(18px, 2.2vw, 28px); }
  .hero .hero__cta + .note { margin-top: clamp(14px, 1.6vw, 20px); }
  .hero__grid { gap: clamp(24px, 3vw, 48px); }
  .crumbs { padding-top: 10px; }
  .crumbs + .hero { padding-top: clamp(8px, 1.2vw, 18px); }
  /* inner-page H1s are set at poster scale; on a short screen that alone can
     push the buttons under the fold */
  .hero .poster { font-size: clamp(2.5rem, 5.6vw, 4.75rem); }
}

/* --- 8. Stats ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stats__cell { padding: clamp(22px, 3vw, 40px) clamp(14px, 2vw, 30px); border-bottom: 2px solid var(--paper-lo); border-right: 2px solid var(--paper-lo); }
.stats__cell:nth-child(3n) { border-right: 0; }
.stats__cell:nth-last-child(-n+3) { border-bottom: 0; }
.stats__cell:nth-child(3n+1) { padding-left: 0; }
.stats__num {
  font-family: var(--display); font-size: clamp(2.75rem, 5.4vw, 4.5rem);
  font-weight: 800; line-height: .92; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stats__label { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 12px; }
.section--ink .stats__cell { border-color: var(--on-ink-line); }
.section--ink .stats__label { color: var(--on-ink-soft); }
@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__cell:nth-child(3n) { border-right: 2px solid var(--paper-lo); }
  .stats__cell:nth-child(2n) { border-right: 0; }
  .stats__cell:nth-child(3n+1) { padding-left: clamp(14px, 2vw, 30px); }
  .stats__cell:nth-child(2n+1) { padding-left: 0; }
  .stats__cell:nth-last-child(-n+3) { border-bottom: 2px solid var(--paper-lo); }
  .stats__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* --- 9. Client marquee --------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(48px, 7vw, 112px); width: max-content; animation: marquee 34s linear infinite; }
.marquee img { height: clamp(20px, 2.4vw, 30px); width: auto; opacity: .8; filter: brightness(0) invert(1); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- 10. Service list (editorial, numbered) ------------------------------ */
.services { border-top: 2px solid var(--ink); }
.service {
  display: grid; grid-template-columns: 68px 1fr auto;
  gap: clamp(14px, 2.4vw, 36px); align-items: center;
  padding: clamp(22px, 3vw, 38px) 0;
  border-bottom: 2px solid var(--ink);
  transition: padding-left .3s var(--ease), background .3s var(--ease);
}
.service:hover { padding-left: 18px; background: var(--paper-hi); }
.service__idx {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--vermilion-text); font-variant-numeric: tabular-nums; letter-spacing: .08em;
}
.section--ink .service__idx, .section--blue .service__idx { color: var(--vermilion); }
.service__title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; }
.service__sub { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: 4px; }
.service__go { flex: 0 0 auto; }
.service__go svg { width: 30px; height: 30px; transition: transform .3s var(--ease); }
.service__go svg path { stroke: var(--ink); }
.service:hover .service__go svg { transform: translate(4px, -4px); }
.section--ink .services, .section--ink .service { border-color: var(--on-ink-line); }
.section--ink .service:hover { background: rgba(244,239,227,.05); }
.section--ink .service__go svg path { stroke: var(--on-ink); }
.section--ink .service__sub { color: var(--on-ink-soft); }
@media (max-width: 640px) {
  .service { grid-template-columns: 40px 1fr auto; }
  .service__go svg { width: 24px; height: 24px; }
}

/* --- 11. Cards ----------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: clamp(20px, 2.3vw, 30px);
  display: grid; gap: 10px; align-content: start;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--vermilion); }
.card__icon { width: 42px; height: 42px; margin-bottom: 6px; }
.card__title { font-family: var(--display); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.015em; }
.card p { color: var(--ink-soft); font-size: var(--fs-sm); }
.card--flat { border-width: 0; background: transparent; padding-left: 0; padding-right: 0; }
.card--flat:hover { transform: none; box-shadow: none; }
.section--ink .card { background: rgba(244,239,227,.05); border-color: var(--on-ink-line); }
.section--ink .card p { color: var(--on-ink-soft); }
@media (max-width: 980px) { .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; } }

/* numbered process steps */
.steps { display: grid; gap: clamp(22px, 3vw, 40px); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step { padding-top: 16px; border-top: 2px solid var(--ink); }
.step__num { font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--vermilion-display); letter-spacing: -.04em; }
.section--ink .step__num, .section--blue .step__num { color: var(--vermilion); }
.step__title { font-family: var(--display); font-size: var(--fs-lead); font-weight: 700; margin-top: 10px; }
.step p { margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-sm); }
.section--ink .step, .section--blue .step { border-color: var(--on-ink-line); }
.section--ink .step p, .section--blue .step p { color: var(--on-ink-soft); }
@media (max-width: 980px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .steps--3, .steps--4 { grid-template-columns: 1fr; } }

/* --- 12. Social proof ---------------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; } }
.proof__item {
  border: 2px solid var(--on-ink-line); border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid; gap: 8px; align-content: start;
}
.proof__score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.proof__num { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 17px; height: 17px; color: var(--vermilion); }
.proof__where { font-family: var(--display); font-weight: 700; font-size: var(--fs-lead); }
.proof__meta { color: var(--on-ink-soft); font-size: var(--fs-sm); }

/* testimonial rail */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(430px, 84vw);
  gap: 20px; overflow-x: auto; padding: 4px 0 26px;
  scroll-snap-type: x mandatory;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 99px; }
.rail::-webkit-scrollbar-track { background: var(--paper-lo); border-radius: 99px; }
.quote {
  background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 16px; align-content: start;
}
.quote__stars { display: inline-flex; gap: 3px; }
.quote__stars svg { width: 15px; height: 15px; color: var(--vermilion); }
.quote__text { font-family: var(--display); font-size: var(--fs-lead); font-weight: 500; line-height: 1.34; letter-spacing: -.012em; }
.quote__head { display: flex; align-items: center; gap: 13px; }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--paper-lo); border: 2px solid var(--ink); }
.quote__name { font-family: var(--display); font-weight: 700; font-size: var(--fs-body); }
.quote__role { font-size: var(--fs-xs); color: var(--ink-soft); }

/* --- 13. Blog ------------------------------------------------------------ */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.post { display: grid; gap: 12px; align-content: start; }
.post__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-lo); border: 2px solid var(--ink); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__title { font-family: var(--display); font-size: var(--fs-lead); font-weight: 700; line-height: 1.16; letter-spacing: -.018em; }
.post__topic {
  display: inline-block; margin-right: 10px;
  font-family: var(--display); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--vermilion-text);
}

/* topic filter row above the grid */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 2px solid var(--ink); border-radius: var(--r-pill);
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.filter__n { font-variant-numeric: tabular-nums; opacity: .55; font-weight: 500; }
.filter:hover { background: var(--paper-lo); }
.filter.is-on { background: var(--ink); color: var(--on-ink); }
.filter.is-on .filter__n { opacity: .7; }
.filters__empty { margin-top: 28px; color: var(--ink-soft); }
@media (max-width: 560px) { .filter { padding: 8px 14px; } }
.post__excerpt { color: var(--ink-soft); font-size: var(--fs-sm); }
.post .link-arrow { justify-self: start; margin-top: 2px; }
@media (max-width: 980px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; } }

.article { max-width: 760px; margin-inline: auto; }
.article__meta { display: flex; gap: 14px; align-items: center; color: var(--ink-soft); font-size: var(--fs-sm); flex-wrap: wrap; }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.024em;
  margin-top: 2.2em; color: var(--ink);
}
.prose h2::after { content: ''; display: block; height: 8px; width: 92px; margin-top: 14px; background: var(--zig) repeat-x left center / 44px 8px; }
.prose h3 { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-top: 1.7em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--vermilion); }
.prose a { color: var(--vermilion); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose figure { margin: 2em 0; }
.prose img { border-radius: var(--r); border: 2px solid var(--ink); }
.prose figcaption { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 10px; text-align: center; }
.prose blockquote { border-left: 4px solid var(--vermilion); padding-left: 20px; font-family: var(--display); font-size: var(--fs-lead); font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--paper-lo); vertical-align: top; }
.prose th { font-family: var(--display); font-weight: 700; background: var(--paper-hi); border-bottom-color: var(--ink); }
.table-scroll { overflow-x: auto; }

/* --- 14. Forms ----------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
@media (max-width: 940px) { .contact__grid { grid-template-columns: 1fr; } }
.form-card {
  background: var(--paper-hi); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(24px, 3.2vw, 44px);
  box-shadow: 10px 10px 0 var(--vermilion);
}
.field + .field { margin-top: 14px; }
.field label {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
}
.field label span { color: var(--vermilion-text); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink);
  padding: 15px 18px;
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--paper);
  transition: box-shadow .18s, border-color .18s;
}
.field textarea { min-height: 116px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--vermilion); box-shadow: 3px 3px 0 var(--vermilion); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.form-card .btn { margin-top: 20px; }
.form-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 14px; }
/* The form card is a light panel inside a dark band, so the on-dark text
   colours must not reach into it — they made this text invisible. */
.section--ink .form-card, .section--blue .form-card { color: var(--ink); }
.section--ink .form-card .muted, .section--blue .form-card .muted { color: var(--ink-soft); }
.section--ink .form-card .eyebrow, .section--blue .form-card .eyebrow { color: var(--vermilion-text); }
.form-note a { text-decoration: underline; }

.steps-vert { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.steps-vert__item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.steps-vert__badge {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid currentColor; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
}

.subscribe { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; max-width: 600px; }
.subscribe .field { margin: 0; }
@media (max-width: 620px) { .subscribe { grid-template-columns: 1fr; } }

/* --- 15. Page-specific patterns ------------------------------------------ */
.bubbles { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.bubble {
  background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--r);
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
  display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start;
}
.bubble__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--vermilion); display: grid; place-items: center; }
.bubble__dot span { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-hi); }
.bubble:nth-child(even) { transform: translateX(clamp(0px, 2vw, 32px)); }
@media (max-width: 880px) { .bubble:nth-child(even) { transform: none; } }
.section--ink .bubble { background: rgba(244,239,227,.05); border-color: var(--on-ink-line); }

.checks { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: var(--fs-lead); }
.checks svg { width: 26px; height: 26px; margin-top: .1em; color: var(--vermilion); }
.checks--2 { grid-template-columns: 1fr 1fr; gap: 14px clamp(24px, 4vw, 56px); }
@media (max-width: 780px) { .checks--2 { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.tiles > div { padding: clamp(18px, 2.1vw, 26px); font-size: var(--fs-body); border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); background: var(--paper-hi); }
.tiles > div:nth-child(3n) { border-right: 0; }
.tiles > div:nth-child(-n+3) { border-top: 0; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles > div:nth-child(3n) { border-right: 2px solid var(--ink); }
  .tiles > div:nth-child(2n) { border-right: 0; }
  .tiles > div:nth-child(-n+3) { border-top: 2px solid var(--ink); }
  .tiles > div:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles > div { border-right: 0 !important; }
  .tiles > div:nth-child(-n+2) { border-top: 2px solid var(--ink); }
  .tiles > div:first-child { border-top: 0; }
}

.pills { display: flex; flex-wrap: wrap; gap: 9px 10px; padding: 0; margin: 0; }
.pills span, .pills li {
  list-style: none; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--paper-hi); border: 2px solid var(--ink); font-size: var(--fs-sm);
  font-family: var(--display); font-weight: 500;
}
.section--ink .pills span, .section--ink .pills li,
.section--blue .pills span, .section--blue .pills li {
  background: transparent; border-color: var(--on-ink-line); color: var(--on-ink);
}

.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: min(330px, 80vw); gap: clamp(20px, 3vw, 40px); overflow-x: auto; padding-bottom: 24px; scroll-snap-type: x mandatory; }
.timeline > * { scroll-snap-align: start; }
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 99px; }
.timeline::-webkit-scrollbar-track { background: var(--paper-lo); border-radius: 99px; }
.tl-item { display: grid; gap: 8px; align-content: start; padding-top: 24px; border-top: 2px solid var(--ink); position: relative; }
.tl-item::before { content: ''; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--vermilion); }
.tl-item__year { font-family: var(--display); font-size: var(--fs-h3); font-weight: 800; color: var(--vermilion-text); letter-spacing: -.03em; }
.tl-item__title { font-family: var(--display); font-size: var(--fs-body); font-weight: 700; }
.tl-item p { color: var(--ink-soft); font-size: var(--fs-sm); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.people { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 80px); justify-content: center; }
.person { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.person__photo {
  width: clamp(112px, 13vw, 156px); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; margin-bottom: 14px;
  border: 2px solid var(--ink); background: var(--paper-lo);
}
.section--ink .person__photo, .section--blue .person__photo { border-color: var(--on-ink-line); }
.person__name { font-family: var(--display); font-size: var(--fs-lead); font-weight: 700; }
.person__role { font-size: var(--fs-sm); opacity: .8; }

/* art band */
.art-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
@media (max-width: 900px) { .art-band { grid-template-columns: 1fr; } }
.art-band img { border-radius: var(--r-lg); width: 100%; }
.art-band--tight img { max-width: 460px; margin-inline: auto; }
/* homepage dark band: the illustration takes the wider column */
.art-band--big { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { .art-band--big { grid-template-columns: 1fr; } }

/* legal / long-form document pages */
.doc { max-width: 780px; margin-inline: auto; }
.doc h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; }
.doc h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 1.6em; }
.doc p, .doc ul, .doc ol { margin-top: 1em; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li + li { margin-top: .45em; }
.doc li::marker { color: var(--vermilion); }
.doc a { color: var(--vermilion-text); text-decoration: underline; text-underline-offset: 3px; }
.doc__meta { font-size: var(--fs-sm); color: var(--ink-soft); }
.doc__box { background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--r); padding: clamp(18px, 2.2vw, 26px); }
.doc__toc { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin-top: 18px; }
.doc__toc li { list-style: none; }
.doc__toc a { font-size: var(--fs-sm); padding: 6px 13px; border: 2px solid var(--ink); border-radius: var(--r-pill); text-decoration: none; color: var(--ink); }
.doc__toc a:hover { background: var(--ink); color: var(--on-ink); }

/* --- 16. FAQ ------------------------------------------------------------- */
.faq { display: grid; border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 2px solid var(--ink); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2.2vw, 26px) 0; text-align: left;
  font-family: var(--display); font-size: var(--fs-lead); font-weight: 600;
}
.faq__q svg { flex: 0 0 auto; width: 20px; transition: transform .3s var(--ease); }
.faq__q svg path { stroke: var(--vermilion); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--ink-soft); padding-bottom: clamp(18px, 2.2vw, 26px); max-width: 72ch; }

/* --- 17. Footer ---------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-ink); padding-block: clamp(56px, 7vw, 100px) 36px; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 60px); }
.footer-col h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .16em; color: var(--vermilion); font-family: var(--display); font-weight: 600; margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; font-size: var(--fs-body); color: var(--on-ink); padding-block: 5px; }
.footer-col a { position: relative; width: fit-content; }
.footer-col a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--vermilion); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.footer-col a:hover::after { transform: scaleX(1); }
.socials { display: flex; gap: 12px; margin-top: 4px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--on-ink-line); display: grid; place-items: center; transition: background .22s, border-color .22s; }
.socials a::after { display: none; }
.socials a:hover { background: var(--vermilion); border-color: var(--vermilion); }
.socials img { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: clamp(36px, 5vw, 64px); padding-top: 24px;
  border-top: 2px solid var(--on-ink-line);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--on-ink-soft);
}
.footer-bottom a:hover { color: var(--on-ink); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
/* these are standalone links, not links in a sentence, so they need the
   24px minimum target of their own */
.footer-legal a { padding-block: 6px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* --- 18. Scroll reveal --------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .note { transform: none; }
}

/* --- 19. Utility --------------------------------------------------------- */
.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; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px;
  border-radius: var(--r-pill); border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 600; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .1em;
}
.badge--verm { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.section--ink .badge, .section--blue .badge { border-color: var(--on-ink-line); }
.spark { width: 22px; height: 22px; color: var(--vermilion); flex: 0 0 auto; }
.divider { height: 2px; background: var(--paper-lo); border: 0; }

/* icons inherit colour from their context */
.nav__toggle svg, .burger svg, .drawer__close svg { color: var(--ink); }
.checks svg, .stars svg, .quote__stars svg { color: var(--vermilion); }
.faq__q svg { color: var(--vermilion); }
.service__go svg { color: var(--ink); }
.section--ink .service__go svg { color: var(--on-ink); }
.link-arrow svg { color: currentColor; }

/* service rows are whole-row links */
.service__title, .service__sub { display: block; }
.service { color: inherit; }

/* --- 20. Review cards with a result line ---------------------------------- */
.quote__tag {
  font-family: var(--display); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--vermilion-text);
}
.section--ink .quote__tag, .section--blue .quote__tag { color: var(--vermilion); }
.quote__result {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--paper); border: 2px solid var(--ink);
  font-size: var(--fs-sm); line-height: 1.4;
}
.quote__result svg { width: 22px; height: 22px; color: var(--vermilion); margin-top: .05em; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
@media (max-width: 980px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .quotes { grid-template-columns: 1fr; } }
.quote--tall .quote__text { font-size: var(--fs-body); font-weight: 500; }

/* Clutch service-mix strip */
.mix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.mix > div { padding: clamp(18px, 2.2vw, 26px); background: var(--paper-hi); border-right: 2px solid var(--ink); }
.mix > div:last-child { border-right: 0; }
.mix__pct { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mix__label { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 820px) {
  .mix { grid-template-columns: repeat(2, 1fr); }
  .mix > div:nth-child(2n) { border-right: 0; }
  .mix > div:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
}
@media (max-width: 460px) {
  .mix { grid-template-columns: 1fr; }
  .mix > div { border-right: 0 !important; border-bottom: 2px solid var(--ink); }
  .mix > div:last-child { border-bottom: 0; }
}

/* a service row that is not a link (used on /pricing) */
.service--static { cursor: default; }
.service--static:hover { padding-left: 0; background: transparent; }
.service--static .service__sub { font-size: var(--fs-body); max-width: 78ch; margin-top: 8px; }

/* --- 21. Client projects (/results) -------------------------------------- */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.proj {
  background: var(--paper-hi); border: 2px solid var(--ink); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 16px;
}
.proj__client {
  font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2vw, 23px);
  line-height: 1.15; letter-spacing: -.02em; margin: 0;
}
.proj__facts { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.proj__row { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: baseline; }
.proj__row dt {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.proj__row dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.proj__outcome {
  display: flex; gap: 10px; align-items: flex-start;
  padding-top: 15px; border-top: 2px solid var(--paper-lo);
}
.proj__outcome svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--vermilion); margin-top: .1em; }
.proj__quote {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(16px, 1.7vw, 18px); line-height: 1.35; letter-spacing: -.012em;
}
.proj__quote::before { content: '“'; }
.proj__quote::after  { content: '”'; }
.proj__src {
  margin-top: auto; align-self: flex-start;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft);
  border-bottom: 2px solid var(--paper-lo); padding-bottom: 1px;
}
.proj__src:hover { color: var(--vermilion); border-bottom-color: var(--vermilion); }
@media (max-width: 420px) {
  .proj__row { grid-template-columns: 1fr; gap: 0; }
}