/* ==========================================================================
   GoVisaPro — landing.css
   Premium layer for index.html only. Loads AFTER site.css and only overrides
   what the home page needs, so every other page is untouched.

   1 tokens · 2 primitives (glass, gradient, grain) · 3 nav polish
   4 hero · 5 proof rail · 6 stats · 7 bento · 8 desks · 9 journey
   10 destinations · 11 estimator · 12 assurance · 13 reviews · 14 faq
   15 closing · 16 motion · 17 responsive
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  --lp-hero-h: 100svh;
  --lp-max: 1240px;

  /* gradients */
  --g-brand:linear-gradient(135deg,#FFB37C 0%,#E8683A 46%,#C2481B 100%);
  --g-brand-soft:linear-gradient(135deg,rgba(255,179,124,.16),rgba(194,72,27,.10));
  --g-trust:linear-gradient(135deg,#6E8FD6 0%,#4A67A6 55%,#2F4478 100%);
  --g-sheen:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  --g-ink:linear-gradient(150deg,#211C18 0%,#14120F 60%,#0C0A08 100%);

  /* text that sits on an always-dark surface. These must NOT be --bg: that
     token flips to near-black in dark mode and the copy disappears. */
  --on-ink:#F7F3EC;
  --on-ink-2:rgba(247,243,236,.74);
  --on-ink-3:rgba(247,243,236,.56);

  /* glass */
  --glass-bg:rgba(255,255,255,.10);
  --glass-bg-strong:rgba(255,255,255,.16);
  --glass-line:rgba(255,255,255,.22);
  --glass-blur:saturate(160%) blur(16px);

  /* elevation tuned for the landing page */
  --lift-1:0 1px 2px rgba(20,18,15,.05), 0 10px 26px rgba(20,18,15,.07);
  --lift-2:0 2px 6px rgba(20,18,15,.07), 0 26px 60px rgba(20,18,15,.14);
  --lift-brand:0 14px 36px rgba(232,104,58,.30);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="dark"]{
  --lift-1:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.42);
  --lift-2:0 2px 8px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.62);
  /* lifted a step so ink panels still read as raised against the dark page */
  --g-ink:linear-gradient(150deg,#2C2622 0%,#1F1B18 62%,#181513 100%);
}

/* Sections on the landing page breathe a little more. */
.lp .section{padding:clamp(64px,8.5vw,124px) 0}
.lp .wrap{width:min(var(--lp-max),92vw)}

/* The SVG landmark backdrop stays, but sits quieter behind real photography. */
.lp .scene{opacity:.5}
.lp .scene-grid{opacity:.5}

/* ---------- 2. PRIMITIVES ------------------------------------------------ */

/* section eyebrow with a gradient rule */
.lp .eyebrow-line{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
}
.lp .eyebrow-line::before{
  content:"";width:28px;height:2px;border-radius:2px;background:var(--g-brand);
}
.center .eyebrow-line{justify-content:center}

/* gradient headline fragment */
.grad-text{
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* film grain, applied to photographic panels.
   z-index 1 keeps it above the photo and scrims but below any copy, which
   sits at z-index 2 — otherwise `overlay` blending desaturates the text. */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* glass surface used on dark photography */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:var(--r);
}

/* photographic fills — the tint shows while a lazy backdrop is still loading */
.bento-cell.photo .img,.j-shot .img,.dest-shot .img,.assure-shot .img,.closer .img{
  background-color:#241E1A;
}

/* frosted card that lives on the page background */
.lp .card{border-radius:var(--r-lg);box-shadow:var(--lift-1);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}

/* gradient-rimmed surface */
.rim{position:relative;isolation:isolate}
.rim::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(232,104,58,.55),rgba(232,104,58,0) 38%,rgba(74,103,166,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease-soft);pointer-events:none;z-index:2;
}
.rim:hover::before{opacity:1}

/* buttons — a touch more presence than the base sheet */
.lp .btn{border-radius:var(--r-pill);letter-spacing:-.01em}
.lp .btn-primary{background:var(--g-brand);box-shadow:var(--lift-brand);position:relative;overflow:hidden}
.lp .btn-primary::after{
  content:"";position:absolute;inset:0;background:var(--g-sheen);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);
}
.lp .btn-primary:hover::after{transform:translateX(120%)}
.lp .btn-primary:hover{background:var(--g-brand);transform:translateY(-2px);box-shadow:0 18px 44px rgba(232,104,58,.4)}

.btn-glass{
  background:var(--glass-bg-strong);color:#fff;border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.btn-glass:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.42);transform:translateY(-2px);color:#fff}

/* ---------- 3. NAV POLISH ------------------------------------------------ */
/* the nav floats over the hero photograph instead of sitting above it */
.lp .nav{
  position:fixed;top:0;left:0;right:0;width:100%;
  background:transparent;border-bottom-color:transparent;
  transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft),backdrop-filter .4s;
}
/* a soft scrim keeps the links legible over any photograph */
.lp .nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(8,7,6,.5),rgba(8,7,6,0));
  transition:opacity .4s var(--ease-soft);
}
.lp .nav.scrolled::before{opacity:0}
.lp .nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.82)}
.lp .nav:not(.scrolled) .nav-links a:hover{background:rgba(255,255,255,.14);color:#fff}
.lp .nav:not(.scrolled) .brand-text{color:#fff}
.lp .nav:not(.scrolled) .brand-sub{color:rgba(255,255,255,.6)}
.lp .nav:not(.scrolled) .icon-btn{color:#fff;border-color:rgba(255,255,255,.28)}
.lp .nav:not(.scrolled) .icon-btn:hover{background:rgba(255,255,255,.16);border-color:#fff}
.lp .nav.scrolled{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}

/* scroll progress hairline */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--g-brand);
  box-shadow:0 0 12px rgba(232,104,58,.6);
}

/* ---------- 4. HERO ------------------------------------------------------ */
.lp-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:var(--lp-hero-h);
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + clamp(56px,10vw,120px)) 0 clamp(30px,4vw,52px);
  color:#fff;
}

/* photo stack — two layers so a destination swap can cross-fade */
.lp-hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#0E0C0A}
.lp-hero-media .shot{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s var(--ease-soft);
  will-change:opacity,transform;
  transform:scale(1.06);
  animation:kenburns 26s var(--ease-soft) infinite alternate;
}
.lp-hero-media .shot.on{opacity:1}
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.4%,-1.6%,0)}
}

/* scrims: darken for text contrast, warm the highlights */
.lp-hero-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none}
.lp-hero-scrim::before{
  content:"";position:absolute;inset:0;
  background:
    /* copy side: a reading scrim so headline and lede always clear 4.5:1 */
    linear-gradient(100deg,rgba(8,7,6,.82) 0%,rgba(8,7,6,.62) 34%,rgba(8,7,6,.14) 64%,transparent 82%),
    linear-gradient(180deg,rgba(8,7,6,.62) 0%,rgba(8,7,6,.22) 30%,rgba(8,7,6,.46) 66%,rgba(8,7,6,.9) 100%),
    radial-gradient(120% 80% at 15% 20%,rgba(194,72,27,.30),transparent 60%),
    radial-gradient(90% 70% at 88% 12%,rgba(47,68,120,.42),transparent 62%);
}
/* fade the hero into the page background */
.lp-hero-scrim::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:22%;
  background:linear-gradient(180deg,transparent,var(--bg));
}

/* drifting aurora blobs */
.lp-hero-aura{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;filter:blur(70px);opacity:.5}
.lp-hero-aura i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.lp-hero-aura i:nth-child(1){width:46vw;height:46vw;background:#E8683A;top:-14%;left:-10%;animation:float1 22s ease-in-out infinite alternate}
.lp-hero-aura i:nth-child(2){width:38vw;height:38vw;background:#4A67A6;top:8%;right:-12%;animation:float2 27s ease-in-out infinite alternate}
.lp-hero-aura i:nth-child(3){width:32vw;height:32vw;background:#C97B5A;bottom:-18%;left:38%;animation:float1 19s ease-in-out infinite alternate-reverse}
@keyframes float1{to{transform:translate3d(6%,-8%,0) scale(1.14)}}
@keyframes float2{to{transform:translate3d(-8%,6%,0) scale(1.08)}}

.lp-hero-in{position:relative;z-index:2;width:100%}
.lp-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(28px,4vw,64px);align-items:end;
}

/* eyebrow pill */
.hero-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 8px 8px 8px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-size:13px;color:rgba(255,255,255,.9);
}
.hero-pill b{
  background:var(--g-brand);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);
}
.hero-pill span{padding-right:8px}

.lp-hero h1{
  font-size:clamp(44px,6.2vw,86px);line-height:1.0;margin:22px 0 0;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.lp-hero h1 .line{display:block;overflow:hidden}
.lp-hero h1 .line > span{display:block}
/* on dark photography the brand gradient needs its light variant to stay
   readable — the deep terracotta end disappears against mid-tones */
.lp-hero h1 .rotator{
  display:inline-block;min-width:1ch;
  background:linear-gradient(120deg,#FFC08D 0%,#FF9350 48%,#FF6B2B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.lp-hero .lede{color:rgba(255,255,255,.86);max-width:52ch;margin-top:22px;font-size:clamp(16.5px,1.5vw,19.5px)}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* trust strip under the CTAs */
.hero-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:30px;
  font-size:13.5px;color:rgba(255,255,255,.78);
}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:16px;height:16px;stroke:#FFB37C;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* glass destination console (right column) */
.hero-console{
  padding:22px;border-radius:var(--r-lg);
  background:rgba(18,15,13,.42);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.hero-console h2{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 14px;
}
.lp .hero-console .picker{background:transparent;border:0;padding:0;display:block;box-shadow:none}
.lp .hero-console .picker label{
  display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);margin-bottom:8px;
}
.lp .hero-console .picker select{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.22);
  font-size:15px;font-weight:500;cursor:pointer;
  transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft);
}
.lp .hero-console .picker select:hover{background:rgba(255,255,255,.16)}
.lp .hero-console .picker select:focus{outline:none;border-color:#FFB37C;box-shadow:0 0 0 3px rgba(255,179,124,.28)}
.hero-console .picker select option{background:#1a1613;color:#fff}
.hero-console .hint{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:12px;line-height:1.5}
.hero-console .hint b{color:#FFB37C}

.hero-console-foot{
  display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-console-foot .price{
  font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;
}
.hero-console-foot .price small{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block;margin-bottom:4px}
.hero-console-foot .btn{margin-left:auto}

/* now-showing caption for the photo */
.hero-credit{
  position:absolute;right:max(4vw,20px);bottom:14px;z-index:2;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.scroll-cue i{
  display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ---------- 5. PROOF RAIL ------------------------------------------------ */
.proof{
  position:relative;padding:26px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 70%,transparent),transparent);
}
.proof-label{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.lp .marquee{
  border:0;padding:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.lp .marquee-item{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--ink-2);
  padding:9px 18px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,18,15,.04);
}
.lp .marquee-item em{font-size:18px}
.lp .marquee-track{gap:14px;animation-duration:58s}

/* ---------- 6. STATS ----------------------------------------------------- */
.lp .stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:transparent;border:0;overflow:visible;
}
.lp .stat{
  position:relative;overflow:hidden;
  padding:34px 22px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--lift-1);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.lp .stat::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(120% 90% at 50% 0%,var(--stat-tint,rgba(232,104,58,.16)),transparent 62%);
}
.lp .stat:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.lp .stat b{
  position:relative;font-size:clamp(34px,4.2vw,50px);
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.lp .stat.trust b{background:var(--g-trust);-webkit-background-clip:text;background-clip:text}
.lp .stat span{position:relative;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:10px}

/* ---------- 7. BENTO ----------------------------------------------------- */
.bento{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(180px,auto);gap:clamp(12px,1.5vw,18px);
}
.bento-cell{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:28px 26px;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--lift-1);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.bento-cell:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.bento-cell h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px;letter-spacing:-.02em}
.bento-cell p{font-size:14.5px;color:var(--muted);line-height:1.55}

.b-w2{grid-column:span 2}
.b-w3{grid-column:span 3}
.b-h2{grid-row:span 2}

/* photo cell */
.bento-cell.photo{padding:0;min-height:230px;color:#fff;justify-content:flex-end}
.bento-cell.photo .img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.04);transition:transform 1.1s var(--ease-out);
}
.bento-cell.photo:hover .img{transform:scale(1.12)}
.bento-cell.photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,7,.05) 0%,rgba(10,8,7,.45) 52%,rgba(10,8,7,.86) 100%);
}
.bento-cell.photo .copy{position:relative;z-index:2;padding:26px}
.bento-cell.photo h3{color:#fff}
.bento-cell.photo p{color:rgba(255,255,255,.8)}

/* tinted / gradient cell */
.bento-cell.grad{
  background:var(--g-ink);color:var(--on-ink);
  border-color:rgba(255,255,255,.08);
}
.bento-cell.grad h3{color:var(--on-ink)}
.bento-cell.grad p{color:var(--on-ink-2)}
.bento-cell.brand{background:var(--g-brand);border-color:transparent;color:#fff}
.bento-cell.brand h3,.bento-cell.brand p{color:#fff}
.bento-cell.brand p{color:rgba(255,255,255,.86)}

.bento-ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--brand-soft);color:var(--brand-deep);flex:0 0 auto;
}
.bento-cell.grad .bento-ico,.bento-cell.brand .bento-ico{background:rgba(255,255,255,.14);color:#fff}
.bento-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.bento-metric{
  font-family:var(--serif);font-weight:900;font-size:clamp(38px,4.4vw,58px);
  letter-spacing:-.035em;line-height:1;margin-bottom:6px;
}
.bento-note{margin-top:auto;padding-top:18px;font-size:13px;color:var(--muted)}
.bento-cell.grad .bento-note{color:var(--on-ink-3)}
.bento-cell.brand .bento-note{color:rgba(255,255,255,.72)}

/* ---------- 8. DESKS -----------------------------------------------------
   Each desk sits on a photograph of its own category. The copy moves to the
   bottom of the card and turns white, so every tile needs a scrim heavy
   enough to hold body text — not just the heading.
   ------------------------------------------------------------------------ */
.lp #desk-tiles{gap:clamp(12px,1.6vw,18px)}
.lp .desk-tile{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(320px,26vw,376px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 24px 24px;
  border:1px solid rgba(255,255,255,.10);
  background:var(--tile-deep);
  color:#fff;
  box-shadow:var(--lift-1);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.desk-shot{
  position:absolute;inset:0;z-index:-2;background-color:#241E1A;
  background-size:cover;background-position:center;
  transform:scale(1.05);transition:transform 1.3s var(--ease-out);
}
.lp .desk-tile:hover .desk-shot{transform:scale(1.15)}
.lp .desk-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,7,6,.20) 0%,rgba(8,7,6,.42) 32%,rgba(8,7,6,.80) 68%,rgba(8,7,6,.95) 100%);
  transition:background .55s var(--ease-soft);
}
/* on hover the desk's own colour washes through the middle of the scrim */
.lp .desk-tile:hover::before{
  background:linear-gradient(180deg,rgba(8,7,6,.14) 0%,color-mix(in srgb,var(--tile-deep) 60%,transparent) 40%,rgba(8,7,6,.84) 74%,rgba(8,7,6,.96) 100%);
}
.lp .desk-tile:hover{transform:translateY(-6px);box-shadow:var(--lift-2)}
/* must exclude the photo layer — `> *` would otherwise beat .desk-shot's own
   position/z-index and drop it back into the flow */
.lp .desk-tile > *:not(.desk-shot){position:relative;z-index:1}

.lp .desk-tile .cnt{
  /* restate: the `> *` rule above outranks site.css and would un-absolute it */
  position:absolute;top:20px;right:20px;
  color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.lp .desk-tile .num{
  display:inline-block;align-self:flex-start;
  padding:5px 11px;border-radius:var(--r-pill);
  color:#fff;background:color-mix(in srgb,var(--tile) 68%,transparent);
}
.lp .desk-tile h3{color:#fff;margin:14px 0 8px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.lp .desk-tile .small{color:rgba(255,255,255,.84)}
.lp .desk-tile li{
  color:#fff;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.14);
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft);
}
.lp .desk-tile:hover li{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.3)}

/* ---------- 9. JOURNEY (how it works) ------------------------------------ */
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);position:relative}
.journey::before{
  content:"";position:absolute;top:118px;left:8%;right:8%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);
}
.j-step{
  position:relative;z-index:1;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--lift-1);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.j-step:hover{transform:translateY(-5px);box-shadow:var(--lift-2)}
.j-shot{position:relative;height:190px;overflow:hidden}
.j-shot .img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);transition:transform 1.2s var(--ease-out);
}
.j-step:hover .j-shot .img{transform:scale(1.14)}
.j-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,7,.32),rgba(10,8,7,.06) 45%,var(--surface) 99%);
}
.j-num{
  position:absolute;left:22px;top:18px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:#fff;
}
.j-body{padding:6px 26px 28px;position:relative;z-index:2}
.j-body h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:10px}
.j-meta{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-deep);
}
.j-meta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g-brand)}

/* ---------- 10. DESTINATIONS --------------------------------------------- */
.dest-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.dest-shot{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:clamp(300px,34vw,400px);
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:#fff;isolation:isolate;
  box-shadow:var(--lift-1);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.dest-shot:hover{transform:translateY(-6px);box-shadow:var(--lift-2)}
.dest-shot .img{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  transform:scale(1.05);transition:transform 1.3s var(--ease-out);
}
.dest-shot:hover .img{transform:scale(1.16)}
/* the scrim has to clear the whole copy block, not just the last line —
   on narrow cards the copy climbs well above the halfway mark */
.dest-shot::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,7,6,.12) 0%,rgba(8,7,6,.34) 30%,rgba(8,7,6,.74) 62%,rgba(8,7,6,.94) 100%);
  transition:opacity .5s var(--ease-soft);
}
.dest-shot:hover::before{
  background:linear-gradient(180deg,rgba(8,7,6,.10) 0%,rgba(194,72,27,.34) 40%,rgba(8,7,6,.78) 68%,rgba(8,7,6,.95) 100%);
}
.dest-shot .copy{padding:26px 24px}
.dest-shot .kicker{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:#FFC59B;display:block;margin-bottom:8px;
}
.dest-shot h3{color:#fff;font-size:clamp(24px,2.4vw,30px);margin-bottom:8px}
.dest-shot p{font-size:14px;color:rgba(255,255,255,.8);line-height:1.5}
.dest-shot .go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:#fff;
}
.dest-shot .go span{transition:transform .3s var(--ease-out)}
.dest-shot:hover .go span{transform:translateX(5px)}

/* ---------- 11. ESTIMATOR ------------------------------------------------ */
.est-wrap{position:relative;isolation:isolate}
.lp .est-panel{
  border:1px solid var(--line);
  background:
    radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--brand-soft) 60%,transparent),transparent 55%),
    var(--surface);
  box-shadow:var(--lift-1);
}
.lp .field select{transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft),background .25s}
.lp .field select:hover{border-color:var(--line-2)}
.lp .opt{border-radius:14px;transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft),transform .25s var(--ease-out)}
.lp .opt:hover{transform:translateX(2px)}

.lp .quote{
  background:var(--g-ink);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:var(--lift-2);
}
.lp .quote::before{
  content:"";position:absolute;top:-40%;right:-30%;width:70%;height:120%;
  background:radial-gradient(circle,rgba(232,104,58,.34),transparent 62%);pointer-events:none;
}
.lp .quote > *{position:relative;z-index:1}
/* same reason as the bento ink cells: the panel is dark in both themes, so
   its copy needs fixed light values rather than the flipping --bg token */
.lp .quote,.lp .quote h3{color:var(--on-ink)}
.lp .quote-line{color:var(--on-ink-2)}
.lp .quote-line b{color:var(--on-ink)}
.lp .quote-total{border-top-color:rgba(247,243,236,.16)}
.lp .quote-total span,.lp .quote .note{color:var(--on-ink-3)}
.lp .quote .btn-ghost{border-color:rgba(247,243,236,.30);color:var(--on-ink)}
.lp .quote .btn-ghost:hover{background:rgba(247,243,236,.10);border-color:var(--on-ink)}
.lp .quote-total b{
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- 12. ASSURANCE ------------------------------------------------ */
.assure{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,48px);align-items:center;
}
.assure-shot{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:clamp(320px,38vw,460px);box-shadow:var(--lift-2);
}
.assure-shot .img{position:absolute;inset:0;background-size:cover;background-position:center}
.assure-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(194,72,27,.28),transparent 46%,rgba(20,18,15,.42));
}
.assure-badge{
  position:absolute;left:20px;bottom:20px;z-index:2;
  padding:16px 20px;border-radius:var(--r);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  color:#fff;
}
.assure-badge span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.assure-badge b{display:block;font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1;margin-top:6px}

.assure-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.assure-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-soft);
}
.assure-list li:hover{transform:translateX(4px);border-color:var(--line-2)}
.assure-list .tick{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--g-brand);color:#fff;
}
.assure-list .tick svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.assure-list strong{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.assure-list p{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.5}

/* ---------- 13. REVIEWS -------------------------------------------------- */
.lp .qcard{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px dashed var(--line-2);background:var(--surface);
  box-shadow:none;
}
.lp .qcard::before{
  content:"“";position:absolute;top:-26px;right:14px;
  font-family:var(--serif);font-size:150px;font-weight:900;
  color:var(--line);line-height:1;pointer-events:none;
}
.lp .qcard .ph{
  align-self:flex-start;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand-deep);
}
.lp .qcard blockquote{position:relative;color:var(--ink-2)}

/* ---------- 14. FAQ ------------------------------------------------------ */
.lp .ac{
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft);
}
.lp .ac[open]{border-color:color-mix(in srgb,var(--brand) 40%,transparent);box-shadow:var(--lift-1)}
.lp .ac summary{padding:20px 22px;font-size:17px}
.lp .ac[open] summary{color:var(--brand-deep)}

/* ---------- 15. CLOSING CTA ---------------------------------------------- */
.closer{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:clamp(20px,3vw,34px);
  padding:clamp(52px,8vw,104px) clamp(24px,5vw,72px);
  text-align:center;color:#fff;
}
.closer .img{
  position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center 62%;
  transform:scale(1.04);
}
.closer::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(8,7,6,.62),rgba(8,7,6,.78)),
    radial-gradient(90% 120% at 20% 0%,rgba(194,72,27,.5),transparent 58%),
    radial-gradient(80% 100% at 90% 100%,rgba(47,68,120,.5),transparent 60%);
}
.closer > *{position:relative;z-index:2}
.closer h2{color:#fff;font-size:clamp(34px,5.4vw,66px);margin-bottom:8px;text-wrap:balance}
.closer .lede{color:rgba(255,255,255,.84);margin-inline:auto}
.closer .btn-row{margin-top:32px}
.closer-note{margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ---------- 16. MOTION --------------------------------------------------- */

/* extra reveal flavours layered on top of the base .rv */
.rv-blur{opacity:0;filter:blur(10px);transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out)}
.rv-blur.in{opacity:1;filter:none;transform:none}
.rv-left{opacity:0;transform:translateX(-26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv-left.in{opacity:1;transform:none}
.rv-scale{opacity:0;transform:scale(.96);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv-scale.in{opacity:1;transform:none}
.no-io .rv-blur,.no-io .rv-left,.no-io .rv-scale{opacity:1;transform:none;filter:none}

/* hero entrance — plays once on load */
.hero-anim > *{opacity:0;transform:translateY(26px);animation:heroIn .9s var(--ease-out) forwards}
.hero-anim > *:nth-child(1){animation-delay:.12s}
.hero-anim > *:nth-child(2){animation-delay:.22s}
.hero-anim > *:nth-child(3){animation-delay:.34s}
.hero-anim > *:nth-child(4){animation-delay:.46s}
.hero-anim > *:nth-child(5){animation-delay:.56s}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero-console{opacity:0;transform:translateY(30px) scale(.98);animation:heroIn 1s var(--ease-out) .5s forwards}

/* parallax targets get a transform variable set from JS */
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .lp-hero-media .shot{animation:none;transform:none}
  .lp-hero-aura i{animation:none}
  .hero-anim > *,.hero-console{opacity:1;transform:none;animation:none}
  .scroll-cue i{animation:none}
  .rv-blur,.rv-left,.rv-scale{opacity:1;transform:none;filter:none}
  .lp .marquee-track{animation:none}
  .scroll-progress{display:none}
}

/* ---------- 17. RESPONSIVE ----------------------------------------------- */
@media(max-width:1080px){
  .lp-hero-grid{grid-template-columns:1fr;align-items:start;gap:34px}
  .hero-console{max-width:520px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-w3{grid-column:span 2}
  .dest-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .assure{grid-template-columns:1fr}
  .assure-shot{min-height:280px;order:-1}
  .journey{grid-template-columns:1fr}
  .journey::before{display:none}
}
@media(max-width:720px){
  .lp-hero{min-height:auto;padding-top:calc(var(--nav-h) + 74px);padding-bottom:56px}
  .lp-hero h1{font-size:clamp(38px,10vw,54px)}
  .lp .stats{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr}
  .b-w2,.b-w3{grid-column:span 1}
  .b-h2{grid-row:span 1}
  .dest-gallery{grid-template-columns:1fr}
  .dest-shot{min-height:320px}
  .scroll-cue{display:none}
  .hero-credit{display:none}
  .hero-trust{gap:8px 18px;font-size:12.5px}
}
@media(max-width:420px){
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-console-foot{flex-wrap:wrap}
  .hero-console-foot .btn{margin-left:0;width:100%;justify-content:center}
}