/* ==========================================================================
   SYSTEMS HORIZON — Design System
   Premium glassmorphism interface · Black #000000 · Signal Red #d1001f
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — jet black, neutral (no blue cast) */
  --bg-0: #000000;
  --bg-1: #040404;
  --bg-2: #0a0a0a;
  --bg-3: #101010;

  /* Brand */
  --red: #d1001f;
  --red-hi: #ff2d4d;          /* brighter tint for glows / small accents */
  --red-soft: #ff5c73;        /* readable red for small text on black */
  --red-deep: #66000f;

  /* Glass — light frost: modest blur and a low tint so whatever sits behind
     a panel stays legible through it. Borders carry the panel edge instead. */
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-strong: rgba(9, 9, 9, 0.6);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-border-hi: rgba(255, 255, 255, 0.22);
  --glass-blur: 14px;
  --glass-sat: 130%;

  /* Text — alphas keep ≥4.5:1 AA contrast on the black/glass surfaces */
  --text-1: #f5f5f7;
  --text-2: rgba(235, 235, 245, 0.72);
  --text-3: rgba(235, 235, 245, 0.56);

  /* Type */
  --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  /* Geometry */
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 26px;
  --radius-xl: 34px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.44, 1);

  /* Layout */
  --container: 1200px;
  --nav-h: 64px;
  --nav-cta-h: 44px;
  --topbar-h: 54px;
  /* Uniform gap around a pill nested inside a pill. The bar's own 1px glass
     border is outside the padding box, so it is subtracted from both sides
     before halving — otherwise the side inset lands 1px wide of the vertical. */
  --nav-inset: calc((var(--nav-h) - 2px - var(--nav-cta-h)) / 2);
  --dock-h: 68px;

  color-scheme: dark;
}

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

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

html,
body {
  overflow-x: clip;
}

body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100svh;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: rgba(209, 0, 31, 0.55);
  color: #fff;
}

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

/* Slim dark scrollbar */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-0);
  }
  ::-webkit-scrollbar-thumb {
    background: #1f1f1f;
    border-radius: 8px;
    border: 2px solid var(--bg-0);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #333333;
  }
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border-hi);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: top 0.2s var(--ease);
}

.skip-link:focus-visible {
  top: 16px;
}

/* Anchor targets clear the floating nav */
section[id],
.service[id] {
  scroll-margin-top: calc(var(--nav-h) + 32px);
}

/* --------------------------------------------------------------------------
   3. Ambient background system
   -------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Jet black base. The grey centre wash was removed — it was what stopped the
     page reading as true black. Only brand red lifts off the black now. */
  background:
    radial-gradient(115% 85% at 82% -12%, rgba(209, 0, 31, 0.17), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(209, 0, 31, 0.09), transparent 52%),
    var(--bg-0);
}

/* Position/scale/rotation are driven from JS (scroll + slow idle drift), so
   these stay transform-only and composite on the GPU. */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.bg-orb-1 {
  width: 520px;
  height: 520px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle at 35% 35%, rgba(209, 0, 31, 0.34), rgba(102, 0, 15, 0.12) 60%, transparent 75%);
}

.bg-orb-2 {
  width: 460px;
  height: 460px;
  bottom: -180px;
  left: -140px;
  background: radial-gradient(circle at 60% 40%, rgba(209, 0, 31, 0.22), rgba(72, 0, 11, 0.16) 55%, transparent 75%);
}

.bg-orb-3 {
  width: 380px;
  height: 380px;
  top: 42%;
  left: 58%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 45, 77, 0.1), transparent 70%);
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.26; /* low: white speckle otherwise greys-out the black */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Pointer spotlight (desktop only, driven by JS) */
/* Custom pointer — a brand-red dot that swells into a soft translucent disc
   over anything clickable. Fine pointers only; touch never sees it. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  display: none;
  will-change: transform;
}

html.has-cursor .cursor {
  display: block;
}

.cursor-dot,
.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50%;
  opacity: 0;
}

/* Resting state: small solid dot */
.cursor-dot {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--red);
  transition:
    transform 0.3s var(--spring),
    opacity 0.22s ease;
}

/* Hover state: a soft-edged ring, hollow so content reads through it.
   Rendered at full size and scaled down when idle, so the gradient stays
   crisp rather than being a magnified 11px sprite. */
.cursor-ring {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  /* Thin crisp outline. The feather is an un-inset box-shadow, which paints
     only beyond the border box — so the inner edge stays sharp and the
     interior fully transparent. */
  background: transparent;
  border: 1.5px solid rgba(209, 0, 31, 0.9);
  box-shadow: 0 0 7px 0 rgba(209, 0, 31, 0.5);
  transform: scale(0.2);
  transition:
    transform 0.42s var(--spring),
    opacity 0.3s ease;
}

/* Fades in once the pointer has actually moved */
.cursor.is-live .cursor-dot {
  opacity: 1;
}

/* Over a button/link: dot gives way to the expanding ring */
.cursor.is-live.is-hover .cursor-dot {
  opacity: 0;
  transform: scale(0.35);
}

.cursor.is-live.is-hover .cursor-ring {
  opacity: 1;
  transform: scale(1);
}

/* Slight press feedback */
.cursor.is-live.is-hover.is-down .cursor-ring {
  transform: scale(0.82);
}

.cursor.is-live.is-down .cursor-dot {
  transform: scale(0.7);
}

/* Hidden over text fields so the native I-beam reads clearly */
.cursor.is-text .cursor-dot,
.cursor.is-text .cursor-ring {
  opacity: 0;
}

/* Hide the OS cursor only while ours is active.
   !important is deliberate: components further down the sheet set their own
   `cursor: pointer` at equal specificity, so without it the system hand still
   showed through on buttons, segmented labels, options, switches, etc. */
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

/* …except where a caret matters */
html.has-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html.has-cursor textarea {
  cursor: text !important;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    transition: opacity 0.01ms;
  }
}

.cursor-glow {
  position: fixed;
  z-index: 0;
  width: 560px;
  height: 560px;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 0, 31, 0.07), transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
}

@media (pointer: fine) {
  html.js .cursor-glow {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   4. Core utilities
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* Solid fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass {
    background: rgba(8, 8, 8, 0.95);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px 2px rgba(209, 0, 31, 0.65);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}

.section {
  padding: clamp(72px, 10vw, 128px) 0;
  position: relative;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 22px;
}

.section-sub {
  margin-top: 16px;
  color: var(--text-2);
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  max-width: 60ch;
}

.section-head.center .section-sub {
  margin-inline: auto;
}

.grad {
  background: linear-gradient(100deg, #ffffff 10%, #ffb4c0 45%, var(--red-hi) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition:
    transform 0.35s var(--spring),
    box-shadow 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  /* No border: painting the gradient under a transparent 1px border leaves a
     mis-sampled bright rim along the rounded caps (Chromium AA artifact). */
  border: 0;
  background: linear-gradient(135deg, #ff1f42 0%, var(--red) 45%, #8f0016 100%);
  color: #fff;
  box-shadow: 0 12px 32px -10px rgba(209, 0, 31, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(209, 0, 31, 0.7);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-border-hi);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.26);
}

/* Scroll reveal — only hidden when JS is present */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease),
    filter 0.9s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  /* Must be cleared once revealed: a lingering will-change on filter/opacity/
     transform keeps the element a backdrop root, which stops any nested
     frosted control (form fields, dropdown, date) from blurring the page.
     Dropping the hint after the animation is also better for performance. */
  will-change: auto;
}

/* --------------------------------------------------------------------------
   5. Boot sequence
   -------------------------------------------------------------------------- */
.boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg-0);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
}

.boot.boot-active {
  display: flex;
}

.boot.boot-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.boot-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  animation: boot-in 0.7s var(--ease) both;
}

.boot-bar {
  width: 180px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.boot-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-hi));
  box-shadow: 0 0 14px rgba(209, 0, 31, 0.8);
  animation: boot-fill 0.9s var(--ease) 0.15s forwards;
}

@keyframes boot-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes boot-fill {
  to { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Navigation — floating glass pill (desktop)
   -------------------------------------------------------------------------- */
.nav-shell {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}

/* Pill-in-pill rule: the CTA is a full-radius pill nested inside a full-radius
   bar, so the two caps are only concentric when the inset is IDENTICAL on every
   side. padding-right must therefore equal (--nav-h - --nav-cta-h) / 2 — any
   mismatch pinches the crescent between the curves and reads as a glitch. */
.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--nav-h);
  padding: 0 var(--nav-inset) 0 22px;
  border-radius: 999px;
  max-width: 100%;
  /* Uniform dark glass: the faint default fill let the hero's red glow bleed
     through the backdrop blur, making the pill look patchily filled. */
  background: var(--glass-bg-strong);
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

html.js.is-scrolled .nav {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hi);
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(209, 0, 31, 0.06);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

/* Brand wordmark (real logo artwork). Height drives the size and width stays
   auto so the intrinsic aspect ratio is preserved. object-fit guarantees the
   artwork is never distorted even if a narrow container clamps the width. */
.brand-logo {
  height: 18px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: opacity 0.3s ease;
}

.nav-brand:hover .brand-logo {
  opacity: 0.82;
}

/* Footer lockup is sized by width — its column is narrower than the wordmark's
   natural width at any comfortable height, so width must lead and height follow. */
.nav-brand-lg .brand-logo {
  width: min(100%, 285px);
  height: auto;
}

/* Mark plate: the favicon artwork seated in a soft glass tile */
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(150deg, #141414, #080808);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.brand-mark img {
  width: 60%;
  height: auto;
}

.nav-brand:hover .brand-mark {
  border-color: rgba(209, 0, 31, 0.5);
  box-shadow: 0 6px 18px -8px rgba(209, 0, 31, 0.55);
}

/* Width-led so the wide wordmark always fits the viewport; height follows. */
.boot-logo img {
  width: min(74vw, 360px);
  height: auto;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  position: relative;
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.3s ease, background 0.3s ease;
}

.nav-links a:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.06);
}

.nav-links a.is-active {
  color: var(--text-1);
  background: rgba(209, 0, 31, 0.14);
  box-shadow: inset 0 0 0 1px rgba(209, 0, 31, 0.28);
}

/* Height is set explicitly (not derived from font metrics) so the inset above
   stays exact regardless of the loaded font. */
.nav-cta {
  height: var(--nav-cta-h);
  padding: 0 22px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Mobile chrome — top bar, bottom dock, menu sheet
   -------------------------------------------------------------------------- */
/* Shrink-to-fit pill, centred. Width is left auto so the bar hugs the
   wordmark; max-width keeps it inside the safe area on the smallest phones. */
.mobile-topbar {
  display: none;
  gap: 10px;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  height: var(--topbar-h);
  /* max-content, not auto: the logo's percentage max-width makes plain
     shrink-to-fit under-measure, which clipped the wordmark */
  width: max-content;
  max-width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  padding: 0 18px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong); /* uniform fill — see .nav */
}

.dock {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 200;
  height: var(--dock-h);
  padding: 8px;
  gap: 2px;
  border-radius: 26px;
  align-items: stretch;
  width: min(430px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hi);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.9);
}

.dock-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* dock radius 26 − (1px border + 8px padding) keeps the corners concentric */
  border-radius: 17px;
  color: var(--text-3);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.3s ease, background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

.dock-item svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.dock-item:active {
  background: rgba(255, 255, 255, 0.07);
}

.dock-item.is-active {
  color: #fff;
  background: rgba(209, 0, 31, 0.18);
  box-shadow: inset 0 0 0 1px rgba(209, 0, 31, 0.3);
}

/* Menu sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 285; /* above the cookie banner (280), below the cookie modal (290) */
  visibility: hidden;
  pointer-events: none;
}

/* Prevent the page scrolling behind open sheets/modals */
html.scroll-locked,
html.scroll-locked body {
  overflow: hidden;
}

.sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease;
  touch-action: none;
}

.sheet.is-open .sheet-backdrop {
  opacity: 1;
}

.sheet-panel {
  position: absolute;
  left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: 10px;
  max-height: calc(100% - 60px);
  overflow-y: auto;
  border-radius: 30px;
  padding: 14px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hi);
  transform: translateY(102%);
  transition: transform 0.5s var(--ease);
  overscroll-behavior: contain;
}

.sheet.is-open .sheet-panel {
  transform: none;
}

.sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  margin: 4px auto 14px;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sheet-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}

.sheet-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  transition: background 0.3s ease;
}

.sheet-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sheet-links a,
.sheet-links button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 15px 6px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.sheet-links a svg,
.sheet-links button svg {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

.sheet-links .sheet-sub {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
}

.sheet-label {
  padding: 18px 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}

.sheet-cta {
  width: 100%;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 60px) 0 90px;
}

#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 6.4vw, 4.6rem);
  line-height: 1.07;
  letter-spacing: -0.025em;
  max-width: 17ch;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 24px;
  max-width: 62ch;
  color: var(--text-2);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  text-wrap: pretty;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-note {
  margin-top: 26px;
  font-size: 0.82rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* Shared float used by the AI-section chips */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.scroll-cue::before {
  content: "";
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: var(--red-soft);
  animation: cue 2s ease-in-out infinite;
}

@keyframes cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   9. Capability ticker
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 36s linear infinite;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-list {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  flex-shrink: 0;
}

.ticker-list li {
  display: flex;
  align-items: center;
  gap: 34px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.tick-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(209, 0, 31, 0.7);
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   10. Split sections (AI / Software)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.split-rev .split-copy {
  order: 2;
}

.split-rev .split-visual {
  order: 1;
}

.feature-list {
  margin-top: 30px;
  display: grid;
  gap: 18px;
}

.feature-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(209, 0, 31, 0.1);
  border: 1px solid rgba(209, 0, 31, 0.22);
  color: var(--red-soft);
}

.feature-icon svg {
  width: 19px;
  height: 19px;
}

.feature-list strong {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
}

.feature-list span {
  color: var(--text-3);
  font-size: 0.88rem;
}

.split-cta {
  margin-top: 34px;
}

/* AI core visualization */
.split-visual {
  min-width: 0;
}

.ai-stage {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.ai-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.ai-ring .node {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red-hi);
  box-shadow: 0 0 12px 2px rgba(255, 45, 77, 0.65);
  top: -5px;
  left: calc(50% - 5px);
}

.ai-ring .node-b {
  top: auto;
  bottom: 12%;
  left: -4px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.4);
}

.ai-r1 {
  width: 58%;
  height: 58%;
  border-color: rgba(209, 0, 31, 0.28);
  animation: spin 22s linear infinite;
}

.ai-r2 {
  width: 78%;
  height: 78%;
  animation: spin-rev 34s linear infinite;
}

.ai-r3 {
  width: 98%;
  height: 98%;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.07);
  animation: spin 60s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spin-rev {
  to { transform: rotate(-360deg); }
}

.ai-orb {
  position: relative;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.35), transparent 40%),
    radial-gradient(circle at 50% 55%, #ff2743, var(--red) 55%, #4d000b 100%);
  box-shadow:
    0 0 70px 8px rgba(209, 0, 31, 0.45),
    0 0 160px 40px rgba(209, 0, 31, 0.16),
    inset 0 -14px 34px rgba(0, 0, 0, 0.5);
  animation: orb-breathe 5s ease-in-out infinite;
}

@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.ai-chip {
  position: absolute;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}

.ai-chip strong {
  color: var(--red-soft);
  font-weight: 500;
}

.ai-chip-1 { top: 8%; right: 0; animation-delay: -1s; }
.ai-chip-2 { bottom: 6%; left: 0; animation-delay: -3.4s; }

/* Code window */
.code-window {
  border-radius: var(--radius-m);
  overflow: hidden;
  max-width: 560px;
  margin-inline: auto;
  font-size: 0.8rem;
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.code-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.code-dot:first-child {
  background: rgba(209, 0, 31, 0.75);
}

.code-title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.code-body {
  padding: 20px 22px 24px;
  font-family: var(--font-mono);
  line-height: 1.85;
  color: var(--text-2);
  overflow-x: auto;
  white-space: pre;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}

.tok-kw { color: var(--red-soft); }
.tok-fn { color: #e8b4ff; }
.tok-str { color: #7ee0a3; }
.tok-cm { color: rgba(235, 235, 245, 0.3); }
.tok-num { color: #ffd48a; }

.code-caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--red-hi);
  vertical-align: -2px;
  animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

.stack-row {
  margin-top: clamp(44px, 6vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.stack-chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.stack-chip:hover {
  border-color: rgba(209, 0, 31, 0.45);
  color: var(--text-1);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   11. Service modules
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.service {
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.45s var(--spring),
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.service:hover {
  transform: translateY(-5px);
  border-color: rgba(209, 0, 31, 0.32);
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.85),
    0 0 44px -14px rgba(209, 0, 31, 0.28);
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(209, 0, 31, 0.2), rgba(209, 0, 31, 0.05));
  border: 1px solid rgba(209, 0, 31, 0.28);
  color: var(--red-soft);
  margin-bottom: 20px;
  box-shadow: 0 8px 22px -10px rgba(209, 0, 31, 0.5);
}

.service-icon svg {
  width: 24px;
  height: 24px;
}

.service h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.service-short {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 0.9rem;
  flex-grow: 1;
}

.service-toggle {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red-soft);
  padding: 4px 2px;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.service-toggle:hover {
  color: #ff8395;
}

.service-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 0.4s var(--ease);
}

.service-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.service-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.service-body > div {
  overflow: hidden;
}

.service-body.is-open {
  grid-template-rows: 1fr;
}

.service-body ul {
  padding-top: 18px;
  display: grid;
  gap: 10px;
}

.service-body li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  color: var(--text-2);
}

.service-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--red-hi), var(--red));
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   12. Industries
   -------------------------------------------------------------------------- */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.industry {
  padding: 26px 24px;
  border-radius: var(--radius-m);
  transition:
    transform 0.4s var(--spring),
    border-color 0.4s ease,
    background 0.4s ease;
}

.industry:hover {
  transform: translateY(-4px);
  border-color: rgba(209, 0, 31, 0.3);
  background: rgba(209, 0, 31, 0.05);
}

.industry-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--red-soft);
  margin-bottom: 16px;
}

.industry-icon svg {
  width: 20px;
  height: 20px;
}

.industry h3 {
  font-size: 0.98rem;
  font-weight: 600;
  font-family: var(--font-display);
}

.industry p {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   13. Why + stats
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why-card {
  padding: 28px;
  border-radius: var(--radius-m);
  transition: transform 0.4s var(--spring), border-color 0.4s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(209, 0, 31, 0.3);
}

.why-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(209, 0, 31, 0.1);
  border: 1px solid rgba(209, 0, 31, 0.24);
  color: var(--red-soft);
  margin-bottom: 18px;
}

.why-icon svg {
  width: 21px;
  height: 21px;
}

.why-card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
}

.why-card p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.88rem;
}

.stats {
  margin-top: 26px;
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #fff 30%, var(--red-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta {
  padding: clamp(30px, 5vw, 70px) 0;
}

.cta-panel {
  padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 80px);
  text-align: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 50% 120%, rgba(209, 0, 31, 0.22), transparent 65%),
    radial-gradient(40% 60% at 85% 0%, rgba(209, 0, 31, 0.1), transparent 70%);
  pointer-events: none;
}

.cta-panel > * {
  position: relative;
}

.cta-panel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
}

.cta-panel p {
  margin-top: 16px;
  color: var(--text-2);
  max-width: 54ch;
  margin-inline: auto;
}

.cta-panel .btn {
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
}

.contact-side {
  display: grid;
  gap: 18px;
}

.contact-card {
  padding: 26px;
  border-radius: var(--radius-m);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: border-color 0.35s ease, transform 0.35s var(--spring);
}

.contact-card:hover {
  border-color: rgba(209, 0, 31, 0.3);
  transform: translateY(-3px);
}

.contact-card .why-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.contact-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.contact-card p {
  margin-top: 5px;
  font-size: 0.86rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.contact-card a {
  color: var(--red-soft);
  font-weight: 500;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-form {
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius-l);
  /* No backdrop-filter here: an ancestor that has one becomes the backdrop
     root, leaving the nested fields with nothing to blur. Dropping it lets the
     controls inside frost against the real page, like the header does. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.022);
}

.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  margin-bottom: 28px;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 11px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

.segmented input:focus-visible + label {
  outline: 2px solid var(--red-hi);
  outline-offset: 2px;
}

.seg-thumb {
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(209, 0, 31, 0.85), rgba(143, 0, 22, 0.85));
  box-shadow: 0 8px 22px -8px rgba(209, 0, 31, 0.7);
  transition: transform 0.45s var(--spring);
}

.segmented.mode-consult .seg-thumb {
  transform: translateX(100%);
}

.segmented input:checked + label {
  color: #fff;
}

.form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  /* Dark glass, same as the header pill — a translucent near-black slab
     rather than a faint white wash */
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  color: var(--text-1);
  font: inherit;
  font-size: 1rem; /* ≥16px prevents iOS Safari auto-zoom on focus */
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23ff5c73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

.field select option {
  background: var(--bg-2);
  color: var(--text-1);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(209, 0, 31, 0.55);
  background: rgba(209, 0, 31, 0.045);
  box-shadow: 0 0 0 3px rgba(209, 0, 31, 0.14);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: rgba(255, 45, 77, 0.75);
}

.field-error {
  font-size: 0.75rem;
  color: var(--red-soft);
  display: none;
}

.field.has-error .field-error {
  display: block;
}

/* Native date/time pickers on dark (fallback when JS is off) */
.field input[type="date"] {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   16b. Custom controls — themed select & date picker (built by js/controls.js)
   -------------------------------------------------------------------------- */

/* The native control stays in the DOM for form value + no-JS fallback, but is
   taken out of the tab order once its custom counterpart is rendered. */
.ctl-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ctl {
  position: relative;
  width: 100%;
}

.ctl-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  /* Dark glass, same as the header pill */
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  color: var(--text-1);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.ctl-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.ctl-btn:focus-visible {
  outline: none;
  border-color: rgba(209, 0, 31, 0.55);
  background: rgba(209, 0, 31, 0.045);
  box-shadow: 0 0 0 3px rgba(209, 0, 31, 0.14);
}

.ctl.is-open .ctl-btn {
  border-color: rgba(209, 0, 31, 0.55);
  background: rgba(209, 0, 31, 0.045);
  box-shadow: 0 0 0 3px rgba(209, 0, 31, 0.14);
}

.ctl-placeholder {
  color: var(--text-3);
}

.ctl-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--red-soft);
  transition: transform 0.4s var(--ease);
}

.ctl.is-open .ctl-icon {
  transform: rotate(180deg);
}

.ctl-date .ctl-icon {
  width: 17px;
  height: 17px;
}

.ctl.is-open .ctl-date-icon {
  transform: none;
}

.field.has-error .ctl-btn {
  border-color: rgba(255, 45, 77, 0.75);
}

.ctl-native:disabled + .ctl {
  opacity: 0.45;
  pointer-events: none;
}

/* Floating panel shared by both controls */
.ctl-panel {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  padding: 7px;
  border-radius: 16px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-hi);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  /* visibility flips instantly on open and is delayed on close, so the panel
     can never be left stuck mid-transition while it is meant to be showing */
  transition:
    opacity 0.28s var(--ease),
    transform 0.34s var(--spring),
    visibility 0s linear 0.28s;
}

.ctl.is-open .ctl-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 0.28s var(--ease),
    transform 0.34s var(--spring),
    visibility 0s linear 0s;
}

.ctl.drop-up .ctl-panel {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom center;
}

/* Option list */
.ctl-list {
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 2px;
}

.ctl-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 0.92rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ctl-opt:hover,
.ctl-opt.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-1);
}

.ctl-opt[aria-selected="true"] {
  background: rgba(209, 0, 31, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(209, 0, 31, 0.3);
}

.ctl-opt svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0;
  color: var(--red-soft);
  transition: opacity 0.2s ease;
}

.ctl-opt[aria-selected="true"] svg {
  opacity: 1;
}

/* Calendar */
.ctl-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 10px;
}

.ctl-cal-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ctl-nav {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ctl-nav:hover {
  background: rgba(209, 0, 31, 0.16);
  border-color: rgba(209, 0, 31, 0.35);
  color: #fff;
}

.ctl-nav svg {
  width: 14px;
  height: 14px;
}

.ctl-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.ctl-dow {
  text-align: center;
  padding: 4px 0 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ctl-day {
  aspect-ratio: 1;
  min-height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.86rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s var(--spring);
}

.ctl-day:hover:not(.is-empty):not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
}

.ctl-day.is-empty {
  cursor: default;
  pointer-events: none;
}

.ctl-day:disabled {
  color: rgba(235, 235, 245, 0.22);
  cursor: not-allowed;
}

.ctl-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255, 92, 115, 0.5);
  color: var(--red-soft);
}

.ctl-day.is-selected {
  background: linear-gradient(135deg, #ff1f42, var(--red));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(209, 0, 31, 0.7);
}

.ctl-cal-foot {
  display: flex;
  gap: 8px;
  padding-top: 9px;
  margin-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ctl-cal-foot button {
  flex: 1;
  padding: 9px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  transition: background 0.25s ease, color 0.25s ease;
}

.ctl-cal-foot button:hover {
  background: rgba(209, 0, 31, 0.16);
  color: #fff;
}

@media (max-width: 720px) {
  .ctl-panel {
    padding: 9px;
  }
  .ctl-day {
    min-height: 40px;
  }
}

.consent-check {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.83rem;
  color: var(--text-2);
  cursor: pointer;
}

.consent-check input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--red);
  flex-shrink: 0;
  cursor: pointer;
}

.consent-check a {
  color: var(--red-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-check .field-error {
  display: none;
  width: 100%;
}

.consent-check.has-error {
  flex-wrap: wrap;
}

.consent-check.has-error .field-error {
  display: block;
}

.form-submit {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 6px;
}

.form-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-3);
}

.form-hide {
  display: none !important;
}

/* Success state */
.form-success {
  display: none;
  text-align: center;
  padding: 40px 10px 30px;
  flex-direction: column;
  align-items: center;
}

.contact-form.is-sent form {
  display: none;
}

.contact-form.is-sent .form-success {
  display: flex;
}

.success-ring {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(46, 229, 107, 0.08);
  border: 1px solid rgba(46, 229, 107, 0.3);
  color: #4ff08a;
  box-shadow: 0 0 40px -6px rgba(46, 229, 107, 0.35);
  animation: success-pop 0.6s var(--spring) both;
}

.success-ring svg {
  width: 34px;
  height: 34px;
}

@keyframes success-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.form-success h3 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.form-success p {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 0.9rem;
  max-width: 40ch;
}

.form-success .btn {
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  margin-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.4));
  padding: clamp(48px, 6vw, 80px) 0 0;
}

.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 0, 31, 0.7), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 60px);
}

.footer-brand p {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 0.88rem;
  max-width: 34ch;
}

.footer-status {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 20px;
}

.footer-col ul {
  display: grid;
  gap: 12px;
}

.footer-col a,
.footer-link {
  font-size: 0.88rem;
  color: var(--text-2);
  transition: color 0.3s ease;
  padding: 0;
  text-align: left;
}

.footer-col a:hover,
.footer-link:hover {
  color: var(--red-soft);
}

.footer-bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-3);
}

/* Give the fixed dock breathing room on mobile */
@media (max-width: 1080px) {
  .footer-bottom {
    padding-bottom: calc(var(--dock-h) + 40px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   17. Cookie consent UI (markup injected by consent.js)
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  z-index: 280;
  left: 20px;
  bottom: 20px;
  width: min(420px, calc(100% - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px;
  border-radius: var(--radius-l);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hi);
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.55s var(--ease), opacity 0.55s ease, visibility 0.55s;
}

.cookie-banner.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.cookie-banner h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-banner h2 svg {
  width: 20px;
  height: 20px;
  color: var(--red-soft);
  flex-shrink: 0;
}

.cookie-banner p {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--text-2);
}

.cookie-banner p a {
  color: var(--red-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-actions {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.cookie-actions .btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 0.86rem;
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-3);
  padding: 10px;
  font-size: 0.82rem;
}

.btn-quiet:hover {
  color: var(--text-1);
}

/* Preferences modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  pointer-events: none;
}

.cookie-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.4s ease;
  touch-action: none;
}

.cookie-modal.is-open .cookie-modal-backdrop {
  opacity: 1;
}

.cookie-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(82vh, 700px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-l);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hi);
  transform: translateY(26px) scale(0.97);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s ease;
  overflow: hidden;
}

.cookie-modal.is-open .cookie-modal-panel {
  transform: none;
  opacity: 1;
}

.cookie-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cookie-modal-head h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.cookie-modal-body {
  padding: 10px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookie-modal-body > p {
  padding: 12px 0 6px;
  font-size: 0.84rem;
  color: var(--text-2);
}

.cookie-modal-body > p a {
  color: var(--red-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cookie-cat:last-child {
  border-bottom: 0;
}

.cookie-cat h3 {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-req {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(46, 229, 107, 0.1);
  color: #4ff08a;
  border: 1px solid rgba(46, 229, 107, 0.22);
}

.cookie-cat p {
  margin-top: 7px;
  font-size: 0.8rem;
  color: var(--text-3);
  max-width: 46ch;
}

/* iOS-style switch */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 31px;
  flex-shrink: 0;
  margin-top: 2px;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.35s ease, border-color 0.35s ease;
  pointer-events: none;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--spring);
}

.switch input:checked + .switch-track {
  background: linear-gradient(135deg, #ff1f42, var(--red));
  border-color: rgba(255, 45, 77, 0.5);
}

.switch input:checked + .switch-track::after {
  transform: translateX(21px);
}

.switch input:disabled {
  cursor: not-allowed;
}

.switch input:disabled + .switch-track {
  opacity: 0.55;
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--red-hi);
  outline-offset: 3px;
}

.cookie-modal-foot {
  display: flex;
  gap: 12px;
  padding: 18px 26px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}

.cookie-modal-foot .btn {
  flex: 1;
  min-width: 140px;
  padding: 13px 18px;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   18. Legal pages
   -------------------------------------------------------------------------- */
.legal-hero {
  padding: calc(var(--nav-h) + clamp(70px, 12vw, 120px)) 0 clamp(36px, 6vw, 60px);
  text-align: center;
}

.legal-title {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
}

.legal-tagline {
  margin-top: 14px;
  color: var(--text-2);
  max-width: 58ch;
  margin-inline: auto;
  font-size: 0.98rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
  padding-bottom: clamp(60px, 8vw, 100px);
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  padding: 24px;
  border-radius: var(--radius-m);
  max-height: calc(100vh - var(--nav-h) - 80px);
  overflow-y: auto;
}

.legal-toc h2 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.legal-toc ul {
  display: grid;
  gap: 4px;
}

.legal-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.8rem;
  color: var(--text-2);
  transition: color 0.25s ease, background 0.25s ease;
}

.legal-toc a:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.05);
}

.legal-toc a.is-active {
  color: var(--text-1);
  background: rgba(209, 0, 31, 0.13);
}

.legal-article {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-l);
  min-width: 0;
}

.legal-updated {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-2) !important;
  margin-bottom: 14px;
}

.legal-section {
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  scroll-margin-top: calc(var(--nav-h) + 40px);
}

.legal-section:last-child {
  border-bottom: 0;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.legal-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--text-1);
}

.legal-section p {
  color: var(--text-2);
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.legal-section ul,
.legal-section ol {
  margin: 4px 0 14px;
  display: grid;
  gap: 8px;
  padding-left: 4px;
}

.legal-section ul li,
.legal-section ol li {
  position: relative;
  padding-left: 24px;
  color: var(--text-2);
  font-size: 0.92rem;
}

.legal-section ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(45deg);
}

.legal-section ol {
  counter-reset: legal-ol;
}

.legal-section ol li {
  counter-increment: legal-ol;
}

.legal-section ol li::before {
  content: counter(legal-ol) ".";
  position: absolute;
  left: 0;
  color: var(--red-soft);
  font-size: 0.82rem;
  font-weight: 600;
  top: 0.1em;
}

.legal-section a {
  color: var(--red-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-section strong {
  color: var(--text-1);
  font-weight: 600;
}

.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.table-wrap th {
  text-align: left;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

.table-wrap td {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  vertical-align: top;
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
/* Tighten the nav pill so it fits down to the 1080px swap point */
@media (max-width: 1280px) {
  .nav {
    gap: 14px;
    padding-left: 16px;
  }
  .nav-links {
    gap: 2px;
  }
  .nav-links a {
    padding: 9px 10px;
    font-size: 0.84rem;
  }
  .nav .brand-logo {
    height: 16px;
  }
  .nav .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  .nav-cta {
    padding: 0 16px;
    font-size: 0.8rem;
  }
}

@media (max-width: 1080px) {
  .nav-shell {
    display: none;
  }
  .mobile-topbar {
    display: flex;
  }
  /* Keep the lockup from crowding the status chip on phones */
  .mobile-topbar .brand-logo {
    height: 14px;
  }
  .mobile-topbar .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
  .mobile-topbar .nav-brand {
    gap: 9px;
  }
  .dock {
    display: flex;
  }
  section[id],
  .service[id] {
    scroll-margin-top: 84px;
  }
  .hero {
    padding-top: 130px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split-rev .split-copy {
    order: 1;
  }
  .split-rev .split-visual {
    order: 2;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-toc {
    position: static;
    max-height: none;
  }
  .cookie-banner {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--dock-h) - 48px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--dock-h) - 48px - env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 720px) {
  .container {
    width: calc(100% - 36px);
  }
  .services-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 16px;
  }
  .form-fields {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
  .cookie-modal {
    padding: 0;
    place-items: end center;
  }
  .cookie-modal-panel {
    width: 100%;
    max-height: 86vh;
    max-height: 86svh;
    border-radius: 26px 26px 0 0;
  }
  .cookie-modal-foot {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 400px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
  .dock-item span {
    font-size: 0.56rem;
  }
  .mobile-topbar .brand-logo {
    height: 13px;
  }
  .mobile-topbar .brand-mark {
    width: 26px;
    height: 26px;
  }
}

/* Short landscape phones — keep hero usable */
@media (max-height: 560px) {
  .hero {
    min-height: auto;
    padding-bottom: 70px;
  }
  .scroll-cue {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */
@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;
  }
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto; /* see .is-in — keeps nested backdrop-filter working */
  }
  .ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ticker-track {
    animation: none;
    width: 100%;
  }
  .ticker-list {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-right: 0;
    row-gap: 12px;
  }
  .ticker-list[aria-hidden="true"] {
    display: none;
  }
  .cursor-glow {
    display: none !important;
  }
}