/* ============================================
   BUSINESS FOUNDERS: Home compartments
   Full-screen sections, one per offering, each
   with its own palette and 3D hero object.
   Choreography classes set by js/home.js:
   .shown  : entrance plays
   .active: centre-stage
   --scrollp: -1..1 scroll position
   ============================================ */

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
}

.comp {
  position: relative;
  /* lvh, and deliberately not the other two. svh is the height with the
     browser chrome expanded, so once iOS retracts the address bar the
     panel stops short and the next compartment shows along the bottom
     edge. dvh closes that gap but changes value while the chrome moves,
     and a panel that resizes mid-scroll fights mandatory snap: the flick
     sticks between panels. lvh is the retracted height, a fixed number
     that never changes during a scroll, so the panel is never shorter
     than the screen and the snap has a stable target. The cost is that
     while the address bar is showing the panel runs slightly past the
     fold, which resolves the moment the user scrolls. */
  min-height: 100vh;
  min-height: 100lvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.comp-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 16%, var(--c-faint), transparent 55%),
    linear-gradient(180deg, var(--c-top), var(--c-bottom));
}
.comp-inner {
  position: relative;
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 80px);
  padding: 96px 28px 56px;
}
.comp-meta { max-width: 440px; }
.comp-meta .eyebrow { color: var(--c-accent); }
.comp-meta h2 {
  font-family: var(--font-display);
  color: var(--c-text);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.16;
  margin: 6px 0 14px;
}
.comp-meta p {
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 26px;
}
.comp-cta {
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid var(--c-accent);
  border-radius: 2px;
  color: var(--c-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.comp-cta:hover,
.comp-cta:focus-visible {
  background: var(--c-accent);
  color: var(--c-bottom);
  transform: translateY(-2px);
}

/* stage: the 3D object */
.stage {
  position: relative;
  width: clamp(240px, 30vw, 360px);
  flex-shrink: 0;
  perspective: 1100px;
}
.stage-tilt { transform-style: preserve-3d; will-change: transform; }

/* shared entrance: swipe in from the right */
.stage {
  opacity: 0;
  transform: translateX(14vw);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease-out;
}
.comp-meta {
  opacity: 0;
  transform: translateX(48px);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
    opacity 0.45s ease-out 0.16s;
}
.comp.shown .stage,
.comp.shown .comp-meta { opacity: 1; transform: none; }

/* ============================================
   1 · Intro
   ============================================ */
.comp-intro {
  flex-direction: column;
  text-align: center;
  padding: 130px 24px 70px;
}
.comp-intro h1 {
  font-size: clamp(40px, 7vw, 78px);
  line-height: 1.06;
  margin-bottom: 22px;
}
.comp-intro .sub {
  color: var(--text-dim);
  max-width: 560px;
  font-size: 17px;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Each compartment snaps to exactly one screen and cannot scroll inside
   itself, so on a short phone anything past the fold is unreachable
   rather than just below. Measured at 360x640 the hero came to 792px and
   the second button fell off. This has to sit after the base .comp-intro
   rules: same specificity, so source order decides. */
@media (max-height: 700px) {
  .comp-intro { padding: 74px 20px 26px; }
  .comp-intro h1 { font-size: clamp(30px, 6vw, 50px); margin-bottom: 14px; }
  .comp-intro .sub { font-size: 15px; margin-bottom: 22px; }
  .comp-intro .eyebrow { margin-bottom: 10px; }
  .scroll-hint { margin-top: 18px; width: 34px; height: 34px; }
}
.scroll-hint {
  margin-top: 46px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  animation: hintBob 2.2s ease-in-out infinite;
}
@keyframes hintBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(9px); opacity: 1; }
}

/* ============================================
   2 · The Proof
   ============================================ */
.comp-proof { flex-direction: column; text-align: center; padding: 110px 24px 70px; }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 4vw, 54px);
  margin-top: 42px;
  width: 100%;
  max-width: 900px;
}
.proof-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s ease-out var(--d), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d);
}
.comp.shown .proof-item { opacity: 1; transform: none; }
.proof-item .num {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  color: var(--gold);
  line-height: 1;
}
.proof-item .label {
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.proof-rule {
  width: 100%;
  max-width: 900px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
  margin-top: 44px;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
.comp.shown .proof-rule { transform: scaleX(1); }

/* ============================================
   3 · E-Books: four spines fanned
   ============================================ */
.books-fan {
  display: flex;
  justify-content: center;
  gap: 14px;
  transform-style: preserve-3d;
}
.fan-book {
  width: clamp(52px, 6vw, 74px);
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--btop), var(--bbot));
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--bacc);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  transform: rotateY(calc((var(--i) - 1.5) * -14deg)) translateY(34px);
  opacity: 0;
  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 110ms),
    opacity 0.5s ease-out calc(var(--i) * 110ms);
}
.comp.shown .fan-book {
  opacity: 1;
  transform: rotateY(calc((var(--i) - 1.5) * -14deg)) translateY(0);
  animation: fanBob 5.5s ease-in-out calc(var(--i) * 0.55s) infinite;
}
@keyframes fanBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

/* ============================================
   4 · Free chapter: a page lifting off the stack
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-lift {
  position: relative;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
}
.sheet {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 14%;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  background: linear-gradient(160deg, #f6f2e8, #ddd6c6);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet-deep  { transform: translateZ(-14px) rotate(0deg); opacity: 0.3; }
.sheet-back  { transform: translateZ(0) rotate(0deg); opacity: 0.45; }
.sheet-mid   { transform: translateZ(14px) rotate(0deg); opacity: 0.7; }
.sheet-front {
  transform: translateZ(28px);
  padding: 13% 11%;
  border-top: 3px solid var(--c-accent);
}
/* one sheet per book: four fanned corners, the front one lifting off */
.comp.shown .sheet-deep { transform: translateZ(-14px) translate(11%, 8%) rotate(7.6deg); }
.comp.shown .sheet-back { transform: translateZ(0) translate(7%, 5%) rotate(5deg); }
.comp.shown .sheet-mid  { transform: translateZ(14px) translate(3%, 2%) rotate(2.4deg); }
.comp.shown .sheet-front {
  transform: translateZ(46px) translateY(-5%) rotate(-2deg);
  animation: sheetBob 6.5s ease-in-out 0.9s infinite;
}
@keyframes sheetBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
.sheet-tag {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c5a2e;
  margin-bottom: 11%;
}
.sheet-lines { display: flex; flex-direction: column; gap: 9%; }
.sheet-lines i {
  display: block;
  height: 3px;
  width: var(--w);
  border-radius: 2px;
  background: #b9ae97;
}

.lead-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--c-muted);
}

/* ============================================
   Retired: 4K Clips film frames
   ============================================ */
.film-stack {
  position: relative;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
}
.frame {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 26%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: linear-gradient(150deg, #35485C, #131C26 70%);
  border: 1px solid rgba(159, 182, 204, 0.3);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
  transform: translateZ(0) translateY(0) rotate(0deg);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--f) * 90ms);
}
/* artwork sits inside the sprocket rails */
.frame-art {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 4px;
  bottom: 4px;
  width: auto;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
}
/* cinematic grade over the art: cool shadows, warm highlight, vignette */
.frame::after,
.frame::before { z-index: 2; }
.frame-grade {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 4px;
  bottom: 4px;
  z-index: 1;
  border-radius: 2px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(159, 182, 204, 0.1), transparent 45%);
}

/* sprocket holes down each side */
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 7px;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(159, 182, 204, 0.5) 0 5px,
    transparent 5px 12px
  );
}
.frame::before { left: 5px; }
.frame::after { right: 5px; }
.comp.shown .frame {
  transform:
    translateZ(calc(var(--f) * 26px))
    translateY(calc(var(--f) * -30px))
    rotate(calc((var(--f) - 1.5) * 3.4deg));
}
.play-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  font-size: 19px;
  transform: translateZ(120px);
  opacity: 0;
  transition: opacity 0.5s 0.55s;
}
.comp.shown .play-mark { opacity: 1; animation: playPulse 3.4s ease-in-out 1.1s infinite; }
@keyframes playPulse {
  0%, 82%, 100% { box-shadow: 0 0 0 0 rgba(159, 182, 204, 0.5); }
  91% { box-shadow: 0 0 0 16px rgba(159, 182, 204, 0); }
}

/* ============================================
   5 · Editor: timeline tracks snapping into sync
   ============================================ */
.timeline {
  position: relative;
  padding: 22px 18px;
  border: 1px solid rgba(224, 145, 58, 0.25);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(59, 20, 24, 0.85), rgba(21, 8, 9, 0.9));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.track { display: flex; gap: 7px; margin-bottom: 9px; }
.track:last-child { margin-bottom: 0; }
.clip {
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-accent), #8A4A18);
  opacity: 0;
  transform: translateX(-40px);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--cd),
    opacity 0.4s ease-out var(--cd);
}
.clip.muted { background: linear-gradient(180deg, #5C3A3F, #332024); }
.comp.shown .clip { opacity: 1; transform: none; }
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #F6E7C8;
  box-shadow: 0 0 10px rgba(246, 231, 200, 0.8);
  left: 0;
  opacity: 0;
}
.comp.shown .playhead { opacity: 1; animation: sweep 4.2s linear 0.9s infinite; }
@keyframes sweep {
  0% { left: 4%; }
  100% { left: 96%; }
}

/* ============================================
   6 · Testimonials
   ============================================ */
.comp-quotes { flex-direction: column; padding: 100px 24px 64px; }
.quotes-head { text-align: center; margin-bottom: 38px; }
.quotes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1000px;
}
.quote-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 26px 22px;
  opacity: 0;
  transform: translateX(46px);
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--qd),
    opacity 0.5s ease-out var(--qd);
}
.comp.shown .quote-card { opacity: 1; transform: none; }
.quote-card .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; font-size: 14px; }
.quote-card .quote { font-style: italic; color: var(--text); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.quote-author { display: flex; align-items: center; gap: 12px; }
.quote-author .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold), #8a6d1f);
  color: #10100f;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.quote-author .name { font-size: 14px; color: var(--text); }
.quote-author .role { font-size: 12px; color: var(--text-dim); }

/* ============================================
   7 · Story + CTA + footer
   ============================================ */
.comp-tail {
  /* min-height was auto so the panel could grow for the footer, but that
     also let it come up short: its natural height is about 1150px, so on
     a window taller than that the compartment above leaked in at the top.
     At least one screen now, as a column with the footer pinned to the
     bottom, so the slack lands above the footer rather than under it. */
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 96px;
}
.comp-tail .footer { margin-top: auto; }

/* The tail is the one compartment taller than a screen, and it is meant
   to read as an ordinary page: story, guarantees, CTA, footer. Mandatory
   snap fights that, so js/main.js releases the snap once this section has
   landed and restores it when the reader pages back up. snap-stop goes to
   normal so a longer swipe can run into it rather than being halted at
   the top edge. */
.comp-tail { scroll-snap-stop: normal; }

/* The tail has a full-screen minimum so the compartment above cannot
   leak in, and the footer is pinned to the bottom. On a page whose tail
   carries little (the shop's is a 140px guarantee bar) that left all the
   slack in one void above the footer: 335px at 1280x900, 675px at
   1920x1240. Let the content take the free space and sit centred in it,
   so the room reads as breathing space rather than a gap. */
.tail-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 54px;
}
.story h2 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); margin: 6px 0 16px; }
.story p { color: var(--text-dim); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.tail-cta { text-align: center; padding: 20px 0 60px; }
.tail-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); margin-bottom: 12px; }
.tail-cta p { color: var(--text-dim); margin-bottom: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .comp-inner {
    flex-direction: column;
    text-align: center;
    gap: 32px;
    padding: 92px 24px 48px;
  }
  .comp-meta { max-width: 460px; }
  .stage { width: min(66vw, 300px); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .quotes-row { grid-template-columns: 1fr; max-width: 420px; }
  .comp-quotes .quotes-row .quote-card:nth-child(n + 3) { display: none; }

  /* the lead compartment carries a form as well as a stage, so it
     needs a tighter stage to stay inside one snapped screen */
  .comp-lead .stage { width: min(46vw, 190px); }
  .comp-lead .comp-inner { gap: 22px; }
  .comp-lead .lead-note { max-width: 320px; margin-inline: auto; }
}
@media (max-height: 700px) and (max-width: 900px) {
  .stage { width: min(52vw, 240px); }
  .comp-meta h2 { font-size: 24px; }
  .comp-meta p { font-size: 14px; margin-bottom: 18px; }
}

/* Tall phones. 6vw puts .fan-book on its 52px floor at phone widths, so
   the fan rendered smaller here than on desktop and the panel read as
   half empty. Must sit at top level: nested inside the max-height:700px
   block above, min-height:701px can never match. */
@media (max-width: 900px) and (min-height: 701px) {
  /* the stage has to widen with the books or the flex row just shrinks
     them back: four at 70px plus three 14px gaps needs about 323px */
  .comp-books .stage { width: min(88vw, 340px); }
  .fan-book { width: min(18vw, 76px); }
  .comp-inner { gap: 40px; }
  .comp-meta h2 { font-size: 31px; }
  .comp-meta p { font-size: 16.5px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .stage, .comp-meta, .stage-tilt, .fan-book, .frame, .play-mark,
  .clip, .playhead, .quote-card, .proof-item, .proof-rule, .scroll-hint {
    transition: none !important;
    animation: none !important;
  }
}

/* secondary line under a compartment CTA */
.comp-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--c-muted);
}
.comp-note a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.comp-note a:hover,
.comp-note a:focus-visible { border-bottom-color: var(--c-accent); }

/* ============================================
   6 · Become an Editor: roster card, not yet open
   ============================================ */
.roster-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  padding: 30px 26px;
  background: linear-gradient(165deg, rgba(46, 33, 25, 0.95), rgba(16, 11, 8, 0.98));
  border: 1px solid rgba(224, 145, 58, 0.28);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.roster-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px dashed rgba(224, 145, 58, 0.5);
  background: rgba(224, 145, 58, 0.08);
  margin-bottom: 22px;
}
.roster-line {
  height: 9px;
  border-radius: 3px;
  background: rgba(245, 237, 228, 0.14);
  margin-bottom: 11px;
}
.roster-line.w85 { width: 85%; }
.roster-line.w70 { width: 70%; }
.roster-line.w60 { width: 60%; }
.roster-line.w45 { width: 45%; background: rgba(224, 145, 58, 0.3); }
.roster-rule {
  height: 1px;
  background: rgba(224, 145, 58, 0.22);
  margin: 20px 0;
}
/* ribbon across the corner: the "not yet" signal */
.roster-ribbon {
  position: absolute;
  top: 30px;
  right: -52px;
  width: 200px;
  padding: 8px 0;
  text-align: center;
  transform: rotate(38deg);
  background: var(--c-accent);
  color: #170D05;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
/* slow shimmer so the card reads as waiting, not broken */
.roster-shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 40%;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 255, 255, 0.07) 50%, transparent 90%);
  transform: translateX(-160%) skewX(-14deg);
  pointer-events: none;
}
.comp.shown .roster-shine { animation: rosterShine 6s linear infinite; }
@keyframes rosterShine {
  0%, 74% { transform: translateX(-160%) skewX(-14deg); }
  92%, 100% { transform: translateX(320%) skewX(-14deg); }
}

/* ============================================
   From the Page: the reels the audience follows for.
   Built by js/feed.js, absent entirely until there
   is content in js/feed-config.js.
   ============================================ */
.comp-feed { flex-direction: column; }

.feed-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 28px 44px;
}

.feed-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 38px;
}
.feed-head .eyebrow { color: var(--c-accent); }
.feed-head h2 {
  font-family: var(--font-display);
  color: var(--c-text);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.16;
  margin: 6px 0 12px;
}
.feed-head p {
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* three across on a desktop, a sideways swipe on a phone */
.reel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 660px;
  margin: 0 auto;
}

.reel {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.5s ease-out calc(var(--r) * 90ms),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--r) * 90ms),
    border-color 0.3s;
}
.comp.shown .reel { opacity: 1; transform: none; }
.reel:hover, .reel:focus-visible {
  border-color: var(--c-accent);
}
.reel:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reel:hover img { transform: scale(1.05); }

.reel-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color 0.3s, transform 0.3s;
}
.reel:hover .reel-play {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #0d0912;
  transform: scale(1.08);
}

.reel-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}

.feed-cta {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
}

/* short desktop windows: shrink the tiles rather than overflow the screen */
@media (min-width: 901px) and (max-height: 860px) {
  .reel-row { max-width: 560px; gap: 14px; }
  .feed-wrap { padding-top: 76px; padding-bottom: 36px; }
  .feed-head { margin-bottom: 26px; }
}

@media (max-width: 900px) {
  .feed-wrap { padding: 84px 0 44px; }
  .feed-head { padding: 0 24px; margin-bottom: 26px; }
  .feed-head p { font-size: 15px; }
  /* a phone swipes sideways through reels rather than stacking them,
     which keeps the whole section inside one snapped screen */
  .reel-row {
    display: flex;
    gap: 12px;
    max-width: none;
    padding: 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reel-row::-webkit-scrollbar { display: none; }
  .reel {
    flex: 0 0 auto;
    width: 58vw;
    max-width: 230px;
    scroll-snap-align: center;
  }
  .feed-cta { margin-top: 26px; }
}

/* a quiet line under the hire CTA, since editor applications are shut */
.comp-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--c-muted);
}
.comp-note a {
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.comp-note a:hover { border-bottom-color: var(--c-accent); }