/* ============================================================================
   leylive — home page
   ========================================================================== */

/* hero — full-bleed statement (Maxim 07-12): één zin, gecentreerd, ~100svh,
   met een scroll-hint onderaan en een subtiele cursor-trail (elk merk uniek). */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  padding: 132px 6vw 92px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.hero .label { margin-bottom: var(--s5); }
.hero-title {
  font-size: clamp(44px, 8.2vw, 118px);
  font-weight: 400; letter-spacing: -.035em; line-height: 1.04;
  max-width: 11em;
}
.hero-sub {
  margin-top: var(--s6);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300; color: var(--text-muted); max-width: 58ch;
}
.hero-cta { margin-top: var(--s7); }

/* scroll-hint — subtiel woord + chevron onderaan de hero, ook klikbaar */
.scrolldown {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted);
  font-size: 10.5px; font-weight: 300; letter-spacing: 1.4px;
  transition: color .3s var(--butter);
}
.scrolldown:hover { color: var(--ink); }
.scrolldown-ico { width: 15px; height: auto; animation: scrollNudge 1.9s var(--butter) infinite; }
@keyframes scrollNudge {
  0%, 60%, 100% { transform: translateY(0); opacity: .7; }
  30% { transform: translateY(5px); opacity: 1; }
}

/* hero image-trail — bij muisbeweging laat de cursor een staggerende sliert van
   echte website-mockups achter (codrops image-trail), gegroepeerd per case. Zit
   ACHTER de tekst (z-index 0 < .hero-inner z-index 2) zodat de titel leesbaar
   blijft. Desktop-only; RM/touch uit (shell.js initHeroTrail). */
.trail-img {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(128px, 12vw, 196px); aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: 12px;
  box-shadow: 0 22px 48px -20px rgba(16,16,16,.55);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
@media (pointer: coarse) { .trail-img { width: 104px; } } /* phone ghost trail (11-11 test) */

/* vakkenkiezer — eigen fullscreen sectie (Maxim 07-12). Kleinere verticale
   padding dan .section (128px) zodat de 6 rijen in ~één scherm passen. */
.picker-section {
  min-height: 100svh;
  padding: var(--s8) 6vw;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.picker { width: 100%; }
.picker .label { display: block; margin-bottom: var(--s3); }
.picker-q {
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.015em;
 margin-bottom: var(--s5);
}
.picker-q .q { color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-btn); padding: 0 .18em; margin-left: .06em; }
/* voor-wie fliprows in de hero — inline beeld groeit op hover (floema collections
   pattern). 07-11: dit verving de foto-kaartjes; links uitgelijnd op de hero-as.
   (de oude ncards + monogram-orb: git 0924c70 en eerder) */
.vlist { display: flex; flex-direction: column; gap: var(--s3); align-items: center; }
.picker .vrow {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 22px);
  font-size: clamp(34px, 5.6vw, 76px); font-weight: 400; letter-spacing: -.03em; line-height: 1.12;
 position: relative;
}
.vrow .vnum { font-size: 11px; font-weight: 300; color: var(--text-muted); letter-spacing: 1px; align-self: flex-start; margin-top: .6em; }
.vrow .vimg {
  position: relative;
  width: clamp(56px, 6.8vw, 104px); height: clamp(72px, 8.6vw, 130px);
  border-radius: var(--radius-field); overflow: hidden; flex: 0 0 auto; background: var(--surface);
  transition: width .45s cubic-bezier(.215,.61,.355,1);
}
.vrow .vimg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 3.5s var(--butter); }
.vrow:hover .vimg { width: clamp(170px, 19vw, 272px); }
.vrow:hover .vimg img { transform: scale(1); }
/* flipbook: extra frames stack over the first (which sizes the box). JS (home.js)
   fades each incoming frame in ON TOP of the previous (still opaque) one via
   inline opacity + z-index, so the light card background never shows through —
   no white flash. Resets to the first frame on leave. At rest (and no-JS /
   reduced-motion) the first frame shows. */
.vrow .vimg[data-flip] img { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: transform 3.5s var(--butter), opacity .14s linear; }
.vrow .vimg[data-flip] img:first-child { position: relative; opacity: 1; }
.vrow .vt { transition: opacity .35s var(--butter); }
.vlist:hover .vrow:not(:hover) .vt { opacity: .35; }
/* touch devices have no real hover: a tap 'sticks' :hover and grows the tile
   (up to 272px), reflowing the list and shoving the note down — feels buggy.
   keep the tile fixed and don't dim siblings on touch, so nothing jumps. */
@media (hover: none) {
  .vrow:hover .vimg { width: clamp(56px, 6.8vw, 104px); }
  .vrow:hover .vimg img { transform: scale(1.18); }
  .vlist:hover .vrow:not(:hover) .vt { opacity: 1; }
}
.voorwie-note { margin-top: var(--s6); color: var(--text-muted); font-size: 13.5px; }
.voorwie-note a { text-decoration: underline; text-underline-offset: 3px; }

/* works strip */
.works-grid { display: grid; grid-template-columns: 5fr 5fr 3fr; gap: var(--s5); align-items: end; }
.work .tile-l { height: clamp(280px, 30vw, 460px); }
.work .tile-s { height: clamp(220px, 22vw, 340px); }
.tile-tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(246,245,241,.92); }
.you-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.works-more { margin-top: var(--s7); }

/* (voor-wie fliprows verwijderd 2026-07-11 — samengevoegd met de hero-picker,
   audit 2.1; markup + stijlen + home.js-flipbook terug te halen via git) */

/* education dark band */
.eigendom { background: var(--dark); color: var(--dark-text); padding-top: var(--s10); padding-bottom: var(--s10); }
.eigendom .dark-label { color: var(--dark-muted); margin-bottom: var(--s6); }
.edu-stmt {
  font-size: clamp(24px, 3.2vw, 42px); font-weight: 300; line-height: 1.22; letter-spacing: -.015em;
  max-width: 24em; margin-bottom: var(--s8);
}
.edu-acc { max-width: 560px; }

/* proces — pinned scroll-driven steps (floema pinned-slider pattern) */
.pin-steps { height: 280vh; }
.pin-viewport {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 6vw; overflow: hidden;
}
.pin-viewport > .label { margin-bottom: var(--s7); }
.pin-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.pin-rail { display: flex; flex-direction: column; gap: var(--s4); }
.pin-nummask { display: block; overflow: hidden; height: clamp(110px, 13vw, 190px); }
.pin-num {
  display: block;
  font-size: clamp(110px, 13vw, 190px); font-weight: 600; line-height: 1; letter-spacing: -.05em;
  color: var(--ink);
}
.pin-total { font-size: 13px; font-weight: 300; color: var(--text-muted); letter-spacing: 1px; }
.pin-progress { width: min(220px, 100%); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.pin-progress i { display: block; height: 100%; width: 0; background: var(--ink); }
.pin-panels { position: relative; min-height: 320px; display: grid; }
.step-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.step-panel.is-active { opacity: 1; visibility: visible; }
.step-headline { font-size: clamp(30px, 3.8vw, 54px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; margin-bottom: var(--s5); max-width: 14em; }
.step-body { color: var(--text-muted); font-weight: 300; font-size: clamp(15px, 1.2vw, 17px); max-width: 48ch; margin-bottom: var(--s5); }
.step-detail { font-size: 13.5px; font-weight: 400; color: var(--ink); background: var(--accent); display: inline-block; padding: 8px 14px; border-radius: var(--radius-btn); color: var(--accent-ink); }
.pin-viewport .works-more { margin-top: var(--s8); }
/* static fallback (mobile / reduced motion): all steps stacked */
.pin-steps.static { height: auto; }
.pin-steps.static .pin-viewport { position: static; height: auto; padding: var(--s9) 6vw; overflow: visible; }
.pin-steps.static .pin-rail { display: none; }
.pin-steps.static .pin-grid { grid-template-columns: 1fr; }
.pin-steps.static .pin-panels { display: block; min-height: 0; }
.pin-steps.static .step-panel {
  opacity: 1; visibility: visible; position: static;
  border-top: 1px solid var(--line); padding: var(--s6) 0;
}
.pin-steps.static .pin-viewport .works-more { margin-top: var(--s5); }

/* maxim teaser */
.maxim { display: flex; gap: clamp(40px, 8vw, 110px); align-items: center; }
.maxim-l .label { display: block; margin-bottom: var(--s4); }
.portrait {
  width: 180px; height: 240px; border-radius: var(--radius-card);
  background: linear-gradient(165deg, #DEDBD2 0 30%, #8FA3BD 30% 62%, #24324A 62% 86%, #101010 86%);
  clip-path: inset(50%);
  transition: clip-path .62s cubic-bezier(.6,0,.3,1);
}
.portrait.on { clip-path: inset(0%); }
.maxim-txt { font-size: clamp(19px, 2.2vw, 28px); font-weight: 300; line-height: 1.4; max-width: 24em; }

/* CTA foot */
.foot { padding-top: var(--s10); padding-bottom: 180px; }
.foot-col { max-width: 620px; margin: 0 auto; text-align: center; }
.foot-h { font-size: clamp(26px, 3.4vw, 44px); font-weight: 300; line-height: 1.2; letter-spacing: -.015em; }
.foot-p { color: var(--text-muted); margin: var(--s4) 0 var(--s6); }
/* a closer without the grey line (contact, 11-12: "Maxim neemt zelf op…" removed) keeps a gap */
.foot-h + .pill { margin-top: var(--s7); }

@media (prefers-reduced-motion: reduce) {
  .portrait { clip-path: none; transition: none; }
  .scrolldown-ico { animation: none; }
}

@media (max-width: 900px) {
  .works-grid { grid-template-columns: 1fr 1fr; }
  .work-you { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .vrow .vnum { display: none; }
}
@media (max-width: 760px) {
  .hero { padding: 112px 20px 76px; }
  /* picker fullscreen op mobiel, maar laat 6 grote rijen natuurlijk overlopen
     i.p.v. persen — leesbaarheid boven "precies 1 scherm" */
  .picker-section { min-height: 100svh; padding-top: var(--s9); padding-bottom: var(--s9); }
  .picker .vrow { font-size: clamp(30px, 9vw, 52px); }
  .works-grid { grid-template-columns: 1fr; }
  .work-you { grid-column: auto; }
  .maxim { flex-direction: column; align-items: flex-start; }
  .foot { padding-bottom: 140px; }
}

/* ---------- agency audit 2026-11-11: hero CTA pair, na de lancering, 3 steps ---------- */
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.hero-alt { font-size: 14px; font-weight: 300; color: var(--text-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s var(--butter); }
.hero-alt:hover { color: var(--ink); }

.nl-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.nl-section .edu-stmt { margin-bottom: var(--s7); }
.nl-list { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.nl-list li { border-top: 1px solid var(--dark-line); padding: var(--s4) 0; color: var(--dark-muted); font-weight: 300; }
.nl-list li:last-child { border-bottom: 1px solid var(--dark-line); }
.nl-list b { display: block; color: var(--dark-text); font-weight: 400; margin-bottom: var(--s1); }
.nl-chat {
  margin: 0; display: flex; flex-direction: column; gap: var(--s3);
  background: #1A1A18; border: 1px solid var(--dark-line); border-radius: var(--radius-panel);
  padding: var(--s6) var(--s5);
}
.nl-chat .tag { align-self: flex-start; background: var(--dark-line); color: var(--dark-muted); margin-bottom: var(--s2); }
.nl-msg { max-width: 86%; padding: 12px 16px; border-radius: var(--radius-msg); font-size: 15px; line-height: 1.45; font-weight: 300; }
.nl-in { align-self: flex-start; background: var(--dark-line); color: var(--dark-text); border-bottom-left-radius: var(--radius-tag); }
.nl-out { align-self: flex-end; background: var(--bg); color: var(--ink); border-bottom-right-radius: var(--radius-tag); }

.steps3-section > .label { margin-bottom: var(--s7); }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
.steps3 li { border-top: 1px solid var(--line); padding-top: var(--s5); }
.s3-n { font-size: 11px; font-weight: 300; letter-spacing: 1px; color: var(--text-muted); }
.s3-h { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; margin: var(--s3) 0; }
.s3-p { color: var(--text-muted); font-weight: 300; max-width: 36ch; margin-bottom: var(--s4); }
.steps3-section .works-more { margin-top: var(--s7); }


@media (max-width: 900px) {
  .nl-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .steps3 { grid-template-columns: 1fr; gap: var(--s6); }
}

/* de mens erachter, rewritten 11-10: statement + one plain line + three facts */
.maxim-r { display: flex; flex-direction: column; gap: var(--s5); max-width: 40em; }
.maxim-p { font-size: clamp(16px, 1.25vw, 18px); font-weight: 300; line-height: 1.6; color: var(--text-muted); max-width: 52ch; }
.maxim-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s5); }
.maxim-facts li { font-size: 15px; font-weight: 300; line-height: 1.5; }
.mf-k { display: block; font-size: 12px; letter-spacing: .5px; color: var(--text-muted); margin-bottom: var(--s2); }
@media (max-width: 760px) { .maxim-facts { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- 11-10 (Maxim): de film under the hero + images in the pinned steps ---------- */
.film-section { padding: var(--s8) 0 var(--s9); background: var(--dark); color: var(--dark-text); }
.film-section > .label { margin: 0 6vw var(--s5); color: var(--dark-muted); }
.film-frame {
  position: relative; margin: 0; width: 100%; overflow: hidden; border-radius: var(--radius-panel);
  background: var(--bg); aspect-ratio: 16 / 9; transform-origin: 50% 50%; will-change: transform;
}
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-ctrls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.film-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--ink); color: var(--bg); cursor: pointer;
  display: grid; place-items: center; opacity: .82; transition: opacity .2s ease-out, transform .2s ease-out;
}
.film-btn[hidden] { display: none; }
.film-btn:hover { opacity: 1; transform: scale(1.06); }
.film-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; opacity: 1; }
.film-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.film-sound .ico-on, .film-sound[aria-pressed="true"] .ico-off { display: none; }
.film-sound[aria-pressed="true"] .ico-on { display: block; }

/* 11-11 (Maxim: "raar met die zwarte randen" → fullscreen + snap). On landscape screens the
   section is exactly one screen tall and the film covers it edge to edge; home.js scales it in
   and snaps the scroll hero → film → het voorbeeld. Between 3:2 and 41:20 cover crops ≤ 7.5% per
   side; outside that range (ultrawide / near-square) the whole frame stays visible.
   11-11 (Maxim: "still has black bars"): the old upper bound 2:1 gave a maximised 1080p browser
   (~2.03:1) bars. Measured: at 2.03 the frame-filling chat scene (22–24 s) stays inside, at 2.13
   its "gelezen" is cut. So cover stops at 41:20 and beyond it home.js paints each strip in the
   film's own edge colour (per video frame), which makes the strips read as part of the scene. */
@media (min-width: 761px) and (orientation: landscape) {
  .film-section { position: relative; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
  .film-section > .film-label { position: absolute; top: var(--s6); left: 6vw; margin: 0; z-index: 1; pointer-events: none; }
  .film-frame { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: var(--dark); }
  .film-ctrls { right: auto; left: 24px; bottom: 24px; } /* bottom-right belongs to the chat launcher */
}
@media (min-width: 761px) and (orientation: landscape) and ((max-aspect-ratio: 3/2) or (min-aspect-ratio: 41/20)) {
  .film-video { object-fit: contain; }
}
/* pause = two bars; play (aria-pressed=true / paused) = triangle */
.film-ico { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.film-toggle[aria-pressed="true"] .film-ico {
  width: 0; height: 0; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 12px solid currentColor; margin-left: 3px;
}

/* steps: text left, image right inside each panel; the big number column narrows */
.pin-grid { grid-template-columns: minmax(210px, .6fr) 3fr; }
.pin-num, .pin-nummask { font-size: clamp(96px, 11vw, 164px); height: auto; }
.pin-nummask { height: clamp(96px, 11vw, 164px); }
.step-panel { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.step-fig { margin: 0; border-radius: var(--radius-panel); overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.step-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step-headline { max-width: 11em; }
.pin-steps.static .step-panel { grid-template-columns: 1fr; gap: var(--s5); }
.pin-steps.static .step-fig { order: -1; aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .film-section { padding: var(--s5) 0; }
  .film-section > .label { margin: 0 20px var(--s4); }
  .film-ctrls { right: 10px; bottom: 10px; }
  .hero-alt { display: inline-block; padding: 11px 4px; }
}
/* pin → closer: the pin viewport already leaves air below, so the closer starts closer */
.process + .foot { padding-top: var(--s7); }