/* landing-redo.css — "Wit-Zwart-Rood" landing hero redo (July 2026)
 * Scope: index.html only — replaces the old .cinema-hero + .tariffs region.
 * Reuses existing tokens from index.html's :root (--ink/--paper/--accent/
 * --muted/--line/--whatsapp/--serif/--sans) — no new tokens introduced.
 * Nav and top-strip are NOT touched here — see the small nav polish block
 * at the bottom, applied additively to the existing .nav/.brand selectors.
 */

/* These 3 GLBs ship geometry-only (no baked textures), so they render flat
 * white/grey without this warm metallic tint. The rule used to live in
 * css/cinema.css scoped to #vehicle-viewer (booking section) and
 * .layer-vehicle (old cinema hero) — removing cinema.css from this page
 * (it's now unused here) dropped that tint. Restated here, unscoped, so it
 * covers #vehicle-viewer AND the new .lp-fleet model-viewers below. */
model-viewer[src*="hiace"],
model-viewer[src*="noah"],
model-viewer[src*="wish"]{
  filter: brightness(0.86) sepia(0.55) saturate(1.55) hue-rotate(-14deg) contrast(1.05);
}

/* ===== HERO ===== */
/* Photo backdrop spans the whole hero — copy/district card AND the fleet
   grid below it — down to where .lp-fleet-band's red cards start. This
   used to be scoped to just the copy/district area, back when the fleet
   section held a flat cutout image with an opaque (non-transparent) white
   canvas that read as a visible box on top of a photo. Now that the fleet
   is 3 model-viewer cards with their own solid rounded backgrounds (same
   idea as .lp-district-card already sitting on this photo), there's no
   more reason to cut the backdrop short. */
.lp-hero{position:relative;padding:56px 0 0;overflow:visible;min-height:680px;display:flex;align-items:center;flex-direction:column;background:var(--paper)}
.lp-photo-frame{position:absolute;inset:0;z-index:0;overflow:hidden}
.lp-visual__bg{position:absolute;inset:0}
/* Two scrims: a light full-frame darkening so text over ANY part of the
   photo (not just the bottom) keeps a contrast floor, plus the stronger
   bottom-anchored gradient for the district name/controls chrome. */
.lp-visual__bg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);z-index:1;pointer-events:none}
.lp-visual__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);z-index:2;pointer-events:none}
.lp-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.lp-slide.active{opacity:1}
.lp-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* No backdrop-filter here (or on .lp-copy/.lp-fleet-glass below) —
   still lagging on the reported iPad after the first perf pass, and
   backdrop-filter isn't just an idle-state cost: on iOS Safari it forces
   continuous recompositing of whatever's underneath it on every scroll
   frame, not just once. Reducing the blur radius (previous fix) didn't
   remove that; only dropping it does. A dark solid-ish chip does the
   same "readable label over a photo" job without needing blur at all. */
.lp-district-name{position:absolute;left:var(--gutter);bottom:24px;z-index:3;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:10px 18px;color:#fff}
.lp-district-name .n{font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.lp-district-name .i{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-top:1px;font-variant-numeric:tabular-nums}
.lp-district-controls{position:absolute;right:var(--gutter);bottom:24px;z-index:3;display:flex;align-items:center;gap:10px}
/* Visible chip stays 28px (a bigger circle here would crowd the corner),
   but the hit area expands to ~40px via an invisible pseudo-element. */
.lp-carousel-pause{position:relative;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.lp-carousel-pause::before{content:"";position:absolute;inset:-6px}
.lp-carousel-pause .mi{font-size:15px;transition:opacity .15s ease,transform .15s ease}
.lp-carousel-pause .mi.is-swapping{opacity:0;transform:scale(.7)}
/* play_arrow's triangle reads slightly left-heavy in a centered box */
.lp-carousel-pause .mi[data-icon="play_arrow"]{margin-left:1px}
/* Dots sit 6px apart (8px each) — a full 40px hit area would overlap
   neighbors, so this expands as far as it can without doing that. */
.lp-district-dots{display:flex;gap:10px}
.lp-district-dots button{position:relative;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;padding:0;cursor:pointer}
.lp-district-dots button::before{content:"";position:absolute;inset:-4px}
.lp-district-dots button.active{background:#fff}
/* Focus rings on these controls sit directly on a rotating photo with no
   solid backing — a default outline's contrast depends on whatever photo
   happens to be behind it, so pair a light outline with a dark halo that
   reads against any background (same convention as css/chat-widget.css). */
.lp-carousel-pause:focus-visible,
.lp-district-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(0,0,0,.55)}

/* .lp-stage stacks above .lp-photo-frame (z-index 2 vs 0, siblings under
   .lp-visual-zone), which also puts its own empty grid padding above the
   photo-frame's .lp-district-controls/.lp-district-name (those only win
   against OTHER children of .lp-photo-frame, not a higher sibling of
   .lp-photo-frame itself) — silently eating clicks on the pause button and
   dots. pointer-events:none here + auto on the two actual cards lets clicks
   pass through the empty area instead. */
/* Rebalanced from .72fr/1.28fr — .lp-copy's max-width increase couldn't
   actually be reached at the old ratio (its column was narrower than the
   max-width itself), which made "Van Vertrek" wrap to 2 lines instead of
   fitting on one at the larger font-size. The right column still has
   plenty of room for the 390px district card at either ratio. */
.lp-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:24px;align-items:center;width:100%;padding-top:24px;padding-bottom:60px;pointer-events:none}
.lp-stage .lp-copy,.lp-stage .lp-visual{pointer-events:auto}

/* copy card */
.lp-copy{max-width:660px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);padding:44px 48px;box-shadow:0 34px 80px -38px rgba(0,0,0,.45)}
.lp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:1.1rem;font-weight:600;color:var(--muted)}
.lp-eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.lp-h1{font-family:var(--serif);font-weight:600;font-size:clamp(3.5rem,5.1vw,4.7rem);line-height:1.02;letter-spacing:-.03em;margin:20px 0 0;text-wrap:balance}
.lp-h1 em{color:var(--accent);font-style:normal;display:block}
.lp-route-div{display:flex;align-items:center;gap:12px;margin-top:26px}
.lp-route-div .rd-ic{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.lp-route-div .rd-ic .mi{font-size:24px}
.lp-route-div .rd-line{flex:1;max-width:150px;height:0;border-top:3px dashed var(--accent);opacity:.6}
.lp-sub{font-family:var(--sans);font-size:1.46rem;line-height:1.6;color:var(--ink-2);max-width:42ch;margin-top:24px;text-wrap:pretty}

/* service selector, relocated into the copy card — reuses the existing
   .svc-nav/.svc-btn/.svc-panel selectors and JS unmodified. .svc-btn and
   .svc-panel were authored for the old near-black cinema-hero (near-white
   text on near-black translucent fills); nested in this light glass card
   that reads as a contrast bug, not a style choice, so it's overridden to
   a light-on-light treatment here — .active keeps its own accent/white
   styling untouched since that one already has good contrast. */
.lp-copy .svc-nav{margin-top:26px;gap:.4rem}
.lp-copy .svc-btn{padding:.55rem 1rem;font-size:.94rem;background:rgba(17,17,17,.05);border-color:var(--line);color:var(--ink-2)}
.lp-copy .svc-btn:hover{background:rgba(17,17,17,.1);color:var(--ink);border-color:var(--muted-2)}
.lp-copy .svc-btn:active{transform:scale(.97)}
.lp-copy .svc-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.lp-copy .svc-panel{margin-top:.75rem;background:rgba(255,255,255,.55);border-color:var(--line)}
/* text of the copy card scaled up 30% across the board (2026-07-22) —
   these 5 override the pre-existing shared .svc-panel-*/.svc-cta rules,
   which were sized for the old cinema-hero's more compact panel. */
.lp-copy .svc-panel-tag{font-size:.78rem}
.lp-copy .svc-panel-title{color:var(--ink);font-size:clamp(1.3rem,2.86vw,1.82rem)}
.lp-copy .svc-panel-desc{color:var(--muted);text-wrap:pretty;font-size:1.07rem}
.lp-copy .svc-price{color:var(--ink);font-variant-numeric:tabular-nums;font-size:clamp(1.56rem,3.64vw,2.21rem)}
.lp-copy .svc-note{color:var(--muted);font-size:.78rem}
.lp-copy .svc-cta{font-size:1.04rem}

/* single action row inside the svc-panel: price on one side, Boek Nu +
   WhatsApp together on the other — previously there was a second,
   duplicate Boek Nu button in a separate row below the panel. */
.svc-panel-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.lp-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:1.2rem;padding:12px 22px;border-radius:9999px;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.lp-btn:active{transform:scale(.97)}
.lp-btn--green{background:var(--whatsapp);color:#fff}
.lp-btn--green:hover{filter:brightness(1.06)}

/* visual column: floating district-info card */
.lp-visual{position:relative;min-height:340px}
.lp-district-card{position:absolute;top:0;right:0;z-index:3;width:390px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 30px 60px -24px rgba(0,0,0,.4);padding:28px 30px}
.lp-district-card__top{display:flex;align-items:flex-start;gap:14px}
.lp-district-card__big{font-family:var(--serif);font-weight:700;font-size:4.42rem;line-height:.8;color:var(--accent);font-variant-numeric:tabular-nums}
.lp-district-card__lbl .k{font-family:var(--serif);font-weight:700;font-size:1.04rem;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.lp-district-card__lbl .v{font-size:1.12rem;color:var(--muted);margin-top:3px;text-wrap:pretty}
/* single column, not 2 — at the 30%-larger text size, the 2-column
   layout was too narrow for "Peperpot · 5°40'3″W"-length strings and
   wrapped mid-phrase after the middle dot, orphaning the coordinate on
   its own line. */
.lp-district-grid{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:8px}
.lp-district-grid .cell{display:flex;flex-direction:row;align-items:baseline;gap:8px}
.lp-district-grid .dir{font-family:var(--serif);font-weight:700;font-size:.94rem;color:var(--accent);flex:none}
.lp-district-grid .place{font-size:1.09rem;font-weight:600;color:var(--ink)}
.lp-district-photos{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.lp-district-photos img{aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;width:100%;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.lp-dest-pills{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:9px}
.lp-dpill{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-weight:600;font-size:1.04rem;padding:9px 14px;border-radius:9999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.lp-dpill .mi{font-size:15px;color:var(--accent);transition:color .2s}
.lp-dpill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lp-dpill:hover .mi{color:var(--paper)}
.lp-dpill:active{transform:scale(.97)}

/* fleet — 3 interactive GLB models with a spec card alongside each,
   replacing the earlier flat cutout image entirely. */
/* .lp-hero is a column flexbox with align-items:center, which makes flex
   children shrink-to-fit their content by default instead of stretching —
   .lp-stage already has its own width:100% to opt out of that; .lp-fleet
   didn't, so it (and everything nested inside it, all the way down to the
   glass boxes) was silently collapsing to a tiny intrinsic width. */
.lp-fleet{width:100%;padding:64px 0 96px}
/* max-width comes from the shared .shell class (1400px, same container
   width used everywhere else on the page) — keeps columns from stretching
   absurdly wide on ultra-wide monitors. */
.lp-fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.lp-fleet-item{display:flex;flex-direction:column;align-items:center;gap:.85rem}
/* Same frosted-glass treatment as .lp-copy/.lp-district-name, so the
   models read as an intentional surface rather than floating loose on the
   photo. model-viewer's own "auto" camera framing is the tightest distance
   that's guaranteed not to clip the model at ANY rotation angle (a car in
   profile is much wider than tall, so forcing a closer zoom clips the
   widest/broadside angle no matter the box proportions — tried that,
   reverted it). The box's HEIGHT is what actually governs how big "auto"
   renders the model, so it's generous here on purpose. */
.lp-fleet-glass{width:100%;height:460px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);box-shadow:0 24px 50px -30px rgba(0,0,0,.35);padding:16px}
.lp-fleet-glass model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent}
.lp-spec{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:12px 18px;text-align:center;width:100%}
.lp-spec__name{font-family:var(--serif);font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-bottom:5px;color:var(--ink)}
.lp-spec__row{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--ink-2);line-height:1.5}
.lp-spec__row .mi{font-size:15px;color:var(--accent)}
@media(max-width:900px){.lp-fleet-grid{grid-template-columns:1fr}.lp-fleet-glass{height:320px}}

@media(max-width:900px){
  .lp-hero{min-height:0;padding:24px 0 0;display:block}
  .lp-stage{grid-template-columns:1fr;padding-bottom:24px}
  .lp-visual{margin-top:24px;min-height:0}
  .lp-copy{max-width:none}
  .lp-district-card{position:static;width:100%;margin-bottom:16px}
}
@media(max-width:560px){
  .lp-copy{padding:24px 22px;border-radius:1rem}
  .lp-h1{font-size:clamp(2.4rem,10.5vw,3rem)}
  .lp-route-div .rd-line{max-width:none}
  .lp-district-card{padding:16px 18px;border-radius:1rem}
  .lp-district-card__big{font-size:3.12rem}
  .lp-district-name{left:16px;bottom:16px;padding:8px 14px}
  .lp-district-name .n{font-size:1rem}
  .lp-district-controls{right:16px;bottom:16px}
  .lp-spec{padding:7px 9px;border-radius:10px}
  .lp-spec__name{font-size:.72rem;margin-bottom:2px}
  .lp-spec__row{font-size:.62rem;gap:4px}
  .lp-spec__row .mi{font-size:12px}
}

/* ===== FLEET BAND — service segment cards ===== */
.lp-fleet-band{padding:40px 0 56px}
.lp-svc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lp-svc-card{display:flex;align-items:center;gap:16px;min-width:0;background:var(--accent);color:#fff;border-radius:var(--radius-lg);padding:22px 24px;box-shadow:0 24px 50px -26px rgba(227,6,19,.7);transition:transform .25s var(--ease-editorial,cubic-bezier(.2,.8,.2,1)),box-shadow .25s;cursor:pointer}
.lp-svc-card:hover{transform:translateY(-5px);box-shadow:0 34px 60px -24px rgba(227,6,19,.75)}
.lp-svc-card__ic{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.lp-svc-card__ic .mi{font-size:30px}
.lp-svc-card__t strong{font-family:var(--serif);font-weight:700;font-size:1.18rem;display:block;letter-spacing:-.01em;text-wrap:balance}
.lp-svc-card__t small{display:block;font-size:.82rem;line-height:1.4;color:rgba(255,255,255,.88);margin-top:3px;text-wrap:pretty}
.lp-svc-card__arrow{margin-left:auto;font-size:22px;flex:none;transition:transform .25s}
.lp-svc-card:hover .lp-svc-card__arrow{transform:translateX(4px)}
@media(max-width:1150px){.lp-svc-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-svc-cards{grid-template-columns:1fr}}
@media(max-width:900px){.lp-fleet-band{padding:40px 0 40px}}

/* ===== FEATURE ROW + CALL CARD ===== */
.lp-features{padding:0 0 56px}
.lp-features__grid{display:grid;grid-template-columns:repeat(5,1fr) 1.6fr;gap:16px}
.lp-feature{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.lp-feature .ic{width:48px;height:48px;border-radius:50%;background:rgba(227,6,19,.08);color:var(--accent);display:grid;place-items:center}
.lp-feature .ic .mi{font-size:24px}
.lp-feature .lbl{font-family:var(--serif);font-weight:600;font-size:.86rem;line-height:1.25;color:var(--ink)}
.lp-call-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 20px;display:flex;align-items:center;gap:16px}
.lp-call-card .ic{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.lp-call-card .ic .mi{font-size:26px}
.lp-call-card .t small{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.lp-call-card .t strong{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink)}
.lp-call-card .cal{margin-left:auto;width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--paper);display:grid;place-items:center;border:none;flex:none;cursor:pointer}
.lp-call-card .cal:hover{background:var(--accent)}
.lp-call-card .cal .mi{font-size:22px}
@media(max-width:980px){.lp-features__grid{grid-template-columns:repeat(2,1fr)}.lp-call-card{grid-column:1/-1}}
@media(max-width:560px){.lp-features__grid{grid-template-columns:1fr}}

/* ===== TRUST TICKER ===== */
.lp-trust{border-top:1px solid var(--line);padding:20px 0 40px}
.lp-trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.lp-trust__row > span{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lp-trust__row .mi{font-size:16px;color:var(--accent);text-transform:none}
@media(max-width:560px){.lp-trust__row{gap:14px 20px}.lp-trust__row > span{font-size:.72rem}}

/* ===== Reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .lp-slide{transition:none}
  .lp-svc-card,.lp-svc-card__arrow{transition:none}
}