/* ==========================================================================
   RDRGZ Studio — Design tokens
   Graphite (premium neutral) base + SMPTE color-bar accents, one per section
   Typography: Manrope (organic sans, display + body) + Playfair italic (quotes) + JetBrains Mono (timecode/stats)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* SMPTE color bars — the studio's signature palette, one assigned per section */
  --bar-cyan: #56c6dd;
  --bar-slate: #8b939c;
  --bar-olive: #dfc95a;
  --bar-teal: #3fae9c;
  --bar-green: #59ac59;
  --bar-magenta: #c15fa4;
  --bar-red: #dd463d;
  --bar-blue: #5470c4;

  /* Core neutrals — sampled from the studio wall in the hero photo */
  --bg: #0b1517;
  --bg-raised: #16262a;
  --bg-alt: #e9e9ea;
  --fg: #f3f2ef;
  --fg-muted: #93a3a5;
  --fg-on-alt: #18191c;
  --fg-on-alt-muted: #5b5c60;
  --border: #223639;
  --border-on-alt: #d2d2d5;

  --accent: var(--bar-cyan);
  --accent-cta: var(--bar-blue);
  --accent-contrast: #ffffff;

  --focus-ring: #e7e5df;

  /* Type scale */
  --font-display: 'Manrope', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --step-label: 0.75rem;
  --step-body: 1rem;
  --step-body-lg: 1.125rem;
  --step-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --step-h2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --step-h1: clamp(2.6rem, 1.7rem + 3.6vw, 5rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --container: 1240px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius: var(--radius-sm);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Section accent assignment — one SMPTE bar color per topic */
[data-accent="cyan"] { --accent: var(--bar-cyan); }
[data-accent="slate"] { --accent: var(--bar-slate); }
[data-accent="olive"] { --accent: var(--bar-olive); }
[data-accent="teal"] { --accent: var(--bar-teal); }
[data-accent="green"] { --accent: var(--bar-green); }
[data-accent="magenta"] { --accent: var(--bar-magenta); }
[data-accent="red"] { --accent: var(--bar-red); }
[data-accent="blue"] { --accent: var(--bar-blue); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Alternating section backgrounds — the two studio-wall tones, in sequence */
.bg-a { background: var(--bg); }
.bg-b { background: var(--bg-raised); }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

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

section { position: relative; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---- SMPTE bar strip — the recurring brand mark ---- */
.color-bars {
  display: flex;
  height: 5px;
  width: 100%;
}
.color-bars span { flex: 1; }
.color-bars span:nth-child(1) { background: var(--bar-cyan); }
.color-bars span:nth-child(2) { background: var(--bar-slate); }
.color-bars span:nth-child(3) { background: var(--bar-olive); }
.color-bars span:nth-child(4) { background: var(--bar-teal); }
.color-bars span:nth-child(5) { background: var(--bar-green); }
.color-bars span:nth-child(6) { background: var(--bar-magenta); }
.color-bars span:nth-child(7) { background: var(--bar-red); }
.color-bars span:nth-child(8) { background: var(--bar-blue); }

/* ---- Type utilities ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 1.4em;
  height: 1px;
  background: var(--accent);
}
[data-theme-block="light"] .eyebrow { color: var(--fg-on-alt-muted); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 700; }

p { margin: 0; text-align: justify; text-align-last: left; }
.hero-copy p, .eyebrow, .form-status { text-align: left; text-align-last: auto; }
.hero-copy p { text-align: center; }
.lead { font-size: var(--step-body-lg); color: var(--fg-muted); max-width: 100%; }
[data-theme-block="light"] .lead { color: var(--fg-on-alt-muted); }

.mono-stat { font-family: var(--font-mono); }

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* ---- Triangle marker (from the RDRGZ play-icon) ---- */
.tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  flex-shrink: 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--accent-cta);
  color: var(--accent-contrast);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}
.btn-outline:hover { border-color: var(--fg); }
[data-theme-block="light"] .btn-outline { border-color: var(--border-on-alt); color: var(--fg-on-alt); }
[data-theme-block="light"] .btn-outline:hover { border-color: var(--fg-on-alt); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(9, 18, 20, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled { border-color: var(--border); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { height: 50px; width: auto; }

.nav-links { display: none; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--fg); border-color: var(--bar-blue); }

.header-actions { display: flex; align-items: center; gap: 0; }
.header-actions .lang-toggle { margin-right: var(--space-3); }
.header-actions .menu-toggle { margin-left: var(--space-3); }
#navCta {
  margin-left: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: max-width var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), margin-left var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
#navCta.is-visible {
  margin-left: var(--space-3);
  max-width: 220px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  opacity: 1;
  pointer-events: auto;
}
/* Below the nav-links breakpoint there isn't room for the logo, the
   Contact CTA, the language toggle and the hamburger all at once. The
   Contact button must stay available as soon as it appears (it's the
   primary CTA), so the logo steps aside instead once scrolling reveals it. */
@media (max-width: 899px) {
  .site-header:has(#navCta.is-visible) .brand { display: none; }
}

.lang-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lang-toggle button {
  background: transparent;
  color: var(--fg-muted);
  border: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-toggle button.is-active { background: var(--fg); color: var(--bg); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }

.mobile-nav {
  position: fixed;
  inset: 96px 0 0 0;
  background: var(--bg);
  z-index: 99;
  padding: var(--space-5) var(--space-4);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  text-decoration: none;
  color: var(--fg);
  font-size: 1.4rem;
  font-weight: 700;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.mobile-nav .btn { margin-top: var(--space-3); align-self: flex-start; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: 142px;
  padding-bottom: var(--space-7);
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed background photo, fixed to the section bounds (standard responsive
   technique — reflows with the section, never breaks on resize). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  transform: scale(1.1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { transform: scale(1); }
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,12,13,0.88) 0%, rgba(7,12,13,0.55) 30%, rgba(7,12,13,0.6) 70%, rgba(7,12,13,0.92) 100%);
}
.hero-bg .cap {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-inner { display: flex; flex-direction: column; gap: var(--space-5); }

/* Pill rows — normal document flow, wraps freely, never breaks on resize */
.hero-pills-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  background: rgba(15, 20, 22, 0.55);
  backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.hero-pill .tri { color: var(--accent); }
.hero-pill:hover { border-color: var(--accent); background: rgba(15, 20, 22, 0.8); transform: translateY(-2px); }

/* Centered copy block */
.hero-copy { width: 100%; max-width: 46rem; margin: 0 auto; text-align: center; container-type: inline-size; }
.hero-eyebrow { margin-bottom: var(--space-3); justify-content: center; }
/* Font size is tied to the container's own width (not the viewport), so the
   ratio between text and container never changes — each line always fits on
   one line, at any window size, without ever wrapping or overflowing. */
.hero h1 { margin: 0 auto; text-shadow: 0 2px 24px rgba(0,0,0,0.4); font-size: 7cqw; line-height: 1.08; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero-lead { margin: var(--space-4) auto 0; max-width: 52ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }

/* Credentials strip */
.credentials { margin-top: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px) { .credentials-grid { grid-template-columns: repeat(4, 1fr); } }
.credential { border-left: 2px solid var(--accent); padding-left: var(--space-2); }
.credential .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: block;
}
.credential .value { font-weight: 700; font-size: 1rem; margin-top: 0.25rem; display: block; }

/* ==========================================================================
   Laurels strip (festival badges — bigger, hyperlinked to each film)
   ========================================================================== */
.laurels { background: var(--bg-raised); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-6) 0; }
.laurels-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.laurels-nav { display: flex; gap: 0.5rem; }
.laurels-nav button {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  cursor: pointer; border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.laurels-nav button:hover { border-color: var(--accent); background: rgba(255,255,255,0.04); }
.laurels-nav button svg { width: 18px; height: 18px; }
.laurels-track {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.laurels-track::-webkit-scrollbar { display: none; }
.laurel-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
a.laurel-item:hover { transform: translateY(-4px); opacity: 0.85; }
.laurel-item .laurel-frame {
  aspect-ratio: 16/9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.laurel-item .laurel-frame img { height: 100%; width: 100%; object-fit: cover; }
.laurel-item .laurel-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-muted);
  line-height: 1.4;
}
.laurel-item .laurel-text strong { color: var(--fg); font-weight: 600; display: block; }

/* ==========================================================================
   Section shell
   ========================================================================== */
.section { padding: var(--space-8) 0; }
.section-alt { background: var(--bg-alt); color: var(--fg-on-alt); }
.section-raised { background: var(--bg-raised); }
.section-head { max-width: 100%; margin-bottom: var(--space-6); }
.section-head h2 { margin-top: var(--space-2); }
.subsection { padding-top: var(--space-7); margin-top: var(--space-7); border-top: 1px solid var(--border); }
.subsection:first-child { padding-top: 0; margin-top: 0; border-top: none; }

/* ==========================================================================
   Services (track copy)
   ========================================================================== */
.track-head { max-width: 100%; }
.track-desc { margin-top: var(--space-3); }
.track-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 100%;
}
.track-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.98rem; }
.track-list li .tri { margin-top: 0.45em; color: var(--accent); }

.track-media {
  margin-top: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 16/9;
  max-width: 46rem;
  overflow: hidden;
}
.track-media img { width: 100%; height: 100%; object-fit: cover; }

.multiplatform-strategy {
  margin-top: var(--space-6);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: var(--space-5);
}
.multiplatform-strategy h4 {
  margin-top: var(--space-2);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fg);
}
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (min-width: 700px) { .shorts-grid { grid-template-columns: repeat(4, 1fr); } }
.video-card.is-vertical { width: 100%; aspect-ratio: 9/16; }
.service-flow { margin-top: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.service-flow h4 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.flow-steps { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .flow-steps { grid-template-columns: repeat(4, 1fr); } }
.flow-steps li { border-top: 2px solid var(--accent); padding-top: var(--space-2); }
.flow-steps .step-num { font-family: var(--font-mono); color: var(--fg-muted); font-size: 0.8rem; }
.flow-steps .step-title { font-weight: 700; margin-top: 0.3rem; }
.flow-steps .step-desc { color: var(--fg-muted); font-size: 0.88rem; margin-top: 0.3rem; }

.flow-branches-head { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.flow-branches-head h4 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 500;
  margin: 0;
}
.flow-branches-head p { color: var(--fg-muted); font-size: 0.92rem; margin-top: 0.25rem; }
.flow-branches { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .flow-branches { grid-template-columns: repeat(3, 1fr); } }
.flow-branch { background: var(--bg-raised); border-radius: var(--radius-md); padding: var(--space-3); font-size: 0.9rem; color: var(--fg-muted); }
.flow-branch strong { color: var(--fg); display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }

.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.support-strip h3 { font-size: 1.1rem; }
.support-strip p { color: var(--fg-muted); font-size: 0.92rem; margin-top: 0.3rem; max-width: 46ch; }

/* ==========================================================================
   Case study
   ========================================================================== */
.case-study { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .case-study { grid-template-columns: 1fr 1fr; align-items: center; } }
.case-hero-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.case-hero-stat .from { font-family: var(--font-mono); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); color: var(--fg-muted); }
.case-hero-stat .arrow { font-size: 1.6rem; color: var(--accent); }
.case-hero-stat .to { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.8rem); color: var(--fg); }
.case-hero-stat .stat-label { flex-basis: 100%; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-top: var(--space-1); }
.case-narrative { color: var(--fg-muted); font-size: 0.98rem; }
.case-metrics { grid-column: 1 / -1; display: grid; gap: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-4); }
@media (min-width: 640px) { .case-metrics { grid-template-columns: repeat(3, 1fr); } }
.case-metric { display: flex; flex-direction: column; gap: 0.3rem; }
.case-metric .num { font-family: var(--font-mono); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
.case-metric .lbl { font-size: 0.85rem; color: var(--fg-muted); }

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }

.video-card { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out); }
.video-card:hover img { transform: scale(1.05); }
.video-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.75) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-3);
}
.video-card .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(244, 243, 239, 0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); }
.video-card:hover .play-btn .tri { color: #fff; }
.video-card .play-btn .tri { color: var(--fg-on-alt); border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 4px; }
.video-card .meta { position: relative; z-index: 1; }
.video-card .cat { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }
.video-card .title { color: #fff; font-weight: 700; font-size: 1rem; margin-top: 0.2rem; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-grid { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.testimonial-card .stars { color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.15em; }
.testimonial-card p.quote { font-size: 1.05rem; line-height: 1.5; flex-grow: 1; }
.testimonial-person { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.testimonial-person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center; flex-shrink: 0; }
.testimonial-person .name { font-weight: 700; font-size: 0.9rem; }
.testimonial-person .role { color: var(--fg-muted); font-size: 0.8rem; }

/* ==========================================================================
   About
   ========================================================================== */
.about-frame {
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: var(--space-6) var(--space-5);
}
.about-heading, .about-wrap, .about-copy { max-width: 900px; margin-left: auto; margin-right: auto; }
.about-heading { margin-bottom: var(--space-5); }
/* Photo column is a fraction of the row (not a fixed px width), so it
   shrinks and grows smoothly together with the text column as the window
   resizes — never staying pinned at one size. */
.about-wrap { display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); gap: var(--space-5); align-items: start; }
@media (max-width: 760px) { .about-wrap { grid-template-columns: 1fr; } }
.about-photos { display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 760px) { .about-photos { flex-direction: row; max-width: 320px; margin: 0 auto; } }
/* Fixed aspect ratio per photo — it scales as a whole with the column width,
   it never gets cropped or distorted to fit an arbitrary height. */
.about-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.about-photo.wide { aspect-ratio: 4/3; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-copy p { margin-bottom: var(--space-3); color: var(--fg-muted); }
.about-copy p:last-child { margin-bottom: 0; }

/* Magazine-style variant: photos float inside the text column so paragraphs
   wrap around them. Photos keep their own fixed aspect ratio (never cropped
   to an arbitrary height) and shrink/grow with the column width. Known
   trade-off: at some viewport widths the trailing paragraph may end above
   the bottom of the last floated photo, leaving empty space below the text —
   inherent to CSS float wrapping, not fixable without cropping the photo. */
.about-copy--wrap { max-width: 760px; }
.about-copy--wrap::after { content: ""; display: table; clear: both; }
.about-copy--wrap .about-photos.float-left {
  float: left;
  width: 30%;
  max-width: 205px;
  margin: 0 var(--space-5) var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .about-copy--wrap .about-photos.float-left { float: none; width: 100%; max-width: 320px; margin: 0 auto var(--space-4); }
}
.about-copy--wrap .about-photo-spacer { display: none; }
.about-timeline {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}
.about-timeline .row { display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-4); font-size: 0.95rem; }
@media (min-width: 700px) { .about-timeline .row { grid-template-columns: 16rem 1fr; } }
@media (max-width: 480px) { .about-timeline .row { grid-template-columns: 1fr; gap: 0.3rem; } }
.about-timeline .row .when { font-family: var(--font-mono); color: var(--fg-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ==========================================================================
   Teaching
   ========================================================================== */
.teaching-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .teaching-wrap { grid-template-columns: 1fr 1fr; } }
.teaching-modes { display: grid; gap: var(--space-3); }
.teaching-mode { border-left: 2px solid var(--accent); padding-left: var(--space-3); }
.teaching-mode strong { display: block; margin-bottom: 0.2rem; }
.teaching-mode span { color: var(--fg-muted); font-size: 0.9rem; }
.teaching-origin { font-size: 0.85rem; color: var(--fg-muted); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.teaching-photo { border: 1px solid var(--border); border-radius: var(--radius-lg); aspect-ratio: 4/3; overflow: hidden; margin-top: var(--space-4); }
.teaching-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }
.contact-info .direct-line { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.contact-info .direct-line a {
  text-decoration: none; display: flex; align-items: center; gap: 0.6rem; font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-info .direct-line a:hover { color: var(--accent); }

.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.form-field input, .form-field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  padding: 0.85rem 1rem; font-family: inherit; font-size: 1rem; border-radius: var(--radius);
  min-height: 44px; transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-status { margin-top: var(--space-3); font-size: 0.9rem; display: none; }
.form-status.is-visible { display: block; }
.form-status.ok { color: var(--bar-green); }
.form-status.err { color: var(--bar-red); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding: var(--space-6) 0 var(--space-4); border-top: 1px solid var(--border); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-5); }
.footer-brand { max-width: 30ch; }
.footer-brand img { height: 34px; margin-bottom: var(--space-2); }
.footer-brand p { color: var(--fg-muted); font-size: 0.88rem; }
.footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin: 0 0 var(--space-2); font-weight: 500; }
.footer-col a { display: block; text-decoration: none; color: var(--fg); font-size: 0.9rem; padding: 0.3rem 0; }
.footer-col a:hover { color: var(--bar-cyan); }
.footer-bottom { padding-top: var(--space-4); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: 0.78rem; color: var(--fg-muted); font-family: var(--font-mono); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); will-change: transform, opacity; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   i18n visibility
   ========================================================================== */
[data-lang-block] { display: none; }
html[lang="es"] [data-lang-block="es"] { display: revert; }
html[lang="en"] [data-lang-block="en"] { display: revert; }
span[data-lang-block] { display: none; }
html[lang="es"] span[data-lang-block="es"] { display: inline; }
html[lang="en"] span[data-lang-block="en"] { display: inline; }

@media (max-width: 480px) {
  .container { padding: 0 var(--space-3); }
}

/* Mobile only: face photo above the text, studio photo below it. */
@media (max-width: 640px) {
  .about-copy--wrap { display: flex; flex-direction: column; }
  .about-copy--wrap .about-photos.float-left { display: contents; }
  .about-copy--wrap .about-photos .about-photo { order: 0; width: 100%; max-width: 320px; margin: 0 auto var(--space-4); }
  .about-copy--wrap .about-photos .about-photo.wide { order: 2; margin: var(--space-4) auto 0; }
  .about-copy--wrap > p { order: 1; }
}