/* ============================================================
   Matt Osborn — UGC Portfolio
   ============================================================ */

:root{
  /* Colour — "steel blue": muted accent so it doesn't fight the footage.
     Swap --blaze alone to change the whole accent. ---------- */
  --paper:      #FFFFFF;
  --paper-2:    #EDEFF2;   /* cool light grey band */
  --ink:        #14181F;
  --ink-2:      #6B7280;
  --line:       #DCDFE4;
  --blaze:      #3F6FA8;
  --blaze-ink:  #2C5079;

  /* Type --------------------------------------------------- */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "Archivo", system-ui, sans-serif;  /* label/utility face */

  /* Rhythm ------------------------------------------------- */
  --pad:     clamp(1.25rem, 5vw, 4rem);
  --sec:     clamp(4.5rem, 11vw, 9.5rem);
  --maxw:    1240px;

  --ease:    cubic-bezier(.22,.7,.3,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--blaze);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-family:var(--mono); font-weight:640; font-size:.8rem;
}
.skip:focus{ left:0; }

/* ── Shared type ───────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-weight:640;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blaze);
  margin-bottom:1.25rem;
}
.eyebrow__sep{ color:var(--line); margin-inline:.4em; }

.sec-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.numbers .sec-head{ margin-bottom:clamp(1.1rem,2vw,1.6rem); }
/* the band is meant to be compact, so the heading is set smaller here than
   the page's other section titles */
.numbers .sec-title{
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);
  max-width:26ch;
}
.numbers .sec-sub{ margin-top:.6rem; font-size:.95rem; }

.sec-title{
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 750;
  font-size:clamp(2rem,1.3rem + 3vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
  /* ch resolves against the title's own size, so this really is ~2 lines */
  max-width:19ch;
}
.sec-sub{
  margin-top:1.1rem;
  color:var(--ink-2);
  max-width:46ch;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.6rem;
  font-family:var(--mono); font-weight:640; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease),
             transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--blaze); border-color:var(--blaze); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* ── Header ────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad);
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__mark{
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 780;
  font-size:1.02rem; letter-spacing:-.03em;
  text-decoration:none;
}

.nav__links{ display:flex; align-items:center; }

/* ── Nav button ─────────────────────────────────────────────
   Variant 1: solid pill. To swap, replace this one block with
   another variant from the picker page. */
.nav__cta{
  display:inline-flex; align-items:center;
  padding:.62rem 1.2rem;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:999px;
  font-family:var(--mono); font-weight:640; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease);
}
.nav__cta:hover{
  background:var(--blaze);
  border-color:var(--blaze);
  transform:translateY(-1px);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);
  position:relative;
  isolation:isolate;
  /* corner aurora: cool bloom top-right, warm counterweight bottom-left */
  background:
    radial-gradient(95% 75% at 88% 6%,  rgba(127,168,212,.55), transparent 60%),
    radial-gradient(85% 70% at 6% 92%,  rgba(217,140,106,.32), transparent 62%),
    radial-gradient(70% 60% at 50% 45%, rgba(63,111,168,.16),  transparent 70%),
    #FBFBFC;
}
/* film grain, so the gradient reads as printed rather than digital */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.30;
  mix-blend-mode:multiply;
}
.hero__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(2.6rem,1.1rem + 6.4vw,6rem);
  line-height:.94;
  letter-spacing:-.045em;
  margin:0;
}
.hero__title em{
  font-style:normal;
  color:var(--blaze);
  position:relative;
}
.hero__actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* phone / reel frame */
.phone{
  display:block; width:100%;
  padding:0; margin:0; border:0; cursor:pointer;
  position:relative;
  aspect-ratio:9/16;
  background:var(--ink);
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 30px 60px -30px rgba(16,17,20,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.phone:hover{
  transform:translateY(-4px);
  box-shadow:0 36px 66px -28px rgba(16,17,20,.55);
}
.phone__video{ width:100%; height:100%; object-fit:cover; }

.phone__sound{
  position:absolute; left:50%; bottom:1rem;
  translate:-50% 0;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .85rem;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border-radius:999px;
  font-family:var(--mono); font-weight:640; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.phone__sound::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--blaze);
}
.phone:hover .phone__sound{ background:var(--blaze); color:#fff; }
.phone:hover .phone__sound::before{ background:#fff; }
.phone__caption{
  margin-top:.9rem;
  text-align:center;
  font-family:var(--mono); font-weight:640; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}

@media (max-width:880px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__reel{ max-width:290px; }
}

/* ── Brand marquee ─────────────────────────────────────────── */
/* Sits flush under the hero — no page-coloured gap above the black strip. */
.brands{ padding:0; background:var(--paper); }
.brands__strip{
  --logo-scale:1;
  background:#000000;
  padding-block:clamp(1.1rem,2vw,1.6rem);
  isolation:isolate;   /* keeps the logo blend working against the black */
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 55s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* Equal gaps, and each logo scaled to the same optical AREA rather than the
   same bounding box. A uniform box makes a long thin wordmark and a squat
   square mark look nothing alike; matching area is what actually reads as
   "the same size". Heights below are derived from each file's real cropped
   dimensions — regenerate them if you swap a logo. */
.marquee__group{
  display:flex; align-items:center; flex-shrink:0;
  gap:clamp(2.75rem,4.5vw,4.75rem);
  padding-right:clamp(2.75rem,4.5vw,4.75rem);
}
.marquee__group li{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  /* fallback if a logo file is ever missing */
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 640;
  font-size:clamp(.9rem,.8rem + .5vw,1.15rem);
  letter-spacing:-.02em;
  white-space:nowrap;
  color:#FFFFFF;
}

.brand-logo{
  height:calc(var(--lh,36px) * var(--logo-scale,1));
  width:auto;
  object-fit:contain;
  /* Dark artwork on a light ground: invert makes the artwork pale and the
     background black, the brightness lift pulls mid-tone (coloured) artwork
     up to white, and the contrast push crushes the background to true black.
     Screen then drops that black, so no file shows a box around it. */
  filter:grayscale(1) invert(1) brightness(1.35) contrast(3);
  mix-blend-mode:screen;
}
/* Pale artwork already on a dark or coloured ground: threshold instead. */
.marquee__group li[data-light] .brand-logo{
  filter:grayscale(1) brightness(.7) contrast(5);
}

.marquee__group li[data-logo="amazon"] .brand-logo{ --lh:40.0px; }  /* 3.24:1 */
.marquee__group li[data-logo="cashapp"] .brand-logo{ --lh:34.4px; }  /* 4.39:1 */
.marquee__group li[data-logo="cloaked"] .brand-logo{ --lh:26.1px; }  /* 6.89:1 */
.marquee__group li[data-logo="cozy-zero"] .brand-logo{ --lh:43.8px; }  /* 2.71:1 */
.marquee__group li[data-logo="depology"] .brand-logo{ --lh:38.0px; }  /* 3.58:1 */
.marquee__group li[data-logo="dr-squatch"] .brand-logo{ --lh:42.4px; }  /* 2.89:1 */
.marquee__group li[data-logo="feedbird"] .brand-logo{ --lh:28.0px; }  /* 6.43:1 */
.marquee__group li[data-logo="gfiber"] .brand-logo{ --lh:30.2px; }  /* 5.67:1 */
.marquee__group li[data-logo="headway"] .brand-logo{ --lh:32.8px; }  /* 4.83:1 */
.marquee__group li[data-logo="jacoby-meyers"] .brand-logo{ --lh:30.6px; }  /* 5.54:1 */
.marquee__group li[data-logo="kalshi"] .brand-logo{ --lh:37.3px; }  /* 3.73:1 */
.marquee__group li[data-logo="live-oak-fiber"] .brand-logo{ --lh:33.5px; }  /* 4.63:1 */
.marquee__group li[data-logo="mucho"] .brand-logo{ --lh:30.3px; }  /* 5.66:1 */
.marquee__group li[data-logo="orangetheory"] .brand-logo{ --lh:36.0px; }  /* 4.01:1 */
.marquee__group li[data-logo="partsgeek"] .brand-logo{ --lh:46.0px; }  /* 2.15:1 */
.marquee__group li[data-logo="primo-golf"] .brand-logo{ --lh:44.5px; }  /* 2.61:1 */
.marquee__group li[data-logo="roblox"] .brand-logo{ --lh:31.7px; }  /* 5.16:1 */
.marquee__group li[data-logo="shady-rays"] .brand-logo{ --lh:14.2px; }  /* 12.67:1 */
.marquee__group li[data-logo="snappower"] .brand-logo{ --lh:37.1px; }  /* 3.76:1 */
.marquee__group li[data-logo="suti"] .brand-logo{ --lh:46.0px; }  /* 2.28:1 */
.marquee__group li[data-logo="timeleft"] .brand-logo{ --lh:40.0px; }  /* 3.25:1 */
.marquee__group li[data-logo="unit1"] .brand-logo{ --lh:36.6px; }  /* 3.87:1 */
.marquee__group li[data-logo="venom-scents"] .brand-logo{ --lh:35.7px; }  /* 4.06:1 */
.marquee__group li[data-logo="w-jake-paul"] .brand-logo{ --lh:46.0px; }  /* 1.28:1 */

@keyframes slide{ to{ transform:translateX(-50%); } }

/* --logo-scale must stay unitless (it multiplies a px height), so it steps
   at breakpoints rather than interpolating off the viewport. */
@media (max-width:1000px){ .brands__strip{ --logo-scale:.88; } }
@media (max-width:760px){  .brands__strip{ --logo-scale:.78; } }
@media (max-width:520px){  .brands__strip{ --logo-scale:.68; } }

/* ── Past work reel ─────────────────────────────────────────
   Snap-scrolling rail, built the way zacksammons.com does it: native video
   controls (which is where play / scrub / fullscreen / download come from),
   a brand badge over each card, and round arrows overlaid on the edges. */
.reel{ padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,5.5rem); background:var(--paper); }
.reel__wrap{ position:relative; }
/* discount the rail's bottom padding so the arrows centre on the cards */
.reel__arrow{ margin-top:-.6rem; }

.reel__rail{
  --gap:clamp(.85rem,1.6vw,1.25rem);
  --per-view:4;                       /* how many cards fill the container */
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:1.25rem;
  margin:0; list-style:none;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.reel__rail::-webkit-scrollbar{ display:none; }

.reel__card{
  position:relative;
  flex:0 0 auto;
  /* sized so exactly --per-view cards span the container, which makes one
     arrow press swap a clean full set */
  width:calc(
    (min(100vw, var(--maxw)) - var(--pad) * 2 - var(--gap) * (var(--per-view) - 1))
    / var(--per-view)
  );
  aspect-ratio:9/16;
  border-radius:18px;
  overflow:hidden;
  background:var(--ink);
  scroll-snap-align:start;
}
.reel__card video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
}

.reel__badge{
  position:absolute; top:.65rem; left:.65rem; z-index:2;
  padding:.3rem .65rem;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  border-radius:100px;
  font-family:var(--mono); font-weight:640;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:#FFFFFF;
  pointer-events:none;          /* never blocks the video's own controls */
}

.reel__arrow{
  position:absolute; top:50%;
  translate:0 -50%;
  z-index:5;
  width:clamp(52px,4.4vw,62px); aspect-ratio:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper);
  border:0; border-radius:50%;
  font-size:1.15rem;
  cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(20,24,31,.6);
  transition:background .25s var(--ease), opacity .25s var(--ease),
             transform .25s var(--ease);
}
.reel__arrow:hover{ background:var(--blaze); transform:translateY(-1px); }
/* Sat in the page gutter beside the rail; tucked inside once the gutter
   runs out. The row loops, so neither is ever a dead end. */
.reel__arrow--prev{ left:calc(var(--pad) * -1 + .2rem); }
.reel__arrow--next{ right:calc(var(--pad) * -1 + .2rem); }
@media (max-width:1180px){
  .reel__arrow--prev{ left:.4rem; }
  .reel__arrow--next{ right:.4rem; }
}

@media (max-width:900px){ .reel__rail{ --per-view:2; } }
@media (max-width:560px){ .reel__rail{ --per-view:1; } }
@media (prefers-reduced-motion:reduce){
  .reel__rail{ scroll-behavior:auto; }
  .reel__arrow{ transition:none; }
}

/* ── Numbers ───────────────────────────────────────────────── */
/* Condensed black band under the video carousel. The accent rule on top is
   the divider between the carousel and the stats. */
.numbers{
  padding:clamp(2rem,3.5vw,3rem) 0 clamp(2.25rem,4vw,3.25rem);
  background:#000000;
  color:var(--paper);
  border-top:2px solid var(--blaze);
}
.numbers .sec-sub{ color:#9EA1A8; }

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.22);
}
.stat{
  padding:clamp(1.25rem,2.5vw,1.85rem) 1.25rem clamp(1.25rem,2.5vw,1.85rem) 0;
}
.stat + .stat{
  padding-left:clamp(1.25rem,2.5vw,2.25rem);
  border-left:1px solid rgba(255,255,255,.16);
}

.stat__num{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 96,"wght" 800;
  font-size:clamp(2.4rem,1.2rem + 4.4vw,4.4rem);
  line-height:.92;
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:var(--blaze);
}
.stat__label{
  display:block; margin-top:1rem;
  font-size:1rem; font-weight:600;
}

/* third stat: a link out to Instagram rather than a figure */
.stat__ig{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(3.1rem,2rem + 3.4vw,4.6rem);
  aspect-ratio:1;
  color:var(--blaze);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.stat__ig svg{ width:100%; height:100%; display:block; }
.stat__ig:hover{ color:#FFFFFF; transform:translateY(-3px); }
.stat--ig{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.stat--ig .stat__label{ margin-top:.85rem; }
.stat__seeit{ display:inline-flex; align-items:center; gap:.5rem; }
.stat__arrow{
  font-size:1.1em; line-height:1;
  color:var(--blaze);
}
.stat__src{
  display:block; margin-top:.35rem;
  font-family:var(--mono); font-weight:640; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:#8A8D94;
}
@media (max-width:720px){
  .stats{ grid-template-columns:1fr; }
  .stat,.stat + .stat{
    padding-left:0; border-left:0;
    border-bottom:1px solid rgba(255,255,255,.16);
  }
  .stat:last-child{ border-bottom:0; }
}

/* ── Reel wall ─────────────────────────────────────────────── */
/* Silent, always drifting. Deliberately has no controls: it is proof of
   volume, not a player. The clickable work grid below is the player.   */
/* The wall now follows the brand marquee, so it stands on its own as the
   first dark beat. The stats are the second, much further down. */
.wall{
  padding:clamp(2.75rem,5.5vw,4.5rem) 0 clamp(3.25rem,6.5vw,5.5rem);
  background:var(--paper);
  overflow:hidden;
}
.wall__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.wall__track{
  display:flex; width:max-content;
  /* left-to-right */
  animation:wall-drift 42s linear infinite reverse;
}

.wall__group{
  display:flex; flex-shrink:0;
  gap:clamp(.6rem,1.2vw,1rem);
  padding-right:clamp(.6rem,1.2vw,1rem);
}
.wall__group li{
  flex:0 0 auto;
  width:clamp(132px,15vw,215px);
  aspect-ratio:9/16;
  border-radius:10px;
  overflow:hidden;
  background:var(--paper-2);
}
.wall__group video,
.wall__group img{ width:100%; height:100%; object-fit:cover; }

@keyframes wall-drift{ to{ transform:translateX(-50%); } }

/* No animation available? Let people drag through it instead. */
@media (prefers-reduced-motion:reduce){
  .wall__viewport{
    overflow-x:auto;
    -webkit-mask-image:none; mask-image:none;
  }
  .wall__track{ animation:none; }
}


/* ── Testimonials ──────────────────────────────────────────── */
.says{ padding:var(--sec) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.quotes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,1.75rem);
}
@media (max-width:860px){ .quotes{ grid-template-columns:1fr; } }

.quote{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.75rem;
}
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-size:clamp(1rem,.97rem + .2vw,1.1rem);
  line-height:1.55;
}
.quote blockquote p + p{ margin-top:.7rem; }
.quote blockquote::before{
  content:"“";
  display:block;
  font-family:var(--display);
  font-variation-settings:"wght" 800;
  font-size:3rem; line-height:.6;
  color:var(--blaze);
  margin-bottom:.75rem;
}

.quote__name{ display:block; font-weight:600; font-size:.92rem; }
.quote__role{
  display:block;
  font-family:var(--mono); font-weight:640; font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2);
}

/* ── Contact ───────────────────────────────────────────────── */
.contact{ padding:var(--sec) 0; }
.contact__inner{ text-align:center; }
.contact__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 790;
  font-size:clamp(2rem,1.1rem + 4.2vw,4.4rem);
  line-height:.98;
  letter-spacing:-.04em;
  margin:0;
}
.contact__sub{
  margin:1.35rem auto 0;
  max-width:44ch;
  color:var(--ink-2);
}

/* Centred inquiry form, held to a readable measure. */
.contact__form{
  width:100%;
  max-width:34rem;
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  text-align:left;
}
.contact__label{
  display:block;
  font-family:var(--mono); font-weight:640;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.45rem;
}
.contact__field{
  width:100%;
  padding:.85rem 1rem;
  margin-bottom:1.2rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  font:inherit; font-size:.95rem;
  color:var(--ink);
  transition:border-color .25s var(--ease);
}
.contact__field::placeholder{ color:var(--ink-2); opacity:.75; }
.contact__field:focus{ outline:none; border-color:var(--blaze); }
.contact__field:focus-visible{ outline:2px solid var(--blaze); outline-offset:2px; }
.contact__field--area{ resize:vertical; min-height:7rem; }

.contact__send{
  display:block; margin-inline:auto;
  padding:.9rem 1.75rem;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:999px;
  font-family:var(--mono); font-weight:640; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease);
}
.contact__send:hover{
  background:var(--blaze); border-color:var(--blaze);
  transform:translateY(-1px);
}

.contact__status{
  margin-top:1rem; text-align:center;
  font-size:.9rem; color:var(--ink-2);
  min-height:1.4em;
}
.contact__status.is-error{ color:var(--blaze-ink); }

.contact__maillabel{
  margin:clamp(2.5rem,5vw,3.5rem) 0 .7rem;
  font-family:var(--mono); font-weight:640;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blaze);
}
.contact__mail{
  display:inline-block;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 640;
  font-size:clamp(1.05rem,.85rem + 1.5vw,2rem);
  letter-spacing:-.02em;
  text-decoration:none;
  border-bottom:2px solid var(--blaze);
  padding-bottom:.15rem;
  overflow-wrap:anywhere;
  transition:color .25s var(--ease);
}
.contact__mail:hover{ color:var(--blaze); }

.socials{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:1.5rem; margin-top:2.5rem;
}
/* in the footer it is one of three items in the row, not a block of its own */
.socials--foot{ margin-top:0; gap:1.25rem; }
.socials--foot a{ font-size:.68rem; letter-spacing:.08em; }
.socials a{
  font-family:var(--mono); font-weight:640; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  transition:color .2s var(--ease);
}
.socials a:hover{ color:var(--blaze); }

/* ── Footer ────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:1.75rem 0; }
.foot__inner{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between;
  font-family:var(--mono); font-weight:640; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
}

/* ── Lightbox ──────────────────────────────────────────────── */
/* `display:grid` below would override the browser's [hidden]{display:none},
   leaving this transparent overlay on top of the page swallowing every
   click. Re-assert it explicitly. */
.lightbox[hidden]{ display:none; }

.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(10,11,13,.94);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox__stage{
  width:min(420px,100%);
  aspect-ratio:9/16;
  max-height:88vh;
}
.lightbox__stage video{
  width:100%; height:100%;
  object-fit:contain;
  background:#000;
  border-radius:12px;
}
.lightbox__close{
  position:absolute; top:1rem; right:1.25rem;
  width:44px; height:44px;
  font-size:1.9rem; line-height:1;
  background:transparent; border:0; color:#fff;
  cursor:pointer;
}
.lightbox__close:hover{ color:var(--blaze); }

/* ── Scroll reveal ─────────────────────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s var(--ease) var(--d,0s),
             transform .75s var(--ease) var(--d,0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .contact__send,.contact__field{ transition:none; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}