/* =========================================================
   Built by Boot — Whenevr-inspired design system
   Structure/geometry/palette modelled on the Whenevr one-page
   layout: white ground, near-black ink, grey panels, single
   green accent, Inter throughout, flat pill buttons, spring
   appear animations, scrolling word tickers.
   All markup, code and copy are Built by Boot's own — only the
   design language is modelled on the template.
   ========================================================= */

/* =========================================================
   FONT — Plus Jakarta Sans, self-hosted (2026-08-17)
   Was loaded from fonts.googleapis.com, which cost a blocking
   request plus DNS/TLS to two third-party origins — ~1.5s of
   render-blocking on mobile per PageSpeed. These are the same
   files Google serves, fetched once and kept in /fonts.
   One file per subset covers the whole 400–800 range: it is a
   VARIABLE font, which is why the weight is a range, not a
   number. Do not split it back into a file per weight.
   Glyphs outside these two subsets (★, ▲, emoji) fall back to
   the system font — they did on Google Fonts too.
   ========================================================= */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Palette (template scheme) ---- */
  --paper: #ffffff;      /* white ground */
  --paper-2: #f9f9f9;    /* soft panel (Drospecta off-white) */
  --band: #edefeb;       /* deeper panel (Drospecta warm grey) */
  --hero-bg: #f6f5f3;    /* warm off-white — hero ground, warmer than --paper-2
                            so the green/amber glow reads as light, not haze */
  --sand: #e6e8e2;
  --ink: #0e0f0c;        /* near-black text (Drospecta) */
  --dark: #0e0f0c;       /* solid dark buttons / bands (Drospecta, not pure black) */
  --dark-deep: #0a0b08;  /* footer */
  --muted: #454745;      /* secondary / body text on light (Drospecta) */
  --muted-2: #6a6c6a;
  --muted-dark: #b8bbb4; /* secondary text on dark */
  /* ---- The green. One tone, four roles. Retone here, not in the markup. ----
     Anything green in this repo should resolve to one of these. A second lime
     (#a3e05c) used to sit alongside --accent in the mockup chips, which put two
     different greens on screen at once; it is gone. */
  --accent: #8ccc4a;     /* the green: buttons, chips, any green surface */
  --accent-deep: #7cc242;/* one step down: hover, small labels, dots */
  --accent-fg: #14330a;  /* near-black green — text/icons ON a green surface */
  --accent-ink: #5cae2e; /* green text/icons on WHITE — --accent is too light
                            at small sizes to stay legible, so this is darker */
  --accent-fg-dim: #3c6a19; /* secondary text ON green — the quieter half of the
                            two-tone pairing with --accent-fg (labels vs values) */
  --line: #e0e2dc;
  --line-accent: #c6d9ae; /* border tinted toward --accent, for hover states */
  --hivis: #ffb300;      /* hi-vis amber — the roadworks/"men at work" yellow.
                            Light surface: everything on it must be ink, never
                            white (white on this fails contrast at 1.8:1). */
  --line-dark: rgba(255, 255, 255, 0.16);

  /* ---- Depth: template is flat; shadows stay whisper-soft ---- */
  --shadow-cta: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
  --shadow-cta-hover: 0 16px 32px -14px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 24px 48px -30px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 14px 34px -24px rgba(0, 0, 0, 0.18);

  /* ---- Legacy aliases ---- */
  --cream: var(--paper);
  --cream-2: var(--paper-2);
  --beige: var(--band);
  --green: var(--accent);
  --green-deep: var(--accent-deep);
  --gold: var(--accent);
  --lime: var(--accent);
  --brown: var(--ink);

  /* ---- Geometry (template radii: 50 pill / 40 card / 16 small) ---- */
  --maxw: 1200px;
  --textw: 840px;
  --pad: clamp(20px, 4vw, 30px);
  --radius-xl: 40px;
  --radius: 16px;
  --btn-radius: 50px;
  /* Vertical rhythm between sections. NOTE this lands on BOTH edges of every
     .section, so adjacent sections stack it — the visible gap is double this
     value. It was 140px (= 280px of dead space between blocks at desktop),
     which read as disconnected rather than airy. */
  --sect: clamp(56px, 6.5vw, 96px);

  /* ---- Type: Plus Jakarta Sans (site-wide) ---- */
  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-mono: "Plus Jakarta Sans", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* slight overshoot, spring feel */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The HTML `hidden` attribute has almost no specificity, so any element rule
   that sets display beats it -- .form is display:flex, which meant hiding the
   intake form on success left it on screen next to its own success panel. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* =========================================================
   TYPE ROLES — big tight Inter
   ========================================================= */
.section__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.section__title--onDark { color: var(--paper); }
/* Editorial italic-serif accent word in headings — the premium type signature,
   carried through from the hero. Distinguished by form, not colour. */
.section__title em, .cta__title em {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: inherit;
  color: inherit;
}

.label {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.label::before {
  content: "";
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(140, 204, 74, 0.85);
}
.label--onDark::before { box-shadow: 0 0 10px rgba(140, 204, 74, 0.9); }
.label--onDark { color: var(--muted-dark); }

/* Availability-style chip with pulsing green dot (template signature) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
}
.tag::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 204, 74, 0.7), 0 0 10px 2px rgba(140, 204, 74, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(140, 204, 74, 0), 0 0 10px 2px rgba(140, 204, 74, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .tag::before { animation: none; } }

/* ---------- Brand logo ---------- */
.brand { display: inline-flex; align-items: center; }
.brand__img { display: block; height: 38px; width: auto; }
/* Footer now uses the same mark as the nav (logo-mark-dark.svg), not the taller
   mark+wordmark lockup. These heights keep the mark rendering at the size it
   already appeared at inside the old lockup — the wordmark was the extra height,
   not a bigger boot. Retune here if the footer ever goes back to the lockup. */
.brand--footer .brand__img { height: clamp(64px, 8.5vw, 92px); }

/* =========================================================
   BUTTONS — flat black pill / grey pill (template), spring hover
   ========================================================= */
.btn {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 14px 28px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.45s var(--spring), background 0.3s var(--ease),
    color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
  white-space: nowrap;
}
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--lg { padding: 16px 34px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

.btn--solid { background: var(--dark); color: var(--paper); box-shadow: var(--shadow-cta); }
.btn--solid:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-cta-hover); }
.btn--solid:active { transform: scale(0.97); }

.btn--outline { background: var(--band); color: var(--ink); }
.btn--outline:hover { transform: translateY(-2px) scale(1.02); }

/* green accent button */
.btn--lemon { background: var(--accent); color: var(--ink); box-shadow: 0 0 22px rgba(140, 204, 74, 0.55), 0 10px 24px -14px rgba(0, 0, 0, 0.35); }
.btn--lemon:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.4); }
.btn--lemon:active { transform: scale(0.97); }

/* secondary "play" link */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.btn-play__i {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--band);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  padding-left: 2px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.45s var(--spring);
}
.btn-play:hover { color: var(--ink); }
.btn-play:hover .btn-play__i { background: var(--accent); color: var(--ink); transform: scale(1.08); box-shadow: 0 0 16px rgba(140, 204, 74, 0.8); }

/* =========================================================
   NAV — minimal white strip (template navigation)
   ========================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad);
  /* Three columns, links centred. This used to be .nav--home only, which made
     the menu jump horizontally on every page change; it is now the layout
     everywhere so the nav stays put between pages. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav__links { justify-self: center; }
.nav__actions { justify-self: end; }
.nav { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__links { display: flex; gap: 26px; }
.nav__links a {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 12px; }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border: none; background: var(--band); border-radius: 50%;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 18px var(--pad) 26px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav__mobile a { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; padding: 10px 0; border-bottom: 1px solid var(--band); }
.nav__mobile a:last-child { border-bottom: none; margin-top: 10px; }

/* =========================================================
   HERO — centered type, spring appear stagger, image panel
   with a service ticker riding its lower edge (template hero)
   ========================================================= */
.hero { padding: clamp(140px, 18vh, 190px) 0 0; text-align: center; }
.hero__inner, .hero__lead { max-width: var(--textw); margin: 0 auto; padding-inline: var(--pad); }
.hero .tag { margin-bottom: 24px; }

.hero__big, .hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(42px, 6.2vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title { font-size: clamp(38px, 5.2vw, 68px); }
.accent { color: var(--accent); font-style: normal; background: none; }

.hero__lede {
  margin: 24px auto 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.65;
}
.hero__actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* spring appear: elements start low + hidden, spring up in stagger */
.appear {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--spring);
  transition-delay: var(--ad, 0s);
}
.appear.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .appear { opacity: 1; transform: none; transition: none; } }

/* hero visual panel — grey rounded stage for our own assets */
.hero__stage {
  max-width: var(--maxw);
  margin: clamp(48px, 7vw, 84px) auto 0;
  padding-inline: var(--pad);
}
.hero__panel {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--band);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: clamp(34px, 5vw, 70px) clamp(20px, 3vw, 50px) clamp(70px, 8vw, 110px);
}
.hero__collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.hero__collage img {
  width: 100%; height: auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.14));
  transition: transform 0.5s var(--spring);
}
.hero__collage img:hover { transform: scale(1.16) rotate(-4deg); }
/* alternate rows float slightly for a collage feel */
.hero__collage img:nth-child(even) { transform: translateY(-10px); }
.hero__collage img:nth-child(even):hover { transform: translateY(-10px) scale(1.16) rotate(4deg); }

/* ticker riding the panel's lower edge (template: ticker inside hero image) */
.hero__panel .ticker { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2.6vw, 30px); }

/* =========================================================
   TICKER — scrolling word rows (template Ticker / hero ticker)
   ========================================================= */
.ticker { overflow: hidden; white-space: nowrap; position: relative; }
.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(26px, 4vw, 56px);
  animation: tickerScroll 30s linear infinite;
  will-change: transform;
  padding-right: clamp(26px, 4vw, 56px);
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

.ticker__item {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: clamp(26px, 4vw, 56px);
}
.ticker__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* standalone big ticker section — huge ghost words */
.ticker--big { padding: clamp(20px, 3vw, 34px) 0; border-block: 1px solid var(--band); }
.ticker--big .ticker__item {
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.ticker--big .ticker__item::after { background: var(--accent); opacity: 0.6; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: var(--sect) 0; }
.section__head { text-align: center; max-width: var(--textw); margin: 0 auto clamp(40px, 6vw, 66px); display: flex; flex-direction: column; gap: 16px; align-items: center; }
.section__head--split {
  text-align: left; max-width: none; align-items: end;
  flex-direction: row; justify-content: space-between; gap: 40px;
}
.section__intro { color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; max-width: 48ch; }
.section__intro--center { margin: 0 auto; }

/* ---------- Service cards (template Cards: image + title + text) ---------- */
.services {}
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.svc-card {
  background: var(--paper-2);
  border: 1px solid var(--band);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 2.8vw, 38px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.5s var(--spring), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--line); }
.svc-card--dark { background: var(--dark); border-color: var(--dark); }
.svc-card--dark .svc-card__name { color: var(--paper); }
.svc-card--dark .svc-card__desc { color: var(--muted-dark); }
.svc-card--lime { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 48px -12px rgba(140, 204, 74, 0.75); }
.svc-card--lime .svc-card__name, .svc-card--lime .svc-card__link { color: var(--accent-fg); }
.svc-card--lime .svc-card__desc { color: rgba(22, 51, 0, 0.82); }
.svc-card__num { font-weight: 500; font-size: 13px; color: var(--muted-2); }
.svc-card--dark .svc-card__num { color: var(--accent); }
.svc-card--lime .svc-card__num { color: rgba(255, 255, 255, 0.7); }
.svc-card__name { font-weight: 600; font-size: clamp(22px, 2.1vw, 27px); letter-spacing: -0.02em; line-height: 1.15; }
.svc-card__desc { color: var(--muted); font-size: 15px; line-height: 1.6; flex: 1; }
.svc-card__link { font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }
.svc-card--dark .svc-card__link { color: var(--accent); }

/* ---------- Step cards ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.step {
  background: var(--paper-2);
  border: 1px solid var(--band);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 2.8vw, 36px);
  display: flex; flex-direction: column;
  transition: transform 0.5s var(--spring), box-shadow 0.4s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.step__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--band);
  display: grid; place-items: center;
  margin-bottom: 22px;
  overflow: hidden;
}
.step__media img { width: 86%; height: auto; transition: transform 0.5s var(--ease); }
.step:hover .step__media img { transform: scale(1.03); }
.step__title { font-weight: 600; font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -0.02em; margin-bottom: 10px; }
.step__text { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- Portfolio slot: coming-soon (dark band) ---------- */
.stories { background: var(--dark); border-radius: var(--radius-xl); margin-inline: clamp(10px, 1.5vw, 20px); }
.stories--soon .soon { max-width: var(--textw); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.soon__text { color: var(--muted-dark); font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.65; max-width: 46ch; }

/* ---- "Watch this space" teaser ----
   A faint grid behind the panel reads as blueprint / work-in-progress. The
   panel already clips to --radius-xl, so the grid can run full bleed. */
/* Hi-vis amber panel. This flips the surface from dark to light, so every
   `--onDark` treatment inside it has to be inverted to ink — white text on
   this amber is 1.8:1 and unreadable. Grid and glow go dark/warm to match. */
.stories--watch {
  position: relative;
  overflow: hidden;
  background-color: var(--hivis);
  color: var(--ink);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center center;
}
/* Pool of light so the plate sits in a highlight rather than on flat amber. */
.stories--watch::before {
  content: '';
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(760px, 90%); aspect-ratio: 1.6;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
/* Invert the on-dark treatments for the light surface. */
.stories--watch .section__title--onDark { color: var(--ink); }
.stories--watch .label--onDark { color: rgba(14, 15, 12, 0.66); }
.stories--watch .label--onDark::before { background: var(--ink); box-shadow: none; }
.stories--watch .soon__text { color: rgba(14, 15, 12, 0.74); }
/* Ink scope, like the black glyph on a roadworks sign — the lime read as mud
   against amber. */
.stories--watch .watch__scope { color: var(--ink); filter: drop-shadow(0 10px 16px rgba(120, 78, 0, 0.32)); }
.stories--watch .watch__lens { fill: rgba(255, 255, 255, 0.34); }
.stories--watch .watch__plate { box-shadow: 0 18px 40px rgba(120, 78, 0, 0.34), 0 2px 0 rgba(255, 255, 255, 0.6) inset; }
/* Centred, like the rest of the teaser. The existing centring rule keys off
   .stories--soon, so this variant needs its own. */
.stories--watch .soon {
  position: relative; z-index: 1;
  max-width: var(--textw); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 20px;
}
/* Extra bottom room so the scope, which hangs below the plate, clears the
   paragraph underneath instead of landing on it. */
.watch__title { line-height: 1.3; text-wrap: balance; margin-bottom: 0.3em; }

/* The lifted word. inline-block keeps it on the baseline and lets the line
   wrap normally; padding is in em so it tracks the clamped headline size. */
.watch__plate {
  position: relative;
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.22em;
  padding: 0.02em 0.26em 0.08em;
  transform: rotate(-1.2deg);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 255, 255, 0.5) inset;
}

/* The scope hangs off the plate's bottom-right and drifts. Sized in em so it
   scales with the headline. aria-hidden + pointer-events:none — it is
   decoration and must never block the text under it. */
.watch__scope {
  position: absolute;
  right: -0.52em; bottom: -0.46em;
  width: 1.15em; height: 1.15em;
  color: var(--accent);
  pointer-events: none;
  animation: watch-float 5s var(--ease) infinite;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.watch__scope svg { display: block; width: 100%; height: 100%; }
.watch__lens { fill: rgba(255, 255, 255, 0.16); stroke: none; }
@keyframes watch-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); }
  50%      { transform: translate3d(0, -0.16em, 0) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .watch__scope { animation: none; transform: rotate(-7deg); }
}

/* Google reviews card (INACTIVE — markup commented out in index.html) */
.greviews__card {
  max-width: 520px; margin: 0 auto; text-align: center;
  background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl);
  padding: clamp(30px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.greviews__stars { color: var(--accent); font-size: 30px; letter-spacing: 6px; line-height: 1; }
.greviews__score { color: var(--muted); font-size: 16px; }
.greviews__score strong { color: var(--ink); }

/* =========================================================
   CTA / CONTACT — big email display (template Contact)
   ========================================================= */
.cta { background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl); margin-inline: clamp(10px, 1.5vw, 20px); text-align: center; }
.cta .label { justify-content: center; margin-bottom: 18px; }
.cta__inner { max-width: 860px; margin: 0 auto; padding-inline: var(--pad); }
.cta__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 20px;
}
.cta__title .hl { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 1em; letter-spacing: inherit; color: var(--accent); }
.cta__text { color: var(--muted); font-size: clamp(15.5px, 1.5vw, 18px); max-width: 52ch; margin: 0 auto; }
.cta__actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta__email {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease);
}
.cta__email:hover { color: var(--accent-deep); }
.cta .label--onDark { color: var(--muted); }
.cta .section__title--onDark { color: var(--ink); }

/* =========================================================
   FAQ accordion (template FAQ: bordered rows, plus icon)
   ========================================================= */
/* =========================================================
   FAQ
   The section's own thesis in miniature: a plain front, with the
   substance behind it. Closed, an item is just the question. Open, it
   takes its family tint and an accent rule draws down from the icon —
   the answer being fed from the question.
   Deliberately not numbered 01–06: these are six different kinds of
   doubt, not a sequence, so the eyebrow names the worry instead.
   ========================================================= */
.faq__grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) {
  .faq__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .faq__rail { position: sticky; top: 104px; }
}
.faq__rail { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.faq__title { text-align: left; font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.038em; }
.faq__intro { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 34ch; }

.faq__ask { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 24px; max-width: 330px; }
.faq__ask-h { font-size: 17px; font-weight: 800; letter-spacing: -0.025em; }
.faq__ask-p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-bottom: 4px; }

.accordion { display: flex; flex-direction: column; gap: 10px; max-width: none; margin: 0; }

.acc {
  --acc-tint: var(--paper-2);
  --acc-line: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
  transition: background 0.45s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
/* Quiet until acted on: hover moves the border, never the background. */
.acc:hover { border-color: var(--acc-line); transform: translateY(-1px); }
.acc.is-open { background: var(--acc-tint); border-color: var(--acc-line); }
.acc--green { --acc-tint: radial-gradient(120% 160% at 12% 0%, #eef7e9 0%, #e6f2de 60%, #e2efd9 100%); --acc-line: #c6d9ae; --acc-deep: #1e3a25; }
.acc--pink  { --acc-tint: radial-gradient(120% 160% at 12% 0%, #fbecf2 0%, #f6e2ea 60%, #f3dde6 100%); --acc-line: #e8ccd8; --acc-deep: #4a2226; }
.acc--amber { --acc-tint: radial-gradient(120% 160% at 12% 0%, #fdf2ea 0%, #f8eae1 60%, #f6e4d9 100%); --acc-line: #ecd6c2; --acc-deep: #4a3221; }
.acc--teal  { --acc-tint: radial-gradient(120% 160% at 12% 0%, #ecf5f3 0%, #e0eeeb 60%, #dbebe8 100%); --acc-line: #c3ded8; --acc-deep: #214540; }

.acc__h { margin: 0; font-size: inherit; font-weight: inherit; }
.acc__q {
  width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 6px 20px; text-align: left;
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
}
.acc__kind {
  grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
  transition: color 0.3s var(--ease);
}
.acc.is-open .acc__kind { color: var(--acc-deep); }
.acc__qh { grid-column: 1; font-weight: 600; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.02em; line-height: 1.3; text-wrap: pretty; }

/* Two bars: the vertical one collapses. Reads as expand/collapse rather
   than add/close, which a rotating + into an × does not. */
.acc__icon {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  position: relative; width: 34px; height: 34px; flex: none;
  border-radius: 999px; background: var(--band);
  transition: background 0.3s var(--ease);
}
.acc__icon i { position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.4s var(--spring), background 0.3s var(--ease); }
.acc__icon i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.acc.is-open .acc__icon { background: var(--acc-deep); }
.acc.is-open .acc__icon i { background: var(--paper); }
.acc.is-open .acc__icon i:last-child { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

.acc__a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
/* The rule draws down from under the icon as the panel opens. */
.acc__inner { position: relative; padding: 0 clamp(20px, 2.4vw, 28px) clamp(22px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }
.acc__inner::before {
  content: ""; position: absolute; left: clamp(20px, 2.4vw, 28px); top: 0; bottom: clamp(22px, 2.4vw, 28px);
  width: 2px; border-radius: 2px; background: var(--acc-deep); opacity: 0.28;
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.5s var(--ease) 0.08s;
}
.acc.is-open .acc__inner::before { transform: scaleY(1); }
.acc__inner p { padding-left: 20px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 62ch; }

.acc__q:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -3px; border-radius: 18px; }

@media (prefers-reduced-motion: reduce) {
  .acc, .acc__icon, .acc__icon i, .acc__a, .acc__inner::before { transition: none; }
  .acc:hover { transform: none; }
}

/* =========================================================
   FOOTER — minimal (template footer)
   ========================================================= */
.footer { background: var(--paper); border-top: 1px solid var(--band); margin-top: var(--sect); color: var(--ink); }
.footer .container { padding-top: clamp(48px, 6vw, 76px); }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--band); }
.footer__tag { color: var(--muted); font-size: 14.5px; line-height: 1.65; text-align: right; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: clamp(40px, 5vw, 60px) 0; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__heading { font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 6px; }
.footer__col a { color: var(--muted); font-size: 14.5px; transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 28px;
  border-top: 1px solid var(--band);
  color: var(--muted-2); font-size: 13px;
}
/* footer logo: dark artwork variant sits on white here */
.brand--footer { filter: none; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.85s var(--spring); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   INNER PAGES
   ========================================================= */

/* ----- services.html rows ----- */
.svc-rows { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px); max-width: 1000px; margin: 0 auto; }
.svc-row {
  background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 40px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 34px);
}
.svc-row__panel--dark { background: var(--dark); border-color: var(--dark); }
.svc-row__panel--dark .svc-row__name { color: var(--paper); }
.svc-row__panel--dark .svc-row__desc, .svc-row__panel--dark .svc-row__for { color: var(--muted-dark); }
.svc-row__panel--lime { background: var(--accent); border-color: var(--accent); }
.svc-row__panel--lime .svc-row__name, .svc-row__panel--lime .svc-row__link { color: #fff; }
.svc-row__panel--lime .svc-row__desc, .svc-row__panel--lime .svc-row__for { color: rgba(255, 255, 255, 0.88); }
.svc-row__panel--cream { background: var(--paper); }
.svc-row__panel {
  align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: clamp(150px, 19vw, 200px);
}
.svc-row__art {
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--band);
  border-radius: 24px;
  overflow: hidden;
}
.svc-row__art img { width: 88%; height: auto; transition: transform 0.5s var(--ease); }
.svc-row:hover .svc-row__art img { transform: scale(1.03); }
.svc-row__main { display: flex; flex-direction: column; gap: 10px; }
.svc-row__name { font-weight: 600; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -0.025em; line-height: 1.1; }
.svc-row__desc { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.svc-row__for { color: var(--muted); font-size: 14px; line-height: 1.6; }
.svc-row__for strong { color: var(--ink); font-weight: 600; }
.svc-row__panel--dark .svc-row__for strong { color: var(--paper); }
.svc-row__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.svc-row__chip {
  font-weight: 500; font-size: 12.5px;
  background: var(--band); border-radius: 999px; padding: 6px 13px; color: var(--ink);
}
.svc-row__panel--dark .svc-row__chip { background: rgba(255, 255, 255, 0.12); color: var(--paper); }
.svc-row__panel--lime .svc-row__chip { background: rgba(255, 255, 255, 0.22); color: #fff; }
.svc-row__link { font-weight: 600; font-size: 14px; color: var(--ink); margin-top: 8px; display: inline-flex; gap: 6px; }
.svc-row__panel--dark .svc-row__link { color: var(--accent); }
.svc-detail { color: var(--muted); font-size: 14.5px; }

/* ----- process.html ----- */
.proc {}
.proc-steps { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px); max-width: 900px; margin: 0 auto; }
.proc-step {
  background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 38px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.6vw, 34px); align-items: start;
}
.proc-step__num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  box-shadow: 0 0 18px rgba(140, 204, 74, 0.5);
  font-weight: 600; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.proc-step__title { font-weight: 600; font-size: clamp(23px, 2.6vw, 32px); letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 10px; }
.proc-step__body p { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 64ch; }

.cost { background: var(--paper-2); border-radius: var(--radius-xl); margin-inline: clamp(10px, 1.5vw, 20px); }
.cost-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); max-width: 900px; margin: 0 auto; }
.cost-item { background: var(--paper); border: 1px solid var(--band); border-radius: var(--radius-xl); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 8px; }
.cost-item__name { font-weight: 600; font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.cost-item__tag {
  align-self: flex-start;
  font-weight: 600; font-size: 12px;
  background: var(--accent); color: var(--ink); border-radius: 999px; padding: 6px 13px;
}
.cost-item__time { color: var(--muted); font-size: 13.5px; }
.cost-item p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.cost-note { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 26px; }
.cost-note em { color: var(--ink); }

/* ----- about.html ----- */
.about-intro {}
.about-block {}
.about-block--band { background: var(--paper-2); border-radius: var(--radius-xl); margin-inline: clamp(10px, 1.5vw, 20px); }
.about-intro__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 70px); align-items: start; max-width: 1060px; margin: 0 auto; }
.about-intro__statement { font-weight: 600; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.03em; line-height: 1.08; }
.about-intro__body { display: flex; flex-direction: column; gap: 18px; }
.about-intro__body p { font-size: clamp(15px, 1.5vw, 17px); color: var(--muted); line-height: 1.7; }

.values { background: var(--paper-2); border-radius: var(--radius-xl); margin-inline: clamp(10px, 1.5vw, 20px); }
.values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.value { background: var(--paper); border: 1px solid var(--band); border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 38px); }
.value__k { font-weight: 600; font-size: 14px; color: var(--accent-deep); display: inline-flex; align-items: center; margin-bottom: 14px; }
.value h3 { font-weight: 600; font-size: clamp(19px, 1.9vw, 23px); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 10px; }
.value p { color: var(--muted); font-size: 14.5px; line-height: 1.62; }

.stats {}
.stats--dark { background: var(--dark); border-radius: var(--radius-xl); margin-inline: clamp(10px, 1.5vw, 20px); }
.stats--dark .section__title, .stats--dark .stat__num { color: var(--paper); }
.stats--dark .stat__label { color: var(--muted-dark); }
.stats--dark .label { color: var(--accent); }
.stats__head { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.stat { border-top: 2px solid var(--accent); padding-top: 18px; }
.stat__num { display: block; font-weight: 600; font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; }
.stat__label { color: var(--muted); font-size: 14px; max-width: 22ch; display: block; }

.team {}
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.member { text-align: center; background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 38px); }
.member__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(84px, 8.6vw, 112px); height: clamp(84px, 8.6vw, 112px);
  border-radius: 50%; background: var(--band);
  font-size: clamp(38px, 4.2vw, 52px);
  margin-bottom: 16px;
}
.member figcaption strong { display: block; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.member figcaption span { color: var(--muted); font-size: 13.5px; }

/* ----- contact.html ----- */
.contact {}
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.contact-info__title { font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 24px; }
.contact-detail { list-style: none; display: flex; flex-direction: column; gap: 17px; }
.contact-detail__k { display: block; font-weight: 600; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.contact-detail__v { font-size: 15.5px; color: var(--ink); line-height: 1.55; }
a.contact-detail__v:hover, .contact-detail__v a:hover { color: var(--accent-deep); }
.contact-next { margin-top: 30px; background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl); padding: clamp(22px, 2.4vw, 30px); }
.contact-next__h { display: block; font-weight: 600; font-size: 18px; letter-spacing: -0.015em; margin-bottom: 12px; }
.contact-next ol { padding-left: 20px; color: var(--muted); font-size: 14.5px; line-height: 1.7; display: flex; flex-direction: column; gap: 6px; }

.form { background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 17px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 600; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted-2); }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px;
  transition: border-color 0.3s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.form__note { color: var(--muted-2); font-size: 12.5px; text-align: center; }
.form__status { display: none; border-radius: var(--radius); padding: 13px 16px; font-size: 14.5px; font-weight: 500; }
.form__status.is-ok { display: block; background: var(--accent); color: var(--ink); }
.form__status.is-err { display: block; background: #c0392b; color: #fff; }
/* Neutral in-flight state. Without this the "Sending..." message inherits the
   display:none above and the form looks like it did nothing. */
.form__status.is-busy { display: block; background: var(--paper-2); border: 1px solid var(--line); color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ----- work.html cards ----- */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.work-card {
  background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl); overflow: hidden;
  transition: transform 0.5s var(--spring), box-shadow 0.4s var(--ease);
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.work-card__link { display: flex; flex-direction: column; height: 100%; }
.work-card__media { aspect-ratio: 4 / 3; background: var(--band); display: flex; align-items: center; justify-content: center; }
.work-card__todo {
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted); border: 1.5px dashed var(--muted-dark); border-radius: 999px; padding: 10px 18px;
}
.work-card__body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.work-card__client { font-weight: 600; font-size: clamp(19px, 1.9vw, 23px); letter-spacing: -0.02em; line-height: 1.2; }
.work-card__result { color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.work-card__more { font-weight: 600; font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: color 0.3s var(--ease); }
.work-card:hover .work-card__more { color: var(--accent-deep); }

/* ----- legal pages ----- */
.legal { max-width: 760px; margin: 0 auto; }
.legal__updated { font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 34px; }
.legal h2 { font-weight: 600; font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 42px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.legal p { margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); border-bottom: 1.5px solid var(--accent); transition: color 0.3s var(--ease); }
.legal a:hover { color: var(--accent-deep); }

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie {
  position: fixed; left: 50%; bottom: 18px; z-index: 200;
  transform: translateX(-50%) translateY(140%);
  width: min(660px, calc(100% - 32px));
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--ink); color: var(--paper);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
  transition: transform 0.55s var(--spring);
}
.cookie.is-in { transform: translateX(-50%) translateY(0); }
.cookie__text { flex: 1 1 320px; font-size: 13.5px; line-height: 1.5; color: var(--muted-dark); }
.cookie__text strong { color: var(--paper); }
.cookie__actions { display: flex; gap: 10px; }
.cookie__btn {
  font-family: var(--f-body); font-weight: 600; font-size: 13.5px;
  border-radius: 999px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.35s var(--spring), background 0.3s var(--ease);
}
.cookie__btn--decline { background: transparent; color: var(--muted-dark); border-color: var(--line-dark); }
.cookie__btn--decline:hover { color: var(--paper); border-color: var(--paper); }
.cookie__btn--accept { background: var(--accent); color: var(--ink); }
.cookie__btn--accept:hover { background: var(--accent-deep); transform: translateY(-2px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
  .hero__collage { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__actions .btn { display: none; }
  .nav.is-open .nav__mobile { display: flex; }
  .section__head--split { flex-direction: column; align-items: flex-start; }
  .about-intro__grid { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .cost-list { grid-template-columns: 1fr; }
  .proc-step { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__tag { text-align: left; }
  .footer__top { align-items: flex-start; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .svc-cards { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__collage { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   PREMIUM HERO (homepage only) — "built to spec"
   Editorial italic-serif accent, a single precise green stroke,
   set on a faint architect's blueprint grid. Everything else quiet.
   Scoped to .hero--home so inner-page heroes are untouched.
   ========================================================= */
:root {
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-spec: "Plus Jakarta Sans", system-ui, sans-serif;
}
.hero--home, .hero--page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 72% at 50% -8%, rgba(140, 204, 74, 0.09), transparent 62%),
    var(--paper);
}
.hero--home { padding: clamp(150px, 20vh, 208px) 0 clamp(56px, 8vw, 104px); }
/* inner-page heroes: same treatment, a touch shorter */
.hero--page { padding: clamp(126px, 15vh, 170px) 0 clamp(34px, 5vw, 58px); }
.hero--page .hero__inner { position: relative; z-index: 1; }
.hero--page .hero__title { color: #111; }
/* faint architect's grid, fading out as it rises */
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
  background-size: clamp(46px, 5vw, 72px) clamp(46px, 5vw, 72px);
  -webkit-mask-image: radial-gradient(112% 82% at 50% 6%, #000 36%, transparent 76%);
          mask-image: radial-gradient(112% 82% at 50% 6%, #000 36%, transparent 76%);
}
.hero--home .hero__inner { position: relative; z-index: 1; max-width: 960px; }

/* availability pill — reads like a spec label */
.hero--home .tag, .hero--page .tag {
  margin-bottom: 0;
  font-family: var(--f-spec);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 20px -14px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding: 9px 16px;
}

/* headline — confident Inter with one editorial serif accent */
.hero--home .hero__big {
  margin-top: 28px;
  font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero__accent {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: inherit;
  color: var(--ink);
  position: relative;
  padding: 0 0.03em;
  white-space: nowrap;
}
.hero__accent::after {
  content: "";
  position: absolute; left: 0.03em; right: 0.03em; bottom: 0.05em;
  height: 0.075em; border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(140, 204, 74, 0.85);
}

.hero--home .hero__lede {
  margin-top: 24px;
  max-width: 50ch;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.66;
  color: var(--muted);
}
.hero--home .hero__actions { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  .hero--home .tag::before, .hero--page .tag::before { animation: none; }
}
@media (max-width: 600px) {
  .hero--home .hero__big { line-height: 1.05; }
  .hero__accent { white-space: normal; }
}

/* =========================================================
   Animated "learn more" arrow — the arrow flies out top-right
   and a fresh one arrives from bottom-left on hover.
   Uses the existing single glyph (opacity hides the jump), so it
   respects each card's own link colour. No markup change needed.
   ========================================================= */
.svc-card__link span[aria-hidden="true"],
.work-card__more span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.4s var(--spring);
  will-change: transform;
}
.svc-card:hover .svc-card__link span[aria-hidden="true"],
.svc-card__link:focus-visible span[aria-hidden="true"],
.work-card:hover .work-card__more span[aria-hidden="true"],
.work-card__link:focus-visible .work-card__more span[aria-hidden="true"] {
  animation: arrowSend 0.55s var(--ease);
}
@keyframes arrowSend {
  0%   { transform: translate(0, 0); opacity: 1; }
  40%  { transform: translate(8px, -8px); opacity: 0; }
  41%  { transform: translate(-8px, 8px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
/* the link text nudges a touch, so the whole control feels alive */
.svc-card__link, .work-card__more { transition: gap 0.35s var(--spring), color 0.3s var(--ease); }
.svc-card:hover .svc-card__link, .work-card:hover .work-card__more { gap: 9px; }
@media (prefers-reduced-motion: reduce) {
  .svc-card:hover .svc-card__link span[aria-hidden="true"],
  .work-card:hover .work-card__more span[aria-hidden="true"] { animation: none; }
}

/* =========================================================
   Cursor-origin radial fill — every button, not just the solid one.
   The accent blooms from the exact point the pointer enters; JS sets
   --mx / --my to that point. Each variant declares its own --fill and
   --fill-fg because the same green cannot work on a black button, a
   white outline button and a deep-green card button at once.
   z-index:-1 + isolation keeps the fill above the background but below
   the label.
   ========================================================= */
.btn, .dc-btn, .pr__cta, .wk-claim {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s var(--spring), color 0.25s var(--ease),
    background 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.btn::before, .dc-btn::before, .pr__cta::before {
  content: "";
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 230%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fill, var(--accent));
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.55s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before,
.dc-btn:hover::before, .dc-btn:focus-visible::before,
.pr__cta:hover::before, .pr__cta:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.btn:hover, .btn:focus-visible,
.dc-btn:hover, .dc-btn:focus-visible,
.pr__cta:hover, .pr__cta:focus-visible { color: var(--fill-fg, var(--ink)); }

/* Per-variant fill. Dark buttons bloom green; light ones bloom dark; card
   buttons bloom the lighter shade of their own tint. */
.btn--solid  { --fill: var(--accent); --fill-fg: var(--ink); }
.btn--outline { --fill: var(--dark); --fill-fg: var(--paper); }
.btn--lemon  { --fill: var(--dark); --fill-fg: var(--paper); }
.btn--green  { --fill: var(--dark); --fill-fg: var(--paper); }
.btn--ghost  { --fill: var(--dark); --fill-fg: var(--paper); }
.dc-btn      { --fill: var(--card-cta-wipe, #333); --fill-fg: var(--paper); }
.pr__cta     { --fill: var(--ink); --fill-fg: var(--paper); }
.pr__cta--solid { --fill: var(--card-cta-wipe, var(--accent)); --fill-fg: var(--paper); }
.wb-book__ghost { --fill: var(--paper); --fill-fg: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .dc-btn::before, .pr__cta::before { transition: opacity 0.2s var(--ease); }
}

/* =========================================================
   Rotating hero phrase — different trade phrases slide through
   the "win work" accent slot. Keeps the italic-serif + green
   underline; the slot width glides so the sentence tail follows.
   A hidden sizer holds the baseline/height; a visually-hidden
   span keeps the accessible headline clean for SEO/screen-readers.
   ========================================================= */
.hero__rotate {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
.hero__rotate::after { display: none; }
.hero__rotate__item::after {
  content: "";
  position: absolute; left: 0.03em; right: 0.03em; bottom: 0.05em;
  height: 0.075em; border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(140, 204, 74, 0.85);
}
.hero__rotate__sizer { visibility: hidden; white-space: nowrap; }
.hero__rotate__item {
  position: absolute; left: 0; bottom: 0;
  white-space: nowrap; line-height: 1;
  opacity: 0;
  transform: translateY(0.64em);
  transition: transform 0.6s var(--spring), opacity 0.4s var(--ease);
}
.hero__rotate__item.is-active { opacity: 1; transform: translateY(0); }
.hero__rotate__item.is-out { opacity: 0; transform: translateY(-0.64em); }

/* visually hidden (accessible text only) */
.vh {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero__rotate__item { transition: opacity 0.25s var(--ease); }
}

/* About page — "Why Built by Boot": content + illustration, two columns,
   no dead space. Typography lifted to match the premium direction. */
.about-why {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.about-why__content .about-intro__statement { margin-bottom: clamp(16px, 2vw, 24px); }
.about-why__media {
  background: var(--paper-2);
  border: 1px solid var(--band);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 3vw, 42px);
  display: flex; align-items: center; justify-content: center;
}
.about-why__media img { width: 100%; max-width: 360px; height: auto; }

/* elevated about-section typography (also lifts "Who we work with" etc.) */
.about-intro__statement {
  font-size: clamp(30px, 3.7vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.about-intro__statement em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: -0.01em;
  color: inherit;
}
.about-intro__body p { font-size: clamp(16px, 1.55vw, 18px); line-height: 1.72; }

@media (max-width: 860px) {
  .about-why { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .about-why__media { order: -1; }
  .about-why__media img { max-width: 300px; }
}

/* alternating illustration side + panel contrast on the grey band */
.about-why--reverse .about-why__media { order: -1; }
.about-block--band .about-why__media { background: var(--paper); }

/* Service-card icons (replace the 01–06 numbers) — CSS mask lets each
   monochrome SVG take the brand colour and adapt per card. */
.svc-card__icon {
  width: 30px; height: 30px;
  display: block;
  background-color: var(--ink);
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.svc-card--dark .svc-card__icon { background-color: var(--accent); }
.svc-card--lime .svc-card__icon { background-color: var(--ink); }

/* Lime illumination on brand illustrations */
.svc-row__art img, .step__media img, .about-why__media img { filter: drop-shadow(0 0 4px rgba(140, 204, 74, 0.45)); }


/* =========================================================
   RESOURCES DROPDOWN (nav)
   ========================================================= */
.nav__has-drop { position: relative; display: flex; align-items: center; }
.nav__drop-toggle {
  font-family: var(--f-body); font-weight: 500; font-size: 14.5px;
  color: var(--muted); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 0; line-height: inherit;
  transition: color 0.3s var(--ease);
}
.nav__has-drop:hover .nav__drop-toggle,
.nav__has-drop:focus-within .nav__drop-toggle,
.nav__drop-toggle.is-active { color: var(--ink); }
.nav__caret { font-size: 9px; transition: transform 0.3s var(--ease); }
.nav__has-drop:hover .nav__caret,
.nav__has-drop:focus-within .nav__caret,
.nav__drop-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__drop {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  min-width: 190px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
  z-index: 120;
}
.nav__drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__has-drop:hover .nav__drop,
.nav__has-drop:focus-within .nav__drop,
.nav__drop.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 11px);
}
.nav__drop a {
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  padding: 9px 13px; border-radius: 10px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__drop a:hover, .nav__drop a[aria-current] { background: var(--paper-2); color: var(--ink); }

/* =========================================================
   BLOG — listing cards
   ========================================================= */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.post-card {
  background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl);
  overflow: hidden; transition: transform 0.5s var(--spring), box-shadow 0.4s var(--ease);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.post-card__link { display: flex; flex-direction: column; height: 100%; }
.post-card__media { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 22px; background: var(--band); }
.post-card__coverword {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.01em; line-height: 1.04;
  color: var(--ink); text-align: center;
}
.post-card:nth-child(3n+1) .post-card__media { background: var(--dark); }
.post-card:nth-child(3n+1) .post-card__coverword { color: var(--paper); }
.post-card:nth-child(3n+2) .post-card__media { background: var(--accent); }
.post-card__body { padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.post-card__title { font-weight: 600; font-size: clamp(19px, 1.9vw, 22px); letter-spacing: -0.02em; line-height: 1.25; }
.post-card__excerpt { color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.post-card__more { font-weight: 600; font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.post-card:hover .post-card__more { color: var(--accent-deep); }
.post-card:hover .post-card__more span[aria-hidden="true"] { animation: arrowSend 0.6s var(--ease); }

/* =========================================================
   GUIDES — library cards
   ========================================================= */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.guide-card {
  background: var(--paper-2); border: 1px solid var(--band); border-radius: var(--radius-xl);
  padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 15px;
  transition: transform 0.5s var(--spring), box-shadow 0.4s var(--ease);
}
.guide-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.guide-card__cover {
  width: 86px; height: 110px; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.guide-card__band { height: 38px; background: var(--accent); flex: none; }
.guide-card__cover-body { flex: 1; padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.guide-card__cover-line { height: 4px; border-radius: 2px; background: var(--band); }
.guide-card__cover-line--short { width: 62%; }
.guide-card__kind { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.guide-card__title { font-weight: 600; font-size: clamp(19px, 1.9vw, 22px); letter-spacing: -0.02em; line-height: 1.2; }
.guide-card__desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.guide-card__btn { align-self: flex-start; margin-top: 4px; }

/* =========================================================
   ARTICLE — single post prose
   ========================================================= */
.article { padding-top: clamp(18px, 4vw, 36px); }
.article__head { max-width: 760px; margin: 0 auto clamp(26px, 4vw, 42px); text-align: center; }
.article__cat { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); }
.article__title { font-weight: 600; font-size: clamp(30px, 4.8vw, 54px); letter-spacing: -0.03em; line-height: 1.06; color: #111; margin: 14px 0 18px; }
.article__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.article__meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--muted); font-size: 14px; }
.article__meta span { position: relative; }
.article__meta span + span::before { content: "·"; position: absolute; left: -13px; }
.article__figure { max-width: 720px; margin: 0 auto clamp(24px, 3.5vw, 38px); }
.article__cover {
  aspect-ratio: 16 / 8; border-radius: var(--radius-xl); display: grid; place-items: center;
  background: var(--dark); padding: 30px;
}
.article__cover .post-card__coverword { color: var(--paper); font-size: clamp(30px, 5vw, 52px); }
.prose { max-width: 720px; margin: 0 auto; }
.prose__lede { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.6; color: var(--ink); margin-bottom: 1.4em; }
.prose p { font-size: 17px; line-height: 1.78; color: #2c2c2c; margin-bottom: 1.35em; }
.prose h2 { font-weight: 600; font-size: clamp(24px, 2.7vw, 32px); letter-spacing: -0.02em; line-height: 1.15; color: #111; margin: 1.7em 0 0.5em; }
.prose h3 { font-weight: 600; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.015em; color: #111; margin: 1.5em 0 0.4em; }
.prose ul, .prose ol { margin: 0 0 1.35em 1.15em; }
.prose li { font-size: 17px; line-height: 1.7; color: #2c2c2c; margin-bottom: 0.5em; padding-left: 0.3em; }
.prose li::marker { color: var(--accent-deep); }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
  font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.35; color: #111;
}
.prose a { color: #111; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prose strong { color: #111; font-weight: 600; }
.article__foot { max-width: 720px; margin: clamp(34px, 5vw, 52px) auto 0; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.article__back { font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 7px; }
.article__back:hover { color: var(--accent-deep); }
.article__byline { color: var(--muted); font-size: 14px; }

@media (max-width: 640px) {
  .article__meta span + span::before { content: ""; }
}

/* =========================================================
   GUIDE DOWNLOAD MODAL (email capture)
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 18, 18, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.55);
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: transform 0.35s var(--spring), opacity 0.25s var(--ease);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); opacity: 1; }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--band); color: var(--muted); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.modal__close:hover { background: var(--sand); color: var(--ink); }
.modal .label { margin-bottom: 12px; }
.modal__title { font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; color: var(--ink); }
.modal__text { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.modal__form { display: flex; flex-direction: column; gap: 12px; }
.modal__form input[type="email"] {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--f-body); font-size: 15px; color: var(--ink); background: var(--paper);
}
.modal__form input[type="email"]:focus { outline: none; border-color: var(--ink); }
.modal__status { font-size: 13.5px; color: var(--accent-deep); font-weight: 500; min-height: 1.1em; margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__panel { transition: none; }
}

/* Article cover image + image-based post cards */
.article__img { display:block; width:100%; height:auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%; border-radius:var(--radius-xl); border:1px solid var(--line); }
.post-card__media:has(img){ padding:0; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; }

/* Featured (latest) blog post — full-width row card */
.post-card--featured { grid-column: 1 / -1; }
.post-card--featured .post-card__link { flex-direction: row; align-items: stretch; }
.post-card--featured .post-card__media { flex: 1 1 54%; aspect-ratio: auto; min-height: 320px; }
.post-card--featured .post-card__body { flex: 1 1 46%; justify-content: center; gap: 12px; padding: clamp(26px, 4vw, 46px); }
.post-card--featured .post-card__title { font-size: clamp(24px, 3vw, 34px); }
@media (max-width: 720px){
  .post-card--featured .post-card__link { flex-direction: column; }
  .post-card--featured .post-card__media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* =========================================================
   Productized "Launch" tier — launch.html / intake.html
   ========================================================= */
.container--narrow { max-width: 780px; }
.section--tint { background: var(--paper-2); }


/* ----- Alt CTA strip on work.html cards ("Want this as your site?") ----- */
.work-card { display: flex; flex-direction: column; }
.work-card__link { flex: 1 1 auto; }
.work-card__claim {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--band);
  font-weight: 600; font-size: 14px; color: var(--ink); background: var(--paper);
  transition: background .2s ease, color .2s ease;
}
a.work-card__claim:hover { background: var(--accent); }
.work-card__claim--claimed { color: var(--muted); cursor: default; }

/* ----- Intake form extras ----- */
.intake-chosen {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 22px;
}
.intake-chosen__k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.intake-chosen__v { font-weight: 700; font-size: 18px; }
.intake-chosen__v a { color: var(--accent); text-decoration: underline; }
.intake-chosen__change { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.intake-chosen--empty { background: #7a2b2b; }
.form__group { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-top: 6px; padding-top: 17px; border-top: 1px solid var(--line); }
.form__group:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.field__hint { display: inline; font-weight: 400; font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field input[readonly] { background: #eceee9; color: var(--muted); cursor: not-allowed; }
.field input[type="file"] { padding: 10px 12px; font-size: 14px; background: var(--paper); }
.field input[type="file"]::file-selector-button { margin-right: 12px; border: 1px solid var(--line); background: var(--paper-2); padding: 7px 12px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.colour-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.colour-row input[type="color"] { width: 52px; height: 46px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.colour-row input[type="text"] { flex: 1; min-width: 180px; }

/* ----- Demo card media + badge (shared, used by work.html & launch.html) ----- */
.work-card__media { position: relative; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.work-card__badge--claimed { background: var(--muted); color: #fff; }

/* ----- Launch tier: price pill + primary "choose" strip ----- */
.work-card__price { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.work-card__claim--buy { background: var(--accent); color: var(--ink); font-weight: 700; }
.work-card__claim--buy:hover { filter: brightness(1.05); }

/* ============================================================
   HERO PRODUCT MOCKUP (Drospecta-style dashboard)
   A decorative "app window" under the hero — bookings/enquiries
   dashboard that doubles as proof of the back-end story.
   ============================================================ */
.hero__app {
  margin: clamp(44px, 6vw, 72px) auto 0;
  max-width: 960px;
  perspective: 1600px;
}
.app {
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(14, 15, 12, 0.42), 0 8px 28px -18px rgba(14, 15, 12, 0.24);
  overflow: hidden;
  text-align: left;
}
.app__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.app__dot { width: 11px; height: 11px; border-radius: 50%; background: #d7dad2; }
.app__dot:nth-child(1) { background: #ff5f57; }
.app__dot:nth-child(2) { background: #febc2e; }
.app__dot:nth-child(3) { background: #28c840; }
.app__url {
  margin-left: 12px; font-family: var(--f-spec); font-size: 12px; color: var(--muted-2);
  letter-spacing: 0.01em;
}
.app__body { display: grid; grid-template-columns: 64px 1fr; min-height: 320px; }
.app__side {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 18px 0; background: var(--dark);
}
.app__logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--accent);
  color: var(--accent-fg); font-weight: 800; font-size: 18px;
  display: grid; place-items: center;
}
.app__nav { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,0.14); }
.app__nav.is-on { background: var(--accent); }
.app__main { padding: clamp(16px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 18px; }
.app__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.app__stat {
  padding: 16px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line);
}
.app__stat-k { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.app__stat-v { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.app__stat-v em { font-style: normal; font-size: 13px; font-weight: 600; color: #2f9e35; margin-left: 6px; }
.app__chart { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 12px); height: 90px; padding: 0 4px; }
.app__chart span {
  flex: 1; height: var(--h); min-height: 8px; border-radius: 6px 6px 0 0;
  background: linear-gradient(to top, #d7f4c4, #bff09a);
}
.app__chart span.is-peak { background: linear-gradient(to top, var(--accent-deep), var(--accent)); }
.app__list { display: flex; flex-direction: column; gap: 10px; }
.app__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--paper);
  border: 1px solid var(--line);
}
.app__av {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--band); color: var(--ink); font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.app__rowtext { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.app__rowtext strong { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.app__rowtext span { font-size: 12px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--band); color: var(--muted);
}
.app__pill--ok { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 560px) {
  .app__stats { grid-template-columns: 1fr; }
  .app__chart { height: 64px; }
  .app__rowtext span { font-size: 11px; }
}

/* ============================================================
   DROSPECTA-STYLE DARK HERO + centered nav + green pill
   ============================================================ */
.btn--green { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-cta); }
.btn--green:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }

/* Inline mockup icons. A CSS property always beats an SVG presentation
   attribute, so the stroke="#..." left on these elements is just a no-CSS
   fallback — the token below is what actually paints. Retone via the token. */
.ic-fg { stroke: var(--accent-fg); }
.ic-ink { stroke: var(--accent-ink); }
.ic-deep { stroke: var(--accent-deep); }

/* --- Nav over the hero ---
   The hero is now LIGHT, so the unscrolled nav keeps the dark logo and dark
   links. The white-logo/white-link rules that used to sit here existed only for
   the old dark hero — reinstating them would make the nav invisible. The hidden
   light-logo <img> the homepage carried for that swap has been removed too, so
   every page's brand markup is now identical. */
.nav--home:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }

/* ============================================================
   NAV — FLOATING GLASS CAPSULE
   Ported from the Calibre Framer template, the same design language as the
   Ellerby Studio demo (`clients/ellerby/`). It replaces the full-width white
   strip: the bar background is gone and the header is now three floating
   objects — brand, a glass capsule holding the links, and the audit CTA.

   WHAT CARRIES OVER FROM CALIBRE (its own numbers):
     - a capsule detached from the page edge, 14px down, links grouped inside it
     - backdrop-filter blur over a translucent fill, with a 1px/3px shadow so it
       lifts off whatever it is over rather than floating weightlessly
     - the whole header slides down on load instead of simply being there

   TWO THINGS DELIBERATELY DO NOT CARRY OVER, because this is a different brand:

   1. THE MATERIAL IS INVERTED. Calibre's capsule is white at 15% and only works
      because its nav never leaves a dark photographic hero. Every page here is
      light — off-white with a soft colour wash behind the homepage hero — and
      white-at-15% over that is invisible. So the fill goes UP rather than down
      (62%, firming to 78% once scrolled) and gains a hairline border. The blur
      is what makes it read as glass rather than as a plain white pill: it picks
      up the hero's green/amber wash as you scroll it past.

   2. THE RADIUS IS THIS SITE'S, NOT CALIBRE'S. Calibre is a 1–6px architectural
      design; this one is pills and 26px cards. A 6px capsule would be the one
      square corner on the whole site. Same object, house geometry.

   The audit CTA stays solid lime. Calibre's right-hand button is glass too, but
   that button is this site's primary conversion element and glass would quietly
   demote it.
   ============================================================ */

/* The bar is gone — .nav is now just a positioning context. */
.nav,
.nav.is-scrolled,
.nav--home:not(.is-scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Slide down on load. Done as an animation rather than a JS-toggled class so
   the header needs no script to arrive — with JS off it still lands. */
@keyframes navDrop {
  from { transform: translateY(-160%); }
  to   { transform: none; }
}
.nav__inner { animation: navDrop 0.9s var(--ease) both; }

/* THE CAPSULE.

   A flat translucent fill does not read as glass on a light page. At rest this
   sits on #f6f5f3 with a soft wash behind it — there is almost nothing for a
   blur to act on, so an early version looked like a plain white pill. Glass on
   light has to be built from edge light and depth rather than from the blur
   alone. Four things do that here, and removing any one of them flattens it:

     1. THE FILL IS A GRADIENT, not one alpha. Real glass is brighter where the
        light hits it, so the top is .58 and the bottom .34.
     2. A SPECULAR TOP EDGE — the inset white line. This is the single strongest
        "this is glass" cue on a light ground; it reads as the lit rim of a
        pane. The inset dark line under it is the underside catching shade.
     3. HIGH BLUR AND SATURATION. 22px/190% is well past "frosted": the
        saturation boost is what makes the homepage hero's green/amber wash
        bloom through the capsule as it scrolls past, and the blur is what
        smears page content passing underneath on every other page.
     4. FOUR STACKED SHADOWS at increasing blur and offset. One shadow reads as
        a border; a ramp of them reads as an object held above the page. This
        is the depth. */
.nav__links {
  padding: 9px 20px;
  border-radius: 999px;
  gap: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid rgba(14, 15, 12, 0.055);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(14, 15, 12, 0.045),
    0 1px 2px rgba(14, 15, 12, 0.04),
    0 6px 16px rgba(14, 15, 12, 0.07),
    0 16px 34px rgba(14, 15, 12, 0.07),
    0 32px 64px rgba(14, 15, 12, 0.05);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Once scrolled it is floating over real content rather than the hero wash, so
   it lifts further: the fill firms up a little to keep the links legible over
   whatever is passing under, and the shadow ramp deepens. */
.nav.is-scrolled .nav__links {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.48));
  border-color: rgba(14, 15, 12, 0.07);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(14, 15, 12, 0.05),
    0 1px 2px rgba(14, 15, 12, 0.05),
    0 8px 20px rgba(14, 15, 12, 0.09),
    0 20px 42px rgba(14, 15, 12, 0.09),
    0 40px 80px rgba(14, 15, 12, 0.06);
}

/* ------------------------------------------------------------
   TEXT ROLL — the capsule's hover, lifted from the same template.
   The label is stacked twice inside a clipped box and the pair slides exactly
   one line, so the word appears to be replaced by itself from below.

   Two things that keep it honest:
     - the box needs a DEFINITE line-height, or the two copies drift apart at
       different font sizes and the outgoing word never fully clears
     - the second copy is aria-hidden in the markup (see bb_roll() in
       partials/config.php), so nothing is announced twice
   ------------------------------------------------------------ */
.roll {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 1.45;
}
.roll > span {
  display: block;
  transition: transform 0.55s var(--ease);
}
.roll > span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(105%);
}
.nav__links a:hover .roll > span:first-child,
.nav__drop-toggle:hover .roll > span:first-child,
.btn--roll:hover .roll > span:first-child { transform: translateY(-105%); }
.nav__links a:hover .roll > span:last-child,
.nav__drop-toggle:hover .roll > span:last-child,
.btn--roll:hover .roll > span:last-child { transform: translateY(0); }

/* The toggle is a flex row (label + caret) and .roll is a block, so without
   this the caret drops onto its own line. */
.nav__drop-toggle { display: inline-flex; align-items: center; gap: 5px; }

@media (prefers-reduced-motion: reduce) {
  .roll > span { transition: none; }
}

/* The Resources dropdown hangs off an item inside the capsule now, so it has to
   clear the capsule's own bottom padding rather than the link's baseline. */
.nav__has-drop:hover .nav__drop,
.nav__has-drop:focus-within .nav__drop,
.nav__drop.is-open { transform: translate(-50%, 19px); }
.nav__drop { transform: translate(-50%, 14px); }
.nav__drop::before { top: -20px; height: 20px; }

/* The burger is the capsule in miniature — same material, so the two read as
   one system on the breakpoint where only one of them is visible. 900px is the
   site's own nav breakpoint (see RESPONSIVE) — it has to be the same number, or
   there is a band where the burger is styled but not yet shown. */
@media (max-width: 900px) {
  .nav__toggle {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34));
    -webkit-backdrop-filter: blur(22px) saturate(190%);
    backdrop-filter: blur(22px) saturate(190%);
    border: 1px solid rgba(14, 15, 12, 0.055);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 1px rgba(14, 15, 12, 0.045),
      0 1px 2px rgba(14, 15, 12, 0.04),
      0 6px 16px rgba(14, 15, 12, 0.07),
      0 16px 34px rgba(14, 15, 12, 0.07);
  }
  /* The drawer stops being a full-bleed sheet and becomes a floating panel on
     the same grid as the capsule, or the header reads as two different designs
     the moment it opens. */
  .nav.is-open .nav__mobile {
    margin: 10px var(--pad) 0;
    padding: 14px 18px 18px;
    border: 1px solid rgba(14, 15, 12, 0.07);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
    -webkit-backdrop-filter: blur(26px) saturate(190%);
    backdrop-filter: blur(26px) saturate(190%);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
      0 10px 24px rgba(14, 15, 12, 0.08),
      0 28px 60px rgba(14, 15, 12, 0.12);
  }
  .nav__mobile a { border-bottom-color: rgba(14, 15, 12, 0.07); }
}

/* Safari on iOS drops backdrop-filter under Low Power Mode, and some Android
   browsers never had it. Without this the capsule becomes 62% white with no
   blur, which is legible but muddy over the hero wash — so go opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__links,
  .nav.is-scrolled .nav__links,
  .nav__toggle,
  .nav.is-open .nav__mobile { background: rgba(255, 255, 255, 0.94); }
}

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

/* ============================================================
   LIGHT CENTRED HERO ("spotlight")
   Replaces the dark two-column hero. Everything scales with clamp() rather
   than snapping at a breakpoint, because the headline is the largest type on
   the site and a hard jump is very visible.
   ============================================================ */
.hero--spot {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--ink);
  text-align: center;
  padding: clamp(120px, 16vh, 176px) 0 clamp(64px, 9vw, 104px);
}
/* Brand glow. Three offset radial washes rather than one, so the colour
   pools unevenly like light rather than reading as a flat circle. Sits
   behind everything and never takes pointer events. */
.hero__glow {
  position: absolute; left: 50%; top: clamp(-80px, -6vw, -40px);
  transform: translateX(-50%);
  width: min(1180px, 130%); height: clamp(420px, 62vw, 720px);
  background:
    radial-gradient(40% 42% at 50% 40%, rgba(140, 204, 74, 0.34) 0%, rgba(140, 204, 74, 0) 72%),
    radial-gradient(34% 38% at 63% 60%, rgba(255, 206, 110, 0.30) 0%, rgba(255, 206, 110, 0) 74%),
    radial-gradient(32% 36% at 37% 64%, rgba(140, 204, 74, 0.20) 0%, rgba(140, 204, 74, 0) 74%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.hero--spot .hero__inner {
  position: relative; z-index: 1;
  max-width: 980px; margin: 0 auto;
  padding-inline: var(--pad);
  display: flex; flex-direction: column; align-items: center;
}
.hero--spot .tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 20px;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  box-shadow: 0 10px 26px rgba(20, 23, 15, 0.06);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.hero--spot .tag::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.hero--spot .hero__big {
  margin: 0; color: var(--ink); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: 1.04; letter-spacing: -0.042em;
  text-wrap: balance;
}
.hero--spot .hero__lede {
  margin: clamp(20px, 2.6vw, 30px) 0 0; max-width: 640px;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6;
  text-wrap: pretty;
}
.hero--spot .hero__actions {
  justify-content: center; gap: 16px;
  margin-top: clamp(30px, 4vw, 44px);
}
/* Price + trust line under the hero buttons.
   Was briefly called .hero__meta, which collided with a leftover "spec strip"
   component (uppercase, --f-spec, dot-separated <li>s) and silently rendered
   this line in capitals, like a second eyebrow label under the "Available for
   new projects" pill. That dead component has since been deleted; the name is
   kept distinct anyway because this is a <p>, not a list.
   Sentence case and quiet on purpose -- it qualifies the enquiry, it does not
   compete with the headline. Only the price is allowed to carry any weight.
   Separators are real elements so the line wraps cleanly on a phone instead of
   stranding a middot at the start of a line. */
.hero__terms {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 7px 13px;
  margin: clamp(20px, 2.4vw, 26px) 0 0;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--muted-2);
}
.hero__terms strong { font-weight: 700; color: var(--ink); }
.hero__terms i {
  display: block; flex: none;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 599.98px) {
  .hero__terms { font-size: 13.5px; gap: 6px 11px; }
}
.btn--ghost {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 12px 28px rgba(20, 23, 15, 0.06);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ============================================================
   SPLIT CTA (.gbtn) — pill + detached arrow disc
   ------------------------------------------------------------
   Two separate shapes, not one button with an icon inside it: a
   pill and a disc that overlap by 4px and read as one object,
   until the disc slides out from under the pill on hover and the
   arrow swings from north-east round to east.

   What sells it is the SVG goo filter on the anchor (#gooBtn,
   defined once in partials/nav.php). Blur the two shapes, crush
   the alpha back to hard edges, then composite the sharp original
   back on top: where the shapes are close their blurs merge, so
   the gap between them stretches like liquid instead of snapping
   open. Ported from madebyshape.co.uk, whose numbers these are —
   36px, 4px overlap, 12px of travel, 0.9s.

   Three things that look like tidying and are not:

   - It cannot be a .btn variant. Every .btn is overflow:hidden so
     the cursor-origin radial fill has something to clip against,
     and that would cut the disc off the moment it moved.
   - No box-shadow anywhere on it. Shadows inside a goo filter get
     blurred into the goo and the button grows a grey halo.
   - Don't delete the <svg> block in partials/nav.php. An element
     whose filter: url() cannot be resolved does not fall back —
     Chrome stops rendering it altogether and the CTA vanishes.
   ============================================================ */
.gbtn {
  display: inline-flex;
  align-items: center;
  filter: url(#gooBtn);
  /* The disc travels 12px and its blur needs somewhere to go; the filter
     region is the default -10%/120% of the bounding box, so the anchor has to
     be free to keep its own size rather than be squeezed by a flex parent. */
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.gbtn__pill,
.gbtn__disc {
  background: var(--accent);
  color: var(--accent-fg);
}
.gbtn__pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 20px;
  border-radius: 999px;
  font-family: var(--f-body); font-size: 16px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap;
}
.gbtn__disc {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; margin-left: -4px;
  border-radius: 50%;
  transition: transform 0.9s cubic-bezier(0.135, 0.9, 0.15, 1);
}
/* The arrow is drawn pointing north-east so that the disc's own 45deg turn
   lands it due east. Rotating a due-east arrow instead sends it south-east,
   which reads as "download" rather than "go". */
.gbtn__disc svg { width: 15px; height: 15px; display: block; }

@media (hover: hover) {
  .gbtn:hover .gbtn__disc,
  .gbtn:focus-visible .gbtn__disc { transform: translateX(12px) rotate(45deg); }
}
.gbtn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 999px; }

/* Dark variant — the nav CTA is dark on every page but the homepage. */
.gbtn--dark .gbtn__pill,
.gbtn--dark .gbtn__disc { background: var(--dark); color: var(--paper); }
.gbtn--dark:focus-visible { outline-color: var(--ink); }

/* Large variant. The replica is 36px, which is right for the nav and too small
   to lead a hero next to a 52px ghost button, so this scales the whole object
   rather than only the pill — overlap and travel included, or the goo reads
   thin at the larger size. */
.gbtn--lg .gbtn__pill { height: 52px; padding: 0 30px; font-size: 17px; }
.gbtn--lg .gbtn__disc { width: 52px; height: 52px; margin-left: -6px; }
.gbtn--lg .gbtn__disc svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .gbtn--lg:hover .gbtn__disc,
  .gbtn--lg:focus-visible .gbtn__disc { transform: translateX(16px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gbtn__disc { transition: none; }
  .gbtn:hover .gbtn__disc, .gbtn:focus-visible .gbtn__disc { transform: none; }
}
/* Proof block: centred and on a light ground, so the dark-hero rules below
   (white text, white rule) have to be overridden rather than inherited. */
@media (max-width: 640px) {
  .hero--spot .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero--spot .hero__actions .btn { justify-content: center; }
  /* The split CTA is two shapes of fixed size, so it cannot stretch with the
     stacked buttons the way a .btn does — centre it instead, or it sits hard
     against the left edge under a centred hero. */
  .hero--spot .hero__actions .gbtn { align-self: center; }
}

/* --- Hero shell (legacy dark hero — retained for inner pages) --- */
.hero--dark {
  position: relative; overflow: hidden;
  color: #fff;
  background-color: #0e0f0c;
  background-image:
    linear-gradient(90deg, rgba(9,10,7,0.90) 0%, rgba(9,10,7,0.66) 42%, rgba(9,10,7,0.34) 72%, rgba(9,10,7,0.20) 100%),
    url('images/hero-bg.avif');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  padding: clamp(116px, 15vh, 168px) 0 clamp(56px, 8vw, 96px);
}
.hero__wrap {
  max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad);
  display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  gap: clamp(16px, 2.4vw, 30px); align-items: center;
}
.hero__col { position: relative; z-index: 2; }
.hero--dark .hero__big {
  color: #fff; font-weight: 700;
  font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.03em;
}
.hero--dark .hero__lede {
  color: rgba(255,255,255,0.70); margin-top: 22px; max-width: 44ch;
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.62;
}
.hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.hero__link { color: #fff; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; transition: color .2s var(--ease); }
.hero__link:hover { color: var(--accent); }

/* --- Dashboard mockup, cropped at the right edge --- */
.hero__media { position: relative; z-index: 1; min-width: 0; align-self: start; margin-top: clamp(-8px, -1vw, -28px); }
.hero__media .app { width: 720px; max-width: none; border-radius: 16px; border: 3px solid #ffffff;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.20),
    0 24px 50px -16px rgba(0, 0, 0, 0.45),
    0 70px 120px -50px rgba(0, 0, 0, 0.75); }
.app__body { grid-template-columns: 178px 1fr; min-height: 408px; }   /* override earlier */
.app__side { background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; padding: 16px 12px; gap: 3px; }
.app__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 12px; padding: 0 6px; }
.app__brand .app__logo { width: 26px; height: 26px; border-radius: 7px; font-size: 14px; }
.app__navitem { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); padding: 8px 10px; border-radius: 8px; }
.app__navitem.is-on { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.app__navitem em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 1px 7px; }
.app__navdot { width: 13px; height: 13px; border-radius: 4px; background: currentColor; opacity: 0.32; flex: none; }
.app__navitem.is-on .app__navdot { background: var(--accent-deep); opacity: 1; }
.app__sidelabel { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 14px 8px 4px; }
.app__main { padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--paper-2); }
.app__search { font-size: 12.5px; color: var(--muted-2); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.app__panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.app__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.app__panel-head strong { font-size: 14px; color: var(--ink); }
.app__legend { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.app__legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.app__legend i.is-green { background: var(--accent-deep); }
.app__legend i.is-amber { background: #f5b100; }
.app__graph { position: relative; }
.app__graph svg { width: 100%; height: 118px; display: block; }
.app__tip { position: absolute; top: 4px; right: 10px; font-size: 11px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; box-shadow: var(--shadow-soft); }
.app__xaxis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); margin-top: 6px; }
.app__table { display: flex; flex-direction: column; gap: 10px; }
.app__tr { display: flex; align-items: center; gap: 11px; }
.app__cell { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.app__cell strong { font-size: 13px; color: var(--ink); font-weight: 600; }
.app__cell span { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 940px) {
  /* Dropping the three-column grid for flex also dropped what was spacing the
     header out, so brand / links / actions packed against the left edge and the
     burger sat next to the logo. The white bar used to disguise it; the floating
     capsule does not. */
  .nav__inner { display: flex; justify-content: space-between; align-items: center; }
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__media { margin-top: 26px; }
  .hero__media .app { width: 100%; }
  .app__body { grid-template-columns: 150px 1fr; }
}
@media (max-width: 560px) {
  .app__side { display: none; }
  .app__body { grid-template-columns: 1fr; }
}

/* ============================================================
   TECH LOGO SLIDER — tools & platforms we build with
   ============================================================ */
.logos-band {
  --logo-gap: clamp(34px, 4vw, 58px);
  background: var(--paper);
  padding: clamp(38px, 5vw, 58px) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Label sits between two hairlines — a quieter, more considered version of
   the plain centred caption it replaces. */
.logos-band__label {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 0 clamp(26px, 3.4vw, 38px); padding: 0 var(--pad);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-2); text-align: center;
}
.logos-band__label::before,
.logos-band__label::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 90px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.logos-band__label::after { background: linear-gradient(90deg, var(--line), transparent); }
.logos-band__label b { font-weight: 700; color: var(--ink); }

.logos {
  position: relative; overflow: hidden;
  /* Wider fade than before, so logos arrive and leave rather than clipping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---- Seamless loop ----
   Spacing lives on the items, NOT as flex `gap` on the track. With `gap`,
   N items have N-1 gaps, so translating -100%/copies lands half a gap short
   and a visible notch appears every loop. Padding makes every item box
   identical, so each set is exactly one third of the track and the reset is
   invisible. Three sets, because one set is ~2400px and two would leave dead
   space at the loop point on a display wider than that. */
.logos__track {
  display: flex; align-items: center; gap: 0; width: max-content;
  animation: logos-scroll 48s linear infinite;
  will-change: transform;
}
.logos__set { display: flex; align-items: center; gap: 0; flex: none; }
.logos:hover .logos__track { animation-play-state: paused; }
@keyframes logos-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.3333%, 0, 0); } }

.logos__item { flex: none; display: flex; align-items: center; padding-inline: calc(var(--logo-gap) / 2); }
/* Mixed-colour logos at flat opacity read as muddy. Greyscale keeps the band
   calm and lets a single logo come forward in full colour on hover. */
.logos__item img {
  height: 26px; width: auto; display: block;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 0.25s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.logos__item img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 22px; }
  .logos__set { flex-wrap: wrap; justify-content: center; row-gap: 22px; }
  /* Without the animation the extra sets would just repeat every logo. */
  .logos__set + .logos__set { display: none; }
  .logos { -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   BENEFITS (6-up grid) + PLANS (3-tier) — Drospecta rhythm
   ============================================================ */
/* ---- Feature cards (replaces .bgrid/.bcard) ----
   Two skins over one markup, both from the design doc: the default is 1A
   (separate bordered tiles); adding `fcards--plate` gives 1B (a single block
   divided by hairlines). The plate reads as one system rather than six
   bolted-on parts, which is literally what the section says — worth trying if
   you want the form to argue the copy's point. */
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fcard {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 24px 30px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.fcard:hover { border-color: var(--line-accent); transform: translateY(-2px); }
.fcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fcard__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--accent); color: var(--accent-fg);
}
.fcard__icon svg { width: 23px; height: 23px; }
.fcard__num { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: #b3b8b0; }
.fcard__title { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 9px; }
.fcard__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* 1B — one plate, hairline-divided cells. The 1px grid gap over a --line
   background is what draws the dividers, so the cells need no borders. */
.fcards--plate {
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.fcards--plate .fcard { border: 0; border-radius: 0; padding: 32px 28px 36px; gap: 16px; }
.fcards--plate .fcard:hover { transform: none; }
.fcards--plate .fcard__icon { width: 42px; height: 42px; border-radius: 10px; }
.fcards--plate .fcard__icon svg { width: 21px; height: 21px; }
.fcards--plate .fcard__num { margin-left: auto; }
.fcards--plate .fcard__title { font-size: 20px; margin-bottom: 8px; }

@media (max-width: 860px) { .fcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .fcards { grid-template-columns: 1fr; }
  /* The plate's radius clips the outer cells; at one column the hairlines
     become simple horizontal rules, which is what the gap already gives us. */
  .fcards--plate .fcard { padding: 26px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) { .fcard, .fcard:hover { transition: none; transform: none; } }

.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); }
.plan--feat { background: var(--dark); border-color: var(--dark); box-shadow: var(--shadow-card); }
.plan--feat .plan__name { color: rgba(255,255,255,0.75); }
.plan--feat .plan__price { color: #fff; }
.plan--feat .plan__price span, .plan--feat .plan__note { color: rgba(255,255,255,0.7); }
.plan--feat .plan__list li { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.12); }
.plan__badge { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--accent); color: var(--accent-fg); padding: 4px 11px; border-radius: 999px; }
.plan__name { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.plan__price { font-size: clamp(30px, 4vw, 42px); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 14px; }
.plan__price span { display: block; font-size: 14px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; margin-top: 7px; }
.plan__note { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 8px; }
.plan__list { list-style: none; margin: 8px 0 26px; padding: 0; }
.plan__list li { font-size: 14px; color: var(--ink); padding: 11px 0 11px 26px; border-top: 1px solid var(--line); position: relative; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-deep); font-weight: 800; }
.plan--feat .plan__list li::before { color: var(--accent); }
.plan .btn { margin-top: auto; }
@media (max-width: 860px) { .plans__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

/* ============================================================
   WHAT WE BUILD — sticky card stack (scroll-stacking panels)
   ============================================================ */
.stack { position: relative; padding-bottom: clamp(16px, 3vw, 32px); }
.stack__card {
  position: sticky;
  top: calc(clamp(84px, 11vh, 118px) + var(--i) * 22px);
  display: grid; grid-template-columns: clamp(80px, 10vw, 132px) 1fr;
  align-items: center; gap: clamp(14px, 3vw, 44px);
  min-height: clamp(280px, 40vh, 360px);
  margin-bottom: clamp(18px, 2.4vw, 28px);
  padding: clamp(26px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 26px 64px -34px rgba(14, 15, 12, 0.30);
}
.stack__card:last-child { margin-bottom: 0; }
.stack__num { font-size: clamp(44px, 8vw, 92px); font-weight: 700; line-height: 0.85; letter-spacing: -0.04em; color: var(--accent-deep); }
.stack__name { font-size: clamp(23px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px; }
.stack__desc { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--muted); max-width: 54ch; margin-bottom: 22px; }
.stack__link { font-family: var(--f-spec); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 7px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.stack__card--dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.stack__card--dark .stack__desc { color: rgba(255, 255, 255, 0.72); }
.stack__card--dark .stack__num { color: var(--accent); }
.stack__card--dark .stack__link { color: #fff; }
.stack__card--green { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.stack__card--green .stack__desc { color: rgba(22, 51, 0, 0.82); }
.stack__card--green .stack__num { color: var(--accent-fg); opacity: 0.5; }
.stack__card--green .stack__link { color: var(--accent-fg); }
@media (max-width: 640px) {
  .stack__card { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .stack__num { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .stack__card { position: static; }
}

/* ============================================================
   WHAT WE BUILD — feature-card styling (tinted, two-col, mockup)
   layered on top of the sticky-stack behaviour
   ============================================================ */
.stack__card {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  background: var(--tint, var(--paper));
  border-color: transparent;
  min-height: clamp(320px, 46vh, 430px);
  padding: clamp(26px, 3.4vw, 52px);
  box-shadow: 0 26px 64px -40px rgba(14, 15, 12, 0.28);
}
.sc__text { max-width: 440px; }
.sc__badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.sc__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-deep); }
.sc__name { font-size: clamp(24px, 2.9vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; color: var(--ink); margin-bottom: 14px; }
.sc__desc { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
.sc__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 14px; padding: 13px 22px; border-radius: var(--btn-radius); transition: transform 0.2s var(--ease), background 0.2s; }
.sc__btn:hover { background: var(--accent-deep); transform: translateY(-2px); }
.sc__media { align-self: center; min-width: 0; }

/* --- shared mockup primitives --- */
.mock { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 18px 44px -28px rgba(14,15,12,0.32); display: flex; flex-direction: column; gap: 10px; }
.mrow, .mslot, .mstatus, .mrank { display: flex; align-items: center; gap: 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.mav { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--band); color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.mtxt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mtxt b { font-size: 13px; color: var(--ink); font-weight: 600; }
.mtxt span { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; background: var(--band); color: var(--muted); flex: none; }
.mpill--ok { background: var(--accent); color: var(--accent-fg); }
.mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mstat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mstat b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.mstat span { font-size: 11.5px; color: var(--muted-2); }
/* browser mock */
.mock--browser { padding: 0; overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d7dad2; }
.mock__bar i:nth-child(1){ background:#ff5f57; } .mock__bar i:nth-child(2){ background:#febc2e; } .mock__bar i:nth-child(3){ background:#28c840; }
.mock__bar span { margin-left: 8px; font-family: var(--f-spec); font-size: 11px; color: var(--muted-2); }
.mock__page { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mpn { display: flex; align-items: center; gap: 10px; }
.mdot { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); flex: none; }
.mln { height: 9px; border-radius: 5px; background: var(--band); flex: 1; }
.mln--sm { max-width: 84px; } .mln--lg { height: 14px; width: 150px; flex: none; }
.mchip { font-size: 11px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.mchip--fill { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.mph { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mpg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mpg span { height: 44px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
/* flow mock */
.mock--flow { align-items: center; text-align: center; }
.mnode { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink); width: 100%; }
.mnode--accent { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.mnode--sm { width: auto; flex: 1; font-size: 12px; padding: 9px 8px; }
.marw { color: var(--muted-2); font-size: 14px; line-height: 1; }
.mnrow { display: flex; gap: 8px; width: 100%; }
/* booking mock */
.mhead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.mhead b { font-size: 14px; color: var(--ink); } .mhead span { font-size: 12px; color: var(--muted-2); }
.mslot { justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ink); }
.mslot--off { color: var(--muted-2); font-weight: 500; }
.mslot--off span { font-size: 11px; }
.mtotal { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 2px; font-size: 13px; color: var(--muted); }
.mtotal b { font-size: 16px; color: var(--ink); }
/* seo mock */
.mpos { font-size: 16px; font-weight: 800; color: var(--accent-deep); width: 30px; flex: none; }
.mup { color: #2f9e35; font-size: 12px; }
.mbars { display: flex; align-items: flex-end; gap: 7px; height: 62px; padding: 8px 4px 0; }
.mbars span { flex: 1; height: var(--h); min-height: 6px; border-radius: 5px 5px 0 0; background: linear-gradient(to top, #d7f4c4, #bff09a); }
.mbars span:last-child { background: linear-gradient(to top, var(--accent-deep), var(--accent)); }
/* care status mock */
.mstatus { justify-content: space-between; }
.mval { font-size: 16px; color: var(--ink); }

@media (max-width: 820px) {
  .stack__card { grid-template-columns: 1fr; gap: 22px; }
  .sc__media { order: 2; }
}

/* --- White space framing around the feature cards (Drospecta-like) --- */
.services .stack { max-width: 1040px; margin-inline: auto; }
.services { background: #e6f2de; }
.stack__card {
  margin-bottom: clamp(30px, 4.5vw, 68px);
  min-height: clamp(300px, 42vh, 400px);
}
.stack__card:last-child { margin-bottom: 0; }

/* --- Feature cards: float on top of the page (white ring + real depth) --- */
.stack__card {
  border: 3px solid #ffffff;
  box-shadow:
    0 2px 6px rgba(14, 15, 12, 0.05),
    0 20px 44px -14px rgba(14, 15, 12, 0.22),
    0 60px 100px -46px rgba(14, 15, 12, 0.40);
}

/* ============================================================
   RESULTS BAND (dark-green + stats + image) + BIG FINAL CTA
   ============================================================ */
.resband { background: #163300; color: #fff; }
.resband__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.resband__title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: #fff; margin-bottom: 20px; }
.resband__title em { font-family: var(--f-display); font-style: normal; font-weight: 700; color: var(--accent); }
.resband__quote { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; color: rgba(255,255,255,0.82); margin-bottom: 28px; max-width: 46ch; }
.resband__stats { display: flex; gap: clamp(24px, 4vw, 54px); margin-top: 36px; flex-wrap: wrap; }
.rstat b { display: block; font-size: clamp(34px, 5vw, 54px); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.rstat span { font-size: 13px; color: rgba(255,255,255,0.58); margin-top: 9px; display: block; }
.resband .label--onDark { color: rgba(255,255,255,0.72); }
.resband__media img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; border-radius: 20px; border: 3px solid var(--accent); box-shadow: 0 44px 90px -44px rgba(0,0,0,0.7); }
@media (max-width: 860px) {
  .resband__inner { grid-template-columns: 1fr; }
  .resband__media { order: -1; }
  .resband__media img { max-height: 300px; }
}

/* Big final CTA with a dashboard peeking up from the bottom */
.cta--big { position: relative; overflow: hidden; padding-bottom: 0; }
.cta--big .label { justify-content: center; }
.cta__title--big { font-size: clamp(36px, 6vw, 74px); line-height: 1.02; letter-spacing: -0.035em; }
.cta__actions--center { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.cta__peek { max-width: 780px; margin: clamp(38px, 5vw, 64px) auto 0; padding: 0 var(--pad); }
.cta__peek .app { width: 100%; border-radius: 16px 16px 0 0; border: 3px solid #fff; border-bottom: none;
  box-shadow: 0 -1px 4px rgba(14,15,12,0.04), 0 -20px 60px -30px rgba(14,15,12,0.30); }
.cta__peek .app__body { min-height: 300px; }

/* ============================================================
   LATEST FROM THE BLOG (article cards)
   ============================================================ */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.post { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.post__thumb { position: relative; display: block; height: 168px; background: var(--tint, var(--band)); }
/* Card thumbnail. The --tint stays behind it as the loading colour, so the
   card never flashes empty white before the image arrives. */
.post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post:hover .post__img { transform: scale(1.03); }
.post__img { transition: transform 0.45s var(--ease); }
.post__thumb { overflow: hidden; }
.post__cat { position: absolute; z-index: 1; top: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: #fff; color: var(--ink); padding: 5px 11px; border-radius: 999px; }
.post__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 24px); flex: 1; }
.post__title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.post__ex { font-size: 14px; line-height: 1.55; color: var(--muted); flex: 1; }
.post__more { font-family: var(--f-spec); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; }
.post:hover .post__more { color: var(--accent-deep); }
.blog__all { text-align: center; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 820px) { .posts { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

/* ============================================================
   SERVICE CARDS (integrated design-component) — support styles
   ============================================================ */
.dc-stack { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.dc-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.72) 100%); pointer-events: none; }
/* Hover goes one step lighter within the card's own family. --card-cta-wipe is
   injected inline on each tinted card (see the CTA colour note in the .hw block);
   #333 is the fallback for any dc-btn not sitting on a tinted card. !important is
   needed because the resting colour is an inline style. */
/* Resting colour now comes from the rule below rather than an inline style, so
   this no longer needs !important to outrank it. */
.dc-btn:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------
   Service card component — extracted from inline styles (2026-08-16).
   These rules are a byte-for-byte lift of what used to sit in style=""
   attributes on each card, so the rendering is unchanged; the point is
   that the six cards, their mobile twins and the services page can now
   share one definition instead of repeating it.
   .dc-card  = desktop, sticky-stacking.   .dc-mcard = mobile twin.
   Modifiers carry only the tint and its CTA pair.
   --------------------------------------------------------------- */
.dc-card {
  border-radius: 32px;
  padding: clamp(26px, 5vw, 58px) clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  min-height: 400px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 30px rgba(17, 17, 17, 0.05);
}
.dc-mcard {
  border-radius: 26px;
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 6px 22px rgba(17, 17, 17, 0.06);
}
.dc-card--green, .dc-mcard--green { --card-cta: #1e3a25; --card-cta-wipe: #2b5133; background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); }
.dc-card--pink,  .dc-mcard--pink  { --card-cta: #4a2226; --card-cta-wipe: #633136; background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); }
.dc-card--amber, .dc-mcard--amber { --card-cta: #4a3221; --card-cta-wipe: #63442e; background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f8eae1 55%, #f6e4d9 100%); }
.dc-card--teal,  .dc-mcard--teal  { --card-cta: #214540; --card-cta-wipe: #2e6159; background: radial-gradient(120% 90% at 15% 0%, #ecf5f3 0%, #e0eeeb 55%, #dbebe8 100%); }
/* Fifth tint, added for the Marram retail demo — that build is strictly
   black-and-white, so a neutral stone is the only one of the family that
   doesn't fight its own screenshot. */
.dc-card--stone, .dc-mcard--stone { --card-cta: #2b2b2b; --card-cta-wipe: #444444; background: radial-gradient(120% 90% at 15% 0%, #f2f2f0 0%, #e9e9e6 55%, #e4e4e0 100%); }

/* Sixth tint, added for the Bramblewood nursery demo. That build's screenshot is
   dominated by its deep-green band, which the --green tint sits too close to;
   a warm butter is the one in the family that complements it instead. */
.dc-card--butter, .dc-mcard--butter { --card-cta: #4a3f21; --card-cta-wipe: #63552e; background: radial-gradient(120% 90% at 15% 0%, #fdf6e3 0%, #f9efd6 55%, #f7ebcd 100%); }

/* Seventh tint, added for the Hollins Heating demo. That build is near-black
   with one hot orange accent, so every warm tint in the family (amber and
   butter especially) reads as a weaker version of its own screenshot. Mist is
   the first cool tint here, and it is what lets the orange sit against
   something instead of next to more of itself. */
.dc-card--mist, .dc-mcard--mist { --card-cta: #23384a; --card-cta-wipe: #32506a; background: radial-gradient(120% 90% at 15% 0%, #eef2f9 0%, #e4ebf5 55%, #dfe7f3 100%); }

/* Eighth tint, added for the Ellerby Studio interiors demo. That build is
   near-black and strictly neutral, so stone would have been the obvious pick
   — except Marram already holds stone and is also monochrome, and two grey
   cards side by side on /work stop reading as two different builds. Heather
   is the family's first violet: still quiet enough not to fight a neutral
   screenshot, but the only tint here that is unmistakably not one of the
   other seven. */
.dc-card--heather, .dc-mcard--heather { --card-cta: #322a47; --card-cta-wipe: #463b63; background: radial-gradient(120% 90% at 15% 0%, #f1eff7 0%, #e8e4f1 55%, #e3deee 100%); }

/* Ninth tint, added for the Coppice restaurant demo. That screenshot is a
   near-black dining room lit entirely by candles and warm bulbs, so it has the
   same problem Hollins has — every warm tint in the family reads as a weaker
   copy of the light already in the picture. The obvious answer is therefore
   mist, and mist is exactly what it cannot have: Hollins is the other
   near-black screenshot on /work, and two dark builds on two cool-blue cards
   stop reading as two different builds, which is the same trap stone and
   heather were kept out of.
   Sage is the family's first OLIVE, and it is the direct complement of
   candlelight rather than a neighbour of it. It is distinct from --green
   because that one is a bright yellow-green sitting under a daylight
   screenshot; this is greyer, deeper and under a black one. Judge the two on
   /work side by side, not in isolation — that is the only comparison that
   matters. */
.dc-card--sage, .dc-mcard--sage { --card-cta: #333d20; --card-cta-wipe: #4a5730; background: radial-gradient(120% 90% at 15% 0%, #e9f0e4 0%, #e1ead9 55%, #dce7d3 100%); }

/* Tenth tint, added for the Kestrel Advisory demo. That build's whole page is
   warm cream #f4eedf, so its screenshot is a single pale warm field — which
   rules out amber, butter AND stone at once: a cream card behind a cream
   screenshot has no edge, and the card stops looking like an object.
   Slate is a cool blue-grey, and it is deliberately next door to mist. That is
   safe here for the reason sage above is not: mist belongs to Hollins, whose
   screenshot is near-black, and a pale-cream picture against a near-black one
   could not be mistaken for the same build whatever the cards behind them do.
   Adjacent tints are fine when the screenshots are opposites; they are not
   fine when the screenshots rhyme. */
.dc-card--slate, .dc-mcard--slate { --card-cta: #2c3644; --card-cta-wipe: #3f4c5f; background: radial-gradient(120% 90% at 15% 0%, #eceef3 0%, #e2e5ed 55%, #dde1ea 100%); }

/* ⚠ THE TINT FAMILY IS NOW EFFECTIVELY FULL. Ten builds, ten tints, and every
   one of the last three had to be argued for against a neighbour rather than
   chosen from open space. An eleventh build should not be given an eleventh
   near-white tint squeezed between two of these — at that point the cards stop
   being distinguishable at thumbnail size and the mechanism itself needs
   changing (deeper tints, or letting a card carry two tones) rather than
   extending. */

/* copy column */
.dc-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.dc-copy--sm { gap: 12px; }
.dc-tag { display: inline-flex; align-items: center; gap: 9px; background: #fff; border-radius: 999px; padding: 8px 17px; font-size: 14px; font-weight: 600; color: #111; }
.dc-tag--sm { gap: 8px; padding: 7px 14px; font-size: 12.5px; }
.dc-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-deep); display: block; }
.dc-dot--sm { width: 6px; height: 6px; }
.dc-title { margin: 0; font-size: clamp(29px, 4.6vw, 44px); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; max-width: 15ch; }
.dc-title--sm { font-size: 30px; line-height: 1.08; max-width: none; }
.dc-text { margin: 0; font-size: clamp(15px, 1.9vw, 17px); line-height: 1.6; color: #4d4d4d; max-width: 34ch; text-wrap: pretty; }
.dc-text--sm { font-size: 15px; line-height: 1.55; max-width: none; }
.dc-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card-cta, #111); color: #fff;
  border-radius: 999px; padding: 17px 30px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  margin-top: 8px; box-shadow: 0 4px 14px rgba(17, 17, 17, 0.14);
}
.dc-btn--block { display: flex; justify-content: center; gap: 8px; padding: 16px 24px; font-size: 15.5px; margin-top: 0; box-shadow: 0 4px 14px rgba(17, 17, 17, 0.15); }

/* mockup shell + its repeating innards */
.dc-mock { background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(17, 17, 17, 0.10); border: 1px solid #e9e9e9; overflow: hidden; }
.dc-mock--sm { border-radius: 12px; box-shadow: 0 8px 22px rgba(17, 17, 17, 0.09); }
.dc-mockhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #f1f1f1; }
.dc-mockhd--wide { gap: normal; padding: 11px 14px; }
.dc-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-top: 1px solid #f4f4f4; }
.dc-rc { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dc-rc--auto { min-width: auto; }
.dc-box { border: 1px solid #ececec; border-radius: 9px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; }
.dc-box--between { justify-content: space-between; gap: normal; }
.dc-cell { border: 1px solid #f0f0f0; border-radius: 7px; padding: 6px 0; text-align: center; }
.dc-tile { border: 1px solid #ededed; border-radius: 9px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dc-tile--sm { padding: 9px 6px; gap: 4px; }
.dc-bar { background: var(--accent); border-radius: 2px; }
.dc-barcol { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.dc-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--accent-fg-dim); width: 104px; flex: none; }
.dc-lbl--sm { font-size: 11px; width: 96px; }
.dc-lbl--mut { color: #b4b4b2; }

/* text sizes that recur across every mockup */
.dc-t  { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.dc-rt { font-size: 11.5px; font-weight: 600; }
.dc-rt--sm { font-size: 11px; }
.dc-rt--xs { font-size: 10px; }
.dc-s  { font-size: 9.5px; color: #9a9a9a; }
.dc-s--lg { font-size: 10.5px; }
.services { background: #ffffff; }
/* Sticky stacking is a desktop affordance. On a phone the cards have nowhere to
   stack into — they just pile up and overlap each other — so they scroll
   normally instead. !important because position:sticky is set inline.
   Card padding / columns / type scale fluidly via clamp() in the markup, so
   there are no breakpoint overrides for those. */
/* Two purpose-built versions of the service cards, never both at once. The
   desktop stack is a two-column layout that needs width to work; the mobile one
   is drawn at phone proportions with its own simplified mockups, so it is a
   swap rather than a reflow. */
.dc-mstack { display: none; }
@media (max-width: 860px) {
  .dc-stack { display: none; }
  .dc-mstack { display: flex; flex-direction: column; gap: 14px; max-width: 440px; margin-inline: auto; }
}
/* Mockup chrome: the secondary nav links are decorative. Once the card is too
   narrow to hold the logo and the CTA side by side they collide, so drop them
   and keep the two elements that carry meaning. */
@media (max-width: 620px) {
  .dc-mock-navlink { display: none; }
}
@media (max-width: 820px) {
  .dc-card { min-height: 0 !important; }
}

/* Layout lives here rather than inline so the media query below can hide it
   without !important. min-width:0 because grid items default to a min-width of
   auto (= min-content), and the mockups' nowrap browser chrome would otherwise
   prop the tracks open past the container. */
.dc-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.dc-compare > * { min-width: 0; }
.dc-compare-cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 54px; flex-wrap: wrap; }

/* Two purpose-built versions of the before/after comparison, never both at
   once. The desktop one is side-by-side and its mockups are drawn at a fixed
   ~426px, so it needs a 940px viewport to hold both columns; the mobile one
   stacks them with its own larger-type mockups. Swapping beats reflowing here —
   squashed browser chrome reads as broken rather than as a website. */
/* Sits under the before/after comparison. The "after" mockup shows an invented
   practice with invented figures; this says so out loud and re-frames it as the
   spec of a real build, so the honesty does sales work instead of costing trust.
   Rendered twice in the markup (desktop .dc-compare and mobile .dc-mcompare)
   because only one of those is ever displayed. */
.dc-note { max-width: 64ch; margin: 44px auto 0; padding: 22px 26px; background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 14px; }
.dc-note__h { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.012em; color: var(--ink); }
.dc-note__p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); text-wrap: pretty; }
.dc-note__p strong { color: var(--ink); font-weight: 600; }

.dc-mcompare { display: none; }
@media (max-width: 939.98px) {
  .dc-compare, .dc-compare-cta { display: none; }
  .dc-mcompare { display: flex; flex-direction: column; gap: 26px; max-width: 440px; margin-inline: auto; }
  .dc-note { margin-top: 0; padding: 20px 22px; }
}

/* =========================================================
   HOW WE WORK — sideways stacking deck (homepage #process)
   The section is 520vh tall and .hw__sticky pins inside it for the whole
   scroll; script.js maps that scroll distance onto the deal-in of the four
   cards (see initHowWeWork). Cards sit absolutely on top of each other and
   are moved by inline transforms from JS, so fallback rules that have to
   beat JS use !important.
   Colours resolve to the shared tokens — the export this came from
   hardcoded a second lime (#a3e05c), which is exactly the drift the token
   block at the top of this file warns about.
   ========================================================= */
.hw { position: relative; height: 520vh; padding-block: 0; }
.hw__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px var(--pad); box-sizing: border-box;
}
.hw__sticky .section__title {
  margin-top: 14px; text-align: center;
  /* Design weight, not the site default of 600 — see the note on
     .design-h below. */
  font-size: clamp(38px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.04em;
}
.hw__sticky .section__intro { margin-top: 16px; text-align: center; max-width: 62ch; }

.hw__deckwrap {
  width: calc(100% + (var(--pad) * 2));
  margin-inline: calc(var(--pad) * -1);
  overflow-x: clip;               /* clip, not hidden — hidden would break the sticky */
  padding: 40px 0 34px;
  display: flex; justify-content: center;
}
.hw__deck { position: relative; width: min(1080px, calc(100% - 80px)); height: clamp(370px, 47vh, 430px); }

.hw__card {
  position: absolute; top: 0; left: 0;
  width: calc(100% - 132px);       /* JS recalculates this from deck width + peek */
  height: 100%; box-sizing: border-box;
  border-radius: 32px;
  padding: 44px 44px 44px 62px;    /* left gutter holds .hw__num */
  display: grid; grid-template-columns: 1fr 1.04fr; gap: 40px; align-items: center;
  overflow: hidden;
  box-shadow: -22px 0 40px -24px rgba(14, 15, 12, 0.24), 0 8px 30px rgba(14, 15, 12, 0.06);
  transform: translate3d(1200px, 0, 0);  /* parked offstage until JS runs */
  will-change: transform;
}
.hw__card--1 { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); }
.hw__card--2 { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); }
.hw__card--3 { background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f8eae1 55%, #f6e4d9 100%); }
.hw__card--4 { background: radial-gradient(120% 90% at 15% 0%, #ecf5f3 0%, #e0eeeb 55%, #dbebe8 100%); }

.hw__num { position: absolute; left: 0; top: 26px; width: 44px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: -0.01em; color: rgba(14, 15, 12, 0.32); }
.hw__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hw__pill { display: inline-flex; align-items: center; gap: 9px; background: var(--paper); border-radius: var(--btn-radius); padding: 8px 17px; font-size: 14px; font-weight: 600; color: var(--ink); }
.hw__pill i { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-deep); display: block; }
.hw__title { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; }
.hw__text { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 34ch; text-wrap: pretty; }

/* ---- Per-card CTA colour ----
   Each card's button is a deep shade of that card's own tint rather than the
   site's flat --dark, so the button belongs to the card it sits on. Cards 1
   and 2 use the SEO Feature Cards hexes verbatim; 3 and 4 are matched to the
   same recipe (hue of the card, S ~37%, L ~21%, hover one step lighter)
   because that set has no amber or teal family to copy from.
   --card-cta is the resting fill, --card-cta-wipe the hover shade. The same
   two properties are injected inline on the tinted .dc-card service cards, so
   both sections run off one system — see the .dc-btn:hover rule below. */
.hw__card--1 { --card-cta: #1e3a25; --card-cta-wipe: #2b5133; }  /* green  — source */
.hw__card--2 { --card-cta: #4a2226; --card-cta-wipe: #633136; }  /* pink   — source */
.hw__card--3 { --card-cta: #4a3221; --card-cta-wipe: #63442e; }  /* amber  — matched */
.hw__card--4 { --card-cta: #214540; --card-cta-wipe: #2e6159; }  /* teal   — matched */

.hw__cta { gap: 9px; }
.hw__cta.btn--solid { background: var(--card-cta); box-shadow: 0 4px 14px rgba(14, 15, 12, 0.14); }
/* The ink-wipe is lime site-wide; on these it takes the card's own lighter
   shade, and the label stays white instead of flipping to ink. */
.hw__cta.btn--solid::before { background: var(--card-cta-wipe); }
.hw__cta.btn--solid:hover,
.hw__cta.btn--solid:focus-visible {
  background: var(--card-cta);
  color: var(--paper);
  box-shadow: var(--shadow-cta-hover);
}

/* ---- Mockup panel, shared by all four cards ---- */
.hw-m { background: var(--paper); border-radius: 14px; border: 1px solid #e9e9e9; box-shadow: 0 12px 34px rgba(14, 15, 12, 0.10); overflow: hidden; }
.hw-m__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f1f1f1; }
.hw-m__hdl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hw-m__hdl--row { flex-direction: row; align-items: center; gap: 8px; }
.hw-m__t { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.hw-m__s { font-size: 9.5px; color: var(--muted-2); }
.hw-m__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-ink); display: block; flex: none; box-shadow: 0 0 0 3px rgba(92, 174, 46, 0.16); }

.hw-m__row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid #f6f6f6; }
.hw-m__row--top { border-bottom: 0; border-top: 1px solid #f4f4f4; padding-block: 9px; }
.hw-m__row--dim { opacity: 0.55; }
.hw-m__ico { width: 22px; height: 22px; border-radius: 6px; background: #eef7e6; color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.hw-m__ico--off { background: #f4f4f4; color: #a8a8a8; }
.hw-m__rc { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.hw-m__rt { font-size: 11.5px; font-weight: 600; }
.hw-m__rs { font-size: 9.5px; color: var(--muted-2); }

.hw-m__ft { border-top: 1px solid #f1f1f1; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fcfcfc; }
.hw-m__fs { font-size: 9.5px; color: var(--muted-2); }
.hw-m__fs--go { color: var(--accent-ink); font-weight: 600; }
.hw-m__fl { font-size: 9.5px; color: var(--ink); font-weight: 600; white-space: nowrap; }

.hw-chip { border-radius: 999px; padding: 4px 10px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; flex: none; }
.hw-chip--done { background: var(--accent); color: var(--accent-fg); }
.hw-chip--soft { border: 1px solid var(--line-accent); background: #f2f9ea; color: #4e7a30; }
.hw-chip--queued { background: #f4f4f4; color: #8a8a8a; }
.hw-chip--out { border: 1px solid #e6e6e6; border-radius: 6px; padding: 4px 8px; font-size: 9.5px; font-weight: 400; letter-spacing: 0; color: #6f6f6f; }

/* card 2 — wireframe thumbnails */
.hw-m__wires { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 10px; }
.hw-m__wire { border: 1px solid #f0f0f0; border-radius: 9px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.hw-m__wt { font-size: 9px; color: var(--muted-2); letter-spacing: 0.06em; font-weight: 600; }
.hw-m__wl { height: 7px; border-radius: 3px; background: #efe4ea; display: block; }
.hw-m__wrow { display: flex; gap: 5px; margin-top: 2px; }
.hw-m__wb { height: 16px; flex: 1; border-radius: 4px; background: #f7f1f4; display: block; }
.hw-m__wb--tall { height: 27px; }
.hw-m__wb--ink { background: var(--ink); }
.hw-m__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid #f4f4f4; }
.hw-m__lt { font-size: 11px; font-weight: 600; }
.hw-m__lv { font-size: 11px; color: #6f6f6f; }

/* card 3 — build progress */
.hw-m__prog { padding: 12px 14px 10px; }
.hw-m__progtop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.hw-m__pv { font-size: 11px; font-weight: 700; letter-spacing: -0.02em; }
.hw-m__bar { height: 7px; border-radius: 999px; background: #f2f2f2; overflow: hidden; }
.hw-m__barfill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* card 4 — stat pair */
.hw-m__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
.hw-m__stat { border: 1px solid #ededed; border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.hw-m__sv { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.hw-m__sn { font-size: 9px; color: var(--muted-2); }
.hw-m__sn--go { color: var(--accent-ink); font-weight: 600; }

/* ---- Progress rail under the deck ---- */
.hw__progress { width: min(1080px, calc(100% - 80px)); }
.hw__rail { position: relative; height: 2px; background: #ececec; border-radius: 999px; }
.hw__fill { position: absolute; inset: 0; background: var(--ink); border-radius: 999px; transform-origin: left center; transform: scaleX(0); }
.hw__ticks { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; font-size: 12px; font-weight: 600; color: #b0b0b0; }
.hw__ticks span { transition: color 0.25s var(--ease); }

/* ---- Fallback: no pinning below 980px, or with reduced motion ----
   The deck needs both height and horizontal room to read; on a phone it
   would be a five-screen scroll to reach four cards. Here it degrades to an
   ordinary vertical stack and the JS bails out (see initHowWeWork). */
@media (max-width: 979.98px), (prefers-reduced-motion: reduce) {
  .hw { height: auto; padding-block: var(--sect); }
  /* padding-inline stays at var(--pad) — it is the page gutter once the
     deckwrap stops bleeding past it. */
  .hw__sticky { position: static; height: auto; }
  .hw__deckwrap { width: auto; margin-inline: 0; padding: 34px 0 0; overflow: visible; }
  .hw__deck { position: static; width: 100%; max-width: 620px; height: auto; display: flex; flex-direction: column; gap: 20px; }
  .hw__card {
    position: static; width: auto !important; height: auto;
    transform: none !important;
    grid-template-columns: 1fr; gap: 26px;
    padding: 32px 26px 32px 44px;
  }
  .hw__num { top: 14px; left: 4px; }
  .hw__title, .hw__text { max-width: none; }
  .hw__progress { display: none; }
}
@media (max-width: 520px) {
  .hw__card { border-radius: 24px; padding: 26px 18px 26px 36px; }
  .hw-m__wires, .hw-m__stats { grid-template-columns: 1fr; }
}

/* =========================================================
   PRICING CARDS (homepage #plans)
   Three tiers on the same tinted-card system as the service cards and the
   how-we-work deck: pale green for the entry tier, pale pink for the retainer,
   and a saturated --accent card for the one we want picked. The middle card's
   CTA follows the per-card rule (--card-cta, a deep shade of its own family)
   rather than the flat black the export shipped, so it matches every other
   card CTA on the page.
   Replaces the old .plan / .plans__grid block above, which is now unused.
   ========================================================= */
/* ---- Heading weight for design-derived sections ----
   Every component supplied as a design sets its headings at weight 800 with
   tighter tracking. The site's own .section__title is 600, so reusing it here
   rendered these blocks noticeably lighter than the design. These rules put the
   supplied weight back; the <em> follows the heading rather than dropping to
   700, which would read as lighter than the text around it. */
.plans .section__title {
  font-size: clamp(34px, 5.6vw, 56px); font-weight: 800; letter-spacing: -0.038em;
}
.plans .section__title em,
.hw__sticky .section__title em,
.wb-intro .section__title em,
.wb-problem__title em,
.wb-book__title em { font-weight: inherit; }

.pr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 22px; align-items: start;
}

.pr__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 24px;
  border-radius: 32px;
  padding: clamp(28px, 3.4vw, 38px) clamp(24px, 3vw, 34px) clamp(26px, 3vw, 32px);
  box-shadow: 0 8px 30px rgba(14, 15, 12, 0.05);
}
.pr__card--ready { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); }
.pr__card--care  { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); }
/* Retoned onto --accent. The export used #a3e05c, the stray second lime the
   token block at the top of this file warns about. */
.pr__card--feat {
  background: linear-gradient(160deg, #9bd75c 0%, var(--accent) 46%, var(--accent-deep) 100%);
  box-shadow: 0 20px 46px rgba(124, 194, 66, 0.34);
  --card-cta: #1e3a25; --card-cta-wipe: #2b5133;
}
/* Same bottom fade the service cards use, so the family reads as one set. The
   CTA is lifted above it with z-index. */
.pr__card--ready::after,
.pr__card--care::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.72) 100%);
  pointer-events: none;
}

.pr__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pr__tagrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pr__tag {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); border-radius: 999px; padding: 8px 17px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink);
}
.pr__tag i { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-deep); display: block; }
.pr__tag--onLime { background: rgba(255, 255, 255, 0.9); color: var(--accent-fg); }
.pr__tag--onLime i { background: #2f6b12; }
.pr__badge {
  background: var(--accent-fg); color: #c8f09a; border-radius: 999px;
  padding: 8px 15px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
}

.pr__price { font-size: clamp(44px, 5vw, 54px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.pr__price span { font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pr__note { font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* Payment terms sit directly under the price so the headline figure never
   appears without the "or spread it" alternative next to it. */
.pr__pay { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
.pr__pay svg { flex: none; }

/* Build timings, carried over from the retired process.html pricing section so
   the site still answers "how long does it take" somewhere. */
.pr__time { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted-2); }
.pr__time svg { flex: none; color: var(--accent-deep); }
.pr__time--onLime { color: var(--accent-fg-dim); }
.pr__time--onLime svg { color: var(--accent-fg); }
.pr__card--feat .pr__price { color: var(--accent-fg); }
.pr__card--feat .pr__price span { color: var(--accent-fg-dim); }
.pr__card--feat .pr__note { color: #28500f; }

/* Feature list sits in its own white panel so it reads as the contents of the
   tier rather than more card. */
.pr__list {
  list-style: none; margin: 0; padding: 4px 18px;
  background: var(--paper); border: 1px solid #e9ece6; border-radius: 16px;
  box-shadow: 0 4px 16px rgba(14, 15, 12, 0.04);
}
.pr__card--care .pr__list { border-color: #f0e6ea; }
.pr__list--feat { border: 0; box-shadow: 0 8px 22px rgba(20, 51, 10, 0.14); }
.pr__list li {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid #f2f2f0;
  font-size: 14.5px; font-weight: 500; color: #2f3330;
}
.pr__card--care .pr__list li { border-bottom-color: #f4f2f2; color: #332f30; }
.pr__list li:last-child { border-bottom: 0; }
.pr__list li svg { flex: none; color: var(--accent-deep); }
.pr__list--feat li { font-weight: 600; color: #1c2a17; }
.pr__list--feat li svg { color: var(--accent-ink); }

.pr__cta {
  position: relative; z-index: 1;   /* above the bottom fade */
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--paper); color: var(--ink);
  border: 1px solid #dfe4da; border-radius: 999px;
  padding: 16px 26px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  transition: background 0.3s var(--ease), transform 0.45s var(--spring);
}
.pr__cta:hover { transform: translateY(-2px); }
.pr__card--care .pr__cta { border-color: #ecdfe3; }
.pr__card--care .pr__cta:hover { background: #fdf7f9; }
.pr__cta--solid {
  background: var(--card-cta); color: var(--paper); border-color: transparent;
  padding: 17px 28px; font-size: 16px;
  box-shadow: 0 6px 18px rgba(20, 51, 10, 0.28);
}


.pr__trust {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 34px; flex-wrap: wrap; text-align: center;
  font-size: 15px; color: var(--muted);
}
.pr__trust svg { flex: none; color: var(--accent-deep); }

/* The featured card lifts out of the row — only worth doing while the three
   are actually side by side. */
@media (min-width: 1000px) {
  .pr__card--feat { margin-top: -14px; }
}

/* =========================================================
   WHAT WE BUILD page (services.html)
   Page-specific sections only. The six service cards and the pricing
   cards come from the shared .dc-* / .pr__ components above, so this
   block covers just the hero, the problem list, the four steps and the
   closing panel.
   ========================================================= */
.wb-hero { padding-block: clamp(56px, 8vw, 100px) clamp(40px, 5vw, 64px); }
.wb-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* Split hero: copy left, a visual argument right. Collapses to one column
   before the visual gets too narrow to read. */
.wb-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) {
  .wb-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .wb-hero--split .wb-hero__title { font-size: clamp(38px, 4.4vw, 56px); }
}

/* ---- Services hero: one enquiry, and what it sets off ----
   Built from the same mockup vocabulary as the cards further down the page,
   so the hero reads as a smaller instance of the thing being sold. */
.hviz { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 420px; width: 100%; justify-self: end; }
.hviz__card { background: var(--paper); border: 1px solid #e9e9e9; border-radius: 16px; padding: 16px 18px; box-shadow: 0 14px 40px rgba(14, 15, 12, 0.10); }
.hviz__row { display: flex; align-items: center; gap: 9px; }
.hviz__t { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.hviz__time { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.hviz__job { margin: 9px 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.hviz__meta { margin: 0; font-size: 11.5px; color: var(--muted-2); }
.hviz__pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-ink); flex: none; box-shadow: 0 0 0 0 rgba(92, 174, 46, 0.5); animation: hvizPulse 2.4s var(--ease) infinite; }
@keyframes hvizPulse {
  0%   { box-shadow: 0 0 0 0 rgba(92, 174, 46, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(92, 174, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 174, 46, 0); }
}
/* The wire is the causal link — it draws downward, then the outcomes land. */
.hviz__wire { height: 34px; display: flex; justify-content: center; }
.hviz__wire span { width: 2px; height: 100%; background: linear-gradient(var(--accent) 0%, var(--line-accent) 100%); transform-origin: top center; animation: hvizDraw 1.1s var(--ease) both; }
@keyframes hvizDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.hviz__outs { display: flex; flex-direction: column; gap: 8px; }
.hviz__out {
  display: flex; align-items: center; gap: 11px;
  background: var(--paper); border: 1px solid #e9e9e9; border-radius: 13px;
  padding: 11px 14px; box-shadow: 0 8px 22px rgba(14, 15, 12, 0.06);
  animation: hvizIn 0.6s var(--spring) both; animation-delay: calc(0.9s + var(--d, 0s));
}
@keyframes hvizIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.hviz__ico { width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; flex: none; }
.hviz__oc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hviz__oc b { font-size: 13px; font-weight: 600; }
.hviz__oc i { font-style: normal; font-size: 11px; color: var(--muted-2); }
.hviz__foot { margin: 14px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }

/* ---- Work hero: index of the builds ----
   Replaces the fanned screenshot stack this hero used to carry. That was a
   decorative duplicate of the cards further down — the same four shots twice on
   one page, tilted. This earns its place instead by being navigation: a contents
   list for a long page, which shows one screenshot at a time on hover rather
   than a pile of them at once. */
.wk-index { margin-top: clamp(30px, 4.5vw, 52px); }
/* The index jumps to these cards and the nav is sticky, so without this the
   card lands underneath it. There is no site-wide scroll-margin to inherit. */
.wk-card { scroll-margin-top: clamp(88px, 11vw, 112px); }
.wk-index__cap {
  display: flex; justify-content: space-between; gap: 16px; margin: 0 0 2px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2); padding-bottom: 13px; border-bottom: 1.5px solid var(--ink);
}
.wk-ix {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0 clamp(14px, 2vw, 26px);
  padding: clamp(15px, 2vw, 20px) 0;
  border-bottom: 1px solid var(--line); color: inherit;
  transition: background-color 0.3s var(--ease), padding-inline 0.35s var(--ease);
}
.wk-ix:hover, .wk-ix:focus-visible { background: var(--paper-2); padding-inline: 14px; }
/* Positioned siblings later in the DOM would otherwise paint over the preview,
   which overhangs the row it belongs to. */
.wk-ix:hover, .wk-ix:focus-within { z-index: 4; }
.wk-ix__n { font-size: 12px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.wk-ix__name { font-size: clamp(21px, 2.7vw, 31px); font-weight: 800; letter-spacing: -0.032em; line-height: 1.14; }
/* The preview lands where the sector label sits, so the label yields to it
   rather than being half-covered. */
.wk-ix__sector { font-size: 14px; color: var(--muted-2); transition: opacity 0.25s var(--ease); }
.wk-ix:hover .wk-ix__sector, .wk-ix:focus-visible .wk-ix__sector { opacity: 0; }
.wk-ix__go {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid var(--line); font-size: 13px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.35s var(--ease);
}
.wk-ix:hover .wk-ix__go, .wk-ix:focus-visible .wk-ix__go {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg); transform: rotate(45deg);
}
.wk-ix__shot {
  position: absolute; right: clamp(84px, 11vw, 140px); top: 50%; width: 204px; height: auto;
  border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-card);
  background: var(--paper); opacity: 0; pointer-events: none;
  transform: translateY(-50%) translateY(9px) scale(0.94) rotate(-2.5deg);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}
.wk-ix:hover .wk-ix__shot, .wk-ix:focus-visible .wk-ix__shot {
  opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg);
}

@media (max-width: 860px) {
  /* No hover on touch, so the preview would never be seen — drop it and let the
     sector sit under the name instead of fighting it for width. */
  .wk-ix { grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px clamp(12px, 3vw, 18px); }
  .wk-ix__n { grid-row: 1 / span 2; align-self: start; padding-top: 6px; }
  .wk-ix__name { grid-column: 2; grid-row: 1; }
  .wk-ix__sector { grid-column: 2; grid-row: 2; }
  .wk-ix__go { grid-column: 3; grid-row: 1 / span 2; }
  .wk-ix__shot { display: none; }
  .wk-ix:hover .wk-ix__sector, .wk-ix:focus-visible .wk-ix__sector { opacity: 1; }
}

@media (max-width: 939.98px) {
  .hviz { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hviz__pulse, .hviz__wire span, .hviz__out { animation: none; }
  .hviz__out { opacity: 1; transform: none; }
  .wk-ix, .wk-ix__go, .wk-ix__shot { transition: none; }
}
.wb-hero__title { margin: 0; font-size: clamp(38px, 6.4vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.042em; max-width: 17ch; text-wrap: balance; }
.wb-hero__lead { margin: 0; font-size: clamp(16px, 2.1vw, 20px); line-height: 1.6; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.wb-hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
/* Sector list — dot-separated rather than a row of pills, so it reads as
   context under the headline instead of competing with the CTAs. */
.wb-sectors { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 14.5px; color: #7a7a78; font-weight: 500; }
.wb-sectors i { width: 4px; height: 4px; border-radius: 999px; background: #d8d8d5; display: block; }

.wb-problem { padding-block: clamp(40px, 5vw, 64px); }
.wb-problem__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.wb-problem__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* Sizes and weights below are the supplied design's, not .section__title's. */
.wb-problem__title { max-width: 16ch; text-align: left; font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.wb-problem__copy .section__intro { max-width: 46ch; }

.wb-pains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wb-pain { background: #f7f7f6; border: 1px solid #ebebe9; border-radius: 18px; padding: 22px 24px; display: flex; align-items: flex-start; gap: 16px; }
/* Icon marker, same treatment as the step cards: stroked, no fill, tinted
   rather than boxed. Replaced the old 01-04 numbers on the inner pages; the
   homepage still numbers its deck and benefits grid. */
.wb-pain__i { display: flex; align-items: center; justify-content: center; flex: none; color: var(--accent-ink); padding-top: 1px; }
.wb-pain__c { display: flex; flex-direction: column; gap: 5px; }
.wb-pain__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.wb-pain__d { font-size: 15px; line-height: 1.55; color: #6f6f6d; }

/* Section intro that sits left-aligned rather than centred. */
.wb-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.wb-intro .section__title { text-align: left; max-width: 20ch; font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.wb-intro .section__intro { max-width: 56ch; }

/* Ready-to-go boundary note (/work, under the four steps). Left-aligned to sit
   with .wb-intro above it rather than centred like .pr__trust. */
.wk-scope { margin-top: clamp(28px, 4vw, 42px); }
.wk-scope__t { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; }
.wk-scope__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wk-scope__col {
  padding: 22px 22px 20px; border-radius: 18px;
  background: var(--paper-2); border: 1px solid var(--line);
}
/* The way onward is the point of this block, so it is the one that carries the
   accent rather than sitting level with the two lists of facts. */
.wk-scope__col--next { background: #f3f9ec; border-color: var(--line-accent); }
.wk-scope__h {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2);
}
.wk-scope__col--next .wk-scope__h { color: var(--accent-ink); }
.wk-scope__col p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted); }
.wk-scope__col a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .wk-scope__grid { grid-template-columns: 1fr; } }

.wb-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.wb-step { border-radius: 26px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 210px; }
.wb-step svg { margin-bottom: 2px; }
.wb-step__n { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.wb-step__t { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.wb-step__d { font-size: 15px; line-height: 1.55; }
/* Each step borrows one of the four card tints, and its icon + label take a
   deep shade of that tint — the same rule the card CTAs follow. */
.wb-step--green { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); color: #4e7a30; }
.wb-step--pink  { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); color: #8a4a63; }
.wb-step--amber { background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f8eae1 55%, #f6e4d9 100%); color: #8a5a23; }
.wb-step--teal  { background: radial-gradient(120% 90% at 15% 0%, #ecf5f3 0%, #e0eeeb 55%, #dbebe8 100%); color: #2f6b5f; }
.wb-step__t { color: var(--ink); }
.wb-step__d { color: #3f4a3d; }
.wb-step--pink .wb-step__d  { color: #4a3f43; }
.wb-step--amber .wb-step__d { color: #4a4038; }
.wb-step--teal .wb-step__d  { color: #38443f; }

.wb-book { padding-block: 0 clamp(52px, 7vw, 90px); }
.wb-book__panel { background: var(--dark); border-radius: 36px; padding: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.wb-book__title { max-width: 20ch; font-size: clamp(30px, 5vw, 50px); font-weight: 800; letter-spacing: -0.038em; text-wrap: balance; }
.wb-book__lead { margin: 0; font-size: clamp(15px, 2vw, 18px); line-height: 1.6; color: var(--muted-dark); max-width: 52ch; text-wrap: pretty; }
.wb-book__cta { justify-content: center; }
.wb-book__ghost { border: 1px solid #3a3a38; color: var(--paper); }


@media (max-width: 620px) {
  .wb-sectors { gap: 12px; font-size: 13.5px; }
  .wb-pain { padding: 18px 18px; gap: 12px; }
}

/* =========================================================
   WORK page (work.html)
   Reuses the .dc-card tinted-card component, but these cards stack in a
   plain column rather than the sticky deck the services page uses — three
   projects don't need a scroll mechanic, and each one carries a screenshot
   instead of a UI mockup.
   ========================================================= */
.wk-grid { display: flex; flex-direction: column; gap: 20px; }
.wk-card { align-items: center; }

/* Feature list — what is actually in that build. */
.wk-under { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.wk-under li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: #3f4a3d; }
.wk-under li svg { flex: none; color: var(--card-cta, var(--accent-ink)); }

/* Screenshot sits in the same white frame the mockups use, so the card
   family stays consistent whether it holds a UI or a photo. */
.wk-shot { margin: 0; background: var(--paper); border: 1px solid #e9e9e9; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(14, 15, 12, 0.10); }
.wk-shot img { display: block; width: 100%; height: auto; }

/* Honest note about there being no client case studies yet. */
.wk-soon { padding-block: 0; }
.wk-soon__inner {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  max-width: 1080px; margin: 0 auto; text-align: center; flex-wrap: wrap;
  background: var(--paper-2); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 20px 26px;
  font-size: 15px; color: var(--muted);
}
.wk-soon__inner svg { flex: none; color: var(--accent-ink); }

/* Buy + preview pair. The primary action is claiming the build; the live demo
   sits beside it as a text link so the card reads as an offer, not a gallery. */
.wk-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.wk-claim { margin-top: 0; }
.wk-demo { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid transparent; }
.wk-demo:hover { border-bottom-color: currentColor; }


/* work.html's four steps reuse the .wb-step cards from the services page,
   so the two "how it works" blocks are the same component. */

@media (max-width: 720px) {
  .wk-under { grid-template-columns: 1fr; }
  .wk-ctas { gap: 14px; }
}

/* =========================================================
   INTAKE form (intake.html)
   The £850 flow's only step, so it is styled to match the rest of the
   site rather than the old form page it grew out of: four numbered
   panels instead of one long column, and the same card/­accent language
   used everywhere else.
   ========================================================= */
.ik-terms {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--muted);
}
.ik-terms__price { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.ik-terms__sep { width: 4px; height: 4px; border-radius: 999px; background: #d8d8d5; display: block; }

/* Which demo is being customised — reads as a receipt line, not a form field. */
.intake-chosen {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%);
  border-radius: 18px; padding: 18px 22px; margin-bottom: 26px;
}
.intake-chosen__k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-fg-dim); }
.intake-chosen__v { font-size: 18px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.intake-chosen__change { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--accent-fg); border-bottom: 1px solid currentColor; }
/* No demo in the URL: drop the green, since nothing has been chosen yet. */
.intake-chosen--empty { background: var(--paper-2); border: 1px dashed var(--line); }
.intake-chosen--empty .intake-chosen__k { color: var(--muted-2); }

.ik-group {
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--paper); padding: 26px clamp(18px, 3vw, 30px) 28px;
  margin: 0 0 18px;
}
.ik-group__head {
  display: flex; align-items: center; gap: 12px; padding: 0;
  font-size: 21px; font-weight: 800; letter-spacing: -0.028em; color: var(--ink);
  margin-bottom: 18px;
}
.ik-group__i { display: flex; align-items: center; justify-content: center; flex: none; color: var(--accent-ink); }
/* The panel owns the spacing, so the old bottom rule on group headings goes. */
.ik-group .form__group { display: none; }

@media (max-width: 620px) {
  .ik-terms { gap: 10px; font-size: 13.5px; }
  .intake-chosen__change { margin-left: 0; }
}

/* =========================================================
   CONTACT page (contact.html) — two intents, one form
   The nav CTA arrives with ?intent=audit, every "Start a project"
   button with ?intent=project; the choice cards switch between them.
   Reuses .ik-group panels from the intake form so the two form pages
   are visibly the same thing.
   ========================================================= */
.ct-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 940px) { .ct-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); } }

/* Intent switch */
.ct-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-bottom: 26px; }
.ct-pick__opt {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 17px 19px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.35s var(--spring);
}
.ct-pick__opt:hover { transform: translateY(-2px); border-color: var(--line-accent); }
/* Selected state reuses the green card tint, so it reads as "this is the one". */
.ct-pick__opt.is-on { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); border-color: var(--line-accent); }
.ct-pick__i { width: 34px; height: 34px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--accent-ink); border: 1px solid var(--line); }
.ct-pick__opt.is-on .ct-pick__i { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.ct-pick__c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-pick__c b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.ct-pick__c i { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--muted-2); }

/* Checkbox grids — used by both intents */
.ck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 9px; }
.ck { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 14px; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.ck:hover { border-color: var(--line-accent); }
.ck input { accent-color: var(--accent-deep); width: 16px; height: 16px; flex: none; }
.ck:has(input:checked) { background: #f2f9ea; border-color: var(--line-accent); }

/* Sidebar */
.ct-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
@media (max-width: 939.98px) { .ct-side { position: static; } }
.ct-card { display: flex; flex-direction: column; gap: 7px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.ct-card__h { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.ct-card__v { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.ct-card__v:hover { color: var(--accent-ink); }
.ct-card__s { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 5px; }
.ct-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ct-steps li::marker { color: var(--accent-ink); font-weight: 700; }

/* The disabled fieldset is hidden outright, not greyed out. */
.ik-group[hidden] { display: none; }

/* =========================================================
   ABOUT page (about.html)
   Reuses .dc-card for the three story blocks and .wb-pain for the four
   values, so the page is assembled from the shared set rather than
   styled from scratch. Only the studio-facts card and the team grid
   are page-specific.
   ========================================================= */

/* Hero facts card. Deliberately facts, not stats — every line is
   verifiable. The unverified figures stay in the disabled stats block. */
.ab-card {
  width: 100%; max-width: 400px; justify-self: end;
  background: var(--paper); border: 1px solid #e9e9e9; border-radius: 18px;
  box-shadow: 0 16px 44px rgba(14, 15, 12, 0.10); overflow: hidden;
}
.ab-card__hd { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid #f1f1f1; }
.ab-card__t { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; }
.ab-card__s { margin-left: auto; font-size: 11.5px; color: var(--muted-2); }
.ab-card__row { display: flex; align-items: baseline; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #f6f6f6; }
.ab-card__k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); width: 74px; flex: none; }
.ab-card__v { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.ab-card__ft {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 18px; background: #f2f9ea;
  font-size: 12.5px; font-weight: 700; color: #4e7a30; letter-spacing: 0.02em;
}

/* Story blocks: the illustration takes the mockup slot of a .dc-card. */
/* The three About cards used to be copy + a stock illustration. The illustrations
   were Streamline stock and painted #c6f24e, the second lime this brief bans, so
   they went (2026-08-17). .dc-card is an auto-fit grid, so with one child it
   collapses to a single full-width column on its own — but min-height: 400px was
   sized for the artwork, so without this the cards keep a hole where it was. */
.ab-name .dc-card, .ab-who .dc-card, .ab-origin .dc-card { min-height: 0; }
/* .dc-card::after is a 96px white fade that softens the bottom of cards holding
   a tall mockup. With no artwork the copy runs into it and the last line renders
   at about 36% washed out, so it comes off for these three. */
.ab-name .dc-card::after, .ab-who .dc-card::after, .ab-origin .dc-card::after { content: none; }
.ab-name, .ab-who, .ab-origin { padding-block: clamp(18px, 2.5vw, 30px); }
/* Two paragraphs per card, so the copy column needs its own rhythm. */
.ab-name .dc-copy, .ab-who .dc-copy, .ab-origin .dc-copy { gap: 16px; }
.ab-name .dc-text, .ab-who .dc-text, .ab-origin .dc-text { max-width: 46ch; }

/* Team. Monogram rather than a photo — a placeholder that doesn't look
   like one. Swap for real headshots when they exist. */
.ab-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }

/* Team card. The whole card is an <a>, so the target is the card, not a link
   buried in it. Tinted from the same four-tint family as .dc-card / .pr__card,
   and the CTA takes the card's own --card-cta — never a hardcoded hex. */
.ab-member {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 22px;
  text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ab-member--green { --card-cta: #1e3a25; background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); }
.ab-member--pink  { --card-cta: #4a2226; background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); }
.ab-member--amber { --card-cta: #4a3221; background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f8eae1 55%, #f6e4d9 100%); }
.ab-member--teal  { --card-cta: #214540; background: radial-gradient(120% 90% at 15% 0%, #ecf5f3 0%, #e0eeeb 55%, #dbebe8 100%); }
.ab-member:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 15, 12, 0.10); }
.ab-member:focus-visible { outline: 2px solid var(--card-cta); outline-offset: 3px; }
.ab-member__mono {
  width: 62px; height: 62px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
}
.ab-member__mono--green { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e2efd9 100%); color: #1e3a25; }
.ab-member__mono--pink  { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f3dde6 100%); color: #4a2226; }
.ab-member__mono--amber { background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f6e4d9 100%); color: #4a3221; }
.ab-member__mono--teal  { background: radial-gradient(120% 90% at 15% 0%, #ecf5f3 0%, #dbebe8 100%); color: #214540; }

/* Real headshot. Same footprint as the monogram so a card looks right
   whether or not that person's photo exists yet. The white ring lifts the
   circle off the card's tint. */
.ab-member__photo {
  width: 72px; height: 72px; border-radius: 999px; flex: none;
  object-fit: cover; display: block;
  background: var(--band);
  margin-bottom: 14px;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(14, 15, 12, 0.10);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.ab-member:hover .ab-member__photo { transform: scale(1.06); }
.ab-member__name { font-size: 18px; font-weight: 800; letter-spacing: -0.025em; }
.ab-member__role { font-size: 14px; color: var(--muted); }
/* What the person actually does, under their role. Sits quieter than the role
   line so the card still reads name → role → detail rather than as two titles. */
.ab-member__what { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted-2); }
/* margin-top:auto pins the CTA to the bottom, so the rule lines up across
   cards whose descriptions run to different lengths. */
.ab-member__cta {
  margin-top: auto; padding-top: 18px; width: 100%;
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--card-cta);
  border-top: 1px solid rgba(20, 20, 20, 0.09);
}
.ab-member__arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.ab-member:hover .ab-member__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .ab-member, .ab-member__photo, .ab-member__arrow { transition: none; }
  .ab-member:hover { transform: none; }
  .ab-member:hover .ab-member__photo,
  .ab-member:hover .ab-member__arrow { transform: none; }
}

@media (max-width: 939.98px) {
  .ab-card { justify-self: center; }
}

/* =========================================================
   GUIDES page (guides.html)
   Cards use the tinted family. data-ready="false" is the state while a
   guide is still being written: the card offers to notify instead of to
   download, and script.js skips the download because the button carries
   no data-file. Flip data-ready and restore data-file to publish one.
   ========================================================= */
.gd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.gd-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  border-radius: 26px; padding: 30px 28px 30px;
  min-height: 280px;
}
.gd-card--green { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); --card-cta: #1e3a25; --card-cta-wipe: #2b5133; }
.gd-card--pink  { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); --card-cta: #4a2226; --card-cta-wipe: #633136; }
.gd-card--amber { background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f8eae1 55%, #f6e4d9 100%); --card-cta: #4a3221; --card-cta-wipe: #63442e; }
.gd-card__i { color: var(--card-cta); margin-bottom: 2px; }
.gd-card__kind {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.75); color: var(--card-cta);
  padding: 5px 11px; border-radius: 999px;
}
.gd-card__title { font-size: 21px; font-weight: 800; letter-spacing: -0.028em; line-height: 1.15; }
.gd-card__desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.gd-card__btn { margin-top: auto; }
/* Waiting-state button: readable on the tint, and clearly not a download. */
.gd-card[data-ready="false"] .gd-card__btn {
  background: rgba(255, 255, 255, 0.72); border-color: transparent; color: var(--card-cta);
  --fill: var(--card-cta); --fill-fg: var(--paper);
}
.gd-card[data-ready="true"] .gd-card__btn { background: var(--card-cta); color: var(--paper); --fill: var(--card-cta-wipe); --fill-fg: var(--paper); }

/* =========================================================
   CLOSING CTA (all pages)
   Green tinted panel, centred copy, with a browser mockup cropping off
   the bottom edge on the homepage. .cta2--flat is the same panel without
   the mockup — used on the inner pages, which keep their own headings.
   Replaces the old .cta--big (homepage) and .wb-book (inner pages).
   ========================================================= */
.cta2 { --cta2-crop: clamp(210px, 26vw, 330px); padding-block: clamp(44px, 7vw, 84px) clamp(40px, 6vw, 72px); }
.cta2__panel {
  position: relative; overflow: hidden; border-radius: 32px;
  background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%);
  box-shadow: 0 8px 30px rgba(14, 15, 12, 0.05);
  /* no bottom padding: the mockup is meant to run off the panel's edge */
  padding: clamp(38px, 5.5vw, 74px) clamp(18px, 4vw, 58px) 0;
}
.cta2--flat .cta2__panel { padding-bottom: clamp(38px, 5.5vw, 74px); }

.cta2__copy { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; position: relative; z-index: 2; }
.cta2__label {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper); border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.cta2__label i { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-deep); display: block; }
.cta2__title { margin: 0; font-size: clamp(38px, 6.4vw, 74px); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; max-width: 16ch; text-wrap: balance; }
.cta2__lead { margin: 0; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.55; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.cta2__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.5vw, 26px); margin-top: 6px; }
.cta2__btn { padding: 17px 32px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; box-shadow: 0 6px 18px rgba(80, 140, 30, 0.22); }
/* Email as a plain underlined link, not a second button — one primary action. */
.cta2__email { font-size: clamp(16px, 2.2vw, 21px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); border-bottom: 2px solid rgba(14, 15, 12, 0.22); padding-bottom: 3px; }
.cta2__email:hover { color: var(--accent-fg-dim); border-bottom-color: rgba(78, 122, 48, 0.5); }
.cta2__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 0; font-size: 13px; font-weight: 500; color: #5d6b52; }
.cta2__chips span { display: inline-flex; align-items: center; gap: 7px; }
.cta2__chips svg { color: var(--accent-deep); flex: none; }

@media (max-width: 620px) {
  .cta2 { --cta2-crop: 170px; }
  .cta2__actions { gap: 14px; }
  .cta2__email { font-size: 16px; }
}

/* =========================================================
   INSIGHTS — article index + posts (/insights/)
   A static article section, separate from the WordPress blog at /blog.
   Body copy is measure-limited rather than full-width: long-form reads
   badly across a 1200px container.
   ========================================================= */
.ins__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.ins-card { display: flex; flex-direction: column; border-radius: 26px; padding: 30px 28px 26px; min-height: 300px; }
.ins-card--green { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e6f2de 55%, #e2efd9 100%); --card-cta: #1e3a25; }
.ins-card--pink  { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f6e2ea 55%, #f3dde6 100%); --card-cta: #4a2226; }
.ins-card--amber { background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f8eae1 55%, #f6e4d9 100%); --card-cta: #4a3221; }
.ins-card__link { display: flex; flex-direction: column; gap: 12px; flex: 1; color: inherit; }
.ins-card__cat { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255,255,255,0.75); color: var(--card-cta); padding: 5px 11px; border-radius: 999px; }
.ins-card__title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.ins-card__dek { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ins-card__more { margin-top: auto; padding-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--card-cta); }
.ins-card__link:hover .ins-card__more span { display: inline-block; transform: translateX(3px); transition: transform 0.2s var(--ease); }
.ins-card__meta { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted-2); }
.ins-card__meta i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; display: block; }

/* ---- Article ---- */
.art { padding-block: clamp(40px, 6vw, 72px) 0; }
.art__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 780px; }
.art__title { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.art__dek { margin: 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--muted); max-width: 54ch; text-wrap: pretty; }
.art__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 11px; margin: 4px 0 0; font-size: 13px; color: var(--muted-2); }
.art__meta i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; display: block; }

/* Hero image slot — a tinted panel until the real image is dropped in. */
.art__figure {
  margin: clamp(30px, 4vw, 48px) 0 0; border-radius: 24px; aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.art__figure--green { background: radial-gradient(120% 90% at 15% 0%, #eef7e9 0%, #e2efd9 100%); color: #4e7a30; }
.art__figure--pink  { background: radial-gradient(120% 90% at 15% 0%, #fbecf2 0%, #f3dde6 100%); color: #8a4a63; }
.art__figure--amber { background: radial-gradient(120% 90% at 15% 0%, #fdf2ea 0%, #f6e4d9 100%); color: #8a5a23; }
.art__figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; }

/* Long-form measure. Anything wider than ~68ch is hard to read. */
.art__body { max-width: 720px; padding-block: clamp(34px, 4.5vw, 54px); }
.art__body p { font-size: 17.5px; line-height: 1.75; color: #2f3330; margin: 0 0 22px; text-wrap: pretty; }
.art__body h2 { font-size: clamp(24px, 3vw, 31px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin: 40px 0 16px; }
.art__body strong { font-weight: 700; color: var(--ink); }
.art__body em { font-style: italic; }
.art__body p:last-child { margin-bottom: 0; }
.art__foot { max-width: 720px; padding-bottom: clamp(20px, 3vw, 32px); }
.art__back { font-size: 15px; font-weight: 600; color: var(--muted); }
.art__back:hover { color: var(--ink); }


/* =========================================================
   COMING SOON — the "watch this space" band
   Site-work scene on the hi-vis amber panel. Ten small loops rather
   than one big one, all deliberately out of sync so the scene never
   pulses in unison.
   NOTE: CLAUDE.md rules out construction imagery ("no hard hats,
   hazard stripes, or scaffolding"). This scene runs against that.
   Add .soon2--plain to the section to drop it and keep the panel.
   ========================================================= */
.soon2 { --soon-h: clamp(190px, 22vw, 300px); --soon-drive: 26s; padding-block: clamp(40px, 6vw, 72px); }
.soon2--plain svg { display: none; }
.soon2--plain [data-anim] { animation: none !important; }

@keyframes bb-drive { 0% { transform: translateX(-260px); } 100% { transform: translateX(1420px); } }
@keyframes bb-roll { to { transform: rotate(360deg); } }
@keyframes bb-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-2.2deg); } }
@keyframes bb-jib { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
@keyframes bb-hoist { 0%, 100% { transform: translateY(0) rotate(1.4deg); } 50% { transform: translateY(26px) rotate(-1.4deg); } }
@keyframes bb-sway { 0%, 100% { transform: rotate(-0.7deg); } 50% { transform: rotate(0.7deg); } }
@keyframes bb-beacon { 0%, 46% { opacity: 0.15; } 50%, 62% { opacity: 1; } 66%, 100% { opacity: 0.15; } }
@keyframes bb-dust { 0% { opacity: 0; transform: translate(0,0) scale(0.5); } 30% { opacity: 0.5; } 100% { opacity: 0; transform: translate(-34px,-16px) scale(1.5); } }
@keyframes bb-grid { to { background-position: 56px 0, 0 56px; } }
@keyframes bb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* One switch for every loop in the scene. */
@media (prefers-reduced-motion: reduce) {
  .soon2 [data-anim] { animation: none !important; }
}

/* ============================================================
   THE BUILDS SHOWCASE (.bshow) — homepage, directly under the hero
   Replaced the .hd thumbnail grid (2026-08-20), which showed all
   eight builds at once, five screens down the page. One build at a
   time, big enough to read, with a rail that names the rest.

   The switching is deliberately dumb: every build renders its own
   tint wash, screenshot, address and blurb, and only .is-active
   moves between them. No colour, URL or copy is ever handed to JS,
   so adding a build stays one row in partials/builds.php.

   Three things carry the .dc-card--* tint here and each wants only
   part of it: the wash layer wants the gradient, the rail tab and
   the meta row want --card-cta and NOT the gradient. That is why
   both of those null their own background below — the tab's tint is
   painted by a separate layer underneath it so it can fade in.
   ============================================================ */
.bshow {
  position: relative;
  /* Carries the hero's ground so hero and proof read as one composed
     fold, then fades to white so the section below starts clean. The
     hero's own bottom padding is the gap; this block adds none on top. */
  background: linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg) 74%, var(--paper) 100%);
  padding: 0 0 clamp(56px, 7vw, 88px);
}

.bshow__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  margin-bottom: clamp(24px, 3.2vw, 38px);
}
.bshow__head-l { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Smaller than the site's centred .section__head titles on purpose: this one
   sits immediately under an 88px hero headline and must not compete with it. */
.bshow__title { font-size: clamp(28px, 3.4vw, 44px); }
.bshow__note {
  max-width: 380px; text-align: right;
  font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty;
}
.bshow__note a {
  font-weight: 700; color: var(--ink); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.bshow__note a:hover { color: var(--accent-ink); }

.bshow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(258px, 24vw, 316px);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

/* ---- Stage: wash + browser frame + the current build's line and CTAs ---- */
.bshow__stage {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--line); border-radius: 26px;
  padding: clamp(14px, 1.6vw, 22px);
}
.bshow__tints { position: absolute; inset: 0; z-index: 0; }
.bshow__tint { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); }
.bshow__tint.is-active { opacity: 1; }

.bshow__win {
  position: relative; z-index: 1;
  border-radius: 14px; overflow: hidden;
  background: var(--paper); border: 1px solid rgba(14, 15, 12, 0.1);
  box-shadow: 0 26px 50px -30px rgba(14, 15, 12, 0.45), 0 3px 10px -7px rgba(14, 15, 12, 0.2);
}
.bshow__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px; background: #fbfbfa; border-bottom: 1px solid var(--line);
}
.bshow__dots { display: flex; gap: 6px; flex: none; }
.bshow__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #dededa; }
/* The address is real and changes with the build — the cheapest way to say
   "these are live sites you can open", which is the whole pitch of the tier. */
.bshow__urls {
  position: relative; display: grid; flex: 1; min-width: 0;
  background: #f2f2ef; border-radius: 999px; padding: 5px 13px;
}
.bshow__url {
  grid-area: 1 / 1; min-width: 0;
  font-size: 12.5px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(3px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.bshow__url.is-active { opacity: 1; transform: none; }

.bshow__screens {
  position: relative; display: grid; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--paper-2);
}
/* visibility carries a transition delay rather than being toggled outright, so
   an outgoing screenshot leaves the tab order the moment it starts fading. */
.bshow__screen {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(1.03);
  transition: opacity 0.6s var(--ease), transform 0.85s var(--ease), visibility 0s linear 0.6s;
}
.bshow__screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
.bshow__screen-a { position: relative; display: block; width: 100%; height: 100%; }
.bshow__screen-a img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.7s var(--ease);
}
.bshow__screen-a:hover img { transform: scale(1.02); }
.bshow__open {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 10px);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--ink); color: #fff; border-radius: 999px;
  padding: 11px 20px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.7);
  opacity: 0; transition: opacity 0.3s var(--ease), transform 0.45s var(--spring);
}
.bshow__screen-a:hover .bshow__open,
.bshow__screen-a:focus-visible .bshow__open { opacity: 1; transform: translate(-50%, 0); }

/* Stacked so the row is as tall as the longest blurb and never changes height
   as builds advance. The tint class is on it only for --card-cta. */
.bshow__metas { position: relative; z-index: 1; display: grid; }
.bshow__meta {
  grid-area: 1 / 1; background: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; padding: 2px 4px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.45s;
}
.bshow__meta.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
.bshow__meta-d {
  /* Flexes rather than sitting at its own width, so the blurb gives way to the
     buttons instead of wrapping the whole row onto two lines. */
  margin: 0; flex: 1 1 320px; max-width: 52ch;
  font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--ink); text-wrap: pretty;
}
.bshow__meta-ctas { display: flex; align-items: center; gap: 16px; flex: none; }
.bshow__start {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-cta, var(--dark)); color: #fff; border-radius: 999px;
  padding: 13px 22px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  transition: background 0.25s var(--ease), transform 0.35s var(--spring);
}
.bshow__start:hover { background: var(--card-cta-wipe, var(--dark-deep)); transform: translateY(-2px); }
.bshow__live {
  font-size: 14px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.bshow__live:hover { color: var(--ink); }

/* ---- Rail: one row per build, sized to fill the stage exactly ---- */
.bshow__rail { display: grid; grid-auto-rows: 1fr; gap: 8px; }
.bshow__tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  background: none; border: 1px solid transparent; border-radius: 16px;
  padding: 12px 15px; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.bshow__tab:hover { border-color: var(--line); }
.bshow__tab.is-active { border-color: rgba(14, 15, 12, 0.1); }
.bshow__tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.bshow__tab-tint {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.bshow__tab.is-active .bshow__tab-tint { opacity: 1; }
.bshow__tab-n {
  position: relative; flex: none; width: 22px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; color: var(--muted-2); opacity: 0.55;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.bshow__tab.is-active .bshow__tab-n { color: var(--card-cta); opacity: 1; }
.bshow__tab-txt { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bshow__tab-txt strong { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.bshow__tab-txt em { font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--muted-2); }
/* The autoplay clock. Hidden for good once a visitor picks a build themselves. */
.bshow__tab-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(14, 15, 12, 0.07); opacity: 0; transition: opacity 0.3s var(--ease);
}
.bshow__tab.is-active .bshow__tab-fill { opacity: 1; }
.bshow__tab-fill i { display: block; height: 100%; background: var(--card-cta); transform: scaleX(0); transform-origin: left center; }
.bshow.is-manual .bshow__tab-fill { opacity: 0; }

@media (max-width: 1099.98px) {
  /* The rail becomes a scroller under the frame. Same markup, same is-active
     mechanics, laid out sideways by swapping the grid's auto-flow. */
  .bshow__grid { grid-template-columns: 1fr; gap: 12px; }
  .bshow__rail {
    grid-auto-flow: column; grid-auto-rows: auto; grid-auto-columns: minmax(196px, 1fr);
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .bshow__rail::-webkit-scrollbar { height: 0; }
  .bshow__tab { scroll-snap-align: center; }
}
@media (max-width: 767.98px) {
  .bshow__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bshow__note { text-align: left; max-width: none; }
  .bshow__stage { border-radius: 20px; }
  /* Column flex reads flex-basis as a HEIGHT, so the blurb's 320px basis has
     to come off here or every meta row stands 320px tall. */
  .bshow__meta { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .bshow__meta-d { flex: none; max-width: none; }
  .bshow__meta-ctas { justify-content: space-between; }
  /* There is no hover on touch, so the overlay would only ever flash on tap. */
  .bshow__open { display: none; }
}
@media (max-width: 479.98px) {
  .bshow__tab-n { display: none; }
  .bshow__meta-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .bshow__live { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bshow__tint, .bshow__url, .bshow__screen, .bshow__meta,
  .bshow__screen-a img, .bshow__tab-tint { transition-duration: 0.01ms; }
  .bshow__screen { transform: none; }
}

/* ============================================================
   INTAKE SUCCESS (.intake-done)
   Swapped in for the whole form once Basin accepts the upload.
   Hidden until then via the [hidden] attribute in the markup.
   ============================================================ */
.intake-done {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  max-width: 56ch; margin: 0 auto; padding: clamp(34px, 5vw, 54px) clamp(22px, 4vw, 44px);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 24px;
}
.intake-done__i {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); margin-bottom: 4px;
}
.intake-done__t { margin: 0; font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.intake-done__p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.intake-done__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (max-width: 599.98px) {
  .intake-done__ctas { flex-direction: column; align-self: stretch; }
}