/* Crazy Boyz Entertainment — one-pager
   Colours, type scale and spacing live here. Safe to tweak. */

:root{
  --bg:#0a0a0b;
  --panel:#101012;
  --card:#161618;
  --orange:#d86a26;
  --white:#fff;
  --grey:#96969a;
  --line:#2c2c30;
  --wrap:1340px;
  --pad:clamp(20px,5vw,110px);
  --r:26px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  background:var(--bg);color:var(--white);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:12px var(--pad);
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.5) 60%,transparent);
  transition:background .3s;
}
.hdr.is-stuck{background:rgba(8,8,9,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__logo img{height:42px;width:auto}
.hdr__logo--right img{height:38px}
.hdr__nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.hdr__nav a{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#cfcfd2;padding:6px 0;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;
}
.hdr__nav a:hover,.hdr__nav a.is-active{color:#fff;border-color:var(--orange)}
.hdr__burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.hdr__burger span{display:block;width:24px;height:2px;background:#fff}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-bottom:36px}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Darkest behind the copy on the left, clearing to the right so the film is
   actually visible rather than sitting under a flat black wash. */
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.46) 40%,rgba(0,0,0,0) 72%),
    linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.3) 26%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.92) 100%)}
/* .wrap sets margin:0 auto, and inside the hero's flex column those auto side
   margins shrink the block to its content and centre it — which is why the
   headline sat in the middle of the screen instead of on the left margin like
   every other section. width:100% puts it back. */
.hero__inner,.hero__stats{width:100%}
.hero__inner{position:relative;z-index:2;margin-top:auto;padding-bottom:38px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.hero__h1{font-size:clamp(30px,4.4vw,58px);font-weight:800;line-height:1.04;letter-spacing:-.02em;text-transform:uppercase}
.hero__h1 span{display:block}
.hero__sub{max-width:560px;margin-top:20px;font-size:clamp(14px,1.1vw,16px);line-height:1.7;color:#dcdce0}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:2px solid transparent;transition:.2s;cursor:pointer}
.btn--solid{background:var(--orange);color:#fff}
.btn--solid:hover{background:#eb7a33}
.btn--ghost{border-color:#e9e9eb;color:#fff}
.btn--ghost:hover{background:#fff;color:#111}
.hero__stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  border-top:1px solid rgba(255,255,255,.26);padding-top:22px}
.hero__stats b{display:block;font-size:clamp(19px,2.1vw,32px);font-weight:800;line-height:1}
.hero__stats i{display:block;margin-top:7px;font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#c3c3c7}

/* ---------- sections ---------- */
.sec{padding:clamp(54px,6.4vw,96px) 0}
.sec--panel{background:var(--panel)}
.label{font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.label--mt{margin-top:52px}
.h2{font-size:clamp(23px,3vw,40px);font-weight:700;line-height:1.12;letter-spacing:-.015em}
.h2--sm{font-size:clamp(16px,1.6vw,22px);font-weight:600}
.caption{margin-top:12px;font-size:clamp(14px,1.3vw,18px);font-weight:600;color:var(--orange)}
.sub{margin-top:16px;max-width:640px;font-size:clamp(13px,1.05vw,15px);line-height:1.75;color:var(--grey)}
.sub--wide{max-width:820px}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}

/* ---------- capability cards ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:44px}
.cap{background:var(--card);display:flex;flex-direction:column}
.cap__img{position:relative;aspect-ratio:16/9;overflow:hidden}
.cap__img img{width:100%;height:100%;object-fit:cover}
.cap__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.cap__num{position:absolute;left:0;bottom:0;z-index:2;background:var(--orange);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:8px 13px}
.cap__body{padding:26px;display:flex;flex-direction:column;flex:1}
.cap__body h3{font-size:18px;font-weight:700}
.cap__tag{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--orange)}
.cap__body p{margin-top:13px;font-size:13.5px;line-height:1.7;color:#b9b9bd}
.cap__list{list-style:none;margin-top:17px;display:grid;gap:8px}
.cap__list li{position:relative;padding-left:18px;font-size:13.5px;color:#d2d2d5}
.cap__list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ---------- rails ---------- */
.arrows{display:flex;gap:10px}
.arrow{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:none;color:#a4a4a8;
  font-size:17px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.arrow:hover:not(:disabled){border-color:var(--orange);background:var(--orange);color:#fff}
.arrow:disabled{opacity:.35;cursor:default}

/* The rails run full-bleed while .wrap is capped at --wrap and centred, so on a
   wide screen the cards started ~52px left of the heading above them. This lines
   the first card up with the text; on narrow screens the calc goes negative and
   max() falls back to the plain page padding. */
.rail{display:flex;gap:22px;margin-top:38px;
  padding:0 max(var(--pad), calc((100% - var(--wrap))/2 + var(--pad))) 4px;
  overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-left:max(var(--pad), calc((100% - var(--wrap))/2 + var(--pad)));
  scrollbar-width:none;cursor:grab;
  /* keeps a sideways swipe inside the rail instead of rubber-banding the page
     or triggering the browser's back gesture */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}

.card{width:min(380px,80vw);background:var(--card);display:block;text-align:left;border:0;padding:0;
  font-family:inherit;color:inherit}
.card--link{cursor:pointer}
.card__img{position:relative;aspect-ratio:3/2;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card--link:hover .card__img img{transform:scale(1.05)}
.card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 36%,rgba(0,0,0,.84))}
.card__meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.card__tag{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.card__meta h3{margin-top:6px;font-size:17px;font-weight:700;line-height:1.22}
.card__did{padding:18px;font-size:13px;line-height:1.6;color:#b9b9bd}

/* ---------- two-row rails (work, AI, films) ----------
   Half-width cards stacked two deep, still scrolling sideways. The before/after
   rail keeps its own full-width cards and is untouched. */
.rail--grid{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);
  grid-auto-columns:290px;
  justify-content:start;
  align-items:start;
  gap:18px 16px;
}
.rail--grid .card{width:290px}
.rail--grid .card__img{aspect-ratio:16/9}
.rail--grid .card__meta{left:12px;right:12px;bottom:10px}
.rail--grid .card__tag{font-size:8px;letter-spacing:.14em}
.rail--grid .card__meta h3{font-size:12.5px;margin-top:3px;line-height:1.2}
.rail--grid .card__play{width:38px;height:38px}
.rail--grid .card__play::before{border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
/* the old paragraph, trimmed to two lines so both rows stay level */
.rail--grid .card__did{
  padding:9px 12px 12px;font-size:10.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-height:calc(2 * 1.45em + 21px);box-sizing:content-box}   /* hard stop at two lines */

/* credits replace the paragraph once a director or producer is filled in */
.crd{padding:9px 12px 12px;display:grid;gap:3px}
.crd span{display:block;font-size:10px;line-height:1.35;color:#b9b9bd;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crd span i{font-style:normal;color:#6f6f75;letter-spacing:.1em;text-transform:uppercase;
  font-size:8.5px;margin-right:6px}

@media (max-width:720px){
  .rail--grid{gap:14px 12px;grid-auto-columns:44vw}
  .rail--grid .card{width:44vw}
  .rail--grid .card__meta h3{font-size:12px}
}

/* ---------- vertical rail (reels & shorts) ----------
   9:16 cards in a single sideways row. Portrait art is tall, so a second row
   would push the whole page down — one row is right here. Extra top margin
   because a tall card crowds the heading more than a landscape one does. */
.rail--vert{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:196px;
  grid-template-rows:auto;
  justify-content:start;
  align-items:start;
  gap:16px;
  margin-top:46px;
}
.rail--vert .card{width:196px}
.rail--vert .card__img{aspect-ratio:9/16}          /* the whole point */
.rail--vert .card__meta{left:14px;right:14px;bottom:14px}
.rail--vert .card__tag{font-size:8.5px;letter-spacing:.14em}
.rail--vert .card__meta h3{font-size:13.5px;margin-top:4px;line-height:1.22}
.rail--vert .card__play{width:46px;height:46px}
.rail--vert .card__play::before{border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
.rail--vert .crd{padding:10px 13px 13px}
.rail--vert .card__did{
  padding:10px 13px 13px;font-size:10.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* small corner flag so the section reads as reels at a glance */
.vflag{position:absolute;top:10px;right:10px;z-index:3;
  background:rgba(10,10,12,.72);backdrop-filter:blur(3px);
  color:#fff;font-size:8px;font-weight:700;letter-spacing:.14em;
  padding:4px 7px;border-radius:3px}

@media (max-width:720px){
  .rail--vert{gap:12px;grid-auto-columns:41vw;margin-top:34px}
  .rail--vert .card{width:41vw}
  .rail--vert .card__meta h3{font-size:12px}
}
.card__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);z-index:3;
  width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
  background:rgba(10,10,12,.42);backdrop-filter:blur(3px);
  display:grid;place-items:center;opacity:0;transition:.25s;
}
.card__play::before{content:"";border-left:15px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.card--link:hover .card__play,.card--link:focus-visible .card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}

.bar{position:relative;height:4px;background:#2e2e32;margin-top:30px;overflow:hidden}
.bar span{position:absolute;inset:0 auto 0 0;width:35%;background:var(--orange);transition:.15s}
.hint{margin-top:12px;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#6d6d72}

/* ---------- before / after ---------- */
.rail--ba>*{width:min(720px,86vw)}
/* touch-action must stay open here, or a sideways swipe across the card is a
   dead zone: the browser won't scroll the rail and nothing else handles it.
   Only the grip itself claims the gesture. */
.ba{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;
  touch-action:pan-x pan-y;user-select:none}
.ba video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 50%);will-change:clip-path}
.ba__line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;z-index:3}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:50px;height:50px;border-radius:50%;border:3px solid #fff;background:rgba(12,12,14,.72);
  display:grid;place-items:center;color:#fff;font-size:14px;letter-spacing:2px;cursor:ew-resize;backdrop-filter:blur(3px);
  /* the handle owns its own gesture so dragging the wipe never scrolls the rail */
  touch-action:none}
/* a wider invisible grab area — a 50px circle is a small target with a thumb */
.ba__grip::before{content:"";position:absolute;inset:-16px;border-radius:50%}
.ba__tag{position:absolute;bottom:16px;z-index:3;font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;pointer-events:none}
.ba__tag--b{left:18px;color:#fff}
.ba__tag--a{right:18px;color:var(--orange)}
.ba__title{margin-top:14px;font-size:15px;font-weight:600}

/* ---------- ai capability strip ---------- */
.aicaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin-top:48px}
.aicap{background:var(--card);border-left:4px solid var(--orange);padding:22px}
.aicap h3{font-size:14.5px;font-weight:700}
.aicap p{margin-top:10px;font-size:13px;line-height:1.65;color:#b9b9bd}

/* ---------- vision ---------- */
.vision{position:relative;background:var(--orange);text-align:center;padding:clamp(44px,5.6vw,72px) var(--pad);overflow:hidden}
.vision__label{font-size:10px;font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:#ffe4d2}
.vision__h2{margin-top:13px;font-size:clamp(22px,3.6vw,42px);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.vision__sub{margin-top:13px;font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#ffe8da}

/* ---------- clients ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px;margin-top:34px;align-items:center}
.logos img{width:100%;height:48px;object-fit:contain;opacity:.92;transition:.25s}
.logos img:hover{opacity:1;transform:scale(1.04)}

/* ---------- studio + team ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;margin-top:28px}
.cols p{font-size:14.5px;line-height:1.75;color:#cacace}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px 22px;margin-top:30px}
.member__ph{width:98px;height:98px;border-radius:50%;overflow:hidden;background:#202023;border:2px solid #3a3a3e;
  display:grid;place-items:center;font-size:25px;font-weight:700;color:#5f5f64}
.member__ph img{width:100%;height:100%;object-fit:cover}
.member h3{margin-top:16px;font-size:15.5px;font-weight:700}
.member__nick{margin-top:3px;font-size:13px;color:var(--orange)}
.member__role{margin-top:6px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8b8b90}
.member p{margin-top:10px;font-size:12.5px;line-height:1.6;color:#b4b4b8}

/* ---------- footer ---------- */
.foot{background:var(--panel);padding:clamp(48px,5.6vw,80px) 0 38px}
.foot__top{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.foot__h2{font-size:clamp(23px,3vw,40px);font-weight:700;line-height:1.12}
.foot__h2 em{display:block;font-style:normal;color:var(--orange)}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:46px;
  border-top:1px solid var(--line);padding-top:28px}
.foot__grid b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px}
.foot__grid a,.foot__grid span{font-size:13.5px;color:#d2d2d5;line-height:1.6}
.foot__social{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px}
.foot__social a{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9f}
.foot__social a:hover{color:var(--orange)}
/* two (or more) brands, each with its own handles */
.foot__social--grouped{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px 40px;margin-top:34px;border-top:1px solid var(--line);padding-top:26px}
.socgrp b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px}
.socgrp__row{display:flex;flex-wrap:wrap;gap:16px 18px}
/* shared links carry no heading, so nudge them down to sit on the same
   baseline as the labelled groups beside them */
.socgrp--plain{align-self:end}
@media (max-width:640px){
  .foot__social--grouped{grid-template-columns:1fr;gap:22px}
}
.foot__copy{margin-top:28px;font-size:11.5px;color:#6d6d72}

/* ---------- video lightbox ---------- */
/* Plain flow layout: close button, then the film, then the caption. Nothing
   here is absolutely positioned against anything else, which is what made the
   player sit 50px high and clip the top of every video on a phone. */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,3vw,40px);
  background:rgba(4,4,6,.94);backdrop-filter:blur(6px)}
.lb[hidden]{display:none}
.lb__stage{display:flex;flex-direction:column;align-items:stretch;gap:10px;max-width:100%}
.lb__box{position:relative;overflow:hidden;background:#000;align-self:center;
  width:min(1180px,100%);aspect-ratio:16/9}
#lbFrame{position:absolute;inset:0}
#lbFrame iframe,#lbFrame video{position:absolute;left:0;top:0;width:100%;height:100%;
  border:0;display:block;background:#000}
.lb__x{align-self:flex-end;background:none;border:0;color:#fff;font-size:30px;line-height:1;
  cursor:pointer;padding:2px 6px;opacity:.85;order:-1}
.lb__x:hover{opacity:1;color:var(--orange)}
.lb__cap{font-size:12.5px;color:#b9b9bd;text-align:left}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hdr__nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:center;gap:0;
    background:rgba(8,8,9,.985);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s}
  .hdr__nav.is-open{max-height:70vh}
  .hdr__nav a{padding:15px 0;width:100%;text-align:center;border-bottom:1px solid #1c1c1f}
  .hdr__burger{display:flex}
  .hdr__logo--right{display:none}
}
@media (max-width:720px){
  /* copy runs the full width on a phone, so the sideways scrim isn't wanted */
  .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.38) 26%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.94) 100%)}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .sec__head{align-items:flex-start}
  .arrows{display:none}
  .hdr__logo img{height:34px}
  .ba__grip{width:42px;height:42px;font-size:13px}
  .team{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:26px 16px}
  .member__ph{width:80px;height:80px;font-size:21px}
  /* AI capability boxes: two-up and tighter, so the strip is one screen
     instead of four stacked blocks */
  .aicaps{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
  .aicap{padding:14px 13px;border-left-width:3px}
  .aicap h3{font-size:12.5px;line-height:1.3}
  .aicap p{margin-top:7px;font-size:11.5px;line-height:1.55}
}
@media (max-width:360px){
  .aicap h3{font-size:11.5px}
  .aicap p{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}