/* =====================================================================
   KERALA — Premium Tours & Travel
   Section: HOME / HERO
   Design tokens + cinematic 5-slide hero (matches reference layout)
   ===================================================================== */

:root{
  /* brand */
  --gold:        #c9a24b;
  --gold-soft:   #e6c585;
  --ink:         #0d0f0c;
  --cream:       #f6f1e9;
  --white:       #ffffff;

  /* Fetraco logo colors */
  --brand-green: #80b616;
  --brand-teal:  #0e5d7c;
  --brand-teal-dk:#0a4861;
  --brand-cyan:  #24a9ca;

  /* search card */
  --card-label:  #243140;
  --card-value:  #6b7480;
  --card-line:   #e7eaee;

  /* glass */
  --glass-bg:    rgba(255,255,255,.10);
  --glass-bg-2:  rgba(255,255,255,.16);
  --glass-bord:  rgba(255,255,255,.30);

  /* frame inset around the hero — reveals the blurred backdrop around the card */
  --frame:       clamp(20px, 3.8vw, 56px);
  --radius:      10px;
  --hero-pb:     clamp(84px, 12vh, 116px);  /* taller bottom band the card straddles */

  /* motion */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --slide-dur:   2500ms;   /* must match JS SLIDE_DURATION */

  --font-display:'Bricolage Grotesque', system-ui, sans-serif; /* giant word + wordmark */
  --font-serif:  'Fraunces', Georgia, serif;                   /* italic eyebrow accent */
  --font-ui:     'Inter', system-ui, sans-serif;               /* body, UI, forms, buttons */
  --font-script: 'Fraunces', Georgia, serif;                   /* legacy fallback */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* honour users who ask for less motion — instant jumps, no glide */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-ui);
  background:var(--ink);
  color:var(--white);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* =====================================================================
   HERO SHELL + FRAME
   ===================================================================== */
/* whole home section sits on one continuous blurred backdrop — no white fill */
.home{ position:relative; background:var(--ink); }

.hero{
  position:relative;
  z-index:1;
  height:100svh;
  min-height:600px;
  padding:clamp(20px,3.6vh,52px) var(--frame) var(--hero-pb);
}

/* ---------- blurred backdrop (same image as the active slide) ---------- */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.hero__bg .bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.18);
  filter:blur(28px) saturate(1.18) brightness(.88);
  opacity:0; transition:opacity 750ms var(--ease);
  will-change:opacity;
}
.hero__bg .bg.is-active{ opacity:1; }

.hero__frame{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.78), 0 8px 24px -14px rgba(0,0,0,.5);
  isolation:isolate;
}

/* ---------- slides ---------- */
.slides{ position:absolute; inset:0; z-index:1; }

.slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 750ms var(--ease);
  will-change:opacity;
}
.slide.is-active{ opacity:1; }

.slide img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.04) translateZ(0);          /* own GPU layer — avoids sub-pixel softening */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  image-rendering:auto;                          /* correct high-quality resampling for photos */
}
/* Ken Burns: only the active slide slowly zooms */
.slide.is-active img{
  animation:kenburns var(--slide-dur) linear forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.04) translateZ(0); }
  to  { transform:scale(1.12) translateZ(0); }   /* gentler max — no upscale past native on retina */
}

/* ---------- legibility scrim ---------- */
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,7,.45) 0%, rgba(8,9,7,0) 22%, rgba(8,9,7,0) 60%, rgba(8,9,7,.55) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(8,9,7,0) 35%, rgba(8,9,7,.30) 100%);
}

/* ---------- viewfinder corners ---------- */
.corner{
  position:absolute; z-index:6; width:26px; height:26px;
  border:1.5px solid rgba(255,255,255,.55);
  opacity:.8; pointer-events:none;
}
.corner--tl{ top:18px; left:18px;  border-right:none; border-bottom:none; }
.corner--tr{ top:18px; right:18px; border-left:none;  border-bottom:none; }
.corner--bl{ bottom:18px; left:18px;  border-right:none; border-top:none; }
.corner--br{ bottom:18px; right:18px; border-left:none;  border-top:none; }

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar{
  position:absolute; z-index:7; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(20px,3vw,40px) clamp(22px,3.6vw,52px);
}

/* logo lockup: emblem (wordmark cropped off) + white "Fetraco" text */
.brand{ display:flex; align-items:center; gap:13px; }
.brand__mark{
  flex:none; width:50px; height:37px; overflow:hidden; display:block;
}
.brand__mark img{
  width:50px; height:50px; display:block; margin-top:-3px;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.45));
}
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__text b{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.18rem,2vw,1.55rem);
  letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.brand__text small{
  font-size:clamp(.5rem,.8vw,.62rem);
  letter-spacing:.34em; text-transform:uppercase;
  margin-top:.45em; color:rgba(255,255,255,.82); font-weight:500;
}

.menu-btn{
  display:flex; flex-direction:column; gap:5px;
  width:46px; height:46px; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--glass-bord);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.menu-btn span{ display:block; width:18px; height:1.6px; background:var(--white); border-radius:2px; transition:.3s var(--ease); }
.menu-btn span:nth-child(2){ width:13px; }
.menu-btn:hover{ background:var(--glass-bg-2); transform:translateY(-1px); }
.menu-btn:hover span:nth-child(2){ width:18px; }

/* =====================================================================
   LEFT RAIL (social + book now)
   ===================================================================== */
.rail{
  position:absolute; z-index:7; left:clamp(22px,3.6vw,52px); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:26px;
}
.rail__social{ display:flex; flex-direction:column; gap:14px; }
.rail__social a{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:rgba(255,255,255,.85);
  border:1px solid transparent;
  transition:.3s var(--ease);
}
.rail__social svg{ width:16px; height:16px; }
.rail__social a:hover{ color:var(--ink); background:var(--white); transform:translateY(-2px); }

.rail__book{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:6px; }
.rail__line{ width:1px; height:46px; background:linear-gradient(var(--white),transparent); opacity:.6; }
.rail__booktext{
  writing-mode:vertical-rl;
  text-transform:uppercase; letter-spacing:.36em; font-size:.66rem; font-weight:600;
  color:rgba(255,255,255,.9);
  transition:color .3s var(--ease);
}
.rail__booktext:hover{ color:var(--gold-soft); }

/* =====================================================================
   CENTER
   ===================================================================== */
.hero__center{
  position:absolute; z-index:6; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 20px; gap:clamp(18px,3vh,34px);
}
.hero__place{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(.95rem,1.7vw,1.35rem);
  letter-spacing:.16em; color:var(--gold-soft);
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.hero__word{
  position:relative; display:inline-block;
  padding:0 0 .12em;                 /* room for the gold underline */
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(3.4rem,15.5vw,12.5rem);
  letter-spacing:clamp(.01em,.55vw,.09em);
  line-height:.92;
  text-indent:clamp(.01em,.55vw,.09em);
  text-shadow:0 8px 40px rgba(0,0,0,.4);
}

/* ---- per-slide entrance: eyebrow leads, then the word reveals letter-by-letter ---- */
.is-anim .hero__place{ animation:placeIn 760ms var(--ease) both; }
@keyframes placeIn{
  from{ opacity:0; transform:translateY(14px); letter-spacing:.30em; filter:blur(3px); }
  to  { opacity:1; transform:translateY(0);    letter-spacing:.16em; filter:blur(0); }
}

/* each letter is wrapped by JS in <span class="ltr" style="--i:N"> */
.hero__word .ltr{ display:inline-block; white-space:pre; will-change:transform,opacity,filter; }
.is-anim .hero__word .ltr{
  animation:letterRise 760ms var(--ease) both;
  animation-delay:calc(120ms + var(--i) * 42ms);
}
@keyframes letterRise{
  from{ opacity:0; transform:translateY(.5em) scale(.97); filter:blur(8px); }
  60% { filter:blur(0); }
  to  { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

/* gold shimmer sweep across the word, once on reveal */
.hero__word::after{
  content:attr(data-word);
  position:absolute; inset:0; padding:inherit; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(230,197,133,0) 44%, var(--gold-soft) 50%, rgba(230,197,133,0) 56%, transparent 62%);
  background-size:280% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  opacity:0;
}
.is-anim .hero__word::after{ animation:wordSheen 1100ms var(--ease) 640ms both; }
@keyframes wordSheen{
  0%{ opacity:0; background-position:180% 0; }
  12%{ opacity:1; } 88%{ opacity:1; }
  100%{ opacity:0; background-position:-80% 0; }
}

/* thin gold accent underline that draws in under the word */
.hero__word::before{
  content:""; position:absolute; left:50%; bottom:0;
  height:2px; width:min(46%,4.2em);
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-soft) 50%, var(--gold) 82%, transparent);
  border-radius:2px; opacity:0; box-shadow:0 0 14px -2px rgba(201,162,75,.55);
}
.is-anim .hero__word::before{ animation:underlineDraw 820ms var(--ease) 780ms both; }
@keyframes underlineDraw{
  from{ transform:translateX(-50%) scaleX(0); opacity:0; }
  20%{ opacity:1; }
  to{ transform:translateX(-50%) scaleX(1); opacity:1; }
}

.btn-explore{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 30px; border-radius:999px;
  font-family:var(--font-ui);
  font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white);
  background:var(--glass-bg);
  border:1px solid var(--glass-bord);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  transition:.35s var(--ease);
}
.btn-explore > *{ position:relative; z-index:1; }
/* periodic gold sheen sweeping across the button while idle */
.btn-explore::before{
  content:""; position:absolute; top:0; left:0; z-index:0;
  width:55%; height:100%;
  transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(230,197,133,0) 20%, rgba(230,197,133,.45) 50%, rgba(230,197,133,0) 80%, transparent);
  animation:btnSheen 5.5s var(--ease) 1.4s infinite;
}
@keyframes btnSheen{
  0%  { transform:translateX(-180%) skewX(-18deg); }
  14% { transform:translateX(260%)  skewX(-18deg); }
  100%{ transform:translateX(260%)  skewX(-18deg); }
}
.btn-explore svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.btn-explore:hover::before{ animation-play-state:paused; }
.btn-explore:hover{
  background:var(--gold); border-color:var(--gold);
  color:var(--ink);
  box-shadow:0 14px 40px -10px rgba(201,162,75,.6);
  transform:translateY(-2px);
}
.btn-explore:hover svg{ transform:translateX(5px); }

/* =====================================================================
   BOTTOM CONTROLS
   ===================================================================== */
.controls{
  position:absolute; z-index:7; left:0; right:0;
  bottom:clamp(58px,8.5vh,96px); /* sits above the straddling search bar */
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(22px,3.6vw,52px);
  gap:18px;
}
.controls__left,.controls__right{ display:flex; align-items:center; gap:14px; }

.ctrl-icon{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:var(--white);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:.3s var(--ease);
}
.ctrl-icon svg{ width:20px; height:20px; }
.ctrl-icon:hover{ background:var(--white); color:var(--ink); transform:translateY(-2px); }

/* play/pause icon swap */
#playToggle .ic-play{ display:none; }
#playToggle.is-paused .ic-pause{ display:none; }
#playToggle.is-paused .ic-play{ display:block; }

.counter{ display:flex; align-items:baseline; gap:6px; font-weight:600; letter-spacing:.1em; }
.counter b{ font-size:1.05rem; }
.counter i{ font-style:normal; opacity:.5; }
.counter span{ font-size:.82rem; opacity:.6; }

/* dots / progress pills */
.dots{ display:flex; align-items:center; gap:10px; }
.dot{
  position:relative; width:9px; height:9px; border-radius:999px;
  background:rgba(255,255,255,.35); overflow:hidden;
  transition:width .45s var(--ease), background .45s var(--ease);
}
.dot:hover{ background:rgba(255,255,255,.6); }
.dot.is-active{ width:46px; background:rgba(255,255,255,.28); }
.dot__fill{
  position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
  background:var(--gold-soft); border-radius:999px;
}

/* =====================================================================
   SEARCH / BOOKING BAR  (floating card straddling the hero bottom)
   ===================================================================== */
/* search bar straddles the picture/background boundary 50/50 — still one screen, no scroll */
.booking{
  position:absolute; left:0; right:0;
  top:calc(100% - var(--hero-pb)); transform:translateY(-50%); bottom:auto;
  z-index:30;
  background:transparent;
  padding:0 clamp(16px,4vw,40px);
}

.search-card{
  position:relative; z-index:40;
  display:flex; align-items:stretch; gap:2px;
  width:min(1180px, 100%);
  margin:0 auto;   /* fully visible inside the one screen */
  background:var(--white);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 34px 70px -28px rgba(6,20,33,.40), 0 10px 26px -16px rgba(6,20,33,.25);
}

.field{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  flex:1 1 0; min-width:0;
  padding:8px clamp(12px,1.4vw,22px);
}
.field label{
  font-size:.8rem; font-weight:700; letter-spacing:.01em; color:var(--card-label);
}
.field__control{ position:relative; }
.field select,
.field input{
  width:100%; min-width:0;
  border:none; background:transparent; outline:none;
  font-family:var(--font-ui); font-size:1rem; color:var(--card-value);
  padding:2px 0; cursor:pointer;
}
/* custom caret for the dropdowns */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:14px;
}
.field select:focus-visible,
.field input:focus-visible{ color:var(--brand-teal); }
.field input[type="date"]{ color:var(--card-value); }
.field input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; filter:grayscale(1);
}
.field option{ color:#111; }

.search-div{ width:1px; align-self:stretch; margin:8px 0; background:var(--card-line); flex:none; }

.search-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  margin-left:8px; padding:0 clamp(24px,2.4vw,38px); min-height:62px;
  border-radius:13px;
  background:var(--brand-teal); color:#fff;
  font-size:.92rem; font-weight:700; letter-spacing:.06em;
  box-shadow:0 14px 30px -12px rgba(14,93,124,.65);
  transition:.3s var(--ease);
}
.search-btn svg{ width:19px; height:19px; }
.search-btn:hover{
  background:var(--brand-teal-dk); transform:translateY(-2px);
  box-shadow:0 18px 38px -12px rgba(14,93,124,.75);
}
.search-btn:active{ transform:translateY(0); }

/* =====================================================================
   FOCUS / ACCESSIBILITY
   ===================================================================== */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:8px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:880px){
  .rail{ display:none; }
  .corner{ width:18px; height:18px; }
  .corner--tl,.corner--tr{ top:12px; } .corner--bl,.corner--br{ bottom:12px; }
  .corner--tl,.corner--bl{ left:12px; } .corner--tr,.corner--br{ right:12px; }

  /* search card: in-flow white section below the hero, stacked vertically */
  .controls{ bottom:clamp(16px,4vw,26px); }
  .booking{
    position:static; top:auto; transform:none; background:var(--white);
    padding:0 clamp(16px,4vw,40px) clamp(40px,7vw,72px);
  }
  .search-card{
    flex-direction:column; align-items:stretch; gap:0;
    width:min(560px,100%);
    margin:clamp(20px,6vw,36px) auto 0;
    padding:6px 14px;
  }
  .search-div{ width:auto; height:1px; align-self:auto; margin:0; }
  .field{ padding:13px 6px; }
  .search-btn{ width:100%; margin:12px 0 6px; min-height:54px; }
}

@media (max-width:600px){
  :root{ --frame:14px; --radius:12px; }
  .hero__word{ font-weight:800; }
  .btn-explore{ padding:13px 24px; font-size:.72rem; letter-spacing:.18em; }
  .controls{ flex-wrap:wrap; justify-content:center; gap:14px; }
  .controls__left{ order:2; } .dots{ order:1; flex-basis:100%; justify-content:center; }
  .controls__right{ order:3; }
  .counter b{ font-size:.95rem; }
  .ctrl-icon{ width:38px; height:38px; }
  .ctrl-icon svg{ width:18px; height:18px; }
}

@media (max-height:520px){
  .hero__center{ gap:14px; }
  .topbar,.controls{ padding-top:14px; padding-bottom:14px; }
}

/* reduced motion: kill zoom + premium motion, keep simple fades only */
@media (prefers-reduced-motion:reduce){
  .slide.is-active img{ animation:none; transform:scale(1.04) translateZ(0); }
  .slide{ transition:opacity .3s linear; }
  .is-anim .hero__place{ animation:simpleFade 500ms linear both; }
  .is-anim .hero__word{ animation:simpleFade 500ms linear both; }
  .is-anim .hero__word .ltr{ animation:simpleFade 500ms linear both; animation-delay:0ms; }
  .hero__word::before,.hero__word::after,.btn-explore::before{ animation:none !important; opacity:0 !important; }
}
@keyframes simpleFade{ from{ opacity:0; } to{ opacity:1; } }

/* =====================================================================
   EXPLORE POPULAR DESTINATIONS  (white section right after the hero)
   Uses existing :root tokens only — defines only .dest* classes.
   ===================================================================== */
.dest{
  position:relative;
  background:var(--white);
  color:var(--ink);
  padding:clamp(56px,8vh,104px) 0 clamp(48px,7vh,88px);
  overflow:hidden;                 /* clip the edge-peeking track */
}
/* faint warm wash so the white never feels flat */
.dest::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(201,162,75,.10), rgba(201,162,75,0) 70%),
    linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  opacity:.85;
}
.dest__inner{
  position:relative; z-index:1;
  width:min(1320px, 100%);
  margin:0 auto;
  /* edge gutter controls how far the peeking cards reach the viewport sides */
  --dest-gutter:clamp(20px,6vw,96px);
  --dest-gap:clamp(16px,1.8vw,26px);
  padding:0 clamp(16px,4vw,40px);
}

/* ---------- heading ---------- */
.dest__head{ text-align:center; max-width:680px; margin:0 auto clamp(34px,5vh,56px); }
.dest__title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.04;
  color:var(--ink);
  font-size:clamp(1.9rem,4.6vw,3.2rem);
}
/* slim gold accent under the heading */
.dest__title::after{
  content:""; display:block; width:62px; height:3px; margin:18px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  box-shadow:0 0 14px -2px rgba(201,162,75,.5);
}
.dest__sub{
  margin-top:18px;
  font-family:var(--font-ui);
  font-size:clamp(.96rem,1.5vw,1.08rem);
  line-height:1.6;
  color:var(--card-value);
}

/* ---------- carousel viewport + track ---------- */
.dest__viewport{ position:relative; }
.dest__track{
  display:flex;
  gap:var(--dest-gap);
  /* edge-peeking: side padding reveals partial cards left & right.
     vertical padding leaves room for the lift/tilt + shadow. */
  padding:18px var(--dest-gutter) 32px;
  margin:0 calc(-1 * clamp(16px,4vw,40px));     /* bleed to section edges */
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--dest-gutter);
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                         /* Firefox */
  perspective:1500px;                           /* shared perspective → cohesive 3D depth */
}
.dest__track::-webkit-scrollbar{ display:none; } /* WebKit */

/* ---------- card ---------- */
.dest-card{
  flex:0 0 clamp(232px, 23vw, 286px);
  scroll-snap-align:start;
  list-style:none;
}

.dest-card__inner{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3 / 4.35;
  border-radius:22px;
  overflow:hidden;
  background:var(--card-label);    /* dark fallback while image loads */
  transform:translateZ(0);
  transform-style:preserve-3d;
  box-shadow:
    0 18px 40px -22px rgba(13,15,12,.55),
    0 4px 12px -8px rgba(13,15,12,.4);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  will-change:transform;
}

/* tasteful 3D: lift + subtle tilt on hover; the featured/focused card lifts
   straight (no tilt — avoids a disorienting jump for keyboard users). */
.dest-card__inner:hover{
  transform:translateY(-10px) rotateX(4deg) rotateY(-3deg) scale(1.012);
  box-shadow:
    0 42px 74px -28px rgba(13,15,12,.6),
    0 12px 28px -16px rgba(201,162,75,.42);
}
.dest-card.is-featured .dest-card__inner,
.dest-card__inner:focus-within{
  transform:translateY(-8px);
  box-shadow:
    0 32px 62px -26px rgba(13,15,12,.6),
    0 10px 24px -14px rgba(201,162,75,.4);
}

/* gold hairline ring that fades in when the card is active */
.dest-card__inner::after{
  content:""; position:absolute; inset:0; z-index:4; border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(230,197,133,0);
  transition:box-shadow .5s var(--ease);
}
.dest-card.is-featured .dest-card__inner::after,
.dest-card__inner:hover::after,
.dest-card__inner:focus-within::after{
  box-shadow:inset 0 0 0 1.5px rgba(230,197,133,.75);
}

/* ---------- media (image / placeholder) ---------- */
.dest-card__media{ position:absolute; inset:0; z-index:0; overflow:hidden; transform:translateZ(0); }
.dest-card__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  image-rendering:auto;                          /* crisp photo resampling */
  transform:scale(1.01) translateZ(0);           /* own GPU layer, no softening */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .8s var(--ease);
  will-change:transform;
}
.dest-card__inner:hover .dest-card__img,
.dest-card__inner:focus-within .dest-card__img,
.dest-card.is-featured .dest-card__img{
  transform:scale(1.06) translateZ(0);           /* gentle zoom */
}
/* dark bottom-to-top gradient so white badge/title/stats stay legible */
.dest-card__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(8,9,7,.86) 0%,
    rgba(8,9,7,.55) 26%,
    rgba(8,9,7,.12) 52%,
    rgba(8,9,7,.04) 100%);
}

/* ---------- placeholder media (Kochi, Urumbikkara) ---------- */
.dest-card__ph{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:20px;
  color:rgba(255,255,255,.92);
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(230,197,133,.20), rgba(230,197,133,0) 60%),
    linear-gradient(155deg, var(--brand-teal) 0%, var(--brand-teal-dk) 60%, var(--card-label) 100%);
}
.dest-card__ph--alt{
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(230,197,133,.18), rgba(230,197,133,0) 60%),
    linear-gradient(155deg, var(--brand-green) 0%, var(--brand-teal-dk) 58%, var(--card-label) 100%);
}
.dest-card__ph-icon{ width:42px; height:42px; color:var(--gold-soft); opacity:.92; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.dest-card__ph-name{
  font-family:var(--font-display); font-weight:700;
  font-size:1.18rem; letter-spacing:.01em; color:var(--white);
}
.dest-card__ph-text{
  font-family:var(--font-serif); font-style:italic;
  font-size:.86rem; letter-spacing:.04em; color:var(--gold-soft);
}

/* ---------- rating badge (top-left) ---------- */
.dest-card__badge{
  position:absolute; top:14px; left:14px; z-index:5;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px 6px 9px; border-radius:999px;
  font-family:var(--font-ui); font-weight:700; font-size:.8rem;
  color:var(--ink);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
  transform:translateZ(60px);                    /* lifts toward viewer in 3D */
  opacity:0; 
  transition:opacity .45s var(--ease);
}
.dest-card__badge svg{ width:14px; height:14px; fill:var(--gold); }
.dest-card.is-featured .dest-card__badge,
.dest-card__inner:hover .dest-card__badge,
.dest-card__inner:focus-within .dest-card__badge{ opacity:1; }

/* ---------- bottom body overlay ---------- */
.dest-card__body{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; padding:20px 20px 22px;
  color:var(--white);
  transform:translateZ(40px);                    /* content floats above the image */
}
/* stats + cta hidden by default on non-featured cards; revealed on hover/focus.
   title is ALWAYS visible. */
.dest-card__stats{
  font-family:var(--font-ui); font-size:.78rem; font-weight:500;
  letter-spacing:.01em; color:rgba(255,255,255,.86); margin:0;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.dest-card__name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,2vw,1.55rem); letter-spacing:-.01em; line-height:1.05;
  color:var(--white);
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.dest-card__cta{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:4px; padding:10px 18px; border-radius:999px;
  font-family:var(--font-ui); font-weight:600; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
  background:var(--brand-teal);
  box-shadow:0 10px 24px -12px rgba(14,93,124,.8);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease);
}
.dest-card__cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.dest-card__cta:hover{
  background:var(--gold); color:var(--ink);
  box-shadow:0 14px 30px -12px rgba(201,162,75,.6);
}
.dest-card__cta:hover svg{ transform:translateX(4px); }

/* reveal stats + cta when card is featured / hovered / focused */
.dest-card.is-featured .dest-card__stats,
.dest-card__inner:hover .dest-card__stats,
.dest-card__inner:focus-within .dest-card__stats,
.dest-card.is-featured .dest-card__cta,
.dest-card__inner:hover .dest-card__cta,
.dest-card__inner:focus-within .dest-card__cta{
  opacity:1; transform:translateY(0);
}
.dest-card.is-featured .dest-card__cta,
.dest-card__inner:hover .dest-card__cta,
.dest-card__inner:focus-within .dest-card__cta{
  pointer-events:auto;
}

/* ---------- arrows ---------- */
.dest__arrow{
  position:absolute; top:calc(50% - 22px); z-index:6;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--card-line);
  box-shadow:0 14px 30px -14px rgba(13,15,12,.45);
  transition:transform .35s var(--ease), background .35s var(--ease),
             color .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease);
}
.dest__arrow svg{ width:22px; height:22px; transition:transform .3s var(--ease); }
.dest__arrow--prev{ left:clamp(2px,1vw,12px); }
.dest__arrow--next{ right:clamp(2px,1vw,12px); }
.dest__arrow:hover{
  background:var(--brand-teal); color:var(--white); border-color:var(--brand-teal);
  box-shadow:0 18px 38px -14px rgba(14,93,124,.6);
  transform:translateY(-2px);
}
.dest__arrow--prev:hover svg{ transform:translateX(-3px); }
.dest__arrow--next:hover svg{ transform:translateX(3px); }
.dest__arrow:active{ transform:translateY(0) scale(.95); }
.dest__arrow[disabled]{ opacity:.32; pointer-events:none; }

/* ---------- view all ---------- */
.dest__foot{ display:flex; justify-content:center; margin-top:clamp(30px,4.5vh,52px); }
.dest__viewall{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 34px; border-radius:999px;
  font-family:var(--font-ui); font-weight:600; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--white);
  background:var(--brand-teal);
  box-shadow:0 16px 36px -16px rgba(14,93,124,.7);
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.dest__viewall > *{ position:relative; z-index:1; }
.dest__viewall svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
/* gold sheen sweep on hover */
.dest__viewall::before{
  content:""; position:absolute; top:0; left:0; z-index:0;
  width:60%; height:100%;
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(230,197,133,.45) 50%, transparent);
  transition:transform .7s var(--ease);
}
.dest__viewall:hover{
  background:var(--brand-teal-dk);
  transform:translateY(-2px);
  box-shadow:0 22px 44px -14px rgba(14,93,124,.8);
}
.dest__viewall:hover::before{ transform:translateX(180%) skewX(-18deg); }
.dest__viewall:hover svg{ transform:translateX(5px); }
.dest__viewall:active{ transform:translateY(0); }

/* ---------- focus-visible (consistent with the site) ---------- */
.dest__arrow:focus-visible,
.dest__viewall:focus-visible,
.dest-card__cta:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px;
}
.dest-card__inner:focus-within{ outline:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .dest-card{ flex-basis:clamp(228px,32vw,272px); }   /* ~3 visible */
}

@media (max-width:880px){
  .dest__inner{ --dest-gutter:clamp(16px,5vw,40px); }
  .dest__arrow{ width:46px; height:46px; }
  .dest__arrow--prev{ left:6px; }
  .dest__arrow--next{ right:6px; }
  .dest-card{ flex-basis:clamp(220px,46vw,266px); }    /* ~2 visible */
}

/* mobile: horizontal scroll-snap showing ~1.1 cards, arrows hidden (swipe) */
@media (max-width:600px){
  .dest__inner{ --dest-gutter:18px; --dest-gap:14px; }
  .dest__track{ padding-left:18px; padding-right:18px; perspective:none; }
  .dest-card{ flex-basis:min(82vw, 320px); scroll-snap-align:start; }
  .dest-card__inner{ aspect-ratio:3 / 4; }
  .dest__arrow{ display:none; }
  /* on touch the overlay reads as always-revealed for legibility */
  .dest-card__badge,
  .dest-card__stats,
  .dest-card__cta{ opacity:1; transform:none; pointer-events:auto; }
}

@media (max-width:420px){
  .dest-card{ flex-basis:min(86vw, 300px); }
}

/* =====================================================================
   REDUCED MOTION — no tilt / no zoom / no sheen, simple fades only
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .dest__track{ scroll-behavior:auto; perspective:none; }
  .dest-card__inner,
  .dest-card__img,
  .dest-card__badge,
  .dest-card__stats,
  .dest-card__cta,
  .dest-card__cta svg,
  .dest__arrow,
  .dest__arrow svg,
  .dest__viewall,
  .dest__viewall svg{
    transition:opacity .25s linear, background .25s linear, color .25s linear !important;
  }
  .dest-card__inner:hover,
  .dest-card.is-featured .dest-card__inner,
  .dest-card__inner:focus-within{ transform:none; }
  .dest-card__inner:hover .dest-card__img,
  .dest-card__inner:focus-within .dest-card__img,
  .dest-card.is-featured .dest-card__img{ transform:translateZ(0); }
  .dest-card__badge,
  .dest-card__body{ transform:none; }
  .dest-card__stats,
  .dest-card__cta{ transform:none; }
  .dest__arrow:hover,
  .dest__viewall:hover,
  .dest-card__cta:hover{ transform:none; }
  .dest__viewall::before{ display:none; }
}

/* =====================================================================
   DESTINATIONS — pinned horizontal scroll (desktop >=881px)
   Scroll down drives the track right->left; centre card activates;
   gold progress fills; then the page continues. Mobile = native swipe.
   ===================================================================== */
.dest__pin{ position:relative; }
.dest__progress{ display:none; }

@media (min-width:881px){
  .dest{ overflow:visible; padding:0; }
  .dest__sticky{
    position:sticky; top:0; height:100svh; min-height:600px;
    display:flex; flex-direction:column; justify-content:center;
    overflow:hidden;
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(201,162,75,.10), rgba(201,162,75,0) 70%),
      linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  }
  .dest__head{ margin-bottom:clamp(20px,3.6vh,40px); }
  .dest__viewport{ overflow:visible; }
  .dest__track{
    overflow:visible; scroll-snap-type:none;
    transform:translate3d(0,0,0); will-change:transform;
  }
  .dest__arrow{ display:none; }
  .dest__progress{
    display:block;
    width:min(440px,56vw); height:3px; margin:clamp(22px,3.2vh,38px) auto 0;
    border-radius:3px; background:var(--card-line); overflow:hidden;
  }
  .dest__progress-fill{
    display:block; height:100%; width:100%;
    transform-origin:left center; transform:scaleX(0);
    background:linear-gradient(90deg, var(--gold), var(--gold-soft));
    box-shadow:0 0 10px -1px rgba(201,162,75,.55);
  }
}

/* reduced motion (any width): no pin, fall back to native horizontal scroll */
@media (prefers-reduced-motion:reduce){
  .dest__sticky{ position:static !important; height:auto !important; display:block !important; }
  .dest__pin{ height:auto !important; }
  .dest__track{ transform:none !important; overflow-x:auto !important; }
  .dest__progress{ display:none !important; }
}

/* =====================================================================
   ABOUT — Fetraco | "Across God's Own Country" (map-hero, centered overlay)
   Light section, placed AFTER Destinations. Uses existing :root tokens.
   Every selector namespaced .about*
   ===================================================================== */
.about{
  position:relative;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(36,169,202,.06), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(201,162,75,.08), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--cream) 72%, var(--cream) 100%);
  color:var(--ink);
  padding:clamp(72px,11vh,150px) clamp(20px,4vw,40px) clamp(80px,12vh,160px);
  overflow:hidden;
}
/* hairline gold rule along the top to seat it against Destinations */
.about::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.55) 22%, rgba(201,162,75,.55) 78%, transparent);
  opacity:.8;
}
/* faint cartographic grid, decorative, masked to fade at edges */
.about::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,162,75,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,75,.05) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 42%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 42%, #000 30%, transparent 78%);
}

.about__inner{
  position:relative; z-index:1;
  width:min(1180px,100%); margin:0 auto;
}

/* ---------------- MAP STAGE ---------------- */
.about__mapwrap{
  position:relative;
  width:min(560px,92%);
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:420 / 920; /* locks pin geometry to the viewBox */
  perspective:1300px;            /* 3D depth for the floating map */
  perspective-origin:50% 42%;
}
.about__glow{
  position:absolute; inset:4% 6%; z-index:0; pointer-events:none;
  background:radial-gradient(58% 48% at 50% 44%, rgba(14,93,124,.20), transparent 70%);
  filter:blur(28px);
}
.about__map{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  display:block;
  filter:drop-shadow(0 34px 60px rgba(10,72,97,.30)) drop-shadow(0 10px 24px rgba(13,15,12,.18));
  overflow:visible;
  will-change:transform;
  backface-visibility:hidden;
  transform-origin:50% 46%;
}

/* photo fill — fades + scales in */
.about__fill{
  opacity:0; transform-box:fill-box; transform-origin:50% 46%;
  transform:scale(.965);
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
.about.is-in .about__fill{ opacity:1; transform:scale(1); }

/* gold outline — draws in via dash offset (pathLength normalised to 1) */
.about__outline{
  stroke:var(--gold);
  stroke-width:2.4;
  stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 1px 6px rgba(201,162,75,.45));
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 2200ms var(--ease) 120ms;
}
.about.is-in .about__outline{ stroke-dashoffset:0; }

/* ---------------- PINS ---------------- */
.about__pin{ opacity:0; cursor:default; }
.about__pindrop{
  transform-box:fill-box; transform-origin:50% 50%;
  transform:translateY(-22px) scale(.3);
}
.about.is-in .about__pin{
  animation:aboutPinIn 620ms var(--ease) forwards;
  animation-delay:calc(1500ms + var(--d) * 130ms);
}
.about.is-in .about__pin .about__pindrop{
  animation:aboutPinDrop 720ms var(--ease) forwards;
  animation-delay:calc(1500ms + var(--d) * 130ms);
}
@keyframes aboutPinIn{ to{ opacity:1; } }
@keyframes aboutPinDrop{
  0%  { transform:translateY(-22px) scale(.3); }
  62% { transform:translateY(2px)   scale(1.12); }
  100%{ transform:translateY(0)     scale(1); }
}

.about__pinhalo{ fill:rgba(255,255,255,.85); }
.about__pindot{ fill:var(--brand-teal); stroke:var(--white); stroke-width:1.6; }
.about__pincore{ fill:var(--gold-soft); }

.about__pin--feat .about__pindot{ fill:var(--gold); }
.about__pin--feat .about__pincore{ fill:var(--white); }

/* featured expanding pulse ring */
.about__pinpulse{
  fill:none; stroke:var(--gold); stroke-width:2; opacity:0;
  transform-box:fill-box; transform-origin:50% 50%;
}
.about.is-in .about__pin--feat .about__pinpulse{
  animation:aboutPulse 2400ms var(--ease) 2400ms infinite;
}
@keyframes aboutPulse{
  0%  { opacity:.55; transform:scale(.6); }
  70% { opacity:0;   transform:scale(2.6); }
  100%{ opacity:0;   transform:scale(2.6); }
}
/* soft idle glow on every dot once settled */
.about.is-in .about__pindot{
  animation:aboutDotPulse 3.4s var(--ease) infinite;
  animation-delay:calc(2600ms + var(--d) * 130ms);
}
@keyframes aboutDotPulse{
  0%,100%{ filter:none; }
  50%{ filter:drop-shadow(0 0 5px rgba(14,93,124,.65)); }
}

/* labels (SVG pills — scale perfectly with the map) */
.about__pinlabel{ opacity:0; }
.about.is-in .about__pinlabel{
  animation:aboutPinIn 500ms var(--ease) forwards;
  animation-delay:calc(1820ms + var(--d) * 130ms);
}
.about__pinpill{
  fill:rgba(255,255,255,.92);
  stroke:rgba(201,162,75,.55); stroke-width:1;
}
.about__pinlabel text{
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  letter-spacing:.02em; fill:var(--card-label);
}
.about__pin--feat .about__pinpill{ fill:var(--ink); stroke:var(--gold); }
.about__pin--feat .about__pinlabel text{ fill:var(--gold-soft); }
/* hover affordance */
.about__pin:hover .about__pindot{ stroke-width:2.4; }
.about__pin:hover .about__pinpill{ stroke:var(--gold); }

/* ====================== CENTERED OVERLAY ====================== */
.about__overlay{
  position:absolute; z-index:4;
  left:50%; top:46%;
  transform:translate(-50%,-50%);
  width:min(118%,560px); /* allowed to spill past the narrow map */
  text-align:center;
  padding:clamp(20px,3vw,32px) clamp(22px,4vw,42px);
  pointer-events:none; /* keep pins behind hoverable */
}
.about__overlay > *{ pointer-events:auto; }

/* premium glass plate behind the text for legibility over the photo */
.about__overlay::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:22px;
  background:radial-gradient(120% 120% at 50% 40%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.52) 55%, rgba(255,255,255,.30) 100%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 70px -34px rgba(6,24,31,.5), inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(9px) saturate(1.1); backdrop-filter:blur(9px) saturate(1.1);
}

/* staggered rise+fade reveal for overlay content */
.about__eyebrow,
.about__title .about__titleline,
.about__sub,
.about__story,
.about__stats,
.about__actions{
  opacity:0; transform:translateY(20px);
  transition:opacity 760ms var(--ease), transform 760ms var(--ease);
}
.about.is-in .about__eyebrow{ opacity:1; transform:none; transition-delay:1500ms; }
.about.is-in .about__title .about__titleline:nth-child(1){ opacity:1; transform:none; transition-delay:1620ms; }
.about.is-in .about__title .about__titleline:nth-child(2){ opacity:1; transform:none; transition-delay:1720ms; }
.about.is-in .about__sub{ opacity:1; transform:none; transition-delay:1860ms; }
.about.is-in .about__story{ opacity:1; transform:none; transition-delay:1980ms; }
.about.is-in .about__stats{ opacity:1; transform:none; transition-delay:2100ms; }
.about.is-in .about__actions{ opacity:1; transform:none; transition-delay:2220ms; }

.about__eyebrow{
  font-family:var(--font-ui);
  font-size:clamp(.62rem,1.4vw,.74rem);
  font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brand-teal);
  margin-bottom:clamp(12px,2vw,18px);
}
.about__eyebrow span{ color:var(--gold); }
.about__eyebrow em{
  font-family:var(--font-serif); font-style:italic;
  text-transform:none; letter-spacing:.02em;
  font-size:1.18em; color:var(--card-label);
}

.about__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,6.6vw,3.6rem);
  line-height:.98;
  letter-spacing:-.012em;
  color:var(--ink);
  text-transform:uppercase;
  text-wrap:balance;
}
.about__titleline{ display:block; }
.about__titleline--accent{
  background:linear-gradient(92deg, var(--brand-teal-dk), var(--brand-teal) 45%, var(--gold) 120%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.about__sub{
  margin:clamp(16px,2.4vw,22px) auto 0;
  max-width:42ch;
  font-family:var(--font-serif);
  font-size:clamp(.95rem,1.9vw,1.12rem);
  line-height:1.55;
  color:var(--card-label);
}
.about__sub strong{ color:var(--brand-teal-dk); font-weight:700; }

/* founder story line */
.about__story{
  margin:clamp(12px,1.8vw,16px) auto 0;
  max-width:44ch;
  font-family:var(--font-ui);
  font-size:clamp(.84rem,1.5vw,.95rem);
  line-height:1.62;
  color:var(--card-value);
}

/* trust stats — est 2016 / google rating / local team */
.about__stats{
  list-style:none; margin:clamp(18px,2.6vw,26px) 0 0; padding:0;
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(16px,3vw,30px);
}
.about__stats li{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.about__stats li + li{ padding-left:clamp(16px,3vw,30px); border-left:1px solid rgba(201,162,75,.32); }
.about__stats b{
  font-family:var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(1.15rem,2.6vw,1.6rem);
  background:linear-gradient(92deg, var(--brand-teal-dk), var(--gold) 135%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--brand-teal-dk);
}
.about__stats span{
  font-family:var(--font-ui); font-size:.6rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--card-label);
}

.about__actions{ margin-top:clamp(20px,3vw,30px); }

.about__cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:13px;
  padding:15px 32px; border-radius:999px;
  font-family:var(--font-ui);
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white);
  background:var(--brand-teal);
  box-shadow:0 16px 36px -14px rgba(14,93,124,.66);
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.about__cta > *{ position:relative; z-index:1; }
.about__cta::before{ /* gold sheen sweep, like the hero button */
  content:""; position:absolute; top:0; left:0; z-index:0;
  width:55%; height:100%;
  transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(230,197,133,0) 20%, rgba(230,197,133,.5) 50%, rgba(230,197,133,0) 80%, transparent);
}
.about.is-in .about__cta::before{ animation:aboutCtaSheen 5.5s var(--ease) 3s infinite; }
@keyframes aboutCtaSheen{
  0%{ transform:translateX(-180%) skewX(-18deg); }
  16%{ transform:translateX(280%) skewX(-18deg); }
  100%{ transform:translateX(280%) skewX(-18deg); }
}
.about__cta svg{ width:17px; height:17px; transition:transform .35s var(--ease); }
.about__cta:hover{
  background:var(--gold); color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 18px 42px -12px rgba(201,162,75,.6);
}
.about__cta:hover::before{ animation-play-state:paused; }
.about__cta:hover svg{ transform:translateX(5px); }
.about__cta:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }

/* =========================== RESPONSIVE =========================== */
@media (min-width:900px){
  .about__mapwrap{ width:min(620px,72%); }
  .about__overlay{ width:min(560px,150%); top:44%; }
}
@media (max-width:560px){
  .about{ padding:clamp(56px,9vh,90px) 18px clamp(64px,10vh,100px); }
  .about__mapwrap{ width:min(420px,100%); }
  .about__overlay{ width:min(130%,440px); }
  .about__title{ font-size:clamp(1.9rem,9vw,2.6rem); }
}

/* ===================== REDUCED MOTION: simple fades, no draw/drop ===================== */
@media (prefers-reduced-motion:reduce){
  .about__fill{ transition:opacity 400ms linear; transform:none !important; }
  .about.is-in .about__fill{ transform:none; }

  .about__outline{
    transition:opacity 400ms linear;
    stroke-dasharray:none; stroke-dashoffset:0; opacity:0;
  }
  .about.is-in .about__outline{ opacity:1; }

  .about__pin,
  .about__pinlabel{ opacity:1 !important; animation:none !important; }
  .about__pindrop{ transform:none !important; animation:none !important; }
  .about.is-in .about__pin--feat .about__pinpulse,
  .about.is-in .about__pindot,
  .about.is-in .about__cta::before{ animation:none !important; }

  .about__eyebrow,
  .about__title .about__titleline,
  .about__sub,
  .about__actions{ transition:opacity 400ms linear; transform:none; transition-delay:0s !important; }
}

/* About — lift the overlay above the pin cluster so all 7 destination pins stay visible on the map */
.about__overlay{ top:4% !important; bottom:auto !important; transform:translate(-50%,0) !important; }
@media (min-width:900px){ .about__overlay{ top:5% !important; width:min(118%,520px) !important; } }

/* Destinations — 3 big cards with a coverflow focal (centre card scaled up vs the sides) */
@media (min-width:881px){
  .dest-card{
    flex-basis:clamp(280px,30vw,460px);
    transform:scale(var(--focal,1));
    transform-origin:center center;
    transition:transform .3s var(--ease);
  }
  .dest__track{ padding-top:42px; padding-bottom:54px; }
}

/* =====================================================================
   SIGNATURE DESTINATIONS — bold dark premium section (after About)
   Uses existing :root tokens only. Every selector namespaced .sig*
   ===================================================================== */
.sig{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--white);
  padding:clamp(72px,11vh,150px) clamp(20px,4vw,40px) clamp(80px,12vh,160px);
  /* deep ink -> teal cinematic field so the cards glow against it */
  background:
    radial-gradient(120% 80% at 12% -6%, rgba(14,93,124,.42), transparent 56%),
    radial-gradient(110% 80% at 100% 110%, rgba(10,72,97,.46), transparent 60%),
    radial-gradient(90% 70% at 50% 50%, rgba(201,162,75,.07), transparent 70%),
    linear-gradient(180deg, #0a0c0b 0%, #081417 48%, var(--ink) 100%);
}
/* hairline gold rule along the top to seat it against the About section */
.sig::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.6) 22%, rgba(201,162,75,.6) 78%, transparent);
  opacity:.85;
}
/* faint drifting aurora wash, decorative */
.sig::after{
  content:""; position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 30% at 22% 24%, rgba(36,169,202,.16), transparent 70%),
    radial-gradient(38% 28% at 82% 70%, rgba(201,162,75,.12), transparent 72%);
  filter:blur(8px);
  opacity:.9;
}

.sig__inner{
  position:relative; z-index:1;
  width:min(1240px,100%); margin:0 auto;
}

/* ---------------- HEADING ---------------- */
.sig__head{
  text-align:center;
  max-width:680px; margin:0 auto clamp(40px,6vh,64px);
}
.sig__eyebrow{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(.95rem,1.7vw,1.2rem);
  letter-spacing:.04em; color:var(--gold-soft);
  margin-bottom:clamp(12px,2vw,18px);
}
.sig__eyebrow em{ font-style:italic; }
.sig__title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(2rem,5.4vw,3.5rem);
  color:var(--white);
  text-wrap:balance;
  text-shadow:0 6px 36px rgba(0,0,0,.45);
}
/* slim gold accent under the heading */
.sig__title::after{
  content:""; display:block; width:64px; height:3px; margin:18px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  box-shadow:0 0 16px -1px rgba(201,162,75,.6);
}
.sig__sub{
  margin-top:18px;
  font-family:var(--font-ui);
  font-size:clamp(.96rem,1.5vw,1.1rem);
  line-height:1.6;
  color:rgba(255,255,255,.74);
}

/* ---- heading scroll-reveal ---- */
.sig__eyebrow,
.sig__title,
.sig__sub{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.sig.is-in .sig__eyebrow{ opacity:1; transform:none; transition-delay:60ms; }
.sig.is-in .sig__title{ opacity:1; transform:none; transition-delay:160ms; }
.sig.is-in .sig__sub{ opacity:1; transform:none; transition-delay:280ms; }

/* ---------------- GRID ---------------- */
.sig__grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.4vw,34px);
  align-items:stretch;
}

/* ---------------- CARD ---------------- */
.sig-card{ display:flex; }

/* scroll-reveal: rise + fade with a per-card stagger (--i) */
.sig-card{
  opacity:0; transform:translateY(54px) scale(.985);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(.34s + var(--i) * .16s);
  will-change:transform, opacity;
}
.sig.is-in .sig-card{ opacity:1; transform:none; }

.sig-card__inner{
  position:relative;
  display:flex; flex-direction:column;
  width:100%;
  min-height:clamp(440px, 60vh, 580px);
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg, #0c1417 0%, #0a1013 100%); /* dark body fallback */
  box-shadow:
    0 30px 60px -28px rgba(0,0,0,.8),
    0 10px 26px -16px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
  will-change:transform;
}
/* gold hairline ring that ignites on hover/focus */
.sig-card__inner::after{
  content:""; position:absolute; inset:0; z-index:6; border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(230,197,133,0);
  transition:box-shadow .5s var(--ease);
}
.sig-card__inner:hover,
.sig-card__inner:focus-within{
  transform:translateY(-12px);
  box-shadow:
    0 50px 90px -30px rgba(0,0,0,.85),
    0 16px 38px -18px rgba(201,162,75,.42),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.sig-card__inner:hover::after,
.sig-card__inner:focus-within::after{
  box-shadow:inset 0 0 0 1.5px rgba(230,197,133,.8);
}

/* ---------------- MEDIA (photo fills the top, blends into the body) ---------------- */
.sig-card__media{
  position:relative;
  flex:0 0 auto;
  height:clamp(220px, 30vh, 300px);
  overflow:hidden;
}
.sig-card__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  transform:scale(1.02) translateZ(0);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .9s var(--ease);
  will-change:transform;
}
.sig-card__inner:hover .sig-card__img,
.sig-card__inner:focus-within .sig-card__img{
  transform:scale(1.1) translateZ(0);
}
/* dark gradient melting the photo down into the dark card body */
.sig-card__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(8,12,14,0) 0%,
    rgba(8,12,14,.10) 42%,
    rgba(8,12,14,.55) 74%,
    #0a1013 100%);
}

/* ---------------- BODY (dark, holds title/desc/chips/cta) ---------------- */
.sig-card__body{
  position:relative; z-index:2;
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px;
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  margin-top:-44px; /* pull body up so text starts on the photo's faded base */
}
.sig-card__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.45rem,2.4vw,1.85rem);
  letter-spacing:-.01em; line-height:1.05;
  color:var(--white);
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.sig-card__desc{
  font-family:var(--font-ui);
  font-size:clamp(.88rem,1.15vw,.96rem);
  line-height:1.58;
  color:rgba(255,255,255,.72);
}

/* ---- chips ---- */
.sig-card__chips{
  list-style:none; margin:2px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px;
}
.sig-card__chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:999px;
  font-family:var(--font-ui); font-weight:600; font-size:.76rem;
  letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.sig-card__chip--rating{
  color:var(--gold-soft);
  background:rgba(201,162,75,.14);
  border-color:rgba(230,197,133,.4);
}
.sig-card__chip--rating span{ color:var(--gold); font-size:.82rem; line-height:1; }
.sig-card__chip--fav{
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-color:rgba(230,197,133,.6);
}

/* ---- Reserve now: full-width white pill, dark text, sheen on hover ---- */
.sig-card__cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  margin-top:auto; /* pin to the bottom of the dark body */
  padding:15px 22px; border-radius:999px;
  text-decoration:none;
  font-family:var(--font-ui); font-weight:700; font-size:.84rem;
  letter-spacing:.08em;
  color:var(--ink);
  background:var(--white);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.sig-card__cta > *{ position:relative; z-index:1; }
.sig-card__cta svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
/* gold sheen sweep that fires on hover */
.sig-card__cta::before{
  content:""; position:absolute; top:0; left:0; z-index:0;
  width:60%; height:100%;
  transform:translateX(-170%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(230,197,133,.55) 50%, transparent);
  transition:transform .7s var(--ease);
}
.sig-card__inner:hover .sig-card__cta,
.sig-card__cta:hover,
.sig-card__cta:focus-visible{
  background:var(--gold-soft);
  box-shadow:0 18px 40px -14px rgba(201,162,75,.6);
  transform:translateY(-2px);
}
.sig-card__inner:hover .sig-card__cta::before,
.sig-card__cta:hover::before{ transform:translateX(180%) skewX(-18deg); }
.sig-card__cta:hover svg{ transform:translateX(4px); }
.sig-card__cta:active{ transform:translateY(0); }

/* ---------------- FOCUS / ACCESSIBILITY ---------------- */
.sig-card__cta:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px;
}
.sig-card__inner:focus-within{ outline:none; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .sig__grid{ grid-template-columns:repeat(2, 1fr); }
  /* center the lone third card on the second row */
  .sig-card:nth-child(3){ grid-column:1 / -1; max-width:calc(50% - clamp(10px,1.2vw,17px)); margin:0 auto; }
}
@media (max-width:640px){
  .sig{ padding:clamp(56px,9vh,90px) 18px clamp(64px,10vh,100px); }
  .sig__grid{ grid-template-columns:1fr; gap:22px; }
  .sig-card:nth-child(3){ max-width:none; margin:0; }
  .sig-card__inner{ min-height:0; }
  .sig-card__media{ height:clamp(200px,46vw,260px); }
}

/* ---------------- REDUCED MOTION — simple fades, no zoom/lift/sheen ---------------- */
@media (prefers-reduced-motion:reduce){
  .sig__eyebrow,
  .sig__title,
  .sig__sub,
  .sig-card{
    transition:opacity .4s linear; transform:none !important; transition-delay:0s !important;
  }
  .sig-card__inner,
  .sig-card__img,
  .sig-card__cta,
  .sig-card__cta svg{ transition:background .25s linear, box-shadow .25s linear !important; }
  .sig-card__inner:hover,
  .sig-card__inner:focus-within{ transform:none; }
  .sig-card__inner:hover .sig-card__img,
  .sig-card__inner:focus-within .sig-card__img{ transform:translateZ(0); }
  .sig-card__inner:hover .sig-card__cta,
  .sig-card__cta:hover{ transform:none; }
  .sig-card__cta::before{ display:none; }
}

/* =====================================================================
   About — SPLIT: dynamic text (NO card) beside a SMALLER animated map
   ===================================================================== */
.about__overlay::before{ display:none !important; }   /* drop the glass card plate */

@media (min-width:900px){
  .about__inner{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) auto;
    align-items:center;
    gap:clamp(40px,5vw,96px);
  }
  .about__overlay{
    order:1;
    position:static !important; transform:none !important; inset:auto !important;
    width:auto !important; max-width:560px;
    padding:0 !important; text-align:left; pointer-events:auto; justify-self:start;
  }
  .about__title{ text-align:left; }
  .about__mapwrap{
    order:2;
    width:auto !important; height:min(700px,74vh); aspect-ratio:420 / 920;
    margin:0 !important; justify-self:center;
  }
}

@media (max-width:899px){
  .about__overlay{
    position:static !important; transform:none !important; inset:auto !important;
    width:auto !important; max-width:560px; margin:0 auto clamp(30px,7vw,52px);
    padding:0 !important; text-align:center; pointer-events:auto;
  }
  .about__mapwrap{ width:auto !important; height:min(560px,62vh); aspect-ratio:420 / 920; margin:0 auto !important; }
}

/* About small map — keep it uncluttered: pin dots always animate in, name labels reveal on hover/focus (featured pin's name stays) */
.about__pinlabel{ opacity:0 !important; transition:opacity .3s var(--ease) !important; }
.about__pin{ cursor:pointer; }
.about__pin:hover, .about__pin:focus-within{ outline:none; }
.about__pin:hover .about__pinlabel,
.about__pin:focus-within .about__pinlabel,
.about__pin--feat .about__pinlabel{ opacity:1 !important; }
.about__pindot{ r:6; }
.about__pinhalo{ r:12; }

/* Destinations — keep heading + cards inside the pinned screen (no cut-off), snappy focal for the smooth lerp scroll */
@media (min-width:881px){
  .dest-card{ flex-basis:clamp(250px,27vw,380px); transition:transform .1s linear; }
  .dest-card__inner{ aspect-ratio:3 / 4; max-height:min(56vh,520px); }
  .dest__track{ padding-top:clamp(22px,3vh,36px); padding-bottom:clamp(28px,3.6vh,46px); }
  .dest__head{ margin-bottom:clamp(14px,2.4vh,30px); }
}

/* Signature Experiences — extra motion: smooth hover lift + image zoom + reserve-btn sheen */
.sig-card__inner{ transition:transform .55s var(--ease), box-shadow .55s var(--ease); will-change:transform; }
.sig-card:hover .sig-card__inner{ transform:translateY(-12px) scale(1.012); }
.sig-card__img{ transition:transform 1.1s var(--ease); }
.sig-card:hover .sig-card__img{ transform:scale(1.08); }
.sig-card__cta{ position:relative; overflow:hidden; isolation:isolate; }
.sig-card__cta > *{ position:relative; z-index:1; }
.sig-card__cta::after{
  content:""; position:absolute; inset:0; z-index:0; transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5) 50%, transparent);
}
.sig-card__cta:hover::after{ transform:translateX(130%) skewX(-18deg); transition:transform .8s var(--ease); }

/* About map — continuous "radar ping" so each pin actively points to its location */
.about.is-in .about__pinhalo{
  transform-box:fill-box; transform-origin:center;
  animation:aboutPing 2.6s var(--ease) infinite;
  animation-delay:calc(var(--d,0) * .2s + 1.4s);
}
@keyframes aboutPing{
  0%  { transform:scale(.5);  opacity:.7; }
  70% { opacity:0; }
  100%{ transform:scale(2.7); opacity:0; }
}
/* a soft gold ring under each pin dot to read as a "location marker" */
.about__pin .about__pindot{ stroke:var(--gold-soft); stroke-width:1.4; }

/* =====================================================================
   TESTIMONIALS — "What Travellers Say"  (#reviews)
   LIGHT premium section placed AFTER the dark #why. Dual-row CSS transform
   marquee scrolling in OPPOSITE directions, seamless infinite loop (each
   track holds the source group + a JS-cloned duplicate; translateX 0 -> -50%
   lands on the copy). Pause on hover/focus. Under prefers-reduced-motion the
   marquee stops and becomes a static, swipeable strip.
   Uses :root tokens only — every selector namespaced .rev*.
   ===================================================================== */
.rev{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--ink);
  padding:clamp(74px,11vh,150px) 0 clamp(82px,12vh,160px);
  /* airy white -> cream wash so the section reads light after the dark Why */
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(201,162,75,.08), transparent 56%),
    radial-gradient(100% 70% at 100% 108%, rgba(14,93,124,.05), transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
}
/* hairline gold rule along the top seats it against the dark Why above */
.rev::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.55) 22%, rgba(201,162,75,.55) 78%, transparent);
}

.rev__inner{
  position:relative; z-index:1;
  width:min(1240px,100%); margin:0 auto;
}

/* ---------------- HEADING ---------------- */
.rev__head{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(34px,5vh,52px);
  padding:0 clamp(20px,4vw,40px);
}
.rev__eyebrow{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(.95rem,1.7vw,1.18rem);
  letter-spacing:.04em; color:var(--gold);
  margin-bottom:clamp(12px,2vw,18px);
}
.rev__eyebrow em{ font-style:italic; }
.rev__title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.04;
  color:var(--ink);
  font-size:clamp(1.9rem,4.6vw,3.2rem);
  text-wrap:balance;
}
/* the gold-gradient accent word inside the heading */
.rev__title span{
  background:linear-gradient(92deg, var(--gold), var(--gold-soft));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* slim gold accent rule under the heading (matches the site's light heads) */
.rev__title::after{
  content:""; display:block; width:62px; height:3px; margin:18px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  box-shadow:0 0 14px -2px rgba(201,162,75,.5);
}
.rev__sub{
  margin-top:18px;
  font-family:var(--font-ui);
  font-size:clamp(.96rem,1.5vw,1.08rem);
  line-height:1.6;
  color:var(--card-value);
}

/* ---------------- GOOGLE TRUST BADGE (pill, links to Google) ---------------- */
.rev__badge{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(20px,3vw,28px);
  padding:8px 16px 8px 12px;
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:.88rem;
  color:var(--card-label);
  background:var(--white);
  border:1px solid var(--card-line);
  box-shadow:0 10px 26px -16px rgba(13,15,12,.4), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.rev__badge:hover{
  transform:translateY(-2px);
  border-color:var(--gold-soft);
  box-shadow:0 16px 32px -18px rgba(201,162,75,.55), 0 1px 0 rgba(255,255,255,.6) inset;
}
.rev__badge:focus-visible{
  outline:none;
  border-color:var(--gold-soft);
  box-shadow:0 0 0 3px rgba(201,162,75,.4), 0 16px 32px -18px rgba(201,162,75,.55);
}
.rev__badge-g{ display:grid; place-items:center; flex:0 0 auto; }
.rev__badge-g svg{ display:block; }
.rev__badge-stars{
  color:var(--gold); letter-spacing:.04em; font-size:.95rem; line-height:1;
  text-shadow:0 1px 4px rgba(201,162,75,.28);
}
.rev__badge-text{ color:var(--ink); }
.rev__badge-text strong{ font-weight:800; }
.rev__badge-text i{ font-style:normal; color:var(--card-value); margin:0 2px; }
.rev__badge-go{ color:var(--brand-teal); flex:0 0 auto; margin-left:1px;
  transition:transform .3s var(--ease); }
.rev__badge:hover .rev__badge-go{ transform:translate(2px,-2px); }

/* ---------------- DUAL MARQUEE ROWS ---------------- */
.rev__rows{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.6vw,26px);
  /* marquee speed knobs — larger = slower */
  --rev-dur-a:62s;
  --rev-dur-b:74s;
}
.rev__row{
  position:relative;
  overflow:hidden;
  /* feathered edges so cards melt into the section, not a hard cut */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* the moving track: a flex row wide enough to hold its (duplicated) groups */
.rev__track{
  display:flex;
  width:max-content;
  will-change:transform;
}
/* each set of cards (the live one + its JS clone) */
.rev__group{
  display:flex;
  gap:clamp(16px,1.8vw,24px);
  padding:14px clamp(8px,1vw,12px) 22px;   /* room for card shadow + hover lift */
}

/* OPPOSITE directions: row A drifts left, row B drifts right.
   Each track holds exactly TWO identical groups, so translating one full
   group width (-50% of the track) lands perfectly on the duplicate =>
   seamless, never-ending loop. (js/main.js injects the 2nd group.) */
.rev__row--a .rev__track{ animation:rev-marquee-a var(--rev-dur-a) linear infinite; }
.rev__row--b .rev__track{ animation:rev-marquee-b var(--rev-dur-b) linear infinite; }

@keyframes rev-marquee-a{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@keyframes rev-marquee-b{
  from{ transform:translate3d(-50%,0,0); }
  to  { transform:translate3d(0,0,0); }
}

/* PAUSE ON HOVER (and when a card inside is focused, for keyboard users) */
.rev__row:hover .rev__track,
.rev__row:focus-within .rev__track{ animation-play-state:paused; }

/* ---------------- TESTIMONIAL CARD ---------------- */
.rev-card{
  flex:0 0 auto;
  width:clamp(290px,30vw,372px);
  display:flex;
  flex-direction:column;
  gap:14px;
  --rev-pad:clamp(20px,2vw,26px);
  padding:var(--rev-pad);
  border-radius:18px;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--card-line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 40px -26px rgba(13,15,12,.35),
    0 4px 12px -8px rgba(13,15,12,.18);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.rev-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-soft);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 28px 54px -28px rgba(13,15,12,.42),
    0 8px 18px -10px rgba(201,162,75,.28);
}

.rev-card__head{ display:flex; align-items:center; gap:14px; }

/* MONOGRAM avatar — gold (default) / teal circle with initials, no photos */
.rev-card__avatar{
  flex:0 0 auto;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  font-family:var(--font-display);
  font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(13,15,12,.04) inset, 0 8px 18px -10px rgba(13,15,12,.4);
}
.rev-card__avatar--gold{
  color:var(--ink);
  background:radial-gradient(120% 120% at 30% 20%, var(--gold-soft), var(--gold) 72%);
  text-shadow:0 1px 1px rgba(255,255,255,.35);
}
.rev-card__avatar--teal{
  color:var(--white);
  background:radial-gradient(120% 120% at 30% 20%, var(--brand-teal), var(--brand-teal-dk) 78%);
}

.rev-card__id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.rev-card__name{
  font-family:var(--font-display);
  font-weight:700; font-size:1.04rem;
  letter-spacing:-.01em; color:var(--ink);
  line-height:1.2;
}

/* 5-star rating — filled gold stars + the number */
.rev-card__stars{ display:inline-flex; align-items:center; gap:7px; line-height:1; }
.rev-card__starfill{
  color:var(--gold);
  font-size:.92rem; line-height:1; letter-spacing:1px;
}
.rev-card__stars b{
  font-family:var(--font-ui);
  font-weight:700; font-size:.82rem;
  color:var(--card-label);
}

.rev-card__text{
  font-family:var(--font-ui);
  font-size:.98rem; line-height:1.62;
  color:#3a4350;
}

.rev-card__meta{
  display:flex; align-items:center;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--card-line);
  font-family:var(--font-ui);
  font-size:.82rem;
  color:var(--card-value);
}
.rev-card__meta i{ font-style:normal; margin:0 6px; color:var(--gold); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:880px){
  .rev__rows{ --rev-dur-a:46s; --rev-dur-b:54s; }   /* a touch quicker on smaller tracks */
}
@media (max-width:620px){
  /* single row on mobile: hide the 2nd row, keep one continuous marquee */
  .rev__row--b{ display:none; }
  .rev__rows{ --rev-dur-a:40s; }
  .rev-card{ width:78vw; max-width:340px; }
  .rev__row{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
}

/* ---------------- REDUCED MOTION ---------------- */
/* stop the marquee and present the cards as a static, horizontally
   scrollable (swipeable) strip — readable, no auto-movement. */
@media (prefers-reduced-motion:reduce){
  .rev__row{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    -webkit-mask-image:none; mask-image:none;
  }
  .rev__track{ animation:none !important; width:max-content; }
  .rev-card{ scroll-snap-align:start; transition:none; }
  .rev-card:hover{ transform:none; }
}

/* =====================================================================
   WHY CHOOSE Fetraco  (.wcu*)  — refined deep-teal value + stats section
   Sits between Signature (dark) and Reviews (light); preserves the site's
   dark -> light cadence (Reviews is explicitly styled to follow a dark Why).
   Uses :root tokens only; never redefines them. Namespaced .wcu* to avoid
   the old, now-dead .why* rules. Append below the .why block in styles.css.
   ===================================================================== */
.wcu{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--white);
  padding:clamp(74px,11vh,150px) clamp(20px,4vw,40px) clamp(84px,12vh,164px);
  /* sophisticated deep teal -> ink field (not black, not neon) that bridges
     the ink-teal Signature above */
  background:
    radial-gradient(120% 82% at 84% -8%, rgba(36,169,202,.16), transparent 54%),
    radial-gradient(120% 86% at 8% 6%, rgba(14,93,124,.46), transparent 58%),
    radial-gradient(100% 80% at 50% 116%, rgba(10,72,97,.55), transparent 62%),
    radial-gradient(86% 70% at 50% 46%, rgba(201,162,75,.08), transparent 72%),
    linear-gradient(180deg, #0a3a4d 0%, #0b3140 42%, #08242f 100%);
}
/* hairline gold rule along the top to seat it against Signature (site motif) */
.wcu::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.6) 22%, rgba(201,162,75,.6) 78%, transparent);
  opacity:.9;
}
/* faint aurora wash, decorative (echoes the Signature ::after) */
.wcu::after{
  content:""; position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 30% at 82% 20%, rgba(36,169,202,.18), transparent 70%),
    radial-gradient(42% 32% at 14% 80%, rgba(201,162,75,.13), transparent 72%);
  filter:blur(8px);
  opacity:.9;
}

/* ---- warm Kerala photo accent: low-right, soft, fades into the teal ---- */
.wcu__accent{
  position:absolute; right:0; bottom:0; z-index:0;
  width:min(58%,720px); height:min(58%,520px);
  pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%, #000 18%, transparent 70%);
          mask-image:radial-gradient(120% 120% at 100% 100%, #000 18%, transparent 70%);
}
.wcu__accent img{
  width:100%; height:100%; object-fit:cover;
  opacity:.16;
  filter:saturate(1.05) brightness(.92);
  mix-blend-mode:luminosity;
}

.wcu__inner{
  position:relative; z-index:2;
  width:min(1240px,100%); margin:0 auto;
}

/* ---------------- HEADING ---------------- */
.wcu__head{
  text-align:center;
  max-width:720px; margin:0 auto clamp(40px,6vh,62px);
}
.wcu__eyebrow{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(.95rem,1.7vw,1.2rem);
  letter-spacing:.04em; color:var(--gold-soft);
  margin-bottom:clamp(12px,2vw,18px);
}
.wcu__eyebrow em{ font-style:italic; }
.wcu__title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(2rem,5.4vw,3.5rem);
  color:var(--white);
  text-wrap:balance;
  text-shadow:0 6px 36px rgba(0,0,0,.4);
}
/* slim gold accent line under the heading (site-wide motif) */
.wcu__title::after{
  content:""; display:block; width:64px; height:3px; margin:18px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  box-shadow:0 0 16px -1px rgba(201,162,75,.6);
}
.wcu__sub{
  margin-top:18px;
  font-family:var(--font-ui);
  font-size:clamp(.96rem,1.5vw,1.1rem);
  line-height:1.6;
  color:rgba(255,255,255,.76);
}

/* ---- heading scroll-reveal ---- */
.wcu__eyebrow,
.wcu__title,
.wcu__sub{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.wcu.is-in .wcu__eyebrow{ opacity:1; transform:none; transition-delay:60ms; }
.wcu.is-in .wcu__title{ opacity:1; transform:none; transition-delay:160ms; }
.wcu.is-in .wcu__sub{ opacity:1; transform:none; transition-delay:280ms; }

/* ---------------- REASON CARDS (glass) ---------------- */
.wcu__reasons{
  list-style:none; margin:0 0 clamp(40px,6vh,64px); padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px,1.8vw,24px);
  align-items:stretch;
}
.wcu-reason{ display:flex; }

/* scroll-reveal: rise + fade with per-card stagger (--i) */
.wcu-reason{
  opacity:0; transform:translateY(40px) scale(.99);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(.36s + var(--i) * .12s);
  will-change:transform, opacity;
}
.wcu.is-in .wcu-reason{ opacity:1; transform:none; }

.wcu-reason__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%;
  padding:clamp(22px,2.4vw,30px);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 50px -28px rgba(4,22,30,.7),
    inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
          backdrop-filter:blur(10px) saturate(1.1);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
/* thin gold top edge that grows + warms on hover */
.wcu-reason__inner::before{
  content:""; position:absolute; left:clamp(22px,2.4vw,30px); top:0;
  width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  opacity:.55; transition:width .4s var(--ease), opacity .4s var(--ease);
}
.wcu-reason__inner:hover,
.wcu-reason__inner:focus-within{
  transform:translateY(-5px);
  border-color:rgba(201,162,75,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow:
    0 32px 60px -26px rgba(4,22,30,.8),
    0 0 0 1px rgba(201,162,75,.18),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.wcu-reason__inner:hover::before,
.wcu-reason__inner:focus-within::before{ width:64px; opacity:1; }

.wcu-reason__icon{
  display:inline-grid; place-items:center;
  width:clamp(46px,5vw,54px); height:clamp(46px,5vw,54px);
  margin-bottom:clamp(14px,1.8vw,18px);
  border-radius:14px;
  color:var(--gold-soft);
  background:radial-gradient(120% 120% at 30% 20%, rgba(201,162,75,.22), rgba(36,169,202,.12));
  border:1px solid rgba(201,162,75,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.wcu-reason__inner:hover .wcu-reason__icon,
.wcu-reason__inner:focus-within .wcu-reason__icon{
  transform:translateY(-2px) rotate(-3deg);
  color:var(--gold);
  border-color:rgba(201,162,75,.55);
  background:radial-gradient(120% 120% at 30% 20%, rgba(230,197,133,.34), rgba(36,169,202,.16));
}
.wcu-reason__icon svg{ width:55%; height:55%; }

.wcu-reason__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  letter-spacing:-.01em; line-height:1.16;
  color:var(--white);
  margin-bottom:8px;
}
.wcu-reason__text{
  font-family:var(--font-ui);
  font-size:clamp(.88rem,1.2vw,.96rem);
  line-height:1.55;
  color:rgba(255,255,255,.72);
}

/* ---------------- STATS BAND (glass strip + count-up) ---------------- */
.wcu__stats{
  list-style:none; margin:0; padding:clamp(8px,1.4vw,16px) 0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(10px,1.6vw,22px);
  position:relative;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 24px 54px -30px rgba(4,22,30,.7),
    inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
          backdrop-filter:blur(8px) saturate(1.05);
}
.wcu-stat{
  position:relative;
  text-align:center;
  padding:clamp(18px,2.6vw,30px) clamp(12px,1.6vw,20px);
}
/* gold hairline dividers between stats */
.wcu-stat + .wcu-stat::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:54%;
  background:linear-gradient(180deg, transparent, rgba(201,162,75,.4), transparent);
}
/* stat reveal stagger */
.wcu-stat{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(.5s + var(--i) * .12s);
}
.wcu.is-in .wcu-stat{ opacity:1; transform:none; }

.wcu-stat__num{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,4.6vw,3.1rem);
  line-height:1;
  letter-spacing:-.02em;
  /* warm gold gradient numeral, on-brand */
  background:linear-gradient(150deg, var(--gold-soft) 0%, var(--gold) 58%, #b78a34 120%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
  font-variant-numeric:tabular-nums;
  text-shadow:0 6px 26px rgba(201,162,75,.18);
}
.wcu-stat__label{
  display:block;
  margin-top:10px;
  font-family:var(--font-ui);
  font-size:clamp(.72rem,1.2vw,.82rem);
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

/* =========================== RESPONSIVE =========================== */
@media (max-width:1024px){
  .wcu__reasons{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:680px){
  .wcu__stats{ grid-template-columns:repeat(2, 1fr); }
  /* drop the vertical rule on the 1st item of each row */
  .wcu-stat:nth-child(odd)::before{ display:none; }
  /* add a soft horizontal rule between stacked stat rows */
  .wcu-stat:nth-child(n+3)::after{
    content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,162,75,.32), transparent);
  }
}
@media (max-width:520px){
  .wcu{ padding:clamp(58px,9vh,108px) 18px clamp(64px,10vh,120px); }
  .wcu__reasons{ grid-template-columns:1fr; }
  .wcu__accent{ width:80%; height:46%; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  .wcu__eyebrow,
  .wcu__title,
  .wcu__sub,
  .wcu-reason,
  .wcu-stat{
    transition:opacity .4s linear;
    transform:none !important;
    transition-delay:0s !important;
  }
  .wcu-reason__inner{ transition:none; }
  .wcu-reason__inner:hover,
  .wcu-reason__inner:focus-within{ transform:none; }
  .wcu-reason__inner:hover .wcu-reason__icon,
  .wcu-reason__inner:focus-within .wcu-reason__icon{ transform:none; }
}


/* =====================================================================
   FOOTER + CONTACT  (#contact) — Fetraco premium dark field + gold
   Append at the END of css/styles.css. Uses existing :root tokens only
   (never redefines them). Every selector namespaced .ft*.
   Deep ink -> teal cinematic field with gold accents, matching .sig / .why.
   ===================================================================== */
.ft{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--white);
  font-family:var(--font-ui);
  padding:clamp(58px,9vh,110px) clamp(20px,4vw,40px) clamp(96px,12vh,120px); /* bottom leaves room for the floating Plan-with-us button */
  /* deep ink -> teal field so glass + gold pop (matches .why / .sig) */
  background:
    radial-gradient(120% 80% at 14% -8%, rgba(14,93,124,.40), transparent 56%),
    radial-gradient(110% 80% at 100% 8%, rgba(36,169,202,.16), transparent 60%),
    radial-gradient(90% 90% at 50% 120%, rgba(10,72,97,.50), transparent 62%),
    radial-gradient(80% 64% at 50% 50%, rgba(201,162,75,.05), transparent 72%),
    linear-gradient(180deg, #07151a 0%, #081417 48%, var(--ink) 100%);
}
/* hairline gold rule along the top — seats it against the light #reviews */
.ft::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.6) 22%, rgba(201,162,75,.6) 78%, transparent);
  opacity:.85;
}

/* ---------- decorative background: warm glow + Kerala silhouette ---------- */
.ft__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ft__glow{
  position:absolute; left:50%; top:-6%; width:min(900px,120%); height:64%;
  transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0%, rgba(201,162,75,.18), rgba(201,162,75,0) 70%);
  filter:blur(8px); opacity:.9;
}
.ft__motif{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%) rotate(8deg);
  height:128%; width:auto; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}
.ft__motif-fill{ fill:rgba(36,169,202,.05); }
.ft__motif-line{ fill:none; stroke:rgba(201,162,75,.16); stroke-width:2; }

.ft__inner{
  position:relative; z-index:1;
  width:min(1240px,100%); margin:0 auto;
}

/* shared eyebrow — Fraunces italic, gold (matches .why__eyebrow) */
.ft__eyebrow{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(.95rem,1.7vw,1.2rem);
  letter-spacing:.04em; color:var(--gold-soft);
  margin-bottom:clamp(10px,1.6vw,16px);
}

/* shared refined gold divider rule (site motif) */
.ft__rule{
  display:block; height:1px; margin:clamp(34px,5vh,52px) 0;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.32) 14%, rgba(201,162,75,.32) 86%, transparent);
}

/* =====================================================================
   CALL-TO-ACTION STRIP
   ===================================================================== */
.ft__cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,5vw,56px); flex-wrap:wrap;
}
.ft__cta-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,5.2vw,3.7rem); line-height:1.02;
  letter-spacing:-.025em; color:var(--cream);
  text-wrap:balance; text-shadow:0 8px 40px rgba(0,0,0,.4);
}
.ft__cta-title span{
  background:linear-gradient(92deg, var(--gold-soft), var(--gold) 55%, var(--brand-cyan) 130%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ft__cta-btn{
  position:relative; overflow:hidden; isolation:isolate; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:13px;
  padding:16px 34px; border-radius:999px;
  font-family:var(--font-ui);
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white);
  background:var(--brand-teal);
  box-shadow:0 16px 38px -14px rgba(14,93,124,.7), 0 0 0 1px rgba(230,197,133,.18) inset;
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.ft__cta-btn > *{ position:relative; z-index:1; }
.ft__cta-btn::before{ /* gold sheen sweep, like the hero / about buttons */
  content:""; position:absolute; top:0; left:0; z-index:0;
  width:55%; height:100%;
  transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(230,197,133,0) 20%, rgba(230,197,133,.5) 50%, rgba(230,197,133,0) 80%, transparent);
}
.ft.is-in .ft__cta-btn::before{ animation:ftCtaSheen 5.5s var(--ease) 2.4s infinite; }
@keyframes ftCtaSheen{
  0%{ transform:translateX(-180%) skewX(-18deg); }
  16%{ transform:translateX(280%) skewX(-18deg); }
  100%{ transform:translateX(280%) skewX(-18deg); }
}
.ft__cta-btn svg{ width:17px; height:17px; transition:transform .35s var(--ease); }
.ft__cta-btn:hover{
  background:var(--gold); color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 18px 44px -12px rgba(201,162,75,.62);
}
.ft__cta-btn:hover::before{ animation-play-state:paused; }
.ft__cta-btn:hover svg{ transform:translateX(5px); }
.ft__cta-btn:active{ transform:translateY(0); }

/* =====================================================================
   MAIN COLUMNS
   ===================================================================== */
.ft__top{
  display:grid; gap:clamp(34px,4vw,56px);
  grid-template-columns:1fr;
}
@media (min-width:600px){
  .ft__top{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:980px){
  .ft__top{ grid-template-columns:1.5fr 1fr 1fr 1.4fr; column-gap:clamp(28px,3.4vw,52px); }
}

/* ---------- BRAND ---------- */
.ft__logo{
  display:inline-flex; align-items:center; gap:13px;
  transition:opacity .3s var(--ease);
}
.ft__logo:hover{ opacity:.92; }
.ft__logo-chip{
  display:grid; place-items:center; flex:0 0 auto;
  padding:9px 14px; border-radius:12px;
  /* light glass chip so the dark-wordmark PNG stays legible on dark field */
  background:linear-gradient(180deg, var(--cream), #efe7da);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(230,197,133,.4) inset;
}
.ft__logo-chip img{ display:block; height:36px; width:auto; }
.ft__logo-text{ display:flex; flex-direction:column; line-height:1.05; }
.ft__logo-text b{
  font-family:var(--font-display); font-weight:800;
  font-size:1.18rem; letter-spacing:-.01em; color:var(--white);
}
.ft__logo-text small{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-soft); margin-top:3px;
}
.ft__blurb{
  margin:clamp(16px,2vw,20px) 0 clamp(18px,2.4vw,22px);
  max-width:34ch;
  font-size:.96rem; line-height:1.66;
  color:rgba(255,255,255,.72);
}

/* SOCIAL */
.ft__social{ display:flex; gap:12px; }
.ft__social-link{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  color:rgba(255,255,255,.84);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), color .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ft__social-link svg{ display:block; }
.ft__social-link:hover{
  color:var(--ink);
  background:radial-gradient(120% 120% at 30% 20%, var(--gold-soft), var(--gold) 72%);
  border-color:var(--gold-soft);
  transform:translateY(-3px);
  box-shadow:0 12px 26px -10px rgba(201,162,75,.6);
}

/* ---------- LINK COLUMNS ---------- */
.ft__coltitle{
  font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:clamp(16px,2vw,22px);
  position:relative; padding-bottom:12px;
}
.ft__coltitle::after{ /* slim gold accent line under each column title */
  content:""; position:absolute; left:0; bottom:0;
  width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), rgba(201,162,75,.2));
  box-shadow:0 0 12px -1px rgba(201,162,75,.5);
}
.ft__links{ display:flex; flex-direction:column; gap:12px; }
.ft__links a{
  display:inline-block; width:fit-content;
  font-size:.95rem; color:rgba(255,255,255,.74);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.ft__links a span{ /* gold underline slide on hover */
  position:relative; display:inline-block;
  background-image:linear-gradient(var(--gold-soft), var(--gold-soft));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size .35s var(--ease);
  padding-bottom:2px;
}
.ft__links a:hover{ color:var(--gold-soft); transform:translateX(3px); }
.ft__links a:hover span{ background-size:100% 1.5px; }

/* ---------- GET IN TOUCH ---------- */
.ft__contact{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(18px,2.4vw,22px); }
.ft__contact-item{
  display:flex; align-items:flex-start; gap:12px;
  font-size:.96rem; line-height:1.5; color:rgba(255,255,255,.78);
}
.ft__ic{
  display:grid; place-items:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:10px; margin-top:1px;
  color:var(--gold-soft);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(230,197,133,.22);
}
.ft__ic svg{ display:block; }
.ft__contact-val{ color:rgba(255,255,255,.78); }
.ft__contact-link{
  position:relative; width:fit-content;
  background-image:linear-gradient(var(--gold-soft), var(--gold-soft));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:color .3s var(--ease), background-size .35s var(--ease);
  padding-bottom:1px;
}
.ft__contact-link:hover{ color:var(--gold-soft); background-size:100% 1.5px; }

/* TRUST PILL — soft gold pill on the dark field */
.ft__trust{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  font-family:var(--font-ui); font-size:.84rem; font-weight:600;
  color:var(--gold-soft);
  background:rgba(201,162,75,.10);
  border:1px solid rgba(201,162,75,.32);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ft__trust-star{ color:var(--gold); font-size:1rem; line-height:1; }
.ft__trust-text strong{ color:var(--white); font-weight:700; }
.ft__trust-go{ color:var(--brand-cyan); flex:0 0 auto; transition:transform .3s var(--ease); }
.ft__trust:hover{
  background:rgba(201,162,75,.18); border-color:var(--gold);
  color:var(--white); transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(201,162,75,.5);
}
.ft__trust:hover .ft__trust-go{ transform:translate(2px,-2px); }

/* =====================================================================
   NEWSLETTER (glassy card)
   ===================================================================== */
.ft__news{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,56px); flex-wrap:wrap;
  padding:clamp(26px,3.6vw,40px) clamp(24px,3.4vw,44px);
  border-radius:22px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(36,169,202,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
}
.ft__news-eyebrow{
  font-family:var(--font-serif); font-style:italic;
  font-size:.96rem; letter-spacing:.04em; color:var(--gold-soft);
  margin-bottom:8px;
}
.ft__news-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.05;
  letter-spacing:-.01em; color:var(--white);
}
.ft__news-text{
  margin-top:10px; max-width:42ch;
  font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.7);
}
.ft__news-form{ flex:1 1 360px; min-width:0; max-width:480px; }
.ft__news-label{
  display:block; margin-bottom:10px;
  font-family:var(--font-ui); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.ft__news-row{
  display:flex; align-items:stretch; gap:8px;
  padding:7px; border-radius:999px;
  background:rgba(10,11,9,.40);
  border:1px solid rgba(255,255,255,.16);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ft__news-row:focus-within{
  border-color:rgba(201,162,75,.6);
  box-shadow:0 0 0 3px rgba(201,162,75,.18);
}
.ft__news-input{
  flex:1 1 auto; min-width:0;
  border:none; background:transparent; outline:none;
  padding:0 16px;
  font-family:var(--font-ui); font-size:1rem; color:var(--white);
}
.ft__news-input::placeholder{ color:rgba(255,255,255,.45); }
.ft__news-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:999px;
  font-family:var(--font-ui); font-size:.82rem; font-weight:700;
  letter-spacing:.1em; color:var(--ink);
  background:linear-gradient(120deg, var(--gold-soft), var(--gold));
  box-shadow:0 12px 28px -12px rgba(201,162,75,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.ft__news-btn svg{ transition:transform .3s var(--ease); }
.ft__news-btn:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 16px 34px -12px rgba(201,162,75,.85); }
.ft__news-btn:hover svg{ transform:translateX(4px); }
.ft__news-btn:active{ transform:translateY(0); }
.ft__news-note{
  min-height:1.2em; margin-top:12px;
  font-family:var(--font-serif); font-style:italic; font-size:.9rem;
  color:var(--gold-soft); opacity:0;
  transition:opacity .4s var(--ease);
}
.ft__news-note.is-show{ opacity:1; }

/* =====================================================================
   BOTTOM BAR
   ===================================================================== */
.ft__bottom{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px 28px;
}
.ft__copy{ font-size:.85rem; color:rgba(255,255,255,.6); }
.ft__copy i{ font-style:normal; color:var(--gold-soft); margin:0 5px; }
.ft__crafted{
  font-family:var(--font-serif); font-style:italic;
  font-size:.96rem; color:var(--gold-soft);
}
.ft__legal{ display:flex; align-items:center; gap:22px; font-size:.85rem; }
.ft__legal a{
  color:rgba(255,255,255,.62);
  transition:color .3s var(--ease);
}
.ft__legal a span{
  position:relative; display:inline-block;
  background-image:linear-gradient(var(--gold-soft), var(--gold-soft));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size .35s var(--ease);
  padding-bottom:2px;
}
.ft__legal a:hover{ color:var(--gold-soft); }
.ft__legal a:hover span{ background-size:100% 1.5px; }

/* =====================================================================
   BACK TO TOP
   ===================================================================== */
.ft__totop{
  position:absolute; z-index:4;
  right:clamp(20px,4vw,40px); bottom:clamp(20px,3vh,34px);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--gold-soft);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,162,75,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  transition:color .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ft__totop svg{ transition:transform .3s var(--ease); }
.ft__totop:hover{
  color:var(--ink); background:var(--gold); border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 18px 38px -14px rgba(201,162,75,.75);
}
.ft__totop:hover svg{ transform:translateY(-2px); }
.ft__totop:active{ transform:translateY(0); }

/* =====================================================================
   FOCUS-VISIBLE (consistent gold ring across the footer)
   ===================================================================== */
.ft a:focus-visible,
.ft button:focus-visible,
.ft__news-input:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:8px;
}

/* =====================================================================
   SCROLL REVEAL (fade / rise via .is-in, toggled by JS)
   ===================================================================== */
.ft__cta,
.ft__top > *,
.ft__news,
.ft__bottom{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.ft.is-in .ft__cta{ opacity:1; transform:none; transition-delay:60ms; }
.ft.is-in .ft__top > *{ opacity:1; transform:none; }
.ft.is-in .ft__top > *:nth-child(1){ transition-delay:160ms; }
.ft.is-in .ft__top > *:nth-child(2){ transition-delay:230ms; }
.ft.is-in .ft__top > *:nth-child(3){ transition-delay:300ms; }
.ft.is-in .ft__top > *:nth-child(4){ transition-delay:370ms; }
.ft.is-in .ft__news{ opacity:1; transform:none; transition-delay:440ms; }
.ft.is-in .ft__bottom{ opacity:1; transform:none; transition-delay:520ms; }

/* =====================================================================
   RESPONSIVE  (4 cols -> 2 -> 1)
   ===================================================================== */
@media (max-width:760px){
  .ft__cta{ flex-direction:column; align-items:flex-start; }
  .ft__cta-btn{ align-self:stretch; justify-content:center; }
  .ft__news{ flex-direction:column; align-items:stretch; }
  .ft__news-form{ max-width:none; }
}
@media (max-width:600px){
  .ft{ padding-bottom:clamp(80px,16vh,110px); } /* room above the floating back-to-top */
  .ft__motif{ opacity:.28; }
  .ft__bottom{ flex-direction:column; align-items:center; text-align:center; }
  .ft__legal{ justify-content:center; }
  .ft__news-row{ flex-direction:column; border-radius:18px; padding:8px; }
  .ft__news-input{ padding:12px 14px; }
  .ft__news-btn{ justify-content:center; }
  .ft__totop{ right:50%; transform:translateX(50%); }
  .ft__totop:hover{ transform:translateX(50%) translateY(-3px); }
}

/* =====================================================================
   REDUCED MOTION — keep it calm, no slide-in / no sheen
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ft__cta,
  .ft__top > *,
  .ft__news,
  .ft__bottom{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .ft__cta-btn::before{ animation:none !important; display:none; }
  .ft__links a:hover,
  .ft__social-link:hover,
  .ft__trust:hover,
  .ft__news-btn:hover,
  .ft__totop:hover,
  .ft__cta-btn:hover{ transform:none !important; }
  .ft__totop:hover{ transform:translateX(0) !important; }
}
@media (prefers-reduced-motion:reduce) and (max-width:600px){
  .ft__totop, .ft__totop:hover{ transform:translateX(50%) !important; }
}

/* Destinations — make the coverflow cards a bit bigger (user: "make bit bigger") */
@media (min-width:881px){
  .dest-card{ flex-basis:clamp(280px,30vw,440px); }
  .dest-card__inner{ max-height:min(60vh,575px); }
}

/* About map — NO floating (user request): the silhouette holds perfectly still so
   the centred figure never drifts. Instead the map comes alive with a slow
   "breathing" Ken-Burns push on the photo INSIDE the fixed Kerala shape, plus a
   gentle backlight pulse. Map only; respects reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .about.is-in .about__fill image{
    transform-box:fill-box; transform-origin:50% 60%; will-change:transform;
    animation:aboutKenBurns 22s ease-in-out 1.3s infinite;
  }
  .about.is-in .about__glow{
    will-change:opacity, transform;
    animation:aboutGlowPulse 7.5s ease-in-out infinite;
  }
}
@keyframes aboutKenBurns{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.065); }
}
@keyframes aboutGlowPulse{
  0%,100%{ opacity:.7;  transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.09); }
}


/* =====================================================================
   GALLERY — arc carousel (after Signature). Light premium section.
   Cards fan along a half-circle; centre rises upright, edges tilt + dip.
   The whole track scrolls continuously; per-card arc transform in JS.
   ===================================================================== */
.gal{
  position:relative; overflow:hidden; color:var(--ink);
  background:radial-gradient(120% 80% at 50% -10%, #ffffff, var(--cream) 78%);
  /* match the site-wide section rhythm (.sig / .wcu / .rev) so the vertical
     spacing stays even between every block */
  padding:clamp(72px,11vh,150px) 0 clamp(80px,12vh,160px);
}
.gal__head{ text-align:center; max-width:660px; margin:0 auto clamp(18px,3vh,32px); padding:0 24px; }
.gal__eyebrow{ font-family:var(--font-serif); font-style:italic; color:var(--gold); font-size:clamp(.95rem,1.6vw,1.18rem); letter-spacing:.02em; margin-bottom:14px; }
.gal__title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.04; }
.gal__title::after{ content:""; display:block; width:60px; height:3px; margin:16px auto 0; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); box-shadow:0 0 14px -2px rgba(201,162,75,.5); }
.gal__sub{ margin-top:16px; font-family:var(--font-ui); color:var(--card-value); font-size:clamp(.95rem,1.4vw,1.06rem); line-height:1.6; }

.gal__stage{ position:relative; height:clamp(420px,52vw,548px); overflow:hidden; }
.gal__track{ position:absolute; left:0; top:clamp(20px,3.4vh,40px); display:flex; gap:clamp(18px,2vw,32px); align-items:flex-start; will-change:transform; }
.gal-card{
  position:relative; flex:0 0 clamp(178px,17vw,238px); aspect-ratio:3 / 4;
  border-radius:20px; overflow:hidden;
  transform-origin:center center; will-change:transform,opacity;
  box-shadow:0 26px 52px -24px rgba(13,15,12,.55), 0 8px 18px -12px rgba(13,15,12,.45);
  background:var(--card-label); backface-visibility:hidden;
}
.gal-card img{ width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.gal-card__cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  display:flex; flex-direction:column; gap:1px; color:var(--white);
  background:linear-gradient(to top, rgba(8,9,7,.86), rgba(8,9,7,.25) 58%, transparent);
}
.gal-card__place{ font-family:var(--font-display); font-weight:700; font-size:clamp(.98rem,1.3vw,1.12rem); letter-spacing:-.01em; }
.gal-card__sub{ font-family:var(--font-ui); font-size:.74rem; color:var(--gold-soft); }

@media (prefers-reduced-motion:reduce){
  .gal__stage{ overflow-x:auto; }
  .gal__track{ position:static; transform:none !important; }
  .gal-card{ transform:none !important; opacity:1 !important; }
}

/* ===================================================================
   DESTINATIONS — premium bento grid (replaces the pinned scroll)
   =================================================================== */
.dest--grid{ height:auto; min-height:0; overflow:visible; position:relative;
  padding:clamp(58px,8vh,116px) 0 clamp(46px,7vh,96px);
  background:radial-gradient(120% 90% at 50% 0%, #ffffff, var(--cream,#f6f1e7) 80%); }
.dest--grid .dest__inner{ width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,48px); transform:none; }
.dest--grid .dest__head{ text-align:center; max-width:680px; margin:0 auto clamp(30px,5vh,54px); }
.dest__eyebrow{ font-family:var(--font-serif,serif); font-style:italic; color:var(--gold,#c9a24b); font-size:clamp(.95rem,1.6vw,1.18rem); letter-spacing:.02em; margin:0 0 12px; }
.dest--grid .dest__title{ font-family:var(--font-display,sans-serif); font-weight:800; letter-spacing:-.02em; color:var(--ink,#0d0f0c); font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.05; margin:0; }
.dest--grid .dest__sub{ margin:16px auto 0; max-width:60ch; font-family:var(--font-ui,sans-serif); color:var(--card-value,#5b5750); font-size:clamp(.96rem,1.4vw,1.07rem); line-height:1.6; }

.dgrid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(168px,18vw,232px); gap:clamp(12px,1.3vw,18px); }
.dgrid > :nth-child(1){ grid-column:span 2; grid-row:span 2; }
.dgrid > :nth-child(6){ grid-column:span 2; }

.dgrid .dcard{ position:relative; display:block; overflow:hidden; border-radius:20px; text-decoration:none; isolation:isolate;
  box-shadow:0 22px 50px -28px rgba(13,15,12,.6), 0 4px 12px -8px rgba(13,15,12,.4);
  transition:opacity .85s var(--anim-ease,cubic-bezier(.22,1,.36,1)), transform .55s var(--ease,ease), box-shadow .5s var(--ease,ease); }
.dgrid .dcard:hover{ transform:translateY(-7px); box-shadow:0 40px 72px -30px rgba(13,15,12,.72); }
.dcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease,ease); }
.dgrid .dcard:hover .dcard__img{ transform:scale(1.08); }
.dcard__grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(8,9,7,.88) 3%, rgba(8,9,7,.2) 52%, rgba(8,9,7,.04) 100%); transition:opacity .5s; }
.dcard::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 1.5px rgba(230,197,133,0); transition:box-shadow .45s; pointer-events:none; }
.dgrid .dcard:hover::after{ box-shadow:inset 0 0 0 1.5px rgba(230,197,133,.85); }
.dcard__badge{ position:absolute; top:13px; right:13px; z-index:3; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:rgba(13,15,12,.5); backdrop-filter:blur(6px); color:#fff; font-family:var(--font-ui,sans-serif); font-weight:700; font-size:.8rem; }
.dcard__badge svg{ width:13px; height:13px; fill:var(--gold-soft,#e6c585); }
.dcard__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(15px,1.5vw,22px); color:#fff; display:flex; flex-direction:column; gap:3px; }
.dcard__tag{ font-family:var(--font-ui,sans-serif); font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-soft,#e6c585); }
.dcard__name{ font-family:var(--font-display,sans-serif); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.15rem,1.6vw,1.42rem); line-height:1.05; }
.dgrid > :nth-child(1) .dcard__name{ font-size:clamp(1.8rem,3vw,2.7rem); }
.dgrid > :nth-child(1) .dcard__tag{ font-size:.78rem; }
.dcard__cta{ display:inline-flex; align-items:center; gap:7px; margin-top:7px; font-family:var(--font-ui,sans-serif); font-weight:700; font-size:.86rem; color:#fff; max-height:0; opacity:0; transform:translateY(6px); overflow:hidden; transition:max-height .4s var(--ease,ease), opacity .4s, transform .4s; }
.dcard__cta svg{ width:16px; height:16px; }
.dgrid .dcard:hover .dcard__cta, .dgrid .dcard:focus-visible .dcard__cta{ max-height:32px; opacity:1; transform:none; }
.dgrid > :nth-child(1) .dcard__cta{ max-height:32px; opacity:.92; transform:none; }

.dest--grid .dest__foot{ display:flex; justify-content:center; margin-top:clamp(32px,5vh,54px); }
.dest--grid .dest__viewall{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px; background:var(--teal,#0e5d7c); color:#fff; font-family:var(--font-ui,sans-serif); font-weight:700; font-size:.95rem; text-decoration:none; box-shadow:0 14px 30px -14px rgba(14,93,124,.7); transition:transform .25s, box-shadow .25s; }
.dest--grid .dest__viewall:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(14,93,124,.85); }
.dest--grid .dest__viewall svg{ width:18px; height:18px; transition:transform .3s; }
.dest--grid .dest__viewall:hover svg{ transform:translateX(4px); }

@media (max-width:980px){
  .dgrid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(170px,30vw,220px); }
  .dgrid > :nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .dgrid > :nth-child(1) .dcard__name{ font-size:clamp(1.5rem,5vw,2.1rem); }
  .dgrid > :nth-child(6){ grid-column:span 2; }
}
@media (max-width:560px){
  .dgrid{ grid-template-columns:1fr; grid-auto-rows:clamp(210px,62vw,300px); gap:14px; }
  .dgrid > .dcard{ grid-column:auto !important; grid-row:auto !important; }
  .dcard__cta{ max-height:32px; opacity:1; transform:none; }
}

/* ===================================================================
   FULLSCREEN MENU — editorial two-column premium redesign
   =================================================================== */
.menu{ position:fixed; inset:0; z-index:980; display:grid; grid-template-rows:minmax(0,1fr) auto; color:#f4efe6;
  background:radial-gradient(90% 70% at 80% 50%, rgba(20,50,42,.5), transparent 60%), linear-gradient(135deg,#0c100d 0%, #0a0d0b 60%, #080a08 100%);
  opacity:0; visibility:hidden; pointer-events:none; clip-path:inset(0 0 100% 0);
  transition:opacity .5s var(--ease,ease), clip-path .7s cubic-bezier(.76,0,.24,1), visibility .5s; }
.menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; clip-path:inset(0 0 0 0); }
.menu__glow{ position:absolute; right:-6%; top:46%; transform:translateY(-50%); width:44vw; height:70svh; border-radius:50%; background:radial-gradient(closest-side, rgba(230,197,133,.10), transparent 70%); pointer-events:none; }

.menu__close{ position:absolute; top:clamp(16px,3vw,30px); right:clamp(16px,3vw,38px); z-index:6; width:clamp(42px,5vw,50px); height:clamp(42px,5vw,50px); border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#f4efe6; cursor:pointer; display:grid; place-items:center; transition:transform .35s var(--ease,ease), background .3s, border-color .3s; }
.menu__close:hover{ transform:rotate(90deg); background:var(--gold,#c9a24b); color:#1a1407; border-color:transparent; }
.menu__close svg{ width:22px; height:22px; }

/* CONTENT ROW — bounded by minmax(0,1fr): centres when it fits, scrolls if ever starved, never bleeds onto the foot */
.menu__inner{ position:relative; z-index:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  width:100%; max-width:1180px; margin:0 auto; box-sizing:border-box;
  padding:clamp(40px,7svh,92px) clamp(24px,5vw,60px) clamp(20px,3svh,40px);
  display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,4.5vw,72px);
  align-content:safe center; align-items:center; }

.menu__nav{ min-height:0; }
.menu__eyebrow{ font-family:var(--font-serif,serif); font-style:italic; color:var(--gold-soft,#e6c585); font-size:clamp(.9rem,1.5svh,1.1rem); margin:0 0 clamp(10px,1.8svh,20px); letter-spacing:.02em; }

.menu__list{ list-style:none; margin:0; padding:0; }
.menu__list li{ border-top:1px solid rgba(230,197,133,.16); opacity:0; transform:translateY(16px); transition:border-color .3s var(--ease,ease); }
.menu__list li:last-child{ border-bottom:1px solid rgba(230,197,133,.16); }
.menu.is-open .menu__list li{ animation:menuItemIn .55s var(--ease,ease) forwards; animation-delay:calc(.16s + var(--mi,0) * .06s); }
@keyframes menuItemIn{ to{ opacity:1; transform:none; } }
.menu__list a{ display:flex; align-items:baseline; gap:clamp(13px,1.4vw,20px); padding:clamp(7px,1.2svh,13px) 0; text-decoration:none; color:#f4efe6; transition:color .35s var(--ease,ease), padding-left .4s var(--ease,ease); }
.menu__list a i{ font-style:normal; font-family:var(--font-ui,sans-serif); font-size:clamp(.64rem,.95svh,.76rem); font-weight:600; color:var(--gold,#c9a24b); letter-spacing:.14em; flex:0 0 auto; opacity:.85; transition:opacity .35s; }
.menu__list a span{ font-family:var(--font-display,sans-serif); font-weight:700; letter-spacing:-.02em; line-height:1.05; font-size:clamp(1.55rem, 2.9svh + 1.1vw, 2.85rem); }
.menu__list a svg{ width:clamp(20px,2vw,30px); height:auto; margin-left:auto; align-self:center; color:var(--gold,#c9a24b); opacity:0; transform:translateX(-12px); transition:opacity .35s var(--ease,ease), transform .4s var(--ease,ease); }
.menu__list a:hover, .menu__list a:focus-visible{ color:var(--gold-soft,#e6c585); padding-left:clamp(8px,1vw,16px); }
.menu__list a:hover svg, .menu__list a:focus-visible svg{ opacity:1; transform:none; }
.menu__list a:hover i, .menu__list a:focus-visible i{ opacity:1; }
.menu__list li:hover, .menu__list li:focus-within{ border-top-color:rgba(230,197,133,.5); }

.menu__aside{ display:flex; flex-direction:column; gap:clamp(14px,2.2svh,26px); min-height:0; }
.menu__preview{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; max-height:min(52svh,520px); background:#11201c center/cover no-repeat; background-image:url('../img/hero/munnar-tea.jpg'); box-shadow:0 40px 80px -34px rgba(0,0,0,.8), inset 0 0 0 1px rgba(230,197,133,.16); transition:background-image .35s ease; opacity:0; transform:scale(.97); }
.menu.is-open .menu__preview{ animation:menuPrevIn .85s var(--ease,ease) .35s forwards; }
@keyframes menuPrevIn{ to{ opacity:1; transform:none; } }
.menu__preview::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,7,.82), rgba(8,9,7,.04) 55%, transparent); }
.menu__preview-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:18px 20px; font-family:var(--font-serif,serif); font-style:italic; font-size:clamp(1.02rem,1.6svh,1.32rem); color:#fff; }
.menu__meta{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.menu__contact{ display:flex; flex-direction:column; gap:6px; }
.menu__contact a{ color:rgba(244,239,230,.78); text-decoration:none; font-size:.9rem; transition:color .25s; }
.menu__contact a:hover{ color:var(--gold-soft,#e6c585); }
.menu__social{ list-style:none; display:flex; gap:10px; margin:0; padding:0; }
.menu__social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:#f4efe6; transition:background .25s, color .25s, transform .25s; }
.menu__social a svg{ width:17px; height:17px; }
.menu__social a:hover{ background:var(--gold,#c9a24b); color:#1a1407; border-color:transparent; transform:translateY(-2px); }

/* FOOT — quiet baseline; its own grid row (cannot be overlapped) + z-index insurance */
.menu__foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; max-width:1180px; margin:0 auto; box-sizing:border-box; padding:clamp(13px,2.2svh,22px) clamp(24px,5vw,60px); border-top:1px solid rgba(230,197,133,.14); }
.menu .brand--menu{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.menu .brand--menu .brand__mark img{ width:36px; height:36px; object-fit:contain; }
.menu .brand--menu .brand__text b{ display:block; font-family:var(--font-display,sans-serif); font-weight:800; font-size:1.06rem; color:#fff; line-height:1; }
.menu .brand--menu .brand__text small{ font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft,#e6c585); }
.menu__cta{ display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:999px; background:linear-gradient(135deg,#ecd49b,#c9a24b); color:#1a1407; font-family:var(--font-ui,sans-serif); font-weight:700; font-size:.9rem; text-decoration:none; white-space:nowrap; box-shadow:0 14px 30px -14px rgba(201,162,75,.8); transition:transform .25s, box-shadow .25s; }
.menu__cta svg{ width:16px; height:16px; transition:transform .3s; }
.menu__cta:hover{ transform:translateY(-2px); box-shadow:0 20px 38px -14px rgba(201,162,75,.95); }
.menu__cta:hover svg{ transform:translateX(3px); }

@media (max-width:860px){
  .menu__inner{ grid-template-columns:1fr; gap:18px; }
  .menu__aside{ display:none; }
  .menu__list a span{ font-size:clamp(1.7rem, 5vw + 1svh, 2.5rem); }
}
@media (max-width:560px){ .menu__foot{ flex-direction:column; gap:12px; text-align:center; } }
@media (prefers-reduced-motion:reduce){ .menu,.menu__list li,.menu__preview{ animation:none !important; opacity:1; transform:none; } .menu:not(.is-open){ clip-path:inset(0 0 100% 0); } }

/* ===================================================================
   DESTINATIONS — luxury auto-slide carousel (replaces the bento grid)
   Reuses the .dcard* visuals; .dgrid rules above are now inert.
   =================================================================== */
.dest--rail{ height:auto; min-height:0; overflow:visible; position:relative;
  padding:clamp(58px,8vh,116px) 0 clamp(48px,7vh,96px);
  background:radial-gradient(120% 90% at 50% 0%, #ffffff, var(--cream,#f6f1e7) 80%); }
.dest--rail .dest__head{ text-align:center; max-width:680px; margin:0 auto clamp(30px,5vh,52px); padding:0 clamp(20px,4vw,48px); }

.dcar{ position:relative; width:100%;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.dcar::-webkit-scrollbar{ display:none; }
.dcar__track{ display:flex; gap:clamp(16px,1.7vw,26px); width:max-content; padding:14px clamp(16px,2vw,30px); }
.dcar__track .dcard{ scroll-snap-align:center; }

/* card base (un-scoped so it works inside the flex rail) */
.dcar__track .dcard{ position:relative; display:block; overflow:hidden; border-radius:22px; text-decoration:none; isolation:isolate;
  flex:0 0 auto; width:clamp(300px,30vw,430px); height:clamp(430px,46vw,590px);
  box-shadow:0 28px 58px -30px rgba(13,15,12,.64), 0 6px 16px -8px rgba(13,15,12,.42);
  transition:transform .55s var(--ease,ease), box-shadow .5s var(--ease,ease); }
.dcar__track .dcard:hover{ transform:translateY(-8px); box-shadow:0 46px 80px -32px rgba(13,15,12,.74); }
.dcar__track .dcard:hover .dcard__img{ transform:scale(1.07); }
.dcar__track .dcard:hover::after{ box-shadow:inset 0 0 0 1.5px rgba(230,197,133,.9); }
.dcar__track .dcard .dcard__name{ font-size:clamp(1.55rem,2vw,2.1rem); }
.dcar__track .dcard .dcard__tag{ font-size:.74rem; }
.dcar__track .dcard .dcard__cta{ max-height:32px; opacity:.95; transform:none; } /* always visible in the moving rail */
.dcar__track .dcard .dcard__body{ padding:clamp(18px,1.8vw,24px); }

.dest--rail .dest__foot{ display:flex; justify-content:center; margin-top:clamp(34px,5vh,56px); }

/* ---- PINNED horizontal scroll stage (desktop ≥881px, motion OK) ----
   js/main.js adds .is-pinning and sets the section height so the rail pans
   through every card before the page releases to the next section. Without
   the class (mobile / tablet / reduced-motion / no-JS) the rail is a plain
   native-scroll strip, so this whole block is opt-in and degrades safely. */
.dest__pin{ position:relative; }
.dest__progress{ display:none; }

.dest--rail.is-pinning{ padding:0; }
.dest--rail.is-pinning .dest__pin{
  position:sticky; top:0; height:100vh; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2vh,28px); overflow:hidden;
  padding:clamp(22px,4.5vh,64px) 0 clamp(16px,3vh,40px);
}
.dest--rail.is-pinning .dest__head{ margin:0; flex:0 0 auto; }
.dest--rail.is-pinning .dest__title{ font-size:clamp(1.55rem,3vw,2.5rem); line-height:1.06; }
.dest--rail.is-pinning .dest__title::after{ margin-top:12px; }
.dest--rail.is-pinning .dest__sub{
  margin-top:10px; font-size:clamp(.88rem,1.2vw,1rem); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.dest--rail.is-pinning .dcar{ overflow:hidden; scroll-snap-type:none; width:100%; flex:0 0 auto; }
.dest--rail.is-pinning .dcar__track{ will-change:transform; }
/* card height tracks the viewport but never grows past the room left after the
   head + progress + foot, so the card body (name/CTA) is never clipped */
.dest--rail.is-pinning .dcar__track .dcard{ height:min(clamp(300px,44vh,540px), calc(100vh - 330px)); }
.dest--rail.is-pinning .dest__progress{
  display:block; width:min(260px,46vw); height:3px; flex:0 0 auto;
  border-radius:999px; background:rgba(13,15,12,.12); overflow:hidden;
}
.dest--rail.is-pinning .dest__progress-bar{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--gold,#c9a24b), var(--gold-soft,#e6c585)); border-radius:inherit;
}
.dest--rail.is-pinning .dest__foot{ margin:0; flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){
  .dcar{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; scroll-snap-type:x proximity; }
  .dcar__track{ transform:none !important; }
  .dcar__track .dcard{ scroll-snap-align:start; }
}
@media (max-width:560px){
  .dcar__track .dcard{ width:82vw; height:clamp(420px,120vw,540px); }
}

/* ---- review card trip photo: full-bleed banner at the top of each card ---- */
.rev-card__photo{
  margin:calc(-1 * var(--rev-pad)) calc(-1 * var(--rev-pad)) 0;
  aspect-ratio:7 / 3;
  overflow:hidden;
  position:relative;
  background:#e9e2d4;
}
.rev-card__photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.rev-card:hover .rev-card__photo img{ transform:scale(1.06); }
.rev-card__photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(13,15,12,.20), transparent 42%);
}
@media (prefers-reduced-motion:reduce){
  .rev-card__photo img{ transition:none; }
  .rev-card:hover .rev-card__photo img{ transform:none; }
}

/* =====================================================================
   reviews: dual-source trust (Google + Tripadvisor), per-card source
   chips, "guest's own photo" tag, verified meta, real guest-photo strip
   ===================================================================== */
.rev__badges{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; align-items:center;
  margin-top:clamp(20px,3vw,28px);
}
.rev__badges .rev__badge{ margin-top:0; }
.rev__badge-owl{ display:grid; place-items:center; flex:0 0 auto; }
.rev__badge-owl svg{ display:block; }
.rev__badge--ta:hover{ border-color:#34e0a1; box-shadow:0 16px 32px -18px rgba(52,224,161,.55), 0 1px 0 rgba(255,255,255,.6) inset; }
.rev__badge--ta:focus-visible{ border-color:#34e0a1; box-shadow:0 0 0 3px rgba(52,224,161,.35), 0 16px 32px -18px rgba(52,224,161,.5); }

/* each card is a positioning context for its source chip + photo tag */
.rev-card{ position:relative; }

/* source chip — top-right roundel showing where the review came from */
.rev-card__src{
  position:absolute; top:12px; right:12px; z-index:4;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.95);
  box-shadow:0 6px 16px -6px rgba(13,15,12,.45), 0 0 0 1px rgba(13,15,12,.06) inset;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.rev-card__src svg{ width:17px; height:17px; display:block; }

/* "guest's own photo" tag over the photo banner */
.rev-card__shot{
  position:absolute; left:12px; bottom:11px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px; border-radius:999px;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600; letter-spacing:.01em;
  color:#fff; background:rgba(13,15,12,.55);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.rev-card__shot svg{ width:13px; height:13px; flex:0 0 auto; }

/* verified check before the trip line in each card's meta */
.rev-card__check{ width:14px; height:14px; color:#1c9e72; margin-right:7px; flex:0 0 auto; }

/* ---- real guest photo strip (pulled straight from the reviews) ---- */
.rev__shots{
  margin-top:clamp(30px,4.5vw,54px);
  padding:0 clamp(20px,4vw,40px); text-align:center;
}
.rev__shots-label{
  font-family:var(--font-serif); font-style:italic;
  color:var(--card-value); font-size:clamp(.95rem,1.5vw,1.08rem);
  margin:0 0 clamp(14px,2vw,20px);
}
.rev__shots-label b{ font-style:normal; font-weight:700; color:var(--ink); }
.rev__shots-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1vw,13px); width:min(1000px,100%); margin:0 auto;
}
.rev__shots-grid figure{
  margin:0; border-radius:14px; overflow:hidden; aspect-ratio:1/1; position:relative;
  box-shadow:0 14px 30px -20px rgba(13,15,12,.5), 0 0 0 1px rgba(13,15,12,.05);
}
.rev__shots-grid figure.is-wide{ grid-column:span 2; aspect-ratio:2/1; }
.rev__shots-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.rev__shots-grid figure:hover img{ transform:scale(1.07); }
@media (max-width:760px){
  .rev__shots-grid{ grid-template-columns:repeat(3,1fr); }
  .rev__shots-grid figure.is-wide{ grid-column:span 3; aspect-ratio:5/2; }
}
@media (prefers-reduced-motion:reduce){
  .rev__shots-grid img{ transition:none; }
}

/* ===== reviews: centre-focus, scroll-driven slider (no autoplay) =====
   The strip pans horizontally with page scroll (logic in index.html); the card
   nearest the centre gets .is-featured (enlarged + photo). Touch / reduced-motion
   fall back to a native swipeable, scroll-snapping strip. */
.rev__slider{
  position:relative; overflow:hidden;
  margin-top:clamp(30px,4.5vh,54px); padding:38px 0 30px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rev__strip{
  display:flex; align-items:center; gap:clamp(16px,1.8vw,26px);
  width:max-content; margin:0; list-style:none;
  padding-inline:calc(50% - min(186px,42vw));   /* lets the first/last card reach the centre */
  will-change:transform;
}
.rev__slider .rev-card{
  opacity:.4; transform:scale(.9);
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.rev__slider .rev-card:hover{ transform:scale(.9); }
.rev__slider .rev-card.is-featured{
  opacity:1; transform:scale(1.05); border-color:var(--gold-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 42px 84px -34px rgba(13,15,12,.55), 0 12px 26px -12px rgba(201,162,75,.34);
}
.rev__slider .rev-card.is-featured:hover{ transform:scale(1.05); }
.rev__hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:8px auto 0; font-family:var(--font-ui); font-size:.84rem; color:var(--card-value);
}
.rev__hint svg{ width:16px; height:16px; color:var(--gold); }
@media (max-width:760px), (prefers-reduced-motion:reduce){
  .rev__slider{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none; }
  .rev__strip{ transform:none !important; }
  .rev__slider .rev-card{ opacity:1; transform:none; scroll-snap-align:center; }
  .rev__slider .rev-card.is-featured{ transform:none; }
  .rev__hint{ display:none; }
}

/* =====================================================================
   reviews — simple · premium · professional card restyle.
   Photo banner shows ONLY on reviews with a guest photo; otherwise the
   card is a clean, plain quote card. Editorial serif quote is the hero.
   ===================================================================== */
.rev__slider .rev-card{
  --rev-pad:clamp(24px,2vw,30px);
  width:clamp(300px,33vw,394px);
  background:#fff;
  border:1px solid rgba(13,15,12,.08);
  border-radius:20px;
  box-shadow:0 30px 64px -44px rgba(13,15,12,.42), 0 2px 8px -5px rgba(13,15,12,.05);
  gap:16px;
  opacity:.5; transform:scale(.93);
  transition:opacity .55s var(--ease,ease), transform .55s var(--ease,ease), box-shadow .55s var(--ease,ease), border-color .55s var(--ease,ease);
}
.rev__slider .rev-card:hover{ transform:scale(.93); }
.rev__slider .rev-card.is-featured{
  opacity:1; transform:scale(1.04);
  border-color:rgba(201,162,75,.4);
  box-shadow:0 46px 90px -46px rgba(13,15,12,.5), 0 8px 22px -10px rgba(201,162,75,.26);
}
.rev__slider .rev-card.is-featured:hover{ transform:scale(1.04); }

/* clean photo banner (guest's own photo) */
.rev__slider .rev-card__photo{ aspect-ratio:16/10; margin:calc(-1*var(--rev-pad)) calc(-1*var(--rev-pad)) 4px; }
.rev__slider .rev-card__photo::after{ background:linear-gradient(to top, rgba(13,15,12,.14), transparent 46%); }
.rev__slider .rev-card__shot{ left:14px; bottom:12px; font-size:.7rem; background:rgba(13,15,12,.48); border-color:rgba(255,255,255,.18); }

/* small, quiet source mark, top-right */
.rev__slider .rev-card__src{ top:14px; right:14px; width:27px; height:27px; background:#fff; box-shadow:0 5px 14px -6px rgba(13,15,12,.4), 0 0 0 1px rgba(13,15,12,.05) inset; }
.rev__slider .rev-card__src svg{ width:15px; height:15px; }

/* reviewer line */
.rev__slider .rev-card__head{ gap:13px; align-items:center; }
.rev__slider .rev-card__avatar{ width:46px; height:46px; font-size:1rem; box-shadow:0 8px 18px -10px rgba(13,15,12,.4); }
.rev__slider .rev-card__name{ font-size:1.05rem; letter-spacing:-.01em; }
.rev__slider .rev-card__stars{ gap:6px; margin-top:2px; }
.rev__slider .rev-card__starfill{ font-size:.84rem; letter-spacing:2px; }
.rev__slider .rev-card__stars b{ font-size:.76rem; color:var(--card-value); }

/* the quote — editorial serif, the hero of the card */
.rev__slider .rev-card__text{
  font-family:var(--font-serif,'Fraunces',Georgia,serif);
  font-size:clamp(1rem,1.2vw,1.09rem); line-height:1.74; color:#33382f;
  margin:0;
}

/* meta — one quiet line; drop the green tick for a cleaner, professional feel */
.rev__slider .rev-card__meta{ padding-top:15px; border-top:1px solid rgba(13,15,12,.07); font-size:.8rem; color:var(--card-value); }
.rev__slider .rev-card__check{ display:none; }
.rev__slider .rev-card__meta i{ color:rgba(201,162,75,.75); }

/* =====================================================================
   testimonials — minimal, Apple-style carousel (one review at a time,
   centred, lots of whitespace; arrows + dots + swipe). Replaces the
   old .rev__slider markup; those rules above are now inert.
   ===================================================================== */
.atest{ position:relative; width:100%; max-width:780px; margin:clamp(34px,5vh,64px) auto 0; padding:0 clamp(0px,7vw,72px); }
.atest__stage{ position:relative; transition:height .55s var(--ease,ease); }
.atest__slide{ text-align:center; }
.atest.is-on .atest__slide{ position:absolute; left:0; right:0; top:0; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .55s var(--ease,ease), transform .55s var(--ease,ease); pointer-events:none; }
.atest.is-on .atest__slide.is-active{ position:relative; opacity:1; visibility:visible; transform:none; pointer-events:auto; }

.atest__photo{ width:clamp(92px,13vw,126px); height:clamp(92px,13vw,126px); object-fit:cover; border-radius:50%; display:block; margin:0 auto clamp(22px,2.5vw,30px); box-shadow:0 20px 44px -24px rgba(13,15,12,.55); }
.atest__stars{ color:var(--gold,#c9a24b); letter-spacing:5px; font-size:.98rem; line-height:1; margin-bottom:clamp(20px,2.4vw,28px); }
.atest__quote{
  margin:0 auto; max-width:22ch;
  font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-weight:500; letter-spacing:-.018em;
  font-size:clamp(1.42rem,3vw,2.05rem); line-height:1.36;
  color:var(--ink,#0d0f0c); text-wrap:balance;
}
.atest__by{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:clamp(26px,3vw,38px); }
.atest__avatar{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display,sans-serif); font-weight:700; font-size:.95rem; box-shadow:0 8px 18px -10px rgba(13,15,12,.4); }
.atest__avatar--gold{ color:#1a1407; background:radial-gradient(120% 120% at 30% 20%, var(--gold-soft,#e6c585), var(--gold,#c9a24b) 72%); }
.atest__avatar--teal{ color:#fff; background:radial-gradient(120% 120% at 30% 20%, var(--brand-teal,#1d9e75), var(--brand-teal-dk,#0f6e56) 78%); }
.atest__who{ text-align:left; display:flex; flex-direction:column; gap:2px; }
.atest__name{ font-family:var(--font-display,sans-serif); font-weight:700; font-size:1rem; letter-spacing:-.01em; color:var(--ink,#0d0f0c); }
.atest__role{ font-family:var(--font-ui,sans-serif); font-size:.82rem; color:var(--card-value,#5b5750); }

.atest__arr{ position:absolute; top:calc(50% - 22px); transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(13,15,12,.14); background:#fff; color:var(--ink,#0d0f0c); display:grid; place-items:center; cursor:pointer; transition:border-color .25s, color .25s, transform .25s, box-shadow .25s; box-shadow:0 12px 28px -18px rgba(13,15,12,.45); }
.atest__arr:hover{ border-color:var(--gold,#c9a24b); color:var(--gold-dark,#a9842f); transform:translateY(-50%) scale(1.07); }
.atest__arr:focus-visible{ outline:none; border-color:var(--gold,#c9a24b); box-shadow:0 0 0 3px rgba(201,162,75,.35); }
.atest__arr svg{ width:20px; height:20px; }
.atest__arr--prev{ left:0; } .atest__arr--next{ right:0; }

.atest__dots{ display:flex; gap:9px; justify-content:center; align-items:center; margin-top:clamp(28px,3.4vw,44px); }
.atest__dot{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(13,15,12,.16); cursor:pointer; transition:background .3s, width .3s; }
.atest__dot:hover{ background:rgba(13,15,12,.34); }
.atest__dot.is-active{ width:26px; border-radius:5px; background:var(--gold,#c9a24b); }

@media (max-width:620px){
  .atest{ padding:0 6px; }
  .atest__arr{ display:none; }
  .atest__quote{ max-width:26ch; }
}
@media (prefers-reduced-motion:reduce){
  .atest__stage{ transition:none; }
  .atest.is-on .atest__slide{ transition:opacity .2s ease; transform:none; }
}

/* =====================================================================
   testimonials — small premium cards, auto-sliding two-up (CSS marquee).
   Pauses on hover/focus; stops under reduced-motion. Guest photo shows as
   the round avatar only when they posted one.
   ===================================================================== */
.ctest{ width:100vw; max-width:100vw; margin:clamp(32px,4.5vh,58px) 0 0 calc(50% - 50vw); display:flex; flex-direction:column; gap:clamp(14px,1.9vw,22px); }
.ctest__row{ position:relative; overflow:hidden; }
.ctest__track{ display:flex; align-items:stretch; gap:20px; width:max-content; padding:14px 0; will-change:transform; }
.ctest__row--a .ctest__track{ animation:ctest-marq-a 80s linear infinite; }
.ctest__row--b .ctest__track{ animation:ctest-marq-b 92s linear infinite; }
.ctest__row:hover .ctest__track, .ctest__row:focus-within .ctest__track{ animation-play-state:paused; }
@keyframes ctest-marq-a{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes ctest-marq-b{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

.ctest__card{ flex:0 0 clamp(282px,42vw,384px); display:flex; flex-direction:column; gap:14px;
  padding:22px 24px; background:#fff; border:1px solid rgba(13,15,12,.08); border-radius:18px;
  box-shadow:0 26px 56px -40px rgba(13,15,12,.42), 0 2px 7px -5px rgba(13,15,12,.05); }
.ctest__top{ display:flex; align-items:center; justify-content:space-between; }
.ctest__stars{ color:var(--gold,#c9a24b); letter-spacing:2px; font-size:.9rem; line-height:1; }
.ctest__src{ display:grid; place-items:center; opacity:.92; }
.ctest__src svg{ display:block; }
.ctest__quote{ margin:0; font-family:var(--font-ui,Inter,sans-serif); font-size:.98rem; line-height:1.62; color:#3a3f36;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.ctest__by{ display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:15px; border-top:1px solid rgba(13,15,12,.07); }
.ctest__avatar{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display,sans-serif); font-weight:700; font-size:.86rem; box-shadow:0 6px 14px -8px rgba(13,15,12,.4); }
.ctest__avatar--img{ object-fit:cover; }
.ctest__avatar--gold{ color:#1a1407; background:radial-gradient(120% 120% at 30% 20%, var(--gold-soft,#e6c585), var(--gold,#c9a24b) 72%); }
.ctest__avatar--teal{ color:#fff; background:radial-gradient(120% 120% at 30% 20%, var(--brand-teal,#1d9e75), var(--brand-teal-dk,#0f6e56) 78%); }
.ctest__who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ctest__who b{ font-family:var(--font-display,sans-serif); font-weight:700; font-size:.95rem; letter-spacing:-.01em; color:var(--ink,#0d0f0c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctest__who span{ font-family:var(--font-ui,sans-serif); font-size:.78rem; color:var(--card-value,#5b5750); }
@media (max-width:560px){ .ctest__card{ flex-basis:80vw; } }
@media (prefers-reduced-motion:reduce){
  .ctest__row{ overflow-x:auto; }
  .ctest__track{ animation:none; }
}

/* ---- image-top + text premium cards (WHITE) inside the .ctest marquee ---- */
.ctest__track--cards{ align-items:stretch; gap:clamp(16px,1.8vw,24px); padding:18px 4px 22px; }
.qcard{ flex:0 0 clamp(238px,33vw,294px); height:clamp(330px,45vw,366px);
  display:flex; flex-direction:column; border-radius:24px; overflow:hidden;
  background:#fff; border:1px solid rgba(13,15,12,.08);
  box-shadow:0 34px 70px -44px rgba(13,15,12,.42), 0 2px 10px -6px rgba(13,15,12,.06); }
.qcard__img{ position:relative; flex:0 0 auto; height:clamp(134px,18vw,152px); overflow:hidden; background:#ece6da; }
.qcard__img img{ width:100%; height:100%; object-fit:cover; }
.qcard__body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:clamp(8px,1.1vw,11px); padding:clamp(15px,1.6vw,19px); }
.qcard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.qcard__name{ font-family:var(--font-display,sans-serif); font-weight:700; font-size:clamp(1rem,1.35vw,1.12rem); letter-spacing:-.01em; line-height:1.15; color:var(--ink,#0d0f0c); }
.qcard__src{ flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(13,15,12,.05); box-shadow:0 0 0 1px rgba(13,15,12,.05) inset; }
.qcard__src svg{ width:15px; height:15px; display:block; }
.qcard__text{ margin:0; flex:1; min-height:0; overflow:hidden; color:#454b41;
  font-family:var(--font-ui,Inter,sans-serif); font-size:clamp(.84rem,.98vw,.93rem); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; }
.qcard__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.qcard__tag{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; background:rgba(13,15,12,.06); color:#3f443b; font-family:var(--font-ui,sans-serif); font-size:.74rem; font-weight:600; white-space:nowrap; }
.qcard__tag--rate{ color:#1a1407; background:var(--gold-soft,#e6c585); }
.qcard__star{ width:13px; height:13px; fill:currentColor; flex:0 0 auto; }

/* text-only cards (no photo): content centred */
.qcard--text .qcard__body{ justify-content:center; text-align:center; gap:clamp(10px,1.4vw,14px); }
.qcard--text .qcard__head{ justify-content:center; }
.qcard--text .qcard__text{ -webkit-line-clamp:6; color:#34392f; font-size:clamp(.92rem,1.15vw,1.04rem); line-height:1.55; flex:0 0 auto; }
.qcard--text .qcard__tags{ justify-content:center; margin-top:0; }

@media (max-width:560px){ .qcard{ flex-basis:82vw; } }

/* ===== Footer — "Join our WhatsApp group" CTA (Kerala Destinations group) =====
   Used in both footers (homepage .ft + sub-page .pfoot). styles.css is loaded
   site-wide so one rule covers every page. */
.wa-group{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  padding:11px 18px; border-radius:999px;
  background:#25d366; color:#08291a; font-family:var(--font-ui,sans-serif);
  font-weight:700; font-size:.9rem; line-height:1; text-decoration:none;
  box-shadow:0 12px 26px -14px rgba(37,211,102,.75);
  transition:transform .25s var(--ease,ease), box-shadow .25s, filter .25s;
}
.wa-group svg{ width:18px; height:18px; flex:0 0 auto; }
.wa-group:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 18px 32px -14px rgba(37,211,102,.92); }
.wa-group:active{ transform:translateY(0); }
.wa-group:focus-visible{ outline:2px solid #25d366; outline-offset:3px; }

/* ===================================================================
   RECOGNITION / AWARD — Kerala Tourism Silver Homestay (HOME page only)
   Compact single-screen award: medallion + laurels + foil headline +
   credentials (left) | spotlit certificate (right). Namespaced .award*.
   =================================================================== */
.award{ position:relative; overflow:hidden; color:#fff;
  padding:clamp(54px,8vh,104px) 0;
  background:#070b10;
  background-image:
    radial-gradient(66% 58% at 50% -12%, rgba(230,197,133,.20), transparent 62%),
    radial-gradient(90% 120% at 50% 130%, rgba(14,93,124,.20), transparent 62%),
    linear-gradient(180deg,#0a1118,#070b10); }
.award::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(230,197,133,.55), transparent); }
.award::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(230,197,133,.28), transparent); }
.award__inner{ position:relative; z-index:2; width:100%; max-width:840px; margin:0 auto;
  padding:0 clamp(20px,5vw,56px); text-align:center;
  display:flex; flex-direction:column; align-items:center; }

/* centred gold sunburst medallion + approval seal — the medal floats free:
   no halo box behind it, and the circle is clipped on the STATIC wrapper so
   the rotating rim can never paint square corners on quirky GPUs */
.award__badge{ position:relative; margin:0 0 clamp(20px,2.8vh,28px); padding-bottom:20px; }
.award__medal{ position:relative; z-index:1; display:block; width:clamp(108px,10.6vw,134px); aspect-ratio:1; margin:0 auto;
  border-radius:50%; overflow:hidden; clip-path:circle(50% at 50% 50%);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(201,162,75,.30)); }
.award__medal-rim{ position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #a9781f 0 7.5deg, #f7e3a6 7.5deg 15deg);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18), inset 0 0 0 4px rgba(120,90,20,.42);
  animation:awSpin 60s linear infinite; }
.award__medal-disc{ position:absolute; inset:14%; border-radius:50%; z-index:1; color:#3a2b08;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; text-align:center;
  background:radial-gradient(64% 64% at 38% 26%, #fdf4d6, #e8c47e 56%, #c69a3f);
  box-shadow:inset 0 0 0 2px rgba(120,90,20,.45), inset 0 0 0 3px rgba(255,255,255,.32), inset 0 3px 7px rgba(255,255,255,.5); }
.award__medal-disc .s{ font-size:.82rem; line-height:1; color:#7a5a12; filter:drop-shadow(0 1px 0 rgba(255,255,255,.45)); }
.award__medal-disc b{ font-family:var(--font-display); font-weight:800; font-size:clamp(.96rem,1.35vw,1.2rem); margin-top:3px; }
.award__medal-disc i{ font-style:normal; font-weight:700; font-size:.44rem; letter-spacing:.26em; margin-top:4px; color:#6a4e13; text-indent:.26em; }
.award__seal{ position:absolute; z-index:3; left:50%; bottom:7px; transform:translateX(-50%); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.42em;
  font-family:var(--font-ui); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.56rem;
  color:#2c1f06; padding:5px 15px; border-radius:999px;
  background:linear-gradient(180deg,#fbe8b6 0%,#eccb7f 46%,#cda152 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 22px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(120,90,20,.4); }
.award__seal::before{ content:"\2713"; font-size:.68rem; font-weight:900; line-height:1; color:#6a4e13; }
@keyframes awSpin{ to{ transform:rotate(360deg); } }

.award__eyebrow{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 15px;
  font-family:var(--font-ui); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(.63rem,.95vw,.74rem); color:var(--gold-soft); }
/* gold rule + glowing diamond flourish either side of the eyebrow */
.award__orn{ position:relative; flex:0 0 auto; width:clamp(30px,4vw,54px); height:7px; }
.award__orn::before{ content:""; position:absolute; top:50%; left:0; right:9px; height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--gold,#c9a24b)); }
.award__orn::after{ content:""; position:absolute; top:50%; right:0; width:5px; height:5px; transform:translateY(-50%) rotate(45deg);
  background:var(--gold,#c9a24b); box-shadow:0 0 9px rgba(201,162,75,.6); }
.award__orn--r{ transform:scaleX(-1); }
.award__title{ margin:0 auto 15px; max-width:20ch; font-family:var(--font-display); font-weight:800;
  letter-spacing:-.02em; line-height:1.05; font-size:clamp(2rem,4.4vw,3.2rem); }
.award__title em{ font-style:normal;
  background:linear-gradient(180deg,#f6e2ac 0%,#e6c585 45%,#c9a24b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.award__sub{ margin:0 auto 30px; max-width:60ch; font-family:var(--font-ui);
  font-size:clamp(.98rem,1.3vw,1.09rem); line-height:1.66; color:rgba(255,255,255,.76); }
.award__sub strong{ color:#fff; font-weight:700; }

/* credentials — foil-edged cards in a single row */
.award__cred-list{ list-style:none; margin:0 0 26px; padding:0; width:100%; max-width:740px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.award__cred-list li{ display:flex; flex-direction:column; gap:7px; align-items:center; justify-content:center;
  padding:17px 12px; border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(230,197,133,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.award__cred-k{ font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; }
.award__cred-v{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; }
.award__note{ margin:0; font-size:.78rem; color:rgba(255,255,255,.5); }

@media (max-width:720px){
  .award__cred-list{ grid-template-columns:1fr 1fr; max-width:430px; }
}
@media (max-width:400px){
  .award__cred-list{ grid-template-columns:1fr; max-width:300px; }
}
@media (prefers-reduced-motion:reduce){
  .award__medal-rim{ animation:none; }
}

/* ===================================================================
   BOOKING-PLATFORM BUTTONS — The Riverside Bliss Stays
   Shared by stays.html + the home "Book" section. (Was inline on stays;
   centralised here so both pages use one source.)
   =================================================================== */
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(11px,1.3vw,16px); margin-top:clamp(24px,4vh,40px); }
.book-btn{ position:relative; display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:15px; background:#fff; border:1px solid var(--pg-line,rgba(13,15,12,.1)); box-shadow:0 16px 36px -28px rgba(0,0,0,.55); transition:transform .28s var(--ease,ease), box-shadow .28s, border-color .28s; overflow:hidden; }
.book-btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--brand,#c9a24b); opacity:0; transition:opacity .3s var(--ease,ease); pointer-events:none; }
.book-btn:hover{ transform:translateY(-4px); border-color:var(--brand,#c9a24b); box-shadow:0 26px 46px -26px rgba(0,0,0,.42); }
.book-btn:hover::before{ opacity:.055; }
.book-btn:focus-visible{ outline:2px solid var(--brand,#c9a24b); outline-offset:2px; }
.book-btn__dot{ position:relative; flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(13,15,12,.05); color:var(--brand,#c9a24b); transition:transform .28s var(--ease,ease), background .28s; }
.book-btn:hover .book-btn__dot{ transform:scale(1.08); background:color-mix(in srgb, var(--brand,#c9a24b) 14%, #fff); }
.book-btn__ic{ width:21px; height:21px; }
.book-btn__txt{ position:relative; display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.book-btn__txt small{ font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--card-value,#7a756c); font-weight:700; }
.book-btn__txt b{ font-family:var(--font-display,sans-serif); font-weight:700; font-size:1.02rem; color:var(--ink,#0d0f0c); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-btn__ext{ position:relative; flex:0 0 auto; width:17px; height:17px; margin-left:auto; color:var(--card-value,#9a948a); transition:transform .28s var(--ease,ease), color .28s; }
.book-btn:hover .book-btn__ext{ transform:translate(2px,-2px); color:var(--brand,#c9a24b); }
@media (max-width:600px){ .book-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:400px){ .book-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .book-btn,.book-btn__ext,.book-btn__dot{ transition:none; } .book-btn:hover{ transform:none; } .book-btn:hover .book-btn__dot{ transform:none; } }

/* home "Book The Riverside Bliss Stays" — DARK + GOLD band that continues the
   certificate/award block above. Gold-themed buttons scoped to .bookrb so the
   stays.html version keeps its white/brand-colour cards. */
.bookrb{ position:relative; color:#fff; padding:clamp(50px,7vh,102px) 0;
  background:#070b10;
  background-image:
    radial-gradient(95% 60% at 50% 118%, rgba(230,197,133,.10), transparent 62%),
    linear-gradient(180deg,#070b10 0%, #0a1118 100%); }
.bookrb__inner{ width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }
.bookrb__eyebrow{ font-family:var(--font-serif); font-style:italic; color:var(--gold-soft); font-size:clamp(1rem,1.6vw,1.2rem); margin:0 0 10px; }
.bookrb__title{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.06; color:#fff; font-size:clamp(1.9rem,4vw,3rem); margin:0; }
.bookrb__title::after{ content:""; display:block; width:62px; height:3px; margin:16px 0 0; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); box-shadow:0 0 16px -2px rgba(201,162,75,.6); }
.bookrb__lead{ margin:20px 0 0; max-width:60ch; font-family:var(--font-ui); font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.7; color:rgba(255,255,255,.72); }

/* gold buttons on dark (home only) */
.bookrb .book-btn{ background:rgba(255,255,255,.035); border-color:rgba(230,197,133,.26); box-shadow:0 18px 42px -28px rgba(0,0,0,.85); }
.bookrb .book-btn::before{ background:var(--gold,#c9a24b); }
.bookrb .book-btn:hover{ border-color:var(--gold,#c9a24b); box-shadow:0 28px 50px -26px rgba(0,0,0,.7); }
.bookrb .book-btn:hover::before{ opacity:.09; }
.bookrb .book-btn:focus-visible{ outline-color:var(--gold,#c9a24b); }
.bookrb .book-btn__dot{ background:rgba(230,197,133,.12); color:var(--gold-soft,#e6c585); }
.bookrb .book-btn:hover .book-btn__dot{ background:rgba(230,197,133,.22); color:var(--gold,#c9a24b); }
.bookrb .book-btn__txt small{ color:var(--gold-soft,#e6c585); }
.bookrb .book-btn__txt b{ color:#fff; }
.bookrb .book-btn__ext{ color:rgba(230,197,133,.55); }
.bookrb .book-btn:hover .book-btn__ext{ color:var(--gold,#c9a24b); }