/* All Out Studios — Marketing Site UI Kit
   Layout + component styles. Tokens come from ../../colors_and_type.css */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;cursor:none}
a,button,[role=button],.wcard{cursor:none}

/* custom cursor */
.cur-dot,.cur-ring{pointer-events:none;position:fixed;top:0;left:0;z-index:9999;will-change:transform}
.cur-dot{width:6px;height:6px;background:var(--volt);border-radius:50%;margin:-3px 0 0 -3px;box-shadow:0 0 8px var(--volt)}
.cur-ring{width:36px;height:36px;border:1.5px solid var(--volt);border-radius:50%;margin:-18px 0 0 -18px;transition:opacity .3s,transform .1s;opacity:.85}
@media(hover:none){.cur-dot,.cur-ring{display:none}body,a,button,[role=button],.wcard{cursor:auto}}
.site{font-family:var(--font-sans)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
img{display:block;max-width:100%}
button{font-family:inherit}

/* ---------- PHOTO PLACEHOLDER ---------- */
.photo{position:relative;background:#16161A;overflow:hidden;isolation:isolate}
.photo::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 16px, rgba(255,255,255,0) 16px 32px),
  radial-gradient(120% 90% at 70% 0%, #2a2a30 0%, #141417 60%, #0c0c0e 100%);z-index:-1}
.photo .ph-tag{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,243,238,.45);display:flex;align-items:center;gap:6px}
.photo .ph-tag::before{content:"";width:6px;height:6px;background:var(--volt);border-radius:50%}
.photo.grad::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,12,.92) 0%,rgba(12,12,12,.35) 50%,rgba(12,12,12,0) 100%);z-index:1}
.photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:0}
.photo .wcard__cat{z-index:2}
/* darker black overlay on the hero header photo */
.hero__photo::after{background:rgba(0,0,0,.55);z-index:1}

/* ---------- KICKER ---------- */
.kicker{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap;max-width:100%}
.kicker .tick{color:var(--volt-deep)}
.on-ink .kicker .tick{color:var(--volt)}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:4px;border:2px solid var(--ink);cursor:pointer;line-height:1;transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn svg{width:17px;height:17px}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--volt);color:var(--ink);border-color:var(--ink)}
.btn--primary:hover{background:var(--volt-press)}
.on-ink .btn--primary{border-color:var(--volt)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:#000}
.on-ink .btn--dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--outline{background:transparent;color:var(--fg);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--fg);color:var(--bg)}
.btn--lg{font-size:16px;padding:18px 28px}

/* ---------- TAGS ---------- */
.tag{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border-strong);background:transparent;color:var(--fg);cursor:pointer;transition:all var(--dur) var(--ease)}
.tag.is-active{background:var(--volt);color:var(--ink);border-color:var(--ink)}
.on-ink .tag.is-active{border-color:var(--volt)}
.tag:hover:not(.is-active){background:var(--fg);color:var(--bg)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:#050505;border-bottom:1px solid var(--ink-3)}
.nav__in{display:flex;align-items:center;gap:24px;height:68px}
.nav__logo{height:22px}
.nav__logo img{height:100%}
.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__link{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-300);text-decoration:none;position:relative;padding:4px 0;background:none;border:none;cursor:pointer}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--volt);transition:width var(--dur) var(--ease)}
.nav__link:hover{color:var(--paper)}
.nav__link:hover::after{width:100%}
.nav__cta{margin-left:4px}
.nav__burger{display:none;margin-left:auto;background:none;border:none;color:var(--paper);cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper);min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero__photo{position:absolute;inset:0}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(40px,7vw,90px);padding-top:120px}
.hero__title{font-family:var(--font-display),sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.86;font-size:clamp(3rem,9.5vw,9rem);margin:18px 0 0;max-width:18ch;text-wrap:balance}
.hero__title .v{color:var(--volt)}
.hero__sub{font-size:clamp(1rem,1.6vw,1.25rem);color:#e8e4de;max-width:46ch;margin:24px 0 0;line-height:1.65;font-weight:400;letter-spacing:.04em !important;word-spacing:.12em}
.hero__actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero__scroll{position:absolute;right:var(--gutter);bottom:36px;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400);display:flex;align-items:center;gap:8px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(24px)}
.revealed .reveal{opacity:1;transform:none;transition:opacity var(--dur-hero) var(--ease),transform var(--dur-hero) var(--ease)}
.revealed .reveal:nth-child(2){transition-delay:.08s}
.revealed .reveal:nth-child(3){transition-delay:.16s}
.revealed .reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--volt);color:var(--ink);padding:16px 0;overflow:hidden;white-space:nowrap;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.marquee__track{display:inline-block;animation:moq 22s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--font-display),sans-serif;font-weight:900;font-size:clamp(20px,3vw,34px);text-transform:uppercase;letter-spacing:-.01em;padding:0 22px}
@keyframes moq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- SECTION ---------- */
.section{padding:var(--sp-section) 0}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.section__head>*{min-width:0}
.section__title{font-family:var(--font-display),sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;font-size:clamp(2.25rem,5vw,4rem);margin:14px 0 0;max-width:20ch;text-wrap:balance}

/* ---------- SERVICES ---------- */
.services{background:var(--paper)}
.svc-list{border-top:2px solid var(--ink)}
.svc{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;padding:30px 8px;border-bottom:2px solid var(--ink);cursor:pointer;transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.svc:hover{background:var(--ink);color:var(--paper);padding-left:24px;padding-right:24px}
.svc__no{font-family:var(--font-mono);font-size:14px;color:var(--gray-500)}
.svc:hover .svc__no{color:var(--volt)}
.svc__name{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1}
.svc__desc{font-size:15px;color:var(--gray-600);max-width:40ch;line-height:1.5;margin-top:8px}
.svc:hover .svc__desc{color:var(--gray-300)}
.svc__arrow{color:inherit;opacity:0;transform:translateX(-8px);transition:all var(--dur) var(--ease)}
.svc:hover .svc__arrow{opacity:1;transform:none;color:var(--volt)}

/* ---------- WORK ---------- */
.work{background:var(--ink);color:var(--paper)}
.work__filters{display:flex;gap:10px;flex-wrap:wrap}
.work__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wcard{cursor:pointer;display:flex;flex-direction:column;gap:0;background:transparent;border:none;padding:0;text-align:left;color:inherit}
.wcard__media{aspect-ratio:4/5;border-radius:6px;border:2px solid var(--ink-3);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.wcard:hover .wcard__media{transform:translateY(-6px);border-color:var(--volt)}
.wcard__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;gap:12px}
.wcard__name{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:-.01em}
.wcard__sport{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400)}
.wcard__stat{font-family:var(--font-mono);font-size:12px;color:var(--volt);font-weight:600}
.wcard__cat{position:absolute;bottom:12px;left:12px;z-index:2}

/* ---------- STATS ---------- */
.stats{background:var(--paper)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.stat-cell{background:var(--paper);padding:34px 26px;display:flex;flex-direction:column;gap:14px}
.stat-cell__num{font-family:var(--font-display),sans-serif;font-weight:900;font-size:clamp(2.6rem,5.5vw,4.2rem);line-height:.82;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-cell__num .v{color:var(--volt-deep)}
.stat-cell__lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600)}

/* ---------- SPOTLIGHT ---------- */
.spot{background:var(--ink);color:var(--paper);overflow:hidden}
.spot__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch;min-height:560px}
.spot__media{position:relative}
.spot__body{padding:clamp(40px,6vw,90px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.spot__quote{font-family:var(--font-display),sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.8rem,3.4vw,2.9rem);text-wrap:balance}
.spot__quote .v{color:var(--volt)}
.spot__by{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400)}
.spot__stats{display:flex;gap:36px;margin-top:8px}
.spot__stat b{font-family:var(--font-display),sans-serif;display:block;font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1}
.spot__stat span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400)}

/* ---------- CTA ---------- */
.cta{background:var(--volt);color:var(--ink);text-align:center}
.cta__in{padding:var(--sp-section) var(--gutter)}
.cta__title{font-family:var(--font-display),sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.88;font-size:clamp(2.5rem,8vw,6.5rem);margin:14px auto 0;max-width:16ch;text-wrap:balance}
.cta__actions{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:var(--paper);padding-top:72px}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:56px}
.footer__col h5{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500);margin:0 0 16px}
.footer__col a{display:block;color:var(--gray-300);text-decoration:none;font-size:15px;padding:6px 0;width:fit-content}
.footer__col a:hover{color:var(--volt)}
.footer__blurb{color:var(--gray-400);max-width:36ch;line-height:1.55;margin:18px 0 0}
.footer__wordmark{border-top:1px solid var(--ink-3);padding:30px 0 40px}
.footer__wordmark img{width:100%;opacity:.95}
.footer__legal{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);padding-bottom:30px;flex-wrap:wrap;gap:8px}

/* ---------- GALLERY ---------- */
.gallery-scrim{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;animation:fade var(--dur) var(--ease)}
.gallery-modal{background:var(--ink);width:min(960px,100%);border-radius:8px;overflow:hidden;margin:auto}
.gallery-modal__head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--ink-3)}
.gallery-modal__title{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:-.01em;color:var(--paper)}
.gallery-modal__close{background:none;border:none;color:var(--gray-400);cursor:pointer;display:flex;align-items:center;padding:4px;transition:color var(--dur)}
.gallery-modal__close:hover{color:var(--volt)}
.gallery-grid{columns:3;column-gap:3px;padding:3px}
.gallery-grid__img{width:100%;height:auto;display:block;margin-bottom:3px;break-inside:avoid}
.wcard__gallery-hint{position:absolute;top:12px;right:12px;z-index:3;color:#fff;opacity:.7;display:flex;align-items:center}
.wcard__gallery-hint svg{width:18px;height:18px}

/* ---------- MODAL ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(12,12,12,.6);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;animation:fade var(--dur) var(--ease)}
.modal{background:var(--paper);color:var(--ink);width:min(520px,100%);border:2px solid var(--ink);border-radius:8px;box-shadow:var(--shadow-hard);padding:34px;position:relative}
.modal__close{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:var(--ink)}
.modal h3{margin:0}
.modal .field{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.modal label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-600)}
.modal input,.modal select,.modal textarea{font-family:var(--font-sans);font-size:15px;padding:13px 14px;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);outline:none;width:100%}
.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--volt-deep);box-shadow:0 0 0 3px rgba(212,255,61,.45)}
.modal__done{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:20px 0}
.modal__check{width:64px;height:64px;border-radius:50%;background:var(--volt);display:flex;align-items:center;justify-content:center}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .spot__grid{grid-template-columns:1fr}
  .spot__media{min-height:340px}
  .spot__body{padding:clamp(32px,5vw,56px) var(--gutter)}
  .footer__top{grid-template-columns:1fr 1fr}
  .hero__title{font-size:clamp(2.8rem,8vw,9rem)}
  .section__title{font-size:clamp(2rem,5vw,4rem)}
}
@media (max-width:560px){
  .work__grid{grid-template-columns:1fr}
  .svc{grid-template-columns:40px 1fr;gap:14px}
  .svc__arrow{display:none}
  .kicker{white-space:normal;line-height:1.4}
  .footer__top{grid-template-columns:1fr}
  .cta__title{font-size:clamp(2.2rem,11vw,3.5rem)}
}