/* ═══════════════════════════════════════════════════════════════════════════
   CLEVEX — design system (2026 overhaul)
   Bold editorial, warmed with local and personal touches. Light only.
   Tokens → base → layout → type → components → pages → motion.
   Orange #FF6B35 is a FILL colour on light backgrounds (buttons, bars, dots);
   orange text on light uses --orange-ink (#B83A0B, 5.1:1 on cream). Orange
   text is fine on --ink (6.5:1).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-var.woff2') format('woff2-variations'),
       url('/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --ink:          #141414;
  --ink-2:        #232220;
  --paper:        #F6F1E8;
  --paper-2:      #EDE5D8;
  --white:        #FFFFFF;
  --orange:       #FF6B35;
  --orange-ink:   #B83A0B;
  --orange-soft:  #FFE3D6;
  --muted:        #5E574E;
  --muted-on-ink: #BDB6AA;
  --line:         rgba(20, 20, 20, .14);
  --line-strong:  rgba(20, 20, 20, .9);
  --line-on-ink:  rgba(246, 241, 232, .16);
  --good:         #1B7A46;
  --star:         #E8A317;

  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;

  --max:     1320px;
  --gutter:  clamp(16px, 4vw, 40px);
  --section: clamp(72px, 11vw, 168px);
  --radius:  6px;
  --radius-lg: 14px;
  --nav-h:   calc(68px + env(safe-area-inset-top, 0px));
  --ease:    cubic-bezier(.2, .8, .2, 1);

  /* Legacy token names — used by public/css/onboarding.css (and nothing else).
     Mapped onto the new palette so the onboarding questionnaires re-skin. */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --card: var(--white);
  --card-2: var(--paper);
  --border: rgba(20, 20, 20, .16);
  --border-2: rgba(20, 20, 20, .24);
  --text: var(--ink);
  --muted-2: #6F685E;
  --orange-dim: rgba(255, 107, 53, .1);
  --orange-mid: rgba(255, 107, 53, .2);
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);
  --r: var(--radius);
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
/* No cross-document view transitions (@view-transition): while the page
   cross-fade runs, browsers ignore every click and tap, so the first press
   on a freshly opened page did nothing. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* No grey tap flash on phones — every control has its own pressed/focus state. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
ul[role="list"], ol[role="list"] { list-style: none; }
::selection { background: var(--orange); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--orange-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.band-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(56px, 7vw, 104px); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .muted, .band-ink .lede { color: var(--muted-on-ink); }
.band-paper2 { background: var(--paper-2); }
.band-white { background: var(--white); }
.band-orange { background: var(--orange); color: var(--ink); }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.rule { border: 0; border-top: 1px solid var(--line); }
.band-ink .rule { border-top-color: var(--line-on-ink); }

/* ─── Type ────────────────────────────────────────────────────────────────── */
.display-xl, .display-l, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 750;
  color: inherit;
  text-wrap: balance;
}
.display-xl {
  font-size: clamp(2.8rem, 8.6vw, 8.2rem);
  line-height: .9;
  letter-spacing: -.038em;
  font-weight: 800;
}
.display-l {
  font-size: clamp(2.6rem, 7.6vw, 7rem);
  line-height: .94;
  letter-spacing: -.036em;
  font-weight: 800;
}
.h2 {
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.032em;
}
.h3 {
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.h4 {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  font-weight: 700;
}
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--orange-ink);
  padding-right: .04em;
}
.band-ink .serif, .site-footer .serif { color: var(--orange); }
.band-orange .serif { color: var(--ink); }
.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
  text-wrap: pretty;
}
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 62ch; text-wrap: pretty; }

/* Section label — "01 — The problem" in mono, editorial numbering. */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px; background: var(--orange); flex: none;
}
.eyebrow .num { color: var(--ink); font-weight: 700; }
.band-ink .eyebrow { color: var(--muted-on-ink); }
.band-ink .eyebrow .num { color: var(--paper); }
.band-orange .eyebrow { color: var(--ink); }
.band-orange .eyebrow::before { background: var(--ink); }

/* ─── Buttons & links ─────────────────────────────────────────────────────── */
/* Labels sit on one line wherever they fit. On a screen too narrow for one,
   the label wraps inside the pill instead of pushing the page off the screen. */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border-radius: 999px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.1;
  letter-spacing: -.005em; text-decoration: none; text-align: center; text-wrap: balance;
  max-width: 100%; cursor: pointer; transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s, box-shadow .25s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
/* Invisible hit margin: the hover lift and the pressed shrink move the button,
   and without this a press on its bottom edge slipped off it and was lost. */
.btn::before { content: ''; position: absolute; inset: -4px 0; }
.btn-primary, .btn-whatsapp { --btn-bg: var(--orange); --btn-fg: var(--ink); --btn-bd: var(--orange); }
.btn-ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.band-ink .btn-outline, .site-footer .btn-outline { --btn-fg: var(--paper); --btn-bd: var(--paper); }
.band-orange .btn-outline { --btn-fg: var(--ink); --btn-bd: var(--ink); }
/* Hover lifts only on devices that really hover. On phones a tap would leave
   the button stuck in its hover state (lifted, or filled black). */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(20, 20, 20, .45); }
  .btn-primary:hover, .btn-whatsapp:hover { --btn-bg: #FF7E4D; }
  .btn-outline:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
  .band-ink .btn-outline:hover, .site-footer .btn-outline:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); }
}
.btn:active { transform: scale(.97); box-shadow: none; transition-duration: .1s; }
.btn-sm { min-height: 42px; padding: 10px 18px; font-size: .92rem; }
.btn-lg { min-height: 60px; padding: 18px 32px; font-size: 1.08rem; }
@media (max-width: 340px) { .btn-lg { padding-inline: 20px; } }
.btn-block { width: 100%; }
/* A full-width button centres its label, so the side padding only shows when
   the label nearly fills it. Keep it small so the label stays on one line. */
.btn-block, .pkg-cta .btn { padding-inline: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 3px;
  transition: background-size .35s var(--ease);
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link-arrow:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.link-arrow:hover svg { transform: translateX(4px); }

.text-link { color: var(--orange-ink); font-weight: 600; text-underline-offset: 3px; }
.band-ink .text-link { color: var(--orange); }

/* Google rating chip */
.rating-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--ink);
  transition: border-color .2s;
}
.rating-chip:hover { border-color: var(--ink); }
.rating-chip svg { width: 16px; height: 16px; }
.rating-chip .stars { color: var(--star); letter-spacing: 1px; }

/* ─── Header / nav ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  /* Hairline as a shadow, not a border: a 1px border leaves 67px of content and
     centres everything in the header on half-pixels (soft, shimmering burger bars). */
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow .3s, background-color .3s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav {
  height: 100%; display: flex; align-items: center; gap: 24px;
}
.nav-logo { display: inline-flex; align-items: center; flex: none; }
.nav-logo img { width: 150px; height: auto; }
.nav > nav { margin-left: auto; }
.nav-links {
  display: flex; gap: 4px; list-style: none;
}
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-weight: 600; font-size: .98rem; text-decoration: none; border-radius: 999px;
  transition: background-color .2s;
}
.nav-links a:hover { background: rgba(20, 20, 20, .06); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.nav-cta { flex: none; }
.burger {
  display: none; position: relative; margin-left: auto; width: 48px; height: 48px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; cursor: pointer;
}
/* Bars are pinned to the centre (whole pixels from the button edge) and morph in
   two steps so the middle bar is never visible across the X: opening, the outer
   bars close onto the middle one, it is hidden, then they rotate; closing runs
   the same steps in reverse. */
.burger span {
  position: absolute; left: calc(50% - 9px); top: calc(50% - 1px);
  width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .15s var(--ease), top .15s var(--ease) .15s, visibility 0s .15s;
}
.burger span:nth-child(1) { top: calc(50% - 8px); }
.burger span:nth-child(3) { top: calc(50% + 6px); }
.burger[aria-expanded="true"] span {
  top: calc(50% - 1px);
  transition: top .15s var(--ease), transform .15s var(--ease) .15s, visibility 0s .15s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { visibility: hidden; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--paper); padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
.mobile-menu a.mm-link {
  font-family: var(--font-display); font-weight: 750; font-size: clamp(2.2rem, 11vw, 3.4rem);
  letter-spacing: -.04em; line-height: 1.12; text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu a.mm-link span { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--muted); font-weight: 500; }
.mobile-menu .mm-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: inline-flex; }
  .nav-logo img { width: 128px; }
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
/* Bottom padding keeps the last row clear of the fixed WhatsApp button. */
.site-footer { background: var(--ink); color: var(--paper); padding-top: 16px; padding-bottom: 72px; overflow: hidden; }
.footer-cta { display: grid; gap: 32px; padding-bottom: clamp(56px, 8vw, 112px); border-bottom: 1px solid var(--line-on-ink); }
.footer-cta .display-l { max-width: 13ch; }
.footer-cta-side { display: grid; gap: 20px; align-content: end; }
.footer-cta-side p { color: var(--muted-on-ink); max-width: 40ch; }
@media (min-width: 900px) {
  .footer-cta { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.footer-grid {
  display: grid; gap: 40px 24px; padding-block: 56px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-grid h2 {
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-on-ink); margin-bottom: 16px;
}
.footer-grid ul { list-style: none; display: grid; gap: 4px; }
.footer-grid a { text-decoration: none; color: var(--paper); opacity: .92; display: inline-block; padding: 4px 0; }
.footer-grid a:hover { opacity: 1; color: var(--orange); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand p { color: var(--muted-on-ink); font-size: .95rem; max-width: 34ch; }
.footer-brand address { font-style: normal; margin-top: 16px; font-size: .95rem; line-height: 1.8; color: var(--muted-on-ink); }
.footer-brand address a { color: var(--paper); }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-on-ink);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.footer-social a:hover { border-color: var(--orange); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-block: 24px; border-top: 1px solid var(--line-on-ink);
  font-size: .85rem; color: var(--muted-on-ink);
}
.footer-bottom a { color: var(--muted-on-ink); }

/* ─── Floating WhatsApp + mobile CTA dock ─────────────────────────────────── */
.wa-fab {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(20, 20, 20, .5);
  transition: transform .25s var(--ease);
}
@media (hover: hover) { .wa-fab:hover { transform: scale(1.06); } }
.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
.cta-dock { display: none; }
@media (max-width: 900px) {
  .wa-fab { display: none; }
  .cta-dock {
    display: grid; grid-template-columns: 48px 1fr 1fr; gap: 6px;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90;
    padding: 8px; border-radius: 999px; background: var(--ink);
    box-shadow: 0 16px 40px -14px rgba(20, 20, 20, .6);
    /* Hidden: below the screen, faded and out of the tab order. Leaving
       accelerates away; arriving glides up and fades in. */
    opacity: 0; visibility: hidden;
    transform: translateY(calc(100% + 24px));
    transition: transform .4s cubic-bezier(.55, 0, .75, .2), opacity .3s ease .08s, visibility 0s linear .4s;
  }
  .cta-dock.is-visible {
    opacity: 1; visibility: visible; transform: none;
    transition: transform .6s cubic-bezier(.22, .9, .3, 1), opacity .35s ease, visibility 0s;
  }
  .cta-dock .btn { min-height: 48px; padding: 10px 12px; gap: 8px; font-size: .95rem; }
  .cta-dock .dock-call {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-on-ink);
    display: inline-flex; align-items: center; justify-content: center; color: var(--paper);
  }
  .cta-dock .dock-call svg { width: 20px; height: 20px; }
  .cta-dock .btn-outline { --btn-fg: var(--paper); --btn-bd: rgba(246, 241, 232, .4); }
  body.no-dock .cta-dock { display: none; }
  body:not(.no-dock) .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
  .hero-actions .btn-row, .hero-actions .btn-row .btn,
  .page-hero .btn-row .btn, .cta-band .btn-row .btn { width: 100%; }
}

/* ─── Hero (home) ─────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(24px, 4vw, 52px); padding-bottom: 0; position: relative; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: clamp(20px, 3vw, 36px); }
.hero h1 { max-width: 12.5ch; }
.hero h1 .line { display: block; }
.hero-body {
  display: grid; gap: 28px; margin-top: clamp(24px, 3.4vw, 44px);
  align-items: end;
}
@media (min-width: 900px) {
  .hero-body { grid-template-columns: 1.05fr 1fr; gap: 48px; }
}
.hero-body .lede { max-width: 44ch; color: var(--ink); opacity: .82; }
.hero-actions { display: grid; gap: 4px; justify-items: start; }
@media (min-width: 900px) { .hero-actions { justify-items: end; text-align: right; } }

/* Showcase: browser + phone composition of real client work */
.showcase {
  position: relative; margin-top: clamp(32px, 4.4vw, 56px);
  padding-bottom: clamp(32px, 5vw, 64px);
}
.showcase::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: var(--ink); z-index: 0;
}
.showcase .container { position: relative; z-index: 1; }
.showcase-stage { position: relative; }
.showcase .browser { width: min(100%, 1080px); }
.showcase .phone {
  position: absolute; right: 0; bottom: -6%; width: clamp(110px, 19vw, 230px);
}
@media (max-width: 640px) {
  .showcase .phone { right: -4px; bottom: -10%; width: 32%; }
  .showcase .browser { width: 88%; }
}

/* Device frames */
.browser {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(20, 20, 20, .12);
  box-shadow: 0 40px 80px -40px rgba(20, 20, 20, .45), 0 2px 6px rgba(20, 20, 20, .06);
}
.browser-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #F2EEE7; border-bottom: 1px solid rgba(20, 20, 20, .08);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: #D9D2C6; }
.browser-url {
  flex: 1; max-width: 340px; margin-inline: auto; text-align: center;
  font-size: .76rem; color: var(--muted); background: var(--white); border-radius: 999px; padding: 4px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.phone {
  background: var(--ink); border-radius: clamp(18px, 3vw, 34px); padding: clamp(5px, .7vw, 9px);
  box-shadow: 0 30px 60px -24px rgba(20, 20, 20, .55);
}
.phone img { width: 100%; border-radius: clamp(14px, 2.4vw, 26px); aspect-ratio: 640 / 1225; object-fit: cover; object-position: top; }

/* ─── Proof strip ─────────────────────────────────────────────────────────── */
.proof { display: grid; gap: 40px; }
.proof > * { min-width: 0; }
@media (min-width: 900px) { .proof { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; } }
.proof-quote { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.035em; }
.proof-quote .serif { font-size: 1.1em; }
.proof-cite { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted-on-ink); font-size: .95rem; }
.proof-cite b { color: var(--paper); }
.client-list { list-style: none; border-top: 1px solid var(--line-on-ink); container-type: inline-size; }
.client-list li { border-bottom: 1px solid var(--line-on-ink); }
.client-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0; text-decoration: none;
}
.client-list .cl-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.03em; }
.client-list .cl-meta { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-ink); text-align: right; }
/* Too narrow for name and industry side by side (most phones, small laptops):
   stack them. The longest row needs about 22rem; a longer industry still wraps
   rather than pushing the list off the screen. */
@container (max-width: 23.5rem) {
  .client-list a { flex-direction: column; align-items: flex-start; gap: 6px; }
  .client-list .cl-meta { text-align: left; }
}
.client-list a:hover .cl-name { color: var(--orange); }
.client-list-label { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); margin-bottom: 12px; }
/* The last (oldest) project fades out a little: the list reads as ongoing work. */
.client-list li:last-child:not(:first-child) {
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, rgb(0 0 0 / .3));
  mask-image: linear-gradient(to bottom, #000 15%, rgb(0 0 0 / .3));
}
.client-list li:last-child:focus-within { -webkit-mask-image: none; mask-image: none; }
@media (hover: hover) { .client-list li:last-child:hover { -webkit-mask-image: none; mask-image: none; } }

/* ─── Problem / approach ──────────────────────────────────────────────────── */
.split { display: grid; gap: 48px; }
.split > *, .page-hero-grid > *, .sec-head > * { min-width: 0; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); } }
.pains { list-style: none; border-top: 1.5px solid var(--ink); }
.pains li {
  display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 650; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.1; letter-spacing: -.03em;
}
.pains li .n { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.approach { list-style: none; display: grid; gap: 28px; }
.approach li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; }
.approach .ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
}
.approach .ic svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.approach h3 { margin-bottom: 6px; }
.approach p { color: var(--muted); }

/* ─── Section head ────────────────────────────────────────────────────────── */
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
@media (min-width: 960px) {
  .sec-head.split-head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 64px; }
}
.sec-head .lede { max-width: 46ch; }

/* ─── Packages ────────────────────────────────────────────────────────────── */
/* One ink "thumb" slides between the two options, instead of two buttons
   cross-fading their backgrounds (which read as a flicker). */
.billing-toggle {
  position: relative; isolation: isolate;
  display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
}
.billing-toggle::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--ink);
  transition: transform .45s var(--ease);
}
[data-billing="once"] .billing-toggle::before { transform: translateX(100%); }
.billing-toggle button {
  min-height: 44px; padding: 8px 22px; border-radius: 999px; border: 0; background: transparent;
  font-weight: 700; font-size: .95rem; cursor: pointer; color: var(--muted);
  transition: color .3s var(--ease);
}
.billing-toggle button[aria-pressed="true"] { color: var(--paper); }
@media (hover: hover) { .billing-toggle button[aria-pressed="false"]:hover { color: var(--ink); } }
html:not(.js) .billing-toggle { display: none; }
/* Phones: the cards stack ~2 000px tall, so the switch follows you down them. */
@media (max-width: 959px) {
  .js .billing-toggle {
    display: grid; width: max-content; position: sticky; top: calc(var(--nav-h) + 10px); z-index: 5;
    box-shadow: 0 10px 28px -14px rgba(20, 20, 20, .45);
  }
}
.pkg-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 960px) { .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.pkg {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}
.pkg.is-featured { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pkg-badge {
  position: absolute; top: -13px; left: clamp(24px, 3vw, 36px);
  background: var(--orange); color: var(--ink); font-weight: 700; font-size: .78rem;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .01em;
}
.pkg-name { font-family: var(--font-display); font-weight: 750; font-size: 1.6rem; letter-spacing: -.03em; }
.pkg-for { color: var(--muted); font-size: .96rem; margin-top: 6px; min-height: 3em; }
.pkg.is-featured .pkg-for { color: var(--muted-on-ink); }
.pkg-price { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pkg.is-featured .pkg-price { border-top-color: var(--line-on-ink); }
.pkg-amount {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  letter-spacing: -.05em; line-height: 1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.pkg-amount small { font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pkg.is-featured .pkg-amount small { color: var(--muted-on-ink); }
.pkg-amount .from { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.pkg-note { font-size: .88rem; color: var(--muted); margin-top: 8px; }
.pkg.is-featured .pkg-note { color: var(--muted-on-ink); }
/* Hosting & domain: included on monthly, not on once-off. A full-weight line
   right under the price, never small print. */
.pkg-hosting {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .92rem; line-height: 1.3;
}
.pkg-hosting svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }
.pkg-hosting.is-in { background: var(--orange-soft); color: var(--ink); }
.pkg-hosting.is-out { border-color: var(--line-strong); color: var(--ink); }
.pkg-hosting.is-out svg { stroke: var(--orange-ink); }
.pkg.is-featured .pkg-hosting.is-in { background: var(--orange); }
.pkg.is-featured .pkg-hosting.is-out { border-color: rgba(246, 241, 232, .6); color: var(--paper); }
.pkg.is-featured .pkg-hosting.is-out svg { stroke: var(--orange); }
.pkg-inherits { margin-top: 24px; font-weight: 700; font-size: .97rem; }
.pkg-inherits + .pkg-feats { margin-top: 12px; }
.pkg-feats { list-style: none; display: grid; gap: 10px; margin: 24px 0 28px; }
.pkg-feats li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: .97rem; line-height: 1.45; }
.pkg-feats svg { width: 18px; height: 18px; margin-top: 2px; stroke: var(--orange-ink); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pkg.is-featured .pkg-feats svg { stroke: var(--orange); }
.pkg-cta { margin-top: auto; display: grid; gap: 10px; }
.pkg.is-featured .btn-outline { --btn-fg: var(--paper); --btn-bd: rgba(246, 241, 232, .5); }
.pkg.is-featured .btn-outline:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.pkg-delivery { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; margin-top: 4px; }
.pkg-delivery svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Billing switch: monthly is the default; [data-billing="once"] flips it.
   Used by the package prices and the How-it-works steps. Both states share one
   grid cell, so the block is always as tall as the taller state and nothing
   jumps. The outgoing state fades out fast, the incoming one follows a beat
   later so the two never smear over each other. */
.plan-swap { display: grid; }
.plan-swap > * {
  grid-area: 1 / 1; min-width: 0;
  transition: opacity .3s var(--ease) .1s, transform .45s var(--ease) .1s, visibility 0s;
}
.plan-once, [data-billing="once"] .plan-monthly {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
[data-billing="once"] .plan-once {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease) .1s, transform .45s var(--ease) .1s, visibility 0s;
}
/* Set on load when ?plan=once arrives, so the page opens on once-off
   without animating to it. */
[data-billing-root].is-instant .plan-swap > *,
[data-billing-root].is-instant .billing-toggle::before,
[data-billing-root].is-instant .billing-toggle button { transition: none !important; }

/* Monthly vs once-off comparison (/pricing, on ink). A real table, so the
   rows read correctly to screen readers; fixed layout keeps it inside a phone. */
.plan-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plan-table col.c-label { width: 30%; }
.plan-table th, .plan-table td {
  text-align: left; vertical-align: top; padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line-on-ink);
}
.plan-table thead th, .plan-table thead td { border-bottom: 1.5px solid var(--paper); padding-bottom: 20px; vertical-align: bottom; }
.plan-table thead th {
  font-family: var(--font-display); font-weight: 750; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.03em; line-height: 1.05;
}
.plan-table thead th.is-monthly { color: var(--orange); }
.plan-table thead th span {
  display: block; margin-top: 6px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--muted-on-ink);
}
.plan-table tbody th { font-weight: 600; font-size: .95rem; color: var(--muted-on-ink); }
.pt-val { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 700; line-height: 1.35; }
.pt-val svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 3; }
.pt-yes svg { stroke: var(--orange); }
.pt-no svg { stroke: var(--muted-on-ink); }
.pt-sub { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.4; color: var(--muted-on-ink); }
@media (max-width: 640px) {
  .plan-table th, .plan-table td { padding-right: 10px; font-size: .9rem; }
  .plan-table thead th { font-size: 1.25rem; }
  .pt-val { gap: 6px; }
  .pt-sub { font-size: .82rem; }
}

/* ─── Work ────────────────────────────────────────────────────────────────── */
.work-list { display: grid; gap: clamp(56px, 8vw, 120px); }
.work-item { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) {
  .work-item { grid-template-columns: 1.5fr 1fr; gap: 56px; }
  .work-item:nth-child(even) .work-media { order: 2; }
}
.work-media { position: relative; display: block; text-decoration: none; }
.work-media .browser { transition: transform .6s var(--ease); }
.work-media:hover .browser { transform: translateY(-6px); }
.work-media .phone { position: absolute; right: -2%; bottom: -10%; width: 24%; }
.work-meta { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.work-item h3 { margin-top: 14px; }
.work-item h3 a { text-decoration: none; }
.work-item p { color: var(--muted); margin-top: 12px; max-width: 48ch; }
.work-result svg { width: 18px; height: 18px; flex: none; }
.work-result {
  display: inline-flex; gap: 10px; align-items: center; margin-top: 18px;
  font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--orange-soft); color: var(--ink); font-size: .95rem;
}
.work-links { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 24px; }
.work-type {
  display: grid; align-content: space-between; gap: 40px; min-height: 340px;
  padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--ink); color: var(--paper);
  text-decoration: none; position: relative; overflow: hidden;
}
.work-type .wt-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -.05em; line-height: .9; }
.work-type .wt-domain { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-ink); display: flex; justify-content: space-between; }
.work-type::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: var(--orange); opacity: .9; transition: transform .6s var(--ease);
}
.work-type:hover::after { transform: scale(1.15); }
.work-type > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .work-type { min-height: 260px; }
  .work-type::after { width: 140px; height: 140px; right: -56px; top: -56px; }
}
.work-type.is-next { background: var(--white); color: var(--ink); border: 1.5px dashed var(--line-strong); }
.work-type.is-next::after { display: none; }
.work-type.is-next .wt-name { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.work-type.is-next .wt-domain { color: var(--muted); }
.work-list .card-grid > :only-child { grid-column: 1 / -1; }

/* ─── Steps ───────────────────────────────────────────────────────────────── */
.steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-on-ink); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); border-top: 0; } }
.steps li {
  padding: 28px 0; border-bottom: 1px solid var(--line-on-ink); display: grid; gap: 12px; align-content: start;
}
@media (min-width: 900px) {
  .steps li { padding: 0 28px 0 0; border-bottom: 0; border-top: 1px solid var(--line-on-ink); padding-top: 28px; margin-right: 20px; }
}
.steps .step-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.05em; color: var(--orange); }
.steps p { color: var(--muted-on-ink); }
.band-paper2 .steps, .band-paper2 .steps li { border-color: var(--line); }
.band-paper2 .steps p { color: var(--muted); }
.band-paper2 .steps .step-n { color: var(--orange-ink); }
/* How it works, split by how the client pays (PlanSteps): steps that differ
   carry a monthly and a once-off version in one .plan-swap cell. */
.plan-steps .steps { margin-top: 32px; }
.steps .plan-swap > * { display: grid; gap: 12px; align-content: start; }
/* The switch on an ink band: paper thumb, ink label. Solid, because on phones
   it sticks over the steps as they scroll past. */
.band-ink .billing-toggle { background: var(--ink); border-color: var(--line-on-ink); }
.band-ink .billing-toggle::before { background: var(--paper); }
.band-ink .billing-toggle button { color: var(--muted-on-ink); }
.band-ink .billing-toggle button[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) { .band-ink .billing-toggle button[aria-pressed="false"]:hover { color: var(--paper); } }

/* ─── Reviews ─────────────────────────────────────────────────────────────── */
.reviews, .reviews-col { display: grid; gap: 16px; align-content: start; }
@media (min-width: 960px) {
  .reviews { grid-template-columns: 1.25fr 1fr; gap: 20px; }
  .reviews-col { display: flex; flex-direction: column; gap: 20px; }
  .reviews-col > .review:last-child { flex: 1; }
}
.review {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 24px;
}
.review blockquote { font-size: 1.04rem; line-height: 1.6; }
.review.is-featured blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -.02em; }
.review .stars { color: var(--star); letter-spacing: 2px; font-size: 1.05rem; }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review .avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}
.review figcaption span { display: grid; line-height: 1.3; }
.review figcaption small { color: var(--muted); font-size: .88rem; }
.review-top { display: flex; align-items: center; justify-content: space-between; }
.review-top svg { width: 20px; height: 20px; }

/* ─── Founders ────────────────────────────────────────────────────────────── */
.founders-band { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .founders-band { grid-template-columns: auto 1fr auto; gap: 48px; } }
.founders-band .link-arrow { justify-self: start; }
.monograms { display: flex; }
.monogram {
  width: clamp(84px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.04em;
  border: 3px solid var(--paper-2);
}
.monogram:nth-child(1) { background: var(--orange); color: var(--ink); }
.monogram:nth-child(2) { background: var(--ink); color: var(--paper); margin-left: -18px; }
.monogram img { width: 100%; height: 100%; object-fit: cover; }

/* ─── FAQ (native <details>) ──────────────────────────────────────────────── */
.faq-list { border-top: 1.5px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-family: var(--font-display); font-weight: 650; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.02em; line-height: 1.25;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink); position: relative;
  transition: background-color .2s, transform .35s var(--ease);
}
.faq-list summary .pm::before, .faq-list summary .pm::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; background: var(--ink);
  transform: translate(-50%, -50%);
}
.faq-list summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq-list details[open] summary .pm { background: var(--orange); border-color: var(--orange); }
.faq-list details[open] summary .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list summary:hover .pm { background: var(--orange-soft); }
.faq-list .faq-a { padding: 0 56px 24px 0; color: var(--muted); max-width: 70ch; }

/* ─── CTA band ────────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; }
.cta-band .display-l { max-width: 14ch; }
.cta-band .lede { color: var(--ink); opacity: .78; max-width: 44ch; }
.cta-band-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .cta-band-grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }

/* ─── Page hero (inner pages) ─────────────────────────────────────────────── */
.page-hero { padding-top: clamp(40px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); position: relative; }
.page-hero-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .page-hero-grid { grid-template-columns: 1.5fr 1fr; align-items: end; gap: 56px; } }
.page-hero .lede { color: var(--ink); opacity: .8; }
/* Legacy class names used by the onboarding questionnaire markup. */
.page-hero-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 6rem); line-height: .96; letter-spacing: -.036em; text-wrap: balance; }
.page-hero-desc { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 52ch; margin-top: 20px; }
.tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.tag::before { content: ''; width: 24px; height: 2px; background: var(--orange); }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 44px); }
.band-ink .form-card { color: var(--ink); }
.form-card h2, .form-card .form-title { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; line-height: 1.05; }
.form-card .form-sub { color: var(--muted); margin-top: 8px; margin-bottom: 24px; font-size: .98rem; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-weight: 700; font-size: .92rem; }
.field label .opt { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid rgba(20, 20, 20, .22); background: var(--white);
  font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--orange-soft);
}
.field .input-invalid, .field [aria-invalid="true"] { border-color: #B42318; }
.form-more summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--orange-ink); margin-bottom: 12px; list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.form-more summary::-webkit-details-marker { display: none; }
.form-error { color: #B42318; font-weight: 600; font-size: .92rem; margin: 4px 0 12px; }
.form-consent { font-size: .84rem; color: var(--muted); margin-top: 14px; }
.form-consent a { color: inherit; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: none; text-align: left; }
.form-success.is-visible { display: grid; gap: 14px; }
.form-success .tick {
  width: 56px; height: 56px; border-radius: 50%; background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
}
.form-success .tick svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Generic cards / lists ───────────────────────────────────────────────── */
.card-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.8vw, 32px);
}
.band-ink .card { background: var(--ink-2); border-color: var(--line-on-ink); }
.card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; }
.card p { color: var(--muted); margin-top: 10px; font-size: .98rem; }
.band-ink .card p { color: var(--muted-on-ink); }
.card .card-n { font-family: var(--font-mono); font-size: .76rem; color: var(--orange-ink); letter-spacing: .06em; margin-bottom: 14px; display: block; }
.band-ink .card .card-n { color: var(--orange); }
.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.check-list svg { width: 20px; height: 20px; margin-top: 3px; stroke: var(--orange-ink); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.band-ink .check-list svg { stroke: var(--orange); }
.pill-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.pill-links a:hover { background: var(--ink); color: var(--paper); }

/* Contact details list */
.contact-list { list-style: none; border-top: 1.5px solid var(--ink); }
.contact-list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list .k { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.contact-list a { font-weight: 700; text-decoration: none; }
.contact-list a:hover { color: var(--orange-ink); }
@media (max-width: 480px) { .contact-list li { grid-template-columns: 1fr; gap: 2px; } }

/* Contact page: intro → form → details on phones; form beside both on desktop. */
.contact-grid { display: grid; gap: 40px; grid-template-areas: "intro" "form" "details"; }
.contact-grid > * { min-width: 0; }
.cg-intro { grid-area: intro; } .cg-form { grid-area: form; } .cg-details { grid-area: details; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 120px); row-gap: 0; grid-template-areas: "intro form" "details form"; align-items: start; }
  .cg-form { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (min-width: 960px) {
  .sticky-col { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
}

/* ─── Case study ──────────────────────────────────────────────────────────── */
.cs-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
@media (min-width: 800px) { .cs-meta { grid-template-columns: repeat(4, 1fr); } }
.cs-meta div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.cs-meta dt { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { font-weight: 700; margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div { padding: 28px 20px 28px 0; border-top: 1px solid var(--line-on-ink); }
.stats .s-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: -.05em; line-height: .95; color: var(--orange); }
.stats .s-label { color: var(--muted-on-ink); margin-top: 8px; font-size: .95rem; max-width: 20ch; }
.gallery { display: grid; gap: 16px; }
@media (min-width: 800px) { .gallery { grid-template-columns: 1fr 1fr; gap: 20px; } .gallery .wide { grid-column: 1 / -1; } }
.gallery figure { margin: 0; }
.phones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 800px) { .phones { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.phones figure { margin: 0; }
.phones figcaption { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-on-ink); margin-top: 12px; text-align: center; }
.phones .phone img { aspect-ratio: auto; }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 800px) { .swatches { grid-template-columns: repeat(4, 1fr); } }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.swatch i { display: block; height: 72px; }
.swatch div { padding: 10px 12px; font-size: .86rem; }
.swatch b { display: block; }
.swatch span { color: var(--muted); }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .88rem; background: var(--white); }
.big-quote { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -.03em; max-width: 30ch; }
.big-quote::before { content: '“'; display: block; font-family: var(--font-serif); font-style: italic; color: var(--orange); font-size: 2.4em; line-height: .6; margin-bottom: 8px; }
.big-quote-cite { margin-top: 20px; color: var(--muted-on-ink); font-size: .95rem; }

/* Case study: before & after (the old site next to ours, page for page) */
.ba-list { display: grid; gap: clamp(40px, 6vw, 72px); }
.ba-pair { border-top: 1px solid var(--line-on-ink); padding-top: 20px; }
.ba-label { margin-bottom: 20px; }
.ba-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .ba-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.ba-grid figure { margin: 0; }
.ba-tag {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-on-ink);
}
.ba-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ba-tag.is-after { color: var(--orange); }

/* ─── Legal / long-form prose (privacy policy) ───────────────────────────── */
.legal-section { padding-top: 0; }
.legal { display: grid; gap: 40px; }
@media (min-width: 1000px) { .legal { grid-template-columns: 240px 1fr; gap: 80px; align-items: start; } }
.legal > * { min-width: 0; }
.legal-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }

/* Contents: folded above the text on phones and tablets, a sticky column on desktop. */
.legal-toc ol, .legal-toc-fold ol { list-style: none; display: grid; }
.legal-toc a, .legal-toc-fold a { display: flex; gap: 12px; align-items: baseline; text-decoration: none; color: var(--muted); }
.legal-toc .n, .legal-toc-fold .n { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--orange-ink); flex: none; }
.legal-toc { display: none; }
@media (min-width: 1000px) {
  .legal-toc { display: block; position: sticky; top: calc(var(--nav-h) + 32px); }
  .legal-toc-fold { display: none; }
}
.legal-toc ol { border-left: 1.5px solid var(--line); gap: 2px; }
.legal-toc a { padding: 6px 0 6px 16px; margin-left: -1.5px; border-left: 1.5px solid transparent; font-size: .92rem; transition: color .2s, border-color .2s; }
.legal-toc a:hover { color: var(--ink); border-left-color: var(--orange); }

.legal-toc-fold { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.legal-toc-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; list-style: none; }
.legal-toc-fold summary::-webkit-details-marker { display: none; }
.legal-toc-fold summary .eyebrow { margin: 0; }
.legal-toc-fold .pm { position: relative; width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 50%; flex: none; transition: background .2s, border-color .2s; }
.legal-toc-fold .pm::before, .legal-toc-fold .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.legal-toc-fold .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.legal-toc-fold[open] .pm { background: var(--orange); border-color: var(--orange); }
.legal-toc-fold[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.legal-toc-fold ol { padding-bottom: 12px; }
.legal-toc-fold li + li { border-top: 1px solid var(--line); }
.legal-toc-fold a { padding: 12px 0; color: var(--ink); font-weight: 600; }

.legal-body { max-width: 72ch; }
.legal-body section + section { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(36px, 4.5vw, 48px); border-top: 1px solid var(--line); }
.legal-body h2 { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 20px; display: flex; gap: 14px; align-items: baseline; text-wrap: balance; }
.legal-body h2 .n { font-family: var(--font-mono); font-size: .8rem; color: var(--orange-ink); letter-spacing: .04em; flex: none; }
.legal-body p, .legal-body li, .legal-body dd { color: #2E2B27; text-wrap: pretty; }
.legal-body > section > * + * { margin-top: 16px; }
.legal-body ul { padding-left: 1.2em; display: grid; gap: 10px; }
.legal-body li::marker { color: var(--orange-ink); }
.legal-body a { color: var(--orange-ink); font-weight: 600; overflow-wrap: anywhere; }
.legal-body code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }
.legal-callout { padding: 20px 22px; border-left: 4px solid var(--orange); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; }
.legal-body > section > .legal-callout { margin-top: 24px; }
.legal-callout strong { display: block; margin-bottom: 6px; }
.legal-callout ul { margin-top: 10px; gap: 8px; }
@media (max-width: 480px) { .legal-callout { padding: 18px 16px; } }

/* Label / text rows: stacked on phones, two columns from 640px. */
.legal-rows { border-top: 1.5px solid var(--ink); }
.legal-rows > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legal-rows > div > * { min-width: 0; }
.legal-rows dt { font-weight: 700; color: var(--ink); }
@media (min-width: 640px) { .legal-rows > div { grid-template-columns: 190px 1fr; gap: 24px; } }

.legal-body .contact-list { padding-left: 0; gap: 0; margin-top: 24px; }
.legal-body .contact-list li { color: var(--ink); }

/* Data table (price guide) */
.data-table-wrap { overflow-x: auto; border-top: 1.5px solid var(--ink); }
.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.data-table th, .data-table td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.data-table td:first-child { font-weight: 700; }
.data-table .range { font-family: var(--font-display); font-weight: 750; font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; }
.data-table tr.is-us td { background: var(--orange-soft); }
.data-table tr.is-us td:first-child { padding-left: 12px; }

/* ─── Motion ──────────────────────────────────────────────────────────────── */
/* Reveal-on-scroll: only when JS is running and motion is welcome; content is
   always visible otherwise. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: .08s; }
  .js .reveal.d2 { transition-delay: .16s; }
  .js .reveal.d3 { transition-delay: .24s; }

  /* Headline lines rise in on load (CSS only — no layout shift, text is in the DOM). */
  .rise { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
  .rise > span { display: block; animation: rise 1s var(--ease) both; animation-delay: var(--d, 0s); }
  .fade-in { animation: fadeIn 1s var(--ease) both; animation-delay: var(--d, .3s); }
  @keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .showcase .browser { animation: fadeIn 1.2s var(--ease) .35s both; }
  .showcase .phone { animation: fadeIn 1.2s var(--ease) .6s both; }
}

/* Marquee (client / promise ticker) */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; }
.marquee-track { display: flex; gap: 48px; width: max-content; }
.marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.marquee-track span::after { content: '✳'; color: var(--orange-ink); font-size: .9em; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 40s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Reduced motion: state changes still happen, just without travel. */
@media (prefers-reduced-motion: reduce) {
  .plan-swap > *, .plan-once, [data-billing="once"] .plan-monthly,
  [data-billing="once"] .plan-once { transform: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .billing-toggle::before { transition: none; }
  .cta-dock, .cta-dock.is-visible { transform: none !important; transition: opacity .2s ease, visibility 0s linear .2s !important; }
  .cta-dock.is-visible { transition: opacity .2s ease, visibility 0s !important; }
  .btn, .btn:active { transform: none !important; }
  .burger span { transition: none !important; }
}

/* Print */
@media print {
  .site-header, .site-footer, .wa-fab, .cta-dock, .mobile-menu { display: none !important; }
  body { background: #fff; }
}