/* ===== Tokens & base ===================================================== */
:root {
  --c-accent: #ff6a1a;
  --c-accent-deep: #c1421a;
  --c-accent-bright: #ff9d52;

  --c-page-1: #d34c14;
  --c-page-2: #b73a10;

  --hg-inner: #7a2308;
  --hg-mid:   #b1370b;
  --hg-outer: #d34c14;

  --c-ink: #2a0a02;

  --f-display: 'Nunito', system-ui, -apple-system, sans-serif;
  --f-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --f-hand:    'Caveat', cursive;

  /* Centered content column width — the body of the page flows down a
     single track. .col-wide gives a slightly wider stage for the orange
     cards so single polaroids can offset off-axis without breaking the
     viewport edge. */
  --col-w:      640px;
  --col-w-wide: 760px;
  --pad:        clamp(20px, 5vw, 40px);
  --gap-y:      clamp(80px, 11vw, 140px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* #10 — kill any horizontal overflow / rubber-banding on mobile. */
html { overflow-x: hidden; }
body {
  font-family: var(--f-body);
  color: #fff5e8;
  max-width: 100%;
  overscroll-behavior-x: none;
  /* Body background starts at the SAME orange as the hero's outer edge
     (--c-page-1 == --hg-outer), so the hero blends seamlessly into the
     page above and below — no harsh color step at the hero boundary. The
     gradient stretches naturally over the full document (no fixed attach)
     so each section transitions smoothly into the next. */
  background: linear-gradient(180deg, var(--c-page-1) 0%, var(--c-page-2) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Shared centered columns. Sections drop one of these around their content. */
.col,
.col-wide {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  text-align: center;
}
.col      { max-width: var(--col-w); }
.col-wide { max-width: var(--col-w-wide); }

.section-block         { padding-top: var(--gap-y); }
/* "Tight" variant — used for Channel so it tucks closer under "Who are we?". */
.section-block--tight  { padding-top: calc(var(--gap-y) * 0.55); }


/* ===== Page 1 → Page 2 transition ====================================== */
/* Short ~⅓" strip that blends the black hero into the orange body. The
   shorter length keeps the gradient subtle — a quick wash, not a long
   stretched-out fade. */
.hero-to-body-fade {
  width: 100%;
  height: clamp(24px, 2.4vw, 36px);
  background: linear-gradient(180deg,
    #000           0%,
    #3a0f04       45%,
    #8a280a       80%,
    var(--c-page-1) 100%);
}
/* The first section after the fade doesn't need its full gap-y on top —
   the fade strip already provides the breathing room between the hero
   and the next section's content. */
.hero-to-body-fade + .section-block {
  padding-top: clamp(28px, 4vw, 56px);
}


/* ===== Hero ============================================================== */
.hero {
  position: relative;
  /* Hero fills the first viewport with content centered vertically and
     horizontally — anchors the page like the MrBeast Jobs reference. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 72px) var(--pad);
  overflow: hidden;
  /* Black hero on page 1 only — the rest of the page below stays orange. */
  background: #000;
  isolation: isolate;
}

/* ----- Photo Table (top-down pile of polaroids dropping like snow) ------ */
/* We're looking straight down at a table so densely covered in face-up
   polaroids that the table itself is never visible. Every second a new
   unique polaroid drops onto the pile from above. */
.photo-table {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;   /* individual tiles re-enable below */
  overflow: hidden;
}

.ptile {
  position: absolute;
  width: var(--tile-w, clamp(150px, 22vw, 320px));
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
  /* Graceful cross-fade when a photo is replaced. */
  transition: opacity 0.65s ease;
}
.ptile.leaving { opacity: 0; }
.ptile-inner {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.42),
    0 9px 18px -6px rgba(0, 0, 0, 0.52),
    0 22px 42px -14px rgba(0, 0, 0, 0.72);
  /* Hidden until the image has loaded; then the drop-in animation runs.
     This makes a black/empty flash impossible. */
  opacity: 0;
}
.ptile-inner.is-loaded {
  animation: ptileDrop 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
.ptile-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* Transparent — so during any momentary load the tile BELOW shows
     through (never a black flash). */
  background: transparent;
}
.ptile-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
/* Even dark wash over every photo so the whole pile reads as one moody
   surface (matches the original hero's opacity layer). */
.ptile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
  pointer-events: none;
}
/* As a tile lands it glows brighter (less dark wash), then settles to the
   normal pile opacity — synced with the drop animation. */
.ptile-inner.is-loaded .ptile-img::after {
  animation: ptileSettle 0.95s ease-out both;
}

@keyframes ptileSettle {
  0%   { background: rgba(0, 0, 0, 0); }
  35%  { background: rgba(0, 0, 0, 0.06); }
  100% { background: rgba(0, 0, 0, 0.44); }
}

@keyframes ptileDrop {
  0%   { opacity: 0; transform: translateY(-22px) scale(1.28); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ptile-inner { animation-duration: 0.001s; }
  .ptile-inner.is-loaded .ptile-img::after { animation-duration: 0.001s; }
}

/* Orange tint replaced with a dark wash — reads better against the
   polaroid grid and mirrors the look of the MrBeast Jobs reference. */
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.60) 55%,
      rgba(0, 0, 0, 0.50) 100%);
}

/* Hero content sits above backdrop (z:0) and tint (z:1). Each child gets
   a z-index so it stacks above the polaroids — BUT they're pointer-events:
   none so the mouse passes through to the polaroids behind them. Only the
   actual button re-enables pointer events so it stays clickable. */
.hero > .hero-logo,
.hero > .hero-title,
.hero > .hero-cta {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
/* Re-enable clicks/hover on the Join us button only. */
.hero > .hero-cta .btn {
  pointer-events: auto;
}

.hero-logo {
  display: block;
  /* Much bigger — the logo now anchors a tall hero. */
  height: clamp(96px, 15vw, 180px);
  aspect-ratio: 16 / 9;
  background-color: #ffffff;
  -webkit-mask: url("assets/logo-hd.png") center / contain no-repeat;
          mask: url("assets/logo-hd.png") center / contain no-repeat;
  /* Bigger, brighter, wider halo — the logo really glows now while the
     outer rings still fade smoothly so it never looks like a hard outline. */
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 1))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 90px rgba(255, 255, 255, 0.32))
    drop-shadow(0 0 140px rgba(255, 255, 255, 0.18))
    drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
}

.hero-title {
  /* Outfit — more official feel than Nunito, still a touch rounded. */
  font-family: 'Outfit', 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  /* Big and bold, sized to comfortably fit the two-line break baked
     into the markup ("We make the world's" / "funniest videos.") */
  font-size: clamp(44px, 8.5vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  /* Pulled tight to the logo — stack feels like one block. */
  margin: clamp(4px, 0.8vw, 12px) auto 0;
  /* Width sized for the longer line on top so the explicit <br /> wraps
     stay clean and the text doesn't get cropped. */
  max-width: min(22ch, 92vw);
  text-wrap: balance;
  text-align: center;
  /* Solid white — no glow, just a soft dark drop-shadow for legibility
     against the polaroid backdrop. */
  color: #ffffff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.55);
}

/* Tight up to the title so the whole stack hugs the logo. */
.hero-cta { margin-top: clamp(18px, 2.4vw, 30px); }


/* ===== Buttons =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Bigger Join Us — dominant CTA, scaled up to match the hero. */
  padding: 28px 60px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.005em;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-primary {
  position: relative;
  /* Clip the shine pseudo to the pill silhouette. */
  overflow: hidden;
  isolation: isolate;
  /* Solid orange — no more cream→peach gradient. */
  background: var(--c-accent);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120, 30, 0, 0.45);
  box-shadow:
    0 12px 30px -8px rgba(255, 110, 30, 0.55),
    0 18px 38px -12px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.2);
  transition:
    transform .25s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .25s ease,
    filter .25s ease;
}

/* Keep the label on top of the shine layer. */
.btn-primary .btn-label { position: relative; z-index: 2; }

/* Shine: a soft white diagonal band sweeps left→right, pauses at the right,
   then resets to the left and goes again. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0)  20%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0)  80%,
    transparent 100%);
  transform: skewX(-18deg) translateX(-220%);
  animation: btn-shine 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes btn-shine {
  /* Travel: 0% → 50% (1.7s sweep) */
  0%   { transform: skewX(-18deg) translateX(-220%); }
  50%  { transform: skewX(-18deg) translateX(220%); }
  /* Pause at the right edge for the remaining half of the cycle, then
     snap back to the start (no visual jump because the gradient is past
     the button by then). */
  100% { transform: skewX(-18deg) translateX(220%); }
}

.btn-primary:hover {
  transform: scale(1.08);
  animation: btn-jingle 1.4s ease-in-out .3s infinite;
  filter: brightness(1.08);
  box-shadow:
    0 18px 42px -8px rgba(255, 110, 30, 0.7),
    0 24px 52px -12px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.25);
}
@keyframes btn-jingle {
  0%, 100% { rotate: 0deg; }
  20%      { rotate: -1.4deg; }
  40%      { rotate: 1.2deg; }
  60%      { rotate: -0.8deg; }
  80%      { rotate: 0.5deg; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover { animation: none; transform: scale(1.04); }
  .btn-primary::after { animation: none; opacity: 0; }
}


/* ===== Photo Band (full-bleed horizontal scrollers, top & bottom) ======= */
.photo-band {
  position: relative;
  width: 100%;
  padding: clamp(28px, 4vw, 52px) 0;
  overflow: hidden;
  /* Soft fade at left + right edges only. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* Single bottom band sitting just under the hero — the only band on
   the page, breaks off into the rest of the content below. Tight top
   padding so the band tucks right under the "Join us" button. */
.photo-band--bottom { padding: clamp(0px, 0.6vw, 8px) 0 clamp(28px, 3.8vw, 52px); }

.photo-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  width: max-content;
  will-change: transform;
}
.photo-row--a { animation: bandScrollA 90s linear infinite; }
.photo-row--b { animation: bandScrollB 110s linear infinite; }

@keyframes bandScrollA {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bandScrollB {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.photo-row:has(.band-card:hover) { animation-play-state: paused; }

.band-card {
  flex-shrink: 0;
  width: clamp(140px, 18vw, 220px);
  padding: 10px 10px 10px;
  background: #fefcf6;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.08),
    0 12px 26px -10px rgba(0, 0, 0, 0.4),
    0 28px 52px -22px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r));
  transition:
    transform .35s cubic-bezier(.34, 1.56, .64, 1),
    filter .25s ease,
    box-shadow .25s ease;
  cursor: pointer;
  position: relative;
}
.band-card:hover {
  transform: rotate(var(--r)) scale(1.16);
  filter: brightness(1.15) saturate(1.05);
  z-index: 5;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.1),
    0 18px 36px -10px rgba(0, 0, 0, 0.5),
    0 36px 64px -22px rgba(0, 0, 0, 0.55);
}
.band-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.04), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255, 220, 180, 0.18), transparent 50%);
  mix-blend-mode: multiply;
}
.band-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: #d8d2c8;
  filter: saturate(0.95) contrast(1.02);
}


/* ===== Who are we? ======================================================= */
.who-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(44px, 8vw, 84px);
  line-height: 1;
  letter-spacing: -0.038em;
  color: #fff5e6;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}
.who-rule {
  display: block;
  width: clamp(140px, 26vw, 240px);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(255, 200, 140, 0)  0%,
    #ffd29a                 25%,
    #ff9d52                 50%,
    #ffd29a                 75%,
    rgba(255, 200, 140, 0)  100%);
  margin: clamp(16px, 2vw, 22px) auto 0;
}


/* ===== Shared "orange card" (used by Channel + About) ================== */
.orange-card {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 200, 140, 0.08), transparent 50%),
    linear-gradient(140deg, #7c2308 0%, #9a3210 55%, #6e1f06 100%);
  border: 1px solid rgba(255, 220, 180, 0.18);
  border-radius: 28px;
  padding: clamp(30px, 4.5vw, 48px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    0 22px 50px -22px rgba(0, 0, 0, 0.45);
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  z-index: 2;
}

/* The "stage" wraps the orange card with a single offset polaroid that
   peeks from one side. Mirror the alignment for --left vs --right. */
.card-stage {
  position: relative;
  max-width: var(--col-w-wide);
  margin: 0 auto;
  /* Padding ensures the polaroid (positioned absolutely with vertical
     centering) doesn't get cropped by section padding above/below. */
  padding-block: clamp(20px, 2.5vw, 36px);
}

/* Compound .card-photo.polaroid selectors so these beat the later
   `.polaroid { position: relative }` rule (same single-class specificity
   would otherwise let the later one win). */
.card-photo.polaroid {
  position: absolute;
  top: 50%;
  z-index: 0;
}
.card-photo--right.polaroid {
  /* Channel: pulled past the card's right edge so the paragraph copy
     inside the card stays fully readable. Polaroid floats just off the
     card's right shoulder, with at most a tiny sliver overlapping the
     card's right padding. */
  right: clamp(-130px, -9vw, -60px);
  z-index: 3;            /* Channel photo sits IN FRONT of the orange card */
}
.card-photo--left.polaroid {
  /* About: "mostly visible, barely behind, just slightly overlapping" —
     pushed past the card's left edge so most of the polaroid sits in
     the empty stage margin, only its right sliver tucked under the card. */
  left: clamp(-140px, -11vw, -90px);
  z-index: 0;            /* About photo sits BEHIND the orange card */
}


/* ===== About Us (stats + paragraph + Apply Now) ======================== */
.about-us {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
/* The stage is the positioning context for the two offset polaroids. */
.about-us-stage {
  position: relative;
  padding-block: clamp(20px, 3vw, 40px);
}

.about-us-title {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 156px);
  line-height: 0.9;
  letter-spacing: -0.005em;
  color: #fff5e6;
  text-align: center;
  margin: 0;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
  /* Subtle warm hue — feels playful without losing legibility against
     the orange page. */
  background: linear-gradient(180deg, #fff5e6 0%, #ffd29a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.32));
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(32px, 4.5vw, 56px);
  position: relative;
  z-index: 2;
  align-items: end;
  justify-items: center;
}
.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  text-align: center;
}
.about-stat-value {
  font-family: 'Outfit', var(--f-display);
  font-weight: 900;
  font-size: clamp(60px, 11vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: #fff5e6;
  text-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.about-stat-label {
  font-weight: 800;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 230, 200, 0.85);
}

.about-copy-wrap {
  margin: clamp(42px, 5vw, 64px) auto 0;
  max-width: 620px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.about-copy {
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.55;
  color: #fff5e6;
  text-wrap: pretty;
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.about-copy:last-of-type { margin-bottom: 0; }
/* Hand-drawn-feeling underline beneath the CTA line — soft orange-cream
   bar with a slight glow. NOT a true text-decoration underline; it's a
   gradient pseudo-bar so it can curve in/out and feel a touch playful. */
.about-copy--cta-line {
  font-weight: 700;
  color: #fff;
  display: inline-block;
  position: relative;
  padding-bottom: clamp(8px, 1vw, 14px);
}
.about-copy--cta-line::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255, 225, 180, 0)   0%,
    rgba(255, 225, 180, 0.9) 18%,
    #ffd29a                  50%,
    rgba(255, 225, 180, 0.9) 82%,
    rgba(255, 225, 180, 0)   100%);
  box-shadow: 0 0 14px rgba(255, 200, 140, 0.45);
}

/* Apply Now button under the paragraph — uses the existing .card-apply
   pill styling, just centered and given a touch more breathing room. */
.about-apply {
  margin: clamp(28px, 3.6vw, 40px) auto 0;
  display: flex;
}

/* Polaroids floating to the upper-left and lower-right of the section.
   Compound `.about-poly.polaroid` selectors beat the base polaroid rules. */
.about-poly.polaroid {
  position: absolute;
  z-index: 1;
}
.about-poly--tl.polaroid {
  /* Bottom-left — mirrors the bottom-right polaroid so the pair flanks
     the Apply Now button at the same vertical level. */
  bottom: clamp(-20px, -1vw, 0px);
  left: clamp(-10px, 0vw, 8px);
}
.about-poly--br.polaroid {
  bottom: clamp(-20px, -1vw, 0px);
  right: clamp(-10px, 0vw, 8px);
}
/* Captions for the about-us polaroids ride the design language of the
   reference: hand-written, warm red-orange. */
.about-poly .polaroid-cap {
  color: var(--c-accent);
  font-size: 20px;
  white-space: nowrap;
}

/* Narrow viewports: the pair shrinks and FLANKS the "About Us" title (one
   left, one right). A reserved top band holds the title + the two small
   polaroids (absolute); the stats/text flow below it. Desktop keeps the
   210px bottom-left/right offset pair untouched. */
@media (max-width: 820px) {
  .about-us-stage {
    position: relative;
    text-align: center;
    padding-top: clamp(20px, 6vw, 40px);
    padding-bottom: 0;
  }
  /* Polaroid is hidden entirely on mobile. */
  .about-poly.polaroid,
  .about-poly--tl.polaroid {
    display: none;
  }
  .about-poly .polaroid-cap { font-size: 15px; padding-bottom: 9px; min-height: 26px; }
  .about-us-title {
    position: static;
    margin: 0 0 clamp(8px, 2vw, 16px);
    font-size: clamp(48px, 14vw, 86px);
  }
  .about-stats { gap: 16px; }
}
@media (max-width: 420px) {
  .about-stats { grid-template-columns: 1fr; gap: 10px; }
}


/* ===== Channel ("Family Friendly is a…") =============================== */
.channel-card { max-width: 520px; }
.channel-copy {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: rgba(255, 238, 220, 0.95);
  text-wrap: pretty;
  margin: 0;
}
.channel-brand {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.35em;
  letter-spacing: -0.02em;
  color: #fff5e6;
  margin-right: 0.1em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  vertical-align: -0.04em;
}


/* ===== Looking For (obsession pitch) ==================================== */
.looking-card {
  max-width: 560px;
  text-align: left;
}
/* Big, header-style line at the top of the looking-for card — meant to
   read as a punchy statement, not body copy. */
.looking-heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff5e6;
  margin: 0 0 clamp(16px, 2vw, 22px);
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.looking-heading strong {
  font-weight: 900;
  /* Warm accent on the punchline word so "obsession" pops. */
  color: var(--c-accent-bright);
}
.looking-copy {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: rgba(255, 238, 220, 0.95);
  text-wrap: pretty;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.looking-copy:last-of-type { margin-bottom: 0; }
.looking-copy strong {
  font-weight: 900;
  color: #fff5e6;
}
.looking-copy em {
  font-style: italic;
  color: #ffd29a;
  font-weight: 600;
}
.looking-copy--cta {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: #fff5e6;
}

/* Smaller "Apply Now" button used inside cards. Inherits .btn-primary
   color + shadow + shine; just tightens padding + font-size. Centers
   horizontally inside its parent card regardless of text-align. */
.card-apply {
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  padding: 18px 38px;
  font-size: 18px;
  display: flex;
}


/* ===== Offering (perks + culture) ====================================== */
.offering-card {
  max-width: 580px;
  text-align: left;
}
.offering-intro {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff5e6;
  margin: 0 0 clamp(18px, 2.2vw, 24px);
  text-wrap: balance;
}
.offering-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
}
.offering-list li {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: rgba(255, 238, 220, 0.92);
  text-wrap: pretty;
  padding-left: clamp(18px, 2vw, 24px);
  position: relative;
}
/* Orange accent dot in front of each item — small, deliberate. */
.offering-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-accent-bright);
  box-shadow: 0 0 10px rgba(255, 157, 82, 0.55);
}
.offering-list li strong {
  font-weight: 900;
  color: #fff5e6;
}


/* ===== Stats Callout (own row of counting boxes) ======================= */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 26px);
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.stat-card {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 200, 140, 0.08), transparent 50%),
    linear-gradient(140deg, #7c2308 0%, #9a3210 55%, #6e1f06 100%);
  border: 1px solid rgba(255, 220, 180, 0.18);
  border-radius: 22px;
  padding: clamp(22px, 3vw, 32px) clamp(18px, 2.5vw, 28px);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    0 18px 40px -20px rgba(0, 0, 0, 0.5);
  /* Each box also a flex column so the count and label stack cleanly. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  min-width: 0;
}
.stat-card-value {
  font-family: var(--f-display);
  font-weight: 900;
  /* Full numbers (3,400,000 / 500,000,000) — sized so 11-digit values
     fit comfortably on one line inside the card. */
  font-size: clamp(22px, 3.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff5e6;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-card-value .stat-plus {
  font-size: 0.55em;
  font-weight: 800;
  margin-left: 0.06em;
  margin-top: 0.1em;
  color: var(--c-accent-bright);
}
.stat-card-label {
  font-weight: 800;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 230, 200, 0.78);
}
@media (max-width: 560px) {
  .stats-row { grid-template-columns: 1fr; }
}


/* ===== About card (stats + headline) =================================== */
.stats-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.6vw, 28px);
  margin-bottom: clamp(22px, 2.8vw, 30px);
  border-bottom: 1.5px solid rgba(255, 235, 205, 0.18);
}
.stat { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.stat-value {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff5e6;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: flex-start;
}
.stat-plus {
  font-size: 0.55em;
  font-weight: 800;
  margin-left: 0.06em;
  margin-top: 0.1em;
  color: var(--c-accent-bright);
}
.stat-label {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 230, 200, 0.7);
}
.about-headline {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 5.8vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff5e6;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
.about-copy {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  color: rgba(255, 238, 220, 0.92);
  margin: clamp(16px, 2vw, 22px) auto 0;
  max-width: 46ch;
  text-wrap: pretty;
}


/* ===== Roles ============================================================= */
.roles-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(56px, 11vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: #fff5e6;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.32);
}
.roles-sub {
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #ffe1ad 0%, #ff9d52 55%, #ff6a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.3));
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: clamp(32px, 4.5vw, 52px) auto 0;
  text-align: left;
}
.role-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(18px, 2.5vw, 26px) clamp(22px, 3vw, 32px);
  border-radius: 999px;
  background: #fff8ec;
  border: 1.5px solid rgba(255, 230, 195, 0.4);
  color: var(--c-ink);
  transition: transform .25s ease, background .25s ease,
              border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.45);
}
.role-row:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: rgba(255, 230, 195, 0.8);
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55);
}
.role-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(22px, 3.6vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1;
}
.role-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-deep) 100%);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 6px 18px -6px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.role-row:hover .role-apply-btn {
  transform: translateX(2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 10px 24px -6px rgba(0, 0, 0, 0.45);
}
.role-apply-btn svg { transition: transform .25s ease; }
.role-row:hover .role-apply-btn svg { transform: translateX(3px); }


/* ===== Footer ============================================================ */
.site-foot {
  /* Top gap shrunk further (~20% less) so the polaroid tucks up closer
     to the Roles section above. */
  padding: calc(var(--gap-y) * 0.56) var(--pad) clamp(44px, 5vw, 64px);
  text-align: center;
}
.foot-polaroid-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  /* Shrink the wrap to the polaroid's footprint so :hover only fires
     when the cursor is actually over the photo, not the surrounding
     whitespace of the footer. */
  width: fit-content;
}

/* Hidden hand-written CTA sitting on the page behind the polaroid.
   Positioned near the top-center of where the polaroid was; smaller and
   more compact than before so it tucks neatly into the polaroid's footprint
   even when the polaroid swings back upright. */
.foot-secret {
  position: absolute;
  /* Sits in the upper portion of the polaroid's footprint. */
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.05;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  translate: 0 6px;
  transition: opacity .35s ease .15s, translate .45s ease .15s;
}
.foot-polaroid-wrap--revealed .foot-secret {
  opacity: 1;
  translate: 0 0;
}

/* The polaroid sits above the secret text (z-index) and pivots from its
   bottom edge. On desktop the wrap's :hover triggers the swing — see the
   media query below. On touch, the .foot-polaroid--revealed class added
   by JS (only when isTouch) triggers it instead. */
.foot-polaroid.polaroid {
  position: relative;
  z-index: 2;
  transform-origin: bottom center;
  transform: rotate(var(--rot));
  transition:
    transform .55s cubic-bezier(.34, 1.32, .64, 1),
    box-shadow .35s ease;
}
/* Cancel the base polaroid hover (which scales + un-rotates) — the desktop
   hover-to-reveal handler below overrides this with the swing transform. */
.foot-polaroid.polaroid:hover {
  transform: rotate(var(--rot));
}

/* --- Touch (mobile): JS toggles the revealed class --- */
.foot-polaroid--revealed.polaroid {
  /* 70% of the original 60° swing. */
  transform: rotate(-42deg);
}

/* --- Desktop (hover-capable + fine pointer): wrap-hover swings the
       polaroid out of the way and fades in the hidden CTA. --- */
@media (hover: hover) and (pointer: fine) {
  .foot-polaroid-wrap:hover .foot-polaroid.polaroid,
  .foot-polaroid-wrap:hover .foot-polaroid.polaroid:hover {
    transform: rotate(-42deg);
  }
  .foot-polaroid-wrap:hover .foot-secret {
    opacity: 1;
    translate: 0 0;
  }
}
.site-foot .foot-polaroid .polaroid-img { background-position: 35% center; }
.foot-logo {
  display: block;
  margin: 0 auto;
  height: clamp(40px, 6vw, 56px);
  aspect-ratio: 16 / 9;
  /* White logo (was light orange) */
  background-color: #ffffff;
  -webkit-mask: url("assets/logo-hd.png") center / contain no-repeat;
          mask: url("assets/logo-hd.png") center / contain no-repeat;
  opacity: 0.95;
}
.foot-tag {
  margin: clamp(12px, 1.5vw, 18px) 0 0;
  font-size: 13px;
  color: rgba(255, 235, 210, 0.78);
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* ===== Polaroid (standalone, used in card-stages + footer) ============= */
.polaroid {
  --pad: 10px;
  width: var(--w);
  margin: 0;
  padding: var(--pad) var(--pad) 0;
  background: #fefcf6;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 14px 32px -10px rgba(0, 0, 0, 0.45),
    0 32px 56px -24px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--rot));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .35s ease;
  position: relative;
  display: inline-block;
  will-change: transform;
}
.polaroid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.04), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255, 220, 180, 0.18), transparent 50%);
  mix-blend-mode: multiply;
}
.polaroid-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: #d8d2c8;
  filter: saturate(0.95) contrast(1.02);
}
.polaroid-cap {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  color: var(--c-ink);
  padding: 14px 6px 18px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  min-height: 56px;
  white-space: nowrap;
}
.polaroid:hover {
  transform: rotate(calc(var(--rot) * 0.3)) translateY(-6px) scale(1.04);
  z-index: 10;
}
/* When the polaroid is the absolutely-positioned card-photo, the rotate
   is baked into a transform that also vertically centers the element.
   Compose them so hover doesn't lose the centering. */
.card-photo.polaroid {
  transform: translateY(-50%) rotate(var(--rot));
}
.card-photo.polaroid:hover {
  transform: translateY(-50%) rotate(calc(var(--rot) * 0.3)) scale(1.04);
}


/* ===== Mobile breakpoints =============================================== */
@media (max-width: 760px) {
  /* Stack the offset polaroids BELOW the card on phones — absolute
     positioning gets too cramped at narrow widths. */
  .card-stage { padding-block: 0; }
  .card-photo,
  .card-photo--left,
  .card-photo--right {
    position: static;
    display: block;
    margin: clamp(-30px, -3vw, -16px) auto 0;
    transform: rotate(var(--rot));
    z-index: 3;
  }
  .card-photo--left  { margin-left: 12%; margin-right: auto; }
  .card-photo--right { margin-left: auto; margin-right: 12%; }
  .card-photo.polaroid { transform: rotate(var(--rot)); }
  .card-photo.polaroid:hover {
    transform: rotate(calc(var(--rot) * 0.3)) scale(1.04);
  }
}

@media (max-width: 640px) {
  :root { --gap-y: clamp(60px, 16vw, 100px); }

  .stats-strip { gap: 20px; }
  .role-apply-btn { padding: 11px 16px; font-size: 12px; }
}

@media (max-width: 380px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip .stat + .stat {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 235, 205, 0.18);
  }
}


/* ===== Mobile polish (#3 type · #4 tap targets · #8 rhythm · #10 flow) === */
@media (max-width: 760px) {
  /* #8 — one consistent vertical rhythm between every section on mobile. */
  :root { --gap-y: clamp(56px, 14vw, 92px); }

  /* #3 — tighten the hero stack so it sits comfortably on one phone screen. */
  .hero-logo { height: clamp(74px, 19vw, 104px); }
  .hero-title { font-size: clamp(38px, 10vw, 60px); }
  .hero-cta { margin-top: clamp(16px, 4vw, 24px); }
  .hero > .hero-cta .btn,
  .btn { padding: 18px 40px; font-size: 19px; }

  /* #4 — comfortable thumb targets: role rows + their button clear 48px. */
  .role-row { padding: 18px 20px; min-height: 60px; }
  .role-apply-btn { min-height: 44px; padding: 12px 18px; font-size: 12px; }
  .card-apply.btn { min-height: 52px; }

  /* #10 — nothing on the page may push past the viewport width. */
  .col, .col-wide, .dual-section, .about-us, .roles, .site-foot,
  .orange-card, .role-list, .stats-row { max-width: 100%; }
  img, .polaroid, .ptile { max-width: 100%; }
}

@media (max-width: 420px) {
  /* #3 — keep the headline from overpowering the smallest screens. */
  .hero-title { font-size: clamp(34px, 11vw, 46px); }
  .hero > .hero-cta .btn,
  .btn { padding: 16px 34px; font-size: 18px; }
}

/* #5 — honor data-saver where supported: drop the decorative shine. */
@media (prefers-reduced-data: reduce) {
  .btn-primary::after { animation: none; opacity: 0; }
}


/* ===== Reduced motion =================================================== */
@media (prefers-reduced-motion: reduce) {
  .photo-row { animation: none; transform: translateX(-25%); }
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}