/* ===========================================================================
   home-cinema.css — the homepage as one continuous, cinematic scroll.
   ===========================================================================
   Loaded ONLY by index.html, last of its stylesheets, and every rule is
   scoped to `body.home-cine` — the seven other pages that share main.css and
   home-ref.css are untouched by it.

   WHAT IT DRESSES, top to bottom, and where each one's motion lives:

     1. header      transparent over the photograph -> compact dark glass
     2. hero        photograph, globe canvas, shade, grain, copy, search card
     3. card        the SAME BookingCard, re-dressed: layered depth, sliding
                    tab pill, focus underline, border glint, button sheen
     4. bridge      the route continuing out of the hero through four stops
     5. shelf       the destinations as an editorial grid, not a uniform one
     6. why         a statement that fills as it scrolls, promises on a rail
     7. finale      "Ready to go?" — CTA, contact form, newsletter
     8. footer      a gold rule drawn across its top edge

   THE MOTION IS home-cinema.js's (GSAP + ScrollTrigger). This file holds the
   resting composition, the hover/focus microinteractions (pure CSS — they
   need no scroll), and the one PRE-STATE the opening sequence starts from.

   FAIL-OPEN. The only hidden-by-CSS state is under `html.cine-pre`, which
   the inline script in <head> sets and which is removed by home-cinema.js
   or by a 4s timer, whichever comes first. Everything else starts visible
   and is hidden, if at all, by the script that is about to animate it.

   PERFORMANCE. What moves on scroll is transform and opacity; the two
   clip-path reveals (the statement fill, the finale's circle) are on small
   or single layers. No rule here animates layout.
   =========================================================================== */

@property --cn-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

body.home-cine {
  --cn-night:    #060a12;
  --cn-ink:      #0d1422;
  --cn-ivory:    #f5f0e8;
  --cn-sand:     #e8dfd1;
  --cn-gold:     #d9b26f;
  --cn-gold-lt:  #f0d9a6;
  --cn-gold-ink: #8a6427;
  --cn-text:     #151b27;
  --cn-muted:    #6c6962;
  --cn-ease:     cubic-bezier(.22, 1, .36, 1);
  --cn-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --cn-r:        clamp(22px, 2.6vw, 40px);
  background: var(--cn-ivory);
}
body.home-cine main { background: var(--cn-ivory); }

/* Shared editorial furniture ------------------------------------------- */
body.home-cine .cine-rule {
  display: inline-block; width: 44px; height: 1px; flex: none;
  background: currentColor; opacity: .8; transform-origin: 0 50%;
}
body.home-cine .cine-kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: var(--cn-gold-ink);
}
/* A masked line: the outer span clips, the inner one rises into it. */
body.home-cine .cine-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
body.home-cine .cine-line > span { display: inline-block; will-change: transform; }
body.home-cine .cine-lede { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.7; max-width: 44ch; }

/* The pill CTA. Hover lifts 2px, the arrow travels 4px, the ground warms. */
body.home-cine .cine-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 22px 15px 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .35s var(--cn-ease), background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.home-cine .cine-cta svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--cn-ease);
}
body.home-cine .cine-cta:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: var(--cn-gold); }
body.home-cine .cine-cta:hover svg { transform: translateX(4px); }
body.home-cine .cine-cta:active { transform: translateY(0); }
body.home-cine .cine-cta-solid {
  border: none; background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  box-shadow: 0 18px 40px -16px rgba(201,72,47,.75);
}
body.home-cine .cine-cta-solid:hover { background: linear-gradient(135deg, #d4543a, var(--coral)); box-shadow: 0 24px 46px -16px rgba(201,72,47,.85); }

/* ==========================================================================
   1. HEADER — now the design system's (jw-header.js + jw-system.css
   "chrome"): clear over this photograph, compact dark glass on scroll, the
   sliding indicator under the product the search card is showing.
   ========================================================================== */

/* PARTNERS WAITS FOR THE SESSION. This page's header is static markup, so it
   paints before app.js has asked profile-menu.js who is signed in — and a
   signed-in traveller saw the B2B button for a frame on every refresh.
   profile-menu.js stamps jp-signed-in or jp-signed-out on every load here;
   until one of them is on <html> the button holds its place, unseen. (Its
   hiding once signed in is jw-system.css's.) */
html:not(.jp-signed-in):not(.jp-signed-out) body.home-cine .jw-hdr .jw-hdr__partner { visibility: hidden; }

/* ==========================================================================
   2. HERO
   ========================================================================== */
/* TOP-ANCHORED, not bottom-anchored. With flex-end, any height the card did
   not use went ABOVE the title, so switching to a shorter tab (Hotels, Tour
   Packages) dropped the headline by exactly the height the card lost. Now the
   title sits at the padding-top line on every tab and the card hangs below it
   at the same gap; a shorter card leaves the spare height under itself. */
/* THE TWO HERO GAPS, measured to what the eye sees:
   - header -> title: from the bottom of the logo (the lowest thing in the
     header; it is centred in the --ds-header-h bar, so it ends 13px above the
     bar's foot) to the top of the capitals. The display face carries ~.14em of
     empty space above its capitals, so that is taken back out of the padding.
   - title -> card: the dock's margin-top. The masked lines' .08em padding /
     -.08em margin pair leaves the copy box ending at the glyphs' foot, so this
     margin IS the visible gap.
   The title size lives in --cn-title-fs so the padding can follow it. */
body.home-cine .cine-hero {
  --cn-title-fs: clamp(34px, min(8.3vw, 13.5vh), 136px);
  --cn-hdr-ink: calc(var(--ds-header-h, 88px) - 13px);
  --cn-gap-hdr: clamp(22px, 3.6vh, 28px);
  --cn-gap-card: clamp(16px, 3vh, 26px);
  position: relative; z-index: 2; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--cn-hdr-ink) + var(--cn-gap-hdr) - .14 * var(--cn-title-fs)) 0 clamp(58px, 7.5vh, 90px);
  overflow: visible; background: var(--cn-night);
}

/* The stage clips the photograph; the section does not clip, so nothing the
   card opens is ever cut. Bottom corners are rounded: at rest they sit on the
   same night colour and read as nothing, and as the stage recedes on scroll
   they become the edge of a frame. */
body.home-cine .cine-stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: 0 0 var(--cn-r) var(--cn-r);
  transform-origin: 50% 0; will-change: transform;
  background: var(--cn-night);
}
body.home-cine .cine-media { position: absolute; inset: -8% 0; will-change: transform; }
body.home-cine .cine-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 54% 44%;
  max-width: none; transform-origin: 54% 44%;
}
body.home-cine .cine-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,7,14,.78) 0%, rgba(4,7,14,.46) 30%, rgba(4,7,14,.08) 58%, rgba(4,7,14,0) 72%),
    linear-gradient(180deg, rgba(4,7,14,.66) 0%, rgba(4,7,14,.08) 26%, rgba(4,7,14,0) 52%, rgba(4,7,14,.62) 82%, rgba(6,10,18,.96) 100%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%);
}
/* FILM GRAIN. A fractal-noise tile, larger than the frame and stepped
   around with transform only, so it shimmers like stock without a repaint. */
body.home-cine .cine-grain {
  position: absolute; inset: -60%; z-index: 3; pointer-events: none;
  opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: cn-grain 1.1s steps(5) infinite;
}
@keyframes cn-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-3%, 9%); }
  80%  { transform: translate(8%, 2%); }
  100% { transform: translate(0, 0); }
}

/* --- the copy --------------------------------------------------------- */
body.home-cine .cine-copy { position: relative; z-index: 3; width: 100%; color: #fff; }
/* h1 AND the class: home-ref.css sizes `body.home-ref .hero h1`, which
   would otherwise out-rank a single class here. */
body.home-cine .cine-hero h1.cine-title {
  margin: 0; max-width: none;
  font-family: var(--cn-display); font-weight: 500;
  font-size: var(--cn-title-fs); line-height: .9; letter-spacing: -.02em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 10px 50px rgba(0,0,0,.35);
}
body.home-cine .cine-hero h1.cine-title em {
  font-style: italic; font-weight: 500; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--cn-gold-lt) 0%, var(--cn-gold) 45%, #c08b3e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
/* --- the dock --------------------------------------------------------- */
body.home-cine .cine-dock {
  position: relative; z-index: 4; margin-top: var(--cn-gap-card); max-width: var(--max, 1280px);
  will-change: transform; transform-origin: 50% 100%;
}
/* LAYERED DEPTH: a smoked-glass plate behind the card, set in and down, so
   the card reads as lifted off something rather than pasted on the photo. */
body.home-cine .cine-dock::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(32px + 3.5%); right: calc(32px + 3.5%); top: 22px; bottom: -16px;
  border-radius: 26px; background: rgba(10,16,28,.5);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
}

/* SHORT VIEWPORTS — keep the WHOLE search card above the fold on first load.
   On laptops roughly 720–800px tall the card's last row (Search + trust strip)
   slipped just under the fold. The hero's rhythm is already vh-driven; this
   block only pulls in the fixed `min` floors that don't shrink on their own —
   the top padding (title clears a transparent, overlaid header, so it is safe
   to raise the title) and the title→card gap. Nothing here reduces a font or a
   field; it reclaims empty space only. Scoped to >720px wide so phones, which
   are meant to scroll, keep their own layout; and capped at 800px tall so full-
   height desktops (900px, 1080p) never enter it and keep the editorial spacing. */
@media (min-width: 721px) and (max-height: 800px) {
  /* Both gaps come from the shared --cn-gap-* values above; only the bottom
     padding and the headline size are pulled in here. A gentle scale-down of
     the headline on short screens only — still the cinematic display face,
     just enough to keep the trust strip above the fold. */
  body.home-cine .cine-hero {
    --cn-title-fs: clamp(34px, min(8.3vw, 11vh), 136px);
    padding-bottom: clamp(22px, 3.2vh, 52px);
  }
  /* The premium booking card's own frame carries a little vertical slack on
     these short desktops; reclaim it from the trust strip's margin and padding
     ONLY — no field, font, or functionality change — so the whole card and the
     trust strip clear the fold on first load (e.g. 1280x720). */
  body.home-cine .cine-dock .search-card.is-premium .trust-row {
    margin-top: 10px; padding-top: 12px; padding-bottom: 12px;
  }
}

/* --- the scroll cue: a line with a bead running down it, which the
       bridge's route then continues from ------------------------------- */
body.home-cine .cine-scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.6); padding-left: .34em;
}
body.home-cine .cine-scroll-cue i {
  position: relative; display: block; width: 1px; height: 40px; overflow: hidden;
  background: rgba(255,255,255,.18);
}
body.home-cine .cine-scroll-cue i::after {
  content: ''; position: absolute; left: -1px; top: -12px; width: 3px; height: 12px; border-radius: 3px;
  background: var(--cn-gold); animation: cn-bead 2.2s var(--cn-ease) infinite;
}
@keyframes cn-bead { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }

/* --- the opening frame (see the inline script in <head>) -------------- */
html.cine-pre body.home-cine .cine-photo,
html.cine-pre body.home-cine .cine-dock,
html.cine-pre body.home-cine .cine-scroll-cue,
html.cine-pre body.home-cine #siteHeader .jw-hdr__bar { opacity: 0; }
html.cine-pre body.home-cine .cine-hero .cine-line > span { transform: translateY(112%); }

/* ==========================================================================
   3. THE SEARCH CARD — same card, same controls, dressed for the scene
   ========================================================================== */
body.home-cine .cine-dock .search-card {
  position: relative; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,246,240,.93));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 60px 100px -46px rgba(0,0,0,.85),
    0 22px 44px -26px rgba(0,0,0,.55);
}
/* THE BORDER GLINT. A bright arc of gold that travels once round the edge
   as the card lands, and orbits slowly while a field inside has focus. The
   ring is a masked border, so the card's content is never repainted. */
body.home-cine .cine-dock .search-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: conic-gradient(from var(--cn-angle),
    transparent 0deg, transparent 250deg, rgba(217,178,111,.35) 285deg,
    var(--cn-gold-lt) 318deg, #fff 326deg, var(--cn-gold) 334deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
body.home-cine .cine-dock .search-card.cine-glint::after { opacity: 1; animation: cn-orbit 2.6s var(--cn-ease) forwards; }
body.home-cine .cine-dock .search-card:focus-within::after { opacity: .85; animation: cn-orbit 6s linear infinite; }
@keyframes cn-orbit { from { --cn-angle: 0deg; } to { --cn-angle: 360deg; } }

/* The product tabs: a pill that SLIDES to the chosen tab (home-cinema.js
   places .cine-tab-ind), instead of an underline that jumps. */
body.home-cine .cine-dock .search-tabs {
  position: relative; gap: 4px; padding: 10px 12px;
  border-bottom: 1px solid rgba(21,27,39,.08);
}
body.home-cine .cine-dock .search-tab {
  position: relative; z-index: 1; border: none; margin: 0; border-radius: 999px;
  padding: 9px 16px; opacity: 1; color: #5b6272;
  transition: color .4s var(--cn-ease);
}
body.home-cine .cine-dock .search-tab:hover:not(.is-on) { color: var(--cn-text); opacity: 1; }
body.home-cine .cine-dock .search-tab.is-on { color: #fff; border: none; }
body.home-cine .cine-dock .search-tab.is-on .jpi { color: var(--cn-gold-lt); }
body.home-cine .cine-tab-ind {
  position: absolute; z-index: 0; left: 0; top: 10px; height: calc(100% - 20px); width: 0;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, #1a2438, #0b111d);
  box-shadow: 0 10px 22px -12px rgba(8,12,22,.9), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .55s var(--cn-ease), width .55s var(--cn-ease);
}

/* Fields: a quiet ground that turns white on focus, with a gold rule that
   draws itself along the foot of the field. */
body.home-cine .cine-dock .field {
  transition: background-color .3s ease, box-shadow .35s var(--cn-ease);
}
body.home-cine .cine-dock .field::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--cn-gold), var(--coral-light));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--cn-ease);
}
body.home-cine .cine-dock .field:focus-within {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(217,178,111,.6), 0 14px 28px -18px rgba(21,27,39,.45);
}
body.home-cine .cine-dock .field:focus-within::after { transform: scaleX(1); }
body.home-cine .cine-dock .field:focus-within label { color: var(--cn-gold-ink); }

/* The search button: lifts 2px, a sheen crosses it, and it presses in. It
   gets one pulse when the opening sequence hands it the stage. */
body.home-cine .cine-dock .search-go {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--cn-ease), box-shadow .35s ease, filter .3s ease;
}
body.home-cine .cine-dock .search-go::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-20deg); transition: left .8s var(--cn-ease);
}
body.home-cine .cine-dock .search-go:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(201,72,47,.8); filter: none; }
body.home-cine .cine-dock .search-go:hover::before { left: 130%; }
body.home-cine .cine-dock .search-go:active { transform: translateY(0) scale(.985); }
body.home-cine .cine-dock .search-go.cine-live { animation: cn-pulse 1.4s var(--cn-ease) 1; }
@keyframes cn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,72,47,.55), 0 12px 26px -10px rgba(201,72,47,.6); }
  100% { box-shadow: 0 0 0 22px rgba(201,72,47,0), 0 12px 26px -10px rgba(201,72,47,.6); }
}
body.home-cine .cine-dock .trust-row { color: #5b6272; padding-top: 4px; padding-bottom: 14px; }
body.home-cine .cine-dock .search-foot { padding-bottom: 8px; gap: 6px; }

/* ==========================================================================
   3b. THE PREMIUM FLIGHT CARD — index.html renders the card with
   { premium: true } (booking-card.js), which adds .is-premium, a glyph per
   field, the Search button inside the flights row and the benefits strip.
   Same fields, ids, handlers and validation as every other card; this is
   dressing only, and nothing outside .is-premium is touched by it.

   Ivory glass on the night photograph, a navy tab band with a gold outline
   that slides to the chosen product (home-cinema.js's .cine-tab-ind), quiet
   stone fields, one champagne-bronze call to action. Motion is the existing
   system's: the card's glint and the tab slide; everything here is a hover
   or focus transition, and prefers-reduced-motion drops those at the foot of
   this file.
   ========================================================================== */
body.home-cine .cine-dock .search-card.is-premium {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,248,244,.95));
  border: 1px solid rgba(217,178,111,.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 50px 90px -46px rgba(0,0,0,.85),
    0 18px 40px -24px rgba(0,0,0,.5);
}
/* The body's one track may shrink below its content: the fare chips scroll
   sideways on a phone, and an `auto` track would widen the whole card to
   their unwrapped length instead. */
body.home-cine .cine-dock .is-premium .search-body { grid-template-columns: minmax(0, 1fr); }
/* The tab band: navy, flush with the card's top corners. */
body.home-cine .cine-dock .is-premium .search-tabs {
  margin: 0; padding: 10px 14px 0; gap: 2px;
  background: linear-gradient(180deg, #0b111d, #121b2d);
  border-radius: 19px 19px 0 0; border-bottom: 1px solid rgba(217,178,111,.28);
}
body.home-cine .cine-dock .is-premium .search-tab {
  padding: 13px 20px 14px; border-radius: 12px 12px 0 0;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.74);
}
body.home-cine .cine-dock .is-premium .search-tab .jpi { color: rgba(255,255,255,.58); transition: color .4s var(--cn-ease); }
body.home-cine .cine-dock .is-premium .search-tab:hover:not(.is-on),
body.home-cine .cine-dock .is-premium .search-tab:hover:not(.is-on) .jpi { color: #fff; }
body.home-cine .cine-dock .is-premium .search-tab.is-on { color: var(--cn-gold-lt); }
body.home-cine .cine-dock .is-premium .search-tab.is-on .jpi { color: var(--cn-gold); }
body.home-cine .cine-dock .is-premium .search-tab:focus-visible { outline: 2px solid var(--cn-gold); outline-offset: -4px; }
/* The sliding marker becomes the active tab's gold outline. */
body.home-cine .is-premium .cine-tab-ind {
  top: 10px; height: calc(100% - 9px); border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(217,178,111,.18), rgba(217,178,111,.05) 70%, rgba(217,178,111,0));
  border: 1px solid rgba(217,178,111,.7); border-bottom: 0;
  box-shadow: 0 -8px 22px -12px rgba(240,217,166,.75), inset 0 1px 0 rgba(240,217,166,.5);
}

/* Trip type: a quiet stone track, navy for the chosen one. */
body.home-cine .cine-dock .is-premium .trip-types {
  margin: 18px 22px 4px; padding: 4px; gap: 4px;
  background: #f0eee9; border: 1px solid rgba(21,27,39,.06);
}
body.home-cine .cine-dock .is-premium .trip-type {
  padding: 8px 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; opacity: 1; color: #4a5263;
}
body.home-cine .cine-dock .is-premium .trip-type:hover:not(.is-on) { background: rgba(255,255,255,.8); color: #151b27; }
body.home-cine .cine-dock .is-premium .trip-type.is-on {
  background: #0d1422; color: #fff; box-shadow: 0 8px 16px -10px rgba(8,12,22,.9);
}
body.home-cine .cine-dock .is-premium .trip-type:focus-visible { outline: 2px solid var(--cn-gold); outline-offset: 2px; }

/* The rows: From · swap · To · Departure · Return, then Passengers · Cabin ·
   Search. The swap sits on a zero-width track so it straddles the gap
   between From and To. The mirrored return route is not drawn here; the
   foot note under the card says the return mirrors the outbound. */
body.home-cine .cine-dock .is-premium .search-panel .flight-grid,
body.home-cine .cine-dock .is-premium .search-panel .flight-grid.is-round {
  position: relative;
  grid-template-columns: minmax(0, 1.15fr) 0 minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px; padding: 12px 22px 2px;
}
/* One Way: Departure spans where Return would be — there is no return leg. */
body.home-cine .cine-dock .is-premium .search-panel .flight-grid {
  grid-template-areas:
    "from swap to  dep dep"
    "pax  pax  cabin go go";
}
/* Round Trip: Return takes its own column back. */
body.home-cine .cine-dock .is-premium .search-panel .flight-grid.is-round {
  grid-template-areas:
    "from swap to  dep ret"
    "pax  pax  cabin go go";
}
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="from"]  { grid-area: from; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="swap"]  { grid-area: swap; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="to"]    { grid-area: to; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="dep"]   { grid-area: dep; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="ret"]   { grid-area: ret; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="pax"]   { grid-area: pax; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="cabin"] { grid-area: cabin; }
body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="go"]    { grid-area: go; display: flex; align-items: center; }
body.home-cine .cine-dock .is-premium .search-panel .flight-grid > [data-fg="ret"],
body.home-cine .cine-dock .is-premium .search-panel .flight-grid > [data-fg="rfrom"],
body.home-cine .cine-dock .is-premium .search-panel .flight-grid > [data-fg="mirror"],
body.home-cine .cine-dock .is-premium .search-panel .flight-grid > [data-fg="rto"] { display: none; }
/* Round Trip is the only trip that shows a return — the single ret field here,
   with the mirror note under the card doing the rest. */
body.home-cine .cine-dock .is-premium .search-panel .flight-grid.is-round > [data-fg="ret"] { display: flex; }

/* Fields: stone ground, a thin line, the glyph on the left. */
body.home-cine .cine-dock .is-premium .search-panel .field {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 84px; padding: 14px 16px 14px 52px; border-radius: 14px;
  background: #f6f5f2; border: 1px solid var(--ds-line-2);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .35s var(--cn-ease);
}

/* HOTEL GRID — keep booking-card.css's mode-hiding at premium specificity.
   The `.field` rule above (display:flex) outranks booking-card.css's
   `.hotel-grid > [data-hf="grooms"]{display:none}`, so without this the
   inactive mode's cells leak in and orphan onto a second row — the floating
   "Expected guests" / "Rooms & Guests" box in the reference. Re-stating the
   mode-hiding here keeps the hotel row a single clean row in both modes.
   No markup, JS, or field logic changes. */
body.home-cine .cine-dock .is-premium .search-panel .hotel-grid > [data-hf="grooms"],
body.home-cine .cine-dock .is-premium .search-panel .hotel-grid > [data-hf="gguests"] { display: none; }
body.home-cine .cine-dock .is-premium .search-panel .hotel-grid.is-group > [data-hf="rooms"] { display: none; }
body.home-cine .cine-dock .is-premium .search-panel .hotel-grid.is-group > [data-hf="grooms"],
body.home-cine .cine-dock .is-premium .search-panel .hotel-grid.is-group > [data-hf="gguests"] { display: flex; }
body.home-cine .cine-dock .is-premium .search-panel .flight-grid > [data-fg="from"] { padding-right: 28px; }
body.home-cine .cine-dock .is-premium .search-panel .field:hover { background: #f2f0ec; border-color: rgba(217,178,111,.45); }
body.home-cine .cine-dock .is-premium .search-panel .field:focus-within { background: #fff; border-color: rgba(217,178,111,.7); }
body.home-cine .cine-dock .is-premium .search-panel .field label {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: #6b7280;
}
body.home-cine .cine-dock .is-premium .search-panel .field input,
body.home-cine .cine-dock .is-premium .search-panel .field select,
body.home-cine .cine-dock .is-premium .pax-trigger-text {
  font-size: 17px; font-weight: 700; color: #0d1422; letter-spacing: -.005em;
}
body.home-cine .cine-dock .is-premium .search-panel .field input::placeholder { color: #0d1422; opacity: .42; font-weight: 600; }
body.home-cine .cine-dock .is-premium .fld-sub {
  margin-top: 4px; font-size: 12px; font-weight: 500; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.home-cine .cine-dock .is-premium .fld-ic,
body.home-cine .cine-dock .is-premium .field-date .cal-icon {
  position: absolute; left: 17px; right: auto; top: 50%; bottom: auto;
  width: 22px; height: 22px; transform: translateY(-50%); color: #1b2436; pointer-events: none;
}
body.home-cine .cine-dock .is-premium .field-date .cal-icon { pointer-events: auto; cursor: pointer; }
body.home-cine .cine-dock .is-premium .field-date .date-display { padding-right: 0; }
body.home-cine .cine-dock .is-premium .field-pax .pax-trigger { padding: 0; min-height: 0; }

/* Swap: a white disc with a gold ring, straddling From and To. */
body.home-cine .cine-dock .is-premium .swap-btn {
  width: 46px; height: 46px; background: #fff; color: var(--cn-gold-ink);
  border: 1.5px solid var(--cn-gold); box-shadow: 0 10px 22px -12px rgba(138,100,39,.7);
}
body.home-cine .cine-dock .is-premium .swap-btn:hover { background: #fdf6e8; }
body.home-cine .cine-dock .is-premium .swap-btn:focus-visible { outline: 2px solid var(--cn-gold); outline-offset: 3px; }
body.home-cine .cine-dock .is-premium .flight-grid > .swap-btn {
  display: flex; justify-self: center; align-self: center; position: relative; z-index: 3; margin: 0 -23px;
}

/* The call to action: champagne into bronze, white type, one soft glow.
   The same element in the footer (Hotels, Tour Packages, Multi City) and
   in the flights row. */
body.home-cine .cine-dock .is-premium .search-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 0; min-height: 64px; height: auto; margin: 0; padding: 0 30px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #b98a42 0%, #946027 50%, #6f4417 100%);
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  text-shadow: 0 1px 1px rgba(60,34,8,.35);
  box-shadow: 0 18px 34px -18px rgba(111,68,23,.95), inset 0 1px 0 rgba(255,240,210,.35);
}
body.home-cine .cine-dock .is-premium .search-go:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -18px rgba(111,68,23,1), 0 0 0 4px rgba(217,178,111,.18), inset 0 1px 0 rgba(255,240,210,.4);
}
body.home-cine .cine-dock .is-premium .search-go:focus-visible { outline: 3px solid var(--cn-gold-lt); outline-offset: 3px; }
body.home-cine .cine-dock .is-premium .search-go .search-go-ic { width: 20px; height: 20px; flex: none; }
body.home-cine .cine-dock .is-premium .search-go .search-go-ic:last-child { transition: transform .35s var(--cn-ease); }
body.home-cine .cine-dock .is-premium .search-go:hover .search-go-ic:last-child { transform: translateX(4px); }
body.home-cine .cine-dock .is-premium .search-go.cine-live { animation: cn-pulse-gold 1.4s var(--cn-ease) 1; }
@keyframes cn-pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(217,178,111,.6), 0 18px 34px -18px rgba(111,68,23,.95); }
  100% { box-shadow: 0 0 0 20px rgba(217,178,111,0), 0 18px 34px -18px rgba(111,68,23,.95); }
}
body.home-cine .cine-dock .is-premium .field-go .search-go { flex: 1; width: 100%; }
body.home-cine .cine-dock .is-premium .search-foot .search-go { min-width: 280px; }
body.home-cine .cine-dock .is-premium .search-foot { padding: 10px 22px 0; }

/* The special fare: the same five choices, as one quiet row of chips.
   Their sub-lines ("Up to ₹ 600 off"…) are not drawn on this card —
   home-ref.css records that no fare rule in the application produces them. */
/* nowrap: a wrapping flex line is sized by its content, which let the chip
   row's unwrapped length set the width on a phone. */
body.home-cine .cine-dock .is-premium .hr-fares { padding: 14px 22px 0; flex-wrap: nowrap; }
body.home-cine .cine-dock .is-premium .hr-fares-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
body.home-cine .cine-dock .is-premium .hr-fares-lab {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6b7280;
}
body.home-cine .cine-dock .is-premium .hr-fare-row { gap: 6px; }
body.home-cine .cine-dock .is-premium .hr-fare {
  min-width: 0; gap: 7px; padding: 6px 13px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(21,27,39,.1);
  transition: border-color .25s ease, background-color .25s ease;
}
body.home-cine .cine-dock .is-premium .hr-fare .jpi { width: 15px; height: 15px; }
body.home-cine .cine-dock .is-premium .hr-fare b { font-size: 12.5px; font-weight: 600; color: #2a3243; }
body.home-cine .cine-dock .is-premium .hr-fare-txt > span { display: none; }
body.home-cine .cine-dock .is-premium .hr-fare:hover { border-color: rgba(217,178,111,.7); background: #fdf9f1; }
body.home-cine .cine-dock .is-premium .hr-fare.is-on {
  border-color: var(--cn-gold); background: #fdf6e8; box-shadow: inset 0 0 0 1px var(--cn-gold);
}
body.home-cine .cine-dock .is-premium .hr-fare.is-on b { color: var(--cn-gold-ink); }

/* The benefits strip: three approved claims, a thin rule above, hairlines
   between. */
body.home-cine .cine-dock .is-premium .trust-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 16px 22px 0; padding: 16px 0 18px; border-top: 1px solid rgba(21,27,39,.08);
  color: #0d1422;
}
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 0 16px;
}
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit + .bc-benefit { border-left: 1px solid rgba(21,27,39,.08); }
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-ic { width: 26px; height: 26px; flex: none; color: var(--cn-gold-ink); }
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-ic svg { width: 100%; height: 100%; color: inherit; }
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-txt { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-txt b { font-size: 14px; font-weight: 700; color: #0d1422; }
body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-txt small { font-size: 12px; font-weight: 500; color: #6b7280; }

/* A little less of everything where five fields share a narrower row. */
@media (max-width: 1180px) and (min-width: 901px) {
  body.home-cine .cine-dock .is-premium .search-panel .field { padding-left: 46px; padding-right: 12px; }
  body.home-cine .cine-dock .is-premium .fld-ic,
  body.home-cine .cine-dock .is-premium .field-date .cal-icon { left: 14px; width: 20px; height: 20px; }
  body.home-cine .cine-dock .is-premium .search-panel .field input,
  body.home-cine .cine-dock .is-premium .search-panel .field select,
  body.home-cine .cine-dock .is-premium .pax-trigger-text { font-size: 15.5px; }
  body.home-cine .cine-dock .is-premium .search-tab { padding: 12px 14px 13px; font-size: 13px; }
}

/* Tablet and phone: the route stacks, the two dates share a row, the party
   shares a row, Search takes the width. The swap turns a quarter and sits
   on the seam between From and To. */
@media (max-width: 900px) {
  body.home-cine .cine-dock .is-premium .search-panel .flight-grid,
  body.home-cine .cine-dock .is-premium .search-panel .flight-grid.is-round {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "from from" "to to" "dep ret" "pax cabin" "go go";
    gap: 10px; padding: 12px 16px 2px;
  }
  body.home-cine .cine-dock .is-premium .flight-grid > .swap-btn {
    grid-area: from; position: absolute; right: 18px; bottom: -28px; margin: 0; transform: rotate(90deg);
  }
  body.home-cine .cine-dock .is-premium .flight-grid > .swap-btn:hover { transform: rotate(270deg); }
  body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="from"],
  body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="to"] { padding-right: 72px; }
  body.home-cine .cine-dock .is-premium .search-panel .field { min-height: 76px; }
  body.home-cine .cine-dock .is-premium .trip-types { margin: 14px 16px 4px; width: auto; }
  body.home-cine .cine-dock .is-premium .hr-fares,
  body.home-cine .cine-dock .is-premium .search-foot { padding-left: 16px; padding-right: 16px; }
  body.home-cine .cine-dock .is-premium .trust-row { margin: 14px 16px 0; }
  body.home-cine .cine-dock .is-premium .search-go { width: 100%; }
}
@media (max-width: 640px) {
  body.home-cine .cine-dock .search-card.is-premium { border-radius: 18px; }
  body.home-cine .cine-dock .is-premium .search-tabs { padding: 8px 8px 0; border-radius: 17px 17px 0 0; }
  body.home-cine .cine-dock .is-premium .search-tab { padding: 11px 12px 12px; font-size: 12.5px; gap: 6px; }
  body.home-cine .cine-dock .is-premium .search-panel .flight-grid,
  body.home-cine .cine-dock .is-premium .search-panel .flight-grid.is-round { gap: 8px; padding: 10px 12px 2px; }
  body.home-cine .cine-dock .is-premium .search-panel .field { min-height: 70px; padding: 11px 12px 11px 44px; border-radius: 12px; }
  body.home-cine .cine-dock .is-premium .fld-ic,
  body.home-cine .cine-dock .is-premium .field-date .cal-icon { left: 13px; width: 20px; height: 20px; }
  /* Inputs stay 16px here: main.css pins every phone input at 16px so iOS
     does not zoom on focus. Only the passenger label, a button, may step down. */
  body.home-cine .cine-dock .is-premium .pax-trigger-text { font-size: 15.5px; }
  body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="from"],
  body.home-cine .cine-dock .is-premium .flight-grid > [data-fg="to"] { padding-right: 64px; }
  body.home-cine .cine-dock .is-premium .trip-types { margin: 12px 12px 2px; }
  body.home-cine .cine-dock .is-premium .trip-type { padding: 8px 6px; }
  body.home-cine .cine-dock .is-premium .hr-fares { padding: 12px 12px 0; }
  body.home-cine .cine-dock .is-premium .hr-fares-group { min-width: 0; align-self: stretch; }
  body.home-cine .cine-dock .is-premium .hr-fare-row { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; min-width: 0; }
  body.home-cine .cine-dock .is-premium .hr-fare-row::-webkit-scrollbar { display: none; }
  body.home-cine .cine-dock .is-premium .hr-fare { flex: none; }
  body.home-cine .cine-dock .is-premium .search-foot { padding: 8px 12px 0; }
  body.home-cine .cine-dock .is-premium .search-go { min-height: 56px; }
  body.home-cine .cine-dock .is-premium .trust-row { margin: 12px 12px 0; padding: 12px 0 14px; }
  body.home-cine .cine-dock .is-premium .trust-row .bc-benefit {
    flex-direction: column; gap: 6px; padding: 0 6px; text-align: center;
  }
  body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-ic { width: 22px; height: 22px; }
  body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-txt b { font-size: 12px; }
  body.home-cine .cine-dock .is-premium .trust-row .bc-benefit-txt small { font-size: 11px; }
}
@media (max-width: 380px) {
  body.home-cine .cine-dock .is-premium .search-panel .field { padding-left: 38px; padding-right: 10px; }
  body.home-cine .cine-dock .is-premium .fld-ic,
  body.home-cine .cine-dock .is-premium .field-date .cal-icon { left: 11px; width: 18px; height: 18px; }
  body.home-cine .cine-dock .is-premium .pax-trigger-text { font-size: 14.5px; }
  /* Two dates share a 150px row here; "Wed, 30 Sep" must fit whole. */
  body.home-cine .cine-dock .is-premium .search-panel .field-date { padding-left: 34px; padding-right: 8px; }
  body.home-cine .cine-dock .is-premium .field-date .cal-icon { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-cine .cine-dock .is-premium .search-panel .field,
  body.home-cine .cine-dock .is-premium .search-go,
  body.home-cine .cine-dock .is-premium .search-go .search-go-ic,
  body.home-cine .cine-dock .is-premium .hr-fare { transition: none; }
  body.home-cine .cine-dock .is-premium .search-go.cine-live { animation: none; }
  body.home-cine .cine-dock .is-premium .search-go:hover { transform: none; }
}

/* ==========================================================================
   4. THE BRIDGE — dusk to ivory, and the route through four stops
   ========================================================================== */
body.home-cine .cine-dest {
  position: relative; z-index: 1; background: var(--cn-ivory);
  padding: clamp(96px, 11vw, 170px) 0 clamp(90px, 11vw, 160px);
}
body.home-cine .cine-dusk {
  position: absolute; left: 0; right: 0; top: 0; height: clamp(700px, 120vh, 1300px);
  pointer-events: none; will-change: opacity;
  background: linear-gradient(180deg, var(--cn-night) 0%, #0b1220 22%, #3a3a44 46%, #b9ab98 72%, rgba(245,240,232,0) 100%);
}
body.home-cine .cine-bridge {
  position: relative; z-index: 1; height: clamp(420px, 64vh, 680px);
}
body.home-cine .cine-bridge-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
body.home-cine .cine-bridge-ghost {
  fill: none; stroke: rgba(217,178,111,.32); stroke-width: 1.2; stroke-dasharray: 2 9; stroke-linecap: round;
}
body.home-cine .cine-bridge-line {
  fill: none; stroke: var(--cn-gold); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(217,178,111,.55));
}
body.home-cine .cine-plane { fill: #fff; filter: drop-shadow(0 0 8px rgba(240,217,166,.9)); }
body.home-cine .cine-stop {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  padding: 10px 16px 10px 12px; border-radius: 16px;
  background: rgba(9,14,24,.74); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(217,178,111,.28);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.8);
  transform-origin: 0 50%; white-space: nowrap;
}
body.home-cine .cine-stop i {
  grid-row: span 2; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cn-gold); box-shadow: 0 0 0 5px rgba(217,178,111,.2), 0 0 18px rgba(240,217,166,.8);
}
body.home-cine .cine-stop.is-flip { grid-template-columns: 1fr auto; text-align: right; }
body.home-cine .cine-stop.is-flip i { grid-column: 2; grid-row: 1 / span 2; }
body.home-cine .cine-stop.is-flip b,
body.home-cine .cine-stop.is-flip span { grid-column: 1; }
body.home-cine .cine-stop b { font-family: var(--cn-display); font-weight: 500; font-size: 19px; line-height: 1.1; }
body.home-cine .cine-stop span { font-size: 10px; font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.62); }

/* ==========================================================================
   5. THE SHELF — heading and the editorial grid
   ========================================================================== */
body.home-cine .cine-head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 24px 60px;
}
body.home-cine .cine-head .cine-kicker { grid-column: 1 / -1; margin-bottom: 0; }
body.home-cine .cine-h2 {
  margin: 0; font-family: var(--cn-display); font-weight: 500;
  font-size: clamp(42px, 6.6vw, 104px); line-height: .94; letter-spacing: -.025em; color: var(--cn-text);
}
body.home-cine .cine-h2 em, body.home-cine .cine-finale-title em, body.home-cine .cine-fill-em {
  font-style: italic;
}
body.home-cine .cine-h2 em { color: var(--cn-gold-ink); }
body.home-cine .cine-head .cine-lede { color: var(--cn-muted); margin: 0 0 .6em; }

body.home-cine .cine-grid {
  position: relative; z-index: 2;
  margin-top: clamp(40px, 5.5vw, 84px);
  display: grid; gap: clamp(14px, 1.6vw, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home-cine .cine-grid .jw-dest-card {
  aspect-ratio: 4 / 3; border: none; border-radius: 22px;
  background: var(--cn-ink); transform-origin: 50% 100%;
  box-shadow: 0 2px 4px rgba(21,27,39,.06), 0 30px 60px -34px rgba(21,27,39,.6);
  /* NO transform transition: the card's transform is GSAP's (arrival and
     scroll depth). A CSS transition on the same property would smear every
     scrubbed frame. Hover moves the CONTENTS instead — see below. */
  transition: box-shadow .45s ease;
}
body.home-cine .cine-grid .jw-dest-card:hover {
  transform: none;
  box-shadow: 0 4px 10px rgba(21,27,39,.08), 0 40px 70px -32px rgba(21,27,39,.7);
}
body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* The photograph is taller than its frame so it can drift inside it. */
body.home-cine .cine-grid .jw-dest-art { inset: -9% 0; will-change: transform; }
/* HOVER USES THE INDIVIDUAL `scale` AND `translate` PROPERTIES, not
   `transform`. The script owns `transform` on the photograph (its develop)
   and on the text block (its scroll drift); these two properties compose
   with it instead of being overwritten by the inline style. */
body.home-cine .cine-grid .jw-dest-img { transition: scale .9s var(--cn-ease); }
body.home-cine .cine-grid .jw-dest-card:hover .jw-dest-img { transform: none; scale: 1.04; }
body.home-cine .cine-grid .jw-dest-scrim,
body.home-cine .cine-grid .jw-dest-card:hover .jw-dest-scrim {
  opacity: 1;
  background: linear-gradient(to top, rgba(5,8,15,.86) 0%, rgba(5,8,15,.5) 26%, rgba(5,8,15,.06) 56%, rgba(5,8,15,0) 70%),
              linear-gradient(to bottom, rgba(5,8,15,.4) 0%, rgba(5,8,15,0) 24%);
}
body.home-cine .cine-grid .jw-dest-body {
  padding: clamp(18px, 2vw, 30px) clamp(20px, 2.2vw, 32px);
  transition: translate .5s var(--cn-ease);
}
body.home-cine .cine-grid .jw-dest-card:hover .jw-dest-body { translate: 0 -4px; }
body.home-cine .cine-grid .jw-dest-name {
  font-family: var(--cn-display); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(22px, 2vw, 32px); line-height: 1.05;
}
body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1) .jw-dest-name { font-size: clamp(30px, 3.4vw, 54px); }
body.home-cine .cine-grid .jw-dest-meta {
  margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cn-gold-lt);
}
body.home-cine .jw-dest-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff;
  opacity: .88;
}
body.home-cine .jw-dest-go svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--cn-ease);
}
body.home-cine .jw-dest-card:hover .jw-dest-go svg { transform: translateX(5px); }
body.home-cine .jw-dest-num {
  position: absolute; z-index: 1; top: clamp(16px, 1.8vw, 26px); right: clamp(18px, 2vw, 28px);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--cn-display); font-style: italic; font-size: 17px; color: rgba(255,255,255,.82);
}
body.home-cine .jw-dest-num::before { content: ''; width: 26px; height: 1px; background: rgba(255,255,255,.5); }

body.home-cine .cine-dest .jw-dest-more,
body.home-cine .cine-dest .jw-dest-retry {
  display: flex; margin: clamp(34px, 4vw, 56px) auto 0; padding: 15px 30px; border-radius: 999px;
  border: 1px solid rgba(21,27,39,.2); background: transparent; color: var(--cn-text);
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .35s var(--cn-ease), background-color .35s ease, color .35s ease, border-color .35s ease;
}
body.home-cine .cine-dest .jw-dest-more:hover { transform: translateY(-2px); background: var(--cn-text); color: #fff; border-color: var(--cn-text); }

/* THE EDITORIAL GRID, desktop: a large card and two small ones, then the
   same mirrored — for as many cards as the API sends. Every card has an
   explicit column, and `dense` fills each small card into the first row
   with room, which is what stacks the pair beside the tall one. The tail
   rules cover a count that is not a multiple of three. */
@media (min-width: 1025px) {
  body.home-cine .cine-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(210px, 18.5vw, 300px); grid-auto-flow: row dense;
  }
  body.home-cine .cine-grid .jw-dest-card { aspect-ratio: auto; }
  /* The 16/10 of the 3n+1 rule above is the tablet feature card. Card 4, 10...
     is also 3n+1 but sits in ONE fixed-height row here, so that ratio made it
     taller than its row and it ran into the card beneath, closing the gap. */
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1) { aspect-ratio: auto; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n+1) { grid-column: 1 / span 7; grid-row: span 2; aspect-ratio: auto; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n+2),
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n+3) { grid-column: 8 / span 5; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n+4),
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n+5) { grid-column: 1 / span 5; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n)   { grid-column: 6 / span 7; grid-row: span 2; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n) .jw-dest-name { font-size: clamp(30px, 3.4vw, 54px); }
  body.home-cine .cine-grid .jw-dest-card:nth-child(6n+4) .jw-dest-name { font-size: clamp(22px, 2vw, 32px); }
  /* one card left over: it takes the row */
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1):last-child { grid-column: 1 / -1; grid-row: span 2; }
  /* two left over: they share it */
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1):nth-last-child(2) { grid-column: 1 / span 6; grid-row: span 2; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1):nth-last-child(2) + .jw-dest-card { grid-column: 7 / span 6; grid-row: span 2; }
}

/* ==========================================================================
   6. WHY US
   ========================================================================== */
body.home-cine .cine-why {
  background: linear-gradient(180deg, var(--cn-ivory) 0%, var(--cn-ivory) 55%, var(--cn-night) 55%);
  padding: 0; overflow: visible; color: #fff;
}
body.home-cine .cine-why::before { display: none; }
body.home-cine .cine-why-panel {
  position: relative; overflow: hidden;
  margin: 0 clamp(8px, 1.2vw, 18px); border-radius: var(--cn-r);
  padding: clamp(96px, 11vw, 170px) 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(217,178,111,.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(201,72,47,.12), transparent 70%),
    linear-gradient(180deg, #0c1424 0%, #070b14 100%);
  transform-origin: 50% 0; will-change: transform;
}
body.home-cine .cine-why-arcs {
  position: absolute; right: -14%; top: 50%; width: min(70vw, 980px); height: min(70vw, 980px);
  margin-top: max(-35vw, -490px); pointer-events: none;
  fill: none; stroke: rgba(217,178,111,.14); stroke-width: 1;
}
body.home-cine .cine-why-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 110px); align-items: start;
}
body.home-cine .cine-why-lead { position: sticky; top: 120px; }
body.home-cine .cine-why .cine-kicker { color: var(--cn-gold); }
/* THE STATEMENT FILLS. Each word is set twice: an outline (the span's own
   text, stroked, transparent) and a solid copy on top (::after) that is
   uncovered left to right as --fill runs 0 -> 1 on scroll. */
body.home-cine .cine-statement {
  margin: 0; font-family: var(--cn-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(54px, 8.4vw, 148px); line-height: .9; letter-spacing: -.02em; color: #fff;
}
body.home-cine .cine-fill {
  --fill: 1;
  position: relative; display: block; width: max-content;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3);
}
body.home-cine .cine-fill::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  color: #fff; -webkit-text-stroke: 0;
  clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0);
}
body.home-cine .cine-fill-em { font-style: italic; }
body.home-cine .cine-fill-em::after {
  background: linear-gradient(100deg, var(--cn-gold-lt), var(--cn-gold) 60%, #c08b3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.home-cine .cine-why-sub { margin: 30px 0 0; max-width: 36ch; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.66); }

body.home-cine .cine-why-track { position: relative; perspective: 1200px; }
body.home-cine .cine-why-rail {
  position: absolute; left: 27px; top: 34px; bottom: 34px; width: 1px;
  background: rgba(255,255,255,.1);
}
body.home-cine .cine-why-rail i {
  position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(1);
  background: linear-gradient(180deg, var(--cn-gold-lt), var(--cn-gold) 70%, var(--coral-light));
  box-shadow: 0 0 12px rgba(217,178,111,.6);
}
body.home-cine .cine-why-list { list-style: none; margin: 0; padding: 0; }
body.home-cine .cine-benefit {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  transform-origin: 0 50%;
}
body.home-cine .cine-benefit:last-child { border-bottom: none; }
body.home-cine .cine-benefit-icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: #0d1526; border: 1px solid rgba(217,178,111,.4);
  box-shadow: 0 0 0 6px rgba(7,11,20,1), 0 14px 30px -12px rgba(217,178,111,.35);
  color: var(--cn-gold-lt);
  animation: cn-float 6s ease-in-out infinite;
  transition: background-color .5s ease, border-color .5s ease;
}
body.home-cine .cine-benefit:nth-child(2n) .cine-benefit-icon { animation-delay: -1.5s; }
body.home-cine .cine-benefit:nth-child(3n) .cine-benefit-icon { animation-delay: -3s; }
body.home-cine .cine-benefit-icon .jpi { width: 22px; height: 22px; }
body.home-cine .cine-benefit.is-lit .cine-benefit-icon {
  background: linear-gradient(135deg, #2a2415, #15110a); border-color: var(--cn-gold);
}
@keyframes cn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
body.home-cine .cine-benefit h3 { margin: 6px 0 6px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.005em; }
body.home-cine .cine-benefit p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.6); max-width: 44ch; }

/* ==========================================================================
   7. THE FINALE — "Ready to go?"
   ========================================================================== */
body.home-cine .cine-finale {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(120px, 15vw, 200px) 0 clamp(80px, 10vw, 130px);
  background: var(--cn-night); color: #fff;
  display: flex; align-items: center;
}
body.home-cine .cine-finale-media {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  clip-path: circle(150% at 50% 50%);
}
body.home-cine .cine-finale-media img {
  position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none;
  object-fit: cover; object-position: 50% 45%; will-change: transform;
}
body.home-cine .cine-finale-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,8,15,.9) 0%, rgba(5,8,15,.6) 42%, rgba(5,8,15,.4) 70%, rgba(5,8,15,.66) 100%),
    linear-gradient(180deg, rgba(6,10,18,.95) 0%, rgba(6,10,18,.2) 22%, rgba(6,10,18,.25) 70%, #0a1628 100%);
}
body.home-cine .cine-finale-route {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--cn-gold); stroke-width: 1.6; stroke-linecap: round; opacity: .75;
  filter: drop-shadow(0 0 6px rgba(217,178,111,.6));
}
body.home-cine .cine-finale-route path { vector-effect: non-scaling-stroke; }
body.home-cine .cine-finale-grid {
  position: relative; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px);
  gap: clamp(40px, 6vw, 110px); align-items: center;
}
body.home-cine .cine-finale .cine-kicker { color: var(--cn-gold); }
body.home-cine .cine-finale-title {
  margin: 0; font-family: var(--cn-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(56px, 9.6vw, 164px); line-height: .88; letter-spacing: -.025em; color: #fff;
}
body.home-cine .cine-finale-title em {
  background: linear-gradient(100deg, var(--cn-gold-lt), var(--cn-gold) 55%, #c08b3e);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em;
}
body.home-cine .cine-finale .cine-lede { margin: 26px 0 34px; color: rgba(255,255,255,.76); }

/* The newsletter: still a working form, set as a footnote to the scene. */
body.home-cine .cine-news {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; max-width: 480px;
  border-top: 1px solid rgba(255,255,255,.14);
}
body.home-cine .cine-news h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .02em; }
body.home-cine .cine-news p { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
body.home-cine .cine-news .newsletter-form {
  margin: 16px 0 0; max-width: none; padding: 5px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none;
  transition: border-color .35s ease, background-color .35s ease;
}
body.home-cine .cine-news .newsletter-form:focus-within { border-color: var(--cn-gold); background: rgba(255,255,255,.12); }
body.home-cine .cine-news .newsletter-form input { color: #fff; padding: 12px 18px; }
body.home-cine .cine-news .newsletter-form input::placeholder { color: rgba(255,255,255,.5); }
body.home-cine .cine-news .newsletter-form button {
  background: #fff; color: var(--cn-text); padding: 12px 22px; font-weight: 700;
  transition: transform .35s var(--cn-ease), background-color .3s ease;
}
body.home-cine .cine-news .newsletter-form button:hover { transform: translateY(-2px); background: var(--cn-gold-lt); }
body.home-cine .cine-news .newsletter-msg { color: var(--cn-gold-lt); text-align: left; }

/* The contact form, as a smoked-glass card in the scene. */
body.home-cine .cine-contact { background: transparent; padding: 0; scroll-margin-top: 90px; }
/* Hidden until "Plan your journey" or the header's Contact asks for it
   (home-cinema.js revealContact). Stated outright so no display rule on the
   section can quietly un-hide it. */
body.home-cine .cine-contact[hidden] { display: none; }
body.home-cine .cine-contact .contact-form-card {
  max-width: none; margin: 0; padding: clamp(26px, 3vw, 40px);
  background: rgba(10,16,28,.62); color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14); border-radius: 26px;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.85);
}
body.home-cine .cine-contact h3 { margin: 0; font-family: var(--cn-display); font-weight: 500; font-size: 32px; color: #fff; }
body.home-cine .cine-contact-sub { margin: 8px 0 24px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62); }
body.home-cine .cine-contact .modal-field label { color: rgba(255,255,255,.6); font-size: 10.5px; letter-spacing: .14em; }
body.home-cine .cine-contact .modal-field input,
body.home-cine .cine-contact .modal-field textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff;
  border-radius: 12px; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
body.home-cine .cine-contact .modal-field input::placeholder,
body.home-cine .cine-contact .modal-field textarea::placeholder { color: rgba(255,255,255,.38); }
body.home-cine .cine-contact .modal-field input:focus,
body.home-cine .cine-contact .modal-field textarea:focus {
  border-color: var(--cn-gold); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(217,178,111,.16);
}
body.home-cine .cine-contact .modal-field textarea { min-height: 104px; }
body.home-cine .cine-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 15px 24px; border-radius: 999px;
  transition: transform .35s var(--cn-ease), box-shadow .35s ease;
}
body.home-cine .cine-send svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--cn-ease);
}
body.home-cine .cine-send:hover { transform: translateY(-2px); }
body.home-cine .cine-send:hover svg { transform: translateX(4px); }
/* app.js paints the result line emerald or coral inline — dark on this
   glass — so the line sits on a light chip when it is shown. */
body.home-cine .cine-contact .modal-msg.show {
  background: rgba(255,255,255,.94); border-radius: 12px; padding: 10px 14px; max-height: none;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
/* No gap: the finale's night runs straight into the footer's navy. */
body.home-cine .jw-footer { position: relative; margin-top: 0; }

/* The rest of the page, set on the ivory so nothing reads as a leftover. */
body.home-cine .upcoming-section,
body.home-cine .jw-foryou { background: var(--cn-ivory); }

/* Landing-only: drop the gold separator above the footer (decorative). */
body.home-cine .jw-footer { border-top: none; }

/* Recommended for you: more breathing room between heading and the grid. */
body.home-cine .jw-foryou .section-head { margin-bottom: clamp(36px, 4vw, 52px); }

/* RECOMMENDED FOR YOU — the heading ("Because you explored …"), its strapline
   and the quick-link chips make one block; the property cards below it need
   room to read as a separate shelf rather than crowding the line above. The
   gap scales with the viewport so it stays proportional on phone and desktop.
   `.jw-fy-links` (rendered by jw-foryou.js) keeps its own tight gap under the
   heading; this only opens the space before the cards themselves. */
body.home-cine .jw-foryou .jw-dest-grid { margin-top: clamp(28px, 4vw, 48px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  body.home-cine .cine-head { grid-template-columns: 1fr; }
  body.home-cine .cine-why-grid { grid-template-columns: 1fr; }
  body.home-cine .cine-why-lead { position: relative; top: 0; }
  body.home-cine .cine-finale-grid { grid-template-columns: 1fr; }
  body.home-cine .cine-finale { align-items: flex-start; }
}
@media (max-width: 900px) {
  body.home-cine .cine-hero { padding-bottom: 72px; }
  body.home-cine .cine-photo { object-position: 56% 50%; }
  body.home-cine .cine-dock::before { left: 5%; right: 5%; }
}
@media (max-width: 640px) {
  body.home-cine .cine-hero { --cn-title-fs: clamp(36px, 14.2vw, 76px); }
  body.home-cine .cine-hero h1.cine-title { line-height: .92; }
  body.home-cine .cine-cta { padding: 13px 18px 13px 20px; font-size: 11px; }
  body.home-cine .cine-dock .search-card { border-radius: 18px; }
  body.home-cine .cine-scroll-cue { display: none; }
  body.home-cine .wrap.cine-dock { padding: 0 12px; }

  body.home-cine .cine-bridge { height: 560px; }
  body.home-cine .cine-stop { padding: 8px 12px 8px 10px; column-gap: 9px; border-radius: 13px; }
  body.home-cine .cine-stop.is-flip { grid-template-columns: 1fr auto; text-align: right; }
body.home-cine .cine-stop.is-flip i { grid-column: 2; grid-row: 1 / span 2; }
body.home-cine .cine-stop.is-flip b,
body.home-cine .cine-stop.is-flip span { grid-column: 1; }
body.home-cine .cine-stop b { font-size: 16px; }
  body.home-cine .cine-stop span { font-size: 8.5px; letter-spacing: .16em; }

  /* The shelf on a phone is its own composition: a tall feature, then two
     portrait cards side by side, repeating — a magazine rhythm rather than
     the desktop grid squeezed. */
  body.home-cine .cine-grid { gap: 16px; }
  body.home-cine .cine-grid .jw-dest-card { aspect-ratio: 3 / 4; border-radius: 18px; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1) { aspect-ratio: 4 / 5; }
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1):nth-last-child(2),
  body.home-cine .cine-grid .jw-dest-card:nth-child(3n+1):nth-last-child(2) + .jw-dest-card { grid-column: auto; aspect-ratio: 3 / 4; }
  body.home-cine .cine-grid .jw-dest-card:not(:nth-child(3n+1)) .jw-dest-name { font-size: 20px; }
  body.home-cine .cine-grid .jw-dest-card:not(:nth-child(3n+1)) .jw-dest-body { padding: 14px 14px 16px; }
  body.home-cine .cine-grid .jw-dest-card:not(:nth-child(3n+1)) .jw-dest-meta { font-size: 9px; letter-spacing: .18em; }
  body.home-cine .cine-grid .jw-dest-card:not(:nth-child(3n+1)) .jw-dest-go { display: none; }
  body.home-cine .jw-dest-num { font-size: 14px; }
  body.home-cine .jw-dest-num::before { width: 16px; }

  body.home-cine .cine-why-panel { margin: 0 6px; padding: 84px 0; }
  body.home-cine .cine-benefit { grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; }
  body.home-cine .cine-benefit-icon { width: 48px; height: 48px; }
  body.home-cine .cine-why-rail { left: 23px; }
  body.home-cine .cine-benefit h3 { font-size: 16.5px; }
  body.home-cine .cine-finale { padding-top: 100px; }
  body.home-cine .cine-contact h3 { font-size: 26px; }
}
@media (max-width: 380px) {
  body.home-cine .wrap { padding-left: 16px; padding-right: 16px; }
  body.home-cine .cine-grid .jw-dest-card:not(:nth-child(3n+1)) .jw-dest-name { font-size: 17px; }
}

/* ==========================================================================
   REDUCED MOTION — the composition, with nothing moving
   ----------------------------------------------------------------------
   main.css already collapses every duration; this removes the loops that
   would otherwise sit at their first frame, and makes sure nothing that a
   script would have revealed is waiting on it.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.home-cine .cine-grain,
  body.home-cine .cine-scroll-cue i::after,
  body.home-cine .cine-benefit-icon { animation: none; }
  body.home-cine .cine-dock .search-card::after { display: none; }
  body.home-cine .cine-fill { --fill: 1; }
  /* Nothing lifts the dusk on scroll here, so it ends where the bridge does
     and the heading sits on the ivory. */
  body.home-cine .cine-dusk { height: clamp(420px, 64vh, 680px); }
}

/* The homepage ends on its own "Ready to go?" scene, so the footer's band —
   the same idea, for every other page — would say it twice. */
body.home-cine .jw-f-band { display: none; }