/* ============================================================
   SSC — Safety & Security Consultants LLC
   Design system: "Tactical Command" — deep navy, electric blue
   ============================================================ */

:root {
  --bg: #04070d;
  --bg-2: #060c16;
  --bg-3: #0a1322;
  --surface: rgba(13, 23, 40, 0.55);
  --surface-solid: #0b1424;
  --line: rgba(97, 156, 255, 0.14);
  --line-strong: rgba(97, 156, 255, 0.3);
  --blue: #3d7bff;
  --cyan: #5ee0ff;
  --amber: #ffb547;
  --grad: linear-gradient(120deg, #3d7bff 0%, #5ee0ff 100%);
  --text: #eaf0fa;
  --muted: #96a3b9;
  --muted-2: #7e8ba3;
  --font-display: "Anton", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --nav-h: 76px;
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Motion scale. Built-in CSS easings are too weak to read as intentional.
     --ease-out for anything entering or responding to input (starts fast, so
     it FEELS faster than the same duration eased in), --ease-in-out for things
     moving across the screen. Durations: press feedback is the fastest thing
     on the page, scroll reveals the slowest, because one is a response to the
     user and the other is editorial. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 130ms;
  --t-hover: 220ms;
  --t-reveal: 620ms;
  --glow: 0 0 60px rgba(61, 123, 255, 0.28);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html { overflow-x: hidden; }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(61, 123, 255, 0.4); color: #fff; }

/* ---------- utilities ---------- */
.container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.container.wide { width: min(1380px, calc(100% - 48px)); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--grad);
  display: inline-block;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { font-size: clamp(34px, 5vw, 58px); margin-top: 18px; }
.section-head p { color: var(--muted); margin-top: 18px; font-size: 17px; max-width: 560px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* grain overlay */
.grain::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); }
}

/* ---------- buttons ---------- */
/* Every button transform is composed from these three variables rather than
   set directly. The magnetic-cursor script used to write button.style.transform,
   which is an inline style and therefore beat any :active rule in the cascade -
   so a pressed button could never respond. Now the script only writes --mag-x
   and --mag-y, hover writes --lift, and the press writes --press, so all three
   coexist instead of overwriting each other. */
.btn {
  --mag-x: 0px;
  --mag-y: 0px;
  --lift: 0px;
  --press: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transform: translate(var(--mag-x), calc(var(--mag-y) + var(--lift))) scale(var(--press));
  transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
  will-change: transform;
  position: relative;
}
/* The press is the one thing that must feel instantaneous: it is the interface
   confirming it heard the click. Snap down fast, and let the magnetic follow
   keep its own longer timing on release. */
.btn:active { --press: 0.97; transition-duration: var(--t-press); }
.btn svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-out); }

.btn-primary {
  background: var(--grad);
  color: #03060c;
  box-shadow: 0 8px 30px rgba(61, 123, 255, 0.35);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(13, 23, 40, 0.4);
  backdrop-filter: blur(8px);
}

/* Hover effects only where a real pointer exists. Touch devices synthesise
   hover on tap, so ungated :hover rules leave a button stuck in its hover
   state after a finger lifts. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(4px); }
  .btn-primary:hover { --lift: -2px; box-shadow: 0 14px 44px rgba(61, 123, 255, 0.5); }
  .btn-ghost:hover { border-color: var(--cyan); background: rgba(94, 224, 255, 0.08); --lift: -2px; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.4s, border-color 0.4s, height 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(4, 7, 13, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.nav-inner {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo img { height: 44px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  position: relative;
  padding: 6px 0;
  transition: color 0.3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-phone {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  transition: color 0.3s;
}
.nav-phone:hover { color: var(--cyan); }
.nav-cta .btn { padding: 12px 22px; font-size: 13px; }
/* Tap-to-call: on phones the header loses both the number and the CTA, and
   calling is how this audience actually converts. Icon-only so it fits
   beside the burger; the text number still serves wider screens. */
.nav-call { display: none; }
.nav-call svg { width: 20px; height: 20px; }
.mm-cta { display: none; }

.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-burger span {
  width: 18px; height: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(4, 7, 13, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a.mm-link {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 52px);
  text-transform: uppercase;
  color: var(--text);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 16px;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s, color 0.3s;
}
.mobile-menu.open a.mm-link { transform: translateY(0); opacity: 1; }
.mobile-menu a.mm-link:hover { color: var(--cyan); }
.mobile-menu a.mm-link i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  color: var(--cyan);
}
.mobile-menu .mm-contact { margin-top: 36px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; line-height: 2; }
.mobile-menu .mm-contact a { color: var(--cyan); overflow-wrap: anywhere; }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 65% 30%;
  transform: scale(1.08);
  filter: saturate(0.85) brightness(0.6);
}
/* Motion layer: the still hero photo stays the base (it is the LCP image and
   the only thing mobile ever downloads). js/script.js attaches the source to
   .hero-video and fades it in over the photo, but ONLY on wide viewports with
   motion allowed and no data-saver - so the video costs phones zero bytes.
   Same object-position as the photo so the fade holds its framing. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 30%;
  transform: scale(1.08);
  filter: saturate(0.85) brightness(0.6);
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.hero-video.is-live { opacity: 1; }
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.96) 0%, rgba(4, 7, 13, 0.82) 34%, rgba(4, 7, 13, 0.35) 70%, rgba(4, 7, 13, 0.55) 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 30%),
    linear-gradient(180deg, rgba(4, 7, 13, 0.6) 0%, transparent 24%);
}
.hero-ring {
  position: absolute;
  right: max(-40px, calc(50vw - 820px));
  top: 50%;
  transform: translateY(-54%);
  width: min(44vw, 600px);
  aspect-ratio: 1553 / 1695;
  z-index: -1;
  background: url("../assets/images/ssc-mark-white.svg") center / contain no-repeat;
  opacity: 0.15;
  filter: drop-shadow(0 0 70px rgba(61, 123, 255, 0.55));
  animation: ringPulse 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.11; transform: translateY(-54%) scale(1); }
  50% { opacity: 0.2; transform: translateY(-54%) scale(1.02); }
}

.hero-inner { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 60px 0 40px; }
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-size: clamp(52px, 9vw, 128px);
  max-width: 12ch;
}
.hero-sub {
  margin-top: 28px;
  max-width: 520px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* ---------- hero: wide composition (.hero-wide) ----------
   The stacked hero packed the headline, sub-copy and CTAs into one narrow
   column: 566px of content sitting inside a 1380px container (41% of the
   width) and 606px tall on a 900px-high screen. This variant spends the
   horizontal axis instead: a 2-line headline on a wider measure, then a
   hairline, then the sub-copy on a 62ch measure with the CTAs beneath it.
   The width is what does the work here, so the footprint still comes in well
   under the original WITHOUT editing the copy (the hero sentence is
   client-approved wording, so it gets a wider measure rather than a trim).
   Opt-in class: versions without it keep the original stacked hero. */
.hero-wide .hero-inner { padding: 52px 0 40px; }
.hero-wide h1 {
  font-size: clamp(52px, 7.6vw, 108px);
  max-width: 17ch;
  letter-spacing: -0.012em;
}
.hero-wide .hero-lead {
  max-width: 1140px;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--line);
}
.hero-wide .hero-sub { margin-top: 0; max-width: 62ch; }
.hero-wide .hero-ctas { margin-top: clamp(24px, 2.4vw, 32px); }

/* Laptop-height desktops (1440x900 and similar) pushed the hero CTAs below
   the fold: a 128px four-line headline plus the sub-paragraph ran past the
   viewport. Scale the hero type down where vertical room is short rather
   than shortening the copy, so tall screens keep the full-size hero. */
@media (min-width: 1025px) and (max-height: 940px) {
  .hero-inner { padding: 40px 0 32px; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero h1 { font-size: clamp(48px, 6.2vw, 92px); max-width: 14ch; }
  .hero-sub { margin-top: 20px; max-width: 560px; }
  .hero-ctas { margin-top: 28px; }
  /* The wide composition is already short, so it only needs a mild trim
     here - and it must restate max-width, which the rule above resets. */
  .hero-wide .hero-inner { padding: 34px 0 30px; }
  .hero-wide h1 { font-size: clamp(48px, 6.4vw, 88px); max-width: 17ch; }
  .hero-wide .hero-sub { margin-top: 0; max-width: 62ch; }
  .hero-wide .hero-ctas { margin-top: 24px; }
}

@media (max-width: 1024px) {
  .hero-wide .hero-lead { max-width: 640px; }
  .hero-wide h1 { max-width: 14ch; }
}

.hero-scroll {
  position: absolute;
  bottom: 120px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  writing-mode: vertical-rl;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* hero stat strip */
.hero-stats {
  border-top: 1px solid var(--line);
  background: rgba(4, 7, 13, 0.55);
  backdrop-filter: blur(14px);
  margin-top: clamp(48px, 6vw, 90px);
}
.hero-stats-inner {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 26px 28px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* CHILD combinator, not descendant. The number markup is
   `<b><span data-count>36</span></b>`, so a plain `.stat span` also matched the
   counter span nested inside <b> and overrode the 42px gradient numeral with
   11px dim mono - the four hero credibility stats were rendering as fine print.
   Label sizing raised from 11px/0.18em to 12.5px/0.12em: uppercase mono at wide
   tracking is the hardest combination to read at small sizes. */
.stat > span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- trust marquee ---------- */
.trust { padding: 56px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.trust-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 30px;
}
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  flex-shrink: 0;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee-track span {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(150, 163, 185, 0.75);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 64px;
  transition: color 0.3s;
}
.marquee-track span:hover { color: var(--text); }
.marquee-track span::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--blue);
  flex-shrink: 0;
}

/* ---------- cards / pillars ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s;
  will-change: transform;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 123, 255, 0.12), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--glow); }
.card:hover::before { opacity: 1; }

.pillar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.2em;
}
.pillar-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(61, 123, 255, 0.1);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px 0;
}
.pillar-icon svg { width: 24px; height: 24px; stroke: var(--cyan); }
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.card p { color: var(--muted); font-size: 15px; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
}
.card-link svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.card:hover .card-link svg { transform: translateX(5px); }

/* ---------- split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.split-contact { align-items: start; }
@media (min-width: 769px) {
  .split-contact { grid-template-columns: 1.35fr 1fr; }
}
.split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/4.6; filter: saturate(0.9); transition: transform 0.8s var(--ease); }
.split-media:hover img { transform: scale(1.04); }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 50%, rgba(4, 7, 13, 0.75) 100%);
}
.split-media .media-tag {
  position: absolute;
  bottom: 20px; left: 20px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(4, 7, 13, 0.7);
  border: 1px solid var(--line-strong);
  padding: 9px 14px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.split-content h2 { font-size: clamp(32px, 4.4vw, 52px); margin-top: 18px; }
.split-content > p { color: var(--muted); margin-top: 20px; font-size: 16.5px; }

.checklist { margin-top: 30px; display: grid; gap: 14px; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text);
  font-size: 15.5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 23, 40, 0.35);
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.checklist li:hover { border-color: var(--line-strong); transform: translateX(6px); }
.checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  background: rgba(94, 224, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  border: 1px solid rgba(94, 224, 255, 0.35);
}

/* ---------- video / media section ---------- */
.media-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
}
.media-col { display: grid; gap: 22px; align-content: start; }
.yt {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  cursor: pointer;
  aspect-ratio: 16/9;
}
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.4s, transform 0.7s var(--ease); }
.yt:hover img { opacity: 0.95; transform: scale(1.03); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.yt-play span {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(4, 7, 13, 0.6);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.4s;
}
.yt:hover .yt-play span { transform: scale(1.12); background: rgba(61, 123, 255, 0.35); box-shadow: var(--glow); }
.yt-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.yt-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  padding: 52px 16px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.yt-label i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7ee7ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.yt.small { aspect-ratio: 16/8.4; }
.media-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}
.hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.6);
  transform: scale(1.08);
}
@media (max-width: 768px) {
  .media-row2 { grid-template-columns: 1fr; }
}

/* ---------- process (8 steps) ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.35s, background 0.35s;
}
.step:hover { transform: translateY(-5px); border-color: var(--line-strong); background: rgba(13, 23, 40, 0.8); }
.step b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 42px;
}
.step h4 { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.step::after {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  right: 14px; top: 6px;
  font-family: var(--font-display);
  font-size: 54px;
  color: rgba(97, 156, 255, 0.1);
  transition: color 0.35s;
}
.step:hover::after { color: rgba(94, 224, 255, 0.28); }

/* ---------- testimonials ---------- */
.testi-wrap { position: relative; }
.testi-viewport { overflow: hidden; }
.testi-track { display: flex; transition: transform 0.65s var(--ease); }
.testi-slide { flex: 0 0 100%; padding: 0 4px; }
.testi-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  position: relative;
}
.testi-card::before {
  content: "“";
  font-family: var(--font-display);
  font-size: 90px;
  line-height: 1;
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: -20px;
}
.testi-card blockquote { font-size: clamp(17px, 2vw, 21px); line-height: 1.65; color: var(--text); }
.testi-card cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.testi-nav { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.testi-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(13, 23, 40, 0.5);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.testi-btn:hover { background: rgba(61, 123, 255, 0.2); border-color: var(--cyan); transform: scale(1.06); }
.testi-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.testi-dots { display: flex; align-items: center; gap: 8px; }
/* Dots are real buttons so they are focusable and announced; the visible
   pip stays 6px while the hit area meets the 24px target minimum. */
.testi-dots button {
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.testi-dots button::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  transition: all 0.3s;
}
.testi-dots button.on::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform: scale(1.3); }
.testi-pause .ic-play { display: none; }
.testi-pause[data-paused="true"] .ic-pause { display: none; }
.testi-pause[data-paused="true"] .ic-play { display: block; }

/* ---------- team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.team-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 30px 28px;
  transition: transform 0.5s var(--ease), border-color 0.35s, box-shadow 0.5s;
}
.team-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--glow); }
.team-avatar {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: #03060c;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
  overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 19px; font-weight: 700; }
.team-card .role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 6px 0 14px;
  display: block;
}
.team-card p { color: var(--muted); font-size: 14.5px; }
.team-card .creds {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.team-card .creds span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(13, 23, 40, 0.5);
}

/* ---------- founder feature ---------- */
.founder-media { position: relative; }
.founder-media img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  filter: saturate(0.92);
  width: 100%;
}
.founder-badge {
  position: absolute;
  bottom: -22px;
  right: -14px;
  background: rgba(6, 12, 22, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 18px 22px;
  backdrop-filter: blur(12px);
  box-shadow: var(--glow);
}
.founder-badge b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.founder-badge span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline { margin-top: 30px; display: grid; gap: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.timeline li:last-child { border-bottom: none; }
.timeline b { font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan); letter-spacing: 0.08em; font-weight: 600; }
.timeline span { color: var(--muted); font-size: 15px; }
.timeline span strong { color: var(--text); font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(80px, 9vw, 130px) 0;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(46vw, 440px);
  aspect-ratio: 1553 / 1695;
  background: url("../assets/images/ssc-mark-white.svg") center / contain no-repeat;
  opacity: 0.07;
  filter: drop-shadow(0 0 120px rgba(61, 123, 255, 0.55));
  pointer-events: none;
}
.cta-band h2 { font-size: clamp(38px, 6vw, 76px); max-width: 16ch; margin: 18px auto 0; }
.cta-band p { color: var(--muted); max-width: 520px; margin: 22px auto 0; font-size: 17px; }
.cta-band .hero-ctas { justify-content: center; }
.cta-phone {
  display: block;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
}
.cta-phone a { color: var(--cyan); }

/* ---------- footer ---------- */
.footer {
  padding: 70px 0 0;
  background: var(--bg-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
}
.footer-logo img { height: 52px; margin-bottom: 20px; }
.footer p, .footer li, .footer a { color: var(--muted); font-size: 14.5px; }
.footer h5 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}
.footer ul { display: grid; gap: 12px; }
.footer a { transition: color 0.3s; }
.footer a:hover { color: var(--cyan); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 12px; line-height: 1.5; }
.footer-contact b { color: var(--cyan); font-family: var(--font-mono); font-size: 12px; font-weight: 600; min-width: 52px; letter-spacing: 0.08em; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.footer-social a:hover { border-color: var(--cyan); background: rgba(94, 224, 255, 0.08); transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; fill: var(--muted); transition: fill 0.3s; }
.footer-social a:hover svg { fill: var(--cyan); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase; }
/* Build credit. Deliberately quiet: it sits at the same size and weight as the
   copyright line so it reads as a colophon rather than a second brand competing
   with the client's own footer. The mark carries the identity, the words stay
   small, and the whole thing lifts on hover. */
.footer-bottom .site-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color var(--t-hover) var(--ease-out), opacity var(--t-hover) var(--ease-out);
}
.footer-bottom .site-credit img {
  width: 17px;
  height: auto;
  opacity: 0.85;
  transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.footer-bottom .site-credit-name { font-weight: 600; }
.footer-bottom .site-credit:active { transform: scale(0.98); transition-duration: var(--t-press); }
@media (hover: hover) and (pointer: fine) {
  .footer-bottom .site-credit:hover img { opacity: 1; transform: scale(1.08); }
}
/* On phones the footer bar stacks; keep the credit on its own line, left-aligned
   with the copyright rather than stranded mid-row. */
@media (max-width: 640px) {
  .footer-bottom { justify-content: flex-start; }
}

/* ---------- interior page hero ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(70px, 9vw, 120px)) 0 clamp(56px, 7vw, 90px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero-bg img, .page-hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.8) brightness(0.55);
  transform: scale(1.05);
}
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.94) 0%, rgba(4, 7, 13, 0.78) 40%, rgba(4, 7, 13, 0.45) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(4, 7, 13, 0.25) 40%, rgba(4, 7, 13, 0.55) 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  right: max(24px, calc(50vw - 660px));
  top: 50%;
  transform: translateY(-46%);
  width: min(26vw, 330px);
  aspect-ratio: 1553 / 1695;
  background: url("../assets/images/ssc-mark-white.svg") center / contain no-repeat;
  opacity: 0.12;
  filter: drop-shadow(0 0 50px rgba(61, 123, 255, 0.45));
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(44px, 7.5vw, 96px); margin-top: 20px; max-width: 14ch; }
/* Headings that carry an authored line break need room for their longest line,
   or the 14ch cap wraps them again and the break lands somewhere else. Scoped
   to a class so the other page heroes keep their tighter measure. */
.page-hero h1.h1-split { max-width: 22ch; }
/* The break itself only applies where the first line actually fits. Below that
   the heading reflows naturally rather than breaking in a worse place - at
   375px the first line is wider than the column, so forcing it would produce
   a ragged three lines instead of a tidy three. */
.brk { display: none; }
@media (min-width: 460px) { .brk { display: inline; } }
.page-hero .lede { color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 640px; margin-top: 24px; }
.page-hero .lede strong { color: var(--text); }
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.78); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb i { font-style: normal; color: var(--cyan); margin: 0 8px; }

/* ---------- pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  /* Top padding reserves the .price-tag badge's row. The badge is absolutely
     positioned while the h3 is in flow, so without this they collide - which is
     exactly what happened when the badge was raised from 10px to 12px for
     legibility. Applied to ALL cards, not just the featured one, so the three
     titles and price rows stay on the same baseline. */
  padding: 64px 32px 38px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.35s, box-shadow 0.5s;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--glow); }
.price-card.featured { border-color: rgba(94, 224, 255, 0.45); background: linear-gradient(180deg, rgba(61, 123, 255, 0.1), rgba(13, 23, 40, 0.55)); }
.price-tag {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #03060c;
  background: var(--grad);
  padding: 6px 12px;
  border-radius: 100px;
  font-weight: 700;
}
.price-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: 0.03em; }
.price-card .price {
  margin: 22px 0 6px;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card .per { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.price-card ul { margin: 26px 0 32px; display: grid; gap: 12px; flex: 1; }
.price-card li { display: flex; gap: 12px; color: var(--muted); font-size: 14.5px; align-items: flex-start; }
.price-card li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ee0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.price-card .btn { width: 100%; }

/* ---------- forms ---------- */
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(30px, 4vw, 48px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(4, 7, 13, 0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396a3b9' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(94, 224, 255, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.form-note { font-size: 13px; color: var(--muted-2); margin-top: 16px; }
.form-success {
  display: none;
  margin-top: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(94, 224, 255, 0.4);
  background: rgba(94, 224, 255, 0.08);
  border-radius: 12px;
  color: var(--cyan);
  font-size: 14.5px;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  margin-top: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 12px;
  color: #dc2626;
  font-size: 14.5px;
}
.form-error.show { display: block; }
.form-error a { color: inherit; text-decoration: underline; }
.field-opt { color: var(--muted-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* contact info cards */
.info-cards { display: grid; gap: 18px; }
.info-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.info-card:hover { border-color: var(--line-strong); transform: translateX(6px); }
.info-card .ic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(61, 123, 255, 0.12);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-card .ic svg { width: 20px; height: 20px; stroke: var(--cyan); }
.info-card h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.info-card p, .info-card a { font-size: 15.5px; color: var(--text); font-weight: 500; }
.info-card a:hover { color: var(--cyan); }
.info-card small { display: block; color: var(--muted-2); font-size: 12.5px; margin-top: 3px; }

/* ---------- gallery strip ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-grid figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
}
.gallery-grid figure.tall { aspect-ratio: 3/4; }
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.8s var(--ease), filter 0.5s;
}
.gallery-grid figure:hover img { transform: scale(1.06); filter: saturate(1); }
.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 18px 14px;
  background: linear-gradient(0deg, rgba(4, 7, 13, 0.9), transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- objectives (training) ---------- */
.objectives {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  counter-reset: obj;
}
/* 11 objectives in a 2-column grid leaves the last one beside an empty cell.
   A previous pass spanned that final item across the row to close the block
   flush, but stretching one card to double width breaks the uniformity of the
   list - the odd item out reads as a different KIND of item rather than the
   eleventh of eleven. User's call (2026-08-05): keep every card identical and
   accept the empty cell. Do not reinstate the span. */
.objectives li {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 18px 20px 18px 64px;
  position: relative;
  color: var(--text);
  font-size: 15px;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.objectives li:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.objectives li::before {
  counter-increment: obj;
  content: counter(obj, decimal-leading-zero);
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

/* alert banner */
.alert-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid rgba(255, 181, 71, 0.35);
  background: rgba(255, 181, 71, 0.07);
  border-radius: var(--radius);
  padding: 20px 24px;
  color: var(--text);
  font-size: 15px;
}
.alert-note::before {
  content: "!";
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255, 181, 71, 0.18);
  border: 1px solid rgba(255, 181, 71, 0.5);
  color: var(--amber);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.alert-note strong { color: var(--amber); }

/* ---------- reveal system ---------- */
/* 620ms/22px rather than the original 900ms/36px: the longer throw read as
   sluggish once several sections were staggering in sequence, and a shorter
   distance keeps the text from visibly sliding under the reader's eye. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-l { transform: translateX(-28px); }
.reveal-r { transform: translateX(28px); }
.reveal-l.in, .reveal-r.in { transform: translateX(0); }

/* ---------- press feedback ----------
   Anything that behaves like a control acknowledges the press. Without it the
   interface feels like it did not hear the click, especially on touch where
   there is no hover state to confirm the target. Kept subtle (0.985-0.99 on
   large surfaces, 0.97 on buttons) so it reads as depression, not shrinking. */
.card, .price-card, .team-card, .step, .yt, .objectives li, .checklist li, .info-card {
  transition: transform var(--t-hover) var(--ease-out), border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover);
}
.yt:active, .card:active, .price-card:active, .team-card:active, .step:active {
  transform: scale(0.99);
  transition-duration: var(--t-press);
}
.testi-btn:active, .testi-dot:active, .nav-burger:active, .nav-call:active {
  transform: scale(0.94);
  transition-duration: var(--t-press);
}

/* ---------- media reveal ----------
   Photographs wipe up rather than fade: a clip-path inset costs nothing extra
   (it is composited like transform/opacity) and reads as the image arriving
   rather than the page still loading, which is what a plain opacity fade on a
   large photo tends to look like. Paired with a slight scale settle. */
.media-rise {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 900ms var(--ease-out), transform 1100ms var(--ease-out);
  transition-delay: var(--d, 0s);
}
.media-rise.in { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---------- lightbox ----------
   The gallery figures scale on hover, which promises they are interactive, so
   clicking one has to do something. Grid thumbnails are cropped to 4/3 by
   object-fit: cover, so the lightbox is also the only place the uncropped
   photograph is ever visible. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(4, 8, 16, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}
.lb.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.97);
  transition: transform 260ms var(--ease-out);
}
.lb.open .lb-figure { transform: scale(1); }
.lb-img {
  /* Never upscale: two of the source photos are only 640px wide and stretching
     them to fill a 1440px viewport just shows the reader the compression. */
  max-width: 100%;
  max-height: calc(100vh - clamp(120px, 18vw, 190px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  background: #0b1424;
}
.lb-cap {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lb-count { color: rgba(255, 255, 255, 0.55); }
.lb-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(12, 21, 38, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: transform var(--t-hover) var(--ease-out), background var(--t-hover), border-color var(--t-hover);
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:active { transform: scale(0.92); transition-duration: var(--t-press); }
.lb-prev { left: clamp(10px, 3vw, 34px); }
.lb-next { right: clamp(10px, 3vw, 34px); }
.lb-close { top: clamp(10px, 3vw, 28px); right: clamp(10px, 3vw, 34px); width: 46px; height: 46px; }
@media (hover: hover) and (pointer: fine) {
  .lb-btn:hover { background: rgba(29, 78, 216, 0.55); border-color: rgba(255, 255, 255, 0.5); }
}
/* Below the arrows' comfortable reach the controls move to the bottom edge so
   they never sit on top of the photograph on a phone. */
@media (max-width: 640px) {
  .lb-prev, .lb-next { top: auto; bottom: clamp(10px, 4vw, 24px); }
  .lb-prev { left: 22%; }
  .lb-next { right: 22%; }
  .lb-img { max-height: calc(100vh - 210px); }
}
/* The gallery figures become real controls, so they need a focus ring. */
.gallery-grid figure { cursor: zoom-in; }
.gallery-grid figure:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- page entry ----------
   Only the arrival is animated, never the departure: fading out on click would
   sit between the user's click and the browser navigating, which makes a site
   feel slower even when it is not.
   Done with @starting-style rather than a JS-toggled class on purpose. The
   usual `body { opacity: 0 }` + `document.body.classList.add('ready')` pattern
   leaves the entire page INVISIBLE if the script fails, is blocked, or errors
   earlier in the file. Here the resting state is opacity: 1, so a browser that
   does not support @starting-style (or has JS off) simply shows the page at
   once, which is the correct failure mode. */
@starting-style {
  body { opacity: 0; }
}
body { opacity: 1; transition: opacity 300ms var(--ease-out); }

/* Touch devices synthesise :hover on tap and leave it applied until the user
   taps somewhere else, so a lifted card stays lifted and a scaled thumbnail
   stays scaled. Neutralise the MOVEMENT on pointerless devices; the colour and
   border hovers are harmless and still give a moment of tap feedback. */
@media (hover: none), (pointer: coarse) {
  .card:hover, .team-card:hover, .price-card:hover, .step:hover,
  .objectives li:hover, .checklist li:hover, .info-card:hover,
  .footer-social a:hover, .testi-btn:hover,
  .split-media:hover img, .yt:hover img, .gallery-grid figure:hover img,
  .yt:hover .yt-play span, .card:hover .card-link svg, .btn:hover svg {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-ring, .grain::after { animation: none !important; }
  /* The hero load choreography and the patron marquee are motion too —
     without these the page still animates for anyone who asked it not to. */
  .hero [data-load] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
  .scroll-cue, .scroll-cue * { animation: none !important; }
  /* Reduced motion means less movement, not no feedback: the page still fades
     in and buttons still respond, they just stop travelling. */
  .media-rise { clip-path: none !important; transform: none !important; transition: none !important; }
  .btn { --mag-x: 0px !important; --mag-y: 0px !important; --lift: 0px !important; }
  .card:active, .price-card:active, .team-card:active, .step:active, .yt:active,
  .testi-btn:active, .testi-dot:active, .nav-burger:active, .nav-call:active { transform: none !important; }
}

/* hero load choreography */
.hero [data-load] {
  opacity: 0;
  transform: translateY(30px);
  animation: loadUp 1s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes loadUp { to { opacity: 1; transform: translateY(0); } }

/* ---------- cursor glow ---------- */
.cursor-glow {
  position: fixed;
  width: 480px; height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(closest-side, rgba(61, 123, 255, 0.07), transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
  opacity: 0;
}
body:hover .cursor-glow { opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .pillars-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-scroll { display: none; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-cta .btn { display: none; }
}

@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; }
  .split-media img { aspect-ratio: 16/11; }
  .hero-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .objectives { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(46px, 13vw, 72px); }
}

@media (max-width: 520px) {
  .container, .container.wide, .nav-inner, .hero-inner, .hero-stats-inner { width: calc(100% - 40px); }
  .pillars-grid, .team-grid, .process-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
  .nav-phone { display: none; }
  .nav-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--cyan);
  }
  .mm-cta { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 26px; }
  .founder-badge { right: 8px; bottom: -18px; padding: 14px 18px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
}

/* Phone rhythm. At 375x812 the hero CTAs ended at y=724, which still cleared
   the fold - but on a 667px-tall iPhone SE they fell below it. This tightens
   the gaps between hero elements (and takes one step off the headline and the
   button padding) to pull the primary CTA back above the fold on short
   phones. Deliberately NOT touched: the sub-copy's 16px/1.6 body setting, and
   the eyebrow, which needs two lines at this width - dropping its tracking
   far enough to fit one line would take it to ~10.5px, too small to read for
   a procurement audience. Buttons stay 52px, well clear of the 44px target. */
@media (max-width: 520px) {
  .hero-wide .hero-inner { padding: 26px 0 32px; }
  .hero-wide .hero-eyebrow { margin-bottom: 14px; }
  .hero-wide h1 { font-size: clamp(42px, 12vw, 64px); }
  .hero-wide .hero-lead {
    margin-top: 18px;
    padding-top: 18px;
  }
  .hero-wide .hero-ctas { margin-top: 20px; gap: 12px; }
  .hero-wide .hero-ctas .btn { padding-top: 13px; padding-bottom: 13px; }
}

/* ---------- accessibility: visible keyboard focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .yt:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}