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

/* Fonts are declared here rather than @imported from fonts.css: an @import
   is a second render-blocking request that cannot start until this file has
   downloaded. Keep this block and assets/fonts/fonts.css in step. Each family
   is split in two files, as Google Fonts serves it: the latin file covers
   everyday text, and the browser only fetches the latin-ext one when a page
   uses a character from its unicode-range (₹, for example). */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/red-hat-display-latin-ext.woff2') format('woff2-variations'),
       url('/assets/fonts/red-hat-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/red-hat-display-latin.woff2') format('woff2-variations'),
       url('/assets/fonts/red-hat-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Red Hat Text stops at 700: body text set to 800 renders at 700. */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/red-hat-text-latin-ext.woff2') format('woff2-variations'),
       url('/assets/fonts/red-hat-text-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/red-hat-text-latin.woff2') format('woff2-variations'),
       url('/assets/fonts/red-hat-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   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: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Red Hat Text', -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); }

/* No page-wide fade-in on <body>: while the whole page is at opacity 0 the
   browser records no contentful paint, which pushed mobile LCP past 4s. The
   hero has its own entrance (see "Scroll-reveal system"). */

.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,
.consent .btn-outline:hover,
.consent .btn-outline:focus-visible {
  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; }
}
/* The arrow tip makes the artwork top-heavy: the wordmark's centre sits 13.2%
   of the image height below the image's own centre (y=130 vs 103.5 in the 201
   tall viewBox). Beside the desktop nav that reads as the wordmark hanging
   below the links, so lift the lockup until the wordmark is on their line. */
@media (min-width: 1024px) {
  .nav-bar .logo-lockup { transform: translateY(-13.2%); }
}
.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);
}
/* Eight 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: 1320px) {
  .nav-list { gap: var(--space-3); }
  .nav-link { font-size: 0.875rem; }
  .nav-actions .btn { padding-inline: 1rem; font-size: 0.8125rem; }
}
@media (min-width: 1024px) and (max-width: 1080px) {
  .nav-list { gap: 0.875rem; }
}
.nav-link {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  position: relative;
  padding-block: 4px;
  /* Never break a label ("Live Demos") onto two lines: that makes the whole
     bar taller and pushes the header down. */
  white-space: nowrap;
  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; }

/* The drawer drops down over the page instead of sitting in the header's
   flow: in flow it pushed the hero down while open. It scrolls on its own,
   since main.js locks the page scroll while it is open. */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
  padding: var(--space-4) 0 var(--space-5);
  box-shadow: 0 18px 40px -12px rgba(14, 26, 28, 0.28);
}
.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: #0B1719;
}
/* The network animation, drawn by main.js. */
.hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Scrim dims the network behind the headline and leaves it clear at the
   edges, so lines and points never compete with the text. */
.hero-scrim {
  z-index: -1;
  background: radial-gradient(ellipse 58% 62% at 50% 50%, rgba(11,23,25,0.66) 0%, rgba(11,23,25,0.34) 55%, rgba(11,23,25,0) 100%);
}

.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;
  }
}

/* -------------------------------------------------------------------------
   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; }
/* Own top padding: the question's grey hover background ends at its bottom
   edge, and without this the answer text sat flush against it. */
.faq-answer p {
  padding: var(--space-3) 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 {
  /* Ink base with two soft glows, so the footer reads as a lit surface rather
     than a flat slab: brand teal from the top right, a cooler blue from the
     bottom left. */
  background:
    radial-gradient(52rem 26rem at 100% 0%, rgba(15,155,142,0.20), transparent 62%),
    radial-gradient(44rem 24rem at 0% 100%, rgba(59,130,166,0.16), transparent 62%),
    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) var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Phones stack everything. From 520px the two link lists sit side by side;
   from 760px the contact column joins them under a full-width brand block;
   from 1060px the brand block becomes the first of four columns. The link
   columns are sized so the longest labels ("AI & Business Automation", the
   email address) stay on one line at every step. */
@media (min-width: 520px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .site-footer { padding-block: var(--space-8) var(--space-5); }
  .footer-top { grid-template-columns: 1.2fr 1fr 1.2fr; padding-bottom: var(--space-7); }
  .footer-col:last-child { grid-column: auto; }
}
@media (min-width: 1060px) {
  .footer-top { grid-template-columns: 1.35fr 1.3fr 0.9fr 1.25fr; }
  .footer-brand { grid-column: auto; }
}
@media (min-width: 1200px) {
  .footer-top { grid-template-columns: 1.6fr 1.2fr 1fr 1.2fr; column-gap: var(--space-6); }
}
.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: 38ch; margin-top: var(--space-4); font-size: 1rem; line-height: 1.7; }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
/* Rounded-square glass buttons; they fill with the brand colour on hover. */
.footer-social a {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.footer-social a:hover, .footer-social a:focus-visible { color: var(--color-white); background: var(--color-brand); border-color: var(--color-brand); transform: translateY(-2px); }
.footer-col h3 {
  color: var(--color-white);
  font-size: 1.0625rem;
  margin-bottom: var(--space-4);
}
.footer-col ul { display: grid; gap: 0.875rem; }
.footer-col a { font-size: 1rem; transition: color var(--duration) var(--ease); }
.footer-col a:hover { color: var(--color-white); }
.footer-col address { font-style: normal; font-size: 1rem; display: grid; gap: 0.875rem; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.footer-contact-row svg { flex: none; margin-top: 0.2rem; color: var(--color-brand-bright); }
.footer-contact-row span { min-width: 0; overflow-wrap: anywhere; }
a.footer-contact-row:hover svg { color: var(--color-accent); }

.footer-bottom {
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   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);
}
/* Same footprint on every page: content always spans the full container
   (no per-page max-width, so breadcrumbs line up with the header logo) and
   shorter heroes are held to a common height with the copy centred. */
.page-hero.is-dark > .container { position: relative; z-index: 1; width: 100%; }
@media (min-width: 960px) {
  .page-hero.is-dark { display: flex; align-items: center; min-height: 480px; }
}
.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); }
/* Hero extras that used to sit on the light hero: legal date, article byline
   and category tag, and the local pricing trust line. */
.page-hero.is-dark .legal-meta,
.page-hero.is-dark .post-meta,
.page-hero.is-dark .lp-trust { color: rgba(244, 246, 252, 0.72); }
.page-hero.is-dark .post-meta a { color: rgba(244, 246, 252, 0.92); }
.page-hero.is-dark .post-meta a:hover { color: var(--color-white); }
.page-hero.is-dark .post-tag { color: #7FD8CD; background: rgba(127, 216, 205, 0.14); }
.page-hero.is-dark .lp-trust svg { color: #7FD8CD; }
.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);
}
/* Hero content is above the fold, so it fades in with CSS alone from the first
   paint instead of waiting for main.js to add .is-visible. Hidden-until-JS
   headlines were the page's Largest Contentful Paint, and on a phone they
   pushed it past 4 seconds. */
.js-anim .hero [data-reveal],
.js-anim .page-hero [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
  animation: hero-in var(--reveal-duration) var(--ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
}
/* The headline is the LCP element. Chrome does not count text it first paints
   mid-fade, so the h1 slides in at full opacity instead of fading. */
.js-anim .hero h1[data-reveal],
.js-anim .page-hero h1[data-reveal] { animation-name: hero-rise; }
@keyframes hero-rise {
  from { transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: 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 the shared dark photo hero (section 12), each with its own
   sector photo; --ind keys the accent colour used further down the page.
   ------------------------------------------------------------------------- */

/* "The problem": heading on the left (stays on screen from 1024px), the
   numbered problems down the right. --ind is set on the section. */
.ind-problems { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .ind-problems { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .ind-problems-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.ind-problems-head .lede { margin-top: var(--space-3); }
.ind-callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-top: var(--space-5); padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-ink); color: rgba(244, 246, 252, .78);
}
.ind-callout p { margin: 0; font-size: .9375rem; color: inherit; }
.ind-callout strong { color: var(--color-white); }
.ind-callout-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--color-accent); color: var(--color-ink);
}
.ind-callout-icon svg { width: 20px; height: 20px; }
.ind-rows { list-style: none; margin: 0; padding: 0; }
.ind-rows li {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4);
  padding-block: var(--space-5); border-bottom: 1px solid var(--color-border);
}
.ind-rows li:first-child { padding-top: 0; }
.ind-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.ind-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--ind) 45%, white);
  color: var(--ind); font-family: var(--font-heading); font-weight: 800;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.ind-rows li:hover .ind-num { background: var(--ind); border-color: var(--ind); color: var(--color-white); }
.ind-rows h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.ind-rows p { font-size: .9375rem; margin: 0; }

/* "What we build": a dark band washed with the industry colour. */
.ind-build { overflow: hidden; }
.ind-build::after {
  content: ""; position: absolute; pointer-events: none;
  width: 720px; height: 720px; right: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ind) 55%, transparent), transparent 65%);
  opacity: .55;
}
.ind-build .eyebrow { color: #7FD8CD; }
.ind-build-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
@media (min-width: 1024px) {
  .ind-build-head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: var(--space-6); }
}
.ind-build-head h2 { margin: 0; }
.ind-build-head p { margin: 0; font-size: 1.0625rem; }
.ind-build-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .ind-build-list { grid-template-columns: repeat(2, 1fr); } }
.ind-build-list li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(244, 246, 252, .72); font-size: .9375rem; line-height: 1.55;
}
.ind-build-list li:hover { background: rgba(255, 255, 255, .075); border-color: color-mix(in srgb, var(--ind) 60%, transparent); }
.ind-build-list strong { color: var(--color-white); }
.ind-check {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ind) 35%, transparent);
  color: var(--color-white);
}
.ind-check svg { width: 16px; height: 16px; }
/* 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.25rem 0.875rem;
  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; }
/* The pipes between the legal links. On phones the three links no longer fit
   on one line, and a pipe left hanging at the end of the first line looks
   like a mistake, so the pipes go and the gap widens instead. */
.footer-legal span { opacity: 0.45; }
@media (max-width: 479px) {
  .footer-legal { column-gap: var(--space-4); }
  .footer-legal span { display: none; }
}

/* -------------------------------------------------------------------------
   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-tile .industry-ext {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  opacity: 0.85;
}
.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); }
  /* column-reverse puts the tile first, and flex-end then pins it to the top
     of the cell, so a label that wraps to two lines grows downward instead of
     lifting its tile out of line with the rest of the row. */
  .industry[data-side="up"] { flex-direction: column-reverse; justify-content: flex-end; }
  /* The label sits under the tile on both sides here, so both keep the same
     margin-top from the rule above; no side-specific spacing. */
}

/* 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; }

/* 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)); } }
/* A lone card on the last row sits in the middle rather than hard left. */
@media (min-width: 760px) {
  .demo-grid > .demo-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-5)) / 2); }
}
@media (min-width: 1100px) {
  .demo-grid.is-3 > .demo-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .demo-grid.is-3 > .demo-card:last-child:nth-child(3n+1) { grid-column: 2; }
}
.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); }

/* Local sample-sites hub (/local-demos/): demos grouped by ₹ package. */
.ld-jump { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .ld-jump { grid-template-columns: repeat(3, 1fr); } }
.ld-jump a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ld-jump a:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.ld-jump a.is-popular { border-color: var(--color-accent); }
.ld-jump strong { color: var(--color-ink); }
.ld-jump span { font-size: .875rem; color: var(--color-text-secondary); }
.ld-pack { scroll-margin-top: var(--header-h); }
.ld-pack-head {
  display: grid; gap: var(--space-3); align-items: end; margin-bottom: var(--space-5);
}
@media (min-width: 900px) { .ld-pack-head { grid-template-columns: 1fr auto; gap: var(--space-6); } }
.ld-pack-head h2 { margin-bottom: var(--space-2); }
.ld-pack-head p { margin: 0; max-width: 640px; }
.ld-price { display: flex; flex-direction: column; }
.ld-price strong { font-family: var(--font-heading); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); color: var(--color-ink); line-height: 1.1; }
.ld-price span { font-size: .875rem; color: var(--color-text-muted); }
@media (min-width: 900px) { .ld-price { text-align: right; } }

/* Private blog stats page (/blog-stats/). */
.st-app { display: grid; gap: var(--space-4); }
/* Several blocks here set display: grid, which would beat the hidden attribute. */
.st-app [hidden] { display: none !important; }
.st-app h2 { margin-bottom: var(--space-2); }
.st-sample {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-accent-light); border-left: 3px solid var(--color-accent); font-size: .9375rem;
}
.st-login { max-width: 420px; display: grid; gap: var(--space-2); }
.st-login label { font-weight: 600; font-size: .9375rem; }
.st-login input {
  padding: .75rem .9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font: inherit; background: var(--color-white);
}
.st-login input:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.st-login .btn { justify-self: start; margin-top: var(--space-2); }
.st-msg { margin: 0; min-height: 1.4em; font-size: .9375rem; color: var(--color-accent-dark); }
.st-setup { max-width: 760px; }
#st-dash { display: grid; gap: var(--space-4); }
/* Grid children must be allowed to shrink: the wide tables inside would
   otherwise stretch the whole column past a phone's width. */
.st-app > *, #st-dash > *, .st-two > *, .st-three > * { min-width: 0; }
.st-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.st-range { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px; background: var(--color-white); }
.st-range button {
  padding: .45rem .9rem; border-radius: var(--radius-full); font-size: .875rem; font-weight: 600;
  color: var(--color-text-secondary);
}
.st-range button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-white); }
.st-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; font-size: .875rem; }
.st-updated { color: var(--color-text-muted); }
.st-errors {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-accent-light); border-left: 3px solid var(--color-accent-dark); font-size: .9375rem;
}
.st-errors p { margin: 0; }
.st-errors p + p { margin-top: var(--space-2); }
.st-kpis { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.st-kpi {
  display: grid; gap: 2px; padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white);
}
.st-kpi-label { font-size: .8125rem; font-weight: 600; color: var(--color-text-secondary); }
.st-kpi strong { font-family: var(--font-heading); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); color: var(--color-ink); line-height: 1.15; white-space: nowrap; }
.st-kpi small { font-size: .75rem; color: var(--color-text-muted); }
.st-h { font-size: 1.125rem; }
.st-sub { margin: 0 0 var(--space-3); font-size: .875rem; color: var(--color-text-muted); }
.st-chart { position: relative; }
.st-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-grid { stroke: var(--color-border); stroke-width: 1; }
.st-axis { font-size: 12px; fill: var(--color-text-muted); font-family: var(--font-body); }
.st-line { fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-area { fill: var(--color-brand); fill-opacity: .1; }
.st-dot { fill: var(--color-brand); stroke: var(--color-white); stroke-width: 2; }
.st-cross { stroke: var(--color-text-muted); stroke-width: 1; }
.st-hit { fill: transparent; cursor: crosshair; }
.st-tip {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  display: grid; padding: .4rem .6rem; border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-white); font-size: .8125rem; white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.st-tip span { color: rgba(255, 255, 255, .7); font-size: .75rem; }
.st-table { border-collapse: collapse; width: 100%; font-size: .875rem; min-width: 820px; }
.st-table th, .st-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.st-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.st-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-table td > a { font-weight: 700; color: var(--color-ink); }
.st-table td > a:hover { color: var(--color-brand); }
.st-table small { display: block; color: var(--color-text-muted); font-size: .75rem; margin-top: 2px; }
.st-table details { margin-top: var(--space-2); }
.st-table summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--color-brand); }
.st-table details ul { margin: var(--space-2) 0 0; padding-left: 1rem; display: grid; gap: 4px; }
.st-table details span { color: var(--color-text-muted); font-size: .75rem; }
.st-table td:last-child a { display: block; margin-top: 2px; color: var(--color-brand); font-weight: 600; font-size: .8125rem; white-space: nowrap; }
.st-ix { display: block; font-weight: 600; color: var(--color-text-secondary); }
.st-ix.is-ok { color: var(--color-brand-dark); }
.st-ix.is-no { color: var(--color-accent-dark); }
.st-ix span { font-weight: 800; }
.st-table td:last-child small { white-space: nowrap; }

.st-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-delta { font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; }
.st-delta.is-up { color: var(--color-brand-dark); }
.st-delta.is-down { color: var(--color-accent-dark); }
.st-delta.is-new { color: var(--color-brand-dark); }
.st-kpi small > span:not(.st-delta) { color: var(--color-text-muted); font-weight: 400; }
.st-table .st-delta { font-size: .75rem; }
.st-two, .st-three { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .st-two { grid-template-columns: repeat(2, 1fr); }
  .st-three { grid-template-columns: repeat(3, 1fr); }
}
.st-empty { margin: 0; font-size: .875rem; color: var(--color-text-muted); }

/* Share bars: one hue, thin, rounded end, value always written out. */
.st-bars { display: grid; gap: var(--space-3); }
.st-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-2); font-size: .875rem; }
.st-bar-label { color: var(--color-text); }
.st-bar-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--color-bg); overflow: hidden; }
.st-bar-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--color-brand); }

.st-opps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.st-opps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.st-opps li:last-child { border-bottom: 0; padding-bottom: 0; }
.st-opps a { font-weight: 700; color: var(--color-ink); }
.st-opps a:hover { color: var(--color-brand); }
.st-opps p { margin: 2px 0 0; font-size: .875rem; color: var(--color-text-secondary); }
.st-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: .3rem .55rem; border-radius: var(--radius-full); background: var(--color-brand-light); color: var(--color-brand-dark); }
.st-queries { min-width: 560px; }

.st-live-wrap { position: relative; }
.st-live { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-white);
  font-size: .8125rem; font-weight: 600; color: var(--color-text-secondary); }
.st-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.st-live.is-active .st-live-dot { background: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-light); }
.st-live-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(320px, 90vw);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-white); box-shadow: var(--shadow-md); font-size: .8125rem; }
.st-live-list p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.st-live-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-live-list li { display: flex; justify-content: space-between; gap: var(--space-3); }
/* Pages missing from Google: a heads-up, quieter than an error. */
.st-alert {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-accent-light); border-left: 3px solid var(--color-accent); font-size: .9375rem;
}
.st-alert p { margin: 0; }
.st-alert ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; display: grid; gap: 2px; }
.st-alert a { font-weight: 600; color: var(--color-ink); }
.st-alert li span { color: var(--color-text-secondary); }
/* Publish-day markers on the charts. */
.st-mark { stroke: var(--color-accent-dark); stroke-width: 1; stroke-dasharray: 3 3; }
.st-mark-dot { fill: var(--color-accent-dark); }
.st-key { margin: var(--space-2) 0 0; font-size: .75rem; color: var(--color-text-muted); }
.st-key-mark { display: inline-block; width: 8px; height: 8px; margin-right: 4px; transform: rotate(45deg); background: var(--color-accent-dark); }
.st-tip em { font-style: normal; color: #F6C392; font-size: .75rem; }
/* Sortable column headings. */
.st-table th button {
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
}
.st-table th button:hover, .st-table th[aria-sort] button { color: var(--color-ink); }
.st-table th button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* Wide tables scroll sideways inside their card instead of spilling out. */
.st-app .table-wrap { overflow-x: auto; }
#st-table { min-width: 1180px; }
/* Keep the title column readable: without this the eleven number columns
   squeeze it to one word per line. */
#st-table th:first-child, #st-table td:first-child { min-width: 260px; }
/* Eight headline numbers: two even rows of four rather than seven and one. */
@media (min-width: 900px) {
  .st-kpis { grid-template-columns: repeat(4, 1fr); }
}
.st-owner label { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; cursor: pointer; }
.st-owner input { width: 18px; height: 18px; accent-color: var(--color-brand); }
.st-owner .st-sub { margin: var(--space-2) 0 0; }

/* 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: var(--space-6); 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);
}
/* inline-block: a bottom margin has no effect on a plain inline span. */
.page-hero .post-tag { display: inline-block; margin-bottom: 1.1rem; }

/* 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, .post-body h3[id] { 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; }
/* A worked example the reader can copy: a prompt, a checklist line. */
.post-body .post-example {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-brand); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-bg); font-size: .9375rem;
}
.post-body .post-example p:last-child { margin-bottom: 0; }
.post-body .post-example-label {
  display: block; margin-bottom: .35rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-brand);
}
.post-body .faq-list { margin-top: var(--space-3); }
/* .post-body p adds a bottom margin; FAQ answers carry their own padding. */
.post-body .faq-answer p { margin-bottom: 0; }

/* 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; }
.cta-band .cta-call { margin: var(--space-4) auto 0; font-size: .9375rem; }
.cta-band .cta-call a { color: var(--color-white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

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


/* ---------- Password-protected Zoho form pages (/intake/, /partner-apply/; noindex, direct link only) ---------- */
.gate-wrap { max-width: 860px; }
/* display:grid on the cards and lists would otherwise beat the hidden attribute. */
.gate-wrap [hidden] { display: none !important; }
.gate-card { max-width: 460px; margin-inline: auto; display: grid; gap: var(--space-2); }
.gate-card .icon-tile { margin: 0 0 var(--space-1); }
.gate-card h2 { font-size: 1.375rem; margin: 0; }
.gate-card p { margin: 0; font-size: .9375rem; }
.gate-card label { font-weight: 600; font-size: .9375rem; margin-top: var(--space-2); }
.gate-card input {
  padding: .75rem .9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font: inherit; background: var(--color-white);
}
.gate-card input:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.gate-card .btn { justify-self: start; margin-top: var(--space-2); }
.gate-msg { min-height: 1.4em; color: var(--color-accent-dark); }
.gate-help { color: var(--color-text-muted); }
.gate-help a, .gate-fallback a { color: var(--color-brand); font-weight: 600; }
.gate-notes {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; gap: .6rem;
}
.gate-notes li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; color: var(--color-text-muted); }
.gate-notes svg { flex-shrink: 0; margin-top: 2px; color: var(--color-brand); }
.gate-frame {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-white); box-shadow: var(--shadow-md); overflow: hidden;
}
/* Tall enough to show the start of the form before Zoho reports its height. */
.gate-frame iframe { display: block; width: 100%; height: 1400px; border: 0; }
.gate-sample { margin: 0; padding: var(--space-6) var(--space-5); text-align: center; color: var(--color-text-muted); }
.gate-fallback { margin: var(--space-4) 0 0; font-size: .875rem; color: var(--color-text-muted); text-align: center; }

/* -------------------------------------------------------------------------
   Page header, every inner page.
   The page's own photo over a still grid; deliberately not the homepage
   network. The photo is .page-hero-bg itself. While the hamburger menu is
   showing (below 1024, the nav breakpoint) it is a full background behind
   the copy; from 1024 it becomes a tilted, framed picture beside the copy.
   .lp-hero (the local pricing page) is left out: its right-hand side already
   holds the packages card, so it keeps the photo as a background.
   These rules build on the base .page-hero.is-dark styles further up.
   ------------------------------------------------------------------------- */
.page-hero.is-dark:not(.lp-hero) {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
/* The 48px grid: main.js ("Page header grid hover") snaps to the same size.
   The first layer is the darkening that keeps the copy readable over the
   photo; the framed layout below drops it. */
.page-hero.is-dark:not(.lp-hero) .page-hero-scrim {
  background-image:
    linear-gradient(180deg, rgba(14,26,28,.86) 0%, rgba(14,26,28,.78) 45%, rgba(14,26,28,.92) 100%),
    radial-gradient(720px circle at 0% 0%, rgba(15,155,142,.4), transparent 62%),
    radial-gradient(620px circle at 100% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, auto, auto, 48px 48px, 48px 48px;
}
.page-hero.is-dark:not(.lp-hero)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 1;
  background: linear-gradient(90deg, var(--color-brand), #5FD6C6 45%, var(--color-accent));
}
.page-hero.is-dark:not(.lp-hero) h1 { font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.12; margin-bottom: var(--space-5); }
.page-hero.is-dark:not(.lp-hero) .lede { font-size: 1.125rem; }
@media (min-width: 1024px) {
  .page-hero.is-dark:not(.lp-hero) { min-height: 600px; }
  .page-hero.is-dark:not(.lp-hero) .lede { font-size: 1.1875rem; }
  .page-hero.is-dark:not(.lp-hero) > .container > * { max-width: min(600px, 52%); }
  .page-hero.is-dark:not(.lp-hero) .page-hero-scrim {
    background-image:
      radial-gradient(720px circle at 0% 0%, rgba(15,155,142,.4), transparent 62%),
      radial-gradient(620px circle at 100% 100%, rgba(242,153,74,.16), transparent 60%),
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
  }
  .page-hero.is-dark:not(.lp-hero) .page-hero-bg {
    inset: auto; z-index: 2; top: 50%;
    right: max(3rem, calc((100vw - var(--container-max)) / 2 + 3rem));
    width: min(480px, 38vw); height: min(400px, 32vw); border-radius: 28px;
    transform: translateY(-50%) rotate(2.5deg);
    outline: 1px solid rgba(95,214,198,.45); outline-offset: 16px;
    box-shadow: 0 34px 80px rgba(0,0,0,.55);
  }
}
/* Squares main.js lights up under the pointer; they fade out behind it. */
.grid-cells { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.grid-cell {
  position: absolute; width: 47px; height: 47px;
  background: rgba(95,214,198,.2); box-shadow: inset 0 0 0 1px rgba(95,214,198,.55), 0 0 18px rgba(95,214,198,.28);
  transition: opacity 900ms ease-out;
}
.grid-cell.is-warm { background: rgba(242,153,74,.24); box-shadow: inset 0 0 0 1px rgba(242,153,74,.6), 0 0 18px rgba(242,153,74,.3); }
.grid-cell.is-out { opacity: 0; }

/* -------------------------------------------------------------------------
   About page redesign.
   Everything here is scoped to .about-v2, the wrapper in content/about.html,
   because the security block and the tools band are shared with other pages
   and must keep their plain look there. The rules build on the base About
   styles above (.ab-three, .ab-dark, .wt-tone, .founder-card ...): looks
   apply at every width, and each block's desktop layout sits in its own
   min-width query, so small screens keep the base stacking.
   ------------------------------------------------------------------------- */
.about-v2 > section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.about-v2 .section-head { max-width: 780px; margin-inline: auto; text-align: center; }
.about-v2 .section-head .lede { margin-inline: auto; }
.about-v2 .section-head h2,
.about-v2 .ab-dark h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.18; }

/* Why: the middle card is dark and, on wide screens, steps forward over the
   two it beats. */
.about-v2 .ab-three-col { background: var(--color-white); border: 1px dashed var(--color-border-strong); }
.about-v2 .ab-three-col:not(.is-us) li svg { color: #C2553B; opacity: .75; }
.about-v2 .ab-three-col.is-us {
  position: relative; isolation: isolate; overflow: hidden; border: 0;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  box-shadow: 0 34px 80px rgba(11,23,25,.38), 0 0 0 1px rgba(95,214,198,.35);
}
.about-v2 .ab-three-col.is-us::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at 15% 0%, rgba(15,155,142,.55), transparent 65%),
              radial-gradient(340px circle at 100% 100%, rgba(242,153,74,.26), transparent 62%);
}
.about-v2 .ab-three-col.is-us .ab-three-kind {
  display: inline-block; color: #7FE3D5; background: rgba(95,214,198,.14);
  border: 1px solid rgba(95,214,198,.3); padding: .35rem .8rem; border-radius: var(--radius-full); margin-bottom: var(--space-3);
}
.about-v2 .ab-three-col.is-us h3 { color: var(--color-white); font-size: 1.5rem; }
.about-v2 .ab-three-col.is-us ul { gap: var(--space-3); margin-top: var(--space-4); }
.about-v2 .ab-three-col.is-us li { color: rgba(244,246,252,.9); font-size: 1rem; }
.about-v2 .ab-three-col.is-us li svg {
  width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%;
  background: #5FD6C6; color: #0B1719;
}
.about-v2 .ab-three-note {
  max-width: 62ch; margin: var(--space-6) auto 0; text-align: center;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.65; color: var(--color-ink);
}
/* Three columns from 700 (see .ab-three): until 960 they are narrow, so
   trim the padding and type rather than stack and lose the comparison. */
@media (min-width: 700px) and (max-width: 959px) {
  .about-v2 .ab-three { gap: var(--space-3); }
  .about-v2 .ab-three-col { padding: 1.25rem; }
  .about-v2 .ab-three-col.is-us h3 { font-size: 1.25rem; }
  .about-v2 .ab-three-col.is-us li { font-size: .9375rem; }
}
@media (min-width: 960px) {
  .about-v2 .ab-three { grid-template-columns: 1fr 1.2fr 1fr; gap: 0; align-items: center; max-width: 1080px; margin-inline: auto; }
  .about-v2 .ab-three-col { padding: 2.25rem; }
  .about-v2 .ab-three-col:first-child { padding-right: 3.25rem; }
  .about-v2 .ab-three-col:last-child { padding-left: 3.25rem; }
  .about-v2 .ab-three-col h3 { font-size: 1.375rem; }
  .about-v2 .ab-three-col li { font-size: .9375rem; }
  .about-v2 .ab-three-col.is-us { z-index: 1; margin-inline: -1.25rem; padding: 3.25rem 2.75rem; }
  .about-v2 .ab-three-col.is-us h3 { font-size: 2rem; }
  .about-v2 .ab-three-col.is-us li { font-size: 1.0625rem; }
  .about-v2 .ab-three-note { margin-top: 3.5rem; }
}

/* Founder: a wide feature card, round portrait on a dark panel. */
.about-v2 .founder-section { background: var(--color-bg); }
.about-v2 .founder-card {
  gap: 0; padding: 0; overflow: hidden; align-items: stretch;
  border: 0; border-radius: 24px; box-shadow: 0 30px 70px rgba(11,23,25,.14);
}
@media (min-width: 820px) {
  .about-v2 .founder-card { grid-template-columns: min(380px, 34%) minmax(0, 1fr); border-radius: 28px; }
}
.about-v2 .founder-side {
  position: relative; isolation: isolate; display: grid; place-items: center; align-content: center;
  padding: clamp(2.75rem, 5vw, 3rem) clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(160deg, var(--color-ink) 0%, #0D3D3A 100%);
}
.about-v2 .founder-side::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%);
}
.about-v2 .founder-side .hint { color: rgba(244,246,252,.8); }
.about-v2 .founder-media {
  width: min(236px, 100%); border-radius: 50%; border: 5px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 14px rgba(95,214,198,.18), 0 0 0 30px rgba(95,214,198,.08), 0 24px 50px rgba(0,0,0,.4);
}
.about-v2 .founder-body { padding: clamp(1.75rem, 4vw, 3.5rem); }
.about-v2 .founder-body .founder-name { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); line-height: 1.15; margin-bottom: var(--space-4); }
.about-v2 .founder-body .founder-name span {
  margin-top: .4rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand); font-weight: 800;
}
.about-v2 .founder-body p { font-size: 1.0625rem; line-height: 1.7; }
/* flex-start: without it a pill sharing a row with the tall stat tiles
   stretches to their height. */
.about-v2 .founder-facts { gap: .625rem; align-items: flex-start; margin-top: var(--space-5); padding-top: var(--space-5); }
.about-v2 .founder-facts li { font-size: .875rem; padding: .5rem 1rem; background: var(--color-white); }
/* Facts that open with a figure ("7 years ...") become stat tiles. */
.about-v2 .founder-facts .founder-stat {
  /* Half the row each (less half the gap), so the two tiles fill a row and the
     pills start on the next one; 200px is the floor where they stack instead. */
  flex: 1 1 max(200px, calc(50% - .3125rem)); border-radius: var(--radius-md); padding: 1.1rem 1.25rem;
  background: var(--color-brand-light); border-color: rgba(12,132,120,.2);
  font-size: .9375rem; color: var(--color-ink); line-height: 1.35;
}
.about-v2 .founder-num {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.125rem, 1.7rem + 1.6vw, 2.75rem); line-height: 1;
  letter-spacing: -.03em; color: var(--color-brand); margin-bottom: .2rem;
}

/* Where we work: framed photo, commitments as a grid of cards. */
.about-v2 .ab-where .two-col > picture > img {
  border-radius: 24px;
  box-shadow: -12px 12px 0 0 var(--color-brand-light), 12px -12px 0 0 rgba(242,153,74,.16), 0 30px 60px rgba(11,23,25,.18);
}
.about-v2 .ab-where h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); line-height: 1.18; }
.about-v2 .ab-where .flow > p { font-size: 1.125rem; }
.about-v2 .ab-where .check-list { display: grid; gap: .75rem; }
@media (min-width: 560px) { .about-v2 .ab-where .check-list { grid-template-columns: 1fr 1fr; } }
.about-v2 .ab-where .check-list li {
  margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg); font-size: .9375rem; line-height: 1.45; align-items: flex-start;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.about-v2 .ab-where .check-list li:hover { border-color: var(--color-brand); transform: translateY(-2px); }
@media (min-width: 960px) {
  .about-v2 .ab-where .two-col { grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); }
  .about-v2 .ab-where .two-col > picture > img {
    box-shadow: -22px 22px 0 0 var(--color-brand-light), 22px -22px 0 0 rgba(242,153,74,.16), 0 30px 60px rgba(11,23,25,.18);
  }
}

/* Quote: a full-width dark band. */
.about-v2 .ab-quote {
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.about-v2 .ab-quote::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px circle at 12% 10%, rgba(15,155,142,.42), transparent 62%),
              radial-gradient(620px circle at 92% 100%, rgba(242,153,74,.22), transparent 60%);
}
.about-v2 .ab-quote::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 1100px; height: 1100px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 0 130px rgba(255,255,255,.018), 0 0 0 131px rgba(255,255,255,.06);
}
.about-v2 .pullquote { background: none; border-radius: 0; padding: 0; overflow: visible; }
.about-v2 .pullquote::after { display: none; }
.about-v2 .pullquote::before {
  position: static; display: block; z-index: auto; opacity: 1; font-size: clamp(5rem, 4rem + 4vw, 7rem); line-height: .7; height: .46em;
  color: var(--color-accent);
}
.about-v2 .pullquote blockquote { font-size: clamp(1.75rem, 1rem + 3.2vw, 3.25rem); line-height: 1.2; max-width: 980px; letter-spacing: -.03em; }
.about-v2 .pullquote .pullquote-note { margin-top: var(--space-5); font-size: .9375rem; }
.about-v2 .pullquote .pullquote-note::before {
  content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin: 0 auto var(--space-4);
  background: linear-gradient(90deg, #5FD6C6, var(--color-accent));
}

/* Principles: a numbered bento on white, first tile dark. The numerals are
   decoration from a CSS counter, not content. */
.about-v2 .ab-dark { background: none; color: inherit; padding: 0; overflow: visible; text-align: center; border-radius: 0; }
.about-v2 .ab-dark::before { display: none; }
.about-v2 .ab-dark h2 { color: var(--color-ink); margin-bottom: var(--space-3); }
.about-v2 .ab-dark > p { color: var(--color-text-secondary); margin-inline: auto; font-size: 1.125rem; margin-bottom: var(--space-6); }
.about-v2 .ab-glass { gap: 1.25rem; counter-reset: principle; text-align: left; }
.about-v2 .ab-glass-tile {
  position: relative; overflow: hidden; counter-increment: principle;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: 22px; background: var(--color-white);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.about-v2 .ab-glass-tile:hover { background: var(--color-white); transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-brand); }
.about-v2 .ab-glass-tile::after {
  content: "0" counter(principle); position: absolute; right: 1.25rem; top: .5rem;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(4rem, 3rem + 3vw, 5.5rem); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(12,132,120,.22); pointer-events: none;
}
.about-v2 .ab-glass-tile .icon-tile { width: 54px; height: 54px; border-radius: 16px; background: var(--color-brand-light); color: var(--color-brand); margin-bottom: var(--space-4); }
.about-v2 .ab-glass-tile .icon-tile svg { width: 26px; height: 26px; }
.about-v2 .ab-glass-tile strong { font-family: var(--font-heading); font-size: 1.3125rem; font-weight: 800; color: var(--color-ink); margin-bottom: .5rem; }
.about-v2 .ab-glass-tile span { font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); }
.about-v2 .ab-glass-tile:first-child {
  isolation: isolate; border-color: transparent;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.about-v2 .ab-glass-tile:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at 0% 0%, rgba(15,155,142,.5), transparent 65%);
}
.about-v2 .ab-glass-tile:first-child::after { -webkit-text-stroke-color: rgba(255,255,255,.22); }
.about-v2 .ab-glass-tile:first-child .icon-tile { background: rgba(255,255,255,.14); color: var(--color-white); }
.about-v2 .ab-glass-tile:first-child strong { color: var(--color-white); }
.about-v2 .ab-glass-tile:first-child span { color: rgba(244,246,252,.8); }
/* Five tiles: two columns leave one over, so the first spans the row. */
@media (min-width: 640px) and (max-width: 959px) {
  .about-v2 .ab-glass-tile:first-child { grid-column: span 2; }
}
@media (min-width: 960px) {
  .about-v2 .ab-glass { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .about-v2 .ab-glass-tile { grid-column: span 2; }
  .about-v2 .ab-glass-tile:nth-child(-n+2) { grid-column: span 3; padding: 2.75rem 2.5rem 2.5rem; }
}

/* Working together: two separate cards, icon bullets, ruled rows. */
.about-v2 .wt-tone { gap: clamp(1.25rem, 2.5vw, 1.75rem); border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.about-v2 .wt-tone-side {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 24px; box-shadow: 0 24px 60px rgba(11,23,25,.1);
}
.about-v2 .wt-tone-side.is-light { border: 1px solid var(--color-border); border-top: 5px solid var(--color-brand); }
.about-v2 .wt-tone-side.is-dark { border-top: 5px solid var(--color-accent); }
.about-v2 .wt-tone-side.is-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at 100% 0%, rgba(242,153,74,.22), transparent 62%);
}
.about-v2 .wt-tone-side h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); margin-bottom: var(--space-5); gap: .9rem; }
.about-v2 .wt-tone-head svg { width: 48px; height: 48px; padding: 12px; border-radius: 14px; }
.about-v2 .wt-tone-side.is-light .wt-tone-head svg { background: var(--color-brand-light); color: var(--color-brand); }
.about-v2 .wt-tone-side.is-dark .wt-tone-head svg { background: rgba(242,153,74,.16); }
.about-v2 .wt-tone-side ul { gap: 0; }
.about-v2 .wt-tone-side li { font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); padding: 1rem 0 1rem 2.75rem; border-top: 1px solid var(--color-border); }
.about-v2 .wt-tone-side.is-dark li { border-top-color: rgba(255,255,255,.12); color: rgba(244,246,252,.88); }
.about-v2 .wt-tone-side.is-light li { color: var(--color-ink); }
.about-v2 .wt-tone-side li::before {
  left: 0; top: .9rem; width: 28px; height: 28px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
}
.about-v2 .wt-tone-side.is-light li::before {
  background-color: var(--color-brand-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C8478' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.about-v2 .wt-tone-side.is-dark li::before {
  background-color: rgba(242,153,74,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2994A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

/* Access and data: a dark panel of glass tiles. Shared with the two industry
   pages that carry the block (Healthcare, Professional Services). */
:is(.about-v2, .industry-v2) .sec-block {
  position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 28px;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  box-shadow: 0 30px 70px rgba(11,23,25,.22);
}
:is(.about-v2, .industry-v2) .sec-block::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(560px circle at 0% 0%, rgba(15,155,142,.45), transparent 65%),
              radial-gradient(480px circle at 100% 100%, rgba(242,153,74,.2), transparent 62%);
}
:is(.about-v2, .industry-v2) .sec-head .icon-tile { width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.12); color: #7FE3D5; border: 1px solid rgba(255,255,255,.16); }
:is(.about-v2, .industry-v2) .sec-head .icon-tile svg { width: 28px; height: 28px; }
:is(.about-v2, .industry-v2) .sec-block .eyebrow { color: #7FE3D5; }
:is(.about-v2, .industry-v2) .sec-head h2 { color: var(--color-white); font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem); }
:is(.about-v2, .industry-v2) .sec-head p { color: rgba(244,246,252,.78); font-size: 1.0625rem; }
:is(.about-v2, .industry-v2) .sec-list { gap: 1rem; }
:is(.about-v2, .industry-v2) .sec-list li {
  padding: 1.5rem; border-left: 0; border-radius: 16px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13); border-top: 3px solid #5FD6C6;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
:is(.about-v2, .industry-v2) .sec-list li:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
:is(.about-v2, .industry-v2) .sec-list strong { color: var(--color-white); font-size: 1.0625rem; margin-bottom: .4rem; }
:is(.about-v2, .industry-v2) .sec-list span { color: rgba(244,246,252,.74); font-size: .9375rem; line-height: 1.55; }
/* Beside the icon the heading has too little room on a phone: stack them. */
@media (max-width: 759px) {
  :is(.about-v2, .industry-v2) .sec-head { flex-direction: column; gap: var(--space-3); }
}
@media (min-width: 760px) {
  :is(.about-v2, .industry-v2) .sec-head { gap: var(--space-5); margin-bottom: var(--space-6); align-items: center; }
  :is(.about-v2, .industry-v2) .sec-head .icon-tile { width: 76px; height: 76px; border-radius: 22px; }
  :is(.about-v2, .industry-v2) .sec-head .icon-tile svg { width: 36px; height: 36px; }
}

/* Tools band (About and Services, the two pages that use it): on wide
   screens, even rows of four with the short last row centred. */
.stack-group {
  padding: 1.5rem; border-radius: 18px;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.stack-group:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-brand); }
.stack-group h3 { color: var(--color-brand); padding-bottom: .75rem; border-bottom: 1px solid var(--color-border); }
.stack-mark { width: 48px; height: 48px; }
.stack-mark svg { width: 25px; height: 25px; }
@media (min-width: 1000px) {
  .stack-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
  .stack-group { flex: 0 1 calc(25% - .95rem); }
}

/* Capabilities orbit: larger, the ring turns, the hub glows. Below 860 the
   base styles turn the orbit into a list, so this is wide-screen only. */
@media (min-width: 860px) {
  .about-v2 .ab-orbit { max-width: 680px; }
  .about-v2 .ab-orbit-ring { border: 2px dashed rgba(12,132,120,.35); animation: orbitSpin 80s linear infinite; }
  .about-v2 .ab-orbit-hub { width: 184px; height: 184px; box-shadow: 0 0 0 16px rgba(12,132,120,.1), 0 0 0 36px rgba(12,132,120,.05), var(--shadow-lg); }
  .about-v2 .ab-orbit-hub strong { font-size: 1.25rem; }
  .about-v2 .ab-orbit-node { width: 168px; }
  .about-v2 .ab-orbit-node .icon-tile {
    width: 68px; height: 68px; border-radius: 20px; background-color: var(--color-white);
    box-shadow: var(--shadow-md); border: 1px solid var(--color-border); transition: transform var(--duration) var(--ease);
  }
  .about-v2 .ab-orbit-node:hover .icon-tile { transform: translateY(-4px) scale(1.06); }
  .about-v2 .ab-orbit-node .icon-tile svg { width: 30px; height: 30px; }
  .about-v2 .ab-orbit-node strong { font-size: 1rem; }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .about-v2 .ab-orbit-ring { animation: none; }
  .about-v2 .ab-glass-tile, :is(.about-v2, .industry-v2) .sec-list li, .stack-group,
  .about-v2 .ab-where .check-list li, .about-v2 .ab-orbit-node .icon-tile { transition: none; }
  .about-v2 .ab-glass-tile:hover, :is(.about-v2, .industry-v2) .sec-list li:hover, .stack-group:hover,
  .about-v2 .ab-where .check-list li:hover, .about-v2 .ab-orbit-node:hover .icon-tile { transform: none; }
}

/* -------------------------------------------------------------------------
   Homepage redesign.
   Everything here is scoped to .home-v2, the wrapper in content/home.html,
   because most of these components (demo cards, service cards, the FAQ, the
   industry tiles) also appear on other pages and keep their plain look
   there. The hero is not touched. Looks apply at every width; each block's
   wide-screen layout sits in its own min-width query, so small screens keep
   the base stacking.
   ------------------------------------------------------------------------- */
.home-v2 > section:not(.hero) { padding-block: clamp(3.5rem, 7vw, 6rem); }
.home-v2 .section-head { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.home-v2 .section-head h2,
.home-v2 .hm-problems h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.16; }
.home-v2 .section-head .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* Marquee: a dark band that carries on from the hero. */
.home-v2 .marquee {
  position: relative; background: #0B1719; border-block: 0; padding-block: 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  /* The base edge fade is a mask, which on a dark band lets the white page show through. */
  -webkit-mask-image: none; mask-image: none;
}
.home-v2 .marquee-item { color: rgba(244,246,252,.72); font-size: 1.0625rem; }
.home-v2 .marquee-item svg { color: #5FD6C6; width: 20px; height: 20px; }

/* Demos: each site in a browser frame, lifting and zooming on hover. */
:is(.home-v2, .work-v2) .demo-grid { gap: clamp(1.25rem, 2.5vw, 2rem); }
:is(.home-v2, .work-v2) .demo-card {
  border-radius: 24px; border-color: var(--color-border); box-shadow: 0 18px 44px rgba(11,23,25,.08);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
/* The window bar: three dots drawn on a dark strip above the screenshot. */
:is(.home-v2, .work-v2) .demo-card::before {
  content: ""; flex: none; height: 36px;
  background:
    radial-gradient(circle at 20px 50%, #F2994A 5px, transparent 6px),
    radial-gradient(circle at 38px 50%, #5FD6C6 5px, transparent 6px),
    radial-gradient(circle at 56px 50%, rgba(255,255,255,.35) 5px, transparent 6px),
    linear-gradient(155deg, var(--color-ink), var(--color-ink-2));
}
:is(.home-v2, .work-v2) .demo-card:hover { transform: translateY(-10px); box-shadow: 0 36px 80px rgba(11,23,25,.2); border-color: var(--color-brand); }
:is(.home-v2, .work-v2) .demo-shot { border-bottom: 0; }
:is(.home-v2, .work-v2) .demo-shot img { transition: transform 700ms var(--ease); }
:is(.home-v2, .work-v2) .demo-card:hover .demo-shot img { transform: scale(1.07); }
:is(.home-v2, .work-v2) .demo-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); gap: .9rem; }
:is(.home-v2, .work-v2) .demo-tag {
  align-self: flex-start; color: var(--color-brand); background: var(--color-brand-light);
  padding: .35rem .75rem; border-radius: var(--radius-full); font-size: .6875rem;
}
/* Phones: tightened so the longest tag ("Restaurant & online shop · Concept") stays on one line. */
@media (max-width: 480px) { :is(.home-v2, .work-v2) .demo-tag { font-size: .625rem; letter-spacing: .02em; padding-inline: .6rem; } }
:is(.home-v2, .work-v2) .demo-body h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.625rem); }
:is(.home-v2, .work-v2) .demo-body ul { font-size: .9375rem; gap: .45rem; }
:is(.home-v2, .work-v2) .demo-scores { gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--color-border); }
:is(.home-v2, .work-v2) .demo-scores span { background: var(--color-ink); color: var(--color-white); padding: .3rem .7rem; }
:is(.home-v2, .work-v2) .demo-actions { padding-top: var(--space-3); }

/* Why: a bigger dark lead card beside three accented cards. */
.home-v2 .bento-lead { padding: clamp(2rem, 4vw, 3.5rem); border-radius: 28px; box-shadow: 0 30px 70px rgba(11,23,25,.25); }
.home-v2 .bento-lead::before {
  background-image:
    radial-gradient(460px circle at 85% 0%, rgba(15,155,142,.55), transparent 70%),
    radial-gradient(380px circle at 0% 100%, rgba(242,153,74,.22), transparent 65%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
.home-v2 .bento-lead .icon-tile { width: 64px; height: 64px; border-radius: 18px; margin-bottom: var(--space-5); border: 1px solid rgba(255,255,255,.16); }
.home-v2 .bento-lead .icon-tile svg { width: 30px; height: 30px; }
.home-v2 .bento-lead h3 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem); line-height: 1.12; margin-bottom: var(--space-3); }
.home-v2 .bento-lead p { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.65; }
.home-v2 .bento-cell {
  position: relative; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px; box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--cell-accent, var(--color-brand));
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* Each card's top edge matches its icon colour. */
.home-v2 .bento-cell:nth-child(2) { --cell-accent: var(--color-accent); }
.home-v2 .bento-cell:nth-child(3) { --cell-accent: var(--color-teal); }
.home-v2 .bento-cell:nth-child(4) { --cell-accent: var(--color-violet); }
.home-v2 .bento-cell:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--cell-accent); }
.home-v2 .bento-cell .icon-tile { width: 54px; height: 54px; border-radius: 16px; margin-bottom: var(--space-4); }
.home-v2 .bento-cell .icon-tile svg { width: 26px; height: 26px; }
.home-v2 .bento-cell h3 { font-size: 1.3125rem; }
.home-v2 .bento-cell p { font-size: 1rem; line-height: 1.6; }
.home-v2 .bento-wide { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; align-items: start; }
.home-v2 .bento-wide .icon-tile { grid-row: span 2; margin: 0; }

/* Services: a dark section of solid cards. */
.home-v2 .hm-services {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.home-v2 .hm-services::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(760px circle at 0% 0%, rgba(15,155,142,.38), transparent 62%),
    radial-gradient(680px circle at 100% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.home-v2 .hm-services .eyebrow { color: #7FE3D5; }
.home-v2 .hm-services .section-head h2 { color: var(--color-white); }
.home-v2 .hm-services .section-head .lede { color: rgba(244,246,252,.78); }
.home-v2 .hm-services .grid-3 { gap: 1.25rem; }
.home-v2 .hm-services .service-card {
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); border-radius: 22px;
  /* Solid, not translucent: the section's grid must not show through the cards. */
  background: #1B2E31; border: 1px solid rgba(255,255,255,.12);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.home-v2 .hm-services .service-card::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(95,214,198,.18), transparent 70%); }
.home-v2 .hm-services .service-card::after {
  content: ""; position: absolute; right: 1.5rem; top: 1.75rem; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  opacity: .55;
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.home-v2 .hm-services .service-card:hover {
  transform: translateY(-6px); background: #22393D; border-color: rgba(95,214,198,.6);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.home-v2 .hm-services .service-card:hover::after { opacity: 1; background-color: var(--color-brand); transform: translate(3px, -3px); }
.home-v2 .hm-services .service-card .icon-tile { width: 54px; height: 54px; border-radius: 16px; margin-bottom: var(--space-4); }
.home-v2 .hm-services .service-card .icon-tile svg { width: 26px; height: 26px; }
.home-v2 .hm-services .service-card h3 { color: var(--color-white); font-size: 1.3125rem; padding-right: 2.5rem; }
.home-v2 .hm-services .service-card p { color: rgba(244,246,252,.72); font-size: 1rem; line-height: 1.6; }
/* "Explore all services" as a button: outlined on the dark panel, filling teal on hover. */
.home-v2 .hm-services-more { margin-top: var(--space-6); }
.home-v2 .hm-services-more .btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1rem;
  padding: .95rem 1.75rem; border-radius: var(--radius-full); color: var(--color-white);
  border: 1.5px solid rgba(244,246,252,.45); background: rgba(255,255,255,.04);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.home-v2 .hm-services-more .btn-ghost svg { transition: transform var(--duration) var(--ease); }
.home-v2 .hm-services-more .btn-ghost:hover {
  color: var(--color-white); background: var(--color-brand); border-color: var(--color-brand);
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,132,120,.4);
}
.home-v2 .hm-services-more .btn-ghost:hover svg { transform: translateX(4px); }

/* Problems: framed photo, each problem a card with a gradient numeral. */
.home-v2 .hm-problems .two-col > picture > img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px;
  box-shadow: -12px 12px 0 0 var(--color-brand-light), 12px -12px 0 0 rgba(242,153,74,.18), 0 30px 60px rgba(11,23,25,.18);
}
.home-v2 .problem-list { gap: .875rem; }
.home-v2 .problem-row,
.home-v2 .problem-row:first-child,
.home-v2 .problem-row:last-child {
  padding: clamp(1.1rem, 2.5vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.5rem); gap: clamp(.9rem, 2vw, 1.25rem); align-items: center;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.home-v2 .problem-row:hover { transform: translateX(8px); border-color: var(--color-brand); box-shadow: var(--shadow-md); }
.home-v2 .problem-num {
  width: 54px; height: 54px; border-radius: 16px; font-size: 1.375rem;
  background: linear-gradient(145deg, var(--color-brand), #0FA090 55%, var(--color-accent));
}
.home-v2 .problem-row h3 { font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); }
.home-v2 .problem-row p { font-size: 1rem; }
@media (min-width: 960px) {
  .home-v2 .hm-problems .two-col { grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); }
  .home-v2 .hm-problems .two-col > picture > img {
    box-shadow: -22px 22px 0 0 var(--color-brand-light), 22px -22px 0 0 rgba(242,153,74,.18), 0 30px 60px rgba(11,23,25,.18);
  }
}

/* Industries: even rows of white cards, each with its own colour as an
   accent; the colour floods the card on hover. This replaces the base
   colour-block tiles and leader lines at every width. --cols sets how many
   sit on a row; a short last row is centred. There are 17 industries, so
   the steps skip four columns, which would strand one card on its own. */
.home-v2 .industry-grid { --cols: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
@media (min-width: 480px) { .home-v2 .industry-grid { --cols: 3; } }
@media (min-width: 900px) { .home-v2 .industry-grid { --cols: 5; } }
@media (min-width: 1100px) { .home-v2 .industry-grid { --cols: 6; } }
.home-v2 .industry,
.home-v2 .industry[data-side="up"],
.home-v2 .industry[data-side="down"] {
  position: relative; justify-content: flex-start; align-items: center; gap: 1rem;
  /* The half pixel keeps rounding from pushing the last card onto a new row. */
  flex: 0 0 calc((100% - (var(--cols) - 1) * 1rem) / var(--cols) - .5px);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(.75rem, 1.5vw, 1rem) clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 20px; background: var(--color-white);
  border: 1px solid var(--color-border); border-bottom: 3px solid var(--ind); box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* The label comes first in the markup for the old top row: put the icon first everywhere. */
.home-v2 .industry[data-side="up"] { flex-direction: column-reverse; justify-content: flex-end; }
.home-v2 .industry-dot, .home-v2 .industry-leader, .home-v2 .industry-notch { display: none; }
.home-v2 .industry-tile {
  position: static; width: 64px; max-width: none; border-radius: 18px;
  background: color-mix(in srgb, var(--ind) 13%, var(--color-white)); color: var(--ind);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.home-v2 .industry-tile > svg:first-child { width: 30px; }
/* A linked industry: the whole card is the target, and its "opens a demo" mark sits in the corner. */
.home-v2 a.industry-tile::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.home-v2 a.industry-tile:focus-visible { outline: none; }
.home-v2 a.industry-tile:focus-visible::after { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.home-v2 .industry-tile .industry-ext { top: 12px; right: 12px; width: 16px; height: 16px; opacity: .7; }
.home-v2 .industry .industry-label,
.home-v2 .industry[data-side] .industry-label {
  font-size: clamp(.875rem, .8rem + .3vw, 1rem); line-height: 1.25; min-height: 0; margin: 0;
  transition: color var(--duration) var(--ease);
}
.home-v2 .industry:hover {
  transform: translateY(-6px); background: var(--ind); border-color: var(--ind);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--ind) 35%, transparent);
}
.home-v2 .industry:hover .industry-tile { transform: none; box-shadow: none; background: rgba(255,255,255,.2); color: var(--color-white); }
/* Two classes deeper than the base :has() rule that tints the label on hover. */
.home-v2 .industry-grid .industry:hover .industry-label { color: var(--color-white); }

/* AI: glows and grid on the dark panel, capabilities as solid tiles. */
.home-v2 .hm-ai { overflow: hidden; }
.home-v2 .hm-ai::before {
  background-image:
    radial-gradient(760px circle at 100% 0%, rgba(15,155,142,.36), transparent 62%),
    radial-gradient(680px circle at 0% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.home-v2 .ai-spine {
  max-width: 1040px; margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  border-radius: 28px; background: #182A2D; border: 1px solid rgba(255,255,255,.1);
}
.home-v2 .ai-stop-badge { box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.35); transition: transform var(--duration) var(--ease-spring); }
.home-v2 .ai-stop:hover .ai-stop-badge { transform: scale(1.08); }
.home-v2 .ai-stop h3 { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); margin-bottom: .3rem; }
.home-v2 .ai-stop p { font-size: .9375rem; }
/* The connector line and arrowheads only exist from 760 (see .ai-spine-track),
   and their height is tied to the badge, so the two move together. */
@media (min-width: 760px) {
  .home-v2 .ai-stop-badge { width: 92px; height: 92px; }
  .home-v2 .ai-stop-badge svg { width: 36px; height: 36px; }
  .home-v2 .ai-spine-track::before,
  .home-v2 .ai-stop + .ai-stop::before { top: 46px; }
}
.home-v2 .ai-caps { gap: 1rem; margin-top: var(--space-6); }
.home-v2 .ai-cap {
  padding: 1.5rem; border-radius: 16px; background: #1B2E31;
  border: 1px solid rgba(255,255,255,.13); border-top: 3px solid #5FD6C6;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.home-v2 .ai-cap:hover { background: #22393D; transform: translateY(-3px); }
.home-v2 .ai-cap strong { font-size: 1.0625rem; margin-bottom: .4rem; }
.home-v2 .ai-cap span { font-size: .9375rem; line-height: 1.55; color: rgba(244,246,252,.74); }

/* FAQ (homepage, service pages, industry pages and Pricing): on wide screens the heading is pinned on
   the left while the questions scroll on the right. */
:is(.home-v2, .service-v2, .industry-v2) .split-faq .section-head::after {
  content: ""; display: block; width: 72px; height: 4px; border-radius: 4px; margin: var(--space-5) auto 0;
  background: linear-gradient(90deg, var(--color-brand), #5FD6C6 45%, var(--color-accent));
}
:is(.home-v2, .service-v2, .industry-v2) .faq-list { gap: .875rem; margin-inline: auto; }
:is(.home-v2, .service-v2, .industry-v2) .faq-item { border-radius: 20px; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
:is(.home-v2, .service-v2, .industry-v2) .faq-item[data-open="true"] { border-color: var(--color-brand); box-shadow: 0 18px 44px rgba(11,23,25,.1); }
:is(.home-v2, .service-v2, .industry-v2) .faq-question { padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem); font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); }
:is(.home-v2, .service-v2, .industry-v2) .faq-icon { width: 34px; height: 34px; }
:is(.home-v2, .service-v2, .industry-v2) .faq-icon svg { width: 16px; height: 16px; }
:is(.home-v2, .service-v2, .industry-v2) .faq-item[data-open="true"] .faq-icon { background: var(--color-brand); color: var(--color-white); }
:is(.home-v2, .service-v2, .industry-v2) .faq-answer p { padding: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.1rem, 2.5vw, 1.5rem); font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem); line-height: 1.65; }
@media (min-width: 960px) {
  :is(.home-v2, .service-v2, .industry-v2) .split-faq > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  :is(.home-v2, .service-v2, .industry-v2) .split-faq .section-head { position: sticky; top: calc(var(--header-h) + 2rem); margin: 0; text-align: left; }
  :is(.home-v2, .service-v2, .industry-v2) .split-faq .section-head h2 { font-size: clamp(2.75rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.08; }
  :is(.home-v2, .service-v2, .industry-v2) .split-faq .section-head::after { margin-left: 0; }
  :is(.home-v2, .service-v2, .industry-v2) .faq-list { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .demo-card, .home-v2 .demo-shot img, .home-v2 .bento-cell, .home-v2 .hm-services .service-card,
  .home-v2 .hm-services .service-card::after, .home-v2 .hm-services-more .btn-ghost, .home-v2 .hm-services-more .btn-ghost svg,
  .home-v2 .problem-row, .home-v2 .industry, .home-v2 .ai-stop-badge, .home-v2 .ai-cap { transition: none; }
  .home-v2 .demo-card:hover, .home-v2 .demo-card:hover .demo-shot img, .home-v2 .bento-cell:hover,
  .home-v2 .hm-services .service-card:hover, .home-v2 .hm-services .service-card:hover::after,
  .home-v2 .hm-services-more .btn-ghost:hover, .home-v2 .hm-services-more .btn-ghost:hover svg,
  .home-v2 .problem-row:hover, .home-v2 .industry:hover, .home-v2 .ai-stop:hover .ai-stop-badge, .home-v2 .ai-cap:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   Services page redesign.
   Scoped to .services-v2, the wrapper in content/services/index.html. Looks
   apply at every width; each block's wide-screen layout sits in its own
   min-width query, so small screens keep the base stacking.
   ------------------------------------------------------------------------- */
.services-v2 > section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.services-v2 .section-head { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.services-v2 .section-head h2,
.services-v2 .sv-engage h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.16; }
.services-v2 .section-head .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* Start here: three tall cards. The outlined numerals come from a CSS counter
   and match the group numbers in the directory below. */
.services-v2 .start-grid { gap: clamp(1rem, 2vw, 1.5rem); counter-reset: start; }
/* The base grid goes three-up at 760, where these larger cards are too narrow
   for their headings: hold one column until 900. */
@media (min-width: 760px) and (max-width: 899px) {
  .services-v2 .start-grid { grid-template-columns: 1fr; }
}
.services-v2 .start-card {
  counter-increment: start; gap: var(--space-3); border-radius: 28px;
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: 0 30px 70px rgba(11,23,25,.22);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.services-v2 .start-card::before {
  opacity: 1;
  background-image:
    radial-gradient(440px circle at 90% 0%, color-mix(in srgb, var(--group-accent) 60%, transparent), transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.services-v2 .start-card::after {
  content: "0" counter(start); position: absolute; right: 1.5rem; top: 1.25rem; z-index: -1;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(4.5rem, 3.5rem + 3vw, 6rem); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.24); pointer-events: none;
}
.services-v2 .start-card:hover { transform: translateY(-10px); box-shadow: 0 44px 90px rgba(11,23,25,.34); }
.services-v2 .start-card:hover::before { opacity: 1; }
.services-v2 .start-card .icon-tile { width: 64px; height: 64px; border-radius: 18px; margin-bottom: var(--space-5); border: 1px solid rgba(255,255,255,.18); }
.services-v2 .start-card .icon-tile svg { width: 30px; height: 30px; }
.services-v2 .start-card h3 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.15; }
.services-v2 .start-card p { font-size: clamp(1rem, .95rem + .3vw, 1.0625rem); line-height: 1.6; }
.services-v2 .start-card-go {
  align-self: flex-start; margin-top: var(--space-5); padding: .7rem 1.25rem; border-radius: var(--radius-full);
  font-size: .9375rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.services-v2 .start-card:hover .start-card-go { background: var(--color-white); border-color: var(--color-white); color: var(--color-ink); }

/* Directory: on wide screens each group's heading is pinned on the left while
   its services scroll on the right. */
.services-v2 .service-group + .service-group {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--color-border-strong);
}
.services-v2 .service-group-num {
  font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: .9; opacity: 1; color: transparent;
  -webkit-text-stroke: 2px var(--group-accent);
}
.services-v2 .service-group-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.12; margin-bottom: var(--space-3); }
.services-v2 .service-group-head p { font-size: 1.0625rem; line-height: 1.65; }
.services-v2 .service-group-head .count {
  margin-top: var(--space-4); padding: .45rem .95rem; border-radius: var(--radius-full); font-size: .8125rem;
  background: color-mix(in srgb, var(--group-accent) 12%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--group-accent) 30%, transparent);
}
@media (min-width: 960px) {
  .services-v2 .service-group { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .services-v2 .service-group-head {
    position: sticky; top: calc(var(--header-h) + 2rem);
    grid-template-columns: 1fr; gap: var(--space-3); padding: 0; margin: 0; border: 0;
  }
}
.services-v2 .service-rows { gap: 1rem; }
.services-v2 .service-row {
  gap: clamp(1rem, 2.5vw, 1.5rem); padding: clamp(1.1rem, 2.5vw, 1.75rem); border-radius: 22px; border-left-width: 5px;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.services-v2 a.service-row:hover { transform: translateX(10px); box-shadow: 0 24px 54px rgba(11,23,25,.14); }
.services-v2 .service-row-title { font-size: clamp(1.125rem, 1rem + .8vw, 1.375rem); margin-bottom: .35rem; }
.services-v2 .service-row p { font-size: 1rem; line-height: 1.6; }
.services-v2 .service-row-price {
  margin-top: .75rem; padding: .3rem .8rem; border-radius: var(--radius-full); font-size: .8125rem;
  color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border);
}
.services-v2 .service-row-go {
  padding: .7rem 1.15rem; border-radius: var(--radius-full); border: 1.5px solid var(--group-accent);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.services-v2 a.service-row:hover .service-row-go { background: var(--group-accent); color: var(--color-white); }
@media (min-width: 760px) {
  .services-v2 .service-row .icon-tile { width: 60px; height: 60px; border-radius: 18px; }
  .services-v2 .service-row .icon-tile svg { width: 28px; height: 28px; }
}

/* Engagements: framed photo, each way of working a ruled row. */
.services-v2 .sv-engage .two-col > picture > img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px;
  box-shadow: -12px 12px 0 0 var(--color-brand-light), 12px -12px 0 0 rgba(242,153,74,.18), 0 30px 60px rgba(11,23,25,.18);
}
.services-v2 .sv-engage .flow > p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem); line-height: 1.65; }
.services-v2 .sv-engage .check-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.services-v2 .sv-engage .check-list li {
  margin: 0; padding: 1rem .25rem; gap: 1rem; align-items: flex-start; font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
  border-bottom: 1px solid var(--color-border);
  transition: padding-left var(--duration) var(--ease), background var(--duration) var(--ease);
}
.services-v2 .sv-engage .check-list li:hover { padding-left: .9rem; background: var(--color-bg); }
.services-v2 .sv-engage .check-list li svg {
  width: 30px; height: 30px; padding: 7px; border-radius: 50%; flex-shrink: 0; margin: 0;
  background: var(--color-brand-light); color: var(--color-brand);
}
@media (min-width: 960px) {
  .services-v2 .sv-engage .two-col { grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); }
  .services-v2 .sv-engage .two-col > picture > img {
    box-shadow: -22px 22px 0 0 var(--color-brand-light), 22px -22px 0 0 rgba(242,153,74,.18), 0 30px 60px rgba(11,23,25,.18);
  }
}

/* The tools band sits on grey here, between two white sections. */
.services-v2 .stack-band { background: var(--color-bg); }

@media (prefers-reduced-motion: reduce) {
  .services-v2 .start-card, .services-v2 .start-card-go, .services-v2 .service-row, .services-v2 .service-row-go,
  .services-v2 .sv-engage .check-list li { transition: none; }
  .services-v2 .start-card:hover, .services-v2 a.service-row:hover { transform: none; }
  .services-v2 .sv-engage .check-list li:hover { padding-left: .25rem; }
}

/* -------------------------------------------------------------------------
   Service pages redesign (the nine pages under /services/).
   Scoped to .service-v2, the wrapper in each content/services/*.html. Looks
   apply at every width; each block's wide-screen layout sits in its own
   min-width query, so small screens keep the base stacking. The FAQ rules are
   shared with the homepage: see ".split-faq" in the section above.
   ------------------------------------------------------------------------- */
.service-v2 > section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.service-v2 .section-head { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.service-v2 .section-head h2,
.service-v2 .sd-included h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.16; }
.service-v2 .section-head .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* What's included: framed photo, then six larger numbered cards. */
.service-v2 .sd-included .two-col > picture > img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px;
  box-shadow: 12px 12px 0 0 var(--color-brand-light), -12px -12px 0 0 rgba(242,153,74,.18), 0 30px 60px rgba(11,23,25,.18);
}
.service-v2 .sd-included .flow > p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem); line-height: 1.7; }
.service-v2 .inc-g { margin-top: clamp(3rem, 6vw, 5.5rem); gap: clamp(1rem, 2vw, 1.5rem); }
.service-v2 .inc-g-card {
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: 24px; border-top-width: 4px; box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.service-v2 .inc-g-card:hover { transform: translateY(-8px); border-color: var(--inc-accent, var(--color-brand)); }
.service-v2 .inc-g-num { font-size: clamp(5.5rem, 4.5rem + 2.5vw, 7rem); top: -.9rem; right: .9rem; opacity: .26; }
.service-v2 .inc-g-card .icon-tile { width: 56px; height: 56px; border-radius: 16px; margin-bottom: var(--space-4); }
.service-v2 .inc-g-card .icon-tile svg { width: 26px; height: 26px; }
.service-v2 .inc-g-card h3 { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.25rem); margin-bottom: .5rem; }
.service-v2 .inc-g-card p { font-size: 1rem; line-height: 1.6; }
@media (min-width: 960px) {
  .service-v2 .sd-included .two-col { grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 6vw, 5rem); }
  .service-v2 .sd-included .two-col > picture > img {
    box-shadow: 22px 22px 0 0 var(--color-brand-light), -22px -22px 0 0 rgba(242,153,74,.18), 0 30px 60px rgba(11,23,25,.18);
  }
}

/* Our approach, where it is a set of pillar cards: a dark section of solid
   cards. The other two forms it takes, .contrast and .compare, are further
   down. */
.service-v2 .sd-approach {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.service-v2 .sd-approach::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(760px circle at 0% 0%, rgba(15,155,142,.38), transparent 62%),
    radial-gradient(680px circle at 100% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.service-v2 .sd-approach .eyebrow { color: #7FE3D5; }
.service-v2 .sd-approach .section-head h2 { color: var(--color-white); }
.service-v2 .sd-approach .section-head .lede { color: rgba(244,246,252,.78); }
.service-v2 .sd-approach .grid-4 { gap: 1.25rem; }
.service-v2 .sd-approach .pillar-card {
  padding: clamp(1.75rem, 3vw, 2.25rem) 1.75rem clamp(1.5rem, 3vw, 2rem); border-radius: 22px;
  /* Solid, not translucent: the section's grid must not show through the cards. */
  background: #1B2E31; border: 1px solid rgba(255,255,255,.12);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.service-v2 .sd-approach .pillar-card::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(95,214,198,.18), transparent 70%); }
.service-v2 .sd-approach .pillar-card:hover { transform: translateY(-6px); background: #22393D; border-color: rgba(95,214,198,.6); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.service-v2 .sd-approach .pillar-card .icon-tile { width: 56px; height: 56px; border-radius: 16px; margin-bottom: var(--space-5); }
.service-v2 .sd-approach .pillar-card .icon-tile svg { width: 26px; height: 26px; }
.service-v2 .sd-approach .pillar-card h3 { color: var(--color-white); font-size: 1.375rem; margin-bottom: var(--space-3); }
.service-v2 .sd-approach .pillar-card p { color: rgba(244,246,252,.74); font-size: 1rem; line-height: 1.6; }
.service-v2 .sd-approach .pillar-card p a { color: #7FE3D5; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Process: larger rings; once all five sit on one row, a line joins them.
   The step copy keeps its base size: it is written to fit three lines there,
   which is what keeps the pills on one baseline. */
.service-v2 .proc-ring {
  width: 120px; height: 120px; margin-bottom: var(--space-4);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--c) 28%, transparent);
}
.service-v2 .proc-ring::before { inset: 10px; }
.service-v2 .proc-step:hover .proc-ring { transform: scale(1.08); }
.service-v2 .proc-core svg { width: 38px; height: 38px; }
.service-v2 .proc-phase { font-size: .8125rem; margin-bottom: .5rem; }
.service-v2 .proc-step h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); margin-bottom: .5rem; }
/* Tighter than the base pill so the longest label still fits the five-across column. */
.service-v2 .proc-deliv { padding: .45rem .5rem; letter-spacing: 0; }
/* Pin each pill to the foot of its step. Steps in a row share a height, so
   the pills line up even when one step's title runs to a second line. */
.service-v2 .proc-step { display: flex; flex-direction: column; align-items: center; }
.service-v2 .proc-deliv { margin-top: auto; }
@media (min-width: 1240px) {
  .service-v2 .proc { position: relative; gap: 1.5rem; }
  /* 59px: the centre of the 120px ring, less half the line. */
  .service-v2 .proc::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 59px; height: 3px; border-radius: 3px; opacity: .4;
    background: linear-gradient(90deg, var(--color-brand), var(--color-violet), var(--color-teal), var(--color-accent), var(--color-rose));
  }
  /* Five across, the column is about 214px: a smaller title keeps all but
     the very longest on one line. */
  .service-v2 .proc-step h3 { font-size: 1.1875rem; }
}

/* Who it's for: four cards, each with its own accent edge. */
.service-v2 .sd-who .grid-2 { gap: 1.25rem; }
.service-v2 .problem-card {
  gap: clamp(1rem, 2.5vw, 1.5rem); align-items: center; border-radius: 22px; box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  border-left: 5px solid var(--card-accent, var(--color-brand));
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.service-v2 .problem-card:nth-child(2) { --card-accent: var(--color-accent); }
.service-v2 .problem-card:nth-child(3) { --card-accent: var(--color-teal); }
.service-v2 .problem-card:nth-child(4) { --card-accent: var(--color-violet); }
.service-v2 .problem-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--card-accent, var(--color-brand)); }
.service-v2 .problem-card .icon-tile { width: 60px; height: 60px; border-radius: 18px; margin: 0; }
.service-v2 .problem-card .icon-tile svg { width: 28px; height: 28px; }
.service-v2 .problem-card h3 { font-size: clamp(1.125rem, 1.05rem + .6vw, 1.3125rem); margin-bottom: .4rem; }
.service-v2 .problem-card p { font-size: 1rem; line-height: 1.6; }

/* Industries banner under "Who it's for": the sentence as a card, each
   industry a chip in its own colour. */
.ind-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.5rem); border-radius: 24px;
  background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
}
@media (min-width: 860px) { .ind-banner { grid-template-columns: minmax(0, 1fr) auto; } }
.ind-banner::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(180deg, var(--color-brand), #5FD6C6 45%, var(--color-accent));
}
.ind-banner-lead {
  margin: 0 0 .9rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.375rem); color: var(--color-ink);
}
.ind-banner-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ind-banner-chips li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem .5rem .6rem; border-radius: var(--radius-full);
  font-weight: 700; font-size: .9375rem; color: var(--color-ink);
  background: color-mix(in srgb, var(--ind) 10%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--ind) 30%, transparent);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.ind-banner-chips li:not(.is-more):hover { transform: translateY(-3px); background: var(--ind); color: var(--color-white); }
.ind-banner-chips li:not(.is-more):hover svg { color: var(--color-white); background: rgba(255,255,255,.2); }
.ind-banner-chips svg {
  width: 26px; height: 26px; padding: 5px; border-radius: 50%; flex-shrink: 0;
  color: var(--ind); background: color-mix(in srgb, var(--ind) 16%, var(--color-white));
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
/* The sentence is lower case; each chip starts with a capital. ::first-letter
   needs a block box, hence the inline-block span. */
.ind-banner-chips li > span { display: inline-block; }
.ind-banner-chips li:not(.is-more) > span::first-letter { text-transform: uppercase; }
.ind-banner-chips .is-more { padding-left: .25rem; background: none; border-color: transparent; color: var(--color-text-secondary); font-weight: 600; }
.ind-banner-go {
  display: inline-flex; align-items: center; gap: .5rem; justify-self: start;
  padding: .95rem 1.6rem; border-radius: var(--radius-full); font-weight: 700; color: var(--color-brand);
  border: 1.5px solid var(--color-brand);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ind-banner-go svg { flex-shrink: 0; transition: transform var(--duration) var(--ease); }
.ind-banner-go:hover { background: var(--color-brand); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,132,120,.3); }
.ind-banner-go:hover svg { transform: translateX(4px); }

/* Looking for something else: a dark band with a real button. */
.service-v2 .sd-else {
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 6vw, 5rem);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.service-v2 .sd-else::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(700px circle at 100% 0%, rgba(15,155,142,.36), transparent 62%),
    radial-gradient(620px circle at 0% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.service-v2 .sd-else .eyebrow { color: #7FE3D5; }
.service-v2 .sd-else h2 { color: var(--color-white); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.16; margin-bottom: .75rem; }
.service-v2 .sd-else .lede { color: rgba(244,246,252,.78); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 62ch; margin: 0 auto 2rem; }
.service-v2 .sd-else .btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  padding: .95rem 1.75rem; border-radius: var(--radius-full); color: var(--color-white);
  border: 1.5px solid rgba(244,246,252,.45); background: rgba(255,255,255,.04);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.service-v2 .sd-else .btn-ghost svg { transition: transform var(--duration) var(--ease); }
.service-v2 .sd-else .btn-ghost:hover { background: var(--color-brand); border-color: var(--color-brand); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,132,120,.4); }
.service-v2 .sd-else .btn-ghost:hover svg { transform: translateX(4px); }

/* Our approach, where it is a pair of will / won't lists (.contrast): two
   separate cards, the same treatment as "Working together" on About. */
.service-v2 .contrast { gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.service-v2 .contrast-col {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 24px; box-shadow: 0 24px 60px rgba(11,23,25,.1);
}
.service-v2 .contrast-col.is-yes { background: var(--color-white); border: 1px solid var(--color-border); border-top: 5px solid var(--color-brand); }
.service-v2 .contrast-col.is-no {
  border: 0; border-top: 5px solid var(--color-accent);
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.service-v2 .contrast-col.is-no::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at 100% 0%, rgba(242,153,74,.22), transparent 62%);
}
.service-v2 .contrast-col h3 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); margin-bottom: var(--space-5); gap: .9rem; }
.service-v2 .contrast-col.is-no h3 { color: var(--color-white); }
.service-v2 .contrast-col h3 svg { width: 48px; height: 48px; padding: 12px; border-radius: 14px; }
.service-v2 .contrast-col.is-yes h3 svg { background: var(--color-brand-light); color: var(--color-brand); }
.service-v2 .contrast-col.is-no h3 svg { background: rgba(242,153,74,.16); color: var(--color-accent); }
.service-v2 .contrast-list { gap: 0; }
.service-v2 .contrast-list li {
  gap: .9rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--color-border);
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); line-height: 1.5; color: var(--color-ink);
}
.service-v2 .is-no .contrast-list li { border-top-color: rgba(255,255,255,.12); color: rgba(244,246,252,.88); }
/* The badge sits on the first line of its item: 28px against a line box of
   about 25px, so it is lifted by the 1.5px difference. */
.service-v2 .contrast-list svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; margin-top: -1.5px; }
.service-v2 .is-yes .contrast-list svg { background: var(--color-brand-light); color: var(--color-brand); }
.service-v2 .is-no .contrast-list svg { background: rgba(242,153,74,.16); color: var(--color-accent); }

/* Our approach, where it is a comparison table (.compare): a raised card with
   "our" column picked out. */
.service-v2 .table-scroll {
  border-radius: 24px; background: var(--color-white); border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(11,23,25,.1);
}
/* separate, not collapse: cells ignore border-radius in the collapsed model,
   and the highlighted column needs rounded outer corners (see below). */
.service-v2 .compare { min-width: 640px; border-collapse: separate; border-spacing: 0; border-radius: 0; box-shadow: none; }
.service-v2 .compare th, .service-v2 .compare td {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.5vw, 1.75rem); font-size: 1rem; line-height: 1.55;
  transition: background var(--duration) var(--ease);
}
.service-v2 .compare thead th {
  font-size: clamp(1rem, .95rem + .5vw, 1.1875rem); background: var(--color-white);
  border-bottom: 1px solid var(--color-border); vertical-align: middle;
}
.service-v2 .compare thead th:nth-child(2) { color: var(--color-text-muted); }
.service-v2 .compare thead th:last-child {
  color: var(--color-white); background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  border-bottom-color: var(--color-ink);
}
.service-v2 .compare thead th:last-child::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .6rem;
  background: #5FD6C6; box-shadow: 0 0 0 4px rgba(95,214,198,.25);
}
.service-v2 .compare tbody th {
  width: 22%; font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem; color: var(--color-ink);
}
.service-v2 .compare td { color: var(--color-text-secondary); }
/* The column outline is an inset shadow, so it follows each cell's radius. */
.service-v2 .compare td:last-child {
  color: var(--color-ink); background: color-mix(in srgb, var(--color-brand) 6%, var(--color-white));
  box-shadow: inset 2px 0 0 var(--color-brand), inset -2px 0 0 var(--color-brand);
}
.service-v2 .compare tbody tr:last-child td:last-child {
  box-shadow: inset 2px 0 0 var(--color-brand), inset -2px 0 0 var(--color-brand), inset 0 -2px 0 var(--color-brand);
}
/* The two outer corners of that column sit in the card's rounded corners: 23px
   is the card's 24px radius less its 1px border, so the outline follows the
   curve instead of being cut off by it. */
.service-v2 .compare thead th:last-child { border-top-right-radius: 23px; }
.service-v2 .compare tbody tr:last-child td:last-child { border-bottom-right-radius: 23px; }
.service-v2 .compare tbody tr:hover th, .service-v2 .compare tbody tr:hover td { background: var(--color-bg); }
.service-v2 .compare tbody tr:hover td:last-child { background: color-mix(in srgb, var(--color-brand) 12%, var(--color-white)); }
.service-v2 .compare .mark { font-weight: 800; }
.service-v2 .compare .mark svg { width: 1.35em; height: 1.35em; padding: .22em; border-radius: 50%; vertical-align: -0.3em; margin-right: .5em; }
.service-v2 .compare .mark.is-good { color: var(--color-brand-dark); }
.service-v2 .compare .mark.is-good svg { background: var(--color-brand); color: var(--color-white); }
.service-v2 .compare .mark.is-bad { color: var(--color-text-secondary); }
.service-v2 .compare .mark.is-bad svg { background: #E7EAF1; color: #8A5244; }
/* The line under the table. */
.service-v2 .compare-note {
  width: fit-content; max-width: 100%; margin: var(--space-5) auto 0; padding: .7rem 1.25rem; border-radius: 22px;
  background: var(--color-white); border: 1px solid var(--color-border);
  font-size: .9375rem; text-align: center; color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .service-v2 .inc-g-card, .service-v2 .sd-approach .pillar-card, .service-v2 .problem-card,
  .ind-banner-chips li, .ind-banner-go, .ind-banner-go svg, .service-v2 .sd-else .btn-ghost, .service-v2 .sd-else .btn-ghost svg { transition: none; }
  .service-v2 .inc-g-card:hover, .service-v2 .sd-approach .pillar-card:hover, .service-v2 .problem-card:hover,
  .service-v2 .proc-step:hover .proc-ring, .ind-banner-chips li:not(.is-more):hover, .ind-banner-go:hover,
  .ind-banner-go:hover svg, .service-v2 .sd-else .btn-ghost:hover, .service-v2 .sd-else .btn-ghost:hover svg { transform: none; }
}

/* -------------------------------------------------------------------------
   Industries hub redesign (/industries/).
   Scoped to .industries-v2, the wrapper in content/industries/index.html.
   Each guide card and each tile carries its industry colour as --ind, written
   by build.py from INDUSTRIES in config.py.
   ------------------------------------------------------------------------- */
.industries-v2 > section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.industries-v2 .section-head { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.industries-v2 .section-head h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.16; }
.industries-v2 .section-head .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* Guides: large cards, each in its industry's colour. Five of them, so the
   grid is laid out to leave no empty slot: one column, then two with the last
   card full width, then three over two. */
.industries-v2 .ind-guides .grid-3 { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); counter-reset: guide; }
@media (min-width: 640px) {
  .industries-v2 .ind-guides .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries-v2 .ind-guides .ty-card:last-child { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .industries-v2 .ind-guides .grid-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .industries-v2 .ind-guides .ty-card,
  .industries-v2 .ind-guides .ty-card:last-child { grid-column: span 2; }
  .industries-v2 .ind-guides .ty-card:nth-child(n+4) { grid-column: span 3; }
}
.industries-v2 .ind-guides .ty-card {
  counter-increment: guide; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 26px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border); border-top: 5px solid var(--ind); box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
/* A wash of the industry colour in the top corner, and an outlined numeral
   (decoration from a CSS counter, not content). */
.industries-v2 .ind-guides .ty-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(360px circle at 100% 0%, color-mix(in srgb, var(--ind) 22%, transparent), transparent 70%);
  transition: opacity 280ms var(--ease);
}
.industries-v2 .ind-guides .ty-card::after {
  content: "0" counter(guide); position: absolute; right: 1.5rem; top: .75rem; z-index: -1;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(4.5rem, 3.5rem + 3vw, 6rem); line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ind) 38%, transparent); pointer-events: none;
}
.industries-v2 .ind-guides .ty-card:hover { transform: translateY(-8px); border-color: var(--ind); box-shadow: 0 30px 70px color-mix(in srgb, var(--ind) 22%, transparent); }
.industries-v2 .ind-guides .ty-card:hover::before { opacity: 1; }
.industries-v2 .ind-guides .ty-card .icon-tile { width: 64px; height: 64px; border-radius: 18px; margin-bottom: var(--space-5); transition: transform var(--duration) var(--ease-spring); }
.industries-v2 .ind-guides .ty-card .icon-tile svg { width: 30px; height: 30px; }
/* !important: the tile's resting colours are inline (build.py), and the base
   card hover would otherwise turn every tile brand teal. */
.industries-v2 .ind-guides .ty-card:hover .icon-tile { background: var(--ind) !important; color: var(--color-white) !important; transform: scale(1.08) rotate(-4deg); }
.industries-v2 .ind-guides .ty-card h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.625rem); line-height: 1.15; margin-bottom: var(--space-3); }
.industries-v2 .ind-guides .ty-card p { font-size: clamp(1rem, .95rem + .3vw, 1.0625rem); line-height: 1.6; flex: 1; }
.industries-v2 .ind-guides .ty-go {
  align-self: flex-start; margin-top: var(--space-5); padding: .7rem 1.25rem; border-radius: var(--radius-full);
  font-size: .9375rem; color: var(--ind); border: 1.5px solid var(--ind);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.industries-v2 .ind-guides .ty-card:hover .ty-go { background: var(--ind); color: var(--color-white); }

/* The rest: a dark section, each industry a solid tile with its own colour. */
.industries-v2 .ind-rest {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.industries-v2 .ind-rest::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(760px circle at 0% 0%, rgba(15,155,142,.38), transparent 62%),
    radial-gradient(680px circle at 100% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.industries-v2 .ind-rest .eyebrow { color: #7FE3D5; }
.industries-v2 .ind-rest .section-head h2 { color: var(--color-white); }
.industries-v2 .ind-rest .section-head .lede { color: rgba(244,246,252,.78); }
/* Twelve tiles: one, two, three and four columns all divide evenly. */
.industries-v2 .ind-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 480px) { .industries-v2 .ind-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .industries-v2 .ind-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .industries-v2 .ind-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.industries-v2 .ind-chip {
  gap: .9rem; padding: 1rem 1.25rem 1rem 1rem; border-radius: 18px; font-size: clamp(1rem, .95rem + .3vw, 1.0625rem); font-weight: 700;
  /* Solid, not translucent: the section's grid must not show through the tiles. */
  color: var(--color-white); background: #1B2E31; border: 1px solid rgba(255,255,255,.12);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.industries-v2 .ind-chip:hover { transform: translateY(-4px); background: #22393D; border-color: color-mix(in srgb, var(--ind) 70%, transparent); }
.industries-v2 .ind-chip svg {
  width: 46px; height: 46px; padding: 12px; border-radius: 14px;
  color: color-mix(in srgb, var(--ind) 62%, var(--color-white)); background: color-mix(in srgb, var(--ind) 26%, #1B2E31);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.industries-v2 .ind-chip:hover svg { background: var(--ind); color: var(--color-white); }
.industries-v2 .ind-rest-note {
  width: fit-content; max-width: 100%; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem); border-radius: 20px;
  background: #182A2D; border: 1px solid rgba(255,255,255,.12);
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem); line-height: 1.6; text-align: center; color: rgba(244,246,252,.82);
}
.industries-v2 .ind-rest-note a { color: #7FE3D5; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .industries-v2 .ind-guides .ty-card, .industries-v2 .ind-guides .ty-card .icon-tile, .industries-v2 .ind-guides .ty-go,
  .industries-v2 .ind-chip, .industries-v2 .ind-chip svg { transition: none; }
  .industries-v2 .ind-guides .ty-card:hover, .industries-v2 .ind-guides .ty-card:hover .icon-tile, .industries-v2 .ind-chip:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   Industry pages redesign (the five pages under /industries/<name>/).
   Scoped to .industry-v2, the wrapper in each content/industries/*.html.
   Brand colours only: the base .ind-* rules key their accents to --ind, which
   used to be each industry's own colour set inline. It is now set here, to
   the brand teal, for every page. The FAQ and the security panel use rules
   shared with other pages (".split-faq", ".sec-block").
   ------------------------------------------------------------------------- */
.industry-v2 { --ind: var(--color-brand); }
.industry-v2 > section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.industry-v2 .section-head { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.industry-v2 .section-head h2,
.industry-v2 .ind-problems-head h2,
.industry-v2 .ind-build-head h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.16; }

/* The problem: heading pinned on the left (base, from 1024), each problem its
   own card. */
.industry-v2 .ind-problems-head .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.industry-v2 .ind-callout {
  position: relative; isolation: isolate; overflow: hidden; gap: 1.1rem; align-items: center;
  margin-top: var(--space-6); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 22px;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  box-shadow: 0 24px 60px rgba(11,23,25,.22);
}
.industry-v2 .ind-callout::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(320px circle at 100% 0%, color-mix(in srgb, var(--ind) 55%, transparent), transparent 70%);
}
.industry-v2 .ind-callout p { font-size: clamp(1rem, .97rem + .2vw, 1.0625rem); line-height: 1.6; }
.industry-v2 .ind-callout-icon { width: 52px; height: 52px; border-radius: 16px; }
.industry-v2 .ind-callout-icon svg { width: 26px; height: 26px; }
.industry-v2 .ind-rows { display: grid; gap: 1rem; }
.industry-v2 .ind-rows li,
.industry-v2 .ind-rows li:first-child,
.industry-v2 .ind-rows li:last-child {
  /* start, not center: on a phone the copy runs to many lines and a centred
     badge drifts far from the heading it numbers. */
  grid-template-columns: 48px 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start;
  padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--color-white); border: 1px solid var(--color-border); border-left: 5px solid var(--ind);
  border-radius: 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.industry-v2 .ind-rows li:hover { transform: translateX(8px); box-shadow: 0 24px 54px rgba(11,23,25,.12); }
.industry-v2 .ind-num {
  width: 48px; height: 48px; border-radius: 15px; font-size: 1.25rem; border: 0;
  color: var(--ind); background: color-mix(in srgb, var(--ind) 12%, var(--color-white));
}
/* The brand orange, as the highlight. */
.industry-v2 .ind-rows li:hover .ind-num { background: var(--color-accent); color: var(--color-ink); }
.industry-v2 .ind-rows h3 { font-size: clamp(1.125rem, 1.05rem + .6vw, 1.3125rem); margin-bottom: .4rem; }
.industry-v2 .ind-rows p { font-size: 1rem; line-height: 1.6; }
@media (min-width: 640px) {
  .industry-v2 .ind-rows li,
  .industry-v2 .ind-rows li:first-child,
  .industry-v2 .ind-rows li:last-child { grid-template-columns: 60px 1fr; }
  .industry-v2 .ind-num { width: 60px; height: 60px; border-radius: 18px; font-size: 1.5rem; }
}

/* What we build: grid and glow on the dark band, eight solid tiles. On the
   dark band the brighter brand teal reads better than the text teal. */
.industry-v2 .ind-build { --ind: var(--color-brand-bright); }
.industry-v2 .ind-build::before {
  background-image:
    radial-gradient(760px circle at 0% 100%, rgba(15,155,142,.3), transparent 62%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.industry-v2 .ind-build-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.industry-v2 .ind-build-head p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; }
.industry-v2 .ind-build-list { gap: 1rem; }
.industry-v2 .ind-build-list li {
  gap: 1.1rem; align-items: flex-start; padding: clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.6rem); border-radius: 20px;
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem); line-height: 1.6;
  /* Solid, not translucent: the band's grid must not show through the tiles. */
  color: rgba(244,246,252,.78); background: #1B2E31; border: 1px solid rgba(255,255,255,.12);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.industry-v2 .ind-build-list li:hover { transform: translateY(-4px); background: #22393D; border-color: color-mix(in srgb, var(--ind) 70%, transparent); }
/* Lifted so the 44px badge centres on the first line of its text. */
.industry-v2 .ind-check { width: 44px; height: 44px; margin-top: -.5rem; border-radius: 14px; background: var(--ind); box-shadow: 0 10px 24px color-mix(in srgb, var(--ind) 40%, transparent); }
.industry-v2 .ind-check svg { width: 22px; height: 22px; }

/* Services: three cards in the brand teal. */
.industry-v2 .ind-services .grid-3 { gap: clamp(1rem, 2vw, 1.5rem); }
/* Below 860 the base grid is two columns (then one): the third card takes
   the full row instead of sitting alone beside an empty slot. */
@media (max-width: 859px) {
  .industry-v2 .ind-services .ty-card:last-child { grid-column: 1 / -1; }
}
.industry-v2 .ind-services .ty-card {
  isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: 26px;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border); border-top: 5px solid var(--ind); box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.industry-v2 .ind-services .ty-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(360px circle at 100% 0%, color-mix(in srgb, var(--ind) 22%, transparent), transparent 70%);
  transition: opacity 280ms var(--ease);
}
.industry-v2 .ind-services .ty-card:hover { transform: translateY(-8px); border-color: var(--ind); box-shadow: 0 30px 70px color-mix(in srgb, var(--ind) 22%, transparent); }
.industry-v2 .ind-services .ty-card:hover::before { opacity: 1; }
/* Every card's icon tile in brand teal (the markup varies them), filling on hover. */
.industry-v2 .ind-services .ty-card .icon-tile {
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: var(--space-5);
  background: var(--color-brand-light); color: var(--color-brand);
}
.industry-v2 .ind-services .ty-card .icon-tile svg { width: 30px; height: 30px; }
.industry-v2 .ind-services .ty-card:hover .icon-tile { background: var(--color-brand); color: var(--color-white); }
.industry-v2 .ind-services .ty-card h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.625rem); line-height: 1.15; margin-bottom: var(--space-3); }
.industry-v2 .ind-services .ty-card p { font-size: clamp(1rem, .95rem + .3vw, 1.0625rem); line-height: 1.6; flex: 1; }
.industry-v2 .ind-services .ty-go {
  align-self: flex-start; margin-top: var(--space-5); padding: .7rem 1.25rem; border-radius: var(--radius-full);
  font-size: .9375rem; color: var(--ind); border: 1.5px solid var(--ind);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.industry-v2 .ind-services .ty-card:hover .ty-go { background: var(--ind); color: var(--color-white); }

@media (prefers-reduced-motion: reduce) {
  .industry-v2 .ind-rows li, .industry-v2 .ind-build-list li, .industry-v2 .ind-services .ty-card, .industry-v2 .ind-services .ty-go { transition: none; }
  .industry-v2 .ind-rows li:hover, .industry-v2 .ind-build-list li:hover, .industry-v2 .ind-services .ty-card:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   Live Demos, Pricing, Insights, Contact and article pages redesign.
   Scoped to .work-v2, .pricing-v2, .insights-v2, .contact-v2 (wrappers in the
   content files) and .post-v2 (written by wrap_post in build.py, so it covers
   every article). The page header is the site-wide one. Demo cards and the
   split FAQ are shared with the homepage: see ".demo-card" and ".split-faq"
   in the homepage section above.
   ------------------------------------------------------------------------- */
:is(.work-v2, .pricing-v2, .insights-v2, .contact-v2, .post-v2) > section:not(.page-hero) { padding-block: clamp(3.5rem, 7vw, 6rem); }
:is(.work-v2, .pricing-v2, .insights-v2, .contact-v2, .post-v2) .section-head { max-width: 800px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
:is(.work-v2, .pricing-v2, .insights-v2, .contact-v2, .post-v2) .section-head h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.16; }
:is(.work-v2, .pricing-v2, .insights-v2, .contact-v2, .post-v2) .section-head .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* Dark sections: ink gradient, brand glows and the 48px grid. Cards on them
   are solid so the grid never shows through. */
.work-v2 .wk-steps, .pricing-v2 .pr-together {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
}
.work-v2 .wk-steps::before, .pricing-v2 .pr-together::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(760px circle at 0% 0%, rgba(15,155,142,.38), transparent 62%),
    radial-gradient(680px circle at 100% 100%, rgba(242,153,74,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
.work-v2 .wk-steps .eyebrow, .pricing-v2 .pr-together .eyebrow { color: #7FE3D5; }
.work-v2 .wk-steps .section-head h2, .pricing-v2 .pr-together .section-head h2 { color: var(--color-white); }

/* ---- Live Demos ---- */
.work-v2 .demo-notice {
  align-items: center; gap: 1.1rem; padding: 1.25rem 1.5rem; border-radius: 20px;
  border: 1px solid rgba(242,153,74,.35); border-left: 5px solid var(--color-accent); box-shadow: var(--shadow-sm);
}
.work-v2 .demo-notice svg { width: 46px; height: 46px; padding: 11px; border-radius: 14px; margin: 0; background: var(--color-white); color: var(--color-accent-dark); }
.work-v2 .demo-notice p { font-size: clamp(.9375rem, .9rem + .2vw, 1rem); line-height: 1.6; }
@media (max-width: 559px) { .work-v2 .demo-notice { align-items: flex-start; } }
/* Three across on wide screens, on a six-column grid so a short last row
   (one or two cards) sits in the middle. */
@media (min-width: 1100px) {
  .work-v2 .demo-grid.is-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .work-v2 .demo-grid.is-3 > .demo-card,
  .work-v2 .demo-grid.is-3 > .demo-card:last-child:nth-child(odd) { grid-column: span 2; justify-self: stretch; width: auto; }
  .work-v2 .demo-grid.is-3 > .demo-card:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .work-v2 .demo-grid.is-3 > .demo-card:nth-child(3n+2):last-child { grid-column: 4 / span 2; }
  .work-v2 .demo-grid.is-3 > .demo-card:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}

/* From demo to your own site: three solid step cards on the dark section. */
.work-v2 .ty-steps { gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .work-v2 .ty-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-v2 .ty-step {
  --c: var(--color-brand-bright);
  display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px;
  background: #1B2E31; border: 1px solid rgba(255,255,255,.12); border-top: 4px solid var(--c);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.work-v2 .ty-step:hover { transform: translateY(-6px); background: #22393D; }
.work-v2 .ty-n {
  width: 64px; height: 64px; border-radius: 18px; font-size: 1.625rem; border: 0;
  background: var(--c); color: var(--color-white); box-shadow: 0 12px 26px rgba(15,155,142,.4);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.work-v2 .ty-step:hover .ty-n { background: var(--color-accent); color: var(--color-ink); }
.work-v2 .ty-step h3 { color: var(--color-white); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); line-height: 1.2; margin-bottom: .6rem; }
.work-v2 .ty-step p { color: rgba(244,246,252,.74); font-size: clamp(1rem, .95rem + .3vw, 1.0625rem); line-height: 1.6; }

/* ---- Pricing ---- */
.pricing-v2 .price-grid { gap: clamp(1rem, 2vw, 1.25rem); }
.pricing-v2 .price-card {
  gap: .8rem; padding: 2rem 1.5rem 1.75rem; border-radius: 22px; border-top: 4px solid var(--color-brand); box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.pricing-v2 .price-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(12,132,120,.18); border-color: var(--color-brand); }
/* The longest title ("WordPress business website") fits one line from 1240px.
   Between there and the single-column layout a title can wrap, so two lines
   are reserved on every card to keep the prices level. */
.pricing-v2 .price-label { line-height: 1.25; }
@media (min-width: 640px) and (max-width: 1239px) { .pricing-v2 .price-label { min-height: 2.5em; } }
.pricing-v2 .price-from strong { font-size: 2rem; letter-spacing: -.02em; }
.pricing-v2 .price-range { align-self: flex-start; padding: .3rem .75rem; border-radius: 12px; background: var(--color-bg); border: 1px solid var(--color-border); }
.pricing-v2 .price-note { font-size: .9375rem; line-height: 1.6; }
.pricing-v2 .price-card .ty-go {
  align-self: flex-start; margin-top: .6rem; padding: .6rem 1.1rem; border-radius: var(--radius-full);
  color: var(--color-brand); border: 1.5px solid var(--color-brand);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.pricing-v2 .price-card:hover .ty-go { background: var(--color-brand); color: var(--color-white); }
.pricing-v2 .price-disclaimer {
  width: fit-content; max-width: 100%; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: .8rem 1.4rem; border-radius: 22px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  font-size: .9375rem; color: var(--color-text-muted); text-align: center;
}
.pricing-v2 .price-disclaimer a { color: var(--color-brand); font-weight: 600; }

/* Care plans: rounded cards, the recommended one dark and glowing. */
.pricing-v2 .plan-grid { gap: 1.5rem; max-width: 1160px; }
.pricing-v2 .plan-card {
  border-radius: 26px; padding: clamp(2.25rem, 4vw, 2.75rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.75rem, 3vw, 2.25rem);
  overflow: hidden; box-shadow: var(--shadow-md); border-color: var(--color-border);
}
.pricing-v2 .plan-card::before { height: 6px; }
.pricing-v2 .plan-card.is-featured {
  isolation: isolate; border-color: transparent;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  box-shadow: 0 40px 90px rgba(11,23,25,.42), 0 0 0 1px rgba(95,214,198,.3);
}
.pricing-v2 .plan-card.is-featured::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(420px circle at 100% 0%, rgba(15,155,142,.5), transparent 65%),
    radial-gradient(340px circle at 0% 100%, rgba(242,153,74,.2), transparent 62%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
/* Side by side (from 860px, where the grid goes to three columns) all three
   cards share one height; the recommended card is then made taller by the same
   amount above and below, matched by extra padding, so its contents stay level
   with the other two. */
@media (min-width: 860px) {
  .pricing-v2 .plan-card.is-featured { margin-block: -1.25rem; padding-block: 4rem 3.5rem; }
}
.pricing-v2 .plan-badge { border-radius: var(--radius-full); padding: .35rem .85rem; }
.pricing-v2 .plan-card h3 { font-size: clamp(1.5rem, 1.35rem + .6vw, 1.75rem); }
.pricing-v2 .plan-price strong { font-size: clamp(3rem, 2.4rem + 1.6vw, 3.75rem); letter-spacing: -.03em; }
.pricing-v2 .plan-hours { border-radius: 16px; padding: 1rem 1.15rem; }
.pricing-v2 .plan-card .check-list li { gap: .8rem; font-size: 1rem; }
.pricing-v2 .plan-card .check-list svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; flex-shrink: 0; background: var(--color-brand-light); color: var(--color-brand); }
.pricing-v2 .plan-card.is-featured .check-list svg { background: rgba(242,153,74,.18); color: var(--color-accent); }

/* How we work together: six solid tiles on the dark section. */
.pricing-v2 .pr-together .section-head p { color: rgba(244,246,252,.78); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.pricing-v2 .remote-grid { gap: clamp(1rem, 2vw, 1.25rem); }
@media (min-width: 960px) { .pricing-v2 .remote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pricing-v2 .remote-tile {
  gap: .6rem; padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem); border-radius: 22px;
  background: #1B2E31; border: 1px solid rgba(255,255,255,.12); border-top: 3px solid #5FD6C6;
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.pricing-v2 .remote-tile:hover { transform: translateY(-6px); background: #22393D; border-color: rgba(95,214,198,.6); }
.pricing-v2 .remote-icon {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: .9rem;
  background: rgba(95,214,198,.14); color: #7FE3D5;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.pricing-v2 .remote-icon svg { width: 26px; height: 26px; }
.pricing-v2 .remote-tile:hover .remote-icon { background: var(--color-brand-bright); color: var(--color-white); }
.pricing-v2 .remote-tile h3 { color: var(--color-white); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.3125rem); }
.pricing-v2 .remote-tile p { color: rgba(244,246,252,.74); font-size: 1rem; line-height: 1.6; }

/* ---- Article cards (Insights, and "More from the blog" under an article) ----
   A wrapping flex row, so a short last row sits in the middle. */
:is(.insights-v2, .post-v2) .post-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 2.5vw, 1.75rem); --per-row: 1; }
@media (min-width: 700px) { :is(.insights-v2, .post-v2) .post-grid { --per-row: 2; } }
@media (min-width: 1100px) { :is(.insights-v2, .post-v2) .post-grid { --per-row: 3; } }
:is(.insights-v2, .post-v2) .post-card {
  flex: 0 0 calc((100% - (var(--per-row) - 1) * clamp(1.25rem, 2.5vw, 1.75rem)) / var(--per-row)); min-width: 0;
  border-radius: 24px; box-shadow: var(--shadow-sm);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
:is(.insights-v2, .post-v2) .post-card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(11,23,25,.16); border-color: var(--color-brand); }
:is(.insights-v2, .post-v2) .post-card-media { border-bottom: 0; }
:is(.insights-v2, .post-v2) .post-card-media img { transition: transform 700ms var(--ease); }
:is(.insights-v2, .post-v2) .post-card:hover .post-card-media img { transform: scale(1.07); }
:is(.insights-v2, .post-v2) .post-card-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); gap: .8rem; }
:is(.insights-v2, .post-v2) .post-card h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.3125rem); line-height: 1.25; }
:is(.insights-v2, .post-v2) .post-card p { font-size: 1rem; line-height: 1.6; }
:is(.insights-v2, .post-v2) .post-card .ty-go {
  align-self: flex-start; margin-top: .6rem; padding: .6rem 1.1rem; border-radius: var(--radius-full);
  color: var(--color-brand); border: 1.5px solid var(--color-brand);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
:is(.insights-v2, .post-v2) .post-card:hover .ty-go { background: var(--color-brand); color: var(--color-white); }

/* Insights: the newest article leads at full width. From 900px its picture
   sits beside the text as an inset 16:10 frame, the picture's own shape, so
   it is never cropped however tall the text runs. */
.insights-v2 .in-posts .post-card:first-child { flex-basis: 100%; }
.insights-v2 .in-posts .post-card:first-child h3 { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); line-height: 1.14; }
.insights-v2 .in-posts .post-card:first-child p { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.65; }
@media (min-width: 900px) {
  .insights-v2 .in-posts .post-card:first-child { flex-direction: row; align-items: center; }
  .insights-v2 .in-posts .post-card:first-child .post-card-media {
    flex: 0 0 calc(56% - 3rem); margin: 1.5rem; border-radius: 18px; border: 1px solid var(--color-border);
  }
  .insights-v2 .in-posts .post-card:first-child .post-card-body { padding: 2.5rem 3rem 2.5rem 1.5rem; justify-content: center; gap: 1.1rem; }
  .insights-v2 .in-posts .post-card:first-child p { flex: 0 1 auto; }
}

/* ---- Contact ---- */
.contact-v2 .ct-form { background: var(--color-bg); }
.contact-v2 .ct-form .two-col { gap: 2rem; }
/* The form: one raised card with a gradient top edge and roomier fields. */
.contact-v2 .ct-form .two-col > .card { border-radius: 28px; border: 0; box-shadow: 0 30px 70px rgba(11,23,25,.12); }
.contact-v2 .ct-form .two-col > .card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-brand), #5FD6C6 45%, var(--color-accent));
}
.contact-v2 .ct-form .two-col > .card:hover { transform: none; }
.contact-v2 .ct-form .two-col > .card h2 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); line-height: 1.12; }
.contact-v2 .ct-form .form-grid { gap: 1.4rem; margin-top: var(--space-5); }
.contact-v2 .ct-form .form-group label { font-size: .9375rem; }
.contact-v2 .ct-form .form-group input, .contact-v2 .ct-form .form-group select, .contact-v2 .ct-form .form-group textarea {
  padding: .95rem 1.05rem; border-radius: 14px; font-size: 1rem; background: var(--color-bg);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}
.contact-v2 .ct-form .form-group input:focus, .contact-v2 .ct-form .form-group select:focus, .contact-v2 .ct-form .form-group textarea:focus {
  background: var(--color-white); border-color: var(--color-brand); box-shadow: 0 0 0 4px rgba(12,132,120,.14); outline: none;
}
.contact-v2 .ct-form .form-grid .btn { padding-block: 1.05rem; font-size: 1.0625rem; }
/* The ways to reach us: the booking card dark and leading, the rest lighter. */
.contact-v2 .ct-form .flow > * + * { margin-top: 1.25rem; }
.contact-v2 .ct-form .flow > .card {
  padding: clamp(1.5rem, 3vw, 2rem); border-radius: 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.contact-v2 .ct-form .flow > .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-brand); }
.contact-v2 .ct-form .flow > .card .icon-tile { width: 56px; height: 56px; border-radius: 16px; margin-bottom: var(--space-4); background: var(--color-brand-light); color: var(--color-brand); }
.contact-v2 .ct-form .flow > .card .icon-tile svg { width: 26px; height: 26px; }
.contact-v2 .ct-form .flow > .card:hover .icon-tile { background: var(--color-brand); color: var(--color-white); }
.contact-v2 .ct-form .flow > .card h3 { font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem); }
.contact-v2 .ct-form .flow > .card p { font-size: 1rem; line-height: 1.6; }
.contact-v2 .ct-form .flow > .card:first-child {
  isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 3.5vw, 2.5rem); border: 0;
  background: linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  box-shadow: 0 30px 70px rgba(11,23,25,.3);
}
.contact-v2 .ct-form .flow > .card:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(420px circle at 100% 0%, rgba(15,155,142,.5), transparent 65%),
    radial-gradient(340px circle at 0% 100%, rgba(242,153,74,.2), transparent 62%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
.contact-v2 .ct-form .flow > .card:first-child .icon-tile,
.contact-v2 .ct-form .flow > .card:first-child:hover .icon-tile { background: rgba(255,255,255,.14); color: var(--color-white); border: 1px solid rgba(255,255,255,.16); }
.contact-v2 .ct-form .flow > .card:first-child h3 { color: var(--color-white); font-size: clamp(1.5rem, 1.35rem + .6vw, 1.75rem); }
.contact-v2 .ct-form .flow > .card:first-child p { color: rgba(244,246,252,.8); }
.contact-v2 .ct-form .flow > .card:first-child .btn { background: var(--color-accent); color: var(--color-ink); }

/* ---- Article pages ----
   One picture per article, its own image. From 1024px it is the framed header
   picture, in the image's 16:10 shape so nothing is cropped. Below that the
   header is plain (no dimmed background photo) and the picture is shown in
   full under it. */
.post-v2 .post-feature { max-width: 900px; margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 0; }
.post-v2 .post-feature img { aspect-ratio: 16 / 10; border-radius: clamp(16px, 3vw, 24px); box-shadow: 0 24px 60px rgba(11,23,25,.18); }
.post-v2 .post-feature + .post-article { padding-top: clamp(2rem, 5vw, 3rem); }
@media (max-width: 1023.98px) {
  .post-v2 .page-hero.is-dark .page-hero-bg { display: none; }
}
@media (min-width: 1024px) {
  .post-v2 .post-feature { display: none; }
  .post-v2 .page-hero.is-dark:not(.lp-hero) .page-hero-bg { width: min(520px, 40vw); height: auto; aspect-ratio: 16 / 10; }
}
.post-v2 > .post-article { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 1000px) { .post-v2 .post-layout { gap: 4.5rem; justify-content: center; } }
.post-v2 .post-toc {
  padding: 1.6rem 1.5rem; border-radius: 20px; background: var(--color-white);
  border: 1px solid var(--color-border); border-top: 4px solid var(--color-brand); box-shadow: var(--shadow-sm);
}
.post-v2 .post-toc ol { gap: .15rem; }
.post-v2 .post-toc li { padding: .35rem 0 .35rem .35rem; }
.post-v2 .post-toc a { display: block; }
/* Reading text: larger, with a lead paragraph and marked headings. */
.post-v2 .post-body p, .post-v2 .post-body li { font-size: 1.0625rem; line-height: 1.8; }
.post-v2 .post-body > p:first-of-type { font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.3125rem); line-height: 1.65; color: var(--color-ink); }
.post-v2 .post-body h2 {
  position: relative; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 0 0 0 1.25rem; border: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.2;
}
.post-v2 .post-body h2:first-child { margin-top: 0; }
.post-v2 .post-body h2::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px; border-radius: 5px;
  background: linear-gradient(180deg, var(--color-brand), #5FD6C6 45%, var(--color-accent));
}
.post-v2 .post-body h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.3125rem); margin-top: 2.25rem; }
.post-v2 .post-body li::marker { color: var(--color-brand); font-weight: 800; }
.post-v2 .post-body a { text-decoration: underline; text-underline-offset: 3px; }
/* Tables: a rounded card with a dark heading row. */
.post-v2 .post-body .table-wrap { margin-block: 2rem; border-radius: 18px; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.post-v2 .post-body table { font-size: clamp(.9375rem, .9rem + .2vw, 1rem); }
.post-v2 .post-body th, .post-v2 .post-body td { padding: clamp(.75rem, 1.5vw, 1rem) clamp(.9rem, 2vw, 1.25rem); }
.post-v2 .post-body th { background: var(--color-ink); color: var(--color-white); font-size: .9375rem; border-color: var(--color-ink); }
.post-v2 .post-body tbody tr:nth-child(even) td { background: var(--color-bg); }
.post-v2 .post-body tbody td:first-child { font-weight: 700; color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  .work-v2 .demo-card, .work-v2 .demo-shot img, .work-v2 .ty-step, .pricing-v2 .price-card, .pricing-v2 .remote-tile,
  :is(.insights-v2, .post-v2) .post-card, :is(.insights-v2, .post-v2) .post-card-media img, .contact-v2 .ct-form .flow > .card { transition: none; }
  .work-v2 .demo-card:hover, .work-v2 .demo-card:hover .demo-shot img, .work-v2 .ty-step:hover, .pricing-v2 .price-card:hover,
  .pricing-v2 .remote-tile:hover, :is(.insights-v2, .post-v2) .post-card:hover,
  :is(.insights-v2, .post-v2) .post-card:hover .post-card-media img, .contact-v2 .ct-form .flow > .card:hover { transform: none; }
}