/* ============================================================
   THE EPIC AGENCY — Design System
   Brand kit by Keely Rust. Fonts: Juliette (display), Grift (sub),
   Libre Baskerville (body).
   ============================================================ */

/* ---- @font-face: Juliette (primary display) ---- */
@font-face {
  font-family: "Juliette";
  src: url("assets/fonts/Juliette-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Juliette";
  src: url("assets/fonts/Juliette-Light-Italic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Juliette";
  src: url("assets/fonts/Juliette-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Juliette";
  src: url("assets/fonts/Juliette-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Juliette";
  src: url("assets/fonts/Juliette-Semibold.ttf") format("truetype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Juliette";
  src: url("assets/fonts/Juliette-Semibold-Italic.ttf") format("truetype");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
}

/* ---- @font-face: Grift (variable, all weights in one file) ---- */
@font-face {
  font-family: "Grift";
  src: url("assets/fonts/Grift-VF.ttf") format("truetype-variations"),
       url("assets/fonts/Grift-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color tokens (from EpicAgency_BrandGuidelinesSheet) ---- */
  --midnight:   #214250;  /* primary — deep teal */
  --midnight-2: #18323e;  /* deeper shade for hovers */
  --alabaster:  #fef8f0;  /* primary — warm off-white */
  --parchment:  #ece7d9;  /* secondary — cream */
  --caviar:     #020a10;  /* secondary — near-black */
  --silk:       #d0c8b7;  /* secondary — warm taupe */

  /* ---- Semantic colors ---- */
  --bg:           var(--alabaster);
  --bg-soft:      var(--parchment);
  --bg-deep:      var(--midnight);
  --bg-deepest:   var(--caviar);
  --ink:          var(--caviar);
  --ink-soft:     #4a5560;
  --ink-on-dark:  var(--alabaster);
  --rule:         var(--silk);

  /* ---- Typography ----
     Real brand fonts: Juliette (display, hosted), Grift (sub, hosted variable),
     Libre Baskerville (body, free Google Font). */
  --font-display: "Juliette", "Cormorant Garamond", Georgia, serif;
  --font-sub:     "Grift", "Jost", "Inter", system-ui, sans-serif;
  --font-body:    "Libre Baskerville", Georgia, "Times New Roman", serif;

  /* ---- Scale ---- */
  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.20vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.30rem);
  --step-2:  clamp(1.40rem, 1.25rem + 0.75vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.5vw, 2.55rem);
  --step-4:  clamp(2.20rem, 1.65rem + 2.7vw, 3.75rem);
  --step-5:  clamp(2.85rem, 1.85rem + 4.8vw, 5.50rem);
  --step-6:  clamp(3.50rem, 2.0rem + 7vw, 7.50rem);
  --step-7:  clamp(4.5rem, 2.5rem + 10vw, 10rem);

  /* ---- Layout ---- */
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(2.5rem, 5vw, 5rem);  /* tightened — was 4-8rem */
  --max-w: 1380px;
  --radius: 2px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
a:hover { opacity: .68; }
button { font: inherit; cursor: pointer; }
hr { border: 0; height: 1px; background: var(--rule); margin: 0; }

/* ---- Type styles ---- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  color: var(--midnight);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
h2 { font-size: var(--step-4); line-height: 1.08; }
h3 { font-size: var(--step-2); line-height: 1.2; }
.italic { font-style: italic; font-weight: 350; }

.eyebrow {
  font-family: var(--font-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: var(--step--1);
  color: var(--midnight);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow--light { color: var(--alabaster); opacity: 0.7; }

.lede {
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 1.1rem 1.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--midnight);
  background: var(--midnight);
  color: var(--alabaster);
  transition: all .25s ease;
  cursor: pointer;
}
.btn:hover { background: var(--caviar); border-color: var(--caviar); opacity: 1; }
.btn--ghost { background: transparent; color: var(--midnight); }
.btn--ghost:hover { background: var(--midnight); color: var(--alabaster); opacity: 1; }
.btn--ghost-light { background: transparent; color: var(--alabaster); border-color: var(--alabaster); }
.btn--ghost-light:hover { background: var(--alabaster); color: var(--midnight); opacity: 1; }
.btn--light { background: var(--alabaster); color: var(--midnight); border-color: var(--alabaster); }
.btn--light:hover { background: var(--parchment); border-color: var(--parchment); opacity: 1; }
.btn__arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---- Container ---- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   WORDMARK — "EPIC AGENCY" set in the real Juliette serif
   ============================================================ */
.wordmark {
  font-family: "Juliette", "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.45rem, 1.1vw + 1.15rem, 1.85rem);
  letter-spacing: 0.05em;
  color: currentColor;
  line-height: 1;
  display: inline-block;
}
.wordmark--lg {
  font-size: clamp(2.1rem, 1.7vw + 1.5rem, 2.8rem);
}
.wordmark--secondary {
  /* "EPIC ✦ AGENCY" — letter-spaced sans variant */
  font-family: var(--font-sub);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: var(--step-0);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.wordmark--secondary img { width: 0.85em; height: 0.85em; }

/* ============================================================
   NAVIGATION — Teal with Alabaster wordmark
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--midnight);
  color: var(--alabaster);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.4rem;
  gap: 1rem;
}
.nav__brand {
  color: var(--alabaster);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.nav__brand .nav__brand-star { width: 16px; height: 16px; }
.nav__logo {
  height: 38px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .nav__logo { height: 44px; }
}
.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.8rem);
}
.nav__links a {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--alabaster);
  position: relative;
  padding-block: 0.3rem;
}
.nav__links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--alabaster);
  transition: width .3s ease;
}
.nav__links a:hover { opacity: 0.85; }
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.75rem 1.35rem;
  border: 1px solid var(--alabaster);
  border-radius: var(--radius);
  color: var(--alabaster);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: all .25s ease;
}
.nav__cta:hover { background: var(--alabaster); color: var(--midnight); opacity: 1; }
.nav__cta-star { width: 12px; height: 12px; }

.nav__toggle {
  border: 0;
  background: transparent;
  color: var(--alabaster);
  display: grid;
  place-items: center;
  padding: 6px;
}
.nav__toggle svg { width: 26px; height: 26px; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}
@media (max-width: 899px) {
  .nav__cta { display: none; }
}

/* ============================================================
   HERO — Texture-dominant with editorial layering
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--parchment);
  isolation: isolate;
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--silk);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(254,248,240,0.18) 0%, rgba(208,200,183,0.10) 100%);
  z-index: -1;
}
.hero__watermark {
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-7);
  color: var(--midnight);
  opacity: 0.05;
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}
.hero__corner {
  position: absolute;
  font-family: var(--font-sub);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--midnight);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.hero__corner--tl { top: 1.5rem; left: var(--gutter); }
.hero__corner--tr { top: 1.5rem; right: var(--gutter); }
.hero__corner-star { width: 10px; height: 10px; }
@media (max-width: 720px) {
  .hero__corner { display: none; }
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  z-index: 1;
}
@media (min-width: 980px) {
  /* Reel takes ~62% of the width — cinematic, creator-forward */
  .hero__inner { grid-template-columns: minmax(280px, 1fr) 1.7fr; }
}
.hero__copy { max-width: 520px; }
.hero__eyebrow {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--midnight);
  opacity: 0.92;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.hero__eyebrow img { width: 14px; height: 14px; }
.hero__title {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--midnight);
  margin: 0 0 0.9rem;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--caviar);
}
/* Subhead uses Grift caps for typographic contrast against the Juliette title */
.hero__sub {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.65rem + 0.3vw, 0.88rem);
  color: var(--midnight);
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.hero__sub::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}
/* Lede uses Libre Baskerville (body serif) for a third typographic register */
.hero__lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.05rem);
  line-height: 1.55;
  color: var(--midnight);
  opacity: 1;
  max-width: 50ch;
  margin: 0 0 1.75rem;
}
.hero__lede strong {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--caviar);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ============================================================
   HERO REELS — Horizontally-scrolling vertical reel tiles
   that fill the hero column vertically. Tile nearest the
   center scales up via JS for the "spotlight" effect.
   ============================================================ */
.hero__reels {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* Fade edges so tiles flow off rather than clipping */
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hero__reels-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  align-items: center;
  animation: scroll-x 70s linear infinite;
  will-change: transform;
}
.hero:hover .hero__reels-track { animation-play-state: paused; }

.reel-tile--hero {
  /* Big but less tall — fits the viewport without overflowing */
  width: clamp(240px, 28vw, 360px);
  aspect-ratio: 4/5;
  border-radius: 10px;
  box-shadow: 0 30px 50px -22px rgba(2,10,16,0.45);
  transform: scale(0.88);
  transition: transform .6s cubic-bezier(.2,.8,.25,1),
              box-shadow .6s ease,
              opacity .5s ease;
  opacity: 0.7;
  transform-origin: center center;
}
/* JS toggles .is-center on whichever tile is closest to the viewport center */
.reel-tile--hero.is-center {
  transform: scale(1.06);
  opacity: 1;
  box-shadow: 0 50px 90px -28px rgba(2,10,16,0.55), 0 0 0 1px rgba(254,248,240,0.15);
  z-index: 2;
}

/* (Legacy single-video hero reel player removed — replaced by .hero__reels marquee above.) */

/* ============================================================
   BRAND MARQUEE — Scrolling brand logo strip
   ============================================================ */
.brands {
  background: var(--alabaster);
  border-top: 1px solid var(--silk);
  border-bottom: 1px solid var(--silk);
  padding-block: 1.6rem;
  overflow: hidden;
  position: relative;
}
.brands__label {
  text-align: center;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--midnight);
  opacity: 0.6;
  margin-bottom: 1.5rem;
}
.brands__track {
  display: flex;
  gap: 1.5rem;
  animation: scroll-x 90s linear infinite;
  white-space: nowrap;
  width: max-content;
  align-items: center;
}
.brands:hover .brands__track { animation-play-state: paused; }
/* Each marquee item is a fixed bounding box — logos with wildly different
   aspect ratios (wide wordmarks, square box logos, tall stacked logos)
   all sit visually balanced inside. */
.brands__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 56px;
  flex-shrink: 0;
}
.brands__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity .25s ease;
}
.brands__item:hover img { opacity: 1; }
@media (min-width: 768px) {
  .brands__item { width: 150px; height: 64px; }
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   REEL WALL — Horizontal scrolling row of vertical video tiles
   Each tile is a creator reel; auto-scrolls; clickable to bio.
   In production, tiles come from a CMS 'reelWall' array.
   ============================================================ */
.reels {
  background: var(--bg);
  padding-block: clamp(3.5rem, 6vw, 6rem) clamp(3.5rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}
.reels__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-inline: var(--gutter);
  max-width: var(--max-w);
  margin-inline: auto;
}
.reels__head h2 { font-size: var(--step-3); max-width: 16ch; margin: 0.5rem 0 0; }
.reels__head h2 em { color: var(--midnight); opacity: 0.55; }
.reels__head-meta {
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: var(--step-0);
  color: var(--ink-soft);
  text-align: right;
  max-width: 38ch;
}

/* Marquee track of tiles — auto-scroll left, no scrollbar */
.reels__track-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.reels__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: scroll-x 80s linear infinite;
}
.reels:hover .reels__track { animation-play-state: paused; }

/* Each tile is a vertical "phone screen" sized reel */
.reel-tile {
  position: relative;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 9/14;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 36px -14px rgba(2,10,16,0.35);
  background: var(--caviar);
  flex-shrink: 0;
  isolation: isolate;
  cursor: pointer;
  transition: transform .4s ease;
}
.reel-tile:hover { transform: translateY(-4px); opacity: 1; }

.reel-tile[data-grad="a"] { background: linear-gradient(170deg, #1a3340 0%, #0c1a22 100%); }
.reel-tile[data-grad="b"] { background: linear-gradient(150deg, #1f3d4a 0%, #0e1f28 100%); }
.reel-tile[data-grad="c"] { background: linear-gradient(190deg, #23434f 0%, #0a1820 100%); }
.reel-tile[data-grad="d"] { background: linear-gradient(160deg, #1c3340 0%, #112229 100%); }
.reel-tile[data-grad="e"] { background: linear-gradient(140deg, #1f3d4a 0%, #0c1a22 100%); }
.reel-tile[data-grad="f"] { background: linear-gradient(180deg, #24465a 0%, #0e1f28 100%); }

.reel-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.10;
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
}
.reel-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(2,10,16,0.75) 100%);
  z-index: 0;
  pointer-events: none;
}

.reel-tile__monogram {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--alabaster);
  opacity: 0.18;
  line-height: 1;
  z-index: 1;
  letter-spacing: -0.02em;
}
.reel-tile__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(254,248,240,0.92);
  color: var(--midnight);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px rgba(2,10,16,0.4);
  z-index: 2;
  pointer-events: none;
}
.reel-tile__play svg { width: 18px; height: 18px; margin-left: 2px; }
.reel-tile__cap {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  color: var(--alabaster);
  z-index: 2;
}
.reel-tile__cap strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.18;
  text-shadow: 0 2px 8px rgba(2,10,16,0.4);
}
.reel-tile__cap strong .x {
  font-style: italic;
  font-weight: 300;
  opacity: 0.7;
  margin: 0 0.15em;
}
.reel-tile__cap span {
  font-family: var(--font-sub);
  font-size: 0.7rem;
  opacity: 0.75;
  margin-top: 0.15rem;
  display: inline-block;
}

/* Real video tile — video fills the tile, gradient + caption sit on top */
.reel-tile--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--caviar);
}
.reel-tile--video::before,
.reel-tile--video::after { z-index: 1; }
.reel-tile--video::before { opacity: 0; }  /* texture overlay not needed over video */
.reel-tile--video .reel-tile__cap { z-index: 3; }
/* monogram + play button hidden when a real video plays */
.reel-tile--video .reel-tile__monogram,
.reel-tile--video .reel-tile__play { display: none; }

/* ============================================================
   APPROACH — 3 pillars on Midnight + star pattern (brand moment)
   ============================================================ */
.approach {
  padding-block: var(--section-y);
  background: var(--midnight);
  color: var(--alabaster);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.approach::before {
  /* Warm texture overlay */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.08;
  mix-blend-mode: screen;
  z-index: -2;
  pointer-events: none;
}
.approach::after {
  /* Tiled star pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/mark-alabaster.svg");
  background-size: 130px 130px;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.04;
  z-index: -1;
  pointer-events: none;
}
.approach > .wrap { position: relative; z-index: 1; }
.approach__head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}
.approach__head h2 { color: var(--alabaster); max-width: 22ch; }
.approach__head h2 em { color: var(--silk); font-style: italic; }
.approach__head .eyebrow { color: var(--alabaster); opacity: 1; font-weight: 600; }
.approach__head .lede { color: rgba(254, 248, 240, 0.95); font-weight: 500; }
.approach__head .lede strong { color: var(--alabaster); font-weight: 700; }
.approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 760px) {
  .approach__grid { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  /* Parchment with a subtle Epic texture overlay — softer than alabaster
     against the Midnight section, and uses the brand's own texture. */
  background: var(--parchment);
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  padding: clamp(2rem, 3.5vw, 3rem);
  border-radius: var(--radius);
  display: grid;
  gap: 1.3rem;
  align-content: start;
  border: 1px solid transparent;
  box-shadow: 0 18px 36px -18px rgba(2,10,16,0.45);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}
.pillar::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 14px;
  height: 14px;
  background: url("assets/logo/mark-midnight.svg") no-repeat center / contain;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.pillar:hover {
  border-color: var(--midnight);
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -20px rgba(2,10,16,0.55);
}
.pillar:hover::after {
  opacity: 0.6;
  transform: rotate(45deg);
}
.pillar__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: var(--step-3);
  color: var(--midnight);
  opacity: 0.55;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.pillar__num small {
  font-family: var(--font-sub);
  font-style: normal;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--midnight);
  opacity: 0.7;
}
.pillar__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--midnight);
  line-height: 1.15;
  margin: 0;
}
.pillar__body {
  font-family: var(--font-sub);
  font-weight: 450;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.pillar__body strong {
  font-weight: 700;
  color: var(--midnight);
}

/* ============================================================
   ROSTER — equal talent grid
   ============================================================ */
.roster {
  padding-block: var(--section-y);
  background: var(--parchment);
  position: relative;
  border-top: 1px solid var(--silk);
}
.roster__head {
  display: grid;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 800px) {
  .roster__head { grid-template-columns: 2fr 1fr; }
}
.roster__head h2 { max-width: 18ch; margin-bottom: 0.85rem; }
.roster__head-lede {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--midnight);
  margin: 0;
  max-width: 52ch;
  line-height: 1.5;
}
.roster__head-lede strong {
  font-weight: 700;
  color: var(--caviar);
}
.roster__head-meta { text-align: left; }
@media (min-width: 800px) {
  .roster__head-meta { text-align: right; align-self: end; }
}
.roster__head-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 800px) {
  .roster__head-buttons { justify-content: flex-end; }
}

/* Equal-sized grid — every creator treated the same */
.roster__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 600px) {
  .roster__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .roster__grid { grid-template-columns: repeat(3, 1fr); }
}
.card {
  position: relative;
  background: var(--alabaster);
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  align-content: end;
  padding: 1.6rem;
  cursor: pointer;
  transition: transform .4s ease;
  isolation: isolate;
}
.card:hover { transform: translateY(-4px); opacity: 1; }
.card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(160deg, var(--silk) 0%, var(--parchment) 70%, var(--alabaster) 100%);
}
.card__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.25;
  mix-blend-mode: multiply;
}
.card__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgba(2,10,16,0.85) 100%);
}
.card__monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: -1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(4rem, 12vw, 7rem);
  color: var(--midnight);
  opacity: 0.22;
  font-weight: 350;
  letter-spacing: -0.02em;
}

/* Real photo cards — image fills the card, gradient + caption sit on top */
.card__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;  /* top-anchor faces */
  transition: transform .8s ease;
}
.card--photo .card__bg::after { opacity: 0; }  /* drop texture overlay over real photos */
.card--photo:hover .card__photo { transform: scale(1.04); }
/* Slightly stronger bottom darken so text reads over photography */
.card--photo .card__overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(2,10,16,0.45) 60%, rgba(2,10,16,0.92) 100%);
}
.card__star {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 20px;
  height: 20px;
  opacity: 0.9;
  z-index: 1;
}
.card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  color: var(--alabaster);
  margin: 0;
  line-height: 1.05;
}
.card__handle {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: var(--step--1);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--alabaster);
  opacity: 0.78;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.card__handle::before {
  content: "";
  width: 7px; height: 7px;
  background: url("assets/logo/mark-alabaster.svg") no-repeat center / contain;
  opacity: 0.7;
}
.card__tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tag {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.35rem 0.7rem;
  background: rgba(254, 248, 240, 0.14);
  color: var(--alabaster);
  border: 1px solid rgba(254, 248, 240, 0.28);
  border-radius: 999px;
}

/* Social icons inside talent cards (talent page) */
.card__socials {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.45rem;
}
.card__socials a {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(254, 248, 240, 0.18);
  color: var(--alabaster);
  align-items: center;
  justify-content: center;
  transition: background .25s ease, transform .2s ease;
  border: 1px solid rgba(254, 248, 240, 0.28);
}
.card__socials a:hover {
  background: rgba(254, 248, 240, 0.38);
  transform: translateY(-1px);
  opacity: 1;
}
.card__socials svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Roster CTA block — invitation to see more or get in touch */
.roster__cta {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  text-align: center;
  background: var(--alabaster);
  border: 1px solid var(--silk);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.roster__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  z-index: -1;
}
.roster__cta-star {
  width: 28px;
  margin-bottom: 1rem;
  display: inline-block;
}
.roster__cta-eyebrow {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--midnight);
  opacity: 0.65;
  margin-bottom: 1rem;
  display: block;
}
.roster__cta-title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(2rem, 1.5vw + 1.4rem, 3rem);
  line-height: 1.05;
  color: var(--midnight);
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}
.roster__cta-title em { font-style: italic; }
.roster__cta-sub {
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto 2.25rem;
}
.roster__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* ============================================================
   PRESS / FEATURED IN — slim single-row band
   ============================================================ */
.press {
  background: var(--alabaster);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--silk);
  border-bottom: 1px solid var(--silk);
}
.press__head {
  text-align: center;
  margin-bottom: 1rem;
}
.press__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.press__item {
  /* Stacked: logo on top, credit text centered below */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  opacity: 0.85;
  transition: opacity .25s ease;
}
.press__item:hover { opacity: 1; }
.press__item small {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--midnight);
  opacity: 0.8;
  max-width: 22ch;
  line-height: 1.35;
}
/* Logo treatment — taller now (more breathing room since text is below, not beside) */
.press__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  max-width: 110px;
}
.press__logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Per-logo size overrides where natural proportions need a tweak */
.press__logo--lg { height: 42px; max-width: 130px; }

/* ============================================================
   FOUNDERS VOICE — quote pull
   ============================================================ */
.voice {
  padding-block: clamp(2rem, 3.5vw, 3rem);
  background: var(--parchment);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.voice::before {
  /* Warm texture overlay for tonal richness */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.20;
  mix-blend-mode: multiply;
  z-index: -2;
  pointer-events: none;
}
.voice::after {
  /* Tiled star pattern — midnight stars on parchment (light version of the footer treatment) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/mark-midnight.svg");
  background-size: 130px 130px;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}
.voice > .wrap { position: relative; z-index: 1; }
.voice__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* Visual takes less space; copy gets the room */
  .voice__inner { grid-template-columns: minmax(0, 0.55fr) 1.2fr; }
}
/* Frame wrapper — big dramatic star stamp accent */
.voice__frame {
  position: relative;
  max-width: 320px;
  width: 100%;
  margin-inline: auto;
}
.voice__visual {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  background: var(--parchment);
  border: 4px solid var(--midnight);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 36px -16px rgba(2,10,16,0.45);
}
/* Big midnight star — extends out the bottom-right like an editorial stamp,
   matching the dramatic placement Anna uses in her IG posts */
.voice__big-star {
  position: absolute;
  width: 140px;
  height: 140px;
  bottom: -45px;
  right: -45px;
  z-index: 5;
  filter: drop-shadow(0 10px 24px rgba(2,10,16,0.3));
  transform: rotate(8deg);
  pointer-events: none;
}
.voice__visual::before {
  /* Texture overlay only shows if no .voice__visual-photo is present */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.5;
  z-index: 0;
}
.voice__visual:has(.voice__visual-photo)::before { display: none; }
.voice__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 50%, rgba(2,10,16,0.55) 100%);
  z-index: 1;
}
.voice__visual-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  z-index: 0;
}
.voice__visual-stamp {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.voice__visual-stamp strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  color: var(--alabaster);
  letter-spacing: -0.01em;
}
.voice__visual-stamp span {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--alabaster);
  opacity: 0.7;
}
.voice__visual-star {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 22px;
  z-index: 2;
  opacity: 0.85;
}
.voice__copy { max-width: 580px; }
.voice__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.85rem);
  line-height: 1.3;
  color: var(--midnight);
  letter-spacing: -0.01em;
  margin: 0.75rem 0 1.25rem;
  position: relative;
}
.voice__bio {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.voice__bio strong {
  font-weight: 700;
  color: var(--midnight);
}

.voice__quote::before {
  content: "\201C";
  position: absolute;
  left: -0.5em;
  top: -0.3em;
  font-size: 1.5em;
  color: var(--midnight);
  opacity: 0.35;
  font-style: italic;
  font-weight: 300;
}
.voice__attr {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--midnight);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.voice__attr-star { width: 12px; height: 12px; }

/* ============================================================
   INQUIRE — Dual CTA for brands + creators (compact)
   ============================================================ */
.inquire {
  background: var(--bg);
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  position: relative;
  border-top: 1px solid var(--silk);
}
.inquire__head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}
.inquire__head h2 {
  max-width: 22ch;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  line-height: 1.1;
}
.inquire__head .lede {
  font-size: var(--step-0);
  margin: 0;
}
.inquire__email {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--midnight);
  margin: 0.3rem 0 0;
  opacity: 0.85;
}
.inquire__email a {
  color: var(--midnight);
  border-bottom: 1px solid var(--midnight);
  padding-bottom: 1px;
  transition: opacity .25s ease;
}
.inquire__email a:hover { opacity: 0.65; }
.inquire__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 800px) {
  .inquire__grid { grid-template-columns: 1fr 1fr; }
}
.inquire-card {
  position: relative;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  transition: transform .3s ease;
}
.inquire-card:hover { transform: translateY(-3px); }

/* Variant A — Brands (dark/midnight, with the brand-pattern treatment) */
.inquire-card--brands {
  background: var(--midnight);
  color: var(--alabaster);
}
.inquire-card--brands::before {
  /* Warm texture overlay */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.10;
  mix-blend-mode: screen;
  z-index: -2;
}
.inquire-card--brands::after {
  /* Tiled star pattern — same treatment as the footer */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/mark-alabaster.svg");
  background-size: 130px 130px;
  background-repeat: repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

/* Variant B — Creators (light/parchment) */
.inquire-card--creators {
  background: var(--parchment);
  color: var(--midnight);
}
.inquire-card--creators::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.55;
  mix-blend-mode: multiply;
  z-index: -1;
}

.inquire-card__num {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid currentColor;
  margin-bottom: 0.4rem;
}
.inquire-card--brands .inquire-card__num { color: rgba(254,248,240,0.35); }
.inquire-card--creators .inquire-card__num { color: rgba(33,66,80,0.3); }

.inquire-card__eyebrow {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.78rem + 0.4vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  line-height: 1;
}
.inquire-card--brands .inquire-card__eyebrow { color: var(--alabaster); opacity: 1; }
.inquire-card--creators .inquire-card__eyebrow { color: var(--midnight); opacity: 1; }

.inquire-card__star {
  width: 22px;
  height: 22px;
  opacity: 1;
  flex-shrink: 0;
}

.inquire-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 0.85rem + 0.9vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0;
}
.inquire-card--brands .inquire-card__title { color: var(--alabaster); }
.inquire-card--creators .inquire-card__title { color: var(--midnight); }

.inquire-card__prompt {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.55;
  margin: 0;
}
.inquire-card--brands .inquire-card__prompt { color: rgba(254,248,240,0.78); }
.inquire-card--creators .inquire-card__prompt { color: var(--ink-soft); }

.inquire-card__cta {
  margin-top: 0.5rem;
  align-self: start;
  /* Bigger, more substantial — these are the section's whole purpose */
  font-size: 0.8rem;
  padding: 0.95rem 1.6rem;
  letter-spacing: 0.24em;
  font-weight: 600;
  border-width: 1.5px;
  box-shadow: 0 8px 20px -8px rgba(2,10,16,0.35);
}
.inquire-card__cta .btn__arrow {
  font-size: 1.05em;
  line-height: 1;
}
.inquire-card__cta:hover {
  box-shadow: 0 14px 28px -10px rgba(2,10,16,0.45);
  transform: translateY(-1px);
}

/* ============================================================
   CTA STRIP (legacy class kept for backwards compat) — gold-foil moment
   ============================================================ */
.cta {
  background: var(--midnight);
  color: var(--alabaster);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  opacity: 0.10;
  mix-blend-mode: screen;
}
.cta__inner { position: relative; display: grid; gap: 1.25rem; justify-items: center; }
.cta__star { width: 32px; filter: drop-shadow(0 8px 24px rgba(170,130,60,0.4)); }
.cta__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: var(--step-2);
  color: var(--silk);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================================
   FOOTER — Midnight teal with brand-pattern layers:
   1. Solid Midnight base
   2. Epic texture at low opacity (warm tonal variation)
   3. Tiled star mark at very low opacity (brand pattern)
   ============================================================ */
.footer {
  position: relative;
  background: var(--midnight);
  color: var(--alabaster);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  overflow: hidden;
  isolation: isolate;
}
.footer::before {
  /* Warm texture overlay — adds organic tonal variation */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  mix-blend-mode: screen;
  z-index: -2;
  pointer-events: none;
}
.footer::after {
  /* Tiled star mark — the "brand pattern" */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/mark-alabaster.svg");
  background-size: 130px 130px;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.04;
  z-index: -1;
  pointer-events: none;
}
.footer > .wrap { position: relative; z-index: 1; }
.footer__top {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(254,248,240,0.13);
}
@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr; }
}
.footer__brand {
  color: var(--alabaster);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.footer__lockup {
  width: clamp(180px, 14vw, 220px);
  height: auto;
  display: block;
}
.footer__col h4 {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--silk);
  margin: 0 0 1.25rem;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.footer__col a {
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: var(--step-0);
  color: var(--alabaster);
}
.footer__col a:hover { opacity: 0.7; }
.footer__news {
  display: flex;
  gap: 0.5rem;
  max-width: 360px;
  margin-top: 0.5rem;
}
.footer__news input {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(254,248,240,0.25);
  color: var(--alabaster);
  padding: 0.85rem 1rem;
  font-family: var(--font-sub);
  font-size: var(--step--1);
  border-radius: var(--radius);
}
.footer__news input::placeholder { color: rgba(254,248,240,0.45); }
.footer__news input:focus { border-color: var(--alabaster); outline: 0; }
.footer__news button {
  background: var(--alabaster);
  color: var(--midnight);
  border: 0;
  padding: 0 1.2rem;
  font-family: var(--font-sub);
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  border-radius: var(--radius);
  transition: opacity .25s ease;
}
.footer__news button:hover { opacity: 0.85; }
.footer__socials {
  display: flex; gap: 1.25rem; margin-top: 1.5rem;
  font-family: var(--font-sub);
  font-size: var(--step--1);
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  font-family: var(--font-sub);
  font-weight: 300;
  font-size: var(--step--1);
  color: rgba(254,248,240,0.55);
}

/* ============================================================
   PAGE HEADER — for sub-pages like /talent (lighter than hero)
   ============================================================ */
.page-header {
  position: relative;
  background: var(--parchment);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--silk);
}
.page-header::before {
  /* Warm texture for tonal richness */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/texture/epic-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  mix-blend-mode: multiply;
  z-index: -2;
  pointer-events: none;
}
.page-header::after {
  /* Brand star pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/logo/mark-midnight.svg");
  background-size: 130px 130px;
  background-repeat: repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}
.page-header__inner {
  display: grid;
  gap: 1rem;
  text-align: center;
  justify-items: center;
}
.page-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--midnight);
  margin: 0;
}
.page-header__title em {
  font-style: italic;
  font-weight: 350;
  color: var(--caviar);
}
.page-header__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--midnight);
  max-width: 60ch;
  margin: 0;
}
.page-header__sub strong { font-weight: 700; }

/* ============================================================
   TALENT PAGE — Filter chips + full grid
   ============================================================ */
.talent-page {
  background: var(--bg);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter-chip {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--midnight);
  border-radius: 999px;
  background: transparent;
  color: var(--midnight);
  cursor: pointer;
  transition: all .25s ease;
}
.filter-chip:hover { background: rgba(33,66,80,0.08); }
.filter-chip.is-active {
  background: var(--midnight);
  color: var(--alabaster);
}

/* Full talent grid */
.talent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 600px) {
  .talent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .talent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .talent-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Filter hide/show */
.card.is-hidden { display: none; }

/* Music divider (or other group dividers) — full-width row in the grid */
.grid-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.25rem;
}
.grid-divider span {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem);
  color: var(--midnight);
  letter-spacing: -0.005em;
  opacity: 0.82;
}
.grid-divider img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.grid-divider.is-hidden { display: none; }
.talent-grid__count {
  margin-top: clamp(2rem, 3vw, 2.5rem);
  text-align: center;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--midnight);
  opacity: 0.7;
}

/* ============================================================
   PROTOTYPE NOTE
   ============================================================ */
.proto-note {
  background: var(--midnight);
  color: var(--alabaster);
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 0.74rem;
  text-align: center;
  padding: 0.6rem 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--silk);
}
.proto-note strong { color: var(--silk); font-weight: 700; }