/* ═══════════════════════════════════════════════════════════════════════════════════════════
   home.css — homepage-only layout (index.html). Loads after editorial.css.

   Replaces homepage-featured.css (retired 2026-10-24): its surviving hero rules are merged into §1,
   its centred hero / pill CTA / featured-item cards are gone. Shared atoms (eyebrow, buttons, nav,
   FAQ, footer, section shell) live in editorial.css — reuse them, never redefine them here.

   CONTENTS — search "§N" to jump between this list and the section
     §1  Hero box + video layer      .hero-section · .hero-video-bg · .hero-overlay
     §2  Reel framing                crops the 136px of black baked into home-hero-reel.mp4
     §3  Hero content + actions      .ed-hero-content · .ed-lede · .ed-actions · .ed-reel-btn
     §4  Hero corners                .ed-scroll-cue · .ed-hero-locale (globe)
     §5  Ticker                      quieter type on the existing fx.js ticker
     §6  Featured work               .ed-work · .ed-card (one lead + supporting)
     §7  What we do                  .ed-split · .ed-service-list · .studio-overview
     §8  Approach                    .ed-steps
     §9  Closing band                .ed-close (flat red)
     §10 Showreel dialog + player    #reelDialog · .ed-player (wired by js/showreel.js)
     §11 Responsive
     §12 Reduced motion
   ═══════════════════════════════════════════════════════════════════════════════════════════ */


/* §1 ── Hero box + video layer ───────────────────────────────────────────────────────────────── */
.hero-section {
  --hero-h: clamp(600px, 100svh, 1000px);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
  height: var(--hero-h); max-width: none; margin: 0; padding: 0;
}
.hero-video-bg { position: absolute; inset: 0; z-index: -1; }
/* Side gradient lightened 15% (Brandon, 2026-10-24: 0.92/0.72/0.14 -> 0.78/0.61/0.12). The bottom fade is
   unchanged on purpose: it is what blends the reel into the ticker strip below. */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.78) 0%, rgba(5, 5, 5, 0.61) 42%, rgba(5, 5, 5, 0.12) 82%),
    linear-gradient(0deg, var(--background) 0%, rgba(5, 5, 5, 0) 30%);
}
@media (max-width: 768px) {                    /* poster shows behind the video while it buffers on phones */
  .hero-video-bg { background: url('../assets/home/home-hero-poster.png') center / cover; }
}


/* §2 ── Reel framing ───────────────────────────────────────────────────────────────────────────
   FACT (measured 2026-09-29, 6 timestamps): home-hero-reel.mp4 is 1920x1080 with 136px of black baked
   into the top AND bottom of every frame; the picture is 1920x808 (2.376:1). Size the 16:9 element so
   its PICTURE area just covers the hero box, which crops the bars with no asset change (D16). The
   showreel dialog (§10) always plays the full, uncropped file. */
.hero-video-bg video {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(var(--hero-h) * 2.376)); height: auto; aspect-ratio: 16 / 9; object-fit: fill;
}


/* §3 ── Hero content + actions ──────────────────────────────────────────────────────────────── */
.ed-hero-content { position: relative; z-index: 1; width: 100%; padding: 120px var(--gutter) clamp(48px, 9vh, 104px); }
.ed-hero-content > * { max-width: min(var(--measure), 100%); }
.ed-hero .ed-eyebrow { color: rgba(245, 244, 240, 0.86); }
.ed-hero h1 {
  font-size: clamp(2.5rem, 6.3vw, 5.7rem); line-height: 1.02; margin: 0 0 clamp(20px, 3vh, 32px);
  max-width: 11.5em; text-wrap: balance; color: var(--foreground);
}
.ed-lede { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; color: rgba(245, 244, 240, 0.86); max-width: 54ch; margin: 0 0 clamp(28px, 4.4vh, 44px); }
.ed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; }
.ed-reel-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--foreground);
  transition: color 0.3s ease;
}
.ed-reel-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(245, 244, 240, 0.5); border-radius: 50%; padding-left: 2px; transition: border-color 0.3s ease, background-color 0.3s ease; }
.ed-reel-btn:hover .ed-reel-icon { border-color: var(--accent); background: var(--accent); }
.ed-reel-dur { color: var(--text-secondary); }
.ed-reel-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }


/* §4 ── Hero corners ─────────────────────────────────────────────────────────────────────────── */
.ed-scroll-cue {                               /* thebar.africa pattern: wayfinding, not a third CTA */
  position: absolute; left: 50%; bottom: clamp(20px, 3.4vh, 34px); transform: translateX(-50%);
  display: inline-flex; z-index: 1; color: rgba(245, 244, 240, 0.65);
  animation: ed-scroll-cue-bounce 2.4s ease-in-out infinite; transition: color 0.3s ease;
}
.ed-scroll-cue:hover { color: var(--foreground); }
.ed-scroll-cue:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
@keyframes ed-scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

.ed-hero-locale {
  position: absolute; right: var(--gutter); bottom: clamp(20px, 3.4vh, 34px); z-index: 1;
  display: flex; align-items: center; gap: 16px; color: rgba(245, 244, 240, 0.65);
}
.ed-hero-locale p {
  margin: 0; max-width: none; text-align: right; font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; white-space: nowrap;
}
/* The globe is an external SVG used as a MASK, so CSS owns its colour (currentColor) and the 26 KB file is
   cached instead of inlined into the page. Art: assets/home/globe.svg (Brandon's design, 2026-10-24). */
.ed-hero-globe {
  flex: none; width: 52px; height: 52px; background-color: currentColor; opacity: 0.9;
  -webkit-mask: url('../assets/home/globe.svg') center / contain no-repeat;
          mask: url('../assets/home/globe.svg') center / contain no-repeat;
}


/* §5 ── Ticker ─────────────────────────────────────────────────────────────────────────────────
   Same fx.js ticker; quieter type. Words come from content/site.yaml (services + ticker_extra). */
.atm-ticker { border-color: var(--hairline); padding: 1.05rem 0; }
.atm-ticker-item { font-family: var(--body-font); font-size: 0.68rem; letter-spacing: 0.3em; color: rgba(245, 244, 240, 0.5); }


/* §6 ── Featured work: one lead + supporting ─────────────────────────────────────────────────────
   Metadata shows AT REST (the old overlay only appeared on hover, which touch cannot do). */
.ed-work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(36px, 5vw, 72px); }
.ed-card--lead { grid-column: 1 / 9; grid-row: 1 / 3; }
.ed-card--b { grid-column: 9 / 13; grid-row: 1; }
.ed-card--c { grid-column: 9 / 13; grid-row: 2; }
.ed-card--d, .ed-card--e, .ed-card--f { grid-column: span 4; }
.ed-card { display: flex; flex-direction: column; gap: 16px; color: var(--foreground); }
.ed-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.ed-media { position: relative; overflow: hidden; background: var(--card-bg); aspect-ratio: 3 / 2; }
.ed-card--lead .ed-media { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.ed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform 0.9s var(--ease); }
.ed-card:hover .ed-media img { transform: scale(1.035); }
.ed-meta { position: relative; padding-top: 16px; }
.ed-meta::before, .ed-meta::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; }
.ed-meta::before { background: var(--hairline); }
.ed-meta::after { background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.ed-card:hover .ed-meta::after { transform: scaleX(1); }
.ed-card-title { font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.15; margin: 0 0 6px; transition: color 0.3s ease; }
.ed-card-cat { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.ed-card:hover .ed-card-title { color: var(--accent); }


/* §7 ── What we do ──────────────────────────────────────────────────────────────────────────────
   An ordered list, not cards. Rows are generated from content/site.yaml `services:` (D5 order). */
.ed-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ed-split-lead .ed-title { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-bottom: 32px; }
.ed-service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.ed-service-list li { border-bottom: 1px solid var(--hairline); }
.ed-service {
  display: grid; grid-template-columns: clamp(56px, 6vw, 84px) minmax(0, 1.1fr) minmax(0, 1.4fr) 28px;
  align-items: baseline; gap: 12px clamp(16px, 2.4vw, 36px);
  padding: clamp(22px, 3.2vh, 34px) 0; color: var(--foreground);
}
.ed-service:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.ed-service h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; margin: 0; transition: color 0.35s ease; }
.ed-service p { font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); max-width: 44ch; }
.ed-service-go { justify-self: end; color: var(--text-secondary); transition: transform 0.35s var(--ease), color 0.35s ease; }
.ed-service:hover h3, .ed-service:hover .ed-service-go { color: var(--accent); }
.ed-service:hover .ed-service-go { transform: translateX(4px); }
.ed-service:hover .ed-num { -webkit-text-stroke-color: var(--accent); }

/* The SEO keyword paragraph: spans the full section measure (short + wide, not a tall narrow column;
   Brandon 2026-10-01). style.css's clamp + "Read more" mechanism is reused unchanged. */
.studio-overview { margin: clamp(48px, 8vh, 96px) 0 0; max-width: none; }
.studio-overview p { max-width: none; font-size: 0.9rem; opacity: 1; color: var(--text-secondary); }


/* §8 ── Approach: the site's real four steps ─────────────────────────────────────────────────── */
.ed-approach { border-top: 1px solid var(--hairline); }
.ed-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.ed-steps li { padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px) 0; border-left: 1px solid var(--hairline); }
.ed-steps li:first-child { border-left: 0; padding-left: 0; }
.ed-steps .ed-num { display: block; margin-bottom: 20px; }
.ed-steps h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); margin: 0 0 10px; }
.ed-steps p { font-size: 0.9rem; color: var(--text-secondary); max-width: 26ch; }


/* §9 ── Closing band: flat red ───────────────────────────────────────────────────────────────────
   Absorbs the old "Let's talk pricing" block and the FAQ "Get in touch" footer (one concept, once). */
.ed-close { max-width: none; margin: 0; background: var(--accent); color: var(--foreground); padding: clamp(64px, 11vh, 132px) var(--gutter); }
.ed-close-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.ed-close h2 { font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.0; margin: 0; color: var(--foreground); text-wrap: balance; }
.ed-close-body { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ed-close-body p { font-size: 1rem; color: var(--foreground); }
.ed-close a:not(.cta-button) { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }


/* §10 ── Showreel dialog + player ────────────────────────────────────────────────────────────────
   Native <dialog> (focus trap + Esc + top layer for free), no backdrop-filter. The player bar is built
   and destroyed on each open/close by js/showreel.js; this is only its skin. */
#reelDialog { width: min(1240px, 94vw); padding: 0; border: 0; background: #000; color: var(--foreground); overflow: visible; }
#reelDialog::backdrop { background: rgba(5, 5, 5, 0.94); }
#reelDialog video { display: block; width: 100%; max-height: 82vh; background: #000; }
.ed-reel-close { position: absolute; right: 0; top: -44px; padding: 8px 0; border: 0; background: none; cursor: pointer; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--foreground); }
.ed-reel-close:hover { color: var(--accent); }

.ed-player { display: block; }
.ed-player:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; }
.ed-player:fullscreen video { max-height: calc(100vh - 56px); width: 100%; object-fit: contain; }
.ed-player-bar { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); padding: 12px clamp(14px, 2vw, 20px); background: #000; border-top: 1px solid var(--hairline); }
.ed-pc-play, .ed-pc-mute, .ed-pc-full {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--foreground); transition: color 0.2s ease;
}
.ed-pc-play:hover, .ed-pc-mute:hover, .ed-pc-full:hover { color: var(--accent); }
.ed-pc-play:focus-visible, .ed-pc-mute:focus-visible, .ed-pc-full:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ed-pc-time { flex: none; font-variant-numeric: tabular-nums; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-secondary); white-space: nowrap; }
.ed-pc-scrub { flex: 1 1 auto; padding: 11px 2px; cursor: pointer; touch-action: none; }
.ed-pc-scrub:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.ed-pc-scrub-track { position: relative; height: 2px; background: rgba(245, 244, 240, 0.22); }
.ed-pc-scrub-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--accent); }
.ed-pc-scrub-handle {
  position: absolute; top: 50%; left: 0%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0.9); transition: transform 0.15s ease;
}
.ed-pc-scrub:hover .ed-pc-scrub-handle, .ed-pc-scrub:focus-visible .ed-pc-scrub-handle { transform: translate(-50%, -50%) scale(1.3); }


/* §11 ── Responsive ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ed-split { grid-template-columns: 1fr; }
  .ed-close-inner { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 900px) {
  .ed-hero-locale { display: none; }           /* hero content + scroll cue already own the limited space */
  .ed-card--lead, .ed-card--f { grid-column: 1 / -1; grid-row: auto; }
  .ed-card--lead .ed-media { aspect-ratio: 3 / 2; flex: none; }
  .ed-card--b, .ed-card--c, .ed-card--d, .ed-card--e { grid-column: span 6; grid-row: auto; }
  .ed-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .ed-steps li:nth-child(n+3) { border-top: 1px solid var(--hairline); margin-top: 24px; }
}
@media (max-width: 640px) {
  .ed-hero h1 { font-size: clamp(2.4rem, 12.5vw, 3.4rem); }
  .ed-work { row-gap: 40px; }
  .ed-card--b, .ed-card--c, .ed-card--d, .ed-card--e { grid-column: 1 / -1; }
  .ed-service { grid-template-columns: 44px minmax(0, 1fr) 24px; }
  .ed-service p { grid-column: 2 / 3; }
  .ed-service .ed-num { grid-row: 1; }
  .ed-service-go { grid-row: 1; grid-column: 3; }
  .ed-steps { grid-template-columns: 1fr; }
  .ed-steps li, .ed-steps li:first-child, .ed-steps li:nth-child(3) { border-left: 0; padding: 24px 0; border-top: 1px solid var(--hairline); margin-top: 0; }
  .ed-steps li:first-child { border-top: 0; }
  .ed-steps p { max-width: none; }
  .ed-player-bar { gap: 10px; padding: 10px 12px; }
  .ed-pc-time { font-size: 0.65rem; }
}


/* §12 ── Reduced motion ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ed-scroll-cue { animation: none; }
  .ed-media img, .ed-meta::after, .ed-service-go { transition: none; }
  .ed-card:hover .ed-media img { transform: none; }
}