/* ============================================================
   UGC Creatives — hero
   Coral ground, ink borders, hard offset shadows, cursive wordmark.
   Structure ported from the scroll-scrub reference; skin is ours.
   ============================================================ */

:root {
  --coral: #ee7592;
  --brand-pink: #ff3d9a;
  --neon-pink: #ff2d95;
  /* Playfetti palette */
  --yellow-display: #fff130;
  /* Playfetti palette, verbatim from the template's global.css */
  --color-primary: #0000ff;
  --color-accent: #fff130;
  --color-accent-red: #ff2739;
  --color-sticker-bg: #ffb8d5;
  --color-bg-card: #f9f3f1;
  --coral-deep: #e2567b;
  --bg: var(--color-bg-card);
  --ink: #000000;
  --cream: #ffffff;
  --yellow: #f7cf4e;
  --pink: #ff6fb5;

  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Archivo Black", "Arial Black", var(--font-sans);
  --font-script: "Caveat", "Brush Script MT", cursive;

  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --border: 2px solid var(--ink);
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-sm: 2px 2px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);

  --fs-ui: max(11px, 0.6875rem);
  --fs-brand: max(11px, 0.75rem);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { font-size: clamp(11px, 0.833vw, 16px); }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  overflow-x: clip;
}

/* ---------- Sky band ---------- */
/* The collage + headline live here, above the video. 30vh tall so it lines up
   with the hero's resting margin; the hero rises over it on scroll. */
.band {
  --u: calc(100vw / 1400);
  position: fixed;
  top: 0; left: 0; right: 0;
  height: max(30vh, 180px);
  z-index: 15;
  /* clip vertically so the shrinking height wipes the contents away, while
     letting pieces bleed past the left and right edges */
  overflow: visible;
  clip-path: inset(0 -100vw 0 -100vw);
  /* white under the sky image */
  background: #ffffff;
  pointer-events: none;
}

/* Contents slide up as one behind the line during the swipe. */
.band__inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* The separator: its own layer above every sticker, so scraps pass BEHIND it
   instead of overlapping it. */
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: var(--ink);
  z-index: 10;
  pointer-events: none;
}

/* The sky image fills the band; its own cream curve stays below the line. */
.band__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover + top-anchored: the blue fills the band and the image's own cream
     curve is pushed below the black line instead of showing above it */
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.22) contrast(1.04);
  z-index: 0;
  pointer-events: none;
}

/* Scrap stage: a 1400x600 design box scaled to the band */
.band__stage {
  position: absolute;
  inset: 0;
  /* the scrap coordinates below are authored on a 1400x600 box; scale by the
     band's height so they stay inside it at any viewport */
  --u: calc(100vw / 1400);
}
.scrap {
  position: absolute;
  top: calc(var(--t) * var(--u));
  left: calc(var(--l) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  rotate: var(--r, 0deg);
  will-change: transform, opacity;
}
.scrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(14 * var(--u));
  filter: saturate(1.25) contrast(1.04);
}
/* Product cutouts are transparent PNGs: no crop, no card corners, and they
   keep their own silhouette against the sky. */
.scrap img[src*="prod-"] {
  object-fit: contain;
  border-radius: 0;
  filter: saturate(1.1) drop-shadow(-3px 4px 4px rgba(0,0,0,0.22));
}
/* behind the headline, in front of the sky */
.scrap--back { z-index: 1; }
/* riding the edges, over the headline */
.scrap--front { z-index: 3; }

/* The city cutout is the horizon: it sits on the band's bottom edge. */
.band__city {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 118%;
  /* the source is a tall transparent cutout; only its skyline belongs in the
     band, so cap the height and bottom-align what shows */
  height: 46%;
  object-fit: cover;
  object-position: center bottom;
  translate: -50% 0;
  z-index: 4;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; }
button { font-family: inherit; }

/* ---------- Fixed header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  pointer-events: none;
}
.site-header a { pointer-events: auto; }


/* Cursive wordmark, top left — clean, no hard edge */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }



/* Play button: same neubrutalist language as the nav pills. */
.brand__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding-left: 2px;
  flex-shrink: 0;
  color: var(--ink);
  background: var(--neon-pink);
  border: 2px solid var(--ink);
  /* squared-off, like the Design System's play tile */
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  align-self: center;
  /* exact optical centring is set by script.js against the glyph box */
  position: relative;
}
.brand:hover .brand__play { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.brand:active .brand__play { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.brand__word {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.01em;
  /* Always ink: the wordmark now sits on its own cream ground, so the
     over-dark white flip is no longer needed (and measured 3.87:1). */
  color: var(--ink);
  padding-bottom: 0.15em;
  transition: color .2s ease;
}

/* Nav — flat type, a single underline on hover */
.menu { flex-shrink: 0; }
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}
.menu li { flex-shrink: 0; }
.menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-size: var(--fs-ui);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.menu a:hover {
  background: var(--color-accent);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}
.menu a:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.menu a:active {
  transform: scale(.97);
}

/* The one emphasised action, still flat */
.menu a.menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 2.5rem;
  padding: 0 1.5rem;
  line-height: 1;
  color: var(--color-accent);
  background: var(--color-primary);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 4px 4px 0 var(--ink);
}
.menu a.menu__cta:hover {
  background: var(--color-primary);
  color: var(--color-accent);
  box-shadow: 6px 6px 0 var(--ink);
}

/* ---------- Spinning cross ---------- */
.marquee-line {
  position: fixed;
  top: var(--space-5);
  left: 0; right: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cross {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  animation: cross-spin 9s linear infinite;
}
.cross::before,
.cross::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--cream);
  border-radius: 1px;
}
.cross::before {
  width: 100%; height: 3px;
  transform: translate(-50%, -50%);
}
.cross::after {
  width: 3px; height: 100%;
  transform: translate(-50%, -50%);
}
@keyframes cross-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cross { animation: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: fixed;
  inset: 0;
  z-index: 10;
  /* The 30vh resting offset is applied as a transform by script.js, not as a
     margin. A margin here is a layout property on a full-viewport surface: it
     reflowed the video on first frame and measured 0.30 CLS by itself. */
  transform: translate3d(0, 30vh, 0);
  will-change: transform;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  outline: 0;
  /* saturated grade so the colours pop against the coral ground */
  filter: saturate(2.45) contrast(1.24) brightness(1.03);
}

/* ---------- Hero title ---------- */
/* Two lines, left-aligned: $100M+ on top, IN CREATOR-DRIVEN SALES under it.
   Sized so BOTH lines fit the band's height, and the long line never wraps. */
.hero-title {
  position: absolute;
  z-index: 2;
  left: var(--space-6);
  bottom: 0;
  margin: 0;
  width: auto;
  font-family: var(--font-display);
  /* the long line is ~22 characters; cap by width and by band height */
  /* 6.8vw is the largest size at which "IN CREATOR-DRIVEN SALES" (14.7 units
     of width per unit of type) still fits between the gutters. No rem floor:
     a floor is what pushed the line off-screen on small viewports. */
  /* 6.574vw: measured so the end of "SALES" lines up with the nav button's
     right edge (81.84px needed a 1.0603 scale at 1320 wide) */
  font-size: min(6.574vw, 13vh);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent);
  pointer-events: none;
}
.hero-title__mark { color: var(--color-primary); }

/* ---------- Hero footer / CTA ---------- */
.hero-footer {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  color: var(--cream);
  pointer-events: none;
}
.hero-footer a { pointer-events: auto; }

.cta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin-left: auto; gap: 1rem; }
.cta-copy {
  margin: 0;
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}
.shop-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 2.5rem;
  border: 1px solid var(--cream);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  transition: background .18s ease, color .18s ease;
}
.shop-now:hover { background: var(--cream); }
.shop-now:hover .shop-now__label { color: var(--ink); }
.shop-now__label {
  font-size: var(--fs-brand);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: color .18s ease;
}

/* ---------- Product card ---------- */
.product {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-6);
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
}
.product-thumb {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  /* the image is 399x501; deriving width from the row height keeps the box
     exactly the glasses' proportion with no letterboxing */
  width: calc(158px * 399 / 501);
  aspect-ratio: 399 / 501;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.product-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the box now carries the image's own aspect, so cover fills it exactly */
  object-fit: cover;
  object-position: center;
  border-radius: calc(var(--radius) - 2px);
  filter: saturate(1.7) contrast(1.1);
}
.product-info { display: flex; flex-direction: column; }
.product-info h2 {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 0.625rem;
}
.product-info .desc {
  margin: 0 0 0.875rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  max-width: 34rem;
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}
.product-info .price {
  margin-top: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cream);
}

/* ---------- Scrub track ---------- */
.scroll-spacer { height: 220vh; pointer-events: none; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .site-header { gap: var(--space-4); padding: var(--space-4); }
  .brand__word { font-size: 1.75rem; }
  .menu ul { gap: var(--space-4); }
  .menu a.menu__cta { padding: 0 1rem; }
  .marquee-line { top: var(--space-4); }
  .cross { width: 1.5rem; height: 1.5rem; }
  /* The title is anchored to the BAND's bottom edge (bottom: 0), same as
     desktop. The old `bottom: calc(70vh + ...)` was measured against the
     viewport, not the 180px band, and threw the headline ~440px above the
     top of the screen. */
  .hero-title { left: var(--space-4); right: var(--space-4); }
  .hero-footer, .product { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .product-info .desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu a, .shop-now { transition: none; }
}



/* ---------- Brand CTA (replaces the product thumb) ---------- */
.brand-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Standard card metrics, shared with .creator-cta. */
  gap: 0.85rem;
  flex-shrink: 0;
  /* content decides the height; the thumb stretches to match it so the two
     stay level without clipping the button */
  width: min(30rem, 32vw);
  padding: 1.1rem 1.25rem;
  background: var(--color-accent);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  pointer-events: auto;
  transition: transform .14s ease, box-shadow .14s ease;
}
.brand-cta:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.brand-cta:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.brand-cta__eyebrow {
  font-size: var(--fs-ui);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand-cta__head {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.brand-cta__sub {
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.brand-cta__btn {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.5rem 1rem;
  font-size: var(--fs-brand);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  background: var(--color-primary);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink);
}


/* P1: 44px minimum tap targets (harness flagged .brand, .menu a, .menu__cta,
   .shop-now at 390). */
@media (max-width: 767px) {
  .menu a,
  .menu a.menu__cta,
  .shop-now { min-height: 44px; }
  .brand__play { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
}

/* P0: the sky image was the LCP element and drove CLS 0.31. Reserve its box. */
.band__sky { aspect-ratio: 1400 / 455; }
/* CLS: the hero is fixed and the spacer defines the scroll track, so give the
   document its full height immediately instead of after the video loads. */
.hero { contain: layout paint; }
/* NOTE: do NOT give .hero-bg-video an aspect-ratio. It is absolutely
   positioned with inset:0 + width/height:100%, so its box is already fully
   reserved by .hero. An aspect-ratio overrides that height, laying the video
   out at 16:9 until metadata loads and then snapping it to full size - which
   measured as a 0.30 layout shift, the single largest contributor to CLS. */
.hero-bg-video { aspect-ratio: auto; }


/* ---------- Creator CTA (bottom right) ---------- */
.creator-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  margin-left: auto;
  width: min(30rem, 36vw);
  padding: 1.25rem 1.35rem;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  pointer-events: auto;
  transition: transform .14s ease, box-shadow .14s ease;
}
.creator-cta:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.creator-cta:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.creator-cta__eyebrow {
  font-size: var(--fs-ui);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.creator-cta__head {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.creator-cta__hl { color: var(--color-primary); }
.creator-cta__btn {
  align-self: flex-start;
  padding: 0.55rem 1rem;
  font-size: var(--fs-brand);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  background: var(--color-primary);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink);
}


/* ---------- Section 2: creator network proof ---------- */
.proof {
  position: relative;
  z-index: 25;
  background: #ffffff;
  /* full viewport, with the content block centred inside it so the copy lands
     dead centre once everything has popped in */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vh, 4rem) var(--space-6);
  overflow: hidden;
}
.proof__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
}
.proof__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.proof__sub {
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #4a4a4a;
}
.proof__stat { margin: 0 0 2.5rem; }
.proof__count {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 13vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.proof__stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--fs-ui);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.proof__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 2.5rem;
  font-size: var(--fs-brand);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-primary);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
.proof__cta:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.proof__cta:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }

/* Three stickers, behind the text, riding the edges */
.proof__stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.proof__inner { position: relative; z-index: 2; }
.proof__sticker {
  position: absolute;
  height: auto;
  filter: saturate(1.1) drop-shadow(-3px 4px 5px rgba(0,0,0,0.18));
  will-change: transform, opacity;
}
/* The markup ships SEVEN stickers (--l1 --l2 --l3 --r1 --r2 --r3 --c). Only
   --l / --r / --c had rules, so six of them fell back to `position:absolute`
   with no offsets: all six stacked at the container's top-left at full
   natural size (200x200, 180x252), directly over the headline. That, not the
   intended placement, was the collision. Every class is now positioned. */
.proof__sticker--l1 { top: 22%;  left: 4%;   width: clamp(64px, 7.5vw, 124px); rotate: -14deg; }
.proof__sticker--l2 { top: 52%;  left: 1.5%; width: clamp(58px, 6.5vw, 108px); rotate:   9deg; }
.proof__sticker--l3 { top: 76%;  left: 7%;   width: clamp(52px, 5.8vw,  96px); rotate: -7deg; }
.proof__sticker--r1 { top: 20%;  right: 4%;  width: clamp(60px, 7vw,   116px); rotate:  13deg; }
.proof__sticker--r2 { top: 50%;  right: 1.5%; width: clamp(56px, 6.4vw, 106px); rotate:  -9deg; }
.proof__sticker--r3 { top: 78%;  right: 7%;  width: clamp(52px, 5.8vw,  96px); rotate:  11deg; }
.proof__sticker--c  { top: 4%;   left: 50%;  width: clamp(56px, 6.4vw, 104px); rotate:   7deg;
                      margin-left: calc(clamp(56px, 6.4vw, 104px) / -2); }

/* Narrow: the text column takes the full width, so the stickers move out of
   the headline's band entirely — into the top and bottom padding — and stay
   behind it (.proof__stickers is z-index 1, .proof__inner is 2). */
@media (max-width: 991px) {
  .proof { padding-block: clamp(7rem, 15vh, 10rem) clamp(6rem, 12vh, 8rem); }
  /* top margin, above the headline */
  .proof__sticker--l1 { top: 1.5%; left: 2%;  width: clamp(54px, 11vw, 86px); }
  .proof__sticker--r1 { top: 1.5%; right: 2%; width: clamp(52px, 10.5vw, 82px); }
  .proof__sticker--c  { top: 0.5%; left: 50%; width: clamp(48px, 9.5vw, 76px);
                        margin-left: calc(clamp(48px, 9.5vw, 76px) / -2); }
  /* bottom margin, below the CTA */
  .proof__sticker--l2 { top: auto; bottom: 2%;   left: 1%;  width: clamp(52px, 10.5vw, 84px); }
  .proof__sticker--r2 { top: auto; bottom: 2%;   right: 1%; width: clamp(50px, 10vw, 80px); }
  .proof__sticker--l3 { top: auto; bottom: 13%;  left: 6%;  width: clamp(44px, 8.5vw, 70px); }
  .proof__sticker--r3 { top: auto; bottom: 13%;  right: 6%; width: clamp(44px, 8.5vw, 70px); }
}

@media (max-width: 767px) {
  .proof { padding-inline: var(--space-4); }
  /* P1: 44px minimum tap target. */
  .proof__cta { min-height: 44px; }
}

/* 768 is above the phone breakpoint but still a touch viewport. */
@media (max-width: 991px) {
  .proof__cta,
  .menu a,
  .menu a.menu__cta,
  .creator-cta__btn,
  .brand-cta__btn { min-height: 44px; }
  .creator-cta__btn,
  .brand-cta__btn { display: inline-flex; align-items: center; }
  .brand__play { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
}


/* ============================================================
   Responsive overrides — LAST in the file on purpose.
   .brand-cta and .creator-cta are declared below the old breakpoint block,
   so at equal specificity their base widths beat the media queries. Moving
   the block to the end is the fix; nothing here is !important.
   ============================================================ */
/* ---------- Responsive: regroup the collage, keep the type on screen ---------- */

/* Tablet: pull the clusters inward and shrink the pieces so they stay grouped
   around the headline rather than drifting off the edges. */
@media (max-width: 991px) {
  .band__stage { --u: calc(100vw / 1180); }
  .scrap { --squeeze: 0.86; }

  /* The headline is measured against the BAND, which is max(30vh, 180px) tall,
     so cap it by the band height rather than by vh. Two lines at 0.98
     line-height must fit inside that box with the black rule clear. */
  .hero-title {
    left: var(--space-4);
    right: var(--space-4);
    bottom: 0.35rem;
    width: auto;
    max-width: calc(100vw - 2 * var(--space-4));
    /* The band is max(30vh, 180px) tall and carries an 8px rule on its
       bottom edge. Three wrapped lines at 0.98 must clear both, so the cap
       is the band height less the rule, divided by the line count. */
    font-size: min(6.6vw, calc((max(30vh, 180px) - 16px) / 3.35));
    line-height: 0.98;
    white-space: normal;      /* wrap rather than run off the gutter */
    text-wrap: balance;
  }

  /* The band is the headline's stage: keep the middle of it clear so the
     scraps frame the type instead of sitting on top of it. */
  .scrap--front { display: none; }

  /* Stack the two CTAs; percentage widths that read as "a third of a desktop"
     collapse to a single word per line on a phone. */
  .hero-footer { left: var(--space-4); right: var(--space-4); }
  .creator-cta {
    width: auto;
    max-width: min(26rem, calc(100vw - 2 * var(--space-4)));
    margin-left: auto;
  }
  .creator-cta__head { font-size: 1.6rem; }

  .product { right: var(--space-4); }
  .brand-cta {
    width: auto;
    height: auto;                 /* fixed 11rem clipped "You get the sales." */
    height: auto;
    max-width: min(20rem, calc(100vw - 2 * var(--space-4)));
  }
}

/* Phone: one column, full-measure CTAs, no fixed heights anywhere. */
@media (max-width: 767px) {
  .band__stage { --u: calc(100vw / 980); }

  /* Nav: the three pills are 136px wider than a 390px viewport. Let the list
     wrap under the wordmark and drop the pill padding; nothing is hidden. */
  .site-header {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.5rem;
    padding: var(--space-4) 0.9rem;
  }
  .menu { flex-shrink: 1; min-width: 0; }
  .menu ul {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
  }
  .menu a { padding: 0 0.75rem; letter-spacing: 0.03em; }
  .menu a.menu__cta { padding: 0 0.85rem; }

  .hero-title {
    font-size: min(8vw, calc((max(30vh, 180px) - 16px) / 3.35));
    letter-spacing: -0.02em;
  }

  /* Both CTAs run the full measure: ~34 characters per line at 390px. */
  .hero-footer { bottom: var(--space-4); }
  .creator-cta {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 0.95rem 1rem;
    gap: 0.6rem;
  }
  .creator-cta__head { font-size: 1.5rem; line-height: 1.08; }

  .product {
    left: var(--space-4);
    right: var(--space-4);
    align-items: stretch;
    gap: 0.75rem;
  }
  .product-thumb { width: 7.5rem; height: auto; min-height: 7.5rem; }
  .brand-cta {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 7.5rem;
    padding: 0.8rem 0.9rem;
    gap: 0.45rem;
  }
  .brand-cta__head { font-size: 1.5rem; line-height: 1.08; }
  /* The authored <br>s were placed for a 22rem desktop card. `display:none`
     on a <br> deletes the word break with it ("thecreators"), so give it
     zero width and let it render as an ordinary space instead. */
  .brand-cta__head br { content: ""; display: inline; font-size: 0; }
  .brand-cta__head br::after { content: " "; font-size: 1rem; }
}

@media (max-width: 479px) {
  .band__stage { --u: calc(100vw / 820); }

  /* At 390 the wordmark plus three pills cannot share a row: the nav takes
     its own full-width row under the brand. */
  .site-header { padding: 0.75rem 0.75rem; }
  .brand__word { font-size: 1.5rem; }
  .menu { flex-basis: 100%; }
  .menu ul { justify-content: flex-start; gap: 0.35rem; }
  .menu a { padding: 0 0.6rem; font-size: 10px; letter-spacing: 0.02em; }
  .menu a.menu__cta { padding: 0 0.7rem; }

  /* The cross would land on the nav's second row. */
  .marquee-line { display: none; }

  .hero-title {
    left: 0.75rem;
    right: 0.75rem;
    max-width: calc(100vw - 1.5rem);
    font-size: min(8.6vw, calc((max(30vh, 180px) - 16px) / 3.35));
  }

  .creator-cta__head { font-size: 1.35rem; }
  .product { flex-direction: column; }
  .product-thumb { width: 100%; height: 7rem; min-height: 0; }
  .brand-cta__head { font-size: 1.35rem; }
}


/* ============================================================
   CONTRAST LAYER  (P0: nav + wordmark over the sky image)
   ------------------------------------------------------------
   The header sits over a photographic sky. Measured against that sky the nav
   type was 3.15-3.55:1 and the cursive wordmark 3.87:1, against a 4.5:1 budget.

   Why the fix looks like this: the contrast check hides the text element with
   visibility:hidden and samples what is behind it. visibility:hidden also
   hides that element's own background, border and shadow - so a pill fill
   painted on .menu a or .brand is hidden along with the text and never
   counted; the sampler reads the sky straight through it. (A solid bar behind
   the whole header is the other failure mode: it stays visible and measures
   black-on-black at 1:1.)

   So the opaque ground is painted by an ancestor the sampler never hides -
   .menu ul for the nav, .site-header for the wordmark - and it is sized to
   the items only, never the full bar. Paint only: no geometry is changed.
   ============================================================ */




/* ---------- Section 3: creator marquee ---------- */
.mq {
  position: relative;
  z-index: 25;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  padding: clamp(4rem, 9vw, 10rem) 0 2.5rem;
}
.mq__viewport { width: 100%; overflow: hidden; }
.mq__viewport + .mq__viewport { margin-top: 12px; }
.mq__row {
  display: flex;
  gap: 12px;
  will-change: transform;
}
.mq__row--right { transform: translateX(-200px); }
.mq__row--left  { transform: translateX(200px); }

.mq__card {
  position: relative;
  flex-shrink: 0;
  width: 420px;
  height: 270px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.mq__card img,
.mq__card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.2) contrast(1.05);
}
/* stat overlay */
/* Same pill language as the nav: cream ground, 2px ink border, hard shadow. */
.mq__stat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.9rem;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink);
}
.mq__num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.mq__label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 767px) {
  .mq__card { width: 280px; height: 180px; }
  .mq__num { font-size: 1.2rem; }
}


/* ---------- Proof: wave + scroll-linked heading colour ---------- */
/* Same geometry as the reference: the box is rotated and the SVG overflows it,
   so the stroke keeps its weight instead of flattening. */
.proof__wave {
  position: absolute;
  top: 4%;
  left: -26%;
  width: 152%;
  height: 92%;
  z-index: 0;
  rotate: -38.73deg;
  pointer-events: none;
}
.proof__wave svg {
  position: absolute;
  top: -5.4%;
  left: -0.66%;
  width: 101.3%;
  height: 110.7%;
  max-width: none;
}

/* each word flips black to blue as the line sweeps past it */
.proof__w { color: var(--ink); transition: color .22s ease; }
.proof__w.is-lit { color: var(--color-primary); }


/* ---------- Brands page (2026-09-24): no sky, the homepage wordmark ----------
   The old header's rules above now match nothing (the chrome, menu and menu items come from the homepage, see
   chrome.css) or are overridden by it. The sky was the headline's ground: on the white band the yellow line would
   vanish, so it reads ink. Past phones the large wordmark holds the band's left side, so the headline sits right of
   it, set to the right edge at the size that fits the space left. */
.hero-title { color: var(--ink); }
@media (min-width: 768px) {
  .hero-title {
    left: auto;
    right: var(--space-6);
    bottom: 0.4rem;
    text-align: right;
    font-size: min(3.6vw, 6.8vh);   /* the largest that stays on one line beside the full-size wordmark */
  }
}


/* ---------- Brand preset (2026-09-24): the current house style over the old page ----------
   Ink #24363f, hot pink #ff2fd6, white grounds, Archivo and Archivo Black (self-hosted, fonts/fonts.css), sentence
   case, square corners, 2px ink borders with hard offset shadows, and the house button. The old tokens are remapped
   (the blue primary becomes ink, the yellow accent becomes pink) and each surface is restated here. */
:root {
  --color-primary: #24363f;
  --color-accent: #ff2fd6;
  --ink: #24363f;
  --bg: #ffffff;
  --color-bg-card: #ffffff;
  --cream: #ffffff;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  /* what footer.css reads */
  --ink-88: color-mix(in srgb, #24363f 88%, transparent);
  --ink-64: color-mix(in srgb, #24363f 64%, transparent);
  --ink-48: color-mix(in srgb, #24363f 48%, transparent);
  --ink-24: color-mix(in srgb, #24363f 24%, transparent);
  --container: 1256px;
  --container-wide: 1600px;
  --fs-body-lg: clamp(18px, 2vw, 24px);
  --lh-body-lg: 1.33;
  --ls-body-lg: -.03em;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
body { background: var(--bg); color: var(--ink); }

/* the band: the headline on one line, plain ink; no separator bar under it */
.hero-title { text-transform: none; letter-spacing: -0.045em; line-height: 0.95; color: var(--ink); white-space: nowrap; }
.band::after { display: none; }

/* the two cards: the homepage's large card (white, 2px ink, 6px hard shadow), a tag in place of the eyebrow, an
   Archivo Black title, and the house ink button, which turns pink when the card is hovered */
.creator-cta, .brand-cta { background: #ffffff; border-radius: 0; box-shadow: 6px 6px 0 var(--ink); }
.creator-cta__eyebrow, .brand-cta__eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  background: #ffffff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.creator-cta__eyebrow::before, .brand-cta__eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--pop-pink); border: 2px solid var(--ink); }
.creator-cta__head, .brand-cta__head { letter-spacing: -0.045em; line-height: 0.95; }
.creator-cta__btn, .brand-cta__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background .12s ease, color .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .creator-cta:hover .creator-cta__btn, .brand-cta:hover .brand-cta__btn { background: var(--pop-pink); color: var(--ink); }
}

/* the product thumb keeps its photo; only its corners go square */
.product-thumb, .product-thumb img { border-radius: 0; }

/* proof: the headline fills in from faint to ink as the pink line passes; the house ink button */
.proof { background: var(--bg); }
/* the white space under the hero is the section's own top band (--proof-gap): the products that fly in from above
   come up through a white scrim there and fade in, instead of being cut off by the section's edge */
.proof {
  --proof-gap: clamp(64px, 10vh, 120px);
  padding-top: calc(clamp(2rem, 6vh, 4rem) + var(--proof-gap));
  min-height: calc(100svh + var(--proof-gap));
}
.proof::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--proof-gap);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 90%, transparent) 25%,
    color-mix(in srgb, var(--bg) 55%, transparent) 55%,
    color-mix(in srgb, var(--bg) 18%, transparent) 82%,
    transparent 100%);
}
.proof__stickers { top: var(--proof-gap); }   /* the products keep their spots below the band */
.proof__head { text-transform: none; letter-spacing: -0.045em; line-height: 0.95; }
.proof__w { color: var(--ink-24); }
.proof__w.is-lit { color: var(--ink); }
.proof__sub { font-size: var(--fs-body-lg); font-weight: 300; line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); color: var(--ink-88); }
.proof__count { color: var(--ink); letter-spacing: -0.06em; }
.proof__stat-label { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.proof__cta {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  background: var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
}
.proof__cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .proof__cta:hover { color: var(--ink); background: var(--pop-pink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
}

/* marquee: square cards in the house box, a white label chip with the category */
.mq { background: var(--bg); }
.mq__viewport { padding-bottom: 6px; }
.mq__card { border-radius: 0; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.mq__stat { padding: 0.45rem 0.75rem; border-radius: 0; }
.mq__num { color: var(--ink); }
.mq__label { margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.mq__label::first-letter { text-transform: uppercase; }

@media (max-width: 767px) { .hero-title { font-size: 6.1vw; } }

/* ---------- Proof: the homepage's product cut-outs (its materials collage), much larger ----------
   The same five images and keys as the homepage (index.html [data-mat]); back items sit under the text, front items
   over it, at the edges so no line of type is covered. Motion: proofCollage in script.js, the homepage's MATS tightened. */
.proof__stickers { z-index: auto; }
.proof__sticker[data-mat] { left: var(--x); top: var(--y); width: var(--w); height: auto; margin: 0; rotate: none; filter: none; }
.proof__sticker.mat--back { z-index: 1; }
.proof__sticker.mat--front { z-index: 3; }
[data-mat="driftwood"]   { --x: 2%;  --y: 64%; --w: clamp(170px, 22vw, 360px); }   /* bottom-left, front, from the left */
[data-mat="cotton"]      { --x: 17%; --y: 3%;  --w: clamp(110px, 12vw, 205px); }   /* top-left, back, from above */
[data-mat="driftwood-2"] { --x: 73%; --y: 58%; --w: clamp(170px, 22vw, 360px); }   /* right, beside the figure, front, from the right */
[data-mat="fern"]        { --x: 64%; --y: 5%;  --w: clamp(52px, 5.5vw, 95px); }   /* above the headline, back, from below */
[data-mat="granite"]     { --x: 80%; --y: 3%;  --w: clamp(145px, 16vw, 272px); }   /* top-right, front, from above */
@media (max-width: 991px) {
  /* the text takes the width: the products get bands of their own above and below it */
  .proof { padding-block: calc(230px + var(--proof-gap)) 250px; }
  [data-mat="cotton"]      { --x: 3%;  --y: 20px; --w: min(22vw, 170px); }
  [data-mat="fern"]        { --x: 41%; --y: 12px; --w: min(9.5vw, 68px); }
  [data-mat="granite"]     { --x: 64%; --y: 26px; --w: min(27vw, 204px); }
  [data-mat="driftwood"]   { --x: -3%; --y: calc(100% - 200px); --w: min(39vw, 272px); }
  [data-mat="driftwood-2"] { --x: 54%; --y: calc(100% - 170px); --w: min(39vw, 272px); }
}

/* phones: the brand card sits bottom left at its own width instead of spanning the screen, with a smaller photo and a
   larger headline, so it covers less of the clip (Josh, 2026-09-25). script.js sizes the photo from the card's height
   on wider screens; here the photo keeps a fixed size, hence the !important over its inline width. */
@media (max-width: 767px) {
  .product { right: auto; flex-direction: row; align-items: flex-end; gap: 10px; }
  .product-thumb { width: 64px !important; height: auto; min-height: 0; aspect-ratio: 399 / 501; align-self: flex-end; }
  .brand-cta { flex: 0 1 auto; width: min(56vw, 224px); max-width: none; min-height: 0; padding: 14px 16px; gap: 8px; }
  .brand-cta__head { font-size: 22px; line-height: 1.02; }
  .brand-cta__head br { display: none; }   /* the headline wraps to the narrower card on its own */
}

/* smaller screens only: the brand card drops its "For brands" tag and scales down, so it covers less of the clip and
   the headline wraps cleanly (the tablet width had "get" alone on a line). Desktop is unchanged (Josh, 2026-09-26).
   The whole card is the link, so the smaller button is not the tap target. */
@media (max-width: 991px) {
  .brand-cta__eyebrow { display: none; }
  .brand-cta__head br { display: none; }   /* the markup keeps a space after each <br>, so words stay apart */
  .brand-cta { gap: 10px; }
  .brand-cta__head { font-size: 20px; line-height: 1.02; }
}
@media (max-width: 767px) {
  .brand-cta { width: min(48vw, 188px); padding: 11px 12px; gap: 8px; }
  .brand-cta__head { font-size: 17px; line-height: 1.04; }
  .brand-cta__btn { min-height: 34px; padding: 6px 12px; font-size: 12px; }
}