/* ==========================================================================
   Blutrain — design system
   Editorial / Swiss engineering. Light-first, dark-capable.
   Single stylesheet. No framework, no reset library.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground + ink. Warm off-white, not pure grey — reads like paper. */
  --paper:      #FBFAF7;
  --paper-2:    #F3F1EC;
  --paper-3:    #E9E6DF;
  --ink:        #15171B;
  --ink-2:      #4E535B;
  --ink-3:      #868C95;
  --rule:       #DBD7CE;
  --rule-2:     #C9C4B8;

  /* One signal accent: cobalt. Replaces the original teal, which read washed
     out against the warm paper ground. Deep and saturated rather than neon, so
     it stays clear of the cyan-glow look every AI template uses — and it keeps
     the "Blu" in Blutrain. Clears WCAG AA for body text on --paper.
     To try another accent, change these five tokens and the two dark-mode
     equivalents below; nothing else in the stylesheet hard-codes a hue.
     Alternatives explored: vermilion #C0431C, indigo #5B2BD9, forest #1A6B48. */
  --signal:     #1B39D4;
  --signal-2:   #12279A;
  --signal-wash:#E7EAFB;

  /* Logo gradient — used only inside the mark. */
  --brand-1:    #4A63F0;
  --brand-2:    #1B39D4;

  /* Support hues, used sparingly and only to carry meaning. */
  --pos:        #1D6B4A;
  --warn:       #8A5A12;

  /* Type */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — 1.25 minor third, tightened at display sizes. */
  --t-mono:   0.6875rem;                                  /* 11px labels */
  --t-sm:     0.8125rem;                                  /* 13px */
  --t-base:   clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --t-lead:   clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  --t-h4:     clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h3:     clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-h2:     clamp(1.75rem, 1.35rem + 1.9vw, 3rem);
  --t-h1:     clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem);

  /* Space — 4px base, named by step not by t-shirt size. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  /* Layout */
  --shell:    80rem;      /* 1216px content shell */
  --shell-pad: clamp(1.25rem, 4vw, 3rem);
  --band:     clamp(4rem, 9vw, 7.5rem);   /* vertical rhythm between sections */

  --focus:    2px solid var(--signal);
  color-scheme: light;
}

/* Dark is a real design, not an inversion: the ground goes to near-black ink
   and the accent lifts so it still carries at low luminance. */
:root[data-theme="dark"] {
  --paper:      #0E1013;
  --paper-2:    #16191E;
  --paper-3:    #1E222A;
  --ink:        #F2F1EE;
  --ink-2:      #A5AAB3;
  --ink-3:      #6F757E;
  --rule:       #272B33;
  --rule-2:     #383D47;
  --signal:     #8098FF;
  --signal-2:   #A9B8FF;
  --signal-wash:#151A33;
  --brand-1:    #93A6FF;
  --brand-2:    #4A63F0;
  --pos:        #5BC194;
  --warn:       #D6A052;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@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;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -0.038em; line-height: 0.98; font-weight: 600; }
h2 { font-size: var(--t-h2); letter-spacing: -0.03em; line-height: 1.05; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); letter-spacing: -0.012em; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--signal); }

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s6) 0;
}

::selection { background: var(--signal); color: #fff; }

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

.skip-link {
  position: absolute; left: var(--s4); top: -100%;
  z-index: 200; background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; border-radius: 3px;
}
.skip-link:focus { top: var(--s4); color: var(--paper); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--tinted { background: var(--paper-2); }
.band--ruled { border-top: 1px solid var(--rule); }

/* The signature grid: asymmetric 12-col, label rail on the left. */
.grid { display: grid; gap: var(--s5); }
/* Grid items default to min-width:auto and refuse to shrink below their
   content, which lets one wide child (a diagram, a table) push the whole page
   sideways. Opt every grid child out of that. */
.grid > *, .hero__grid > *, .footer__top > *, .cells > *, .plans > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 1/3 label rail + 2/3 body — the editorial workhorse */
.grid--rail { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--rail { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */

/* Mono eyebrow: `01 / CAPABILITIES`. Used to number every major section. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.eyebrow--plain::after { display: none; }
.eyebrow b { color: var(--signal); font-weight: 500; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  max-width: 62ch;
}

.measure { max-width: 68ch; }
.measure-tight { max-width: 54ch; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
}

.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }

/* Rich text body for legal + article pages */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-h3); margin: var(--s8) 0 var(--s4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-h4); margin: var(--s6) 0 var(--s3); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--signal); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s5) 0; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 500; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.72rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.btn:hover { --btn-bg: var(--signal); --btn-bd: var(--signal); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-2); }
.btn--ghost:hover { --btn-bg: transparent; --btn-bd: var(--ink); color: var(--ink); }

.btn--signal { --btn-bg: var(--signal); --btn-fg: #fff; --btn-bd: var(--signal); }
.btn--signal:hover { --btn-bg: var(--signal-2); --btn-bd: var(--signal-2); }

.btn__arrow { transition: transform 0.16s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Text link with an animated rule under it */
.tlink {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--t-sm);
  letter-spacing: -0.01em; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.24s ease, color 0.16s ease;
}
.tlink:hover { color: var(--signal); background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.masthead[data-stuck="true"] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex; align-items: center; gap: var(--s5);
  height: 4.5rem;
}

.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.1em;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700; letter-spacing: -0.045em;
  color: var(--ink); text-decoration: none;
  flex-shrink: 0;
}
.logo__lockup { display: inline-flex; align-items: center; gap: 0.5rem; }
.logo__mark { flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.wordmark:hover .logo__mark { transform: rotate(-6deg) scale(1.06); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.045em; }
.logo__name b { color: var(--signal); font-weight: 700; }
.logo__tagline {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 0.32em;
}
.wordmark--footer .logo__name { font-size: 1.5rem; }
.wordmark--footer .logo__tagline { font-size: 0.56rem; }
.footer__legalname {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); margin: var(--s5) 0 0;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s1); list-style: none; margin: 0; padding: 0; }

.nav__link {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.5rem 0.7rem;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.008em;
  color: var(--ink-2); text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color 0.14s ease;
}
.nav__link:hover, .nav__item--open > .nav__link { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__caret { width: 9px; height: 9px; transition: transform 0.18s ease; color: var(--ink-3); }
.nav__item--open .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; }

/* Dropdown panel — a spec sheet, not a floating card */
.nav__panel {
  position: absolute; top: calc(100% + 0.5rem); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 18px 44px -22px rgba(10, 12, 16, 0.42);
  padding: var(--s4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav__item--open .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__panel--wide { width: min(46rem, calc(100vw - 3rem)); }
.nav__panel--narrow { width: 17rem; left: 0; transform: translateX(0) translateY(-4px); }
.nav__item--open .nav__panel--narrow { transform: translateX(0) translateY(0); }

.nav__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); list-style: none; margin: 0; padding: 0; }
.nav__panel--narrow .nav__cols { grid-template-columns: 1fr; }

.nav__entry {
  display: block; padding: 0.5rem 0.6rem; border-radius: 2px;
  text-decoration: none; color: var(--ink);
  font-size: var(--t-sm); font-weight: 500;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav__entry small { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.75rem; line-height: 1.35; margin-top: 1px; }
.nav__entry:hover { background: var(--paper-2); color: var(--signal); }
.nav__entry:hover small { color: var(--ink-2); }

.nav__panel-head {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  padding: 0 0.6rem var(--s3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s3);
}

.masthead__actions { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-2); cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--rule-2); }
.icon-btn svg { width: 16px; height: 16px; }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

.burger { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 4.5rem 0 0; z-index: 99;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  overflow-y: auto;
  padding: var(--s5) 0 var(--s8);
  transform: translateY(-8px); opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.drawer[data-open="true"] { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }

.drawer__group { border-bottom: 1px solid var(--rule); }
.drawer__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--s4) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); text-align: left; text-decoration: none;
}
.drawer__trigger .nav__caret { width: 12px; height: 12px; }
.drawer__group[data-open="true"] .nav__caret { transform: rotate(180deg); }
.drawer__body { display: none; padding-bottom: var(--s4); }
.drawer__group[data-open="true"] .drawer__body { display: block; }
.drawer__body a {
  display: block; padding: 0.45rem 0; color: var(--ink-2);
  font-size: var(--t-sm); text-decoration: none;
}
.drawer__body a:hover { color: var(--signal); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-grid; }
}
@media (min-width: 1081px) {
  .drawer { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: var(--s5); }
.hero h1 em {
  font-style: normal;
  color: var(--signal);
}

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.hero__meta div { min-width: 8rem; }
.hero__meta dt {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  margin-bottom: var(--s2);
}
.hero__meta dd {
  margin: 0; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 600; letter-spacing: -0.02em;
}

/* Page header for interior pages */
.pagehead { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
.pagehead h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem); margin-bottom: var(--s5); max-width: 20ch; }
.pagehead .lead { max-width: 60ch; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s5); list-style: none; padding: 0;
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs li::after { content: "/"; margin-left: var(--s2); color: var(--rule-2); }
.crumbs li:last-child::after { display: none; }
.crumbs li:last-child { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Cells — the signature surface. Shared hairlines, no shadows, no radius.
   -------------------------------------------------------------------------- */

.cells {
  display: grid;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cells--3, .cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cells--2, .cells--3, .cells--4 { grid-template-columns: 1fr; } }

.cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  transition: background 0.18s ease;
  text-decoration: none; color: inherit;
}
a.cell:hover { background: var(--paper-2); }
a.cell:hover .cell__title { color: var(--signal); }

.cell__num {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; color: var(--ink-3);
  margin-bottom: var(--s5);
}
.cell__icon { color: var(--signal); margin-bottom: var(--s4); }
.cell__icon svg { width: 22px; height: 22px; }
.cell__title {
  font-family: var(--font-display); font-size: var(--t-h4);
  font-weight: 600; letter-spacing: -0.018em; line-height: 1.2;
  margin-bottom: var(--s3);
  transition: color 0.16s ease;
}
.cell__body { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin-bottom: var(--s4); }
.cell__foot { margin-top: auto; padding-top: var(--s3); }
.cell__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s4); }

.tag {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.04em; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.15rem 0.4rem;
}

/* --------------------------------------------------------------------------
   9. Numbered process list
   -------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s5);
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (max-width: 780px) {
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step__body { grid-column: 2; }
}
.step__num {
  font-family: var(--font-mono); font-size: var(--t-sm);
  color: var(--signal); letter-spacing: 0.05em; padding-top: 0.2em;
}
.step__title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.018em; }
.step__body { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; }

/* --------------------------------------------------------------------------
   10. Stat / figure row
   -------------------------------------------------------------------------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s5) var(--s6); }
.figure__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: var(--s3);
}
.figure__label { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; max-width: 22ch; }
.figure { border-top: 1px solid var(--ink); padding-top: var(--s4); }

/* --------------------------------------------------------------------------
   11. Definition rows (spec tables)
   -------------------------------------------------------------------------- */

.specs { border-top: 1px solid var(--rule); margin: 0; }
.spec {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 700px) { .spec { grid-template-columns: 1fr; gap: var(--s2); } }
.spec dt {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  padding-top: 0.25em;
}
.spec dd { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.spec dd strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Accordion (FAQ)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--rule); }
.acc { border-bottom: 1px solid var(--rule); }
.acc__trigger {
  display: flex; align-items: baseline; gap: var(--s4); width: 100%;
  padding: var(--s5) 0; background: none; border: 0; cursor: pointer;
  text-align: left; font-family: var(--font-display);
  font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.018em;
  color: var(--ink); line-height: 1.3;
}
.acc__trigger:hover { color: var(--signal); }
.acc__sign {
  margin-left: auto; flex-shrink: 0; position: relative;
  width: 14px; height: 14px; align-self: center;
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.acc__sign::before { inset: 6px 0 auto; height: 1.5px; }
.acc__sign::after  { inset: 0 6px auto; width: 1.5px; height: 14px; }
.acc[data-open="true"] .acc__sign::after { transform: scaleY(0); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.acc[data-open="true"] .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-bottom: var(--s5); max-width: 62ch; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }

/* --------------------------------------------------------------------------
   13. Pricing
   -------------------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

.plan {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column;
  background: var(--paper);
}
.plan--featured { background: var(--paper-2); }
.plan__flag {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--signal); margin-bottom: var(--s4);
}
.plan__name { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.025em; margin-bottom: var(--s3); }
.plan__for { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; margin-bottom: var(--s5); min-height: 3.4em; }
.plan__price {
  font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5);
}
.plan__price small { display: block; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-top: var(--s3); }
.plan__list { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.plan__list li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--s3); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.plan__list svg { width: 13px; height: 13px; color: var(--signal); margin-top: 0.35em; }
.plan .btn { margin-top: auto; justify-content: center; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field label {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
}
.field label .req { color: var(--signal); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: 2px;
  font-family: var(--font-body); font-size: var(--t-base); color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}
.field__error { font-size: 0.75rem; color: #B3261E; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #B3261E; }
.field[data-invalid="true"] .field__error { display: block; }
:root[data-theme="dark"] .field__error,
:root[data-theme="dark"] .field[data-invalid="true"] input { border-color: #F2837B; }
:root[data-theme="dark"] .field__error { color: #F2837B; }

.form-note { font-size: 0.75rem; color: var(--ink-3); line-height: 1.5; }
.form-status {
  display: none; padding: var(--s4); border: 1px solid var(--rule);
  border-left: 2px solid var(--signal); background: var(--paper-2);
  font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s5);
}
.form-status[data-show="true"] { display: block; }

/* --------------------------------------------------------------------------
   15. Callout / CTA band
   -------------------------------------------------------------------------- */

.cta {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
:root[data-theme="dark"] .cta { background: var(--paper-2); border-block: 1px solid var(--rule); }
.cta h2 { color: var(--paper); max-width: 18ch; margin-bottom: var(--s5); }
:root[data-theme="dark"] .cta h2 { color: var(--ink); }
.cta p { color: color-mix(in srgb, var(--paper) 68%, transparent); max-width: 52ch; }
:root[data-theme="dark"] .cta p { color: var(--ink-2); }
.cta .eyebrow { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.cta .eyebrow::after { background: color-mix(in srgb, var(--paper) 22%, transparent); }
:root[data-theme="dark"] .cta .eyebrow { color: var(--ink-3); }
:root[data-theme="dark"] .cta .eyebrow::after { background: var(--rule); }
.cta .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.cta .btn:hover { --btn-bg: var(--signal); --btn-bd: var(--signal); color: #fff; }
.cta .btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: color-mix(in srgb, var(--paper) 34%, transparent); }
.cta .btn--ghost:hover { --btn-bd: var(--paper); color: var(--paper); }
:root[data-theme="dark"] .cta .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
:root[data-theme="dark"] .cta .btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--rule-2); }

/* Inline pull-quote / note block */
.note {
  border-left: 2px solid var(--signal);
  padding: var(--s2) 0 var(--s2) var(--s5);
  color: var(--ink-2);
  font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.012em;
}

/* --------------------------------------------------------------------------
   16. Schematic figures (inline SVG diagrams)
   -------------------------------------------------------------------------- */

.schematic {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.schematic svg { width: 100%; height: auto; }
.schematic figcaption {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.sch-line   { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.sch-line--signal { stroke: var(--signal); stroke-width: 1.5; }
.sch-box    { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.sch-box--signal { fill: var(--signal-wash); stroke: var(--signal); }
.sch-fill   { fill: var(--signal); }
.sch-fill-2 { fill: var(--rule-2); }
.sch-text   { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; }
.sch-text--lg { font-family: var(--font-display); font-size: 13px; fill: var(--ink); font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.sch-text--sm { font-family: var(--font-mono); font-size: 7.5px; fill: var(--ink-2); letter-spacing: 0.03em; text-transform: uppercase; }
.sch-grid   { stroke: var(--rule); stroke-width: 0.5; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); padding-block: var(--s8) var(--s5); }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--s4);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; } }

.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (max-width: 780px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.footer__head {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  margin-bottom: var(--s4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer__list a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.footer__list a:hover { color: var(--signal); }

.footer__blurb { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; max-width: 40ch; margin: var(--s4) 0 var(--s5); }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  align-items: center;
  padding-top: var(--s5); border-top: 1px solid var(--rule);
  font-size: 0.75rem; color: var(--ink-3);
}
/* Hide the GSTIN / CIN legal-identifier line in the footer across all pages.
   Also hides the <br> directly before it so no empty line remains. */
.footer__bottom p .mono.dim { display: none !important; }
.footer__bottom p br:has(+ .mono.dim) { display: none !important; }

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.footer__legal a { color: var(--ink-3); text-decoration: none; }
.footer__legal a:hover { color: var(--signal); }

.social { display: flex; gap: var(--s2); }
.social a {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2);
  transition: color 0.14s ease, border-color 0.14s ease;
}
.social a:hover { color: var(--signal); border-color: var(--signal); }
.social svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   18. Motion — one restrained reveal, honoured by reduced-motion above
   -------------------------------------------------------------------------- */

/* Superseded by section 20, which scopes the hidden state to .js so that a
   scripting failure can never leave the page blank. */

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */

.flow-tight > * + * { margin-top: var(--s3); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mb-5 { margin-bottom: var(--s5); }
.mb-6 { margin-bottom: var(--s6); }
.mb-7 { margin-bottom: var(--s7); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

@media print {
  .masthead, .drawer, .cta, .footer__top, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   20. Motion & depth
   Scroll-driven parallax, 3D hover, drawn diagrams, sticky sequences.
   All CSS/SVG — no libraries. Everything here is disabled wholesale by the
   prefers-reduced-motion block in section 2.
   ========================================================================== */

/* --- staggered reveals ---------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  scale: 0.985;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}
.js [data-reveal][data-shown="true"] {
  opacity: 1; translate: none; scale: none; will-change: auto;
}

/* Children of a revealed container cascade in sequence. */
.js [data-stagger] > * {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.js [data-stagger][data-shown="true"] > * { opacity: 1; translate: none; }

/* --- 3D scene ------------------------------------------------------------- */

.scene { perspective: 1200px; perspective-origin: 50% 40%; }

/* Cards tilt toward the cursor. --rx/--ry are written by JS. */
.tilt {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.tilt[data-tilting="true"] { transition: transform 0.08s linear, box-shadow 0.4s ease; }
.tilt > * { transform: translateZ(18px); }

/* A moving specular sheen that follows the pointer across a cell. */
a.cell, .plan, .schematic { position: relative; overflow: hidden; }
a.cell::before, .plan::before, .schematic::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    18rem circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--signal) 13%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
a.cell:hover::before, .plan:hover::before, .schematic:hover::before { opacity: 1; }

/* Cells lift out of the plane on hover. */
a.cell {
  transition: background 0.25s ease, translate 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s ease, border-color 0.25s ease;
}
a.cell:hover {
  translate: 0 -4px;
  z-index: 2;
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--ink) 42%, transparent);
}
a.cell .cell__icon { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), color 0.25s ease; }
a.cell:hover .cell__icon { transform: translateY(-2px) scale(1.12); }

/* --- parallax ------------------------------------------------------------- */
/* --py is written by JS from the element's viewport position. */

[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* --- magnetic buttons ----------------------------------------------------- */

.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(6rem circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn--ghost::after {
  background: radial-gradient(6rem circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--signal) 16%, transparent), transparent 60%);
}

/* --- rules that draw themselves ------------------------------------------- */

.js .eyebrow::after { transform-origin: left center; transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s; }
[data-shown="true"] .eyebrow::after, .eyebrow[data-shown="true"]::after { transform: scaleX(1); }
/* Sections that never enter the observer must not be left with an invisible rule. */
.no-js .eyebrow::after, [data-reveal-off] .eyebrow::after { transform: scaleX(1); }

/* --- hero ----------------------------------------------------------------- */

.hero { position: relative; }
/* A soft depth field behind the hero — replaces the old particle canvas. */
.hero::before {
  content: "";
  position: absolute; inset: -20% 0 auto; height: 130%;
  background:
    radial-gradient(42rem 26rem at 78% 18%, color-mix(in srgb, var(--signal) 11%, transparent), transparent 68%),
    radial-gradient(30rem 22rem at 12% 72%, color-mix(in srgb, var(--brand-1) 9%, transparent), transparent 66%);
  pointer-events: none; z-index: -1;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
}

.js .hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotateX(-45deg);
  animation: word-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--w, 0) * 55ms);
  transform-origin: bottom center;
}
@keyframes word-in {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word { opacity: 1; transform: none; animation: none; }
}

/* --- animated schematics -------------------------------------------------- */

.schematic { transform-style: preserve-3d; }

/* Boxes pop in one after another. */
.js .sch-box {
  opacity: 0;
  transform: scale(0.9);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--n, 0) * 130ms);
}
[data-shown="true"] .sch-box { opacity: 1; transform: none; }

/* Connector lines draw left-to-right. */
.js .sch-line--signal {
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1);
  transition-delay: calc(var(--n, 0) * 130ms + 220ms);
}
[data-shown="true"] .sch-line--signal { stroke-dashoffset: 0; }

/* A packet travelling the pipeline, once the diagram is in view. */
.js .sch-packet { opacity: 0; }
[data-shown="true"] .sch-packet {
  opacity: 1;
  animation: packet 3.4s cubic-bezier(0.5,0,0.5,1) infinite;
  animation-delay: 1.1s;
}
@keyframes packet {
  0%   { transform: translateX(0);    opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(var(--travel, 320px)); opacity: 0; }
}

/* Nodes pulse to show the loop is live. */
.sch-pulse { transform-box: fill-box; transform-origin: center; }
[data-shown="true"] .sch-pulse {
  animation: pulse 2.6s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * 320ms + 1.2s);
}
@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.5); }
}

/* The learning curve traces itself. */
.js .sch-curve {
  stroke-dasharray: 620; stroke-dashoffset: 620;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.33, 1, 0.68, 1) 0.25s;
}
[data-shown="true"] .sch-curve { stroke-dashoffset: 0; }

/* Bars grow from the left. */
.js .sch-bar {
  transform: scaleX(0); transform-box: fill-box; transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--n, 0) * 140ms);
}
[data-shown="true"] .sch-bar { transform: scaleX(1); }

/* Stack layers slide in from alternating sides in 3D. */
.js .sch-layer {
  opacity: 0;
  transform: translateX(calc(var(--dir, 1) * 26px));
  transform-box: fill-box;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--n, 0) * 110ms);
}
[data-shown="true"] .sch-layer { opacity: 1; transform: none; }

/* --- sticky scroll sequence ----------------------------------------------- */

.sequence { position: relative; }
.sequence__rail { position: sticky; top: 6rem; align-self: start; }
.sequence__step {
  opacity: 0.32;
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding-block: clamp(2rem, 8vh, 5rem);
}
.sequence__step[data-active="true"] { opacity: 1; }
.sequence__step[data-active="true"] .step__num { color: var(--signal); }

/* Progress indicator for the sequence. */
.sequence__progress {
  position: relative; width: 2px; background: var(--rule);
  border-radius: 2px; overflow: hidden;
}
.sequence__progress i {
  position: absolute; inset: 0 0 auto; display: block;
  background: var(--signal); border-radius: 2px;
  height: var(--progress, 0%);
  transition: height 0.25s ease;
}

/* --- counters ------------------------------------------------------------- */

.figure__value { font-variant-numeric: tabular-nums; }
.figure { transition: border-color 0.3s ease; }
.figure:hover { border-color: var(--signal); }

/* --- masthead condense ---------------------------------------------------- */

.masthead { transition: border-color 0.2s ease, background 0.2s ease, height 0.25s ease; }
.masthead__inner { transition: height 0.28s cubic-bezier(0.22,1,0.36,1); }
.masthead[data-stuck="true"] .masthead__inner { height: 3.9rem; }
.masthead[data-stuck="true"] .logo__tagline { opacity: 0; }

/* Scroll progress hairline under the masthead. */
.masthead__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--scrolled, 0%);
  background: linear-gradient(90deg, var(--brand-1), var(--signal));
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  [data-stagger] > * { opacity: 1 !important; translate: none !important; }
  [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  .sch-box, .sch-layer { opacity: 1 !important; transform: none !important; }
  .sch-line--signal, .sch-curve { stroke-dashoffset: 0 !important; }
  .sch-bar { transform: scaleX(1) !important; }
  .sch-packet, .sch-pulse { animation: none !important; }
  .eyebrow::after { transform: scaleX(1) !important; }
  .tilt { transform: none !important; }
  .sequence__step { opacity: 1 !important; }
}

/* ==========================================================================
   21. Rate card + currency switcher (pricing)
   ========================================================================== */

.cur {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.cur__label {
  display: block;
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  margin-bottom: var(--s3);
}
.cur__opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cur__btn {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding: 0.42rem 0.75rem;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease,
              background 0.15s ease, transform 0.15s ease;
}
.cur__btn b { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; }
.cur__btn:hover { color: var(--ink); border-color: var(--rule-2); transform: translateY(-1px); }
.cur__btn[aria-pressed="true"] {
  background: var(--signal); border-color: var(--signal); color: #fff;
}
:root[data-theme="dark"] .cur__btn[aria-pressed="true"] { color: var(--paper); }
.cur__note {
  font-size: 0.75rem; color: var(--ink-3); line-height: 1.5;
  margin: var(--s4) 0 0; max-width: 58ch;
}

/* --- the rate tables ------------------------------------------------------ */

/* Card grid: responsive columns of boxed rate cards. */
.rc__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--s5);
  align-items: start;
}

/* Each category is a bordered card with a colored header and body. */
.rc {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
}

/* Colored header bar — theme indigo, white text. */
.rc__head {
  display: flex; align-items: center; gap: var(--s2);
  justify-content: space-between;
  /* padding: 0.7rem 0.9rem;
  background: var(--signal);
  color: #fff; */

  display: flex; align-items: baseline; gap: var(--s4);
  flex-wrap: wrap; margin-bottom: var(--s5);

}
.rc__title {
  font-family: var(--font-display); font-size: var(--t-base);
  font-weight: 600; letter-spacing: -0.02em; margin: 0;
  color: #000; line-height: 1.25;
}

.rc__table { width: 100%; border-collapse: collapse; }
.rc__table thead th {
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
  font-weight: 500; text-align: left;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule);
}
.rc__table thead th:last-child { text-align: right; }
.rc__table tbody th {
  font-weight: 500; font-size: 0.8rem; color: var(--ink);
  text-align: left; padding: 0.55rem 0.5rem 0.55rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  line-height: 1.35;
}
/* Real checkbox column. */
.rc__table .check-col { width: 1.75rem; padding: 0.6rem 0 0.6rem 0.9rem; }
.rc__table .check-box {
  width: 1.75rem;
  padding: 0.55rem 0 0.55rem 0.9rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.rc__table .form-check {
  min-height: 0; margin: 0; padding-left: 0;
  display: flex; align-items: center;
}
.rc__table .addon-checkbox,
.rc__table .select-all-section {
  -webkit-appearance: auto; appearance: auto;
  width: 1rem; height: 1rem; min-height: 0;
  margin: 0; padding: 0; float: none;
  background-image: none;
  border: 1px solid var(--rule-2); border-radius: 3px;
  accent-color: var(--signal);
  cursor: pointer; vertical-align: middle;
}
.rc__table tbody td {
  text-align: right; padding: 0.55rem 0.9rem 0.55rem 0.5rem;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
  vertical-align: middle;
}
.rc__table tbody tr { transition: background 0.15s ease; }
.rc__table tbody tr:hover { background: var(--paper-2); }
.rc__table tbody tr:hover th { color: var(--signal); }
.rc__table tbody tr:last-child th,
.rc__table tbody tr:last-child td { border-bottom: 0; }

.rate {
  font-family: var(--font-display); font-size: 0.9rem;
  font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rate__unit {
  font-family: var(--font-mono); font-size: 0.6rem;
  font-weight: 400; letter-spacing: 0.06em; color: var(--ink-3);
  margin-left: 0.2em;
}
.rc__range .rate { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 400; color: var(--ink-3); }
.rc__range .rate__unit { display: none; }

.rc__cta { display: flex; justify-content: center; margin-top: var(--s7); }

@media (max-width: 560px) {
  .rc__wrap { grid-template-columns: 1fr; }
}

/* Failsafe: if scripting is present but the observer never marked an element
   shown, this makes content visible again rather than leaving a blank page. */
.js.reveal-failsafe [data-reveal],
.js.reveal-failsafe [data-stagger] > * {
  opacity: 1 !important; translate: none !important; scale: none !important;
}
.js.reveal-failsafe .sch-box,
.js.reveal-failsafe .sch-layer { opacity: 1 !important; transform: none !important; }
.js.reveal-failsafe .sch-line--signal,
.js.reveal-failsafe .sch-curve { stroke-dashoffset: 0 !important; }
.js.reveal-failsafe .sch-bar { transform: scaleX(1) !important; }
.js.reveal-failsafe .eyebrow::after { transform: scaleX(1) !important; }

/* --------------------------------------------------------------------------
   22. Schematics on small screens
   An SVG scales uniformly, so a 560-unit diagram squeezed into a 320px column
   renders its 7.5px labels at under 3px. Below 620px we drop the secondary
   labels, hold a legible minimum width, and let the figure scroll on its own
   axis rather than shrinking into illegibility.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .schematic {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .schematic { min-width: 0; }
  .schematic svg { min-width: 460px; }
  .sch-text--sm { display: none; }
  /* The sheen would scroll away from the pointer; it is a hover effect anyway. */
  .schematic::before { display: none; }
  .schematic figcaption::after {
    content: " — scroll to see the full diagram";
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   23. Human-readable sitemap
   -------------------------------------------------------------------------- */

.sm__group { margin-bottom: var(--s8); }
.sm__group:last-child { margin-bottom: 0; }
.sm__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
@media (max-width: 900px) { .sm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sm__list { grid-template-columns: 1fr; } }

.sm__link {
  display: block; padding: var(--s4) var(--s5);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  height: 100%; text-decoration: none; color: inherit;
  transition: background 0.18s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.sm__link:hover { background: var(--paper-2); transform: translateX(3px); }
.sm__name {
  display: block; font-family: var(--font-display); font-size: 1rem;
  font-weight: 600; letter-spacing: -0.018em; margin-bottom: 0.2rem;
  transition: color 0.16s ease;
}
.sm__link:hover .sm__name { color: var(--signal); }
.sm__note { display: block; font-size: 0.78rem; color: var(--ink-3); line-height: 1.45; }

/* ==========================================================================
   24. The 3D layer stack
   Real DOM elements on CSS 3D transforms — crisp at any zoom, themeable,
   no WebGL, no images. The scene turns toward the pointer and the plates
   lift apart on scroll; both are driven by custom properties set in JS.
   ========================================================================== */

.stack3d {
  --tilt-x: 54deg;          /* resting attitude of the whole assembly */
  --tilt-z: -34deg;
  --lift: 58px;             /* vertical separation between plates */
  --plate-w: 340px;
  --plate-h: 210px;
  margin: 0;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 44vw, 36rem);
  position: relative;
}

.stack3d__scene {
  position: relative;
  width: var(--plate-w);
  height: var(--plate-h);
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--tilt-x) + var(--px, 0deg)))
    rotateZ(calc(var(--tilt-z) + var(--pz, 0deg)));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stack3d[data-turning="true"] .stack3d__scene { transition: transform 0.1s linear; }

/* Each plate sits at its own height in the stack. */
.plate {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translateZ(calc(var(--n) * var(--lift)))
    translateX(calc(var(--n) * -14px))
    translateY(calc(var(--n) * -9px));
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1)
              calc(var(--n) * 70ms),
              border-color 0.3s ease, background 0.3s ease;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: 0 18px 40px -30px rgba(8, 10, 14, 0.7);
  padding: 1.1rem 1.35rem;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 0.1rem;
}
.plate.is-signal {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal-wash) 88%, transparent);
}

/* Text is counter-scaled so it stays readable through the isometric tilt. */
.plate__tag, .plate__name, .plate__sub {
  transform: scaleY(1.55);
  transform-origin: left bottom;
  white-space: nowrap;
}
.plate { direction: ltr; }
.plate__tag {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; color: var(--ink-3);
}
.plate__name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); margin-top: 0.3rem;
}
.plate.is-signal .plate__name { color: var(--signal); }
.plate__sub {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.06em; color: var(--ink-3); margin-top: 0.55rem;
  text-transform: uppercase;
}

/* A faint measure grid on each plate, so they read as engineering surfaces. */
.plate__mesh {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
}
/* A bright leading edge catches the "light" and sells the depth. */
.plate__edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.plate.is-signal .plate__edge { opacity: 0.9; }
.stack3d:hover .plate__edge { opacity: 0.55; }

/* The spine threading the stack, with pips that climb it. */
.stack3d__spine {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: calc(4 * var(--lift));
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(2 * var(--lift)));
  transform-style: preserve-3d;
  background: linear-gradient(to top, transparent, var(--signal), transparent);
  opacity: 0.55;
}
.stack3d__pip {
  position: absolute; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--signal) 60%, transparent);
  animation: climb 4.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation-delay: calc(var(--d) * 1.4s);
  bottom: 0;
}
@keyframes climb {
  0%   { bottom: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}

.stack3d figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  padding-top: var(--s3); border-top: 1px solid var(--rule);
  text-align: left;
}

/* Plates fan apart as the section is revealed. */
/* Separation is the resting state, never something JS has to grant. */

@media (max-width: 620px) {
  .stack3d { --plate-w: 236px; --plate-h: 146px; --tilt-x: 52deg; --lift: 38px; min-height: 21rem; }
  
}

@media (prefers-reduced-motion: reduce) {
  .stack3d__scene { transition: none; }
  .stack3d__pip { animation: none; opacity: 0.8; }
  .plate { transition: none; }
}

/* ==========================================================================
   25. Marquee — a slow ticker of what we build
   ========================================================================== */

.marquee {
  border-block: 1px solid var(--rule);
  padding-block: var(--s5);
  overflow: hidden;
  --speed: 46s;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--s6);
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem);
  font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink-3);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}
.marquee__item:hover { color: var(--signal); }
.marquee__item::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rule-2); margin-left: var(--s4);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ==========================================================================
   26. Cursor spotlight on the dark CTA band
   ========================================================================== */

.cta { position: relative; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--signal) 26%, transparent), transparent 60%);
  opacity: 0; transition: opacity 0.5s ease;
  pointer-events: none;
}
.cta:hover::before { opacity: 1; }
.cta > * { position: relative; }

/* ==========================================================================
   27. Cross-page view transitions
   ========================================================================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   28. Scroll-pinned sequence
   The rail pins and tracks; the stages scroll past it. Without JS the rail
   simply does not track — no content is hidden and nothing breaks.
   ========================================================================== */

.sequence__rail {
  position: sticky;
  top: 7rem;
  align-self: start;
}
.sequence__steps { display: grid; }

.sequence__step {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding-block: clamp(2.5rem, 9vh, 5.5rem);
  border-bottom: 1px solid var(--rule);
  opacity: 0.34;
  transition: opacity 0.45s ease;
}
.sequence__step:last-child { border-bottom: 0; }
.sequence__step[data-active="true"] { opacity: 1; }
.sequence__step .step__num {
  font-family: var(--font-mono); font-size: var(--t-sm);
  color: var(--ink-3); letter-spacing: 0.06em; padding-top: 0.35em;
  transition: color 0.35s ease;
}
.sequence__step[data-active="true"] .step__num { color: var(--signal); }
.sequence__step .step__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 600; letter-spacing: -0.028em; line-height: 1.15;
  margin-bottom: var(--s4);
}
.sequence__step .step__body {
  color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; max-width: 56ch;
}

/* The pinned readout */
.sequence__meter { display: flex; align-items: center; gap: var(--s4); }
.sequence__count {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 600; letter-spacing: -0.05em; line-height: 1;
  display: flex; align-items: baseline; gap: 0.12em;
  font-variant-numeric: tabular-nums;
}
.sequence__count i {
  font-style: normal; color: var(--rule-2);
  font-size: 0.5em; margin-inline: 0.1em;
}
.sequence__count span:last-child { color: var(--ink-3); font-size: 0.5em; }
.sequence__count [data-sequence-index] { color: var(--signal); }

.sequence__progress {
  flex: 1; height: 2px; background: var(--rule);
  border-radius: 2px; overflow: hidden; position: relative;
}
.sequence__progress i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: var(--progress, 0%); height: 100%;
  background: linear-gradient(90deg, var(--brand-1), var(--signal));
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sequence__now {
  font-family: var(--font-display); font-size: var(--t-h4);
  font-weight: 600; letter-spacing: -0.02em;
  margin: var(--s4) 0 0; min-height: 1.4em;
}

.sequence__toc {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--s3);
}
.sequence__toc li {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  transition: color 0.3s ease;
}
.sequence__toc li:has(.sequence__dot[data-on="true"]) { color: var(--ink); }
.sequence__dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--rule-2);
  transition: background 0.3s ease, transform 0.3s ease;
}
.sequence__dot[data-on="true"] { background: var(--signal); transform: scale(1.5); }

@media (max-width: 900px) {
  .sequence__rail { position: static; }
  .sequence__toc { display: none; }
}
@media (max-width: 620px) {
  .sequence__step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .sequence__step { opacity: 1; }
}

/* ==========================================================================
   29. Case study header
   ========================================================================== */

.casehead {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.casehead img {
  width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0;
  background: var(--paper-2); object-fit: contain; padding: 4px;
  border: 1px solid var(--rule);
}
.casehead__meta {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); margin: 0;
}
.casehead__meta dt {
  font-family: var(--font-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
  margin-bottom: var(--s2);
}
.casehead__meta dd {
  margin: 0; font-family: var(--font-display); font-size: 1rem;
  font-weight: 600; letter-spacing: -0.02em;
}
.casehead__meta dd a { color: var(--signal); text-decoration: none; }
.casehead__meta dd a:hover { text-decoration: underline; }

/* Client logo inside a work card */
.cell__title img { display: block; }

/* Client mark: a logo, or a monogram where a product has none. */
.casemark {
  display: block; border-radius: 8px; flex-shrink: 0;
  background: var(--paper-2); object-fit: contain; padding: 4px;
  border: 1px solid var(--rule);
}
.casemark--mono {
  display: grid; place-items: center; padding: 0;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.04em; color: var(--signal);
  background: var(--signal-wash); border-color: var(--signal);
}
.casehead .casemark { width: 52px; height: 52px; }

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

/* Footer newsletter */
.subscribe { margin-top: var(--s6); max-width: 26rem; }
.subscribe__row { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s3); }
.subscribe__row .btn { flex-shrink: 0; }
.subscribe .form-status { margin: var(--s3) 0 0; }
@media (max-width: 480px) {
  .subscribe__row { flex-direction: column; }
  .subscribe__row .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   30. Bootstrap grid integration
   The project is Bootstrap-based, so layout columns are driven by Bootstrap's
   .container / .row / .col-* rather than by bespoke CSS Grid. This block hands
   column duty over and keeps only the visual treatment here — gutters are
   tuned so the rendered spacing is unchanged from the pre-Bootstrap build.
   bootstrap.min.css is loaded BEFORE this file, so these rules win.
   ========================================================================== */

/* Bootstrap columns are sized in percentages and spaced with padding gutters,
   never with `gap`. Our old CSS Grid rules set `gap`, and a leftover gap makes
   33.33% + gap + 66.67% exceed 100%, so the columns wrap — which is what broke
   the pinned sequence (the sticky rail then overlapped the steps on scroll).
   Any element that is now a .row must not carry a gap. */
/* If an element carries .row it IS a Bootstrap row: flex, wrapping, no gap and
   no leftover grid template. Our own display:grid rules load after Bootstrap
   and would otherwise win, leaving the columns sized by the old CSS Grid. */
.row {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: 0;
}

/* The shell is a Bootstrap container with our own measure and padding. */
.container.shell {
  max-width: var(--shell);
  padding-inline: var(--shell-pad);
  margin-inline: auto;
  width: 100%;
}

/* The 4/8 editorial rail is a real Bootstrap row: col-lg-4 + col-lg-8. The
   gutter is set to the gap the design used before the conversion, so spacing
   is unchanged. Below lg the columns stack, which is what the CSS Grid version
   did at its own breakpoint. */
.grid.grid--rail.row {
  --bs-gutter-x: clamp(1.5rem, 4vw, 4rem);
  --bs-gutter-y: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  grid-template-columns: none;
}

/* Card grids: Bootstrap columns, zero gutter so the hairlines meet. */
.cells.row {
  display: flex;
  grid-template-columns: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
/* Each cell is a column, so the shared borders sit on the positioned box. */
.cells.row > .cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}

/* Bootstrap sets .row children to width:100% at the smallest breakpoint via
   .col-*; our stacked layouts already expect that, so nothing to undo. */

/* Utility rows used elsewhere keep our gaps rather than Bootstrap's. */
.row.gx-rail { --bs-gutter-x: clamp(1.5rem, 4vw, 4rem); }
.row.gy-rail { --bs-gutter-y: var(--s5); }

/* No blanket heading reset: Bootstrap's reboot already zeroes heading
   margin-top, and a `.row h2` rule outranks `.prose h2`, collapsing the space
   above every article heading. */

/* ==========================================================================
   31. Application form (careers)
   ========================================================================== */

.apply {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
  max-width: 34rem;
}
.apply .footer__head { margin-bottom: var(--s4); }
.apply .btn { width: 100%; justify-content: center; }

/* File inputs are styled inconsistently across browsers; give the control the
   same frame as the other fields and a legible button. */
.field input[type="file"] {
  padding: 0.5rem 0.6rem;
  font-size: var(--t-sm);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 2px;
  padding: 0.4rem 0.8rem;
  margin-right: var(--s3);
  cursor: pointer;
  transition: background 0.16s ease;
}
.field input[type="file"]::file-selector-button:hover { background: var(--signal); }

/* Footer bottom bar: keep the copyright on the left and the legal links on
   the right on the same row. Previously flex-wrap dropped the whole legal
   list onto its own line (both left-aligned) whenever the combined width
   exceeded the container. Let the copyright take the remaining space and the
   legal list sit hard-right, wrapping its own items internally if needed. */
.footer__bottom {
  flex-wrap: nowrap;
}
.footer__bottom > p {
  flex: 1 1 auto;
  min-width: 0;
}
.footer__legal {
  justify-content: flex-end;
  flex: 0 1 auto;
}

/* On narrow screens stacking is the sensible layout: copyright above the
   links, both aligned left. */
@media (max-width: 720px) {
  .footer__bottom {
    flex-wrap: wrap;
  }
  .footer__legal {
    justify-content: flex-start;
  }
}

/* Footer link columns: the markup carries `.row` (Bootstrap) but the design
   wants a self-managed 4-up grid that drops to 2-up on tablet — not the
   col-6/col-lg-3 two-stage Bootstrap breakpoint, which rendered a broken 2x2
   block below the lg breakpoint. Re-enable CSS Grid for this specific row so
   .footer__cols controls its own columns (same pattern as .grid--rail.row and
   .cells.row above). */
.footer__cols.row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
}
.footer__cols.row > [class*="col-"] {
  /* Neutralise Bootstrap column widths/padding so the grid tracks decide size. */
  width: auto;
  max-width: none;
  flex: none;
  padding-inline: 0;
}
@media (max-width: 780px) {
  .footer__cols.row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* @media (max-width: 460px) {
  .footer__cols.row {
    grid-template-columns: 1fr;
  }
} */

/* Newsletter sits in the footer link grid, under the two shorter columns
   (Capabilities / Technology) so their trailing whitespace is used instead of
   left blank. It spans the first two of the four tracks and starts on the
   second grid row. */
.footer__cols.row .footer__subscribe {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: start;
  margin-top: -90px;
  max-width: none;
  padding-left: 0px;
}
@media (max-width: 780px) {
  /* Two-column layout: span both tracks, place on the row after the links. */
  .footer__cols.row .footer__subscribe {
    grid-column: 1 / span 2;
    grid-row: auto;
     margin-top: 0px;
  }
}
@media (max-width: 460px) {
  /* Single column: form simply follows the stacked link lists. */
  .footer__cols.row .footer__subscribe {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
}

/* --- Reveal safety net (CSS-only) ----------------------------------------
   [data-reveal] elements start at opacity:0 and normally fade in when the
   JS IntersectionObserver sets data-shown="true". If that script fails to
   run (an earlier error in the bundle) or never observes an element, the
   content used to stay invisible forever — leaving a large blank gap in the
   page (seen above the footer on the pricing page).

   This animation auto-reveals any [data-reveal] that has NOT yet been marked
   shown, a moment after load. When the observer works normally it sets
   data-shown="true" well within this window, and the :not([data-shown])
   selector stops matching, so the scroll animation is unaffected. This only
   acts as a backstop so nothing is ever left permanently blank. */
@keyframes reveal-fallback {
  to { opacity: 1; translate: none; scale: none; }
}
.js [data-reveal]:not([data-shown]) {
  animation: reveal-fallback 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-shown]) {
    animation: none;
    opacity: 1;
    translate: none;
    scale: none;
  }
}

.pb-20{padding-bottom: 20px;}

/* --------------------------------------------------------------------------
   Button hover fix — Bootstrap conflict
   Bootstrap's own .btn:hover sets `background-color: var(--bs-btn-hover-bg)`
   (a longhand at :hover specificity 0,1,1). Our base .btn sets `background`
   (shorthand at 0,1,0), so on hover Bootstrap's rule wins and the button
   background collapses to Bootstrap's unset hover colour — leaving white text
   on a near-white ground (the "Start a project" button became invisible on
   hover). We re-assert our token-driven colours on the same longhand property
   at :hover specificity so ours takes precedence regardless of source order. */
.btn,
.btn:hover,
.btn:focus,
.btn:active {
  background-color: var(--btn-bg);
  background-image: none;
  color: var(--btn-fg);
}
.btn:hover {
  background-color: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.btn--signal:hover {
  background-color: var(--signal-2);
  border-color: var(--signal-2);
  color: #fff;
}
.btn--ghost {
  background-color: transparent;
  color: var(--btn-fg);
}
.btn--ghost:hover {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
/* CTA section keeps its own inverted palette. */
.cta .btn:hover {
  background-color: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.cta .btn--ghost:hover {
  background-color: transparent;
  border-color: var(--paper);
  color: var(--paper);
}

/* Dark mode: the signal accents become light lavender, so white text on the
   hover background would be low-contrast. Use dark ink for the label instead. */
:root[data-theme="dark"] .btn--signal {
  color: var(--ink);
}
:root[data-theme="dark"] .btn--signal:hover {
  background-color: var(--signal-2);
  border-color: var(--signal-2);
  color: #0E1013;
}
:root[data-theme="dark"] .btn:hover {
  background-color: var(--signal);
  border-color: var(--signal);
  color: #0E1013;
}


.ais-footer-socials {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.ais-footer-social {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #ffffff;
    text-decoration: none;
    border: none;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ais-footer-social[aria-label="Facebook"] {
    background: #1877F2;
}

.ais-footer-social[aria-label="Instagram"] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.ais-footer-social[aria-label="LinkedIn"] {
    background: #0A66C2;
}

.ais-footer-social[aria-label="X (Twitter)"] {
    background: #000000;
}

.ais-footer-social[aria-label="YouTube"] {
    background: #FF0000;
}

.ais-footer-social[aria-label="Pinterest"] {
    background: #E60023;
}

.ais-footer-social[aria-label="GitHub"] {
    background: #333333;
}

.ais-footer-social:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    color: #fff;
}


/* =======================
   BACK TO TOP BUTTON
========================== */
.back-to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--signal);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #1B39D4;
    color: var(--paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, border-color 0.3s;
    box-shadow: 0 10px 30px rgba(3, 70, 81, 0.25);
    outline: none;
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top-btn i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.back-to-top-btn:hover {
    background: var(--white-color);
    border-color: var(--signal);
    box-shadow: 0 15px 35px #1B39D4;
    color: var(--black);
}

.back-to-top-btn:hover i {
    transform: translateY(-3px);
}

/* SVG Progress Ring */
.back-to-top-btn .progress-ring {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotate(-90deg);
    z-index: 1;
    pointer-events: none;
}

.back-to-top-btn .progress-ring_circle {
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    transition: stroke-dashoffset 0.1s linear;
}

.text-center{text-align: center !important;}
.img-box img{display: inline;}