/* ==========================================================================
   CROSS OVER HOLIDAYS — site.css
   Extracted from the single-file build. Load BEFORE sections.css.
   ========================================================================== */

/* ==========================================================================
   CROSS OVER HOLIDAYS LLP — DESIGN SYSTEM
   Colour psychology notes:
   --trust  light teal  : calm + safety. Used for surfaces, borders, quiet
                          reassurance. Light shades lower perceived risk.
   --trust-ink deep teal: the button colour. Every primary CTA site-wide is
                          this, matching the hub filter chips' selected state.
   --action amber       : accent only — the active nav underline, focus rings
                          over photography. It is NO LONGER the CTA colour;
                          buttons went teal by request. Don't reintroduce
                          amber buttons piecemeal or the CTA set splits.
   ========================================================================== */
:root{
  /* Base */
  --base:        #FBF9F5;
  --base-2:      #F5F1E9;
  --surface:     #FFFFFF;
  --sand:        #EFE7DA;
  --sand-deep:   #E2D6C3;

  /* Trust — light teal family */
  --trust:       #8CC4BD;
  --trust-soft:  #B6DBD6;
  --trust-tint:  #EAF4F2;
  --trust-line:  #CFE6E2;
  --trust-ink:   #2F6F69;   /* text-safe teal, AA on light backgrounds */
  --trust-deep:  #255B56;   /* --trust-ink one step darker, for button hover */

  /* Action — amber. Backgrounds vs. text tones are separated so every
     combination clears WCAG AA (4.5:1) without dulling the colour. */
  --action:      #D98E27;   /* CTA background */
  --action-hi:   #E9A438;   /* CTA background, hover */
  --action-text: #7E5209;   /* amber as TEXT on light surfaces (6.0:1) */
  --action-tint: #FBF0DC;

  /* WhatsApp — deepened from #25D366 so white text passes AA (5.3:1) */
  --wa:          #0E7C37;
  --wa-hi:       #0A7233;

  /* Ink */
  --ink:         #1B1917;
  --ink-2:       #45403A;
  --muted:       #736C62;
  --line:        #E6DFD3;

  /* Type */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rhythm */
  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* Elevation — soft, never harsh */
  --e1: 0 1px 2px rgba(27,25,23,.04), 0 4px 16px rgba(27,25,23,.04);
  --e2: 0 2px 6px rgba(27,25,23,.05), 0 14px 40px rgba(27,25,23,.07);
  --e3: 0 4px 12px rgba(27,25,23,.06), 0 30px 70px rgba(27,25,23,.10);

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

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--base); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip (not hidden) so position:sticky keeps working on the package stack */
  overflow-x:hidden; overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
:focus-visible{ outline:2.5px solid var(--trust-ink); outline-offset:3px; border-radius:6px; }

.wrap{ width:min(100% - (var(--gut)*2), var(--maxw)); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-64px; z-index:2000; background:var(--ink);
  color:#fff; padding:12px 20px; border-radius:10px; transition:top .2s;
}
.skip:focus{ top:12px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; letter-spacing:-.02em; line-height:1.06; margin:0; }
h1{ font-size:clamp(2.9rem, 7.2vw, 5.6rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); line-height:1.2; }
h4{ font-size:1.05rem; font-family:var(--sans); font-weight:600; letter-spacing:0; }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-2); max-width:60ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--trust-ink);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:var(--trust); border-radius:2px;
}
.stage{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); opacity:.62;
  margin-bottom:10px;
}

section{ padding:clamp(72px, 10vw, 140px) 0; position:relative; }
.sec-head{ max-width:720px; margin-bottom:clamp(36px,5vw,64px); }

/* ---------- Buttons ----------
   One shape for the whole site, taken from the hub filter chips
   (.co-filter button in sections.css): pill, 1px border, soft --e1 lift.
   Primary is the chip's selected state — solid --trust-ink, white text.
   Every .btn carries a border, transparent where none shows, so a solid and
   an outlined button next to each other are the same height to the pixel. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; box-shadow:var(--e1);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             background .25s, border-color .28s, color .28s;
  will-change:transform; text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
/* White on #2F6F69 is 5.6:1 — AA for the 15px+ text these buttons carry. */
.btn-primary{ background:var(--trust-ink); border-color:var(--trust-ink); color:#fff; box-shadow:0 6px 20px rgba(47,111,105,.26); }
.btn-primary:hover{ background:var(--trust-deep); border-color:var(--trust-deep); box-shadow:0 12px 32px rgba(47,111,105,.34); }
.btn-ghost{ background:var(--surface); color:var(--ink-2); border-color:var(--trust-line); }
.btn-ghost:hover{ background:#fff; border-color:var(--trust); box-shadow:var(--e2); }
.btn-teal{ background:var(--trust-tint); color:var(--trust-ink); border-color:var(--trust-line); }
.btn-teal:hover{ background:var(--trust-soft); border-color:var(--trust); }
.btn-lg{ padding:18px 38px; font-size:1rem; }
/* WhatsApp keeps its green — people scan for that colour, it is a wayfinding
   cue rather than a style choice. Only the shape follows the chip. */
.btn-wa{ background:var(--wa); border-color:var(--wa); color:#fff; box-shadow:0 6px 20px rgba(14,124,55,.30); }
.btn-wa:hover{ background:var(--wa-hi); border-color:var(--wa-hi); }

/* ---------- Image slots (you drop your own photos in) ---------- */
.slot{
  position:relative; overflow:hidden; background:
    linear-gradient(135deg, var(--trust-tint) 0%, var(--sand) 52%, var(--base-2) 100%);
  display:grid; place-items:center; isolation:isolate;
}
.slot::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.75), transparent 62%);
  pointer-events:none;
}
.slot-tag{
  position:relative; z-index:2; text-align:center; padding:14px 18px;
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.07em;
  color:var(--trust-ink); background:rgba(255,255,255,.72); border:1px dashed var(--trust);
  border-radius:10px; backdrop-filter:blur(6px); max-width:88%; line-height:1.5;
}
.slot-tag b{ display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; font-weight:700; margin-bottom:3px; }
.slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].in{ transform:none; }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="left"].in{ transform:none; }

/* Line wipe: the block itself is visible immediately (no fade/translate) —
   only its per-line children animate, via splitLines() in site.js. */
[data-reveal="lines"]{ opacity:1; transform:none; }
.rl-line-wrap{ display:block; overflow:hidden; }
.rl-line{
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .7s var(--ease-out);
  transition-delay:calc(var(--li, 0) * 90ms);
}
[data-reveal="lines"].in .rl-line{ clip-path:inset(0 0 0 0); }

/* ======================= NAVIGATION (floating pill) ======================= */
@keyframes navDropIn{
  from{ opacity:0; transform:translateY(-26px) scale(.94); }
  to{ opacity:1; transform:none; }
}
.nav-shell{
  position:fixed; top:18px; left:0; right:0; z-index:1000;
  display:flex; justify-content:center; padding-inline:16px;
  transition:top .5s var(--ease-out), transform .6s cubic-bezier(.34,1.56,.64,1), opacity .4s var(--ease);
  will-change:transform;
  animation:navDropIn .9s cubic-bezier(.16,1,.3,1) .1s backwards;
}
.nav-shell.hidden{ transform:translateY(-160%); opacity:0; pointer-events:none; }
.nav-shell.compact{ top:10px; }
.nav{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:rgba(255,255,255,.78); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9); border-radius:100px;
  padding:9px 22px; box-shadow:var(--e2);
  transition:padding .5s var(--ease-out), gap .5s var(--ease-out),
             box-shadow .45s var(--ease-out), background .3s, border-color .3s;
  max-width:100%;
}
.nav-shell.compact .nav{
  padding:8px 18px; box-shadow:var(--e2);
  background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.7);
}
.brand{
  display:flex; align-items:center; gap:9px; font-weight:700; font-size:.98rem; letter-spacing:-.015em;
  white-space:nowrap; flex:none;
  /* the mark is 26px; pad the anchor out to a 44px hit area without
     changing how big the logo looks */
  padding:9px; margin:-9px; min-height:44px; min-width:44px;
  justify-content:center; box-sizing:border-box;
  transition:opacity .4s var(--ease-out);
}
.brand-mark{ width:26px; height:26px; flex:none; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .brand-mark{ transform:rotate(14deg) scale(1.1); }
.nav-links{
  display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;
  transition:opacity .35s var(--ease-out);
}
.nav-links a{
  position:relative; display:block; padding:9px 15px; border-radius:100px; font-size:.9rem; font-weight:500;
  color:var(--ink-2); transition:background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
  white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px; border-radius:2px;
  background:var(--trust); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover{ background:var(--trust-tint); color:var(--trust-ink); transform:translateY(-1px); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--ink); background:var(--base-2); }
.nav-links a.active::after{ transform:scaleX(1); background:var(--action); }
/* ---- Mega menu (hover panels on TOURS & PACKAGE / DESTINATION / BLOG) ----
   Modelled on tesla.com: a quiet white sheet that fades down under the nav,
   image on top, name under it, small underlined sub-links. Opening is driven
   by .is-open from site.js, never by :hover alone — a CSS-only hover panel
   cannot be dismissed with Escape and traps touch users on the first tap. */
.co-mega{
  position:absolute; top:calc(100% + 8px); left:50%;
  width:min(1180px, calc(100vw - 32px)); transform:translateX(-50%) translateY(-8px);
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--r-xl); box-shadow:var(--e2);
  padding:26px 30px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
}
.co-mega.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.co-mega-in{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; }
.co-mega-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px 14px; }
.co-mega-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; }
.co-mega-primary{ display:contents; color:inherit; text-decoration:none; }
.co-mega-thumb{
  display:block; width:100%; aspect-ratio:16/10; border-radius:var(--r-md);
  overflow:hidden; background:var(--base-2);
}
.co-mega-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease-out);
}
.co-mega-card:hover .co-mega-thumb img{ transform:scale(1.06); }
.co-mega-name{ font-weight:600; font-size:.92rem; color:var(--ink); line-height:1.25; }
.co-mega-meta{ font-size:.72rem; color:var(--muted); }
.co-mega-links{ display:flex; gap:14px; justify-content:center; margin-top:2px; }
.co-mega-links a{
  font-size:.8rem; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:3px; min-height:24px; display:inline-flex; align-items:center;
  transition:color .25s var(--ease-out);
}
.co-mega-links a:hover{ color:var(--trust-ink); }
.co-mega-rail{
  list-style:none; margin:0; padding:0 0 0 30px; border-left:1px solid rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:2px; min-width:190px;
}
.co-mega-rail a{
  display:flex; align-items:center; min-height:32px; font-size:.86rem; font-weight:600;
  color:var(--ink); transition:color .25s var(--ease-out), transform .25s var(--ease-out);
}
.co-mega-rail a:hover{ color:var(--trust-ink); transform:translateX(2px); }
/* The panel is a desktop affordance; small screens use the existing nav sheet. */
@media (max-width:1024px){ .co-mega{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .co-mega{ transition:opacity .01s; transform:translateX(-50%); }
  .co-mega-thumb img, .co-mega-rail a{ transition:none; }
}

.nav-toggle{
  /* 44x44 — the primary mobile control, held to the full touch-target size */
  display:none; width:44px; height:44px; border-radius:100px; place-items:center;
  background:var(--base-2); transition:background .3s var(--ease-out), transform .3s var(--ease-out); margin-left:auto;
}
.nav-toggle:hover{ background:var(--trust-tint); transform:translateY(-1px); }
@media (max-width:1080px){
  .nav-shell.compact .nav-toggle{ display:grid; background:transparent; }
}
.nav-toggle span{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; position:relative; transition:transform .3s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease); }
.nav-toggle span::before{ top:-5.5px; } .nav-toggle span::after{ top:5.5px; }
body.menu-open .nav-toggle span{ background:transparent; }
body.menu-open .nav-toggle span::before{ transform:translateY(5.5px) rotate(45deg); }
body.menu-open .nav-toggle span::after{ transform:translateY(-5.5px) rotate(-45deg); }

/* mobile sheet */
.nav-sheet{
  position:fixed; inset:0; z-index:999; background:var(--base);
  padding:110px var(--gut) 48px; display:flex; flex-direction:column; gap:6px;
  opacity:0; pointer-events:none; transform:translateY(-14px);
  transition:opacity .4s var(--ease), transform .5s var(--ease-out);
  overflow-y:auto;
}
body.menu-open .nav-sheet{ opacity:1; pointer-events:auto; transform:none; }
.nav-sheet a{
  font-family:var(--display); font-size:2rem; padding:14px 0;
  border-bottom:1px solid var(--line); color:var(--ink);
}
.nav-sheet .sheet-foot{ margin-top:auto; padding-top:28px; font-size:.9rem; color:var(--muted); }
/* phone / email in the mobile menu — padded to a full 44px touch target */
.nav-sheet .sheet-foot a{ font-family:var(--sans); font-size:.95rem; border:0; padding:10px 0; display:block; min-height:44px; color:var(--trust-ink); }

@media (max-width:1080px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
  .nav{ width:100%; justify-content:space-between; }
  .brand{ font-size:.95rem; }
}
/* ============================== HERO ============================== */
/* Copy sits low in the frame, not centred — it keeps the middle of the image
   clear and drops the text onto the darker foot of the .hero-media gradient,
   where white type holds up over a bright sky. The padding must clear the dot
   row underneath it; don't reduce it without moving the dots. */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 0 clamp(104px,12vw,158px); overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:10px 10px 10px 10px; border-radius:var(--r-xl); overflow:hidden; z-index:-2; }
.hero-media .slot{ position:absolute; inset:0; }
/* Hero slideshow — crossfade + slow zoom. Parallax rides on .hero-slides so the
   JS transform there never collides with the zoom transform on the images. */
.hero-slides{ position:absolute; inset:0; }
.hero-slide{ opacity:0; transition:opacity 2.2s ease; }
.hero-slide.is-active{ opacity:1; }
/* Zoom is a keyframe, not a transition, so the first slide animates on load too —
   it already carries .is-active at render, so there is no class change to trigger. */
.hero-slide img{ transform:scale(1.04); will-change:transform; }
.hero-slide.is-active img{ animation:heroZoom 8s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
@media (prefers-reduced-motion:reduce){
  .hero-slide, .hero-slide img, .hero-slide.is-active img{ transition:none; animation:none; transform:none; }
}
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:4;
  background:
    linear-gradient(180deg, rgba(20,26,25,.34) 0%, rgba(20,26,25,.06) 30%, rgba(20,26,25,.52) 78%, rgba(20,26,25,.72) 100%);
}
.hero-inner{ position:relative; z-index:5; width:100%; text-align:center; color:#fff; }
.hero h1{ color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.32); margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--trust-soft); }
.hero-sub{
  max-width:47ch; margin:0 auto 30px; color:rgba(255,255,255,.94);
  font-size:clamp(1rem,1.6vw,1.16rem); text-shadow:0 1px 20px rgba(0,0,0,.4);
}
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(38px,6vw,68px); }

/* ---------- Hero slide copy (one block per destination) ----------
   All nine blocks are stacked in the same grid cell so the crossfade has no
   layout to reflow; only the active one is visible and reachable. Grid, not
   absolute positioning, so the tallest block still sizes the hero. */
.hero-copy-set{ display:grid; }
.hero-copy{
  grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transform:translateY(14px);
}
.hero-copy.is-active{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.hero-title{
  color:#fff; font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem,6vw,4.6rem); line-height:1.06;
  letter-spacing:-.02em; margin:0 0 clamp(20px,2.6vw,30px);
  text-shadow:0 2px 40px rgba(0,0,0,.36);
}
.hero-copy .hero-ctas{ margin-bottom:0; }

/* ---------- Hero controls: arrows + dots ---------- */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:7;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.34); border-radius:50%;
  background:rgba(20,26,25,.28); color:#fff; backdrop-filter:blur(8px);
  cursor:pointer; transition:background .25s, border-color .25s, transform .25s;
}
.hero-arrow:hover{ background:rgba(20,26,25,.52); border-color:rgba(255,255,255,.6); }
.hero-arrow:focus-visible{ outline:2px solid var(--action); outline-offset:3px; }
.hero-arrow-prev{ left:clamp(14px,2.4vw,30px); }
.hero-arrow-next{ right:clamp(14px,2.4vw,30px); }
.hero-dots{
  position:absolute; left:50%; transform:translateX(-50%); z-index:7;
  bottom:clamp(20px,3.4vw,40px); display:flex; gap:6px;
}
/* 10px dot inside a 24px transparent hit area — WCAG 2.5.8 wants 24px, and a
   bare 10px dot is a miss on touch. Don't shrink the padding to tighten the row. */
.hero-dot{
  width:24px; height:24px; padding:7px; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.hero-dot::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.45); transition:background .25s, transform .25s;
}
.hero-dot:hover::before{ background:rgba(255,255,255,.8); }
.hero-dot.is-active::before{ background:#fff; transform:scale(1.15); }
.hero-dot:focus-visible{ outline:2px solid var(--action); outline-offset:1px; border-radius:50%; }
.hero-strip{
  display:flex; justify-content:center; align-items:center; gap:clamp(18px,4vw,52px);
  flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
}
.hero-strip li{ list-style:none; display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.82); font-size:.83rem; font-weight:500; letter-spacing:.02em; }
.hero-strip svg{ flex:none; opacity:.9; }
.scroll-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:6;
  display:grid; place-items:center; gap:7px; color:rgba(255,255,255,.7); font-size:.64rem;
  letter-spacing:.22em; text-transform:uppercase;
}
.scroll-hint i{ display:block; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:640px){ .hero-strip{ gap:14px 20px; } .scroll-hint{ display:none; } }
/* Side arrows sit over the copy on a narrow frame and are an awkward reach on
   touch — the dots stay and remain the way to any of the nine. */
@media (max-width:760px){ .hero-arrow{ display:none; } }
/* Small phones: the hero stack (h1 + sub + 2 CTAs + 4 trust items) is taller
   than the viewport, and align-items:flex-end would slide the h1 up under the
   fixed nav. Reserve nav clearance and tighten the stack rather than clip it. */
@media (max-width:480px){
  .hero{ padding-top:96px; }
  .hero h1{ font-size:clamp(2.25rem, 10vw, 2.9rem); margin-bottom:16px; }
  .hero-sub{ margin-bottom:24px; }
  .hero-ctas{ margin-bottom:30px; }
  .hero-ctas .btn{ width:100%; }   /* two full-width taps beat two cramped ones */
  .hero-strip{ padding-top:20px; }
}

/* ========================= CREDENTIALS BAR ========================= */
.creds{ background:var(--base-2); border-block:1px solid var(--line); padding:clamp(38px,5vw,60px) 0; }
.creds-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); }
.cred{ border-left:2px solid var(--trust-line); padding-left:20px; }
.cred .num{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; color:var(--ink); display:block; margin-bottom:8px; }
.cred .num small{ font-size:.5em; color:var(--trust-ink); }
.cred p{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.5; }
.cred strong{ display:block; color:var(--ink-2); font-weight:600; font-size:.94rem; margin-bottom:3px; }
@media (max-width:860px){ .creds-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .creds-grid{ grid-template-columns:1fr; } }

/* ========================= WHY US ========================= */
.why{ background:var(--trust-tint); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.why-card{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); box-shadow:var(--e1);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--e2); }
.why-ico{ width:52px; height:52px; border-radius:16px; background:var(--trust-tint); display:grid; place-items:center; margin-bottom:20px; color:var(--trust-ink); }
.why-card h3{ margin-bottom:10px; }
.why-card p{ color:var(--muted); font-size:.94rem; margin:0; }
@media (max-width:880px){ .why-grid{ grid-template-columns:1fr; } }

/* ========================= PACKAGES — pinned hero + live card rail ========================= */
.pkgh-wrap{ height:600vh; position:relative; margin-top:clamp(30px,4vw,52px); }
.pkgh-pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -30px 70px rgba(15,20,19,.16);
}
.pkgh-bgs, .pkgh-bg{ position:absolute; inset:0; }
.pkgh-bg{ opacity:0; transition:opacity 1.15s var(--ease-out); z-index:1; }
.pkgh-bg.active{ opacity:1; z-index:2; }
.pkgh-bg .slot{ position:absolute; inset:0; }
.pkgh-pin::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,20,19,.88) 0%, rgba(15,20,19,.58) 34%, rgba(15,20,19,.1) 60%, transparent 76%),
             linear-gradient(0deg, rgba(15,20,19,.55) 0%, transparent 30%);
}
.pkgh-content{ position:absolute; z-index:4; left:clamp(20px,6vw,80px); bottom:clamp(120px,16vh,180px); width:min(540px,86%); color:#fff; }
.pkgh-content .pk-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; transition:opacity .25s var(--ease), transform .3s var(--ease); }
.pkgh-content h3{
  color:#fff; font-size:clamp(2.6rem,5.6vw,4.75rem); line-height:1.02; text-transform:uppercase; letter-spacing:.01em;
  margin-bottom:16px; text-shadow:0 2px 26px rgba(0,0,0,.3); transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.pkgh-content .desc{
  color:rgba(255,255,255,.86); font-size:.96rem; margin-bottom:22px; max-width:50ch;
  transition:opacity .25s var(--ease), transform .3s var(--ease);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pkgh-content .pk-foot{ transition:opacity .25s var(--ease); }
.pkgh-content.fading .pk-top{ opacity:0; transform:translateY(10px); }
.pkgh-content.fading .pk-foot{ opacity:0; }
/* h3 and .desc are excluded from the fade above — they get the slide-up-push
   swap driven by pkghSlideSwap() in site.js instead, matching the reference
   video's text transition instead of a plain crossfade. */
.pkgh-slide-clone{ position:absolute; left:0; right:0; margin:0; pointer-events:none; will-change:transform,opacity; }
.tag{ font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:6px 12px; border-radius:100px; background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); }
.tag-hot{ background:var(--action-tint); color:var(--action-text); }
.pk-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:20px; border-top:1px solid rgba(255,255,255,.22); }
.price .amt{ font-family:var(--display); font-size:1.75rem; color:#fff; line-height:1; }
.price .per{ display:block; font-size:.74rem; color:rgba(255,255,255,.72); margin-top:5px; letter-spacing:.04em; }
.price .edit{ font-size:.62rem; color:var(--action-hi); letter-spacing:.1em; text-transform:uppercase; font-weight:700; }

.pkgh-rail{
  position:absolute; z-index:4; right:clamp(20px,4vw,64px); top:50%; transform:translateY(-50%);
  display:flex; gap:18px; max-width:min(700px,58vw); overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; padding:10px 6px;
}
.pkgh-rail::-webkit-scrollbar{ display:none; }
.pkgh-card{
  flex:0 0 clamp(120px,12vw,190px); aspect-ratio:3/4; border-radius:18px; overflow:hidden; position:relative;
  border:0; padding:0; background:none; filter:brightness(.65) saturate(.9); transform:scale(.92);
  transition:transform .6s var(--ease-out), filter .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.pkgh-card .slot{ position:absolute; inset:0; }
.pkgh-card .cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:10px 12px; text-align:left; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.8)); font-size:.68rem; opacity:0; transition:opacity .35s;
}
.pkgh-card .cap b{ display:block; font-size:.8rem; font-weight:700; margin-bottom:2px; }
.pkgh-card.active{ filter:brightness(1) saturate(1); transform:scale(1.06); box-shadow:0 24px 50px rgba(0,0,0,.4); }
.pkgh-card.active .cap{ opacity:1; }
.pkgh-card:hover{ filter:brightness(.9) saturate(1); }

.pkgh-nav{
  position:absolute; z-index:5; left:clamp(20px,6vw,80px); bottom:clamp(56px,9vh,90px);
  display:flex; align-items:center; gap:12px;
}
.pkgh-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08);
  color:#fff; display:grid; place-items:center; backdrop-filter:blur(8px); transition:background .25s, transform .25s;
}
.pkgh-arrow:hover{ background:rgba(255,255,255,.22); transform:translateY(-2px); }
.pkgh-arrow[disabled]{ opacity:.32; pointer-events:none; }
.pkgh-count{ color:rgba(255,255,255,.85); font-size:.82rem; letter-spacing:.06em; }
.pkgh-count b{ color:#fff; font-weight:700; }

/* ---- unpinned fallback: narrow screens ----
   Pinned, the nine packages cost ~7 screen-heights of hijacked scroll on a
   phone and bury everything below them. Below 900px the section drops to its
   natural height and advances by tapping a card or an arrow instead.
   Keep this breakpoint in sync with pkghPinned() in site.js. */
@media (max-width:900px){
  .pkgh-wrap{ height:auto; }
  .pkgh-pin{ position:relative; height:auto; display:flex; flex-direction:column; }
  /* content / rail / nav come out of absolute positioning into flow, but must
     stay POSITIONED (relative, not static) — each carries a z-index that lifts
     it above the .pkgh-pin::after scrim at z-index:3, and a static element's
     z-index is inert, which lets the scrim paint over the text and buttons.
     inset:auto is required with it: relative still honours the left/bottom
     offsets the base rules set, which would shove each block off-position. */
  /* the top margin is the window the background image shows through */
  .pkgh-content{
    position:relative; inset:auto; width:auto;
    margin-top:clamp(180px,30vh,260px);
    padding-inline:clamp(16px,5vw,40px);
  }
  /* content sits in flow now, so the legibility scrim runs bottom-up, not left-in */
  .pkgh-pin::after{
    background:linear-gradient(0deg, rgba(15,20,19,.9) 0%, rgba(15,20,19,.72) 46%, rgba(15,20,19,.28) 74%, transparent 100%);
  }
  .pkgh-rail{
    position:relative; inset:auto; transform:none; max-width:none;
    margin-top:clamp(20px,4vw,28px);
    padding:10px clamp(16px,5vw,40px);
  }
  .pkgh-nav{
    position:relative; inset:auto;
    padding:clamp(18px,3vw,24px) clamp(16px,5vw,40px) clamp(30px,5vw,42px);
  }
}
@media (max-width:560px){
  .pkgh-card{ flex-basis:84px; }
  .pkgh-card .cap{ display:none; }
}

/* ========================= TRAVEL GUIDE ========================= */
.guide{ background:var(--base-2); }
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2vw,24px); }
.gcard{ background:var(--surface); border-radius:var(--r-md); padding:clamp(24px,2.6vw,32px); border:1px solid var(--line);
  transition:transform .5s var(--ease-out), border-color .3s; }
.gcard:hover{ transform:translateY(-5px); border-color:var(--trust); }
.gcard h3{ font-size:1.18rem; margin-bottom:12px; }
.gcard p{ font-size:.9rem; color:var(--muted); margin:0; }
.gcard .kicker{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--trust-ink); display:block; margin-bottom:12px; }
.season{ margin-top:16px; display:grid; gap:7px; }
.season-row{ display:grid; grid-template-columns:88px 1fr; align-items:center; gap:12px; font-size:.8rem; }
.bar{ height:7px; border-radius:100px; background:var(--base-2); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:100px; background:var(--trust); width:0; transition:width 1.2s var(--ease-out); }
.bar i.best{ background:var(--action); }

/* ========================= HOW IT WORKS ========================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); counter-reset:s; }
.step{ position:relative; padding-top:34px; counter-increment:s; }
.step::before{
  content:"0" counter(s); position:absolute; top:0; left:0;
  font-family:var(--display); font-size:2.4rem; color:var(--trust-soft); line-height:1;
}
.step::after{ content:""; position:absolute; top:14px; left:56px; right:-14px; height:1px; background:var(--line); }
.step:last-child::after{ display:none; }
.step h3{ font-size:1.1rem; margin:14px 0 8px; }
.step p{ font-size:.88rem; color:var(--muted); margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } .step::after{ display:none; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ========================= TESTIMONIALS (circular carousel) ========================= */
.tst{ background:linear-gradient(160deg, var(--trust-tint), var(--base) 68%); color:var(--ink); overflow:hidden; }
.tst-note{ margin-top:34px; font-size:.78rem; color:var(--muted); text-align:center; }

.circ-test{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px); align-items:center; padding-top:clamp(8px,2vw,18px);
}
.circ-images{ position:relative; height:clamp(280px,34vw,420px); perspective:1200px; }
.circ-img-wrap{
  position:absolute; inset:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--e3); will-change:transform, opacity;
}
.circ-img-wrap .slot{ position:absolute; inset:0; }

.circ-name{ font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin-bottom:6px; }
.circ-role{ font-size:.92rem; color:var(--trust-ink); font-weight:600; margin-bottom:28px; }
.circ-quote{ font-size:1.05rem; line-height:1.75; color:var(--ink-2); min-height:6.2em; margin:0; }
.circ-quote .w{ display:inline-block; transition:filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); }
.circ-arrows{ display:flex; gap:14px; padding-top:32px; }
.circ-arrow{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  background:var(--surface); color:var(--ink); box-shadow:var(--e1);
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s, transform .3s var(--ease-out);
}
.circ-arrow:hover{ background:var(--trust); border-color:var(--trust); color:#fff; transform:translateY(-2px); }
@media (max-width:820px){
  .circ-test{ grid-template-columns:1fr; }
  .circ-images{ width:100%; height:clamp(240px,70vw,360px); max-width:420px; margin-inline:auto; }
}

/* ========================= CONVERSION ========================= */
.cta-band{ background:var(--base-2); }
/* On the hub pages the CTA band is the last block before the footer, and its
   --base-2 tint met the footer's sky as a visible step. Dissolve just its tail
   into --base so the footer always meets --base, without touching the band's
   look where it sits mid-page.
   :last-child alone missed index.html, where the band sits OUTSIDE <main> and
   the <footer> is the last child instead — so the step was still visible there.
   Match on "band immediately followed by the footer" too, which is the
   condition that actually matters. (On contact.html the band is mid-page, so
   neither selector fires — correct.) */
.cta-band:last-child,
.cta-band:has(+ .foot){
  background:linear-gradient(180deg, var(--base-2) 0, var(--base-2) calc(100% - 120px), var(--base) 100%); }
.cta-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,60px); align-items:start; }
.form-card{ background:var(--surface); border-radius:var(--r-lg); padding:clamp(26px,3.2vw,42px); box-shadow:var(--e2); border:1px solid var(--line); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:7px; letter-spacing:.01em; }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--base); font:inherit; font-size:.95rem; color:var(--ink); transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--trust); background:#fff; box-shadow:0 0 0 4px var(--trust-tint);
}
.field textarea{ resize:vertical; min-height:92px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card .btn{ width:100%; }
.form-note{ font-size:.76rem; color:var(--muted); margin:14px 0 0; text-align:center; }
.contact-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; }
.ci{ width:42px; height:42px; flex:none; border-radius:13px; background:var(--trust-tint); color:var(--trust-ink); display:grid; place-items:center; }
.contact-list .lab{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px; }
/* phone / email are primary conversion actions — padded to clear the 24px
   WCAG target minimum rather than sitting at bare 22px line-height */
.contact-list a{ color:var(--ink); font-weight:500; display:inline-block; padding:4px 0; min-height:24px; }
.contact-list a:hover{ color:var(--trust-ink); }
@media (max-width:920px){ .cta-grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .f2{ grid-template-columns:1fr; } }

/* ========================= LOYALTY ========================= */
.loyal{ background:linear-gradient(160deg, var(--trust-tint), var(--base) 62%); }
.loyal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.lcard{ background:rgba(255,255,255,.72); backdrop-filter:blur(8px); border:1px solid var(--trust-line);
  border-radius:var(--r-lg); padding:clamp(24px,2.8vw,34px); }
.lcard .badge{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--action-text); background:var(--action-tint); padding:6px 12px; border-radius:100px; margin-bottom:16px; }
.lcard h3{ font-size:1.2rem; margin-bottom:9px; }
.lcard p{ font-size:.9rem; color:var(--muted); margin:0; }
@media (max-width:880px){ .loyal-grid{ grid-template-columns:1fr; } }
.news{ margin-top:clamp(30px,4vw,48px); background:var(--surface); border:1px solid var(--trust-line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.news form{ display:flex; gap:10px; flex-wrap:wrap; }
.news input{ padding:14px 18px; border-radius:100px; border:1px solid var(--line); background:var(--base); font:inherit; font-size:.93rem; min-width:230px; }
.news input:focus{ outline:none; border-color:var(--trust); box-shadow:0 0 0 4px var(--trust-tint); }
@media (max-width:760px){ .news{ grid-template-columns:1fr; } }

/* ========================= FAQ ========================= */
/* no rules between messages, and the list is centred on the page */
.faq-list{ max-width:900px; margin-inline:auto; }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:flex-start; gap:20px;
  padding:24px 0; font-family:var(--display); font-size:clamp(1.06rem,1.7vw,1.34rem); color:var(--ink); transition:color .25s; }
.faq-q:hover{ color:var(--trust-ink); }
.faq-a{ overflow:hidden; height:0; transition:height .45s var(--ease-out); }
.faq-a > div{ padding-bottom:26px; color:var(--muted); font-size:.95rem; max-width:70ch; }

/* ========================= FOOTER ========================= */
/* --foot-fade: the strip over which the artwork's sky dissolves into whatever
   section sits above. The footer's own ink starts only *after* that strip, so
   the fade resolves to the page behind it rather than to a hard-coded cream —
   the sections above differ per page (#FBF9F5 on blog, #F2F2F0 on index) and
   any fixed colour left a visible seam. */
.foot{ position:relative; --foot-fade:clamp(72px,9vw,140px); color:rgba(255,255,255,.76); padding:0 0 26px; font-size:.9rem;
  background:linear-gradient(180deg, transparent 0, transparent var(--foot-fade), var(--ink) var(--foot-fade)); }
/* Himalayan scene across the top of the footer. The artwork is 3:2 and its
   lower third is a solid dark base painted to carry the footer text, so the
   band keeps the full scene (sky, peaks, bridge, train, stupa) and the columns
   overlap onto that base rather than stacking below it — otherwise the footer
   doubles in height. The 1536/840 ratio trims only the empty top sky, which
   the cream fade replaces so it blends into the #F5F0E8 section above. */
.foot-art{ position:relative; aspect-ratio:1536/840; margin-bottom:-16%;
  background:url("http://crossoverholidays.com/wp-content/uploads/2026/08/footer-himalaya-crossoverholidays-com.webp") center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--foot-fade));
          mask-image:linear-gradient(180deg, transparent 0, #000 var(--foot-fade)); }
.foot-art::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,25,23,0) 62%, rgba(27,25,23,.86) 84%, var(--ink) 100%); }
.foot > .wrap{ position:relative; z-index:2; margin-top:0; }
@media (max-width:560px){ .foot-art{ aspect-ratio:1180/840; margin-bottom:-10%; } }
.foot-grid{ display:grid; grid-template-columns:1.4fr .85fr 1.35fr 1.3fr; gap:clamp(22px,3vw,44px); }
.foot h2, .foot h3{ color:#fff; }
.foot .fbrand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:14px; }
.foot p{ font-size:.88rem; line-height:1.7; }
.foot h3{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
/* The 9-item Destinations list drove the whole footer's height and left the
   other three columns half empty. Split it into two columns instead of
   trimming the link padding (that padding is the WCAG 2.5.8 touch target). */
.foot-grid nav:nth-of-type(2) ul{ grid-template-columns:1fr 1fr; column-gap:clamp(14px,1.6vw,26px); }
.foot a{ color:rgba(255,255,255,.86); transition:color .25s; }
.foot a:hover{ color:var(--trust-soft); }
.foot address{ font-style:normal; line-height:1.7; }
/* Touch targets: footer list and contact links rendered at 18px tall, below
   the WCAG 2.5.8 (AA) 24px minimum and awkward to tap on a phone. Give each
   link its own padded hit area instead of relying on list gap. Inline-block
   keeps the underline hugging the text. */
.foot ul a, .foot address a{
  display:inline-block; padding:9px 0; min-height:24px;
}
.foot-legal a{ display:inline-block; padding:6px 0; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center;
  transition:background .25s, border-color .25s, transform .3s; }
.socials a:hover{ background:rgba(255,255,255,.1); border-color:var(--trust); transform:translateY(-2px); }
.foot-bar{ margin-top:clamp(24px,3vw,40px); padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:rgba(255,255,255,.6); }
.foot-legal a{ color:rgba(255,255,255,.72); text-underline-offset:3px; transition:color .25s; }
.foot-legal a:hover{ color:#fff; text-decoration:underline; }
@media (max-width:960px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }

/* floating whatsapp */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:900; width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 8px 26px rgba(14,124,55,.42);
  transition:transform .4s var(--ease-out), box-shadow .4s; opacity:0; pointer-events:none;
}
.wa-float.show{ opacity:1; pointer-events:auto; }
.wa-float:hover{ transform:scale(1.07); box-shadow:0 12px 34px rgba(14,124,55,.52); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}