/* ============================================================
   EXADRONE — Aerial Precision Cleaning Systems
   ============================================================ */

:root {
  /* Deep Obsidian & Slate — uniform dark industrial palette */
  --obsidian: #0a0b0d;
  --obsidian-2: #0e1013;
  --slate: #15171b;
  --slate-2: #1b1e23;
  --slate-glass: rgba(22, 25, 30, 0.55);
  --slate-glass-strong: rgba(22, 25, 30, 0.75);
  --paper: #f1f2f4;
  --steel: #9aa0a8;
  --steel-dark: #5c6168;
  --signal: #ff4500;
  --signal-soft: rgba(255, 69, 0, 0.16);
  --line: rgba(255, 255, 255, 0.1);
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);

  --ink: var(--obsidian);

  /* Apple system-font stack — renders true San Francisco on Mac/iPhone/iPad,
     since SF Pro itself is proprietary and not licensed for web embedding */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1240px;
  --glow-y: 0%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  /* --scroll-bg is written by JS on scroll, interpolating between the dark
     palette stops below; the static var(--obsidian) is just the no-JS/initial
     fallback so there's never a flash of the wrong color before scroll fires. */
  background-color: var(--scroll-bg, var(--obsidian));
  background-image:
    radial-gradient(900px 700px at 50% var(--glow-y), var(--signal-soft), transparent 65%),
    radial-gradient(700px 600px at 85% calc(var(--glow-y) + 18%), rgba(154, 160, 168, 0.07), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  animation: page-fade-in .7s var(--ease);
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
img, video { display: block; max-width: 100%; }
a, button, input, select, textarea { touch-action: manipulation; }

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

/* ---------- Glassmorphism utility ---------- */
.glass {
  background: var(--slate-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 40px -20px rgba(0,0,0,0.5);
}

/* ---------- Pointer-tracked spotlight (bento surfaces) ---------- */
.glow-surface { position: relative; isolation: isolate; }
.glow-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.07), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.glow-surface:hover::before { opacity: 1; }
@media (hover: none) {
  .glow-surface::before { display: none; }
}

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Custom cursor ---------- */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), opacity .2s;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-ring.hover-link {
  width: 56px; height: 56px;
  background-color: var(--paper);
  mix-blend-mode: difference;
}
@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}

/* ---------- Layout helpers ---------- */
.section {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 64px);
  max-width: var(--container);
  margin: 0 auto;
}
.section-dark {
  max-width: none;
}
.section-dark .section-head { max-width: var(--container); margin: 0 auto 64px; }
.section-dark .timeline { max-width: var(--container); margin: 0 auto; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 18px;
  display: inline-block;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 8px;
  vertical-align: middle;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 18ch;
  color: var(--paper);
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal[data-delay="1"] { --d: 1; }
.reveal[data-delay="2"] { --d: 2; }
.reveal[data-delay="3"] { --d: 3; }
.reveal[data-delay="4"] { --d: 4; }
.reveal[data-delay="5"] { --d: 5; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 100px;
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn-primary {
  background: var(--paper);
  color: var(--ink);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--signal); color: var(--paper); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--paper);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--paper); }
.btn-wide { width: 100%; padding: 18px; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px clamp(20px, 5vw, 48px);
  background: rgba(10, 11, 13, 0.55);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: background-color .4s var(--ease), backdrop-filter .4s, padding .3s var(--ease), border-color .4s, box-shadow .4s;
  border-bottom: 1px solid var(--line-dark);
}
.site-nav.scrolled {
  background: var(--slate-glass-strong);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  padding-top: 14px;
  padding-bottom: 14px;
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px -20px rgba(0,0,0,0.6);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.nav-mark svg { transition: transform .6s var(--ease), color .3s; }
.nav-mark:hover svg { transform: rotate(45deg); color: var(--signal); }
@media (prefers-reduced-motion: reduce) {
  .nav-mark svg { transition: none; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  color: var(--paper);
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.92;
  transition: opacity .25s;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 10px 20px;
  border-radius: 100px;
  opacity: 1 !important;
}
.nav-cta:hover { border-color: var(--signal); background: var(--signal); color: var(--paper); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 26px;
}
.nav-toggle span {
  height: 1px;
  background: var(--paper);
  width: 100%;
}

/* ============================================================
   HERO — pure scroll-scrubbed product video, no UI chrome
   ============================================================ */
.hero {
  position: relative;
  color: var(--paper);
}
.hero-sticky {
  /* No position:sticky here — GSAP ScrollTrigger owns the pin (applies
     position:fixed itself while active) and the spacer it injects is what
     reserves the scroll distance in the document, so the pin is guaranteed
     to release at the exact same instant the scrub finishes. */
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--obsidian);
  overflow: hidden;
  /* Centers the canvas itself (the only in-flow child — the spotlight,
     scrim and grid overlays below are all position:absolute and unaffected
     by this flex context). */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Soft product-stage spotlight behind the drone — gives it a halo of
   warm/cool light to separate it from the dark page rather than relying
   on blend-mode darkening (which was crushing the drone's own dark tones) */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(closest-side, rgba(255,69,0,0.22), transparent 70%) center 52% / 75% 65% no-repeat,
    radial-gradient(closest-side, rgba(154,160,168,0.16), transparent 75%) center 48% / 95% 85% no-repeat;
}
.hero-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /* The box itself now matches the footage's native ratio (1980×1044), so
     it hugs the actual image almost exactly — no leftover transparent
     canvas margin for the mask below to miss. */
  aspect-ratio: 1980 / 1044;
  max-height: 86vh;
  transform: scale(1.02);
  /* Brighten + sharpen the footage itself so the drone's metallic and
     carbon-fiber surfaces pop — no blend-mode crushing its own dark tones */
  filter: brightness(1.2) contrast(1.1) saturate(1.05);
  /* Feather the canvas's own edges to transparent — the drone fades into
     the matching --obsidian stage behind it instead of sitting inside a
     visible rectangle. Because the box now matches the image's aspect
     ratio, this feather lands exactly on the visible frame's edges. */
  -webkit-mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, black 60%, rgba(0,0,0,0.4) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, black 60%, rgba(0,0,0,0.4) 84%, transparent 100%);
}
/* Desktop: present the product at 50% width, centered, on the same flat
   obsidian stage as the rest of the page — no card, no border, so the
   untouched hero-media background reads as one continuous surface. */
@media (min-width: 981px) {
  .hero-canvas {
    width: 50%;
  }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* radial vignette: stays clear over the centered drone, darkens toward
       the frame edges so the source footage's light studio backdrop
       disappears into the dark theme instead of reading as a gray box */
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 38%, rgba(10,11,13,0.6) 75%, rgba(10,11,13,0.96) 100%),
    linear-gradient(180deg, rgba(8,8,9,0.35) 0%, rgba(8,8,9,0.05) 30%, rgba(8,8,9,0.35) 75%, rgba(8,8,9,0.85) 100%);
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(245,244,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,244,240,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
  opacity: 0.5;
}

/* Spec callouts — staggered captions superimposed over the scrubbing video.
   Driven purely by an additive ScrollTrigger onUpdate (see script.js); the
   canvas draw loop, pin and pacing are untouched. Anchored low, off to the
   side of the centered drone, so the product itself is never covered. */
.hero-specs {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.spec-line {
  position: absolute;
  left: clamp(20px, 5vw, 56px);
  bottom: clamp(48px, 10vh, 96px);
  max-width: min(78%, 360px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.spec-line.is-active {
  opacity: 1;
  transform: translateY(0);
}
.spec-text {
  display: inline-block;
  padding: 11px 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-align: left;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6);
  background: rgba(10, 11, 13, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(245, 244, 240, 0.08);
  border-radius: 14px;
}
@media (max-width: 760px), (orientation: portrait) {
  .spec-line {
    left: 50%;
    right: auto;
    bottom: clamp(28px, 7vh, 56px);
    transform: translate(-50%, 14px);
    text-align: center;
    max-width: 86%;
  }
  .spec-line.is-active { transform: translate(-50%, 0); }
  .spec-text { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-line { display: none; }
}

/* ============================================================
   HOOK — the very first thing visitors see: the service stated plainly,
   centered and full-height like a classic Apple statement hero. No video
   above it, so no overlap trick here — just generous top clearance so the
   copy never sits under the fixed/translucent nav bar.
   ============================================================ */
.intro-hook {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(140px, 18vw, 200px) clamp(24px, 6vw, 64px) clamp(60px, 8vw, 100px);
}

/* ============================================================
   VIDEO OVERLAP — applied to whichever section immediately follows the
   pinned canvas (the proof section): slides up to overlap the bottom of
   the video once the sequence finishes, then settles onto solid ground.
   Purely a layout/paint effect (negative margin + z-index + fade-to-solid
   backdrop) — does not touch the canvas/pin/scrub logic at all.
   ============================================================ */
.video-overlap {
  --overlap: 100px;
  position: relative;
  z-index: 3;
  margin-top: calc(var(--overlap) * -1);
  padding-top: var(--overlap);
  /* Top edge fades from transparent (drone environment still peeking
     through) into the page's solid backdrop — the text itself always
     lands on solid ground, never directly over the video. */
  background: linear-gradient(180deg, transparent, var(--scroll-bg, var(--obsidian)) var(--overlap));
}
@media (max-width: 760px), (orientation: portrait) {
  .video-overlap { --overlap: 56px; }
}

.section-lead {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--steel);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
}
.hero-sub {
  margin-top: 24px;
  max-width: 38ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--steel);
}
.hero-actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-launch {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: center;
}
.hero-launch .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 10px;
  box-shadow: 0 0 0 0 rgba(255,77,28,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,28,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,77,28,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,28,0); }
}

/* ============================================================
   STAT STRIP
   ============================================================ */
.stat-strip {
  padding: clamp(48px, 8vw, 80px) clamp(20px, 6vw, 64px);
}
.stat-strip-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 18px);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  border-radius: 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--slate-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 30px -18px rgba(0,0,0,0.5);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.stat:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 20%), rgba(255,255,255,0.07), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.stat:hover::before { opacity: 1; }
@media (hover: none) { .stat::before { display: none; } }
.stat-icon {
  color: var(--steel);
  opacity: 0.85;
  position: relative;
  z-index: 1;
}
.stat-precision .stat-icon,
.stat-precision .stat-value { color: var(--signal); }
.stat-value {
  font-family: var(--font-display);
  font-weight: 100; /* ultralight — Apple's spec-sheet numeral treatment */
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  color: var(--paper);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--steel);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba-slider { display: flex; flex-direction: column; align-items: center; }
.ba-frame {
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 11 / 6;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  touch-action: none;
  cursor: ew-resize;
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.ba-before { clip-path: inset(0 50% 0 0); will-change: clip-path; }

.ba-tag {
  position: absolute;
  top: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(10,10,11,0.55);
  color: var(--paper);
  backdrop-filter: blur(6px);
}
.ba-tag-before { left: 18px; }
.ba-tag-after { right: 18px; }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.ba-handle-grip {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,69,0,0.35);
  cursor: ew-resize;
  pointer-events: auto;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ba-frame.dragging .ba-handle-grip { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,69,0,0.55); }
.ba-handle-grip:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.ba-hint {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--steel-dark);
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 18px);
}
.cap-card {
  background: var(--slate-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 36px -22px rgba(0,0,0,0.55);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.cap-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.07), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.cap-card:hover::before { opacity: 1; }
@media (hover: none) { .cap-card::before { display: none; } }
.cap-index {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--steel);
  display: block;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.cap-icon { color: var(--paper); margin-bottom: 22px; position: relative; z-index: 1; }
.cap-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  color: var(--paper);
}
.cap-card p {
  color: var(--steel);
  font-size: 0.95rem;
  max-width: 40ch;
  position: relative;
  z-index: 1;
}

/* ============================================================
   INSTANT ESTIMATE
   ============================================================ */
.estimate-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  background: var(--slate-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  color: var(--paper);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 48px -24px rgba(0,0,0,0.55);
}
.estimate-input-group { display: flex; flex-direction: column; gap: 14px; }
.estimate-input-group label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.estimate-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  transition: border-color .25s;
}
.estimate-input-wrap:focus-within { border-color: var(--signal); }
.estimate-input-wrap input {
  background: none;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 100; /* ultralight — Apple numeral treatment */
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  width: 100%;
  min-width: 0;
}
.estimate-input-wrap input::placeholder {
  color: var(--steel-dark);
  /* The placeholder is now a full prompt sentence, not a numeral — give it
     its own modest size/weight so it fits cleanly; the big ultralight
     numeral treatment above only ever applies to the typed value. */
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
}
.estimate-input-wrap input[type="number"]::-webkit-outer-spin-button,
.estimate-input-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.estimate-input-wrap input[type="number"] { -moz-appearance: textfield; }
.estimate-unit { font-family: var(--font-mono); font-weight: 600; color: var(--steel); font-size: 1.1rem; }
.estimate-rate { font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; color: var(--signal); letter-spacing: 0.04em; }

.estimate-divider { width: 1px; align-self: stretch; background: var(--line); }

.estimate-output-group { display: flex; flex-direction: column; gap: 18px; }
.estimate-output-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}
.estimate-output {
  font-family: var(--font-display);
  font-weight: 100; /* ultralight — Apple numeral treatment */
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: -0.01em;
}
.estimate-output-group .btn { align-self: flex-start; }

@media (max-width: 980px) {
  .estimate-card { grid-template-columns: 1fr; }
  .estimate-divider { width: 100%; height: 1px; }
}

/* ============================================================
   SHOWCASE
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(60px, 10vw, 140px) clamp(24px, 6vw, 64px);
  /* Contains the ::before halo's intentional bleed (inset:-18%, see below)
     within this section instead of letting it become real page content
     past the viewport edge — that bleed is exactly what was causing the
     mobile horizontal-scroll/"brown sliver" bug. */
  overflow: hidden;
}
.showcase-copy {
  margin-top: 22px;
  color: var(--steel);
  max-width: 36ch;
}
.showcase-media {
  position: relative;
  /* Matches the source footage's own ratio (1980×1044) — the frame fits the
     video exactly, so there's no cropping and no letterboxing needed. */
  aspect-ratio: 1980 / 1044;
  background: var(--ink);
  border-radius: 18px;
}
/* Halo bleeding outside the rounded frame, same spotlight language as the
   hero — this is why .showcase-media no longer clips with overflow:hidden;
   the video and frame-glow below clip themselves via their own radius */
.showcase-media::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(closest-side, rgba(255,69,0,0.18), transparent 70%) center / 80% 70% no-repeat,
    radial-gradient(closest-side, rgba(154,160,168,0.14), transparent 75%) center / 100% 90% no-repeat;
  filter: blur(18px);
  pointer-events: none;
}
.showcase-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* contain, not cover — guarantees the full frame stays visible even if the
     container's aspect ratio is ever overridden (e.g. the tablet breakpoint) */
  object-fit: contain;
  background: var(--ink);
  border-radius: 18px;
  /* Same brightening treatment as the hero video — no blend-mode crushing,
     so the drone's metallic detail stays visible instead of the solid
     light studio backdrop showing through as a white box */
  filter: brightness(1.2) contrast(1.1) saturate(1.05);
}
.showcase-frame-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 18px;
  background: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, rgba(10,11,13,0.6) 75%, rgba(10,11,13,0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events: none;
}

/* ============================================================
   PROCESS / TIMELINE
   ============================================================ */
.timeline {
  display: flex;
  flex-direction: column;
}
.timeline { gap: 12px; display: flex; flex-direction: column; }
.timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 16px;
  background: var(--slate-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.timeline-item:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.timeline-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 0%) var(--my, 50%), rgba(255,255,255,0.06), transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.timeline-item:hover::before { opacity: 1; }
@media (hover: none) { .timeline-item::before { display: none; } }
.timeline-index {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--steel);
  position: relative;
  z-index: 1;
}
.timeline-item h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--paper);
  position: relative;
  z-index: 1;
}
.timeline-item p {
  color: var(--steel);
  max-width: 48ch;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

/* ============================================================
   RELIABILITY
   ============================================================ */
.reliability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
}
.showcase-copy { margin-top: 22px; }
.reliability-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-self: center;
}
.reliability-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 18px;
  border-radius: 14px;
  background: var(--slate-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.reliability-list li:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.check {
  color: var(--steel);
  font-family: var(--font-mono);
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries {
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 64px);
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.industries-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.industries-row span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  background: var(--slate-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--steel);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.industries-row span:hover { border-color: var(--line-strong); color: var(--paper); }

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta-section {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 64px);
}
.cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 20px;
}
.cta-sub {
  color: var(--steel);
  max-width: 48ch;
  margin: 0 auto 44px;
}
.cta-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.cta-form input,
.cta-form select,
.cta-form textarea {
  width: 100%;
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem; /* >=16px prevents iOS Safari auto-zoom on focus */
  transition: border-color .25s;
  resize: vertical;
}
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--signal);
}
.cta-form input[aria-invalid="true"],
.cta-form select[aria-invalid="true"],
.cta-form textarea[aria-invalid="true"] {
  border-color: var(--signal);
}
.cta-form select { color: var(--steel); }
.cta-form select:valid { color: var(--paper); }
.cta-form button { margin-top: 8px; }
.cta-form button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Formspree AJAX toggles [data-fs-active] on success/error elements —
   hidden by default, shown only when the library activates them */
[data-fs-success],
[data-fs-error] {
  display: none;
}
[data-fs-success][data-fs-active],
[data-fs-error][data-fs-active] {
  display: block;
}
.field-error[data-fs-error] {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
}
.form-error[data-fs-error] {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--signal);
  margin-top: -4px;
}

.cta-success {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--signal);
}
/* Once the success message is active, hide the (now-reset) form behind it */
.cta-inner:has(.cta-success[data-fs-active]) .cta-form { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  color: var(--steel);
  border-top: 1px solid var(--line);
  padding: 48px clamp(24px, 6vw, 64px) 36px;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
.nav-mark.static { color: var(--paper); }
.footer-brand { max-width: 220px; }
.footer-brand p { margin-top: 8px; font-size: 0.85rem; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-dark);
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-link-btn {
  font-size: 0.88rem;
  opacity: 0.8;
  text-align: left;
  font-family: inherit;
  transition: opacity .25s;
}
.footer-links a:hover, .footer-link-btn:hover { opacity: 1; color: var(--signal); }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 0.8rem; }

/* ============================================================
   RESPONSIVE — mobile-first refinements
   ============================================================ */
@media (max-width: 980px) {
  .stat-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-media { aspect-ratio: 16/10; order: -1; }
  /* Smaller bleed at narrower widths — there's much less side margin to
     absorb the halo here than on desktop. */
  .showcase-media::before { inset: -8%; }
  .reliability-grid { grid-template-columns: 1fr; }
  .reliability-list { align-self: start; grid-template-columns: 1fr 1fr; }
}

/* Hero canvas stays fully visible on mobile/portrait — never cropped (the
   JS draw loop always contain-fits the frame). The visible image band is
   much shorter than the full viewport in that mode, so the base ellipse
   (sized for the desktop framing) barely reaches it — flatten the
   vignette to match that narrower band instead. */
@media (max-width: 760px), (orientation: portrait) {
  .hero-scrim {
    background:
      radial-gradient(ellipse 68% 15% at 50% 50%, transparent 28%, rgba(10,11,13,0.78) 68%, rgba(10,11,13,0.97) 100%),
      linear-gradient(180deg, rgba(8,8,9,0.35) 0%, rgba(8,8,9,0.05) 30%, rgba(8,8,9,0.35) 75%, rgba(8,8,9,0.85) 100%);
  }
}

@media (max-width: 760px) {
  .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: 78vw; max-width: 340px;
    background: var(--slate-glass-strong); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 28px; padding: 0 36px; transform: translateX(100%);
    transition: transform .45s var(--ease); }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.1rem; }
  .nav-toggle { display: flex; z-index: 101; }
  .cap-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 40px 1fr; gap: 18px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
  .reliability-list { grid-template-columns: 1fr; }
  .stat-strip-inner { grid-template-columns: 1fr 1fr; }
  .footer-meta { align-items: flex-start; }
}

/* Smallest phones (iPhone SE / mini, narrow Android) — extra typography restraint */
@media (max-width: 420px) {
  .hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .hero-sub { font-size: 0.95rem; max-width: 32ch; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .cta-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .estimate-output { font-size: clamp(2rem, 10vw, 2.6rem); }
  .estimate-input-wrap input { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .stat-strip-inner { grid-template-columns: 1fr; }
  .btn { padding: 14px 24px; font-size: 0.8rem; }
}

/* "EXADRONE" stays visible on mobile at all times. The off-canvas drawer
   (78vw, anchored right) only ever reaches far enough left to sit over the
   wordmark while it's actually open — so fade the wordmark out for just
   that moment (siteNav.menu-open, toggled in script.js) instead of hiding
   it permanently on small screens. */
@media (max-width: 760px) {
  .nav-mark span {
    transition: opacity .25s var(--ease);
  }
  #siteNav.menu-open .nav-mark span {
    opacity: 0;
  }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.btn-small { padding: 11px 18px; font-size: 0.78rem; }

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: 18px clamp(16px, 4vw, 40px);
  background: var(--slate-glass-strong);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -16px 40px -20px rgba(0,0,0,0.6);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cookie-banner-inner p { font-size: 0.86rem; color: var(--steel); max-width: 62ch; }
.cookie-banner-inner p a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--line-strong); }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: flex-end; }
}

/* ============================================================
   WHATSAPP FLOATING ACTION BUTTON
   ============================================================ */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 210;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-glass-strong);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  color: var(--paper);
  box-shadow: 0 12px 32px -14px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: transform .35s var(--ease), border-color .3s, color .3s, bottom .35s var(--ease), box-shadow .3s;
}
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: var(--signal);
  color: var(--signal);
  box-shadow: 0 18px 36px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,69,0,0.25);
}
.whatsapp-fab:active { transform: translateY(-1px) scale(0.96); }
.whatsapp-fab svg { display: block; }

/* Discreet label that only appears on hover (pointer devices) — keeps the
   button itself minimal/iconographic the rest of the time. */
.whatsapp-fab-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--slate-glass-strong);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.whatsapp-fab:hover .whatsapp-fab-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (hover: none) { .whatsapp-fab-tooltip { display: none; } }

/* Float above the cookie banner instead of sitting behind it on first visit */
body:has(#cookieBanner.is-visible) .whatsapp-fab { bottom: 104px; }

@media (max-width: 640px) {
  .whatsapp-fab { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  body:has(#cookieBanner.is-visible) .whatsapp-fab { bottom: 196px; }
}

/* ============================================================
   LEGAL PAGES — long-form prose
   ============================================================ */
.legal-main { padding: clamp(140px, 18vw, 200px) clamp(24px, 6vw, 64px) 100px; }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-inner .eyebrow { margin-bottom: 14px; }
.legal-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.01em; margin-bottom: 8px; }
.legal-updated { font-family: var(--font-mono); font-size: 0.78rem; color: var(--steel-dark); letter-spacing: 0.04em; }
.legal-body { margin-top: 48px; }
.legal-body h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  margin-top: 44px; margin-bottom: 14px; color: var(--paper);
  padding-top: 24px; border-top: 1px solid var(--line-dark);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body p { color: var(--steel); font-size: 0.96rem; line-height: 1.75; margin-bottom: 14px; }
.legal-body ul { margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.legal-body li { color: var(--steel); font-size: 0.96rem; line-height: 1.6; padding-left: 20px; position: relative; }
.legal-body li::before { content: "—"; position: absolute; left: 0; color: var(--steel-dark); }
.legal-body strong { color: var(--paper); font-weight: 600; }
.legal-body a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--line-strong); }
.legal-body a:hover { color: var(--signal); }
.legal-placeholder { color: var(--signal); }
.legal-table {
  width: 100%;
  /* fixed layout forces columns to share the available width instead of
     growing to fit unbroken content (e.g. "exadrone_cookie_consent") —
     that growth was forcing this table wider than the viewport on mobile */
  table-layout: fixed;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 0.88rem;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--steel);
  overflow-wrap: anywhere;
}
.legal-table th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-dark); }
.legal-table td:first-child, .legal-table th:first-child { padding-left: 0; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-main { padding: clamp(140px, 18vw, 200px) clamp(24px, 6vw, 64px) 120px; }
.contact-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 36px; }
.contact-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -0.01em; line-height: 1.05; }
.contact-sub { color: var(--steel); font-size: 1.02rem; max-width: 46ch; line-height: 1.6; }
.contact-channels { display: flex; flex-direction: column; gap: 22px; }
.contact-channel { display: flex; gap: 16px; align-items: flex-start; }
.contact-channel-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--slate-glass); border: 1px solid var(--line); color: var(--signal);
}
.contact-channel h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
.contact-channel p, .contact-channel a { font-size: 0.9rem; color: var(--steel); }
.contact-channel a:hover { color: var(--signal); }
.contact-form-card {
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
}
.contact-form-card .form-row { margin-bottom: 16px; }
.contact-form-card .field { margin-bottom: 16px; }
.contact-prefill-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid rgba(255,69,0,0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  display: none;
}
.contact-prefill-note.is-visible { display: block; }
.contact-form-card:has(.cta-success[data-fs-active]) .cta-form { display: none; }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
}