/* ═══════════════════════════════════════════════════════════════════
   Diamond SPI — ported animations (leftcoast-spec).
   Loaded by every page after its own <style> block so cascade wins.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Per-letter blur-up stagger --- */
.tw { display: inline-block; }
.tl {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  transition: opacity .6s ease-out, filter .6s ease-out, transform .6s ease-out, color 1s ease-out;
  will-change: transform, opacity, filter;
}
.tl.rv { opacity: 1; filter: blur(0); transform: none; }

/* Section titles & CTA heading shift cyan → base on reveal */
.section-title .tl, .cta-banner h2 .tl { color: var(--cyan); }
.section-title .tl.rv, .cta-banner h2 .tl.rv { color: inherit; }

/* The original CSS has `.hero h1 span { color: var(--cyan); }` which would
   otherwise tint EVERY split letter (including the white middle line) cyan.
   Force my wrapper/letter spans to inherit from their parent (the original
   `<span>` for highlighted lines, or h1 directly for bare-text lines). */
.hero h1 .tw, .hero h1 .tl { color: inherit; }

/* --- Per-word ghost-fade for paragraphs --- */
.pw {
  display: inline-block;
  opacity: 0.15;
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity;
}
.pw.rv { opacity: 1; }

/* Once a parent has been split, kill the legacy whole-element reveal hide-state */
[data-split="1"] { opacity: 1 !important; transform: none !important; }

/* --- Pre-loader (≤ 3s total).
       Sequence:
         0.0–0.3s   diamond fades in (against black)
         0.1–1.5s   diamond spins 720° in 3D (expo-out → settles)
         1.5–2.2s   diamond ENGULFS the viewport — scales 1 → 30 so its
                    cyan colour completely fills the screen
         2.1–2.8s   the full-screen cyan plate fades to reveal the page
       Spin's expo-out tail (nearly stopped) hands off to engulf's
       ease-in start (also nearly stopped). No velocity jump. --- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--black);
  perspective: 420px;
  perspective-origin: center center;
  opacity: 1;
  /* On .exit: opacity fades after a 0.6s delay so the diamond has
     time to grow and fill the screen first. */
  transition: opacity .7s cubic-bezier(0.5, 0, 0.5, 1) .6s;
  will-change: opacity;
}
#preloader svg {
  width: clamp(96px, 14vw, 180px); height: auto;
  opacity: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  filter: drop-shadow(0 0 18px rgba(0, 200, 255, 0.55));
  animation:
    pl-fade-in .15s cubic-bezier(0.5, 0, 0.5, 1) forwards,
    pl-spin    1.4s cubic-bezier(0.22, 1, 0.36, 1) .1s forwards,
    pl-engulf  .7s  cubic-bezier(0.4, 0, 0.6, 1)  1.5s forwards;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
#preloader .pl-stroke { display: none; }
#preloader .pl-fill   { opacity: 1; animation: none; }

@keyframes pl-fade-in { to { opacity: 1; } }
@keyframes pl-spin {
  /* Single-axis presenting turn — Y axis only, two full revolutions.
     The static rotateX(-14°) is a fixed perspective lean (not a
     second rotation), so the diamond reads as a 3D object presenting
     itself rather than a flat 2D pinwheel. */
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(-14deg) rotateY(720deg); }
}
@keyframes pl-engulf {
  /* Match spin's endpoint (rotateX -14°, rotateY 720°, scale 1) so
     the handoff is seamless. Scale 30 pushes every facet past every
     viewport edge. */
  from { transform: rotateX(-14deg) rotateY(720deg) scale(1); }
  to   { transform: rotateX(-14deg) rotateY(720deg) scale(30); }
}

#preloader.exit {
  opacity: 0;
  pointer-events: none;
}

/* --- Slide-in nav underline (right-anchored → left on hover) --- */
.nav-links a::after {
  width: 100%;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s cubic-bezier(0.65,0,0.35,1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

/* --- Footer links get the same slide treatment --- */
.footer-col a, .footer-bottom a {
  position: relative; display: inline-block;
}
.footer-col a::after, .footer-bottom a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .35s cubic-bezier(0.65,0,0.35,1);
}
.footer-col a:hover::after, .footer-bottom a:hover::after {
  transform: scaleX(1); transform-origin: 0% 50%;
}

/* ─────────────────────────────────────────────────────────────────
   Page-wide blue ambient glow.
   Fixed behind everything; shines through any transparent surface.
   ───────────────────────────────────────────────────────────────── */
body { position: relative; }
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 18% 22%, rgba(0, 200, 255, 0.22), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 65%, rgba(0, 200, 255, 0.18), transparent 65%),
    radial-gradient(ellipse 65% 50% at 50% 100%, rgba(0, 220, 255, 0.14), transparent 65%);
  filter: blur(20px);
}

/* Make non-image sections transparent so the glow shows through every
   card and CTA. The hero, industries (with bg-image), and footer keep
   their own backgrounds. Inline `style="background:..."` on about/
   services/contact sections is cleared by animations.js at runtime. */
.services-preview,
.values,
.audience,
.cta-banner,
.leadership,
.capabilities { background: transparent !important; }
.values-grid { background: transparent !important; }
.page-header { background: transparent !important; }

/* ─────────────────────────────────────────────────────────────────
   Liquid-glass CTAs — fully transparent, white text in every state.
   Hover wipe direction is preserved from the original CSS:
     · outline `.btn`            → cyan fill enters from LEFT
     · primary `.btn-primary`    → white fill enters from RIGHT
   ───────────────────────────────────────────────────────────────── */

.btn,
.nav-cta {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 18px 36px -18px rgba(0, 200, 255, 0.40),
    0 30px 60px -12px rgba(0, 0, 0, 0.45);
  transition: color var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

/* The hover-fill pseudo needs to follow the pill curve and stay
   subtle (text already reads as white over the glass). */
.btn::before {
  border-radius: inherit;
  background: rgba(0, 200, 255, 0.20) !important;
}
.btn-primary::before {
  background: rgba(255, 255, 255, 0.14) !important;
  transform-origin: right;
}

/* Hover: keep text white, brighten border + glow, never solid-fill */
.btn:hover,
.btn-primary:hover,
.nav-cta:hover {
  color: var(--white) !important;
  border-color: rgba(0, 220, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 22px 44px -14px rgba(0, 200, 255, 0.65),
    0 30px 60px -12px rgba(0, 0, 0, 0.55);
}

/* Press feedback */
.btn:active,
.nav-cta:active { transform: scale(0.98); }

/* ─────────────────────────────────────────────────────────────────
   Liquid-glass cards (every card type on every page).
   The body blue glow shines through these. ZERO border + zero inset
   highlights so no edge linework reads as a "shimmer" against the
   bright glow behind.
   ───────────────────────────────────────────────────────────────── */
.sp-card, .audience-card, .industry-card, .value-block,
.lead-card, .cap-card, .service-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-radius: 22px !important;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.55) !important;
  transition: background var(--transition);
}

.sp-card:hover, .audience-card:hover, .industry-card:hover,
.value-block:hover, .lead-card:hover, .cap-card:hover, .service-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Icon glow on card hover — pulses bright cyan and softens to a halo */
.sp-card-icon, .audience-card-icon, .value-icon,
.industry-icon, .service-card-icon, .lead-card-icon, .cap-card-icon {
  transition: filter .55s cubic-bezier(0.22, 1, 0.36, 1), transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-card:hover .sp-card-icon,
.audience-card:hover .audience-card-icon,
.value-block:hover .value-icon,
.industry-card:hover .industry-icon,
.service-card:hover .service-card-icon,
.lead-card:hover .lead-card-icon,
.cap-card:hover .cap-card-icon {
  filter:
    drop-shadow(0 0 14px rgba(0, 220, 255, 0.95))
    drop-shadow(0 0 28px rgba(0, 200, 255, 0.55));
  transform: scale(1.06);
}

/* ─────────────────────────────────────────────────────────────────
   Card flip — the ENTIRE card surface rotates, not just the text.
   We achieve this by stripping the card's own glass styling once it
   becomes a flip wrapper and re-applying that styling to BOTH faces,
   so the user sees a glass plate flip front-to-back as one piece.
   Smooth expo-out curve; no spring overshoot.
   ───────────────────────────────────────────────────────────────── */

/* Card becomes a transparent perspective shell once it's been wired */
.card-flip {
  perspective: 1400px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Single shared timing for the flip + every visual change on the
   faces, so the cyan border and tinted background animate in lockstep
   with the rotation and never "pop in" late. */
.card-flip-inner {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
  min-height: 100%;
  transform: translateZ(0);                     /* promote to its own GPU layer */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Expo-out: snappy launch, long graceful settle. Single curve
     shared with the face hover transition so the cyan-tinted
     background and the rotation finish at the exact same frame. */
  transition: transform .65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.card-flip:hover .card-flip-inner,
.card-flip:focus-within .card-flip-inner { transform: rotateY(180deg) translateZ(0); }

/* Both faces wear the glass plate the card used to wear.
   ZERO border, zero inset highlights — any edge linework reads as a
   "shimmer" against the body's blue glow. Just background + blur +
   drop shadow + rounded clip. */
.card-flip-front, .card-flip-back {
  grid-area: stack;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-radius: 22px;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.55);
  transition: background .65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, background;
}

/* Reduced-motion shortcut — skip the preloader spin entirely */
@media (prefers-reduced-motion: reduce) {
  #preloader svg { animation: none; opacity: 1; }
}
.card-flip-back {
  /* Push the back face half a pixel BEHIND the front in 3D space so
     the two faces are never coplanar. Without this, the two share
     Z=0 and you see a hairline seam (the card edge) right through
     the rotation midpoint. */
  transform: rotateY(180deg) translateZ(0.5px);
  justify-content: center;
}
.card-flip-front {
  /* Mirror — push the front a half-pixel forward in its own Z. */
  transform: translateZ(0.5px);
}
.card-flip:hover .card-flip-inner,
.card-flip:focus-within .card-flip-inner {
  transform: rotateY(180deg) translateZ(0);
}
.card-flip-back p {
  margin: 0;
  font-size: clamp(0.84rem, 1vw, 0.95rem);
  color: var(--white);
  line-height: 1.7;
}

/* Match the original padding per card type so layout stays put */
.sp-card.card-flip      .card-flip-front,
.sp-card.card-flip      .card-flip-back   { padding: clamp(28px, 3vw, 40px); }
.audience-card.card-flip .card-flip-front,
.audience-card.card-flip .card-flip-back   { padding: clamp(28px, 3vw, 44px); }
.value-block.card-flip   .card-flip-front,
.value-block.card-flip   .card-flip-back   { padding: clamp(32px, 4vw, 52px) clamp(20px, 2.5vw, 32px); align-items: center; text-align: center; }
.lead-card.card-flip     .card-flip-front,
.lead-card.card-flip     .card-flip-back   { padding: clamp(28px, 3vw, 40px); }
.cap-card.card-flip      .card-flip-front,
.cap-card.card-flip      .card-flip-back   { padding: clamp(28px, 3vw, 40px); }

/* Hover: brighter border + background on the visible face */
.card-flip:hover .card-flip-front,
.card-flip:hover .card-flip-back {
  border-color: rgba(0, 220, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

/* On industry cards (no description), no flip mechanism is added —
   they just show the title statically with the glass treatment. */

/* ─────────────────────────────────────────────────────────────────
   HOME PAGE MOBILE COMPRESSION (≤ 768px)
   Selectors below only exist on index.html, so other pages are not
   affected. Goal: chop overall page height by tightening padding,
   pushing more cards per row, shrinking type so the same content
   fits in roughly half the scroll length.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Section vertical padding — was clamp(100px, 14vw, 180px) */
  .services-preview,
  .audience { padding: clamp(40px, 9vw, 64px) 0 !important; }
  .values   { padding: clamp(28px, 7vw, 48px) 0 !important; }
  .industries { padding: clamp(40px, 9vw, 64px) 0 !important; }
  .cta-banner { padding: clamp(40px, 9vw, 64px) 0 !important; }

  /* Section heading block: tighter bottom margin */
  .services-preview > .container > div[style*="margin-bottom"],
  .audience > .container > div[style*="max-width"],
  .industries > .container > div[style*="margin-bottom"] {
    margin-bottom: clamp(18px, 5vw, 28px) !important;
  }

  /* Hero — pull the headline tighter, smaller */
  .hero-content {
    padding: calc(var(--nav-height) + 28px) 0 60px !important;
  }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; margin-bottom: 18px !important; }
  .hero-label { margin-bottom: 14px !important; }

  /* Stats bar — chop padding + shrink type */
  .hero-stat { padding: 8px 4px !important; }
  .hero-stat-num { font-size: clamp(1.05rem, 4vw, 1.3rem) !important; margin-bottom: 2px !important; }
  .hero-stat-label { font-size: clamp(0.5rem, 1.6vw, 0.6rem) !important; letter-spacing: 0.1em !important; }

  /* Service cards: 2-up on mobile (front faces are tiny now) */
  .sp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: clamp(20px, 5vw, 32px) !important;
  }
  .sp-card.card-flip { min-height: 130px; }
  .sp-card.card-flip .card-flip-front,
  .sp-card.card-flip .card-flip-back {
    padding: 16px 12px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }
  .sp-card .sp-card-icon { width: 28px !important; height: 28px !important; }
  .sp-card h3 { font-size: 0.74rem !important; line-height: 1.25 !important; }
  .sp-card .card-flip-back p { font-size: 0.7rem !important; line-height: 1.45 !important; }

  /* Values: 2-up on mobile (was 1-up below 520px) */
  .values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .value-block.card-flip { min-height: 150px; }
  .value-block.card-flip .card-flip-front,
  .value-block.card-flip .card-flip-back {
    padding: 18px 12px !important;
    border-radius: 14px !important;
  }
  .value-block .value-icon { width: 30px !important; height: 30px !important; margin-bottom: 10px !important; }
  .value-block h3 { font-size: 0.78rem !important; }
  .value-block .card-flip-back p { font-size: 0.7rem !important; line-height: 1.45 !important; }

  /* Audience: 2-up on mobile (was 1-up below 768px) */
  .audience-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: clamp(16px, 4vw, 24px) !important;
  }
  .audience-card.card-flip { min-height: 160px; }
  .audience-card.card-flip .card-flip-front,
  .audience-card.card-flip .card-flip-back {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .audience-card h3 { font-size: 0.92rem !important; margin-bottom: 6px !important; }
  .audience-card .card-flip-back p { font-size: 0.74rem !important; line-height: 1.5 !important; }

  /* Industries: 4-up on mobile (was 2-up below 640px) — 8 cards = 2 rows */
  .industries-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .industry-card { padding: 14px 6px !important; border-radius: 12px !important; }
  .industry-card .industry-icon { width: 24px !important; height: 24px !important; margin-bottom: 8px !important; }
  .industry-card h4 { font-size: 0.55rem !important; line-height: 1.25 !important; letter-spacing: 0.04em !important; }

  /* CTA banner — tighter */
  .cta-banner h2 { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; margin-bottom: 12px !important; }
  .cta-banner p  { font-size: clamp(0.85rem, 3vw, 0.95rem) !important; margin-bottom: 22px !important; }

  /* Section dividers eat vertical space — slim them */
  .section-divider { margin: 0 !important; }
}

/* --- Slow Ken-Burns zoom on hero photo --- */
.hero-photo {
  animation: hero-kb 26s ease-in-out infinite alternate;
  will-change: transform;
  transform-origin: center center;
}
@keyframes hero-kb { from { transform: scale(1); } to { transform: scale(1.08); } }

/* --- Industries bg slow drift on hover --- */
.industries-bg { transition: transform 1.3s ease-in-out, opacity .6s; }
.industries:hover .industries-bg { transform: scale(1.05); opacity: 0.09; }

/* --- CTA banner tube-light flicker on the rotated diamond outlines --- */
.cta-banner::before { animation: neu-flicker 4.6s linear infinite; }
.cta-banner::after  { animation: neu-flicker 4.6s linear -2.3s infinite; }
@keyframes neu-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.18; }
}

/* --- 3D pointer tilt scaffolding (cards across all pages) --- */
.sp-card, .audience-card, .industry-card, .value-block,
.lead-card, .cap-card, .service-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Tabular nums on count-ups so digits don't jitter --- */
.hero-stat-num { font-variant-numeric: tabular-nums; }

/* --- Lenis smooth-scroll baseline --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- Reduced motion: disable everything that moves on its own --- */
@media (prefers-reduced-motion: reduce) {
  .tl, .pw { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  #preloader svg { animation: none; opacity: 1; }
  #preloader .pl-stroke { animation: none; stroke-dashoffset: 0; }
  #preloader .pl-fill { animation: none; opacity: 1; }
  #preloader { transition-duration: .2s !important; }
  .hero-photo, .cta-banner::before, .cta-banner::after { animation: none !important; }
}