/* ============================================================
   SCHUBART MEDIA — shared stylesheet
   Design: cinematic charcoal + champagne bronze, condensed
   athletic display type, mono "timecode" captions, and a
   viewfinder-bracket signature drawn from a videographer's frame.
   ============================================================ */

:root {
  --ink:      #0E0E10;   /* near-black background */
  --surface:  #161519;   /* raised surface */
  --surface-2:#1F1D22;   /* tiles / cards */
  --bone:     #ECE8E1;   /* primary warm off-white */
  --muted:    #908A80;   /* warm grey captions */
  --line:     rgba(236, 232, 225, 0.12);
  --bronze:   #C8A06A;   /* champagne bronze accent */
  --bronze-d: #A07D49;
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- type roles ---------- */
.display {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
}
.mono {
  font-family: "Space Mono", ui-monospace, "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 11vw, 140px); }
.eyebrow { color: var(--bronze); margin: 0 0 18px; }
.eyebrow::before { content: "◦  "; color: var(--bronze); }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 14, 16, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px var(--gut);
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: "Anton", sans-serif;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 1.18rem;
}
.brand b { color: var(--bronze); font-weight: 700; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-family: "Space Mono", monospace;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a[aria-current="page"] { position: relative; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -7px;
  width: 100%; height: 1px; background: var(--bronze);
}
.nav-toggle { display: none; background: none; border: 0; color: var(--bone); cursor: pointer; }

/* ---------- viewfinder bracket signature ---------- */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  border: 1.5px solid var(--bronze); pointer-events: none; opacity: .85;
}
.frame::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.frame::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(70px, 14vw, 150px); }
.hero .rec {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
}
.hero .rec .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(200,160,106,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(200,160,106,.55); }
  70% { box-shadow: 0 0 0 10px rgba(200,160,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,160,106,0); }
}
.hero h1 {
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
}
.hero h1 em { color: var(--bronze); font-style: normal; }
.hero .lead {
  max-width: 56ch; margin: 28px 0 0; color: #cfcabf; font-size: 1.12rem;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Space Mono", monospace; font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid var(--line);
  transition: all .22s ease; cursor: pointer; background: none; color: var(--bone);
}
.btn-primary { background: var(--bronze); color: #14110b; border-color: var(--bronze); font-weight: 700; }
.btn-primary:hover { background: var(--bone); border-color: var(--bone); }
.btn-ghost:hover { border-color: var(--bone); }

/* ---------- letterbox film bars ---------- */
.letterbox { position: relative; }
.letterbox::before, .letterbox::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line);
}
.letterbox::before { top: 0; }
.letterbox::after  { bottom: 0; }

/* ---------- brands marquee ---------- */
.brands { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brands .wrap { display: flex; align-items: center; gap: clamp(28px,6vw,80px); flex-wrap: wrap; padding-block: 30px; }
.brands .lbl { color: var(--muted); white-space: nowrap; }
.brands .names { display: flex; gap: clamp(24px,5vw,60px); flex-wrap: wrap; }
.brands .names span {
  font-family: "Anton", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.4rem; color: #b9b3a8;
}

/* ---------- section heading ---------- */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.head h2 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.6rem); }
.head p { margin: 0; max-width: 44ch; color: var(--muted); }

/* ---------- work grid (placeholder tiles) ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.tile {
  position: relative; overflow: hidden; background: var(--surface-2);
  min-height: 0; aspect-ratio: 3/4;
  display: flex; align-items: flex-end;
  background-image:
    radial-gradient(120% 80% at 20% 0%, rgba(200,160,106,.10), transparent 60%),
    linear-gradient(180deg, #232127 0%, #151318 100%);
}
.tile.wide { aspect-ratio: 16/9; }
.tile.tall { aspect-ratio: 4/5; }
.tile .meta { position: relative; z-index: 2; padding: 20px; width: 100%; }
.tile .meta h3 { margin: 4px 0 0; font-size: 1.35rem; }
.tile .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); pointer-events: none;
}
.tile .ph span { font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.2em; opacity:.55; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { /* gradient scrim so labels stay legible over photos */
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, transparent 45%, rgba(8,8,9,.78) 100%);
}
.tile.span6 { grid-column: span 6; }
.tile.span4 { grid-column: span 4; }
.tile.span8 { grid-column: span 8; }
.tile.span12 { grid-column: span 12; }

/* ---------- two-column feature ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px,6vw,72px); align-items: center; }
.split .media { aspect-ratio: 4/5; background: var(--surface-2);
  background-image: radial-gradient(120% 80% at 30% 10%, rgba(200,160,106,.12), transparent 60%), linear-gradient(180deg,#232127,#141318);
}
.split h2 { font-size: clamp(2.2rem,5vw,3.8rem); margin: 0 0 22px; }
.split p + p { margin-top: 16px; }
.split p { color: #cbc6bb; }

/* ---------- list / philosophy ---------- */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 30px; }
.feature { border-top: 1px solid var(--line); padding-top: 20px; }
.feature .n { color: var(--bronze); font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.2em; }
.feature h3 { font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:1.5rem; margin:.5rem 0 .4rem; }
.feature p { margin: 0; color: var(--muted); font-size: .98rem; }

/* ---------- services ---------- */
.svc { border-top: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 24px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding-left .25s ease;
}
.svc-row:hover { padding-left: 12px; }
.svc-row .idx { font-family:"Space Mono",monospace; color: var(--bronze); font-size:.85rem; letter-spacing:.1em; }
.svc-row h3 { margin: 0; font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.03em; font-weight:700; font-size: clamp(1.5rem,3.5vw,2.2rem); }
.svc-row p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
.svc-row .tag { font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.18em; color: var(--muted); white-space: nowrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px,6vw,70px); }
.contact-grid h2 { font-size: clamp(2.6rem,7vw,5.4rem); margin: 0 0 24px; }
.detail { border-top: 1px solid var(--line); padding: 22px 0; }
.detail .k { color: var(--muted); margin-bottom: 6px; }
.detail .v { font-size: 1.2rem; }
.detail .v a:hover { color: var(--bronze); }
.placeholder-note {
  color: var(--bronze); font-family:"Space Mono",monospace; font-size:.72rem;
  letter-spacing:.12em; margin-top: 4px;
}

/* ---------- CTA band ---------- */
.band { text-align: center; border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(2.6rem, 8vw, 6rem); margin: 0 0 12px; }
.band p { color: var(--muted); margin: 0 0 30px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px var(--gut); }
.foot-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-inner .mono a { color: var(--muted); }
.foot-inner .mono a:hover { color: var(--bone); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .tile.span4, .tile.span6, .tile.span8 { grid-column: span 12; }
  .svc-row { grid-template-columns: 50px 1fr; }
  .svc-row .tag { grid-column: 2; }
  .nav-links {
    position: fixed; inset: 0 0 0 30%; background: var(--surface);
    flex-direction: column; justify-content: center; gap: 28px; padding: 40px;
    transform: translateX(100%); transition: transform .3s ease; border-left: 1px solid var(--line);
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 1rem; }
  .nav-toggle { display: block; z-index: 60; }
}

/* ============================================================
   ADDITIONS — real media integration
   ============================================================ */

/* logo in header */
.brand img { height: 40px; width: auto; display: block; }
@media (max-width: 600px){ .brand img { height: 30px; } }

/* hero with background image */
.hero.has-bg { isolation: isolate; }
.hero.has-bg .hero-bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.hero.has-bg .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 28%; }
.hero.has-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(11,11,13,.90) 0%, rgba(11,11,13,.80) 32%, rgba(11,11,13,.60) 56%, rgba(11,11,13,.46) 80%, rgba(11,11,13,.38) 100%),
    linear-gradient(180deg, rgba(11,11,13,.34) 0%, rgba(11,11,13,.22) 38%, rgba(11,11,13,.55) 72%, rgba(11,11,13,.95) 100%);
}
.hero.has-bg .wrap { position: relative; z-index: 1; }
.hero.has-bg h1, .hero.has-bg .lead, .hero.has-bg .rec { text-shadow: 0 2px 28px rgba(0,0,0,.55); }
.hero.has-bg h1 { max-width: 12ch; }
.hero.has-bg .lead { max-width: 46ch; }

/* tile becomes a real link */
a.tile { color: inherit; cursor: pointer; }
a.tile:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.tile img { transition: transform .6s ease; }
.tile:hover img { transform: scale(1.04); }

/* category band heading */
.cat-label { display:flex; align-items:baseline; gap:16px; margin: 0 0 22px; }
.cat-label h3 { margin:0; font-size: clamp(1.6rem,4vw,2.6rem); }
.cat-label .count { font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.18em; color:var(--bronze); }

/* MOTION / reels */
.reels { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.reel {
  position: relative; aspect-ratio: 9/16; background: #000;
  border:1px solid var(--line); overflow:hidden;
}
.reel iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.reel .cap {
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:14px; background:linear-gradient(180deg,transparent,rgba(8,8,9,.85));
}
.reel .cap p { margin:0; }
.reel .cap .t { font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:1.1rem; }

/* feature reel (single, larger) */
.reel-feature { max-width: 340px; margin-inline:auto; }

/* boudoir teaser card */
.gate-card {
  position:relative; border:1px solid var(--line); padding:40px 30px; text-align:center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,160,106,.08), transparent 60%),
    linear-gradient(180deg,#1a181c,#121013);
}
.gate-card h3 { font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:700; font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 10px; }
.gate-card p { color:var(--muted); max-width:48ch; margin:0 auto 22px; }
.badge18 {
  display:inline-block; border:1px solid var(--bronze); color:var(--bronze);
  font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.18em;
  padding:5px 10px; border-radius:999px; margin-bottom:18px;
}

/* AGE GATE overlay */
.agegate {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,9,.97); backdrop-filter:blur(8px); padding:24px;
}
.agegate .box { max-width:440px; text-align:center; }
.agegate h2 { font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:700; font-size:2.4rem; margin:0 0 14px; }
.agegate p { color:var(--muted); margin:0 0 26px; }
.agegate .row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- mobile hero legibility: strong full veil over busy image ---- */
@media (max-width: 760px){
  .hero.has-bg .hero-bg img { object-position: 60% 22%; }
  .hero.has-bg::after{
    background:
      linear-gradient(180deg,
        rgba(11,11,13,.82) 0%,
        rgba(11,11,13,.66) 30%,
        rgba(11,11,13,.80) 62%,
        rgba(11,11,13,.98) 100%);
  }
  .hero.has-bg h1, .hero.has-bg .lead { max-width: none; }
  .hero .lead { font-size: 1.02rem; }
}

/* ---- auto-playing video tile (Vimeo background mode) ---- */
.tile.vid { background:#000; overflow:hidden; }
.tile.vid iframe {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; aspect-ratio:9/16; height:auto; min-height:100%;
  border:0; z-index:0; pointer-events:none;
}
.tile.vid .live {
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:.18em; color:var(--bone);
}
.tile.vid .live .dot{ width:7px;height:7px;border-radius:50%;background:var(--bronze); animation:pulse 2.4s infinite; }

/* ---- hero text scrim + brighter lead for legibility over any image ---- */
.hero.has-bg .hero-inner { position: relative; z-index: 1; }
.hero.has-bg .hero-inner::before { content: none; }
.hero.has-bg .lead { color: #efece6; }
.hero.has-bg h1, .hero.has-bg .lead, .hero.has-bg .rec { text-shadow: 0 2px 14px rgba(0,0,0,.7); }

@media (max-width: 760px){
  .hero.has-bg .hero-inner::before { content: none; }
}

/* ============================================================
   THEME: KINETIC — dark poster, video hero, marquee, bold rows
   ============================================================ */
:root{
  --ink:#0A0A0B; --surface:#141416; --surface-2:#1C1C20;
  --bone:#FAFAFA; --muted:#8A8A90; --line:rgba(250,250,250,.14);
  --bronze:#FF4D14; --bronze-d:#D63A06;     /* volt orange */
}
.display{ font-family:"Anton",Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.05em; line-height:1.0; }
.eyebrow{ color:var(--bronze); }
.btn{ border-radius:999px; }
.btn-primary{ background:var(--bronze); color:#0A0A0B; border-color:var(--bronze); }
.btn-primary:hover{ background:#fff; border-color:#fff; color:#0A0A0B; }
.btn-ghost{ border-color:var(--bone); }
.btn-ghost:hover{ background:var(--bone); color:#0A0A0B; }

/* ---- VIDEO HERO ---- */
.vhero{ position:relative; min-height:94vh; display:flex; align-items:flex-end; overflow:hidden; }
.vhero .bg{ position:absolute; inset:0; z-index:-2; background:#000; }
.vhero .bg iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh; border:0; pointer-events:none; }
.vhero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,11,.45) 0%, rgba(10,10,11,.30) 42%, rgba(10,10,11,.92) 100%); }
.vhero .wrap{ width:100%; padding-block:clamp(40px,8vw,96px); }
.vhero .live{ display:inline-flex; gap:8px; align-items:center; font-family:"Space Mono",monospace;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone); margin-bottom:18px; }
.vhero .live .dot{ width:8px;height:8px;border-radius:50%; background:var(--bronze); animation:pulse 2s infinite; }
.vhero h1{ font-size:clamp(4rem,17vw,15rem); margin:0; }
.vhero h1 .o{ color:var(--bronze); }
.vhero .sub{ max-width:50ch; color:#eaeaed; margin:20px 0 0; font-size:1.12rem; }
.vhero .ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ---- MARQUEE ---- */
.marquee{ overflow:hidden; background:var(--bronze); color:#0A0A0B; }
.marquee .track{ display:flex; width:max-content; animation:scroll 24s linear infinite; }
.marquee .track .seg{ display:inline-flex; gap:46px; padding:14px 23px;
  font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.7rem; letter-spacing:.01em; white-space:nowrap; }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none; } }

/* ---- BOLD WORK ROWS ---- */
.work-row{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.work-row .ph{ position:relative; overflow:hidden; aspect-ratio:5/4; }
.work-row .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.work-row:hover .ph img{ transform:scale(1.05); }
.work-row .info{ padding:clamp(24px,4vw,64px); display:flex; flex-direction:column; justify-content:center; }
.work-row .no{ font-family:"Anton",sans-serif; font-size:clamp(3rem,8vw,7rem); color:var(--surface-2); line-height:.8; }
.work-row h3{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(2rem,5.5vw,4rem); margin:.08em 0 .25em; line-height:.9; }
.work-row .cat{ font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); margin-bottom:6px; }
.work-row .info p{ color:var(--muted); max-width:46ch; }
.work-row.flip .ph{ order:2; }
@media(max-width:820px){ .work-row{ grid-template-columns:1fr; } .work-row.flip .ph{ order:0; } }

/* ---- bold reels band ---- */
.reels-bold{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:820px){ .reels-bold{ grid-template-columns:repeat(2,1fr); } }

/* ---- STATIC BRAND STRIP (logos on light band) ---- */
.brandbar{ background:#F2F0EA; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brandbar .wrap{ display:flex; align-items:center; justify-content:center; gap:clamp(26px,5.5vw,72px); flex-wrap:wrap; padding-block:30px; }
.brandbar .lbl{ width:100%; text-align:center; font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:#6a655c; margin-bottom:8px; }
.brandbar .cell{ height:58px; display:flex; align-items:center; justify-content:center; }
.brandbar .cell img{ max-height:100%; max-width:150px; width:auto; height:auto; opacity:.9; transition:opacity .2s ease, transform .2s ease; }
.brandbar a:hover img{ opacity:1; transform:translateY(-2px); }
@media(max-width:560px){ .brandbar .cell{ height:44px; } .brandbar .cell img{ max-width:112px; } }