/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --black: #0a0a0c;
  --black-soft: #131316;
  --white: #f6f6f3;
  --white-dim: #c9c9c4;
  --cobalt: #2647ff;
  --cobalt-deep: #121a5e;
  --grey: #85858c;
  --line: rgba(246,246,243,0.14);
  --line-strong: rgba(246,246,243,0.28);

  --f-display: 'Archivo Expanded', sans-serif;
  --f-black: 'Archivo', sans-serif;
  --f-body: 'Inter', sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

::selection{ background:var(--cobalt); color:var(--white); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--cobalt);
  outline-offset:4px;
}

/* ============================================================
   GRAIN TEXTURE — subtle noise overlay used across dark sections
   ============================================================ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   SITE HEADER (used on inner pages: production / fitness / music)
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.4rem,4vw,3rem);
  mix-blend-mode:difference;
}
.site-header .back{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-black); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white);
}
.site-header .back .arrow{ transition:transform .3s var(--ease); }
.site-header .back:hover .arrow{ transform:translateX(-4px); }

.site-header .mark{
  font-family:var(--f-display); font-weight:700;
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white);
}
.site-header .mark img{ display:block; height:18px; width:auto; }
.site-header .mark-teamv img{ height:52px; }

/* ============================================================
   EYEBROW / LABEL SYSTEM
   ============================================================ */
.eyebrow{
  font-family:var(--f-black); font-weight:600;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cobalt);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:''; width:1.4rem; height:1px; background:var(--cobalt);
}

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1,h2,h3{ font-family:var(--f-display); text-transform:uppercase; line-height:.94; letter-spacing:-.01em; }

.display-1{ font-size:clamp(3.2rem, 9vw, 8rem); font-weight:800; }
.display-2{ font-size:clamp(2.2rem, 5.5vw, 4.4rem); font-weight:800; }
.display-3{ font-size:clamp(1.5rem, 3vw, 2.2rem); font-weight:700; }

p{ font-size:1rem; line-height:1.7; color:var(--white-dim); font-weight:400; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6; color:var(--white-dim); max-width:38em; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{ max-width:1400px; margin:0 auto; padding-left:clamp(1.4rem,4vw,3rem); padding-right:clamp(1.4rem,4vw,3rem); }
.section{ padding:clamp(5rem,10vw,9rem) 0; position:relative; }
.section-line{ border-top:1px solid var(--line); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-black); font-weight:700;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1.05rem 1.9rem;
  border:1px solid var(--line-strong);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), gap .3s var(--ease);
}
.btn:hover{ gap:1rem; }
.btn-solid{ background:var(--cobalt); border-color:var(--cobalt); color:var(--white); }
.btn-solid:hover{ background:var(--white); border-color:var(--white); color:var(--black); }
.btn-ghost{ color:var(--white); }
.btn-ghost:hover{ border-color:var(--cobalt); color:var(--cobalt); }

/* ============================================================
   CARDS — services / offerings grid (shared shape, themed per page)
   ============================================================ */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--black); padding:2.4rem 2rem; transition:background .4s var(--ease); }
.card:hover{ background:var(--black-soft); }
.card .num{ font-family:var(--f-black); font-size:.75rem; color:var(--cobalt); letter-spacing:.1em; }
.card h3{ margin-top:1rem; font-size:1.3rem; }
.card p{ margin-top:.9rem; font-size:.92rem; }

/* ============================================================
   PLACEHOLDER MEDIA — swap these backgrounds for real photography.
   Each has a data-label so it's obvious what to shoot/replace.
   ============================================================ */
.ph{
  position:relative; overflow:hidden; background:var(--black-soft);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.ph::after{
  content:attr(data-label);
  position:absolute; left:1rem; bottom:1rem;
  font-family:var(--f-black); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white-dim); opacity:.55;
  border:1px dashed var(--line-strong); padding:.4rem .7rem;
}

/* Real photo container — same footprint as .ph, but holds an actual <img> */
.photo{
  position:relative; overflow:hidden; background:var(--black-soft);
}
.photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   FEATURED PHOTO — for group/community shots too tall to crop
   into the small gallery grid without cutting people off
   ============================================================ */
.featured-photo{
  position:relative; overflow:hidden;
  aspect-ratio:1/1;
  max-width:760px;
  margin:0 auto 1.4rem;
  background:var(--black-soft);
}
.featured-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:600px){
  .featured-photo{ aspect-ratio:4/5; max-width:100%; }
}

/* ============================================================
   PHOTO GALLERY — masonry-ish grid for coaching/DJ photo sets
   ============================================================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:.6rem;
}
.gallery-grid .photo{ grid-row:span 2; }
.gallery-grid .photo.short{ grid-row:span 1; }
.gallery-grid .photo.wide{ grid-column:span 2; }

@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:160px; }
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:130px; }
}

/* ============================================================
   COOKIE CONSENT — banner + per-embed gate for YouTube/MixCloud
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--black-soft);
  border-top:1px solid var(--line-strong);
  padding:1.2rem clamp(1.2rem,4vw,2rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  transform:translateY(110%);
  transition:transform .5s var(--ease);
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner p{ font-size:.82rem; max-width:46em; margin:0; }
.cookie-banner .cookie-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cookie-banner .btn{ padding:.75rem 1.4rem; font-size:.72rem; }

.consent-embed{ position:relative; }
.consent-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:var(--black-soft);
  border:1px dashed var(--line-strong);
}
.consent-overlay.is-hidden{ display:none; }
.consent-load-btn{
  font-family:var(--f-black); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); background:none; border:1px solid var(--line-strong);
  padding:.9rem 1.4rem; cursor:pointer; transition:border-color .3s, color .3s;
}
.consent-load-btn:hover{ border-color:var(--cobalt); color:var(--cobalt); }

/* ============================================================
   POLICY CONTENT — body copy styling for Privacy Policy page
   ============================================================ */
.policy-content{ padding-bottom:6rem; }
.policy-content p{ margin-bottom:1.2rem; max-width:60em; }
.policy-content h2{
  font-family:var(--f-body); text-transform:none; font-weight:700;
  font-size:1.15rem; letter-spacing:0; line-height:1.3;
  margin-top:2.6rem; margin-bottom:1rem; color:var(--white);
}
.policy-content h2:first-child{ margin-top:0; }
.policy-content ul{ margin:0 0 1.2rem 0; padding-left:1.4rem; list-style:disc; }
.policy-content li{ color:var(--white-dim); font-size:1rem; line-height:1.7; margin-bottom:.4rem; }
.policy-content a{ color:var(--cobalt); text-decoration:underline; text-underline-offset:2px; }
.policy-content a:hover{ color:var(--white); }
.policy-content strong{ color:var(--white); font-weight:600; }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  padding:3rem clamp(1.4rem,4vw,3rem) 2.4rem;
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.site-footer .mark{ font-family:var(--f-display); font-weight:800; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; }
.site-footer .mark img{ display:block; height:20px; width:auto; }
.site-footer .mark-teamv img{ height:60px; }
.site-footer .links{ display:flex; gap:1.6rem; }
.site-footer a{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--white-dim); transition:color .3s; }
.site-footer a:hover{ color:var(--cobalt); }
.site-footer .copy{ font-size:.75rem; color:var(--grey); width:100%; order:99; padding-top:1.5rem; border-top:1px solid var(--line); margin-top:.5rem; }

@media (max-width:640px){
  .site-footer{ flex-direction:column; align-items:flex-start; }
}