/* ==========================================================================
   SECTIONS — hero, about, the three media galleries, brands, testimonials,
   contact, and the video lightbox.
   ========================================================================== */

/* ==========================================================================
   HERO

   The name is set at --fs-display, which tops out at 11rem, and the portrait
   sits BEHIND it on desktop so the type crosses the shoulder the way the
   reference site does. On narrow screens they stack instead — overlapping a
   400px-wide portrait with 3rem type just buries the face.
   ========================================================================== */
.hero {
  position: relative;
  /* The nav is sticky and in-flow, so the hero only needs the remainder. */
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: var(--sp-8) var(--sp-9);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: var(--rule-width);
  background: var(--rule-color-gold);
  max-width: 180px;
}

.hero__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  margin: 0;
  /* Long single words at display size must never push the page sideways. */
  overflow-wrap: break-word;
}

/* The second line sits in rust, which is the one place the accent is used
   decoratively — it is the brand signature, not a control. */
.hero__name em {
  display: block;
  font-style: normal;
  color: var(--accent);
}

.hero__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: 34ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }

.hero__portrait {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
  aspect-ratio: 4 / 5;
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A warm wash over the portrait so it sits in the palette instead of next
   to it. Multiply keeps the shadows charcoal and lets the gold hit the
   highlights only. */
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(198, 160, 89, 0.10), rgba(26, 25, 23, 0.55));
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--sp-8);
  }
  .hero__copy { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
  .hero__portrait { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 4; }
  /* Pull the type over the portrait's left edge. */
  .hero__name { margin-right: -12%; }
}

/* --- Scroll cue ---------------------------------------------------------- */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero__cue-line {
  display: block;
  width: 48px;
  height: var(--rule-width);
  background: var(--rule-color-gold);
  transform-origin: left;
  animation: cue-pulse 2.6s var(--ease) infinite;
}

@keyframes cue-pulse {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* ==========================================================================
   SECTION HEADS — shared by every band below the hero.
   ========================================================================== */
.sec-head {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-7);
}

.sec-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.sec-head__intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--sp-8);
  }
  .sec-head__label { grid-column: 1 / -1; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  gap: var(--sp-7);
}

.about__body { display: grid; gap: var(--sp-5); max-width: var(--measure); }
.about__body p { color: var(--text-muted); }

/* The first paragraph carries the voice, so it is set larger and in the
   serif — the same treatment as the hero tagline. */
.about__body p:first-child {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text);
}

.about__portrait {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
  aspect-ratio: 4 / 5;
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sp-9); align-items: start; }
}

/* --- Stat row ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--rule);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--accent-quiet);
}

.stat__label {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==========================================================================
   MEDIA GRID — the shared gallery used by UGC, Acting and Other Media.

   The tile aspect ratio is a data attribute on the grid, not a separate
   class per section: UGC is vertical 9:16, Acting and Other Media are
   landscape 16:9, and a section can be switched by editing one attribute.
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.grid[data-ratio="9-16"] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid[data-ratio="16-9"] { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.tile {
  position: relative;
  display: block;
  width: 100%;
  border: var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
  text-align: left;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.tile:hover { border-color: var(--rule-color-gold); transform: translateY(-3px); }

.tile__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-pressed);
}

.grid[data-ratio="9-16"] .tile__frame { aspect-ratio: 9 / 16; }
.grid[data-ratio="16-9"] .tile__frame { aspect-ratio: 16 / 9; }
.grid[data-ratio="1-1"]  .tile__frame { aspect-ratio: 1 / 1; }

.tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease);
}
.tile:hover .tile__img { transform: scale(1.04); }

/* Shown when a tile has no poster image yet, so a fresh install never renders
   a broken-image icon in the middle of the portfolio. */
.tile__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  justify-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--stripe) 0 8px,
      transparent 8px 16px),
    var(--bg-pressed);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.tile__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(26, 25, 23, 0.62);
  border: var(--rule-width) solid var(--c-cream-30);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tile:hover .tile__play { background: var(--accent); border-color: var(--accent); }
.tile__play svg { width: 18px; height: 18px; fill: var(--c-cream); translate: 2px 0; }

.tile__body {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border-top: var(--rule);
}

.tile__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.tile__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* A corner flag: "Paid Ad", "Featured", whatever the admin sets. */
.tile__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-gold);
  color: var(--c-charcoal);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Filter pills -------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-6);
}

.filter {
  padding: var(--sp-2) var(--sp-4);
  border: var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--rule-color-strong); }
.filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--c-cream);
}

/* --- Empty state --------------------------------------------------------- */
.empty {
  padding: var(--sp-8) var(--sp-5);
  border: var(--rule-width) dashed var(--rule-color);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* ==========================================================================
   ACTING — credits table alongside the reel grid.
   ========================================================================== */
.credits { margin-top: var(--sp-8); border-top: var(--rule); }

.credit {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: var(--rule);
}

.credit__title { font-weight: var(--fw-medium); letter-spacing: var(--tr-tight); }

.credit__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.credit__year { color: var(--accent-quiet); }

@media (min-width: 720px) {
  .credit {
    grid-template-columns: 6rem minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--sp-5);
  }
}

/* ==========================================================================
   BRANDS — the logo wall.

   Logos arrive at wildly different sizes and colours. Rather than ask for
   them to be prepared, they are dropped to greyscale and given one fixed
   box height, so a mixed bag still reads as a single row.
   ========================================================================== */
.brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--rule-width);
  background: var(--rule-color);
  border: var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.brand {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: var(--sp-5);
  background: var(--bg);
  transition: background var(--dur-base) var(--ease);
}
.brand:hover { background: var(--bg-raised); }

.brand img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(0.85);
  opacity: 0.62;
  transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.brand:hover img { filter: none; opacity: 1; }

/* A brand with no logo file falls back to its name set in the mono face. */
.brand__name {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.quote {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--sp-6);
  border: var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}

.quote__mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--c-gold-40);
}

.quote__text {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.quote__who {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-quiet);
}

/* ==========================================================================
   RATES
   ========================================================================== */
.rates {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.rate {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6);
  border: var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  transition: border-color var(--dur-base) var(--ease);
}
.rate:hover { border-color: var(--rule-color-gold); }

.rate__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
}

.rate__price {
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  color: var(--accent-quiet);
}

.rate__list { display: grid; gap: var(--sp-2); }

.rate__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.rate__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: var(--rule-width);
  background: var(--c-gold);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid { display: grid; gap: var(--sp-8); }

.contact__form { display: grid; gap: var(--sp-5); }

.contact__aside { display: grid; gap: var(--sp-5); align-content: start; }

.contact__direct {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.contact__direct a { color: var(--accent-quiet); border-bottom: var(--rule-gold); }

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--sp-9); }
}

/* ==========================================================================
   LIGHTBOX — the video player overlay.

   One dialog serves every tile on the page: opening it swaps the source
   rather than building a new player, so only one video element ever exists
   and nothing can be left playing behind the scenes.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(11, 10, 9, 0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__stage {
  position: relative;
  width: min(100%, 1100px);
  max-height: 86svh;
  display: grid;
  gap: var(--sp-4);
}

/* The stage is sized by the media, so a 9:16 phone video does not get letter-
   boxed into a 16:9 box and vice versa. data-ratio is set when it opens. */
.lightbox__frame {
  position: relative;
  width: 100%;
  max-height: 78svh;
  margin-inline: auto;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lightbox__frame[data-ratio="9-16"] { aspect-ratio: 9 / 16; width: auto; height: 78svh; }
.lightbox__frame[data-ratio="16-9"] { aspect-ratio: 16 / 9; }
.lightbox__frame[data-ratio="1-1"]  { aspect-ratio: 1 / 1; width: auto; height: 78svh; }

.lightbox__frame > iframe,
.lightbox__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: baseline;
  color: var(--c-cream);
}

.lightbox__title { font-size: var(--fs-body); font-weight: var(--fw-medium); }

.lightbox__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cream-50);
}

.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--sp-7));
  right: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: var(--rule-width) solid var(--c-cream-30);
  border-radius: var(--radius-pill);
  color: var(--c-cream);
  background: rgba(26, 25, 23, 0.6);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__close:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* Arrows step through the gallery the tile came from. */
.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: var(--rule-width) solid var(--c-cream-30);
  border-radius: var(--radius-pill);
  background: rgba(26, 25, 23, 0.6);
  color: var(--c-cream);
  transition: background var(--dur-fast) var(--ease);
}
.lightbox__nav:hover { background: var(--accent); }
.lightbox__nav--prev { left: calc(-1 * var(--sp-7)); }
.lightbox__nav--next { right: calc(-1 * var(--sp-7)); }
.lightbox__nav svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* Below the point where the arrows would sit off-screen, park them inside
   the frame's bottom corners instead of hiding navigation altogether. */
@media (max-width: 1023px) {
  .lightbox__close { top: var(--sp-3); right: var(--sp-3); }
  .lightbox__nav--prev { left: var(--sp-2); }
  .lightbox__nav--next { right: var(--sp-2); }
}