/* Inter, self-hosted (Sept 28, 2026): variable font 400-800, latin + latin-ext.
   Replaces the Google Fonts stylesheet, which blocked rendering (~750 ms on mobile).
   Inter is under the SIL Open Font License. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   CRIMSON SPARK AGENCY — GLOBAL DESIGN SYSTEM
   ============================================ */

:root {
  /* Color Palette */
  --charcoal-dark: #0a0a0a;
  --charcoal: #1a1a1a;
  --charcoal-warm: #2d1a1a;
  --crimson: #b91c1c;
  --crimson-bright: #e31937;
  --crimson-glow: rgba(185, 28, 28, 0.4);
  --white: #ffffff;
  --gray-light: #e0e0e0;
  --gray-mid: #9a9a9a;
  --gray-dim: #666666;
  /* Text-only shades that pass WCAG AA (4.5:1) on every dark surface of the site.
     --crimson-bright stays for fills, glows and buttons. */
  --crimson-text: #f04a62;
  --gray-dim-text: #8a8a8a;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-crimson: rgba(185, 28, 28, 0.3);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-pad: 120px;
  --section-pad-mobile: 64px;
  --container-max: 1280px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background: var(--charcoal-dark);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 24px;
  }
}

section {
  padding: var(--section-pad) 0;
  position: relative;
}

@media (max-width: 900px) {
  section {
    padding: var(--section-pad-mobile) 0;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--crimson-text);
  margin-bottom: 16px;
  display: block;
}

h1 {
  font-size: clamp(40px, 6vw, 76px);
  margin-bottom: 24px;
}

h2 {
  font-size: clamp(32px, 4.5vw, 52px);
  margin-bottom: 20px;
}

h3 {
  font-size: clamp(22px, 2.8vw, 28px);
  margin-bottom: 14px;
}

p {
  color: var(--gray-light);
  font-size: 17px;
  line-height: 1.7;
}

.lead {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--gray-light);
  max-width: 640px;
}

.section-header {
  max-width: 720px;
  margin-bottom: 64px;
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.gradient-text {
  background: linear-gradient(120deg, var(--white) 0%, var(--gray-light) 60%, var(--crimson-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accent {
  color: var(--crimson-text);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gray-dim) 0%, var(--crimson) 100%);
  color: var(--white);
  box-shadow: 0 0 0 rgba(185, 28, 28, 0);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gray-dim) 0%, var(--crimson-bright) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--crimson-glow);
}

.btn-primary:active {
  background: linear-gradient(135deg, var(--charcoal-warm) 0%, var(--crimson) 100%);
  transform: translateY(0);
  box-shadow: 0 4px 14px var(--crimson-glow);
}

.btn-primary:disabled {
  background: var(--gray-dim);
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
  border-color: var(--crimson);
  background: rgba(185, 28, 28, 0.08);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--crimson-text);
  padding: 8px 0;
}

.btn-ghost::after {
  content: '→';
  margin-left: 8px;
  transition: transform 0.3s var(--ease);
  display: inline-block;
}

.btn-ghost:hover::after {
  transform: translateX(6px);
}

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* The header is fixed, so any in-page anchor (#short-film, #production,
   #catalog and every other one on the site) would otherwise land with its
   heading hidden underneath it. scroll-padding-top offsets every anchor
   jump and every scrollIntoView by the header's height plus a little air.
   Header measures 75px at 390px wide and 81px from 768px up. */
html { scroll-padding-top: 104px; }
@media (max-width: 767px) { html { scroll-padding-top: 96px; } }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.3s var(--ease);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  letter-spacing: -0.01em;
  transform: translateY(-3px);
}

.nav-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Full brand lockup in the header (EN and FR variants). It replaces the icon
   plus the two-line HTML wordmark, so it sets its own width from the aspect
   ratio and only the height is fixed. The grey AGENCE/AGENCY line inside the
   artwork is --gray-mid so it stays legible on --charcoal-dark. */
.nav-logo img.logo-lockup {
  width: auto;
  height: 52px;
}

@media (max-width: 900px) {
  .nav-logo img.logo-lockup { height: 44px; }
}

@media (max-width: 420px) {
  .nav-logo img.logo-lockup { height: 34px; }
}

.nav-logo .logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.nav-logo .logo-text .logo-name {
  font-weight: 700;
  font-size: 19px;
  color: var(--white);
}

.nav-logo .logo-text .logo-sub {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dim-text);
  margin-top: 4px;
}

@media (max-width: 560px) {
  .nav-logo {
    gap: 10px;
  }
  .nav-logo img {
    width: 38px;
    height: 38px;
  }
  .nav-logo .logo-text .logo-name {
    font-size: 17px;
  }
  .nav-logo .logo-text .logo-sub {
    font-size: 10px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--gray-light);
  transition: color 0.2s var(--ease);
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--crimson-bright);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-cta .btn {
  padding: 11px 22px;
  font-size: 14px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all 0.3s var(--ease);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-links .mobile-cta {
  display: none;
}

/* Eight top-level links (How We Work replaced AGI on Oct 2, 2026; the French
   labels are the longest) need a tighter fit before the 900px hamburger
   breakpoint takes over. Labels never wrap onto two lines. */
@media (min-width: 901px) and (max-width: 1400px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 13.5px; }
  .nav-cta { gap: 14px; }
  .nav-cta .btn { padding: 11px 18px; font-size: 13px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-wrap { gap: 16px; padding-left: 28px; padding-right: 28px; }
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 12.5px; }
  .nav-logo img.logo-lockup { height: 42px; }
  .nav-cta .btn { padding: 10px 12px; font-size: 12.5px; }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 78%;
    max-width: 340px;
    height: 100vh;
    background: var(--charcoal-dark);
    border-left: 1px solid var(--border-subtle);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
    gap: 28px;
    transition: right 0.4s var(--ease);
  }

  .nav-links.open {
    right: 0;
  }

  .nav-links a {
    font-size: 20px;
  }

  .nav-cta {
    display: none;
  }

  .nav-links .mobile-cta {
    display: flex;
    margin-top: 12px;
  }
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 80px 0 40px;
  background: var(--charcoal-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.footer-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Footer carries the same lockup as the header, one step smaller. */
.footer-brand img.logo-lockup {
  width: auto;
  height: 48px;
}

.footer-brand .logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.footer-brand .logo-text .logo-name {
  font-weight: 700;
  font-size: 19px;
  color: var(--white);
}

.footer-brand .logo-text .logo-sub {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dim-text);
  margin-top: 4px;
}

.footer-desc {
  font-size: 14px;
  color: var(--gray-mid);
  max-width: 280px;
}

.footer-col h5,
.footer-col h2 {
  line-height: 1.4;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-mid);
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--gray-light);
  margin-bottom: 14px;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover {
  color: var(--crimson-text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--gray-dim-text);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-legal-group {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
}

.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal a {
  color: var(--gray-mid);
  transition: color 0.2s var(--ease);
}

.footer-legal a:hover {
  color: var(--crimson-text);
}

.footer-socials {
  display: flex;
  gap: 20px;
}

.footer-socials a {
  color: var(--gray-mid);
  transition: color 0.2s var(--ease);
}

.footer-socials a:hover {
  color: var(--crimson-text);
}

/* ============================================
   CARDS & GRIDS
   ============================================ */

.card {
  background: var(--charcoal);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 36px;
  transition: all 0.4s var(--ease);
}

.card:hover {
  border-color: var(--border-crimson);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(185, 28, 28, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--crimson-text);
  font-size: 22px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   IMAGE TREATMENTS
   ============================================ */

.img-frame {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  position: relative;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.img-frame:hover img {
  transform: scale(1.04);
}

.glow-red {
  box-shadow: 0 0 80px rgba(185, 28, 28, 0.15);
}

/* ============================================
   BADGES / TAGS
   ============================================ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(185, 28, 28, 0.12);
  color: var(--crimson-text);
  border: 1px solid var(--border-crimson);
}

.tag-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* "Coming Soon" status badge: used on every future course card and
   catalog entry across the AGI vertical. Deliberately quieter than
   .tag (which is the crimson category chip) so the two read as
   different kinds of information side by side. */
.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.badge-soon::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson-bright);
  box-shadow: 0 0 0 0 rgba(227, 25, 55, 0.5);
  animation: badge-soon-pulse 2.4s ease-out infinite;
}

@keyframes badge-soon-pulse {
  0% { box-shadow: 0 0 0 0 rgba(227, 25, 55, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(227, 25, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 25, 55, 0); }
}

/* ============================================
   MEDIA PLACEHOLDERS
   Temporary containers for visuals and videos that
   are still in production. They reserve the exact
   final dimensions / aspect ratio so swapping in the
   real asset later means changing only the <img> or
   <video> source inside, never the layout around it.
   Intentionally reads as "not final": dashed frame,
   faint hatch, uppercase label.
   ============================================ */

.cs-placeholder {
  position: relative;
  width: 100%;
  border-radius: 20px;
  border: 1px dashed rgba(227, 25, 55, 0.45);
  background-color: var(--charcoal);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 2px,
    transparent 2px,
    transparent 14px
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  aspect-ratio: 16 / 9;
}

.cs-placeholder.ratio-3-4 { aspect-ratio: 3 / 4; }
.cs-placeholder.ratio-4-3 { aspect-ratio: 4 / 3; }
.cs-placeholder.ratio-1-1 { aspect-ratio: 1 / 1; }
.cs-placeholder.ratio-21-9 { aspect-ratio: 21 / 9; }
.cs-placeholder.ratio-16-9 { aspect-ratio: 16 / 9; }

.cs-placeholder-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-mid);
  line-height: 1.6;
  max-width: 90%;
}

.cs-placeholder-label strong {
  display: block;
  color: var(--crimson-text);
  margin-bottom: 4px;
}

/* Corner tick marks so the frame reads as a layout guide, not artwork. */
.cs-placeholder::before,
.cs-placeholder::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(227, 25, 55, 0.6);
  border-style: solid;
  pointer-events: none;
}
.cs-placeholder::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.cs-placeholder::after { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

/* Video-shaped placeholder: a faint film-frame glyph marks the reserved
   space as a future video container. Deliberately not a play button, so
   a missing video never looks like something a visitor can press. */
.cs-placeholder-film {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  color: rgba(255, 255, 255, 0.35);
}

.cs-placeholder-film svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   UTILITIES
   ============================================ */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 80px 0;
}

.bg-charcoal {
  background: var(--charcoal);
}

.bg-warm {
  background: linear-gradient(180deg, var(--charcoal-dark) 0%, var(--charcoal-warm) 100%);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-num {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13px;
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   HERO SECTION (shared pattern)
   ============================================ */

.hero {
  /* min-height was a bare 100vh, which on tall screens grew the hero and,
     because the content is vertically centred, dumped the extra height as
     dead space above and below the copy. That pushed the film section far
     down the page. Capped at 960px: no change on a 900px laptop, and tall
     monitors stop inflating it. Bottom padding halved for the same reason,
     the film section directly below supplies its own top spacing. */
  min-height: min(100vh, 960px);
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.75) 55%, var(--charcoal-dark) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.page-hero {
  padding-top: 180px;
  padding-bottom: 80px;
}

/* Temporary still-image backgrounds behind the sub-page hero titles
   (Services, AGI, Framework, Consulting, About, Contact), reusing the
   homepage .hero-bg image + gradient treatment so the copy stays
   readable. To be replaced by videos. */
.page-hero.has-hero-bg,
.agi-hero.has-hero-bg {
  position: relative;
  overflow: hidden;
}
.page-hero.has-hero-bg > .container,
.agi-hero.has-hero-bg > .container {
  position: relative;
  z-index: 1;
}
.page-hero.has-hero-bg .hero-bg::after,
.agi-hero.has-hero-bg .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.7) 50%, var(--charcoal-dark) 100%);
}

/* ============================================
   FORMS
   ============================================ */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-light);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--charcoal);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 15px;
  transition: border-color 0.2s var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--crimson);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-status {
  display: none;
  font-size: 14px;
  color: #4ade80;
  margin-top: 16px;
}

.form-status.visible {
  display: block;
}

.form-status.error {
  color: #f87171;
}

/* ============================================
   ARTICLES
   Shared by the homepage carousel, the AGI page carousel, and the
   Insights index. Cards are rendered by js/articles.js from one
   registry, so this stylesheet is the only place their look is
   defined. The carousel mirrors the course catalog's perspective
   depth so the two read as the same component.
   ============================================ */

.article-carousel {
  position: relative;
  perspective: 1600px;
  margin-top: 44px;
}

.article-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 24px 4px 34px;
  margin: -24px -4px -26px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.article-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .article-track { scroll-behavior: auto; }
}

.article-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 250px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

@media (max-width: 1000px) { .article-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .article-card { flex-basis: 86%; min-width: 0; } }

.article-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 24px 22px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%), var(--charcoal);
  box-shadow: 0 26px 56px -30px rgba(0, 0, 0, 0.7);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

a.article-card-inner:hover {
  border-color: var(--crimson-bright);
  box-shadow: 0 30px 66px -26px var(--crimson-glow);
}

a.article-card-inner:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 3px;
}

.article-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.article-card .article-topic { font-size: 11px; padding: 5px 10px; }
.article-card .badge-soon { font-size: 10px; padding: 5px 10px; }

.article-card h3 {
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--white);
}

.article-card p {
  font-size: 14px;
  color: var(--gray-mid);
  margin: 0 0 14px;
  flex: 1;
}

.article-meta {
  font-size: 12px;
  color: var(--gray-dim-text);
  letter-spacing: 0.04em;
  margin-top: auto;
}

.article-card-arrow {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--crimson-text);
  transition: transform 0.3s var(--ease);
  display: inline-block;
}

a.article-card-inner:hover .article-card-arrow { transform: translateX(5px); }

.article-card.is-planned .article-card-inner { opacity: 0.92; }

.article-carousel-arrow {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--crimson-bright) 0%, var(--crimson) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 0 0 6px rgba(227, 25, 55, 0.15), 0 14px 32px -10px rgba(227, 25, 55, 0.7);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.article-carousel-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 0 9px rgba(227, 25, 55, 0.2), 0 18px 40px -10px rgba(227, 25, 55, 0.85);
}

.article-carousel-arrow:disabled { opacity: 0.28; cursor: default; }
.article-carousel-arrow:disabled:hover { transform: translateY(-50%); }
.article-carousel-arrow.prev { left: -24px; }
.article-carousel-arrow.next { right: -24px; }

@media (max-width: 900px) { .article-carousel-arrow { display: none; } }

.article-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 20px;
}

/* Each dot is a 24px tap target (WCAG 2.5.8); the visible pill is drawn by ::before. */
.article-carousel-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: width 0.35s var(--ease);
}
.article-carousel-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  transition: all 0.35s var(--ease);
}

.article-carousel-dot.is-active {
  width: 34px;
}
.article-carousel-dot.is-active::before {
  width: 26px;
  background: var(--crimson-bright);
  box-shadow: 0 0 14px var(--crimson-glow);
}
.article-carousel-dot { flex-shrink: 0; }
@media (max-width: 720px) { .article-carousel-dots.is-many { display: none; } }

/* Insights index grid */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 1000px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }

.article-grid .article-card { flex: none; min-width: 0; }

/* Article page reading layout */
.article-body {
  max-width: 720px;
  margin: 0 auto;
}

.article-body > * { max-width: 100%; }
.article-body p { margin-bottom: 22px; }
.article-body h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 48px 0 16px; }
.article-body h3 { font-size: clamp(20px, 2.4vw, 24px); margin: 34px 0 12px; }
.article-body ul, .article-body ol { margin: 0 0 22px 22px; }
.article-body li { color: var(--gray-light); font-size: 17px; line-height: 1.7; margin-bottom: 8px; }
.article-body a { color: var(--crimson-text); }
.article-body a:hover { text-decoration: underline; }

.article-body blockquote {
  margin: 30px 0;
  padding: 20px 26px;
  border-left: 3px solid var(--crimson-bright);
  background: rgba(185, 28, 28, 0.08);
  border-radius: 0 14px 14px 0;
}

.article-body blockquote p { margin: 0; font-size: 18px; color: var(--white); }

.article-body figure { margin: 32px 0; }
.article-body figure img { width: 100%; border-radius: 16px; }
.article-body figcaption { font-size: 13px; color: var(--gray-mid); margin-top: 10px; text-align: center; }

/* Standing note at the end of a piece — the not-legal-advice line on a
   statute read, or any similar scope caveat. Quieter than body copy and
   set off by a rule, so it reads as a footer rather than as an argument. */
.article-body .article-note {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray-mid);
}

/* Sources block: every article cites its research, so this is a
   standard part of the reading layout rather than an afterthought. */
.article-sources {
  margin-top: 44px;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
}

.article-sources h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin: 0 0 14px;
}

.article-sources ul { margin: 0 0 0 18px; }

.article-sources li {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 8px;
  color: var(--gray-mid);
}

.article-sources li:last-child { margin-bottom: 0; }
.article-sources a { color: var(--crimson-text); }
.article-sources a:hover { text-decoration: underline; }

.article-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 13px;
  color: var(--gray-mid);
  margin-top: 18px;
}

.article-head-meta .dot { color: var(--gray-dim-text); }

/* Share row: the point of the whole content programme is that these
   get posted elsewhere, so sharing is a first class control. */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}

.share-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-right: 4px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gray-light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.share-btn:hover {
  border-color: var(--crimson-bright);
  background: rgba(227, 25, 55, 0.12);
  color: var(--white);
}

.share-btn:focus-visible { outline: 2px solid var(--crimson-bright); outline-offset: 3px; }

.author-box {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 44px;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: var(--charcoal);
}

@media (max-width: 600px) { .author-box { flex-direction: column; text-align: center; } }

.author-box img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-box h4 { font-size: 17px; margin-bottom: 4px; }
.author-box p { font-size: 14px; color: var(--gray-mid); margin: 0 0 8px; }
.author-box a { color: var(--crimson-text); font-size: 13px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .article-card-inner, .article-card-arrow, .article-carousel-arrow,
  .article-carousel-dot, .share-btn { transition: none !important; }
  .article-card { transform: none !important; opacity: 1 !important; }
}

/* ============================================
   HERO REVEAL
   The top block of every page (eyebrow, H1, subhead, lead) animates in
   on load: the headline resolves word by word out of a blur, the
   supporting lines rise behind it, and the eyebrow draws a short rule
   beside itself. Structure is added by JS at runtime (see initHeroReveal
   in main.js), so the raw HTML still contains plain, crawlable text and
   a no-JS visitor sees the normal static hero. Everything is gated on
   .hero-reveal being present, which only JS adds.
   ============================================ */

.hero-reveal .rv-word {
  display: inline-block;
  white-space: pre-wrap;
}

.hero-reveal .rv-word-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) scale(0.985);
  filter: blur(12px);
  will-change: opacity, transform, filter;
}

.hero-reveal.is-revealed .rv-word-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--rv-i, 0) * 55ms);
}

/* Supporting lines: no word splitting, just a soft rise timed to land
   after the headline has resolved. */
.hero-reveal .rv-rise {
  opacity: 0;
  transform: translateY(16px);
}

.hero-reveal.is-revealed .rv-rise {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--rv-d, 0) * 1ms);
}

/* Eyebrow gets a rule that draws out from the text, plus the same rise. */
.hero-reveal .rv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero-reveal .rv-eyebrow::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--crimson-bright), transparent);
  transition: width 1s var(--ease) 0.35s;
}

.hero-reveal.is-revealed .rv-eyebrow::after {
  width: 56px;
}

/* Gradient headline text animates as one unit (see rvIsClipText in
   main.js) and keeps its designed white to crimson ramp untouched. */

/* ============================================
   SECTION TITLE REVEAL
   The same word-resolve as the hero, fired when each title scrolls into
   view (see initSectionReveals in main.js). Paced faster and travelling
   less, because a mid-page title is read on the way past rather than
   landed on. Only the title and its eyebrow are touched; whatever the
   surrounding block already does on scroll still does it.
   No will-change here: the hero is one element per page, but a page
   carries a dozen of these and holding a layer for every word of every
   title costs more than the smoothness it buys.
   ============================================ */

.sec-reveal .rv-word {
  display: inline-block;
  white-space: pre-wrap;
}

.sec-reveal .rv-word-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  filter: blur(8px);
}

.sec-reveal.is-revealed .rv-word-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--rv-i, 0) * 38ms);
}

/* A heading that cannot be word-split (flex or grid layout, see
   initSectionReveals) resolves as one piece instead. */
.sec-reveal.rv-solid {
  opacity: 0;
  transform: translateY(0.3em);
  filter: blur(8px);
}

.sec-reveal.rv-solid.is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The eyebrow is observed as its own group so it leads its title in. */
.sec-reveal.rv-eyebrow {
  opacity: 0;
  transform: translateY(10px);
}

.sec-reveal.rv-eyebrow.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* The rule draws out of the eyebrow text, same as the hero. Skipped on the
   eyebrows that are centred by inline style, where 48px appended to one
   side would visibly pull the text off centre. */
.sec-reveal.rv-eyebrow:not([style*="center"])::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 1px;
  margin-left: 12px;
  background: linear-gradient(90deg, var(--crimson-bright), transparent);
  transition: width 0.9s var(--ease) 0.2s;
}

.sec-reveal.rv-eyebrow.is-revealed:not([style*="center"])::after {
  width: 48px;
}

/* On a phone the eyebrow already fills its line; appending 60px of rule to
   it pushed the AGI page 187px wider than the viewport. The flourish is
   decorative, so it simply does not exist below the phone breakpoint. */
@media (max-width: 640px) {
  .sec-reveal.rv-eyebrow::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reveal .rv-word-in,
  .hero-reveal .rv-rise,
  .sec-reveal .rv-word-in,
  .sec-reveal.rv-solid,
  .sec-reveal.rv-eyebrow {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero-reveal .rv-eyebrow::after { width: 56px; transition: none; }
  .sec-reveal.rv-eyebrow:not([style*="center"])::after { width: 48px; transition: none; }
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Hidden-then-reveal state only applies once JS confirms it can reveal
   elements again (see the "js" class added in <head>). If JS is disabled
   or fails, .fade-in-up elements are fully visible by default. */
.js .fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   NUMBERED STEPS
   ============================================ */

.step-item {
  display: flex;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--crimson-text);
  font-size: 16px;
}

/* ============================================
   PRICING TABLE
   ============================================ */

.pricing-card {
  background: var(--charcoal);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.pricing-card.featured {
  border-color: var(--crimson);
  background: linear-gradient(180deg, rgba(185,28,28,0.08) 0%, var(--charcoal) 30%);
  position: relative;
}

.pricing-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -13px;
  left: 40px;
  background: var(--crimson);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 100px;
}

/* The badge is generated by CSS, so the French tree overrides its content
   rather than duplicating the rule. Keyed on <html lang="fr-CA">. */
:root[lang="fr-CA"] .pricing-card.featured::before { content: 'LE PLUS POPULAIRE'; }


.price-value {
  font-size: 42px;
  font-weight: 700;
  margin: 16px 0 8px;
}

.price-value span {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-mid);
}

/* The launch price lives in its own span so js/main.js can swap it to the regular
   price at the deadline. That span must NOT inherit the small grey unit styling
   above it — it is the headline number and has to read at the same size as the
   bare "Custom" in the other tiles. */
.price-value .oc-price {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* French site: the headline figure is an approximate CAD conversion, and the
   USD amount Payhip actually charges sits under it as the reference. It has to
   break to its own line, so it can't use the inline .price-value span rule. */
.price-usd-ref {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-mid);
  letter-spacing: 0.01em;
  margin-top: 6px;
  line-height: 1.4;
}

.price-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-mid);
  margin: 16px 0 0;
}

.price-eyebrow + .price-value {
  margin-top: 0;
  line-height: 1;
}

.price-compare {
  font-size: 13px;
  color: var(--gray-mid);
  margin: 0 0 4px;
}

.price-was {
  position: relative;
  display: inline-block;
  color: var(--gray-mid);
  font-weight: 600;
  margin-right: 4px;
}

.price-was::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 46%;
  height: 2px;
  background: var(--crimson-bright);
  transform: rotate(-10deg);
}

.price-badge {
  font-size: 12px;
  color: var(--crimson-text);
  font-weight: 600;
  margin: 0;
}

.price-features {
  margin: 28px 0;
  flex-grow: 1;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-light);
  margin-bottom: 14px;
}

.price-features li::before {
  content: '✓';
  color: var(--crimson-text);
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================
   LANGUAGE SWITCH (EN / FR)
   ============================================
   One copy sits in .nav-cta for desktop and a second inside .nav-links for the
   mobile drawer, because .nav-cta is hidden under 900px. Each page hardcodes the
   href of its own translated twin, so there is no JS and nothing to go stale. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 99px;
  padding: 3px;
}

.lang-switch a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--gray-mid);
  padding: 5px 10px;
  border-radius: 99px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.lang-switch a:hover { color: var(--white); }
.lang-switch a[aria-current="true"] { background: var(--crimson); color: #fff; }

/* The drawer copy is hidden on desktop and shown when .nav-cta disappears. */
.nav-links .lang-switch { display: none; }

@media (max-width: 900px) {
  .nav-links .lang-switch { display: inline-flex; align-self: flex-start; }
  .nav-links .lang-switch a { font-size: 15px; padding: 7px 16px; }
}

/* ============================================
   ACCESSIBILITY: FOCUS, MOTION
   ============================================ */

/* Visible keyboard focus everywhere interactive. Mouse/touch users never
   see this ring (focus-visible only fires for keyboard/programmatic focus). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect the OS-level reduced-motion preference: kill scroll reveals,
   decorative motion, and long transitions. Content stays visible and
   interactive — only the animation is removed. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .fade-in-up {
    opacity: 1;
    transform: none;
  }
  .donut-ring circle {
    transition: none !important;
  }
}

/* ---- FAQ heading mark: shared across any FAQ section ---- */
.faq-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.faq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(185,28,28,0.14);
  color: var(--crimson-text);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  transform-origin: 50% 85%;
  animation: faq-mark-rock 2.6s ease-in-out infinite;
}

@keyframes faq-mark-rock {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}

/* ============================================
   ACCESSIBLE EXPAND/COLLAPSE (accordion, cards,
   skill cards, problem cards — any single-open
   -at-a-time or toggle pattern shares this)
   ============================================ */

.expandable {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--charcoal);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.expandable.is-open {
  border-color: var(--border-crimson);
}

.expandable-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  color: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  padding: 24px 28px;
}

.expandable-trigger .expandable-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-crimson);
  border-radius: 50%;
  color: var(--crimson-text);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.35s var(--ease);
}

.expandable.is-open .expandable-trigger .expandable-icon {
  transform: rotate(45deg);
}

.expandable-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.expandable.is-open .expandable-panel {
  grid-template-rows: 1fr;
}

.expandable-panel-inner {
  overflow: hidden;
}

.expandable-panel-inner > * {
  padding: 0 28px 26px;
}

/* Fallback for browsers without grid-template-rows animation support:
   content is present in the DOM and reachable either way, this only
   affects the smoothness of the open/close motion. */
@supports not (grid-template-rows: 1fr) {
  .expandable-panel { display: block; }
  .expandable:not(.is-open) .expandable-panel { display: none; }
}

/* ============================================
   SCROLL-ACTIVATED JOURNEY (8-step production
   flow) — progress rail + step markers
   ============================================ */

.journey {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.journey-rail {
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
}

.journey-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--crimson-bright), var(--crimson));
  box-shadow: 0 0 14px var(--crimson-glow);
  transition: height 0.7s var(--ease);
}

.journey-rail-fill::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--crimson-bright);
  transform: translateX(-50%);
  box-shadow: 0 0 14px var(--crimson-bright), 0 0 4px rgba(255,255,255,0.6);
  animation: journey-dot-pulse 1.6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.journey.has-progress .journey-rail-fill::after {
  opacity: 1;
}

@keyframes journey-dot-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.5); opacity: 0.65; }
}

.journey-step {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 28px 0;
  opacity: 0.32;
  transform: translateX(0);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.journey-step.is-done {
  opacity: 0.6;
}

.journey-step.is-active {
  opacity: 1;
  transform: translateX(6px);
}

.journey-step .step-num {
  position: relative;
  z-index: 1;
  background: var(--charcoal-dark);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.journey-step.is-done .step-num {
  background: var(--crimson);
  border-color: var(--crimson);
  color: transparent;
}

.journey-step.is-done .step-num::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
}

.journey-step.is-active .step-num {
  background: var(--crimson-bright);
  border-color: var(--crimson-bright);
  color: var(--white);
  transform: scale(1.12);
  animation: journey-step-pulse 1.8s ease-in-out infinite;
}

@keyframes journey-step-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(227,25,55,0.18), 0 0 18px var(--crimson-glow); }
  50% { box-shadow: 0 0 0 10px rgba(227,25,55,0.08), 0 0 26px var(--crimson-glow); }
}

.journey-step .step-body h4 {
  font-size: 17px;
  margin-bottom: 6px;
  transition: color 0.3s var(--ease);
}

.journey-step.is-active .step-body h4 {
  color: var(--crimson-text);
}

.journey-step .step-body p {
  font-size: 14px;
  color: var(--gray-mid);
  margin: 0;
}

@media (max-width: 640px) {
  .journey-rail { left: 19px; }
  .journey-step .step-num { width: 40px; height: 40px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-step.is-active .step-num { animation: none; }
  .journey-rail-fill::after { animation: none; }
}

/* ============================================
   ANIMATED DONUT / STAT RING
   ============================================ */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.donut-ring {
  flex-shrink: 0;
}

.donut-ring circle {
  transition: stroke-dashoffset 1.4s var(--ease);
}

.donut-center-value {
  font-size: 15px;
  font-weight: 700;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-light);
  cursor: default;
}

.donut-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.donut-flag {
  font-size: 12px;
  color: var(--gray-mid);
  margin-top: 10px;
  max-width: 420px;
}

/* ============================================
   PROBLEM CARDS (animated micro-demonstrations)
   ============================================ */

.problem-card {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--charcoal);
  padding: 32px;
  overflow: hidden;
}

.problem-demo {
  height: 84px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

/* Character Drift, Uncontrolled Scope, and No Consistency Lock demos are now
   SVG-based (human silhouette drift, looping arrow, failing padlock).
   Their animation rules live in framework.html's page-specific <style>
   block, scoped to .demo-drift / .demo-scope / .demo-lock svg content. */

.problem-card h4 {
  font-size: 17px;
  margin-bottom: 10px;
}

.problem-card p {
  font-size: 14px;
  color: var(--gray-mid);
  margin: 0;
}

/* ============================================
   17 SKILLS CARDS (expandable, single-open)
   ============================================ */

.skill-card-v2 {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--charcoal);
  transition: border-color 0.3s var(--ease);
}

.skill-card-v2.is-open {
  border-color: var(--border-crimson);
}

.skill-card-v2 .skill-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  color: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  padding: 18px 20px;
}

.skill-card-v2 .skill-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(185,28,28,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.skill-card-v2 .skill-name {
  font-size: 15px;
  font-weight: 600;
  flex-grow: 1;
}

/* French site only: the Skill's original English name sits under the
   translated title, because that is the filename the licensee actually
   receives in Claude and ChatGPT. Hidden from the search index? No —
   it stays inside .skill-name on purpose so the name search matches
   either language. The orbit panel strips it (see framework.html). */
.skill-card-v2 .skill-name-en {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray-mid);
  margin-top: 3px;
}

.skill-card-v2 .skill-stage-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-mid);
  flex-shrink: 0;
}

.skill-card-v2 .skill-benefit {
  font-size: 13px;
  color: var(--gray-mid);
  padding: 0 20px 16px 70px;
  margin: -8px 0 0;
}

.skill-card-v2 .expandable-panel-inner > * {
  padding: 0 20px 20px 70px;
}

.skill-card-v2 .skill-detail-row {
  font-size: 13px;
  color: var(--gray-light);
  margin-bottom: 8px;
}

.skill-card-v2 .skill-detail-row strong {
  color: var(--white);
  font-weight: 600;
}

/* Attribution line inside a skill panel, for work this skill is built on. */
.skill-credit {
  font-size: 12px;
  color: var(--gray-dim-text);
  margin: 10px 0 0;
  font-style: italic;
}

.skill-credit a {
  color: var(--gray-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.skill-credit a:hover { color: var(--crimson-text); }

/* The ring panel reuses the stacked card's markup, so the credit needs the
   same treatment there at the ring's smaller, container-relative scale. */
.orbit-panel-detail .skill-credit {
  font-size: clamp(9.5px, 2.1cqw, 11.5px);
  margin-top: clamp(7px, 1.5cqw, 10px);
}

/* ============================================
   QUIZ (Consulting page prospect quiz)
   ============================================ */

.quiz-shell {
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--charcoal);
  padding: 40px;
}

/* ---- Quiz avatar ---- */
.quiz-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}

.quiz-avatar {
  width: 88px;
  height: 88px;
  overflow: visible;
}

@media (max-width: 560px) {
  .quiz-avatar {
    width: 72px;
    height: 72px;
  }
  .quiz-avatar-wrap {
    margin-bottom: 14px;
  }
}

.quiz-avatar-wrap.idle .quiz-avatar {
  animation: avatar-bob 3.4s ease-in-out infinite;
}

@keyframes avatar-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.avatar-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: avatar-blink 4.6s ease-in-out infinite;
}

@keyframes avatar-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.avatar-face-default {
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

.avatar-face-complete {
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.quiz-avatar-wrap.show-complete .avatar-face-default {
  opacity: 0;
}

.quiz-avatar-wrap.show-complete .avatar-face-complete {
  opacity: 1;
}

.quiz-avatar-wrap.show-complete .avatar-body,
.quiz-avatar-wrap.show-complete .avatar-head,
.quiz-avatar-wrap.show-complete .avatar-chest-logo {
  animation: avatar-complete-pop 0.6s var(--ease);
}

@keyframes avatar-complete-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.avatar-body, .avatar-head, .avatar-chest-logo {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.avatar-chest-logo {
  pointer-events: none;
  opacity: 0.92;
}

.avatar-thumb {
  opacity: 0;
}

.quiz-avatar-wrap.pulse-thumb .avatar-thumb {
  animation: avatar-thumb-pop 0.7s var(--ease);
}

.quiz-avatar-wrap.pulse-nod .avatar-head,
.quiz-avatar-wrap.pulse-nod .avatar-body,
.quiz-avatar-wrap.pulse-nod .avatar-chest-logo {
  animation: avatar-nod 0.5s var(--ease);
}

@keyframes avatar-thumb-pop {
  0% { opacity: 0; transform: scale(0.4) translateY(6px); }
  35% { opacity: 1; transform: scale(1.15) translateY(-2px); }
  65% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.9) translateY(-4px); }
}

@keyframes avatar-nod {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-avatar-wrap.idle .quiz-avatar,
  .avatar-eye,
  .quiz-avatar-wrap.pulse-nod .avatar-head,
  .quiz-avatar-wrap.pulse-nod .avatar-body { animation: none !important; }
}

.quiz-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: var(--border-subtle);
  overflow: hidden;
  margin-bottom: 28px;
}

.quiz-progress-fill {
  height: 100%;
  width: 10%;
  background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
  transition: width 0.4s var(--ease);
}

.quiz-step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crimson-text);
  margin-bottom: 10px;
}

.quiz-question {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.3;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--charcoal-dark);
  color: var(--gray-light);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.quiz-option:hover,
.quiz-option:focus-visible {
  border-color: var(--crimson);
  background: rgba(185,28,28,0.08);
  color: var(--white);
}

.quiz-option.selected {
  border-color: var(--crimson-bright);
  background: rgba(185,28,28,0.14);
  color: var(--white);
}

.quiz-option.selected::after {
  content: '✓';
  float: right;
  color: var(--crimson-text);
  font-weight: 700;
}

.quiz-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.quiz-back-btn {
  background: none;
  border: none;
  color: var(--gray-mid);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 6px;
}

.quiz-back-btn:hover {
  color: var(--white);
}

.quiz-back-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.quiz-consent {
  font-size: 12px;
  color: var(--gray-mid);
  margin-top: 16px;
  line-height: 1.5;
}

.quiz-result-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

/* ============================================
   EXPERTISE BUBBLES (Bio page)
   ============================================ */

.bubble-field {
  position: relative;
  min-height: 460px;
}

.expertise-bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border-crimson);
  background: rgba(185,28,28,0.06);
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-light);
  cursor: pointer;
  animation: bubble-float 7s ease-in-out infinite;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease),
    width 0.35s var(--ease), height 0.35s var(--ease), border-radius 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.3s var(--ease);
}

.expertise-bubble:hover,
.expertise-bubble:focus-visible {
  transform: scale(1.08);
  background: rgba(185,28,28,0.18);
  color: var(--white);
  border-color: var(--crimson-bright);
  z-index: 2;
  animation-play-state: paused;
}

.expertise-bubble .bubble-detail {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray-light);
  margin-top: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease);
}

.expertise-bubble.is-expanded {
  width: 230px !important;
  height: auto !important;
  min-height: 160px;
  border-radius: 22px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 22px;
  background: linear-gradient(160deg, var(--charcoal-warm) 0%, var(--charcoal-dark) 100%);
  color: var(--white);
  border: 1px solid var(--crimson-bright);
  cursor: default;
  animation: none;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  z-index: 20;
}

.expertise-bubble.is-expanded .bubble-label {
  font-size: 14px;
}

.expertise-bubble.is-expanded .bubble-detail {
  max-height: 220px;
  opacity: 1;
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}

@media (max-width: 700px) {
  .bubble-field {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    min-height: auto;
  }
  .expertise-bubble {
    position: static;
    width: 108px !important;
    height: 108px !important;
    animation: none;
  }
  .expertise-bubble.is-expanded {
    width: 100% !important;
    height: auto !important;
    min-height: auto;
    flex-basis: 100%;
  }
}

/* ============================================
   CUSTOM VIDEO PLAYER (csvp)
   Reusable premium player: vertical (9:16) or
   horizontal (16:9), minimal chrome, no scrubber.
   ============================================ */
.csvp {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.csvp[data-ratio="9x16"] { aspect-ratio: 9 / 16; }
.csvp[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.csvp[data-ratio="4x3"] { aspect-ratio: 4 / 3; }
.csvp.csvp-fill { position: absolute; inset: 0; aspect-ratio: unset; }
.csvp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.csvp.csvp-fs .csvp-video { object-fit: contain; }

.csvp-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.csvp:hover .csvp-scrim,
.csvp.csvp-controls-visible .csvp-scrim { opacity: 1; }

.csvp-playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
  z-index: 3;
}
.csvp-playbtn svg { width: 22px; height: 22px; }
.csvp-playbtn:hover { background: rgba(227,25,55,0.75); transform: translate(-50%, -50%) scale(1.06); }
/* Fades out the instant playback starts, hover included: playback itself
   already comes from a hover or click, so nothing should keep this button
   pinned on screen while the video is running. */
.csvp.csvp-playing .csvp-playbtn { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }

.csvp-controls {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.csvp:hover .csvp-controls,
.csvp.csvp-controls-visible .csvp-controls,
.csvp:focus-within .csvp-controls { opacity: 1; transform: translateY(0); }
.csvp-ctrl-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.csvp-ctrl-btn svg { width: 16px; height: 16px; }
.csvp-ctrl-btn:hover { background: rgba(227,25,55,0.75); border-color: rgba(227,25,55,0.75); transform: translateY(-2px); }
/* Exactly one speaker icon at a time, driven purely by the muted state.
   Default (sound on) shows icon-on; the muted class flips which one shows. */
.csvp-mute .icon-on { display: flex; }
.csvp-mute .icon-off { display: none; }
.csvp.csvp-muted .csvp-mute .icon-on { display: none; }
.csvp.csvp-muted .csvp-mute .icon-off { display: flex; }

.csvp-spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  opacity: 0;
  z-index: 2;
  animation: csvp-spin 0.8s linear infinite;
}
.csvp.csvp-loading .csvp-spinner { opacity: 1; }
@keyframes csvp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Ambient background usage (hero): no interactive chrome at all */
.csvp[data-chrome="none"] { cursor: default; }
.csvp[data-chrome="none"] .csvp-playbtn,
/* Hero mode: background video layer with a single accessible play/pause
   control. Transparent so the poster/background image shows through when
   the media slot is empty or the sequence has finished. */
.csvp-hero {
  background: transparent;
  cursor: default;
}
.csvp-hero .csvp-video { opacity: 0.55; }
.csvp-hero.csvp-empty .csvp-video { display: none; }
.csvp-hero-ctrl {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(10,10,10,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.csvp-hero-ctrl:hover, .csvp-hero-ctrl:focus-visible { background: rgba(185,28,28,0.7); border-color: var(--crimson-bright); outline: none; }
.csvp-hero-ctrl svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .csvp-spinner { animation: none !important; }
  .badge-soon::before { animation: none !important; }
}


/* ==========================================================
   FEATURED FILM (homepage, directly under the hero)
   One 16:9 film given the full width of the container. Built to
   hold whichever film is currently being led with, not a fixed
   "flagship" slot: more short films are coming, and the section
   is meant to rotate or grow into a small row without any of
   these rules changing. Text sits above the player at every
   width; the player never crops, it letterboxes inside its own
   16:9 box, so the film is seen as it was cut.
   ========================================================== */
.filmfeature-section { padding: 28px 0 88px; }
.filmfeature-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 28px;
}
.filmfeature-head .filmfeature-copy { max-width: 640px; }
.filmfeature-head h2 { margin: 6px 0 10px; }
.filmfeature-head p { color: var(--gray-mid); margin: 0; max-width: 60ch; }
.filmfeature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filmfeature-frame {
  position: relative;
  max-width: 760px; /* Oct 5, 2026: smaller at rest; grows to a centered window on play (theater mode). */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-crimson);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -30px var(--crimson-glow);
  background: #000;
}
.filmfeature-frame .csvp { border-radius: 18px; }
.filmfeature-frame .csvp-video { object-fit: contain; background: #000; }
.filmfeature-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 22px;
}
.filmfeature-foot p {
  margin: 0;
  font-size: 14px;
  color: var(--gray-dim-text);
  max-width: 58ch;
}
@media (max-width: 700px) {
  .filmfeature-section { padding: 20px 0 64px; }
  .filmfeature-frame { border-radius: 14px; }
  .filmfeature-frame .csvp { border-radius: 14px; }
}

/* The Perfect Cut game poster, framework.html — same crimson frame language as
   .filmfeature-frame, but sized for a 2-col grid cell rather than a full-width hero. */
.game-poster {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-crimson);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -30px var(--crimson-glow);
  background: #000;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.game-poster:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 90px -28px var(--crimson-glow); }
.game-poster img { width: 100%; height: auto; display: block; }
.game-poster-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border-crimson);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .game-poster { order: -1; border-radius: 14px; }
}

/* "Built with" badge — sits directly under a signature video player
   (flagship film, ShushCore) to mark it as made with the Framework. */
.built-with-badge {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 18px auto 0;
}
.img-col .built-with-badge { margin-top: 14px; }


/* A named piece of work inside a specialty card: sits under the generic
   description, separated by a rule, so the card says what we do and then
   proves it with something real. */
.specialty-work {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--gray-mid);
}
.specialty-work strong { color: var(--gray-light); }
.specialty-work a {
  color: var(--crimson-text);
  font-weight: 600;
  white-space: nowrap;
}

/* Launch-offer countdown. Hidden by default and only revealed by JS once it confirms the
   deadline is still in the future, so an expired offer degrades to a plain price rather than a
   dead timer counting negatives — or worse, a fake one that silently resets. */
.offer-countdown { display: none; margin: 12px 0 14px; }
.offer-countdown.is-live { display: block; }
.oc-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-mid); margin-bottom: 8px; font-weight: 600; }
.oc-units { display: flex; gap: 8px; justify-content: center; }
.oc-unit { min-width: 56px; padding: 8px 6px; border-radius: 10px; background: rgba(227,25,55,0.10); border: 1px solid var(--border-crimson); }
.oc-num { display: block; font-size: 21px; font-weight: 800; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.oc-cap { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-mid); margin-top: 5px; }
@media (max-width: 480px) { .oc-unit { min-width: 48px; padding: 7px 4px; } .oc-num { font-size: 18px; } }


/* Footer: highlight the Partners link site-wide (referral program). */
.site-footer .footer-col a[href$="partners.html"],
.site-footer .footer-col a[href$="/partners"],
.site-footer .footer-col a[href$="/partners/"] {
  color: var(--crimson-text);
  font-weight: 600;
}
.site-footer .footer-col a[href$="partners.html"]::before,
.site-footer .footer-col a[href$="/partners"]::before,
.site-footer .footer-col a[href$="/partners/"]::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e31937' d='M12 0c.6 5.9 2.4 10.2 12 12-9.6 1.8-11.4 6.1-12 12-.6-5.9-2.4-10.2-12-12C9.6 10.2 11.4 5.9 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(227, 25, 55, 0.6));
}

/* Partners footer spark hangs in the gutter so the label stays aligned with its column. */
.site-footer .footer-col a[href$="partners.html"],
.site-footer .footer-col a[href$="/partners"],
.site-footer .footer-col a[href$="/partners/"] { position: relative; }
.site-footer .footer-col a[href$="partners.html"]::before,
.site-footer .footer-col a[href$="/partners"]::before,
.site-footer .footer-col a[href$="/partners/"]::before {
  position: absolute;
  left: -19px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}


/* ==========================================================
   Article visuals (added Sept 25, 2026): illustrations, charts
   and unit charts inside .article-body. Two chart colours only:
   --viz-a blue for the neutral series, --viz-b crimson for the
   series the story is about. Validated as a pair on the dark
   surface (CVD dE 26.7, normal-vision dE 35.0, both >= 3:1).
   Text always wears text colours, never a series colour.
   ========================================================== */
.article-body .viz {
  margin: 36px 0;
  padding: 24px 24px 18px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: #121212;
}
.article-body .viz-illustration { padding: 0; overflow: hidden; }
.article-body .viz-illustration svg { display: block; width: 100%; height: auto; }
.article-body .viz-illustration figcaption { padding: 12px 20px 16px; }
.article-body .viz figcaption { text-align: left; margin-top: 14px; font-size: 12.5px; color: var(--gray-mid); }
.article-body .viz p.viz-title { font-size: 17px; font-weight: 700; color: var(--white); margin: 0 0 4px; line-height: 1.35; }
.article-body .viz p.viz-sub { font-size: 13.5px; color: var(--gray-mid); margin: 0 0 16px; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--gray-light); margin-bottom: 6px; }
.viz-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.viz-chart { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.viz-chart .viz-grid { stroke: #2a2a2a; stroke-width: 1; }
.viz-chart .viz-tick { font: 500 13px var(--font-primary); fill: var(--gray-mid); }
.viz-chart .viz-val { font: 700 17px var(--font-primary); fill: var(--white); }
.viz-chart .viz-word { font: 500 13px var(--font-primary); fill: var(--gray-light); }
.viz-chart .viz-series { transition: opacity .2s; }
.viz-chart:hover .viz-series { opacity: .35; }
.viz-chart:hover .viz-series:hover { opacity: 1; }
.viz-illustration .viz-mono { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8a8a8a; letter-spacing: 1px; }
.viz-illustration .viz-tag { font: 700 14px var(--font-primary); fill: #bdbdbd; letter-spacing: 3px; }
.viz-waffles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.article-body .viz p.viz-stat { font-size: 44px; font-weight: 800; color: var(--white); line-height: 1; margin: 0 0 8px; letter-spacing: -1px; }
.article-body .viz p.viz-stat-label { font-size: 14.5px; line-height: 1.45; color: var(--gray-light); margin: 0 0 16px; min-height: 42px; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 220px; }
.waffle span { aspect-ratio: 1; border-radius: 3px; background: #2a2a2a; }
.waffle span.on { background: var(--crimson-bright); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 560px) {
  .article-body .viz { padding: 18px 16px 14px; }
  .article-body .viz-illustration { padding: 0; }
  .viz-waffles { grid-template-columns: 1fr; gap: 26px; }
  .article-body .viz p.viz-stat-label { min-height: 0; }
}

/* ============================================
   TESTIMONIALS CAROUSEL — "They trusted us" / "Ils nous ont fait confiance"
   Homepage (EN + FR), under the featured film. One .tcar-slide + one .tcar-tab per person.
   Autoplay 7 s with progress bar; pauses on hover, focus, hidden tab, off-screen, or the pause button;
   off by default under prefers-reduced-motion. Source: claude/testimonials-pipeline.md
   ============================================ */
.testimonials-section { padding: 80px 0; background: var(--charcoal); overflow: hidden; }
.tcar-head { max-width: 620px; margin: 0 auto 36px; text-align: center; }
.tcar-head h2 { margin-bottom: 10px; }
.tcar-head p { color: var(--gray-mid); margin: 0; }
.tcar { max-width: 820px; margin: 0 auto; }

.tcar-stage {
  --mx: 50%; --my: 0%;
  position: relative; display: grid; isolation: isolate;
  padding: 52px 56px 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), var(--charcoal-dark);
  border: 1px solid var(--border-subtle); border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
  touch-action: pan-y;
}
.tcar-stage::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(227,25,55,0.16), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.tcar-stage:hover::before { opacity: 1; }
.tcar-stage::after {
  content: ""; position: absolute; left: 48px; right: 48px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(227,25,55,0.7), transparent);
}
.tcar-mark {
  position: absolute; top: 14px; left: 30px; font-family: Georgia, 'Times New Roman', serif;
  font-size: 96px; line-height: 1; color: var(--crimson-text); opacity: 0.22; pointer-events: none;
}

.tcar-slide { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.tcar-quote { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tcar-quote p {
  margin: 0; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.6; color: var(--white);
  font-weight: 400; letter-spacing: -0.005em; text-wrap: pretty;
}
.tcar-tr { display: block; margin-top: 10px; font-size: 12px; color: var(--gray-dim-text); font-style: italic; }
.tcar-by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tcar-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--charcoal-dark), 0 0 0 3px rgba(227,25,55,0.55); }
.tcar-who { display: flex; flex-direction: column; min-width: 0; }
.tcar-name { font-weight: 600; color: var(--white); }
.tcar-role { font-size: 14px; color: var(--gray-mid); }
.tcar-logo { margin-left: auto; flex: none; opacity: 0.75; transition: opacity 0.2s var(--ease); }
.tcar-logo:hover, .tcar-logo:focus-visible { opacity: 1; }
.tcar-logo img { height: 40px; width: auto; max-width: 110px; object-fit: contain; display: block; }
.tcar-mode { position: absolute; top: 20px; right: 24px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-dim-text); }

/* stacking + transitions (only once the script is running) */
.tcar.is-ready .tcar-slide {
  opacity: 0; visibility: hidden; transform: translateX(28px); filter: blur(6px);
  transition: opacity 0.55s var(--ease), transform 0.65s cubic-bezier(.2,.8,.2,1), filter 0.55s var(--ease), visibility 0s linear 0.65s;
}
.tcar.is-ready .tcar-stage[data-dir="-1"] .tcar-slide { transform: translateX(-28px); }
.tcar.is-ready .tcar-stage[data-dir="1"] .tcar-slide.was-active { transform: translateX(-28px); }
.tcar.is-ready .tcar-stage[data-dir="-1"] .tcar-slide.was-active { transform: translateX(28px); }
.tcar.is-ready .tcar-slide.is-active {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity 0.55s var(--ease) 0.08s, transform 0.65s cubic-bezier(.2,.8,.2,1) 0.08s, filter 0.55s var(--ease) 0.08s, visibility 0s;
}
.tcar.is-ready .tcar-slide.is-active .tcar-quote p { animation: tcar-rise 0.8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tcar-rise { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* without JS: slides simply stack as a list */
.tcar:not(.is-ready) .tcar-slide + .tcar-slide { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.tcar:not(.is-ready) .tcar-nav, .tcar:not(.is-ready) .tcar-mode { display: none; }

/* navigation */
.tcar-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tcar-tabs { display: flex; gap: 8px; flex: 1; min-width: 0; }
.tcar-tab {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: transparent; border: 1px solid var(--border-subtle); border-radius: 14px;
  color: var(--gray-mid); cursor: pointer; overflow: hidden; text-align: left; font: inherit;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.tcar-tab:hover { border-color: rgba(255,255,255,0.18); color: var(--gray-light); transform: translateY(-1px); }
.tcar-tab[aria-selected="true"] { background: rgba(255,255,255,0.04); border-color: rgba(227,25,55,0.45); color: var(--white); }
.tcar-tab img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; filter: grayscale(1); opacity: 0.7; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); }
.tcar-tab[aria-selected="true"] img, .tcar-tab:hover img { filter: none; opacity: 1; }
.tcar-tab-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tcar-tab-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcar-tab-co { font-size: 12px; color: var(--gray-dim-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcar-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--crimson-bright); transform: scaleX(0); transform-origin: left; }
.tcar-tab:focus-visible, .tcar-arrow:focus-visible, .tcar-toggle:focus-visible { outline: 2px solid var(--crimson-bright); outline-offset: 2px; }
.tcar-arrow, .tcar-toggle {
  flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-subtle); background: transparent; color: var(--gray-light); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tcar-arrow:hover { background: var(--crimson-bright); border-color: var(--crimson-bright); color: #fff; }
.tcar-arrow:active { transform: scale(0.94); }
.tcar-toggle { width: 34px; height: 34px; color: var(--gray-dim-text); }
.tcar-toggle:hover { color: var(--white); border-color: rgba(255,255,255,0.2); }
.tcar-ico-play { display: none; }
.tcar.is-paused .tcar-ico-play { display: block; }
.tcar.is-paused .tcar-ico-pause { display: none; }

@media (max-width: 768px) {
  .testimonials-section { padding: 60px 0; }
  .tcar-stage { padding: 40px 22px 26px; border-radius: 18px; }
  .tcar-stage::after { left: 22px; right: 22px; }
  .tcar-mark { font-size: 72px; top: 8px; left: 14px; }
  .tcar-mode { top: 16px; right: 18px; }
  .tcar-logo img { height: 32px; max-width: 80px; }
  .tcar-tab { justify-content: center; padding: 8px; flex: 0 0 auto; }
  .tcar-tabs { justify-content: center; }
  .tcar-tab-txt { display: none; }
  .tcar-tab img { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcar.is-ready .tcar-slide, .tcar.is-ready .tcar-slide.is-active { transition: opacity 0.2s linear, visibility 0s; transform: none !important; filter: none !important; }
  .tcar.is-ready .tcar-slide.is-active .tcar-quote p { animation: none; }
  .tcar-stage::before { display: none; }
}

/* ============================================
   HOW IT WORKS — interactive timeline (homepage EN + FR)
   ============================================ */
.hiw { max-width: 980px; margin: 0 auto; }
.hiw-rail { position: relative; list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hiw-line { position: absolute; left: calc(16.66% + 6px); right: calc(16.66% + 6px); top: 27px; height: 2px; background: var(--border-subtle); border-radius: 2px; pointer-events: none; }
.hiw-line-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--crimson-bright), #ff5a6e); transform-origin: left; transform: scaleX(0); transition: transform 0.9s cubic-bezier(.2,.8,.2,1); border-radius: 2px; }
.hiw[data-step="1"] .hiw-line-fill { transform: scaleX(0.5); }
.hiw[data-step="2"] .hiw-line-fill { transform: scaleX(1); }
.hiw-node { display: flex; justify-content: center; }
.hiw-tab {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%;
  padding: 8px 8px 14px; background: none; border: 0; border-radius: 16px; color: var(--gray-mid); cursor: pointer; font: inherit; text-align: center;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.hiw-tab:hover { color: var(--gray-light); background: rgba(255,255,255,0.025); }
.hiw-tab:focus-visible { outline: 2px solid var(--crimson-bright); outline-offset: 2px; }
.hiw-num {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--gray-light); background: var(--charcoal-dark); border: 2px solid var(--border-subtle);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.hiw-node.is-done .hiw-num { border-color: var(--crimson-bright); color: var(--crimson-text); }
.hiw-tab[aria-selected="true"] { color: var(--white); }
.hiw-tab[aria-selected="true"] .hiw-num { background: var(--crimson-bright); border-color: var(--crimson-bright); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(227,25,55,0.14), 0 10px 26px -8px rgba(227,25,55,0.7); }
.hiw.is-auto .hiw-tab[aria-selected="true"] .hiw-num { animation: hiw-pulse 2.1s ease-in-out infinite; }
@keyframes hiw-pulse { 50% { box-shadow: 0 0 0 11px rgba(227,25,55,0.06), 0 10px 26px -8px rgba(227,25,55,0.7); } }
.hiw-tab-txt { display: flex; flex-direction: column; gap: 4px; }
.hiw-tab-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.hiw-tab-meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-dim-text); }
.hiw-tab[aria-selected="true"] .hiw-tab-meta { color: var(--crimson-text); }

.hiw-panels { position: relative; }
.hiw-panel[hidden] { display: none; }
.hiw-panel {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center;
  padding: 34px 40px; border: 1px solid var(--border-subtle); border-radius: 22px;
  background: radial-gradient(600px circle at 0% 0%, rgba(227,25,55,0.08), transparent 55%), var(--charcoal-dark);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.75);
}
.hiw.is-ready .hiw-panel.is-active { animation: hiw-in 0.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hiw-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hiw-step { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson-text); font-weight: 600; }
.hiw-copy h3 { margin: 8px 0 10px; font-size: clamp(20px, 2.2vw, 26px); }
.hiw-copy p { margin: 0; color: var(--gray-light); font-size: 16.5px; line-height: 1.65; }
.hiw-visual { display: flex; justify-content: center; }
.hiw-svg { width: 100%; max-width: 280px; height: auto; overflow: visible; }

/* shared svg tokens */
.hiw-track, .hiw-ring { fill: none; stroke-width: 6; }
.hiw-track { stroke: rgba(255,255,255,0.08); }
.hiw-ring { stroke: var(--crimson-bright); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.hiw-big { font-size: 34px; font-weight: 700; fill: var(--white); }
.hiw-small { font-size: 12px; fill: var(--gray-mid); letter-spacing: 0.04em; }
.hiw-mid { font-size: 15px; font-weight: 700; fill: var(--white); }
.hiw-wave rect { fill: var(--crimson-bright); opacity: 0.85; transform-box: fill-box; transform-origin: center; }
.hiw-frame { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.22); stroke-width: 1.5; }
.hiw-frame.f2 { stroke: var(--crimson-bright); fill: rgba(227,25,55,0.1); }
.hiw-play { fill: var(--crimson-bright); }
.hiw-track-bar { fill: rgba(255,255,255,0.08); }
.hiw-fill-bar { fill: var(--crimson-bright); transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.hiw-fmt { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.28); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.hiw-fmt.t2 { stroke: var(--crimson-bright); }
.hiw-fmt-l { font-size: 10px; font-weight: 600; fill: var(--gray-light); }
.hiw-okc { fill: rgba(227,25,55,0.12); stroke: var(--crimson-bright); stroke-width: 2; }
.hiw-ok { fill: none; stroke: var(--white); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }

/* animations, played each time a panel becomes active */
.hiw-panel.is-active .hiw-ring { animation: hiw-draw 1.4s cubic-bezier(.4,0,.2,1) 0.15s forwards; }
.hiw-panel.is-active .hiw-wave rect { animation: hiw-eq 0.9s ease-in-out infinite; }
.hiw-panel.is-active .hiw-wave rect:nth-child(2n) { animation-delay: 0.15s; }
.hiw-panel.is-active .hiw-wave rect:nth-child(3n) { animation-delay: 0.3s; }
.hiw-panel.is-active .hiw-frame, .hiw-panel.is-active .hiw-play { animation: hiw-pop 0.5s cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
.hiw-panel.is-active .hiw-frame.f2, .hiw-panel.is-active .hiw-play { animation-delay: 0.15s; }
.hiw-panel.is-active .hiw-frame.f3 { animation-delay: 0.3s; }
.hiw-panel.is-active .hiw-fill-bar { animation: hiw-fill 1.6s cubic-bezier(.4,0,.2,1) 0.35s forwards; }
.hiw-panel.is-active .hiw-fmt, .hiw-panel.is-active .hiw-fmt-l { animation: hiw-pop 0.5s cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
.hiw-panel.is-active .t2 { animation-delay: 0.12s; }
.hiw-panel.is-active .t3 { animation-delay: 0.24s; }
.hiw-panel.is-active .hiw-ok { animation: hiw-draw 0.6s cubic-bezier(.4,0,.2,1) 0.55s forwards; }
@keyframes hiw-draw { to { stroke-dashoffset: 0; } }
@keyframes hiw-fill { to { transform: scaleX(1); } }
@keyframes hiw-pop { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes hiw-eq { 50% { transform: scaleY(0.45); } }

/* without JS: show the three steps as a list */
.hiw:not(.is-ready) .hiw-rail { display: none; }
.hiw:not(.is-ready) .hiw-panel + .hiw-panel { margin-top: 16px; }
.hiw:not(.is-ready) .hiw-ring, .hiw:not(.is-ready) .hiw-ok { stroke-dashoffset: 0; }
.hiw:not(.is-ready) .hiw-fill-bar { transform: none; }

@media (max-width: 768px) {
  .hiw-rail { gap: 4px; }
  .hiw-line { top: 25px; }
  .hiw-tab { padding: 6px 2px 10px; gap: 8px; }
  .hiw-tab-title { font-size: 12.5px; }
  .hiw-tab-meta { display: none; }
  .hiw-panel { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; text-align: left; }
  .hiw-svg { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-line-fill, .hiw-num { transition: none; }
  .hiw.is-ready .hiw-panel.is-active, .hiw-panel.is-active * { animation: none !important; }
  .hiw-ring, .hiw-ok { stroke-dashoffset: 0; }
  .hiw-fill-bar { transform: none; }
}

/* Testimonial stars (5 per card, Sept 28, 2026) */
.tcar-stars { display: flex; gap: 4px; margin-bottom: 16px; }
.tcar-mark { display: none; }
.tcar { max-width: 960px; }
.tcar-stars svg { width: 18px; height: 18px; fill: #FFC53D; filter: drop-shadow(0 0 6px rgba(255,197,61,.35)); }
.tcar.is-ready .tcar-slide.is-active .tcar-stars svg { animation: tcar-star 0.5s cubic-bezier(.2,.8,.2,1) both; }
.tcar.is-ready .tcar-slide.is-active .tcar-stars svg:nth-child(2) { animation-delay: .07s; }
.tcar.is-ready .tcar-slide.is-active .tcar-stars svg:nth-child(3) { animation-delay: .14s; }
.tcar.is-ready .tcar-slide.is-active .tcar-stars svg:nth-child(4) { animation-delay: .21s; }
.tcar.is-ready .tcar-slide.is-active .tcar-stars svg:nth-child(5) { animation-delay: .28s; }
@keyframes tcar-star { from { opacity: 0; transform: scale(.4) rotate(-25deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tcar.is-ready .tcar-slide.is-active .tcar-stars svg { animation: none; } }
@media (max-width: 768px) { .tcar-stars svg { width: 16px; height: 16px; } .tcar-arrow { display: none; } .tcar-tabs { gap: 6px; } .tcar-tab { padding: 5px; } .tcar-tab img { width: 34px; height: 34px; } }
/* 6 testimonials: tabs show first name only (Sept 28, 2026) */
.tcar-tab-co { display: none; }
.tcar-tab { gap: 8px; padding: 8px 10px; }
.tcar-tab-name { font-size: 13px; }
@media (max-width: 768px) { .tcar-tab { padding: 5px; } }

/* Testimonial tabs: a sliding strip, a few tabs visible plus a peek of the next one, faded edges (Sept 26, 2026) */
.tcar-tabs { --fl: 0px; --fr: 0px; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.tcar-tabs::-webkit-scrollbar { display: none; }
.tcar-tabs.more-l { --fl: 56px; }
.tcar-tabs.more-r { --fr: 56px; }
.tcar-tab { flex: 0 0 calc((100% - 32px) / 4.4); gap: 10px; padding: 8px 12px; }
.tcar-tab-co { display: block; }
.tcar-tab:hover { transform: none; }
@media (max-width: 768px) {
  .tcar-nav { gap: 6px; }
  .tcar-arrow { display: inline-flex; width: 34px; height: 34px; }
  .tcar-tabs { gap: 6px; justify-content: flex-start; }
  .tcar-tabs.more-l { --fl: 32px; }
  .tcar-tabs.more-r { --fr: 32px; }
  .tcar-tab { flex: 0 0 calc((100% - 18px) / 3.3); flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px 8px; text-align: center; }
  .tcar-tab img { width: 30px; height: 30px; }
  .tcar-tab-txt { display: flex; align-items: center; width: 100%; }
  .tcar-tab-name { font-size: 10.5px; letter-spacing: -0.1px; max-width: 100%; }
  .tcar-tab-co { display: none; }
}
@media (max-width: 380px) { .tcar-tab-name { font-size: 10px; letter-spacing: -0.2px; } }

/* Theater mode (Oct 5, 2026): a deliberately opened player grows into a centered window. */
.csvp.csvp-theater { position: fixed; z-index: 2001; margin: 0; max-width: none; transform-origin: 0 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65); will-change: transform; }
.csvp-theater .csvp-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.csvp-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(6, 5, 6, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; cursor: zoom-out; }
.csvp-backdrop.is-on { opacity: 1; pointer-events: auto; }
.csvp-ph { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .csvp-backdrop { transition: none; } }