/* ============================================================
   TECH GUARD — techguard.io v2
   Quiet Fortification. Carbon base. Silver glow accent.
   Built on brand/tokens.css ladder.
   ============================================================ */

@import url('../brand/tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Pure black override — site base is absolute black (#000000).
   Everything referencing --tg-carbon inherits this. */
:root {
  --tg-carbon: #000000;

  /* ── Readability overrides ──────────────────────────────────
     Lift body and subtext greys much closer to white, and raise
     the muted/secondary tones so nothing reads as dim grey. */
  --tg-text-secondary: #E4E7EA;   /* body copy — was brushed #B8BDC4 */
  --tg-text-muted:     #C7CBD0;   /* captions/subtext — was aluminum #7C828A */
  --tg-brushed:        #E4E7EA;   /* primary body text on dark */
  --tg-aluminum:       #C7CBD0;   /* muted text, captions */
  --tg-steel:          #9AA0A7;   /* secondary/eyebrow text — lifted from #4A5057 */

  /* ── Subtext sizing bump (one step larger, readable) ──────── */
  --tg-text-2xs: 0.75rem;    /* 12px (was 11) — micro labels */
  --tg-text-xs:  0.8125rem;  /* 13px (was 12) — captions, eyebrows */
  --tg-text-sm:  0.9375rem;  /* 15px (was 14) — UI text, card body */
  --tg-text-base:1.0625rem;  /* 17px (was 16) — body */
  --tg-text-md:  1.1875rem;  /* 19px (was 18) — lead paragraph */
}

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   CROSS-PLATFORM NORMALIZATION
   The site was tuned on macOS; these rules make scale, type
   rendering, and chrome consistent on Windows/Linux desktops too.
   ============================================================ */
html {
  scroll-behavior: smooth;
  /* Lock against mobile/desktop text inflation; keep zoom honest. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Reserve scrollbar space so Windows' opaque bar never shifts layout. */
  scrollbar-gutter: stable;
  /* Firefox thin dark scrollbar to match the all-black aesthetic. */
  scrollbar-width: thin;
  scrollbar-color: var(--tg-iron) transparent;
}
body {
  margin: 0;
  background: var(--tg-carbon);
  overflow-x: hidden;
  /* Consistent text weight across renderers. Windows (no -webkit
     smoothing) was showing heavier glyphs than macOS; this keeps
     both legible without macOS rendering too thin. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* WebKit/Chromium thin dark scrollbar (Chrome/Edge on Windows). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--tg-iron);
  border-radius: var(--tg-radius-full);
  border: 2px solid var(--tg-carbon);
}
::-webkit-scrollbar-thumb:hover { background: var(--tg-steel); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--tg-container-max);
  margin: 0 auto;
  padding-inline: var(--tg-container-pad);
}

/* Film grain removed — any overlay lifts pure black to grey. */
.grain { display: none; }

/* ── Scroll progress thread ───────────────────────────────── */
.progress-thread {
  position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 70;
  background: rgba(42, 46, 51, 0.5);
}
.progress-thread span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--tg-steel), var(--tg-silver));
  box-shadow: var(--tg-glow-shadow);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color var(--tg-dur-base) var(--tg-ease-precise),
              border-color var(--tg-dur-base) var(--tg-ease-precise),
              backdrop-filter var(--tg-dur-base) var(--tg-ease-precise);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--tg-iron);
}
.nav-inner {
  max-width: var(--tg-container-max);
  margin: 0 auto;
  /* Respect the notch / Dynamic Island and any left/right safe areas. */
  padding: var(--tg-space-4) max(var(--tg-container-pad), env(safe-area-inset-right)) var(--tg-space-4) max(var(--tg-container-pad), env(safe-area-inset-left));
  padding-top: max(var(--tg-space-4), env(safe-area-inset-top));
  display: flex; align-items: center; gap: var(--tg-space-6);
}
.nav-wordmark { height: 96px; width: auto; }
.nav-links {
  display: flex; gap: var(--tg-space-5);
  margin-left: auto;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
}
.nav-links a {
  color: var(--tg-aluminum);
  padding: var(--tg-space-2) 0;
  position: relative;
  transition: color var(--tg-dur-fast) var(--tg-ease-precise);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--tg-silver);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tg-dur-base) var(--tg-ease-precise);
}
      html.tg-pointer-fine .nav-links a:hover { color: var(--tg-platinum); }
      html.tg-pointer-fine .nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--tg-platinum);
  transition: transform var(--tg-dur-base) var(--tg-ease-precise);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column; gap: var(--tg-space-4);
  padding: var(--tg-space-5) var(--tg-container-pad) var(--tg-space-6);
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tg-iron);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
}
.nav-mobile a { color: var(--tg-brushed); }
.nav-mobile a.cta-solid { color: #000; }
.nav-mobile.open { display: flex; }

/* ============================================================
   CTA BUTTONS — chamfered, silver glow
   ============================================================ */
.cta {
  display: inline-flex; align-items: center; gap: var(--tg-space-3);
  padding: var(--tg-space-3) var(--tg-space-5);
  font-family: var(--tg-font-display);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-bold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--tg-chamfer-sm);
  transition: box-shadow var(--tg-dur-base) var(--tg-ease-precise),
              transform var(--tg-dur-fast) var(--tg-ease-precise),
              background-color var(--tg-dur-base) var(--tg-ease-precise),
              border-color var(--tg-dur-base) var(--tg-ease-precise);
}
.cta:active { transform: scale(0.97); }
.cta-solid { background: var(--tg-luminous); color: var(--tg-carbon); border: 0; }
.cta-ghost {
  background: transparent; color: var(--tg-platinum);
  border: 1px solid var(--tg-steel);
}
      html.tg-pointer-fine .cta-solid:hover { box-shadow: var(--tg-glow-shadow-md); }
      html.tg-pointer-fine .cta-ghost:hover {
    border-color: var(--tg-silver);
    box-shadow: inset 0 0 0 1px var(--tg-glow-soft), var(--tg-glow-shadow); }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-widest);
  color: var(--tg-aluminum);
  margin: 0 0 var(--tg-space-4);
}
.eyebrow.marker { display: flex; align-items: center; gap: var(--tg-space-4); }
.eyebrow.marker::before {
  content: ""; width: 48px; height: 1px; background: var(--tg-silver);
  flex-shrink: 0;
}

/* Animated signal line — replaces the static kicker label above headers.
   A faint track with a pure-white segment that scans across, repeating
   like a data line loading. Transform-only; respects reduced motion. */
.eyebrow-line {
  width: 72px; height: 2px; border-radius: 1px;
  margin: 0 0 var(--tg-space-5);
  background: rgba(255, 255, 255, 0.10);
  position: relative; overflow: hidden;
}
.eyebrow-line::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 36%; border-radius: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, #FFFFFF 50%, rgba(255,255,255,0) 100%);
  animation: eyebrow-scan 1.5s ease-in-out infinite alternate;
}
/* Ping-pong: the white segment bounces wall to wall inside the track,
   staying fully visible at both ends. */
@keyframes eyebrow-scan {
  from { transform: translateX(0); }
  to   { transform: translateX(178%); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-line::after { animation: none; left: 0; width: 100%;
    background: var(--tg-silver); }
}

h2 {
  font-size: clamp(2rem, 4.5vw, var(--tg-text-2xl));
  margin: 0 0 var(--tg-space-5);
}
.lede {
  color: var(--tg-text-secondary);
  font-size: var(--tg-text-md);
  line-height: var(--tg-leading-relaxed);
  max-width: 56ch;
  margin: 0;
}

/* ============================================================
   HERO — split: copy left / shield loop video right
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;       /* fallback for browsers without dvh */
  min-height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
}

.hero-video-wrap {
  position: absolute;
  top: 54%; right: var(--tg-container-pad);
  transform: translateY(-50%);
  width: min(44vw, 760px);
  aspect-ratio: 16 / 9;
  z-index: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  /* Source videos have pure black backgrounds — render untouched. */
  opacity: 0;
  transition: opacity var(--tg-dur-cinema) var(--tg-ease-enter);
}
.hero-video.loaded { opacity: 1; }
.hero-video-fade { display: none; }

.hero-content {
  position: relative; z-index: 1;
  max-width: var(--tg-container-max);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--tg-space-9) + 40px) var(--tg-container-pad) var(--tg-space-9);
}
.hero-spellout-video {
  width: min(520px, 80vw);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Crop the letterbox padding baked into the clip */
  object-position: center 42%;
  margin: calc(-1 * min(520px, 80vw) * 0.14) 0 var(--tg-space-2) calc(-1 * min(520px, 80vw) * 0.06);
  pointer-events: none;
}
.hero-h1 {
  font-size: clamp(2.25rem, 4.5vw, var(--tg-text-3xl));
  margin: 0 0 var(--tg-space-5);
}
.hero-h1 .accent { color: var(--tg-silver); }
.hero-lede {
  color: var(--tg-text-secondary);
  font-size: var(--tg-text-md);
  line-height: var(--tg-leading-relaxed);
  max-width: 42ch;
  margin: 0 0 var(--tg-space-7);
}
.hero-ctas { display: flex; gap: var(--tg-space-4); flex-wrap: wrap; }
.hero-ctas.center { justify-content: center; }

.hero-stats {
  display: flex; gap: var(--tg-space-8);
  margin-top: var(--tg-space-8);
  border-top: 1px solid var(--tg-iron);
  padding-top: var(--tg-space-5);
  width: fit-content;
}
.hero-stats strong {
  display: block;
  font-family: var(--tg-font-display);
  font-size: var(--tg-text-lg);
  font-weight: var(--tg-weight-bold);
  color: var(--tg-platinum);
}
.hero-stats span {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  color: var(--tg-steel);
}

.scroll-hint {
  position: absolute; bottom: var(--tg-space-6); left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 48px;
  background: var(--tg-iron);
  overflow: hidden;
  z-index: 1;
}
.scroll-hint span {
  display: block; width: 100%; height: 40%;
  background: var(--tg-silver);
  animation: thread 2.4s var(--tg-ease-precise) infinite;
}
@keyframes thread {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(260%); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: clamp(var(--tg-space-8), 7vw, var(--tg-space-10)); }
.section-head { margin-bottom: var(--tg-space-7); max-width: 720px; }

/* ── Services ─────────────────────────────────────────────── */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tg-iron);
}
.service {
  padding: var(--tg-space-7) var(--tg-space-6) var(--tg-space-8);
  border-bottom: 1px solid var(--tg-iron);
  border-right: 1px solid var(--tg-iron);
  position: relative;
  text-align: center;
  display: flex; flex-direction: column;
  transition: background-color var(--tg-dur-base) var(--tg-ease-precise);
}
.service:first-child { border-left: 1px solid var(--tg-iron); }
.service::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tg-silver), transparent);
  transform: scaleX(0);
  transition: transform var(--tg-dur-slow) var(--tg-ease-precise);
}
      html.tg-pointer-fine .service:hover { background: var(--tg-graphite); }
      html.tg-pointer-fine .service:hover::before { transform: scaleX(1); }
.service h3 {
  font-size: var(--tg-text-lg);
  margin: 0 0 var(--tg-space-4);
}
.service > p {
  color: var(--tg-text-muted);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-relaxed);
  margin: 0 0 var(--tg-space-6);
  min-height: 3.6em;
}
.service ul {
  list-style: none; margin: 0 0 var(--tg-space-7); padding: 0;
}
.service li {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-sm);
  color: var(--tg-brushed);
  padding: var(--tg-space-3) 0;
  border-top: 1px solid var(--tg-gunmetal);
}
.service-link {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  color: var(--tg-silver);
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  margin-top: auto; align-self: center; padding-top: var(--tg-space-6);
}
.service-link em {
  font-style: normal;
  transition: transform var(--tg-dur-fast) var(--tg-ease-precise);
}
      html.tg-pointer-fine .service-link:hover em { transform: translateX(4px); }

/* ── Approach split ───────────────────────────────────────── */
.section-split { background: var(--tg-obsidian); border-block: 1px solid var(--tg-iron); }
.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--tg-space-9);
  align-items: center;
}
/* Solo split: text-only, fills full container width (no media column) */
.split-solo .lede { max-width: none; }
.approach-points { margin-top: var(--tg-space-7); display: grid; gap: var(--tg-space-6); }
.point { display: flex; gap: var(--tg-space-5); }
.point-rule {
  width: 1px; background: var(--tg-iron); flex-shrink: 0;
  position: relative;
}
.point-rule::before {
  content: ""; position: absolute; top: 6px; left: -2.5px;
  width: 6px; height: 6px;
  background: var(--tg-silver);
  transform: rotate(45deg);
}
.point h4 {
  margin: 0 0 var(--tg-space-2);
  font-size: var(--tg-text-base);
  letter-spacing: var(--tg-tracking-wide);
}
.point p {
  margin: 0;
  color: var(--tg-text-muted);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-relaxed);
  max-width: 52ch;
}
.split-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.split-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.split-insignia {
  width: 78%;
  opacity: 0.92;
  border-radius: var(--tg-radius-full);
  animation: drift 9s var(--tg-ease-precise) infinite alternate;
}
.split-loop {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
/* Landscape 16:9 media (AI wave video, fingerprint) shows the full frame
   at native scale — surrounding dead space is intentional and luxurious. */
.split-media:has(.split-loop),
.split-media:has(.split-fingerprint) { aspect-ratio: 16 / 9; }
.split-fingerprint {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  opacity: 0.92;
}
@keyframes drift {
  from { transform: translateY(-2.5%) scale(1); }
  to   { transform: translateY(2.5%) scale(1.04); }
}

/* ── Industries ───────────────────────────────────────────── */
.industries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tg-iron);
  border: 1px solid var(--tg-iron);
}
.industry {
  background: var(--tg-carbon);
  padding: var(--tg-space-6);
  transition: background-color var(--tg-dur-base) var(--tg-ease-precise);
}
      html.tg-pointer-fine .industry:hover { background: var(--tg-graphite); }
.industry .eyebrow { margin-bottom: var(--tg-space-3); color: var(--tg-steel); }
.industry h4 { margin: 0 0 var(--tg-space-3); font-size: var(--tg-text-base); }
.industry p:last-child {
  margin: 0;
  color: var(--tg-text-muted);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-relaxed);
}

/* ── Team ─────────────────────────────────────────────────── */
.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tg-space-6);
}
.member {
  background: var(--tg-graphite);
  border: 1px solid var(--tg-iron);
  padding: var(--tg-space-7);
  clip-path: var(--tg-chamfer-md);
  display: flex; flex-direction: column;
  transition: border-color var(--tg-dur-base) var(--tg-ease-precise),
              box-shadow var(--tg-dur-base) var(--tg-ease-precise);
}
      html.tg-pointer-fine .member:hover { border-color: var(--tg-steel); box-shadow: var(--tg-glow-shadow); }
.member-head {
  display: flex; align-items: center; gap: var(--tg-space-5);
  margin-bottom: var(--tg-space-5);
}
/* Large square portrait with corner brackets — HUD targeting frame */
.member-portrait {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--tg-space-6);
  padding: var(--tg-space-3);
}
.member-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  background: var(--tg-obsidian);
}
.member-portrait .bracket {
  position: absolute;
  width: 26px; height: 26px;
  border: 0 solid var(--tg-silver);
  transition: width var(--tg-dur-base) var(--tg-ease-precise),
              height var(--tg-dur-base) var(--tg-ease-precise),
              border-color var(--tg-dur-base) var(--tg-ease-precise);
}
.member-portrait .bracket:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.member-portrait .bracket:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.member-portrait .bracket:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.member-portrait .bracket:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
      html.tg-pointer-fine .member:hover .member-portrait .bracket {
    width: 38px; height: 38px;
    border-color: var(--tg-platinum); }
.member h3 { margin: 0 0 var(--tg-space-1); font-size: var(--tg-text-lg); }
.member .eyebrow { margin: 0; }

/* "We're Growing" note under the team grid (About > Team subsection) */
.team-growing {
  text-align: center;
  margin-top: var(--tg-space-9);
  padding-top: var(--tg-space-8);
  border-top: 1px solid var(--tg-iron);
}
.team-growing h3 { margin: 0 0 var(--tg-space-3); }
.team-growing p {
  color: var(--tg-text-secondary);
  max-width: 60ch;
  margin: 0 auto var(--tg-space-6);
}
.member .member-loc {
  display: block;
  margin-top: var(--tg-space-1);
  color: var(--tg-steel);
}
.member > p {
  color: var(--tg-text-secondary);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-relaxed);
  margin: 0 0 var(--tg-space-6);
}
.member-creds { display: flex; flex-wrap: wrap; gap: var(--tg-space-2); margin-bottom: var(--tg-space-5); }
.member-creds span {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  color: var(--tg-brushed);
  border: 1px solid var(--tg-gunmetal);
  padding: var(--tg-space-1) var(--tg-space-3);
}

/* ── CTA section ──────────────────────────────────────────── */
.section-cta {
  background: var(--tg-obsidian);
  border-top: 1px solid var(--tg-iron);
  text-align: center;
}
.cta-block { display: flex; flex-direction: column; align-items: center; }
.cta-mark {
  width: min(300px, 60vw); height: auto;
  margin-bottom: var(--tg-space-6);
  border-radius: var(--tg-radius-full);
}
/* Wordmark in the closing CTA — subtle on-brand luminance breathe.
   Motion changes light, never size. 8s loop, composed. */
.cta-wordmark {
  width: min(660px, 88vw); height: auto;
  margin-bottom: var(--tg-space-6);
  animation: wordmark-breathe var(--tg-dur-loop) var(--tg-ease-precise) infinite alternate;
}
/* Contact CTA: animated spellout wordmark video (replaces static wordmark img) */
.cta-spellout-video {
  display: block;
  width: min(480px, 80vw);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 42%;
  margin: calc(-1 * min(480px, 80vw) * 0.10) auto var(--tg-space-2);
  pointer-events: none;
}
@keyframes wordmark-breathe {
  from { filter: brightness(0.92) drop-shadow(0 0 0 rgba(238, 240, 242, 0)); }
  to   { filter: brightness(1.12) drop-shadow(0 0 28px rgba(238, 240, 242, 0.10)); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-wordmark { animation: none; }
}
.cta-block h2 { font-size: clamp(2.25rem, 5vw, var(--tg-text-3xl)); }
.cta-block .lede { margin-bottom: var(--tg-space-7); }

/* ============================================================
   PROJECTS — StackDealer showcase
   ============================================================ */
.project-showcase {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--tg-space-6), 5vw, var(--tg-space-8));
  display: flex; align-items: center; justify-content: center;
}
.project-mark {
  width: 100%;
  max-width: 460px;
  height: auto;
  transition: transform var(--tg-dur-slow) var(--tg-ease-precise);
}
.project-showcase .bracket {
  position: absolute;
  width: 30px; height: 30px;
  border: 0 solid var(--tg-silver);
  transition: width var(--tg-dur-base) var(--tg-ease-precise),
              height var(--tg-dur-base) var(--tg-ease-precise),
              border-color var(--tg-dur-base) var(--tg-ease-precise);
}
.project-showcase .bracket:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.project-showcase .bracket:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.project-showcase .bracket:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.project-showcase .bracket:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
      html.tg-pointer-fine .project-showcase:hover .bracket { width: 44px; height: 44px; border-color: var(--tg-platinum); }
      html.tg-pointer-fine .project-showcase:hover .project-mark { transform: scale(1.03); }

/* ============================================================
   SUBPAGE HERO
   ============================================================ */
.page-hero {
  padding: calc(var(--tg-space-8) + 56px) 0 var(--tg-space-7);
  border-bottom: 1px solid var(--tg-iron);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, var(--tg-text-3xl));
  margin: 0 0 var(--tg-space-5);
}
.page-hero .lede { max-width: 64ch; }

/* Active nav link */
.nav-links a.active { color: var(--tg-platinum); }
.nav-links a.active::after { transform: scaleX(1); }

/* ============================================================
   CONSULTATION FORM
   ============================================================ */
.form-wrap {
  max-width: 760px;
  margin: 0 auto;
}
/* The inquiry panel — chamfered square, graphite over carbon */
.form-panel {
  background: var(--tg-graphite);
  border: 1px solid var(--tg-iron);
  clip-path: var(--tg-chamfer-lg);
  padding: clamp(var(--tg-space-6), 5vw, var(--tg-space-8));
}
.form-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tg-space-4);
  border-bottom: 1px solid var(--tg-iron);
  padding-bottom: var(--tg-space-5);
  margin-bottom: var(--tg-space-6);
}
.form-panel-head .eyebrow { margin: 0; }
.form-panel-head .wave-sig { height: 30px; width: auto; opacity: 0.5; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tg-space-5);
}
.field { display: flex; flex-direction: column; gap: var(--tg-space-2); }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  color: var(--tg-aluminum);
}
.field label .req { color: var(--tg-silver); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--tg-carbon);
  border: 1px solid var(--tg-gunmetal);
  color: var(--tg-platinum);
  font-family: var(--tg-font-body);
  font-size: var(--tg-text-base);
  padding: var(--tg-space-4);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  clip-path: var(--tg-chamfer-sm);
  transition: border-color var(--tg-dur-fast) var(--tg-ease-precise),
              box-shadow var(--tg-dur-fast) var(--tg-ease-precise),
              background-color var(--tg-dur-fast) var(--tg-ease-precise);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C828A' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--tg-space-4) center;
  cursor: pointer;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--tg-silver);
  background: var(--tg-obsidian);
  box-shadow: var(--tg-glow-shadow);
}
/* Disabled send until all required fields are filled */
.form-actions .cta[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;
}
.form-actions .cta[disabled]:hover { box-shadow: none; }
.form-actions .cta[disabled]:active { transform: none; }
.field input::placeholder,
.field textarea::placeholder { color: var(--tg-steel); }
.field .error-text {
  display: none;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wide);
  color: var(--tg-brushed);
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--tg-steel); box-shadow: inset 0 0 0 1px var(--tg-glow-soft); }
.field.invalid .error-text { display: block; }
.form-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--tg-space-5);
  margin-top: var(--tg-space-3);
}
.form-note {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wide);
  color: var(--tg-steel);
  margin: 0;
}
.form-success {
  display: none;
  border: 1px solid var(--tg-iron);
  background: var(--tg-graphite);
  padding: var(--tg-space-6);
  clip-path: var(--tg-chamfer-md);
  margin-top: var(--tg-space-6);
}
.form-success.show { display: block; }
.form-success h4 { margin: 0 0 var(--tg-space-2); }
.form-success p { margin: 0; color: var(--tg-text-secondary); font-size: var(--tg-text-sm); }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--tg-iron);
  /* The one surface that keeps the soft grey tone — the site base is pure black. */
  background: #111315;
  padding-top: var(--tg-space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--tg-space-8);
  padding-bottom: var(--tg-space-8);
}
.footer-wordmark { height: 128px; width: auto; margin-bottom: var(--tg-space-4); }
.footer-brand > p {
  color: var(--tg-text-muted);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-relaxed);
  max-width: 40ch;
  margin: 0 0 var(--tg-space-5);
}
.footer-contact a { color: var(--tg-brushed); font-size: var(--tg-text-sm); }
.footer-grid > div > a {
  display: block;
  color: var(--tg-aluminum);
  font-size: var(--tg-text-sm);
  padding: var(--tg-space-2) 0;
  transition: color var(--tg-dur-fast) var(--tg-ease-precise);
}
      html.tg-pointer-fine .footer-grid > div > a:hover, html.tg-pointer-fine .footer-contact a:hover { color: var(--tg-platinum); }
.footer-loc {
  color: var(--tg-brushed);
  font-size: var(--tg-text-sm);
  margin: 0 0 var(--tg-space-4);
}
.footer-loc span {
  display: block;
  color: var(--tg-steel);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  margin-top: 2px;
}
.footer-base {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--tg-gunmetal);
  padding-block: var(--tg-space-5);
}
.footer-base p {
  margin: 0;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  color: var(--tg-steel);
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--tg-dur-slow) var(--tg-ease-enter),
              transform var(--tg-dur-slow) var(--tg-ease-enter);
}
.reveal[data-d="1"] { transition-delay: 70ms; }
.reveal[data-d="2"] { transition-delay: 140ms; }
.reveal[data-d="3"] { transition-delay: 210ms; }
.reveal[data-d="4"] { transition-delay: 280ms; }
.reveal[data-d="5"] { transition-delay: 350ms; }
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .services { grid-template-columns: 1fr 1fr; }
  .service { border-left: 1px solid var(--tg-iron); }
  .service > p { min-height: 0; }
  .split { grid-template-columns: 1fr; gap: var(--tg-space-7); }
  .split-media { aspect-ratio: 16 / 10; order: -1; max-height: 320px; }
  .industries { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--tg-iron); }
  /* Mobile menu clears the notch on the sides */
  .nav-mobile {
    padding-left: max(var(--tg-container-pad), env(safe-area-inset-left));
    padding-right: max(var(--tg-container-pad), env(safe-area-inset-right));
  }

  /* Mobile: stack the two hero videos vertically instead of overlapping */
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: auto;
    padding-top: calc(var(--tg-space-10) + env(safe-area-inset-top));
    padding-bottom: var(--tg-space-8);
  }
  .hero-content { order: 1; padding-top: 0; padding-bottom: var(--tg-space-6); }
  .hero-video-wrap {
    order: 2;
    position: static;
    transform: none;
    inset: auto;
    width: min(74vw, 340px);
    aspect-ratio: 5 / 4;        /* taller frame, crops the wide tunnel */
    margin-inline: auto;
    align-self: center;
    opacity: 0.92;
  }
  /* center the wormhole's throat instead of letting the tunnel lean right */
  .hero-video-wrap .hero-video { object-fit: cover; object-position: 16% center; }
  .hero-stats { gap: var(--tg-space-6); }
  .scroll-hint { display: none; }

  .section { padding-block: var(--tg-space-8); }
  .section-head { margin-bottom: var(--tg-space-6); }
  .services { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--tg-space-6); }
  .footer-base { flex-direction: column; gap: var(--tg-space-2); }
  .member { padding: var(--tg-space-5); }

  /* Touch targets: CTAs and nav rows comfortably tappable (44px min) */
  .cta { padding: var(--tg-space-4) var(--tg-space-5); }
  .nav-mobile a { padding-block: var(--tg-space-2); }
  .footer-grid > div > a { padding-block: var(--tg-space-3); }
}

/* Safe-area insets at the document edges (notch sides + Android nav bar).
   Container padding already centers content; this guards full-bleed edges. */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--tg-container-pad), env(safe-area-inset-left));
    padding-right: max(var(--tg-container-pad), env(safe-area-inset-right));
  }
  .footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Phones (≤480px): tighten type and spacing ──────────────── */
@media (max-width: 480px) {
  :root { --tg-container-pad: 1.25rem; }
  .hero-h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hero-spellout-video { width: min(420px, 88vw); }
  .hero-stats { flex-wrap: wrap; gap: var(--tg-space-5); }
  h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .page-hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .cta { width: 100%; justify-content: center; }
  .hero-ctas { width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; gap: var(--tg-space-3); }
  .project-mark { max-width: 300px; }
  .member-creds span { font-size: 10px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .scroll-hint span, .split-wave { animation: none; }
  .hero-video { transition: none; }
}

/* logo responsive caps */
@media (max-width: 768px) {
  .nav-wordmark { height: 66px; }
}
@media (max-width: 480px) {
  .nav-wordmark { height: 56px; }
  .footer-wordmark { height: 96px; }
}

/* ============================================================
   PRICING PAGE  — process steps, engagement tiers, principles
   ============================================================ */
.pricing-cta-row { display: flex; gap: var(--tg-space-4); flex-wrap: wrap; margin-top: var(--tg-space-6); }

/* The Process — numbered steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tg-iron);
  margin-top: var(--tg-space-7);
}
.process-step {
  position: relative;
  padding: var(--tg-space-6) var(--tg-space-6) var(--tg-space-7) var(--tg-space-6);
  border-right: 1px solid var(--tg-iron);
  border-bottom: 1px solid var(--tg-iron);
}
.process-step:first-child { border-left: 1px solid var(--tg-iron); }
.process-step::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tg-silver), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tg-dur-slow) var(--tg-ease-precise);
}
html.tg-pointer-fine .process-step:hover::before { transform: scaleX(1); }
.process-num {
  display: block;
  font-family: var(--tg-font-display);
  font-size: var(--tg-text-xl);
  font-weight: var(--tg-weight-bold);
  color: var(--tg-iron);
  line-height: 1;
  margin-bottom: var(--tg-space-5);
  transition: color var(--tg-dur-base) var(--tg-ease-precise);
}
html.tg-pointer-fine .process-step:hover .process-num { color: var(--tg-silver); }
.process-step h3 { font-size: var(--tg-text-base); margin: 0 0 var(--tg-space-3); }
.process-step p { color: var(--tg-text-muted); font-size: var(--tg-text-sm); line-height: var(--tg-leading-relaxed); margin: 0; }

/* Engagement tiers */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tg-space-5);
  margin-top: var(--tg-space-7);
}
.tier-card {
  position: relative;
  background: var(--tg-graphite);
  clip-path: var(--tg-chamfer-md);
  padding: var(--tg-space-6);
  display: flex; flex-direction: column;
  transition: transform var(--tg-dur-base) var(--tg-ease-precise),
              box-shadow var(--tg-dur-base) var(--tg-ease-precise);
}
html.tg-pointer-fine .tier-card:hover { transform: translateY(-4px); box-shadow: var(--tg-glow-shadow); }
.tier-card.featured { background: linear-gradient(180deg, var(--tg-graphite), #16191c); box-shadow: var(--tg-glow-shadow); }
/* featured tier wrapper keeps the badge OUTSIDE the card's chamfer clip */
.tier-card-wrap { position: relative; display: flex; }
.tier-card-wrap > .tier-card { width: 100%; }
.tier-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: var(--tg-platinum); color: var(--tg-carbon);
  font-family: var(--tg-font-mono); font-size: var(--tg-text-2xs);
  text-transform: uppercase; letter-spacing: var(--tg-tracking-wider);
  padding: 5px 12px; clip-path: var(--tg-chamfer-sm); font-weight: var(--tg-weight-medium);
  white-space: nowrap;
}
.tier-price { font-family: var(--tg-font-mono); font-size: var(--tg-text-sm); color: var(--tg-silver); letter-spacing: var(--tg-tracking-wide); }
.tier-card h3 { font-size: var(--tg-text-lg); margin: var(--tg-space-3) 0 var(--tg-space-2); }
.tier-tag { font-family: var(--tg-font-mono); font-size: var(--tg-text-2xs); text-transform: uppercase; letter-spacing: var(--tg-tracking-wider); color: var(--tg-steel); }
.tier-desc { color: var(--tg-text-muted); font-size: var(--tg-text-sm); line-height: var(--tg-leading-relaxed); margin: var(--tg-space-4) 0 var(--tg-space-5); }
.tier-examples-label { font-family: var(--tg-font-mono); font-size: var(--tg-text-2xs); text-transform: uppercase; letter-spacing: var(--tg-tracking-wider); color: var(--tg-steel); margin: 0 0 var(--tg-space-3); }
.tier-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-space-3); }
.tier-examples li { font-size: var(--tg-text-sm); color: var(--tg-text-secondary); line-height: var(--tg-leading-normal); padding-left: var(--tg-space-4); position: relative; }
.tier-examples li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 1px; background: var(--tg-silver); }
.pricing-note { text-align: center; color: var(--tg-text-muted); font-size: var(--tg-text-sm); max-width: 60ch; margin: var(--tg-space-7) auto 0; line-height: var(--tg-leading-relaxed); }

/* Principles */
.principles { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--tg-space-9); margin-top: var(--tg-space-7); align-items: start; }
.principle-list { display: grid; gap: var(--tg-space-5); }
.principle { display: flex; gap: var(--tg-space-5); }
.principle p { margin: 0; color: var(--tg-text-secondary); font-size: var(--tg-text-base); line-height: var(--tg-leading-relaxed); }
.principle-cards { display: grid; gap: var(--tg-space-5); }
.principle-card { background: var(--tg-graphite); clip-path: var(--tg-chamfer-md); padding: var(--tg-space-6); }
.principle-card h3 { font-size: var(--tg-text-base); margin: 0 0 var(--tg-space-3); }
.principle-card p { color: var(--tg-text-muted); font-size: var(--tg-text-sm); line-height: var(--tg-leading-relaxed); margin: 0 0 var(--tg-space-4); }

@media (max-width: 1024px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
  .tier-grid { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr; gap: var(--tg-space-7); }
}
@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
}


/* AI Solutions: show the FULL portrait clip, no crop, kept modest in size */
.split-media[data-video-slot="service-ai"] {
  aspect-ratio: 3 / 4;
  width: min(340px, 90%);
  margin-inline: auto;
}
.split-media[data-video-slot="service-ai"] video { object-fit: contain; }
.split-loop--ai { transform: none; }

/* About: significantly larger animated insignia, fills more of the side */
.split--about { grid-template-columns: 1fr 1.1fr; }
.split--about .split-media { aspect-ratio: 1 / 1; }
.split--about .split-insignia { width: 100%; opacity: 0.96; }
@media (max-width: 1024px) {
  .split--about { grid-template-columns: 1fr; }
  .split--about .split-media { max-height: 440px; }
}

/* Team: small shield loop above the We're Growing CTA */
.team-loop {
  width: min(280px, 60vw);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  filter: grayscale(1);
  display: block;
  margin: 0 auto var(--tg-space-5);
  pointer-events: none;
}


/* Team photos: white matte so under-sized cutouts stay crisp and framed */
.member-portrait img.photo { object-fit: contain; background: #ffffff; filter: none; }
.member-portrait img.photo--fill { object-fit: cover; background: transparent; }

/* Connect on LinkedIn — soft brushed-silver gradient, tactile */
.member-linkedin {
  display: inline-flex; align-items: center; gap: var(--tg-space-2);
  margin-top: auto;
  padding: var(--tg-space-2) var(--tg-space-4);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tg-tracking-wider);
  color: var(--tg-carbon);
  background: linear-gradient(135deg, #f4f6f8 0%, #cbd0d6 48%, #9aa0a7 100%);
  clip-path: var(--tg-chamfer-sm);
  width: fit-content;
  transition: transform var(--tg-dur-base) var(--tg-ease-precise),
              box-shadow var(--tg-dur-base) var(--tg-ease-precise),
              filter var(--tg-dur-base) var(--tg-ease-precise);
}
.member-linkedin .li-icon { width: 15px; height: 15px; flex-shrink: 0; }
html.tg-pointer-fine .member-linkedin:hover { filter: brightness(1.07); box-shadow: var(--tg-glow-shadow); }
.member-linkedin:active { transform: translateY(1px) sc

/* Contact Locations: center both lines; stack centered on mobile */
.loc-stats { text-align: center; }
.loc-stats > div { text-align: center; }
@media (max-width: 768px) {
  .loc-stats { flex-direction: column; align-items: center; justify-content: center;
    gap: var(--tg-space-5); width: 100%; }
  .loc-stats > div { width: 100%; }
}


/* Hide ALL iOS/iPadOS inline-video controls incl. the central overlay play
   button (shown on muted play-once / background videos) so they read as clean
   motion. Videos are muted, playsinline and autoplay. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-overlay-enclosure,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}