/* ============================================================
   DEEP SIX SOLUTIONS — site.css
   Direction: "Abyssal" (cinematic deep-sea descent),
   disciplined by "Corporate Clarity" (instrument-grade legibility).
   One hand-written stylesheet. No build step. No web fonts.
   All text/background pairings verified for WCAG AA on --abyss-900.
   ============================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Depth backdrop: surface -> abyss */
  --abyss-900: #04070F; /* page base            */
  --abyss-800: #070C18; /* raised cards         */
  --abyss-700: #0A1322; /* deep band            */
  --abyss-600: #0E1B30; /* twilight band        */
  --abyss-500: #10243F; /* surface band         */
  --hairline:  #1C2E48; /* borders / dividers   */
  --hairline-soft: rgba(255,255,255,.06);

  /* Brand + bioluminescent accent (cyan is RATIONED) */
  --ocean:      #0070C9;
  --ocean-600:  #0A5FA8;
  --ocean-400:  #2E93E6;
  --cyan:       #37E2FF;
  --cyan-soft:  #8FF0FF;

  /* Ink ramp (AA on --abyss-900) */
  --ink-100: #F2F7FF; /* headings  16.8:1 */
  --ink-200: #CFE0F2; /* body      11.9:1 */
  --ink-300: #9DB4CE; /* muted      6.5:1 */
  --ink-400: #6E869F; /* captions   5.35:1 (AA) */

  /* Functional */
  --focus:    #37E2FF;
  --on-ocean: #F2F7FF;

  /* Glow + shadow */
  --glow-cyan:  0 0 0 1px rgba(55,226,255,.35),
                0 8px 40px -8px rgba(55,226,255,.45);
  --glow-ocean: 0 10px 40px -10px rgba(0,112,201,.55);
  --shadow-card: 0 24px 60px -24px rgba(0,0,0,.7);
  --shadow-soft: 0 2px 12px rgba(0,0,0,.4);

  /* Signature gradients */
  --depth-fade: linear-gradient(180deg,
      var(--abyss-500) 0%,
      var(--abyss-700) 45%,
      var(--abyss-900) 100%);

  /* Spacing scale (4px base) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem; --s-11:12rem;

  /* Radii */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* Layout */
  --maxw:1200px;
  --maxw-narrow:760px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --nav-h:68px;

  /* Type */
  --font-display:
    "SF Pro Display","Segoe UI",-apple-system,BlinkMacSystemFont,
    Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-body:
    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,
    Arial,system-ui,sans-serif;
  --font-mono:
    ui-monospace,"SF Mono","SFMono-Regular","Roboto Mono",Menlo,
    Consolas,monospace;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.6s;
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--abyss-900);
  color:var(--ink-200);
  font:400 clamp(1rem,1.05vw,1.12rem)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:var(--ocean-400); text-decoration:none; }
a:hover { color:var(--cyan); }
ul { margin:0; padding:0; list-style:none; }
::selection { background:rgba(55,226,255,.25); color:var(--ink-100); }

/* Skip link */
.skip-link {
  position:absolute; left:var(--s-4); top:-100%;
  z-index:200; background:var(--ocean); color:var(--on-ocean);
  padding:.7rem 1.1rem; border-radius:var(--r-sm); font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus { top:var(--s-4); color:var(--on-ocean); }

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink-100); margin:0; }
h1,.h1 {
  font-weight:600; font-size:clamp(2.5rem,6.2vw,4.7rem);
  line-height:1.03; letter-spacing:-.025em; text-wrap:balance;
}
h2,.h2 {
  font-weight:600; font-size:clamp(1.9rem,3.8vw,3.1rem);
  line-height:1.07; letter-spacing:-.02em; text-wrap:balance;
}
h3,.h3 {
  font-weight:500; font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.22; letter-spacing:-.01em;
}
h4 { font-weight:600; font-size:1rem; }
p { margin:0 0 1rem; max-width:64ch; }
strong { color:var(--ink-100); font-weight:600; }

.lead {
  font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.55;
  color:var(--ink-200); max-width:46ch;
}
.eyebrow {
  font-family:var(--font-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 var(--s-4);
}
.muted { color:var(--ink-300); }
.caption { font-size:.85rem; color:var(--ink-400); letter-spacing:.01em; }
.measure { max-width:var(--maxw-narrow); }

/* ----------------------------------------------------------------
   4. LAYOUT
   ---------------------------------------------------------------- */
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(4rem,9vw,8rem); position:relative; }
.section-sm { padding-block:clamp(3rem,6vw,5rem); }

/* Depth banding: sections step deeper as you descend */
.zone-surface  { background:var(--abyss-500); }
.zone-twilight { background:var(--abyss-600); }
.zone-deep     { background:var(--abyss-700); }
.zone-card     { background:var(--abyss-800); }
.zone-abyss    { background:var(--abyss-900); }

/* Section header block */
.section-head { max-width:62ch; margin-bottom:var(--s-7); }
.section-head .lead { margin-top:var(--s-3); }

/* Fathom index — ties layout to "deep six = six fathoms" */
.fathom {
  font-family:var(--font-mono); font-size:.74rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-300);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:var(--s-3);
}
.fathom::before {
  content:""; width:1.6rem; height:1px; background:var(--hairline);
}
.fathom b { color:var(--cyan); font-weight:600; }

/* Thermocline divider (1px gradient + centered tail-curl mark) */
.thermocline {
  position:relative; height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--hairline) 18%,
    var(--hairline) 82%,transparent);
}
.thermocline::after {
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--abyss-900); border:1px solid var(--cyan);
  box-shadow:0 0 12px rgba(55,226,255,.5);
}

/* Vertical fathom margin cue (desktop only, decorative) */
.depth-rail {
  position:fixed; left:14px; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-400);
  opacity:.5; z-index:40; pointer-events:none; user-select:none;
}
@media (max-width:1180px) { .depth-rail { display:none; } }

/* ----------------------------------------------------------------
   5. NAV
   ---------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(4,7,15,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.nav.is-scrolled { background:rgba(4,7,15,.86); border-bottom-color:var(--hairline); }
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
}
.nav-brand {
  display:inline-flex; align-items:center; gap:.6rem; color:var(--ink-100);
  font:600 1.05rem/1 var(--font-display); letter-spacing:-.01em;
}
.nav-brand:hover { color:var(--ink-100); }
.nav-brand img {
  width:30px; height:30px;
  filter:invert(1) brightness(1.5) drop-shadow(0 0 10px rgba(55,226,255,.4));
}
.nav-brand b { font-weight:600; }
.nav-brand .sfx { color:var(--ink-300); font-weight:400; }
.nav-links { display:flex; gap:var(--s-5); align-items:center; }
.nav-links a {
  position:relative; color:var(--ink-300); font-size:.95rem;
  padding:.45rem 0; transition:color .2s;
}
.nav-links a:hover { color:var(--ink-100); }
.nav-links a[aria-current="page"] { color:var(--ink-100); }
.nav-links a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan); border-radius:2px;
}
.nav-toggle {
  display:none; background:none; border:0; color:var(--ink-100);
  padding:.65rem; margin:-.65rem -.65rem -.65rem 0; cursor:pointer;
}
.nav-toggle svg { width:24px; height:24px; }

@media (max-width:860px) {
  .nav-toggle { display:inline-flex; }
  .nav-links {
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column;
    gap:0; align-items:stretch;
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
    overscroll-behavior:contain;
    background:rgba(4,7,15,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:var(--s-3) var(--gutter) var(--s-6);
    border-bottom:1px solid var(--hairline);
    transform:translateY(-130%); transition:transform .35s var(--ease);
  }
  .nav-links.is-open { transform:translateY(0); }
  .nav-links a:not(.btn) { padding:.95rem 0; border-bottom:1px solid var(--hairline); font-size:1.05rem; }
  .nav-links .btn-primary { margin-top:var(--s-4); align-self:flex-start; }
}

/* ----------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font:500 1rem/1 var(--font-display); letter-spacing:-.01em;
  padding:.95rem 1.6rem; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .25s,background .25s,
    border-color .25s,color .25s;
}
.btn:active { transform:translateY(1px); }
.btn .arrow { transition:transform .2s var(--ease); }
.btn:hover .arrow { transform:translateX(3px); }
.btn-primary {
  background:linear-gradient(180deg,var(--ocean-400),var(--ocean));
  color:var(--on-ocean); box-shadow:var(--glow-ocean);
}
.btn-primary:hover {
  color:var(--on-ocean);
  background:linear-gradient(180deg,#3a9fef,var(--ocean-400));
  box-shadow:var(--glow-cyan),var(--glow-ocean);
}
.btn-ghost {
  background:rgba(255,255,255,.03); color:var(--ink-100);
  border-color:var(--hairline);
}
.btn-ghost:hover { color:var(--ink-100); border-color:var(--ocean-400); background:rgba(46,147,230,.08); }
/* Disabled button — keeps the shape, removes the glow + action */
.btn:disabled, .btn.is-disabled {
  cursor:not-allowed; background:var(--abyss-700); color:var(--ink-400);
  border-color:var(--hairline); box-shadow:none;
}
.btn:disabled:hover, .btn.is-disabled:hover {
  background:var(--abyss-700); color:var(--ink-400);
  border-color:var(--hairline); box-shadow:none; transform:none;
}
.btn:disabled .arrow, .btn.is-disabled .arrow { color:var(--ink-400); transform:none; }
.btn-sm { padding:.65rem 1.1rem; font-size:.9rem; }
/* Let the longest CTA labels wrap instead of clipping on very narrow phones */
@media (max-width:380px) {
  .router .card .btn, .cta .hero-actions .btn { white-space:normal; text-align:center; }
}

/* Inline text link with arrow */
.link-arrow {
  display:inline-flex; align-items:center; gap:.4rem; font-weight:500;
  color:var(--cyan);
}
.link-arrow .arrow { transition:transform .2s var(--ease); }
.link-arrow:hover { color:var(--cyan-soft); }
.link-arrow:hover .arrow { transform:translateX(3px); }

/* ----------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------- */
.hero {
  position:relative; min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(46,147,230,.18),transparent 55%),
    var(--depth-fade);
}
.hero-sub { min-height:auto; padding-block:clamp(4rem,11vw,8rem) clamp(3rem,7vw,5rem); }
.hero-watermark {
  position:absolute; right:clamp(-180px,-6vw,-40px); top:50%;
  width:min(72vw,820px); height:auto; transform:translateY(-52%);
  opacity:.06;
  filter:invert(1) brightness(1.4) drop-shadow(0 0 60px rgba(55,226,255,.25));
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 55%,transparent 92%);
  animation:drift 22s ease-in-out infinite alternate;
  pointer-events:none; z-index:-1;
}
.hero-rays {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(168deg,rgba(143,240,255,.14) 0 6%,transparent 7% 100%),
    linear-gradient(150deg,rgba(46,147,230,.10) 0 3%,transparent 4% 100%);
  background-repeat:no-repeat; background-size:60% 130%,40% 130%;
  background-position:18% -20%,46% -20%; mix-blend-mode:screen;
  animation:sway 14s ease-in-out infinite alternate;
}
.hero-caustic {
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%,rgba(143,240,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 70% 60%,rgba(143,240,255,.35),transparent),
    radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 85% 25%,rgba(143,240,255,.4),transparent);
  background-size:600px 600px; animation:rise 26s linear infinite;
}
.hero-inner { position:relative; z-index:1; padding-block:var(--s-9); width:100%; }
.hero-inner h1 { margin:.2em 0 .4em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.hero-descend {
  position:absolute; left:50%; bottom:var(--s-5); transform:translateX(-50%);
  display:grid; justify-items:center; gap:6px; color:var(--ink-300);
  font:500 .7rem/1 var(--font-mono); letter-spacing:.24em; text-transform:uppercase;
}
.hero-descend svg { animation:bob 2.4s var(--ease) infinite; }
.hero-descend:hover { color:var(--cyan); }
@media (max-width:640px) {
  .hero-watermark { width:130vw; right:-35vw; opacity:.05; }
  .hero-descend { display:none; }
}

/* ----------------------------------------------------------------
   8. PROOF STRIP (above-the-fold credibility — graft from Clarity)
   ---------------------------------------------------------------- */
.proof {
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(3,1fr);
  margin-top:var(--s-8); padding-top:var(--s-6);
  border-top:1px solid var(--hairline);
}
.proof .stat { text-align:left; }
.stat-num {
  display:block;
  font:600 clamp(2.2rem,4.6vw,3.4rem)/1 var(--font-display);
  letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--cyan-soft),var(--ocean-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 38px rgba(55,226,255,.2);
}
.stat-num .suffix { -webkit-text-fill-color:var(--ocean-400); }
.stat-label { display:block; margin-top:.3rem; color:var(--ink-300); font-size:.95rem; max-width:24ch; }
@media (max-width:620px) {
  .proof { grid-template-columns:1fr; gap:var(--s-5); }
}

/* ----------------------------------------------------------------
   9. PILLAR / CAPABILITY CARDS
   ---------------------------------------------------------------- */
.grid { display:grid; gap:var(--s-5); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }

.card {
  position:relative; padding:var(--s-6); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--hairline); box-shadow:var(--shadow-card);
  overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.card::before { /* cyan sensor-sweep rim on hover */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(55,226,255,.6),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s; z-index:-1;
}
.card:hover { transform:translateY(-4px); border-color:transparent; box-shadow:var(--shadow-card),var(--glow-cyan); }
.card:hover::before { opacity:1; }
.card h3 { margin:0 0 var(--s-2); }
.card > p { color:var(--ink-300); font-size:.98rem; margin:0 0 var(--s-4); }

/* Capability list w/ sounding-line ticks (graft from Clarity) */
.caps { display:grid; gap:.55rem; margin-top:var(--s-4);
  border-top:1px solid var(--hairline-soft); padding-top:var(--s-4); }
.caps li {
  position:relative; padding-left:1.4rem; font-size:.92rem; color:var(--ink-200);
}
.caps li::before {
  content:""; position:absolute; left:0; top:.5em; width:7px; height:7px;
  border-radius:50%; background:var(--ocean-400);
  box-shadow:0 0 8px var(--ocean-400);
}

/* ----------------------------------------------------------------
   10. OUTCOME ROWS (Expand / Small-biz / Supply chain)
   ---------------------------------------------------------------- */
.outcomes { display:grid; gap:var(--s-4); }
.outcome {
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:var(--s-5); padding:var(--s-6);
  border:1px solid var(--hairline); border-radius:var(--r-md);
  background:rgba(255,255,255,.02); transition:border-color .3s,background .3s;
}
.outcome:hover { border-color:var(--ocean-600); background:rgba(46,147,230,.05); }
.outcome-body .fathom { margin-bottom:var(--s-3); }
.outcome-body h3 { margin:0 0 .35rem; }
.outcome-body p { margin:0; color:var(--ink-300); font-size:.96rem; max-width:60ch; }
.outcome .link-arrow { white-space:nowrap; }
@media (max-width:760px) {
  .outcome { grid-template-columns:1fr; }
  .outcome .link-arrow { grid-column:1; justify-self:start; }
}

/* ----------------------------------------------------------------
   11. STAND-ALONE STATS BLOCK
   ---------------------------------------------------------------- */
.stats {
  display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

/* ----------------------------------------------------------------
   12. OPERATORS (leadership)
   ---------------------------------------------------------------- */
.operators { display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.operator {
  position:relative; padding:var(--s-5); border-radius:var(--r-md);
  background:var(--abyss-800); border:1px solid var(--hairline);
  overflow:hidden; transition:border-color .3s,transform .3s var(--ease);
}
.operator::after {
  content:""; position:absolute; left:50%; bottom:-40%; width:120%; height:80%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,112,201,.18),transparent 70%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.operator:hover { transform:translateY(-3px); border-color:var(--ocean-600); }
.operator:hover::after { opacity:1; }
.operator-avatar {
  width:54px; height:54px; border-radius:var(--r-pill); display:grid;
  place-items:center; margin-bottom:var(--s-4);
  background:linear-gradient(145deg,var(--abyss-600),var(--abyss-700));
  border:1px solid var(--hairline);
  font:600 1.05rem/1 var(--font-display); color:var(--ink-100);
}
.operator h3 { font-size:1.1rem; margin:0 0 .2rem; }
.operator-role { color:var(--ink-300); font-size:.88rem; line-height:1.45; margin:0; }

/* ----------------------------------------------------------------
   12b. CULTURE METRICS + ROLE LIST (careers)
   ---------------------------------------------------------------- */
.metrics { display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.metric {
  padding:var(--s-5); border:1px solid var(--hairline); border-radius:var(--r-md);
  background:rgba(255,255,255,.02); transition:border-color .3s,transform .3s var(--ease);
}
.metric:hover { border-color:var(--ocean-600); transform:translateY(-2px); }
.metric .metric-key {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:var(--s-3);
}
.metric h3 { font-size:1.08rem; margin:0 0 .4rem; }
.metric p { margin:0; color:var(--ink-300); font-size:.92rem; }

.roles { display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.role {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) var(--s-5); border:1px solid var(--hairline);
  border-radius:var(--r-md); background:var(--abyss-800); color:var(--ink-100);
  transition:border-color .3s,background .3s;
}
.role:hover { border-color:var(--ocean-600); background:rgba(46,147,230,.06); color:var(--ink-100); }
.role h3 { font-size:1.05rem; margin:0; }
.role .arrow { color:var(--cyan); transition:transform .2s var(--ease); }
.role:hover .arrow { transform:translateX(3px); }
/* Temporarily disabled (applications paused) — keeps the look, removes the action */
.role.is-disabled { cursor:not-allowed; }
.role.is-disabled h3 { color:var(--ink-300); }
.role.is-disabled .arrow { color:var(--ink-400); }
.role.is-disabled:hover { border-color:var(--hairline); background:var(--abyss-800); }
.role.is-disabled:hover .arrow { transform:none; }
.roles-notice {
  display:flex; align-items:center; gap:.7rem; margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5); border:1px solid var(--hairline);
  border-radius:var(--r-md); background:rgba(255,255,255,.02);
  color:var(--ink-200); font-size:.95rem;
}
.roles-notice-dot {
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--ocean-400); box-shadow:0 0 10px rgba(46,147,230,.6);
}

/* ----------------------------------------------------------------
   13. ROUTER CARDS + CONTACT DETAILS
   ---------------------------------------------------------------- */
.router { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.router .card { display:flex; flex-direction:column; }
.router .card h3 { font-size:1.3rem; }
.router .card .btn { margin-top:auto; align-self:flex-start; }

.contact-grid { display:grid; gap:var(--s-6) var(--s-8);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.contact-item .eyebrow { margin-bottom:var(--s-2); }
.contact-item p,.contact-item a { font-size:1.05rem; color:var(--ink-100); margin:0; overflow-wrap:break-word; }
.contact-item a:hover { color:var(--cyan); }
.contact-item address { font-style:normal; color:var(--ink-100); line-height:1.6; }

/* ----------------------------------------------------------------
   14. CTA BLOCK
   ---------------------------------------------------------------- */
.cta {
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--ocean-600); border-radius:var(--r-lg);
  padding:clamp(2.5rem,6vw,4.5rem) var(--gutter);
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(0,112,201,.22),transparent 60%),
    linear-gradient(180deg,var(--abyss-700),var(--abyss-900));
  text-align:center;
}
.cta::before {
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(55,226,255,.5),transparent);
}
.cta h2 { margin:0 auto .6rem; max-width:18ch; }
.cta p { margin:0 auto var(--s-6); color:var(--ink-300); max-width:52ch; }
.cta .hero-actions { justify-content:center; margin-top:0; }

/* ----------------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  background:var(--abyss-900); border-top:1px solid var(--hairline);
  padding-block:var(--s-8) var(--s-6); position:relative; overflow:hidden;
}
.site-footer::before {
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(55,226,255,.4),transparent);
}
.footer-grid { display:grid; gap:var(--s-6); grid-template-columns:1.6fr repeat(3,1fr); align-items:start; }
.footer-brand .nav-brand { margin-bottom:var(--s-4); }
.footer-brand p { color:var(--ink-300); font-size:.92rem; max-width:34ch; }
.footer-tag { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-400); margin-bottom:var(--s-3); }
.footer-col h3 { font:600 .76rem/1 var(--font-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-400); margin:0 0 var(--s-4); }
.footer-col a,.footer-col p { color:var(--ink-300); font-size:.92rem; padding:.25rem 0;
  margin:0; display:block; transition:color .2s; overflow-wrap:break-word; }
.footer-col a:hover { color:var(--cyan); }
.footer-col address { font-style:normal; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3);
  margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--hairline);
  color:var(--ink-400); font-size:.84rem; }
.footer-bottom a { color:var(--ink-400); }
.footer-bottom a:hover { color:var(--cyan); }
@media (max-width:780px) { .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1 / -1; } }
@media (max-width:460px) { .footer-grid { grid-template-columns:1fr; } }

/* ----------------------------------------------------------------
   16. MOTION / REVEAL
   ---------------------------------------------------------------- */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s);
}
.reveal.is-visible { opacity:1; transform:none; }

@keyframes drift { from{transform:translateY(-52%) rotate(-1deg);} to{transform:translateY(-48%) rotate(1.5deg);} }
@keyframes sway  { from{background-position:14% -20%,42% -20%;} to{background-position:22% -16%,50% -16%;} }
@keyframes rise  { from{background-position:0 0;} to{background-position:0 -600px;} }
@keyframes bob   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

/* ----------------------------------------------------------------
   17. FOCUS / ACCESSIBILITY
   ---------------------------------------------------------------- */
:where(a,button,[tabindex],input,select,textarea):focus-visible {
  outline:2px solid var(--focus); outline-offset:3px; border-radius:4px;
}
[hidden] { display:none !important; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
  .hero-watermark,.hero-rays,.hero-caustic,.hero-descend svg { animation:none; }
}