/* =========================================================================
   College Student Marketing — Netflix-pattern rebuild
   Billboard + horizontal rows. Theme locked dark. One accent: Netflix red.
   Radius: one rule, 4px everywhere.
   ========================================================================= */

@font-face{
  font-family:'Javacom';
  src:url('../fonts/javacom-webfont.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* surfaces */
  --ink:#0E0E0E;
  --ink-2:#181818;
  --ink-3:#222;
  --ink-4:#2E2E2E;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);

  /* text */
  --paper:#FFFFFF;
  --paper-2:#D6D6D6;
  --dim:#8C8C8C;

  /* THE one accent */
  --red:#E50914;
  --red-hi:#F6121D;
  --red-deep:#B20710;
  --red-soft:rgba(229,9,20,.14);
  --red-line:rgba(229,9,20,.42);

  --r:4px;

  --gutter:clamp(1rem,3.6vw,3.75rem);
  --maxw:1800px;
  --row-y:clamp(2.2rem,4vw,3.4rem);
  --section-y:clamp(4rem,8vw,7rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Figtree','Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,video{max-width:100%;display:block;height:auto}
figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:var(--r)}

/* =========================================================================
   TYPE
   ========================================================================= */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.05}
p{margin:0}

.d-xl{font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:1;letter-spacing:-.035em;font-weight:900;text-wrap:balance}
.d-l{font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.05;letter-spacing:-.03em;font-weight:900;text-wrap:balance}
.d-m{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.022em;font-weight:800}
.lede{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.6;color:var(--paper-2);max-width:58ch}
.body{font-size:1rem;line-height:1.7;color:var(--paper-2);max-width:62ch}
.small{font-size:.875rem;line-height:1.6;color:var(--dim)}
.script{font-family:'Javacom','Figtree',cursive;font-weight:400;letter-spacing:0;color:var(--red)}
.accent{color:var(--red)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}

/* =========================================================================
   BUTTONS — Netflix's two weights plus red for the primary conversion
   ========================================================================= */
.btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  white-space:nowrap;
  padding:.85rem 1.6rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  border-radius:var(--r);
  font-size:.95rem;font-weight:700;letter-spacing:.005em;
  cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .16s var(--ease);
}
.btn:hover{--bg:var(--red-hi);--bd:var(--red-hi)}
.btn:active{transform:translateY(1px)}
.btn--light{--bg:#fff;--fg:#0B0B0B;--bd:#fff}
.btn--light:hover{--bg:rgba(255,255,255,.78);--bd:rgba(255,255,255,.78)}
.btn--grey{--bg:rgba(109,109,110,.65);--fg:#fff;--bd:transparent}
.btn--grey:hover{--bg:rgba(109,109,110,.42)}
.btn--lg{padding:1rem 2rem;font-size:1.02rem}
.btn svg{width:17px;height:17px;flex:none}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 8%,rgba(0,0,0,0) 100%);
  transition:background .4s var(--ease);
}
.nav.is-stuck{background:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.nav__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:2rem;
}
.nav__logo{flex:none;display:block}
.nav__logo img{width:172px}
.nav__links{
  display:flex;align-items:center;gap:1.5rem;margin-right:auto;
  font-size:.85rem;font-weight:500;color:var(--paper-2);
}
.nav__links a{transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--paper)}
.nav__right{display:flex;align-items:center;gap:.9rem;flex:none}
.nav__burger{
  display:none;flex:none;width:42px;height:42px;
  background:none;border:1px solid var(--line-2);border-radius:var(--r);
  align-items:center;justify-content:center;cursor:pointer;
}
.nav__burger span{display:block;width:17px;height:1.5px;background:#fff;position:relative}
.nav__burger span::before,.nav__burger span::after{
  content:'';position:absolute;left:0;width:17px;height:1.5px;background:#fff;
}
.nav__burger span::before{top:-6px}
.nav__burger span::after{top:6px}

.drawer{
  position:fixed;inset:0;z-index:59;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s var(--ease),visibility .5s var(--ease);
}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer a{display:block;font-size:clamp(1.7rem,7vw,2.6rem);font-weight:800;letter-spacing:-.03em;padding-block:.4rem}
.drawer .btn{margin-top:1.8rem;align-self:flex-start}
.drawer__meta{margin-top:auto;padding-top:2rem;border-top:1px solid var(--line);color:var(--dim);font-size:.9rem}

/* =========================================================================
   BILLBOARD — full-bleed looping title sequence
   ========================================================================= */
.bb{position:relative;min-height:100dvh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.bb__media{position:absolute;inset:0;z-index:-2}
.bb__media video,.bb__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  /* the loop is a title sequence with hard colour wipes; hold it back so every
     frame reads as a backdrop and the headline never loses contrast */
  filter:brightness(.78) saturate(.92) contrast(1.04);
}
.bb__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(84deg,rgba(14,14,14,.96) 0%,rgba(14,14,14,.8) 22%,rgba(14,14,14,.24) 48%,rgba(14,14,14,.04) 72%,rgba(14,14,14,.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.06) 22%,rgba(14,14,14,.06) 50%,rgba(14,14,14,.82) 86%,var(--ink) 100%);
}
.bb__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter) clamp(4rem,11vh,8.5rem);
}
.bb__copy{max-width:min(46rem,58%)}
.bb__badge{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;
  padding:.32rem .8rem .32rem .6rem;
  border-left:3px solid var(--red);background:rgba(0,0,0,.42);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.bb h1{margin-bottom:1.2rem;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.bb .lede{margin-bottom:1.9rem;font-size:clamp(1.02rem,1.25vw,1.24rem);color:#EDEDED;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.bb__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.bb__sound{
  position:absolute;right:var(--gutter);bottom:clamp(4rem,11vh,8.5rem);z-index:2;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);
  display:grid;place-items:center;cursor:pointer;color:#fff;
  transition:background .25s,border-color .25s;
}
.bb__sound:hover{background:rgba(0,0,0,.6);border-color:#fff}
.bb__sound svg{width:17px;height:17px}

/* =========================================================================
   ROWS
   ========================================================================= */
.row{padding-block:var(--row-y);position:relative}
.row__head{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  margin-bottom:1rem;
}
.row__title{font-size:clamp(1.15rem,1.55vw,1.5rem);font-weight:800;letter-spacing:-.015em}
.row__note{font-size:.85rem;color:var(--dim);max-width:46ch;text-align:right}
.row__nav{display:flex;gap:.4rem;flex:none}
.row__nav button{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;color:#fff;
  transition:background .22s,border-color .22s,opacity .22s;
}
.row__nav button:hover{background:rgba(255,255,255,.2);border-color:var(--line-2)}
.row__nav button[disabled]{opacity:.3;cursor:default}
.row__nav svg{width:14px;height:14px}

.rail{
  display:flex;gap:clamp(.5rem,.8vw,.7rem);
  padding-inline:var(--gutter);
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-block:2.4rem;margin-block:-2.4rem;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}

.marq{position:relative;overflow:hidden;padding-block:2.4rem;margin-block:-2.4rem}
.marq__track{display:flex;width:max-content;will-change:transform}
.marq__set{display:flex;gap:clamp(.5rem,.8vw,.7rem);padding-right:clamp(.5rem,.8vw,.7rem)}

/* =========================================================================
   CARDS
   ========================================================================= */
.card{
  flex:none;position:relative;
  border-radius:var(--r);background:var(--ink-2);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
  will-change:transform;
}
.card__shot{display:block;overflow:hidden;border-radius:var(--r);background:#000;position:relative}
.card__shot img{
  width:auto;height:clamp(148px,15.5vw,232px);display:block;
  filter:brightness(.9);transition:filter .38s var(--ease);
}
.card:hover{transform:scale(1.13);z-index:5;box-shadow:0 18px 44px -12px rgba(0,0,0,.9)}
.card:hover .card__shot img{filter:brightness(1)}
.card__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .7rem .55rem;border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(0deg,rgba(0,0,0,.92) 12%,transparent);
  font-size:.72rem;font-weight:600;color:#EAEAEA;
  opacity:0;transition:opacity .3s var(--ease);
}
.card:hover .card__cap{opacity:1}

/* =========================================================================
   PHONE CARDS — the Watch row
   Portrait 9:16, the shape the footage was actually shot in. Each one plays
   on its own, muted and looping, and carries its own sound control. A 16:9
   interview is letterboxed inside the frame rather than cropped to a slice.
   ========================================================================= */
.rail--phones{gap:clamp(.7rem,1.2vw,1.1rem)}
.pcard{flex:none;width:clamp(216px,17vw,268px)}
.pcard__screen{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:14px;background:#000;
  border:1px solid var(--line-2);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.95);
  transition:border-color .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pcard:hover .pcard__screen{
  transform:translateY(-6px);border-color:var(--red);
  box-shadow:0 26px 60px -18px rgba(229,9,20,.32),0 18px 44px -18px rgba(0,0,0,.95);
}
.pcard__v,.pcard__yt{position:absolute;inset:0;width:100%;height:100%}
.pcard__v{object-fit:cover;background:#000}
/* a landscape interview sits centred in the frame, never cropped to a sliver */
.pcard__yt{display:grid;place-items:center;background:#000;overflow:hidden}
/* blurred backdrop fills the letterbox left by a 16:9 frame in a 9:16 card */
.pcard__yt::before{
  content:'';position:absolute;inset:-12%;
  background:var(--poster) center/cover no-repeat;
  filter:blur(30px) saturate(1.25) brightness(.42);
  transform:scale(1.06);
}
.pcard__yt iframe{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:100%;aspect-ratio:16/9;border:0;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease);
}
.pcard__yt.is-live iframe{opacity:1}
/* poster sits under the embed and carries the card if the embed never arrives */
.pcard__yt img{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
}

.pcard__sound,.pcard__expand{
  position:absolute;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.34);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .22s,border-color .22s,transform .22s var(--ease);
}
.pcard__sound{right:.6rem;bottom:.6rem}
.pcard__expand{right:.6rem;top:.6rem}
.pcard__sound:hover,.pcard__expand:hover{background:rgba(0,0,0,.82);border-color:#fff;transform:scale(1.08)}
.pcard__sound svg,.pcard__expand svg{width:17px;height:17px}
/* the icon shows the action, not the state: muted card offers "turn sound on" */
.pcard__sound .i-sound{display:none}
.pcard__sound[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.pcard__sound[aria-pressed="true"] .i-sound{display:block}
.pcard__sound[aria-pressed="true"] .i-muted{display:none}

.pcard__meta{display:block;padding:.85rem .15rem 0}
.pcard__meta b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.pcard__meta span{display:block;font-size:.8rem;color:var(--dim);margin-top:.18rem;line-height:1.45}

/* =========================================================================
   STUDIO MARQUEE
   ========================================================================= */
.studios{border-block:1px solid var(--line);background:#0A0A0A;padding-block:clamp(1.6rem,2.6vw,2.4rem)}
.studios .marq{padding-block:0;margin-block:0}
.studios .marq__set{gap:clamp(2.4rem,5vw,5rem);padding-right:clamp(2.4rem,5vw,5rem);align-items:center}
.studios ul{display:flex;margin:0;padding:0}
.studios li{flex:none;width:clamp(84px,8vw,124px);list-style:none}
.studios img{width:100%;opacity:.44;filter:brightness(0) invert(1);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.studios li:hover img{opacity:1;transform:translateY(-2px)}

/* =========================================================================
   SERVICE PANELS
   ========================================================================= */
.panel{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.panel__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  min-height:clamp(420px,52vw,580px);
}
.panel--flip .panel__in{direction:rtl}
.panel--flip .panel__in > *{direction:ltr}
.panel__copy{padding-block:clamp(2.5rem,5vw,4rem);display:grid;gap:1.2rem;align-content:center}
.panel__shot{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:var(--ink-3)}
.panel__shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.panel:hover .panel__shot img{transform:scale(1.045)}
.panel__shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.4))}
.panel__stat{display:flex;align-items:baseline;gap:.65rem;padding-top:.9rem;
  border-top:1px solid var(--line);max-width:40ch}
.panel__stat b{font-size:1.15rem;font-weight:800;color:var(--red);letter-spacing:-.01em;white-space:nowrap}
.panel__stat span{font-size:.85rem;color:var(--dim);line-height:1.5}

/* =========================================================================
   NUMBERS
   ========================================================================= */
.figs{border-top:1px solid var(--line);background:#0A0A0A}
.figs__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(2.5rem,5vw,4.5rem)}
.fig{display:grid;gap:.5rem}
.fig__n{
  font-size:clamp(2.4rem,5vw,4.2rem);font-weight:900;letter-spacing:-.045em;line-height:.95;
  font-variant-numeric:tabular-nums;color:#fff;
}
.fig__n em{font-style:normal;color:var(--red)}
.fig__l{font-size:.88rem;color:var(--dim);max-width:30ch;line-height:1.5}

/* =========================================================================
   QUOTES
   ========================================================================= */
.quotes{background:var(--ink)}
.quotes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch}
.quote{
  padding:clamp(1.5rem,2.6vw,2.2rem);
  border-radius:var(--r);background:var(--ink-2);
  border-top:3px solid var(--red);
  display:flex;flex-direction:column;gap:1.4rem;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.quote:hover{background:var(--ink-3);transform:translateY(-4px)}
.quote blockquote{margin:0;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.5;
  letter-spacing:-.012em;color:#fff;text-wrap:pretty}
.quote blockquote::before{content:'\201C'}
.quote blockquote::after{content:'\201D'}
.quote__by{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.quote__by b{display:block;font-size:.95rem;font-weight:700}
.quote__by span{display:block;font-size:.8rem;color:var(--dim);line-height:1.45}

/* =========================================================================
   RED BAND
   ========================================================================= */
.band{position:relative;overflow:hidden;isolation:isolate;background:var(--red-deep);
  padding-block:clamp(3rem,6vw,5.2rem)}
.band::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 140% at 82% 12%,var(--red) 0%,transparent 62%),
             radial-gradient(60% 120% at 6% 92%,rgba(0,0,0,.35) 0%,transparent 60%)}
.band__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.band h2{font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.14;letter-spacing:-.028em;max-width:22ch;color:#fff}
.band .small{margin-top:.8rem;color:rgba(255,255,255,.82)}
.band .field label{color:rgba(255,255,255,.9)}
.band .field .req{color:#fff}
.band .field input{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.42);color:#fff}
.band .field input::placeholder{color:rgba(255,255,255,.62)}
.band .field input:focus{background:rgba(0,0,0,.55);border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.24)}
.band .btn{--bg:#fff;--fg:#0B0B0B;--bd:#fff}
.band .btn:hover{--bg:rgba(255,255,255,.82);--bd:rgba(255,255,255,.82)}
.band .form__status{border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.3);color:#fff}
.band .err{color:#FFD9D9}

/* =========================================================================
   FORMS
   ========================================================================= */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.05rem;min-width:0}
.field label{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-2)}
.field label .req{color:var(--red);margin-left:.2rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r);
  color:#fff;font-size:.95rem;
  transition:border-color .22s,background .22s,box-shadow .22s;
}
.field textarea{resize:vertical;min-height:6rem;line-height:1.6}
.field select{
  appearance:none;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238C8C8C' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
}
.field input::placeholder,.field textarea::placeholder{color:#7E7E7E}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:var(--ink-4);box-shadow:0 0 0 3px var(--red-soft);
}
.field .help{font-size:.78rem;color:var(--dim)}
.field .err{font-size:.78rem;color:#FF9A8B;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#FF6B5A}
.field.is-invalid .err{display:block}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:stretch}
.inline-form .field{margin:0}
.inline-form .btn{align-self:end;padding-block:.86rem}

.checks{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem;margin-bottom:1.05rem}
.check{
  display:flex;align-items:flex-start;gap:.6rem;padding:.68rem .8rem;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
  font-size:.86rem;cursor:pointer;transition:border-color .22s,background .22s;
}
.check:hover{border-color:var(--line-2)}
.check input{
  appearance:none;width:16px;height:16px;flex:none;margin-top:.2rem;
  border:1px solid var(--line-2);border-radius:2px;background:transparent;cursor:pointer;
  transition:background .18s,border-color .18s;
}
.check input:checked{background:var(--red);border-color:var(--red)}
.check:has(input:checked){border-color:var(--red-line);background:var(--red-soft)}
.radios{display:flex;gap:.5rem;flex-wrap:wrap}
.radio{
  display:inline-flex;align-items:center;gap:.42rem;padding:.48rem .85rem;
  border:1px solid var(--line);border-radius:var(--r);font-size:.85rem;cursor:pointer;background:var(--ink-3);
}
.radio input{appearance:none;width:13px;height:13px;border:1px solid var(--line-2);border-radius:50%}
.radio input:checked{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 2px var(--ink-3)}
.radio:has(input:checked){border-color:var(--red-line)}

.form__note{font-size:.78rem;color:var(--dim);margin-top:.85rem;max-width:46ch}
.form__status{display:none;margin-top:.9rem;padding:.85rem 1rem;border-radius:var(--r);
  border:1px solid var(--red-line);background:var(--red-soft);font-size:.88rem;color:#fff}
.form__status.is-on{display:block}
.form__status.is-err{border-color:#FF6B5A;background:rgba(255,107,90,.12)}

.btn.is-busy{pointer-events:none;opacity:.72}
.btn.is-busy .btn__spin{display:inline-block}
.btn__spin{display:none;width:13px;height:13px;flex:none;
  border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{background:var(--ink);border-top:1px solid var(--line)}
.contact__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start}
.social{display:flex;gap:.5rem;margin-top:2rem;list-style:none;padding:0}
.social a{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r);color:var(--paper-2);
  transition:border-color .25s,color .25s,background .25s;
}
.social a:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.social svg{width:16px;height:16px}
.contact__form{padding:clamp(1.5rem,3vw,2.6rem);border:1px solid var(--line);
  border-radius:var(--r);background:var(--ink-2)}

/* =========================================================================
   INFLUENCER BAND
   ========================================================================= */
.infl{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.infl__bg{position:absolute;inset:0;z-index:-2}
.infl__bg img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
  filter:grayscale(.4) brightness(.42)}
.infl__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,14,14,.96) 26%,rgba(14,14,14,.55) 100%)}
.infl__in{padding-block:clamp(3.5rem,7vw,6rem);display:grid;gap:1.4rem;max-width:42rem}
.infl h2{font-size:clamp(1.6rem,2.8vw,2.4rem);letter-spacing:-.03em;line-height:1.14}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{background:var(--ink);border-top:1px solid var(--line);
  padding-block:clamp(2.8rem,5vw,4rem) 2rem;color:var(--dim)}
.foot__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.4rem}
.foot__logo img{width:190px}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 2rem;font-size:.86rem}
.foot__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.foot__cols a{color:var(--dim);transition:color .22s}
.foot__cols a:hover{color:#fff;text-decoration:underline}
.foot__base{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.8rem}

/* =========================================================================
   MODALS
   ========================================================================= */
.modal{position:fixed;inset:0;z-index:80;display:none;padding:clamp(1rem,4vw,3rem);
  align-items:flex-start;justify-content:center;overflow-y:auto}
.modal.is-open{display:flex}
.modal__scrim{position:fixed;inset:0;background:rgba(0,0,0,.86);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal__panel{position:relative;z-index:1;width:100%;max-width:60rem;margin:auto;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(1.5rem,3.4vw,2.8rem)}
.modal__panel--video{max-width:min(94vw,25rem);padding:0;overflow:hidden;background:#000}
.modal__panel--video video{width:100%;max-height:86dvh}
.modal__panel--yt{max-width:min(94vw,58rem);padding:0;overflow:hidden;background:#000}
.modal__panel--yt .ratio{position:relative;aspect-ratio:16/9}
.modal__panel--yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal__x{position:absolute;top:.85rem;right:.85rem;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;background:rgba(0,0,0,.7);border:1px solid var(--line-2);
  border-radius:50%;color:#fff;cursor:pointer;transition:border-color .22s,background .22s}
.modal__x:hover{border-color:var(--red);background:var(--ink-3)}
.modal__x svg{width:15px;height:15px}
.modal__head{margin-bottom:1.6rem;padding-right:3rem}
.modal__head h2{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.03em}
.modal__head p{margin-top:.6rem}
.fieldset{border:0;padding:0;margin:0 0 1.5rem}
.fieldset legend{padding:0 0 .8rem;font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--paper-2)}

/* =========================================================================
   INFLUENCER APPLICATION PAGE
   ========================================================================= */
.apply{padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) var(--section-y)}
.apply__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.apply__aside{position:sticky;top:calc(var(--nav-h) + 2rem);display:grid;gap:1.4rem}
.apply__shot{overflow:hidden;border-radius:var(--r);aspect-ratio:4/3}
.apply__shot img{width:100%;height:100%;object-fit:cover;object-position:center 26%;filter:brightness(.88)}
.apply__form{padding:clamp(1.5rem,3vw,2.6rem);border:1px solid var(--line);
  border-radius:var(--r);background:var(--ink-2)}
.apply__form h2{margin-bottom:1.6rem}
.plat{padding:1rem 1.1rem 0;margin-bottom:.9rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--ink)}
.plat__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.7rem;margin-bottom:1rem}
.plat__head b{font-size:1rem;font-weight:700}

/* =========================================================================
   THANK YOU
   ========================================================================= */
.ty{position:relative;min-height:100dvh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.ty__bg{position:absolute;inset:0;z-index:-2}
.ty__bg video,.ty__bg img{width:100%;height:100%;object-fit:cover}
.ty__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(14,14,14,.97) 20%,rgba(14,14,14,.6) 74%,rgba(14,14,14,.9) 100%)}
.ty__in{display:grid;gap:1.4rem;max-width:42rem;padding-block:calc(var(--nav-h) + 4rem) 4rem}
.ty__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.8rem}

/* =========================================================================
   REVEAL primitives
   ========================================================================= */
.js .r-up{opacity:0;transform:translateY(24px)}
.js .r-fade{opacity:0}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1180px){
  .nav__links{gap:1.1rem;font-size:.8rem}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  :root{--nav-h:60px}
  .nav__links,  /* the sticky action bar and the drawer both carry the proposal, so the
     header keeps only the menu control and the burger stays reachable */
  .nav__cta{display:none}
  .nav__right{margin-left:auto}
  .nav__burger{display:flex}
  .bb__copy{max-width:100%}
  .bb__sound{display:none}
  .panel__in{grid-template-columns:1fr;min-height:0;gap:0}
  .panel--flip .panel__in{direction:ltr}
  .panel__shot{aspect-ratio:16/10;order:-1;margin-top:clamp(2rem,5vw,3rem)}
  .panel__copy{padding-block:clamp(1.6rem,4vw,2.4rem)}
  .band__in{grid-template-columns:1fr;gap:1.8rem}
  .quotes__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr;gap:2.5rem}
  .apply__grid{grid-template-columns:1fr;gap:2.2rem}
  .apply__aside{position:static}
  .apply__shot{aspect-ratio:16/9}
  .figs__grid{grid-template-columns:1fr;gap:1.6rem}
  .row__note{display:none}
}

@media (max-width:720px){
  :root{--section-y:clamp(3rem,10vw,4.5rem)}
  .bb{min-height:92dvh}
  .bb__in{padding-bottom:clamp(3rem,9vh,5rem)}
  .bb__cta{width:100%}
  .bb__cta .btn{flex:1 1 100%}
  .grid-2,.checks{grid-template-columns:1fr}
  .inline-form{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__top{flex-direction:column;align-items:flex-start}
  .card__shot img{height:150px}
  .row__head{align-items:flex-start}
  .ty__cta .btn{flex:1 1 100%}
}

/* =========================================================================
   MOBILE ACTION BAR
   ========================================================================= */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;
  align-items:center;gap:.55rem;
  padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.mbar__cta{flex:1}
@media (max-width:1024px){
  .mbar{display:flex}
  .foot{padding-bottom:6rem}
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .js .r-up,.js .r-fade{opacity:1;transform:none}
  .card:hover{transform:none}
  .card__cap{opacity:1}
}

/* two-column running text under the What we do heading */
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:clamp(1.5rem,3vw,3rem)}
.cols2 strong{color:#fff;font-weight:600}

/* the thank-you page: a quiet campus morning, deliberately the opposite of
   the busy imagery on the home page */
.ty__bg img{filter:brightness(.55) grayscale(.2)}
.ty__scrim{
  background:
    radial-gradient(58% 92% at 78% 8%,rgba(229,9,20,.16) 0%,transparent 62%),
    linear-gradient(180deg,rgba(14,14,14,.86),rgba(14,14,14,.72) 45%,rgba(14,14,14,.94));
}
.ty__in{text-align:center;justify-items:center;margin-inline:auto}
.ty__cta{justify-content:center}

/* =========================================================================
   MOTION LAYER SUPPORT
   ========================================================================= */

/* scroll progress rail */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:70;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red),var(--red-hi));
  pointer-events:none;
}

/* line masks for display type */
.mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask > span{display:block}
/* the hidden state of a masked line belongs to GSAP alone. Declaring it here
   too meant the tween read a value CSS kept re-asserting, and the headline
   never came up. */

/* the red rule under a panel claim draws itself in */
@property --rule{syntax:'<percentage>';initial-value:0%;inherits:false}
.panel__stat{position:relative}
.panel__stat::before{
  content:'';position:absolute;top:-1px;left:0;height:1px;
  width:var(--rule,0%);background:var(--red);
}

/* poster tiles tilt under the pointer */
.card{perspective:900px}
.card__shot{transform-style:preserve-3d;will-change:transform}

/* =========================================================================
   MOTION TOGGLE
   The OS preference is the default. This lets a visitor whose system-wide
   setting does not reflect what they want here say so, and be remembered.
   ========================================================================= */
.mt{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  padding:.42rem .7rem .42rem .6rem;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);border-radius:var(--r);
  color:var(--paper-2);cursor:pointer;
  font-size:.76rem;font-weight:600;letter-spacing:.02em;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.mt:hover{background:rgba(255,255,255,.14);border-color:var(--line-2);color:#fff}
.mt__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--dim);transition:background .22s,box-shadow .22s;
}
html.motion-on .mt__dot{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.mt__state{color:#fff;font-variant-numeric:tabular-nums;min-width:1.7em;text-align:right}
html:not(.motion-on) .mt__state{color:var(--dim)}

/* the billboard control shows its state */
.bb__sound.is-paused{border-color:var(--red);color:var(--red)}

@media (max-width:1180px){ .mt__label{display:none} }
@media (max-width:1024px){ .mt{display:none} }

/* motion off: everything sits at its end state, nothing is hidden */
html:not(.motion-on) .r-up,
html:not(.motion-on) .r-fade{opacity:1;transform:none}
html:not(.motion-on) .card:hover{transform:none}
html:not(.motion-on) .card__cap{opacity:1}
html:not(.motion-on) .panel__stat::before{width:100%}

/* motion is off because the OS asked, and the visitor has not chosen: make the
   control findable without animating anything at a moment we must not animate */
.mt.is-suggest{
  border-color:var(--red);
  background:var(--red-soft);
  color:#fff;
}
.mt.is-suggest .mt__dot{background:var(--red)}
.mt.is-suggest .mt__state{color:var(--red)}

/* the drawer carries its own motion control, since the header one is hidden
   at this width and a visitor on a phone must still be able to choose */
.drawer__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (max-width:1024px){ .mt--drawer{display:inline-flex} }

/* =========================================================================
   CENTRED SALES-PITCH LAYOUT
   One column down the middle, each section making a single point and handing
   off to the next. Rows stay full-bleed because a rail is a rail, but their
   headers and everything else align to the centre line.
   ========================================================================= */

/* ---- billboard: the pitch opens dead centre ---- */
.bb{align-items:center;text-align:center}
.bb__in{padding-bottom:0}
.bb__copy{max-width:min(62rem,92%);margin-inline:auto}
.bb__cta{justify-content:center}
.bb__badge{margin-inline:auto}
.bb .lede{margin-inline:auto}
.bb__sound{right:auto;left:50%;transform:translateX(-50%);bottom:clamp(2rem,5vh,3.5rem)}

/* ---- row headers ---- */
.row__head{
  flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  margin-bottom:1.6rem;
}
.row__title{font-size:clamp(1.5rem,2.6vw,2.4rem)}
.row__note{text-align:center;max-width:56ch;margin-inline:auto}
.row__nav{order:3}
/* a rail that fits sits centred instead of hugging the left edge */
.rail{justify-content:safe center}

/* ---- prose sections ---- */
.section .wrap > h2,
.section .wrap > .lede,
.section .wrap > .body{text-align:center;margin-inline:auto}
.cols2{text-align:center;max-width:78rem;margin-inline:auto}
.cols2 .body{margin-inline:auto}

/* ---- numbers ---- */
.figs__grid{text-align:center;justify-items:center}
.fig__l{margin-inline:auto}

/* ---- service panels ----------------------------------------------------
   Three alternating splits: image left, image right, image left. Copy is
   left-aligned here rather than centred, because centred text in a narrow
   column beside a picture reads as an accident. The rest of the page keeps
   its centred treatment. --------------------------------------------------- */
.panel__in{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;text-align:left;justify-items:stretch;
  gap:clamp(2rem,5vw,4.5rem);
  max-width:var(--maxw);
  min-height:0;
  padding-block:clamp(3.5rem,6vw,5.5rem);
}
.panel__copy{
  padding-block:0;justify-items:start;text-align:left;
  max-width:34rem;display:grid;gap:1.15rem;align-content:center;
}
.panel__copy .body{margin-inline:0}
.panel__icon{margin-inline:0}
.panel__shot{
  order:0;width:100%;max-width:none;aspect-ratio:4/5;
  border-radius:var(--r);align-self:center;
}
.panel__stat{
  justify-content:flex-start;flex-direction:row;align-items:baseline;
  gap:.65rem;margin-inline:0;padding-top:1rem;text-align:left;
  border-top:1px solid var(--line);width:100%;
}
.panel__stat::before{left:0;transform:none}
.panel__stat span{max-width:32ch}

/* the icon rule later in the sheet centres itself; win on specificity so it
   sits flush with the copy it belongs to */
.panel__copy .panel__icon{margin-inline:0}

/* cap the picture: a 4:5 portrait across a half-width column runs ~875px tall
   and strands the copy in a sea of empty space */
.panel__shot{max-width:500px;justify-self:center}
.panel--flip .panel__in .panel__shot{justify-self:center}

/* every other panel puts the picture on the right */
.panel--flip .panel__in{direction:rtl}
.panel--flip .panel__in > *{direction:ltr}

@media (max-width:860px){
  /* one column, picture first, copy under it */
  .panel__in{
    grid-template-columns:1fr;min-height:0;
    gap:clamp(1.5rem,4vw,2.2rem);padding-block:clamp(2.5rem,7vw,3.5rem);
  }
  .panel--flip .panel__in{direction:ltr}
  .panel__shot{order:-1;width:min(420px,100%);justify-self:center}
  .panel__copy{max-width:none;justify-self:center}
}

/* ---- quotes ---- */
.quotes__grid{text-align:center}
.quote{align-items:center}
.quote__by{width:100%}

/* ---- the ask ---- */
.band__in{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:56rem;margin-inline:auto}
.band h2{margin-inline:auto}
.band form{width:min(34rem,100%)}

.contact__grid{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:62rem;margin-inline:auto}
.contact__grid > div:first-child{display:grid;justify-items:center}
.contact__grid .lede{margin-inline:auto}
.social{justify-content:center}
.contact__form{width:min(46rem,100%);text-align:left}
.contact__form .btn{width:100%}

.infl__in{max-width:56rem;margin-inline:auto;text-align:center;justify-items:center}
.infl__scrim{background:linear-gradient(180deg,rgba(14,14,14,.72),rgba(14,14,14,.92))}
.infl .btn{justify-self:center}

/* ---- footer ---- */
.foot__top{justify-content:center;flex-direction:column;text-align:center;gap:1rem}
.foot__cols{text-align:center;justify-items:center}
.foot__base{justify-content:center;text-align:center}

@media (max-width:720px){
  .contact__form{text-align:left}
  .panel__shot{width:min(340px,86%)}
}

/* =========================================================================
   REAL PHOTOGRAPHY — section grounds and the campus-year row
   ========================================================================= */

/* a service icon sits above its claim */
.panel__icon{
  display:grid;place-items:center;width:52px;height:52px;margin-inline:auto;
  border-radius:50%;background:var(--red-soft);border:1px solid var(--red-line);
  color:var(--red);
}
.panel__icon svg{width:24px;height:24px}

/* numbers over game day */
.figs{position:relative;overflow:hidden;isolation:isolate;border-block:1px solid var(--line)}
.figs__bg{position:absolute;inset:0;z-index:-2}
.figs__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(.25) contrast(1.06)}
.figs__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.94),rgba(10,10,10,.8) 45%,rgba(10,10,10,.95)),
             radial-gradient(60% 90% at 50% 50%,rgba(229,9,20,.12),transparent 70%);
}
.figs__grid{position:relative;padding-block:clamp(3.5rem,7vw,6rem)}

/* testimonials over a screening */
.quotes{position:relative;overflow:hidden;isolation:isolate}
.quotes__bg{position:absolute;inset:0;z-index:-2}
.quotes__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.35) brightness(.5)}
.quotes__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink),rgba(14,14,14,.9) 30%,rgba(14,14,14,.9) 70%,var(--ink))}
.quotes .quote{background:rgba(24,24,24,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* the campus year row */
.ycard{flex:none;width:clamp(250px,25vw,360px)}
.ycard__shot{
  display:block;overflow:hidden;border-radius:var(--r);background:var(--ink-3);
  aspect-ratio:3/2;position:relative;
}
.ycard__shot img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.86);transition:filter .45s var(--ease),transform .7s var(--ease);
}
.ycard:hover .ycard__shot img{filter:brightness(1);transform:scale(1.05)}
.ycard__meta{display:block;padding:.85rem .15rem 0;text-align:center}
.ycard__meta b{display:block;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.ycard__meta span{display:block;font-size:.82rem;color:var(--dim);margin-top:.2rem;line-height:1.45}

/* footer social row */
.foot__social{display:flex;justify-content:center;margin-top:2.2rem}
.foot__social .social{margin-top:0}

/* =========================================================================
   TESTIMONIAL MARKS + INFLUENCER COMMERCIAL
   ========================================================================= */

/* each quote carries the mark of the house it came from */
.quote__mark{display:block;margin-bottom:1.1rem;line-height:0}
.quote__mark img{display:inline-block;width:auto}
.quote__mark--logo img{max-height:58px;max-width:210px;opacity:.92}
.quote__mark--photo img{
  height:76px;width:76px;object-fit:cover;object-position:center 22%;
  border-radius:50%;border:1px solid var(--line-2);
}
.quotes .quote:hover .quote__mark--logo img{opacity:1}

/* the influencer band runs the commercial beside the copy */
.infl__in--split{
  display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;text-align:left;
  grid-template-columns:minmax(0,1fr) minmax(240px,300px);
}
.infl__copy{display:grid;justify-items:start;gap:0}
.infl__copy .btn{margin-top:1.6rem}
.pcard--infl{width:100%;max-width:300px;margin:0;justify-self:end}
@media (max-width:860px){
  .infl__in--split{grid-template-columns:1fr;text-align:center;justify-items:center}
  .infl__copy{justify-items:center}
  .pcard--infl{justify-self:center;max-width:260px}
}