:root{
  --carbon:#2C3438;
  --carbon-light:#3d474c;
  --srt:#CF2D26;
  --srt-glow:rgba(207,45,38,0.25);
  --white:#FFFFFF;
  --gray-50:#F8FAFC;
  --gray-100:#F1F5F9;
  --gray-200:#E2E8F0;
  --gray-400:#94A3B8;
  --gray-600:#475569;
  --gray-900:#0F172A;
  
  /* Deep Premium Gradients */
  --srt-gradient: linear-gradient(135deg, #E63946 0%, #CF2D26 50%, #A91C16 100%);
  --white-gradient: linear-gradient(160deg, #FFFFFF 0%, #F4F6F9 50%, #EEF1F6 100%);
  --carbon-gradient: radial-gradient(circle at top right, #3d474c 0%, #2C3438 60%, #1a1f22 100%);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--gray-900);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ── NAV — DUAL-STATE GLASSMORPHIC ── */
#global-header {
  min-height: 64px;
}
nav{
  position:fixed;top:0;width:100%;z-index:100;
  border-bottom: none;
}
nav::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  /* DEFAULT: White glass (over dark hero canvas) */
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  /* Smooth transition between states */
  transition: background 0.5s ease;
  pointer-events: none;
}
nav::after{
  content:'';
  position:absolute;inset:0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  pointer-events:none;
  transition: border-color 0.5s ease;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
/* SCROLLED STATE: Dark carbon glass */
nav.nav--scrolled::before{
  background: linear-gradient(180deg, rgba(34, 40, 44, 0.95) 0%, rgba(18, 24, 26, 0.9) 100%);
}
nav.nav--scrolled{
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
nav.nav--scrolled::after{
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:0 28px;
  height:64px;display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:2;
}
/* Logo — image asset, two variants */
/* ── LOGO — Dual-state crossfade ──
   CURRENT SETUP: Both states use the same image file with CSS filters
   to guarantee visibility regardless of what the source image contains.

   FUTURE LOGO SWAP:
     When you have your own logo art, place the files in assets/logos/ and
     update the two src attributes in the HTML nav logo block.
     - Light nav logo (dark-colored, for white bg): assets/logos/shiftstack-logo-light.avif
     - Dark nav logo (light-colored, for dark bg):  assets/logos/shiftstack-logo-dark.avif
     Then REMOVE the two filter lines below (marked TEMP FILTER).
     Both images should be the same dimensions for a clean crossfade.
*/
.nav-logo{
  display:flex;align-items:center;text-decoration:none;
  position:relative;
  height:100%;
  max-width: 220px;
  flex-shrink: 0;
}
.nav-logo img{
  max-width:100%;
  height:auto;
  max-height:36px;
  object-fit: contain;
  display:block;
  pointer-events:none;
  /* Crossfade on opacity + filter in sync */
  transition: opacity 0.45s ease, filter 0.45s ease;
}
/* Light variant: shown on white-glass (default) nav — Shift Stack Main (coloured) */
.nav-logo .logo-light{
  opacity:1;
  position:relative;
  z-index:1;
}
/* Dark variant: stacked on top, invisible by default — Shift Stack White */
.nav-logo .logo-dark{
  opacity:0;
  position:absolute;
  top:50%; left:0;
  transform: translateY(-50%);
  width:auto;
  z-index:2;
}
/* Scrolled: fade out light → reveal dark */
nav.nav--scrolled .nav-logo .logo-light{ opacity:0; }
nav.nav--scrolled .nav-logo .logo-dark { opacity:1; }
.nav-links{display:flex;gap:32px;}
.nav-links a{
  /* Default: dark text on white glass */
  color:rgba(15,23,42,0.65);font-size:14px;font-weight:500;
  text-decoration:none;transition:color .3s;letter-spacing:.01em;
}
.nav-links a:hover{color:var(--gray-900);}
/* Scrolled state: light text on dark glass */
nav.nav--scrolled .nav-links a{color:rgba(255,255,255,0.6);}
nav.nav--scrolled .nav-links a:hover{color:white;}
/* Book Audit CTA — white slide-fill on hover */
.btn-nav{
  background: var(--srt-gradient);
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease, opacity 0.3s ease;
  box-shadow: 0 2px 12px var(--srt-glow);
}
.btn-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: inherit;
}
.btn-nav:hover {
  color: #0F172A;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.btn-nav:hover::after {
  transform: translateY(0);
}
.btn-nav:active { transform: translateY(0); scale: 0.97; }
/* Burger button */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;padding:6px;background:none;border:none;
  cursor:pointer;border-radius:6px;transition:background .2s;
}
.nav-burger:hover{background:rgba(0,0,0,0.06);}
nav.nav--scrolled .nav-burger:hover{background:rgba(255,255,255,0.08);}
.nav-burger span{
  display:block;height:2px;width:22px;border-radius:2px;
  /* Default: dark bars on white glass */
  background:rgba(15,23,42,0.7);
  transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, background 0.4s ease;
  transform-origin:center;
}
/* Scrolled: light bars on dark glass */
nav.nav--scrolled .nav-burger span{background:rgba(255,255,255,0.8);}
/* Burger → X animation */
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(135deg);}
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0) translateX(-10px);}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-135deg);}
/* Mobile drawer */
.nav-mobile{
  display:none;
  flex-direction:column;
  /* True Apple Glassmorphism: high transparency, heavy blur, saturated colors */
  background: rgba(22, 28, 30, 0.65);
  padding:20px 24px 24px;
  gap:4px;
  /* Floating card look instead of edge-to-edge */
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.nav-mobile a{
  color:rgba(255,255,255,0.85);font-size:16px;font-weight:500;
  text-decoration:none;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color .2s, background .2s;
  border-radius: 12px;
}
.nav-mobile a:last-of-type{border-bottom:none;}
.nav-mobile a:hover{color:white; background:rgba(255,255,255,0.08);}
.nav-mobile .btn-nav{width:100%;text-align:center;margin-top:12px;padding:14px;font-size:15px;}
/* Mobile backdrop */
.nav-backdrop { display: none; }

/* Mobile breakpoint — matches the 1024px threshold where nav-links vanish */
@media(max-width:1024px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  
  /* Hide top Book Audit button when drawer is open */
  .nav-inner:has(.nav-burger.open) .btn-nav {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateX(10px);
    pointer-events: none;
  }
  
  /* Glassmorphic Backdrop Overlay */
  .nav-backdrop {
    display: block;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    -webkit-backdrop-filter: blur(48px) saturate(200%);
    backdrop-filter: blur(48px) saturate(200%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 1;
  }
  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Apple-Style Glass Floating Dropdown */
  .nav-mobile {
    display:flex;
    position:fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    width: auto;
    z-index: 100;
    -webkit-transform: translateZ(0); /* Force GPU layer for Safari */
    transform: translateZ(0);
    
    transform-origin: top right;
    transform: scale(0.95) translateY(-10px);
    opacity: 0;
    pointer-events: none;
    /* Apple spring physics */
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.4s ease;
  }
  .nav-mobile.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Staggered Fragment Reveal */
  .nav-mobile a, .nav-btn-wrapper {
    opacity:0;
    transform: translateY(12px) scale(0.98);
    transition: color 0.2s, background 0.2s, opacity 0.4s ease, transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  
  .nav-mobile.open a, .nav-mobile.open .nav-btn-wrapper {
    opacity:1;
    transform: translateY(0) scale(1);
  }
  
  /* Slightly faster staggers for Apple fluidity */
  .nav-mobile.open a:nth-of-type(1) { transition-delay: 0.04s; }
  .nav-mobile.open a:nth-of-type(2) { transition-delay: 0.08s; }
  .nav-mobile.open a:nth-of-type(3) { transition-delay: 0.12s; }
  .nav-mobile.open a:nth-of-type(4) { transition-delay: 0.16s; }
  .nav-mobile.open .nav-btn-wrapper { transition-delay: 0.20s; }
}

/* ── HERO (DARK CARBON — ANTIMETAL TECHNIQUE) ── */
.hero{
  /* Base surface — content-driven height, NOT viewport-driven */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 28px 100px;
  position: relative;
  overflow: clip;
  text-align: center;
}

/* Layer 1: Canvas particle grid */
.hero-canvas{
  position:absolute;inset:0;pointer-events:none;
  width:100%;height:100%;
  /* Extend mask further so bottom-center blob is fully visible */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}

/* Layer 2: Primary radial glow — SRT Red bloom from bottom-center (Antimetal bg-hero/24 radial) */
.hero-glow{
  position:absolute;
  bottom:-80px;left:50%;transform:translateX(-50%);
  width:900px;height:500px;pointer-events:none;
  background:radial-gradient(ellipse at center top,
    color-mix(in oklab, #CF2D26 22%, transparent) 0%,
    color-mix(in oklab, #CF2D26 8%, transparent) 40%,
    transparent 70%
  );
}

/* Layer 3: Atmospheric top-edge vignette — subtle dark fade from edges */
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(30,37,40,0) 0%, rgba(30,37,40,0.7) 100%),
    radial-gradient(ellipse 80% 40% at 0% 50%, rgba(30,37,40,0.4) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 100% 50%, rgba(30,37,40,0.4) 0%, transparent 60%);
}

/* Layer 4: Bottom fade-out (page transition into white stat strip) */
.hero-fade{
  position:absolute;bottom:0;left:0;right:0;height:180px;pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, #1e2528 100%);
}

.hero-content{position:relative;z-index:5;max-width:900px;width:100%;}

/* Solid Pill Badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  background: var(--srt);
  padding:0.4rem 1rem;
  border-radius:100px;
  position:relative;
  font-size:0.75rem;font-family:'JetBrains Mono',monospace;font-weight:600;
  color:var(--white);margin-bottom:2rem;letter-spacing:0.08em;
  border:none;
}

.hero-dot{width:0.375rem;height:0.375rem;background:var(--srt);border-radius:50%;animation:blink 2s infinite;
  box-shadow:0 0 0 2px color-mix(in oklab, #CF2D26 30%, transparent), 0 0 12px #CF2D26;}

.hero h1{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;color:white;line-height:1.12;letter-spacing:-.04em;margin-bottom:1.5rem;text-shadow:0 0.25rem 1.5rem rgba(0,0,0,0.6);}
.hero h1 .dim{color:rgba(255,255,255,0.7);}

/* Subtle hero-color tint on body text — Antimetal text-hero/56 */
.hero p{
  font-size:clamp(1rem,2vw,1.25rem);
  color: color-mix(in oklab, rgba(255,255,255,0.9) 85%, #CF2D26 15%);
  max-width:38rem;margin:0 auto 2.75rem;line-height:1.75;
  text-shadow:0 0.125rem 0.75rem rgba(0,0,0,0.8);
}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* Primary CTA: SRT Red with Antimetal-style inset highlight */
/* Primary CTA: Red → White slide-fill on hover */
.btn-primary{
  background: var(--srt-gradient);
  color: white;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
  box-shadow:
    0 1px 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 20px color-mix(in oklab, #CF2D26 35%, transparent),
    0 1px 3px rgba(0,0,0,0.3);
}
/* White fill slides up from bottom on hover */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: inherit;
}
.btn-primary:hover {
  color: #0F172A;
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.2),
    0 2px 6px rgba(0,0,0,0.15);
}
.btn-primary:hover::after {
  transform: translateY(0);
}
.btn-primary:active { transform: translateY(0); scale: 0.98; }

/* Ghost CTA: Antimetal glass chip pattern */
.btn-secondary{
  background:color-mix(in oklab, #ffffff 7%, transparent);
  color:rgba(255,255,255,0.85);font-size:15px;font-weight:500;
  padding:14px 32px;border-radius:10px;border:none;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  position:relative;
}
.btn-secondary::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,0.12);
  -webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  -webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.btn-secondary:hover{
  background:color-mix(in oklab, #ffffff 12%, transparent);
}
.btn-secondary:active{scale:0.98;}


/* =========================================
   BENTO GRID FEATURE SECTION
   ========================================= */
.bento-section {
  background: var(--white-gradient);
  padding: 100px 24px;
}
.bento-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}
.bento-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--carbon-gradient);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  min-height: 350px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}
.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.bento-card.large {
  grid-row: span 2;
  min-height: 600px;
}
/* Gradient overlay + fading blur for text legibility */
.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.97) 0%,
    rgba(0, 0, 0, 0.82) 30%,
    rgba(0, 0, 0, 0.25) 58%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Fading blur layer — blurs only the bottom text zone */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  pointer-events: none;
  /* Mask fades blur from solid at bottom to none at ~55% height */
  -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 58%);
  mask-image: linear-gradient(to top, black 0%, black 30%, transparent 58%);
}
.bento-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover .bento-image {
  transform: scale(1.05);
}
.bento-content {
  position: relative;
  z-index: 2;
  color: var(--white);
}
.bento-stat {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.bento-content h3 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 16px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.bento-card:not(.large) .bento-content h3 {
  font-size: 1.75rem;
}
.bento-content p {
  font-size: 1.125rem;
  opacity: 0.9;
  line-height: 1.5;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  margin-bottom: 0;
}
/* =========================================
   INTERACTIVE SERVICE HUB (TAB SYSTEM)
   ========================================= */
.hub-section {
  position: relative;
  z-index: 2;
  /* Premium warm-light stage — not plain white */
  background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 50%);
  padding: 0 24px 100px;
}
/* ── SERVICE ACCENT COLOUR TOKENS ── */
/* Each service tab has its own psychological colour */
#tab-search  { --svc: #CF2D26; } /* Red     — urgency, cost, dominance   */
#tab-display { --svc: #E07A35; } /* Amber   — attention, retargeting    */
#tab-seo     { --svc: #2B8A3E; } /* Green   — growth, organic, trust    */
#tab-ai      { --svc: #1971C2; } /* Blue    — intelligence, automation  */
#tab-social  { --svc: #9C36B5; } /* Purple  — creativity, culture       */
#tab-email   { --svc: #0C8599; } /* Teal    — nurture, lifecycle        */
#tab-analytics { --svc: #2F9E44; } /* Green  — clarity, data, proof      */

/* ── TAB NAV: Sticky + accent-aware ── */
.tab-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  /* Full-bleed sticky bar — internal buttons centred naturally */
  width: 100%;
  margin: 0;
  position: sticky;
  top: 64px;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 18px 40px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-button {
  background: none;
  border: none;
  color: rgba(0,0,0,0.45);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px 0;
  position: relative;
  transition: color 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.tab-button:hover { color: var(--carbon); }
/* Active tab: colour driven by the data-accent attribute set per button */
.tab-button.active { color: var(--srt); }
.tab-button[data-accent="search"].active  { color: #CF2D26; }
.tab-button[data-accent="display"].active { color: #E07A35; }
.tab-button[data-accent="seo"].active     { color: #2B8A3E; }
.tab-button[data-accent="ai"].active      { color: #1971C2; }
.tab-button[data-accent="social"].active  { color: #9C36B5; }
.tab-button[data-accent="email"].active   { color: #0C8599; }
.tab-button[data-accent="analytics"].active { color: #2F9E44; }
/* Accent underline — service colour, not generic red */
.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: background 0.25s ease;
}

.tab-button:focus { outline: none; }
.tab-button:focus-visible {
  /* Keyboard-only focus ring — subtle underline, no jarring blue box */
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 3px;
}

.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.tab-content.show  { display: block; }
/* Gap between sticky tab bar and first card */
.tab-content.active {
  display: block;
  opacity: 1;
  padding: 40px 24px 0;
  margin-bottom: 80px;
}

/* ─────────────────────────────────────────────────────────────
   INDUSTRY HUB: HYBRID BENTO DASHBOARD GRID
───────────────────────────────────────────────────────────── */
.industry-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 24px;
}

/* Base Bento Card Style */
.industry-bento-card {
  background: var(--carbon);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
}



/* The Hero Cell: Image + Jargon */
.industry-bento-hero {
  grid-column: span 12; /* Full width on mobile */
  min-height: 400px;
  background: var(--carbon-gradient);
}
@media (min-width: 900px) {
  .industry-bento-hero { 
    grid-column: span 8; 
    grid-row: span 2;
  }
}

.industry-bento-hero .hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 40%;
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 100%);
  z-index: 0;
}

.industry-bento-hero-content {
  position: relative;
  z-index: 2;
  max-width: 80%;
}

.industry-bento-hero .eyebrow {
  color: var(--srt);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 12px;
  display: block;
}

.industry-bento-hero h3 {
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
}

.industry-bento-hero p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}

/* Metric / Dashboard Cells */
.industry-bento-metric {
  grid-column: span 12;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  justify-content: center;
}
@media (min-width: 900px) {
  .industry-bento-metric { grid-column: span 4; }
  .industry-bento-metric.wide { grid-column: span 6; }
}

.industry-bento-metric .eyebrow {
  color: var(--gray-600);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 8px;
  display: block;
}

.industry-bento-metric .stat-big {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--carbon);
  line-height: 1.1;
  margin-bottom: 8px;
}
.industry-bento-metric .stat-big.text-red {
  color: var(--srt);
}

.industry-bento-metric p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gray-600);
  margin: 0;
}

/* Action Cell */
.industry-bento-action {
  grid-column: span 12;
  background: var(--carbon-light);
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 900px) {
  .industry-bento-action { grid-column: span 6; }
}
.industry-bento-action h4 {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────────────────────
   GENERIC PIPELINE & FEATURE GRIDS (Light Mode)
───────────────────────────────────────────────────────────── */
.feature-grid-wrapper {
  background: #fcfcfc;
  border-radius: 24px;
  padding: 64px;
  margin: -30px auto 60px auto; /* Negative margin to overlap the bento grid above */
  max-width: 1200px;
  position: relative;
  z-index: 10;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
}

.feature-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .feature-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile Horizontal Scroll Snap for 3-Column Grid */
@media (max-width: 899px) {
  .feature-grid-3 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 24px; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch;
    gap: 16px;
  }
  .feature-card-light {
    min-width: 85vw;
    scroll-snap-align: center;
  }
}

.feature-card-light {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}

.badge-numeric {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--carbon);
  color: var(--white);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.feature-card-light h4 {
  color: var(--carbon);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.feature-card-light p {
  color: rgba(0,0,0,0.65);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.feature-grid-wrapper .btn-primary {
  margin-top: 40px;
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Proof / Case Study Final Anchor */
.proof-anchor-block {
  background: var(--carbon);
  border-radius: 24px;
  padding: 48px;
  max-width: 1200px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
}

@media (min-width: 900px) {
  .proof-anchor-block {
    flex-direction: row;
    align-items: center;
    padding: 64px;
    gap: 64px;
  }
}

.proof-anchor-content {
  flex: 1;
}

.proof-anchor-content h3 {
  color: var(--white);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
}

.proof-anchor-content p {
  color: rgba(255,255,255,0.7);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.oem-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px;
  border-radius: 100px;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.oem-trust-badge svg {
  width: 16px;
  height: 16px;
  fill: var(--srt);
}

.proof-anchor-metric {
  background: var(--srt);
  border: none;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  min-width: 300px;
}

.proof-anchor-metric .stat-big {
  font-size: 4rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.proof-anchor-metric .stat-label {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ─────────────────────────────────────────────────────────────
   BEAT VISUAL PROGRESSION
   Beat-1 (Leak)  = Dark / aggressive — discomfort, loss priming
   Beat-2 (Fix)   = Mid-carbon / relief — solution energy
   Beat-3 (Proof) = Light / resolution — daylight, problem solved
───────────────────────────────────────────────────────────── */

/* Beat-1: The Leak — LIGHT card, bold red left border
   Red on white is MORE alarming than red on dark. Clean, premium, and readable. */
.beat-leak {
  background: #ffffff;
  border-radius: 20px;
  padding: 56px 64px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--srt);
  max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.06);
}
.beat-leak h2, .beat-leak h3 { color: var(--carbon); line-height: 1.25; margin-bottom: 16px; }
.beat-leak p  { color: rgba(0,0,0,0.62); line-height: 1.75; margin-bottom: 0; max-width: 680px; }
.beat-leak .eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--srt);
  margin-bottom: 16px;
  display: block;
}

/* Beat-2: The Fix — LIGHT / relief, contained, centred */
.beat-fix {
  background: #ffffff;
  border-radius: 20px;
  padding: 56px 64px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 4px solid rgba(0,0,0,0.1);
  max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.06);
}
.beat-fix h2, .beat-fix h3 { color: var(--carbon); line-height: 1.25; margin-bottom: 16px; }
.beat-fix p  { color: rgba(0,0,0,0.62); line-height: 1.75; margin-bottom: 0; max-width: 680px; }
.beat-fix .eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--srt);
  margin-bottom: 14px;
  display: block;
}

/* Beat-3: The Proof — light resolution, contained, centred */
.beat-proof {
  background: linear-gradient(160deg, #F4F6F9 0%, #EAECF2 100%);
  border-radius: 20px;
  padding: 56px 64px;
  max-width: 1200px;
  margin: 0 auto 48px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}
.beat-proof::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,52,56,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.beat-proof h2, .beat-proof h3 { color: var(--carbon) !important; line-height: 1.25; margin-bottom: 16px; }
.beat-proof p { color: rgba(0,0,0,0.62) !important; line-height: 1.75; margin-bottom: 24px !important; max-width: 680px; }
.beat-proof .eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--srt);
  margin-bottom: 14px;
  display: block;
}
.beat-proof .stat-big {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 900;
  color: var(--srt);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.beat-proof .stat-desc {
  font-size: 1rem;
  color: rgba(0,0,0,0.6);
  max-width: 460px;
  line-height: 1.5;
}

.service-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto 80px;
  align-items: center;
}
.service-split:last-child {
  margin-bottom: 0;
}
.service-split.reverse .service-split-text {
  order: 2;
}
.service-split.reverse .service-split-image {
  order: 1;
}

.service-split-text .eyebrow {
  color: var(--red);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 16px;
  display: block;
}
.service-split-text h2 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 24px;
}
.service-split-text h3 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 16px;
}
.service-split-text p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
  margin-bottom: 32px;
}
.service-stat-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.service-stat-card .stat-big {
  font-size: 2rem;
  font-weight: 800;
  color: var(--carbon);
  white-space: nowrap;
}
.service-stat-card .stat-desc {
  font-size: 0.875rem;
  color: rgba(0,0,0,0.6);
  line-height: 1.4;
}
.service-split-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════
   BEAT LAYOUT MODIFIERS  —  3 distinct visual frames
   ═══════════════════════════════════════════════════ */

/* ── BEAT 1: THE LEAK ──
   Text left with red left-border accent.
   Right side = dark carbon panel (no image) with watermark "!" and red "THE LEAK" label. */
.beat-leak {
  grid-template-columns: 55% 45%;
  gap: 48px;
}
.beat-leak .service-split-text {
  border-left: 3px solid var(--srt);
  padding-left: 32px;
}
.beat-leak .service-split-image {
  background: linear-gradient(145deg, #1e2528 0%, #2C3438 60%, #1a1f22 100%);
  border-radius: 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 40px rgba(0,0,0,0.2);
}
/* Faded watermark exclamation */
.beat-leak .service-split-image::before {
  content: '!';
  font-size: 240px;
  font-weight: 900;
  color: rgba(207,45,38,0.07);
  position: absolute;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
/* Red label badge bottom-centre */
.beat-leak .service-split-image::after {
  content: 'THE LEAK';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--srt);
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(207,45,38,0.35);
  padding: 4px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.beat-leak .service-split-image img { display: none; }

/* ── BEAT 2: THE FIX ──
   Image dominant (left via .reverse), card-style with red "THE FIX" badge.
   Text right is clean, no eyebrow needed (moved to badge). */
.beat-fix .service-split-image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  border: none;
  position: relative;
  min-height: 320px;
}
/* Red "THE FIX" badge top-left of image */
.beat-fix .service-split-image::before {
  content: 'THE FIX';
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: white;
  background: var(--srt);
  padding: 5px 12px;
  border-radius: 5px;
  z-index: 2;
  text-transform: uppercase;
}
.beat-fix .service-split-image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
/* Hide the eyebrow chip — the badge on the image replaces it */
.beat-fix .service-split-text .eyebrow { display: none; }

/* ── BEAT 3: THE PROOF ──
   Full-width single-column band.
   Large stat + desc side-by-side. Image hidden. CTA below. */
.beat-proof {
  grid-template-columns: 1fr;
  background: linear-gradient(160deg, #F4F6F9 0%, #EAECF2 100%);
  border-radius: 24px;
  padding: 56px 64px;
  margin-bottom: 80px;
  gap: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
/* Faint carbon watermark top-right */
.beat-proof::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,52,56,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.beat-proof .service-split-image { display: none; }
.beat-proof .service-split-text { max-width: 100%; }
/* Horizontal stat layout */
.beat-proof .service-stat-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 36px;
  gap: 32px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.beat-proof .stat-big {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--srt);
  white-space: nowrap;
  line-height: 1;
}
.beat-proof .stat-desc {
  font-size: 1rem;
  /* Dark body text — fully legible on white/light grey background */
  color: rgba(0,0,0,0.65);
  max-width: 420px;
  line-height: 1.5;
}
.beat-proof .eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--srt);
  margin-bottom: 12px;
}
.beat-proof h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  color: var(--carbon) !important;
  margin-bottom: 12px !important;
}
.beat-proof p {
  color: rgba(0,0,0,0.68) !important;
  margin-bottom: 24px !important;
}

/* ── INDUSTRY CONTEXT CHIP ── */
/* ── INDUSTRY CHIP: Photo-background header banner ── */
.industry-chip {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto 56px;
  padding: 36px 48px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 140px;
  /* Fallback bg colour before image loads */
  background: var(--carbon);
}

/* Real photo background */
.industry-chip-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Keep photo from washing out text */
  filter: brightness(0.55) saturate(0.7);
}

/* Gradient overlay — ensures left-side text is always legible */
.industry-chip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(26, 31, 34, 0.96) 0%,
    rgba(26, 31, 34, 0.80) 45%,
    rgba(26, 31, 34, 0.35) 100%
  );
  z-index: 1;
}

/* All content above overlay */
.industry-chip-text,
.industry-chip-stat {
  position: relative;
  z-index: 2;
}

.industry-chip-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  /* Bright light red — legible against dark gradient overlay */
  color: #FF6B5B;
  margin-bottom: 8px;
}
.industry-chip-name {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.industry-chip-stat {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.industry-chip-stat strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  /* White with grey drop-shadow for legibility */
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  line-height: 1;
  letter-spacing: -0.02em;
}
.industry-chip-stat span {
  font-size: 0.8rem;
  /* Full white with subtle grey shadow */
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  display: block;
  margin-top: 4px;
}

/* Per-industry gradient accent overlaid on top of the base overlay */
/* Automotive: neutral — brand default */
.industry-chip--auto .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(20,24,28,0.97) 0%, rgba(20,24,28,0.80) 45%, rgba(20,24,28,0.25) 100%);
}
/* Home Services: warm amber tint */
.industry-chip--home .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(24,20,14,0.97) 0%, rgba(30,24,14,0.80) 45%, rgba(30,22,10,0.2) 100%);
}
/* Healthcare: cool clinical navy tint */
.industry-chip--health .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(10,16,32,0.97) 0%, rgba(12,20,36,0.80) 45%, rgba(12,20,36,0.2) 100%);
}
/* Professional Services: deep charcoal with warm grey */
.industry-chip--pro .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(14,14,18,0.97) 0%, rgba(20,20,26,0.80) 45%, rgba(20,20,26,0.2) 100%);
}
/* Retail: warm dark burgundy tint */
.industry-chip--retail .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(22,12,14,0.97) 0%, rgba(28,16,16,0.80) 45%, rgba(28,16,16,0.2) 100%);
}
/* Education: deep academic forest tint */
.industry-chip--edu .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(10,18,14,0.97) 0%, rgba(14,26,20,0.80) 45%, rgba(14,26,20,0.2) 100%);
}
/* Travel: deep midnight ocean tint */
.industry-chip--travel .industry-chip-overlay {
  background: linear-gradient(90deg, rgba(8,14,28,0.97) 0%, rgba(10,18,36,0.82) 45%, rgba(10,18,36,0.22) 100%);
}


/* ── CHIP STAT: frosted backdrop ensures legibility over any photo ── */
.industry-chip-stat {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  /* Red glassmorphic badge */
  background: rgba(207, 45, 38, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(207, 45, 38, 0.75);
  border-radius: 12px;
  padding: 14px 22px;
  box-shadow: 0 4px 24px rgba(207,45,38,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════
   UNIQUE LAYOUT COMPONENTS  —  for industry variety
   ═══════════════════════════════════════════════════ */

/* ── PROCESS STEPS: Horizontal 3-step flow (Home Services) ── */
.process-steps {
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.process-step {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  padding: 36px 32px;
  position: relative;
}
.process-step:first-child { border-radius: 16px 0 0 16px; }
.process-step:last-child { border-radius: 0 16px 16px 0; }
.process-step-num {
  font-size: 3rem;
  font-weight: 900;
  color: rgba(207,45,38,0.1);
  line-height: 1;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.process-step h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--carbon);
  margin-bottom: 10px;
}
.process-step p {
  font-size: 0.9rem;
  color: rgba(0,0,0,0.6);
  line-height: 1.55;
  margin: 0;
}
/* Arrow connector between steps */
.process-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--srt);
  z-index: 2;
  background: white;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.07);
}

/* ── FEATURE GRID: 2×2 card grid (Education) ── */
.feature-grid {
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--srt);
}
.feature-card-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--srt);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.feature-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--carbon);
  margin-bottom: 12px;
  line-height: 1.2;
}
.feature-card p {
  font-size: 0.9rem;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
  margin: 0;
}

/* ── METRICS ROW: 3-stat horizontal band (Healthcare, Retail) ── */
.metrics-row {
  max-width: 1200px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 20px;
  overflow: hidden;
}
.metric-cell {
  padding: 40px 36px;
  text-align: center;
  background: var(--white);
  position: relative;
}
.metric-cell:not(:last-child) {
  border-right: 1px solid rgba(0,0,0,0.07);
}
.metric-cell-num {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--srt);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.metric-cell-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--carbon);
  margin-bottom: 8px;
}
.metric-cell-desc {
  font-size: 0.8rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.4;
}

/* ── FULL-BLEED LEAD: Image-dominant intro section (Travel) ── */
.full-bleed-lead {
  max-width: 1200px;
  margin: 0 auto 80px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}
.full-bleed-lead-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.55);
}
.full-bleed-lead-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,24,28,0.96) 30%, rgba(20,24,28,0.2) 100%);
}
.full-bleed-lead-content {
  position: relative;
  z-index: 2;
  padding: 48px 56px;
  width: 100%;
}
.full-bleed-lead-content .eyebrow {
  color: var(--srt);
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.full-bleed-lead-content h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: white;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 700px;
}
.full-bleed-lead-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  max-width: 580px;
  line-height: 1.6;
  margin: 0;
}

/* Beat layout responsive */
@media (max-width: 900px) {
  .beat-leak { grid-template-columns: 1fr; }
  .beat-leak .service-split-image { min-height: 180px; }
  .beat-leak .service-split-image::before { font-size: 120px; }
  .beat-proof { padding: 36px 28px; }
  .beat-proof .stat-big { font-size: 2.5rem; }
  .industry-chip { flex-wrap: wrap; gap: 16px; }
  .industry-chip-stat { margin-left: 0; text-align: left; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step { border-radius: 0; }
  .process-step:first-child { border-radius: 16px 16px 0 0; }
  .process-step:last-child { border-radius: 0 0 16px 16px; }
  .process-step:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -18px; transform: translateX(-50%); }
  .feature-grid { grid-template-columns: 1fr; }
  .metrics-row { grid-template-columns: 1fr; }
  .metric-cell:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
  .full-bleed-lead { min-height: 300px; }
  .full-bleed-lead-content { padding: 32px 28px; }
}


@media (max-width: 900px) {
  .service-split { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
  .service-split.reverse .service-split-text { order: unset; }
  .service-split.reverse .service-split-image { order: unset; }
  .tab-nav { justify-content: flex-start; }
  .service-split-text h2 { font-size: 2.25rem; }
  .service-split-text h3 { font-size: 1.75rem; }
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento-card.large {
    grid-row: auto;
    min-height: 450px;
  }
}

/* ── TELEMETRY SECTION (LIGHT GRAY) ── */
.section-light{background:linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);border-top:1px solid var(--gray-200);padding:96px 28px;}
.section-white{background:var(--white-gradient);border-top:1px solid var(--gray-200);padding:96px 28px;}
.section-dark{background:var(--carbon-gradient);border-top:1px solid rgba(255,255,255,0.06);padding:96px 28px;}
.section-inner{max-width:1200px;margin:0 auto;}
.section-header{text-align:center;max-width:680px;margin:0 auto 64px;}
.overline{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--srt);margin-bottom:14px;display:block;}
.section-header h2{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--gray-900);margin-bottom:14px;}
.section-header p{font-size:16px;color:var(--gray-600);line-height:1.7;}
.section-dark .section-header h2{color:white;}
.section-dark .section-header p{color:rgba(255,255,255,0.5);}

/* ── CARDS (ON LIGHT BG) ── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;}
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;padding:36px;transition:all .3s ease;position:relative;overflow:hidden;}
.card:hover{border-color:var(--gray-400);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,0.08);}
.card-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--srt);background:rgba(207,45,38,0.08);border:1px solid rgba(207,45,38,0.2);padding:3px 10px;border-radius:4px;display:inline-block;margin-bottom:18px;}
.card h3{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--gray-900);margin-bottom:12px;line-height:1.3;}
.card p{font-size:14px;color:var(--gray-600);line-height:1.75;}
.card-accent{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:16px;padding:36px;}
.card-accent h3{color:var(--gray-900);}
.card-accent p{color:var(--gray-600);}

/* ── MINI UI IN CARDS ── */
.mini-ui{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:18px;margin-top:24px;}
.chat-row{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start;}
.chat-row.right{flex-direction:row-reverse;}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--gray-200);flex-shrink:0;}
.avatar.ai{background:var(--srt);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:white;}
.bubble{background:white;border:1px solid var(--gray-200);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--gray-600);max-width:260px;line-height:1.5;}
.chat-row.right .bubble{background:var(--carbon);color:rgba(255,255,255,0.9);border-color:transparent;}
.latency-row{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--gray-200);margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:12px;}
.latency-row span:first-child{color:var(--gray-400);}
.latency-row span:last-child{color:var(--srt);font-weight:700;}

/* BIG DATA DISPLAY */
.data-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:16px;padding:36px;}
.data-num{font-size:clamp(52px,7vw,80px);font-weight:800;letter-spacing:-.05em;color:var(--gray-900);line-height:1;margin:20px 0 8px;}
.data-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--srt);}
.data-sub{font-size:13px;color:var(--gray-400);margin-top:6px;}

/* AD BARS */
.ad-mini{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:18px;margin-top:24px;}
.ad-row{margin-bottom:18px;}
.ad-row:last-child{margin-bottom:0;}
.ad-head{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;margin-bottom:8px;}
.ad-head span:first-child{color:var(--gray-600);}
.ad-paused{color:var(--gray-400);}
.ad-max{color:var(--srt);font-weight:700;}
.track{width:100%;height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;}
.fill-low{width:15%;height:100%;background:var(--gray-300);border-radius:3px;}
.fill-high{width:85%;height:100%;background:var(--srt);border-radius:3px;box-shadow:0 0 10px var(--srt-glow);}

/* ── INTEGRATION (WHITE BG) ── */
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1200px;margin:0 auto;padding:0 28px;}
.integration-copy .overline{text-align:left;}
.integration-copy h2{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--gray-900);line-height:1.1;margin-bottom:16px;}
.integration-copy p{font-size:16px;color:var(--gray-600);line-height:1.75;margin-bottom:28px;}
.link{color:var(--gray-900);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap .2s;text-decoration:none;}
.link:hover{gap:10px;}

/* NODE MAP */
.node-map{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:16px;aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.nm-grid{position:absolute;inset:0;background-image:linear-gradient(var(--gray-200) 1px,transparent 1px),linear-gradient(90deg,var(--gray-200) 1px,transparent 1px);background-size:30px 30px;opacity:.5;}
.nm-hub{width:64px;height:64px;background:var(--carbon);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;z-index:10;box-shadow:0 0 30px rgba(44,52,56,0.3);}
.nm-dot{width:10px;height:10px;background:var(--srt);border-radius:50%;animation:blink 2s infinite;}
.nm-node{position:absolute;z-index:10;width:52px;height:52px;background:white;border:1px solid var(--gray-200);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--gray-600);letter-spacing:.05em;box-shadow:0 4px 12px rgba(0,0,0,0.06);}
.nm-node.hot{border-color:rgba(207,45,38,0.3);box-shadow:0 4px 20px rgba(207,45,38,0.12);}
.nm-tl{top:14%;left:14%;}
.nm-tr{top:14%;right:14%;}
.nm-bl{bottom:14%;left:14%;}
.nm-br{bottom:14%;right:14%;}

/* ── CONTACT FORM SECTION (DARK CARBON) ── */
.contact-section{
  background:var(--carbon-gradient);
  padding:96px 28px 0;
  position:relative;overflow:hidden;
}
.contact-section-glow{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:900px;height:320px;
  background:radial-gradient(ellipse,rgba(207,45,38,0.1) 0%,transparent 70%);
  pointer-events:none;
}
.contact-inner{
  max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:80px;align-items:start;
  position:relative;z-index:5;
}
.contact-copy .overline{text-align:left;}
.contact-copy h2{
  font-size:clamp(32px,5vw,60px);font-weight:800;
  letter-spacing:-.04em;line-height:1.05;color:white;margin-bottom:20px;
}
.contact-copy h2 .dim{color:rgba(255,255,255,0.28);}
.contact-copy p{font-size:16px;color:rgba(255,255,255,0.5);line-height:1.75;margin-bottom:32px;}
.contact-trust{display:flex;flex-direction:column;gap:12px;}
.trust-item{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,0.45);font-family:'JetBrains Mono',monospace;
}
.trust-dot{
  width:6px;height:6px;border-radius:50%;background:var(--srt);
  box-shadow:0 0 8px var(--srt);flex-shrink:0;
}

/* Form card */
.contact-form-card{
  background:color-mix(in oklab, rgba(255,255,255,0.04) 100%, transparent);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:40px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  position:relative;
}
.contact-form-card::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,0.1);
  -webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  -webkit-mask-clip:content-box,border-box;
  mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.form-overline{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--srt);margin-bottom:24px;display:block;
}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group.full{grid-column:1/-1;}
.form-group label{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);font-family:'JetBrains Mono',monospace;
}
.form-group input,
.form-group select{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:12px 16px;
  font-size:14px;font-family:'Inter',sans-serif;
  color:white;
  transition:border-color .2s, box-shadow .2s;
  outline:none;
  appearance:none;-webkit-appearance:none;
}
.form-group input::placeholder{color:rgba(255,255,255,0.25);}
.form-group select{color:rgba(255,255,255,0.6);cursor:pointer;}
.form-group select option{background:var(--carbon);color:white;}
.form-group input:focus,
.form-group select:focus{
  border-color:rgba(207,45,38,0.7);
  box-shadow:0 0 0 3px rgba(207,45,38,0.15);
}
.form-group input.error,
.form-group select.error{
  border-color:rgba(207,45,38,0.9);
  box-shadow:0 0 0 3px rgba(207,45,38,0.2);
}
/* Honeypot — must stay invisible */
.form-honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none;tabindex:-1;}

/* Submit button */
.btn-form-submit{
  width:100%;margin-top:8px;
  background:var(--srt);color:white;font-size:15px;font-weight:700;
  padding:15px 32px;border-radius:10px;border:none;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  letter-spacing:.02em;
  box-shadow:
    0 1px 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 20px color-mix(in oklab, #CF2D26 35%, transparent),
    0 1px 3px rgba(0,0,0,0.3);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-form-submit:hover:not(:disabled){
  background:#d93228;transform:translateY(-2px);
  box-shadow:
    0 1px 1px 0 rgba(255,255,255,0.15) inset,
    0 8px 28px color-mix(in oklab, #CF2D26 45%, transparent),
    0 2px 6px rgba(0,0,0,0.4);
}
.btn-form-submit:active:not(:disabled){transform:translateY(0);scale:0.98;}
.btn-form-submit:disabled{opacity:0.7;cursor:not-allowed;transform:none;}
.btn-spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,0.4);
  border-top-color:white;border-radius:50%;
  animation:spin .7s linear infinite;
  display:none;
}
.btn-form-submit.loading .btn-spinner{display:block;}
.btn-form-submit.loading .btn-text{opacity:0.7;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Form states */
.form-success{
  display:none;text-align:center;padding:40px 24px;
}
.form-success-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(207,45,38,0.12);border:1px solid rgba(207,45,38,0.3);
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
}
.form-success h3{color:white;font-size:22px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em;}
.form-success p{color:rgba(255,255,255,0.5);font-size:14px;line-height:1.7;}
.form-error-msg{
  display:none;background:rgba(207,45,38,0.08);border:1px solid rgba(207,45,38,0.2);
  border-radius:8px;padding:12px 16px;margin-top:12px;
  font-size:13px;color:rgba(255,255,255,0.6);
  font-family:'JetBrains Mono',monospace;
}

/* Footer bar */
.footer-bar{
  max-width:1100px;margin:64px auto 0;padding:28px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;justify-content:space-between;align-items:center;
  /* White text — fully legible on carbon dark background */
  font-size:13px;color:rgba(255,255,255,0.9);
}
.footer-links{display:flex;gap:24px;}
.footer-links a{color:rgba(255,255,255,0.85);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:#ffffff;}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:none;}
.d1{transition-delay:.08s;}
.d2{transition-delay:.16s;}
.d3{transition-delay:.24s;}

/* ── ANIMATIONS ── */
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .stat-strip-inner{grid-template-columns:1fr;}
  .stat-cell{border-right:none;border-bottom:1px solid var(--gray-200);padding:36px 24px;}
  .stat-cell:last-child{border-bottom:none;}
  .integration-grid{grid-template-columns:1fr;gap:48px;padding:0 20px;}
  .node-map{max-width:380px;margin:0 auto;}
  .footer-bar{flex-direction:column;gap:16px;text-align:center;}
  .contact-inner{grid-template-columns:1fr;gap:48px;}
  .form-grid{grid-template-columns:1fr;}
  .form-group.full{grid-column:1;}
  /* Logo: restore original compact size on mobile */
  .nav-logo{height:28px;}
  .nav-logo img{height:28px;}
}

/* ── MODAL SYSTEM ── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:20px;}
.modal-overlay.active{opacity:1;pointer-events:auto;}
.modal-content{background:var(--carbon);border:1px solid rgba(255,255,255,0.1);border-radius:24px;width:100%;max-width:540px;position:relative;transform:translateY(20px) scale(0.95);transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);box-shadow:0 24px 48px rgba(0,0,0,0.5);}
.modal-overlay.active .modal-content{transform:translateY(0) scale(1);}
.modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;}
.modal-close:hover{background:rgba(255,255,255,0.1);}
.modal-header{padding:40px 40px 24px;text-align:center;}
.modal-header h2{font-size:24px;font-weight:800;color:white;letter-spacing:-.02em;margin-bottom:12px;}
.modal-header p{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.6;}
.modal-body{padding:0 40px 40px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);font-family:'JetBrains Mono',monospace;margin-bottom:6px;}
.form-control{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px 16px;font-size:14px;font-family:'Inter',sans-serif;color:white;transition:border-color .2s, box-shadow .2s;outline:none;}
select.form-control{appearance:none;-webkit-appearance:none;cursor:pointer;}
select.form-control option{background:var(--carbon);color:white;}
.form-control:focus{border-color:rgba(207,45,38,0.7);box-shadow:0 0 0 3px rgba(207,45,38,0.15);}
.checkbox-group{display:flex;align-items:flex-start;gap:12px;margin-top:24px;margin-bottom:24px;}
.checkbox-group input[type="checkbox"]{margin-top:4px;cursor:pointer;width:16px;height:16px;accent-color:var(--srt);}
.checkbox-group label{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5;text-transform:none;letter-spacing:normal;font-family:'Inter',sans-serif;}
.btn-submit{width:100%;background:var(--srt);color:white;font-size:15px;font-weight:700;padding:15px;border-radius:10px;border:none;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 20px rgba(207,45,38,0.3);}
.btn-submit:hover{background:#d93228;transform:translateY(-2px);}
.modal-footer{text-align:center;font-size:12px;color:rgba(255,255,255,0.3);margin-top:16px;}
/* Teaser Cards */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:96px 28px;}
.teaser-card{background:white;border:1px solid var(--gray-200);border-radius:16px;padding:40px 32px;transition:all .3s ease;}
.teaser-card:hover{border-color:var(--gray-400);transform:translateY(-4px);box-shadow:0 24px 48px rgba(0,0,0,0.06);}
.teaser-icon{width:48px;height:48px;border-radius:12px;background:rgba(207,45,38,0.08);color:var(--srt);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.teaser-card h3{font-size:20px;font-weight:700;color:var(--gray-900);letter-spacing:-.02em;margin-bottom:12px;}
.teaser-card p{font-size:15px;color:var(--gray-600);line-height:1.6;margin-bottom:24px;}
.teaser-link{color:var(--srt);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.teaser-link:hover{gap:8px;}
/* Social Proof */
.social-proof{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);padding:96px 28px;text-align:center;}
.sp-header{font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--gray-900);letter-spacing:-.03em;margin-bottom:64px;}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1000px;margin:0 auto;text-align:left;}
.quote-card{position:relative;}
.quote-card::before{content:'"';position:absolute;top:-20px;left:-16px;font-size:60px;color:rgba(207,45,38,0.1);font-family:serif;line-height:1;}
.quote-text{font-size:18px;color:var(--gray-900);line-height:1.6;font-weight:500;margin-bottom:20px;position:relative;z-index:2;}
.quote-author{font-size:14px;color:var(--gray-600);font-family:'JetBrains Mono',monospace;}
@media(max-width:900px){
  .teaser-grid{grid-template-columns:1fr;padding:64px 20px;}
  .quote-grid{grid-template-columns:1fr;gap:64px;}
  .modal-content{padding:20px;}
  .modal-header{padding:20px 20px 16px;}
  .modal-body{padding:0 20px 20px;}
}/* ── SERVICES TAB SYSTEM ── */
.tab-rail-wrap {
  position: sticky;
  top: 76px; /* below nav */
  z-index: 40;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
}
.tab-rail {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-rail::-webkit-scrollbar { display: none; }
.tab-label {
  padding: 20px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.tab-label:hover { color: var(--gray-900); }

/* Hide radios */
input[type="radio"][name="industry-tab"],
input[type="radio"][name="service-tab"] {
  display: none;
}

/* Radio State Logic */
#tab-auto:checked ~ .tab-rail-wrap #lbl-auto,
#tab-home:checked ~ .tab-rail-wrap #lbl-home,
#tab-health:checked ~ .tab-rail-wrap #lbl-health,
#tab-pro:checked ~ .tab-rail-wrap #lbl-pro,
#tab-retail:checked ~ .tab-rail-wrap #lbl-retail,
#tab-search:checked ~ .tab-rail-wrap #lbl-search,
#tab-display:checked ~ .tab-rail-wrap #lbl-display,
#tab-seo:checked ~ .tab-rail-wrap #lbl-seo,
#tab-ai:checked ~ .tab-rail-wrap #lbl-ai,
#tab-video:checked ~ .tab-rail-wrap #lbl-video,
#tab-email:checked ~ .tab-rail-wrap #lbl-email,
#tab-analytics:checked ~ .tab-rail-wrap #lbl-analytics {
  color: var(--srt);
  border-bottom-color: var(--srt);
}

.services-section {
  position: relative;
  background: var(--gray-50);
}

.tab-panel {
  display: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 28px;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

#tab-auto:checked ~ .services-section #panel-auto,
#tab-home:checked ~ .services-section #panel-home,
#tab-health:checked ~ .services-section #panel-health,
#tab-pro:checked ~ .services-section #panel-pro,
#tab-retail:checked ~ .services-section #panel-retail,
#tab-search:checked ~ .services-section #panel-search,
#tab-display:checked ~ .services-section #panel-display,
#tab-seo:checked ~ .services-section #panel-seo,
#tab-ai:checked ~ .services-section #panel-ai,
#tab-video:checked ~ .services-section #panel-video,
#tab-email:checked ~ .services-section #panel-email,
#tab-analytics:checked ~ .services-section #panel-analytics {
  display: grid;
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.overline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--srt);
}

.panel-copy h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 16px 0 24px;
}

.panel-copy p {
  font-size: 16px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 24px;
}

.panel-copy p strong {
  color: var(--gray-900);
  font-weight: 600;
}

.sub-verticals {
  list-style: none;
  margin-bottom: 32px;
}
.sub-verticals li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 8px;
}
.sub-verticals li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--srt);
  font-weight: bold;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 24px;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.stat-pill strong {
  font-size: 24px;
  font-weight: 800;
  color: var(--carbon);
  line-height: 1;
}
.stat-pill span {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.4;
  max-width: 280px;
}

.btn-panel {
  display: inline-flex;
  background: var(--carbon);
  color: white;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-panel:hover {
  background: var(--carbon-light);
  transform: translateY(-2px);
}

.panel-img img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
}

@media(max-width: 900px) {
  .tab-panel { grid-template-columns: 1fr; gap: 40px; padding: 64px 20px; }
  .tab-rail { gap: 24px; padding: 0 20px; }
  .stat-pill { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Page Hero */
.page-hero {
  position: relative;
  background: transparent;
  padding: 160px 28px 80px;
  text-align: center;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  color: white;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.page-hero p {
  font-size: 18px;
  /* Full legibility — white with slight soft shadow for depth */
  color: rgba(255,255,255,0.92);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.page-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(207,45,38,0.15) 0%, rgba(207,45,38,0) 70%);
  pointer-events: none;
  z-index: 1;
}

.cta-band {
  background: var(--carbon-gradient);
  padding: 64px 28px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
/* Carbon fiber texture overlay — faint, over the gradient */
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* ── 45° FIBERS ── */
    /* 1. Highlight: bright leading edge (light catches curved fiber surface) */
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 10px
    ),
    /* 2. Body: soft mid-tone across fiber volume */
    repeating-linear-gradient(
      45deg,
      transparent 1px,
      rgba(255,255,255,0.025) 1px,
      rgba(255,255,255,0.025) 5px,
      transparent 5px,
      transparent 10px
    ),
    /* 3. Shadow: dark trailing edge (underside of fiber curve) */
    repeating-linear-gradient(
      45deg,
      transparent 8px,
      rgba(0,0,0,0.22) 8px,
      rgba(0,0,0,0.22) 9px,
      transparent 9px,
      transparent 10px
    ),
    /* ── -45° FIBERS ── */
    /* 4. Highlight: bright leading edge */
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 10px
    ),
    /* 5. Body: soft mid-tone */
    repeating-linear-gradient(
      -45deg,
      transparent 1px,
      rgba(255,255,255,0.025) 1px,
      rgba(255,255,255,0.025) 5px,
      transparent 5px,
      transparent 10px
    ),
    /* 6. Shadow: dark trailing edge */
    repeating-linear-gradient(
      -45deg,
      transparent 8px,
      rgba(0,0,0,0.22) 8px,
      rgba(0,0,0,0.22) 9px,
      transparent 9px,
      transparent 10px
    );
  background-size: 20px 20px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
/* Force the overline/eyebrow in cta-band to white — not red */
.cta-band .overline,
.cta-band [style*="display:block"],
.cta-band span:first-child {
  color: rgba(255,255,255,0.7) !important;
}
.cta-band p {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto 32px;
}

/* ── HERO SPLIT LAYOUT ── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}
.hero-split .hero-text {
  max-width: 600px;
}
.hero-split .hero-ctas {
  justify-content: flex-start;
  align-items: flex-start;
}
.hero-split h1 {
  font-size: clamp(28px, 3.5vw, 48px);
}
.hero-visual {
  position: relative;
  perspective: 1000px;
  min-width: 520px;
  flex: 1;
  width: 130%;
}
.hero-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  transform: rotateY(-5deg) rotateX(5deg);
  transition: transform 0.5s ease;
}
.hero-image-wrapper:hover {
  transform: rotateY(0) rotateX(0);
}
.hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  /* Let width drive height — never squish on viewport resize */
}

/* ── GLOBAL CANVAS ── */
.global-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* z-index: -1 pushes sphere behind ALL stacking contexts */
  z-index: -1;
  pointer-events: none;
  background: #1e2528;
  opacity: 1;
}



@media(max-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-split .hero-text {
    margin: 0 auto;
  }
  .hero-split .hero-ctas {
    justify-content: center;
    align-items: center;
  }
}

/* Mobile/tablet: hide the dashboard image at the burger breakpoint (1024px) */
@media(max-width: 1024px) {
  .hero-visual {
    display: none;
  }
  .hero-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

/* Burger menu open: hide the hero image at ALL breakpoints where it's visible.
   Uses CSS :has() — supported in all modern browsers (Chrome 105+, Safari 15.4+, FF 121+) */
body:has(.nav-burger.open) .hero-visual {
  display: none !important;
}

/* Fallback for older browsers: JS adds .nav-open to body */
body.nav-open .hero-visual {
  display: none !important;
}


/* Section backgrounds — overridden individually below with gradients */

/* ── SECTION SURFACE GRADIENTS (Mesh-Blob Style) ── */
/*
   Approach: Large, soft radial blobs at corners — very low opacity grey.
   White stays dominant. Blobs add atmospheric depth like the LocalIQ reference.
*/

/* Shared blob mixin applied to all light sections */
.bento-section,
.stat-strip,
.social-proof,
.services-section,
.industries-section,
.section-white,
.teaser-grid {
  background-color: #FFFFFF;
  background-image:
    /* Top-right blob: cool light grey */
    radial-gradient(ellipse 65% 55% at 95% 0%, rgba(180, 188, 200, 0.22) 0%, transparent 70%),
    /* Bottom-left blob: slightly warmer grey */
    radial-gradient(ellipse 55% 50% at 5% 100%, rgba(160, 170, 185, 0.18) 0%, transparent 65%),
    /* Centre-right mid: faint silver accent */
    radial-gradient(ellipse 40% 35% at 85% 55%, rgba(200, 205, 215, 0.12) 0%, transparent 60%);
}

/* Bento: extra subtle red warmth at top-left to stay on-brand */
.bento-section {
  background-image:
    radial-gradient(ellipse 65% 55% at 95% 0%, rgba(180, 188, 200, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 5% 100%, rgba(160, 170, 185, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 35% 30% at 8% 5%, rgba(207, 45, 38, 0.04) 0%, transparent 60%);
}

/* Stat Strip: slightly deeper silver feel */
.stat-strip, .social-proof {
  background-image:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(175, 185, 200, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(165, 175, 190, 0.16) 0%, transparent 60%);
  background-color: #FAFBFC;
}

/* Services & Industries white sections: top-left and bottom-right blobs */
.services-section, .industries-section {
  background-image:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(185, 193, 207, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(170, 180, 196, 0.18) 0%, transparent 60%);
}

/* General white section: single soft top-right orb */
.section-white {
  background-image:
    radial-gradient(ellipse 65% 55% at 95% 5%, rgba(180, 188, 200, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(165, 175, 190, 0.14) 0%, transparent 60%);
  border-top: 1px solid var(--gray-200);
  padding: 96px 28px;
}

/* Teaser grid: blobs on both sides */
.teaser-grid {
  background-color: #FAFBFC;
  background-image:
    radial-gradient(ellipse 55% 50% at 0% 50%, rgba(175, 183, 198, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 50%, rgba(185, 193, 207, 0.2) 0%, transparent 65%);
}



/* ══════════════════════════════════════════════════════
   SCOREBOARD — animated money counter (Beat-1 Search Ads)
══════════════════════════════════════════════════════ */
.scoreboard {
  /* Alert panel on light card — red on white = maximum urgency */
  background: #FFF5F5;
  border: 1px solid rgba(207,45,38,0.2);
  border-left: 4px solid var(--srt);
  border-radius: 12px;
  padding: 36px 40px;
  text-align: center;
  margin-top: 32px;
}
.scoreboard-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 16px;
}
.scoreboard-label strong { color: rgba(0,0,0,0.75); font-weight: 800; }
.scoreboard-number {
  font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 900; color: #CF2D26;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1;
  text-shadow: none;
}
.scoreboard-sub { font-size: 0.72rem; color: rgba(0,0,0,0.35); margin-top: 14px; letter-spacing: 0.04em; }

/* ══════════════════════════════════════════════════════
   CALC-WIDGET — slider-based calculators
══════════════════════════════════════════════════════ */
.calc-widget {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.09);
  border-radius: 16px; padding: 32px 36px; margin-top: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.calc-row { margin-bottom: 24px; }
.calc-row label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.9rem; font-weight: 600; color: #2c3438; margin-bottom: 10px;
}
.calc-val { font-weight: 800; color: #CF2D26; font-size: 1rem; }
.calc-widget input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 6px; border-radius: 4px;
  background: linear-gradient(to right, #CF2D26 0%, #CF2D26 50%, #e0e3e8 50%, #e0e3e8 100%);
  outline: none; cursor: pointer;
}
.calc-widget input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #CF2D26; border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(207,45,38,0.4); cursor: pointer; transition: box-shadow 0.2s;
}
.calc-widget input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 2px 16px rgba(207,45,38,0.6); }
.calc-results {
  background: #f7f8fa; border-radius: 12px; padding: 20px 24px;
  margin-top: 8px; border-left: 4px solid #CF2D26;
}
.calc-loss { font-size: 1.05rem; font-weight: 700; color: #CF2D26; margin-bottom: 8px; }
.calc-loss span { font-size: 1.25rem; font-weight: 900; }
.calc-gain { font-size: 0.95rem; color: #2c3438; font-weight: 600; }
.calc-gain span { color: #2B8A3E; font-weight: 800; }
@media (max-width: 900px) {
  .scoreboard { padding: 24px 20px; }
  .calc-widget { padding: 24px 20px; }
  .beat-leak, .beat-fix, .beat-proof { padding: 40px 24px !important; }
}

/* ══════════════════════════════════════════════════════
   BEFORE / AFTER GRID — Display tab Beat-1
══════════════════════════════════════════════════════ */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 8px;
}
.ba-panel {
  border-radius: 14px;
  padding: 28px 30px;
}
.ba-before {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.ba-after {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}
.ba-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 20px;
}
.ba-tag.bad  { background: rgba(207,45,38,0.18); color: #FF6B5B; border: 1px solid rgba(207,45,38,0.3); }
.ba-tag.good { background: rgba(43,138,62,0.2);  color: #69db7c; border: 1px solid rgba(43,138,62,0.35); }
.ba-metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.ba-num {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ba-num.bad  { color: #FF6B5B; }
.ba-num.good { color: #69db7c; }
.ba-label-s {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.ba-footnote {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  margin-top: 14px;
  letter-spacing: 0.04em;
}
.ba-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.25);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  padding: 0 4px;
}

/* ══════════════════════════════════════════════════════
   DRAIN BAR — Traffic Leak Meter
══════════════════════════════════════════════════════ */
.drain-bar-wrap { margin: 14px 0 10px; }
.drain-bar-track {
  position: relative;
  height: 14px;
  background: #e8eaed;
  border-radius: 8px;
  overflow: hidden;
}
.drain-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #CF2D26 0%, #FF6B5B 100%);
  border-radius: 8px;
  transition: width 0.4s ease;
}
.drain-bar-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ba-grid { grid-template-columns: 1fr; }
  .ba-divider { writing-mode: horizontal-tb; padding: 4px 0; }
}

/* ══════════════════════════════════════════════════════
   STAT TRIO — 3-column real-data stat grid inside Beat-1
══════════════════════════════════════════════════════ */
.stat-trio {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  margin-top: 36px;
  padding: 32px 36px;
  background: #FFF5F5;
  border: 1px solid rgba(207,45,38,0.15);
  border-left: 4px solid var(--srt);
  border-radius: 14px;
}
.stat-trio-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 28px;
  text-align: center;
}
.stat-trio-item:first-child { padding-left: 0; }
.stat-trio-item:last-child  { padding-right: 0; }
.stat-trio-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #CF2D26;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-trio-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--carbon);
  line-height: 1.4;
}
.stat-trio-source {
  font-size: 0.7rem;
  color: rgba(0,0,0,0.35);
  letter-spacing: 0.02em;
}
.stat-trio-divider {
  width: 1px;
  background: rgba(207,45,38,0.15);
  margin: 8px 0;
  align-self: stretch;
}
@media (max-width: 768px) {
  .stat-trio {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stat-trio-divider { display: none; }
  .stat-trio-item { padding: 0; text-align: left; }
}

/* ══════════════════════════════════════════════════════
   ROI COMPARISON CALCULATOR
══════════════════════════════════════════════════════ */

/* ── Input Controls ── */
.roi-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 32px 0;
}
.roi-input-group { display: flex; flex-direction: column; gap: 10px; }
.roi-label {
  font-size: 0.82rem; font-weight: 700; color: var(--carbon);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.roi-control-row { display: flex; align-items: center; gap: 16px; }
.roi-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(to right, #CF2D26 0%, #CF2D26 50%, #e0e3e8 50%, #e0e3e8 100%);
  outline: none;
  cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #CF2D26;
  box-shadow: 0 2px 8px rgba(207,45,38,0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-num-wrap {
  display: flex; align-items: center;
  background: #F5F7FA; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; padding: 6px 10px; gap: 4px;
  min-width: 110px;
}
.roi-sym { font-weight: 700; color: var(--carbon); font-size: 0.9rem; }
.roi-num-input {
  border: none; background: transparent;
  font-size: 0.95rem; font-weight: 700; color: var(--carbon);
  width: 80px; outline: none;
}
.roi-num-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Comparison Grid ── */
.roi-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0 28px;
}
.roi-col {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.roi-agency { background: #FAFAFA; }
.roi-shift  { background: #F0F9F4; border-color: rgba(43,138,62,0.2); }

.roi-col-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.roi-agency .roi-col-head { background: #F0F0F0; }
.roi-shift  .roi-col-head { background: #E6F5EC; border-bottom-color: rgba(43,138,62,0.15); }
.roi-col-title { font-size: 1rem; font-weight: 800; color: var(--carbon); }
.roi-col-sub   { font-size: 0.75rem; color: rgba(0,0,0,0.45); font-weight: 500; }
.roi-badge-ss {
  display: inline-block;
  background: #CF2D26; color: #fff;
  font-size: 0.8rem; font-weight: 800;
  padding: 4px 12px; border-radius: 100px;
  letter-spacing: 0.04em;
}

/* ── Rows ── */
.roi-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.85rem;
  gap: 12px;
}
.roi-row:last-child { border-bottom: none; }
.roi-row--total {
  font-weight: 800;
  background: rgba(0,0,0,0.04);
  padding: 14px 24px;
}
.roi-shift .roi-row--total { background: rgba(43,138,62,0.08); }
.roi-row--highlight { background: rgba(0,0,0,0.025); }
.roi-shift .roi-row--highlight { background: rgba(43,138,62,0.05); }

.roi-lbl { color: rgba(0,0,0,0.6); flex: 1; line-height: 1.35; }
.roi-lbl em { font-style: normal; font-size: 0.78rem; color: rgba(0,0,0,0.4); display: block; }
.roi-val { font-weight: 700; color: var(--carbon); white-space: nowrap; font-size: 0.9rem; }
.roi-val.negative { color: #CF2D26; }
.roi-val.positive { color: #2B8A3E; }
.roi-val--quote   { color: rgba(0,0,0,0.45); font-size: 0.83rem; }
.roi-quote-link   { color: #CF2D26; font-weight: 700; text-decoration: none; }
.roi-quote-link:hover { text-decoration: underline; }

.roi-sep { height: 1px; background: rgba(0,0,0,0.09); margin: 4px 0; }

/* ── Summary Callouts ── */
.roi-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.roi-sum-stat {
  background: #fff;
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 28px;
  align-items: center; text-align: center;
}
.roi-sum-num {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900; color: #2B8A3E; line-height: 1;
  letter-spacing: -0.02em;
}
.roi-sum-lbl { font-size: 0.8rem; color: rgba(0,0,0,0.5); font-weight: 600; }

.roi-disclaimer {
  font-size: 0.72rem !important; color: rgba(0,0,0,0.38) !important;
  line-height: 1.6 !important; max-width: 100% !important;
  margin-bottom: 20px !important;
}

@media (max-width: 900px) {
  .roi-inputs  { grid-template-columns: 1fr; }
  .roi-compare { grid-template-columns: 1fr; }
  .roi-summary { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   ROIC — Simplified ROI Calculator (one slider, 4 metrics)
══════════════════════════════════════════════════════ */

/* Input area */
.roic-input { margin: 32px 0 36px; }
.roic-label {
  display: block;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--carbon); margin-bottom: 14px;
}
.roic-control {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.roic-slider {
  flex: 1; min-width: 180px;
  -webkit-appearance: none; height: 7px;
  border-radius: 4px; outline: none; cursor: pointer;
  background: linear-gradient(to right,#CF2D26 0%,#e0e3e8 0%);
  transition: background 0s;
}
.roic-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #CF2D26;
  box-shadow: 0 2px 12px rgba(207,45,38,0.4);
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.roic-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 20px rgba(207,45,38,0.5);
}
.roic-numbox {
  display: flex; align-items: center; gap: 4px;
  background: #F5F7FA; border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px; padding: 8px 14px; min-width: 120px;
}
.roic-sym { font-weight: 800; font-size: 1rem; color: var(--carbon); }
.roic-num {
  border: none; background: transparent; outline: none;
  font-size: 1.05rem; font-weight: 800; color: var(--carbon);
  width: 90px;
}
.roic-num::-webkit-inner-spin-button { -webkit-appearance: none; }
.roic-assumption {
  font-size: 0.72rem !important; color: rgba(0,0,0,0.38) !important;
  margin-top: 10px !important; line-height: 1.5 !important;
}

/* Two-column card grid */
.roic-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 32px;
}
.roic-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(0,0,0,0.25); padding: 0 4px;
  align-self: center;
}

/* Cards */
.roic-card {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.roic-card--agency { background: #FAFAFA; }
.roic-card--ss     { background: #F4FBF6; border-color: rgba(43,138,62,0.2); }

.roic-card-head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.roic-card--agency .roic-card-head { background: #EFEFEF; }
.roic-card--ss     .roic-card-head { background: #E8F7EC; border-bottom-color: rgba(43,138,62,0.12); }

.roic-card-title {
  font-size: 0.95rem; font-weight: 800; color: var(--carbon);
}
.roic-card-title-ss {
  font-size: 0.95rem; font-weight: 800; color: var(--carbon);
}
.roic-card-sub {
  font-size: 0.72rem; color: rgba(0,0,0,0.42); font-weight: 500;
}

/* Metrics */
.roic-metric {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.roic-metric:last-child { border-bottom: none; }
.roic-metric--key {
  background: rgba(0,0,0,0.03);
}
.roic-card--ss .roic-metric--key { background: rgba(43,138,62,0.06); }

.roic-metric-lbl {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgba(0,0,0,0.45);
}
.roic-metric-num {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900; color: var(--carbon);
  letter-spacing: -0.02em; line-height: 1.1;
  transition: color 0.2s ease;
}
.roic-metric-num--quote {
  font-size: 1rem; font-weight: 600; color: rgba(0,0,0,0.45);
}
.roic-metric-sub {
  font-size: 0.72rem; color: rgba(0,0,0,0.38); line-height: 1.4;
}
.roic--bad  { color: #CF2D26; }
.roic--good { color: #2B8A3E; }
.roic-link  {
  color: #CF2D26; font-weight: 700; text-decoration: none;
}
.roic-link:hover { text-decoration: underline; }

/* Delta summary */
.roic-delta {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,0.07);
  border-radius: 14px; overflow: hidden; margin-bottom: 24px;
}
.roic-delta-stat {
  background: #fff; display: flex; flex-direction: column;
  gap: 5px; padding: 22px 24px;
  align-items: center; text-align: center;
}
.roic-delta-num {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 900; color: #2B8A3E; line-height: 1;
  letter-spacing: -0.02em;
}
.roic-delta-lbl {
  font-size: 0.75rem; color: rgba(0,0,0,0.48); font-weight: 600;
}

.roic-disclaimer {
  font-size: 0.72rem !important; color: rgba(0,0,0,0.38) !important;
  line-height: 1.6 !important; margin-bottom: 20px !important;
}

@media (max-width: 860px) {
  .roic-cards { grid-template-columns: 1fr; }
  .roic-vs    { writing-mode: horizontal-tb; padding: 4px 0; }
  .roic-delta { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   DISPLAY & VIDEO TAB — Amber accent, light, journey layout
══════════════════════════════════════════════════════ */
:root { --amber: #E07A35; --amber-light: #FFF4EC; --amber-mid: #FDEBD8; }

/* Amber eyebrow */
.eyebrow--amber { color: var(--amber) !important; }

/* ── Beat-1: Disp Hero ── */
.disp-hero {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--amber);
  padding: 48px 52px;
  max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.disp-hero-text h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--carbon); line-height: 1.2;
  margin-bottom: 16px; font-weight: 900;
}
.disp-hero-text p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 680px; margin-bottom: 40px;
}

/* 97% anchor + stat trio */
.disp-stat-anchor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px; align-items: center;
}
.disp-pct-ring {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: var(--amber-light);
  border: 4px solid var(--amber);
  flex-shrink: 0;
}
.disp-pct-num {
  font-size: 3.6rem; font-weight: 900;
  color: var(--amber); line-height: 1;
  letter-spacing: -0.04em;
}
.disp-pct-symbol { font-size: 2rem; }
.disp-pct-lbl {
  font-size: 0.72rem; font-weight: 700; text-align: center;
  color: rgba(0,0,0,0.5); line-height: 1.35; margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.disp-stat-trio {
  display: flex; flex-direction: column; gap: 16px;
}
.disp-stat-trio-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 20px;
  background: var(--amber-light);
  border-radius: 10px;
  border-left: 3px solid var(--amber);
}
.disp-trio-num {
  font-size: 1.5rem; font-weight: 900;
  color: var(--amber); letter-spacing: -0.02em;
}
.disp-trio-lbl {
  font-size: 0.82rem; font-weight: 600; color: var(--carbon);
}
.disp-trio-src {
  font-size: 0.68rem; color: rgba(0,0,0,0.35);
}

/* ── Beat-2: Journey Timeline ── */
.disp-journey {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 48px 52px;
  max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.disp-journey h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  color: var(--carbon); margin-bottom: 12px;
}
.disp-journey p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 680px; margin-bottom: 40px;
}

.disp-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0; align-items: start;
}
.disp-tl-connector {
  width: 32px; height: 2px;
  background: rgba(0,0,0,0.12);
  align-self: 60px; margin-top: 60px;
  flex-shrink: 0;
}
.disp-tl-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  position: relative;
}
.disp-tl-item--neutral { background: #F8F8F8; }
.disp-tl-item--bad     { background: #FFF5F5; border-color: rgba(207,45,38,0.15); }
.disp-tl-item--good    { background: var(--amber-light); border-color: rgba(224,122,53,0.2); }

.disp-tl-icon  { font-size: 1.8rem; }
.disp-tl-day   {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.35);
}
.disp-tl-title {
  font-size: 0.9rem; font-weight: 800; color: var(--carbon);
  line-height: 1.2;
}
.disp-tl-desc  {
  font-size: 0.78rem; color: rgba(0,0,0,0.55); line-height: 1.5;
}

/* ── Beat-3: Recovery Calculator ── */
.disp-calc {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--amber);
  padding: 48px 52px;
  max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.disp-calc h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  color: var(--carbon); margin-bottom: 12px;
}
.disp-calc p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 680px; margin-bottom: 32px;
}

/* Amber slider variant */
.roic-slider--amber {
  background: linear-gradient(to right, var(--amber) 0%, #e0e3e8 0%);
}
.roic-slider--amber::-webkit-slider-thumb {
  background: var(--amber);
  box-shadow: 0 2px 12px rgba(224,122,53,0.4);
}

/* Recovery grid — 3 cards */
.disp-recovery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 28px 0;
}
.disp-rec-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 28px; border-radius: 14px;
  border: 1px solid transparent;
}
.disp-rec-card--bad  { background: #FFF5F5; border-color: rgba(207,45,38,0.15); }
.disp-rec-card--mid  { background: var(--amber-mid); border-color: rgba(224,122,53,0.2); }
.disp-rec-card--good { background: #F0FBF4; border-color: rgba(43,138,62,0.2); }

.disp-rec-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(0,0,0,0.45);
}
.disp-rec-num {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}
.disp-rec-card--bad  .disp-rec-num { color: #CF2D26; }
.disp-rec-card--mid  .disp-rec-num { color: var(--amber); }
.disp-rec-card--good .disp-rec-num { color: #2B8A3E; }

.disp-rec-sub {
  font-size: 0.75rem; color: rgba(0,0,0,0.45); line-height: 1.4;
}

/* Progress bar */
.disp-bar-wrap { margin: 8px 0 28px; }
.disp-bar-track {
  display: flex; height: 36px; border-radius: 10px;
  overflow: hidden; background: #F0F0F0;
}
.disp-bar-lost {
  background: #CF2D26; display: flex; align-items: center;
  padding: 0 12px; transition: width 0.4s ease;
}
.disp-bar-recovered {
  background: #2B8A3E; display: flex; align-items: center;
  padding: 0 8px; min-width: 4px; transition: width 0.4s ease;
}
.disp-bar-lbl {
  font-size: 0.68rem; font-weight: 800; color: #fff;
  white-space: nowrap;
}
.disp-bar-legend {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 0.75rem; color: rgba(0,0,0,0.45);
}
.disp-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.disp-legend-dot--lost { background: #CF2D26; margin-left: 12px; }
.disp-legend-dot--rec  { background: #2B8A3E; }

/* Amber CTA button */
.btn-primary--amber {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
}
.btn-primary--amber:hover {
  background: #c96a28 !important;
  border-color: #c96a28 !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .disp-stat-anchor   { grid-template-columns: 1fr; gap: 28px; }
  .disp-pct-ring      { width: 140px; height: 140px; }
}
@media (max-width: 860px) {
  .disp-hero, .disp-journey, .disp-calc { padding: 32px 28px; }
  .disp-timeline      { grid-template-columns: 1fr; }
  .disp-tl-connector  { display: none; }
  .disp-recovery-grid { grid-template-columns: 1fr; }
}

/* ── Timeline image placeholders ── */
.disp-tl-img {
  width: 56px; height: 56px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  background: rgba(0,0,0,0.06); /* shows while image loads */
}
/* Fallback emoji — shown when image 404s */
.disp-tl-emoji-fb { display: none; font-size: 1.8rem; }
.disp-tl-img + .disp-tl-emoji-fb { display: none; }
/* When img fails onerror hides img, show emoji */
.disp-tl-icon:not(:has(img[src])) .disp-tl-emoji-fb,
.disp-tl-icon img[style*="display:none"] ~ .disp-tl-emoji-fb {
  display: block;
}

/* ── Timeline: CSS numbered steps (no images needed) ── */
.disp-tl-step {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; color: #fff;
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.disp-tl-item--neutral .disp-tl-step { background: rgba(0,0,0,0.18); }
.disp-tl-item--bad     .disp-tl-step { background: #CF2D26; }
.disp-tl-item--good    .disp-tl-step { background: var(--amber); }

/* ── Timeline: equal height + centered step badge ── */
.disp-timeline         { align-items: stretch; }
.disp-tl-connector     { align-self: center; margin-top: 0; }
.disp-tl-item          { align-items: center; }
.disp-tl-step          { margin: 0 auto 4px; flex-shrink: 0; }
.disp-tl-body          { text-align: center; }
.disp-tl-day           { text-align: center; }

/* ══════════════════════════════════════════════════════
   SEO + GEO TAB — Indigo accent, search panel layout
══════════════════════════════════════════════════════ */
:root {
  --indigo: #4F46E5;
  --indigo-light: #EEF2FF;
  --indigo-mid: #E0E7FF;
}
.eyebrow--indigo { color: var(--indigo) !important; }

/* ── Beat-1: Hero ── */
.seo-hero {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--indigo);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.seo-hero h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--carbon); line-height: 1.2;
  margin-bottom: 16px; font-weight: 900;
}
.seo-hero > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 700px; }
.seo-source-note {
  font-size: 0.72rem !important; color: rgba(0,0,0,0.35) !important;
  margin-top: 4px !important; margin-bottom: 32px !important;
}

/* Search panels grid */
.seo-panels {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 20px; align-items: start;
}
.seo-panel-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(0,0,0,0.25); align-self: center; padding: 0 4px;
}

/* Panel cards */
.seo-panel {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fafafa;
  font-family: 'Inter', sans-serif;
}
.seo-panel-bar {
  padding: 10px 16px; display: flex; align-items: center;
}
.seo-panel-bar--google { background: #F1F3F4; }
.seo-panel-bar--ai     { background: var(--indigo-light); }
.seo-panel-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(0,0,0,0.45);
}
.seo-panel-bar--ai .seo-panel-label { color: var(--indigo); }

/* Search bar */
.seo-searchbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background: #fff;
}
.seo-searchbar--ai { background: var(--indigo-light); }
.seo-searchbar-query {
  font-size: 0.8rem; color: rgba(0,0,0,0.65);
  font-family: 'Courier New', monospace;
}

/* SERP results */
.seo-results { padding: 8px 0; }
.seo-result {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.seo-result--ad     { background: #fafafa; }
.seo-result--yours  {
  background: var(--indigo-light);
  border-left: 3px solid var(--indigo);
}
.seo-result--other  { opacity: 0.6; }

.seo-badge-ad {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.5);
  width: fit-content; margin-bottom: 2px;
}
.seo-badge-rank {
  display: inline-block; font-size: 0.62rem; font-weight: 800;
  padding: 1px 6px; border-radius: 3px;
  background: var(--indigo); color: #fff;
  width: fit-content; margin-bottom: 2px;
}
.seo-r-url   { font-size: 0.72rem; color: #1a7f37; }
.seo-r-title { font-size: 0.82rem; font-weight: 600; color: var(--indigo); }
.seo-r-desc  { font-size: 0.72rem; color: rgba(0,0,0,0.55); }
.seo-r-stars { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.seo-stars       { color: #FBBC04; font-size: 0.8rem; letter-spacing: 1px; }
.seo-rating-txt  { font-size: 0.72rem; color: rgba(0,0,0,0.5); }

/* AI answer */
.seo-ai-body { padding: 14px 16px; background: #fff; }
.seo-ai-body p { font-size: 0.82rem; color: rgba(0,0,0,0.65); line-height: 1.6; margin-bottom: 12px; }
.seo-ai-missing {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 700; color: #CF2D26;
  padding: 8px 10px; background: #fff5f5;
  border-radius: 6px; border: 1px solid rgba(207,45,38,0.15);
}
.seo-missing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #CF2D26; flex-shrink: 0;
}

/* Verdict bar */
.seo-verdict {
  padding: 10px 16px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4;
}
.seo-verdict--good { background: var(--indigo-mid); color: var(--indigo); }
.seo-verdict--bad  { background: #FFF5F5; color: #CF2D26; }

/* ── Beat-2: Strategy ── */
.seo-strategy {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.seo-strategy h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.seo-strategy > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 700px; margin-bottom: 36px; }

.seo-dual-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.seo-track {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.seo-track--google { border-top: 4px solid #1a73e8; }
.seo-track--ai     { border-top: 4px solid var(--indigo); }

.seo-track-num {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; font-weight: 900;
  color: #1a73e8; padding: 20px 24px 4px;
  letter-spacing: -0.05em;
}
.seo-track-num--ai { color: var(--indigo); }

.seo-track-body { padding: 0 24px 24px; }
.seo-track-title {
  display: block; font-size: 1.05rem; font-weight: 800;
  color: var(--carbon); margin-bottom: 4px;
}
.seo-track-sub {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: rgba(0,0,0,0.45); margin-bottom: 16px;
}
.seo-track-list {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.seo-track-list li {
  font-size: 0.82rem; color: rgba(0,0,0,0.65);
  padding-left: 14px; position: relative;
}
.seo-track-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #1a73e8;
}
.seo-track--ai .seo-track-list li::before { background: var(--indigo); }

.seo-track-outcome {
  font-size: 0.78rem; font-weight: 700;
  padding: 10px 14px; border-radius: 8px;
  background: rgba(26,115,232,0.08); color: #1a73e8;
}
.seo-track-outcome--ai { background: var(--indigo-light); color: var(--indigo); }

/* ── Beat-3: Proof ── */
.seo-proof {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--indigo);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.seo-proof h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.seo-proof > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 700px; margin-bottom: 32px; }

/* Citation card */
.seo-citation-card {
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid rgba(79,70,229,0.2);
  background: #fff; margin-bottom: 36px;
}
.seo-citation-head {
  background: var(--indigo-light); padding: 18px 24px;
  border-bottom: 1px solid rgba(79,70,229,0.1);
}
.seo-citation-engines { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.seo-eng-badge {
  font-size: 0.7rem; font-weight: 800; padding: 3px 10px;
  border-radius: 100px; background: var(--indigo); color: #fff;
}
.seo-eng-badge--alt {
  background: transparent; color: var(--indigo);
  border: 1.5px solid var(--indigo);
}
.seo-citation-query {
  font-size: 0.88rem; font-weight: 600; color: rgba(0,0,0,0.6);
  font-family: 'Courier New', monospace;
}
.seo-citation-body {
  padding: 24px; position: relative;
}
.seo-citation-body p {
  font-size: 0.9rem; line-height: 1.75; color: rgba(0,0,0,0.72);
}
.seo-citation-body strong { color: var(--carbon); }

/* Blinking cursor */
.seo-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--indigo); vertical-align: middle;
  margin-left: 2px;
  animation: seo-blink 1s step-end infinite;
}
@keyframes seo-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.seo-citation-foot {
  background: var(--indigo-light); padding: 12px 24px;
  display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; border-top: 1px solid rgba(79,70,229,0.1);
}
.seo-citation-badge {
  font-size: 0.72rem; font-weight: 800; padding: 3px 10px;
  border-radius: 100px; background: var(--indigo); color: #fff;
}
.seo-citation-note { font-size: 0.72rem; color: rgba(0,0,0,0.4); }

/* 3-stat row */
.seo-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,0.07);
  border-radius: 14px; overflow: hidden; margin-bottom: 28px;
}
.seo-stat-block {
  background: #fff; display: flex; flex-direction: column;
  gap: 4px; padding: 22px 24px; text-align: center; align-items: center;
}
.seo-stat-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; color: var(--indigo); letter-spacing: -0.03em; line-height: 1;
}
.seo-stat-lbl { font-size: 0.8rem; color: rgba(0,0,0,0.6); font-weight: 600; line-height: 1.4; }
.seo-stat-src { font-size: 0.68rem; color: rgba(0,0,0,0.32); }

/* Indigo CTA */
.btn-primary--indigo {
  background: var(--indigo) !important;
  border-color: var(--indigo) !important;
}
.btn-primary--indigo:hover {
  background: #4338ca !important;
  border-color: #4338ca !important;
}

/* Responsive */
@media (max-width: 900px) {
  .seo-panels    { grid-template-columns: 1fr; }
  .seo-panel-vs  { writing-mode: horizontal-tb; }
  .seo-dual-grid { grid-template-columns: 1fr; }
  .seo-stat-row  { grid-template-columns: 1fr; }
  .seo-hero, .seo-strategy, .seo-proof { padding: 32px 28px; }
}

/* ── Text depth: drop-shadow on dark-background sections ── */
.page-hero h1,
.page-hero h2,
.page-hero p,
.page-hero .eyebrow,
.page-hero span,
.cta-band h2,
.cta-band h3,
.cta-band p,
.cta-band .eyebrow,
.cta-band span:not(.btn-primary *) {
  filter: drop-shadow(0 0 0.75rem black);
}

/* ══════════════════════════════════════════════════════
   AI LEAD MANAGEMENT TAB — Teal accent
══════════════════════════════════════════════════════ */
:root {
  --teal: #0D9488;
  --teal-light: #F0FDFA;
  --teal-mid: #CCFBF1;
}
.eyebrow--teal { color: var(--teal) !important; }

/* ── Beat-1: Hero ── */
.ailm-hero {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--teal);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.ailm-hero h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--carbon); line-height: 1.2;
  margin-bottom: 16px; font-weight: 900;
}
.ailm-hero > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 720px; }
.ailm-source-note {
  font-size: 0.72rem !important; color: rgba(0,0,0,0.35) !important;
  margin-top: 4px !important; margin-bottom: 32px !important;
  font-style: italic;
}

/* Dual scenario grid */
.ailm-scenarios {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 20px; align-items: start;
}
.ailm-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(0,0,0,0.25); align-self: center; padding: 0 4px;
}

/* Scenario cards */
.ailm-scenario {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fafafa;
}
.ailm-scenario-bar {
  padding: 10px 16px;
}
.ailm-scenario-bar--bad  { background: #FFF5F5; }
.ailm-scenario-bar--good { background: var(--teal-light); }
.ailm-scenario-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ailm-scenario-bar--bad  .ailm-scenario-label { color: #CF2D26; }
.ailm-scenario-bar--good .ailm-scenario-label { color: var(--teal); }

.ailm-scenario-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.ailm-timestamp {
  font-size: 0.72rem; font-weight: 700;
  color: rgba(0,0,0,0.4); font-family: 'Courier New', monospace;
}

/* Mini form mock */
.ailm-form-mock {
  background: #fff; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.ailm-form-row { display: flex; gap: 8px; align-items: baseline; }
.ailm-form-label {
  font-size: 0.68rem; font-weight: 700; color: rgba(0,0,0,0.35);
  min-width: 52px; text-transform: uppercase; letter-spacing: 0.05em;
}
.ailm-form-val { font-size: 0.78rem; color: rgba(0,0,0,0.7); }

/* Ticking clock */
.ailm-clock-block {
  background: rgba(207,45,38,0.05); border-radius: 8px;
  padding: 12px 14px; text-align: center;
  border: 1px solid rgba(207,45,38,0.12);
}
.ailm-clock-label {
  font-size: 0.68rem; font-weight: 700; color: #CF2D26;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.ailm-clock {
  display: flex; align-items: center; justify-content: center;
  gap: 2px; font-family: 'Courier New', monospace;
}
.ailm-clock-digit {
  font-size: 1.9rem; font-weight: 900; color: #CF2D26;
  background: #fff; border-radius: 6px; padding: 4px 8px;
  min-width: 48px; text-align: center; line-height: 1;
  border: 1px solid rgba(207,45,38,0.15);
}
.ailm-clock-sep {
  font-size: 1.6rem; font-weight: 900; color: #CF2D26;
  margin-bottom: 3px;
}

/* Response time badge */
.ailm-response-time {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; color: var(--teal);
  background: var(--teal-mid); padding: 10px 14px;
  border-radius: 8px; border: 1px solid rgba(13,148,136,0.2);
}
.ailm-rt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  animation: ailm-pulse 1.5s ease-in-out infinite;
}
@keyframes ailm-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(13,148,136,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(13,148,136,0); }
}

/* Outcome bars */
.ailm-outcome {
  font-size: 0.78rem; font-weight: 700;
  padding: 10px 14px; border-radius: 8px; line-height: 1.45;
}
.ailm-outcome--bad  { background: #FFF5F5; color: #CF2D26; border: 1px solid rgba(207,45,38,0.15); }
.ailm-outcome--good { background: var(--teal-mid); color: #065F46; border: 1px solid rgba(13,148,136,0.2); }

/* ── Beat-2: Chat ── */
.ailm-chat {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.ailm-chat h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.ailm-chat > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 700px; margin-bottom: 32px;
}

/* Chat window */
.ailm-chat-window {
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid rgba(13,148,136,0.2);
  max-width: 680px;
}
.ailm-chat-header {
  background: var(--teal); padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.ailm-chat-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; color: #fff;
}
.ailm-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5eead4; flex-shrink: 0;
  animation: ailm-pulse 1.5s ease-in-out infinite;
}
.ailm-chat-time {
  font-size: 0.72rem; color: rgba(255,255,255,0.6);
  font-family: 'Courier New', monospace;
}

.ailm-messages {
  background: #F8FFFE; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Message bubbles */
.ailm-msg { display: flex; flex-direction: column; gap: 3px; }
.ailm-msg--lead  { align-items: flex-end; }
.ailm-msg--ai    { align-items: flex-start; }

.ailm-bubble {
  padding: 10px 14px; border-radius: 12px;
  font-size: 0.83rem; line-height: 1.6; max-width: 80%;
}
.ailm-bubble--lead {
  background: #E5E7EB; color: rgba(0,0,0,0.75);
  border-radius: 12px 12px 2px 12px;
}
.ailm-bubble--ai {
  background: var(--teal); color: #fff;
  border-radius: 12px 12px 12px 2px;
}
.ailm-msg-time {
  font-size: 0.65rem; color: rgba(0,0,0,0.3);
  font-family: 'Courier New', monospace;
}

/* Booked banner */
.ailm-booked-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--teal-mid); padding: 12px 16px;
  border-radius: 10px; font-size: 0.78rem;
  font-weight: 700; color: #065F46;
  border: 1px solid rgba(13,148,136,0.25);
}
.ailm-booked-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
}

/* ── Beat-3: Proof ── */
.ailm-proof {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--teal);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.ailm-proof h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.ailm-proof > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 700px; margin-bottom: 36px;
}

/* Stat row */
.ailm-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,0.07);
  border-radius: 14px; overflow: hidden; margin-bottom: 28px;
}
.ailm-stat-block {
  background: #fff; display: flex; flex-direction: column;
  gap: 4px; padding: 22px 24px; text-align: center; align-items: center;
}
.ailm-stat-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; color: var(--teal); letter-spacing: -0.03em; line-height: 1;
}
.ailm-stat-lbl { font-size: 0.8rem; color: rgba(0,0,0,0.6); font-weight: 600; line-height: 1.4; }
.ailm-stat-src  { font-size: 0.68rem; color: rgba(0,0,0,0.32); }

/* Teal CTA */
.btn-primary--teal {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}
.btn-primary--teal:hover {
  background: #0f766e !important;
  border-color: #0f766e !important;
}

/* Responsive */
@media (max-width: 900px) {
  .ailm-scenarios   { grid-template-columns: 1fr; }
  .ailm-stat-row    { grid-template-columns: 1fr; }
  .ailm-hero, .ailm-chat, .ailm-proof { padding: 32px 28px; }
}

/* Centre the chat window */
.ailm-chat-window { margin: 0 auto; }

/* ══════════════════════════════════════════════════════
   SOCIAL ADS TAB — Rose accent + CSS funnel layout
══════════════════════════════════════════════════════ */
:root {
  --rose: #F43F5E;
  --rose-light: #FFF1F3;
  --rose-mid: #FFE4E8;
}
.eyebrow--rose { color: var(--rose) !important; }

/* ── Beat-1: Hero ── */
.soc-hero {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--rose);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.soc-hero h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--carbon); line-height: 1.2;
  margin-bottom: 16px; font-weight: 900;
}
.soc-hero > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 720px; margin-bottom: 32px;
}

/* Boost mock card */
.soc-boost-mock {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fafafa; max-width: 860px;
}
.soc-boost-header {
  background: #F1F3F4; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.soc-boost-platform {
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: rgba(0,0,0,0.45);
}
.soc-boost-status {
  font-size: 0.68rem; font-weight: 800; padding: 3px 10px;
  border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em;
}
.soc-boost-status--live { background: #D1FAE5; color: #065F46; }

.soc-boost-body {
  padding: 20px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 24px;
}
.soc-boost-section-label {
  display: block; font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(0,0,0,0.35); margin-bottom: 10px;
}
.soc-boost-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.soc-boost-field { font-size: 0.75rem; color: rgba(0,0,0,0.4); font-weight: 600; }
.soc-boost-val   { font-size: 0.78rem; color: rgba(0,0,0,0.7); text-align: right; }
.soc-boost-val--warn { color: rgba(0,0,0,0.35); font-style: italic; }
.soc-boost-val--bad  { color: #CF2D26; font-weight: 800; font-size: 0.88rem; }

.soc-boost-verdict {
  display: flex; align-items: center; gap: 10px;
  background: var(--rose-light); padding: 14px 20px;
  font-size: 0.8rem; font-weight: 700; color: var(--rose);
  border-top: 1px solid rgba(244,63,94,0.12);
}
.soc-boost-verdict-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose); flex-shrink: 0;
}

/* ── Beat-2: Funnel Section ── */
.soc-funnel-section {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.soc-funnel-section h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.soc-funnel-section > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 720px; margin-bottom: 36px;
}

/* Funnel: three narrowing stages */
.soc-funnel {
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

/* Connector arrow between stages */
.soc-funnel-arrow {
  color: rgba(0,0,0,0.2); display: flex;
  align-items: center; justify-content: center;
  height: 28px;
}

/* Each stage narrows via max-width */
.soc-funnel-stage {
  width: 100%; border-radius: 16px;
  overflow: hidden; border: 1.5px solid rgba(0,0,0,0.07);
}
.soc-funnel-stage--tofu { max-width: 100%; }
.soc-funnel-stage--mofu { max-width: 82%; }
.soc-funnel-stage--bofu { max-width: 64%; }

/* Stage top accent bar */
.soc-funnel-stage--tofu { border-top: 4px solid #6366F1; }
.soc-funnel-stage--mofu { border-top: 4px solid var(--rose); }
.soc-funnel-stage--bofu { border-top: 4px solid #059669; }

.soc-funnel-inner {
  padding: 22px 28px; background: #fff;
  display: flex; gap: 28px; align-items: flex-start;
  flex-wrap: wrap;
}
.soc-funnel-meta {
  display: flex; gap: 14px; align-items: flex-start;
  flex-shrink: 0;
}
.soc-funnel-num {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; color: rgba(0,0,0,0.1);
}
.soc-funnel-stage--tofu .soc-funnel-num { color: rgba(99,102,241,0.25); }
.soc-funnel-stage--mofu .soc-funnel-num { color: rgba(244,63,94,0.25); }
.soc-funnel-stage--bofu .soc-funnel-num { color: rgba(5,150,105,0.25); }

.soc-funnel-label-block { display: flex; flex-direction: column; gap: 2px; }
.soc-funnel-tag {
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: rgba(0,0,0,0.35);
}
.soc-funnel-title {
  font-size: 1.1rem; font-weight: 900; color: var(--carbon);
}
.soc-funnel-content { flex: 1; min-width: 200px; }

/* Platform badges */
.soc-funnel-platforms {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.soc-platform-badge {
  font-size: 0.68rem; font-weight: 800; padding: 3px 10px;
  border-radius: 100px; border: 1.5px solid rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.5); background: #fafafa;
}
.soc-funnel-stage--tofu .soc-platform-badge { border-color: #6366F1; color: #6366F1; background: #EEF2FF; }
.soc-funnel-stage--mofu .soc-platform-badge { border-color: var(--rose); color: var(--rose); background: var(--rose-light); }
.soc-funnel-stage--bofu .soc-platform-badge { border-color: #059669; color: #059669; background: #F0FDFA; }

/* Funnel list */
.soc-funnel-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.soc-funnel-list li {
  font-size: 0.8rem; color: rgba(0,0,0,0.62);
  padding-left: 14px; position: relative; line-height: 1.5;
}
.soc-funnel-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,0.2);
}
.soc-funnel-stage--tofu .soc-funnel-list li::before { background: #6366F1; }
.soc-funnel-stage--mofu .soc-funnel-list li::before { background: var(--rose); }
.soc-funnel-stage--bofu .soc-funnel-list li::before { background: #059669; }

/* Budget note */
.soc-budget-note {
  margin-top: 24px; text-align: center;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(0,0,0,0.4); font-style: italic;
}

/* ── Beat-3: Proof ── */
.soc-proof {
  background: #fff; border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 5px solid var(--rose);
  padding: 48px 52px; max-width: 1200px;
  margin: 0 auto 28px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.soc-proof h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.soc-proof > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 700px; margin-bottom: 36px;
}

/* Stat row */
.soc-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,0.07);
  border-radius: 14px; overflow: hidden; margin-bottom: 28px;
}
.soc-stat-block {
  background: #fff; display: flex; flex-direction: column;
  gap: 4px; padding: 22px 24px; text-align: center; align-items: center;
}
.soc-stat-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; color: var(--rose);
  letter-spacing: -0.03em; line-height: 1;
}
.soc-stat-lbl { font-size: 0.8rem; color: rgba(0,0,0,0.6); font-weight: 600; line-height: 1.4; }
.soc-stat-src  { font-size: 0.68rem; color: rgba(0,0,0,0.32); }

/* Rose CTA */
.btn-primary--rose {
  background: var(--rose) !important;
  border-color: var(--rose) !important;
}
.btn-primary--rose:hover {
  background: #e11d48 !important;
  border-color: #e11d48 !important;
}

/* Responsive */
@media (max-width: 900px) {
  .soc-boost-body   { grid-template-columns: 1fr; }
  .soc-stat-row     { grid-template-columns: 1fr; }
  .soc-funnel-stage--mofu,
  .soc-funnel-stage--bofu { max-width: 100%; }
  .soc-hero, .soc-funnel-section, .soc-proof { padding: 32px 28px; }
  .soc-funnel-inner { flex-direction: column; gap: 16px; }
}

/* ══════════════════════════════════════════════════════
   SOCIAL ADS — Full-bleed zone layout (no card wrappers)
══════════════════════════════════════════════════════ */

/* Override tab padding so zones bleed edge-to-edge */
#tab-social.tab-content.active,
#tab-social.tab-content.show {
  padding-top: 0 !important;
}
#tab-social .reveal { transform: none !important; opacity: 1 !important; }

/* Zone base — strips all card styling */
.soc-zone {
  width: 100%;
  padding: 72px 0;
}
.soc-zone-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 52px;
}

/* ── Zone 1: Rose tint ── */
.soc-zone--boost {
  background: var(--rose-light);
  border-top: 3px solid var(--rose);
}
.soc-zone--boost h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--carbon); line-height: 1.2;
  margin-bottom: 16px; font-weight: 900;
}
.soc-zone--boost > .soc-zone-inner > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 680px; margin-bottom: 36px;
}

/* ── Zone 2: White ── */
.soc-zone--funnel {
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.soc-zone--funnel h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--carbon); margin-bottom: 12px; font-weight: 900;
}
.soc-zone--funnel > .soc-zone-inner > p {
  color: rgba(0,0,0,0.62); line-height: 1.75;
  max-width: 680px; margin-bottom: 40px;
}

/* ── Zone 3: Dark (first dark section on any tab) ── */
.soc-zone--proof {
  background: #1C0A0D;
  border-top: 3px solid var(--rose);
}
.soc-zone--proof h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: #fff; margin-bottom: 12px; font-weight: 900;
}
.soc-zone--proof > .soc-zone-inner > p {
  color: rgba(255,255,255,0.55); line-height: 1.75;
  max-width: 680px; margin-bottom: 40px;
}
.eyebrow--rose-on-dark {
  color: var(--rose) !important;
  display: block; margin-bottom: 12px;
}

/* Stats on dark bg */
.soc-zone--proof .soc-stat-row {
  background: rgba(255,255,255,0.06);
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
  gap: 0;
}
.soc-zone--proof .soc-stat-block {
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.soc-zone--proof .soc-stat-block:last-child { border-right: none; }
.soc-zone--proof .soc-stat-num { color: var(--rose); }
.soc-zone--proof .soc-stat-lbl { color: rgba(255,255,255,0.7); }
.soc-zone--proof .soc-stat-src { color: rgba(255,255,255,0.25); }

/* Rose outline CTA for dark bg */
.btn-primary--rose-outline {
  background: transparent !important;
  border: 2px solid var(--rose) !important;
  color: #fff !important;
  margin-top: 8px;
}
.btn-primary--rose-outline:hover {
  background: var(--rose) !important;
  color: #fff !important;
}

/* Boost mock — inherits existing .soc-boost-* styles, just centre it */
.soc-zone--boost .soc-boost-mock {
  max-width: 820px; margin: 0 auto;
  box-shadow: 0 8px 48px rgba(244,63,94,0.12);
}

/* Funnel — centred within zone */
.soc-zone--funnel .soc-funnel { max-width: 900px; margin: 0 auto; }
.soc-zone--funnel .soc-budget-note { max-width: 900px; margin: 24px auto 0; }

/* Responsive */
@media (max-width: 900px) {
  .soc-zone { padding: 48px 0; }
  .soc-zone-inner { padding: 0 24px; }
  .soc-funnel-stage--mofu,
  .soc-funnel-stage--bofu { max-width: 100%; }
  .soc-boost-body { grid-template-columns: 1fr; }
  .soc-stat-row   { grid-template-columns: 1fr; }
  .soc-zone--proof .soc-stat-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* ══════════════════════════════════════════════════════
   DISPLAY & VIDEO — Warm amber canvas, four-column grid
══════════════════════════════════════════════════════ */

/* Nuke tab padding so canvas bleeds edge-to-edge */
#tab-display.tab-content.active,
#tab-display.tab-content.show {
  padding-top: 0 !important;
}

/* The single unified warm canvas */
.disp-canvas {
  background: linear-gradient(to bottom, #FFFBF7 0%, #FFF0E0 100%);
  border-top: 3px solid var(--amber, #E07A35);
  padding-bottom: 0;
}

/* Canvas header */
.disp-canvas-header {
  max-width: 1100px; margin: 0 auto;
  padding: 60px 52px 40px;
}
.disp-canvas-header h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--carbon); line-height: 1.2;
  margin-bottom: 16px; font-weight: 900;
}
.disp-canvas-header > p {
  color: rgba(0,0,0,0.6); line-height: 1.75;
  max-width: 680px; margin-bottom: 36px;
}

/* Stat trio row */
.disp-stat-trio {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(224,122,53,0.15);
  border-radius: 14px; overflow: hidden;
}
.disp-stat-trio-item {
  background: rgba(255,255,255,0.7);
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 24px; text-align: center; align-items: center;
}
.disp-trio-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; color: var(--amber, #E07A35);
  letter-spacing: -0.03em; line-height: 1;
}
.disp-trio-lbl { font-size: 0.8rem; color: rgba(0,0,0,0.6); font-weight: 600; line-height: 1.4; }
.disp-trio-src  { font-size: 0.68rem; color: rgba(0,0,0,0.32); }

/* Amber horizontal rule between header and grid */
.disp-canvas-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(224,122,53,0.25), transparent);
  margin: 0 52px;
}

/* Four-column journey grid */
.disp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px; margin: 0 auto;
  padding: 0 52px;
  border-top: none;
}

/* Each column */
.disp-col {
  position: relative; overflow: hidden;
  padding: 36px 24px 32px;
  border-right: 1px solid rgba(224,122,53,0.12);
}
.disp-col:last-child { border-right: none; }

/* Colour accents per column */
.disp-col--neutral { background: transparent; }
.disp-col--bad     { background: rgba(207,45,38,0.03); }
.disp-col--active  { background: rgba(224,122,53,0.05); }
.disp-col--convert { background: rgba(5,150,105,0.04); }

/* Top accent line per col */
.disp-col--neutral::before,
.disp-col--bad::before,
.disp-col--active::before,
.disp-col--convert::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.disp-col--neutral::before { background: rgba(224,122,53,0.3); }
.disp-col--bad::before     { background: #CF2D26; }
.disp-col--active::before  { background: var(--amber, #E07A35); }
.disp-col--convert::before { background: #059669; }

/* Watermark day number */
.disp-col-watermark {
  position: absolute; top: 12px; right: 12px;
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; text-align: right;
  color: rgba(0,0,0,0.04); pointer-events: none;
  user-select: none;
}

/* Step circle */
.disp-col-step {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 0.78rem; font-weight: 900; color: #fff;
  background: rgba(224,122,53,0.5);
  margin-bottom: 12px; flex-shrink: 0;
}
.disp-col-step--bad     { background: #CF2D26; }
.disp-col-step--active  { background: var(--amber, #E07A35); }
.disp-col-step--convert { background: #059669; }

.disp-col-body { position: relative; z-index: 1; }
.disp-col-title {
  display: block; font-size: 1rem; font-weight: 900;
  color: var(--carbon); margin-bottom: 8px; line-height: 1.25;
}
.disp-col-desc {
  font-size: 0.8rem; color: rgba(0,0,0,0.58); line-height: 1.65; margin: 0;
}

/* Embedded calculator inside Day 15 */
.disp-embedded-calc {
  margin-top: 20px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(5,150,105,0.15);
  border-radius: 12px; padding: 16px;
}
.disp-calc-label {
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #059669; margin-bottom: 10px; display: block;
}
.disp-calc-field-lbl {
  font-size: 0.72rem; font-weight: 700; color: rgba(0,0,0,0.45);
  display: block; margin-bottom: 6px;
}
.disp-calc-control {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.disp-calc-control .roic-slider { flex: 1; }
.disp-calc-control .roic-numbox { flex-shrink: 0; }
.disp-calc-control .roic-num { width: 72px; font-size: 0.78rem; padding: 4px 6px; }

/* Mini result rows */
.disp-mini-results { display: flex; flex-direction: column; gap: 6px; }
.disp-mini-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.disp-mini-row:last-child { border-bottom: none; }
.disp-mini-lbl { font-size: 0.72rem; color: rgba(0,0,0,0.45); font-weight: 600; }
.disp-mini-val { font-size: 0.88rem; font-weight: 900; color: var(--carbon); }
.disp-mini-val--bad  { color: #CF2D26; }
.disp-mini-val--good { color: #059669; }

/* Canvas footer */
.disp-canvas-footer {
  max-width: 1100px; margin: 0 auto;
  padding: 28px 52px 60px;
  border-top: 1px solid rgba(224,122,53,0.12);
}

/* Responsive */
@media (max-width: 1000px) {
  .disp-grid { grid-template-columns: repeat(2,1fr); }
  .disp-col  { border-right: none; border-bottom: 1px solid rgba(224,122,53,0.12); }
}
@media (max-width: 640px) {
  .disp-grid                { grid-template-columns: 1fr; }
  .disp-canvas-header,
  .disp-canvas-footer       { padding-left: 24px; padding-right: 24px; }
  .disp-col                 { padding: 28px 20px; }
  .disp-stat-trio           { grid-template-columns: 1fr; }
  .disp-canvas-rule         { margin: 0 24px; }
}

/* Display & Video — footer calc layout */
.disp-canvas-footer {
  max-width: 1100px; margin: 0 auto;
  padding: 40px 52px 64px;
}
.disp-footer-calc { margin-bottom: 28px; }
.disp-footer-input { margin-bottom: 28px; }
.disp-footer-input .roic-control {
  display: flex; align-items: center; gap: 16px;
}
.disp-footer-input .roic-slider { flex: 1; }

@media (max-width: 640px) {
  .disp-canvas-footer { padding: 32px 24px 48px; }
}

/* ══════════════════════════════════════════════════════
   EMAIL TAB — Cobalt accent, split inbox + sequence rows
══════════════════════════════════════════════════════ */
:root {
  --cobalt: #2563EB;
  --cobalt-light: #EFF6FF;
  --cobalt-mid: #DBEAFE;
}
.eyebrow--cobalt { color: var(--cobalt) !important; }

/* Tab padding override */
#tab-email.tab-content.active,
#tab-email.tab-content.show { padding-top: 0 !important; }

/* Canvas */
.eml-canvas {
  background: #F8FAFF;
  border-top: 3px solid var(--cobalt);
}

/* ── Beat-1: Inbox section ── */
.eml-inbox-section { padding: 60px 52px 48px; max-width: 1200px; margin: 0 auto; }
.eml-inbox-header { margin-bottom: 36px; }
.eml-inbox-header h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--carbon); line-height: 1.2; margin-bottom: 16px; font-weight: 900;
}
.eml-inbox-header > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 700px; }

/* Split panels */
.eml-inbox-split {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: start;
}
.eml-inbox-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(0,0,0,0.2); align-self: center; padding: 0 4px;
}

/* Inbox panel */
.eml-inbox-panel {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.eml-inbox-bar {
  background: #F1F3F4; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.eml-inbox-bar--good { background: var(--cobalt-light); }
.eml-inbox-app {
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: rgba(0,0,0,0.4);
}
.eml-inbox-bar--good .eml-inbox-app { color: var(--cobalt); }
.eml-unread-count {
  font-size: 0.68rem; font-weight: 800; padding: 2px 8px;
  border-radius: 100px; background: #CF2D26; color: #fff;
}
.eml-open-badge {
  font-size: 0.68rem; font-weight: 800; padding: 2px 8px;
  border-radius: 100px; background: var(--cobalt); color: #fff;
}

/* Email rows */
.eml-inbox-list { display: flex; flex-direction: column; }
.eml-inbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.eml-inbox-row:last-child { border-bottom: none; }
.eml-inbox-row--unread { background: #FAFAFA; }
.eml-inbox-row--opened { background: #fff; }

.eml-inbox-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.eml-inbox-dot--unread { background: rgba(0,0,0,0.2); }
.eml-inbox-dot--opened { background: var(--cobalt); }

.eml-inbox-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eml-sender   { font-size: 0.72rem; font-weight: 700; color: rgba(0,0,0,0.5); }
.eml-subject  { font-size: 0.8rem; font-weight: 600; color: rgba(0,0,0,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eml-subject--personal { color: var(--carbon); font-weight: 700; }
.eml-preview  { font-size: 0.72rem; color: rgba(0,0,0,0.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eml-trigger-tag {
  font-size: 0.65rem; font-weight: 700;
  color: var(--cobalt); background: var(--cobalt-light);
  padding: 1px 6px; border-radius: 4px; width: fit-content;
}
.eml-time         { font-size: 0.65rem; color: rgba(0,0,0,0.3); white-space: nowrap; font-family: 'Courier New', monospace; flex-shrink: 0; }
.eml-time--opened { color: var(--cobalt); }

/* Verdict bar */
.eml-inbox-verdict {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 0.75rem; font-weight: 700; line-height: 1.4;
}
.eml-inbox-verdict--bad  { background: #FFF5F5; color: #CF2D26; }
.eml-inbox-verdict--good { background: var(--cobalt-mid); color: var(--cobalt); }
.eml-verdict-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #CF2D26; flex-shrink: 0;
}
.eml-verdict-dot--good { background: var(--cobalt); }

/* ── Beat-2: Sequences ── */
.eml-sequences-section {
  background: #fff;
  border-top: 1px solid rgba(37,99,235,0.1);
  border-bottom: 1px solid rgba(37,99,235,0.1);
  padding: 56px 52px;
}
.eml-sequences-inner { max-width: 1100px; margin: 0 auto; }
.eml-sequences-inner h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); font-weight: 900; margin-bottom: 12px;
}
.eml-sequences-inner > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 700px; margin-bottom: 36px; }

/* Sequence rows */
.eml-seq-list { display: flex; flex-direction: column; gap: 2px; }
.eml-seq-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.eml-seq-row:last-child { border-bottom: none; }

.eml-seq-num {
  font-size: 1.5rem; font-weight: 900; color: var(--cobalt-mid);
  letter-spacing: -0.04em; min-width: 36px; line-height: 1;
  padding-top: 2px;
}
.eml-seq-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.eml-seq-name {
  font-size: 1rem; font-weight: 800; color: var(--carbon); line-height: 1;
}
.eml-seq-trigger {
  font-size: 0.72rem; font-weight: 600; color: var(--cobalt);
  background: var(--cobalt-light); padding: 2px 8px; border-radius: 4px;
  width: fit-content;
}

/* Step pills */
.eml-seq-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px;
}
.eml-step {
  display: flex; flex-direction: column; align-items: center;
  background: #F8FAFF; border: 1px solid rgba(37,99,235,0.15);
  border-radius: 8px; padding: 6px 10px; font-size: 0.72rem;
  font-weight: 800; color: var(--cobalt); line-height: 1;
  gap: 3px;
}
.eml-step-lbl { font-size: 0.62rem; font-weight: 600; color: rgba(0,0,0,0.4); }
.eml-step-arrow { font-size: 0.7rem; color: rgba(0,0,0,0.2); }

/* ── Beat-3: Proof ── */
.eml-proof-section { padding: 56px 52px; }
.eml-proof-inner { max-width: 1100px; margin: 0 auto; }
.eml-proof-inner h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--carbon); font-weight: 900; margin-bottom: 12px;
}
.eml-proof-inner > p { color: rgba(0,0,0,0.62); line-height: 1.75; max-width: 700px; margin-bottom: 36px; }

/* Stat row */
.eml-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(0,0,0,0.07);
  border-radius: 14px; overflow: hidden; margin-bottom: 28px;
}
.eml-stat-block {
  background: #fff; display: flex; flex-direction: column;
  gap: 4px; padding: 22px 24px; text-align: center; align-items: center;
}
.eml-stat-num {
  font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 900;
  color: var(--cobalt); letter-spacing: -0.03em; line-height: 1;
}
.eml-stat-lbl { font-size: 0.8rem; color: rgba(0,0,0,0.6); font-weight: 600; line-height: 1.4; }
.eml-stat-src  { font-size: 0.68rem; color: rgba(0,0,0,0.32); }

/* Cobalt CTA */
.btn-primary--cobalt {
  background: var(--cobalt) !important;
  border-color: var(--cobalt) !important;
}
.btn-primary--cobalt:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Responsive */
@media (max-width: 900px) {
  .eml-inbox-split { grid-template-columns: 1fr; }
  .eml-stat-row    { grid-template-columns: 1fr; }
  .eml-inbox-section, .eml-sequences-section, .eml-proof-section { padding: 36px 24px; }
  .eml-seq-steps { flex-wrap: wrap; }
  .eml-inbox-row { flex-wrap: wrap; }
  .eml-subject   { white-space: normal; }
}

/* ══════════════════════════════════════════════════════
   EMAIL SEQUENCES — Vertical cascading timeline refactor
══════════════════════════════════════════════════════ */

/* Timeline container — the vertical cobalt line */
.eml-seq-list {
  position: relative;
  padding-left: 28px;
  gap: 0;
}
.eml-seq-list::before {
  content: '';
  position: absolute;
  left: 17px; /* centre of the 36px circle */
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom, var(--cobalt) 0%, rgba(37,99,235,0.15) 100%);
}

/* Each row — tighter, cleaner */
.eml-seq-row {
  position: relative;
  gap: 24px;
  padding: 0 0 28px 0;
  align-items: flex-start;
}
.eml-seq-row:last-child { padding-bottom: 0; }

/* Numbered circle — solid cobalt, white number */
.eml-seq-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px #F8FAFF; /* punches through the connecting line */
}

/* Sequence content card */
.eml-seq-body {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(37,99,235,0.1);
  border-left: 3px solid var(--cobalt);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(37,99,235,0.05);
  margin-top: 0;
}

/* Sequence name — primary headline */
.eml-seq-name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--carbon);
  margin-bottom: 6px;
  display: block;
}

/* Trigger — the hero entry point */
.eml-seq-trigger {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cobalt);
  background: var(--cobalt-light);
  border: 1px solid rgba(37,99,235,0.15);
  padding: 4px 10px;
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 14px;
  display: block;
}

/* Step pills — tighter grouping */
.eml-seq-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.eml-step {
  background: var(--cobalt-light);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--cobalt);
  gap: 2px;
}
.eml-step-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(37,99,235,0.55);
}
.eml-step-arrow {
  font-size: 0.65rem;
  color: rgba(37,99,235,0.3);
  font-weight: 900;
}

/* Responsive — collapse line on small screens */
@media (max-width: 640px) {
  .eml-seq-list::before { display: none; }
  .eml-seq-list { padding-left: 0; }
  .eml-seq-num  { width: 32px; height: 32px; font-size: 0.68rem; }
}

/* ══════════════════════════════════════════════════════
   EMAIL SEQUENCES — Two-column card layout (balance fix)
══════════════════════════════════════════════════════ */

/* Card now splits into two columns */
.eml-seq-body {
  display: grid !important;
  grid-template-columns: 1fr 260px; /* Fixed width ensures perfect vertical alignment of divider across all rows */
  gap: 0;
  align-items: center; /* Center contents vertically instead of stretch */
  padding: 0 !important;
  overflow: hidden;
}

/* Left column: name + trigger + steps */
.eml-seq-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
}

/* Right column: metadata */
.eml-seq-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px 28px;
  background: transparent; /* Remove heavy blue block */
  border-left: 1px solid rgba(0,0,0,0.06); /* Subtle structural divider */
}

/* Meta stat items (email count + open rate) */
.eml-seq-meta-item {
  display: flex;
  align-items: baseline; /* Align numeral and label horizontally */
  text-align: left;
  gap: 8px;
}
.eml-seq-meta-val {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--cobalt);
  letter-spacing: -0.03em;
  line-height: 1;
}
.eml-seq-meta-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(0,0,0,0.4); /* Neutral gray instead of blue */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Divider between meta items */
.eml-seq-meta-item + .eml-seq-meta-item {
  padding-top: 0;
  border-top: none;
}

/* Goal line at bottom of right col */
.eml-seq-meta-goal {
  font-size: 0.75rem;
  color: rgba(0,0,0,0.5); /* Neutral gray */
  line-height: 1.4;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06); /* Subtle neutral divider */
  text-align: left;
}

/* Ensure steps don't overflow left col */
.eml-seq-left .eml-seq-steps { flex-wrap: wrap; }

/* Responsive: collapse to single column on mobile */
@media (max-width: 720px) {
  .eml-seq-body        { grid-template-columns: 1fr !important; }
  .eml-seq-left        { border-right: none; border-bottom: 1px solid rgba(37,99,235,0.1); }
  .eml-seq-right       { flex-direction: row; flex-wrap: wrap; justify-content: space-around; min-width: unset; }
  .eml-seq-meta-item + .eml-seq-meta-item { padding-top: 0; border-top: none; }
  .eml-seq-meta-goal   { width: 100%; }
}


/* ══════════════════════════════════════════════════════
   ANALYTICS TAB — "Infinite Blueprint" Glassmorphic Dash
══════════════════════════════════════════════════════ */
:root {
  --emerald: #10B981;
  --emerald-dark: #059669;
  --emerald-tint: rgba(16, 185, 129, 0.08);
  --blueprint-bg: #FFFFFF;
  --blueprint-line: #F1F5F9;
  --blueprint-text: #0F172A;
  --glass-card: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(15, 23, 42, 0.06);
}

/* Tab padding override */
#tab-analytics.tab-content.active,
#tab-analytics.tab-content.show { padding-top: 0 !important; }

/* Blueprint Canvas */
.anl-canvas {
  background-color: var(--blueprint-bg);
  /* Architect's grid pattern */
  background-image: 
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size: 40px 40px;
  border-top: 3px solid var(--emerald);
  padding: 60px 52px 80px;
  min-height: 650px;
  color: var(--blueprint-text);
  position: relative;
  overflow: hidden;
}

/* Header */
.anl-header {
  max-width: 800px;
  margin: 0 auto 56px;
  text-align: center;
  position: relative;
  z-index: 10;
}
.anl-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--emerald-dark);
  margin-bottom: 12px;
}
.anl-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--blueprint-text);
  line-height: 1.15;
  margin-bottom: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.anl-header p {
  color: #475569;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* Bento Grid */
.anl-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "noise signal"
    "stack stack";
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 48px;
  position: relative;
  z-index: 10;
}

/* Cards (White Glass) */
.anl-card {
  background: var(--glass-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
}
.anl-card--noise  { grid-area: noise; }
.anl-card--signal { 
  grid-area: signal; 
  border-color: rgba(16,185,129,0.2); 
  box-shadow: 0 24px 48px rgba(16,185,129,0.06), 0 1px 3px rgba(15, 23, 42, 0.02);
}
.anl-card--stack  { grid-area: stack; }

.anl-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.anl-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.03em;
}
.anl-card-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 4px;
}
.anl-badge--bad { background: rgba(239,68,68,0.05); color: #EF4444; border: 1px solid rgba(239,68,68,0.15); }
.anl-badge--good { background: var(--emerald-tint); color: var(--emerald-dark); border: 1px solid rgba(16,185,129,0.25); }
.anl-badge--neutral { background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0; }

/* Noise Metrics */
.anl-noise-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: auto;
}
.anl-noise-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
/* Strikethrough effect on noise metrics */
.anl-noise-lbl { color: #94A3B8; font-size: 0.9rem; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.4); text-decoration-thickness: 2px; }
.anl-noise-val { color: #94A3B8; font-size: 1.2rem; font-weight: 800; font-family: monospace; text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.4); text-decoration-thickness: 2px; }

/* Signal Metrics */
.anl-signal-metrics {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: auto;
}

.anl-signal-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.anl-hero-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anl-hero-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  padding-bottom: 4px;
}
.anl-bar {
  width: 12px;
  background: var(--emerald-tint);
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(16,185,129,0.15);
  border-bottom: none;
}
.anl-bar:last-child {
  background: var(--emerald);
  border-color: var(--emerald);
  box-shadow: 0 0 12px rgba(16,185,129,0.4);
}

.anl-signal-lbl { color: #64748B; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.anl-signal-val { color: var(--emerald); font-size: 2.8rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }

.anl-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(16,185,129,0.1);
}
.anl-signal-block { display: flex; flex-direction: column; gap: 4px; }
.anl-signal-subval { color: var(--blueprint-text); font-size: 1.4rem; font-weight: 800; }

/* Stack Flow (Card 3) */
.anl-stack-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 24px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}
.anl-stack-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.anl-node-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748B;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 6px rgba(15,23,42,0.02);
}
.anl-node-lbl { font-size: 0.8rem; font-weight: 700; color: #334155; }

.anl-node--emerald .anl-node-icon {
  background: var(--emerald-tint);
  border-color: rgba(16,185,129,0.2);
  color: var(--emerald-dark);
}

.anl-stack-arrow {
  color: #CBD5E1;
  font-size: 1.2rem;
  font-weight: 900;
}
.anl-stack-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748B;
  max-width: 800px;
}

/* Verdicts */
.anl-verdict {
  margin-top: 32px;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
}
.anl-verdict--bad { background: #FEF2F2; color: #B91C1C; border-left: 2px solid #EF4444; }
.anl-verdict--good { background: var(--emerald-tint); color: var(--emerald-dark); border-left: 2px solid var(--emerald); }

/* CTA */
.anl-cta-wrap { text-align: center; position: relative; z-index: 10; }
.btn-primary--emerald { background: var(--emerald) !important; border-color: var(--emerald) !important; color: #000 !important; font-weight: 800 !important; }
.btn-primary--emerald:hover { background: var(--emerald-dark) !important; border-color: var(--emerald-dark) !important; color: #fff !important; }

/* Responsive */
@media (max-width: 900px) {
  .anl-bento { grid-template-columns: 1fr; grid-template-areas: "noise" "signal" "stack"; }
  .anl-canvas { padding: 40px 24px; }
  .anl-stack-flow { flex-direction: column; gap: 16px; }
  .anl-stack-arrow { transform: rotate(90deg); }
}

/* ── TRUST SIGNAL MICRO ── */
.trust-signal-micro {
  font-size: 0.75rem;
  color: var(--gray-600);
  margin-top: 20px;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ==========================================================================
   HEALTHCARE — CLINICAL IDENTITY SYSTEM
   ========================================================================== */
#tab-healthcare {
  --hc-teal:       #0891B2;
  --hc-teal-dark:  #0E7490;
  --hc-teal-light: #ECFEFF;
  --hc-teal-mid:   #CFFAFE;
  --hc-teal-border:#A5F3FC;
  --hc-navy:       #164E63;
  --hc-green:      #15803D;
  --hc-green-bg:   #DCFCE7;
  --hc-amber:      #854D0E;
  --hc-amber-bg:   #FEF9C3;
}

/* --- Hero Split --- */
.hc-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 56px auto;
  padding: 0 24px;
}
.hc-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-teal);
  background: var(--hc-teal-light);
  border: 1px solid var(--hc-teal-border);
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.hc-headline {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--hc-navy);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.hc-sub {
  font-size: 1.05rem;
  color: var(--gray-600);
  line-height: 1.75;
  max-width: 440px;
  margin-bottom: 32px;
}

/* --- Metric Row --- */
.hc-metric-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px;
  background: var(--hc-teal-light);
  border: 1px solid var(--hc-teal-border);
  border-radius: 16px;
}
.hc-metric { flex: 1; }
.hc-metric-num {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--hc-teal);
  line-height: 1;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.hc-metric-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hc-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.hc-metric-note {
  display: block;
  font-size: 0.72rem;
  color: var(--hc-teal-dark);
  font-style: italic;
}
.hc-metric-divider {
  width: 1px;
  background: var(--hc-teal-border);
  align-self: stretch;
}

/* --- Schedule Widget --- */
.hc-schedule-widget {
  background: #fff;
  border: 1px solid #E0F2FE;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(8,145,178,0.12), 0 2px 8px rgba(0,0,0,0.06);
}
.hc-schedule-header {
  background: var(--hc-teal);
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hc-schedule-date { font-weight: 500; opacity: 0.8; font-size: 0.78rem; }
.hc-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-bottom: 1px solid #F0FAFF;
  transition: background 0.15s ease;
}
.hc-slot:hover { background: #F9FFFE; }
.hc-slot-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-400);
  min-width: 62px;
  font-family: 'JetBrains Mono', monospace;
}
.hc-slot-name {
  flex: 1;
  font-size: 0.83rem;
  color: var(--gray-900);
  font-weight: 500;
}
.hc-slot-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--hc-green-bg);
  color: var(--hc-green);
}
.hc-slot-available { opacity: 0.55; }
.hc-slot-tag-open  { background: var(--hc-amber-bg); color: var(--hc-amber); }
.hc-schedule-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hc-teal-light);
  padding: 11px 22px;
  font-size: 0.75rem;
  color: var(--hc-teal-dark);
  font-weight: 600;
  border-top: 1px solid var(--hc-teal-border);
}

/* --- ECG Divider --- */
.hc-ecg-divider {
  max-width: 1100px;
  margin: 0 auto 56px auto;
  padding: 0 24px;
  opacity: 0.2;
}
.hc-ecg-divider svg { width: 100%; height: 44px; }

/* --- Bottleneck Panel (Navy) --- */
.hc-bottleneck {
  max-width: 1100px;
  margin: 0 auto 72px auto;
  padding: 56px 64px;
  background: var(--hc-navy);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hc-bottleneck-cross {
  position: absolute;
  right: -30px;
  top: -80px;
  font-size: 320px;
  font-weight: 900;
  color: rgba(8,145,178,0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.hc-bottleneck-text .eyebrow { margin-bottom: 12px; display: block; }
.hc-bottleneck-text h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.hc-bottleneck-text p {
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  font-size: 0.98rem;
}
.hc-bottleneck-image {
  border-radius: 16px;
  overflow: hidden;
  min-height: 360px;
  height: 100%;
  align-self: stretch;
  aspect-ratio: 4 / 3;
  background: url('../assets/images/industries/tab-healthcare/healthcare-bottleneck.webp') center top / cover no-repeat;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* --- System Cards --- */
.hc-system {
  max-width: 1100px;
  margin: 0 auto 0 auto;
  padding: 0 24px 48px;
}
.hc-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.hc-system-card {
  background: #fff;
  border: 1px solid #E0F2FE;
  border-top: 3px solid var(--hc-teal);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(8,145,178,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hc-system-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(8,145,178,0.15);
}
.hc-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--hc-teal-light);
  border: 1px solid var(--hc-teal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hc-teal);
  margin-bottom: 20px;
}
.hc-system-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--hc-navy);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.hc-system-card p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.65;
}

/* --- HC CTA Button --- */
.btn-hc-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hc-teal);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  letter-spacing: 0.01em;
  font-family: 'Inter', sans-serif;
}
.btn-hc-primary:hover {
  background: var(--hc-teal-dark);
  transform: translateY(-2px);
}

/* --- Healthcare Responsive --- */
@media (max-width: 960px) {
  .hc-hero           { grid-template-columns: 1fr; gap: 40px; }
  .hc-headline       { font-size: 2.2rem; }
  .hc-bottleneck     { grid-template-columns: 1fr; padding: 40px; gap: 36px; }
  .hc-bottleneck-image { min-height: 220px; }
  .hc-system-grid    { grid-template-columns: 1fr; }
  .hc-metric-row     { flex-direction: column; gap: 16px; }
  .hc-metric-divider { width: 100%; height: 1px; }
}

/* ==========================================================================
   RETAIL — LOCAL SEARCH IDENTITY SYSTEM
   ========================================================================== */
#tab-retail {
  --rt-crimson:  #B91C1C;
  --rt-crimson2: #991B1B;
  --rt-amber:    #D97706;
  --rt-amber-lt: #FFF8EE;
  --rt-green:    #15803D;
  --rt-border:   rgba(185,28,28,0.12);
}

/* ── SECTION 1: Full-width Campaign Board ── */
.rt-board-section {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 24px;
}
.rt-board-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.rt-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rt-crimson);
  border: 1px solid rgba(185,28,28,0.35);
  padding: 4px 14px;
  border-radius: 100px;
}
.rt-board-intro-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rt-board-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--carbon);
}
.rt-board-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rt-crimson);
  animation: hvac-pulse 2.5s ease-in-out infinite;
}
.rt-board-date {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-family: 'JetBrains Mono', monospace;
}

/* 3-tile horizontal campaign grid */
.rt-campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}
.rt-campaign-tile {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-top: 3px solid var(--rt-crimson);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rt-campaign-tile:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.09); transform: translateY(-2px); }
.rt-tile-hot   { border-top-color: var(--rt-crimson); }
.rt-tile-scaling { border-top-color: var(--rt-amber); }

.rt-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rt-tile-status {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rt-status-active  { color: var(--rt-green); }
.rt-status-scaling { color: var(--rt-amber); }

.rt-tile-query {
  font-size: 0.62rem;
  color: var(--gray-400);
  font-style: italic;
  text-align: right;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-tile-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--carbon);
  margin-bottom: 16px;
  line-height: 1.3;
}

/* Funnel inside tile */
.rt-tile-funnel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.rt-tile-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #F7F7F7;
  border-radius: 8px;
  padding: 8px 4px;
}
.rt-tile-win {
  background: rgba(21,128,61,0.07);
  border: 1px solid rgba(21,128,61,0.18);
}
.rt-tile-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--carbon);
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.rt-tile-win .rt-tile-val { color: var(--rt-green); }
.rt-tile-key {
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
}
.rt-tile-win .rt-tile-key { color: var(--rt-green); }
.rt-tile-arrow {
  font-size: 1rem;
  color: #CCCCCC;
  flex-shrink: 0;
}
.rt-tile-cpa {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--rt-amber);
  padding-top: 10px;
  border-top: 1px solid #F0F0F0;
}

/* Board totals bar */
.rt-board-totals {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--rt-amber-lt);
  border: 1px solid rgba(217,119,6,0.15);
  border-radius: 10px;
  font-size: 0.72rem;
  color: var(--rt-amber);
  font-weight: 600;
}

/* ── SECTION 2: Wide copy + twin stat cards ── */
.rt-value-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 56px auto;
  padding: 0 24px;
  border-top: 1px solid #F0F0F0;
  padding-top: 48px;
}
.rt-value-copy { display: flex; flex-direction: column; }
.rt-headline {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--carbon);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.rt-headline em { color: var(--rt-crimson); font-style: normal; }
.rt-sub {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 28px;
}

/* CTA */
.rt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--rt-crimson);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.02em;
  font-family: 'Inter', sans-serif;
  align-self: flex-start;
}
.rt-cta:hover { background: var(--rt-crimson2); transform: translateY(-2px); }

/* Twin stat cards (stacked, not a horizontal strip) */
.rt-stat-cards { display: flex; flex-direction: column; gap: 16px; }
.rt-stat-card {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-left: 4px solid var(--rt-crimson);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.rt-stat-big {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: var(--rt-crimson);
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.rt-stat-unit {
  font-size: 1.4rem;
  color: var(--rt-amber);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
.rt-stat-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--carbon);
  line-height: 1.4;
}
.rt-stat-source {
  display: block;
  font-size: 0.65rem;
  color: var(--gray-400);
  font-style: italic;
}

/* ── THE SYSTEM ── */
.rt-system {
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}
.rt-system-header { text-align: center; margin-bottom: 48px; }
.rt-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rt-amber);
  margin-bottom: 12px;
}
.rt-system-header h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.rt-system-header p { color: var(--gray-600); max-width: 480px; margin: 0 auto; line-height: 1.7; }

.rt-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.rt-system-card {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-top: 3px solid var(--rt-crimson);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rt-system-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.09); transform: translateY(-3px); }
.rt-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(185,28,28,0.07);
  border: 1px solid rgba(185,28,28,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rt-crimson);
  margin-bottom: 20px;
}
.rt-system-card h4 { font-size: 1rem; font-weight: 800; color: var(--carbon); margin-bottom: 12px; }
.rt-system-card p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.65; flex: 1; margin-bottom: 16px; }
.rt-card-metric {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--rt-amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
}

.rt-system-cta { text-align: center; padding-top: 8px; border-top: 1px solid #F0F0F0; }
.rt-trust-note { font-size: 0.78rem; color: var(--gray-400); font-style: italic; margin-bottom: 20px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .rt-headline    { font-size: 2rem; }
  .rt-system-grid { grid-template-columns: 1fr; gap: 16px; }
  .rt-campaign-grid { grid-template-columns: 1fr; }
  .rt-value-split { grid-template-columns: 1fr; gap: 32px; }
  .rt-board-intro { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   PROFESSIONAL SERVICES — REFERRAL PLATEAU IDENTITY SYSTEM
   ========================================================================== */
#tab-proservices {
  --ps-navy:   #1E3A5F;
  --ps-indigo: #2D5282;
  --ps-gold:   #C9922A;
  --ps-gold-lt:#FDF3E3;
  --ps-border: rgba(30,58,95,0.12);
}

/* ── Dossier Layout ── */
.ps-dossier {
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}

/* Header Split */
.ps-dossier-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
  margin-bottom: 48px;
}
.ps-head-main {
  flex: 1;
  max-width: 700px;
}
.ps-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ps-navy);
  border: 1px solid var(--ps-border);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.ps-headline {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--carbon);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.ps-sub {
  font-size: 1.05rem;
  color: var(--gray-600);
  line-height: 1.7;
}

/* Header KPIs */
.ps-head-kpi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
}
.ps-kpi-box {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  border-left: 4px solid var(--ps-navy);
}
.ps-kpi-alt { border-left-color: var(--ps-gold); }
.ps-kpi-val {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ps-navy);
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px;
}
.ps-kpi-alt .ps-kpi-val { color: var(--ps-gold); }
.ps-kpi-unit { font-size: 1.1rem; font-family: 'Inter', sans-serif; }
.ps-kpi-txt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--carbon);
  line-height: 1.4;
}

/* Mid Section: Pipeline Tracker */
.ps-pipeline-tracker {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 48px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.ps-pipe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F0F0F0;
}
.ps-pipe-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ps-navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ps-pipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ps-gold);
  animation: hvac-pulse 2.5s ease-in-out infinite;
}
.ps-pipe-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
}

.ps-pipe-flow {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ps-flow-item {
  flex: 1;
  background: #F8F9FA;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid transparent;
}
.ps-item-pending { opacity: 0.7; }
.ps-flow-status {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.ps-status-booked { background: rgba(30,58,95,0.1); color: var(--ps-navy); }
.ps-status-qual { background: rgba(201,146,42,0.15); color: var(--ps-gold); }

.ps-flow-core { display: flex; flex-direction: column; gap: 4px; }
.ps-flow-name { font-size: 0.85rem; font-weight: 700; color: var(--carbon); }
.ps-flow-detail { font-size: 0.68rem; color: var(--gray-400); }
.ps-flow-arrow { font-size: 1.5rem; color: #D0D0D0; font-weight: 300; }

/* Bottom Section */
.ps-dossier-bottom {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
}
.ps-system-split {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ps-sys-card {
  display: flex;
  gap: 24px;
  background: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.ps-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(30,58,95,0.06);
  color: var(--ps-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-card-content { display: flex; flex-direction: column; }
.ps-card-content h4 { font-size: 1.1rem; font-weight: 800; color: var(--carbon); margin-bottom: 8px; }
.ps-card-content p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 16px; }
.ps-card-metric {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ps-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
}

.ps-cta-panel {
  background: var(--ps-navy);
  border-radius: 16px;
  padding: 32px 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ps-cta-icon { color: var(--ps-gold); margin-bottom: 24px; }
.ps-cta-content h4 { font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; }
.ps-cta-content p { font-size: 0.95rem; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 16px; }
.ps-cta-metric {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ps-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 24px;
}
.ps-cta-action { display: flex; flex-direction: column; gap: 12px; }
.ps-cta-btn {
  background: #fff;
  color: var(--ps-navy);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 0;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease;
}
.ps-cta-btn:hover { transform: translateY(-2px); }
.ps-cta-note {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ps-dossier-head { flex-direction: column; gap: 32px; }
  .ps-headline { font-size: 2.2rem; }
  .ps-pipe-flow { flex-direction: column; align-items: stretch; gap: 8px; }
  .ps-flow-arrow { display: none; }
  .ps-dossier-bottom { grid-template-columns: 1fr; }
  .ps-sys-card { flex-direction: column; gap: 16px; }
}


/* ==========================================================================
   HVAC & PLUMBING — DISPATCH IDENTITY SYSTEM
   ========================================================================== */
#tab-hvac {
  --hvac-orange:     #FF5A00;
  --hvac-orange-mid: #FF8C42;
  --hvac-orange-dim: #C44A00;
  --hvac-cyan:       #00E5FF;
  --hvac-cyan-dim:   #0097A7;
  --hvac-slate:      #0A1628;
  --hvac-steel:      #0D1F35;
  --hvac-border:     rgba(0,229,255,0.15);
}

/* ── SECTION 1: Hero Split ── */
.hvac-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
}

/* ── Dispatch Board ── */
.hvac-dispatch-board {
  background: var(--hvac-slate);
  border: 1px solid var(--hvac-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,229,255,0.05);
  display: flex;
  flex-direction: column;
}
.hvac-board-header {
  background: var(--hvac-steel);
  border-bottom: 1px solid var(--hvac-border);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hvac-board-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.hvac-board-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hvac-orange);
  animation: hvac-pulse 2s ease-in-out infinite;
}
@keyframes hvac-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}
.hvac-board-date {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  font-family: 'JetBrains Mono', monospace;
}

/* Job rows */
.hvac-job-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s ease;
}
.hvac-job-row:hover { background: rgba(255,255,255,0.03); }
.hvac-job-row:last-of-type { border-bottom: none; }

.hvac-job-emergency { border-left: 2px solid var(--hvac-orange); }
.hvac-job-replace   { border-left: 2px solid var(--hvac-cyan); }
.hvac-job-filtered  { border-left: 2px solid rgba(255,255,255,0.15); opacity: 0.45; }

.hvac-job-tag {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 100px;
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}
.hvac-tag-emergency { background: rgba(255,90,0,0.2);  color: var(--hvac-orange); }
.hvac-tag-replace   { background: rgba(0,229,255,0.12); color: var(--hvac-cyan); }
.hvac-tag-filtered  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }

.hvac-job-info { flex: 1; min-width: 0; }
.hvac-job-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hvac-job-sub {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.38);
  margin-top: 2px;
}

.hvac-job-status {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 100px;
  flex-shrink: 0;
}
.hvac-status-dispatched { background: rgba(255,90,0,0.18);  color: var(--hvac-orange); }
.hvac-status-booked     { background: rgba(0,229,255,0.12); color: var(--hvac-cyan); }
.hvac-status-scheduled  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.hvac-status-low        { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); }

.hvac-board-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: rgba(0,229,255,0.05);
  border-top: 1px solid var(--hvac-border);
  font-size: 0.72rem;
  color: rgba(0,229,255,0.7);
  font-weight: 600;
}

/* ── Left column wrapper ── */
.hvac-hero-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── System Status Card ── */
.hvac-status-card {
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.hvac-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #F0F0F0;
  background: #F8F8F8;
}
.hvac-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,0.5);
  animation: hvac-pulse 2.5s ease-in-out infinite;
}
.hvac-status-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--carbon);
  flex: 1;
  letter-spacing: 0.03em;
}
.hvac-status-live {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #16A34A;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  padding: 2px 8px;
  border-radius: 100px;
}
.hvac-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.hvac-stat-cell {
  padding: 16px 18px;
  border-right: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hvac-stat-cell:nth-child(2n) { border-right: none; }
.hvac-stat-cell:nth-child(n+3) { border-bottom: none; }
.hvac-stat-val {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--hvac-orange);
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.03em;
}
.hvac-stat-key {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* ── Owner Quote ── */
.hvac-owner-quote {
  margin: 0;
  background: #FFF7F3;
  border: 1px solid #FFE0D0;
  border-left: 3px solid var(--hvac-orange);
  border-radius: 12px;
  padding: 18px 20px;
}
.hvac-owner-quote p {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--carbon);
  line-height: 1.6;
  margin: 0 0 12px 0;
}
.hvac-owner-quote footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hvac-quote-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--carbon);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hvac-quote-detail {
  font-size: 0.67rem;
  color: var(--gray-600);
  letter-spacing: 0.02em;
}

/* ── Hero Right ── */
.hvac-hero-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Full-bleed photo with headline baked in */
.hvac-hero-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  margin-bottom: 15px;
}
.hvac-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Orange-to-dark gradient overlay — trade print ad aesthetic */
.hvac-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 22, 40, 0.92) 0%,
    rgba(10, 22, 40, 0.5) 45%,
    rgba(255, 90, 0, 0.18) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 32px;
}
.hvac-hero-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--hvac-orange);
  border: none;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 12px;
  align-self: flex-start;
}
.hvac-hero-headline {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
}

/* KPI strip — two data points side by side, no dark box */
.hvac-kpi-strip {
  display: flex;
  align-items: stretch;
  border-top: 3px solid var(--hvac-orange);
  background: #fff;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #EBEBEB;
  padding: 20px 0;
  margin-top: 0;
}
.hvac-kpi {
  flex: 1;
  padding: 0 24px;
}
.hvac-kpi-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--hvac-orange);
  line-height: 1;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.03em;
}
.hvac-kpi-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--carbon);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  line-height: 1.3;
}
.hvac-kpi-note {
  display: block;
  font-size: 0.68rem;
  color: var(--gray-400);
  font-style: italic;
}
.hvac-kpi-rule {
  width: 1px;
  background: #EBEBEB;
  align-self: stretch;
  flex-shrink: 0;
}

/* Sub copy below strip */
.hvac-hero-sub {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.7;
  padding: 16px 24px 0;
}

/* Integration badges — inline row */
.hvac-hero-badges {
  display: flex;
  gap: 10px;
  padding: 14px 24px 0;
  flex-wrap: wrap;
}
.hvac-integration-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--carbon);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ── SECTION 2: Seasonal Demand Chart ── */
.hvac-seasonal {
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 64px 56px 48px;
  background: #fff;
  border-radius: 0;
  border: none;
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
}
.hvac-seasonal-header {
  text-align: center;
  margin-bottom: 48px;
}
.hvac-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hvac-orange);
  margin-bottom: 12px;
}
.hvac-seasonal-header h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.hvac-seasonal-header p {
  color: var(--gray-600);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 0.95rem;
}

.hvac-demand-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  margin-bottom: 16px;
}
.hvac-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
  position: relative;
}
.hvac-bar {
  width: 100%;
  height: var(--bh, 50%);
  background: var(--bc, var(--hvac-cyan));
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
}
.hvac-bar-peak {
  box-shadow: 0 -4px 16px rgba(0,229,255,0.25);
}
.hvac-bar-dead {
  border: 1px dashed rgba(0,0,0,0.15);
  background: transparent !important;
}
.hvac-bar-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(0,0,0,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hvac-dead-col .hvac-bar-label { color: rgba(0,0,0,0.25); }
.hvac-dead-tag, .hvac-preseason-tag {
  position: absolute;
  top: -4px;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
}
.hvac-dead-tag     { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); }
.hvac-preseason-tag { background: rgba(255,90,0,0.2); color: var(--hvac-orange); }

.hvac-chart-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #EBEBEB;
  margin-top: 8px;
}
.hvac-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--gray-600);
  font-weight: 600;
}
.hvac-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── SECTION 3: Horizontal Pipeline ── */
.hvac-pipeline {
  max-width: 1200px;
  margin: 0 auto 64px auto;
  padding: 64px 24px 56px;
  background: transparent;
  border-radius: 0;
  border: none;
}
.hvac-pipeline-header {
  text-align: center;
  margin-bottom: 48px;
}
.hvac-pipeline-header h3 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.hvac-pipeline-header p {
  color: var(--gray-600);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 0.95rem;
}
.hvac-pipeline-stages {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hvac-pipeline-stage {
  flex: 1;
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border-top: 3px solid var(--hvac-orange);
}
.hvac-pipeline-stage:nth-child(3) { border-top-color: var(--hvac-cyan-dim); }
.hvac-pipeline-stage:nth-child(5) { border-top-color: var(--hvac-cyan-dim); }
.hvac-pipeline-stage:nth-child(7) { border-top-color: var(--hvac-orange); }
.hvac-pipeline-stage:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.hvac-pipe-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,90,0,0.07);
  border: 1px solid rgba(255,90,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hvac-orange);
  margin: 0 auto 16px auto;
}
.hvac-pipeline-stage h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.hvac-pipeline-stage p {
  font-size: 0.8rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.hvac-pipe-arrow {
  font-size: 2rem;
  color: rgba(0,0,0,0.15);
  flex-shrink: 0;
  line-height: 1;
}

/* ── SECTION 4: Proof Banner ── */
.hvac-proof-banner {
  background: var(--hvac-slate);
  border: none;
  color: #fff;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto 60px auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.hvac-proof-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,90,0,0.1) 0%, transparent 55%),
              radial-gradient(circle at 80% 50%, rgba(0,229,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.hvac-proof-stat-col {
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}
.hvac-proof-copy-col {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hvac-proof-stat {
  font-size: 5rem;
  font-weight: 900;
  color: var(--hvac-orange);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.hvac-proof-stat-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
}

/* CTA button (shared with old CSS — keep) */
.hvac-dashboard-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hvac-orange);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.02em;
  font-family: 'Inter', sans-serif;
}
.hvac-dashboard-cta:hover {
  background: #e04e00;
  transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .hvac-hero            { grid-template-columns: 1fr; gap: 32px; }
  .hvac-hero-headline   { font-size: 2rem; }
  .hvac-pipeline-stages { flex-direction: column; gap: 16px; }
  .hvac-pipe-arrow      { transform: rotate(90deg); }
  .hvac-proof-banner    { grid-template-columns: 1fr; }
  .hvac-proof-stat-col  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 40px; }
  .hvac-seasonal        { padding: 32px 24px; }
  .hvac-pipeline        { padding: 40px 24px; }
  .hvac-demand-chart    { gap: 4px; }
}

#tab-hvac {
  --hvac-orange: #FF5A00;
  --hvac-cyan: #00E5FF;
  --hvac-slate: #0A1628;
  --hvac-light: #f4f8fb;
}

/* 1. Split-Panel Dashboard (Board Mandate: P2, P3, P4) */
.hvac-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--hvac-slate);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  max-width: 1200px;
  margin: 0 auto 60px auto;
  min-height: 460px;
}

/* P&ID Schematic background */
.hvac-dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/industries/tab-hvac/hvac-schematic.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .hvac-dashboard {
    grid-template-columns: 1fr 1fr;
  }
}

/* Left: Text Panel */
.hvac-dashboard-text {
  padding: 64px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

/* Right: Full-bleed image column */
.hvac-dashboard-image {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.hvac-dashboard-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient fade from left: image bleeds into text panel */
.hvac-dashboard-image::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 180px;
  background: linear-gradient(to right, var(--hvac-slate) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Gradient fade from bottom on mobile */
@media (max-width: 899px) {
  .hvac-dashboard-image::before {
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, var(--hvac-slate) 0%, transparent 100%);
  }
}

/* Orange accent glow at bottom-right of image */
.hvac-dashboard-image::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,90,0,0.2) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Metric Cards — P3: no translateX offsets */
.hvac-card-floating {
  background: rgba(11, 19, 25, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  position: relative;
  z-index: 2;
}

.hvac-dashboard-cards {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  padding: 48px 40px 40px 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
}

.hvac-dashboard-cards > * {
  pointer-events: all;
}

@media (max-width: 899px) {
  .hvac-dashboard-cards {
    position: static;
    width: 100%;
    padding: 0 32px 48px 32px;
  }
}

.hvac-card-floating.alt {
  border-color: rgba(255, 90, 0, 0.3);
  background: rgba(255, 90, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* P4: CTA button style inside the dashboard */
.hvac-dashboard-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hvac-orange);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 32px;
  align-self: flex-start;
  transition: background 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.02em;
}

.hvac-dashboard-cta:hover {
  background: #e04e00;
  transform: translateY(-2px);
}

/* 2. Process Flow — 3-column horizontal cards */
.hvac-process-flow {
  max-width: 1200px;
  margin: 0 auto 80px auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}

@media (min-width: 768px) {
  .hvac-process-flow {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hvac-flow-step {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  position: relative;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hvac-flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* Orange accent top bar */
.hvac-flow-step::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 3px;
  background: var(--hvac-orange);
  border-radius: 0 0 4px 4px;
}

.hvac-flow-step:nth-child(2)::before {
  background: var(--hvac-cyan);
}

.hvac-flow-step:nth-child(3)::before {
  background: linear-gradient(90deg, var(--hvac-orange), var(--hvac-cyan));
}

.hvac-step-node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hvac-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
}

.hvac-flow-step:nth-child(2) .hvac-step-node {
  background: var(--hvac-cyan);
  color: #0A1628;
}

.hvac-flow-step:nth-child(3) .hvac-step-node {
  background: linear-gradient(135deg, var(--hvac-orange), var(--hvac-cyan));
}

.hvac-step-content {
  flex: 1;
}

/* 3. Proof Banner — horizontal split */
.hvac-proof-banner {
  background: var(--hvac-slate);
  color: #fff;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto 60px auto;
}

@media (min-width: 768px) {
  .hvac-proof-banner {
    grid-template-columns: 1fr 1.6fr;
  }
}

/* Radial glow */
.hvac-proof-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 50%, rgba(255,90,0,0.12) 0%, transparent 60%),
              radial-gradient(circle at 80% 50%, rgba(0,229,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* Left: big stat */
.hvac-proof-stat-col {
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}

/* Right: copy + badges */
.hvac-proof-copy-col {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  text-align: left;
}

.hvac-proof-stat {
  font-size: 5.5rem;
  font-weight: 900;
  color: var(--hvac-orange);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.hvac-proof-stat-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  font-family: monospace;
}

/* ==========================================================================
   EDUCATION — ENROLLMENT FUNNEL IDENTITY SYSTEM
   ========================================================================== */
#tab-edu {
  --edu-primary: #1D4ED8;
  --edu-secondary: #3B82F6;
  --edu-accent: #10B981;
  --edu-bg: #F8FAFC;
  --edu-border: #E2E8F0;
}

/* ── Hero ── */
.edu-hero {
  max-width: 800px;
  margin: 0 auto 64px auto;
  text-align: center;
  padding: 0 24px;
}
.edu-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--edu-primary);
  background: rgba(29,78,216,0.08);
  border: 1px solid rgba(29,78,216,0.2);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.edu-headline {
  font-size: 3rem;
  font-weight: 900;
  color: var(--carbon);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.edu-sub {
  font-size: 1.1rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ── Timeline Section ── */
.edu-timeline-section {
  max-width: 1000px;
  margin: 0 auto 80px auto;
  padding: 0 24px;
}
.edu-timeline-header {
  text-align: center;
  margin-bottom: 48px;
}
.edu-timeline-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 8px;
}
.edu-timeline-header p {
  color: var(--gray-400);
  font-size: 0.95rem;
}

.edu-timeline {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}
.edu-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28px;
  width: 2px;
  background: var(--edu-border);
  z-index: 0;
}
.edu-step {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.edu-step-marker {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--edu-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--edu-primary);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(29,78,216,0.15);
}
.edu-step:nth-child(2) .edu-step-marker { border-color: var(--edu-secondary); color: var(--edu-secondary); }
.edu-step:nth-child(3) .edu-step-marker { border-color: var(--edu-accent); color: var(--edu-accent); }

.edu-step-card {
  background: #fff;
  border: 1px solid var(--edu-border);
  border-radius: 16px;
  padding: 32px;
  flex: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.edu-step-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.edu-step-card h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 12px;
}
.edu-step-card p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ── The Math Panel ── */
.edu-math-panel {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--carbon);
  border-radius: 24px;
  padding: 64px;
  display: flex;
  gap: 64px;
  align-items: center;
  color: #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.edu-math-left { flex: 1.2; }
.edu-math-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--edu-secondary);
  margin-bottom: 16px;
}
.edu-math-left h3 {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.1;
}
.edu-math-left p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 32px;
}
.edu-cta {
  background: var(--edu-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 16px 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.edu-cta:hover { background: var(--edu-secondary); }

.edu-math-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 64px;
}
.edu-math-stat { display: flex; flex-direction: column; }
.edu-stat-val {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--edu-accent);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.edu-stat-unit { font-size: 1.2rem; font-weight: 700; color: #fff; }
.edu-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .edu-headline { font-size: 2.2rem; }
  .edu-timeline::before { left: 20px; }
  .edu-step { gap: 16px; }
  .edu-step-marker { width: 40px; height: 40px; font-size: 1rem; }
  .edu-math-panel { flex-direction: column; padding: 40px 24px; gap: 40px; }
  .edu-math-right { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding-left: 0; padding-top: 40px; }
}

/* ==========================================================================
   TRAVEL — MARGIN TICKET IDENTITY SYSTEM
   ========================================================================== */
#tab-travel {
  --tr-brand: #F97316;
  --tr-bg: #FAFAFA;
  --tr-dark: #1E1B18;
}

/* ── Ticket Layout ── */
.tr-ticket-wrapper {
  max-width: 1100px;
  margin: 0 auto 64px auto;
  padding: 0 24px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
}

.tr-ticket {
  display: flex;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}

/* Left Side */
.tr-ticket-main {
  flex: 1;
  padding: 64px;
  background: #fff;
}
.tr-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tr-brand);
  background: rgba(249,115,22,0.1);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.tr-headline {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--carbon);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  max-width: 600px;
}
.tr-sub {
  font-size: 1.1rem;
  color: var(--gray-600);
  line-height: 1.6;
  max-width: 550px;
  margin-bottom: 40px;
}
.tr-action-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.tr-cta {
  background: var(--tr-dark);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 16px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.tr-cta:hover {
  background: var(--carbon);
  transform: translateY(-2px);
}
.tr-guarantee {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tr-brand);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Divider */
.tr-ticket-divider {
  width: 2px;
  background: repeating-linear-gradient(to bottom, #E2E8F0, #E2E8F0 10px, transparent 10px, transparent 20px);
  position: relative;
}
.tr-ticket-divider::before,
.tr-ticket-divider::after {
  content: '';
  position: absolute;
  left: -16px;
  width: 32px;
  height: 32px;
  background: var(--tr-bg);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.tr-ticket-divider::before { top: -16px; }
.tr-ticket-divider::after { bottom: -16px; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.05); }

/* Right Side (Stub) */
.tr-ticket-stub {
  width: 360px;
  background: #FAFAFA;
  padding: 64px 40px;
  display: flex;
  flex-direction: column;
}
.tr-stub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.tr-stub-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--carbon);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.tr-margin-compare {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
  flex: 1;
}
.tr-margin-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EAEAEA;
}
.tr-row-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tr-row-val {
  font-size: 1.4rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
}
.tr-row-ota .tr-row-val { color: #CF2D26; }
.tr-row-direct .tr-row-val { color: var(--tr-brand); }
.tr-row-direct { border-bottom: none; }

.tr-stub-footer {
  background: #fff;
  border: 1px solid #EAEAEA;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}
.tr-stub-metric {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--tr-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.tr-stub-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.5;
}

/* ── Bottom Grid ── */
.tr-season-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tr-season-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #F0F0F0;
  transition: transform 0.2s ease;
}
.tr-season-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.04); }
.tr-season-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(249,115,22,0.1);
  color: var(--tr-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.tr-season-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 12px;
}
.tr-season-card p {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .tr-ticket { flex-direction: column; }
  .tr-ticket-divider { width: 100%; height: 2px; background: repeating-linear-gradient(to right, #E2E8F0, #E2E8F0 10px, transparent 10px, transparent 20px); }
  .tr-ticket-divider::before, .tr-ticket-divider::after { top: -16px; left: auto; right: auto; }
  .tr-ticket-divider::before { left: -16px; box-shadow: inset -2px 0 4px rgba(0,0,0,0.05); }
  .tr-ticket-divider::after { right: -16px; top: -16px; box-shadow: inset 2px 0 4px rgba(0,0,0,0.05); }
  .tr-ticket-stub { width: 100%; }
  .tr-season-grid { grid-template-columns: 1fr; }
  .tr-headline { font-size: 2.2rem; }
  .tr-action-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}