:root{
  --ink:#ffffff;
  --ink-dim:#b8b8b8;
  --bg:#0b0b0b;
  --panel:#101010;
  --line:#222222;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --container:1200px;
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--ink); text-decoration:none}
a:hover{opacity:.9}
img,video{display:block; max-width:100%; height:auto}

h1,h2,h3{font-family:'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; font-weight:600; letter-spacing:-0.01em}
h2{font-size: clamp(24px,4.5vw,34px); margin-bottom:.5rem}
p{margin:0 0 1.1rem; color:var(--ink-dim); max-width:60ch}

.site-nav a{font-weight:500; letter-spacing:-0.01em}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1; transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
}

.container{max-width:var(--container); margin-inline:auto; padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.8); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(6px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{font-weight:800; letter-spacing:.2em}
.site-nav{display:flex; gap:18px; align-items:center}
.site-nav .cta{padding:.55rem .9rem; border:1px solid var(--line); border-radius:12px; background:#151515}
.nav-toggle{display:none; background:#151515; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:.4rem .6rem}

/* Hero */
.hero{
  position:relative;
  padding:96px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:20px}
}

.hero-copy h1{font-size:clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.05; margin:0}
.hero-copy p{color:var(--ink-dim); max-width:60ch; margin:.8rem 0 1.2rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.hero::before{
  content:"";
  position:absolute; inset:-25% -10% auto -10%;
  height:65%;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 320px at 90% -20%, rgba(255,255,255,.05), transparent 60%);
  filter:blur(.2px);
  animation:heroGlow 14s ease-in-out infinite alternate;
  opacity:.9; pointer-events:none; z-index:0;
}

.hero-montage{
  position:relative;
  height:min(64vh, 680px);
  min-height:380px;
}
.hero-montage .tile{
  position:absolute;
  width:46%;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  --base-rot: rotate(0deg);
  --parallax: 0px;
  animation:floatY 7s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-montage .tile video{width:100%; height:100%; object-fit:cover; display:block}

.hero-montage .t1{left:0; top:8%; --base-rot: rotate(-3deg);}
.hero-montage .t2{right:0; top:20%; --base-rot: rotate(2deg); animation-duration:8.5s;}
.hero-montage .t3{left:22%; bottom:0; --base-rot: rotate(-1deg); animation-duration:10s;}

@media (max-width:900px){
  .hero-montage{height:auto; min-height:unset}
  .hero-montage .tile{position:relative; width:100%; margin-bottom:14px; animation:none}
}

@keyframes heroGlow{from{transform:translateY(0)} to{transform:translateY(14px)}}
@keyframes floatY{
  from{transform:translateY(var(--parallax)) var(--base-rot);}
  to{transform:translateY(calc(var(--parallax) - 10px)) var(--base-rot);}
}
@media (prefers-reduced-motion: reduce){
  .hero::before{animation:none}
  .hero-montage .tile{animation:none}
}

.scroll-cue{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px; background:transparent; border:1px solid var(--line);
  color:var(--ink-dim); border-radius:999px; padding:.35rem .7rem; font-size:1.1rem;
  transition:background .2s ease, color .2s ease; z-index:1;
}
@media (hover:hover){
  .scroll-cue:hover{background:#111; color:#fff}
}

.sticky-cta{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:50;
  display:none;
  border:1px solid var(--line);
  border-radius:999px;
  background:#141414;
  color:#fff;
  padding:.7rem 1rem;
  box-shadow:var(--shadow);
}
@media (max-width:900px){
  .sticky-cta{display:inline-flex; align-items:center; gap:6px}
}
.sticky-cta.hide{display:none !important}

.btn, .btn-ghost{transform:translateY(0); transition:transform .2s ease}
@media (hover:hover){
  .btn:hover, .btn-ghost:hover{transform:translateY(-1px)}
}

/* Stats */
.stat-band{
  position:relative;
  background:#101010;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat-band::after{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.25;
  animation:shimmer 3.4s linear infinite;
}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; padding:22px 0}
.stat-value{font-size:1.6rem; font-family:'Space Grotesk', 'Inter', sans-serif; font-weight:600}
.stat-label{color:var(--ink-dim); font-size:.95rem; margin-top:.3rem}
@media (min-width:900px){
  .stats{grid-template-columns:repeat(4,1fr)}
}

.stats.stats-3{
  display:grid;
  gap:28px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  justify-items:center;
  padding:24px 0;
}
.stats.stats-3 .stat{text-align:center}
.stats.stats-3 .stat-value{font-size:clamp(1.4rem,1.2vw + 1rem,2rem)}
@keyframes shimmer{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}
@media (prefers-reduced-motion: reduce){
  .stat-band::after{animation:none}
}

/* Sections */
.section{padding:56px 0}
.section h2{margin:0 0 .6rem}
.section-sub{color:var(--ink-dim); margin:0 0 1.2rem}
.kicker{color:var(--ink-dim); letter-spacing:.18em; text-transform:uppercase; font-size:.75rem}

/* Grid + Cards */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:1fr}
@media (min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-span-3{grid-column:1/-1}


/* Minimal 3-across staggered grid (no borders/titles) */

@media (prefers-reduced-motion: reduce){
  .reveal,
  .vwrap-plain,
  .hwrap-plain{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reels-stagger .vwrap-plain,
  .reels-stagger .hwrap-plain{ margin-top:0 !important; }
}

/* Optional: desktop show controls only on hover, keep visible on touch */
@media (hover:hover){
  .vwrap-plain .reel::-webkit-media-controls,
  .hwrap-plain .reel::-webkit-media-controls{ opacity:0; transition:opacity .2s ease; }
  .vwrap-plain:hover .reel::-webkit-media-controls,
  .hwrap-plain:hover .reel::-webkit-media-controls{ opacity:1; }
}
 
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
}
.item-title{margin:.6rem 0 .15rem; font-weight:600}
.item-meta{margin:0; color:var(--ink-dim); font-size:.95rem}

/* Video */
.video-wrap{border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9}
.reel{width:100%; height:100%; object-fit:cover}

/* Buttons */
.btn{
  display:inline-block; background:#ffffff; color:#000;
  border-radius:var(--radius-sm);
  padding:.7rem 1rem; font-weight:600; border:1px solid #fff;
}
.btn-ghost{
  display:inline-block; background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem 1rem;
}

/* Contact */
.contact-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:24px;
  box-shadow:0 14px 36px rgba(0,0,0,.32);
}
.contact-lead{color:var(--ink-dim); margin:.25rem 0 1rem}
.email-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:.4rem;
}
.email-link{
  position:relative; display:inline-block; padding:.6rem .9rem;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#141414;
  font-weight:600;
}
.email-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:1px;
  background: currentColor; opacity:.15; transform: scaleX(.2);
  transition: transform .25s ease, opacity .25s ease;
}
@media (hover:hover){
  .email-link:hover::after{ transform: scaleX(1); opacity:.35; }
}
.copy-email{
  padding:.6rem .9rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:transparent; color:var(--ink);
  transition:background-color .2s ease;
}
.copy-email:hover{background:#101010}
.reveal.is-visible .contact-card{box-shadow:0 22px 60px rgba(0,0,0,.42)}
.toast{
  position:relative; min-height:1.2rem; color:var(--ink-dim);
  font-size:.92rem; margin:.25rem 0 .2rem;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:none}
.micro{color:var(--ink-dim)}

.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0f0f0f; }
.collab-wrap{
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  margin-top:10px;
}
.collab-track{
  display:inline-flex; gap:14px; white-space:nowrap;
  will-change: transform; animation: marquee 18s linear infinite;
}
.chip{
  display:inline-block; border:1px solid var(--line); border-radius:999px;
  padding:.35rem .7rem; background:#121212; color:#e6e6e6; font-weight:600;
}
@keyframes marquee{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-50%) }
}
@media (hover:hover){ .collab-wrap:hover .collab-track{ animation-play-state: paused } }
@media (max-width:700px){
  .collab-track{ animation:none; flex-wrap:wrap; white-space:normal }
}

.trust-quotes{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.qchip{border:1px solid var(--line); border-radius:999px; padding:.25rem .6rem; color:var(--ink-dim); background:#121212}

/* Why band texture */
.why{position:relative; overflow:hidden; background:#0e0e0e; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.why::before,
.why::after{content:""; position:absolute; inset:0; pointer-events:none}
.why::before{
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(40% 60% at 90% 10%, rgba(255,255,255,.04), transparent 60%);
  mix-blend-mode:screen; opacity:.9;
}
.why::after{
  --s:32px;
  background:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/var(--s) var(--s),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/var(--s) var(--s);
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%);
  opacity:.6;
}
@media (prefers-reduced-motion: reduce){
  .why::before{background:none}
}
.why h3{margin-bottom:.4rem}
.why-sub{margin-bottom:.6rem}
.why-pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:.6rem}
.pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.28rem .6rem;
  background:#121212;
  color:#e6e6e6;
  font-weight:600;
  font-size:.9rem;
}

/* About backdrop */
#about{position:relative; background:#0c0c0c}
#about::before{
  content:""; position:absolute; inset:auto -20% 0 -20%; height:40%;
  background: radial-gradient(50% 80% at 50% 100%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none; opacity:.8;
}
#about p{max-width:60ch}

/* Focus style */
.contact-lead{margin-top:.35rem}
:focus-visible{outline:2px solid #fff; outline-offset:2px}

footer{border-top:1px solid var(--line); padding:32px 0; background:#0f0f0f}
.footer-minimal{display:flex; flex-direction:column; gap:16px}
.footer-minimal p{margin:0; color:var(--ink-dim); font-size:.95rem}
footer nav{display:flex; gap:18px; flex-wrap:wrap}
footer nav a{color:var(--ink-dim); font-weight:500; position:relative; padding-bottom:4px; transition:color .2s ease}
footer nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:rgba(255,255,255,.45); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
footer nav a:hover{color:var(--ink)}
footer nav a:hover::after{transform:scaleX(1)}

@media (min-width:700px){
  .footer-minimal{flex-direction:row; align-items:center; justify-content:space-between}
}

/* Mobile nav */
@media (max-width: 820px){
  .site-nav{display:none}
  .nav-toggle{display:inline-block}
  .site-header.nav-open .site-nav{
    display:flex; position:absolute; top:64px; right:20px; left:20px; flex-direction:column; gap:10px;
    background:#111; border:1px solid var(--line); border-radius:12px; padding:12px;
  }
}
.services-grid .s-card{
  position:relative; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--radius); background:#101010; padding:20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.services-grid .s-card .s-icon{
  font-size:1.1rem; opacity:.8; margin-bottom:.35rem;
}
@media (hover:hover){
  .services-grid .s-card:hover{
    transform: translateY(-4px) rotate(.3deg);
    box-shadow: var(--shadow); border-color:#2a2a2a;
  }
  .services-grid .s-card::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
    transform: translateX(-100%);
    transition: transform .6s ease;
  }
  .services-grid .s-card:hover::after{ transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce){
  .services-grid .s-card{transition:none}
  .services-grid .s-card:hover{transform:none; box-shadow:none}
  .services-grid .s-card::after{transition:none}
  .collab-track{animation:none !important}
}

.reels-grid.compact{
  --gap:14px;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:740px){
  .reels-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1120px){
  .reels-grid.compact{grid-template-columns:repeat(5,minmax(0,1fr));}
}

.reels-grid.compact > *{
  border-radius:16px; overflow:hidden; background:#000;
  margin-top:var(--v-offset,0px);
}
.vwrap-plain{position:relative; aspect-ratio:9/16;}
.vwrap-longform{position:relative; aspect-ratio:16/9;}
.hwrap-plain{position:relative; aspect-ratio:16/9;}
.hwrap-plain.span-2, .vwrap-longform.span-2{grid-column:span 2;}
@media (max-width:739px){.hwrap-plain.span-2, .vwrap-longform.span-2{grid-column:span 2;}}

.reels-grid.compact video{width:100%; height:100%; object-fit:cover; display:block}

.reels-grid.compact > *:nth-child(odd){ --v-offset:10px; }
.reels-grid.compact > *:nth-child(3n){ --v-offset:22px; }
.reels-grid.compact > *:nth-child(5n){ --v-offset:36px; }

.reveal-stagger{opacity:1}
.reveal-stagger > *{opacity:0; transform:translateY(14px);}
.reveal-stagger.is-visible > *{
  opacity:1; transform:none; transition:opacity .45s ease, transform .45s ease;
}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:50ms}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:100ms}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:150ms}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:200ms}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:250ms}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:300ms}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:350ms}
.reveal-stagger.is-visible > *:nth-child(9){transition-delay:400ms}
.reveal-stagger.is-visible > *:nth-child(10){transition-delay:450ms}

.section h2, .section h3{position:relative; padding-bottom:.35rem}
.section h2 .under, .section h3 .under{
  position:absolute; left:0; bottom:0; height:2px; width:64px;
  background:linear-gradient(90deg, #fff, rgba(255,255,255,.2));
  border-radius:2px; transform-origin:left;
  transform:scaleX(.2); opacity:.7; transition:transform .6s ease;
}
.reveal.is-visible .under{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important}
  .section h2 .under, .section h3 .under{transition:none; transform:none}
}

/* 6-card responsive grid */
.grid-6{
  display:grid; gap:24px;
  grid-template-columns: 1fr;
}
@media (min-width:700px){ .grid-6{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .grid-6{ grid-template-columns: repeat(3, 1fr); } }

/* YouTube embed styles with custom controls */
.youtube-embed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  overflow: hidden;
}

.v9x16.youtube-embed {
  aspect-ratio: 9/16;
}

.h16x9.youtube-embed {
  aspect-ratio: 16/9;
}

/* Video container */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Hide YouTube branding completely */
.youtube-embed::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Hide YouTube logo and branding */
.youtube-embed iframe {
  border: none;
}

/* Additional YouTube branding hiding */
.video-container {
  overflow: hidden;
}

.video-container iframe {
  border: none;
  outline: none;
}

/* Hide any YouTube overlay elements */
.video-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
  background: transparent;
}

/* Completely hide YouTube headers and branding */
.youtube-embed {
  position: relative;
}

.youtube-embed iframe {
  position: absolute;
  top: -50px; /* Hide YouTube header */
  left: 0;
  width: 100%;
  height: calc(100% + 50px); /* Extend to cover hidden header */
  border: none;
  outline: none;
}

/* Hide YouTube player controls completely */
.video-container {
  overflow: hidden;
  position: relative;
}

/* Hide YouTube headers on hover */
.video-container:hover .youtube-embed iframe {
  top: -50px; /* Keep header hidden on hover */
}

/* Additional YouTube branding hiding */
.video-container iframe {
  pointer-events: auto;
}

/* Hide any YouTube overlay elements that appear on hover */
.video-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
  background: transparent;
}