/* ════════════════════════════════════════
       DESIGN TOKENS
       Brand palette from the SurtAI visiting card:
       navy #2B5BA8 + orange #E8611A on light grey.
       Colors below are tuned so every text/background
       pairing meets WCAG 2.1 AA (Section 508):
         - 4.5:1 for normal text
         - 3:1 for large text and UI components
    ════════════════════════════════════════ */
    :root {
      /* Brand */
      --navy:       #2B5BA8;   /* white text on this = 6.6:1 ✓ */
      --navy-dark:  #1e4282;
      --orange:     #E8611A;   /* decorative use only (borders, underlines, large accents) */
      --orange-text:#B84A11;   /* WCAG-safe orange for small text on light bg = 5.0:1 ✓ */
      --orange-lt:  #fdf0e8;

      /* Spacing */
      --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
      --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
      --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;   --sp-16: 4rem;
      --sp-20: 5rem;

      /* Type scale — fluid */
      --t-sm:   clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
      --t-base: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
      --t-lg:   clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
      --t-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
      --t-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
      --t-3xl:  clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
      --t-4xl:  clamp(2.4rem, 1.8rem + 2.5vw, 3.8rem);
      --t-5xl:  clamp(2.8rem, 2rem + 3.5vw, 5rem);

      /* Layout */
      --max: 1020px;
      --nav-h: 72px;
      --radius: 12px;
      --radius-lg: 20px;

      /* Motion */
      --fast: 0.14s;
      --base: 0.28s;
    }

    /* Light theme */
    [data-theme="light"] {
      --bg:          #ffffff;
      --bg-2:        #f7f7f5;
      --bg-3:        #f0efe9;
      --ink:         #111110;   /* on white = 18.1:1 ✓ */
      --ink-2:       #44443f;   /* on white = 9.8:1 ✓ */
      --ink-3:       #6e6e6b;   /* on white = 4.9:1 ✓ (was #8a8a88, failed AA) */
      --border:      rgba(0,0,0,0.10);
      --border-md:   rgba(0,0,0,0.16);
      --nav-bg:      rgba(255,255,255,0.88);
      --accent:      var(--navy);
      --accent-text: var(--orange-text);
      --focus:       rgba(43,91,168,0.55);
      --shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
      --shadow-md:   0 4px 16px rgba(0,0,0,0.09);
      --shadow-lg:   0 12px 40px rgba(0,0,0,0.12);
    }

    /* Dark theme */
    [data-theme="dark"] {
      --bg:          #0a0a0a;
      --bg-2:        #141414;
      --bg-3:        #1e1e1e;
      --ink:         #f2f2f0;   /* on #0a0a0a = 17.8:1 ✓ */
      --ink-2:       #c2c2bf;   /* on #0a0a0a = 11.3:1 ✓ */
      --ink-3:       #9a9a97;   /* on #0a0a0a = 6.7:1 ✓ (was #636360, failed AA) */
      --border:      rgba(255,255,255,0.11);
      --border-md:   rgba(255,255,255,0.20);
      --nav-bg:      rgba(10,10,10,0.88);
      --accent:      #7ba3da;   /* on #0a0a0a = 7.0:1 ✓ */
      --accent-text: #ffa766;   /* orange link/eyebrow on dark = 8.9:1 ✓ */
      --focus:       rgba(123,163,218,0.6);
      --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
      --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
      --shadow-lg:   0 12px 40px rgba(0,0,0,0.6);
    }

    /* ════════════════════════════════════════
       RESET & BASE
    ════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: var(--t-base);
      font-weight: 400;
      line-height: 1.7;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      transition: background var(--base), color var(--base);
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: var(--accent-text); text-decoration: none; }
    a:hover { text-decoration: underline; }
    ul { list-style: none; }
    h1,h2,h3,h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    p { max-width: 62ch; }

    /* Accessibility */
    .skip-link {
      position: absolute; top: -48px; left: 0; z-index: 9999;
      background: var(--navy); color: #fff;
      padding: 10px 18px; border-radius: 0 0 8px 0; font-size: var(--t-sm);
    }
    .skip-link:focus { top: 0; }
    *:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ════════════════════════════════════════
       LAYOUT
    ════════════════════════════════════════ */
    .wrap {
      max-width: var(--max); margin: 0 auto;
      padding: 0 clamp(1.25rem, 5vw, 2.5rem);
    }
    .section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
    .section + .section { border-top: 1px solid var(--border); }
    .eyebrow {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: var(--t-sm); font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--orange-text); margin-bottom: var(--sp-4);
    }
    [data-theme="dark"] .eyebrow { color: var(--accent-text); }

    /* Section headings default to the 3xl step (replaces former inline styles).
       .contact-section h2 overrides to 4xl later in this file. */
    .wrap h2 { font-size: var(--t-3xl); }
    .mb-4  { margin-bottom: var(--sp-4); }
    .mb-8  { margin-bottom: var(--sp-8); }
    .mb-10 { margin-bottom: var(--sp-10); }

    /* ════════════════════════════════════════
       NAVIGATION
    ════════════════════════════════════════ */
    .nav {
      position: sticky; top: 0; z-index: 1000;
      background: var(--nav-bg);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      transition: background var(--base);
    }
    .nav-inner {
      max-width: var(--max); margin: 0 auto;
      padding: 0 clamp(1.25rem, 5vw, 2.5rem);
      height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    }
    .nav-logo { display: flex; align-items: center; min-height: 42px; }
    .nav-logo img { height: 42px; width: auto; }

    .nav-actions { display: flex; align-items: center; gap: var(--sp-4); }
    .nav-link {
      font-size: var(--t-sm); font-weight: 500;
      color: var(--ink-2); letter-spacing: 0.03em;
      min-height: 48px; display: flex; align-items: center; padding: 0 var(--sp-2);
      transition: color var(--fast);
    }
    .nav-link:hover { color: var(--orange-text); text-decoration: none; }
    [data-theme="dark"] .nav-link:hover { color: var(--accent-text); }

    /* Theme toggle */
    .theme-toggle { display: flex; gap: 3px; background: var(--bg-2); padding: 4px; border-radius: 20px; }
    .theme-btn {
      width: 36px; height: 36px; border: none; background: transparent;
      border-radius: 50%; cursor: pointer; font-size: 14px;
      color: var(--ink-3); display: flex; align-items: center; justify-content: center;
      transition: all var(--fast);
    }
    .theme-btn:hover { background: var(--bg); }
    .theme-btn.active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }

    /* Nav CTA — brand orange with dark text (5.6:1 ✓) */
    .nav-cta {
      display: inline-flex; align-items: center; min-height: 40px;
      padding: 0 var(--sp-6);
      background: #c2500f; color: #fff !important;
      border-radius: 6px; font-size: var(--t-sm); font-weight: 500;
      font-family: 'DM Sans', sans-serif;
      letter-spacing: 0.02em; transition: background var(--fast);
      text-decoration: none !important;
    }
    @media (hover: hover) {
  .nav-cta:hover { background: var(--navy); }
	}
	.nav-cta:active { background: var(--navy); }

    /* Mobile menu */
    .menu-toggle {
      display: none; min-width: 48px; min-height: 48px;
      background: transparent; border: none; color: var(--ink);
      cursor: pointer; padding: var(--sp-2);
      align-items: center; justify-content: center;
      border-radius: 8px; transition: background var(--fast);
    }
    .menu-toggle:hover { background: var(--bg-2); }
    .menu-toggle span {
      display: block; width: 22px; height: 1.5px;
      background: currentColor; position: relative; transition: all var(--base);
    }
    .menu-toggle span::before, .menu-toggle span::after {
      content: ''; position: absolute; width: 100%; height: 1.5px;
      background: currentColor; transition: all var(--base);
    }
    .menu-toggle span::before { top: -7px; }
    .menu-toggle span::after  { bottom: -7px; }
    .menu-toggle.active span { background: transparent; }
    .menu-toggle.active span::before { transform: rotate(45deg); top: 0; }
    .menu-toggle.active span::after  { transform: rotate(-45deg); bottom: 0; }

    @media (max-width: 720px) {
      .menu-toggle { display: flex; }
      .nav-actions {
        position: fixed; top: var(--nav-h); left: 0; right: 0;
        background: var(--nav-bg);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        flex-direction: column; padding: var(--sp-8) var(--sp-6);
        gap: var(--sp-6); border-bottom: 1px solid var(--border);
        transform: translateY(-110%); opacity: 0; pointer-events: none;
        transition: transform var(--base), opacity var(--base);
      }
      .nav-actions.active { transform: translateY(0); opacity: 1; pointer-events: all; }
      .nav-link { font-size: var(--t-lg); min-height: 48px; width: 100%; justify-content: center; }
      .nav-cta { min-height: 52px; padding: 0 var(--sp-8); font-size: var(--t-base); width: 100%; justify-content: center; }
    }

    /* ════════════════════════════════════════
       HERO — left-aligned, asymmetric
    ════════════════════════════════════════ */
    .hero {
      padding: clamp(4rem, 8vw, 8rem) 0 clamp(3rem, 6vw, 6rem);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .hero-inner {
      max-width: var(--max); margin: 0 auto;
      padding: 0 clamp(1.25rem, 5vw, 2.5rem);
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: clamp(3rem, 6vw, 5rem);
      align-items: start;
    }
    .hero-eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-size: var(--t-sm); font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--orange-text); margin-bottom: var(--sp-6);
      animation: fadeUp 0.5s ease both;
      display: block;
    }
    [data-theme="dark"] .hero-eyebrow { color: var(--accent-text); }
    .hero-title {
      font-size: var(--t-4xl); color: var(--ink);
      margin-bottom: var(--sp-6);
      animation: fadeUp 0.5s 0.08s ease both;
    }
    /* Orange underline on key word */
    .hero-title .u {
      position: relative; display: inline;
    }
    .hero-title .u::after {
      content: ''; position: absolute; left: 0; bottom: -3px;
      width: 100%; height: 3px; background: var(--orange); border-radius: 2px;
    }
    .hero-sub {
      font-size: var(--t-xl); color: var(--ink-2); font-weight: 400;
      line-height: 1.6; margin-bottom: var(--sp-10); max-width: 50ch;
      animation: fadeUp 0.5s 0.16s ease both;
    }
    .hero-actions {
      display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
      animation: fadeUp 0.5s 0.24s ease both;
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 50px; padding: 0 var(--sp-8);
      border-radius: 6px; font-family: 'DM Sans', sans-serif;
      font-size: var(--t-base); font-weight: 500; cursor: pointer;
      border: none; transition: all var(--fast); text-decoration: none !important;
      letter-spacing: 0.01em; white-space: nowrap;
    }
    .btn-primary {
      background: var(--navy); color: #fff;
      box-shadow: 0 2px 8px rgba(43,91,168,0.25);
    }
    .btn-primary:hover { background: var(--navy-dark); box-shadow: 0 4px 16px rgba(43,91,168,0.32); }
    .btn-ghost {
      background: #c2500f; color: #fff; 
      border: 1.5px solid var(--border-md);
    }
    	
	@media (hover: hover) {
	.btn-ghost:hover { background: var(--navy); }
	}
	.btn-ghost:active { background: var(--navy); }

    /* Hero right panel */
    .hero-panel {
      animation: fadeUp 0.5s 0.1s ease both;
    }
    /* Hero video facade — 16:9, poster + play button, loads Bunny on click */
    .hero-video {
      position: relative; width: 100%; aspect-ratio: 16/9;
      border-radius: var(--radius); overflow: hidden;
      box-shadow: var(--shadow-lg); background: #0c1626;
    }
    .hero-video-btn {
      position: absolute; inset: 0; width: 100%; height: 100%;
      padding: 0; border: none; cursor: pointer; background: none;
      display: block;
    }
    .hero-video-poster {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    
	.hero-video-play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45));
	transition: transform var(--fast);
	}
	.hero-video-btn:hover .hero-video-play,
	.hero-video-btn:focus-visible .hero-video-play { transform: translate(-50%, -50%) scale(1.08); }
	
	
    /* The Bunny iframe injected on click fills the same frame */
    .hero-video iframe {
      position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    }
		
    .hero-meta {
      margin-top: var(--sp-6); padding: var(--sp-6);
      background: var(--bg-2); border-radius: var(--radius);
      border: 1px solid var(--border);
    }
    .hero-meta p {
      font-family: 'Playfair Display', Georgia, serif; 	  
      font-size: var(--t-xl); color: var(--ink); line-height: 1.5;
      max-width: none; margin-bottom: 0;
    }
	
	/* Orange underline on key word */
    .hero-meta .u {
      position: relative; display: inline;
    }
    .hero-meta .u::after {
      content: ''; position: absolute; left: 0; bottom: -3px;
      width: 100%; height: 3px; background: var(--orange); border-radius: 2px;
    }
	
	

    @media (max-width: 820px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-panel { order: -1; max-width: 520px; }
    }

    /* ════════════════════════════════════════
       STAT BAR
    ════════════════════════════════════════ */
    .stat-bar {
      background: var(--navy); padding: var(--sp-8) 0;
    }
    .stat-bar-inner {
      max-width: var(--max); margin: 0 auto;
      padding: 0 clamp(1.25rem, 5vw, 2.5rem);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-6);
    }
    .stat { border-left: 2px solid var(--orange); padding-left: var(--sp-4); }
    .stat-n {
      font-family: 'Playfair Display', serif; font-weight: 700;
      font-size: var(--t-2xl); color: #fff; line-height: 1; margin-bottom: 6px;
    }
    /* white at 82% on navy = 5.1:1 ✓ */
    .stat-l { font-size: var(--t-sm); color: rgba(255,255,255,0.82); letter-spacing: 0.02em; line-height: 1.4; }

    @media (max-width: 600px) {
      .stat-bar-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    }

    /* ════════════════════════════════════════
       WHAT YOU GET
    ════════════════════════════════════════ */
    .features { display: flex; flex-direction: column; }
    .feature-row {
      display: grid; grid-template-columns: 72px 1fr;
      gap: var(--sp-6); padding: var(--sp-8) 0;
      border-bottom: 1px solid var(--border); align-items: start;
    }
    .feature-row:last-child { border-bottom: none; }
    .f-num {
      font-family: 'Playfair Display', serif; font-weight: 500;
      font-size: 3.5rem; color: var(--ink-3); line-height: 1;
      user-select: none; opacity: 0.55;
    }
    .f-body h3 {
      font-size: var(--t-xl); font-family: 'Playfair Display', serif;
      font-style: italic; font-weight: 500; margin-bottom: var(--sp-2);
      color: var(--ink);
    }
    /* Benefit hook — visible at a glance on fast mobile scroll */
    .f-hook {
      font-size: var(--t-base); font-weight: 500;
      color: var(--navy); margin-bottom: var(--sp-3);
      max-width: none;
    }
    [data-theme="dark"] .f-hook { color: var(--accent); }
    .f-body p { font-size: var(--t-base); color: var(--ink-2); }

    /* ════════════════════════════════════════
       PROCESS
    ════════════════════════════════════════ */
    .process { display: flex; flex-direction: column; gap: 0; }
    .p-step {
      display: grid; grid-template-columns: 52px 1fr;
      gap: var(--sp-6); padding: var(--sp-6) 0;
      border-bottom: 1px solid var(--border); align-items: start;
    }
    .p-step:last-child { border-bottom: none; }
    .p-marker {
      width: 44px; height: 44px; display: flex; align-items: center;
      justify-content: center;
      font-family: 'Playfair Display', serif; font-size: var(--t-2xl);
      font-weight: 500; color: var(--orange-text); flex-shrink: 0;
      border: none; border-radius: 0;
    }
    [data-theme="dark"] .p-marker { color: var(--accent-text); }
    .p-body h3 { font-size: var(--t-lg); font-family: 'Playfair Display', serif; font-weight: 600; margin-bottom: var(--sp-2); }
    .p-body p, .p-body li { font-size: var(--t-base); color: var(--ink-2); }
    .p-body ul { margin-top: var(--sp-3); }
    .p-body ul li { padding-left: var(--sp-4); position: relative; margin-bottom: var(--sp-2); }
    .p-body ul li::before { content: '–'; position: absolute; left: 0; color: var(--orange-text); }
    [data-theme="dark"] .p-body ul li::before { color: var(--accent-text); }
    .p-note { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--sp-3); }

    /* ════════════════════════════════════════
       SELECTED WORK — video cards (Bunny-ready)
    ════════════════════════════════════════ */
    .work-intro {
      font-size: var(--t-lg); color: var(--ink-2); font-weight: 400;
      line-height: 1.6; margin-bottom: var(--sp-10); max-width: 58ch;
    }
    /* Work is the hero of the stealth page — give it a touch more presence */
    .work-section { padding-top: clamp(3rem, 6vw, 5rem); }
    .video-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-6);
    }
    .video-card {
      display: flex; flex-direction: column;
      border-radius: var(--radius);
      background: var(--bg-2);
      border: 1px solid var(--border);
      overflow: hidden;
      transition: transform var(--base), box-shadow var(--base);
    }
    .video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    /* Placeholder = where the Bunny player will drop in.
       Branded with a navy→near-black wash so the orange play
       state reads as your brand even before video is live. */
    .video-placeholder {
      position: relative; display: flex;
      align-items: center; justify-content: center;
      aspect-ratio: 16/9; width: 100%;
      background: linear-gradient(135deg, var(--navy-dark), #0c1626);
      text-decoration: none !important;
      transition: filter var(--fast);
    }
    .video-placeholder:hover { filter: brightness(1.08); }
    .video-placeholder:hover .video-play-icon { transform: scale(1.08); }
    .video-placeholder--dim {
      background: linear-gradient(135deg, #34384a, #15171f);
    }
	
	.video-placeholder img {
	  position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
.video-play-icon { position: relative; z-index: 1; }
	
    .video-play-icon {
      display: flex; align-items: center; justify-content: center;
      transition: transform var(--fast);
    }
    .video-soon-badge {
      position: absolute; bottom: 12px; right: 12px;
      font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: #fff; background: rgba(0,0,0,0.55);
      padding: 4px 10px; border-radius: 20px;
    }
    .video-card-body {
      padding: var(--sp-5) var(--sp-5) var(--sp-6);
      display: flex; flex-direction: column; gap: var(--sp-2);
    }
    .video-category {
      font-family: 'DM Sans', sans-serif; font-size: var(--t-sm); font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-text);
    }
    [data-theme="dark"] .video-category { color: var(--accent-text); }
    .video-title {
      font-family: 'Playfair Display', serif; font-style: italic;
      font-weight: 500; font-size: var(--t-lg); color: var(--ink);
    }
    .video-brief { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; max-width: none; }
    /* The Bunny player injected on click fills the placeholder frame */
    .video-placeholder iframe {
      position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    }

    @media (max-width: 760px) {
      .video-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
      .video-card { max-width: 480px; margin: 0 auto; width: 100%; }
    }

    /* ════════════════════════════════════════
       WHO THIS IS FOR
    ════════════════════════════════════════ */
    .fit-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden;
      margin-top: var(--sp-8);
    }
    .fit-panel { background: var(--bg); padding: clamp(1.5rem, 4vw, 2.5rem); }
    .fit-panel.alt { background: var(--bg-2); }
    .fit-label {
      font-family: 'DM Sans', sans-serif; font-size: var(--t-sm); font-weight: 500;
      letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
      margin-bottom: var(--sp-6);
    }
    .fit-panel li {
      padding-left: var(--sp-6); position: relative;
      margin-bottom: var(--sp-4); font-size: var(--t-base); color: var(--ink-2);
      line-height: 1.5;
    }
    .fit-panel li::before {
      position: absolute; left: 0;
      font-weight: 700; font-size: 0.9em; top: 0.05em;
    }
    .fit-panel:first-child li::before { content: '✓'; color: #1f7a4d; }
    [data-theme="dark"] .fit-panel:first-child li::before { color: #4cc88a; }
    .fit-panel.alt li::before { content: '✗'; color: #b3261e; }
    [data-theme="dark"] .fit-panel.alt li::before { color: #f0918c; }
    @media (max-width: 600px) {
      .fit-grid { grid-template-columns: 1fr; }
    }


    /* ════════════════════════════════════════
       TESTIMONIALS — carousel
    ════════════════════════════════════════ */
    .tcar { position: relative; max-width: 760px; }
    .tcar-track { position: relative; }
    .tcar-slide {
      position: relative;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-left: 3px solid var(--orange);
      border-radius: var(--radius);
      padding: clamp(1.75rem, 4vw, 2.75rem);
    }
    /* Non-active slides hidden via [hidden]; JS manages it.
       Before JS runs, all slides show stacked (graceful no-JS fallback). */
    .tcar-slide[hidden] { display: none; }
    .tcar-slide + .tcar-slide { margin-top: var(--sp-4); }
    .testimonial-mark {
      font-family: 'Playfair Display', serif; font-weight: 700;
      font-size: 4rem; line-height: 0.5; color: var(--orange);
      display: block; height: 1.6rem; user-select: none;
    }
    .testimonial-text {
      font-family: 'Playfair Display', serif; font-style: italic;
      font-size: var(--t-xl); line-height: 1.5; color: var(--ink);
      max-width: none; margin-bottom: var(--sp-6);
    }
    .testimonial-footer { display: flex; flex-direction: column; gap: 2px; }
    .testimonial-cite {
      font-family: 'DM Sans', sans-serif; font-style: normal;
      font-size: var(--t-base); font-weight: 500; color: var(--ink);
    }
    .testimonial-location { font-size: var(--t-sm); color: var(--ink-2); }

    .tcar-controls {
      display: flex; align-items: center; gap: var(--sp-4);
      margin-top: var(--sp-6);
    }
    .tcar-arrow {
      width: 42px; height: 42px; flex-shrink: 0;
      border: 1.5px solid var(--border-md); border-radius: 50%;
      background: var(--bg); color: var(--ink);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: border-color var(--fast), background var(--fast);
    }
    .tcar-arrow:hover { border-color: var(--navy); background: var(--bg-2); }
    [data-theme="dark"] .tcar-arrow:hover { border-color: var(--accent); }
    .tcar-dots { display: flex; gap: var(--sp-2); flex: 1; }
    .tcar-dot {
      width: 9px; height: 9px; border-radius: 50%; padding: 0;
      border: none; background: var(--border-md); cursor: pointer;
      transition: background var(--fast), transform var(--fast);
    }
    .tcar-dot[aria-selected="true"] { background: var(--orange); transform: scale(1.25); }

    .testimonial-note {
      margin-top: var(--sp-8); font-size: var(--t-base); color: var(--ink-2);
    }
    .testimonial-note a { color: var(--orange-text); font-weight: 500; }
    [data-theme="dark"] .testimonial-note a { color: var(--accent-text); }

    /* ════════════════════════════════════════
       SERVICES
    ════════════════════════════════════════ */
    .pricing-bg { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .service-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-6); margin-top: var(--sp-10);
    }
    .service-card {
      background: var(--bg); border-radius: var(--radius-lg);
      border: 1.5px solid var(--border); padding: clamp(1.5rem, 4vw, 2.25rem);
      transition: box-shadow var(--base), transform var(--base);
      display: flex; flex-direction: column;
    }
    .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .service-card--featured {
      background: var(--navy); border-color: var(--navy);
      box-shadow: 0 8px 32px rgba(43,91,168,0.25);
    }
    [data-theme="dark"] .service-card--featured { background: #1e3a70; border-color: #2b5ba8; }
    .service-num {
      font-family: 'Playfair Display', serif; font-weight: 500;
      font-size: 2.4rem; line-height: 1; color: var(--ink-3);
      opacity: 0.5; margin-bottom: var(--sp-3);
    }
    .service-num--light { color: #fff; opacity: 0.4; }
    .service-name {
      font-family: 'DM Sans', sans-serif; font-weight: 500;
      font-size: var(--t-xl); color: var(--ink); margin-bottom: var(--sp-1);
      letter-spacing: 0;
    }
    .service-name--light { color: #fff; }
    .service-length {
      font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--orange-text);
    }
    [data-theme="dark"] .service-length { color: var(--accent-text); }
    /* light orange on navy card = 4.8:1 ✓ */
    .service-length--light { color: #ffd4ab; }
    .service-divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
    .service-divider--light { border-top-color: rgba(255,255,255,0.22); }
    .service-desc { font-size: var(--t-base); color: var(--ink-2); margin-bottom: var(--sp-4); }
    /* white at 88% on navy = 6.3:1 ✓ */
    .service-desc--light { color: rgba(255,255,255,0.88); }
    .service-use {
      font-size: var(--t-sm); color: var(--ink-3); margin-top: auto;
      font-style: italic;
    }
    /* white at 75% on navy = 4.7:1 ✓ */
    .service-use--light { color: rgba(255,255,255,0.78); }

    /* Pricing statement */
    .pricing-statement {
      margin-top: var(--sp-10); padding-top: var(--sp-10);
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .pricing-starts {
      font-family: 'Playfair Display', serif; font-weight: 600;
      font-size: var(--t-2xl); color: var(--ink); margin: 0 auto var(--sp-3);
      max-width: none;
    }
    .pricing-starts strong { color: var(--navy); font-weight: 700; }
    [data-theme="dark"] .pricing-starts strong { color: var(--accent); }
    .pricing-sub {
      font-size: var(--t-base); color: var(--ink-2); margin: 0 auto;
      max-width: 60ch;
    }
    .pricing-cta { margin-top: var(--sp-8); }

    @media (max-width: 760px) {
      .service-grid { grid-template-columns: 1fr; }
      .service-card { max-width: 480px; margin: 0 auto; width: 100%; }
    }

    /* ════════════════════════════════════════
       FAQ
    ════════════════════════════════════════ */
    .faq-wrap { max-width: 760px; margin: var(--sp-10) auto 0; }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-q {
      width: 100%; background: none; border: none;
      padding: var(--sp-6) 0; display: flex; justify-content: space-between;
      align-items: center; gap: var(--sp-4);
      font-family: 'DM Sans', sans-serif; font-size: var(--t-lg); font-weight: 500;
      color: var(--ink); cursor: pointer; text-align: left;
      transition: color var(--fast);
    }
    .faq-q:hover { color: var(--navy); }
    [data-theme="dark"] .faq-q:hover { color: var(--accent); }
    .faq-icon {
      width: 26px; height: 26px; flex-shrink: 0;
      border: 1.5px solid var(--border-md); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; color: var(--ink-2); transition: transform var(--fast), background var(--fast), color var(--fast);
    }
    .faq-q[aria-expanded="true"] .faq-icon {
      transform: rotate(45deg);
      background: var(--navy); border-color: var(--navy); color: #fff;
    }
    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .faq-a-inner { padding-bottom: var(--sp-6); }
    .faq-a-inner p, .faq-a-inner ul {
      font-size: var(--t-base); color: var(--ink-2); line-height: 1.7;
    }

    /* ════════════════════════════════════════
       NEXT STEPS
    ════════════════════════════════════════ */
    .steps-bg { background: var(--orange-lt); border-top: 1px solid rgba(232,97,26,0.18); border-bottom: 1px solid rgba(232,97,26,0.18); }
    [data-theme="dark"] .steps-bg { background: #1a1410; border-color: rgba(232,97,26,0.20); }
    .steps-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-6); margin-top: var(--sp-10);
    }
    .step-item { display: flex; flex-direction: column; gap: var(--sp-3); }
    .step-n {
      font-family: 'Playfair Display', serif; font-weight: 700;
      font-size: var(--t-3xl); color: var(--orange-text); line-height: 1;
    }
    [data-theme="dark"] .step-n { color: var(--accent-text); }
    .step-text { font-size: var(--t-base); color: var(--ink-2); }
    @media (max-width: 700px) {
      .steps-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 420px) {
      .steps-grid { grid-template-columns: 1fr; }
    }

    /* ════════════════════════════════════════
       CONTACT — three channels, one block
    ════════════════════════════════════════ */
    .contact-section {
      background: #14141c; padding: clamp(4rem, 8vw, 7rem) 0;
    }
    [data-theme="dark"] .contact-section { background: #060608; }
    .contact-section .eyebrow { color: #ffa766; }
    .contact-section h2 { color: #fff; font-size: var(--t-4xl); margin-bottom: var(--sp-4); }
    /* white at 78% on #14141c = 11.3:1 ✓ */
    .contact-lede { color: rgba(255,255,255,0.78); font-size: var(--t-lg); margin-bottom: var(--sp-10); max-width: 60ch; }

    .contact-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-6);
    }
    .contact-card {
      background: #1f1f2b; border: 1px solid rgba(255,255,255,0.10);
      border-radius: var(--radius); padding: var(--sp-8) var(--sp-6);
      display: flex; flex-direction: column; gap: var(--sp-2);
    }
    .contact-pref {
      font-family: 'DM Sans', sans-serif; font-size: var(--t-sm); font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase; color: #ffa766;
    }
    .contact-card-title {
      font-family: 'Playfair Display', serif; font-weight: 600;
      font-size: var(--t-xl); color: #fff; margin-bottom: var(--sp-1);
    }
    /* white at 78% on #1f1f2b = 9.7:1 ✓ */
    .contact-card-desc {
      font-size: var(--t-sm); color: rgba(255,255,255,0.78);
      line-height: 1.55; max-width: none; margin-bottom: var(--sp-6);	  
    }
	
	ul.contact-card-desc { padding-left: var(--sp-4); list-style-type: "✓  "; }
	
    .contact-btn {
      margin-top: auto;
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 50px; padding: 0 var(--sp-6);
      border-radius: 6px; font-family: 'DM Sans', sans-serif;
      font-size: var(--t-base); font-weight: 500; letter-spacing: 0.01em;
      text-decoration: none !important; white-space: nowrap;
      border: 1.5px solid rgba(255,255,255,0.35); color: #fff;
      transition: border-color var(--fast), background var(--fast), transform var(--fast);
    }
    .contact-btn:hover { border-color: #fff; background: rgba(255,255,255,0.06); transform: translateY(-1px); }
    /* Primary (qualifying) channels — brand orange, dark text = 5.6:1 ✓ */
    .contact-btn--primary {
      background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 500;
      box-shadow: 0 4px 18px rgba(232,97,26,0.32);
    }
    .contact-btn--primary:hover { background: #f3742f; border-color: #f3742f; box-shadow: 0 6px 24px rgba(232,97,26,0.45); }

    /* Click-to-copy: brief success state + helper hint */
    .contact-btn--primary.is-copied,
    .contact-btn--primary.is-copied:hover {
      background: #1f7a4d; border-color: #1f7a4d; color: #fff;
      box-shadow: 0 4px 18px rgba(31,122,77,0.32);
    }
    .contact-copy-hint {
      margin-top: var(--sp-3); font-size: var(--t-sm);
      color: rgba(255,255,255,0.6); text-align: center;
    }

    @media (max-width: 760px) {
      .contact-grid { grid-template-columns: 1fr; }
      .contact-card { max-width: 460px; margin: 0 auto; width: 100%; }
    }

    /* ════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════ */
    .footer {
      padding: var(--sp-8) 0;
      border-top: 1px solid var(--border);
    }
    .footer-inner {
      max-width: var(--max); margin: 0 auto;
      padding: 0 clamp(1.25rem, 5vw, 2.5rem);
      display: flex; justify-content: space-between;
      align-items: center; flex-wrap: wrap; gap: var(--sp-4);
    }
    .footer p { font-size: var(--t-sm); color: var(--ink-2); max-width: none; }
    .footer a { color: var(--ink-2); }
    .footer a:hover { color: var(--orange-text); }
    [data-theme="dark"] .footer a:hover { color: var(--accent-text); }
    .footer .theme-toggle { margin-left: auto; }
    @media (max-width: 600px) { .footer .theme-toggle { margin-left: 0; } }

    /* ════════════════════════════════════════
       ANIMATIONS
    ════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ════════════════════════════════════════
       PRINT
    ════════════════════════════════════════ */
    @media print {
      .nav, .theme-toggle, .menu-toggle, .stat-bar { display: none; }
      body { background: white; color: black; }
    }

    /* High contrast */
    @media (prefers-contrast: high) {
      .service-card, .video-card, .fit-panel, .tcar-slide, .contact-card { border-width: 2px; }
      .stat-l, .contact-lede, .contact-card-desc { color: #fff; }
    }