/*!
 * YT Advisors — Brand v1 Overlay
 * 2026-05-10 · Refresh from v4 (Inter+Syne, dark hero) → v1 (Rubik-only, navy/white/red).
 * Source of truth: workspace/docs/brand/v1/kit/yta-brand-kit/YT-DESIGN-SYSTEM.md
 *
 * Load order: AFTER main.css and v4-shared.css so this overlay wins by cascade.
 * Specificity bumped with `html body` prefix where needed to override inline <style>.
 *
 * Brand promise: "Your strategy. Executed by AI."
 * Color budget on any viewport: 90% navy + neutrals, <5% red, rest is supporting.
 */

/* ============================================================== */
/* 1. Design tokens                                                */
/* ============================================================== */

:root {
  /* Core palette — navy + red + white */
  --yt-bg: #ffffff;
  --yt-bg-tinted: #f2f3f6;
  --yt-surface: #f7f8fa;
  --yt-surface-alt: #eef1f5;
  --yt-border: #e2e8f0;
  --yt-border-strong: #cbd5e1;

  /* Text */
  --yt-text: #0a1628;
  --yt-text-body: #1f2937;
  --yt-muted: #6b7280;
  --yt-subtle: #9ca3af;

  /* Brand */
  --yt-navy: #001f3f;
  --yt-navy-hover: #003366;
  --yt-navy-deep: #000819;
  --yt-red: #b91c1c;
  --yt-red-hover: #a01818;
  --yt-white: #ffffff;

  /* Hover blue (interactive cards/rows) */
  --yt-hover-bg: #dbeafe;
  --yt-hover-border: rgba(96, 165, 250, 0.55);

  /* Semantic */
  --yt-success: #047857;
  --yt-warning: #b45309;
  --yt-danger: var(--yt-red);

  /* Typography */
  --yt-font: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --yt-font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Geometry */
  --yt-r-sm: 4px;
  --yt-r: 8px;
  --yt-r-lg: 12px;
  --yt-r-pill: 999px;

  /* Spacing scale (8px base) */
  --yt-sp-1: 4px;
  --yt-sp-2: 8px;
  --yt-sp-3: 12px;
  --yt-sp-4: 16px;
  --yt-sp-6: 24px;
  --yt-sp-8: 32px;
  --yt-sp-12: 48px;
  --yt-sp-16: 64px;
  --yt-sp-24: 96px;

  /* Elevation — navy-tinted, never pure black */
  --yt-shadow-card: 0 1px 3px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
  --yt-shadow-card-hover: 0 4px 12px rgba(10, 22, 40, 0.08), 0 2px 4px rgba(10, 22, 40, 0.06);
  --yt-shadow-cta: 0 8px 24px rgba(0, 31, 63, 0.2);

  /* Motion */
  --yt-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================================== */
/* 2. Global type override                                         */
/* ============================================================== */

/* Win against inline `font-family: 'Syne'` / `'Inter'` declarations across the theme.
 * Uses high specificity + !important so the overlay holds without touching PHP. */
html body,
html body * {
  font-family: var(--yt-font) !important;
}

/* Headings: navy by default, tighter letter-spacing for editorial feel */
html body h1,
html body h2,
html body h3,
html body h4,
html body .yt-home h1,
html body .yt-home h2,
html body .yt-home h3,
html body .yt-home h4 {
  color: var(--yt-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
html body h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
/* main.css line 39 has bare `h1 { text-align: center }` which overrides the
 * section-scoped `.v3-*__hero { text-align: left }` rules at lower
 * specificity. Force left-align on all v3 hero h1s here at high specificity. */
html body .v3-hero h1,
html body .v3-team__hero h1,
html body .v3-contact-page__hero h1 {
  text-align: left !important;
}

/* Body type baseline */
html body,
html body p {
  color: var(--yt-text-body);
  line-height: 1.55;
}

/* Mono — narrowly scoped, for code/IDs only */
html body code,
html body kbd,
html body pre,
html body .mono {
  font-family: var(--yt-font-mono) !important;
}

/* ============================================================== */
/* 3. Page background                                              */
/* ============================================================== */

html body {
  background: var(--yt-bg);
  color: var(--yt-text-body);
}
html body .yt-home {
  background: var(--yt-bg);
  color: var(--yt-text-body);
}

/* ============================================================== */
/* 4. Hero — replace v7 cinematic dark with brand-v1 navy/white   */
/* ============================================================== */

html body .yt-hero,
html body section.yt-hero {
  background: var(--yt-navy) !important;
  background-color: var(--yt-navy) !important;
  background-image: none !important;
  color: var(--yt-white) !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
/* Hide legacy Ken-Burns bg layers + gradient + grain (v7 cinematic) */
html body .yt-hero__bg-layer,
html body .yt-hero__gradient,
html body .yt-hero__grain {
  display: none !important;
}

html body .yt-hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 8vw, 100px) !important;
  max-width: none !important;
  margin: 0 auto;
  text-align: left;
  display: block; /* layout grid lives on the inner container so legacy .yt-container wrapper still works */
}
html body .yt-hero__content > .yt-container,
html body .yt-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--yt-sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
html body .yt-hero__text {
  min-width: 0;
}
html body .yt-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
html body .yt-hero__mark {
  width: 100%;
  max-width: clamp(260px, 32vw, 420px);
  height: auto;
  display: block;
  /* gentle drop-shadow keeps the white mark from disappearing against navy */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
}
@media (max-width: 900px) {
  html body .yt-hero__content > .yt-container,
  html body .yt-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--yt-sp-8);
  }
  html body .yt-hero__visual {
    order: -1;
    justify-content: flex-start;
  }
  html body .yt-hero__mark {
    max-width: 180px;
  }
}

html body .yt-hero__eyebrow,
html body .yt-hero .yt-spaced {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin-bottom: var(--yt-sp-4);
}

html body .yt-hero__title,
html body h1.yt-hero__title {
  font-family: var(--yt-font) !important;
  color: var(--yt-white) !important;
  font-weight: 800 !important;
  font-size: clamp(48px, 8vw, 96px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 var(--yt-sp-6) !important;
  max-width: 14ch;
  text-transform: none !important;
}
html body .yt-hero__title em,
html body h1.yt-hero__title em {
  font-style: normal !important;
  color: var(--yt-white) !important;
  background: none !important;
  -webkit-text-fill-color: var(--yt-white) !important;
}

html body .yt-hero__sub,
html body p.yt-hero__sub {
  font-family: var(--yt-font) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.5 !important;
  margin: 0 0 var(--yt-sp-8) !important;
  max-width: 56ch;
}

html body .yt-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yt-sp-4);
  margin-top: var(--yt-sp-4);
}

html body .yt-hero__cta,
html body a.yt-hero__cta {
  display: inline-flex !important;
  align-items: center;
  gap: var(--yt-sp-2);
  background: var(--yt-red) !important;
  color: var(--yt-white) !important;
  font-family: var(--yt-font) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  padding: 14px 24px !important;
  border: 0 !important;
  border-radius: var(--yt-r-sm) !important;
  box-shadow: var(--yt-shadow-cta) !important;
  text-decoration: none !important;
  text-transform: none !important;
  transform: none !important;
  transition:
    background 200ms var(--yt-ease),
    transform 200ms var(--yt-ease) !important;
}
html body .yt-hero__cta:hover,
html body a.yt-hero__cta:hover {
  background: var(--yt-red-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--yt-shadow-cta) !important;
}

html body .yt-hero__cta--ghost,
html body a.yt-hero__cta--ghost {
  background: transparent !important;
  color: var(--yt-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: none !important;
}
html body .yt-hero__cta--ghost:hover,
html body a.yt-hero__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}

html body .yt-hero__scroll,
html body .yt-hero__scroll-line {
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================== */
/* 5. Container                                                    */
/* ============================================================== */

html body .yt-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--yt-sp-6);
}

/* ============================================================== */
/* 6. Sections — Mission / Philosophy / How-it-works               */
/* ============================================================== */

html body .yt-mission,
html body .yt-philosophy,
html body .yt-hiw,
html body section.yt-hiw,
html body .yt-cs-preview,
html body section.yt-cs-preview,
html body .yt-contact {
  padding: clamp(64px, 8vw, 96px) 0 !important;
  background: var(--yt-bg) !important;
  background-color: var(--yt-bg) !important;
  background-image: none !important;
  color: var(--yt-text-body) !important;
}

/* Alternating section bands for rhythm:
   Hero(navy) → Mission(white) → Demo(surface) → HIW(white) → Contact(surface) */

/* Disable the v7 scroll-reveal + GSAP entrance animations. Brand-v1 doesn't use
   opacity-0 entry — they leave content invisible on first paint, break full-page
   screenshots, and let users see a flash-of-empty-section. Force final state. */
html body .yt-reveal,
html body .yt-home .yt-reveal,
html body .cs-reveal,
html body .pr-reveal,
html body .svc-reveal,
html body [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}
/* GSAP timeline targets — pin to final state so the entrance reveal doesn't leave
   the buttons/sub/title at opacity 0.x when JS misses or is mid-animation. */
html body #heroEyebrow,
html body #heroTitle,
html body #heroSub,
html body #heroCtaRow,
html body .yt-hero__eyebrow,
html body .yt-hero__title,
html body .yt-hero__sub,
html body .yt-hero__cta-row {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
}
/* Kill the legacy v7 blue/teal animated gradient shimmer on hero <em> tags. The
   gradient shows as a moving blue underline-ish band when transparent text-fill
   doesn't fully clip — and clashes with brand-v1 navy/white. */
html body .yt-hero__title em,
html body h1.yt-hero__title em {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--yt-white) !important;
  color: var(--yt-white) !important;
  animation: none !important;
  font-style: normal !important;
}

/* main.css adds a global `h1::after { width: 50px; height: 4px; background: ... }`
   decoration bar centered under every <h1>. Renders as a blue stub under the hero
   title and clashes with brand-v1 (no decorator-bar visual language). Kill it
   everywhere on the brand-v1 homepage. */
html body h1::after,
html body h1::before,
html body .yt-hero__title::after,
html body .yt-hero__title::before,
html body .yt-demo__title::after,
html body .yt-contact__title::after,
html body .yt-mission__text::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body section.yt-mission {
  text-align: left !important;
}
html body .yt-mission > .yt-container,
html body .yt-mission .yt-container {
  text-align: left !important;
}
html body .yt-mission__text,
html body .yt-philosophy__img + * {
  color: var(--yt-text-body) !important;
  font-family: var(--yt-font) !important;
  font-size: clamp(18px, 1.6vw, 20px) !important;
  line-height: 1.6 !important;
  max-width: 64ch;
  text-align: left !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
html body .yt-mission__text em {
  font-style: normal !important;
  color: var(--yt-navy) !important;
  font-weight: 600 !important;
}

html body .yt-mission__divider {
  background: var(--yt-navy) !important;
  height: 3px !important;
  width: 64px !important;
  margin: var(--yt-sp-6) 0 0 !important;
  display: block !important;
}

/* Impact KPI grid — HIDDEN. The legacy front-page stats (50 AI Systems Shipped,
   12 Years Delivering, 99% Uptime SLA, 30 ...) are fabricated. Hide here as a
   belt-and-braces; Phase B will delete the markup from front-page.php. */
html body .yt-impact {
  display: none !important;
}

/* ============================================================== */
/* 6b. Demo video section                                          */
/* ============================================================== */

html body .yt-demo {
  background: var(--yt-surface);
  padding: clamp(64px, 8vw, 96px) 0;
}
html body .yt-demo__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--yt-sp-6);
}
html body .yt-demo__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--yt-sp-8);
}
html body .yt-demo__title {
  font-family: var(--yt-font) !important;
  font-weight: 800;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.025em;
  color: var(--yt-navy);
  margin: 0;
  line-height: 1.05;
}
html body .yt-demo__sub {
  font-family: var(--yt-font) !important;
  font-size: 17px;
  color: var(--yt-text-muted);
  max-width: 720px;
  margin: 0;
}
html body .yt-demo__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--yt-navy);
  border-radius: var(--yt-r);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 31, 63, 0.18);
  border: 1px solid var(--yt-border);
}
html body .yt-demo__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
html body .yt-demo__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--yt-sp-4);
  gap: 16px;
  flex-wrap: wrap;
}
html body .yt-demo__caption-text {
  font-family: var(--yt-font) !important;
  font-size: 14px;
  color: var(--yt-text-muted);
  margin: 0;
}
html body .yt-demo__caption a {
  font-family: var(--yt-font) !important;
  font-weight: 600;
  color: var(--yt-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  html body .yt-demo {
    padding: var(--yt-sp-8) 0;
  }
  html body .yt-demo__title {
    font-size: 26px;
  }
}

/* ============================================================== */
/* 7. Cards (generic) + case-study preview                         */
/* ============================================================== */

html body .yt-cs-preview .card,
html body .yt-card {
  background: var(--yt-bg);
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-r);
  padding: var(--yt-sp-6);
  box-shadow: var(--yt-shadow-card);
  transition:
    box-shadow 200ms var(--yt-ease),
    border-color 200ms var(--yt-ease),
    transform 200ms var(--yt-ease);
}
html body .yt-card:hover {
  box-shadow: var(--yt-shadow-card-hover);
  border-color: var(--yt-border-strong);
  transform: translateY(-2px);
}

/* ============================================================== */
/* 8. Buttons (generic)                                            */
/* ============================================================== */

html body .btn,
html body button.btn,
html body a.btn {
  font-family: var(--yt-font) !important;
  font-weight: 600;
  border-radius: var(--yt-r-sm);
  padding: 12px 22px;
  transition:
    background 200ms var(--yt-ease),
    color 200ms var(--yt-ease),
    transform 200ms var(--yt-ease);
  box-shadow: var(--yt-shadow-card);
}
html body .btn-default,
html body .btn-primary {
  background: var(--yt-navy) !important;
  color: var(--yt-white) !important;
  border: 0;
}
html body .btn-default:hover,
html body .btn-primary:hover {
  background: var(--yt-navy-hover) !important;
}
html body .btn-accent,
html body .btn-cta {
  background: var(--yt-red) !important;
  color: var(--yt-white) !important;
  border: 0;
  box-shadow: var(--yt-shadow-cta);
}
html body .btn-accent:hover,
html body .btn-cta:hover {
  background: var(--yt-red-hover) !important;
}

/* ============================================================== */
/* 9. Forms (contact)                                              */
/* ============================================================== */

html body .yt-contact {
  background: var(--yt-surface-alt) !important;
  color: var(--yt-text) !important;
  border-top: 1px solid var(--yt-border);
}
html body .yt-contact__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(40px, 6vw, 80px) !important;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
html body .yt-contact .yt-tag,
html body .yt-contact .yt-tag--light {
  display: inline-block;
  font-family: var(--yt-font) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yt-navy);
  background: var(--yt-surface-alt);
  padding: 6px 12px;
  border-radius: var(--yt-r-pill);
  margin-bottom: var(--yt-sp-4);
}
html body .yt-contact__title {
  font-family: var(--yt-font) !important;
  color: var(--yt-text) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin: 0 0 var(--yt-sp-4) !important;
}
html body .yt-contact__text {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  margin: 0 0 var(--yt-sp-8) !important;
}
html body .yt-contact__info {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--yt-sp-6) !important;
}
html body .yt-contact__info-item h5 {
  font-family: var(--yt-font) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--yt-muted) !important;
  text-transform: uppercase;
  margin: 0 0 6px !important;
}
html body .yt-contact__info-item p {
  font-family: var(--yt-font) !important;
  color: var(--yt-text) !important;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 !important;
}
html body .yt-contact__info-item a {
  color: var(--yt-navy) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms var(--yt-ease);
}
html body .yt-contact__info-item a:hover {
  color: var(--yt-red) !important;
}
html body .yt-contact__form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--yt-sp-4) !important;
  background: var(--yt-bg);
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-r-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--yt-shadow-card);
}
html body .yt-contact__form input,
html body .yt-contact__form textarea,
html body .yt-contact__form select {
  font-family: var(--yt-font) !important;
  display: block !important;
  width: 100% !important;
  background: var(--yt-bg) !important;
  color: var(--yt-text) !important;
  border: 1px solid var(--yt-border-strong) !important;
  border-radius: var(--yt-r-sm) !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  transition:
    border-color 150ms var(--yt-ease),
    box-shadow 150ms var(--yt-ease);
  box-sizing: border-box;
}
html body .yt-contact__form input::placeholder,
html body .yt-contact__form textarea::placeholder {
  color: var(--yt-subtle);
}
html body .yt-contact__form textarea {
  min-height: 140px;
  resize: vertical;
}
html body .yt-contact__form input:focus,
html body .yt-contact__form textarea:focus {
  outline: 0;
  border-color: var(--yt-navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.12);
}
html body .yt-contact__submit {
  font-family: var(--yt-font) !important;
  background: var(--yt-red) !important;
  color: var(--yt-white) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: var(--yt-r-sm) !important;
  box-shadow: var(--yt-shadow-cta) !important;
  cursor: pointer;
  align-self: flex-start !important;
  transform: none !important;
  transition: background 200ms var(--yt-ease) !important;
}
html body .yt-contact__submit:hover {
  background: var(--yt-red-hover) !important;
  transform: none !important;
  box-shadow: var(--yt-shadow-cta) !important;
}

@media (max-width: 768px) {
  html body .yt-contact__inner {
    grid-template-columns: 1fr !important;
    gap: var(--yt-sp-8) !important;
  }
  html body .yt-contact__submit {
    width: 100%;
    align-self: stretch !important;
    text-align: center;
  }
}

/* ============================================================== */
/* 10. Header / navigation                                         */
/* ============================================================== */

html body .yt-logo-fallback {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  color: var(--yt-white) !important;
  letter-spacing: -0.02em !important;
}

/* Header backdrop — navy, not dark gradient */
html body header,
html body .site-header,
html body .navbar-default {
  background: var(--yt-navy) !important;
  border-bottom: 0 !important;
}
html body header a,
html body .navbar a {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 500;
}
html body header a:hover,
html body .navbar a:hover {
  color: var(--yt-white) !important;
}

/* Navbar alignment + brand styling: match the hero's 1180px container so the
   logo lines up with the hero headline, and replace v4 dark-cinematic colors
   with brand-v1 navy. */
html body .navbar-default {
  background: var(--yt-navy) !important;
  background-color: var(--yt-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 !important;
  min-height: 0 !important;
}
html body .navbar-default .container {
  max-width: 1180px !important;
  padding-left: var(--yt-sp-6) !important;
  padding-right: var(--yt-sp-6) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  min-height: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
}
html body .navbar-default .navbar-header,
html body .navbar-default .navbar-collapse {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
}
html body .navbar-default .navbar-brand {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
}
html body .navbar-default .navbar-brand img,
html body .navbar-default .navbar-brand .mainImage {
  max-height: 56px !important;
  width: auto !important;
  padding: 10px !important;
  filter: brightness(0) invert(1) !important;
}
/* v3 brand lockup: white android-head mark + "YT · Advisors" wordmark */
html body .navbar-default .navbar-brand.yt-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  padding: 0 !important;
  height: auto !important;
}
html body .navbar-default .navbar-brand.yt-brand-lockup img.yt-brand-lockup__mark {
  height: 44px !important;
  width: auto !important;
  max-height: none !important;
  padding: 0 !important;
  filter: none !important;
  display: block !important;
}
html body .navbar-default .navbar-brand.yt-brand-lockup .yt-brand-lockup__text {
  font-family: var(--yt-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--yt-white) !important;
  line-height: 1 !important;
  white-space: nowrap;
}
html body .navbar-default .navbar-brand.yt-brand-lockup .yt-brand-lockup__dot {
  color: var(--yt-red) !important;
  font-weight: 700 !important;
}
@media (max-width: 640px) {
  html body .navbar-default .navbar-brand.yt-brand-lockup .yt-brand-lockup__text { font-size: 17px !important; }
  html body .navbar-default .navbar-brand.yt-brand-lockup img.yt-brand-lockup__mark { height: 36px !important; }
}
html body .navbar-default .navbar-brand .yt-logo-fallback {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--yt-white) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-transform: none !important;
}
html body .navbar-default .navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--yt-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 14px !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
}
html body .navbar-default .navbar-nav > li > a:hover,
html body .navbar-default .navbar-nav > li.active > a {
  color: var(--yt-white) !important;
}
html body .navbar-default .navbar-nav > li.active:after,
html body .navbar-default .navbar-nav > li > a:hover:after,
html body .navbar-default .navbar-collapse .nav.navbar-nav > li.active > a::after {
  display: none !important;
}
/* Kill default browser blue+white focus outline on nav links + brand link.
 * Bootstrap 3 navbar-toggle also picks up an outline on click — included. */
html body .navbar-default .navbar-nav > li > a:focus,
html body .navbar-default .navbar-nav > li > a:focus-visible,
html body .navbar-default .navbar-nav > li > a:active,
html body .navbar-default .navbar-brand:focus,
html body .navbar-default .navbar-brand:focus-visible,
html body .navbar-default .navbar-brand:active,
html body .navbar-default .navbar-toggle:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ============================================================== */
/* 11. Footer                                                      */
/* ============================================================== */

html body footer,
html body .site-footer,
html body #mainFooter {
  background: var(--yt-navy) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  padding: var(--yt-sp-12) 0 var(--yt-sp-8) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left !important;
}
html body #mainFooter .container,
html body #mainFooter #footer,
html body #mainFooter .row,
html body #mainFooter .col-md-12 {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  flex: 0 0 100% !important;
}
html body #mainFooter > div > div > div > div,
html body footer > section > div > div > div > div {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: var(--yt-sp-8) var(--yt-sp-6) var(--yt-sp-6) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--yt-sp-8) !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}
/* Wordmark / tagline column */
html body #mainFooter div[style*='Syne'],
html body footer div[style*='Syne'] {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--yt-white) !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.01em;
}
html body #mainFooter div[style*='letter-spacing:.05em'],
html body footer div[style*='letter-spacing:.05em'] {
  font-family: var(--yt-font) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
/* Primary nav row */
html body #mainFooter nav,
html body footer nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--yt-sp-6) !important;
  align-items: center !important;
}
html body #mainFooter nav a,
html body footer nav a,
html body footer a,
html body .site-footer a {
  font-family: var(--yt-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: color 150ms var(--yt-ease) !important;
}
html body footer a:hover,
html body #mainFooter a:hover,
html body .site-footer a:hover {
  color: var(--yt-white) !important;
}
/* Bottom border row (copyright + legal links) */
html body #mainFooter div[style*='border-top'],
html body footer div[style*='border-top'] {
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: var(--yt-sp-6) !important;
  margin-top: var(--yt-sp-2) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--yt-sp-4) !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html body #mainFooter p,
html body footer p {
  font-family: var(--yt-font) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 !important;
}
/* Legal links cluster (privacy/terms/eula/sms/sitemap) */
html body #mainFooter div[style*='border-top'] > div a,
html body footer div[style*='border-top'] > div a {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
html body #mainFooter div[style*='border-top'] > div a:hover,
html body footer div[style*='border-top'] > div a:hover {
  color: var(--yt-white) !important;
}
/* Floating "up" arrow nav — hide on brand-v1 (not part of new design) */
html body .arrowsNav {
  display: none !important;
}

/* ============================================================== */
/* 12. Modal (legal pages, etc.)                                   */
/* ============================================================== */

html body .modal-content {
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-r-lg);
  box-shadow: var(--yt-shadow-card-hover);
}
html body .modal-header,
html body .modal-footer {
  border-color: var(--yt-border);
  background: var(--yt-bg);
}
html body .modal-title {
  color: var(--yt-text);
  font-weight: 700;
}

/* ============================================================== */
/* 13. Pricing page (template-pricing.php)                         */
/* ============================================================== */

/* Page-level wrappers shared by template-pricing.php + future service pages */
html body main.yt-page {
  background: var(--yt-bg) !important;
  color: var(--yt-text-body) !important;
}
html body .yt-page__hero {
  background: var(--yt-navy) !important;
  color: var(--yt-white) !important;
  padding: clamp(72px, 9vw, 120px) 0 clamp(72px, 9vw, 120px) !important;
  text-align: left !important;
}
html body .yt-page__hero .yt-container,
html body .yt-page__hero-inner {
  text-align: left !important;
}
html body .yt-page__hero .yt-eyebrow {
  color: rgba(255, 255, 255, 0.65) !important;
}
html body .yt-page__title,
html body h1.yt-page__title {
  font-family: var(--yt-font) !important;
  color: var(--yt-white) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin: var(--yt-sp-3) 0 var(--yt-sp-6) !important;
  max-width: 18ch;
  text-align: left !important;
  text-transform: none !important;
}
html body .yt-page__lead {
  font-family: var(--yt-font) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(17px, 1.6vw, 20px) !important;
  line-height: 1.55 !important;
  max-width: 60ch;
  margin: 0 !important;
}
html body .yt-page__band,
html body .yt-page__cta {
  padding: clamp(64px, 8vw, 96px) 0 !important;
  background: var(--yt-bg) !important;
}
html body .yt-page__band--surface {
  background: var(--yt-surface) !important;
}
html body .yt-page__h2,
html body h2.yt-page__h2 {
  font-family: var(--yt-font) !important;
  color: var(--yt-text) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin: var(--yt-sp-3) 0 var(--yt-sp-8) !important;
}

/* Pricing tier grid */
html body .pricing-grid,
html body .yt-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yt-sp-6);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--yt-sp-6);
  align-items: stretch;
}
@media (max-width: 980px) {
  html body .yt-pricing__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}
html body .yt-pricing__card {
  background: var(--yt-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: var(--yt-r-lg) !important;
  padding: var(--yt-sp-8) !important;
  text-align: left;
  box-shadow: var(--yt-shadow-card);
  position: relative;
  display: flex !important;
  flex-direction: column !important;
}
html body .yt-pricing__card--featured {
  border: 2px solid var(--yt-red) !important;
  box-shadow:
    0 24px 60px rgba(185, 28, 28, 0.12),
    0 0 0 1px var(--yt-red) !important;
  transform: translateY(-8px);
}
html body .yt-pricing__card--featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: var(--yt-sp-6);
  background: var(--yt-red);
  color: var(--yt-white);
  font-family: var(--yt-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--yt-r-pill);
}
html body .yt-pricing__tier {
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  color: var(--yt-text) !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin-bottom: var(--yt-sp-3) !important;
}
html body .yt-pricing__price {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  color: var(--yt-navy) !important;
  font-size: 56px !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: var(--yt-sp-2) !important;
}
html body .yt-pricing__price .yt-pricing__plus {
  font-size: 0.6em;
  color: var(--yt-muted);
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 2px;
}
html body .yt-pricing__period {
  font-family: var(--yt-font) !important;
  color: var(--yt-muted) !important;
  font-size: 14px !important;
  margin-bottom: var(--yt-sp-6) !important;
}
html body .yt-pricing__desc {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 0 var(--yt-sp-6) !important;
}
html body .yt-pricing__features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--yt-sp-8) !important;
  flex: 1;
}
html body .yt-pricing__features li {
  padding: var(--yt-sp-3) 0 !important;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--yt-border) !important;
  display: flex !important;
  gap: var(--yt-sp-3) !important;
  align-items: flex-start;
}
html body .yt-pricing__features li::before {
  content: '\2713' !important;
  color: var(--yt-success) !important;
  font-weight: 700;
  flex-shrink: 0;
}
html body .yt-pricing__cta,
html body a.yt-pricing__cta {
  display: block !important;
  text-align: center;
  background: var(--yt-navy) !important;
  color: var(--yt-white) !important;
  font-family: var(--yt-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  padding: 14px 18px !important;
  border-radius: var(--yt-r-sm) !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 200ms var(--yt-ease) !important;
  margin-top: auto;
}
html body .yt-pricing__cta:hover,
html body a.yt-pricing__cta:hover {
  background: var(--yt-navy-hover) !important;
}
html body .yt-pricing__card--featured .yt-pricing__cta {
  background: var(--yt-red) !important;
  box-shadow: var(--yt-shadow-cta);
}
html body .yt-pricing__card--featured .yt-pricing__cta:hover {
  background: var(--yt-red-hover) !important;
}

/* FAQ grid */
html body .yt-faq-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: var(--yt-sp-6) !important;
  max-width: 1180px;
  margin: 0 auto;
}
html body .yt-faq-item {
  background: var(--yt-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: var(--yt-r) !important;
  padding: var(--yt-sp-6) var(--yt-sp-6) !important;
  box-shadow: var(--yt-shadow-card);
}
html body .yt-faq-item h3 {
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--yt-text) !important;
  margin: 0 0 var(--yt-sp-3) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
html body .yt-faq-item p {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Final CTA band */
html body .yt-page__cta {
  text-align: center;
  background: var(--yt-bg) !important;
}
html body .yt-page__cta-title,
html body h2.yt-page__cta-title {
  font-family: var(--yt-font) !important;
  color: var(--yt-text) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 var(--yt-sp-3) !important;
}
html body .yt-page__cta-sub {
  font-family: var(--yt-font) !important;
  color: var(--yt-muted) !important;
  font-size: 17px !important;
  margin: 0 0 var(--yt-sp-6) !important;
}
html body .yt-page__sub {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 64ch;
  margin: calc(-1 * var(--yt-sp-4)) 0 var(--yt-sp-8) !important;
}
html body .yt-page__cta-row {
  display: flex !important;
  gap: var(--yt-sp-4) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
html body .yt-hero__cta--ghost-light,
html body a.yt-hero__cta--ghost-light {
  background: transparent !important;
  color: var(--yt-navy) !important;
  border: 1.5px solid var(--yt-border-strong) !important;
  box-shadow: none !important;
}
html body .yt-hero__cta--ghost-light:hover,
html body a.yt-hero__cta--ghost-light:hover {
  background: var(--yt-surface) !important;
  border-color: var(--yt-navy) !important;
}

/* Services index — step grid (How it works) */
html body .yt-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: var(--yt-sp-6) !important;
  max-width: 1180px;
  margin: 0 auto;
}
html body .yt-step {
  background: var(--yt-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: var(--yt-r) !important;
  padding: var(--yt-sp-6) !important;
  box-shadow: var(--yt-shadow-card);
}
html body .yt-step__num {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  color: var(--yt-red) !important;
  margin-bottom: var(--yt-sp-3) !important;
}
html body .yt-step__title {
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--yt-text) !important;
  line-height: 1.3 !important;
  margin: 0 0 var(--yt-sp-3) !important;
  letter-spacing: -0.01em !important;
}
html body .yt-step__body {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Services index — team grid */
html body .yt-team-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--yt-sp-6) !important;
  max-width: 1180px;
  margin: 0 auto;
}
html body .yt-team-card {
  background: var(--yt-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: var(--yt-r) !important;
  padding: var(--yt-sp-6) !important;
  box-shadow: var(--yt-shadow-card);
  transition:
    box-shadow 200ms var(--yt-ease),
    transform 200ms var(--yt-ease);
}
html body .yt-team-card:hover {
  box-shadow: var(--yt-shadow-card-hover);
  transform: translateY(-2px);
}
html body .yt-team__role {
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--yt-muted) !important;
  margin-bottom: 6px !important;
}
html body .yt-team__name {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--yt-navy) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--yt-sp-3) !important;
}
html body .yt-team__bio {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Services index — domain outcomes grid */
html body .yt-domain-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: var(--yt-sp-8) !important;
  max-width: 1180px;
  margin: 0 auto;
}
html body .yt-domain {
  background: var(--yt-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: var(--yt-r) !important;
  padding: var(--yt-sp-6) var(--yt-sp-6) var(--yt-sp-6) !important;
  box-shadow: var(--yt-shadow-card);
}
html body .yt-domain__title {
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--yt-text) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 var(--yt-sp-4) !important;
  padding-bottom: var(--yt-sp-3) !important;
  border-bottom: 2px solid var(--yt-navy) !important;
}
html body .yt-domain__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .yt-domain__list li {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: var(--yt-sp-3) 0 !important;
  border-bottom: 1px solid var(--yt-border) !important;
  display: flex;
  gap: var(--yt-sp-2);
  align-items: flex-start;
}
html body .yt-domain__list li::before {
  content: '\2192' !important;
  color: var(--yt-red) !important;
  font-weight: 700;
  flex-shrink: 0;
}
html body .yt-domain__list li:last-child {
  border-bottom: 0 !important;
}

/* ============================================================== */
/* 15. Case Studies index (template-case-studies.php)              */
/* ============================================================== */

html body .yt-cs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)) !important;
  gap: var(--yt-sp-6) !important;
  max-width: 1180px;
  margin: 0 auto;
}
html body a.yt-cs-card,
html body .yt-cs-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--yt-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: var(--yt-r-lg) !important;
  padding: var(--yt-sp-8) !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: var(--yt-shadow-card);
  transition:
    box-shadow 200ms var(--yt-ease),
    border-color 200ms var(--yt-ease),
    transform 200ms var(--yt-ease);
}
html body a.yt-cs-card:hover {
  box-shadow: var(--yt-shadow-card-hover) !important;
  border-color: var(--yt-border-strong) !important;
  transform: translateY(-2px);
}
html body .yt-cs-card__head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: var(--yt-sp-4) !important;
  margin-bottom: var(--yt-sp-6) !important;
}
html body .yt-cs-card__client {
  font-family: var(--yt-font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--yt-muted) !important;
  margin-bottom: var(--yt-sp-2) !important;
}
html body .yt-cs-card__title,
html body h2.yt-cs-card__title {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--yt-text) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
html body .yt-cs-card__badge {
  flex-shrink: 0;
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--yt-navy) !important;
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border-strong) !important;
  padding: 4px 10px;
  border-radius: var(--yt-r-pill);
}
html body .yt-cs-card__badge--success {
  color: var(--yt-white) !important;
  background: var(--yt-success) !important;
  border-color: var(--yt-success) !important;
}
html body .yt-cs-card__hero-metric {
  display: flex !important;
  align-items: baseline !important;
  gap: var(--yt-sp-4) !important;
  padding: var(--yt-sp-4) 0 !important;
  border-top: 1px solid var(--yt-border) !important;
  border-bottom: 1px solid var(--yt-border) !important;
  margin-bottom: var(--yt-sp-4) !important;
}
html body .yt-cs-card__hero-num {
  font-family: var(--yt-font) !important;
  font-weight: 800 !important;
  font-size: 56px !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--yt-red) !important;
  flex-shrink: 0;
}
html body .yt-cs-card__hero-label {
  font-family: var(--yt-font) !important;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
html body .yt-cs-card__metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--yt-sp-3) !important;
  margin-bottom: var(--yt-sp-6) !important;
}
html body .yt-cs-card__metric-val {
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--yt-navy) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
html body .yt-cs-card__metric-key {
  font-family: var(--yt-font) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--yt-muted) !important;
  text-transform: uppercase;
  line-height: 1.4;
}
html body .yt-cs-card__domains {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: var(--yt-sp-6) !important;
}
html body .yt-cs-card__domain {
  font-family: var(--yt-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--yt-text-body) !important;
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  padding: 4px 10px;
  border-radius: var(--yt-r-pill);
}
html body .yt-cs-card__cta {
  font-family: var(--yt-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--yt-navy) !important;
  margin-top: auto;
  padding-top: var(--yt-sp-3);
  border-top: 1px solid var(--yt-border) !important;
}
html body a.yt-cs-card:hover .yt-cs-card__cta {
  color: var(--yt-red) !important;
}

/* ============================================================== */
/* 16. Legal / prose pages (template-legal.php)                    */
/* ============================================================== */

html body .yt-page__meta {
  font-family: var(--yt-font) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  margin-top: var(--yt-sp-4) !important;
  text-transform: uppercase;
}
html body .yt-legal__body {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--yt-text-body) !important;
  font-family: var(--yt-font) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}
/* Legal pages: tighter vertical rhythm between navy hero and body content */
html body .yt-page--legal .yt-page__hero {
  padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px) !important;
}
html body .yt-page--legal .yt-page__band {
  padding: clamp(40px, 5vw, 56px) 0 clamp(64px, 8vw, 96px) !important;
}
/* Legal pages: hero content matches the body's prose column so heading + content
   share the same width AND horizontal centering — one coherent centered column. */
html body .yt-page--legal .yt-page__hero-inner {
  max-width: 1080px !important;
  margin: 0 auto !important;
}
html body .yt-page--legal .yt-page__title {
  max-width: 100% !important;
}
html body .yt-legal__body h1,
html body .yt-legal__body h2,
html body .yt-legal__body h3,
html body .yt-legal__body h4 {
  font-family: var(--yt-font) !important;
  color: var(--yt-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  text-align: left !important;
  text-transform: none !important;
}
html body .yt-legal__body h1 {
  font-size: 32px !important;
  line-height: 1.15 !important;
  margin: var(--yt-sp-12) 0 var(--yt-sp-6) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
html body .yt-legal__body h2 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin: var(--yt-sp-12) 0 var(--yt-sp-4) !important;
  padding-top: var(--yt-sp-6) !important;
  border-top: 1px solid var(--yt-border) !important;
}
html body .yt-legal__body h2:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body .yt-legal__body h3 {
  font-size: 19px !important;
  line-height: 1.3 !important;
  margin: var(--yt-sp-8) 0 var(--yt-sp-3) !important;
}
html body .yt-legal__body h4 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: var(--yt-sp-6) 0 var(--yt-sp-2) !important;
}
html body .yt-legal__body h1::after,
html body .yt-legal__body h2::after,
html body .yt-legal__body h3::after,
html body .yt-legal__body h4::after {
  content: none !important;
  display: none !important;
}
html body .yt-legal__body p {
  color: var(--yt-text-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin: 0 0 var(--yt-sp-4) !important;
}
html body .yt-legal__body ul,
html body .yt-legal__body ol {
  padding-left: var(--yt-sp-6) !important;
  margin: var(--yt-sp-3) 0 var(--yt-sp-6) !important;
  color: var(--yt-text-body) !important;
}
html body .yt-legal__body li {
  margin-bottom: var(--yt-sp-2) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
html body .yt-legal__body li::marker {
  color: var(--yt-muted);
}
html body .yt-legal__body strong {
  color: var(--yt-text) !important;
  font-weight: 700 !important;
}
html body .yt-legal__body em {
  color: var(--yt-text-body) !important;
  font-style: italic !important;
}
html body .yt-legal__body a {
  color: var(--yt-navy) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 150ms var(--yt-ease);
}
html body .yt-legal__body a:hover {
  color: var(--yt-red) !important;
}
html body .yt-legal__body hr {
  border: 0 !important;
  height: 1px !important;
  background: var(--yt-border) !important;
  margin: var(--yt-sp-12) 0 !important;
}
html body .yt-legal__body blockquote {
  border-left: 3px solid var(--yt-navy) !important;
  padding: var(--yt-sp-2) 0 var(--yt-sp-2) var(--yt-sp-6) !important;
  margin: var(--yt-sp-6) 0 !important;
  color: var(--yt-text) !important;
  font-style: normal !important;
  background: var(--yt-surface) !important;
  border-radius: 0 var(--yt-r-sm) var(--yt-r-sm) 0;
}
html body .yt-legal__body code {
  font-family: var(--yt-font-mono) !important;
  font-size: 14px !important;
  background: var(--yt-surface-alt) !important;
  padding: 2px 6px;
  border-radius: var(--yt-r-sm);
  color: var(--yt-text);
}
html body .yt-legal__body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: var(--yt-sp-6) 0 !important;
  font-size: 14px !important;
}
html body .yt-legal__body th,
html body .yt-legal__body td {
  text-align: left !important;
  padding: var(--yt-sp-3) var(--yt-sp-4) !important;
  border-bottom: 1px solid var(--yt-border) !important;
}
html body .yt-legal__body th {
  font-weight: 700 !important;
  color: var(--yt-text) !important;
  background: var(--yt-surface) !important;
}

@media (max-width: 720px) {
  html body .yt-cs-grid {
    grid-template-columns: 1fr;
  }
  html body .yt-cs-card__metrics {
    grid-template-columns: repeat(3, 1fr);
  }
  html body .yt-cs-card__hero-num {
    font-size: 44px !important;
  }
}

/* ============================================================== */
/* 14. Services pages                                              */
/* ============================================================== */

html body .yt-services__hero,
html body .yt-service__hero {
  background: var(--yt-navy);
  color: var(--yt-white);
  padding: var(--yt-sp-24) var(--yt-sp-6) var(--yt-sp-16);
}
html body .yt-services__hero h1,
html body .yt-service__hero h1 {
  color: var(--yt-white);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
}
html body .yt-services__section,
html body .yt-service__section {
  padding: clamp(56px, 8vw, 96px) 0;
}
html body .yt-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--yt-sp-6);
  padding: 0 var(--yt-sp-6);
  max-width: 1180px;
  margin: 0 auto;
}

/* ============================================================== */
/* 15. Utilities                                                   */
/* ============================================================== */

html body .yt-eyebrow {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yt-muted);
}
html body .yt-stat-num {
  font-weight: 800;
  color: var(--yt-navy);
  letter-spacing: -0.025em;
}
html body .yt-stat-num--red {
  color: var(--yt-red);
}

/* ============================================================== */
/* 16. Accessibility / focus                                       */
/* ============================================================== */

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible {
  outline: 2px solid var(--yt-navy);
  outline-offset: 2px;
}

/* ============================================================== */
/* 17. Case-study sub-pages (template-case-study-*.php)            */
/* ============================================================== */

/* Same column shape as legal pages: navy hero + white body in a
   shared 1080px column, both left-anchored at the container left edge. */
html body .yt-page--case-study .yt-page__hero {
  padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px) !important;
}
html body .yt-page--case-study .yt-page__band {
  padding: clamp(40px, 5vw, 56px) 0 clamp(64px, 8vw, 96px) !important;
}
html body .yt-page--case-study .yt-page__hero-inner {
  max-width: 1080px !important;
  margin: 0 auto !important;
}
html body .yt-page--case-study .yt-page__title {
  max-width: 100% !important;
}

/* Back link in hero */
html body .yt-cs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  font-family: var(--yt-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  margin-bottom: var(--yt-sp-4) !important;
  transition: color 0.15s ease !important;
}
html body .yt-cs-back:hover {
  color: var(--yt-white) !important;
}

/* Hero meta row (date / status / client) */
html body .yt-cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yt-sp-6);
  margin-top: var(--yt-sp-4) !important;
  font-family: var(--yt-font) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

/* Body wrapper — same 1080px column as legal__body */
html body .yt-cs-body {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--yt-text-body) !important;
  font-family: var(--yt-font) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}
html body .yt-cs-body h2 {
  font-family: var(--yt-font) !important;
  color: var(--yt-text) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin: var(--yt-sp-12) 0 var(--yt-sp-4) !important;
  padding-top: var(--yt-sp-8) !important;
  border-top: 1px solid var(--yt-border) !important;
  text-align: left !important;
  text-transform: none !important;
}
html body .yt-cs-body h2:first-child,
html body .yt-cs-body h2.yt-cs-body__h2--first {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body .yt-cs-body h2::after {
  content: none !important;
  display: none !important;
}
html body .yt-cs-body h3 {
  font-family: var(--yt-font) !important;
  color: var(--yt-red) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
  margin: var(--yt-sp-8) 0 var(--yt-sp-3) !important;
}
html body .yt-cs-body h3::after {
  content: none !important;
  display: none !important;
}
html body .yt-cs-body p {
  color: var(--yt-text-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin: 0 0 var(--yt-sp-4) !important;
}
html body .yt-cs-body ul,
html body .yt-cs-body ol {
  padding-left: var(--yt-sp-6) !important;
  margin: 0 0 var(--yt-sp-5) !important;
}
html body .yt-cs-body li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin: 0 0 var(--yt-sp-2) !important;
  color: var(--yt-text-body) !important;
}
html body .yt-cs-body strong {
  color: var(--yt-text) !important;
  font-weight: 700 !important;
}
html body .yt-cs-body em {
  color: var(--yt-text-body) !important;
  font-style: italic !important;
}
html body .yt-cs-body code {
  font-family: 'SF Mono', Menlo, monospace !important;
  font-size: 0.9em !important;
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  color: var(--yt-text) !important;
}
html body .yt-cs-body blockquote {
  border-left: 4px solid var(--yt-red) !important;
  margin: var(--yt-sp-6) 0 !important;
  padding: var(--yt-sp-4) 0 var(--yt-sp-4) var(--yt-sp-6) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--yt-text) !important;
  font-style: normal !important;
  background: var(--yt-surface) !important;
}
html body .yt-cs-body blockquote p {
  margin: 0 !important;
  color: var(--yt-text) !important;
  font-size: 17px !important;
}
html body .yt-cs-body hr {
  border: none !important;
  border-top: 1px solid var(--yt-border) !important;
  margin: var(--yt-sp-10) 0 !important;
}
html body .yt-cs-body img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: var(--yt-sp-4) 0 var(--yt-sp-6) !important;
  display: block;
  border: 1px solid var(--yt-border) !important;
}

/* Hero KPI metric band — large headline number */
html body .yt-cs-hero-metric {
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  border-left: 4px solid var(--yt-red) !important;
  border-radius: 8px !important;
  padding: var(--yt-sp-8) !important;
  margin: 0 0 var(--yt-sp-10) !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--yt-sp-8);
  align-items: center;
  max-width: 1080px;
}
html body .yt-cs-hero-metric__num {
  font-family: var(--yt-font) !important;
  font-size: clamp(48px, 6vw, 72px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--yt-red) !important;
  letter-spacing: -0.025em !important;
}
html body .yt-cs-hero-metric__label {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--yt-text-body) !important;
}
html body .yt-cs-hero-metric__label strong {
  display: block !important;
  font-size: 17px !important;
  color: var(--yt-text) !important;
  margin-bottom: var(--yt-sp-1) !important;
  font-weight: 700 !important;
}
html body .yt-cs-hero-metric__badge {
  background: var(--yt-red) !important;
  color: var(--yt-white) !important;
  border-radius: 4px !important;
  padding: var(--yt-sp-2) var(--yt-sp-4) !important;
  font-family: var(--yt-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
}

/* Supporting metric grid (3-col).
 * NOTE: previously used var(--yt-sp-5) for card padding + var(--yt-sp-10)
 * for grid margin. Neither is defined in the token scale (skips from
 * sp-4=16 to sp-6=24, sp-8=32 to sp-12=48). Both fell back to empty,
 * making card padding 0 (text bled to the border) and the grid's bottom
 * margin 0. Same class of bug as the .yt-cs-status + .yt-cs-checklist
 * issues. Using defined adjacent tokens. */
html body .yt-cs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--yt-sp-4);
  margin: var(--yt-sp-6) 0 var(--yt-sp-8) !important;
  max-width: 1080px;
}
html body .yt-cs-metric-card {
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: 8px !important;
  padding: var(--yt-sp-6) !important;
  text-align: left;
}
html body .yt-cs-metric-card__val {
  font-family: var(--yt-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--yt-red) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: var(--yt-sp-1) !important;
}
html body .yt-cs-metric-card__label {
  font-family: var(--yt-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--yt-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  margin-bottom: var(--yt-sp-2) !important;
}
html body .yt-cs-metric-card__detail {
  font-size: 13px !important;
  color: var(--yt-text-muted) !important;
  line-height: 1.5 !important;
}
html body .yt-cs-metric-card__badge {
  display: inline-block;
  margin-top: var(--yt-sp-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--yt-red) !important;
  border: 1px solid var(--yt-red) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}

/* Status callout */
html body .yt-cs-status {
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  border-left: 4px solid var(--yt-navy) !important;
  border-radius: 8px !important;
  /* sp-5 is not defined in the token scale (sp-4=16, sp-6=24);
   * falling back to empty made right-padding 0 → text bled into the
   * right border. Same class of bug as the .yt-cs-checklist sp-7 fix. */
  padding: var(--yt-sp-4) var(--yt-sp-6) !important;
  margin: 0 0 var(--yt-sp-8) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--yt-text-body) !important;
  max-width: 1080px;
}
html body .yt-cs-status strong {
  color: var(--yt-text) !important;
}

/* Timeline */
html body .yt-cs-timeline {
  list-style: none !important;
  padding-left: 0 !important;
  margin: var(--yt-sp-4) 0 var(--yt-sp-6) !important;
  position: relative;
}
html body .yt-cs-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--yt-border);
}
html body .yt-cs-timeline li {
  position: relative;
  padding-left: var(--yt-sp-8) !important;
  margin: 0 0 var(--yt-sp-5) !important;
  list-style: none !important;
}
html body .yt-cs-timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--yt-white);
  border: 3px solid var(--yt-red);
  box-sizing: border-box;
  z-index: 1;
}
html body .yt-cs-timeline__date {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--yt-red) !important;
  margin-bottom: var(--yt-sp-1) !important;
}
html body .yt-cs-timeline__desc {
  font-size: 15px !important;
  color: var(--yt-text-body) !important;
  line-height: 1.6 !important;
}

/* Tables — results / KPI breakdowns */
html body .yt-cs-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: var(--yt-sp-3) 0 var(--yt-sp-6) !important;
  font-size: 14px !important;
  background: var(--yt-white) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
html body .yt-cs-body th {
  text-align: left !important;
  font-family: var(--yt-font) !important;
  font-weight: 700 !important;
  color: var(--yt-text) !important;
  background: var(--yt-surface) !important;
  border-bottom: 1px solid var(--yt-border) !important;
  padding: var(--yt-sp-3) var(--yt-sp-4) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
}
html body .yt-cs-body td {
  border-bottom: 1px solid var(--yt-border) !important;
  padding: var(--yt-sp-3) var(--yt-sp-4) !important;
  vertical-align: top;
  color: var(--yt-text-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
html body .yt-cs-body tr:last-child td {
  border-bottom: 0 !important;
}
html body .yt-cs-body td strong {
  color: var(--yt-text) !important;
}

/* Domain chips */
html body .yt-cs-domains {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yt-sp-2);
  margin: var(--yt-sp-3) 0 var(--yt-sp-6) !important;
}
html body .yt-cs-domain {
  font-family: var(--yt-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  background: var(--yt-surface) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  color: var(--yt-text) !important;
}

/* Checklist (post-validation) */
html body .yt-cs-checklist {
  list-style: none !important;
  padding-left: 0 !important;
  margin: var(--yt-sp-3) 0 var(--yt-sp-6) !important;
}
/* Absolute-positioned checkbox + inline text. Strong/code sizes are pinned
 * (below) so the first line never balloons. top: 0.32em aligns the box with
 * the optical center of the first line's x-height regardless of font-size. */
html body .yt-cs-checklist li {
  padding-left: var(--yt-sp-8) !important;
  position: relative;
  margin: var(--yt-sp-3) 0 !important;
  color: var(--yt-text-body) !important;
  line-height: 1.6 !important;
}
html body .yt-cs-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 18px;
  height: 18px;
  border: 2px solid var(--yt-red);
  border-radius: 3px;
  box-sizing: border-box;
}
/* Inline <strong> / <code> inside checklist items can otherwise inherit
 * font-family / font-size from main.css and balloon the first line's
 * computed line-height, throwing the checkbox alignment off. Pin them. */
html body .yt-cs-checklist li strong {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700;
  color: var(--yt-text) !important;
}
html body .yt-cs-checklist li code {
  font-family: var(--yt-font-mono, 'JetBrains Mono', 'Menlo', monospace) !important;
  font-size: 0.92em !important;
  line-height: inherit !important;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--yt-surface-alt) !important;
  vertical-align: baseline;
}

/* Mobile */
@media (max-width: 720px) {
  html body .yt-cs-hero-metric {
    grid-template-columns: 1fr !important;
    gap: var(--yt-sp-4);
  }
  html body .yt-cs-metrics-grid {
    grid-template-columns: 1fr !important;
  }
  html body .yt-cs-hero-meta {
    gap: var(--yt-sp-3);
  }
}

/* ============================================================== */
/* 18. Don't                                                       */
/* ============================================================== */
/* No purple, no electric blue, no gradients, no drop shadows on type,
 * no second typeface. If you find yourself adding a new rule here that
 * doesn't fit YT-DESIGN-SYSTEM.md — stop and update the design system first. */

/* ============================================================== */
/* 18b. "Exceeded target" badge (case studies)                     */
/* ============================================================== */
html body .yt-cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--yt-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap;
}
html body .yt-cs-badge--exceeded {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
html body .yt-cs-badge--exceeded::before {
  content: '✓';
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
/* On dark navy hero, lighten the pill for contrast */
html body .yt-page__hero .yt-cs-badge--exceeded {
  background: rgba(16, 185, 129, 0.20) !important;
  color: #6EE7B7 !important;
  border-color: rgba(110, 231, 183, 0.55) !important;
}
html body .yt-cs-card__hero-metric .yt-cs-badge {
  margin-top: 8px;
}

/* ============================================================== */
/* 19. v3 success modal (contact form result)                      */
/* ============================================================== */
/* Replaces Bootstrap 3's default "modal-header + modal-body + modal-footer"
 * navy-strip-on-top look. Modern v3 card with rounded corners, soft shadow,
 * centered hierarchy, single brand-red CTA. main.js Contact.initialize still
 * fires $.modal('show') against #contactModal — we keep the .modal classes
 * intact and only override the visual style. */
html body #contactModal .modal-dialog {
  max-width: 480px;
  margin: 8vh auto;
}
html body #contactModal .modal-content,
html body #contactModal .v3-success-modal__content {
  background: var(--yt-white) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 31, 63, 0.18), 0 8px 32px rgba(0, 31, 63, 0.10) !important;
  padding: 48px 40px 40px !important;
  text-align: center !important;
  position: relative;
}
html body #contactModal .modal-header,
html body #contactModal .modal-footer {
  display: none !important;
}
html body #contactModal .v3-success-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--yt-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body #contactModal .v3-success-modal__close:hover,
html body #contactModal .v3-success-modal__close:focus {
  background: var(--yt-surface-alt);
  color: var(--yt-text);
  outline: none;
}
html body #contactModal .v3-success-modal__icon {
  width: 88px; height: 96px;
  margin: 4px auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body #contactModal .v3-success-modal__icon img,
html body #contactModal .v3-success-modal__icon svg {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}
html body #contactModal .v3-success-modal__title {
  font-family: var(--yt-font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--yt-text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 12px !important;
  text-align: center !important;
  text-transform: none !important;
}
html body #contactModal .v3-success-modal__body {
  font-family: var(--yt-font) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--yt-muted) !important;
  margin: 0 auto 32px !important;
  max-width: 360px;
  text-align: center !important;
}
html body #contactModal .v3-success-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 36px;
  border-radius: 6px;
  background: var(--yt-red) !important;
  color: var(--yt-white) !important;
  font-family: var(--yt-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(185, 28, 28, 0.22);
}
html body #contactModal .v3-success-modal__cta:hover,
html body #contactModal .v3-success-modal__cta:focus {
  background: #991818 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.32);
  outline: none;
}
/* Softer backdrop than Bootstrap default */
body .modal-backdrop.in { opacity: 0.55 !important; }
@media (max-width: 520px) {
  html body #contactModal .modal-content { padding: 40px 24px 32px !important; border-radius: 12px !important; }
  html body #contactModal .v3-success-modal__title { font-size: 22px !important; }
}