/* ==========================================================================
   Marketive Hub — stylesheet

   CONTENTS
     01  Spacing system (8px grid)
     02  Typography scale
     03  Colour tokens
     04  Reset
     05  Layout — container, sections, page pacing
     06  Buttons
     07  Header / nav
     08  HERO
     09  Trust chain + divider
     10  Trust ribbon marquee
     11  THE 3 LEAKS
     12  Pill tabs
     13  SERVICE CARDS — single-left-edge alignment
     14  Stats
     15  Case studies
     16  About
     17  Process steps
     18  Testimonials
     19  FAQ accordion
     20  Pricing band
     21  Closing CTA band
     22  Breadcrumb + footer
     23  Responsive breakpoints
   ========================================================================== */

/* ==========================================================================
   01  SPACING SYSTEM — strict 8px grid
   Every vertical measurement on the page resolves to one of these steps.
   ========================================================================== */

:root {
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;

  /* Section rhythm: 80px floor, opening up on wide screens. */
  --section-pad: clamp(80px, 5.5vw, 112px);

  /* Layout */
  --max-content: 1200px;
  --gutter: clamp(24px, 4vw, 40px); /* 40px on desktop; text never touches an edge */
  --measure-sub: 520px; /* hero subhead: 60–70 characters */
  --measure-body: 560px; /* service card body */
  --measure-read: 68ch; /* long-form prose */
}

/* ==========================================================================
   02  TYPOGRAPHY SCALE
   ========================================================================== */

:root {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Display face — headings and big numerals. Currently the same stack as
     body text, which is the original design. To try the serif again, swap
     this one line to "Instrument Serif", Georgia, serif and set
     --display-weight to 400 (the only weight it ships). Everything that
     reads as display type follows these two tokens. */
  --font-display: var(--font);
  --display-weight: 800;

  /* Labels, eyebrows, tags, numerals. Mono is what stops the display serif
     reading as a luxury brand rather than a technical consultancy. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-tag: 11px; /* service tags */
  --fs-label: 12px; /* section labels */
  --fs-badge: 13px; /* price badge */
  --fs-trust: 13px; /* trust chain */
  --fs-micro: 13px;
  --fs-cta: 15px; /* buttons */
  --fs-small: 15px;
  --fs-body: 17px;
  --fs-sub: clamp(17px, 1.3vw, 18px); /* hero subhead */
  --fs-h3: 20px;
  --fs-h2: clamp(26px, 3vw, 32px);
  --fs-h1: clamp(38px, 4.4vw, 56px);
  --fs-cardnum: 48px;
  --fs-stat: clamp(36px, 3.6vw, 48px);
  --fs-price: clamp(56px, 7vw, 88px);

  --ls-tag: 2px;
  --ls-h1: -1.5px;
  --ls-h2: 0;

  --lh-h1: 1.1;
  --lh-h2: 1.15;
  --lh-sub: 1.6;
  --lh-body: 1.65;
}

/* ==========================================================================
   03  COLOUR TOKENS
   ========================================================================== */

:root {
  /* Backgrounds — alternating tints down the page.
     Near-black with a faint violet lean rather than neutral grey. The cast
     is barely nameable but it stops the page reading as a default dark
     theme and relates the surface to the accent. */
  --bg: #09090c;
  --bg-alt: #101016;
  --bg-raise: #16161d;

  /* Brand */
  --accent: #9372ff;
  --accent-soft: #d4b4ff;
  --accent-grad: linear-gradient(96deg, #e0ccff 0%, #9372ff 62%);

  /* CTA fill is a half-step deeper than the brand violet.
     White on #9372ff measures 3.45:1. At the specified 15px/700 that is NOT
     "large text" under WCAG — the exemption starts at 18.66px bold — so the
     4.5:1 floor applies and the brand violet fails it. #7f58ec measures
     4.66:1 and reads as the same colour at a glance.
     --accent stays #9372ff for borders, rules, dots and accent text. */
  --accent-cta: #7f58ec;
  --accent-cta-hover: #8f6cf5;

  /* Text */
  --text: #ffffff;
  --text-sub: #aaaaaa; /* 8.52:1 */
  --text-tag: #888888; /* 5.58:1 */
  /* Spec called for #666 — 3.45:1, under the 4.5:1 floor at 13px. Lifted to
     the lightest value that clears AA; visually near-identical. */
  --text-trust: #8a8a8a; /* 5.73:1 */
  --text-decor: #333333; /* decorative numerals only — see §11 */

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-bg: rgba(255, 255, 255, 0.022);
  --accent-border: rgba(147, 114, 255, 0.3);
  --accent-wash: rgba(147, 114, 255, 0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   04  RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text-sub);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--display-weight);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--text);
  text-wrap: balance;
}

/* Caps want neutral tracking — negative spacing closes the counters. Weight
   steps down from the H1 so the page has a clear first and second voice. */
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}

h3,
h4 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pill-shaped controls keep their own radius under focus. The rule above
   forces 4px, which squares off the corners of anything rounded to 999px
   and makes the focus ring look like a bug. */
.sys-parent:focus-visible,
.svc-siblings a:focus-visible,
.case-siblings__all:focus-visible,
.sys-card__caps a:focus-visible,
.nf-systems a:focus-visible,
.filters button:focus-visible,
.btn:focus-visible {
  border-radius: 999px;
}

/* Card-shaped surfaces match their own corner radius. */
.sys-nav__item:focus-visible,
.sys-work__item:focus-visible,
.cap-card__cta:focus-visible,
.case-siblings__item:focus-visible {
  border-radius: 10px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-3);
  z-index: 999;
  padding: 12px 20px;
  background: var(--accent-cta);
  color: #fff;
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   05  LAYOUT — container, sections, page pacing
   Max content 1200px centred. Gutter never below 24px mobile / 40px desktop,
   so text never touches a section edge. Sections alternate #0a0a0a and #111
   and are separated by 80px minimum.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 780px;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg);
}

/* Alternating tint, applied by class rather than :nth-child so the order
   stays deliberate and does not shift when a section moves. */
.section--alt {
  background: var(--bg-alt);
}

.section--bordered {
  border-block: 1px solid var(--hairline);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--s-6);
}

.section-head h2 {
  margin-bottom: var(--s-2);
}

/* Scoped to the unclassed intro paragraph. `.section-head p` carries
   specificity (0,1,1) and was overriding .eyebrow (0,1,0), rendering every
   section label at body size instead of 12px. */
.section-head p:not([class]) {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--text-sub);
  max-width: var(--measure-sub);
}

/* Section label — 12px, sits above every H2 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
  margin-bottom: var(--s-2);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  flex-shrink: 0;
  background: var(--accent);
}

.grad {
  color: var(--accent);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Accent emphasis. The italic here was a serif device — a real cut in
   Instrument Serif. In the sans stack it would be a synthesised oblique, so
   the gradient carries the emphasis on its own. */
.grad--em {
  font-weight: inherit;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad {
    color: transparent;
  }
}

/* Ambient glow — kept sparse; three placements across the page. */
.glow-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}

.glow--violet {
  width: min(620px, 92vw);
  aspect-ratio: 1;
  top: -22%;
  right: -8%;
  background: rgba(147, 114, 255, 0.06);
}

.glow--blue {
  width: min(520px, 82vw);
  aspect-ratio: 1;
  bottom: -22%;
  left: -8%;
  background: rgba(30, 58, 138, 0.06);
}

.glow--center {
  width: min(800px, 112vw);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(147, 114, 255, 0.05);
}

/* ==========================================================================
   06  BUTTONS
   Primary   — solid fill, high contrast, shadow. Full visual weight.
   Secondary — ghost outline. Deliberately subordinate, reads as "an option".
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 14px 24px;
  font-size: var(--fs-cta);
  font-weight: 700;
  letter-spacing: -0.1px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
    box-shadow 0.25s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn svg {
  flex-shrink: 0;
  transition: transform 0.22s var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

/* Larger padding for presence, but the type stays on the 15px CTA step —
   size is set once in the scale and buttons do not get to drift from it. */
.btn--lg {
  padding: 18px 32px;
  font-size: var(--fs-cta);
}

/* Reserved for the closing CTA, which is the last thing on the page and
   should read as the heaviest single element on it. */
.btn--xl {
  padding: 22px 44px;
  font-size: 17px;
  border-radius: 999px;
}

.btn--primary {
  background: var(--accent-cta);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(127, 88, 236, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn--primary:hover {
  background: var(--accent-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(127, 88, 236, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn--secondary {
  background: transparent;
  color: var(--text-sub);
  font-weight: 600;
  border-color: var(--hairline-strong);
  box-shadow: none;
}

.btn--secondary:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

.btn--invert {
  background: #fff;
  color: #5b3fd6;
  font-weight: 700;
}

.btn--invert:hover {
  background: #f3efff;
  transform: translateY(-2px);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.btn-row--center {
  justify-content: center;
}

/* Breathing room between a block of content and the CTA that follows it.
   Replaces inline margins that pointed at renamed tokens and silently
   resolved to zero, gluing every section button to the block above. */
.section-cta {
  margin-top: var(--s-6);
  justify-content: center;
}

/* ==========================================================================
   07  HEADER / NAV
   ========================================================================== */

.site-header {
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 9, 12, 0.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.site-header.is-scrolled {
  background: rgba(9, 9, 12, 0.96);
  border-bottom-color: var(--hairline-strong);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  flex-shrink: 0;
}

.logo__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(16px, 1.4vw, 28px);
}

.nav__links a {
  position: relative;
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-tag);
  padding-block: 4px;
  transition: color 0.18s var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--text);
}

.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav__cta {
  display: none;
}

.nav__cta .btn {
  padding: 10px 18px;
  font-size: 14px;
}

.nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav__toggle span + span {
  margin-top: 5px;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav__mobile {
  display: none;
  padding-block: var(--s-2) var(--s-4);
  border-top: 1px solid var(--hairline);
}

.nav__mobile[data-open="true"] {
  display: block;
}

.nav__mobile ul {
  display: grid;
  margin-bottom: var(--s-3);
}

.nav__mobile a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
}

/* ==========================================================================
   08  HERO
   Vertical rhythm, top to bottom — all on the 8px grid:
     service tags  →  24px  →  H1
     H1            →  16px  →  subhead
     subhead       →  32px  →  badge
     badge         →  24px  →  CTAs
     CTAs          →  16px  →  trust chain
     trust chain   →  80px  →  hairline → next section
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Bottom spacing is owned by .hero__divider so the 80px is explicit */
  padding-block: clamp(56px, 6vw, 96px) 0;
  background: var(--bg);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s-6);
}

.hero__tags {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
  margin-bottom: var(--s-3); /* 24 → H1 */
}

.hero h1 {
  max-width: 18ch;
  margin-bottom: var(--s-2); /* 16 → subhead */
}

/* .lead is the same treatment, used by the hero on interior pages (FAQ). */
.hero__sub,
.lead {
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: var(--lh-sub);
  color: var(--text-sub);
  max-width: var(--measure-sub); /* 520px */
  margin-bottom: var(--s-4); /* 32 → badge */
}

/* --- Badge: live dot + subtle pulse ------------------------------------ */
.price-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 8px 16px;
  margin-bottom: var(--s-3); /* 24 → CTAs */
  background: var(--accent-wash);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  font-size: var(--fs-badge);
  font-weight: 600;
  color: var(--accent-soft);
}

.price-pill strong {
  font-weight: 700;
  color: #fff;
}

.dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Only the dot pulses. Animating the whole badge next to a CTA reads as a
   rendering fault; a live-status dot is the established convention and
   draws the eye without competing with the button. */
.price-pill .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-pill .dot::after {
    animation: none;
    box-shadow: 0 0 0 3px var(--accent-wash);
  }
}

.hero .btn-row {
  margin-bottom: var(--s-2); /* 16 → proof line */
}

/* --- Proof + certifications under the CTA ------------------------------
   Deliberately quiet: these reassure the reader who is already scanning
   downward, they don't compete with the CTA directly above them. */
.hero__proof {
  margin-bottom: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--text-tag);
  text-wrap: balance; /* keeps the three claims from orphaning a word */
}

.hero__creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-3); /* 24 → trust chain */
}

.hero__creds li {
  padding: 5px 12px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-tag);
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

/* --- Right-side balancing mark ----------------------------------------- */
.hero__visual {
  display: none; /* desktop only — see §23 */
  justify-self: end;
  width: min(360px, 100%);
  aspect-ratio: 1;
}

.hero__visual svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   09  TRUST CHAIN + HAIRLINE DIVIDER
   Reads as a process, not a set of tags: tinted pills joined by arrows.
   ========================================================================== */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-trust);
}

.flow__step {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-trust);
  font-weight: 500;
}

/* The final step is the payoff — accented so the chain resolves. */
.flow li:last-child .flow__step {
  border-color: var(--accent-border);
  background: var(--accent-wash);
  color: var(--accent-soft);
}

.flow__arrow {
  color: var(--text-trust);
  font-size: var(--fs-trust);
  line-height: 1;
}

/* 80px of air, then the hairline that closes the hero. */
.hero__divider {
  margin-top: var(--s-10);
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   10  TRUST RIBBON MARQUEE
   Two identical lists translate −50% for a seamless loop. The clone is
   aria-hidden and link-free, so names are announced and indexed once.
   ========================================================================== */

/* The ribbon carries the alternate tone so it acts as the seam between the
   hero and the first content section, rather than three base-tone bands
   running together with nothing to separate them. */
.trust {
  padding-block: var(--s-5);
  background: var(--bg-alt);
  border-block: 1px solid var(--hairline);
}

.trust__label {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
  text-align: center;
  margin-bottom: var(--s-3);
}

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-rtl 44s linear infinite;
  will-change: transform;
}

@keyframes marquee-rtl {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.marquee__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(32px, 4vw, 64px);
  padding-inline: clamp(16px, 2vw, 32px);
}

/* Plain text, no hover and no pointer affordance — the ribbon is proof,
   not a menu, and a hover state here reads as a broken link. */
.marquee__list span {
  display: block;
  white-space: nowrap;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: var(--text-tag);
}

/* --- Capabilities variant: purple round-bullet separators ---------------
   The list gap is dropped; the dot before each item, with symmetric margin,
   supplies the rhythm and reads as a separator between capabilities. */
.marquee--caps .marquee__track {
  animation-duration: 60s; /* longer list, kept to a calm scroll speed */
}

.marquee--caps .marquee__list {
  gap: 0;
  padding-inline: 0;
}

.marquee--caps .marquee__list li {
  display: inline-flex;
  align-items: center;
}

.marquee--caps .marquee__list li::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-inline: clamp(22px, 2.6vw, 44px);
  background: var(--accent);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  /* When the row wraps, a leading dot on every item is noise; the flex gap
     already separates them. */
  .marquee--caps .marquee__list li::before { display: none; }
  .marquee--caps .marquee__list { gap: var(--s-2) var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track {
    animation: none;
    width: 100%;
  }
  .marquee__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-5);
  }
  .marquee__list[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   11  THE 3 LEAKS
   Centred heading. 3-column grid, equal height, 24px gap.
   Card: 32px padding, 16px between internal elements.
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--s-3); /* 24px */
}

.glass {
  display: flex;
  flex-direction: column;
  padding: var(--s-4); /* 32px */
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
}

/* 16px between internal elements */
.glass > * + * {
  margin-top: var(--s-2);
}

/* Stacked glass panels (service and legal pages) are direct children of the
   container with no grid to space them, so siblings would butt together.
   Grids handle their own spacing via `gap`, so scope this to direct children
   of the container only. */
.container > .glass + .glass {
  margin-top: var(--s-4); /* 32px */
}

.glass p:not([class]) {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-sub);
}

/* Decorative numeral. #333 is 1.57:1 — far below any text threshold, which
   is acceptable only because it carries no information the card does not
   already give. Marked aria-hidden in the markup so a screen reader is not
   announcing a number nobody can see. */
.num {
  font-size: var(--fs-cardnum);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-decor);
  font-variant-numeric: tabular-nums;
}

/* Payoff line, pinned to the card bottom so all three land on one edge */
.so-what {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-sub);
}

.so-what strong {
  color: var(--accent-soft);
  font-weight: 600;
}

/* Hover: subtle. Cards are not buttons. */
.glass--interactive {
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.glass--interactive:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

/* ==========================================================================
   THREE SYSTEMS — Acquire / Convert / Automate & Scale
   Replaces the five-card service grid on the homepage. Same glass recipe as
   the standard glass panel (see DESIGN.md §4), so it sits in the same family
   as every other card; the difference is that a system card carries
   capabilities and proof, not just a blurb.
   ========================================================================== */

.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sys-card {
  position: relative;
  isolation: isolate;
  /* The stat row sizes itself against the card, not the viewport. The card
     gets narrow in three separate places (small phones, the two-up band and
     the three-up band) and viewport breakpoints cannot see that, especially
     with a system font stack whose metrics differ per platform. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: linear-gradient(
    162deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02) 52%
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.sys-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 48px rgba(0, 0, 0, 0.34);
}

.sys-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

/* Mono numeral. Decorative — the heading carries the name, so this is
   aria-hidden in the markup and never the only label. */
.sys-card__no {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--accent);
}

.sys-card__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: var(--display-weight);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sys-card__body {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-sub);
  margin-bottom: var(--s-3);
}

/* Capabilities — the five old services live on here as chips. Ones with a
   page are links; ones without are plain spans so nothing 404s. */
.sys-card__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
}

.sys-card__caps li { display: flex; }

.sys-card__caps a,
.sys-card__caps span {
  display: inline-block;
  padding: 5px 11px;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-tag);
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.sys-card__caps a:hover,
.sys-card__caps a:focus-visible {
  color: var(--text);
  border-color: var(--accent-border, rgba(147, 114, 255, 0.3));
  background: rgba(147, 114, 255, 0.08);
}

/* Three metrics, always three. A system card without proof is a claim. */
/* Columns size to their content and share the leftover, rather than three
   forced thirds. A "before -> after" figure is simply wider than "38%", and
   equal thirds made the long ones wrap onto two and three lines, which in
   turn pushed each card's CTA to a different height. */
.sys-card__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  gap: var(--s-2);
  margin: auto 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.sys-card__stats div { display: flex; flex-direction: column; }
.sys-card__stats dd { order: 1; }
.sys-card__stats dt { order: 2; }

.sys-card__stats dd {
  font-family: var(--font-display);
  /* Plain value first for anything without container query support. */
  font-size: 20px;
  font-size: clamp(16px, 6.2cqi, 22px);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}

/* The arrow in a "before -> after" figure is connective tissue, not data, so
   it reads smaller and lighter than the numbers it joins. That also buys back
   most of the width that was forcing these values to wrap. */
.sys-card__stats .to {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--text-sub);
  margin: 0 0.1em;
  vertical-align: 0.06em;
}

.sys-card__stats dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-size: clamp(9px, 3.1cqi, 10px);
  font-weight: 400;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--text-trust);
  margin-top: 5px;
  white-space: nowrap;
}

/* Below roughly 285px of card there is no readable size at which three
   figures share a line, so they are allowed to wrap. A card only gets that
   narrow on a stacked phone layout, where no CTA has to line up with a
   neighbour and the ragged edge is never visible. */
@container (max-width: 285px) {
  .sys-card__stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
  }
  .sys-card__stats dd { white-space: normal; }
  .sys-card__stats dt { white-space: normal; }
}

.sys-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-cta);
  font-weight: 700;
  color: var(--accent-soft);
  text-decoration: none;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

.sys-card__cta:hover,
.sys-card__cta:focus-visible {
  gap: 12px;
  color: var(--text);
}

/* Section numeral in the eyebrow — item 17. Sits before the label text,
   separated by the existing accent rule. */
.eyebrow__no {
  color: var(--accent);
  margin-right: 2px;
}

@media (max-width: 640px) {
  .sys-card { padding: var(--s-3); }
}

/* Ticked list — used on the service pages for "what's included". The mark is
   drawn in CSS rather than an inline SVG per item, and is decorative: the
   list semantics already carry the meaning. */
.ticks {
  display: grid;
  gap: 12px;
  margin-top: var(--s-3);
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-sub);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ==========================================================================
   14  STATS
   ========================================================================== */

.stat {
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline-strong);
}

.stat__value {
  display: block;
  font-size: var(--fs-stat);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: var(--s-1);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: var(--s-1);
}

.stat__note {
  font-size: var(--fs-small);
  color: var(--text-sub);
  line-height: 1.55;
  max-width: 46ch;
}

.stats-footnote {
  margin: var(--s-6) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--text-tag);
  max-width: 62ch;
  text-align: center;
}

/* ==========================================================================
   15  CASE STUDIES
   ========================================================================== */

.case__tag {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
}

.case__client {
  margin-top: var(--s-2);
}

.case__metric {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}

.case__metric small {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tag);
  margin-top: var(--s-1);
}

.case__desc {
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-sub);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-soft);
  transition: gap 0.22s var(--ease);
}

.glass--interactive:hover .more {
  gap: 12px;
}

/* ==========================================================================
   16  ABOUT
   ========================================================================== */

.about {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

.about__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: var(--bg-raise);
}

.about__body > * + * {
  margin-top: var(--s-3);
}

.about__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-sub);
  max-width: var(--measure-read);
}

.about__body > p:first-child {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
}

.about__body strong {
  color: var(--text);
  font-weight: 600;
}

.about__body a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-border);
  transition: text-decoration-color 0.2s var(--ease);
}

.about__body a:hover {
  text-decoration-color: var(--accent);
}

.about__creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.about__creds li {
  padding: 6px 14px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-tag);
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

/* ==========================================================================
   17  PROCESS STEPS
   ========================================================================== */

/* Steps are cards, matching the leak cards so the two explainer sections of
   the page share one visual language. Icon sits top-left, numeral top-right
   as a ghosted marker rather than a filled badge. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.step:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

/* Same treatment as the service-card icons: white glyph in a purple gradient
   circle with a soft ring. Keeps the two icon sets consistent. */
.step__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s-3);
  color: #fff;
  background: linear-gradient(150deg, #9372ff, #6b4ae0);
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(147, 114, 255, 0.12);
}

.step__num {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin-bottom: var(--s-1);
}

.step p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-sub);
}

/* ==========================================================================
   18  TESTIMONIALS
   Apple-glass panels: frosted surface, oversized quote mark bled into the
   corner, quote set large and light, attribution pinned to the bottom.
   One class, one internal order: mark -> quote -> rule -> person.
   ========================================================================== */

:root {
  --t-accent: var(--accent);
  --t-quote: #e6e4ee;
  --t-rule: rgba(255, 255, 255, 0.09);
}

.tgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-items: stretch;
}

@media (min-width: 860px) {
  .tgrid { grid-template-columns: repeat(3, 1fr); }
}

.tcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Flex column plus an auto margin on the rule keeps the cards equal height
     with the dividers and names on one baseline, however long each quote. */
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 36px 32px 30px;
  background: linear-gradient(
    166deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.022) 46%,
    rgba(255, 255, 255, 0.038)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 18px 40px rgba(0, 0, 0, 0.3);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease);
}

/* Soft violet bloom in the top-left, behind the quote mark. */
.tcard::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Sized to the card rather than an offset box: an oversized pseudo-element
     showed a hard edge where its own box ended. */
  background: radial-gradient(
    120% 85% at 6% 0%,
    rgba(147, 114, 255, 0.22),
    transparent 62%
  );
  pointer-events: none;
  z-index: -1;
}

.tcard:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 28px 60px rgba(0, 0, 0, 0.42);
}

/* Oversized quote mark. Decorative: the blockquote already carries meaning,
   so this is aria-hidden in the markup and never announced. */
.tcard__mark {
  margin: 0 0 18px;
  font-size: 56px;
  font-weight: 700;
  line-height: 0.6;
  color: var(--t-accent);
  opacity: 0.5;
}

.tcard__tag {
  margin: 0 0 14px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
}

.tcard__quote {
  margin: 0 0 26px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--t-quote);
  text-wrap: pretty;
}

.tcard__rule {
  margin: auto 0 18px;
  height: 1px;
  border: 0;
  background: var(--t-rule);
}

.tcard__person {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

/* Initials monogram: gives the attribution a visual anchor without a photo. */
.tcard__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(150deg, #9372ff, #6b4ae0);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(147, 114, 255, 0.12);
}

.tcard__name {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.tcard__role {
  display: block;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--text-tag);
}

@media (max-width: 560px) {
  .tcard { padding: 30px 24px 26px; }
  .tcard__quote { font-size: 19px; }
}

/* ==========================================================================
   18b  WORK PAGE — hero stats, filter, case cards, featured comparison
   Built on the same tokens as everything above. No new design language.
   ========================================================================== */

.workstats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) clamp(20px, 4vw, 40px);
  margin-bottom: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.workstats div { display: flex; flex-direction: column; gap: 2px; }

.workstats dt {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.workstats dd {
  margin: 0;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
}

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-3); }

.filters button {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.filters button:hover {
  color: var(--text);
  border-color: var(--accent-border);
  background: var(--accent-wash);
}

.filters button[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-cta);
  border-color: var(--accent-cta);
}

.count { margin-bottom: var(--s-5); font-size: var(--fs-micro); color: var(--text-tag); }

.cases { display: grid; gap: var(--s-4); }

/* Wide glass rows. One case per row on desktop so each gets the full
   measure: cover left, story right, result carried as a violet stat. */
.case {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.02) 44%,
    rgba(255, 255, 255, 0.035)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 44px rgba(0, 0, 0, 0.3);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease);
}

@media (min-width: 780px) {
  .case {
    grid-template-columns: clamp(230px, 26vw, 320px) 1fr;
    align-items: stretch;
    /* Vertical padding only is trimmed so two full cards clear a laptop
       viewport; horizontal stays at --s-5. */
    padding: var(--s-4) var(--s-5);
  }
}

/* Specular sheen that tracks the cursor. --mx comes from main.js. */
.case::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: radial-gradient(220px 1px at var(--mx, 50%) 0%,
    rgba(224, 204, 255, 0.9), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

/* Violet bloom bleeding in from the right, behind the copy. */
.case::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 140% at 96% 50%,
    rgba(147, 114, 255, 0.17),
    transparent 62%
  );
  pointer-events: none;
  z-index: -1;
}

.case:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 30px 66px rgba(0, 0, 0, 0.44);
}

.case:hover::before { opacity: 1; }
.case[hidden] { display: none; }

.case__cover {
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  background: var(--bg-raise);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  /* Subtle violet halo behind the picture. Kept low so it reads as a soft
     glow, not a hard shadow; strengthens a touch on card hover. */
  box-shadow: 0 8px 30px rgba(147, 114, 255, 0.18);
  transition: box-shadow 0.45s var(--ease);
}

.case:hover .case__cover {
  box-shadow: 0 12px 40px rgba(147, 114, 255, 0.28);
}

@media (min-width: 780px) {
  /* height:0 keeps the cover's intrinsic size (the SVG is 560x720) from
     driving the row taller than the body needs; min-height:100% then makes
     it fill whatever height the body sets. Without this the cover forced
     every card ~120px taller than its content. object-fit crops the fill. */
  .case__cover { height: 0; min-height: 100%; }
}

/* Blog covers are 1200x1600 (3:4) and carry the headline baked into the art,
   so ANY crop cuts the words. They opt out of the stretch-to-card-height
   behaviour above and hold their true ratio at every width instead; the card
   body sets the row height and the cover sits at the top of its column.
   Declared outside a media query so no breakpoint gap can reintroduce a crop
   (the 780-860px band previously fell through to a 200px letterbox). */
.case__cover--blog {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
  align-self: start;
}

.case__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.case__label {
  margin-bottom: var(--s-2);
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
}

.case__client {
  margin-bottom: var(--s-2);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  text-transform: none;
  color: var(--text);
}

.case__summary {
  margin-bottom: var(--s-3);
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-sub);
  text-wrap: pretty;
  /* Three lines keeps every card the same silhouette. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-4); }

.pill {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The headline number. White on the CTA violet is 4.66:1, clears AA here. */
.pill--result {
  background: linear-gradient(140deg, #8560f0, #6b4ae0);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(107, 74, 224, 0.34);
}

.case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.case__meta { font-size: 14px; font-weight: 500; color: var(--text-tag); }

.case__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.case__more span { display: inline-block; transition: transform 0.2s var(--ease); }

.case__more:hover,
.case:hover .case__more {
  color: #fff;
  background: var(--accent-cta);
  border-color: var(--accent-cta);
}

/* Arrow advances on card hover too, not just on the link itself: the whole
   card reads as the target, so the affordance should fire at card level. */
.case__more:hover span,
.case:hover .case__more span { transform: translateX(4px); }

.pullquote { max-width: 760px; margin: 0 auto; text-align: center; }

.pullquote blockquote {
  margin-bottom: var(--s-3);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: var(--text);
}

.pullquote__name { font-size: 15px; font-weight: 700; color: var(--text); }
.pullquote__role { margin-top: 4px; font-size: 14px; color: var(--accent-soft); }

/* --- Featured case study + before/after ---------------------------------- */

.featured {
  display: grid;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  /* Mobile: everything stacks. */
  grid-template-areas: "head" "pills" "compare" "hint" "levers";
}

.featured__head { grid-area: head; max-width: 760px; }
.featured__pills { grid-area: pills; }
.compare { grid-area: compare; }
.compare__hint { grid-area: hint; }
.levers { grid-area: levers; }

/* Desktop: text on the left, slider on the right, so the card height is the
   taller of the two columns rather than the sum — that is what lets the whole
   block sit inside one screen. */
@media (min-width: 900px) {
  .featured {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
      "head    compare"
      "pills   compare"
      "levers  hint";
    align-items: start;
  }
  .featured__head { max-width: none; }
  .compare__hint { text-align: left; margin-top: 0; }
  .levers { margin-top: 0; }
  /* Beside the text now, so it can be a little taller and still fit. */
  .compare { max-height: min(56vh, 480px); }
}

.featured__label {
  margin-bottom: var(--s-2);
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
}

.featured h2 {
  margin-bottom: var(--s-2);
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.8px;
  line-height: 1.2;
  text-transform: none;
}

.featured__sub { font-size: 16px; line-height: 1.6; color: var(--text-sub); }

.featured__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s-2); }

.levers { display: grid; gap: 10px; margin-top: var(--s-3); }

@media (min-width: 700px) {
  .levers { grid-template-columns: repeat(3, 1fr); }
}

.levers li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.levers li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* The "after" image is the base layer; "before" sits on top, clipped from
   the left to --pos. A real range input drives it, so drag, touch and
   keyboard all work through one path. */
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 960 / 600;
  /* Height-capped so the section fits one screen; object-fit absorbs the
     crop, and the images go full width rather than sharing the row. */
  max-height: min(40vh, 460px);
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-raise);
  touch-action: pan-y;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Greyscale lives here, not in the file, so a colour screenshot can go in
   both slots and still read as before/after. */
.compare__img--before {
  filter: grayscale(1) contrast(0.95);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__chip {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(9, 9, 12, 0.75);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  pointer-events: none;
}

.compare__chip--before { left: 14px; }
.compare__chip--after  { right: 14px; }

.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  pointer-events: none;
}

.compare__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}

.compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

.compare__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}

.compare__hint {
  margin-top: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--text-tag);
  text-align: center;
}

@media (min-width: 861px) and (max-width: 1100px) {
  .case { gap: var(--s-3); padding: var(--s-4); }
  .case__summary { -webkit-line-clamp: 4; }
}

@media (max-width: 860px) {
  .case {
    /* Cover stacks above the body. Grid, so it needs a column override —
       flex-direction would do nothing here. Blur is dropped on small screens
       for scroll performance. */
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.03);
  }
  .case__cover { width: 100%; height: 200px; }
  /* Stacked layout: the blog cover keeps its 3:4 ratio, so letting it run the
     full card width made it ~900px tall on a tablet — a screenful of artwork
     per card. Cap the width and centre it; phones are already narrower than
     the cap, so they are unaffected. */
  .case__cover--blog {
    height: auto;
    width: min(100%, 320px);
    margin-inline: auto;
  }
  .case__foot { flex-direction: column; align-items: flex-start; }
  .featured { padding: var(--s-4); }
}

/* ==========================================================================
   19  FAQ ACCORDION
   ========================================================================== */

.faq-group + .faq-group {
  margin-top: var(--s-6);
}

.faq-group__title {
  font-size: 22px;
  text-transform: none;
  letter-spacing: -0.4px;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline-strong);
}

.faq-list {
  display: grid;
  gap: var(--s-1);
}

.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.faq-item[data-open="true"] {
  border-color: var(--accent-border);
  background: rgba(255, 255, 255, 0.04);
}

.faq-item__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.45;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.faq-item__q:hover {
  color: var(--accent-soft);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--text-tag);
  transition: color 0.25s var(--ease);
}

.faq-item__q:hover .faq-item__icon,
.faq-item[data-open="true"] .faq-item__icon {
  color: var(--accent);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.32s var(--ease);
}

.faq-item__icon::after {
  transform: rotate(90deg);
}

.faq-item[data-open="true"] .faq-item__icon::before {
  transform: rotate(135deg);
}

.faq-item[data-open="true"] .faq-item__icon::after {
  transform: rotate(45deg);
}

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.faq-item[data-open="true"] .faq-item__a {
  grid-template-rows: 1fr;
}

.faq-item__a > div {
  overflow: hidden;
}

.faq-item__a p {
  padding: 0 var(--s-3) var(--s-3);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-sub);
  max-width: var(--measure-read);
}

/* ==========================================================================
   20  PRICING BAND
   ========================================================================== */

.price-band {
  text-align: center;
}

.price-band .eyebrow {
  justify-content: center;
}

.price-band .eyebrow::before {
  display: none;
}

.price-band h2 {
  margin-bottom: var(--s-2);
}

.price-band__figure {
  display: block;
  font-size: var(--fs-price);
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 1;
  margin-bottom: var(--s-4);
  color: var(--accent);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .price-band__figure {
    color: transparent;
  }
}

.price-band > .container > p:not([class]) {
  margin-inline: auto;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--text-sub);
  max-width: var(--measure-sub);
}

.price-steps {
  display: grid;
  gap: var(--s-3);
  max-width: 520px;
  margin: var(--s-6) auto;
  text-align: left;
}

.price-steps li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: var(--s-3);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
}

.price-steps li:nth-child(-n + 2) {
  border-color: var(--accent-border);
  background: var(--accent-wash);
}

.price-steps__amount {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}

.price-steps li:last-child .price-steps__amount {
  color: var(--text);
}

.price-steps__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.price-steps__note {
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--text-tag);
}

.price-band__foot {
  margin: var(--s-4) auto var(--s-6);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-tag);
  max-width: 52ch;
}

/* ==========================================================================
   21  CLOSING CTA BAND
   ========================================================================== */

/* Closing CTA, redesigned as a frosted-glass card floating on the dark base
   with a soft violet glow behind it (was a full-bleed violet band). */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-pad);
  background: var(--bg);
}

.cta-band__glow {
  position: absolute;
  width: 640px;
  height: 640px;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(120px);
  background: rgba(147, 114, 255, 0.1);
  z-index: 0;
  pointer-events: none;
}

.cta-band__card {
  position: relative;
  z-index: 1;
  max-width: 100%;   /* fill the container width (was 760px) */
  margin: 0 auto;
  text-align: center;
  align-items: center;
  padding: clamp(44px, 5vw, 72px);
}

/* Violet bloom inside the card, sized to the element (no hard seam). */
.cta-band__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%, rgba(147, 114, 255, 0.16), transparent 60%);
  pointer-events: none;
}

.cta-band__eyebrow {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* Still the closer: one step up in size and weight over other H2s. */
.cta-band__card h2 {
  text-transform: none;
  margin: var(--s-2) 0;
  color: var(--text);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
}

.cta-band__lead {
  max-width: 52ch;
  margin: 0 auto var(--s-4);
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--text-sub);
}

/* --- Booking dialog -----------------------------------------------------
   Frosted panel on a blurred backdrop. Native <dialog>, so ESC, focus
   trapping and inertness of the page behind come from the platform. */

.modal {
  /* The global reset zeroes margin, which kills the `margin: auto` a native
     dialog relies on to centre itself. Put it back explicitly. */
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  overflow: visible;
}

.modal::backdrop {
  background: rgba(6, 6, 10, 0.62);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.modal__panel {
  position: relative;
  max-height: min(88vh, 860px);
  padding: var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(168deg, rgba(38, 34, 58, 0.94), rgba(16, 16, 22, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}

/* Touch target: the circle stays 34px so the look is unchanged, but coarse
   pointers get a 44px hit area, which is the minimum for a thumb. */
@media (pointer: coarse) {
  .modal__close::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
  }
}

.modal__close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
}

.modal__eyebrow {
  margin-bottom: 6px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
}

.modal__title {
  margin-bottom: 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  text-transform: none;
  color: var(--text);
}

.modal__sub {
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-sub);
}

/* --- Form --------------------------------------------------------------- */

.booking__form { display: grid; gap: var(--s-2); }

.field { display: grid; gap: 6px; }

.field label {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-sub);
}

.field input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.field input::placeholder { color: #7c7a88; }

.field input:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(147, 114, 255, 0.22);
}

.booking .btn--primary { margin-top: var(--s-1); }

.booking button[disabled] { opacity: 0.6; cursor: progress; }

/* A gate button isn't busy, it's waiting on the visitor. Say so, and sit it
   back far enough that it doesn't read as the next thing to press. */
.booking [data-next][disabled],
.booking [data-cal-submit][disabled] {
  opacity: 1;
  color: var(--text-tag);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  box-shadow: none;
  cursor: not-allowed;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.booking__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking__note,
.booking__lead {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--text-tag);
  text-align: center;
}

.booking__lead {
  margin-bottom: 4px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-sub);
}

.booking__tz {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-micro);
  color: var(--text-tag);
  text-align: center;
}

/* --- Native calendar --------------------------------------------------- */

/* Today / Tomorrow toggle — two equal tabs. */
.cal2__days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: var(--s-3);
}

.cal2__day {
  padding: 12px;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.cal2__day:hover { color: var(--text); border-color: var(--accent-border); }

.cal2__day[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-cta);
  border-color: var(--accent-cta);
}

/* Time slots — a grid inside the vertical card. */
.cal2__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  align-content: start;
  max-height: 236px;
  overflow-y: auto;
  margin-bottom: var(--s-3);
}

.cal__time {
  padding: 11px 6px;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.cal__time:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent-border);
}

/* Selected slot — filled, like the day tab. */
.cal__time[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-cta);
  border-color: var(--accent-cta);
}

.cal__time:disabled {
  color: var(--text-decor);
  background: transparent;
  border-color: var(--hairline);
  cursor: not-allowed;
  text-decoration: line-through;
}

[data-cal-status]:not(:empty) {
  margin: 0 0 var(--s-3);
  text-align: center;
}

/* Dark, thin scrollbars — the pane's default light tracks read as white
   bars against the modal. */
.modal__panel,
.cal2__times {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.modal__panel::-webkit-scrollbar,
.cal2__times::-webkit-scrollbar { width: 8px; height: 8px; }

.modal__panel::-webkit-scrollbar-track,
.cal2__times::-webkit-scrollbar-track { background: transparent; }

.modal__panel::-webkit-scrollbar-thumb,
.cal2__times::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.cal2__times { overflow-x: hidden; }

/* --- Step chrome: back arrow + progress dots ----------------------------
   Sits above the active step. Hidden on step 1 and on the confirmation,
   where there is nothing to go back to and nothing left to count. */

.booking__bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

/* `display: flex` outranks the reset's [hidden] rule, so hiding the bar
   needs saying explicitly. */
.booking__bar[hidden] { display: none; }

.booking__back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.booking__back:hover { color: var(--text); border-color: var(--accent-border); }

.booking__dots {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking__dots li {
  width: 22px;
  height: 4px;
  background: var(--hairline-strong);
  border-radius: 999px;
  transition: background-color 0.25s var(--ease);
}

.booking__dots li[data-on] { background: var(--accent-cta); }

/* --- Chips -------------------------------------------------------------
   One-tap answers. Single-choice groups auto-advance, so they carry no
   Continue button; multi-select groups do. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-3);
}

.chips--stack { flex-direction: column; flex-wrap: nowrap; }

/* Equal cells beat flex-wrap here: chips sized to their own text broke every
   row in a different place, and the ragged right edge is what read as chaos.
   A fixed two-column grid makes the block a rectangle at any selection. */
.chips--cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Equal rows, so a label that wraps to two lines on a narrow screen
     doesn't leave the row above it shorter than the rest. */
  grid-auto-rows: 1fr;
}

.chip--cell {
  display: grid;
  gap: 8px;
  padding: 14px 12px;
}

.chip--cell svg { color: var(--accent-soft); }
.chip--cell[aria-pressed="true"] svg { color: #fff; }

.chip__cellname { font-size: 14px; line-height: 1.25; }

/* Q1 is a scale, not five unrelated buttons, so the layout says so: one row
   each, ascending, with a tick that fills as the team gets bigger. */
.chips--scale {
  display: grid;
  grid-template-columns: 1fr;
}

.chips--scale .chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tick { display: flex; gap: 3px; }

.tick i {
  width: 4px;
  height: 14px;
  background: var(--hairline-strong);
  border-radius: 2px;
}

.tick i[data-on] { background: var(--accent); }

.chip[aria-pressed="true"] .tick i { background: rgba(255, 255, 255, 0.35); }
.chip[aria-pressed="true"] .tick i[data-on] { background: #fff; }

.chips--thirds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.chip {
  padding: 11px 15px;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.chips--thirds .chip { text-align: center; }

.chip:hover { border-color: var(--accent-border); }

.chip[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-cta);
  border-color: var(--accent-cta);
}

.chip--muted { color: var(--text-sub); }

/* Rich chips carry a label and a line of reasoning, so they fill the row. */
.chip--rich {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 14px 16px;
}

.chip__name { font-size: var(--fs-sub); font-weight: 700; }

.chip__desc {
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-tag);
}

.chip--rich[aria-pressed="true"] .chip__desc { color: rgba(255, 255, 255, 0.82); }

/* --- Optional field + hints --------------------------------------------- */

.field--optional { margin-bottom: var(--s-3); }

.field--optional label span {
  margin-left: 6px;
  font-weight: 500;
  color: var(--text-decor);
}

.field__hint {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--text-tag);
}

.booking__sublabel {
  margin: var(--s-3) 0 8px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-sub);
}

/* Errors have to read as errors, not as the quiet note they sit next to. */
.booking__error:not(:empty) {
  margin-bottom: var(--s-2);
  color: #ff9b9b;
}

@media (max-width: 420px) {
  .chips--thirds { grid-template-columns: 1fr; }
}

/* --- Confirmation ------------------------------------------------------- */

.booking__done { text-align: center; padding-block: var(--s-3); }

.booking__tick {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-3);
  color: #fff;
  background: var(--accent-cta);
  border-radius: 999px;
  box-shadow: 0 0 0 8px rgba(147, 114, 255, 0.14);
}

.booking__done h3 {
  margin-bottom: var(--s-1);
  font-size: 22px;
  color: var(--text);
}

.booking__done p {
  max-width: 40ch;
  margin: 0 auto var(--s-3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-sub);
}

/* --- Trust line under the closing CTA ------------------------------------ */

.cta-band .cta-band__trust {
  max-width: none;
  margin: var(--s-3) auto 0;
  font-size: var(--fs-micro);
  color: var(--text-tag);
}

@media (max-width: 560px) {
  .modal__panel { padding: var(--s-3); }
  .modal__title { font-size: 22px; }
}

/* ==========================================================================
   22  BREADCRUMB + FOOTER
   ========================================================================== */

.breadcrumb {
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-tag);
}

.breadcrumb a {
  color: var(--text-sub);
  transition: color 0.18s var(--ease);
}

.breadcrumb a:hover {
  color: var(--text);
}

.breadcrumb span {
  margin-inline: 6px;
}

.site-footer {
  padding-block: var(--s-10) var(--s-5);
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
}

.footer__grid {
  display: grid;
  gap: var(--s-6) var(--s-4);
  margin-bottom: var(--s-8);
}

.footer__brand p {
  color: var(--text-tag);
  line-height: 1.6;
  margin-top: var(--s-2);
  max-width: 32ch;
}

.site-footer h3 {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--s-2);
}

.footer__col ul {
  display: grid;
  gap: 10px;
}

/* :not(.btn) — the CTA column holds a real button, and this rule would
   otherwise repaint its label in the muted link colour. */
.footer__col a:not(.btn),
.footer__col address {
  color: var(--text-tag);
  font-style: normal;
  font-size: var(--fs-small);
  transition: color 0.18s var(--ease);
}

.footer__col a:not(.btn):hover {
  color: var(--text);
}

/* --- Availability line -------------------------------------------------- */

.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--text-sub);
}

.footer__status .dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: #4ade80; /* green reads as "available" faster than violet does */
  border-radius: 999px;
}

/* --- Social icons ------------------------------------------------------- */

/* Scoped under .footer__col so it beats the vertical .footer__col ul list. */
.footer__col .footer__social {
  display: flex;
  gap: 10px;
  margin-top: var(--s-3);
}

/* White pill buttons with brand-coloured icons. */
.footer__soc {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 10px;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

/* Same touch-target rule as .modal__close: the icon stays 40px, the thumb
   gets 44px. */
@media (pointer: coarse) {
  .footer__soc::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
  }
}

.footer__soc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Purple mail icon on the white box (its svg uses currentColor). Scoped under
   .footer__col to outrank the muted footer-link colour. */
.footer__col a.footer__soc--mail,
.footer__col a.footer__soc--mail:hover { color: var(--accent-cta); }

/* --- Closing CTA column ------------------------------------------------- */

.footer__col--cta p {
  margin-bottom: var(--s-3);
  max-width: 30ch;
  color: var(--text-tag);
  line-height: 1.6;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  color: var(--text-tag);
  font-size: var(--fs-micro);
}

.footer__bottom a {
  color: var(--text-sub);
  transition: color 0.18s var(--ease);
}

.footer__bottom a:hover { color: var(--text); }

/* --- Redesigned footer: wordmark logo + email-icon CTA ------------------ */
.footer__logo { display: inline-block; line-height: 0; }
.footer__logo img {
  width: min(230px, 72%);
  height: auto;
  display: block;
}

.footer__mail {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-cta);
  color: #fff;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.footer__mail:hover {
  background: var(--accent-cta-hover);
  transform: translateY(-2px);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   23  RESPONSIVE BREAKPOINTS

     < 640px   mobile  — hero centred, CTAs stacked full-width, visual hidden
     ≥ 640px           — 2-column card grids, 3-up pricing ladder
     ≥ 900px           — about splits into 2 columns
     ≥ 960px           — desktop nav
     ≥ 1024px          — 3/4-column grids, hero visual appears
   ========================================================================== */

/* --- Mobile: centre everything, stack the CTAs -------------------------- */
@media (max-width: 639px) {
  .hero {
    text-align: center;
  }

  .hero__tags,
  .hero h1,
  .hero__sub {
    margin-inline: auto;
  }

  .hero h1 {
    max-width: 100%;
  }

  .hero .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hero .btn-row .btn {
    width: 100%;
  }

  .flow {
    justify-content: center;
  }

  .section-head {
    text-align: center;
  }

  .section-head .eyebrow {
    justify-content: center;
  }

  .section-head .eyebrow::before {
    display: none;
  }

  .section-head p {
    margin-inline: auto;
  }

  /* The right-side mark is decorative — never shown on mobile */
  .hero__visual {
    display: none !important;
  }
}

/* --- Small tablet: two-up grids ---------------------------------------- */
@media (min-width: 640px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .price-steps {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
}

/* --- Tablet: about splits ---------------------------------------------- */
@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: var(--s-8);
  }

  .about__portrait {
    position: sticky;
    top: 104px;
  }

  .footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--s-5);
  }

  .footer__brand {
    grid-column: auto;
  }
}

/* --- Desktop nav -------------------------------------------------------- */
@media (min-width: 960px) {
  .nav__links,
  .nav__cta {
    display: flex;
  }

  .nav__toggle,
  .nav__mobile {
    display: none !important;
  }
}

/* --- Desktop: full grids + hero visual ---------------------------------- */
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Text column sized so the subhead's 520px measure is never the
     constraint; the mark takes the remainder and balances the block. */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: var(--s-8);
  }

  .hero__visual {
    display: block;
  }
}

/* ==========================================================================
   24  SHORT-VIEWPORT OVERRIDES

   Placed last on purpose. Three earlier attempts at this failed silently
   because the media query sat above the base rules it was meant to beat —
   equal specificity means source order decides. Anything that must win goes
   at the end of the file.
   ========================================================================== */

@media (max-height: 900px) {
  .section:has(.featured) { padding-block: 32px; }

  .featured {
    padding: var(--s-4);
    gap: var(--s-2);
  }

  .featured h2 {
    font-size: clamp(21px, 2vw, 26px);
    margin-bottom: 6px;
  }

  .compare { max-height: 34vh; }
}

/* ==========================================================================
   24  CASE STUDY PAGE
   Glass throughout, matching the work cards. Everything still carrying
   placeholder copy is marked .lorem so it is impossible to ship by accident.
   ========================================================================== */

.case-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--s-8) var(--s-6);
}

.case-hero h1 {
  margin-bottom: var(--s-3);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.05;
  text-transform: none;
}

.case-hero__sub {
  max-width: 62ch;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  color: var(--text-sub);
  text-wrap: pretty;
}

.case-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

/* min-width:0 lets long values wrap inside their column instead of spilling
   into the next one. */
.case-hero__meta li { display: grid; gap: 4px; min-width: 0; }
.case-hero__meta strong { overflow-wrap: break-word; }

.case-hero__meta span {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
}

.case-hero__meta strong {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
}

/* --- Headline numbers ---------------------------------------------------- */

.section--tight { padding-block: 0 var(--s-6); }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3);
}

.kpi {
  display: grid;
  gap: 6px;
  padding: var(--s-4);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.kpi__num {
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kpi__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.kpi__note { font-size: var(--fs-micro); color: var(--text-tag); }

/* --- Two-column body ----------------------------------------------------- */

.case-body { display: grid; gap: var(--s-6); align-items: start; }

@media (min-width: 940px) {
  .case-body { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); }
  .case-body__aside { position: sticky; top: 96px; }
}

.case-body__main h2 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  font-size: clamp(22px, 2vw, 26px);
  text-transform: none;
  letter-spacing: -0.4px;
}

.case-body__main h2:first-child { margin-top: 0; }

.case-body__main p {
  margin-bottom: var(--s-2);
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-sub);
  text-wrap: pretty;
}

.case-figure { margin-block: var(--s-4); }

.case-figure img {
  width: 100%;
  height: auto;
  background: var(--bg-raise);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
}

.case-figure figcaption {
  margin-top: 10px;
  font-size: var(--fs-micro);
  color: var(--text-tag);
}

.case-quote {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 20px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.case-quote p {
  margin-bottom: var(--s-2);
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
}

.case-quote footer { display: grid; gap: 2px; }
.case-quote strong { font-size: var(--fs-small); color: var(--text); }
.case-quote span { font-size: var(--fs-micro); color: var(--text-tag); }

/* --- Sidebar ------------------------------------------------------------- */

.case-aside h3 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
}

.case-aside h3 + * { margin-bottom: var(--s-4); }

.case-aside__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px var(--s-2);
  font-size: var(--fs-small);
}

.case-aside__list dt { color: var(--text-tag); }
.case-aside__list dd { color: var(--text); font-weight: 600; text-align: right; }

.case-aside__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-aside__tags .pill { font-size: 13px; padding: 7px 13px; }

/* --- Post share row ------------------------------------------------------ */

.share-row { display: flex; gap: 8px; }

.share-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}

/* Same touch-target rule as .modal__close: 38px icon, 44px thumb area. */
@media (pointer: coarse) {
  .share-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
  }
}

.share-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text);
}

.share-btn.is-copied { color: var(--accent-cta); border-color: var(--accent-cta); }

.case-nav { margin-top: var(--s-6); }

/* In-house project badge + qualitative outcome band (case studies without a
   single headline metric). */
.case-badge {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-3);
  padding: 7px 14px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--accent-soft);
  background: var(--accent-wash);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
}

.case-outcome {
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 20px;
}

.case-outcome__label {
  margin-bottom: 8px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--accent-soft);
}

.case-outcome__text {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text);
  text-wrap: pretty;
}

.case-nav a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-sub);
  transition: color 0.18s var(--ease);
}

.case-nav a:hover { color: var(--text); }

/* --- Placeholder marker --------------------------------------------------
   Dashed underline on anything still holding lorem ipsum. Deliberately
   visible: this page must not go live looking finished when it isn't.
   Delete this rule and the .lorem classes together. */
.lorem {
  text-decoration: underline dashed rgba(255, 170, 90, 0.55);
  text-underline-offset: 4px;
}

/* ==========================================================================
   25  STYLEGUIDE (/styleguide/ only)
   Internal reference page. Not linked from nav, noindex. Safe to delete
   along with /styleguide/ if the design system ever moves elsewhere.
   ========================================================================== */

/* The hero already carries its own bottom padding; a full section pad on top
   of it leaves a dead band. Applies anywhere a case-hero leads a section. */
.case-hero + .section { padding-top: var(--s-4); }

.sg-h {
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--text-tag);
  border-bottom: 1px solid var(--hairline);
}

.sg-note {
  max-width: var(--measure-read);
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-sub);
}

.sg-note code,
.sg-grid code,
.sg-type code,
.sg-space code,
.case-hero__sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--accent-soft);
}

.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-3);
}

.sg-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

.sg-swatch { display: grid; gap: 4px; }

.sg-swatch__chip,
.sg-swatch__band {
  height: 76px;
  margin-bottom: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
}

.sg-swatch__band { height: 56px; }

/* Checkerboard so translucent tokens show their real alpha. */
.sg-grid--checker .sg-swatch__chip {
  background-image:
    linear-gradient(45deg, #2a2a33 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a33 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a33 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a33 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.sg-swatch__val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-tag);
  word-break: break-all;
}

.sg-swatch__note { font-size: var(--fs-micro); color: var(--text-sub); }

/* Glass needs something behind it to blur, or the demo proves nothing. */
.sg-glass-demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: linear-gradient(140deg, #1a1430, #0d0d14 60%, #16102a);
  border-radius: 26px;
}

@media (min-width: 860px) {
  .sg-glass-demo { grid-template-columns: 1fr 1fr; align-items: start; }
  .sg-glass-demo .case-quote { grid-column: 1 / -1; margin-top: 0; }
}

.sg-type { display: grid; gap: var(--s-3); }

.sg-type li {
  display: grid;
  gap: 4px;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}

.sg-type li > span:first-child {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text);
}

.sg-space { display: grid; gap: 10px; }

.sg-space li {
  display: grid;
  grid-template-columns: 90px 110px 1fr;
  align-items: center;
  gap: var(--s-2);
}

.sg-space__bar {
  height: 14px;
  background: var(--accent-grad);
  border-radius: 4px;
}

/* ===================================================================
   Testimonials table (Work page). Glass wrapper, hairline row rules,
   scrolls horizontally on narrow screens rather than breaking layout.
   =================================================================== */
.ttable-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ttable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.ttable th,
.ttable td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.ttable thead th {
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-tag);
  white-space: nowrap;
}

.ttable tbody tr:last-child td { border-bottom: 0; }

.ttable td { font-size: var(--fs-small); color: var(--text-sub); }
.ttable td.ttable__name { color: var(--text); font-weight: 600; white-space: nowrap; }
.ttable td.ttable__company { color: var(--accent-soft); white-space: nowrap; }
.ttable td.ttable__quote { min-width: 320px; }

/* ===================================================================
   Justified body copy. Scoped to reading prose only (never headings,
   labels, nav, pills or captions). hyphens:auto softens the word gaps
   that justify otherwise produces on narrow columns.
   =================================================================== */
/* Justify only the case-study reading column (a wide single column where it
   looks clean). Cards and the About block are left ragged on purpose: justify
   in those narrow columns opens ugly word gaps. */
.case-body__main p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ==========================================================================
   SYSTEM HUB PAGES — /systems/{acquire,convert,automate}/ and /services/
   ========================================================================== */

.sys-hero { padding-block: clamp(56px, 6vw, 96px) clamp(32px, 3.5vw, 48px); }

.sys-hero h1 { margin-bottom: var(--s-3); }

.sys-hero__lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--text-sub);
  max-width: 54ch;
}

/* Three-up strip repeated on every system page, so the reader always knows
   which of the three they are in and that the other two exist. */
.sys-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 4vw, 56px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}

.sys-nav__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--bg);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.sys-nav__item:hover { background: var(--bg-raise); }

.sys-nav__item.is-current { background: rgba(147, 114, 255, 0.08); }

.sys-nav__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
}

.sys-nav__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-sub);
}

.sys-nav__item.is-current .sys-nav__name,
.sys-nav__item:hover .sys-nav__name { color: var(--text); }

/* The "here is what this leak looks like" paragraph — a raised panel so it
   reads as an aside rather than more body copy. */
.sys-leak {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-sub);
  background: var(--bg-raise);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  max-width: 72ch;
}

.sys-leak strong { color: var(--text); font-weight: 700; }

/* Capability cards — used on system hubs and on /services/ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cap-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--card-bg, rgba(255, 255, 255, 0.022));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.09));
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.cap-card:hover { border-color: rgba(255, 255, 255, 0.17); transform: translateY(-3px); }

.cap-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--display-weight);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--s-2);
}

.cap-card__title a { color: var(--text); text-decoration: none; }
.cap-card__title a:hover { color: var(--accent-soft); }

.cap-card__body {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-sub);
  margin-bottom: var(--s-3);
}

.cap-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-soft);
  text-decoration: none;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

.cap-card__cta:hover { gap: 12px; color: var(--text); }

/* Capabilities with no page of their own say so, rather than linking nowhere. */
.cap-card__note {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-trust);
}

/* Big proof numbers on a system hub */
.sys-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin: 0;
}

/* Source order is dt, dd(value), dd(note) for valid <dl> semantics;
   column-reverse is not usable with three children, so the value is
   pulled above the label with explicit order. */
.sys-stat { display: flex; flex-direction: column; }
.sys-stat__no { order: 1; }
.sys-stat__label { order: 2; }
.sys-stat__note { order: 3; margin-left: 0; }

.sys-stat__no {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--display-weight);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .sys-stat__no { color: transparent; }
}

.sys-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text);
  margin: var(--s-2) 0 6px;
}

.sys-stat__note { font-size: 13px; line-height: 1.55; color: var(--text-trust); margin: 0; }

/* Work list on a system hub */
.sys-work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}

.sys-work__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 22px;
  background: var(--bg-alt);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.sys-work__item:hover { background: var(--bg-raise); }

.sys-work__name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }

.sys-work__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-trust);
}

.sys-next h2 { margin-bottom: var(--s-2); }
.sys-next h2 a { color: var(--text); text-decoration: none; }
.sys-next h2 a:hover { color: var(--accent-soft); }
.sys-next p { color: var(--text-sub); max-width: 56ch; margin-bottom: var(--s-3); }

/* /services/ grouping */
.svc-group + .svc-group {
  margin-top: clamp(48px, 5.5vw, 80px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--hairline);
}

.svc-group__head { max-width: 720px; margin-bottom: var(--s-5); }
.svc-group__head h2 { margin-bottom: var(--s-2); }
.svc-group__head h2 a { color: var(--text); text-decoration: none; }
.svc-group__head h2 a:hover { color: var(--accent-soft); }
.svc-group__head p { color: var(--text-sub); }

/* Parent-system banner on a service page — item 6. */
.sys-parent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-sub);
  text-decoration: none;
  background: rgba(147, 114, 255, 0.06);
  border: 1px solid rgba(147, 114, 255, 0.22);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
    gap 0.25s var(--ease);
}

.sys-parent:hover {
  gap: 14px;
  background: rgba(147, 114, 255, 0.11);
  border-color: rgba(147, 114, 255, 0.4);
}

.sys-parent__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
}

.sys-parent__txt strong { color: var(--text); font-weight: 700; }

/* Three metrics on a case card — item 13. */
.case__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.case__stats div { display: flex; flex-direction: column; }
.case__stats dd { order: 1; }
.case__stats dt { order: 2; }

.case__stats dd {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.case__stats dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-trust);
  margin-top: 5px;
}

/* NDA note — item 23. */
.nda-note {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  max-width: 72ch;
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.nda-note p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-sub); }

.nda-note__label {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 8px;
}

@media (max-width: 520px) {
  .case__stats dd { font-size: 21px; }
}

/* The diagnostic line on a system card — absorbed from the old #why section. */
.sys-card__leak {
  margin: calc(var(--s-2) * -1) 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub);
  background: rgba(147, 114, 255, 0.05);
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
}

.sys-card__leak span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

/* #about folded into #process — item 11. A rule and extra top space keep it
   reading as its own beat rather than a continuation of the process steps. */
.about-inline {
  margin-top: clamp(48px, 5.5vw, 80px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   CASE STUDY REWORK — KPI placeholders and sibling navigation
   ========================================================================== */

/* A KPI still waiting on a real figure. Muted rather than hidden, so the
   gap is visible in review and impossible to ship by accident. */
.kpi--todo .kpi__num,
.kpi--todo .kpi__label {
  color: var(--text-decor);
  -webkit-text-fill-color: var(--text-decor);
  background: none;
}

.case-siblings {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.case-siblings__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  min-width: 0;
}

.case-siblings__item--next { text-align: right; }

.case-siblings__dir {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent);
}

.case-siblings__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.case-siblings__item:hover .case-siblings__name { color: var(--text); }

.case-siblings__all {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--text-trust);
  text-decoration: none;
  padding: 7px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.case-siblings__all:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 620px) {
  .case-siblings { grid-template-columns: 1fr 1fr; row-gap: var(--s-3); }
  .case-siblings__all { grid-column: 1 / -1; order: 3; justify-self: center; }
}

/* ==========================================================================
   SERVICE PAGE REWORK — proof strip and sibling services
   ========================================================================== */

.svc-proof-wrap { margin: clamp(40px, 4.5vw, 64px) 0; }

.svc-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
}

.svc-proof__item {
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  background: var(--card-bg, rgba(255, 255, 255, 0.022));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.09));
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.svc-proof__no {
  order: 1;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .svc-proof__no { color: transparent; }
}

.svc-proof__label {
  order: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin: 7px 0 0;
}

.svc-proof__src { order: 3; font-size: 12px; color: var(--text-trust); margin: 6px 0 0; }
.svc-proof__src a { color: var(--accent-soft); text-decoration: none; }
.svc-proof__src a:hover { color: var(--text); text-decoration: underline; }

/* Placeholder proof reads as absent, not as a result. */
.svc-proof__item--todo .svc-proof__no {
  color: var(--text-decor);
  -webkit-text-fill-color: var(--text-decor);
  background: none;
}

.svc-siblings {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.svc-siblings__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-trust);
  margin-right: 4px;
}

.svc-siblings a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  padding: 7px 14px;
  background: var(--bg-raise);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.svc-siblings a:hover { color: var(--text); border-color: var(--accent); }

.svc-siblings__hub {
  background: rgba(147, 114, 255, 0.08) !important;
  border-color: rgba(147, 114, 255, 0.28) !important;
  color: var(--accent-soft) !important;
}

/* Empty state for a system filter with nothing in it. */
.filter-empty {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-sub);
  background: var(--bg-raise);
  border: 1px dashed var(--hairline-strong);
  border-radius: 14px;
}

.filter-empty a { color: var(--accent-soft); }

/* ==========================================================================
   FOOTER — grouped by system
   ========================================================================== */

.footer__systems > li + li { margin-top: var(--s-3); }

.footer__systems > li > a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
  text-decoration: none;
}

.footer__systems > li > a:hover { color: var(--accent-soft); }

.footer__no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--accent);
}

.footer__systems ul {
  margin-top: 7px;
  padding-left: 22px;
  border-left: 1px solid var(--hairline);
}

.footer__systems ul li + li { margin-top: 3px; }

.footer__all { margin-top: var(--s-3) !important; }

.footer__all a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--accent-soft);
  text-decoration: none;
}

.footer__all a:hover { color: var(--text); text-decoration: underline; }

/* "est." marker. Nine of the returned figures are described by their own
   context as estimated, projected, or a capability of the build rather than
   a measured outcome. A KPI strip is read as measurement, so the marker sits
   on the number itself, not only in the small print underneath. */
.kpi__est {
  display: inline-block;
  margin-left: 5px;
  vertical-align: super;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--text-trust);
  -webkit-text-fill-color: var(--text-trust);
  background: none;
  cursor: help;
}