/* =========================================================================
   Vella Digital — Site Stylesheet
   Single-file design system: tokens, base, layout, components, utilities.
   No framework, no build step. Organized by section for maintainability.
   ========================================================================= */

@import url('/assets/fonts/fonts.css');

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Color — brand */
  --color-ink: #0E1A1C;
  --color-ink-2: #16282B;
  --color-ink-3: #20383C;
  /* Brand teal is #0C8478 rather than the lighter #0F9B8E, so it clears
     WCAG AA (4.6:1) as link and button text. --color-brand-bright is the
     lighter teal, for fills and glows only — never for text. */
  --color-brand: #0C8478;
  --color-brand-dark: #0A6B62;
  --color-brand-bright: #0F9B8E;
  --color-brand-light: #E3F5F3;
  --color-accent: #F2994A;
  --color-accent-dark: #B35F16;
  --color-accent-light: #FDF0E4;
  --color-teal: #3B82A6;
  --color-teal-light: #E6F1F7;
  --color-violet: #7C5CFC;
  --color-violet-light: #EEEAFF;
  --color-rose: #D9455F;
  --color-rose-light: #FCE8EC;

  /* Color — neutrals */
  --color-white: #FFFFFF;
  --color-bg: #F7F8FB;
  --color-bg-2: #EEF1F7;
  --color-border: #E3E7EF;
  --color-border-strong: #CBD2E1;
  --color-text: #101425;
  --color-text-secondary: #545B6E;
  --color-text-muted: #646B82;
  --color-text-on-dark: #F4F6FC;
  --color-text-on-dark-muted: #9AA3BF;

  /* Typography */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing (8px grid) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(14, 26, 28, 0.06), 0 1px 1px rgba(14, 26, 28, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 26, 28, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 26, 28, 0.14);

  /* Layout */
  --container-max: 1216px;
  --container-pad: 1.5rem;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 200ms;
  --reveal-duration: 700ms;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

h1 { font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem); letter-spacing: -0.03em; line-height: 1.25; }
h2 { font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem); line-height: 1.3; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.35; }
h4 { font-size: 1.125rem; font-weight: 700; }

p { color: var(--color-text-secondary); }

.text-gradient {
  background: linear-gradient(100deg, var(--color-brand) 10%, #0FA090 45%, var(--color-accent-dark) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

::selection { background: var(--color-brand); color: var(--color-white); }

body {
  animation: bodyFadeIn 0.5s var(--ease) both;
}
@keyframes bodyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  color: var(--color-text-secondary);
}

:focus-visible {
  outline: 2.5px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

@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;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  z-index: 300;
  transition: width 100ms linear;
}

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

/* -------------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: clamp(3rem, 6vw, 5rem); }
/* .section-tight must ramp with .section, not sit at a fixed value: a fixed
   64px stayed put while .section shrank to 48px on tablet, so "tight"
   sections rendered looser than normal ones below ~1066px. */
.section-tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.section-bg { background: var(--color-bg); }
.section-dark {
  position: relative;
  background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-text-on-dark);
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-white); }
.section-dark p { color: var(--color-text-on-dark-muted); }

.section-head {
  max-width: 680px;
  margin-bottom: var(--space-6);
}
.section-head.center { margin-inline: auto; text-align: center; }
/* A heading-only section would otherwise add this margin on top of its own
   bottom padding, so the block sits 48px lower than it looks. */
.section-head:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.section-dark .eyebrow { color: var(--color-accent); }

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
}

.section-head h2 { margin-bottom: var(--space-3); }

.grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  /* 3- and 4-up grids need an intermediate 2-column step. Without it they
     stay a single column all the way to 860px, which made tablet-width pages
     enormously tall — nine service cards in one narrow stack. */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
  /* not 860: four columns there give each card ~123px of content, which is
     narrower than single words like "Accessibility" and they overflow into
     the next card. Stay 2-up until there is room. */
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9375rem;
  border: 1.5px solid transparent;
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  white-space: nowrap;
  overflow-wrap: anywhere;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: translateY(1px) scale(0.98); }
@media (max-width: 420px) {
  /* let a long label wrap inside the pill instead of being clipped */
  .btn { white-space: normal; }
}

.btn-accent, .btn-primary {
  isolation: isolate;
}
.btn-accent::before, .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.4) 52%, transparent 70%);
  background-size: 250% 100%;
  background-position: 150% 0;
  transition: background-position 700ms var(--ease);
  pointer-events: none;
}
.btn-accent:hover::before, .btn-primary:hover::before { background-position: -50% 0; }

/* The primary CTA across the site: orange on the teal palette, with ink
   text rather than white — dark-on-orange is the combination that clears
   contrast at this weight. The hover shade stops short of --color-accent-dark,
   which is tuned for orange *text* on light and is too dark to sit under ink. */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: #DD8130; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-primary {
  background: var(--color-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-brand-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
.btn-outline:hover { border-color: var(--color-ink); background: var(--color-bg-2); }

/* Light outline button for every dark context — one definition instead of
   the four near-identical copies this used to be. */
.section-dark .btn-outline,
.hero-video .btn-outline,
.page-hero.is-dark .btn-outline,
.cta-band .btn-outline {
  border-color: rgba(244, 246, 252, 0.4);
  color: var(--color-white);
}
.section-dark .btn-outline:hover,
.hero-video .btn-outline:hover,
.page-hero.is-dark .btn-outline:hover,
.cta-band .btn-outline:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

.btn-ghost {
  background: transparent;
  color: var(--color-brand);
  padding-inline: 0.25rem;
  border-radius: 4px;
}
.btn-ghost:hover { color: var(--color-brand-dark); }
.btn-ghost svg { transition: transform var(--duration) var(--ease); }
.btn-ghost:hover svg { transform: translateX(3px); }

.btn-lg { padding: 1rem 1.85rem; font-size: 1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* -------------------------------------------------------------------------
   5. Header & navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(14,26,28,0.02);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 1.05rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.logo-mark { width: 34px; height: 34px; flex-shrink: 0; }

/* The full logo lockup as artwork. Sized by height so the intrinsic
   1102x283 file scales on its own ratio; the dark wordmark version goes on
   light backgrounds, the light one (logo-light.png) on dark. */
.logo.is-lockup { gap: 0; }
.logo-lockup {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .logo-lockup { height: 32px; }
}
.logo-tagline {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.nav-list {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
/* Six items plus the CTA button do not fit at the low end of the desktop
   range: without this the nav wrapped to a second row and the bar overflowed.
   Tighten the gaps rather than dropping an item or moving the breakpoint. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .nav-list { gap: var(--space-3); }
  .nav-link { font-size: 0.875rem; }
  .nav-actions .btn { padding-inline: 1rem; font-size: 0.8125rem; }
}
.nav-link {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  position: relative;
  padding-block: 4px;
  transition: color var(--duration) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-ink); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-actions .btn { display: none; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
}
.nav-toggle:hover { background: var(--color-bg-2); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
  padding: var(--space-4) 0 var(--space-5);
}
.mobile-nav.is-open { display: block; }
.mobile-nav-list { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-nav-list a {
  display: block;
  padding: 0.85rem var(--container-pad);
  font-weight: 600;
  font-size: 1.0625rem;
  border-radius: var(--radius-sm);
}
.mobile-nav-list a[aria-current="page"] { color: var(--color-brand); background: var(--color-brand-light); }
.mobile-nav-list a:hover { background: var(--color-bg-2); }
.mobile-nav-cta { padding-inline: var(--container-pad); margin-top: var(--space-3); }
.mobile-nav-cta .btn { width: 100%; }

/* 1024, not 960: with seven nav items plus the CTA button, the bar wrapped to
   a second row below this width. The drawer handles it instead. Keep this in
   step with the mega-menu breakpoints below and the matchMedia check in
   main.js, or the desktop panel can open while the drawer is active. */
@media (min-width: 1024px) {
  .nav-list { display: flex; }
  .nav-actions .btn { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
  position: relative;
}

/* --- Video hero -------------------------------------------------------- */
/* Height of the sticky header, subtracted so the hero fills exactly the
   space below it. Values run a few px over the measured header (80 / 87)
   so a sub-pixel or font-load difference can never push the hero past the
   fold — a 3px gap is invisible, a 3px overflow costs a scrollbar. */
:root { --header-h: 84px; }
@media (min-width: 960px) { :root { --header-h: 90px; } }

.hero-video {
  padding-block: clamp(2rem, 5vw, 5rem);
  background: var(--color-ink);
  isolation: isolate;
  display: flex;
  align-items: center;
  /* svh = the *small* viewport height, i.e. with mobile browser chrome
     expanded. Plain vh measures the chrome-collapsed height and would
     hide the CTAs behind the URL bar on load. vh line is the fallback. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.hero-video .hero-inner { width: 100%; }

.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-media {
  z-index: -2;
  background-image: url('/assets/img/photos/hero-workspace.jpg');
  background-image: image-set(url('/assets/img/photos/hero-workspace.webp') type('image/webp'), url('/assets/img/photos/hero-workspace.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
}
.hero-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hero-media-video.is-ready { opacity: 1; }

/* Scrim keeps headline contrast well clear of WCAG AA over any frame. */
.hero-scrim {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,26,28,0.86) 0%, rgba(14,26,28,0.78) 45%, rgba(14,26,28,0.92) 100%),
    radial-gradient(900px circle at 20% 30%, rgba(15,155,142,0.30), transparent 65%),
    radial-gradient(700px circle at 85% 75%, rgba(242,153,74,0.16), transparent 60%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-video h1 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  /* Width is governed by .hero-inner (940px); no max-width here — a ch-based
     cap resolves wider than the container at this size and never binds. */
}
.hero-video .eyebrow { color: #7FD8CD; }
.hero-video .lede {
  color: rgba(244, 246, 252, 0.82);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}
.hero-video .btn-row { justify-content: center; }
/* Gradient headline accent, brightened for dark backdrops. The base
   .text-gradient starts on brand teal (#0C8478), which is far too dark to
   read against the dark scrim — these lighter stops keep it legible. */
.hero-video .text-gradient,
.page-hero.is-dark .text-gradient {
  background: linear-gradient(100deg, #5FD6C6 5%, #9BE8DC 40%, var(--color-accent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.hero-badge .pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #52D77C;
  flex-shrink: 0;
  animation: pulseDot 1.8s ease-in-out infinite;
}

.hero-video .hero-rotator {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
}
.hero-video .hero-rotator .rotate-word { color: var(--color-accent); }
.hero-video .hero-rotator .pulse-dot { background: #7FD8CD; }

/* Short viewports (landscape phones, small laptops): compress rather than
   overflow, so the hero still lands inside the fold. These must stay below
   the base hero rules above — same specificity, so source order decides.
   min-height (not height) means content is never clipped: on a viewport too
   short for legible type the hero grows instead. */
@media (max-height: 780px) and (min-width: 960px) {
  .hero-video { padding-block: clamp(1.25rem, 2.5vh, 2.25rem); }
  .hero-video h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); }
  .hero-video .lede { font-size: 1rem; margin-bottom: var(--space-3); }
  .hero-badge { margin-bottom: 0.75rem; }
  .hero-rotator { margin-bottom: 0.875rem; }
}
@media (max-height: 620px) {
  .hero-video { padding-block: 0.5rem; }
  .hero-video h1 {
    font-size: clamp(1.375rem, 1rem + 1.6vw, 1.875rem);
    margin-bottom: 0.375rem;
  }
  .hero-video .lede { font-size: 0.875rem; margin-bottom: 0.625rem; }
  .hero-badge { margin-bottom: 0.375rem; font-size: 0.75rem; padding: 0.25rem 0.65rem; }
  .hero-rotator { margin-bottom: 0.5rem; font-size: 0.75rem; padding: 0.3rem 0.75rem 0.3rem 0.55rem; }
  .hero-video .btn-lg { padding: 0.55rem 1.15rem; font-size: 0.875rem; }
  .hero-video .btn-row { gap: 0.6rem; }
}

.hero-rotator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-brand-light);
  border: 1px solid rgba(15,155,142,0.16);
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand-dark);
  margin-bottom: var(--space-4);
}
.hero-rotator .pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
  flex-shrink: 0;
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.rotate-word {
  display: inline-block;
  font-weight: 800;
  color: var(--color-brand-dark);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.rotate-word.is-swapping { opacity: 0; transform: translateY(5px); }

@media (prefers-reduced-motion: reduce) {
  .hero-rotator .pulse-dot, .hero-badge .pulse-dot {
    animation: none !important;
  }
  .hero-media-video { transition: none !important; }
}

/* -------------------------------------------------------------------------
   7. Cards
   ------------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  position: relative;
}

.pillar-card { overflow: hidden; }
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.pillar-card .icon-tile { margin-bottom: var(--space-4); }
.pillar-card h3 { margin-bottom: var(--space-2); }
.pillar-card p { font-size: 0.9375rem; }

.icon-tile {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-light);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration) var(--ease-spring), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.icon-tile { margin-bottom: var(--space-3); }
.icon-tile svg { width: 24px; height: 24px; }
.card:hover .icon-tile {
  transform: scale(1.1) rotate(-4deg);
  background: var(--color-brand);
  color: var(--color-white);
}

/* Color variants — used sparingly to break up repeated icon-tile grids. */
.icon-tile.is-amber { background: var(--color-accent-light); color: var(--color-accent-dark); }
.icon-tile.is-teal { background: var(--color-teal-light); color: var(--color-teal); }
.icon-tile.is-violet { background: var(--color-violet-light); color: var(--color-violet); }
.card:hover .icon-tile.is-amber { background: var(--color-accent-dark); color: var(--color-white); }
.card:hover .icon-tile.is-teal { background: var(--color-teal); color: var(--color-white); }
.card:hover .icon-tile.is-violet { background: var(--color-violet); color: var(--color-white); }

.icon-tile.is-lg { width: 60px; height: 60px; border-radius: var(--radius-md); }
.icon-tile.is-lg svg { width: 30px; height: 30px; }

/* Cursor-reactive glow — spotlight follows the pointer via JS-set custom properties */
.spotlight-card { overflow: hidden; }
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(15, 155, 142, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}
.spotlight-card:hover::before { opacity: 1; }
.section-dark .spotlight-card::before {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.08), transparent 70%);
}

.service-card {
  position: relative;
}
.service-card h3 { margin-bottom: var(--space-2); font-size: 1.0625rem; }
.service-card p { font-size: 0.9rem; margin-bottom: 0; }
.service-card.is-live {
  border-color: var(--color-border-strong);
}
.service-card.is-live:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
}
.problem-card { display: flex; gap: var(--space-4); align-items: flex-start; }
.problem-card .icon-tile { flex-shrink: 0; background: var(--color-accent-light); color: var(--color-accent-dark); }
.problem-card h3 { margin-bottom: var(--space-1); font-size: 1.0625rem; }
.problem-card p { font-size: 0.9375rem; margin-bottom: 0; }

/* Chips (industries) */
.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Checklist */
.check-list { display: grid; gap: var(--space-3); }
.check-list li {
  display: flex;
  gap: var(--space-3);
  /* flex-start, not center: once an item wraps to two or three lines a
     centred icon drifts down the block, up to 23px away from the line it
     belongs to. */
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.check-list svg {
  width: 20px; height: 20px;
  color: var(--color-brand);
  flex-shrink: 0;
  /* centres the 20px icon against the first 22.5px line */
  margin-top: 1px;
}
.check-list strong { color: var(--color-text); }

/* Checklist on dark backgrounds */
.section-dark .check-list li {
  color: rgba(244, 246, 252, 0.75);
}
.section-dark .check-list strong {
  color: var(--color-white);
}

/* Comparison / why-us list */
.reason-list { display: grid; gap: var(--space-4); }
.reason-item { display: flex; gap: var(--space-4); }
.reason-item .icon-tile { flex-shrink: 0; }
.reason-item h3 { font-size: 1.0625rem; margin-bottom: var(--space-1); }
.reason-item p { font-size: 0.9375rem; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   8. FAQ (accordion)
   ------------------------------------------------------------------------- */
.faq-list { display: grid; gap: var(--space-3); max-width: 820px; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-ink);
}
.faq-question:hover { background: var(--color-bg); }
.faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration) var(--ease);
}
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease);
}
.faq-item[data-open="true"] .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p {
  padding: 0 var(--space-5) var(--space-4);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   9. CTA band
   ------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-white);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(420px circle at 50% 0%, rgba(242,153,74,0.16), transparent 65%);
  animation: ctaGlow 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--color-white); margin-bottom: var(--space-3); }
.cta-band p { max-width: 56ch; margin-inline: auto; margin-bottom: var(--space-5); }
.cta-band .btn-row { justify-content: center; }
@media (max-width: 620px) {
  /* 48px each side on top of the container's 24px left only 176px for a
     button whose label needs 243px, and .btn clips rather than wraps. */
  .cta-band { padding-inline: var(--space-4); }
}

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

.cta-band.has-photo {
  background-image:
    linear-gradient(155deg, rgba(14,26,28,.90) 0%, rgba(22,40,43,.88) 100%),
    url('/assets/img/photos/team-meeting.jpg');
  background-image:
    linear-gradient(155deg, rgba(14,26,28,.90) 0%, rgba(22,40,43,.88) 100%),
    image-set(url('/assets/img/photos/team-meeting.webp') type('image/webp'), url('/assets/img/photos/team-meeting.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(244, 246, 252, 0.85); }

/* Better spacing and typography hierarchy */
.card { transition: all var(--duration) var(--ease); }
.card h3 { margin-bottom: var(--space-2); }
.card p { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   17. Photo media (Unsplash — self-hosted, see README for credits)
   ------------------------------------------------------------------------- */
.page-hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); }
}
.page-hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------------------
   10. Forms
   ------------------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr 1fr; display: grid; gap: var(--space-4); }
}
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink);
}
.form-group .hint { font-size: 0.8125rem; color: var(--color-text-muted); font-weight: 400; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  background: var(--color-white);
  font-size: 0.9375rem;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
@media (pointer: coarse), (max-width: 820px) {
  /* under 16px iOS Safari zooms the viewport on focus */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; }
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--color-text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3.5px var(--color-brand-light);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-required { color: var(--color-accent-dark); }

.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
}
.form-status.is-visible { display: flex; }
.form-status.is-success {
  background: #EAF7EE;
  color: #1F7A3F;
  border: 1px solid #C6E9D0;
}
.form-status svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--space-7) var(--space-5);
}
.footer-top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 760px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}
/* The Company and Services lists carry 8-9 links each while the brand and
   contact columns carry 3-4, which left the footer ending on a badly ragged
   line. From 1000px there is room to flow the long lists into two sub-columns
   and widen those cells, so all four finish at about the same height. */
@media (min-width: 1140px) {
  /* Services carries the longest labels ("AI & Business Automation"), so its
     cell gets double share — narrower than this and the labels wrap, which
     costs more height than the two sub-columns save. */
  .footer-top { grid-template-columns: 1.05fr 1.05fr 2.1fr 0.95fr; }
  .footer-col.is-wide ul {
    display: block;
    columns: 2;
    column-gap: var(--space-3);
  }
  .footer-col.is-wide li { break-inside: avoid; margin-bottom: var(--space-2); }
}
.footer-brand .logo { color: var(--color-white); }
/* The global `p` rule paints paragraphs in the light-mode body colour, which
   is far too dark on the footer's ink background — the positioning line and
   the copyright/legal row were both being dimmed almost to invisibility.
   Everything in the footer takes the on-dark muted tone; only the column
   headings stay white. */
.site-footer p { color: inherit; }
.footer-brand p { max-width: 34ch; margin-top: var(--space-3); font-size: 0.9375rem; }
.footer-col h3 {
  color: var(--color-white);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.footer-col ul { display: grid; gap: var(--space-2); }
.footer-col a { font-size: 0.9375rem; transition: color var(--duration) var(--ease); }
.footer-col a:hover { color: var(--color-white); }
.footer-col address { font-style: normal; font-size: 0.9375rem; display: grid; gap: var(--space-2); }
.footer-col address a { padding-block: 0.25rem; }

.footer-bottom {
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
   12. Page hero (interior pages)
   ------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-7) var(--space-6);
}
.page-hero h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  /* Deliberately no ch-based max-width: at this font size 18ch resolved to
     ~825px against ~607px of available width, so it never bound and the
     headline ran to four lines. Width comes from .container instead. */
}
.page-hero .lede { max-width: 60ch; }

/* Dark page hero — same scrim recipe as the homepage video hero (measured
   >9:1 headline contrast over a worst-case white frame), but backed by a
   static photo. Each page sets its own image inline on .page-hero-bg. */
.page-hero.is-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.page-hero.is-dark > .container { position: relative; z-index: 1; }
.page-hero-bg,
.page-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero-bg {
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.page-hero-scrim {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,26,28,0.88) 0%, rgba(14,26,28,0.80) 45%, rgba(14,26,28,0.93) 100%),
    radial-gradient(900px circle at 20% 30%, rgba(15,155,142,0.30), transparent 65%),
    radial-gradient(700px circle at 85% 75%, rgba(242,153,74,0.16), transparent 60%);
}
.page-hero.is-dark h1 { color: var(--color-white); }
.page-hero.is-dark .lede { color: rgba(244, 246, 252, 0.82); }
.page-hero.is-dark .eyebrow { color: #7FD8CD; }
.page-hero.is-dark .breadcrumbs { color: rgba(244, 246, 252, 0.65); }
.page-hero.is-dark .breadcrumbs a { color: rgba(244, 246, 252, 0.85); }
.page-hero.is-dark .breadcrumbs a:hover { color: var(--color-white); }
.page-hero.is-dark .page-hero-media { box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.breadcrumbs a { padding-block: 0.25rem; }
.breadcrumbs a:hover { color: var(--color-brand); }
.breadcrumbs svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------------------
   13. Misc utilities
   ------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.flow > * + * { margin-top: var(--space-3); }

.two-col {
  display: grid;
  gap: var(--space-6);
}
/* Both forms matter: build.py wraps photos in <picture> for WebP, and a child
   combinator follows the DOM even though `picture { display: contents }` keeps
   the <img> as the layout box. Without the second selector these photos lose
   their sizing and render stretched. */
.two-col > img,
.two-col > picture > img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; align-items: center; }
}

.divider {
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin-block: var(--space-7);
}

/* -------------------------------------------------------------------------
   14. Marquee (infinite scrolling band)
   ------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-border);
  background: var(--color-bg);
  padding-block: 1.15rem;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marqueeScroll 34s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.marquee-item svg { width: 18px; height: 18px; color: var(--color-brand); flex-shrink: 0; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; overflow-x: auto; }
}

/* -------------------------------------------------------------------------
   15. Scroll-reveal system
   Gated behind .js-anim (added by a synchronous inline script in <head>)
   so content is always visible if JavaScript never runs — see base.html.
   ------------------------------------------------------------------------- */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-duration) var(--ease), transform var(--reveal-duration) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-anim [data-reveal="left"] { transform: translateX(-32px); }
.js-anim [data-reveal="right"] { transform: translateX(32px); }
.js-anim [data-reveal="scale"] { transform: scale(0.94); }
/* The horizontal reveals translate 32px. Whenever the container is
   viewport-bound (below ~1280px) that pushes past the right edge and the page
   picks up a scrollbar for the length of the animation. Clip it at <main>:
   `clip` (not `hidden`) does not create a scroll container, and the only
   sticky element on the site, .site-header, sits outside <main>. */
main { overflow-x: clip; }
/* Horizontal reveals exist to slide the two .two-col halves in from their
   own sides, which only happens at >=900px. Below that the column is full
   width, so a 32px offset just pushes past the viewport and the page picks
   up a horizontal scrollbar for the length of the reveal. Slide up instead. */
@media (max-width: 899px) {
  .js-anim [data-reveal="left"],
  .js-anim [data-reveal="right"] { transform: translateY(28px); }
}
.js-anim [data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Numbered problem list (replaces icon-card grid for variety) */
.problem-list { display: grid; gap: 0; }
.problem-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.problem-row:first-child { padding-top: 0; }
.problem-row:last-child { border-bottom: none; padding-bottom: 0; }
.problem-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.problem-row h3 { margin-bottom: var(--space-1); font-size: 1.0625rem; }
.problem-row p { font-size: 0.9375rem; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   16. Form submit spinner
   ------------------------------------------------------------------------- */
.btn .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(14,26,28,0.25);
  border-top-color: currentColor;
  animation: spin 700ms linear infinite;
}
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: 0.85; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   18. Service directory (services hub)
   A chaptered, row-based index — deliberately NOT the card grid used on the
   homepage, so the hub reads as a directory rather than another landing page.
   Each group carries its own accent colour via --group-accent.
   ------------------------------------------------------------------------- */

/* "Start here" selector — three weighted panels that jump into a group. */
.start-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .start-grid { grid-template-columns: repeat(3, 1fr); }
}
.start-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.start-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background: radial-gradient(420px circle at 85% 0%, var(--group-accent), transparent 70%);
  transition: opacity var(--duration) var(--ease);
}
.start-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.start-card:hover::before { opacity: 0.8; }
.start-card:hover .start-card-go svg { transform: translateX(4px); }
.start-card .icon-tile {
  margin-bottom: var(--space-2);
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
}
.start-card h3 { color: var(--color-white); font-size: 1.1875rem; }
.start-card p {
  color: rgba(244, 246, 252, 0.78);
  font-size: 0.9375rem;
  margin-bottom: 0;
  flex: 1;
}
.start-card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-white);
  margin-top: var(--space-2);
}
.start-card-go svg { width: 16px; height: 16px; transition: transform var(--duration) var(--ease); }

/* Group "chapters" */
.service-group { scroll-margin-top: 110px; }
.service-group + .service-group { margin-top: var(--space-8); }
.service-group-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.service-group-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 0.85;
  color: var(--group-accent);
  opacity: 0.22;
  letter-spacing: -0.04em;
}
.service-group-head h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  margin-bottom: 0.35rem;
}
.service-group-head p { margin-bottom: 0; font-size: 0.9375rem; max-width: 62ch; }
.service-group-head .count {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--group-accent);
  margin-top: var(--space-2);
}

/* Rows */
.service-rows { display: grid; gap: var(--space-2); }
.service-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--group-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.service-row.is-pending {
  background: transparent;
  border-style: dashed;
  border-left-style: solid;
  box-shadow: none;
}
a.service-row:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: var(--group-accent);
  border-left-color: var(--group-accent);
}
a.service-row:hover .service-row-go svg { transform: translateX(3px); }

.service-row .icon-tile { margin-bottom: 0; width: 46px; height: 46px; flex-shrink: 0; }
.service-row .icon-tile svg { width: 22px; height: 22px; }
.service-row-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin-bottom: 0.2rem;
}
.service-row p { font-size: 0.9375rem; margin-bottom: 0; }
.service-row-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--group-accent);
  white-space: nowrap;
}
.service-row-go svg { width: 16px; height: 16px; transition: transform var(--duration) var(--ease); }
.service-row-soon {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .service-row { grid-template-columns: auto 1fr; row-gap: var(--space-2); }
  .service-row-go, .service-row-soon { grid-column: 2; justify-self: start; }
  .service-group-head { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* -------------------------------------------------------------------------
   19. Comparison table (service pages)
   ------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.compare th, .compare td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border-strong);
}
.compare thead th:last-child { background: var(--color-brand-light); color: var(--color-brand-dark); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare tbody th {
  font-weight: 700;
  color: var(--color-text);
  width: 30%;
}
.compare td:last-child { background: rgba(15,155,142,0.035); }
/* Deliberately NOT inline-flex: a flex box takes its baseline from its first
   item, and an <svg> has none, so the badge floated above the sentence that
   follows it. Inline text plus a baseline-shifted icon keeps both on one
   baseline. nowrap stops the icon being orphaned from its word. */
.compare .mark { font-weight: 600; white-space: nowrap; }
.compare .mark svg {
  display: inline-block;          /* the reset sets svg { display: block } */
  width: 1em; height: 1em;
  vertical-align: -0.125em;       /* sits on the text baseline */
  margin-right: 0.4em;
}
.compare .mark.is-good { color: var(--color-teal); }
.compare .mark.is-bad { color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   20. Process rings (service pages)
   Each phase carries a ring filled to its share of the project, so the
   sequence reads as progress rather than as a list. Service pages only --
   the homepage uses .roadmap and About uses .ab-dark for their equivalents.
   ------------------------------------------------------------------------- */
.proc { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.proc-step { text-align: center; display: grid; justify-items: center; align-content: start; }
.proc-ring {
  position: relative; width: 104px; height: 104px; border-radius: var(--radius-full);
  display: grid; place-items: center; margin-bottom: var(--space-3);
  background: conic-gradient(var(--c) calc(var(--pct) * 1%), var(--color-bg-2) 0);
  transition: transform 0.25s var(--ease);
}
.proc-step:hover .proc-ring { transform: scale(1.05); }
.proc-ring::before {
  content: ""; position: absolute; inset: 9px; border-radius: var(--radius-full);
  background: var(--color-white); box-shadow: inset 0 1px 3px rgba(16, 20, 37, 0.08);
}
.proc-core { position: relative; display: grid; place-items: center; color: var(--ct); }
.proc-core svg { width: 34px; height: 34px; }
.proc-phase {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 0.35rem;
}
.proc-step h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
/* Reserve three lines so every pill lands on the same baseline. Copy is
   written to fit three lines at the 5-across width -- see README. */
.proc-step p {
  font-size: 0.875rem; color: var(--color-text-secondary);
  margin-bottom: var(--space-3); min-height: calc(3 * 1.55em);
}
/* The pill must never wrap: a two-line pill breaks the row rhythm. Labels are
   kept short enough to fit on one line at the narrowest 5-across column. */
.proc-deliv {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ct); background: color-mix(in srgb, var(--c) 11%, transparent);
  border-radius: var(--radius-full); padding: 0.35rem 0.5rem;
  white-space: nowrap;
}
@media (min-width: 620px) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) {
  /* three-up between tablet and wide desktop: five across below 1240 leaves a
     column too narrow for the copy to land in three lines */
  .proc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
}
@media (min-width: 1240px) {
  .proc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
}

/* -------------------------------------------------------------------------
   20b. Thank-you / 404 components
   Shared by the two utility pages; deliberately simple, since both exist to
   move the visitor onward rather than to hold them.
   ------------------------------------------------------------------------- */
.ty-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ty-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  align-items: start;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-left: 4px solid var(--c);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.ty-n {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading); font-weight: 800; font-size: 1rem;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.ty-step h3 { font-size: 1.0625rem; margin-bottom: 0.3rem; }
.ty-step p { font-size: 0.9375rem; color: var(--color-text-secondary); margin-bottom: 0; }

.ty-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.ty-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-brand); }
.ty-card p { flex: 1; }
.ty-go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 700; color: var(--color-brand);
}
.ty-card:hover .ty-go svg { transform: translateX(3px); }
.ty-go svg { transition: transform 0.2s var(--ease); }

/* -------------------------------------------------------------------------
   20c. Industry landing pages
   Their heroes use a colour wash keyed to the industry accent rather than a
   photo, so an industry page never reads as another service page -- and so
   adding one needs no new image.
   ------------------------------------------------------------------------- */
.ind-hero { position: relative; overflow: hidden; }
.ind-hero-wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 78% 6%, color-mix(in srgb, var(--ind) 42%, transparent) 0%, transparent 68%),
    radial-gradient(680px 380px at 8% 92%, color-mix(in srgb, var(--ind) 26%, transparent) 0%, transparent 66%);
}
.ind-hero > .container { position: relative; z-index: 1; }
/* Industries without a written guide yet: plain chips, never links. */
.ind-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
}
.ind-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; border-radius: var(--radius-full);
  background: var(--color-white); border: 1px solid var(--color-border);
  font-size: 0.9375rem; font-weight: 600; color: var(--color-text-secondary);
}
.ind-chip svg { color: var(--color-text-muted); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   21. About-page components
   Its own structural vocabulary, so About does not read as another copy of
   the homepage's pillar-card grid.
   ------------------------------------------------------------------------- */

/* Pull-quote — a single statement carrying real visual weight. This is our
   own positioning, never attributed to a client. */
.pullquote {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-white);
  text-align: center;
}
.pullquote::before {
  content: "\201C";
  position: absolute;
  top: -0.34em;
  left: 0.06em;
  z-index: -1;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(9rem, 24vw, 17rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.14;
  pointer-events: none;
}
.pullquote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at 78% 110%, rgba(15,155,142,0.38), transparent 68%);
  pointer-events: none;
}
.pullquote blockquote {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.375rem, 1rem + 2vw, 2.125rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--color-white);
  max-width: 760px;
  margin-inline: auto;
}
.pullquote .pullquote-note {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Principles — an editorial definition list rather than a card grid. */
.principles { display: grid; }
.principle {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  transition: background var(--duration) var(--ease);
}
.principle:last-child { border-bottom: 1px solid var(--color-border); }
@media (min-width: 860px) {
  .principle {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-6);
    align-items: start;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
  }
  .principle:hover { background: var(--color-white); }
}
.principle-label { display: flex; align-items: baseline; gap: var(--space-2); }
.principle-index {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  flex-shrink: 0;
}
.principle h3 {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  margin-bottom: 0;
}
.principle p { margin-bottom: 0; }

/* Do / don't contrast columns */
.contrast { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .contrast { grid-template-columns: 1fr 1fr; } }
.contrast-col {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
.contrast-col.is-yes {
  border-color: rgba(15, 155, 142, 0.32);
  background: var(--color-teal-light);
}
.contrast-col.is-no { background: var(--color-bg); }
.contrast-col h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}
.contrast-col h3 svg { width: 20px; height: 20px; flex-shrink: 0; }
.contrast-col.is-yes h3 svg { color: var(--color-teal); }
.contrast-col.is-no h3 svg { color: var(--color-text-muted); }
.contrast-list { display: grid; gap: var(--space-2); }
.contrast-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.contrast-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; }
.is-yes .contrast-list svg { color: var(--color-teal); }
.is-no .contrast-list svg { color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   22. Services mega menu
   Desktop: a panel under the header, opened on hover or via the chevron
   button (so it is reachable by keyboard, not hover-only).
   Mobile: the Services item expands in place inside the drawer instead.
   ------------------------------------------------------------------------- */
/* The caret is a full hit-target button with its own hover chip. A small
   negative margin pulls part of its width back out of the flex gap so the
   run of nav items still reads evenly. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-right: -0.4rem;
}
.nav-mega-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.nav-mega-btn:hover { color: var(--color-brand); background: var(--color-bg-2); }
.nav-mega-btn[aria-expanded="true"] { transform: rotate(180deg); color: var(--color-brand); }

.mega-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 90;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.mega-panel[hidden] { display: none; }
.mega-panel.is-open { display: block; animation: megaIn 180ms var(--ease) both; }
@keyframes megaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mega-panel.is-open { animation: none; }
}

.mega-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, 1fr) 0.9fr;
  padding-block: var(--space-5);
  align-items: start;
}
.mega-col-head {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--group-accent, var(--color-text-muted));
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--group-accent, var(--color-border));
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
a.mega-link:hover { background: var(--color-bg); transform: translateX(3px); }
.mega-link.is-pending { cursor: default; opacity: 0.72; }
.mega-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brand-light);
  color: var(--color-brand);
}
.mega-icon.is-amber { background: var(--color-accent-light); color: var(--color-accent-dark); }
.mega-icon.is-teal { background: var(--color-teal-light); color: var(--color-teal); }
.mega-icon.is-violet { background: var(--color-violet-light); color: var(--color-violet); }
.mega-link-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-ink);
}
.mega-soon {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.mega-aside {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.mega-aside p { font-size: 0.875rem; margin-bottom: var(--space-3); }
.mega-aside .btn { width: 100%; justify-content: center; }
.mega-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-brand);
}
.mega-all svg { transition: transform var(--duration) var(--ease); }
.mega-all:hover svg { transform: translateX(3px); }

@media (min-width: 1024px) {
  .nav-mega-btn { display: inline-flex; }
}
@media (max-width: 1023.98px) {
  /* Drawer handles it below this width; never show the desktop panel. */
  .mega-panel, .mega-panel.is-open { display: none !important; }
}

/* Mobile drawer: Services expands in place */
.mobile-nav-group { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mobile-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.mobile-sub-toggle:hover { background: var(--color-bg-2); }
.mobile-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--color-brand); }
.mobile-sub {
  display: grid;
  gap: 0.1rem;
  padding-left: var(--space-3);
  margin-block: var(--space-1);
  border-left: 2px solid var(--color-border);
}
.mobile-sub[hidden] { display: none; }
.mobile-sub a, .mobile-sub .mobile-soon {
  display: block;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
}
.mobile-sub .mobile-soon { color: var(--color-text-muted); }
.mobile-sub .mobile-soon em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
   23. Legal pages (privacy, terms)
   Long-form prose: narrower measure, clear heading rhythm, generous spacing.
   ------------------------------------------------------------------------- */
.legal-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.legal-body { max-width: 760px; }
.legal-body h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 1.0625rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.legal-body p { margin-bottom: var(--space-3); }
.legal-body a { color: var(--color-brand); font-weight: 600; }
.legal-body a:hover { text-decoration: underline; }

.legal-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
}
.legal-list li {
  position: relative;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) * -1);
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: 0.5;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
/* padding-block so these clear the 24px minimum target size (WCAG 2.2 AA);
   as bare text links they were 20px tall. */
.footer-legal a { color: inherit; padding-block: 0.25rem; }
.footer-legal a:hover { color: var(--color-white); text-decoration: underline; }
.footer-legal span { opacity: 0.4; }

/* -------------------------------------------------------------------------
   24. Roadmap — alternating horizontal process timeline (homepage)
   Steps sit above and below a shared spine, each on a stem down to a dot.
   Replaces the old flat .process-list strip.
   ------------------------------------------------------------------------- */
.roadmap { position: relative; }

.roadmap-spine {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transform: translateY(-50%);
  pointer-events: none;
}

.roadmap-steps {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.roadmap-step { position: relative; }

.roadmap-slot { display: flex; flex-direction: column; align-items: center; }
.roadmap-text { text-align: center; max-width: 30ch; }
.roadmap-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--step-accent);
  margin-bottom: 0.35rem;
}
.roadmap-text h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.roadmap-text p { font-size: 0.9375rem; margin-bottom: 0; }

/* Concentric badge: white core, coloured ring, soft halo. */
.roadmap-badge {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--step-accent);
  box-shadow: 0 0 0 7px var(--step-soft), var(--shadow-sm);
  color: var(--step-accent);
  transition: transform var(--duration) var(--ease-spring),
              box-shadow var(--duration) var(--ease);
}
.roadmap-badge svg { width: 34px; height: 34px; }
.roadmap-step:hover .roadmap-badge {
  transform: scale(1.06);
  box-shadow: 0 0 0 10px var(--step-soft), var(--shadow-md);
}

.roadmap-stem { width: 2px; background: var(--step-accent); opacity: 0.35; }
.roadmap-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--step-accent);
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border);
}

/* --- Mobile / narrow: a simple vertical run, spine hidden --- */
@media (max-width: 899px) {
  .roadmap-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: center;
    text-align: left;
  }
  .roadmap-slot { display: contents; }
  .roadmap-slot:empty { display: none; }
  /* DOM order differs per side (text-first when up, badge-first when down),
     so pin the columns explicitly — otherwise the stack zigzags. */
  .roadmap-badge { grid-column: 1; grid-row: 1; }
  .roadmap-text { grid-column: 2; grid-row: 1; text-align: left; max-width: none; }
  .roadmap-badge { width: 62px; height: 62px; box-shadow: 0 0 0 5px var(--step-soft); }
  .roadmap-badge svg { width: 26px; height: 26px; }
  .roadmap-stem, .roadmap-dot { display: none; }
}

/* --- Desktop: the alternating timeline --- */
@media (min-width: 900px) {
  .roadmap-spine { display: block; }
  .roadmap-steps {
    grid-template-columns: repeat(var(--roadmap-count, 5), 1fr);
    gap: var(--space-3);
    align-items: stretch;
  }
  .roadmap-step {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    min-height: 520px;
  }
  /* top half hugs the spine, bottom half grows away from it */
  .roadmap-step > .roadmap-slot:first-of-type { justify-content: flex-end; }
  .roadmap-step > .roadmap-slot:last-of-type { justify-content: flex-start; }

  .roadmap-step[data-side="up"] .roadmap-text { margin-bottom: var(--space-3); }
  .roadmap-step[data-side="down"] .roadmap-text { margin-top: var(--space-3); }
  .roadmap-stem { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-badge { transition: none; }
  .roadmap-step:hover .roadmap-badge { transform: none; }
}

/* -------------------------------------------------------------------------
   25. Industry tiles (homepage)
   Colour-blocked tiles with a dashed leader out to a labelled dot — top row
   labels above, bottom row below. Falls back to a plain labelled grid on
   narrow screens, where the leader lines would only add clutter.
   ------------------------------------------------------------------------- */
.industry-grid {
  display: grid;
  /* minmax(0,…) — plain 1fr has an auto minimum, so a long label like
     "Restaurants & Hospitality" would widen its own column. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 560px) { .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .industry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.industry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.industry-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 168px;
  display: grid;
  place-items: center;
  background: var(--ind);
  color: var(--color-white);
  /* one rounded corner on each diagonal, as in the reference */
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
  transition: transform var(--duration) var(--ease-spring),
              box-shadow var(--duration) var(--ease);
}
/* The <use> svg has no width/height attrs, so it falls back to the SVG
   default 300x150 — that intrinsic height was overriding the tile's
   aspect-ratio. Size it from width only, and let the tile shrink. */
.industry-tile { min-width: 0; min-height: 0; }

/* A live industry renders its tile as <a>. Same class, so every rule above
   applies unchanged; these only neutralise the anchor defaults and give it a
   visible focus ring, since the tile is now a real target. */
a.industry-tile { text-decoration: none; cursor: pointer; }
a.industry-tile:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.industry:has(a.industry-tile) .industry-label { text-decoration: underline; text-underline-offset: 3px; }
.industry:has(a.industry-tile:hover) .industry-label { color: var(--ind); }
.industry-tile svg { width: 46%; height: auto; aspect-ratio: 1 / 1; }
.industry:hover .industry-tile {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Notch punched out of the tile edge where the leader meets it. */
.industry-notch {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Must match the section behind it — it reads as a cutout, not a dot.
     Defaults to white; .section-bg overrides it below. */
  background: var(--notch-bg, var(--color-white));
  transform: translateX(-50%);
}
.section-bg .industry-grid { --notch-bg: var(--color-bg); }
.section-dark .industry-grid { --notch-bg: var(--color-ink); }
.industry-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.25;
}
.industry-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ind);
  flex-shrink: 0;
}
.industry-leader {
  width: 0;
  border-left: 2px dashed var(--color-border-strong);
}

/* Narrow screens: label sits under the tile, leaders removed. */
@media (max-width: 1099px) {
  .industry-leader, .industry-notch { display: none; }
  .industry-dot { display: none; }
  .industry-label { margin-top: var(--space-2); }
  .industry[data-side="up"] { flex-direction: column-reverse; }
  .industry[data-side="up"] .industry-label { margin-top: 0; margin-bottom: var(--space-2); }
}

/* Wide screens: alternating leaders above / below. */
@media (min-width: 1100px) {
  /* 18 sub-columns: each tile spans 2, and the lower row starts one
     sub-column in — that half-tile offset is what gives the brick stagger. */
  .industry-grid {
    grid-template-columns: repeat(18, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: var(--space-3);
    align-items: stretch;
  }
  .industry { grid-column: span 2; justify-content: flex-start; }
  .industry[data-side="up"] { grid-row: 1; }
  .industry[data-side="down"] { grid-row: 2; }
  /* half-tile offset that produces the brick stagger — must stay inside
     this media query, or it invents a phantom column on narrow grids. */
  .industry.is-offset { grid-column: 2 / span 2; }
  .industry-tile { max-width: none; }
  .industry-label { font-size: 0.75rem; line-height: 1.3; }
  .industry-leader { height: 26px; }

  /* Top-row labels vary between one and two lines, which was pushing their
     tiles down by a line and leaving the row of tiles ragged. Reserve two
     lines so every stack is the same height, and bottom-anchor the column so
     the tiles still line up even if a label ever wraps to three. */
  .industry[data-side="up"] { justify-content: flex-end; }
  .industry[data-side="up"] .industry-label { min-height: 2.6em; }
  .industry[data-side="up"] .industry-label { margin-bottom: 0.4rem; }
  .industry[data-side="up"] .industry-dot { margin-bottom: 0.35rem; }
  .industry[data-side="up"] .industry-notch { top: -8px; }
  .industry[data-side="down"] .industry-label { margin-top: 0.4rem; }
  .industry[data-side="down"] .industry-dot { margin-top: 0.35rem; }
  .industry[data-side="down"] .industry-notch { bottom: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .industry-tile { transition: none; }
  .industry:hover .industry-tile { transform: none; }
}

/* Secondary industries, kept as chips so nothing is dropped from the list. */
.industry-more {
  margin-top: var(--space-6);
  text-align: center;
}
.industry-more p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------------
   26. Bento — one lead panel plus supporting cells
   Used for "Why partner with us" so it does not read as a second copy of
   the services card grid. Deliberately unequal: the lead panel carries the
   strongest point and the CTA.
   ------------------------------------------------------------------------- */
.bento { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 899px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lead, .bento-wide { grid-column: span 2; }
}
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; }
  .bento-lead { grid-row: span 2; }
  .bento-wide { grid-column: span 2; }
}
.bento-lead {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-white);
  position: relative; overflow: hidden; isolation: isolate;
}
.bento-lead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at 85% 0%, rgba(15,155,142,.5), transparent 70%);
}
.bento-lead h3 { color: var(--color-white); font-size: 1.5rem; margin-bottom: var(--space-2); }
.bento-lead p { color: rgba(244,246,252,.8); margin-bottom: 0; }
.bento-lead .icon-tile { background: rgba(255,255,255,.12); color: var(--color-white); }
.bento-cell {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.bento-cell:hover { border-color: var(--color-brand); transform: translateY(-3px); }
.bento-cell h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.bento-cell p { font-size: .9375rem; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   27. Automation journey — enlarged stops plus a capability grid
   Homepage "AI & Business Automation". Four stops on a dashed spine, then
   the six capabilities as a plain three-column grid rather than a tick list.
   ------------------------------------------------------------------------- */
.ai-spine { position: relative; padding-block: var(--space-4); }
.ai-spine-track {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3);
  position: relative;
}
@media (min-width: 760px) {
  .ai-spine-track { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  /* connector only makes sense once all four sit on one line */
  .ai-spine-track::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: 38px; height: 2px;
    background-image: repeating-linear-gradient(90deg,
      rgba(255,255,255,.38) 0 6px, transparent 6px 14px);
    /* one full dash period, so the loop is seamless */
    background-size: 14px 2px;
    background-repeat: repeat-x;
    animation: aiFlowDash 1.1s linear infinite;
  }
  /* amber arrowhead entering each stop after the first */
  .ai-stop + .ai-stop::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 38px;
    transform: translateY(-50%);
    border-left: 9px solid var(--color-accent);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
}
@keyframes aiFlowDash {
  from { background-position: 0 0; }
  to { background-position: 14px 0; }
}
.ai-stop { position: relative; text-align: center; }
.ai-stop-badge {
  width: 76px; height: 76px; margin: 0 auto var(--space-3);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--stop-accent); color: var(--color-white);
  box-shadow: 0 0 0 8px rgba(255,255,255,.06);
  position: relative; z-index: 1;
}
.ai-stop-badge svg { width: 30px; height: 30px; }
.ai-stop h3 { font-size: .9375rem; color: var(--color-white); margin-bottom: .2rem; }
.ai-stop p { font-size: .8125rem; color: rgba(244,246,252,.65); margin: 0; }
.ai-caps { display: grid; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); }
@media (min-width: 700px) { .ai-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ai-caps { grid-template-columns: repeat(3, 1fr); } }
.ai-cap { padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.14); }
.ai-cap strong { display: block; color: var(--color-white); font-size: .9375rem; margin-bottom: .2rem; }
.ai-cap span { font-size: .8125rem; color: rgba(244,246,252,.65); }

@media (prefers-reduced-motion: reduce) {
  .ai-spine-track::before { animation: none; }
}

/* -------------------------------------------------------------------------
   28. Inclusion cards — oversized ghost numerals
   Service pages, "What's included". Each card carries a large outlined
   numeral bleeding off the corner in its own accent, set behind the content
   via z-index so it never competes with the text.
   ------------------------------------------------------------------------- */
.inc-g { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .inc-g { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .inc-g { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.inc-g-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--inc-accent, var(--color-brand));
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.inc-g-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.inc-g-num {
  position: absolute; right: .35rem; top: -1.1rem; z-index: -1;
  font-family: var(--font-heading); font-weight: 800; font-size: 5.5rem; line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--inc-accent, var(--color-brand));
  opacity: .18;
}
.inc-g-card .icon-tile { margin-bottom: var(--space-3); }
.inc-g-card h3 { font-size: 1rem; margin-bottom: .3rem; }
.inc-g-card p { font-size: .875rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .inc-g-card { transition: none; }
  .inc-g-card:hover { transform: none; }
}

/* Glass tiles on a dark panel (direction 2) */
.ab-dark {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg); padding: clamp(2rem,5vw,3.5rem);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-white);
}
.ab-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(560px circle at 10% 0%, rgba(15,155,142,.42), transparent 65%),
              radial-gradient(460px circle at 95% 100%, rgba(242,153,74,.24), transparent 62%);
}
.ab-dark h2, .ab-dark h3, .ab-dark h4 { color: var(--color-white); }
.ab-dark > p { color: rgba(244,246,252,.8); max-width: 64ch; }
.ab-glass { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .ab-glass { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .ab-glass { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ab-glass-tile {
  padding: var(--space-4); border-radius: var(--radius-md);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.ab-glass-tile:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.ab-glass-tile .icon-tile { width: 38px; height: 38px; margin-bottom: var(--space-3);
  background: rgba(255,255,255,.12); color: var(--color-white); }
.ab-glass-tile .icon-tile svg { width: 19px; height: 19px; }
.ab-glass-tile strong { display: block; font-size: .9375rem; margin-bottom: .2rem; }
.ab-glass-tile span { font-size: .8125rem; color: rgba(244,246,252,.7); }

/* Narrative rail with a connecting line (direction 4) */
.ab-rail { position: relative; padding-left: 3rem; }
.ab-rail::before {
  content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--color-brand), var(--color-accent));
  border-radius: var(--radius-full);
}
.ab-rail-item { position: relative; padding-bottom: var(--space-6); }
.ab-rail-item:last-child { padding-bottom: 0; }
.ab-rail-item::before {
  content: attr(data-step); position: absolute; left: -3rem; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-white); border: 2px solid var(--color-brand);
  color: var(--color-brand); font-family: var(--font-heading); font-weight: 800;
  font-size: .75rem; display: flex; align-items: center; justify-content: center;
}
.ab-rail-item h3 { font-size: 1.0625rem; margin-bottom: .3rem; }
.ab-rail-item p { margin-bottom: 0; font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
  .ab-glass-tile { transition: none; }
  .ab-glass-tile:hover { transform: none; }
}

/* Three-way comparison — the two usual options, and us in the middle */
.ab-three { display: grid; gap: var(--space-4); align-items: stretch; }
/* 700, not 860: stacked, the three columns stop reading as a comparison. */
@media (min-width: 700px) { .ab-three { grid-template-columns: 1fr 1.15fr 1fr; } }
.ab-three-col {
  padding: var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); background: var(--color-bg);
}
.ab-three-col.is-us {
  background: var(--color-white); border-color: var(--color-brand); box-shadow: var(--shadow-lg);
}
.ab-three-kind {
  display: block; font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.ab-three-col.is-us .ab-three-kind { color: var(--color-brand); }
.ab-three-col h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.ab-three-col ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.ab-three-col li {
  display: flex; gap: .5rem; font-size: .875rem; line-height: 1.45;
  color: var(--color-text-secondary);
}
.ab-three-col li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.ab-three-col.is-us li svg { color: var(--color-teal); }
.ab-three-col:not(.is-us) li svg { color: var(--color-text-muted); }

/* Orbit — one hub, capabilities around it */
.ab-orbit {
  position: relative; display: grid; place-items: center;
  margin-inline: auto; max-width: 580px;
  /* must be square: node positions are percentages, so a non-square box
     turns the orbit into an ellipse (radii came out 193 vs 227) */
  aspect-ratio: 1 / 1;
}
.ab-orbit-ring {
  position: absolute; inset: 10%; border-radius: 50%;
  border: 1px dashed var(--color-border-strong); pointer-events: none;
}
.ab-orbit-hub {
  width: 152px; height: 152px; border-radius: 50%;
  background: linear-gradient(155deg, var(--color-ink), var(--color-ink-2));
  color: var(--color-white); display: grid; place-items: center; text-align: center;
  padding: var(--space-3); box-shadow: var(--shadow-lg); position: relative; z-index: 1;
}
.ab-orbit-hub strong { font-family: var(--font-heading); font-size: 1rem; line-height: 1.25; }
.ab-orbit-node { position: absolute; width: 132px; text-align: center; transform: translate(-50%, -50%); }
.ab-orbit-node .icon-tile { margin: 0 auto var(--space-2); }
.ab-orbit-node strong {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: .8125rem; color: var(--color-ink); line-height: 1.25;
}
@media (max-width: 859px) {
  .ab-orbit { aspect-ratio: auto; display: block; max-width: none; }
  .ab-orbit-ring { display: none; }
  .ab-orbit-hub {
    width: auto; height: auto; border-radius: var(--radius-lg);
    margin-bottom: var(--space-4); padding: var(--space-5);
  }
  .ab-orbit-node {
    position: static; transform: none; width: auto; text-align: left;
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center;
    padding-block: var(--space-3); border-bottom: 1px solid var(--color-border);
  }
  .ab-orbit-node .icon-tile { margin: 0; }
}

/* -------------------------------------------------------------------------
   29. Two-tone panel — About, "Working together"
   One object split down the middle: a light half for the commitments and a
   dark half for the refusals. The tonal contrast carries the meaning, so the
   list markers stay minimal.
   ------------------------------------------------------------------------- */
.wt-tone {
  display: grid; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .wt-tone { grid-template-columns: 1fr 1fr; } }
.wt-tone-side { padding: clamp(1.5rem, 4vw, 2.5rem); }
.wt-tone-side.is-light { background: var(--color-white); }
.wt-tone-side.is-dark {
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-white);
}
.wt-tone-side h3 { font-size: 1.125rem; margin-bottom: var(--space-4); }
.wt-tone-side.is-dark h3 { color: var(--color-white); }
.wt-tone-head { display: flex; align-items: center; gap: .55rem; }
.wt-tone-head svg { width: 20px; height: 20px; flex-shrink: 0; }
.wt-tone-side.is-light .wt-tone-head svg { color: var(--color-teal); }
.wt-tone-side.is-dark .wt-tone-head svg { color: var(--color-accent); }
.wt-tone-side ul { display: grid; gap: var(--space-3); }
.wt-tone-side li { font-size: .9375rem; line-height: 1.5; padding-left: var(--space-4);
  position: relative; }
.wt-tone-side.is-light li { color: var(--color-text-secondary); }
.wt-tone-side.is-dark li { color: rgba(244,246,252,.75); }
.wt-tone-side li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 2px; border-radius: 2px;
}
.wt-tone-side.is-light li::before { background: var(--color-teal); }
.wt-tone-side.is-dark li::before { background: var(--color-accent); }
/* -------------------------------------------------------------------------
   30. Launch additions: form states, staging review flags, pricing, demos,
       founder, tech stack, security block, consent banner, demo intro
   ------------------------------------------------------------------------- */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form-status.is-error { background: #FDECEC; color: #A32A2A; border: 1px solid #F5C6C6; margin-bottom: var(--space-4); }
.form-status.is-error a { color: inherit; text-decoration: underline; }

/* Staging-only markers for values still to be supplied. */
.review-flag { background: #FFF1B8; color: #6B4E00; padding: 0 .3em; border-radius: 4px; font-weight: 700; font-size: .9em; }
.review-flag-box {
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
  border: 2px dashed #D9A400; background: #FFF8DB; color: #5C4300;
  border-radius: var(--radius-md); font-size: .9375rem;
}
.review-flag-box strong { display: block; margin-bottom: .25rem; }

/* "From $X" chip on service heroes */
.price-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; width: fit-content;
  margin: var(--space-4) 0 0; padding: .45rem .95rem; border-radius: var(--radius-full);
  background: var(--color-brand-light); color: var(--color-text-secondary); font-size: .875rem;
}
.price-chip strong { color: var(--color-ink); }
.price-chip a { color: var(--color-brand); font-weight: 700; }
.page-hero.is-dark .price-chip { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--color-text-on-dark); }
.page-hero.is-dark .price-chip strong { color: var(--color-white); }
.page-hero.is-dark .price-chip a { color: var(--color-accent); }
.service-row-price { display: inline-block; margin-top: .35rem; font-size: .8125rem; font-weight: 700; color: var(--color-brand); }

/* Pricing page */
.price-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.price-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.price-label { font-family: var(--font-heading); font-weight: 800; color: var(--color-ink); font-size: 1rem; }
.price-from { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.price-from span { font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.price-from strong { font-family: var(--font-heading); font-size: 1.75rem; color: var(--color-brand); line-height: 1.1; }
.price-range { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--color-text-secondary); }
.price-note { margin: 0; font-size: .875rem; color: var(--color-text-muted); flex: 1; }
.price-card .ty-go { margin-top: var(--space-2); }
.price-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }

.plan-grid { display: grid; gap: var(--space-4); max-width: 1080px; margin-inline: auto; align-items: stretch; }
@media (min-width: 860px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); position: relative; border-radius: 0; }
.plan-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--color-border-strong); }
.plan-card:nth-child(2)::before { background: var(--color-accent); }
.plan-card:nth-child(3)::before { background: var(--color-brand); }
.plan-card.is-featured { background: var(--color-ink); border-color: var(--color-ink); box-shadow: var(--shadow-lg, var(--shadow-md)); color: #fff; }
@media (min-width: 860px) { .plan-card.is-featured { transform: translateY(-10px); } }
.plan-badge {
  align-self: flex-start; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-brand); background: var(--color-brand-light); padding: .25rem .65rem; border-radius: var(--radius-full);
}
.plan-badge.is-empty { visibility: hidden; }
.plan-card.is-featured .plan-badge { color: var(--color-ink); background: var(--color-accent); }
.plan-card h3 { margin: 0; font-size: 1.5rem; }
.plan-card.is-featured h3 { color: #fff; }
.plan-tagline { margin: calc(var(--space-2) * -1) 0 0; color: var(--color-text-muted); font-size: .9375rem; min-height: 2.9em; }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: .3rem; }
.plan-price strong { font-family: var(--font-heading); font-size: 3rem; color: var(--color-ink); line-height: 1; }
.plan-price span { color: var(--color-text-muted); font-size: .9375rem; }
.plan-hours { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: var(--radius-md, 12px); background: var(--color-bg); border: 1px solid var(--color-border); }
.plan-hours strong { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-brand); line-height: 1; white-space: nowrap; }
.plan-hours span { font-size: .875rem; line-height: 1.35; color: var(--color-text-muted); }
.plan-lead { margin: 0; font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.plan-lead.is-empty { visibility: hidden; }
.plan-card .check-list { flex: 1; justify-content: flex-start; align-content: flex-start; }
.plan-card .check-list li { align-items: flex-start; }
.plan-card .btn { justify-content: center; }
.plan-card.is-featured .plan-tagline, .plan-card.is-featured .plan-price span, .plan-card.is-featured .plan-lead,
.plan-card.is-featured .plan-hours span, .plan-card.is-featured .check-list li { color: rgba(255,255,255,.78); }
.plan-card.is-featured .plan-price strong { color: #fff; }
.plan-card.is-featured .plan-hours { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.plan-card.is-featured .plan-hours strong { color: var(--color-accent); }
.plan-card.is-featured .check-list svg { color: var(--color-accent); }

/* Pricing: payment schedule + remote working */
.pay-grid { display: grid; gap: var(--space-7, 3.5rem); align-items: start; margin-top: var(--space-6, 2.5rem); }
@media (min-width: 900px) { .pay-grid { grid-template-columns: 1fr 1fr; } }
.pay-schedules { display: grid; gap: var(--space-4); }
.pay-schedule { background: #fff; border: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); }
.pay-label { margin: 0 0 var(--space-2); font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.pay-bar { display: flex; gap: 4px; }
.pay-bar span { padding: .85rem 1rem; background: var(--color-brand-light); color: var(--color-brand-dark, var(--color-brand)); font-size: .875rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pay-bar span:nth-child(2) { background: var(--color-brand); color: #fff; }
.pay-bar span:nth-child(3) { background: var(--color-ink); color: #fff; }
.pay-bar strong { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1; color: inherit; }
.pay-terms { margin: 0; display: grid; }
.pay-terms > div { display: grid; gap: .2rem; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.pay-terms dt { font-weight: 700; color: var(--color-ink); }
.pay-terms dd { margin: 0; color: var(--color-text-secondary); font-size: .9375rem; line-height: 1.5; }
.remote-title { margin: .25rem 0 var(--space-4); font-size: 1.5rem; }
.remote-grid { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
@media (min-width: 560px) { .remote-grid { grid-template-columns: 1fr 1fr; } }
.remote-tile { background: #fff; border: 1px solid var(--color-border); padding: var(--space-4); display: flex; flex-direction: column; gap: .4rem; }
.remote-tile h3 { margin: 0; font-size: 1rem; }
.remote-tile p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--color-text-secondary); }
.remote-icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--color-brand-light); color: var(--color-brand); margin-bottom: .35rem; }
.remote-icon svg { width: 20px; height: 20px; }

/* Demo cards (homepage strip + /work/) */
.demo-grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .demo-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.demo-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.demo-shot {
  aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--color-brand-light), var(--color-violet-light));
  border-bottom: 1px solid var(--color-border);
}
.demo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.demo-shot svg { width: 48px; height: 48px; color: var(--color-brand); opacity: .55; }
.demo-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.demo-tag { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.demo-body h3 { margin: 0; font-size: 1.125rem; }
.demo-body ul { display: grid; gap: .3rem; font-size: .875rem; color: var(--color-text-secondary); list-style: none; padding: 0; margin: 0; }
.demo-body li::before { content: "\2713"; color: var(--color-teal); font-weight: 800; margin-right: .45rem; }
.demo-scores { display: flex; flex-wrap: wrap; gap: .4rem; }
.demo-scores span { font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--radius-full); background: var(--color-teal-light); color: #0D766E; }
.demo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-top: auto; padding-top: var(--space-2); }
.demo-actions .btn svg { width: 16px; height: 16px; }
.demo-card.is-pending { border-style: dashed; border-width: 2px; }
.demo-notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);
  border-radius: var(--radius-md); background: var(--color-accent-light); border-left: 3px solid var(--color-accent);
}
.demo-notice svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent-dark); margin-top: 2px; }
.demo-notice p { margin: 0; font-size: .9375rem; color: var(--color-text); }

/* Founder — photo, name, bio and credentials as one bordered card. */
.founder-card {
  display: grid; gap: var(--space-5); align-items: start;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 820px) {
  .founder-card { grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-6); }
}
.founder-media {
  width: 160px; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(145deg, var(--color-brand), var(--color-violet));
}
.founder-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-initials { font-family: var(--font-heading); font-weight: 800; font-size: 2.75rem; color: var(--color-white); }
.founder-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: var(--color-ink); margin-bottom: var(--space-3); }
.founder-name span { display: block; font-weight: 600; font-size: .875rem; color: var(--color-text-muted); }
/* This design sets no default paragraph margin, so each component supplies its
   own: without this the bio renders as one unbroken block. */
.founder-body p { margin-bottom: var(--space-3); }
.founder-body p:last-child { margin-bottom: 0; }

/* Tech stack band */
.stack-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* auto-fit, not a fixed 4: with five groups a fixed count strands the last one
   alone on its own row. */
@media (min-width: 1000px) { .stack-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.stack-group { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); }
.stack-group h3 { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.stack-chips { display: flex; flex-wrap: wrap; gap: var(--space-3) .5rem; list-style: none; padding: 0; margin: 0; }
/* Each tool is a mark with its name beneath: the logo is the recognition, the
   name is the fallback for anyone who does not know it (and for screen
   readers, which cannot read a decorative SVG). */
.stack-tool {
  flex: 0 0 auto; width: 74px; display: flex; flex-direction: column;
  align-items: center; gap: .45rem; text-align: center;
}
.stack-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-md);
  /* Each logo sits in its own brand colour, with the tile tinted to match.
     Hover only lifts the tile: no colour changes on the way in or out. */
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--color-border));
  transition: transform var(--duration) var(--ease);
}
.stack-mark svg { width: 22px; height: 22px; display: block; }
/* Wordmark logos are wide and short; a 22px square crushes them to a smear. */
.stack-tool--wordmark .stack-mark svg { width: 34px; height: auto; }
.stack-tool:hover .stack-mark { transform: translateY(-2px); }
.stack-name { font-size: .75rem; font-weight: 600; color: var(--color-ink); line-height: 1.25; }
.stack-also {
  margin: var(--space-5) 0 0; text-align: center;
  font-size: .875rem; color: var(--color-text-muted);
}
@media (prefers-reduced-motion: reduce) { .stack-tool:hover .stack-mark { transform: none; } }

/* Security / data-handling block */
.sec-block { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--color-white); }
.sec-head { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.sec-head .icon-tile { flex-shrink: 0; margin: 0; }
.sec-head h2 { margin-bottom: var(--space-2); }
.sec-head p { margin: 0; max-width: 62ch; }
.sec-list { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .sec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-list li { padding-left: var(--space-4); border-left: 3px solid var(--color-teal); }
.sec-list strong { display: block; color: var(--color-ink); margin-bottom: .2rem; }
.sec-list span { font-size: .9rem; color: var(--color-text-secondary); }

/* Cookie consent banner */
.consent {
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 90;
  max-width: 460px; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-ink); color: var(--color-text-on-dark);
  border: 1px solid rgba(244, 246, 252, .1); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: consent-in .35s ease-out both;
}
.consent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-accent));
}
.consent[hidden] { display: none; }
@media (min-width: 640px) { .consent { right: auto; left: var(--space-5); bottom: var(--space-5); } }
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.consent-head { display: flex; align-items: center; gap: var(--space-3); padding-right: 2rem; }
.consent-head strong { font-size: 1rem; color: var(--color-white); }
.consent-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: rgba(244, 246, 252, .08); color: var(--color-accent);
}
.consent-icon svg { width: 20px; height: 20px; }
.consent p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--color-text-on-dark-muted); }
.consent em { font-style: normal; color: var(--color-text-on-dark); }
.consent a { color: var(--color-white); text-decoration: underline; }
.consent-close {
  position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--color-text-on-dark-muted);
}
.consent-close svg { width: 18px; height: 18px; }
.consent-close:hover, .consent-close:focus-visible { background: rgba(244, 246, 252, .1); color: var(--color-white); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.consent-actions .consent-more { margin-right: auto; font-size: .8125rem; color: var(--color-text-on-dark-muted); }
.consent-actions .consent-more:hover { color: var(--color-white); }
.consent .btn { padding-top: .6rem; padding-bottom: .6rem; }
.consent .btn-outline { border-color: rgba(244, 246, 252, .35); color: var(--color-white); }
@media (max-width: 380px) {
  .consent-actions .consent-more { flex-basis: 100%; }
  .consent-actions .btn { flex: 1; }
}
.footer-link-btn { background: none; border: 0; padding: .25rem 0; color: inherit; font: inherit; cursor: pointer; }
.footer-link-btn:hover { color: var(--color-white); text-decoration: underline; }

/* First-visit demo intro card */
.demo-intro {
  position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 80;
  width: min(340px, calc(100vw - 2 * var(--space-3))); padding: var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.demo-intro[hidden] { display: none; }
.demo-intro.is-visible { opacity: 1; transform: none; }
.demo-intro strong { display: block; font-family: var(--font-heading); color: var(--color-ink); margin-bottom: .25rem; padding-right: 2rem; }
.demo-intro p { font-size: .875rem; margin-bottom: var(--space-3); }
.demo-intro-close {
  position: absolute; top: .5rem; right: .5rem; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--radius-full); color: var(--color-text-muted); cursor: pointer;
}
.demo-intro-close:hover { background: var(--color-bg); color: var(--color-ink); }
.demo-intro-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .demo-intro { transition: none; } }

/* build.py wraps photos in <picture> for WebP. display: contents keeps the
   <img> as the layout box, so grid/flex rules written for img still apply. */
picture { display: contents; }
/* <source> has no display:none in the UA stylesheet — it is simply an empty
   element. With the picture above it removed from the box tree, each <source>
   is promoted to a real grid/flex item and silently claims a cell, pushing the
   image and the text apart. Hide them explicitly. */
picture > source { display: none; }

/* Hero button rows sat directly against the paragraph above them on any page
   whose markup did not carry an inline margin (the industry heroes). Same
   1.5rem those inline styles use, so nothing else shifts. */
.page-hero .btn-row,
.hero .btn-row { margin-top: var(--space-4); }

/* ---- Blog ---------------------------------------------------------------- */
.post-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-brand); }
.post-card-media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--color-border); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.post-card h3 { margin: 0; font-size: 1.125rem; }
.post-card p { font-size: .9375rem; color: var(--color-text-secondary); margin: 0; flex: 1; }
.post-tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-brand); background: var(--color-brand-light);
  padding: .25rem .6rem; border-radius: var(--radius-full);
}
.post-card-meta, .post-meta {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-size: .8125rem; color: var(--color-text-muted);
}
.post-meta { margin-top: var(--space-4); font-weight: 600; }
.post-card-meta span[aria-hidden], .post-meta span[aria-hidden] { opacity: .5; }

/* Feature image between the hero and the prose. */
.post-feature { max-width: 900px; margin-top: calc(var(--space-5) * -1); margin-bottom: var(--space-2); }
.post-feature img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.page-hero .post-tag { margin-bottom: var(--space-3); }

/* Article layout: contents column beside the prose on desktop, stacked below.
   1000px is the point where a 240px column still leaves a comfortable measure
   for the text. */
.post-layout { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1000px) {
  .post-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-7); }
  .post-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    max-height: calc(100vh - var(--header-h) - var(--space-5));
    overflow-y: auto;
  }
  .post-layout .post-body { max-width: 720px; }
}

/* Table of contents */
.post-toc {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
@media (min-width: 1000px) { .post-toc { margin-bottom: 0; } }
.post-toc a.is-current { color: var(--color-brand); }
.post-toc li.is-current { color: var(--color-brand); font-weight: 700; }
.post-toc h2 {
  font-size: .75rem !important; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-muted); margin: 0 0 var(--space-2) !important;
  padding: 0 !important; border: 0 !important;
}
.post-toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; list-style: decimal; }
.post-toc li { color: var(--color-text-muted); font-size: .9375rem; }
.post-toc a { color: var(--color-text-secondary); font-weight: 600; }
.post-toc a:hover { color: var(--color-brand); text-decoration: underline; }

/* Article prose: same measure and rhythm as the legal pages. */
.post-body { max-width: 760px; }
.post-body h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.post-body h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-top: var(--space-6); margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { font-size: 1.0625rem; margin-top: var(--space-5); margin-bottom: var(--space-2); }
.post-body p { margin-bottom: var(--space-3); }
.post-body a { color: var(--color-brand); font-weight: 600; }
.post-body a:hover { text-decoration: underline; }
/* Numbered lists use the native marker: the bullet style these lists inherit
   positions its dot absolutely, which left the digits off the text baseline. */
.post-body ol.legal-list { list-style: decimal; padding-left: 1.6rem; }
.post-body ol.legal-list li { padding-left: .3rem; }
.post-body ol.legal-list li::before { content: none; }
.post-body ol.legal-list li::marker { color: var(--color-brand); font-weight: 800; }
.post-body .table-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
.post-body table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.post-body th, .post-body td {
  border: 1px solid var(--color-border); padding: .6rem .7rem; text-align: left; vertical-align: top;
}
.post-body th { background: var(--color-bg); font-size: .8125rem; }

/* Founder credentials, under the bio on the About page. */
.founder-facts {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
  margin: var(--space-4) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
}
.founder-facts li {
  font-size: .8125rem; font-weight: 700; color: var(--color-text-secondary);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: .35rem .8rem; border-radius: var(--radius-full);
}

/* -------------------------------------------------------------------------
   Local pricing page (/website-pricing/, rupee packages for local clients).
   Everything is prefixed lp- and built from the site tokens: teal for
   interactive states, orange only for CTAs and the "Most popular" marks,
   ink for headings and the featured card.
   ------------------------------------------------------------------------- */
.lp-hero { padding-bottom: var(--space-5); }
.lp-hero-grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 960px) { .lp-hero-grid { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-7); } }
.lp-hero h1 { max-width: 20ch; }
.lp-hero .btn-row { margin-top: var(--space-5); }
.lp-trust {
  display: flex; align-items: center; gap: .5rem; margin-top: var(--space-4);
  font-size: .9375rem; font-weight: 600; color: var(--color-text-secondary);
}
.lp-trust svg { color: var(--color-brand); flex-shrink: 0; }

.lp-glance {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-lg);
}
.lp-glance-title {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-2); padding-inline: .5rem;
}
.lp-glance ul { display: grid; gap: .35rem; }
.lp-glance a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: .85rem .9rem; border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.lp-glance a:hover { background: var(--color-bg); transform: translateX(3px); }
.lp-glance .is-popular a { background: var(--color-brand-light); border-color: rgba(12, 132, 120, .25); }
.lp-glance .is-popular a:hover { border-color: var(--color-brand); }
.lp-glance a > span { display: grid; gap: .15rem; min-width: 0; }
.lp-glance strong { font-family: var(--font-heading); font-weight: 800; color: var(--color-ink); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lp-glance em {
  font-style: normal; font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-ink); background: var(--color-accent); padding: .1rem .5rem; border-radius: var(--radius-full);
}
.lp-glance small { font-size: .8125rem; color: var(--color-text-muted); }
.lp-glance b { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.lp-glance-foot {
  margin-top: var(--space-3); padding: var(--space-3) .5rem 0; border-top: 1px solid var(--color-border);
  font-size: .8125rem; color: var(--color-text-muted);
}

/* Package cards */
.lp-packages { padding-top: var(--space-6); }
.lp-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 720px) and (max-width: 1079.98px) {
  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-card.is-popular { order: -1; grid-column: 1 / -1; }
  .lp-card.is-popular .lp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
}
@media (min-width: 1080px) {
  .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .lp-card.is-popular { margin-top: calc(var(--space-4) * -1); }
}
.lp-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  scroll-margin-top: calc(var(--header-h, 80px) + 1.5rem);
}
.lp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.lp-card-head { display: grid; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.lp-card h3 { font-size: 1.375rem; margin: 0; }
.lp-sub { font-size: .9375rem; margin: 0; }
@media (min-width: 1080px) { .lp-sub { min-height: 3em; } }
.lp-price { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.lp-price strong { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem); line-height: 1; letter-spacing: -.03em; color: var(--color-ink); }
.lp-price span { font-size: .875rem; font-weight: 600; color: var(--color-text-muted); }
.lp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; }
.lp-meta div { background: var(--color-bg); border-radius: var(--radius-sm); padding: .55rem .75rem; }
.lp-meta dt { font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.lp-meta dd { margin: .1rem 0 0; font-size: .875rem; font-weight: 700; color: var(--color-ink); }
.lp-card .btn { width: 100%; margin-top: var(--space-1); }
.lp-note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); }
.lp-note svg { flex-shrink: 0; }
.lp-inc-title { margin: var(--space-4) 0 var(--space-3); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.lp-list { gap: .6rem; }
.lp-list li { font-size: .9rem; }
.lp-list svg { width: 18px; height: 18px; margin-top: 2px; }
.lp-list .is-lead span { font-weight: 700; color: var(--color-ink); }
.lp-pages { display: block; margin-top: .15rem; font-size: .8125rem; color: var(--color-text-muted); }

/* Featured: the ink card, the one dark surface in the grid */
.lp-card.is-popular {
  background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  border: 1px solid var(--color-ink); box-shadow: var(--shadow-lg);
  padding-top: calc(var(--space-5) + .75rem);
}
.lp-card.is-popular::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at 50% 0%, rgba(242, 153, 74, .16), transparent 70%);
}
.lp-card.is-popular > * { position: relative; }
.lp-card.is-popular:hover { border-color: var(--color-accent); box-shadow: 0 28px 70px rgba(14, 26, 28, .28); }
.lp-card.is-popular h3, .lp-card.is-popular .lp-price strong, .lp-card.is-popular .lp-meta dd, .lp-card.is-popular .is-lead span { color: var(--color-white); }
.lp-card.is-popular .lp-sub, .lp-card.is-popular .lp-list li { color: rgba(244, 246, 252, .78); }
.lp-card.is-popular .lp-price span, .lp-card.is-popular .lp-note, .lp-card.is-popular .lp-inc-title,
.lp-card.is-popular .lp-meta dt, .lp-card.is-popular .lp-pages { color: var(--color-text-on-dark-muted); }
.lp-card.is-popular .lp-card-head { border-color: rgba(255, 255, 255, .12); }
.lp-card.is-popular .lp-meta div { background: rgba(255, 255, 255, .07); }
.lp-card.is-popular .lp-list svg { color: var(--color-accent); }
.lp-card.is-popular .lp-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-ink); background: var(--color-accent);
  padding: .4rem 1rem; border-radius: var(--radius-full); box-shadow: 0 6px 18px rgba(242, 153, 74, .35);
}
.lp-fine { margin-top: var(--space-5); text-align: center; font-size: .875rem; color: var(--color-text-muted); }

/* Comparison table */
.lp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.lp-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.lp-table th, .lp-table td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--color-border); }
.lp-table tbody tr:last-child > * { border-bottom: 0; }
.lp-table th[scope="row"], .lp-table thead th:first-child, .lp-table tfoot td:first-child {
  text-align: left; font-weight: 600; color: var(--color-text); position: sticky; left: 0; z-index: 1;
  background: var(--color-white); min-width: 170px;
}
.lp-table thead th { font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem; color: var(--color-ink); padding-block: 1.1rem; vertical-align: bottom; }
.lp-table thead th span { display: block; margin-top: .2rem; font-family: var(--font-body); font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); }
.lp-table thead th:first-child { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.lp-table tbody tr:hover > * { background-color: var(--color-bg); }
.lp-table td { color: var(--color-text-secondary); font-weight: 600; }
.lp-table .is-popular { background-color: #F1F9F8; }
.lp-table thead th.is-popular { box-shadow: inset 0 3px 0 var(--color-accent); }
.lp-table thead th.is-popular span { color: var(--color-accent-dark); }
.lp-yes { display: inline-block; color: var(--color-brand); vertical-align: middle; }
.lp-no { color: var(--color-text-muted); font-weight: 700; font-size: 1.125rem; line-height: 1; }
.lp-table tfoot td { border-top: 1px solid var(--color-border); border-bottom: 0; padding-block: 1.1rem; }
.lp-table tfoot .btn { padding: .65rem 1.1rem; font-size: .875rem; }
.lp-scroll-hint { display: none; align-items: center; justify-content: center; gap: .35rem; margin-top: var(--space-2); font-size: .8125rem; color: var(--color-text-muted); }
@media (max-width: 719.98px) { .lp-scroll-hint { display: flex; } }

/* Domain & hosting */
.lp-host-grid { display: grid; gap: var(--space-4); max-width: 1040px; margin-inline: auto; }
@media (min-width: 860px) { .lp-host-grid { grid-template-columns: 0.85fr 1.15fr; } }
.lp-host-card { display: flex; flex-direction: column; gap: var(--space-3); }
.lp-host-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.lp-host-card.is-main { border-color: rgba(12, 132, 120, .35); }
.lp-host-card .icon-tile { margin-bottom: 0; }
.lp-host-card h3 { margin: 0; }
.lp-host-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.lp-host-price strong { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; color: var(--color-ink); line-height: 1.1; }
.lp-host-price span { font-size: .875rem; font-weight: 600; color: var(--color-text-muted); }
.lp-host-card > p:not(.lp-host-price):not(.lp-callout) { font-size: .9375rem; }
@media (min-width: 560px) { .lp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); } }
.lp-callout {
  margin: auto 0 0; padding: .85rem 1rem; border-radius: var(--radius-md);
  background: var(--color-accent-light); border-left: 3px solid var(--color-accent);
  font-size: .875rem; color: var(--color-text);
}
.lp-callout strong { color: var(--color-ink); }

/* GST note: deliberately quiet */
.lp-gst {
  display: grid; gap: var(--space-4); max-width: 1040px; margin: var(--space-5) auto 0;
  padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
}
@media (min-width: 860px) { .lp-gst { grid-template-columns: 1fr 1fr 1fr; align-items: center; } }
.lp-gst h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.lp-gst p { font-size: .875rem; margin: 0; }
.lp-gst .lp-gst-foot { margin-top: .5rem; color: var(--color-text-muted); }
.lp-bill { margin: 0; background: var(--color-bg); border-radius: var(--radius-md); padding: .85rem 1rem; font-size: .875rem; }
.lp-bill div { display: flex; justify-content: space-between; gap: var(--space-3); padding: .3rem 0; }
.lp-bill dt { color: var(--color-text-secondary); }
.lp-bill dd { margin: 0; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-bill .is-total { margin-top: .3rem; padding-top: .55rem; border-top: 1px solid var(--color-border-strong); }
.lp-bill .is-total dt, .lp-bill .is-total dd { font-weight: 800; color: var(--color-ink); }

/* Add-ons */
.lp-addons { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.lp-addon {
  display: flex; flex-direction: column; gap: .5rem; padding: var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.lp-addon:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.lp-addon .icon-tile { width: 40px; height: 40px; margin-bottom: .25rem; }
.lp-addon .icon-tile svg { width: 20px; height: 20px; }
.lp-addon:hover .icon-tile { background: var(--color-brand); color: var(--color-white); }
.lp-addon h3 { font-size: 1rem; line-height: 1.35; margin: 0; flex: 1; }
.lp-addon p { margin: 0; display: grid; }
.lp-addon p span { font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.lp-addon p strong { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--color-ink); }
.lp-addon p small { font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); margin-left: .1rem; }
.lp-addons-cta { margin-top: var(--space-5); }

/* Not included */
.lp-excl { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .lp-excl { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-7); } }
.lp-excl .lp-callout { margin-top: var(--space-4); }
.lp-excl-list { display: grid; gap: .1rem var(--space-4); }
@media (min-width: 560px) { .lp-excl-list { grid-template-columns: 1fr 1fr; } }
.lp-excl-list li {
  display: flex; align-items: center; gap: .7rem; padding: .7rem 0;
  border-bottom: 1px solid var(--color-border); font-size: .9375rem; color: var(--color-text-secondary);
}
.lp-excl-list li::before {
  content: ""; flex-shrink: 0; width: 14px; height: 2px; border-radius: 2px; background: var(--color-text-muted);
}

/* Payment steps */
.lp-steps { display: grid; gap: var(--space-4); position: relative; }
@media (min-width: 640px) { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .lp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
  .lp-steps::before {
    content: ""; position: absolute; top: calc(var(--space-4) + 22px); left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-brand-bright));
    opacity: .35;
  }
}
.lp-step {
  position: relative; background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.lp-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-step-num {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-3);
  border-radius: var(--radius-full); background: var(--color-brand-light); color: var(--color-brand);
  font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem;
}
.lp-step.is-pay .lp-step-num { background: var(--color-accent); color: var(--color-ink); }
.lp-step.is-launch .lp-step-num { background: var(--color-brand); color: var(--color-white); }
.lp-step h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.lp-step p { font-size: .875rem; margin: 0; }

/* Annual renewal */
.lp-renew { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .lp-renew { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.lp-renew-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--color-white); box-shadow: var(--shadow-md);
}
.lp-renew-row { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.lp-renew-row .icon-tile { flex-shrink: 0; margin: 0; }
.lp-renew-row h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.lp-renew-row p { font-size: .9375rem; margin: 0; }
.lp-renew-row p strong { color: var(--color-ink); }
.lp-renew-foot { display: flex; align-items: center; gap: .5rem; margin: var(--space-3) 0 0; font-size: .9375rem; font-weight: 600; color: var(--color-brand); }

.cta-band .lp-cta-small { margin: var(--space-4) auto 0; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .lp-card:hover, .lp-addon:hover, .lp-step:hover, .lp-host-card:hover, .lp-glance a:hover { transform: none; }
}