/* ==========================================================================
   ASSIZ — shared design system
   Brand: teal ascending-bar mark, navy wordmark, geometric sans.

   This file is the single source of truth. Every page links it; no page
   carries its own copy of these rules.

   Contrast note: --teal-600 is a FILL colour (backgrounds, bars, borders).
   For teal TEXT on a light background always use --teal-ink, which clears
   WCAG AA at 5.47:1 on white. --teal-600 only manages 3.74:1 and fails.
   ========================================================================== */

:root {
  /* ---- Ink & neutrals ---- */
  --navy-950: #0a1220;
  --navy-900: #0f172a;
  --navy-800: #16213a;
  --navy-700: #1f2c4a;
  --ink: #101828;

  --slate-700: #334155;
  --slate-600: #475569;   /* body copy on white, 7.58:1 */
  --slate-500: #556377;   /* small/muted on light, 6.11:1 on white, 5.58:1 on slate-100 */
  --slate-400: #94a3b8;   /* muted on DARK only, 7.31:1 on navy-950 */
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-150: #e9eef4;
  --slate-100: #f1f5f9;
  --off-white: #f8fafc;
  --white: #ffffff;

  /* ---- Brand teal ---- */
  --teal-ink: #0f766e;    /* teal TEXT on light backgrounds */
  --teal-700: #0b7c72;
  --teal-600: #0d9488;    /* fills, bars, borders */
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-300: #5eead4;
  --teal-100: #d7f5ef;
  --teal-050: #ecfdf9;

  /* Button gradient stops. White label on --teal-600 is only 3.74:1 and
     fails AA, so the primary button uses its own darker ramp. Lightest
     stop here is 4.57:1 against white, so every point of the gradient
     passes. */
  --teal-btn-1: #0e8478;
  --teal-btn-2: #0f766e;
  --teal-btn-3: #0b645d;

  /* ---- Type ---- */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Georgia", "Iowan Old Style", serif;

  /* Fluid modular scale. Each step clamps between a mobile and desktop size
     so nothing needs a breakpoint to stay readable. */
  --fs-display: clamp(2.35rem, 1.55rem + 3.4vw, 4rem);
  --fs-h1:      clamp(2.05rem, 1.45rem + 2.6vw, 3.35rem);
  --fs-h2:      clamp(1.6rem, 1.28rem + 1.45vw, 2.35rem);
  --fs-h3:      clamp(1.15rem, 1.08rem + 0.32vw, 1.32rem);
  --fs-h4:      1rem;
  --fs-lead:    clamp(1.05rem, 1rem + 0.28vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.68;

  --ls-display: -0.028em;
  --ls-h2: -0.018em;
  --ls-h3: -0.008em;
  --ls-eyebrow: 0.15em;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-7: 36px;
  --sp-8: 46px;
  --sp-9: 60px;
  --sp-10: 76px;
  --sp-11: 96px;

  /* Section rhythm scales with viewport so mobile isn't padded like desktop */
  --section-y: clamp(58px, 4vw + 34px, 104px);
  --section-y-tight: clamp(42px, 3vw + 24px, 72px);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.14);
  --shadow-teal: 0 10px 24px rgba(13, 148, 136, 0.26);

  /* Ease-out curves. --ease-out-soft is the house curve: quick departure,
     long gentle settle. Used by the preloader and every reveal. */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --container: 1160px;
  --measure: 68ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy-900);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

p {
  margin: 0 0 1.05em;
  color: var(--slate-600);
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
strong { color: var(--navy-900); font-weight: 600; }
em { color: inherit; }

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

::selection { background: var(--teal-100); color: var(--navy-900); }

/* Visible keyboard focus everywhere. The old sheet had none at all, which
   made the whole site unusable by keyboard. */
:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero-dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--teal-300);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--navy-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 28px);
}

/* ==========================================================================
   Eyebrow
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition:
    transform 0.28s var(--ease-out-soft),
    box-shadow 0.28s var(--ease-out-soft),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.08s; }

/* Sending / busy state. pointer-events:none stops double submits. */
.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--teal-btn-1), var(--teal-btn-2) 60%, var(--teal-btn-3));
  color: var(--white);
  box-shadow: var(--shadow-teal);
}
/* Hover deepens the ramp. That is partly for feel and partly so the sheen
   below can pass over it without the white label dropping under AA at the
   brightest moment of the sweep. Darkest point of the sheen is 4.91:1. */
.btn-primary:hover {
  background: linear-gradient(135deg, #0b6b62, #0a5f58 60%, #084f49);
  box-shadow: 0 16px 34px rgba(13, 148, 136, 0.36);
}

/* Sheen sweep. Transform-only, so it never triggers layout. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.12) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out-soft);
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-outline {
  background: transparent;
  border-color: var(--slate-300);
  color: var(--navy-900);
}
.btn-outline:hover {
  border-color: var(--teal-600);
  color: var(--teal-ink);
  background: var(--teal-050);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
  backdrop-filter: blur(4px);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* Arrow nudge on any button whose label ends in an arrow */
.btn .arw {
  display: inline-block;
  transition: transform 0.28s var(--ease-out-soft);
}
.btn:hover .arw { transform: translateX(3px); }

/* ==========================================================================
   Logo
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--navy-900);
}
.logo-mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}
.logo-mark span {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: var(--teal-400);
  transform-origin: bottom center;
  transition: transform 0.4s var(--ease-out-soft);
}
.logo-mark span:nth-child(1) { height: 40%; background: var(--teal-300); }
.logo-mark span:nth-child(2) { height: 70%; background: var(--teal-400); }
.logo-mark span:nth-child(3) { height: 100%; background: var(--teal-600); }

/* Bars step up on hover, staggered, a small nod to the preloader */
.logo:hover .logo-mark span:nth-child(1) { transform: scaleY(1.55); transition-delay: 0s; }
.logo:hover .logo-mark span:nth-child(2) { transform: scaleY(1.28); transition-delay: 0.05s; }
.logo:hover .logo-mark span:nth-child(3) { transform: scaleY(1.1); transition-delay: 0.1s; }

.logo.on-dark { color: var(--white); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--slate-200);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.is-stuck {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
  border-bottom-color: transparent;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--slate-600);
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease-out-soft);
}
.nav-links a:hover { color: var(--navy-900); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--navy-900); font-weight: 600; }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: var(--sp-3); }

/* ---- Mobile menu button ---- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover { border-color: var(--teal-600); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-900);
  transition: transform 0.35s var(--ease-out-soft), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile drawer ----
   The previous sheet simply hid .nav-links below 860px with no replacement,
   which left the site unnavigable on a phone. This is the fix. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 96px clamp(20px, 6vw, 40px) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.32s var(--ease-out-soft), transform 0.32s var(--ease-out-soft), visibility 0.32s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mobile-nav a.m-link {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  padding: 12px 0;
  border-bottom: 1px solid var(--slate-150);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.45s var(--ease-out-soft), opacity 0.45s var(--ease-out-soft), color 0.2s ease;
}
.mobile-nav a.m-link:hover { color: var(--teal-ink); }
.mobile-nav.is-open a.m-link { transform: translateY(0); opacity: 1; }
.mobile-nav.is-open a.m-link:nth-child(1) { transition-delay: 0.04s; }
.mobile-nav.is-open a.m-link:nth-child(2) { transition-delay: 0.08s; }
.mobile-nav.is-open a.m-link:nth-child(3) { transition-delay: 0.12s; }
.mobile-nav.is-open a.m-link:nth-child(4) { transition-delay: 0.16s; }
.mobile-nav.is-open a.m-link:nth-child(5) { transition-delay: 0.20s; }
.mobile-nav.is-open a.m-link:nth-child(6) { transition-delay: 0.24s; }

.mobile-nav .m-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .nav-cta .btn-primary { display: none; }
}
@media (min-width: 901px) {
  .mobile-nav { display: none; }
}

/* ==========================================================================
   Hero (dark)
   ========================================================================== */

.hero-dark {
  background:
    radial-gradient(circle at 18% -10%, var(--navy-700), transparent 55%),
    radial-gradient(circle at 88% 15%, rgba(45, 212, 191, 0.16), transparent 52%),
    var(--navy-950);
  color: var(--white);
  padding: clamp(72px, 7vw + 30px, 116px) 0 clamp(66px, 6vw + 28px, 104px);
  position: relative;
  overflow: hidden;
}

/* Fine diagonal weave. Pure CSS, no image request, and it stops the navy
   reading as a flat slab under the headline. */
.hero-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.028) 0px,
    rgba(255, 255, 255, 0.028) 1px,
    transparent 1px,
    transparent 7px
  );
  pointer-events: none;
}
.hero-dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(10, 18, 32, 0.85));
  pointer-events: none;
}
.hero-dark > .container { position: relative; z-index: 1; }

.hero-dark .eyebrow { color: var(--teal-300); }
.hero-dark h1 { color: var(--white); font-size: var(--fs-display); }
.hero-dark p.lead {
  color: var(--slate-300);
  font-size: var(--fs-lead);
  max-width: 640px;
  line-height: 1.62;
}
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  flex-wrap: wrap;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: var(--section-y) 0; }
.section-tight { padding: var(--section-y-tight) 0; }

.section-alt {
  background: var(--slate-100);
  position: relative;
}
/* Faint dot grid so alternating bands read as a different surface, not just
   a different grey. */
.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.section-alt > .container { position: relative; z-index: 1; }

.section-header { max-width: 640px; margin: 0 0 var(--sp-8); }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.center .eyebrow { justify-content: center; }
.section-header p { font-size: var(--fs-lead); line-height: 1.6; }

.prose { max-width: var(--measure); }

/* ==========================================================================
   Stat bar
   ========================================================================== */

.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  background:
    linear-gradient(135deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  border-radius: var(--radius-lg);
  padding: clamp(30px, 3vw + 14px, 46px) clamp(22px, 3vw, 38px);
  color: var(--white);
  margin-top: clamp(-56px, -4vw, -70px);
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stat-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 8%, rgba(45, 212, 191, 0.16), transparent 55%);
  pointer-events: none;
}
.stat-bar .stat {
  text-align: center;
  position: relative;
  z-index: 1;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) / -2);
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.stat .num {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--teal-300);
  letter-spacing: -0.02em;
}
.stat .label {
  font-size: var(--fs-xs);
  color: var(--slate-300);
  margin-top: var(--sp-2);
  line-height: 1.45;
}
@media (max-width: 760px) {
  .stat-bar { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .stat:nth-child(odd)::before { display: none; }
}

/* ==========================================================================
   Grid & cards
   ========================================================================== */

.grid { display: grid; gap: var(--sp-6); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2vw + 12px, 32px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow 0.35s var(--ease-out-soft),
    transform 0.35s var(--ease-out-soft),
    border-color 0.35s ease;
}
/* Gradient accent that wipes in from the left on hover. scaleX only. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out-soft);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--slate-150);
}
.card:hover::before { transform: scaleX(1); }
.card:focus-within::before { transform: scaleX(1); }

.card h3 { margin-bottom: 0.45em; }
.card .btn { margin-top: var(--sp-4); }
.card .btn + .btn { margin-left: var(--sp-2); }

.card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--teal-050), var(--teal-100));
  border: 1px solid var(--teal-100);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  font-size: 1.2rem;
  transition: transform 0.4s var(--ease-out-soft);
}
.card:hover .card-icon { transform: translateY(-2px) scale(1.05); }

/* Spec line under a card body */
.spec {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  border-top: 1px dashed var(--slate-200);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  line-height: 1.55;
}

.pill-status {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  white-space: nowrap;
}

/* ==========================================================================
   Steps
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  position: relative;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: var(--sp-6); } }

.step { position: relative; }
.step .step-num {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-ink);
  background: var(--white);
  border: 1.5px solid var(--teal-100);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
}
/* Connector rule between steps on wide screens */
@media (min-width: 901px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 48px;
    right: calc(var(--sp-7) * -1 + 10px);
    height: 1.5px;
    background: linear-gradient(90deg, var(--teal-100), transparent);
  }
}

/* ==========================================================================
   Tables
   ========================================================================== */

table.doc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--sp-5) 0;
  font-size: 0.92rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.doc-table th {
  background: var(--navy-900);
  color: var(--white);
  text-align: left;
  padding: 13px 16px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
table.doc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-200);
  color: var(--slate-600);
  vertical-align: top;
  line-height: 1.55;
}
table.doc-table tr:last-child td { border-bottom: none; }
table.doc-table tbody tr { transition: background-color 0.2s ease; }
table.doc-table tbody tr:nth-child(even) td { background: var(--off-white); }
table.doc-table tbody tr:hover td { background: var(--teal-050); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Logo strip
   ========================================================================== */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
  justify-content: center;
}
.logo-strip span {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--slate-500);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  transition: color 0.25s ease, transform 0.35s var(--ease-out-soft);
}
.logo-strip span:hover { color: var(--navy-900); transform: translateY(-2px); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  border-radius: var(--radius-lg);
  padding: clamp(40px, 4vw + 20px, 68px) clamp(24px, 4vw, 52px);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 8px
  );
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(45, 212, 191, 0.24), transparent 58%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); }
.cta-band p {
  color: var(--slate-300);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-lead);
}
.cta-band .hero-actions { justify-content: center; }

/* Left-aligned variant, so not every page closes with the same centred slab */
.cta-band.cta-split {
  text-align: left;
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: var(--sp-7);
  align-items: center;
}
.cta-band.cta-split p { margin-left: 0; max-width: 46ch; }
.cta-band.cta-split .hero-actions { justify-content: flex-start; margin-top: 0; }
@media (max-width: 800px) {
  .cta-band.cta-split { grid-template-columns: 1fr; text-align: left; }
}

/* ==========================================================================
   Pull quote
   ========================================================================== */

.pullquote {
  border-left: 3px solid var(--teal-600);
  background: linear-gradient(100deg, var(--teal-050), transparent 80%);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
  margin: var(--sp-8) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pullquote p.q {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--navy-900);
  margin-bottom: var(--sp-3);
}
.pullquote cite {
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate-500);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw + 12px, 42px);
  box-shadow: var(--shadow-md);
}
.form-row { margin-bottom: var(--sp-5); }
.form-row label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-900);
  margin-bottom: var(--sp-2);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--off-white);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.form-row textarea { resize: vertical; min-height: 110px; }
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--slate-500); opacity: 0.75; }
.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover { border-color: var(--slate-400); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
.form-note { font-size: var(--fs-xs); color: var(--slate-500); margin-top: var(--sp-3); }

/* ---- Submit result ----
   Written by site.js after a submit attempt. The element carries
   role="status" and aria-live="polite" so the outcome is announced rather
   than only shown. */
.form-status {
  display: none;
  margin-top: var(--sp-4);
  margin-bottom: 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.form-status.is-visible { display: block; }
.form-status.is-ok {
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  color: var(--teal-ink);        /* 5.21:1 on teal-050 */
}
.form-status.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;                /* 7.60:1 on #fef2f2 */
}

/* ---- Honeypot ----
   Positioned off-screen rather than display:none, because some bots
   deliberately skip fields hidden that way. Never focusable, never
   announced to assistive tech. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-950);
  color: var(--slate-300);
  padding: var(--sp-9) 0 var(--sp-6);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-300), transparent 65%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  margin-bottom: var(--sp-8);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 {
  color: var(--white);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--sp-3); line-height: 1.5; }
.footer-col a {
  display: inline-block;
  color: var(--slate-300);
  font-size: 0.92rem;
  transition: color 0.2s ease, transform 0.25s var(--ease-out-soft);
}
.footer-col a:hover { color: var(--teal-300); transform: translateX(3px); }

.footer-note { color: var(--slate-400); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.footer-address { color: var(--slate-400); font-style: normal; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--slate-400);
}

/* ==========================================================================
   Page hero (light)
   ========================================================================== */

.page-hero {
  background:
    radial-gradient(circle at 92% -30%, rgba(45, 212, 191, 0.13), transparent 55%),
    var(--slate-100);
  padding: clamp(52px, 5vw + 22px, 78px) 0 clamp(44px, 4vw + 20px, 66px);
  border-bottom: 1px solid var(--slate-200);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--teal-ink); }
.page-hero p.lead {
  font-size: var(--fs-lead);
  max-width: 640px;
  color: var(--slate-600);
  line-height: 1.62;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-5); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, var(--slate-200), var(--slate-150), transparent);
  margin: var(--sp-9) 0;
  border: none;
}

.muted { color: var(--slate-500); }
.small { font-size: var(--fs-sm); }

.link-teal {
  color: var(--teal-ink);        /* 5.47:1 on white; --teal-600 would fail AA */
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.link-teal:hover { border-bottom-color: currentColor; }

.prose-center {
  max-width: 72ch;
  margin-inline: auto;
}

.price-card {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
}
.price {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 1.6rem + 2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy-900);
  margin: 0 0 var(--sp-2);
}

/* ==========================================================================
   Scroll reveal
   Transform + opacity only, so no layout work per frame.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.7s var(--ease-out-soft),
    transform 0.7s var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }
.reveal-d4 { transition-delay: 0.28s; }

/* If JS never runs, nothing may stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Preloader
   ========================================================================== */

/* Repeat visits: the intro never paints at all. The decision is made by a
   tiny inline script in <head>, before first paint, so there is no flash. */
html:not(.is-loading) #preloader { display: none; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, var(--navy-800), var(--navy-950) 70%);
  transition:
    opacity 0.62s var(--ease-out-soft),
    visibility 0.62s;
}
#preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 7px
  );
}
#preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pl-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  transform: scale(1);
  transition: transform 0.62s var(--ease-out-soft), opacity 0.5s var(--ease-out-soft);
}
#preloader.is-done .pl-inner {
  transform: scale(1.04);
  opacity: 0;
}

/* The mark is inline SVG with a fixed viewBox, so it scales without ever
   distorting. Bars grow from the baseline, staggered. */
.pl-mark {
  width: clamp(52px, 12vw, 68px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(45, 212, 191, 0.42));
}
.pl-bar {
  transform: scaleY(0);
  /* fill-box scopes the origin to each bar's own box, so every bar grows
     from its own baseline regardless of height. */
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pl-rise 0.85s var(--ease-out-soft) forwards;
}
.pl-bar:nth-child(1) { animation-delay: 0.14s; }
.pl-bar:nth-child(2) { animation-delay: 0.27s; }
.pl-bar:nth-child(3) { animation-delay: 0.40s; }

@keyframes pl-rise {
  from { transform: scaleY(0); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* The wordmark resolves letter by letter. An earlier version animated
   letter-spacing, which is a layout property and forces a reflow on every
   frame. Splitting into spans and animating each one's transform keeps the
   whole sequence on the compositor. */
.pl-word {
  display: flex;
  gap: 0.2em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 1.95rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.08em;
  text-indent: 0.2em;
}
.pl-word span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: pl-letter 0.72s var(--ease-out-soft) forwards;
}
.pl-word span:nth-child(1) { animation-delay: 0.52s; }
.pl-word span:nth-child(2) { animation-delay: 0.60s; }
.pl-word span:nth-child(3) { animation-delay: 0.68s; }
.pl-word span:nth-child(4) { animation-delay: 0.76s; }
.pl-word span:nth-child(5) { animation-delay: 0.84s; }

@keyframes pl-letter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.pl-track {
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.pl-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
  transform: scaleX(0);
  transform-origin: left center;
  animation: pl-fill 1.7s var(--ease-out-quart) 0.34s forwards;
}
@keyframes pl-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Prevent scrolling while the intro is on screen */
html.is-loading, html.is-loading body { overflow: hidden; }

/* ==========================================================================
   Reduced motion
   One authoritative block. Anything decorative stops; nothing disappears.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  #preloader { display: none !important; }
  html.is-loading, html.is-loading body { overflow: auto !important; }
  .btn:hover, .card:hover, .logo-strip span:hover { transform: none !important; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .mobile-nav, #preloader, .cta-band, .btn { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}