/* ============================================================
   V4 — DAYLIGHT AUTHORITY
   Light corporate-premium: white space, deep navy, electric blue
   (ref: ECUSSEG security-company pin)
   ============================================================ */

:root {
  --bg: #f4f6fa;
  --bg-2: #eaeef6;
  --bg-3: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --line: rgba(11, 37, 69, 0.1);
  --line-strong: rgba(29, 78, 216, 0.35);
  --blue: #1d4ed8;
  --cyan: #0b66ff;
  --amber: #b45309;
  --grad: linear-gradient(115deg, #1d4ed8 0%, #0ea5e9 100%);
  --text: #0c1526;
  --muted: #51617c;
  /* #64748b computed to 4.55:1 on the light surfaces - technically AA, but it
     is only ever used for small uppercase mono (form labels, .per, field hints)
     where thin antialiased strokes never reach full colour density, so the
     perceived contrast is lower than the number suggests. Darkened to ~5.2:1.
     In v4 this token only lands on light surfaces; the dark-surface uses are
     all overridden below. */
  --muted-2: #5b6b85;
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --radius: 12px;
  --radius-lg: 18px;
  --glow: 0 24px 60px rgba(11, 37, 69, 0.12);
}

body { background: var(--bg); color: var(--text); }
.grain::after { display: none; }
::selection { background: rgba(29, 78, 216, 0.2); color: #0c1526; }

.h-display { font-weight: 700; letter-spacing: 0.005em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; }

/* Section eyebrows sit on the light page, where --cyan (#0b66ff) measured
   4.45:1 at 12px - just under AA. --blue is the same family and clears 6.2:1.
   The dark-context eyebrows (.hero, .page-hero, .cta-band) are more specific
   and keep their light tints. */
.eyebrow { color: #1d4ed8; }
/* On the dark photo tag the opposite problem: #0b66ff on a near-black plate is
   a dark-on-dark pairing. Same light tint the other dark surfaces use. */
.split-media .media-tag { color: #7cc0ff; }

/* nav — always light glass so dark links stay legible over the photo hero */
.nav, .nav.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-links a { color: #51617c; }
.nav-links a:hover, .nav-links a.active { color: #0c1526; }
.nav-phone { color: #51617c; }
.nav-phone:hover { color: #1d4ed8; }
.nav-burger { border-color: rgba(11, 37, 69, 0.2); }
.nav-burger span { background: #0c1526; }
.mobile-menu { background: rgba(244, 246, 250, 0.98); }
.mobile-menu a.mm-link { color: #0c1526; border-bottom-color: var(--line); }
.mobile-menu a.mm-link i, .mobile-menu .mm-contact a { color: #1d4ed8; }
.mobile-menu .mm-contact { color: #51617c; }

/* hero: dark photo hero on a light page (ECUSSEG pattern) */
.hero { min-height: 92svh; }
.hero-bg img, .hero-video { filter: saturate(0.85) brightness(0.62); }
/* The hairline splitting hero copy from the CTA row sits on the photo, so it
   needs a light stroke rather than the light-theme --line token. */
.hero-wide .hero-lead { border-top-color: rgba(255, 255, 255, 0.22); }
.hero-bg::after {
  background:
    linear-gradient(90deg, rgba(7, 16, 32, 0.93) 0%, rgba(7, 16, 32, 0.72) 40%, rgba(7, 16, 32, 0.28) 78%, rgba(7, 16, 32, 0.45) 100%),
    linear-gradient(0deg, rgba(7, 16, 32, 0.55) 0%, transparent 26%),
    linear-gradient(180deg, rgba(7, 16, 32, 0.5) 0%, transparent 24%);
}
.hero .eyebrow { color: #7cc0ff; }
.hero h1 { color: #ffffff; }
.hero-sub { color: rgba(255, 255, 255, 0.82); }
.hero-sub strong { color: #ffffff; }
.hero-ring { display: block; opacity: 0.16; filter: drop-shadow(0 0 60px rgba(14, 165, 233, 0.55)); }
/* With the hero photo now moving, a 16%-opacity crest over the brightest part
   of the frame competes with the motion and muddies the operators behind it.
   Pull it back and push it further right so it reads as a watermark again.
   ringPulse animates opacity and animated values beat normal declarations, so
   the softer pulse needs its own keyframe. The static opacity below is not
   redundant: prefers-reduced-motion sets animation:none, and without it the
   crest would snap back to the base 0.16 for exactly those users. */
.hero-wide .hero-ring {
  opacity: 0.09;
  right: max(-90px, calc(50vw - 700px));
  width: min(38vw, 520px);
  animation-name: ringPulseSoft;
}
@keyframes ringPulseSoft {
  0%, 100% { opacity: 0.07; transform: translateY(-54%) scale(1); }
  50% { opacity: 0.11; transform: translateY(-54%) scale(1.02); }
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--grad);
  z-index: 1;
}
.hero-scroll { color: rgba(255, 255, 255, 0.6); }
/* The ghost CTA sits on the moving plate, where the background luminance now
   changes frame to frame. Its default rgba(255,255,255,.08) fill LIGHTENS what
   is behind it, which pushed the 15px/600 label to 4.24:1 on the brighter
   frames (AA body needs 4.5:1). A dark glass fill, the same language as
   .hero-stats, makes the label independent of whatever the video is doing. */
.hero-wide .hero-ctas .btn-ghost {
  background: rgba(7, 16, 32, 0.45);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-stats { background: rgba(7, 16, 32, 0.75); backdrop-filter: blur(14px); border-top-color: rgba(255, 255, 255, 0.12); }
/* Child combinator here too, or this re-tints the gradient number span inside
   <b> and paints it flat white. 0.6 alpha was 4.4:1 over the strip; 0.78 clears
   AA with room to spare on 12.5px text. */
.hero-stats .stat > span { color: rgba(255, 255, 255, 0.78); }
/* The page gradient (#1d4ed8 -> #0ea5e9) is tuned for the LIGHT page, but this
   strip is dark navy. background-clip:text scales the gradient to each element's
   own box, so a 2-character number like "14" only ever renders the dark start
   and never reaches the light end: measured 1.03:1. Lifted tints of the same
   hues, so both ends of the ramp clear AA on navy no matter how short the
   number is.
   Use background-IMAGE, not the `background` shorthand: the shorthand resets
   background-clip to border-box, and the number then renders as a solid filled
   rectangle instead of gradient-clipped text. */
.hero-stats .stat b {
  background-image: linear-gradient(115deg, #60a5fa 0%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-stats .stat { border-left-color: rgba(255, 255, 255, 0.12); }

/* interior page heroes stay dark-photo; isolate so the photo (z -2) paints above this bg */
.page-hero { background: #071020; isolation: isolate; }
.page-hero-bg img { filter: saturate(0.85) brightness(0.5); }
.page-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(7, 16, 32, 0.94) 0%, rgba(7, 16, 32, 0.72) 45%, rgba(7, 16, 32, 0.42) 100%),
    linear-gradient(0deg, rgba(7, 16, 32, 0.85) 0%, transparent 45%);
}
.page-hero h1 { color: #fff; }
.page-hero .lede { color: rgba(255, 255, 255, 0.82); }
.page-hero .lede strong { color: #fff; }
.page-hero .eyebrow, .breadcrumb a, .breadcrumb { color: rgba(255, 255, 255, 0.82); }
.breadcrumb i { color: #7cc0ff; }
.page-hero::before { filter: drop-shadow(0 0 50px rgba(14, 165, 233, 0.5)); opacity: 0.14; }

/* buttons */
.btn { border-radius: 10px; }
.btn-primary { background: var(--grad); color: #ffffff; box-shadow: 0 10px 26px rgba(29, 78, 216, 0.35); }
.btn-primary:hover { box-shadow: 0 16px 36px rgba(29, 78, 216, 0.45); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: rgba(255, 255, 255, 0.08); }
.section .btn-ghost, .footer .btn-ghost { border-color: rgba(11, 37, 69, 0.25); color: #0c1526; background: #fff; }
.section .btn-ghost:hover { border-color: #1d4ed8; background: rgba(29, 78, 216, 0.05); }
.cta-band .btn-ghost { border-color: rgba(11, 37, 69, 0.25); color: #0c1526; background: transparent; }

/* cards → white with shadow */
.card, .price-card, .team-card, .testi-card, .form-card, .info-card, .step {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.06);
}
.card:hover, .price-card:hover, .team-card:hover, .step:hover { border-color: rgba(29, 78, 216, 0.3); box-shadow: 0 24px 54px rgba(11, 37, 69, 0.13); background: #fff; }
.card::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(29, 78, 216, 0.07), transparent 65%); }
.card p, .team-card p, .price-card li { color: #51617c; }
/* The base .price-card.featured rule (specificity 0,2,0) applies the DARK
   theme's gradient and beats the v4 card override (0,1,0), so the $45 card -
   the primary conversion card on this page - rendered as a grey wash on a light
   page and dropped its .per line to 2.15:1. Light-theme tint instead. */
.price-card.featured {
  background: linear-gradient(180deg, #ffffff 0%, #e9f0ff 100%);
  border-color: rgba(29, 78, 216, 0.38);
}
.pillar-icon { background: rgba(29, 78, 216, 0.08); border-color: rgba(29, 78, 216, 0.25); }
.pillar-icon svg { stroke: #1d4ed8; }
.pillar-num, .step b, .team-card .role, .testi-card cite, .card-link { color: #1d4ed8; }
.yt-label i { color: #7cc0ff; }
.step::after { color: rgba(29, 78, 216, 0.1); }
.step:hover::after { color: rgba(29, 78, 216, 0.3); }
.team-avatar { color: #fff; }
.team-card .creds span { background: #f4f6fa; border-color: var(--line); color: #51617c; }

.checklist li {
  background: #ffffff;
  border-color: var(--line);
  color: #0c1526;
  box-shadow: 0 6px 18px rgba(11, 37, 69, 0.05);
}
.checklist li::before { background-color: rgba(29, 78, 216, 0.08); border-color: rgba(29, 78, 216, 0.35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.price-card li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.objectives li { background: #fff; border-color: var(--line); color: #0c1526; box-shadow: 0 6px 18px rgba(11, 37, 69, 0.05); }
.objectives li::before { color: #1d4ed8; }
.alert-note { background: rgba(180, 83, 9, 0.06); border-color: rgba(180, 83, 9, 0.3); color: #0c1526; }
.alert-note strong { color: #8a3f07; }
.alert-note::before { color: #b45309; border-color: rgba(180, 83, 9, 0.4); background: rgba(180, 83, 9, 0.1); }

/* sections that were dark navy stripes stay subtle */
.section[style*="--bg-2"] { background: var(--bg-2) !important; }

/* trust marquee */
.trust { border-bottom-color: var(--line); }
.trust-label { color: #5f6f89; }
.marquee-track span { color: rgba(12, 21, 38, 0.74); }
.marquee-track span:hover { color: #0c1526; }
.marquee-track span::after { background: #1d4ed8; box-shadow: none; }

/* stats on light contexts */
.stat b { -webkit-text-fill-color: transparent; }

/* media */
.yt { background: #071020; box-shadow: 0 14px 34px rgba(11, 37, 69, 0.15); }
.yt-play span { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }
.yt:hover .yt-play span { background: rgba(29, 78, 216, 0.75); box-shadow: 0 0 40px rgba(29, 78, 216, 0.4); }

/* forms */
.field input, .field textarea, .field select { background: #f8fafd; border-color: var(--line); color: #0c1526; }
.field input::placeholder, .field textarea::placeholder { color: #8494ad; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); }
.field label { color: #51617c; }
.form-success { background: rgba(29, 78, 216, 0.06); border-color: rgba(29, 78, 216, 0.3); color: #1d4ed8; }
.info-card .ic { background: rgba(29, 78, 216, 0.08); border-color: rgba(29, 78, 216, 0.25); }
.info-card .ic svg { stroke: #1d4ed8; }
.info-card h4 { color: #5f6f89; }
.info-card p, .info-card a { color: #0c1526; }

/* gallery */
.gallery-grid figure { box-shadow: 0 12px 30px rgba(11, 37, 69, 0.1); }
.gallery-grid figcaption { color: #cfe3ff; }

/* timeline */
.timeline b { color: #1d4ed8; }
.timeline span { color: #51617c; }
.timeline span strong { color: #0c1526; }
.founder-badge { background: #ffffff; border-color: var(--line); box-shadow: 0 20px 50px rgba(11, 37, 69, 0.15); }
.founder-badge span { color: #5f6f89; }

/* CTA band → navy block */
.cta-band { background: #071020; border-color: #071020; }
.cta-band h2, .cta-band .h-display { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.72); }
.cta-band .eyebrow { color: #7cc0ff; }
.cta-band::before { filter: drop-shadow(0 0 120px rgba(14, 165, 233, 0.6)); opacity: 0.09; }
.cta-band .btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* testimonial quote mark */
.testi-card::before { -webkit-text-fill-color: transparent; }
.testi-card blockquote { color: #0c1526; }
.testi-btn { background: #fff; border-color: var(--line); color: #0c1526; box-shadow: 0 6px 16px rgba(11, 37, 69, 0.08); }
.testi-btn:hover { background: rgba(29, 78, 216, 0.08); border-color: #1d4ed8; }
.testi-dots i { background: #c2cddd; }
.testi-dots i.on { background: #1d4ed8; box-shadow: none; }

/* footer → deep navy */
.footer { background: #071020; }
.footer p, .footer li, .footer a { color: #93a5c2; }
.footer h5 { color: #ffffff; }
.footer a:hover { color: #7cc0ff; }
.footer-contact b { color: #7cc0ff; }
.footer-social a { border-color: rgba(255, 255, 255, 0.15); }
.footer-social svg { fill: #93a5c2; }
.footer-social a:hover { border-color: #7cc0ff; background: rgba(124, 192, 255, 0.08); }
.footer-social a:hover svg { fill: #7cc0ff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }
.footer-bottom p { color: #93a5c2; }
.footer-bottom a { color: #7cc0ff !important; }
/* The credit is a link, so the rule above would tint it the same blue as the
   footer's other links and make it shout. Keep it at the copyright's weight and
   let it brighten to white on hover instead.
   Needs .footer-bottom in the selector: `.footer-bottom a` is (0,1,1) and a
   bare `.site-credit` is only (0,1,0), so with both marked !important the blue
   link rule wins on specificity and the credit shouts. */
.footer-bottom .site-credit { color: #93a5c2 !important; }
.footer-bottom .site-credit:hover { color: #ffffff !important; }

/* ============================================================
   DARK SECTIONS — navy interludes that break up the light page.
   .section-dark        = deep navy band (matches .cta-band / .footer #071020)
   .section-dark.section-photo = same, backed by a full-bleed photo + scrim.
   The photo layer sits at z-index:-1, so the section MUST isolate or the
   image paints over the page background (same trap as .page-hero).
   ============================================================ */
.section-dark {
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(29, 78, 216, 0.30), transparent 62%),
    radial-gradient(700px 420px at 0% 110%, rgba(14, 165, 233, 0.12), transparent 60%),
    #071020;
  isolation: isolate;
  /* base text colour so nothing can inherit the light page's navy ink */
  color: #f4f6fa;
}
/* Crest watermark on plain navy bands only — a photo section is already busy. */
.section-dark:not(.section-photo)::before {
  content: "";
  position: absolute;
  right: max(-70px, calc(50vw - 720px));
  top: 50%;
  transform: translateY(-50%);
  width: min(30vw, 400px);
  aspect-ratio: 1553 / 1695;
  background: url("../assets/images/ssc-mark-white.svg") center / contain no-repeat;
  opacity: 0.05;
  filter: drop-shadow(0 0 90px rgba(14, 165, 233, 0.5));
  pointer-events: none;
}
.section-photo .section-photo-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.section-photo .section-photo-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.42);
}
.section-photo .section-photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 16, 32, 0.94) 0%, rgba(7, 16, 32, 0.7) 45%, rgba(7, 16, 32, 0.52) 100%),
    linear-gradient(0deg, rgba(7, 16, 32, 0.88) 0%, transparent 32%, transparent 68%, rgba(7, 16, 32, 0.88) 100%);
}

/* type on navy */
.section-dark .section-head h2,
.section-dark .split-content h2,
.section-dark .h-display { color: #ffffff; }
.section-dark .section-head p { color: rgba(255, 255, 255, 0.76); }
.section-dark .split-content > p { color: rgba(255, 255, 255, 0.76); }
.section-dark .eyebrow { color: #7cc0ff; }
/* The page gradient starts at #1d4ed8, which vanishes on navy (same failure as
   the hero stats): lifted ramp, and background-IMAGE + restated clip because
   the `background` shorthand resets background-clip to border-box. */
.section-dark .grad-text {
  background-image: linear-gradient(115deg, #60a5fa 0%, #7dd3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* components on navy */
.section-dark .checklist li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.section-dark .checklist li::before {
  background-color: rgba(125, 211, 252, 0.14);
  border-color: rgba(125, 211, 252, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.section-dark .objectives li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
}
.section-dark .objectives li::before { color: #7dd3fc; }
.section-dark .timeline li { border-bottom-color: rgba(255, 255, 255, 0.12); }
.section-dark .timeline b { color: #7dd3fc; }
.section-dark .timeline span { color: rgba(255, 255, 255, 0.72); }
.section-dark .timeline span strong { color: #ffffff; }
.section-dark .split-media { border-color: rgba(255, 255, 255, 0.16); }
.section-dark .gallery-grid figure { border-color: rgba(255, 255, 255, 0.16); }
.section-dark .marquee-track span { color: rgba(255, 255, 255, 0.8); }
.section-dark .marquee-track span:hover { color: #ffffff; }
.section-dark .marquee-track span::after { background: #7dd3fc; }
/* ghost button: the light-theme `.section .btn-ghost` paints it white-on-white
   here, so restate the hero's dark-glass language */
.section.section-dark .btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
.section.section-dark .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* cursor glow off on light */
.cursor-glow { display: none; }

/* Anchored footer deep-links: clear the fixed nav */
#atst, #assessments { scroll-margin-top: 96px; }

/* Hero copy sat tight under the nav — give it breathing room (user request 8/06).
   Short-viewport tier stays smaller so the CTA row keeps clearing the fold. */
@media (min-width: 1025px) {
  .hero-wide .hero-inner { padding-top: 108px; }
}
@media (min-width: 1025px) and (max-height: 940px) {
  .hero-wide .hero-inner { padding-top: 88px; }
}