/* css/card-accents.css */
/* ============================================================
   card-accents.css — Tier 3A (2026-04-24)
   Per-card accent color system via CSS custom properties.
   Inspired by Graphite's typed-color product cards.

   USAGE (scaffolding only — zero visual impact until opted in):
     <article class="card card-accent" style="--accent: #06B6D4;">

   Intended palette — apply one per adjacent card so the grid
   shimmers instead of reading as one flat color:
     cyan    #06B6D4
     indigo  #6366F1
     emerald #10B981
     violet  #8B5CF6
     amber   #F59E0B

   The class reads --accent and applies it to:
   - hover border
   - icon-tile tint (background + icon color)
   - stat / big-number color (text gradient fallback → solid color)

   Scoped so it never touches unflagged cards, and falls back to
   the brand blue if --accent isn't defined on the element.
   ============================================================ */

.card-accent {
  --accent: #2563EB; /* fallback — brand blue */
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent);
  transition:
    border-color 260ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

.card-accent:hover,
.card-accent:focus-within {
  border-color: var(--accent) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -6px var(--accent-ring);
}

/* Icon tile inside the card — inherits the accent via tint + stroke */
.card-accent .card-accent-icon,
.card-accent [data-role="icon-tile"] {
  background: var(--accent-tint);
  color: var(--accent);
  transition: background 260ms ease, color 260ms ease;
}

.card-accent:hover .card-accent-icon,
.card-accent:hover [data-role="icon-tile"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Big-number / stat element inside the card */
.card-accent .card-accent-num,
.card-accent [data-role="stat-num"] {
  color: var(--accent);
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 60%, #ffffff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Accent underline accent — optional anchor style */
.card-accent .card-accent-link {
  color: var(--accent);
  position: relative;
}
.card-accent .card-accent-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms ease;
}
.card-accent:hover .card-accent-link::after,
.card-accent .card-accent-link:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .card-accent,
  .card-accent .card-accent-icon,
  .card-accent .card-accent-num,
  .card-accent .card-accent-link::after { transition: none !important; }
}


/* css/card-accents-applied.css */
/* ==========================================================================
   card-accents-applied.css — self-contained per-card accent system
   --------------------------------------------------------------------------
   Adds a top accent bar, accent-tinted icon-tile glow, and an accent-ring
   hover state to cards opted-in via class="card-accent-local" plus an inline
   style="--accent: #...".
   Intentionally SELF-CONTAINED — does not reference or depend on the
   card-accent scaffolding shipped in PR #6 (/css/card-accents.css). Once
   PR #6 merges, this file can be replaced by the shared class in a cleanup
   PR without visual regression.
   Palette (cycled across the 6 opt-in cards on index.html):
     #06B6D4 cyan    #6366F1 indigo   #10B981 emerald
     #8B5CF6 violet  #F59E0B amber    (cycle loops back to cyan)
   ========================================================================== */

.card-accent-local {
  --accent: #06B6D4;
  position: relative;
  isolation: isolate;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s ease;
}

/* Top accent bar — 3px, full width, radius-matched to parent card. */
.card-accent-local::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 40%, transparent) 0%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 40%, transparent) 100%
  );
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  opacity: 0.85;
  transform-origin: center;
  transform: scaleX(0.6);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* Soft accent halo behind the icon tile — scoped to the first .icon-tile child. */
.card-accent-local .icon-tile,
.card-accent-local .icon-tile-dark {
  position: relative;
  overflow: visible;
}
.card-accent-local .icon-tile::after,
.card-accent-local .icon-tile-dark::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 40%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}

/* Hover: accent bar extends full width, icon halo fades in, subtle lift. */
.card-accent-local:hover::before,
.card-accent-local:focus-within::before {
  transform: scaleX(1);
  opacity: 1;
}
.card-accent-local:hover .icon-tile::after,
.card-accent-local:hover .icon-tile-dark::after,
.card-accent-local:focus-within .icon-tile::after,
.card-accent-local:focus-within .icon-tile-dark::after {
  opacity: 1;
}
.card-accent-local:hover,
.card-accent-local:focus-within {
  box-shadow:
    0 14px 32px -14px color-mix(in srgb, var(--accent) 45%, transparent),
    0 2px 0 0 color-mix(in srgb, var(--accent) 25%, transparent) inset;
}

/* Respect the card-tilt transform on hover — we only add a ring, never
   overwrite transform. */

/* Reduced-motion: strip transitions but keep the accent bar visible at full. */
@media (prefers-reduced-motion: reduce) {
  .card-accent-local,
  .card-accent-local::before,
  .card-accent-local .icon-tile::after,
  .card-accent-local .icon-tile-dark::after {
    transition: none !important;
  }
  .card-accent-local::before {
    transform: scaleX(1);
    opacity: 1;
  }
}


/* css/cursor-fx.css */
/* ==========================================================================
   cursor-fx.css — chromatic cursor blob + precise tracking dot
   --------------------------------------------------------------------------
   Two additive layers rendered on top of the existing styles.css .cursor-glow.
   Intentionally low-opacity so both effects can coexist without clash.
   Gated via @media (pointer: fine) — no-op on touch devices.
   Reduced-motion: freeze both elements at 0 opacity.
   ========================================================================== */

.cursor-fx-blob,
.cursor-fx-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 60; /* below nav (z-50 + nested overlays) but above most content */
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(-9999px, -9999px, 0);
}

.cursor-fx-blob {
  width: 320px;
  height: 320px;
  border-radius: 9999px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(37, 99, 235, 0.55) 0%,
    rgba(6, 182, 212, 0.35) 45%,
    rgba(6, 182, 212, 0) 70%
  );
  mix-blend-mode: screen;
  filter: blur(14px);
  transition: opacity 0.4s ease;
}

.cursor-fx-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: rgba(6, 182, 212, 0.9);
  box-shadow: 0 0 18px 2px rgba(6, 182, 212, 0.45);
  filter: blur(1px);
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* Fade-in once the script marks .is-ready and mouse has moved. */
.cursor-fx-ready .cursor-fx-blob {
  opacity: 0.4; /* intentionally tuned down so it doesn't clash with .cursor-glow */
}
.cursor-fx-ready .cursor-fx-dot {
  opacity: 0.85;
}

/* Grow the dot slightly over interactive elements — hinted via body class
   toggled by cursor-fx.js. */
.cursor-fx-hover .cursor-fx-dot {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 24px 4px rgba(6, 182, 212, 0.55);
}

/* Disable on touch / coarse pointers and when user prefers reduced motion. */
@media (pointer: coarse) {
  .cursor-fx-blob,
  .cursor-fx-dot {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-fx-blob,
  .cursor-fx-dot {
    display: none !important;
  }
}


/* css/tiles-3d.css */
/* ============================================================
   tiles-3d.css — Tier 3A (2026-04-24)
   3D client-logo / partner-badge tiles.
   CSS-only transform-style: preserve-3d — no JS, no libraries.
   Appears below the existing marquee, does not replace it.
   ============================================================ */

.partners-3d {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  padding: 4rem 0 5rem;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.partners-3d-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.partners-3d-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2563EB;
  margin: 0 0 0.75rem;
  text-align: center;
}

.partners-3d-title {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: #0F172A;
  text-align: center;
  margin: 0 0 2.5rem;
  letter-spacing: -0.015em;
}

/* Grid shell — 2 rows × 3 cols on desktop, 2 cols on tablet, 1 col on mobile */
.partners-3d-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  perspective: 1200px;
}
@media (min-width: 560px) {
  .partners-3d-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .partners-3d-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* Tile — a flat card that subtly cants in 3D on hover. */
.tile-3d {
  position: relative;
  min-height: 112px;
  border-radius: 16px;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2, .9, .3, 1);
  will-change: transform;
}

.tile-3d:hover,
.tile-3d:focus-within {
  transform: rotateY(-8deg) rotateX(4deg);
}

/* Front + back faces share position; back is flipped 180°. */
.tile-3d-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 20px -10px rgba(15, 23, 42, 0.12);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow 420ms ease;
}

.tile-3d:hover .tile-3d-face {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 16px 36px -14px rgba(37, 99, 235, 0.28);
}

.tile-3d-face.back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
}

/* Letter-initial placeholder — used when a real logo file isn't in
   the repo yet. Each tile picks its own accent via --tile-accent. */
.tile-3d-initial {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--tile-accent, #2563EB);
  background: var(--tile-bg, rgba(37, 99, 235, 0.12));
  border: 1px solid var(--tile-border, rgba(37, 99, 235, 0.30));
  letter-spacing: -0.02em;
}

.tile-3d-name {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', Inter, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1E293B;
  text-align: center;
  letter-spacing: -0.005em;
}

.tile-3d-role {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748B;
}

/* Back-face content — white text on navy */
.tile-3d-face.back .tile-3d-name { color: #F8FAFC; }
.tile-3d-face.back .tile-3d-role { color: #94A3B8; }
.tile-3d-face.back .tile-3d-initial {
  color: var(--tile-back-color, #a5f3fc);
  background: var(--tile-back-bg, rgba(6, 182, 212, 0.22));
  border-color: var(--tile-back-border, rgba(6, 182, 212, 0.45));
}

/* Reduced motion — freeze the rotation, but keep the shadow swap
   so the hover still gives some feedback. */
@media (prefers-reduced-motion: reduce) {
  .tile-3d,
  .tile-3d-face { transition: box-shadow 200ms ease !important; }
  .tile-3d:hover,
  .tile-3d:focus-within { transform: none !important; }
  /* Back face would be invisible without the flip; hide it so it
     never shows an "upside down" state to motion-averse users. */
  .tile-3d-face.back { display: none; }
}

/* Touch devices can't hover — give the tiles a static lifted look + an
   :active tap-feedback state so they feel responsive rather than dead. */
@media (hover: none) {
  .tile-3d-face {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 12px 24px -12px rgba(15, 23, 42, 0.18);
  }
  .tile-3d:active .tile-3d-face {
    transform: scale(0.98);
    box-shadow:
      0 0 0 2px var(--tile-focus-ring, rgba(6, 182, 212, 0.40)),
      0 18px 32px -14px var(--tile-shadow, rgba(6, 182, 212, 0.55));
  }
  /* Back face is useless without rotation — hide it on touch to avoid
     any flicker if a stray focus is applied. */
  .tile-3d-face.back { display: none; }
}


/* css/service-detail.css */
/* ==========================================================================
   service-detail.css — template CSS for /services/[slug]/*.html pages
   --------------------------------------------------------------------------
   Self-contained: does NOT depend on /css/case-study.css (which lives in
   PR #6 and hasn't merged to main). Inherits Tailwind tokens + the
   brand palette from index.html via the shared Tailwind CDN config.
   When PR #6 + the case-study template merge, the two files can be merged
   in a follow-up cleanup PR; until then keep them independent.
   ========================================================================== */

/* ---------- Page chrome ---------- */
body.service-detail {
  background: #ffffff;
  color: #0F172A;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sd-main {
  padding-top: 6rem; /* clear the sticky nav */
}

.sd-container {
  max-width: 72rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  .sd-container { padding-left: 2rem; padding-right: 2rem; }
}

/* ---------- Hero band ---------- */
.sd-hero {
  padding: 3rem 0 4rem;
  background:
    radial-gradient(1000px 400px at 50% -100px, rgba(37, 99, 235, 0.12), transparent 60%),
    linear-gradient(180deg, #F8FAFC 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.sd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2563EB;
  font-weight: 500;
}
.sd-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.sd-title {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #0F172A;
  margin-top: 0.75rem;
}
.sd-title .sd-accent {
  background: linear-gradient(90deg, #2563EB, #06B6D4);
  -webkit-background-clip: text;
  background-clip: text;
  color: #2563EB;
  -webkit-text-fill-color: transparent;
}
.sd-deck {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #475569;
  max-width: 48rem;
}

/* ---------- Section headings shared across bands ---------- */
.sd-section { padding: 4rem 0; }
.sd-section--alt { background: #F8FAFC; }
.sd-section--dark {
  background: #0F172A;
  color: #E2E8F0;
}
.sd-section--dark .sd-h2,
.sd-section--dark .sd-eyebrow { color: #ffffff; }
.sd-section--dark .sd-eyebrow { color: #67E8F9; }

.sd-h2 {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  color: #0F172A;
  margin-top: 0.5rem;
}

/* ---------- Who it's for: 3-column panel ---------- */
.sd-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 768px) { .sd-fit { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.sd-fit-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sd-fit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -20px rgba(37, 99, 235, 0.35);
  border-color: rgba(37, 99, 235, 0.35);
}
.sd-fit-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2563EB;
  font-weight: 500;
}
.sd-fit-value {
  margin-top: 0.5rem;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: #0F172A;
  line-height: 1.35;
}
.sd-fit-note {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.55;
}

/* ---------- Workflow diagram ---------- */
.sd-flow {
  margin-top: 2rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 1.75rem 1rem;
  overflow-x: auto;
}
.sd-flow svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.sd-flow-caption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #64748B;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

/* ---------- Outcomes stat chips ---------- */
.sd-outcomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 640px) { .sd-outcomes { grid-template-columns: repeat(3, 1fr); } }

.sd-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sd-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(6, 182, 212, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.sd-stat-value {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3rem);
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sd-stat-label {
  margin-top: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #67E8F9;
}
.sd-stat-note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #94A3B8;
  line-height: 1.45;
}
.sd-outcomes-fineprint {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: #94A3B8;
  text-align: center;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ---------- Use cases list ---------- */
.sd-usecases {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) { .sd-usecases { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.sd-usecase {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 3px solid #2563EB;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 0.975rem;
  color: #334155;
  line-height: 1.55;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.sd-usecase:hover {
  transform: translateX(3px);
  border-left-color: #06B6D4;
}
.sd-usecase strong {
  display: block;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 0.25rem;
}

/* ---------- CTA block ---------- */
.sd-cta-band {
  margin-top: 2.5rem;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(37, 99, 235, 0.22), transparent 70%),
    linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  border-radius: 22px;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.sd-cta-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #67E8F9;
}
.sd-cta-title {
  margin-top: 0.75rem;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15;
}
.sd-cta-sub {
  margin-top: 0.75rem;
  color: #CBD5E1;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.sd-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
  color: #ffffff;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 12px 32px -10px rgba(37, 99, 235, 0.55);
}
.sd-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(6, 182, 212, 0.65);
}

/* ---------- Back link ---------- */
.sd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: #64748B;
  text-decoration: none;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.sd-back:hover { color: #2563EB; }

/* ---------- SVG flow step styles (used inline on each page) ---------- */
.sd-flow-step rect { fill: #ffffff; stroke: #E2E8F0; stroke-width: 1.5; }
.sd-flow-step text { font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 13px; fill: #0F172A; }
.sd-flow-step .sd-flow-sub { font-family: "Inter", sans-serif; font-weight: 400; font-size: 11px; fill: #64748B; }
.sd-flow-step .sd-flow-icon { fill: #2563EB; }
.sd-flow-arrow { stroke: #94A3B8; stroke-width: 1.8; fill: none; marker-end: url(#sd-arrow-head); }

/* Reduced motion: freeze hover transforms. */
@media (prefers-reduced-motion: reduce) {
  .sd-fit-card,
  .sd-usecase,
  .sd-cta-btn { transition: none !important; }
  .sd-fit-card:hover,
  .sd-usecase:hover,
  .sd-cta-btn:hover { transform: none !important; }
}


/* css/award-craft.css */
/* ==========================================================================
   YourBrandedAI — Award-Craft Layer
   --------------------------------------------------------------------------
   Net-new stylesheet loaded LAST in <head>. Applies the 7-pillar craft pass:
     - Typography as architecture (Space Grotesk display, Fraunces editorial,
       viewport-filling hero scale, negative tracking)
     - Custom cubic-bezier easing tokens (no `ease`, no `linear`)
     - Warm color refinement (no pure #000 / #fff for surfaces & ink)
     - Branded ::selection
     - Designed :focus-visible
     - Smooth-scroll polish (Lenis is initialized in /js/lenis-init.js)
   --------------------------------------------------------------------------
   Ground rules:
     • Layered ON TOP of /css/styles.css — never overrides hero workflow SVG
       animations (those use their own scoped keyframes).
     • Every motion respects prefers-reduced-motion at the bottom of the file.
     • Every color contrast meets WCAG AA at body sizes.
   ========================================================================== */

/* ---------- 1. Easing tokens ---------- */
:root {
  /* Premium curves — used for any hover/transition that touches branded UI */
  --ease-expo-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart-out:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-circ-out:    cubic-bezier(0.22, 1, 0.36, 1);

  /* Warm ink + warm surface — replaces the pure #000/#fff feel without
     re-skinning every component. Used by ::selection and below. */
  --ink-warm:     #0a0a0a;       /* slightly warm near-black */
  --surface-warm: #fafaf9;       /* slightly warm near-white */
}

/* ---------- 2. Typography as architecture ---------- */

/* Pull Space Grotesk + Fraunces from Google Fonts.
   These are loaded via the <link> in index.html; this @font-face fallback
   keeps the cascade explicit if the link ever drops. */

/* Display: Bricolage Grotesque (variable) replaces Space Grotesk wherever
   .font-display lands. Bricolage carries an opsz axis (12..96) so headlines
   can engage the larger optical-size design and body-scale display lines
   keep their humanist warmth. Falls back through Space Grotesk → Inter so
   a missing-network render still renders cleanly. */
.font-display,
.h-split,
.hero-headline,
.section-headline,
h1, h2, h3,
.faq-trigger,
.testimonial-quote,
.partner-logo,
.eyebrow,
.metric-counter {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
  font-feature-settings: 'ss01' on, 'ss02' on;
  font-variation-settings: 'opsz' 32;
}

/* Editorial accent: Fraunces — used on a single signature word/phrase per
   section to add the "screenshot moment". Applied via .accent-serif. */
.accent-serif {
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Hero: viewport-filling scale with manual tracking.
   Tightens to -0.04em at desktop sizes (the skill's recommended display
   tracking). `text-wrap: balance` controls line breaks without manual <br>s.
   This rule is scoped to the hero only — landing-page H2s keep their tier-2
   scale to preserve reading rhythm. */
.hero-mesh h1.h-split,
.hero-mesh h1.hero-headline {
  font-size: clamp(3rem, 9.2vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
  /* Engage Bricolage's larger optical-size axis on hero scale. */
  font-variation-settings: 'opsz' 96;
}
.hero-mesh h1.h-split .block,
.hero-mesh h1.hero-headline .block {
  display: block;
}
/* Hero subtitle gets a subtle scale-up + balance for readability. */
.hero-mesh h1.h-split + p,
.hero-mesh h1.hero-headline + p,
.hero-mesh .reveal > p:not(.eyebrow):not(.caption-2) {
  text-wrap: pretty;
  max-width: 38ch;
}

/* Hero headline staggered fade-in — mirrors the `.h-split` reveal feel
   (translateY + opacity) without going through the JS split-text passes that
   mangled the words. Two lines, two staged delays. The `.hero-accent-mark`
   inside line 2 keeps its own keyframe for the "screenshot moment". */
.hero-mesh h1.hero-headline .block {
  opacity: 0;
  transform: translateY(0.6em);
  animation: heroHeadlineRise 0.85s var(--ease-expo-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
.hero-mesh h1.hero-headline .block:nth-child(1) { animation-delay: 0.08s; }
.hero-mesh h1.hero-headline .block:nth-child(2) { animation-delay: 0.22s; }
@keyframes heroHeadlineRise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mesh h1.hero-headline .block {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero ambient video loop ----------
   The legacy `.hero-video-layer` rules in styles.css set
   `mix-blend-mode: luminosity` + `opacity: 0.45`, which rendered a real
   video almost invisible against the dark hero backdrop. These overrides
   drop the blend mode, lift opacity into a range that reads with the chat
   panel still on top, and gracefully cover-fit the <video>. Loaded via
   craft.bundle.css (after styles.css) so cascade wins without editing the
   base stylesheet. */
.hero-mesh .hero-video-layer {
  mix-blend-mode: normal;
  opacity: 0.6;
}
.hero-mesh .hero-video-layer .hero-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  /* Subtle warm cyan tint via CSS filter so the cool globe matches the
     existing hero gradient rather than reading as a separate asset. */
  filter: saturate(1.15) contrast(1.05);
}
@media (prefers-reduced-motion: reduce) {
  /* Hide the video element only — the static <img#hero-media> stays visible
     as the poster. The JS swap is also gated on prefers-reduced-motion so
     no video will be injected in this case. */
  .hero-mesh .hero-video-layer video.hero-loop {
    display: none;
  }
}

/* Heading-2 across landing sections — push contrast a notch (still under
   hero scale, preserves rhythm). */
.h-split:not(.hero-mesh .h-split),
.hero-headline:not(.hero-mesh .hero-headline),
.section-headline:not(.hero-mesh .section-headline),
section h2.font-display {
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Body micro-typography */
body {
  font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'ss01' on;
  text-rendering: optimizeLegibility;
}

/* ---------- 3. Color refinement ---------- */

/* Warm body surface (replaces pure #fff feel) — kept very subtle so existing
   sections that explicitly set `bg-white` still read as white. */
body.bg-white,
body {
  background-color: var(--surface-warm);
}

/* ---------- 4. Branded ::selection ---------- */
::selection {
  background: #06B6D4;          /* brand-cyan */
  color: #ffffff;
  text-shadow: none;
}
::-moz-selection {
  background: #06B6D4;
  color: #ffffff;
  text-shadow: none;
}

/* ---------- 5. Designed :focus-visible ---------- */
/* Replaces the generic 3px #93c5fd outline with a brand-tinted, double-ring
   indicator that meets WCAG 2.4.7 (3:1 contrast against both light and dark
   surfaces) and matches the cyan accent used on hover. */
:focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 0.2s var(--ease-expo-out);
}
.btn:focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(6, 182, 212, 0.18);
}
/* On dark surfaces, the cyan ring already pops — but we want a subtle inner
   halo so the outline reads against the gradient mesh. */
.hero-mesh :focus-visible,
.bg-brand-navy :focus-visible,
[class*="bg-brand-navy"] :focus-visible {
  outline-color: #67E8F9;        /* lighter cyan for dark BG */
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.25);
}

/* ---------- 6. Motion easing — surgical overrides ---------- */
/* We intentionally DO NOT mass-override every transition in styles.css
   (would be brittle). Instead we give the most-visible interactive elements
   a premium curve. The ::after links, magnetic buttons, and reveal stack
   already use cubic-beziers; this layer upgrades the rest. */

.btn,
.btn-primary,
.btn-ghost,
.btn-magnetic {
  transition:
    transform 0.45s var(--ease-expo-out),
    box-shadow 0.45s var(--ease-expo-out),
    background-color 0.35s var(--ease-quart-out),
    color 0.35s var(--ease-quart-out),
    border-color 0.35s var(--ease-quart-out);
}

.link-reveal {
  transition: color 0.35s var(--ease-quart-out);
}

/* The reveal stagger (used heavily across sections) gets a luxury curve. */
.reveal,
.reveal-stagger > *,
.reveal-scale,
.reveal-blur {
  transition:
    transform 0.9s var(--ease-expo-out),
    opacity 0.7s var(--ease-quart-out),
    filter 0.9s var(--ease-expo-out) !important;
}

/* Niche pills + cards — give them a snappier-but-eased hover. */
.niche-pill,
.card-accent,
.tier-card {
  transition:
    transform 0.5s var(--ease-expo-out),
    border-color 0.4s var(--ease-quart-out),
    background-color 0.4s var(--ease-quart-out),
    box-shadow 0.5s var(--ease-expo-out);
}

/* ---------- 7. Hero "signature moment": kinetic accent ---------- */
/* The hero already has a strong workflow SVG (don't touch). What it lacks
   is a typographic signature. We add a single italic Fraunces word that
   slides up on load, plus a tightened display scale (above).
   The element is placed in HTML as <span class="hero-accent-mark">. */
.hero-accent-mark {
  display: inline-block;
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #67E8F9 0%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #67E8F9;
  -webkit-text-fill-color: transparent;
  /* Custom reveal — runs once on load */
  opacity: 0;
  transform: translateY(0.4em) skewY(2deg);
  animation: heroAccentRise 1.4s var(--ease-expo-out) 0.45s forwards;
  will-change: transform, opacity;
}
@keyframes heroAccentRise {
  to {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

/* ---------- 8. Lenis smooth-scroll co-existence ---------- */
/* Lenis adds .lenis class to <html> when active; we disable native smooth
   scroll to prevent fight, and let Lenis own the scroll. */
html.lenis {
  scroll-behavior: auto !important;
}
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: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ==========================================================================
   10. Section headline reveal (post PR #15 fix)
   --------------------------------------------------------------------------
   Replaces the dual-pass `.h-split` JS reveal that mangled whitespace text
   nodes between word spans. Pure CSS — no JS rewriting of textContent.

   Pattern: every section h2 (was `.h-split`) is now `.section-headline`.
   Each h2 lives inside a `<div class="reveal">` parent which already
   receives `.is-visible` from the existing IntersectionObserver in main.js.
   We piggyback on that state to stage the reveal: the h2 itself gets a
   subtle rise, then any `<span class="block">` lines inside it stagger
   up with a small delay each — supports arbitrary numbers of lines, no
   `:nth-child` cap.
   ========================================================================== */
.section-headline {
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity 0.85s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.85s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform, opacity;
}
.reveal.is-visible .section-headline,
.reveal-stagger.is-visible .section-headline,
.is-visible > .section-headline,
.is-visible .section-headline {
  opacity: 1;
  transform: translateY(0);
}

/* When the headline contains explicit <span class="block"> lines, stage them
   too — but additively. The h2 still rises as a whole; the spans add a
   secondary cascade that only kicks in if there are multiple lines.
   Using sibling-aware delays via custom property fallback keeps any number
   of spans working without an `:nth-child` cap. */
.section-headline .block {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.7s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.7s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.section-headline .block:nth-child(1) { transition-delay: 0.05s; }
.section-headline .block:nth-child(2) { transition-delay: 0.18s; }
.section-headline .block:nth-child(3) { transition-delay: 0.31s; }
.section-headline .block:nth-child(4) { transition-delay: 0.44s; }
/* Beyond four lines is unusual but we keep the cascade alive at a
   capped delay rather than exploding — Awwwards crit: long stagger feels
   sluggish. */
.section-headline .block:nth-child(n+5) { transition-delay: 0.55s; }
.reveal.is-visible .section-headline .block,
.reveal-stagger.is-visible .section-headline .block,
.is-visible > .section-headline .block,
.is-visible .section-headline .block {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .section-headline,
  .section-headline .block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   11. Use Cases section — contrast hardening (Issue 2)
   --------------------------------------------------------------------------
   The earlier `linear-gradient` on `.case-studies` could read inconsistently
   when paired with the warm body surface bleed-through. Lock the section
   to a solid deep navy and explicitly set descendant text colors so cards
   and copy never collapse into a near-cream haze.
   ========================================================================== */
.case-studies {
  background: #0F172A;
  color: #E2E8F0;
}
.case-studies .section-headline,
.case-studies h2 {
  color: #FFFFFF;
}
.case-studies p,
.case-studies .text-slate-300 {
  color: #CBD5E1;
}
.case-studies .caption-2 {
  color: #94A3B8;
}
.case-studies .case-card {
  background: rgba(255, 255, 255, 0.04);
  color: #E2E8F0;
}
.case-studies .case-card .case-title {
  color: #FFFFFF;
}
.case-studies .case-card .case-outcome {
  color: #CBD5E1;
}

/* ==========================================================================
   12. Integrations strip — generic, on-brand (Issue 3)
   --------------------------------------------------------------------------
   Drop named tools. Replace with abstract category pills on a soft
   brand-cyan-to-blue gradient panel. Subtle enough that text contrast
   stays AA at body sizes. Decorative blobs add visual interest without
   needing logos.
   ========================================================================== */
.partner-strip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(6, 182, 212, 0.12), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(37, 99, 235, 0.10), transparent 55%),
    linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 50%, #F0F9FF 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding: 3rem 0 3.25rem;
}
.partner-strip::before,
.partner-strip::after {
  content: '';
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(48px);
  opacity: 0.55;
  z-index: 0;
}
.partner-strip::before {
  width: 320px;
  height: 320px;
  top: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.35), transparent 70%);
}
.partner-strip::after {
  width: 380px;
  height: 380px;
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.30), transparent 70%);
}
.partner-strip > .container-x {
  position: relative;
  z-index: 1;
}
.partner-strip .partner-label {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #475569;
  text-align: center;
  margin-bottom: 0.5rem;
}
.partner-strip .partner-headline {
  text-align: center;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  color: #0F172A;
  margin: 0 auto 1.5rem;
  max-width: 30ch;
  text-wrap: balance;
}
.partner-strip .partner-headline .accent {
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #06B6D4 0%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #06B6D4;
  -webkit-text-fill-color: transparent;
}
.partner-strip .category-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  justify-content: center;
  align-items: center;
}
.partner-strip .category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.05rem;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: #0F172A;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 9999px;
  transition: transform 0.3s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.3s ease,
              background 0.3s ease;
}
.partner-strip .category-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, 0.45);
  background: rgba(255, 255, 255, 0.92);
}
.partner-strip .category-pill .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #06B6D4, #2563EB);
  flex-shrink: 0;
}
.partner-strip .partner-footnote {
  margin-top: 1.25rem;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: #64748B;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .partner-strip .category-pill { transition: none; }
}

/* ==========================================================================
   13. Section spacing tune-up (Issue 4)
   --------------------------------------------------------------------------
   Audited top-to-bottom. The cramped sections were the dense card grids
   right after a section heading — copy + cards needed more breathing room.
   We bump:
     - `py-20 md:py-28` sections to `py-24 md:py-32` equivalents (only on
       the dark navy Pain Points + Use Cases sections, where the rhythm
       was tightest).
     - The intro-to-grid gap inside dense card sections (was `mt-12`,
       reads cramped on desktop) gets a one-step bump.
   We do this with attribute selectors so we don't have to touch every
   class string in index.html.
   ========================================================================== */
section[data-nav-label="Pain Points"],
section[data-nav-label="Use Cases"],
section[data-nav-label="What We Optimize"] {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
section[data-nav-label="Pain Points"] .grid.md\:grid-cols-3,
section[data-nav-label="Use Cases"] .grid.md\:grid-cols-2,
section[data-nav-label="What We Optimize"] .grid {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
/* Section eyebrow + caption + headline cluster — give the intro block
   more room to breathe before the body content begins. */
section .max-w-3xl.reveal > p.eyebrow + p.caption-2,
section .max-w-3xl.reveal > p.caption-2 {
  margin-top: 0.65rem;
}
section .max-w-3xl.reveal > .section-headline,
section .max-w-2xl.reveal > .section-headline {
  margin-top: 0.85rem;
}

/* ==========================================================================
   14. Reduced motion (final consolidation)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-accent-mark {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal,
  .reveal-stagger > *,
  .reveal-scale,
  .reveal-blur {
    transition: none !important;
  }
  :focus-visible {
    transition: none;
  }
}

/* ==========================================================================
   15. Brand lockup (header logo + wordmark)
   --------------------------------------------------------------------------
   Replaces the text-only wordmark in the top nav with a horizontal lockup:
   the new geometric Y mark + the "yourbrandedai" wordmark in the display
   family. The mark sits at ~28px tall in the nav, scaled up at the footer
   if reused later. Hover state is a tiny lift on the mark only — the
   wordmark stays still so the lockup doesn't feel jittery.
   ========================================================================== */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #0F172A;
  /* Slightly tighter line so the mark + wordmark visually align */
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.brand-lockup .brand-mark {
  /* Mark is now the Canva 4-petal compass PNG (350×320, ~1.094:1).
     Lock height; let width follow intrinsic ratio so the mark stays crisp,
     not squished. HTML width/height attrs (35×32) reserve the box pre-load
     to prevent CLS. */
  height: 32px;
  width: auto;
  flex-shrink: 0;
  display: block;
  transition: transform 0.4s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.brand-lockup:hover .brand-mark {
  transform: translateY(-1px);
}
.brand-lockup .brand-wordmark {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 18;
  color: inherit;
  /* Lowercase wordmark — matches the geometric mark's quiet confidence */
  text-transform: lowercase;
}
/* Footer wordmark when used inside a dark surface */
footer .brand-lockup,
.bg-brand-navy .brand-lockup,
[class*="bg-brand-navy"] .brand-lockup {
  color: #FFFFFF;
}
.brand-lockup .wordmark-ai {
  /* Preserve the existing brand-blue accent on the AI suffix */
  color: var(--brand-blue, #2563EB);
}
@media (prefers-reduced-motion: reduce) {
  .brand-lockup .brand-mark { transition: none; }
}

/* ==========================================================================
   16. Nav: blocked layout + Pages dropdown (PR — design/nav-blocks-pages-dropdown)
   --------------------------------------------------------------------------
   The nav is composed of three discrete visual blocks separated by the flex
   row:
     [brand]        [primary links chip]        [actions: section pill + CTA + Pages]
   Each block carries its own glass surface so the bar reads as composed
   chips rather than a row of bare text.

   The "01 / 13 — Intro" counter has been removed entirely (markup, JS hook,
   and CSS rule). The surviving signals are:
     - .nav-section-label  (active section name, fed by /js/nav-progress.js)
     - .nav-progress       (2px blue→cyan scroll-progress bar)

   Defensive guard: any legacy .nav-section-counter that ever ships in markup
   stays hidden so it cannot leak through a stale cache.
   ========================================================================== */
.nav-section-counter { display: none !important; }

/* --- Block surfaces ------------------------------------------------------ */
.nav-row { gap: 0.75rem; }
@media (min-width: 1024px) { .nav-row { gap: 1rem; } }

.nav-block {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Brand block stays text-only (the wordmark IS the surface) so the logo
   doesn't sit inside a chip. */
.nav-block--brand {
  padding: 0;
  background: transparent;
  border: 0;
}
/* Primary links block — single chip, internal dividers separate items. */
.nav-block--links {
  padding: 0.35rem 0.6rem;
  gap: 0.15rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-glass.is-scrolled .nav-block--links {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.12);
}
.nav-block--links .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--brand-slate, #475569);
  border-radius: 9999px;
  transition: color 0.18s ease, background 0.18s ease;
}
@media (min-width: 1024px) {
  .nav-block--links .nav-link { padding: 0.45rem 0.85rem; font-size: 0.92rem; }
}
.nav-block--links .nav-link:hover,
.nav-block--links .nav-link:focus-visible {
  color: var(--brand-blue, #2563EB);
  background: rgba(37, 99, 235, 0.06);
}
.nav-block--links .nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(15, 23, 42, 0.08);
  margin: 0 0.05rem;
}

/* Actions block — wraps section pill, CTA, dropdown, and the mobile toggle. */
.nav-block--actions {
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .nav-block--actions { gap: 0.65rem; }
}
.nav-block--actions .nav-cta {
  /* Tighten the CTA so it reads as a chip alongside the dropdown. */
  padding: 0.55rem 1.05rem;
  font-size: 0.92rem;
}

/* --- Section-name pill (preserved from PR #16) -------------------------- */
.nav-section-label {
  display: none;
  align-items: center;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--brand-blue, #2563EB);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
  /* Hide when empty so the slot doesn't paint a blank pill on first load. */
  min-height: 1px;
}
.nav-section-label:empty { display: none !important; }
@media (min-width: 1280px) {
  .nav-section-label { display: inline-flex; }
}
.nav-glass.is-scrolled .nav-section-label {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.12);
}

/* --- Pages dropdown ----------------------------------------------------- */
.nav-pages { position: relative; display: inline-flex; }
.nav-pages-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--brand-slate, #334155);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-pages-trigger:hover,
.nav-pages-trigger:focus-visible {
  color: var(--brand-blue, #2563EB);
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(37, 99, 235, 0.35);
}
.nav-pages-trigger[aria-expanded="true"] {
  color: var(--brand-blue, #2563EB);
  background: #FFFFFF;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 6px 20px -10px rgba(37, 99, 235, 0.4);
}
.nav-pages-chevron {
  transition: transform 0.2s ease;
}
.nav-pages-trigger[aria-expanded="true"] .nav-pages-chevron {
  transform: rotate(180deg);
}
.nav-pages-label {
  /* Compact label on small screens so the trigger fits beside the CTA. */
  display: none;
}
@media (min-width: 640px) {
  .nav-pages-label { display: inline; }
}

/* Panel */
.nav-pages-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 60;
  width: min(92vw, 340px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 0.6rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 24px 48px -16px rgba(15, 23, 42, 0.18),
    0 8px 16px -8px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Closed state */
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.nav-pages.is-open .nav-pages-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (max-width: 639px) {
  /* On small screens, anchor to the right edge of the viewport rather than
     the trigger so the panel doesn't overflow. */
  .nav-pages-panel {
    right: -0.5rem;
    width: calc(100vw - 1.5rem);
    max-width: 360px;
  }
}

.nav-pages-group + .nav-pages-group {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.nav-pages-grouptitle {
  margin: 0.35rem 0.7rem 0.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A3B8;
}
.nav-pages-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: #1E293B;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nav-pages-item:hover,
.nav-pages-item:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  color: var(--brand-blue, #2563EB);
  outline: none;
}
.nav-pages-item.is-active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.06));
  color: var(--brand-blue, #2563EB);
  font-weight: 600;
  position: relative;
}
.nav-pages-item.is-active::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  flex-shrink: 0;
}

/* Reduced motion: no slide/scale, just a fade so the menu still feels alive
   without violating user preference. */
@media (prefers-reduced-motion: reduce) {
  .nav-pages-panel {
    transition: opacity 0.12s ease;
    transform: none !important;
  }
  .nav-pages-chevron { transition: none; }
}

/* Mobile-toggle hamburger sits inside the actions block on <768 — make sure
   the border doesn't double up against the dropdown trigger when both render. */
.nav-toggle-btn { background: rgba(255, 255, 255, 0.6); }

/* (legacy .nav-section-label rules retired — see §16 above for the canonical
   block, which adds :empty hiding and a 1280px breakpoint to avoid crowding
   the dropdown trigger at 1024–1279.) */

/* In-nav 2px progress bar — driven by --scroll-progress on <html>.
   The host #site-nav already has position:fixed via Tailwind utility.
   We drop the .nav-glass bottom border because the progress bar replaces
   it as the section divider. The legacy fixed top:0 progress bar in
   styles.css is hidden so we don't render two indicators. */
.nav-glass { border-bottom: 0 !important; }
.scroll-progress { display: none !important; }
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.nav-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
  /* No transition on transform — we want pixel-perfect sync to scroll. */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  /* Even with reduced motion the bar is informative, not decorative — keep
     it but suppress any easing. */
  .nav-progress-fill { transition: none; }
}

/* ==========================================================================
   17. Cream-bg tonal fills — soft light-blue treatments
   --------------------------------------------------------------------------
   Walks the page top-to-bottom, lifting the rhythm of the cream/white
   sections so they don't sit as flat slabs against the dark sections
   above and below. All tints stay at 0.04..0.08 alpha so body copy
   contrast stays AA.
   ========================================================================== */

/* Before/After section — soft cyan tint at the bottom edge so it eases
   into the dark Use Cases below. */
section.bg-white.border-t.border-slate-100:has(.ba-slider) {
  background: linear-gradient(180deg, #FAFAF9 0%, #EFF6FF 100%);
}
/* Fallback for browsers without :has() — same effect via class hook on
   the ba-slider's parent through descendant. (At April 2026 :has has near
   universal support; this is belt-and-suspenders.) */
.ba-slider {
  /* No-op: marker so we can re-target if needed */
}

/* ROI Calculator — soft cyan radial accent in the top-right corner. */
#roi-calc {
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(6, 182, 212, 0.06), transparent 50%),
    #FFFFFF;
}

/* Insights / Resources — opposite corner for visual variety. */
#resources {
  position: relative;
  background:
    radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.05), transparent 55%),
    #FFFFFF;
}

/* Comparison section (Tool Stack vs. ours) — gentle blue tonal floor. */
section.bg-white[data-nav-label="Comparison"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

/* Lead-magnet / "Start Here" already uses .lead-mesh; we add a subtle
   transition gradient at the top to bridge from the dark Process section.
   Keep this surgical — only the top 80px so the existing mesh stays intact. */
#lead-magnet {
  position: relative;
}
#lead-magnet::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.06) 0%, transparent 100%);
  pointer-events: none;
}

/* Inline newsletter section — soft blue-into-navy bridge so the resources
   section reads as a connected band into the footer. */
.resource-newsletter {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

/* ==========================================================================
   18. ROI inputs — branded form polish
   --------------------------------------------------------------------------
   The ROI calc has its own classes already in styles.css; we don't fight
   that cascade. We do upgrade the focus ring and the number input's
   default chrome so it reads as designed, not browser-default.
   ========================================================================== */
.roi-number {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', 'Inter', sans-serif;
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.01em;
}
.roi-number:focus,
.roi-number:focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 2px;
  border-radius: 6px;
}
.roi-range:focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 4px;
  border-radius: 9999px;
}

/* ==========================================================================
   19. Polish — text-wrap balance & orphan control
   ========================================================================== */
section h2.section-headline,
section .section-headline,
section h2.font-display {
  text-wrap: balance;
}
.tier2b-h2,
.hero-headline {
  text-wrap: balance;
}

/* Card hover lift — applied to Pain Points / Use Cases / Service tile
   classes if not already covered by their specific rule. Keeps lift +
   accent border consistent with the niche-pill feel. */
.pain-card,
.case-card,
.tier-card,
.resource-card {
  transition:
    transform 0.5s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color 0.4s var(--ease-quart-out, cubic-bezier(0.25, 1, 0.5, 1)),
    box-shadow 0.5s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.pain-card:hover,
.resource-card:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 182, 212, 0.35);
  box-shadow: 0 8px 28px -12px rgba(15, 23, 42, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .pain-card,
  .case-card,
  .tier-card,
  .resource-card {
    transition: none;
  }
  .pain-card:hover,
  .resource-card:hover {
    transform: none;
  }
}