/* ==========================================================================
   DigitalRepeal v2, shared base. Tokens, type, buttons, nav, section shells.
   Section-specific styles live in intro.css, crew.css, sections.css, form.css.
   Rules: animate only transform and opacity; every clickable has hover,
   focus-visible and active states; no em dashes in visible copy.
   The whole site is blue: deep blue sections, one electric brand blue as the
   accent (sky-500's hue pushed brighter), ice-to-sky gradient on headings.
   ========================================================================== */

:root {
  /* sky, carried over from the live site */
  --sky-50:      #eef6fd;
  --sky-100:     #dcebf7;
  --sky-200:     #c9dff0;
  --sky-300:     #a8cbe6;
  --sky-500:     #6d9cc4;
  --sky-700:     #2e5f8a;

  /* deep blues, the page itself. Sections alternate base and alt. */
  --blue-975:    #030b1d;          /* footer */
  --blue-950:    #06122a;          /* base sections */
  --blue-900:    #0b1f44;          /* alternate sections */
  --blue-850:    #0f2854;
  --blue-800:    #143266;

  /* the brand blue, derived from sky-500 / sky-700 and pushed electric */
  --blue-ice:    #eaf4ff;
  --blue-200:    #a9d3ff;
  --blue-300:    #8cc4ff;          /* accent text on the deep blues: eyebrows, links */
  --accent:      #5aa8ff;          /* brand blue */
  --accent-600:  #3d8fe6;
  --accent-700:  #2a72c4;
  --on-accent:   #041430;          /* text on the accent gradient, 5.5:1 at its darkest stop */
  --accent-metal: linear-gradient(180deg, #b4daff 0%, #5aa8ff 50%, #3d8fe6 100%);
  --ice-gradient: linear-gradient(180deg, #ffffff 0%, #d4e9ff 40%, #86bfff 100%);

  /* text on blue */
  --heading:     #ffffff;
  --text:        #e3eefa;          /* body copy, 14:1 on the base blue */
  --text-dim:    #b3c9e2;          /* secondary copy, 9:1 on the base blue */

  /* surfaces */
  --bg:          var(--blue-950);
  --bg-alt:      var(--blue-900);
  --bg-deep:     var(--blue-975);
  --glass:       rgba(120, 175, 240, .075);   /* cards and panels */
  --glass-hi:    rgba(120, 175, 240, .13);    /* selected / raised */
  --line:        rgba(168, 203, 230, .20);    /* sky hairline */
  --line-hi:     rgba(168, 203, 230, .40);

  /* layered, blue-tinted shadows (never flat) */
  --shadow-card: 0 1px 0 rgba(212, 233, 255, .07) inset, 0 2px 6px rgba(2, 8, 22, .35), 0 18px 36px -20px rgba(2, 8, 22, .85), 0 36px 72px -44px rgba(61, 143, 230, .45);
  --shadow-lift: 0 1px 0 rgba(212, 233, 255, .10) inset, 0 4px 10px rgba(2, 8, 22, .4), 0 26px 48px -20px rgba(2, 8, 22, .9), 0 48px 90px -40px rgba(90, 168, 255, .55);
  --glow-accent: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 24px -8px rgba(90, 168, 255, .65), 0 0 0 1px rgba(90, 168, 255, .22);
  --glow-accent-hi: 0 14px 36px -10px rgba(90, 168, 255, .9), 0 0 0 1px rgba(140, 196, 255, .35);

  /* legacy names. crew.css and intro.css (outside this pass) still read
     these, so they point at the blues instead of the old copper and cream. */
  --navy-950:    var(--blue-950);
  --navy-900:    var(--blue-900);
  --navy-800:    var(--blue-850);
  --navy-700:    var(--blue-800);
  --porcelain:   var(--sky-50);
  --paper:       var(--sky-50);
  --copper-hi:   var(--blue-200);
  --copper:      var(--accent);
  --copper-deep: var(--accent-600);
  --copper-ink:  #1d5aa6;          /* blue text for the one light tooltip in crew.css */
  --copper-metal: var(--accent-metal);
  --glow-copper: var(--glow-accent);
  --ink:         #14243a;          /* dark text, only on that light tooltip */
  --ink-dim:     #4f5a6b;
  --dark-bg:     var(--bg);
  --dark-card:   var(--glass);
  --dark-line:   var(--line);
  --shadow-dark: var(--shadow-card);
  --shadow-light: 0 1px 1px rgba(2, 8, 22, .12), 0 10px 24px -12px rgba(46, 95, 138, .45), 0 28px 56px -32px rgba(2, 8, 22, .6);

  /* type */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 64px;
  --radius: 18px;
  --radius-sm: 12px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(90, 168, 255, .25);
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: var(--heading); }
p { margin: 0; }

/* the italic heading accent: ice to sky gradient text */
h1 em, h2 em, h3 em, .metal-em {
  font-style: italic;
  color: var(--blue-200); /* fallback where background-clip text is missing */
  background: var(--ice-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .06em; /* italic overhang */
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent-metal); color: var(--on-accent); font-weight: 500; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); outline: 2px solid var(--blue-300); outline-offset: 3px; }
.skip:hover { box-shadow: var(--glow-accent-hi); }
.skip:active { transform: translateY(0) scale(.97); }

/* ---------- eyebrow + section heads ---------- */
.eyebrow {
  font-family: var(--f-body); font-weight: 500;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 14px;
}
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head h2 { font-size: clamp(34px, 4.6vw, 58px); }
.sec-sub { margin-top: 16px; font-size: clamp(16px, 1.3vw, 18.5px); color: var(--text-dim); max-width: 64ch; }

/* ---------- sections: two deep blues alternate, each with a soft glow ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sec {
  position: relative; padding: clamp(80px, 11vw, 150px) 0; scroll-margin-top: calc(var(--nav-h) + 8px);
  background-color: var(--bg); color: var(--text);
  border-top: 1px solid rgba(168, 203, 230, .07);
}
.sec--base {
  background-color: var(--bg);
  background-image:
    radial-gradient(55% 42% at 8% 0%, rgba(61, 143, 230, .11), transparent 70%),
    radial-gradient(45% 38% at 100% 100%, rgba(46, 95, 138, .20), transparent 70%);
}
.sec--alt {
  background-color: var(--bg-alt);
  background-image:
    radial-gradient(60% 48% at 90% 0%, rgba(90, 168, 255, .13), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(46, 95, 138, .28), transparent 70%);
}

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-body); font-weight: 500; font-size: 15.5px; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }

/* primary: blue gradient with a glow. The brighter hover glow is a pseudo
   element fading in, so only opacity animates. */
.btn-primary {
  background: var(--accent-metal) border-box; color: var(--on-accent);
  box-shadow: var(--glow-accent);
}
.btn-primary::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--glow-accent-hi);
  opacity: 0; transition: opacity .18s var(--ease-out);
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 4px 12px -6px rgba(90, 168, 255, .6); }

/* ghost: sky hairline */
.btn-ghost { border-color: rgba(168, 203, 230, .45); color: var(--sky-100); background: rgba(168, 203, 230, .06); }
.btn-ghost:hover { border-color: var(--blue-300); color: #fff; background: rgba(90, 168, 255, .12); }
.btn-ghost:active { background: rgba(90, 168, 255, .18); }
.btn-small { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }

/* ---------- brand wordmark ---------- */
.brand, .intro-brand { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; }
.brand .ao, .intro-brand .ao { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--blue-200); }
.brand .word, .intro-brand .word { font-family: var(--f-body); font-weight: 500; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--sky-100); }
.site-nav .brand { padding: 5px 0; } /* 44px tall tap target */
.brand:hover .ao, .intro-brand:hover .ao { color: #fff; }
.brand:active, .intro-brand:active { opacity: .85; }
.brand:focus-visible, .intro-brand:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 5px; border-radius: 6px; }

/* ---------- nav ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--gutter);
  background: rgba(6, 18, 42, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -22px rgba(2, 8, 22, .9);
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.site-nav[data-state="hidden"] { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 13px; border-radius: 999px;
  color: var(--sky-100); text-decoration: none; font-size: 14px; font-weight: 400; white-space: nowrap;
  transition: transform .18s var(--ease-out);
}
.nav-list a:hover { background: rgba(168, 203, 230, .10); color: #fff; }
.nav-list a:active { transform: scale(.97); }
.nav-list a:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.nav-list a[aria-current="true"] { color: #fff; background: rgba(90, 168, 255, .16); box-shadow: 0 0 0 1px rgba(140, 196, 255, .32) inset; }
.nav-list a.nav-cta { background: var(--accent-metal) border-box; color: var(--on-accent); font-weight: 500; margin-left: 4px; box-shadow: var(--glow-accent); }
.nav-list a.nav-cta:hover { color: var(--on-accent); box-shadow: var(--glow-accent-hi); }
.nav-list a.nav-cta[aria-current="true"] { color: var(--on-accent); box-shadow: var(--glow-accent), 0 0 0 2px rgba(234, 244, 255, .55); }
.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px;
    border-radius: 999px; border: 1px solid rgba(168, 203, 230, .35); background: rgba(168, 203, 230, .08);
    color: var(--sky-100); cursor: pointer; font-size: 14px;
    transition: transform .18s var(--ease-out);
  }
  .nav-toggle:hover { border-color: var(--blue-300); color: #fff; }
  .nav-toggle:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
  .nav-toggle:active { transform: scale(.97); }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; position: relative;
    transition: transform .25s var(--ease-out), opacity .2s;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5px; } .nav-toggle-bars::after { top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }
  .nav-list {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 22px;
    background: rgba(6, 18, 42, .97);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(2, 8, 22, .95);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease-out), opacity .2s;
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
  }
  .nav-list.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-list a { min-height: 48px; font-size: 16px; padding: 10px 14px; }
  .nav-list a.nav-cta { margin: 8px 0 0; justify-content: center; }
}

/* ---------- motion toggle (WCAG 2.2.2) ---------- */
.motion-toggle {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(168, 203, 230, .35);
  background: rgba(6, 18, 42, .8); color: var(--sky-100);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -14px rgba(2, 8, 22, .9);
  font-size: 13px; cursor: pointer;
  transition: transform .18s var(--ease-out), opacity .3s;
}
.motion-toggle:hover { border-color: var(--blue-300); color: #fff; transform: translateY(-1px); }
.motion-toggle:active { transform: scale(.97); }
.motion-toggle:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
.mt-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-toggle[aria-pressed="true"] .mt-icon { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary::after, .nav-list a, .nav-toggle, .motion-toggle, .skip { transition: none; }
  .btn:hover, .btn:active, .motion-toggle:hover { transform: none; }
}