/* =====================================================================
   KASHI EXPERTS - SITE STYLESHEET
   =====================================================================
   Every rule the public site uses, in one file, loaded once from
   Views/Shared/_Layout.cshtml. There is no build step: this file IS the
   source, so edit it directly.

   Order matters and is deliberate:

     1. BASE          variables, reset, layout, header, footer, hero,
                      buttons - everything shared by every page
     2. COMPONENTS    pieces that appear on more than one page
     3. PAGES         one block per page, each namespaced to its own
                      classes so nothing leaks sideways

   Adding a page? Append a new PAGE block at the end and namespace its
   classes (.xy__thing), the way the existing blocks do.
   ===================================================================== */



/* #####################################################################
   1. BASE - variables, reset, layout, header, footer, hero, buttons
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Home page stylesheet
   ===================================================================== */

:root{
  --orange:#f58220;
  --orange-2:#ff9f36;
  --orange-dark:#d96c0a;
  --navy:#13293f;
  --navy-2:#0d1e2f;
  --ink:#17202c;
  --body:#5d6773;
  --muted:#8b95a2;
  --cream:#fdf5eb;
  --cream-2:#fdf8f2;
  --line:#ececf0;

  --container:1280px;
  --radius:14px;
  --radius-lg:20px;

  --shadow-xs:0 2px 8px rgba(19,41,63,.05);
  --shadow-sm:0 6px 18px rgba(19,41,63,.07);
  --shadow-md:0 14px 34px rgba(19,41,63,.11);
  --shadow-lg:0 24px 55px rgba(19,41,63,.18);

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

  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --head:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --font:"Poppins","Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:hidden turns the root into a scroll container, which silently
   kills every position:sticky on the site. overflow-x:clip stops the same
   sideways scrolling without creating one - the hidden value stays first as
   the fallback for browsers that do not know clip. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.7;
  color:var(--body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{font-family:var(--head);color:var(--ink);margin:0;line-height:1.22;font-weight:800;letter-spacing:-.015em}
p{margin:0}
button{font-family:inherit;border:0;background:none;cursor:pointer}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.accent{color:var(--orange)}
.section{padding:74px 0}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f2f3f6}
::-webkit-scrollbar-thumb{background:#d3d7de;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--orange)}
::selection{background:var(--orange);color:#fff}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.01em;
  padding:13px 26px;border-radius:6px;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.btn i{font-size:13px;transition:transform .38s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}

.btn--primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(245,130,32,.28)}
.btn--primary:hover{box-shadow:0 14px 30px rgba(245,130,32,.4)}
.btn--primary:hover i{transform:translateX(4px)}

.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
.btn--ghost:hover{color:#fff;border-color:var(--orange)}

.btn--outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--outline:hover{color:#fff;border-color:var(--orange)}

/* WhatsApp enquire button */
.btn--wa{background:#25d366;color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.3)}
.btn--wa::before{background:linear-gradient(120deg,#3ae37a,#1fb955)}
.btn--wa:hover{color:#fff;box-shadow:0 14px 30px rgba(37,211,102,.42)}
.btn--wa i{font-size:16px}

/* makes a whole card clickable while leaving room for real links on top */
.stretch-link{position:absolute;inset:0;z-index:4;border-radius:inherit}
.stretch-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.btn--lg{padding:15px 30px;font-size:15px}
.btn--sm{padding:10px 20px;font-size:13px}

.view-all{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink);
  transition:color .3s var(--ease);
}
.view-all i{color:var(--orange);transition:transform .4s var(--ease)}
.view-all:hover{color:var(--orange)}
.view-all:hover i{transform:translateX(6px)}
.view-all--light{color:#fff}
.view-all--light:hover{color:var(--orange-2)}

/* =====================================================================
   Section heading
   ===================================================================== */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(25px,2.5vw,34px)}
.eyebrow{
  display:block;font-family:var(--head);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;
}

/* =====================================================================
   Top bar + Header
   ===================================================================== */
.topbar{
  position:relative;font-size:12.5px;
  background:linear-gradient(90deg,#0e2334 0%,#17415f 50%,#0e2334 100%);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 50%,var(--orange) 100%);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:44px;padding-bottom:2px}
.topbar__left{display:flex;align-items:center;gap:30px}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-weight:500;transition:color .3s var(--ease)}
.topbar a i{color:var(--orange-2);font-size:13px}
.topbar a:hover{color:var(--orange-2)}

.topbar__social{display:flex;align-items:center;gap:6px}
.topbar__social a{
  width:26px;height:26px;border-radius:50%;justify-content:center;gap:0;color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.26);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease);
}
.topbar__social a i{color:#fff;font-size:11.5px}
.topbar__social a:hover{
  color:#fff;transform:translateY(-2px) scale(1.1);
  filter:brightness(1.18);box-shadow:0 6px 14px rgba(0,0,0,.38);
}

.header{position:sticky;top:0;z-index:900;background:#fff;transition:box-shadow .35s var(--ease)}
.header.is-stuck{box-shadow:0 6px 24px rgba(19,41,63,.10)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:26px;height:70px;transition:height .35s var(--ease)}
.header.is-stuck .header__inner{height:64px}

/* logo */
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo__img{display:block;height:44px;width:auto;transition:height .35s var(--ease)}
.header.is-stuck .logo__img{height:38px}
.mobile-nav__head .logo__img{height:34px}
/* the logo artwork has a solid white background, so it sits on a white chip
   wherever the surface behind it is dark - and only as wide as the artwork */
.logo--light{
  display:inline-flex;width:-moz-fit-content;width:fit-content;
  background:#fff;padding:10px 14px;border-radius:12px;
}
.logo--light .logo__img{height:34px}
.logo__mark{width:30px;height:36px;flex-shrink:0}
.logo__text{display:flex;flex-direction:column;line-height:1}
.logo__row{display:flex;align-items:center;gap:7px;font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.01em}
.logo__k{color:var(--orange)}
.logo__div{width:1.5px;height:15px;background:#d7dbe1}
.logo__e{color:var(--ink)}
.logo__tag{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:5px;font-weight:500}
.logo--light .logo__e{color:#fff}
.logo--light .logo__tag{color:rgba(255,255,255,.55)}
.logo--light .logo__div{background:rgba(255,255,255,.3)}

/* nav */
.nav{display:flex;align-items:center;gap:28px}
.nav a{
  position:relative;font-family:var(--head);font-size:14px;font-weight:600;color:#3d4855;
  padding:6px 0;transition:color .3s var(--ease);white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:2.5px;border-radius:2px;
  background:var(--orange);transform:translateX(-50%);transition:width .38s var(--ease);
}
.nav a:hover{color:var(--orange)}
.nav a:hover::after{width:60%}
.nav a.active{color:var(--orange)}
.nav a.active::after{width:60%}

.header__cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-toggle{display:none;width:42px;height:42px;border-radius:8px;color:var(--ink);font-size:19px;align-items:center;justify-content:center;background:#f6f7f9}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(330px,86vw);background:#fff;z-index:1000;
  transform:translateX(102%);transition:transform .5s var(--ease);
  padding:26px 24px;display:flex;flex-direction:column;gap:4px;box-shadow:-18px 0 50px rgba(19,41,63,.16);
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mobile-nav__close{width:38px;height:38px;border-radius:8px;background:#f6f7f9;font-size:17px;color:var(--ink)}
.mobile-nav a.m-link{
  font-family:var(--head);font-weight:600;font-size:15px;color:#3d4855;
  padding:12px;border-radius:8px;transition:.3s var(--ease);
}
.mobile-nav a.m-link:hover,.mobile-nav a.m-link.active{background:#fff4e9;color:var(--orange);padding-left:18px}
.mobile-nav .btn{margin-top:16px}
.nav-backdrop{position:fixed;inset:0;background:rgba(13,30,47,.5);opacity:0;visibility:hidden;transition:.4s var(--ease);z-index:999;backdrop-filter:blur(2px)}
.nav-backdrop.open{opacity:1;visibility:visible}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;height:72vh;min-height:560px;max-height:720px;overflow:hidden;background:var(--navy-2)}
.hero__slider{position:absolute;inset:0;z-index:1}
.hero .swiper,.hero .swiper-wrapper,.hero .swiper-slide{height:100%}
.hero__slide{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.swiper-slide-active .hero__bg{animation:heroZoom 8s linear forwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* left-side panel only - the photo is untouched from 74% across, so the
       banner keeps the brightness and detail of the original image */
    linear-gradient(90deg,rgba(10,28,47,.82) 0%,rgba(10,28,47,.72) 28%,rgba(10,28,47,.46) 48%,rgba(10,28,47,.16) 62%,rgba(10,28,47,0) 74%);
}
.hero__inner{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.hero__copy{max-width:600px;color:#fff}
.hero__copy .eyebrow{color:var(--orange-2);margin-bottom:16px}
.hero__copy h1{
  color:#fff;font-size:clamp(34px,4.6vw,60px);line-height:1.06;letter-spacing:-.03em;
  margin-bottom:20px;
}
.hero__copy p{font-size:15.5px;color:rgba(255,255,255,.86);max-width:470px;margin-bottom:30px}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}

.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.35s var(--ease);
}
.hero__nav:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-50%) scale(1.08)}
.hero__nav--prev{left:22px}
.hero__nav--next{right:22px}

.hero__dots{position:absolute;left:0;right:0;bottom:22px;z-index:6;text-align:center;line-height:0}
.hero__dots .swiper-pagination-bullet{
  width:8px;height:8px;background:rgba(255,255,255,.55);opacity:1;margin:0 5px;transition:.35s var(--ease);
}
.hero__dots .swiper-pagination-bullet-active{background:var(--orange);width:24px;border-radius:5px}

/* =====================================================================
   About
   ===================================================================== */
.about{background:linear-gradient(180deg,#fffdfa 0%,#fdf7f0 100%);padding:76px 0}
.about__grid{display:grid;grid-template-columns:1fr 1.06fr;gap:70px;align-items:center}
.about h2{font-size:clamp(27px,3vw,38px);margin-bottom:18px}
.about h2>span{display:block}
.about h2>span .accent{display:inline}
.about__lead{font-size:14.5px;max-width:470px;margin-bottom:30px}

.about__feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.feat{text-align:center}
.feat__ico{
  width:42px;height:42px;margin:0 auto 10px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);font-size:21px;background:transparent;transition:.4s var(--ease);
}
.feat:hover .feat__ico{background:var(--orange);color:#fff;transform:translateY(-5px) rotate(-6deg);box-shadow:0 10px 22px rgba(245,130,32,.32)}
.feat h4{font-size:12.5px;font-weight:700;margin-bottom:4px;letter-spacing:0}
.feat p{font-size:11px;line-height:1.55;color:var(--muted)}

.about__media{position:relative}
.about__img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.about__img img{width:100%;height:430px;object-fit:cover;transition:transform 1.2s var(--ease)}
.about__media:hover .about__img img{transform:scale(1.06)}
.about__badge{
  position:absolute;left:-42px;top:52%;transform:translateY(-50%);
  background:#fff;border-radius:16px;padding:20px 22px;text-align:center;
  box-shadow:var(--shadow-lg);min-width:104px;
}
.about__badge b{display:block;font-family:var(--head);font-size:28px;font-weight:800;color:var(--orange);line-height:1}
.about__badge span{display:block;font-size:11px;color:var(--body);margin-top:6px;line-height:1.4;font-weight:500}

/* =====================================================================
   Hover-card kit
   zoom | gradient | floating icon | title lift | arrow | elevation | reveal
   ===================================================================== */
.hcard{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform;
}
.hcard:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg)}

.hcard__media{position:relative;overflow:hidden}
.hcard__media img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.15s var(--ease-out)}
.hcard:hover .hcard__media img{transform:scale(1.13)}

.hcard__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,0) 38%,rgba(9,20,32,.72) 100%);
  transition:opacity .55s var(--ease);
}
.hcard__grad::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(245,130,32,0) 18%,rgba(217,108,10,.55) 65%,rgba(184,86,4,.9) 100%);
  transition:opacity .55s var(--ease);
}
.hcard:hover .hcard__grad::after{opacity:1}

.hcard__float{
  position:absolute;top:14px;right:14px;z-index:4;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--orange);font-size:14px;
  opacity:0;transform:translateY(-16px) scale(.55) rotate(-25deg);
  box-shadow:0 8px 20px rgba(9,20,32,.24);
  transition:opacity .45s var(--ease) .05s,transform .55s cubic-bezier(.34,1.56,.64,1) .05s;
}
.hcard:hover .hcard__float{opacity:1;transform:translateY(0) scale(1) rotate(0);animation:floatY 2.6s ease-in-out .6s infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hcard__float--wa{z-index:7;color:#25d366}
.hcard__float--wa:hover{background:#25d366;color:#fff;animation:none;transform:translateY(0) scale(1.14)}

.hcard__reveal{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 16px 18px;
  color:#fff;transform:translateY(101%);opacity:0;
  transition:transform .55s var(--ease),opacity .4s var(--ease);
}
.hcard:hover .hcard__reveal{transform:translateY(0);opacity:1}
.hcard__reveal p{font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.92)}
.hcard__reveal .rv-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:#fff;
}
.hcard:hover .hcard__reveal .rv-link i{animation:arrowNudge 1.5s ease-in-out .7s infinite}
@keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* =====================================================================
   Destinations
   ===================================================================== */
.dest-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.dest-card{box-shadow:var(--shadow-xs);border:1px solid #f1f1f4}
.dest-card .hcard__media{aspect-ratio:4/5}
.dest-card__body{padding:13px 12px 15px;text-align:center;background:#fff;position:relative;z-index:2}
.dest-card__body h3{font-size:14px;font-weight:700;margin-bottom:3px;transition:transform .5s var(--ease),color .35s var(--ease)}
.dest-card:hover .dest-card__body h3{transform:translateY(-3px);color:var(--orange)}
.dest-card__body p{font-size:10.5px;line-height:1.5;color:var(--muted);transition:transform .5s var(--ease) .04s}
.dest-card:hover .dest-card__body p{transform:translateY(-2px)}
.dest-card__bar{
  position:absolute;left:50%;bottom:0;width:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--orange-2),var(--orange));
  transform:translateX(-50%);transition:width .5s var(--ease);
}
.dest-card:hover .dest-card__bar{width:60%}

/* =====================================================================
   Packages (dark band)
   ===================================================================== */
.packages{position:relative;background:#141210;overflow:hidden;padding:66px 0 72px}
.packages__bg{position:absolute;inset:0;opacity:.16;object-fit:cover;width:100%;height:100%}
.packages::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,13,11,.92),rgba(16,13,11,.86))}
.packages .container{position:relative;z-index:2}
.packages h2{color:#fff;font-size:clamp(25px,2.5vw,34px)}

.pkg-wrap{position:relative}
.pkg-swiper{padding-bottom:4px}
.pkg-swiper .swiper-slide{height:auto}
.pkg-card{
  background:#1c1916;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
  overflow:hidden;height:100%;display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.pkg-card:hover{transform:translateY(-9px);border-color:rgba(245,130,32,.85);box-shadow:0 26px 50px rgba(0,0,0,.5)}
.pkg-card .hcard__media{aspect-ratio:16/10}
.pkg-card__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.pkg-card__body h3{color:#fff;font-size:15px;font-weight:700;transition:transform .5s var(--ease),color .35s var(--ease)}
.pkg-card:hover .pkg-card__body h3{transform:translateY(-2px);color:var(--orange-2)}
.pkg-card__dur{font-size:11.5px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:7px}
.pkg-card__dur i{color:var(--orange);font-size:11px}
.pkg-card__foot{
  margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.pkg-card__price{font-size:11.5px;color:rgba(255,255,255,.5)}
.pkg-card__price b{font-family:var(--head);font-size:16px;font-weight:800;color:#fff;margin-right:2px}
.pkg-card__price span{color:var(--orange)}
.pkg-card__more{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--head);
  font-size:11.5px;font-weight:700;color:var(--orange);white-space:nowrap;
}
.pkg-card__more i{transition:transform .4s var(--ease)}
.pkg-card:hover .pkg-card__more i{transform:translateX(5px)}

.pkg-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:12.5px;
  transition:.35s var(--ease);
}
.pkg-nav:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-50%) scale(1.1)}
.pkg-nav--prev{left:-19px}
.pkg-nav--next{right:-19px}
.pkg-nav.swiper-button-disabled{opacity:.32;pointer-events:none}

/* =====================================================================
   Services strip
   ===================================================================== */
.strip{background:var(--cream);padding:34px 0}
.strip__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.strip__item{
  background:#fff;border-radius:11px;padding:15px 16px;display:flex;align-items:center;gap:13px;
  box-shadow:var(--shadow-xs);transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.strip__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.strip__ico{
  width:36px;height:36px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--orange);font-size:17px;background:rgba(245,130,32,.09);transition:.45s var(--ease);
}
.strip__item:hover .strip__ico{background:var(--orange);color:#fff;transform:rotate(-8deg) scale(1.06)}
.strip__item h4{font-size:12.5px;font-weight:700;margin-bottom:2px}
.strip__item p{font-size:10.5px;line-height:1.5;color:var(--muted)}

/* =====================================================================
   Why Choose Us
   ===================================================================== */
.why{position:relative;overflow:hidden;padding:54px 0;background:linear-gradient(180deg,#fffdf9 0%,#fdf5e9 100%)}
.why__grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(210px,266px) 1fr;gap:36px;align-items:center}

/* decorative line art */
.why__deco{position:absolute;color:#d9a76a;opacity:.3;pointer-events:none;z-index:1}
.why__deco--l{left:-26px;bottom:0;width:170px;height:auto}
.why__deco--r{right:-18px;bottom:0;width:250px;height:auto}
.why__birds{position:absolute;top:22px;right:132px;width:92px;color:#c99358;opacity:.42;z-index:2;pointer-events:none}

.why__intro h2{font-family:var(--display);font-size:clamp(25px,2.7vw,34px);line-height:1.24;letter-spacing:-.01em;margin-bottom:13px}
.why__intro p{font-size:13.5px;line-height:1.75;max-width:246px;margin-bottom:22px}

.why__items{display:grid;grid-template-columns:repeat(5,1fr)}
.why__item{
  position:relative;padding:6px 11px;text-align:center;
  border-left:1px solid rgba(197,157,101,.32);
}
.why__ico{
  display:block;width:46px;height:46px;margin:0 auto 14px;color:var(--orange);
  transition:transform .45s var(--ease),color .35s var(--ease);
}
.why__ico svg{width:100%;height:100%;display:block}
.why__item:hover .why__ico{transform:translateY(-7px) scale(1.07)}
.why__item h3{
  display:flex;align-items:center;justify-content:center;min-height:34px;
  font-size:13px;font-weight:700;margin-bottom:7px;transition:color .35s var(--ease);
}
.why__item:hover h3{color:var(--orange)}
.why__item p{font-size:11.5px;line-height:1.8;color:var(--body)}

/* outlined orange button */
.btn--line{background:#fff;color:var(--orange);border:1.5px solid var(--orange)}
.btn--line:hover{color:#fff;border-color:var(--orange)}

/* =====================================================================
   Soulful Journey band
   ===================================================================== */
.soulful{position:relative;overflow:hidden;background:#0f2537}
.soulful__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.soulful__tint{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,25,42,.68) 0%,rgba(8,25,42,.4) 34%,rgba(8,25,42,.16) 55%),
    linear-gradient(180deg,rgba(224,132,38,.2) 0%,rgba(158,74,12,.26) 100%);
}
.soulful__panel{
  position:absolute;top:0;bottom:0;right:0;left:calc(50% - 74px);
  background:linear-gradient(115deg,#17405e 0%,#0d2337 78%);
  clip-path:polygon(74px 0,100% 0,100% 100%,74px 100%,0 50%);
  box-shadow:-18px 0 44px rgba(6,18,30,.35);
}
.soulful__inner{
  position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:30px;min-height:326px;
}

.soulful__circles{display:flex;align-items:center;justify-content:center}
.sc{
  display:block;border-radius:50%;overflow:hidden;border:4px solid #fff;
  box-shadow:0 14px 34px rgba(6,18,30,.4);flex-shrink:0;
  transition:transform .5s var(--ease);
}
.sc img{width:100%;height:100%;object-fit:cover}
.sc--1{width:118px;height:118px}
.sc--2{width:152px;height:152px;margin:0 -20px;position:relative;z-index:2}
.sc--3{width:118px;height:118px}
.soulful__circles:hover .sc--2{transform:scale(1.05)}
.sc:hover{transform:translateY(-6px) scale(1.05);z-index:3}

.soulful__copy{padding-left:18px;color:#fff}
.soulful__copy h2{font-family:var(--display);color:#fff;font-size:clamp(23px,2.5vw,32px);margin-bottom:9px}
.soulful__copy p{color:rgba(255,255,255,.78);font-size:14px;margin-bottom:22px}
.soulful__btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.soulful__call{
  display:inline-flex;align-items:center;gap:13px;background:#fff;border-radius:8px;padding:9px 22px 10px;
  box-shadow:0 12px 26px rgba(6,18,30,.3);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.soulful__call i{color:var(--orange);font-size:18px}
.soulful__call small{display:block;font-size:10.5px;color:var(--muted);line-height:1.3;font-weight:500}
.soulful__call b{display:block;font-family:var(--head);font-size:17px;font-weight:800;color:var(--ink);line-height:1.25}
.soulful__call:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(6,18,30,.4)}
.soulful__call:hover b{color:var(--orange)}

/* =====================================================================
   Gallery
   ===================================================================== */
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gal-item{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/2.9;cursor:pointer;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.gal-item:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease-out)}
.gal-item:hover img{transform:scale(1.14)}
.gal-item__grad{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(9,20,32,.05) 0%,rgba(217,108,10,.42) 60%,rgba(184,86,4,.85) 100%);
  transition:opacity .5s var(--ease);
}
.gal-item:hover .gal-item__grad{opacity:1}
.gal-item__ico{
  position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;color:var(--orange);font-size:14px;
  opacity:0;transform:scale(.4) translateY(14px);
  transition:opacity .4s var(--ease),transform .55s cubic-bezier(.34,1.56,.64,1);
}
.gal-item:hover .gal-item__ico{opacity:1;transform:scale(1) translateY(0)}
.gal-item__cap{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;z-index:3;color:#fff;
  font-family:var(--head);font-size:12px;font-weight:700;
  transform:translateY(110%);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.gal-item:hover .gal-item__cap{transform:translateY(0);opacity:1}

/* =====================================================================
   Blogs
   ===================================================================== */
.blogs{background:linear-gradient(180deg,#fdf8f2,#fffdfb)}
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.blog-card{box-shadow:var(--shadow-xs);border:1px solid #f2f2f5}
.blog-card .hcard__media{aspect-ratio:16/10.4}
.blog-card__body{padding:15px 16px 18px;background:#fff;position:relative;z-index:2}
.blog-meta{display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--muted);margin-bottom:8px}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:#cfd4dc}
.blog-meta .cat{color:var(--orange);font-weight:600}
.blog-card__body h3{
  font-size:14.5px;font-weight:700;line-height:1.42;margin-bottom:12px;
  transition:transform .5s var(--ease),color .35s var(--ease);
}
.blog-card:hover .blog-card__body h3{transform:translateY(-3px);color:var(--orange)}
.blog-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--orange)}
.blog-more i{transition:transform .4s var(--ease)}
.blog-card:hover .blog-more i{transform:translateX(6px)}

/* =====================================================================
   CTA band
   ===================================================================== */
.cta{position:relative;overflow:hidden;padding:46px 0}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,22,36,.93),rgba(9,22,36,.78) 55%,rgba(9,22,36,.86))}
.cta .container{position:relative;z-index:3}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:clamp(21px,2.2vw,29px);margin-bottom:8px}
.cta p{color:rgba(255,255,255,.75);font-size:14px}
.cta__btns{display:flex;gap:14px;flex-wrap:wrap}
.cta .btn--ghost{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* =====================================================================
   Footer (rendered by js/footer.js)
   ===================================================================== */
.footer{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#16293c 0%,#0e1d2b 100%);
  color:rgba(255,255,255,.62);padding:58px 0 0;font-size:13px;
}
/* the same orange hairline that closes the top bar, mirrored up here */
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 50%,var(--orange) 100%);
}
/* a warm glow sitting behind the brand column */
.footer::after{
  content:"";position:absolute;left:-150px;top:-130px;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,32,.13),transparent 68%);
  pointer-events:none;
}
.footer .container{position:relative;z-index:2}

.footer__grid{display:grid;grid-template-columns:1.5fr 1.15fr 1.15fr 1.25fr;gap:40px;padding-bottom:44px}
.footer h4{
  position:relative;color:#fff;font-size:15px;font-weight:700;
  margin-bottom:22px;padding-bottom:12px;
}
.footer h4::after{
  content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
}
.footer__about p{font-size:12.5px;line-height:1.75;margin:18px 0 22px;max-width:270px}

.socials{display:flex;gap:10px}
.socials a{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;box-shadow:0 6px 16px rgba(0,0,0,.26);
  transition:transform .4s var(--ease),filter .4s var(--ease),box-shadow .4s var(--ease);
}
.socials a:hover{transform:translateY(-5px) scale(1.08);filter:brightness(1.12);box-shadow:0 12px 24px rgba(0,0,0,.34)}
.s-fb{background:#1877f2}
.s-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.s-wa{background:#25d366}
.s-yt{background:#ff0000}

.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.footer__cols a{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.62);
  padding:4px 0;transition:color .3s var(--ease),transform .35s var(--ease);
}
.footer__cols a i{
  flex:none;font-size:8.5px;color:rgba(245,130,32,.55);
  transition:color .3s var(--ease),transform .35s var(--ease);
}
.footer__cols a:hover{color:var(--orange-2);transform:translateX(5px)}
.footer__cols a:hover i{color:var(--orange-2);transform:translateX(2px)}

.footer__contact li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:12.5px;line-height:1.65}
.footer__contact i{
  flex:none;width:30px;height:30px;border-radius:9px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.12);color:var(--orange);font-size:12px;
  transition:background-color .35s var(--ease),color .3s var(--ease),transform .45s var(--ease);
}
.footer__contact li:hover i{background:var(--orange);color:#fff;transform:rotate(-8deg)}
.footer__contact a{color:rgba(255,255,255,.62);transition:color .3s var(--ease)}
.footer__contact a:hover{color:var(--orange-2)}

.footer__bottom-wrap{background:transparent}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);
  /* 24px matches the container gutter; the wider right side keeps the
     credit clear of the fixed call/WhatsApp buttons at the page bottom */
  padding:15px 92px 15px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 22px;flex-wrap:wrap;font-size:12px;
}
.footer__copy{flex:none}
.footer__bottom .links{display:flex;align-items:center;gap:14px}
.footer__bottom .links span{opacity:.35}
.footer__bottom a{transition:color .3s var(--ease)}
.footer__bottom a:hover{color:var(--orange-2)}

/* "Designed & Developed by Globaldigitaz.com" - right end of the bottom bar */
.footer__credit{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;color:rgba(255,255,255,.5);white-space:nowrap;
  transition:color .3s var(--ease);
}
.footer__credit i{font-size:10.5px;color:var(--orange);transition:transform .4s var(--ease)}
.footer__credit b{font-family:var(--head);font-weight:700;color:var(--orange-2);transition:color .3s var(--ease)}
.footer__credit-out{opacity:.6;font-size:9px!important}
.footer__credit:hover{color:rgba(255,255,255,.78)}
.footer__credit:hover b{color:#fff}
.footer__credit:hover .footer__credit-out{transform:translate(2px,-2px)}

/* floating action buttons - a stacked column with a slow outward glow */
.floaters{
  position:fixed;right:20px;bottom:22px;z-index:850;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.floaters a{
  position:relative;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:23px;
  transition:transform .4s var(--ease);
}
.floaters a:hover{transform:translateY(-4px) scale(1.08);animation-play-state:paused}

.f-wa{background:#25d366;animation:glowWa 2.6s ease-out infinite}
.f-call{background:linear-gradient(150deg,#17395a,#0d2337);animation:glowCall 2.6s ease-out infinite .9s}

@keyframes glowWa{
  0%  {box-shadow:0 8px 22px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.55)}
  70% {box-shadow:0 8px 22px rgba(37,211,102,.4),0 0 0 15px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 22px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,0)}
}
@keyframes glowCall{
  0%  {box-shadow:0 8px 22px rgba(9,24,40,.45),0 0 0 0 rgba(38,88,132,.6)}
  70% {box-shadow:0 8px 22px rgba(9,24,40,.45),0 0 0 15px rgba(38,88,132,0)}
  100%{box-shadow:0 8px 22px rgba(9,24,40,.45),0 0 0 0 rgba(38,88,132,0)}
}

.to-top{
  position:fixed;right:20px;bottom:154px;z-index:849;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.4s var(--ease);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--orange)}

/* keep content visible if AOS never loads */
.no-aos [data-aos]{opacity:1!important;transform:none!important}

/* =====================================================================
   Inner pages - hero banner, breadcrumb, centred section heading
   ===================================================================== */
/* centred section heading variant */
.sec-head--center{justify-content:center;text-align:center;margin-bottom:44px}
.sec-head--center h2{font-family:var(--display);font-size:clamp(25px,2.8vw,36px);line-height:1.26}

/* =====================================================================
   Page hero
   ===================================================================== */
.phero{position:relative;overflow:hidden;background:var(--navy-2);padding:74px 0 78px}
.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.phero__scrim{
  position:absolute;inset:0;
  background:
    /* left-side panel only - the photo is untouched from 74% across, so the
       banner keeps the brightness and detail of the original image */
    linear-gradient(90deg,rgba(10,28,47,.82) 0%,rgba(10,28,47,.72) 28%,rgba(10,28,47,.46) 48%,rgba(10,28,47,.16) 62%,rgba(10,28,47,0) 74%);
}
.phero__inner{position:relative;z-index:4;text-align:left;color:#fff}
/* the copy is capped so it stays inside the dark left band of the scrim,
   which is what carries the text now that the drop shadow is gone */
.phero__inner > *{max-width:660px}
.phero__inner .eyebrow{color:var(--orange-2)}
.phero h1{
  font-family:var(--display);color:#fff;font-size:clamp(32px,4.4vw,54px);line-height:1.1;
  margin-bottom:16px;
}
.phero p{
  max-width:610px;margin:0 0 22px;font-size:15px;color:rgba(255,255,255,.82);
}
.crumbs{
  display:inline-flex;align-items:center;gap:11px;font-size:12.5px;
  color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:7px 18px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.crumbs a{color:rgba(255,255,255,.86);transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--orange-2)}
.crumbs i{font-size:8px;color:var(--orange-2)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1200px){
  .dest-grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
  .pkg-nav--prev{left:-8px}
  .pkg-nav--next{right:-8px}
}
@media (max-width:1200px){
  .why__item{padding:6px 12px}
}
@media (max-width:1080px){
  .why__grid{grid-template-columns:1fr;gap:30px}
  .why__intro{text-align:center}
  .why__intro p{max-width:none;margin-left:auto;margin-right:auto}
  .why__item:first-child{border-left:0}
  .nav{display:none}
  .nav-toggle{display:flex}
  .strip__grid{grid-template-columns:repeat(3,1fr)}
  .about__grid{gap:46px}
}
@media (max-width:900px){
  .phero{padding:56px 0 62px}
  .why__birds{display:none}
  .why__items{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .why__item{border-left:1px solid rgba(197,157,101,.32)}
  .why__item:nth-child(3n+1){border-left:0}

  .soulful__panel{display:none}
  .soulful__tint{background:linear-gradient(180deg,rgba(8,25,42,.42),rgba(8,25,42,.5))}
  .soulful__inner{
    grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:26px;min-height:0;padding-top:44px;padding-bottom:44px;
  }
  .soulful__copy{
    padding:26px 22px;max-width:540px;border-radius:16px;
    background:linear-gradient(120deg,rgba(23,64,94,.95),rgba(13,35,55,.95));
    box-shadow:0 18px 40px rgba(6,18,30,.35);
  }
  .soulful__btns{justify-content:center}
  .section{padding:56px 0}
  .about{padding:56px 0}
  .about__grid{grid-template-columns:1fr;gap:52px}
  .about__lead{max-width:none}
  .about__img img{height:340px}
  .about__badge{left:16px;top:auto;bottom:-24px;transform:none}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px}
  .hero{height:66vh;min-height:520px;max-height:640px}
  .hero__copy p{max-width:none}
  /* arrows would land on top of the copy - swipe and dots take over */
  .hero__nav{display:none}
}
@media (max-width:720px){
  .topbar__inner{flex-direction:column;justify-content:center;gap:9px;height:auto;padding:11px 0 13px;font-size:11.5px}
  .topbar__left{justify-content:center;flex-wrap:wrap;gap:8px 20px}
  .dest-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .strip__grid{grid-template-columns:repeat(2,1fr)}
  .about__feats{grid-template-columns:repeat(2,1fr);gap:22px}
  .header__cta .btn{display:none}
  .cta__inner{flex-direction:column;align-items:flex-start;gap:22px}
  /* copyright, legal links and the credit stack into one centred column.
     The deep bottom padding lifts the credit clear of the stacked WhatsApp
     and call buttons, which occupy the lowest 140px on the right. */
  .footer__bottom{flex-direction:column;justify-content:center;text-align:center;gap:13px;padding:18px 24px 152px}
  .footer__credit{align-self:center;max-width:100%;font-size:11px;white-space:normal}
}
@media (max-width:620px){
  .why__items{grid-template-columns:repeat(2,1fr)}
  .why__item:nth-child(3n+1){border-left:1px solid rgba(197,157,101,.32)}
  .why__item:nth-child(2n+1){border-left:0}
  .why__deco--l,.why__deco--r{width:118px;opacity:.2}
  .sc--1,.sc--3{width:92px;height:92px}
  .sc--2{width:118px;height:118px;margin:0 -16px}
  .soulful__call{padding:8px 18px 9px}
}
@media (max-width:520px){
  .hero{height:auto;min-height:0;max-height:none;padding:64px 0 78px}
  .hero__inner{height:auto}
  .hero__btns .btn{flex:1 1 100%}
  .blog-grid{grid-template-columns:1fr}
  .strip__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .section{padding:46px 0}
}

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


/* #####################################################################
   2. COMPONENTS - navigation (two-level header + mobile drawer)
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Two-level navigation
   ---------------------------------------------------------------------
   Kept out of style.css so the base sheet stays byte-identical to the
   original static export. Loaded site-wide from _Layout.cshtml, right
   after style.css, whose .nav / .mobile-nav rules this extends.
   ===================================================================== */

/* =====================================================================
   Desktop dropdown
   ===================================================================== */
.nav__item{position:relative;display:flex;align-items:center}

/* Matches .nav a in style.css so a <button> parent is indistinguishable
   from a real link. */
.nav__top{
  display:inline-flex;align-items:center;gap:7px;
  position:relative;padding:0;margin:0;border:0;background:none;cursor:pointer;
  font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:.01em;line-height:inherit;
  transition:color .3s var(--ease);
}
.nav__top::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--orange);transition:width .35s var(--ease);
}
.nav__top:hover,.nav__top.active{color:var(--orange)}
.nav__top:hover::after,.nav__top.active::after{width:60%}
.nav__top i{
  font-size:9.5px;color:var(--muted);
  transition:transform .35s var(--ease),color .3s var(--ease);
}
.nav__item:hover .nav__top i,
.nav__item.is-open .nav__top i{transform:rotate(180deg);color:var(--orange)}

.nav__drop{
  position:absolute;top:100%;left:50%;z-index:60;
  min-width:232px;padding:9px;margin-top:14px;
  background:#fff;border:1px solid #f1ece4;border-radius:14px;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
/* keeps the pointer from falling through the gap on the way down */
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* little arrow */
.nav__drop::after{
  content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:#fff;border-left:1px solid #f1ece4;border-top:1px solid #f1ece4;border-radius:2px;
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop,
.nav__item.is-open .nav__drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

.nav__drop a{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  font-family:var(--head);font-size:13.6px;font-weight:600;color:var(--body);
  white-space:nowrap;
  transition:color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease);
}
.nav__drop a::after{display:none}       /* cancel the underline from .nav a */
.nav__drop a i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;
  background:var(--cream-2);color:var(--orange-dark);font-size:12px;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.nav__drop a:hover{background:var(--cream-2);color:var(--ink);transform:translateX(3px)}
.nav__drop a:hover i{background:var(--orange);color:#fff}
.nav__drop a.is-on{color:var(--orange-dark);background:#fff3e6}
.nav__drop a.is-on i{background:var(--orange);color:#fff}

/* =====================================================================
   Mobile drawer - accordion with a drawn +/- toggle
   ===================================================================== */
.m-menu{display:flex;flex-direction:column}

.m-group{display:flex;flex-direction:column}

/* style.css scopes the drawer link look to `.mobile-nav a.m-link`, so the
   <button> parent of a group matched none of it and rendered as raw browser
   chrome. Spell the same look out here rather than touching style.css. */
.mobile-nav .m-link--parent{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:15px;color:#3d4855;
  padding:12px;border-radius:8px;
  transition:.3s var(--ease);
}
.mobile-nav .m-link--parent:hover,
.mobile-nav .m-link--parent.active{background:#fff4e9;color:var(--orange);padding-left:18px}

/* the +/- mark: two bars, the vertical one collapses when open */
.m-plus{
  position:relative;flex:none;width:22px;height:22px;border-radius:7px;
  background:var(--cream-2);border:1px solid #f2e7d8;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.m-plus::before,.m-plus::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--orange-dark);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease),opacity .25s var(--ease),background-color .3s var(--ease);
}
.m-plus::before{width:10px;height:2px}
.m-plus::after{width:2px;height:10px}
.m-group.is-open .m-plus{background:var(--orange);border-color:var(--orange);transform:rotate(180deg)}
.m-group.is-open .m-plus::before{background:#fff}
.m-group.is-open .m-plus::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.m-link--parent:hover .m-plus{border-color:var(--orange)}

/* the panel: max-height is set in js/nav-menu.js from the real content
   height, so the transition works without hard-coding a value */
.m-sub{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.m-sub__inner{
  display:flex;flex-direction:column;gap:2px;
  padding:4px 0 10px 12px;margin-left:6px;
  border-left:2px solid #f2e7d8;
}
.m-group.is-open .m-sub__inner{border-left-color:var(--orange)}

.m-sublink{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:10px;
  font-family:var(--head);font-size:13.6px;font-weight:600;color:var(--body);
  transition:color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease);
}
.m-sublink i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:var(--cream-2);color:var(--orange-dark);font-size:11.5px;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.m-sublink:hover{background:var(--cream-2);color:var(--ink);transform:translateX(3px)}
.m-sublink:hover i{background:var(--orange);color:#fff}
.m-sublink.is-on{color:var(--orange-dark);background:#fff3e6}
.m-sublink.is-on i{background:var(--orange);color:#fff}

/* Below the breakpoint the desktop dropdown must never appear - the
   drawer owns the sub-navigation there. */
@media (max-width:1024px){
  .nav__drop{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nav__drop,.m-sub,.m-plus,.m-plus::before,.m-plus::after{transition:none}
}


/* #####################################################################
   2. COMPONENTS - booking modal
   ##################################################################### */

/* =====================================================================
   Kashi Experts - "Book Now" popup
   ---------------------------------------------------------------------
   Mobile first. The base rules build a bottom sheet that slides up from
   the edge of the screen; the min-width blocks above 720px turn the same
   markup into a centred two-column dialog.

   The layout is tuned to fit without scrolling, down to a 375x667 phone
   and a 1366x680 laptop. On a phone the summary strip drops to one line
   of meta, and the section blurbs and reassurance notes are hidden -
   they are breathing room the small screen cannot pay for. The body can
   still scroll as a safety valve (very large text settings, tiny
   screens), but the scrollbar itself is never drawn.

   Markup is injected by js/booking-modal.js.
   ===================================================================== */

/* =====================================================================
   Shell
   ===================================================================== */
.bk{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;
}
.bk[hidden]{display:none}

.bk__backdrop{
  position:absolute;inset:0;
  background:rgba(8,20,33,.66);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .38s var(--ease);
}
.bk.is-open .bk__backdrop{opacity:1}

.bk__sheet{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  width:100%;max-height:96vh;max-height:96svh;
  background:#fff;
  border-radius:22px 22px 0 0;
  box-shadow:0 -18px 60px rgba(6,18,30,.4);
  transform:translateY(100%);
  transition:transform .5s var(--ease-out);
  overflow:hidden;
}
.bk.is-open .bk__sheet{transform:none}

/* the little drag handle that tells a thumb this sheet came from below */
.bk__grip{
  flex:none;width:42px;height:4px;margin:7px auto 0;
  border-radius:100px;background:#dfe3e9;
}

.bk__close{
  position:absolute;right:9px;top:9px;z-index:6;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:14px;
  box-shadow:0 4px 14px rgba(9,20,32,.16);
  transition:transform .35s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.bk__close:hover{background:var(--orange);color:#fff;transform:rotate(90deg)}
.bk__close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* the scrolling part - everything except the sticky footer. It is sized
   to fit, so this is a fallback; the bar is hidden either way. */
.bk__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.bk__body::-webkit-scrollbar{width:0;height:0;display:none}

/* =====================================================================
   Package summary - a compact strip on a phone
   ===================================================================== */
.bk__aside{
  display:flex;align-items:center;gap:11px;
  /* the right side leaves room for the close button sitting over this strip */
  padding:9px 48px 10px 14px;margin:3px 0 0;
  background:linear-gradient(120deg,#13293f,#1c4664);
  color:#fff;
}
.bk__aside-media{
  flex:none;width:48px;height:48px;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 18px rgba(4,14,24,.4);
}
.bk__aside-media img{width:100%;height:100%;object-fit:cover}
.bk__aside-body{min-width:0;flex:1}
.bk__aside-badge{
  display:none;align-items:center;gap:6px;
  padding:4px 11px;border-radius:100px;margin-bottom:9px;
  font-family:var(--head);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  background:rgba(245,130,32,.2);border:1px solid rgba(245,130,32,.42);color:var(--orange-2);
}
.bk__aside h3{
  color:#fff;font-family:var(--display);font-size:14.5px;line-height:1.25;
  margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.bk__aside-meta{
  display:flex;flex-wrap:wrap;gap:3px 12px;
  font-size:10.5px;color:rgba(255,255,255,.66);
}
/* only the duration earns its place on a phone */
.bk__aside-meta span:nth-child(n+2){display:none}
.bk__aside-meta i{color:var(--orange-2);font-size:9.5px;margin-right:5px}
.bk__aside-price{
  flex:none;text-align:right;font-size:9.5px;color:rgba(255,255,255,.5);line-height:1.45;
}
.bk__aside-price b{
  display:block;font-family:var(--head);font-size:15.5px;font-weight:800;color:#fff;
}
.bk__trust{display:none}

/* =====================================================================
   Head + step rail
   ===================================================================== */
.bk__main{padding:13px 15px 15px}

.bk__head{margin-bottom:11px}
.bk__eyebrow{
  display:none;font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:7px;
}
.bk__head h2{font-family:var(--display);font-size:17px;line-height:1.2}
.bk__head p{display:none;font-size:12.5px;line-height:1.7;color:var(--body);margin-top:6px}

.bk__rail{margin-bottom:12px}
.bk__steps{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bk__step{
  display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  font-family:var(--head);font-size:10.5px;font-weight:700;color:var(--muted);
  transition:color .35s var(--ease);
}
.bk__step b{
  flex:none;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;background:#f0f2f5;color:var(--muted);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .4s var(--ease);
}
.bk__step span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk__step.is-active{color:var(--ink)}
.bk__step.is-active b{background:var(--orange);color:#fff;transform:scale(1.08)}
.bk__step.is-done{color:var(--ink)}
.bk__step.is-done b{background:rgba(37,211,102,.16);color:#1eae55}

.bk__bar{height:3px;border-radius:100px;background:#eef0f3;overflow:hidden}
.bk__bar i{
  display:block;height:100%;width:50%;border-radius:100px;
  background:linear-gradient(90deg,var(--orange-2),var(--orange));
  transition:width .5s var(--ease-out);
}

/* =====================================================================
   Panes
   ===================================================================== */
.bk__pane{display:none}
.bk__pane.is-active{display:block;animation:bkPaneIn .42s var(--ease-out) both}
@keyframes bkPaneIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* =====================================================================
   Fields
   ===================================================================== */
.bk__row{margin-bottom:10px}
.bk__row label,.bk__legend{
  display:block;font-family:var(--head);font-size:11px;font-weight:700;
  color:var(--ink);margin-bottom:5px;
}
.bk__row label em,.bk__legend em{color:var(--orange);font-style:normal}

.bk__row input,.bk__row select,.bk__row textarea{
  width:100%;padding:10px 13px;border-radius:9px;
  font-family:var(--font);font-size:14px;color:var(--ink);
  background:#fafafb;border:1.5px solid var(--line);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
/* 16px keeps iOS Safari from zooming the whole page on focus */
@supports (-webkit-touch-callout:none){
  .bk__row input,.bk__row select,.bk__row textarea{font-size:16px}
}
.bk__row input::placeholder,.bk__row textarea::placeholder{color:#a9b0ba}
.bk__row input:focus,.bk__row select:focus,.bk__row textarea:focus{
  outline:0;background:#fff;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(245,130,32,.14);
}
.bk__row textarea{resize:vertical;min-height:56px}
.bk__row select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a2' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;
}

.bk__grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* phone field with a fixed country prefix */
.bk__phone{display:flex;align-items:stretch}
.bk__phone span{
  flex:none;display:flex;align-items:center;padding:0 11px;
  border:1.5px solid var(--line);border-right:0;border-radius:9px 0 0 9px;
  background:#f2f4f6;color:var(--body);font-size:13px;font-weight:600;
}
.bk__phone input{border-radius:0 9px 9px 0}

/* error state */
.bk__row.has-error input,.bk__row.has-error select{
  border-color:#e5484d;background:#fff6f6;
}
.bk__row.has-error .bk__phone span{border-color:#e5484d}
.bk__err{
  display:none;align-items:center;gap:6px;margin-top:5px;
  font-size:11px;font-weight:500;color:#e5484d;
}
.bk__err i{font-size:10px}
.bk__row.has-error .bk__err{display:flex}

/* traveller steppers */
.bk__count{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:4px;border-radius:9px;background:#fafafb;border:1.5px solid var(--line);
}
.bk__count-btn{
  flex:none;width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);font-size:11px;
  border:1px solid var(--line);
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.bk__count-btn:hover:not(:disabled){background:var(--orange);border-color:var(--orange);color:#fff}
.bk__count-btn:active:not(:disabled){transform:scale(.92)}
.bk__count-btn:disabled{opacity:.35;cursor:not-allowed}
.bk__count-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.bk__count-val{
  font-family:var(--head);font-size:14.5px;font-weight:800;color:var(--ink);
  min-width:24px;text-align:center;
}

/* choice chips - three across in one row, so the block stays one line tall */
.bk__chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.bk__chip{position:relative}
.bk__chip input{
  position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;
}
.bk__chip span{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 5px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);white-space:nowrap;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),transform .35s var(--ease);
}
.bk__chip small{font-weight:500;font-size:10px;color:var(--muted)}
.bk__chip input:checked + span{
  background:rgba(245,130,32,.09);border-color:var(--orange);color:var(--orange-dark);
}
.bk__chip input:checked + span small{color:var(--orange)}
.bk__chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
.bk__chip span:hover{transform:translateY(-2px);border-color:rgba(245,130,32,.5)}

/* reassurance copy - room for it only once the screen is bigger */
.bk__note{
  display:none;gap:9px;align-items:flex-start;margin-top:4px;
  padding:11px 13px;border-radius:10px;
  background:rgba(245,130,32,.07);border:1px solid rgba(245,130,32,.18);
  font-size:11.5px;line-height:1.65;color:var(--body);
}
.bk__note i{color:var(--orange);font-size:11px;margin-top:3px;flex:none}

/* =====================================================================
   Success pane
   ===================================================================== */
.bk__done{text-align:center;padding:8px 0 4px}
.bk__done-ico{
  width:58px;height:58px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;
  background:linear-gradient(135deg,#3ae37a,#1eae55);
  box-shadow:0 14px 30px rgba(30,174,85,.35);
  animation:bkPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bkPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.bk__done h3{font-family:var(--display);font-size:20px;margin-bottom:8px}
.bk__done p{font-size:12.5px;line-height:1.75;color:var(--body);max-width:380px;margin:0 auto}
.bk__done-ref{
  display:inline-flex;align-items:center;gap:9px;margin:14px 0 4px;
  padding:8px 16px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--ink);
  background:var(--cream);border:1px dashed rgba(245,130,32,.45);
}
.bk__done-ref i{color:var(--orange);font-size:11px}
.bk__done-btns{display:grid;gap:9px;margin-top:16px}

/* =====================================================================
   Sticky footer
   ===================================================================== */
.bk__foot{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:10px 15px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(9,20,32,.06);
}
.bk__total{flex:1;min-width:0;line-height:1.25}
.bk__total span{display:block;font-size:9.5px;color:var(--muted)}
.bk__total b{
  font-family:var(--head);font-size:17px;font-weight:800;color:var(--ink);
  display:block;white-space:nowrap;
}
/* the traveller count drops to its own line on a phone, where the row is
   fighting the button for width */
.bk__total b em{
  display:block;font-style:normal;font-size:10px;font-weight:600;color:var(--muted);
}
.bk__actions{flex:none;display:flex;align-items:center;gap:9px}

/* .btn sets display:inline-flex, which beats the hidden attribute's own
   display:none - so the inactive step button needs saying explicitly */
.bk__actions [hidden]{display:none}

.bk__back{
  display:none;align-items:center;justify-content:center;gap:7px;
  width:40px;height:40px;border-radius:8px;
  background:#fff;border:1.5px solid var(--line);color:var(--ink);font-size:13px;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .35s var(--ease);
}
.bk__back:hover{border-color:var(--orange);color:var(--orange);transform:translateX(-2px)}
.bk.is-step2 .bk__back{display:flex}
.bk.is-done .bk__foot{display:none}

/* =====================================================================
   Tablet and up - the sheet becomes a centred dialog, and the copy that
   was cut for space comes back
   ===================================================================== */
@media (min-width:720px){
  .bk{align-items:center;padding:24px}

  .bk__sheet{
    max-width:870px;max-height:90vh;
    border-radius:var(--radius-lg);
    transform:translateY(22px) scale(.97);
    box-shadow:0 40px 90px rgba(6,18,30,.45);
  }
  .bk.is-open .bk__sheet{transform:none}
  .bk__grip{display:none}
  .bk__close{right:13px;top:13px;width:34px;height:34px}

  /* the summary moves into a full-height panel beside the form */
  .bk__body{display:grid;grid-template-columns:270px 1fr}

  /* the close button moves over the form panel, so the reserved space goes */
  .bk__aside{
    display:block;position:relative;overflow-y:auto;
    padding:22px;margin:0;
  }
  .bk__aside-media{width:100%;height:124px;border-radius:var(--radius);margin-bottom:15px}
  .bk__aside-badge{display:inline-flex;margin-bottom:8px}
  .bk__aside h3{font-size:19px;-webkit-line-clamp:3;margin-bottom:9px}
  .bk__aside-meta{flex-direction:column;gap:6px;font-size:11.5px}
  .bk__aside-meta span:nth-child(n+2){display:flex}
  .bk__aside-price{
    text-align:left;margin-top:13px;padding-top:13px;font-size:10.5px;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .bk__aside-price b{font-size:22px;display:inline;margin-right:4px}

  .bk__trust{
    display:grid;gap:7px;position:relative;z-index:2;
    margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.14);
  }
  .bk__trust li{
    display:flex;gap:9px;align-items:flex-start;
    font-size:11px;line-height:1.5;color:rgba(255,255,255,.74);
  }
  .bk__trust i{color:#4ade80;font-size:10px;margin-top:4px;flex:none}

  .bk__main{padding:24px 26px 22px}
  .bk__head{margin-bottom:15px}
  .bk__eyebrow{display:block;margin-bottom:6px}
  .bk__head h2{font-size:24px}
  .bk__head p{display:block}
  .bk__rail{margin-bottom:16px}
  .bk__steps{margin-bottom:9px}
  .bk__row{margin-bottom:13px}
  .bk__row label,.bk__legend{font-size:11.5px;margin-bottom:6px}
  .bk__note{display:flex}
  .bk__chips{display:flex;flex-wrap:wrap;gap:8px}
  .bk__chip span{padding:9px 15px;font-size:12px}
  .bk__foot{padding:13px 26px}
  .bk__total b em{display:inline;margin-left:3px}
  .bk__done-btns{grid-template-columns:1fr 1fr;max-width:420px;margin-left:auto;margin-right:auto}
}

@media (min-width:960px){
  .bk__body{grid-template-columns:300px 1fr}
  .bk__aside-media{height:150px}
  .bk__main{padding:28px 32px 24px}
}

/* =====================================================================
   Short screens - a laptop at 1366x680 has less vertical room than a
   phone, so the same copy has to go regardless of width
   ===================================================================== */
@media (min-width:720px) and (max-height:760px){
  .bk__sheet{max-height:94vh}
  .bk__head p,.bk__note{display:none}
  .bk__head{margin-bottom:12px}
  .bk__head h2{font-size:21px}
  .bk__main{padding:18px 24px 18px}
  .bk__rail{margin-bottom:13px}
  .bk__row{margin-bottom:10px}
  .bk__aside{padding:18px}
  .bk__aside-media{height:104px;margin-bottom:12px}
  .bk__trust{display:none}
  .bk__row textarea{min-height:52px}
}

/* =====================================================================
   Motion preferences
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .bk__sheet,.bk__backdrop{transition:none}
  .bk__pane.is-active,.bk__done-ico{animation:none}
}


/* #####################################################################
   2. COMPONENTS - FAQ accordion (destinations, packages, services, /faq)
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Shared FAQ accordion
   ---------------------------------------------------------------------
   The .faqs / .faq / .faq__q / .faq__a component is used on several
   pages and driven by the shared js/faq-accordion.js, but its CSS only
   ever lived inside destinations.css. Any page reusing the markup
   without that sheet rendered the accordion completely unstyled.

   These rules are copied verbatim from destinations.css so the two look
   identical. destinations.css is left untouched: it is byte-identical
   to the original static export and its own page already works.

   Load this wherever #faqList / .faq markup appears.
   ===================================================================== */

.faqs{background:#fff}
.faqs__grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:56px;align-items:start}
.faqs__intro h2{font-family:var(--display);font-size:clamp(25px,2.8vw,34px);line-height:1.24;margin-bottom:14px}
.faqs__intro p{font-size:13.5px;line-height:1.85;margin-bottom:24px}

.faqs__list{display:grid;gap:12px}
.faq{
  background:#fff;border:1px solid #f0ebe3;border-radius:var(--radius);overflow:hidden;
  transition:border-color .4s var(--ease),box-shadow .45s var(--ease);
}
.faq:hover{border-color:rgba(245,130,32,.42)}
.faq.is-open{border-color:rgba(245,130,32,.5);box-shadow:var(--shadow-sm)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  padding:17px 20px;text-align:left;
  font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__q:hover{color:var(--orange)}
.faq.is-open .faq__q{color:var(--orange)}
.faq__q i{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  background:rgba(245,130,32,.11);color:var(--orange);
  transition:transform .45s var(--ease),background-color .35s var(--ease),color .3s var(--ease);
}
.faq.is-open .faq__q i{transform:rotate(135deg);background:var(--orange);color:#fff}
.faq__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq__a p{padding:0 20px 18px;font-size:13px;line-height:1.9}


/* #####################################################################
   3. PAGE - /about
   ##################################################################### */

/* =====================================================================
   Kashi Experts - About page
   Loaded after css/style.css, which owns every shared token, the page
   hero (.phero) and the centred section heading.
   ===================================================================== */

/* =====================================================================
   Our story
   ===================================================================== */
.story__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:70px;align-items:center}

.story__media{position:relative;--big-h:432px;padding:0 30px 56px 0}
.story__frame{
  position:absolute;left:30px;right:0;top:30px;height:var(--big-h);
  border:2px solid rgba(245,130,32,.45);border-radius:var(--radius-lg);
}
.story__img{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.story__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.story__img:hover img{transform:scale(1.06)}
.story__img--big{height:var(--big-h);z-index:2}
.story__img--small{
  position:absolute;right:0;bottom:0;width:56%;height:190px;z-index:3;
  border:6px solid #fff;
}
.story__stamp{
  position:absolute;left:-14px;top:26px;z-index:4;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));
  color:#fff;border-radius:16px;padding:15px 18px;text-align:center;
  box-shadow:0 16px 34px rgba(245,130,32,.4);
}
.story__stamp b{display:block;font-family:var(--head);font-size:23px;font-weight:800;line-height:1}
.story__stamp span{display:block;font-size:10px;line-height:1.4;margin-top:5px;opacity:.9}

.story__copy h2{font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1.22;margin-bottom:20px}
.story__copy p{font-size:14.5px;margin-bottom:16px}

.story__list{margin:22px 0 28px;display:grid;gap:11px}
.story__list li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink);font-weight:500}
.story__list i{
  flex-shrink:0;width:20px;height:20px;margin-top:3px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.13);color:var(--orange);font-size:9px;
}

.story__sign{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.story__sign-mark{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;font-size:15px;color:#fff;letter-spacing:.03em;
  background:linear-gradient(135deg,#1d3f5c,#0f2537);
}
.story__sign b{display:block;font-family:var(--head);font-size:14px;color:var(--ink)}
.story__sign span{display:block;font-size:11.5px;color:var(--muted)}

/* =====================================================================
   Stats band
   ===================================================================== */
.stats{position:relative;overflow:hidden;background:#101d2b;padding:46px 0}
.stats__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.stats::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,30,47,.94),rgba(19,48,73,.86))}
.stats .container{position:relative;z-index:2}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{position:relative;text-align:center;padding:6px 14px}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
}
.stat i{
  display:block;font-size:21px;color:var(--orange);margin-bottom:12px;
  transition:transform .45s var(--ease);
}
.stat:hover i{transform:translateY(-6px) scale(1.1)}
.stat b{
  display:block;font-family:var(--head);font-size:clamp(28px,3.2vw,40px);font-weight:800;
  color:#fff;line-height:1;letter-spacing:-.02em;
}
.stat span{display:block;margin-top:9px;font-size:12px;color:rgba(255,255,255,.62)}

/* =====================================================================
   Mission / Vision / Values
   ===================================================================== */
.pillars{background:linear-gradient(180deg,#fffdfa,#fdf7ef)}
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pillar{
  position:relative;overflow:hidden;background:#fff;border:1px solid #f1ece4;
  border-radius:var(--radius-lg);padding:34px 28px 30px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.pillar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange-2),var(--orange));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.pillar:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.pillar:hover::before{transform:scaleX(1)}
.pillar__num{
  position:absolute;right:20px;top:14px;font-family:var(--display);
  font-size:56px;font-weight:800;color:rgba(245,130,32,.09);line-height:1;
  transition:color .45s var(--ease),transform .55s var(--ease);
}
.pillar:hover .pillar__num{color:rgba(245,130,32,.17);transform:translateY(-4px)}
.pillar__ico{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;margin-bottom:20px;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:23px;
  transition:.45s var(--ease);
}
.pillar:hover .pillar__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:rotate(-7deg) translateY(-4px);box-shadow:0 12px 26px rgba(245,130,32,.34);
}
.pillar h3{font-family:var(--display);font-size:20px;margin-bottom:11px}
.pillar p{font-size:13.5px;line-height:1.85}

/* =====================================================================
   Timeline
   ===================================================================== */
.timeline-sec{background:#fff}
.tl{position:relative;max-width:960px;margin:0 auto;padding:6px 0}
.tl__spine{
  position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(245,130,32,.16),rgba(245,130,32,.16));
  border-radius:2px;
}
.tl__fill{
  position:absolute;left:0;right:0;top:0;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
}
.tl__row{position:relative;width:50%;padding:0 46px 34px 0}
.tl__row:last-child{padding-bottom:0}
.tl__row:nth-of-type(odd){left:0}
.tl__row:nth-of-type(even){left:50%;padding:0 0 34px 46px}

.tl__card{
  position:relative;background:#fff;border:1px solid #f0eee9;border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow-xs);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.tl__row:nth-of-type(odd) .tl__card{text-align:right}
.tl__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(245,130,32,.4)}
.tl__year{
  display:inline-block;margin-bottom:10px;padding:4px 13px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:800;letter-spacing:.06em;
  color:var(--orange);background:rgba(245,130,32,.11);
}
.tl__card h3{font-size:16px;margin-bottom:9px}
.tl__card p{font-size:13px;line-height:1.8}
.tl__card--now{background:linear-gradient(135deg,#16405e,#0e2436);border-color:transparent}
.tl__card--now h3,.tl__card--now p{color:#fff}
.tl__card--now p{color:rgba(255,255,255,.78)}
.tl__card--now .tl__year{background:rgba(255,255,255,.14);color:var(--orange-2)}

.tl__dot{
  position:absolute;top:26px;width:15px;height:15px;border-radius:50%;
  background:#fff;border:3px solid var(--orange);box-shadow:0 0 0 5px rgba(245,130,32,.13);
}
.tl__row:nth-of-type(odd) .tl__dot{right:-7.5px}
.tl__row:nth-of-type(even) .tl__dot{left:-7.5px}
.tl__dot--now{background:var(--orange);box-shadow:0 0 0 6px rgba(245,130,32,.2)}
.tl__dot--now::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--orange);
  animation:pulseRing 2.2s ease-out infinite;
}

/* =====================================================================
   How it works
   ===================================================================== */
.process{background:linear-gradient(180deg,#fdf7ef,#fffdfa)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.steps__line{
  position:absolute;left:12%;right:12%;top:38px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(245,130,32,.42) 0 8px,transparent 8px 16px);
}
.step{position:relative;text-align:center;padding:0 12px}
.step__ico{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;margin:0 auto 20px;border-radius:50%;
  background:#fff;border:1px solid #f1e6d8;color:var(--orange);font-size:26px;
  box-shadow:0 10px 26px rgba(19,41,63,.08);
  transition:.5s var(--ease);
}
.step:hover .step__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:translateY(-8px);box-shadow:0 18px 34px rgba(245,130,32,.36);border-color:transparent;
}
.step__num{
  position:absolute;left:50%;top:-6px;z-index:3;transform:translateX(20px);
  width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#1d3f5c,#0f2537);
  box-shadow:0 6px 14px rgba(13,30,47,.3);
  transition:transform .5s var(--ease);
}
.step:hover .step__num{transform:translateX(20px) translateY(-8px)}
.step h3{font-size:15.5px;margin-bottom:9px;transition:color .35s var(--ease)}
.step:hover h3{color:var(--orange)}
.step p{font-size:12.5px;line-height:1.85}

/* =====================================================================
   Team
   ===================================================================== */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.team{
  background:#fff;border:1px solid #f1f1f4;border-radius:var(--radius);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.team:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg)}
.team__media{position:relative;overflow:hidden;aspect-ratio:19/22;background:#eef0f3}
.team__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.team:hover .team__media img{transform:scale(1.08)}
.team__media::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(9,20,32,0) 30%,rgba(184,86,4,.82) 100%);
  transition:opacity .5s var(--ease);
}
.team:hover .team__media::after{opacity:1}
.team__social{
  position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;justify-content:center;gap:9px;
}
.team__social a{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--orange);font-size:12.5px;
  opacity:0;transform:translateY(16px);
  transition:opacity .4s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),background-color .3s var(--ease),color .3s var(--ease);
}
.team:hover .team__social a{opacity:1;transform:translateY(0)}
.team:hover .team__social a:nth-child(2){transition-delay:.06s}
.team:hover .team__social a:nth-child(3){transition-delay:.12s}
.team__social a:hover{background:var(--navy);color:#fff}
.team__body{padding:15px 16px 18px;text-align:center}
.team__body h3{font-size:15px;margin-bottom:3px;transition:color .35s var(--ease)}
.team:hover .team__body h3{color:var(--orange)}
.team__body span{font-size:11.5px;color:var(--muted)}

/* =====================================================================
   Testimonials
   ===================================================================== */
.quotes{background:linear-gradient(180deg,#fffdfa,#fdf5eb)}
.quotes__wrap{position:relative}
.quote-swiper{padding-bottom:8px}
.quote-swiper .swiper-slide{height:auto}
.quote{
  position:relative;overflow:hidden;height:100%;
  background:#fff;border:1px solid #f2ece3;border-radius:var(--radius-lg);
  padding:30px 28px 26px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.quote:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:#fff}
.quote__mark{
  position:absolute;right:22px;top:20px;font-size:44px;
  color:rgba(245,130,32,.1);transition:color .45s var(--ease),transform .55s var(--ease);
}
.quote:hover .quote__mark{color:rgba(245,130,32,.2);transform:scale(1.08) rotate(-6deg)}
.quote__stars{display:flex;gap:3px;margin-bottom:14px;color:#f5a623;font-size:12px}
.quote p{position:relative;z-index:2;font-size:13.5px;line-height:1.9;margin-bottom:22px}
.quote__who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid #f3f0ea}
.quote__av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:13.5px;font-weight:800;color:#fff;letter-spacing:.03em;
  background:var(--av,var(--orange));
}
/* scoped to the name block so they never hit .quote__av next to it */
.quote__who div b{display:block;font-family:var(--head);font-size:13.5px;color:var(--ink)}
.quote__who div span{display:block;font-size:11px;color:var(--muted)}

.quote-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #efe7db;color:var(--ink);font-size:13px;
  box-shadow:var(--shadow-sm);transition:.35s var(--ease);
}
.quote-nav:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-50%) scale(1.08)}
.quote-nav--prev{left:-20px}
.quote-nav--next{right:-20px}
.quote-nav.swiper-button-disabled{opacity:.35;pointer-events:none}

.quote-dots{margin-top:26px;text-align:center;line-height:0}
.quote-dots .swiper-pagination-bullet{
  width:8px;height:8px;margin:0 5px;opacity:1;background:rgba(245,130,32,.28);
  transition:.35s var(--ease);
}
.quote-dots .swiper-pagination-bullet-active{background:var(--orange);width:24px;border-radius:5px}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1200px){
  .quote-nav--prev{left:-8px}
  .quote-nav--next{right:-8px}
}
@media (max-width:1080px){
  .story__grid{grid-template-columns:1fr;gap:56px}
  .story__media{max-width:520px;margin:0 auto}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .steps__line{display:none}
}
@media (max-width:900px){
  .pillars__grid{grid-template-columns:1fr;gap:20px}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .stat:nth-child(3)::before{display:none}

  /* timeline collapses to a single left-hand rail */
  .tl__spine{left:9px;transform:none}
  .tl__row,.tl__row:nth-of-type(even){width:100%;left:0;padding:0 0 26px 38px}
  .tl__row:nth-of-type(odd) .tl__card{text-align:left}
  .tl__row:nth-of-type(odd) .tl__dot,
  .tl__row:nth-of-type(even) .tl__dot{left:2.5px;right:auto}
}
@media (max-width:620px){
  .story__media{--big-h:340px;padding:0 22px 48px 0}
  .story__img--small{height:150px;width:60%}
  .story__stamp{left:-8px;padding:12px 14px}
  .steps{grid-template-columns:1fr;gap:30px}
  .team-grid{grid-template-columns:1fr;gap:20px}
  .stats__grid{grid-template-columns:1fr;gap:28px}
  .stat + .stat::before{display:none}
  .quote{padding:24px 22px 22px}
}


/* #####################################################################
   3. PAGE - /contact
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Contact page
   Loaded after css/style.css (page hero, buttons) and css/destinations.css
   (which owns the .faq accordion).
   ===================================================================== */

/* =====================================================================
   Quick contact cards
   ===================================================================== */
.cquick{background:#fff}
.cquick__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:-52px;position:relative;z-index:6;
}
.cq{
  position:relative;display:block;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:26px 22px 24px;box-shadow:0 16px 38px rgba(19,41,63,.09);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.cq::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange-2),var(--orange));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.cq:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.cq:hover::before{transform:scaleX(1)}
.cq__ico{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:15px;margin-bottom:18px;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:20px;
  transition:.45s var(--ease);
}
.cq:hover .cq__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:rotate(-8deg) translateY(-4px);box-shadow:0 12px 26px rgba(245,130,32,.34);
}
.cq__label{
  display:block;margin-bottom:6px;
  font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.cq b{
  display:block;font-family:var(--head);font-size:15.5px;font-weight:700;color:var(--ink);
  line-height:1.35;margin-bottom:6px;transition:color .35s var(--ease);word-break:break-word;
}
.cq:hover b{color:var(--orange)}
.cq__sub{display:block;font-size:11.5px;line-height:1.6;color:var(--muted)}
.cq__go{
  position:absolute;right:20px;top:26px;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fdf3e8;color:var(--orange);font-size:11px;
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--ease),transform .45s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.cq:hover .cq__go{opacity:1;transform:translateX(0);background:var(--orange);color:#fff}

/* the WhatsApp card wears its own colour */
.cq--wa .cq__ico{background:rgba(37,211,102,.13);color:#25d366}
.cq--wa:hover .cq__ico{background:#25d366;color:#fff;box-shadow:0 12px 26px rgba(37,211,102,.36)}
.cq--wa::before{background:linear-gradient(90deg,#3ae37a,#1fb955)}
.cq--wa:hover b{color:#1fb955}
.cq--wa .cq__go{background:rgba(37,211,102,.14);color:#25d366}
.cq--wa:hover .cq__go{background:#25d366;color:#fff}

/* =====================================================================
   Form + info
   ===================================================================== */
.cmain{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}
.cmain__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}

.cinfo h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.22;margin-bottom:16px}
.cinfo__lead{font-size:14px;line-height:1.9;margin-bottom:30px}

.cinfo__list{display:grid;gap:20px;margin-bottom:30px}
.cinfo__list li{display:flex;gap:16px;align-items:flex-start}
.cinfo__ico{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;
  background:#fff;border:1px solid #f1e6d8;color:var(--orange);font-size:16px;
  box-shadow:var(--shadow-xs);transition:.45s var(--ease);
}
.cinfo__list li:hover .cinfo__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  border-color:transparent;transform:rotate(-8deg) translateY(-3px);
  box-shadow:0 12px 24px rgba(245,130,32,.32);
}
.cinfo__list b{display:block;font-family:var(--head);font-size:14px;color:var(--ink);margin-bottom:4px}
.cinfo__list p{font-size:12.5px;line-height:1.8;color:var(--body)}
.cinfo__list a{color:var(--body);transition:color .3s var(--ease)}
.cinfo__list a:hover{color:var(--orange)}

.cinfo__social{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid #f0e8dc}
.cinfo__social > span{
  font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* ---------- the form card ---------- */
.cform{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:32px 30px 28px;box-shadow:0 22px 50px rgba(19,41,63,.11);
}
.cform::before{
  content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,32,.13),transparent 68%);pointer-events:none;
}
.cform__head{position:relative;z-index:2;margin-bottom:24px}
.cform__badge{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  padding:5px 14px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:#fff;background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 8px 18px rgba(245,130,32,.3);
}
.cform__badge i{font-size:9px}
.cform h3{font-family:var(--display);font-size:23px;margin-bottom:8px}
.cform__head p{font-size:12.5px;line-height:1.75;color:var(--muted)}
.cform__head em{color:var(--orange);font-style:normal;font-weight:700}

.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform__row{position:relative;z-index:2;margin-bottom:14px}
.cform label{
  display:block;margin-bottom:7px;
  font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.03em;color:#54606e;
}
.cform label em{color:var(--orange);font-style:normal}
.cform input,.cform select,.cform textarea{
  width:100%;padding:12px 15px;border-radius:10px;
  font-family:var(--font);font-size:13px;color:var(--ink);background:#fdfbf8;
  border:1.5px solid #eee6da;outline:none;resize:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.cform input::placeholder,.cform textarea::placeholder{color:#a7aeb8}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  background:#fff;border-color:var(--orange);box-shadow:0 0 0 4px rgba(245,130,32,.16);
}
.cform select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6773' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.cform__row.has-error input,.cform__row.has-error select{
  border-color:#e5533d;background:#fef7f5;box-shadow:0 0 0 4px rgba(229,83,61,.14);
}
.cform__row.has-error label{color:#c33d28}

.cform__actions{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.cform__actions .btn{flex:1 1 200px}
.cform__mail{border-color:#eee6da}

.cform__sent{
  position:relative;z-index:2;display:none;gap:10px;align-items:flex-start;
  margin-top:16px;padding:13px 16px;border-radius:10px;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.35);
  font-size:12px;line-height:1.7;color:#1a6b3c;
}
.cform.is-sent .cform__sent{display:flex}
.cform__sent i{color:#1fb955;margin-top:3px}
.cform__note{
  position:relative;z-index:2;margin-top:14px;
  font-size:11.5px;line-height:1.7;color:var(--muted);text-align:center;
}
.cform__note a{color:var(--orange);font-weight:600}
.cform__note a:hover{text-decoration:underline}

/* =====================================================================
   Departments
   ===================================================================== */
.cdept{background:#fff}
.cdept__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cdept__card{
  position:relative;overflow:hidden;background:#fff;border:1px solid #f1ece4;
  border-radius:var(--radius-lg);padding:30px 26px 28px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.cdept__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);
}
.cdept__card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.cdept__card:hover::before{transform:scaleY(1)}
.cdept__ico{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:16px;margin-bottom:18px;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:21px;
  transition:.45s var(--ease);
}
.cdept__card:hover .cdept__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:rotate(-7deg) translateY(-4px);box-shadow:0 12px 26px rgba(245,130,32,.34);
}
.cdept__card h3{font-family:var(--display);font-size:20px;margin-bottom:10px}
.cdept__card p{font-size:12.5px;line-height:1.85;margin-bottom:16px}
.cdept__link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--orange);
  word-break:break-word;
}
.cdept__link i{transition:transform .4s var(--ease)}
.cdept__card:hover .cdept__link i{transform:translateX(5px)}

/* =====================================================================
   Map
   ===================================================================== */
.cmap{background:linear-gradient(180deg,#fdf6ec,#fffdfa);padding:70px 0}
.cmap__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
.cmap__card h2{font-family:var(--display);font-size:clamp(25px,2.8vw,34px);line-height:1.24;margin-bottom:14px}
.cmap__card p{font-size:13.5px;line-height:1.9;margin-bottom:22px}
.cmap__list{display:grid;gap:11px;margin-bottom:26px}
.cmap__list li{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--ink);font-weight:500}
.cmap__list i{
  flex-shrink:0;width:28px;height:28px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #f1e6d8;color:var(--orange);font-size:12px;
}

/* Offices list. One card per active branch; with more than one, clicking a
   card swings the shared map across to it (js/contact.js). */
.cmap__grid--offices{align-items:start;margin-top:34px}
.cbranches{display:grid;gap:16px;max-height:520px;overflow-y:auto;padding-right:4px}
.cbranch{
  background:#fff;border:1px solid #f1e6d8;border-radius:var(--radius-lg);
  padding:22px 22px 18px;box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.cbranches .cbranch{cursor:pointer}
.cbranches .cbranch:only-child{cursor:default}
.cbranch:hover{border-color:#e6cfae;transform:translateY(-2px)}
.cbranch.is-on{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.1),var(--shadow-md)}
.cbranch__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.cbranch__city{
  display:block;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:4px;
}
.cbranch__head h3{font-family:var(--display);font-size:19px;line-height:1.3;margin:0}
.cbranch__tag{
  flex-shrink:0;padding:4px 10px;border-radius:99px;
  background:#fdf1e4;color:var(--orange);
  font-size:10.4px;font-weight:800;letter-spacing:.04em;white-space:nowrap;
}
.cbranch__list{display:grid;gap:10px;margin-bottom:18px}
.cbranch__list li{display:flex;gap:11px;align-items:flex-start;font-size:12.9px;line-height:1.75;color:var(--muted)}
.cbranch__list i{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fdf6ec;border:1px solid #f1e6d8;color:var(--orange);font-size:11px;
}
.cbranch__list a{color:var(--ink);font-weight:500}
.cbranch__list a:hover{color:var(--orange)}
.cbranch__acts{display:flex;flex-wrap:wrap;gap:9px}

.cmap__frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  height:400px;background:#eef0f3;box-shadow:var(--shadow-md);
  border:6px solid #fff;
}
.cmap__grid--offices .cmap__frame{position:sticky;top:100px;height:520px}
.cmap__frame iframe{position:relative;z-index:2;width:100%;height:100%;border:0;display:block}
/* shown only if the embed is blocked or offline */
.cmap__fallback{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1200px){
  .cquick__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .cmain__grid{grid-template-columns:1fr;gap:44px}
  .cdept__grid{grid-template-columns:1fr;gap:20px}
  .cmap__grid{grid-template-columns:1fr;gap:32px}
  .cmap__frame{height:340px}
  .cbranches{max-height:none;overflow:visible;padding-right:0}
  .cmap__grid--offices .cmap__frame{position:static;height:340px}
}
@media (max-width:620px){
  .cquick__grid{grid-template-columns:1fr;margin-top:-40px}
  .cform{padding:26px 20px 24px}
  .cform__grid{grid-template-columns:1fr;gap:0}
  .cform__actions .btn{flex:1 1 100%}
  .cinfo__social{flex-direction:column;align-items:flex-start;gap:12px}
  .cmap{padding:52px 0}
  .cmap__frame{height:280px}
  .cmap__grid--offices .cmap__frame{height:280px}
  .cbranch{padding:20px 18px 16px}
  .cbranch__acts .btn{flex:1 1 100%;justify-content:center}
}


/* #####################################################################
   3. PAGE - /destinations (FAQ block removed: it now lives in COMPONENTS above)
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Destinations page
   Loaded after css/style.css, which owns the shared tokens, the page
   hero (.phero) and the centred section heading.
   ===================================================================== */

/* =====================================================================
   Intro
   ===================================================================== */
.dintro__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.dintro__grid h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.24}
.dintro__copy p{font-size:14.5px;line-height:1.9;margin-bottom:22px}
.dintro__pills{display:flex;flex-wrap:wrap;gap:10px}
.dintro__pills span{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:100px;font-size:12.5px;font-weight:500;
  background:rgba(245,130,32,.08);border:1px solid rgba(245,130,32,.2);color:var(--ink);
  transition:transform .4s var(--ease),background-color .35s var(--ease);
}
.dintro__pills i{color:var(--orange);font-size:12px}
.dintro__pills span:hover{transform:translateY(-3px);background:rgba(245,130,32,.14)}

/* =====================================================================
   Filter
   ===================================================================== */
.dgrid-sec{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}
.dfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:38px}
.dfilter__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:100px;
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid #efe6d8;
  transition:transform .35s var(--ease),background-color .35s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease);
}
.dfilter__btn span{
  min-width:20px;height:20px;padding:0 5px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;background:rgba(245,130,32,.12);color:var(--orange);
  transition:.3s var(--ease);
}
.dfilter__btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:rgba(245,130,32,.4)}
.dfilter__btn.is-active{
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(245,130,32,.32);
}
.dfilter__btn.is-active span{background:rgba(255,255,255,.24);color:#fff}

/* =====================================================================
   Destination cards
   ===================================================================== */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.dgrid__empty{text-align:center;padding:40px 0 0;font-size:14px;color:var(--muted)}

.dcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.dcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:#fff}
.dcard.is-hidden{display:none}
.dcard.is-entering{animation:dcardIn .5s var(--ease) both}
@keyframes dcardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.dcard__media{position:relative;overflow:hidden;aspect-ratio:16/12}
.dcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease-out)}
.dcard:hover .dcard__media img{transform:scale(1.11)}
.dcard__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,.1) 0%,rgba(9,20,32,.12) 42%,rgba(9,20,32,.82) 100%);
  transition:opacity .5s var(--ease);
}
.dcard__grad::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(245,130,32,0) 30%,rgba(196,92,6,.72) 100%);
  transition:opacity .5s var(--ease);
}
.dcard:hover .dcard__grad::after{opacity:1}

.dcard__tag{
  position:absolute;left:14px;top:14px;z-index:3;
  padding:5px 13px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:#fff;background:rgba(10,24,38,.55);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dcard__pin{
  position:absolute;right:14px;top:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--orange);font-size:13px;
  opacity:0;transform:translateY(-14px) scale(.6);
  box-shadow:0 8px 18px rgba(9,20,32,.24);
  transition:opacity .4s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1);
}
.dcard:hover .dcard__pin{opacity:1;transform:translateY(0) scale(1);animation:floatY 2.6s ease-in-out .6s infinite}

.dcard__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px;color:#fff;
  transition:transform .5s var(--ease);
}
.dcard:hover .dcard__cap{transform:translateY(-4px)}
.dcard__cap h3{color:#fff;font-family:var(--display);font-size:22px;line-height:1.1;margin-bottom:3px}
.dcard__cap p{font-size:11.5px;color:rgba(255,255,255,.82)}

.dcard__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.dcard__blurb{font-size:12.5px;line-height:1.85;margin-bottom:14px}
.dcard__points{display:grid;gap:8px;margin-bottom:16px}
.dcard__points li{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink);font-weight:500}
.dcard__points i{
  flex-shrink:0;width:17px;height:17px;margin-top:3px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.13);color:var(--orange);font-size:8px;
}
.dcard__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid #f3f0ea;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.dcard__meta{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.dcard__meta i{color:var(--orange);font-size:11px}
.dcard__actions{display:inline-flex;align-items:center;gap:12px;position:relative;z-index:6}
.dcard__wa{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(37,211,102,.13);color:#25d366;font-size:16px;
  transition:transform .35s var(--ease),background-color .3s var(--ease),
             color .3s var(--ease),box-shadow .35s var(--ease);
}
.dcard__wa:hover{background:#25d366;color:#fff;transform:translateY(-3px) scale(1.08);box-shadow:0 8px 18px rgba(37,211,102,.42)}
.dcard__link{
  display:inline-flex;align-items:center;gap:7px;position:relative;z-index:6;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--orange);white-space:nowrap;
}
.dcard__link i{transition:transform .4s var(--ease)}
.dcard:hover .dcard__link i{transform:translateX(5px)}

/* =====================================================================
   Spotlight
   ===================================================================== */
.spotlight{position:relative;overflow:hidden;background:#0f2537;padding:64px 0}
.spotlight::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 12% 0%,rgba(28,74,108,.9),rgba(11,28,44,1) 62%);
}
.spotlight .container{position:relative;z-index:2}
.spotlight__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.spotlight__copy h2{font-family:var(--display);color:#fff;font-size:clamp(26px,3vw,38px);line-height:1.22;margin-bottom:18px}
.spotlight__copy p{color:rgba(255,255,255,.74);font-size:14px;line-height:1.9;margin-bottom:14px}

.spotlight__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 30px}
.spotlight__facts div{position:relative;padding-left:16px}
.spotlight__facts div::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
}
.spotlight__facts b{display:block;font-family:var(--head);font-size:26px;font-weight:800;color:#fff;line-height:1}
.spotlight__facts span{display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.58);line-height:1.5}
.spotlight__btns{display:flex;gap:14px;flex-wrap:wrap}
.spotlight .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.spotlight .btn--line:hover{border-color:var(--orange)}

.spotlight__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px rgba(4,14,24,.55)}
.spotlight__media img{width:100%;height:430px;object-fit:cover;transition:transform 1.3s var(--ease)}
.spotlight__media:hover img{transform:scale(1.06)}
.spotlight__badge{
  position:absolute;left:18px;top:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 10px 24px rgba(245,130,32,.4);
}
.spotlight__badge i{font-size:10px}

/* =====================================================================
   Themes
   ===================================================================== */
.themes{background:linear-gradient(180deg,#fdf6ec,#fffdfa)}
.themes__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.theme{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);
  min-height:330px;color:#fff;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.theme:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.theme img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.theme:hover img{transform:scale(1.12)}
.theme__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,.15) 0%,rgba(9,20,32,.62) 52%,rgba(7,17,28,.94) 100%);
  transition:background .55s var(--ease);
}
.theme:hover .theme__grad{
  background:linear-gradient(180deg,rgba(9,20,32,.2) 0%,rgba(160,74,6,.66) 52%,rgba(122,55,2,.95) 100%);
}
.theme__body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 20px 24px}
.theme__ico{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:17px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:.5s var(--ease);
}
.theme:hover .theme__ico{background:#fff;color:var(--orange);transform:translateY(-5px) rotate(-7deg);border-color:transparent}
.theme h3{color:#fff;font-family:var(--display);font-size:19px;margin-bottom:9px;transition:transform .5s var(--ease)}
.theme:hover h3{transform:translateY(-3px)}
.theme p{
  font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.78);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .45s var(--ease),margin .5s var(--ease);
}
.theme:hover p{max-height:90px;opacity:1;margin-bottom:12px}
.theme__link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--orange-2);
}
.theme:hover .theme__link{color:#fff}
.theme:hover .theme__link i{animation:arrowNudge 1.5s ease-in-out .5s infinite}

/* =====================================================================
   Distances
   ===================================================================== */
.dist{border:1px solid #f0ebe3;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-xs)}
.dist__head,.dist__row{display:grid;grid-template-columns:1.1fr .8fr .9fr 1.4fr;gap:16px;padding:14px 24px;align-items:center}
.dist__head{
  background:linear-gradient(90deg,#12293f,#1b3f5c);
  font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}
.dist__row{border-top:1px solid #f4f1ec;font-size:13px;transition:background-color .35s var(--ease)}
.dist__row:nth-child(even){background:#fdfaf6}
.dist__row:hover{background:rgba(245,130,32,.07)}
.dist__row b{font-family:var(--head);font-size:14px;color:var(--ink);font-weight:700}
.dist__note{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 24px;background:#fdf6ec;border-top:1px solid #f4ecdf;
  font-size:12px;line-height:1.75;color:var(--body);
}
.dist__note i{color:var(--orange);margin-top:4px}

/* =====================================================================
   Seasons
   ===================================================================== */
.seasons{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}
.seasons__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.season{
  position:relative;background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:32px 26px 28px;text-align:center;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.season:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.season--best{border-color:rgba(245,130,32,.42);box-shadow:0 14px 34px rgba(245,130,32,.13)}
.season__badge{
  position:absolute;left:50%;top:-13px;transform:translateX(-50%);
  padding:5px 16px;border-radius:100px;white-space:nowrap;
  font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 8px 18px rgba(245,130,32,.34);
}
.season__ico{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:23px;
  transition:.45s var(--ease);
}
.season:hover .season__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:translateY(-5px) rotate(-8deg);box-shadow:0 12px 26px rgba(245,130,32,.34);
}
.season h3{font-family:var(--display);font-size:20px;margin-bottom:8px}
.season__temp{
  display:inline-block;margin-bottom:13px;padding:4px 14px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:700;
  background:rgba(19,41,63,.06);color:var(--ink);
}
.season p{font-size:12.5px;line-height:1.85}


/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1200px){
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .themes__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .dintro__grid{grid-template-columns:1fr;gap:26px}
  .spotlight__grid{grid-template-columns:1fr;gap:44px}
  .faqs__grid{grid-template-columns:1fr;gap:34px}
  .dist__head,.dist__row{grid-template-columns:1fr .8fr .9fr 1.2fr;padding:13px 18px;gap:12px;font-size:12.5px}
}
@media (max-width:900px){
  .seasons__grid{grid-template-columns:1fr;gap:26px}
  .spotlight__media img{height:330px}

  /* the table becomes a stack of labelled rows */
  .dist__head{display:none}
  .dist__row{grid-template-columns:1fr;gap:7px;padding:16px 18px}
  .dist__row span{display:flex;justify-content:space-between;gap:16px;font-size:12.5px}
  .dist__row span::before{
    content:attr(data-l);color:var(--muted);font-size:11px;font-weight:500;flex-shrink:0;
  }
}
@media (max-width:620px){
  .dgrid{grid-template-columns:1fr}
  .themes__grid{grid-template-columns:1fr}
  .theme{min-height:290px}
  .theme p{max-height:90px;opacity:1;margin-bottom:12px}
  .spotlight__facts{grid-template-columns:1fr;gap:12px}
  .dfilter{gap:8px}
  .dfilter__btn{padding:9px 15px;font-size:12px}
}


/* #####################################################################
   3. PAGE - /destinations/{slug}
   ##################################################################### */

/* =====================================================================
   Kashi Experts - destination detail page
   ---------------------------------------------------------------------
   Loaded after css/style.css and css/destinations.css (which owns .faq).

   Layout notes
   - The hero is a full-bleed photo with a slow ken-burns drift, a two-axis
     scrim so the picture still reads, and a warm glow anchored bottom-left.
   - The quick-facts card is a child of .container (never .container itself)
     so it keeps a gutter on a phone instead of bleeding to both edges.
   - The overview keeps the destination photo in the copy column: the
     sticky booking form on the right is tall, and without something under
     the two intro paragraphs the left column left a large empty well.
   ===================================================================== */

/* =====================================================================
   Section rhythm
   ===================================================================== */
@media (min-width:1081px){
  .dabout,.dhigh,.ditin,.dexp,.dgal,.dtips,.dnear{padding:88px 0}
}

/* =====================================================================
   Hero
   ===================================================================== */
.dhero{
  position:relative;overflow:hidden;background:var(--navy-2);
  padding:76px 0 86px;
  display:flex;align-items:center;min-height:min(72vh,620px);
}
.dhero__media{position:absolute;inset:0;overflow:hidden}
.dhero__bg{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.08);
  animation:dheroDrift 26s var(--ease-out) infinite alternate;
}
@keyframes dheroDrift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.6%,-2%,0)}
}
.dhero__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    /* left-side panel only - the photo is untouched from 74% across, so the
       banner keeps the brightness and detail of the original image */
    linear-gradient(90deg,rgba(8,22,37,.82) 0%,rgba(8,22,37,.72) 28%,rgba(8,22,37,.46) 48%,rgba(8,22,37,.16) 62%,rgba(8,22,37,0) 74%);
}
.dhero__inner{position:relative;z-index:4;color:#fff}
.dhero__inner > *{max-width:800px}
.dhero .crumbs{margin-bottom:22px}

.dhero__region{
  display:flex;width:-moz-fit-content;width:fit-content;
  align-items:center;gap:8px;margin-bottom:16px;
  padding:7px 16px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,var(--orange-2),var(--orange));
}
.dhero__region i{font-size:10px}
.dhero h1{
  font-family:var(--display);color:#fff;font-size:clamp(38px,5.6vw,68px);line-height:1.02;
  letter-spacing:-.025em;margin-bottom:12px;
}
.dhero__tag{
  position:relative;padding-left:18px;margin-bottom:30px;
  font-size:clamp(15px,1.4vw,18px);font-weight:300;letter-spacing:.01em;color:rgba(255,255,255,.86);
}
.dhero__tag::before{
  content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
}

/* the three headline facts read as small labelled tiles, not chips */
.dhero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.dhero__meta span{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico label" "ico value";
  align-items:center;gap:0 11px;
  padding:11px 18px;border-radius:13px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.dhero__meta span:hover{background:rgba(255,255,255,.14);border-color:rgba(245,130,32,.55);transform:translateY(-2px)}
.dhero__meta i{grid-area:ico;color:var(--orange-2);font-size:15px}
.dhero__meta em{
  grid-area:label;font-style:normal;
  font-family:var(--head);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);line-height:1.5;
}
.dhero__meta b{
  grid-area:value;font-family:var(--head);font-size:13px;font-weight:700;
  color:#fff;line-height:1.4;white-space:nowrap;
}
.dhero__btns{display:flex;flex-wrap:wrap;gap:14px}
.dhero .btn--ghost{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){
  .dhero__bg{animation:none;transform:scale(1.04)}
}

/* =====================================================================
   Quick facts - one card floating over the seam of the hero
   ===================================================================== */
.dfacts{background:#fff;padding:0}
.dfacts__card{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  margin-top:-58px;position:relative;z-index:6;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  box-shadow:0 26px 60px rgba(19,41,63,.14);overflow:hidden;
}
.dfact{
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;padding:28px 16px 26px;
  transition:background-color .35s var(--ease);
}
.dfact + .dfact::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:#f3eee6}
/* a warm bar wipes in from the top edge on hover */
.dfact::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange-2),var(--orange));
  transform:scaleX(0);transition:transform .45s var(--ease);
}
.dfact:hover{background:#fffaf3}
.dfact:hover::after{transform:scaleX(1)}
.dfact i{
  flex-shrink:0;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:17px;
  transition:background .4s var(--ease),color .3s var(--ease),transform .5s var(--ease),box-shadow .4s var(--ease);
}
.dfact:hover i{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:translateY(-3px) rotate(-8deg);box-shadow:0 12px 24px rgba(245,130,32,.34);
}
.dfact span{
  display:block;
  font-family:var(--head);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.dfact > div{min-width:0;width:100%}
.dfact b{display:block;font-family:var(--head);font-size:13px;color:var(--ink);line-height:1.45;overflow-wrap:break-word;text-wrap:balance}

/* =====================================================================
   Overview
   ===================================================================== */
.dabout__grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.8fr);gap:60px;align-items:start}
.dabout__copy h2{font-family:var(--display);font-size:clamp(28px,3.1vw,40px);line-height:1.18;margin-bottom:22px}
.dabout__text p{font-size:15px;line-height:2;margin-bottom:18px}
.dabout__text p:first-child{font-size:16px;color:var(--ink);font-weight:400}
.dabout__text p:last-child{margin-bottom:0}

/* the destination photo, captioned - this is what fills the column so the
   copy and the sticky form finish at roughly the same height */
.dabout__figure{
  position:relative;margin:30px 0 0;overflow:hidden;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.dabout__figure img{width:100%;height:340px;object-fit:cover;transition:transform 1.4s var(--ease)}
.dabout__figure:hover img{transform:scale(1.07)}
.dabout__figure-grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,0) 42%,rgba(9,20,32,.86) 100%);
}
.dabout__figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff}
.dabout__figure-region{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;
  padding:5px 12px;border-radius:100px;
  font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.dabout__figure-region i{color:var(--orange-2);font-size:9px}
.dabout__figure figcaption b{
  display:block;font-family:var(--display);font-size:23px;font-weight:700;line-height:1.25;
  text-shadow:0 3px 18px rgba(0,0,0,.4);
}

.dabout__side{position:sticky;top:100px;display:grid;gap:20px}

/* ---------- enquiry / book-now form ---------- */
.dform{
  border-radius:var(--radius-lg);padding:28px 26px 26px;color:#fff;
  background:linear-gradient(155deg,#1d4e70 0%,#0c2136 70%);
  box-shadow:0 26px 56px rgba(9,24,40,.34);
  position:relative;overflow:hidden;
}
.dform::before{
  content:"";position:absolute;right:-70px;top:-70px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,32,.36),transparent 68%);pointer-events:none;
}
.dform::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2),#25d366);
}
.dform__head{position:relative;z-index:2;margin-bottom:22px}
.dform__badge{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;
  padding:6px 14px;border-radius:100px;
  font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 8px 18px rgba(245,130,32,.34);
}
.dform__badge i{font-size:9px}
.dform h3{color:#fff;font-family:var(--display);font-size:24px;margin-bottom:9px}
.dform__head p{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.66)}

.dform__row{position:relative;z-index:2;margin-bottom:14px}
.dform__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dform label{
  display:block;margin-bottom:7px;
  font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.dform label em{color:var(--orange-2);font-style:normal}
.dform input,.dform select,.dform textarea{
  width:100%;padding:12px 15px;border-radius:10px;
  font-family:var(--font);font-size:13px;color:var(--ink);background:#fff;
  border:1.5px solid transparent;outline:none;resize:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.dform input::placeholder,.dform textarea::placeholder{color:#a7aeb8}
.dform input:focus,.dform select:focus,.dform textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 4px rgba(245,130,32,.22);
}
.dform select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6773' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:32px;
}
.dform__row.has-error input,.dform__row.has-error select{
  border-color:#e5533d;box-shadow:0 0 0 4px rgba(229,83,61,.24);
}
.dform__row.has-error label{color:#ff9d8c}

.dform__submit{position:relative;z-index:2;width:100%;margin-top:8px}
.dform__sent{
  position:relative;z-index:2;display:none;gap:9px;align-items:flex-start;
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:rgba(37,211,102,.16);border:1px solid rgba(37,211,102,.4);
  font-size:11.5px;line-height:1.7;color:#d8ffe8;
}
.dform.is-sent .dform__sent{display:flex}
.dform__sent i{color:#4ade80;margin-top:3px}
.dform__note{
  position:relative;z-index:2;margin-top:15px;
  font-size:11px;line-height:1.7;color:rgba(255,255,255,.52);text-align:center;
}
.dform__note a{color:var(--orange-2);font-weight:600;white-space:nowrap}
.dform__note a:hover{text-decoration:underline}

/* ---------- compact plan card (replaces the form under 900px) ---------- */
.dabout__quick{
  display:none;position:relative;overflow:hidden;
  border-radius:var(--radius-lg);padding:26px 22px 22px;color:#fff;
  background:linear-gradient(155deg,#1d4e70 0%,#0c2136 70%);
  box-shadow:0 20px 44px rgba(9,24,40,.32);
}
.dabout__quick::before{
  content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,32,.32),transparent 68%);pointer-events:none;
}
.dabout__quick > *{position:relative;z-index:2}
.dabout__quick-badge{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;
  padding:6px 14px;border-radius:100px;
  font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,var(--orange-2),var(--orange));
}
.dabout__quick-badge i{font-size:9px}
.dabout__quick h3{color:#fff;font-family:var(--display);font-size:22px;margin-bottom:9px}
.dabout__quick p{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.7);margin-bottom:20px}
.dabout__quick .btn{width:100%;margin-bottom:10px}
.dabout__call{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:4px;padding:11px 16px;
  border-radius:6px;border:1px solid rgba(255,255,255,.22);
  font-family:var(--head);font-size:13.5px;font-weight:700;color:#fff;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.dabout__call i{color:var(--orange-2);font-size:12px;transition:color .3s var(--ease)}
.dabout__call:hover{background:rgba(255,255,255,.08);border-color:var(--orange)}

/* =====================================================================
   Highlights
   ===================================================================== */
.dhigh{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}
.dhigh__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dhigh__card{
  position:relative;overflow:hidden;background:#fff;border:1px solid #f1ece4;
  border-radius:var(--radius-lg);padding:30px 26px 28px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.dhigh__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange-2),var(--orange));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.dhigh__card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.dhigh__card:hover::before{transform:scaleX(1)}
/* the index sits behind the card as a large ghost numeral */
.dhigh__no{
  position:absolute;right:14px;top:2px;pointer-events:none;
  font-family:var(--display);font-size:64px;font-weight:800;line-height:1;
  color:rgba(245,130,32,.09);
  transition:color .5s var(--ease),transform .6s var(--ease);
}
.dhigh__card:hover .dhigh__no{color:rgba(245,130,32,.17);transform:translateY(-3px)}
.dhigh__ico{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:16px;margin-bottom:20px;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:22px;
  transition:.45s var(--ease);
}
.dhigh__card:hover .dhigh__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:rotate(-7deg) translateY(-4px);box-shadow:0 14px 28px rgba(245,130,32,.36);
}
.dhigh__card h3{position:relative;font-size:17px;margin-bottom:10px;transition:color .35s var(--ease)}
.dhigh__card:hover h3{color:var(--orange)}
.dhigh__card p{position:relative;font-size:13px;line-height:1.9}

/* =====================================================================
   Itinerary
   ===================================================================== */
.ditin{background:#fff}
.ditin__list{position:relative;max-width:900px;margin:0 auto;display:grid;gap:20px}
/* the spine runs behind the numbered discs and fades out at both ends */
.ditin__spine{
  position:absolute;left:49px;top:34px;bottom:34px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(245,130,32,.4) 12%,rgba(245,130,32,.4) 88%,transparent);
}
.ditin__step{
  position:relative;z-index:2;display:flex;gap:24px;align-items:flex-start;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:26px 28px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.ditin__step:hover{transform:translateX(8px);box-shadow:var(--shadow-md);border-color:rgba(245,130,32,.45)}
.ditin__num{
  flex-shrink:0;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#1d3f5c,#0f2537);
  box-shadow:0 0 0 6px #fff,0 10px 22px rgba(15,37,55,.2);
  transition:.45s var(--ease);
}
.ditin__step:hover .ditin__num{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));
  box-shadow:0 0 0 6px #fff,0 12px 26px rgba(245,130,32,.4);
}
.ditin__day{
  display:inline-block;margin-bottom:9px;padding:4px 13px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);background:rgba(245,130,32,.11);
}
.ditin__body h3{font-size:18px;margin-bottom:9px}
.ditin__body p{font-size:13.5px;line-height:1.95}
.ditin__note{
  display:flex;gap:13px;align-items:flex-start;max-width:900px;margin:24px auto 0;
  padding:18px 22px;border-radius:var(--radius);
  background:linear-gradient(120deg,#fdf6ec,#fffaf3);border:1px solid #f4ecdf;
  font-size:13px;line-height:1.85;
}
.ditin__note i{color:var(--orange);margin-top:4px}

/* =====================================================================
   Experiences
   ===================================================================== */
.dexp{background:linear-gradient(180deg,#fdf6ec,#fffdfa)}
.dexp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.dexp__card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:28px 24px 26px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.dexp__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);
}
.dexp__card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.dexp__card:hover::before{transform:scaleY(1)}
.dexp__ico{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 0 18px;border-radius:16px;
  background:rgba(245,130,32,.1);color:var(--orange);font-size:21px;
  transition:.45s var(--ease);
}
.dexp__card:hover .dexp__ico{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:translateY(-4px) rotate(-8deg);box-shadow:0 14px 28px rgba(245,130,32,.36);
}
.dexp__card h3{font-size:16px;margin-bottom:10px;transition:color .35s var(--ease)}
.dexp__card:hover h3{color:var(--orange)}
.dexp__card p{font-size:12.5px;line-height:1.9}

/* =====================================================================
   Gallery - a staggered strip rather than a flat row of equal squares
   ===================================================================== */
.dgal{background:#fff}
.dgal__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;
  align-items:start;padding-bottom:36px;
}
.dgal__item{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/5;
  box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.dgal__item:nth-child(even){transform:translateY(36px)}
.dgal__item:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.dgal__item:nth-child(even):hover{transform:translateY(28px)}
.dgal__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.dgal__item:hover img{transform:scale(1.12)}
.dgal__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,0) 45%,rgba(9,20,32,.8) 100%);
  transition:opacity .5s var(--ease);
}
.dgal__item:hover .dgal__grad{
  background:linear-gradient(180deg,rgba(9,20,32,.12) 30%,rgba(196,92,6,.82) 100%);
}
.dgal__ico{
  position:absolute;left:0;right:0;top:0;bottom:34%;margin:auto;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;color:var(--orange);font-size:15px;
  opacity:0;transform:scale(.4) translateY(14px);
  transition:opacity .4s var(--ease),transform .55s cubic-bezier(.34,1.56,.64,1);
}
.dgal__item:hover .dgal__ico{opacity:1;transform:scale(1) translateY(0)}
/* the label stays out of the way until hover - four repeated captions in a
   row of photographs reads as noise, but the arrow chip keeps the affordance */
.dgal__cap{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:flex;align-items:center;gap:0;
  padding:0;color:#fff;
  font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.01em;
}
.dgal__cap b{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-weight:700;
  transition:max-width .5s var(--ease),opacity .35s var(--ease),padding .5s var(--ease);
}
.dgal__cap i{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;font-size:11px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .4s var(--ease),color .3s var(--ease),transform .4s var(--ease);
}
.dgal__item:hover .dgal__cap b{max-width:130px;opacity:1;padding:0 12px 0 4px}
.dgal__item:hover .dgal__cap i{background:#fff;color:var(--orange);transform:translateX(2px)}

/* =====================================================================
   Tips
   ===================================================================== */
.dtips{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}
.dtips__grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:60px;align-items:start}
.dtips__intro{position:sticky;top:110px}
.dtips__intro h2{font-family:var(--display);font-size:clamp(26px,2.9vw,36px);line-height:1.2;margin-bottom:16px}
.dtips__intro p{font-size:14px;line-height:1.9;margin-bottom:24px}
.dtips__list{counter-reset:tip;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.dtips__list li{
  position:relative;overflow:hidden;
  counter-increment:tip;display:flex;gap:18px;align-items:center;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);padding:20px 22px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .4s var(--ease);
}
.dtips__list li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.dtips__list li:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);border-color:rgba(245,130,32,.45)}
.dtips__list li:hover::before{transform:scaleY(1)}
.dtips__list li span{
  flex-shrink:0;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:13px;font-weight:800;
  background:rgba(245,130,32,.12);color:var(--orange);
  transition:.4s var(--ease);
}
.dtips__list li span::before{content:counter(tip,decimal-leading-zero)}
.dtips__list li:hover span{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  transform:rotate(-6deg);box-shadow:0 10px 20px rgba(245,130,32,.3);
}
.dtips__list li p{font-size:13.5px;line-height:1.9}

/* =====================================================================
   Nearby destinations
   ===================================================================== */
.dnear{background:#fff}
.dnear__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.dnear__card{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid #f1ece4;border-radius:var(--radius-lg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.dnear__card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:#fff}
.dnear__media{position:relative;overflow:hidden;aspect-ratio:16/11}
.dnear__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease-out)}
.dnear__card:hover .dnear__media img{transform:scale(1.11)}
.dnear__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,.05) 38%,rgba(9,20,32,.86) 100%);
}
.dnear__wa{
  position:absolute;right:14px;top:14px;z-index:6;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#25d366;font-size:15px;
  opacity:0;transform:translateY(-14px) scale(.6);
  box-shadow:0 8px 18px rgba(9,20,32,.24);
  transition:opacity .4s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),
             background-color .3s var(--ease),color .3s var(--ease);
}
.dnear__card:hover .dnear__wa{opacity:1;transform:translateY(0) scale(1)}
.dnear__wa:hover{background:#25d366;color:#fff;transform:translateY(0) scale(1.12)}

.dnear__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 20px;color:#fff;transition:transform .5s var(--ease)}
.dnear__card:hover .dnear__cap{transform:translateY(-4px)}
.dnear__cap h3{color:#fff;font-family:var(--display);font-size:21px;margin-bottom:3px}
.dnear__cap p{font-size:12px;color:rgba(255,255,255,.82)}
.dnear__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px 17px;
}
.dnear__meta{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.dnear__meta i{color:var(--orange);font-size:11px}
.dnear__link{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:12px;font-weight:700;color:var(--orange)}
.dnear__link i{transition:transform .4s var(--ease)}
.dnear__card:hover .dnear__link i{transform:translateX(5px)}

/* =====================================================================
   Responsive - the six-across facts bar steps down to a tile grid, the
   in-page form gives way to the booking popup, and the staggered gallery
   flattens once there is no longer room for the offset to read.
   ===================================================================== */

@media (max-width:1200px){
  .dfacts__card{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dfact:nth-child(n+4){border-top:1px solid #f3eee6}
  .dfact:nth-child(4)::before{display:none}
  .dexp__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1080px){
  .dabout__grid{grid-template-columns:1fr;gap:40px}
  .dabout__side{position:static}
  .dhigh__grid{grid-template-columns:repeat(2,1fr)}
  .dnear__grid{grid-template-columns:repeat(2,1fr)}
  .dtips__grid{grid-template-columns:1fr;gap:32px}
  .dtips__intro{position:static}
  .dhero{min-height:0;padding:58px 0 74px}
}

/* ---- tablets and phones: popup instead of the in-page form ---- */
@media (max-width:900px){
  .dform{display:none}
  .dabout__quick{display:block}
  .dabout__figure img{height:300px}

  .dhero{padding:44px 0 66px}
  .dhero__meta b{white-space:normal}
  .dfacts__card{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-40px}
  .dfact::before{display:none!important}
  .dfact{border-top:1px solid #f3eee6;border-left:1px solid #f3eee6}
  .dfact:nth-child(-n+2){border-top:0}
  .dfact:nth-child(2n+1){border-left:0}

  .dgal__item:nth-child(even){transform:none}
  .dgal__item:nth-child(even):hover{transform:translateY(-8px)}
  .dgal__grid{padding-bottom:0}
}

@media (max-width:720px){
  .dfacts__card{border-radius:var(--radius)}
  .dfact{padding:20px 12px 18px;gap:10px}
  .dfact i{width:38px;height:38px;font-size:15px;border-radius:12px}
  .dfact span{font-size:9px;letter-spacing:.12em}
  .dfact b{font-size:12px}

  .dabout__text p,.dabout__text p:first-child{font-size:14px;line-height:1.9}
  .dabout__figure{margin-top:26px}
  .dabout__figure img{height:230px}
  .dabout__figure figcaption{padding:18px 20px}
  .dabout__figure figcaption b{font-size:19px}

  /* highlights become icon-beside-title rows, which halves their height */
  .dhigh__grid{grid-template-columns:1fr;gap:14px}
  .dhigh__card{
    display:grid;grid-template-columns:46px 1fr;grid-template-areas:"ico title" ". text";
    gap:8px 15px;align-items:center;padding:20px 18px;
  }
  .dhigh__no{display:none}
  .dhigh__ico{grid-area:ico;margin:0;width:46px;height:46px;font-size:18px;border-radius:13px}
  .dhigh__card h3{grid-area:title;margin:0;font-size:15px}
  .dhigh__card p{grid-area:text;font-size:12.5px;line-height:1.8}

  .ditin__spine{left:38px;top:28px;bottom:28px}
  .ditin__step{gap:16px;padding:22px 18px}
  .ditin__num{width:40px;height:40px;font-size:16px;box-shadow:0 0 0 5px #fff,0 8px 18px rgba(15,37,55,.18)}
  .ditin__body h3{font-size:16px}
  .ditin__body p{font-size:13px;line-height:1.85}

  .dexp__grid{grid-template-columns:1fr 1fr;gap:14px}
  .dexp__card{padding:22px 16px 20px}
  .dexp__ico{width:46px;height:46px;font-size:18px;margin-bottom:14px;border-radius:13px}
  .dexp__card h3{font-size:14px;margin-bottom:8px}
  .dexp__card p{font-size:12px;line-height:1.8}

  .dgal__grid{grid-template-columns:1fr 1fr;gap:12px}
  .dgal__item{border-radius:var(--radius)}
  .dgal__cap{padding:12px 14px;font-size:12px}

  .dtips__list li{padding:16px 16px;gap:14px}
  .dtips__list li span{width:34px;height:34px;font-size:12px;border-radius:10px}
  .dtips__list li p{font-size:13px}

  .dnear__grid{grid-template-columns:1fr;gap:18px}
  .dnear__media{aspect-ratio:16/9}
  .dnear__cap h3{font-size:19px}
}

@media (max-width:520px){
  .dhero{padding:34px 0 58px}
  .dhero .crumbs{margin-bottom:16px;padding:6px 14px;font-size:11.5px}
  .dhero__tag{font-size:14.5px;margin-bottom:22px;padding-left:14px}
  .dhero__meta{gap:8px;margin-bottom:24px;display:grid;grid-template-columns:1fr 1fr}
  .dhero__meta span{padding:10px 14px;border-radius:11px}
  .dhero__meta span:last-child{grid-column:1 / -1}
  .dhero__meta i{font-size:13px}
  .dhero__btns{gap:10px}
  .dhero__btns .btn{flex:1 1 100%;padding:14px 18px;font-size:14px}

  .dfacts__card{margin-top:-32px}
  .dexp__grid{grid-template-columns:1fr}
  .dexp__card{display:grid;grid-template-columns:46px 1fr;grid-template-areas:"ico title" ". text";
    gap:8px 15px;align-items:center;padding:20px 18px}
  .dexp__ico{grid-area:ico;margin:0}
  .dexp__card h3{grid-area:title;margin:0}
  .dexp__card p{grid-area:text}

  .ditin__spine{display:none}
  .ditin__step{flex-direction:column;gap:14px}
  .ditin__num{box-shadow:0 8px 18px rgba(15,37,55,.18)}
}


/* #####################################################################
   3. PAGE - /packages
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Packages listing page
   ---------------------------------------------------------------------
   Mobile first. Base rules are the single-column phone layout; the
   min-width blocks add columns as the screen earns them.

   Loaded after css/style.css (tokens, buttons, page hero) and
   css/destinations.css (the shared FAQ accordion).
   ===================================================================== */

/* =====================================================================
   Intro
   ===================================================================== */
.pkintro__grid{display:grid;gap:26px}
.pkintro__grid h2{font-family:var(--display);font-size:26px;line-height:1.24}
.pkintro__copy p{font-size:14px;line-height:1.9;margin-bottom:20px}
.pkintro__pills{display:flex;flex-wrap:wrap;gap:9px}
.pkintro__pills span{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:100px;font-size:12px;font-weight:500;
  background:rgba(245,130,32,.08);border:1px solid rgba(245,130,32,.2);color:var(--ink);
  transition:transform .4s var(--ease),background-color .35s var(--ease);
}
.pkintro__pills i{color:var(--orange);font-size:11px}
.pkintro__pills span:hover{transform:translateY(-3px);background:rgba(245,130,32,.14)}

/* =====================================================================
   Filter + sort bar
   ===================================================================== */
.pkgrid-sec{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}

.pkbar{margin-bottom:26px}

/* the filter row scrolls sideways on a phone rather than wrapping to
   three cramped lines - the scrollbar itself is hidden */
.pkfilter{
  display:flex;gap:8px;
  overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 -20px 14px;padding:2px 20px 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.pkfilter::-webkit-scrollbar{display:none}
.pkfilter__btn{
  flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 17px;border-radius:100px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid #efe6d8;white-space:nowrap;
  transition:transform .35s var(--ease),background-color .35s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease);
}
.pkfilter__btn span{
  min-width:19px;height:19px;padding:0 5px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;background:rgba(245,130,32,.12);color:var(--orange);
  transition:.3s var(--ease);
}
.pkfilter__btn:hover{box-shadow:var(--shadow-sm);border-color:rgba(245,130,32,.4)}
.pkfilter__btn.is-active{
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(245,130,32,.32);
}
.pkfilter__btn.is-active span{background:rgba(255,255,255,.24);color:#fff}

.pksort{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pksort__count{font-size:12.5px;color:var(--body)}
.pksort__count b{font-family:var(--head);color:var(--ink);font-weight:800}
.pksort__pick{display:flex;align-items:center;gap:9px;flex:none}
.pksort__pick label{
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--muted);
  display:none;
}
.pksort__pick select,
.pkrefine__pick select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:9px 34px 9px 15px;border-radius:100px;
  font-family:var(--head);font-size:12px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid #efe6d8;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b95a2' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.pksort__pick select:focus,
.pkrefine__pick select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.14)}

/* ---------------------------------------------------------------------
   Refine row - search, budget and duration
   ---------------------------------------------------------------------
   The circuit tabs above answer "which trip"; these answer "which of
   those fits me", so they sit as a second row inside the same bar and
   narrow the grid together rather than replacing each other. Stacked on
   a phone, one line from 720px up.
   --------------------------------------------------------------------- */
.pkrefine{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}

.pkrefine__search{position:relative;display:flex;align-items:center}
.pkrefine__search > i{
  position:absolute;left:16px;font-size:12.5px;color:var(--muted);pointer-events:none;
}
.pkrefine__search input{
  width:100%;
  padding:11px 42px 11px 39px;border-radius:100px;
  font-family:var(--font);font-size:13px;color:var(--ink);
  background:#fff;border:1px solid #efe6d8;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.pkrefine__search input::placeholder{color:var(--muted)}
.pkrefine__search input:focus{
  outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.14);
}
/* the browser's own clear affordance would sit on top of ours */
.pkrefine__search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.pkrefine__clear{
  position:absolute;right:7px;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.pkrefine__clear:hover{background:rgba(245,130,32,.12);color:var(--orange)}

.pkrefine__picks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pkrefine__pick{display:flex;align-items:center;gap:9px}
.pkrefine__pick label{
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--muted);
  display:none;
}

.pkrefine__reset{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:100px;
  font-family:var(--head);font-size:12px;font-weight:700;color:var(--orange);
  background:rgba(245,130,32,.1);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.pkrefine__reset:hover{background:var(--orange);color:#fff}

/* =====================================================================
   Package card
   ===================================================================== */
.pkgrid{display:grid;gap:20px}
.pkgrid__empty{text-align:center;padding:36px 0 0;font-size:14px;color:var(--muted)}

.pcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:#fff}
.pcard.is-hidden{display:none}
.pcard.is-entering{animation:pcardIn .5s var(--ease) both}
@keyframes pcardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.pcard__media{position:relative;overflow:hidden;aspect-ratio:16/10}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease-out)}
.pcard:hover .pcard__media img{transform:scale(1.09)}
.pcard__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,.34) 0%,rgba(9,20,32,0) 38%,rgba(9,20,32,.72) 100%);
}

.pcard__badge{
  position:absolute;left:13px;top:13px;z-index:3;
  padding:5px 12px;border-radius:100px;
  font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 8px 18px rgba(245,130,32,.4);
}
.pcard__dur{
  position:absolute;right:13px;top:13px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;color:#fff;
  background:rgba(10,24,38,.58);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pcard__dur i{font-size:9.5px;color:var(--orange-2)}
.pcard__rating{
  position:absolute;left:13px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:#fff;
}
.pcard__rating i{color:#ffc531;font-size:11px}
.pcard__rating em{font-style:normal;font-weight:500;color:rgba(255,255,255,.7);font-size:10.5px}

.pcard__body{display:flex;flex-direction:column;flex:1;padding:16px 17px 17px}
.pcard__theme{
  display:block;font-family:var(--head);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;
}
.pcard__body h3{font-size:18px;line-height:1.25;margin-bottom:9px}
.pcard:hover .pcard__body h3{color:var(--orange-dark)}

.pcard__places{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.pcard__places span{
  padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:500;
  background:#f6f7f9;color:var(--body);border:1px solid #eef0f3;
}
.pcard__sum{font-size:12.5px;line-height:1.8;margin-bottom:13px}

.pcard__list{display:grid;gap:7px;margin-bottom:15px}
.pcard__list li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:11.5px;line-height:1.6;color:var(--ink);font-weight:500;
}
.pcard__list i{
  flex-shrink:0;width:16px;height:16px;margin-top:2px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.13);color:var(--orange);font-size:7.5px;
}

.pcard__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid #f3f0ea;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pcard__price{font-size:10.5px;color:var(--muted);line-height:1.5}
.pcard__price b{
  display:block;font-family:var(--head);font-size:20px;font-weight:800;color:var(--ink);
}
.pcard__price del{font-size:11px;color:var(--muted);margin-right:5px}
.pcard__price i{font-style:normal;color:var(--orange);font-weight:600}

.pcard__acts{position:relative;z-index:6;display:flex;align-items:center;gap:9px;flex:none}
.pcard__link{
  display:none;align-items:center;gap:6px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--ink);
  transition:color .3s var(--ease);
}
.pcard__link i{color:var(--orange);transition:transform .4s var(--ease)}
.pcard__link:hover{color:var(--orange)}
.pcard:hover .pcard__link i{transform:translateX(4px)}
.pcard__book{white-space:nowrap}

/* =====================================================================
   How booking works
   ===================================================================== */
.pksteps{background:#fff}
.pksteps__grid{display:grid;gap:16px;counter-reset:pkstep}
.pkstep{
  position:relative;padding:22px 20px;
  background:var(--cream-2);border:1px solid #f4ece0;border-radius:var(--radius-lg);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .4s var(--ease);
}
.pkstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);background:#fff}
.pkstep__num{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;margin-bottom:15px;
  font-family:var(--head);font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));
  box-shadow:0 10px 22px rgba(245,130,32,.3);
  transition:transform .5s var(--ease);
}
.pkstep:hover .pkstep__num{transform:rotate(-8deg) scale(1.06)}
.pkstep h3{font-size:16px;margin-bottom:8px}
.pkstep p{font-size:12.5px;line-height:1.8}

/* =====================================================================
   What every package includes
   ===================================================================== */
.pkincl{background:linear-gradient(180deg,#fdf6ec,#fffdfa)}
.pkincl__grid{display:grid;gap:30px;align-items:start}
.pkincl__intro h2{font-family:var(--display);font-size:26px;line-height:1.24;margin-bottom:14px}
.pkincl__intro p{font-size:13.5px;line-height:1.85;margin-bottom:22px}
.pkincl__list{display:grid;gap:12px}
.pkincl__item{
  display:flex;gap:13px;align-items:flex-start;
  padding:15px 16px;border-radius:var(--radius);
  background:#fff;border:1px solid #f1ece4;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s var(--ease);
}
.pkincl__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(245,130,32,.35)}
.pkincl__item i{
  flex:none;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.11);color:var(--orange);font-size:14px;
  transition:background-color .35s var(--ease),color .3s var(--ease),transform .45s var(--ease);
}
.pkincl__item:hover i{background:var(--orange);color:#fff;transform:rotate(-8deg)}
.pkincl__item h4{font-size:13.5px;margin-bottom:4px}
.pkincl__item p{font-size:11.5px;line-height:1.7}

/* =====================================================================
   Sticky "browse" helper on phones - jumps back to the filter row
   ===================================================================== */
.pkjump{
  position:fixed;left:50%;bottom:18px;z-index:40;
  transform:translate(-50%,90px);
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:100px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 14px 32px rgba(245,130,32,.42);
  opacity:0;visibility:hidden;
  transition:transform .45s var(--ease-out),opacity .35s var(--ease),visibility .35s;
}
.pkjump.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.pkjump i{font-size:11px}

/* =====================================================================
   480px and up - two columns of cards
   ===================================================================== */
@media (min-width:480px){
  .pkgrid{grid-template-columns:repeat(2,1fr);gap:18px}
  .pksteps__grid{grid-template-columns:repeat(2,1fr)}
  .pcard__link{display:inline-flex}
  .pksort__pick label,
  .pkrefine__pick label{display:block}
}

/* =====================================================================
   720px and up
   ===================================================================== */
@media (min-width:720px){
  .pkintro__grid h2{font-size:30px}
  .pkfilter{
    flex-wrap:wrap;overflow:visible;margin:0 0 16px;padding:0;
    justify-content:center;
  }
  .pkfilter__btn:hover{transform:translateY(-3px)}
  .pkrefine{flex-direction:row;align-items:center;justify-content:center;gap:12px}
  .pkrefine__search{flex:1 1 300px;max-width:420px}
  .pkincl__list{grid-template-columns:repeat(2,1fr)}
  .pkincl__intro h2{font-size:30px}
  .pkjump{display:none}
}

/* =====================================================================
   1000px and up - three columns, side-by-side intro
   ===================================================================== */
@media (min-width:1000px){
  .pkintro__grid{grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
  .pkintro__grid h2{font-size:clamp(28px,3vw,36px)}
  .pkgrid{grid-template-columns:repeat(3,1fr);gap:24px}
  .pksteps__grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .pkincl__grid{grid-template-columns:minmax(260px,360px) 1fr;gap:56px}
  .pkincl__intro h2{font-size:clamp(26px,2.8vw,34px)}
}


/* #####################################################################
   3. PAGE - /packages/{slug}
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Package detail page
   ---------------------------------------------------------------------
   Mobile first. The base rules are the phone layout - one column, an
   itinerary that collapses, and a fixed price bar pinned to the bottom
   of the screen. The min-width blocks widen it out and swap that bar
   for a sticky booking card beside the content.

   Loaded after css/style.css, css/destinations.css (the shared FAQ
   accordion) and css/packages.css.
   ===================================================================== */

/* =====================================================================
   Hero
   ===================================================================== */
.pdhero{position:relative;overflow:hidden;background:var(--navy-2);padding:44px 0 78px}
.pdhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.pdhero__scrim{
  position:absolute;inset:0;
  background:
    /* left-side panel only - the photo is untouched from 74% across, so the
       banner keeps the brightness and detail of the original image */
    linear-gradient(90deg,rgba(10,28,47,.82) 0%,rgba(10,28,47,.72) 28%,rgba(10,28,47,.46) 48%,rgba(10,28,47,.16) 62%,rgba(10,28,47,0) 74%);
}
.pdhero__inner{position:relative;z-index:4;color:#fff}
.pdhero__inner > *{max-width:820px}
.pdhero .crumbs{margin-bottom:18px}

.pdhero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pdhero__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:100px;
  font-family:var(--head);font-size:11px;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pdhero__chip i{font-size:10px;color:var(--orange-2)}
.pdhero__chip--hot{
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  border-color:transparent;box-shadow:0 8px 20px rgba(245,130,32,.4);
}
.pdhero__chip--hot i{color:#fff}
.pdhero__chip--star i{color:#ffc531}

.pdhero h1{
  font-family:var(--display);color:#fff;font-size:29px;line-height:1.12;
  margin-bottom:12px;
}
.pdhero__tag{font-size:14.5px;color:rgba(255,255,255,.8);margin-bottom:20px}

.pdhero__meta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.pdhero__meta span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:10px;font-size:11.5px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.86);
}
.pdhero__meta i{color:var(--orange-2);font-size:11px}

.pdhero__price{
  display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;margin-bottom:20px;
  font-size:11.5px;color:rgba(255,255,255,.6);
}
.pdhero__price b{font-family:var(--head);font-size:30px;font-weight:800;color:#fff;line-height:1}
.pdhero__price del{color:rgba(255,255,255,.45);font-size:14px}
.pdhero__save{
  padding:4px 11px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;
  background:rgba(37,211,102,.18);border:1px solid rgba(37,211,102,.4);color:#4ade80;
}
.pdhero__btns{display:grid;gap:11px}

/* =====================================================================
   Quick facts
   ===================================================================== */
.pdfacts{background:#fff;padding:0}
.pdfacts__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  margin-top:-40px;position:relative;z-index:5;overflow:hidden;
  box-shadow:var(--shadow-md);
}
.pdfact{
  display:flex;gap:11px;align-items:flex-start;padding:15px 14px;
  border-bottom:1px solid #f4f0ea;
  transition:background-color .35s var(--ease);
}
.pdfact:nth-child(odd){border-right:1px solid #f4f0ea}
.pdfact:hover{background:#fdf7ef}
.pdfact i{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.11);color:var(--orange);font-size:12.5px;
  transition:background-color .35s var(--ease),color .3s var(--ease),transform .45s var(--ease);
}
.pdfact:hover i{background:var(--orange);color:#fff;transform:rotate(-8deg)}
.pdfact span{display:block;font-size:10px;color:var(--muted);margin-bottom:2px}
.pdfact b{display:block;font-family:var(--head);font-size:12px;color:var(--ink);line-height:1.4}

/* =====================================================================
   Overview + booking card
   ===================================================================== */
.pdabout__grid{display:grid;gap:34px;align-items:start}
.pdabout__copy h2{font-family:var(--display);font-size:26px;line-height:1.24;margin-bottom:16px}
.pdabout__copy p{font-size:14px;line-height:1.9;margin-bottom:18px}

.pdpoints{display:grid;gap:11px;margin-top:22px}
.pdpoints li{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--radius);
  background:var(--cream-2);border:1px solid #f4ece0;
  font-size:12.5px;line-height:1.7;color:var(--ink);font-weight:500;
}
.pdpoints i{
  flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.14);color:var(--orange);font-size:9px;
}

/* the booking card - a normal block on a phone, sticky beside the copy later */
.pdbook{
  position:relative;overflow:hidden;
  padding:24px 22px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#13293f,#1c4664);
  box-shadow:var(--shadow-lg);
}
.pdbook::before{
  content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,32,.34),transparent 68%);
}
.pdbook__head{position:relative;z-index:2;margin-bottom:18px}
.pdbook__badge{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  padding:5px 13px;border-radius:100px;
  font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(245,130,32,.2);border:1px solid rgba(245,130,32,.42);color:var(--orange-2);
}
.pdbook__badge i{font-size:9px}
.pdbook h3{color:#fff;font-family:var(--display);font-size:21px;margin-bottom:8px}
.pdbook__head p{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.68)}

.pdbook__price{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;
  padding:16px 0;margin-bottom:16px;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  font-size:11px;color:rgba(255,255,255,.55);
}
.pdbook__price b{font-family:var(--head);font-size:28px;font-weight:800;color:#fff;line-height:1}
.pdbook__price del{color:rgba(255,255,255,.4);font-size:13px}

.pdbook__list{position:relative;z-index:2;display:grid;gap:9px;margin-bottom:20px}
.pdbook__list li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.76);
}
.pdbook__list i{color:#4ade80;font-size:10px;margin-top:4px;flex:none}
.pdbook__btns{position:relative;z-index:2;display:grid;gap:10px}
.pdbook__note{
  position:relative;z-index:2;margin-top:14px;text-align:center;
  font-size:11px;line-height:1.7;color:rgba(255,255,255,.55);
}
.pdbook__note a{color:var(--orange-2);font-weight:600}
.pdbook__note a:hover{text-decoration:underline}

/* =====================================================================
   Itinerary - an accordion on a phone
   ===================================================================== */
.pditin{background:linear-gradient(180deg,#fffdfa,#fdf6ec)}
.pditin__list{display:grid;gap:12px}

.pdday{
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);overflow:hidden;
  transition:border-color .35s var(--ease),box-shadow .4s var(--ease);
}
.pdday:hover{border-color:rgba(245,130,32,.4)}
.pdday.is-open{border-color:rgba(245,130,32,.5);box-shadow:var(--shadow-sm)}

.pdday__q{
  width:100%;display:flex;align-items:center;gap:13px;
  padding:15px 16px;text-align:left;
  transition:color .3s var(--ease);
}
.pdday__num{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:13px;font-weight:800;color:var(--orange);
  background:rgba(245,130,32,.11);
  transition:background-color .35s var(--ease),color .3s var(--ease),transform .45s var(--ease);
}
.pdday.is-open .pdday__num{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));color:#fff;
  box-shadow:0 8px 18px rgba(245,130,32,.34);
}
.pdday__label{flex:1;min-width:0}
.pdday__label span{
  display:block;font-family:var(--head);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:3px;
}
.pdday__label b{
  display:block;font-family:var(--head);font-size:14px;font-weight:700;
  color:var(--ink);line-height:1.35;
}
.pdday.is-open .pdday__label b{color:var(--orange-dark)}
.pdday__q > i{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f4f5f7;color:var(--body);font-size:10px;
  transition:transform .45s var(--ease),background-color .35s var(--ease),color .3s var(--ease);
}
.pdday.is-open .pdday__q > i{transform:rotate(135deg);background:var(--orange);color:#fff}

.pdday__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.pdday__a > div{padding:0 16px 16px 63px}
.pdday__a p{font-size:12.5px;line-height:1.9;margin-bottom:12px}
.pdday__tags{display:flex;flex-wrap:wrap;gap:8px}
.pdday__tags span{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:100px;font-size:10.5px;font-weight:500;
  background:#f6f7f9;color:var(--body);border:1px solid #eef0f3;
}
.pdday__tags i{color:var(--orange);font-size:9.5px}

.pditin__note{
  display:flex;gap:11px;align-items:flex-start;margin-top:20px;
  padding:15px 17px;border-radius:var(--radius);
  background:rgba(245,130,32,.07);border:1px solid rgba(245,130,32,.2);
  font-size:12.5px;line-height:1.8;
}
.pditin__note i{color:var(--orange);margin-top:4px;flex:none}

/* =====================================================================
   Inclusions / exclusions
   ===================================================================== */
.pdincex__grid{display:grid;gap:20px}
.pdincex__col{
  padding:22px 20px;border-radius:var(--radius-lg);
  background:#fff;border:1px solid #f1ece4;
}
.pdincex__col--in{background:linear-gradient(180deg,#f6fdf8,#fff);border-color:#dff3e6}
.pdincex__col--out{background:linear-gradient(180deg,#fffafa,#fff);border-color:#f6e3e3}
.pdincex__head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.pdincex__head i{
  flex:none;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;
}
.pdincex__col--in .pdincex__head i{background:linear-gradient(135deg,#3ae37a,#1eae55);box-shadow:0 8px 18px rgba(30,174,85,.3)}
.pdincex__col--out .pdincex__head i{background:linear-gradient(135deg,#ff8d8d,#e5484d);box-shadow:0 8px 18px rgba(229,72,77,.26)}
.pdincex__head h3{font-size:17px}
.pdincex__head p{font-size:11px;color:var(--muted)}

.pdlist{display:grid;gap:10px}
.pdlist li{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.75}
.pdlist i{flex:none;font-size:11px;margin-top:4px}
.pdincex__col--in .pdlist i{color:#1eae55}
.pdincex__col--out .pdlist i{color:#e5484d}

/* =====================================================================
   Add-ons
   ===================================================================== */
.pdadd{background:linear-gradient(180deg,#fdf6ec,#fffdfa)}
.pdadd__grid{display:grid;gap:16px}
.pdadd__card{
  position:relative;display:flex;flex-direction:column;
  padding:20px 19px;border-radius:var(--radius-lg);
  background:#fff;border:1px solid #f1ece4;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s var(--ease);
}
.pdadd__card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:rgba(245,130,32,.4)}
.pdadd__ico{
  width:42px;height:42px;border-radius:12px;margin-bottom:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,130,32,.11);color:var(--orange);font-size:16px;
  transition:background-color .35s var(--ease),color .3s var(--ease),transform .5s var(--ease);
}
.pdadd__card:hover .pdadd__ico{background:var(--orange);color:#fff;transform:rotate(-8deg) scale(1.05)}
.pdadd__card h3{font-size:15px;margin-bottom:8px}
.pdadd__card p{font-size:12px;line-height:1.8;margin-bottom:15px;flex:1}
.pdadd__price{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  padding:6px 14px;border-radius:100px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--orange-dark);
  background:rgba(245,130,32,.09);border:1px solid rgba(245,130,32,.24);
}

/* =====================================================================
   Gallery
   ===================================================================== */
.pdgal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pdgal__item{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/3;display:block;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pdgal__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.pdgal__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.pdgal__item:hover img{transform:scale(1.11)}
.pdgal__grad{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(9,20,32,0) 40%,rgba(160,74,6,.72) 100%);
  transition:opacity .45s var(--ease);
}
.pdgal__item:hover .pdgal__grad{opacity:1}
.pdgal__ico{
  position:absolute;left:50%;top:50%;z-index:3;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--orange);font-size:13px;
  transform:translate(-50%,-50%) scale(.5);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s var(--ease);
}
.pdgal__item:hover .pdgal__ico{transform:translate(-50%,-50%) scale(1);opacity:1}

/* =====================================================================
   Related packages
   ===================================================================== */
.pdrel{background:#fff}
.pdrel__grid{display:grid;gap:18px}

/* =====================================================================
   Fixed price bar - phones only
   ===================================================================== */
.pdbar{
  position:fixed;left:0;right:0;bottom:0;z-index:860;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(9,20,32,.1);
  transform:translateY(110%);
  transition:transform .45s var(--ease-out);
}
.pdbar.show{transform:none}
.pdbar__price{flex:1;min-width:0;line-height:1.35}
.pdbar__price span{display:block;font-size:10px;color:var(--muted)}
.pdbar__price b{
  display:block;font-family:var(--head);font-size:19px;font-weight:800;color:var(--ink);
}
.pdbar__price em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted)}
.pdbar .btn{flex:none}

/* the floating WhatsApp buttons would sit on top of the bar - lift them */
body.has-pdbar .floaters{bottom:84px}
body.has-pdbar .to-top{bottom:136px}

/* =====================================================================
   560px and up
   ===================================================================== */
@media (min-width:560px){
  .pdhero h1{font-size:36px}
  .pdhero__btns{grid-template-columns:repeat(2,auto);justify-content:start}
  .pdfacts__grid{grid-template-columns:repeat(3,1fr)}
  .pdfact:nth-child(odd){border-right:0}
  .pdfact:not(:nth-child(3n)){border-right:1px solid #f4f0ea}
  .pdincex__grid{grid-template-columns:1fr 1fr}
  .pdadd__grid{grid-template-columns:repeat(2,1fr)}
  .pdrel__grid{grid-template-columns:repeat(2,1fr)}
  .pdgal__grid{grid-template-columns:repeat(4,1fr)}
}

/* =====================================================================
   900px and up - the booking card becomes a sticky sidebar and the
   fixed bottom bar is no longer needed
   ===================================================================== */
@media (min-width:900px){
  .pdhero{padding:56px 0 96px}
  .pdhero h1{font-size:clamp(38px,4.2vw,50px)}
  .pdhero__tag{font-size:16px}
  .pdfacts__grid{grid-template-columns:repeat(6,1fr);margin-top:-46px}
  .pdfact{flex-direction:column;gap:9px;padding:18px 14px;border-bottom:0}
  .pdfact:not(:nth-child(3n)){border-right:0}
  .pdfact:not(:last-child){border-right:1px solid #f4f0ea}

  .pdabout__grid{grid-template-columns:1fr minmax(300px,362px);gap:52px}
  .pdabout__copy h2{font-size:clamp(26px,2.8vw,34px)}
  .pdbook{position:sticky;top:100px}

  .pditin__list{gap:14px}
  .pdadd__grid{grid-template-columns:repeat(4,1fr)}
  .pdrel__grid{grid-template-columns:repeat(3,1fr)}

  .pdbar{display:none}
  body.has-pdbar .floaters{bottom:22px}
  body.has-pdbar .to-top{bottom:74px}
}

@media (prefers-reduced-motion:reduce){
  .pdbar{transition:none}
}


/* #####################################################################
   3. PAGE - /services
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Services page stylesheet
   Design tokens (--orange, --ink, --ease...) come from style.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Intro
   --------------------------------------------------------------------- */
.sintro__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.sintro__copy p{font-size:15.4px;line-height:1.85}
.sintro__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sintro__pills span{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:12.8px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 16px;
}
.sintro__pills i{color:var(--orange);font-size:12px}

/* ---------------------------------------------------------------------
   Service cards
   --------------------------------------------------------------------- */
.sgrid-sec{background:linear-gradient(180deg,#fff,var(--cream-2))}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.scard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.scard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:#fff}
.scard--featured{border-color:#ffe2c6;box-shadow:0 10px 30px rgba(245,130,32,.12)}

.scard__media{position:relative;overflow:hidden;aspect-ratio:16/9.4}
.scard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.scard:hover .scard__media img{transform:scale(1.08)}
.scard__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,41,63,.28) 0%,rgba(19,41,63,0) 55%);
}
.scard__flag{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:var(--orange);border-radius:100px;padding:6px 13px;
  box-shadow:0 8px 20px rgba(245,130,32,.4);
}

.scard__body{display:flex;flex-direction:column;gap:11px;padding:24px 26px 26px;flex:1;position:relative}
.scard__ico{
  position:absolute;top:-26px;right:24px;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:15px;
  background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-size:20px;box-shadow:0 10px 24px rgba(245,130,32,.35);
  transition:transform .45s var(--ease);
}
.scard:hover .scard__ico{transform:translateY(-4px) rotate(-6deg)}
.scard__body h3{font-size:19px;line-height:1.3;color:var(--ink);padding-right:56px}
.scard__tag{
  font-family:var(--head);font-size:12px;font-weight:700;
  letter-spacing:.03em;color:var(--orange-dark);
}
.scard__sum{font-size:14.2px;line-height:1.78;color:var(--body)}

.scard__list{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.scard__list li{display:flex;align-items:flex-start;gap:11px;font-size:13.6px;line-height:1.65;color:var(--body)}
.scard__list li i{
  flex:none;margin-top:4px;width:17px;height:17px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff3e6;color:var(--orange-dark);font-size:8.5px;
}

.scard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:18px;border-top:1px solid #f4f2ee;
}
.scard__price{
  font-family:var(--head);font-size:13.5px;font-weight:800;color:var(--ink);
}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.sempty{
  text-align:center;max-width:520px;margin:0 auto;padding:52px 28px;
  background:#fff;border:1px dashed #e6dfd4;border-radius:var(--radius-lg);
}
.sempty__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:18px;
  background:#fff3e6;color:var(--orange);font-size:24px;
}
.sempty h3{font-size:21px;margin-bottom:10px}
.sempty p{font-size:14.5px;line-height:1.8;margin-bottom:22px}

/* ---------------------------------------------------------------------
   Process steps
   --------------------------------------------------------------------- */
.sprocess{background:var(--cream)}
.ssteps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sstep{
  position:relative;background:#fff;border:1px solid #f1ece4;
  border-radius:var(--radius-lg);padding:34px 24px 26px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.sstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.sstep__num{
  position:absolute;top:-20px;left:24px;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;
  background:var(--navy);color:#fff;
  font-family:var(--head);font-size:17px;font-weight:800;
  box-shadow:0 10px 22px rgba(19,41,63,.24);
}
.sstep h3{font-size:16.5px;line-height:1.35;margin-bottom:9px}
.sstep p{font-size:13.8px;line-height:1.75}

/* ---------------------------------------------------------------------
   Assurance band
   --------------------------------------------------------------------- */
.sassure__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.sassure__copy p{font-size:15px;line-height:1.85;margin:14px 0 22px;max-width:52ch}
.sassure__btns{display:flex;flex-wrap:wrap;gap:12px}

.sassure__list{display:grid;gap:14px}
.sassure__item{
  display:flex;align-items:flex-start;gap:16px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s var(--ease);
}
.sassure__item:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);border-color:#ffe2c6}
.sassure__item > i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:#fff3e6;color:var(--orange-dark);font-size:16px;
}
.sassure__item b{display:block;font-family:var(--head);font-size:14.5px;color:var(--ink);margin-bottom:4px}
.sassure__item span{font-size:13.6px;line-height:1.7;color:var(--body)}

/* ---------------------------------------------------------------------
   FAQ strip (the accordion itself comes from faq-accordion.css)
   --------------------------------------------------------------------- */
.sfaq{background:linear-gradient(180deg,var(--cream-2),#fff)}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .ssteps{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .sintro__grid,.sassure__grid{grid-template-columns:1fr;gap:30px}
}

@media (max-width:720px){
  .sgrid{grid-template-columns:1fr;gap:22px}
  .ssteps{grid-template-columns:1fr;gap:30px}
  .scard__body{padding:22px 20px 24px}
  .scard__ico{width:46px;height:46px;font-size:18px;top:-23px;right:20px}
  .sassure__btns .btn{flex:1 1 100%}
}

@media (max-width:470px){
  .scard__foot{flex-direction:column;align-items:stretch;gap:14px}
  .scard__foot .btn{width:100%}
  .sassure__item{padding:18px}
}

/* The site sets the Playfair display serif on left-aligned section headings
   per page (see .dintro__grid h2 / .faqs__intro h2 in destinations.css);
   only .sec-head--center picks it up from style.css. Without these the
   headings here render in the sans --head face and look wrong next to
   every other page. */
.sintro__grid h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.24}
.sassure__copy h2{font-family:var(--display);font-size:clamp(25px,2.8vw,34px);line-height:1.24}


/* #####################################################################
   3. PAGE - /guides
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Tour guides directory stylesheet
   Also loaded by /guides/{slug} alongside guide-details.css, which reuses
   the card pieces for the "other guides" strip.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Intro + numbers
   --------------------------------------------------------------------- */
.gdintro__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.gdintro__copy p{font-size:15.4px;line-height:1.85}

.gdstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.gdstat{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);
  padding:18px 12px;box-shadow:var(--shadow-xs);
}
.gdstat i{color:var(--orange);font-size:17px;margin-bottom:5px}
.gdstat b{font-family:var(--head);font-size:21px;color:var(--ink);line-height:1}
.gdstat span{font-size:11.5px;color:var(--muted);letter-spacing:.02em}

/* ---------------------------------------------------------------------
   Language filter
   --------------------------------------------------------------------- */
.gdgrid-sec{background:linear-gradient(180deg,#fff,var(--cream-2))}

.gdfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 34px}
.gdfilter__btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:10px 18px;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.gdfilter__btn span{
  font-size:11.5px;font-weight:800;color:var(--muted);
  background:#f4f5f8;border-radius:100px;padding:2px 9px;min-width:24px;text-align:center;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.gdfilter__btn:hover{border-color:var(--orange);color:var(--orange-dark);transform:translateY(-2px)}
.gdfilter__btn.is-active{
  background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 10px 24px rgba(19,41,63,.22);
}
.gdfilter__btn.is-active span{background:rgba(255,255,255,.16);color:#fff}

/* ---------------------------------------------------------------------
   Guide cards
   --------------------------------------------------------------------- */
.gdgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gdgrid__empty{text-align:center;padding:40px 0 0;font-size:14px;color:var(--muted)}

.gdcard{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:26px 26px 24px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.gdcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:#fff}
.gdcard--featured{border-color:#ffe2c6}
.gdcard.is-hidden{display:none}
.gdcard.is-entering{animation:gdcardIn .5s var(--ease) both}
@keyframes gdcardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.gdcard__top{display:flex;align-items:center;gap:16px;position:relative}
.gdcard__photo{position:relative;flex:none;width:76px;height:76px}
.gdcard__photo img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:3px solid #fff;box-shadow:0 8px 20px rgba(19,41,63,.16);
}
.gdcard__initials{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-family:var(--head);font-size:24px;font-weight:800;
}
.gdcard__badge{
  position:absolute;right:-2px;bottom:-2px;
  width:24px;height:24px;border-radius:50%;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  color:#25a35a;font-size:15px;box-shadow:0 3px 8px rgba(19,41,63,.18);
}
.gdcard__who{min-width:0}
.gdcard__who h3{font-size:18px;line-height:1.3;color:var(--ink)}
.gdcard__role{display:block;font-size:12.8px;color:var(--orange-dark);font-weight:600;margin-top:2px}
.gdcard__rating{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-family:var(--head);font-size:13px;font-weight:800;color:var(--ink);
}
.gdcard__rating i{color:#f5b120;font-size:12px}
.gdcard__rating em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--muted)}
.gdcard__flag{
  position:absolute;top:-8px;right:0;
  font-family:var(--head);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--orange);border-radius:100px;padding:4px 11px;
}

.gdcard__bio{font-size:13.9px;line-height:1.75;color:var(--body)}

.gdcard__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.gdcard__meta > div{display:flex;align-items:center;gap:9px;min-width:0}
.gdcard__meta dt{margin:0}
.gdcard__meta dt i{color:var(--orange);font-size:12px}
.gdcard__meta dd{margin:0;font-size:13px;color:var(--body)}

.gdcard__langs{display:flex;flex-wrap:wrap;gap:7px}
.gdcard__langs span{
  font-family:var(--head);font-size:11.5px;font-weight:700;color:var(--ink);
  background:var(--cream-2);border:1px solid #f2e7d8;border-radius:100px;padding:5px 12px;
}
.gdcard__langs .gdcard__more{background:#f4f5f8;border-color:var(--line);color:var(--muted)}

.gdcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:16px;border-top:1px solid #f4f2ee;
}
.gdcard__link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--ink);
  transition:color .3s var(--ease);
}
.gdcard__link i{color:var(--orange);font-size:11px;transition:transform .4s var(--ease)}
.gdcard__link:hover{color:var(--orange)}
.gdcard__link:hover i{transform:translateX(5px)}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.gdempty{
  text-align:center;max-width:520px;margin:0 auto;padding:52px 28px;
  background:#fff;border:1px dashed #e6dfd4;border-radius:var(--radius-lg);
}
.gdempty__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:18px;
  background:#fff3e6;color:var(--orange);font-size:24px;
}
.gdempty h3{font-size:21px;margin-bottom:10px}
.gdempty p{font-size:14.5px;line-height:1.8;margin-bottom:22px}

/* ---------------------------------------------------------------------
   Match band
   --------------------------------------------------------------------- */
.gdmatch{padding:66px 0;background:var(--cream)}
.gdmatch__inner{
  display:grid;grid-template-columns:1.3fr auto;align-items:center;gap:34px;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  border-radius:var(--radius-lg);padding:44px 48px;
  box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.gdmatch__inner::after{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.28),transparent 68%);
}
.gdmatch__copy{position:relative;z-index:1}
.gdmatch__copy .eyebrow{color:var(--orange-2)}
.gdmatch__copy h2{font-family:var(--display);color:#fff;font-size:clamp(23px,2.5vw,32px);line-height:1.22;margin:10px 0 12px}
.gdmatch__copy p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.8;max-width:56ch}
.gdmatch__btns{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .gdgrid{grid-template-columns:repeat(2,1fr)}
  .gdintro__grid{grid-template-columns:1fr;gap:30px}
}

@media (max-width:900px){
  .gdmatch__inner{grid-template-columns:1fr;padding:36px 30px}
  .gdmatch__btns{flex-direction:row;flex-wrap:wrap}
  .gdmatch__btns .btn{flex:1 1 auto}
}

@media (max-width:720px){
  .gdgrid{grid-template-columns:1fr;gap:22px}
  .gdstats{grid-template-columns:repeat(2,1fr)}
  .gdfilter{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:6px;margin-inline:-24px;padding-inline:24px;scrollbar-width:none;
  }
  .gdfilter::-webkit-scrollbar{display:none}
  .gdfilter__btn{flex:none}
}

@media (max-width:470px){
  .gdcard{padding:22px 20px}
  .gdcard__photo{width:64px;height:64px}
  .gdcard__initials{font-size:20px}
  .gdcard__foot{flex-direction:column;align-items:stretch;gap:12px}
  .gdcard__foot .btn{width:100%;justify-content:center}
  .gdcard__link{justify-content:center}
}

/* The site sets the Playfair display serif on left-aligned section headings
   per page (see .dintro__grid h2 / .faqs__intro h2 in destinations.css);
   only .sec-head--center picks it up from style.css. Without these the
   headings here render in the sans --head face and look wrong next to
   every other page. */
.gdintro__grid h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.24}


/* #####################################################################
   3. PAGE - /guides/{slug}
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Guide profile stylesheet
   Loaded by /guides/{slug} on top of guides.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Profile hero
   --------------------------------------------------------------------- */
.gphero{position:relative;overflow:hidden;background:var(--navy-2);padding:74px 0 84px}
.gphero__media{position:absolute;inset:0}
.gphero__bg{width:100%;height:100%;object-fit:cover;transform:scale(1.07)}
.gphero__scrim{
  position:absolute;inset:0;
  background:
    /* left-side panel only - the photo is untouched from 74% across, so the
       banner keeps the brightness and detail of the original image */
    linear-gradient(90deg,rgba(13,30,47,.82) 0%,rgba(13,30,47,.72) 28%,rgba(13,30,47,.46) 48%,rgba(13,30,47,.16) 62%,rgba(13,30,47,0) 74%);
}
.gphero__inner{position:relative;z-index:4;color:#fff}
.gphero__inner .crumbs{margin-bottom:26px}

.gphero__card{display:flex;align-items:center;gap:34px;max-width:820px}

.gphero__photo{position:relative;flex:none;width:168px;height:168px}
.gphero__photo img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:5px solid rgba(255,255,255,.16);
}
.gphero__initials{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-family:var(--head);font-size:52px;font-weight:800;
  border:5px solid rgba(255,255,255,.16);
}
.gphero__verified{
  position:absolute;right:6px;bottom:6px;
  width:40px;height:40px;border-radius:50%;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  color:#25a35a;font-size:24px;
}

.gphero__body{min-width:0}
.gphero h1{color:#fff;font-size:clamp(27px,3.6vw,44px);line-height:1.14;letter-spacing:-.025em}
.gphero__role{
  display:inline-block;margin-top:8px;
  font-family:var(--head);font-size:14px;font-weight:700;color:var(--orange-2);
  letter-spacing:.02em;
}
.gphero__tag{
  color:rgba(255,255,255,.76);font-size:15.5px;line-height:1.75;
  margin-top:12px;max-width:58ch;
}

.gphero__stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.gphero__stats span{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:12px 18px;min-width:104px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.gphero__stats i{color:var(--orange-2);font-size:13px;margin-bottom:4px}
.gphero__stats b{font-family:var(--head);font-size:17px;color:#fff;line-height:1.1}
.gphero__stats em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.6)}

.gphero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------------------------------------------------------------------
   Body layout
   --------------------------------------------------------------------- */
.gpwrap{padding-top:56px}
.gpwrap__grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:start}

.gpmain{min-width:0;display:flex;flex-direction:column;gap:40px}
.gpblock h2{font-size:clamp(21px,2.3vw,28px);line-height:1.28;margin-top:8px}
.gpblock__h3{
  display:flex;align-items:center;gap:11px;
  font-size:17.5px;color:var(--ink);
  padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid #efe6d8;
}
.gpblock__h3 i{color:var(--orange);font-size:15px}

.gpbio{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.gpbio p{font-size:15.6px;line-height:1.88;color:var(--body)}
.gpbio p:first-child{font-size:16.6px;color:#4a5561}

/* specialities + destinations */
.gpspecs{display:flex;flex-wrap:wrap;gap:10px}
.gpspec{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.6px;color:var(--ink);
  background:#fff;border:1px solid #f1ece4;border-radius:100px;
  padding:9px 16px;box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease),border-color .3s var(--ease);
}
.gpspec:hover{transform:translateY(-2px);border-color:#ffe2c6}
.gpspec i{color:var(--orange-dark);font-size:10.5px}

.gpdests{display:flex;flex-wrap:wrap;gap:10px}
.gpdest{
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--ink);
  background:var(--cream-2);border:1px solid #f2e7d8;border-radius:var(--radius);
  padding:10px 18px;
}

/* reviews */
.gpreviews{display:grid;gap:16px}
.gpreview{
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:24px 26px;box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.gpreview:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.gpreview__stars{display:flex;gap:3px;margin-bottom:12px}
.gpreview__stars i{color:#f5b120;font-size:12.5px}
.gpreview p{font-size:14.8px;line-height:1.82;color:var(--body);font-style:italic}
.gpreview footer{display:flex;align-items:center;gap:12px;margin-top:16px}
.gpreview__av{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-family:var(--head);font-size:12.5px;font-weight:800;
}
.gpreview__who{display:flex;flex-direction:column;line-height:1.4}
.gpreview__who b{font-family:var(--head);font-size:13.5px;color:var(--ink)}
.gpreview__who em{font-style:normal;font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */
.gpside__sticky{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}

.gpcard{
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow-xs);
}
.gpcard h4{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--ink);
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #f4f2ee;
}
.gpcard h4 i{color:var(--orange);font-size:13px}

.gpcard--book{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,var(--navy),var(--navy-2));border-color:transparent;
}
.gpcard--book::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.3),transparent 68%);
}
.gpcard__ico{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:14px;margin-bottom:14px;
  background:rgba(255,255,255,.1);color:var(--orange-2);font-size:19px;
}
.gpcard--book h4{
  position:relative;z-index:1;justify-content:center;color:#fff;
  border-bottom:0;padding-bottom:0;margin-bottom:8px;font-size:17px;
}
.gpcard--book p{
  position:relative;z-index:1;font-size:13.6px;line-height:1.75;
  color:rgba(255,255,255,.7);margin-bottom:18px;
}
.gpcard--book .btn{position:relative;z-index:1;width:100%}
.gpside__call{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:14px;font-family:var(--head);font-size:13.5px;font-weight:700;color:#fff;
  transition:color .3s var(--ease);
}
.gpside__call i{color:var(--orange-2)}
.gpside__call:hover{color:var(--orange-2)}

.gplangs{display:flex;flex-wrap:wrap;gap:8px}
.gplangs span{
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--ink);
  background:var(--cream-2);border:1px solid #f2e7d8;border-radius:100px;padding:7px 14px;
}

.gpcreds{display:flex;flex-direction:column;gap:11px}
.gpcreds li{display:flex;align-items:flex-start;gap:11px;font-size:13.4px;line-height:1.6;color:var(--body)}
.gpcreds li i{
  flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eaf7ef;color:#25a35a;font-size:9px;
}

.gpothers{display:flex;flex-direction:column;gap:6px}
.gpothers a{
  display:flex;gap:13px;align-items:center;padding:8px;border-radius:11px;
  transition:background-color .3s var(--ease);
}
.gpothers a:hover{background:var(--cream-2)}
.gpothers img{flex:none;width:46px;height:46px;object-fit:cover;border-radius:50%}
.gpothers__av{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-family:var(--head);font-size:14px;font-weight:800;
}
.gpothers b{
  display:block;font-family:var(--head);font-size:13.4px;font-weight:700;color:var(--ink);
  transition:color .3s var(--ease);
}
.gpothers a:hover b{color:var(--orange-dark)}
.gpothers em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted)}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .gpwrap__grid{grid-template-columns:1fr;gap:44px}
  .gpside__sticky{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .gpcard--book{grid-column:1/-1}
}

@media (max-width:900px){
  .gphero{padding:60px 0 68px}
  .gphero__card{flex-direction:column;align-items:flex-start;gap:24px}
  .gphero__photo{width:132px;height:132px}
  .gphero__initials{font-size:42px}
}

@media (max-width:720px){
  .gpside__sticky{grid-template-columns:1fr}
  .gphero__stats span{flex:1 1 calc(50% - 6px);min-width:0}
  .gphero__btns .btn{flex:1 1 100%;justify-content:center}
}

@media (max-width:470px){
  .gphero__photo{width:112px;height:112px}
  .gphero__initials{font-size:34px}
  .gphero__verified{width:32px;height:32px;font-size:19px}
  .gpreview{padding:20px}
}

/* The site sets the Playfair display serif on left-aligned section headings
   per page (see .dintro__grid h2 / .faqs__intro h2 in destinations.css);
   only .sec-head--center picks it up from style.css. Without these the
   headings here render in the sans --head face and look wrong next to
   every other page. */
.gpblock h2{font-family:var(--display)}


/* #####################################################################
   3. PAGE - /blogs
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Blogs listing stylesheet
   Loaded by /blogs and (for the shared card, chip and avatar pieces)
   by /blogs/{slug} alongside blog-details.css.
   Design tokens (--orange, --ink, --ease...) come from style.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hero search
   --------------------------------------------------------------------- */
.bhero .phero__bg{transform:scale(1.08);filter:saturate(.9)}

.bsearch{
  position:relative;display:flex;align-items:center;gap:10px;
  width:min(560px,100%);margin:26px auto 0;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28);
  border-radius:100px;padding:6px 6px 6px 20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease);
}
.bsearch:focus-within{
  border-color:var(--orange-2);background:rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.bsearch > i{color:rgba(255,255,255,.7);font-size:14px;flex:none}
.bsearch input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--font);font-size:14.5px;color:#fff;padding:10px 0;
}
.bsearch input::placeholder{color:rgba(255,255,255,.62)}
.bsearch input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.bsearch__go{
  flex:none;background:var(--orange);color:#fff;border-radius:100px;
  font-family:var(--head);font-size:13.5px;font-weight:700;padding:11px 24px;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.bsearch__go:hover{background:var(--orange-dark);transform:translateY(-1px)}

/* ---------------------------------------------------------------------
   Shared bits - also used on the details page
   --------------------------------------------------------------------- */
.bchip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange-dark);background:#fff3e6;
  border:1px solid #ffe2c6;border-radius:100px;padding:6px 14px;
}
.bchip--light{
  color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
a.bchip--light:hover{background:var(--orange);border-color:var(--orange)}

.bavatar{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-family:var(--head);font-size:13.5px;font-weight:800;
  letter-spacing:.02em;box-shadow:0 6px 16px rgba(245,130,32,.3);
}
.bavatar--sm{width:28px;height:28px;font-size:10.5px;box-shadow:none}
.bavatar--lg{width:52px;height:52px;font-size:16px}
.bavatar--xl{width:76px;height:76px;font-size:22px}

.bdot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;flex:none}

/* ---------------------------------------------------------------------
   Featured post
   --------------------------------------------------------------------- */
.bfeat-sec{padding-bottom:26px}
.bfeat-sec__count{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--muted);
}
.bfeat-sec__count i{color:var(--orange)}

.bfeat{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.bfeat:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:#fff}

.bfeat__media{position:relative;overflow:hidden;min-height:340px}
.bfeat__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.bfeat:hover .bfeat__media img{transform:scale(1.07)}
.bfeat__grad{
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(19,41,63,.42),rgba(19,41,63,0) 62%);
}
.bfeat__pin{
  position:absolute;top:18px;left:18px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--head);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:var(--orange);border-radius:100px;padding:8px 16px;
  box-shadow:0 10px 24px rgba(245,130,32,.4);
}

.bfeat__body{padding:38px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;justify-content:center}
.bfeat__body h3{
  font-family:var(--head);font-size:clamp(22px,2.3vw,30px);line-height:1.24;
  color:var(--ink);letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.bfeat:hover .bfeat__body h3{color:var(--orange-dark)}
.bfeat__body > p{font-size:14.8px;line-height:1.8;color:var(--body)}

.bfeat__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--muted);
}
.bfeat__meta i{color:var(--orange);margin-right:6px}
.bfeat__meta time{white-space:nowrap}
.bfeat__who{display:flex;flex-direction:column;line-height:1.35;margin-right:4px}
.bfeat__who b{font-family:var(--head);font-size:13.5px;color:var(--ink)}
.bfeat__who em{font-style:normal;font-size:12px;color:var(--muted)}

.bfeat__more{
  display:inline-flex;align-items:center;gap:10px;margin-top:4px;
  font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink);
  transition:color .3s var(--ease);
}
.bfeat__more i{color:var(--orange);transition:transform .4s var(--ease)}
.bfeat:hover .bfeat__more{color:var(--orange)}
.bfeat:hover .bfeat__more i{transform:translateX(6px)}

/* ---------------------------------------------------------------------
   Category filter
   --------------------------------------------------------------------- */
.bgrid-sec{background:linear-gradient(180deg,#fff,var(--cream-2))}

.bfilter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:0 0 34px;
}
.bfilter__btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:100px;
  padding:10px 18px;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.bfilter__btn i{font-size:12.5px;color:var(--orange);transition:color .3s var(--ease)}
.bfilter__btn span{
  font-size:11.5px;font-weight:800;color:var(--muted);
  background:#f4f5f8;border-radius:100px;padding:2px 9px;min-width:24px;text-align:center;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.bfilter__btn:hover{border-color:var(--orange);color:var(--orange-dark);transform:translateY(-2px)}
.bfilter__btn.is-active{
  background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 10px 24px rgba(19,41,63,.22);
}
.bfilter__btn.is-active i{color:var(--orange-2)}
.bfilter__btn.is-active span{background:rgba(255,255,255,.16);color:#fff}

/* result summary line for a filtered / searched view */
.bresult{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin:-14px 0 30px;font-size:13.5px;color:var(--muted);
}
.bresult b{color:var(--ink)}
.bresult__term{color:var(--ink);font-style:italic}
.bresult__clear{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--orange-dark);
  background:#fff3e6;border-radius:100px;padding:6px 14px;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.bresult__clear:hover{background:var(--orange);color:#fff}

/* ---------------------------------------------------------------------
   Post grid
   --------------------------------------------------------------------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bgrid__empty{text-align:center;padding:40px 0 0;font-size:14px;color:var(--muted)}

.bcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.bcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:#fff}
.bcard.is-hidden{display:none}
.bcard.is-entering{animation:bcardIn .5s var(--ease) both}
@keyframes bcardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.bcard__media{position:relative;display:block;overflow:hidden;aspect-ratio:16/10.4}
.bcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.bcard:hover .bcard__media img{transform:scale(1.08)}
.bcard__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,41,63,.34) 0%,rgba(19,41,63,0) 46%,rgba(19,41,63,.28) 100%);
}
.bcard__cat{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--head);font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:rgba(19,41,63,.62);border-radius:100px;padding:6px 13px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .35s var(--ease);
}
.bcard:hover .bcard__cat{background:var(--orange)}
.bcard__read{
  position:absolute;bottom:14px;right:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-size:11.5px;font-weight:700;color:#fff;
}
.bcard__read i{font-size:11px;color:var(--orange-2)}

.bcard__body{display:flex;flex-direction:column;gap:11px;padding:22px 24px 24px;flex:1}
.bcard__date{
  font-family:var(--head);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.bcard__body h3{
  font-size:17.5px;line-height:1.35;color:var(--ink);
  transition:color .3s var(--ease);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bcard:hover .bcard__body h3{color:var(--orange-dark)}
.bcard__body > p{
  font-size:14px;line-height:1.75;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.bcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;border-top:1px solid #f4f2ee;
}
.bcard__author{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--ink);
}
.bcard__more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--orange);
}
.bcard__more i{font-size:11px;transition:transform .4s var(--ease)}
.bcard:hover .bcard__more i{transform:translateX(5px)}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.bempty{
  text-align:center;max-width:520px;margin:0 auto;padding:52px 28px;
  background:#fff;border:1px dashed #e6dfd4;border-radius:var(--radius-lg);
}
.bempty__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:18px;
  background:#fff3e6;color:var(--orange);font-size:24px;
}
.bempty h3{font-size:21px;margin-bottom:10px}
.bempty p{font-size:14.5px;line-height:1.8;margin-bottom:22px}
.bempty__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------------
   Ask strip
   --------------------------------------------------------------------- */
.bask{padding:66px 0;background:var(--cream)}
.bask__inner{
  display:grid;grid-template-columns:1.3fr auto;align-items:center;gap:34px;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  border-radius:var(--radius-lg);padding:44px 48px;
  box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.bask__inner::after{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.28),transparent 68%);
}
.bask__copy{position:relative;z-index:1}
.bask__copy .eyebrow{color:var(--orange-2)}
.bask__copy h2{font-family:var(--display);color:#fff;font-size:clamp(23px,2.5vw,32px);line-height:1.22;margin:10px 0 12px}
.bask__copy p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.8;max-width:56ch}
.bask__btns{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.bask__btns .btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.bask__btns .btn--outline:hover{border-color:var(--orange)}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .bfeat{grid-template-columns:1fr}
  .bfeat__media{min-height:280px}
  .bfeat__body{padding:32px 30px}
}

@media (max-width:900px){
  .bask__inner{grid-template-columns:1fr;padding:36px 30px}
  .bask__btns{flex-direction:row;flex-wrap:wrap}
}

@media (max-width:720px){
  .bgrid{grid-template-columns:1fr;gap:22px}
  .bsearch{padding:5px 5px 5px 16px}
  .bsearch__go{padding:10px 18px;font-size:12.5px}
  .bfeat__media{min-height:220px}
  .bfeat__body{padding:26px 22px;gap:13px}
  .bfilter{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:6px;margin-inline:-24px;padding-inline:24px;
    scrollbar-width:none;
  }
  .bfilter::-webkit-scrollbar{display:none}
  .bfilter__btn{flex:none}
}

@media (max-width:470px){
  .bsearch{flex-wrap:wrap;border-radius:var(--radius);padding:12px 14px}
  .bsearch input{width:100%;flex-basis:100%}
  .bsearch__go{width:100%}
  .bfeat__meta{gap:9px;font-size:12.5px}
  .bempty{padding:40px 20px}
}


/* #####################################################################
   3. PAGE - /blogs/{slug}
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Blog details stylesheet
   Loaded by /blogs/{slug} on top of blogs.css, which supplies the
   shared card, chip and avatar pieces reused by the related strip.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Reading progress bar
   --------------------------------------------------------------------- */
.bprog{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:999;
  background:transparent;pointer-events:none;
}
.bprog__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--orange-2),var(--orange-dark));
  box-shadow:0 0 12px rgba(245,130,32,.55);
  transition:width .1s linear;
}

/* ---------------------------------------------------------------------
   Article hero
   --------------------------------------------------------------------- */
.ahero{position:relative;overflow:hidden;background:var(--navy-2);padding:78px 0 84px}
.ahero__media{position:absolute;inset:0}
.ahero__bg{width:100%;height:100%;object-fit:cover;transform:scale(1.07)}
.ahero__scrim{
  position:absolute;inset:0;
  background:
    /* left-side panel only - the photo is untouched from 74% across, so the
       banner keeps the brightness and detail of the original image */
    linear-gradient(90deg,rgba(13,30,47,.82) 0%,rgba(13,30,47,.72) 28%,rgba(13,30,47,.46) 48%,rgba(13,30,47,.16) 62%,rgba(13,30,47,0) 74%);
}
.ahero__inner{position:relative;z-index:4;color:#fff;text-align:left}
.ahero__inner > *{max-width:780px}
.ahero__inner .crumbs{justify-content:flex-start;margin-bottom:20px}
.ahero__inner .bchip{margin-bottom:18px}
.ahero h1{
  color:#fff;font-size:clamp(27px,4.1vw,50px);line-height:1.16;
  letter-spacing:-.025em;margin-bottom:16px;
}
.ahero__lead{
  color:rgba(255,255,255,.78);font-size:clamp(14.5px,1.5vw,17px);
  line-height:1.8;max-width:62ch;margin:0;
}
.ahero__meta{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:14px;
  margin-top:28px;font-size:13.5px;color:rgba(255,255,255,.72);
}
.ahero__meta i{color:var(--orange-2);margin-right:7px}
.ahero__who{display:flex;flex-direction:column;line-height:1.35;text-align:left}
.ahero__who b{font-family:var(--head);font-size:14.5px;color:#fff}
.ahero__who em{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.6)}
.ahero__sep{width:1px;height:26px;background:rgba(255,255,255,.22)}

/* ---------------------------------------------------------------------
   Layout: article + sticky sidebar
   --------------------------------------------------------------------- */
.awrap{padding-top:58px}
.awrap__grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:start}

.aside__sticky{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}

/* ---------------------------------------------------------------------
   Article body
   --------------------------------------------------------------------- */
.apost{min-width:0;font-size:16px;line-height:1.9;color:var(--body)}
.apost > p{margin-bottom:22px}

/* the opening paragraph gets a slightly larger, calmer setting */
.apost > p:first-of-type{font-size:17.5px;line-height:1.85;color:#4a5561}

.apost__h2{
  position:relative;font-size:clamp(21px,2.3vw,27px);line-height:1.3;
  color:var(--ink);margin:44px 0 18px;padding-left:20px;
  scroll-margin-top:110px;
}
.apost__h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  border-radius:6px;background:linear-gradient(180deg,var(--orange-2),var(--orange-dark));
}

/* checklists */
.alist{display:flex;flex-direction:column;gap:12px;margin:0 0 26px}
.alist li{display:flex;align-items:flex-start;gap:13px;font-size:15.4px;line-height:1.75}
.alist li i{
  flex:none;margin-top:5px;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff3e6;color:var(--orange-dark);font-size:9.5px;
}

/* pull quote */
.apull{
  position:relative;margin:32px 0;padding:32px 34px 30px 62px;
  background:linear-gradient(120deg,var(--cream),#fffdfa);
  border:1px solid #f2e7d8;border-left:4px solid var(--orange);
  border-radius:var(--radius);
}
.apull > i{
  position:absolute;left:24px;top:28px;
  font-size:20px;color:var(--orange);opacity:.55;
}
.apull p{
  font-family:var(--display);font-size:19.5px;line-height:1.6;
  color:var(--ink);font-style:italic;
}
.apull cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:var(--head);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}

/* inline figure */
.afig{margin:32px 0}
.afig img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.afig figcaption{
  margin-top:12px;text-align:center;font-size:12.8px;color:var(--muted);font-style:italic;
}

/* callout box */
.atip{
  display:flex;align-items:flex-start;gap:16px;margin:30px 0;
  padding:22px 26px;border-radius:var(--radius);
  background:#f4f9ff;border:1px solid #dbe9f8;
}
.atip__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--navy);color:var(--orange-2);font-size:16px;
}
.atip b{
  display:block;font-family:var(--head);font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;
}
.atip p{font-size:14.6px;line-height:1.78;color:#4d5b6a}

/* ---------------------------------------------------------------------
   Tags / share / author
   --------------------------------------------------------------------- */
.atags{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:40px 0 0}
.atags__label{
  display:inline-flex;align-items:center;gap:8px;margin-right:4px;
  font-family:var(--head);font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.atags__label i{color:var(--orange)}
.atag{
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--ink);
  background:#f6f6f9;border:1px solid var(--line);border-radius:100px;padding:7px 15px;
  transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);
}
.atag:hover{color:#fff;background:var(--orange);border-color:var(--orange)}

.ashare{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  margin:26px 0 0;padding:20px 24px;
  background:var(--cream-2);border:1px solid #f2e7d8;border-radius:var(--radius);
}
.ashare__label{
  font-family:var(--head);font-size:13px;font-weight:800;
  letter-spacing:.05em;color:var(--ink);
}
.ashare__btns{display:flex;flex-wrap:wrap;gap:10px}
.ashare__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-size:14.5px;
  cursor:pointer;
  transition:transform .3s var(--ease),color .3s var(--ease),
             background-color .3s var(--ease),border-color .3s var(--ease);
}
.ashare__btn:hover{transform:translateY(-3px);color:#fff}
.ashare__btn--wa:hover{background:#25d366;border-color:#25d366}
.ashare__btn--fb:hover{background:#1877f2;border-color:#1877f2}
.ashare__btn--x:hover{background:#111;border-color:#111}
.ashare__btn--in:hover{background:#0a66c2;border-color:#0a66c2}
.ashare__btn--copy:hover{background:var(--orange);border-color:var(--orange)}
.ashare__btn--copy.is-copied{background:#25d366;border-color:#25d366;color:#fff}

.aauthor{
  display:flex;gap:24px;align-items:flex-start;
  margin:30px 0 0;padding:30px 32px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
}
.aauthor__eyebrow{
  font-family:var(--head);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--orange);
}
.aauthor__body h3{font-size:20px;margin:6px 0 3px}
.aauthor__role{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
.aauthor__body p{font-size:14.5px;line-height:1.8;margin-bottom:18px}

.afaq{margin-top:46px}
.afaq .faqs__list{margin-top:6px}

/* ---------------------------------------------------------------------
   Sidebar cards
   --------------------------------------------------------------------- */
.acard{
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:24px 24px 26px;box-shadow:var(--shadow-xs);
}
.acard h4{
  display:flex;align-items:center;gap:10px;
  font-size:14px;letter-spacing:.02em;color:var(--ink);
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #f4f2ee;
}
.acard h4 i{color:var(--orange);font-size:13px}

/* table of contents */
.atoc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:4px}
.atoc li{counter-increment:toc}
.atoc a{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.4px;line-height:1.6;color:var(--body);
  padding:8px 12px;border-radius:9px;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.atoc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--head);font-size:11px;font-weight:800;color:var(--muted);
  flex:none;padding-top:1px;transition:color .3s var(--ease);
}
.atoc a:hover{background:var(--cream-2);color:var(--ink)}
.atoc a.is-active{background:#fff3e6;color:var(--orange-dark);font-weight:600}
.atoc a.is-active::before{color:var(--orange)}

/* sidebar CTA */
.aside__cta{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,var(--navy),var(--navy-2));border-color:transparent;
}
.aside__cta::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.3),transparent 68%);
}
.aside__cta-ico{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:14px;margin-bottom:14px;
  background:rgba(255,255,255,.1);color:var(--orange-2);font-size:19px;
}
.aside__cta h4{
  position:relative;z-index:1;justify-content:center;color:#fff;
  border-bottom:0;padding-bottom:0;margin-bottom:8px;font-size:17px;
}
.aside__cta p{
  position:relative;z-index:1;font-size:13.6px;line-height:1.75;
  color:rgba(255,255,255,.7);margin-bottom:18px;
}
.aside__cta .btn{position:relative;z-index:1;width:100%}
.aside__call{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:14px;font-family:var(--head);font-size:13.5px;font-weight:700;color:#fff;
  transition:color .3s var(--ease);
}
.aside__call i{color:var(--orange-2)}
.aside__call:hover{color:var(--orange-2)}

/* recent posts */
.arecent{display:flex;flex-direction:column;gap:6px}
.arecent a{
  display:flex;gap:13px;align-items:center;padding:8px;border-radius:11px;
  transition:background-color .3s var(--ease);
}
.arecent a:hover{background:var(--cream-2)}
.arecent img{
  flex:none;width:62px;height:56px;object-fit:cover;border-radius:9px;
}
.arecent b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--head);font-size:13.2px;font-weight:700;line-height:1.45;color:var(--ink);
  transition:color .3s var(--ease);
}
.arecent a:hover b{color:var(--orange-dark)}
.arecent em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--muted)}

/* categories */
.acats{display:flex;flex-direction:column;gap:2px}
.acats a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:9px;
  font-family:var(--head);font-size:13.4px;font-weight:600;color:var(--body);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.acats a b{
  font-size:11.5px;font-weight:800;color:var(--muted);
  background:#f4f5f8;border-radius:100px;padding:2px 9px;min-width:24px;text-align:center;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.acats a:hover{background:var(--cream-2);color:var(--ink)}
.acats a.is-active{background:#fff3e6;color:var(--orange-dark)}
.acats a.is-active b{background:var(--orange);color:#fff}

/* ---------------------------------------------------------------------
   Prev / next
   --------------------------------------------------------------------- */
.anav{padding:0 0 12px;background:linear-gradient(180deg,#fff,var(--cream-2))}
.anav__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.anav__spacer{display:block}
.anav__item{
  display:flex;flex-direction:column;gap:9px;
  padding:24px 26px;background:#fff;
  border:1px solid #f1ece4;border-radius:var(--radius-lg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s var(--ease);
}
.anav__item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#fff}
.anav__item--next{text-align:right;align-items:flex-end}
.anav__dir{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--orange);
}
.anav__item b{
  font-family:var(--head);font-size:15.5px;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s var(--ease);
}
.anav__item:hover b{color:var(--orange-dark)}

.arel{background:linear-gradient(180deg,var(--cream-2),#fff)}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .awrap__grid{grid-template-columns:1fr;gap:44px}
  .aside__sticky{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .atoc{grid-column:1/-1}
}

@media (max-width:900px){
  .ahero{padding:62px 0 68px}
  .apost{font-size:15.4px}
  .apost > p:first-of-type{font-size:16.4px}
}

@media (max-width:720px){
  .aside__sticky{grid-template-columns:1fr}
  .anav__grid{grid-template-columns:1fr}
  .anav__item--next{text-align:left;align-items:flex-start}
  .aauthor{flex-direction:column;gap:16px;padding:26px 22px}
  .apull{padding:26px 22px 24px 52px}
  .apull > i{left:20px;top:24px;font-size:17px}
  .apull p{font-size:17.5px}
  .ashare{flex-direction:column;align-items:flex-start}
}

@media (max-width:470px){
  .ahero__meta{gap:11px;font-size:12.5px}
  .ahero__sep{display:none}
  .atip{flex-direction:column;gap:12px;padding:20px}
  .arecent img{width:54px;height:50px}
}

/* ---------------------------------------------------------------------
   Article written in the admin editor (BodyHtml). Styled by element,
   since the markup comes from the editor rather than from block types.
   --------------------------------------------------------------------- */
.apost__html h2{
  position:relative;font-size:clamp(21px,2.3vw,27px);line-height:1.3;
  color:var(--ink);margin:44px 0 18px;padding-left:20px;scroll-margin-top:110px;
}
.apost__html h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  border-radius:6px;background:linear-gradient(180deg,var(--orange-2),var(--orange-dark));
}
.apost__html h3{font-size:18.5px;line-height:1.35;color:var(--ink);margin:28px 0 10px}
.apost__html p{margin-bottom:22px}
.apost__html a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}
.apost__html ul,.apost__html ol{margin:0 0 24px;padding-left:22px}
.apost__html li{margin-bottom:10px;line-height:1.8}
.apost__html img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:8px 0 24px}
.apost__html blockquote{
  position:relative;margin:32px 0;padding:26px 30px;
  background:linear-gradient(120deg,var(--cream),#fffdfa);
  border:1px solid #f2e7d8;border-left:4px solid var(--orange);border-radius:var(--radius);
  font-family:var(--display);font-size:19px;line-height:1.6;color:var(--ink);font-style:italic;
}
.apost__html table{
  width:100%;border-collapse:collapse;margin:0 0 26px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);overflow:hidden;font-size:14.2px;
}
.apost__html th,.apost__html td{padding:12px 16px;text-align:left;border-bottom:1px solid #f4f2ee}
.apost__html thead th{background:var(--cream-2);font-family:var(--head);font-weight:700;color:var(--ink)}
.apost__html tr:last-child td{border-bottom:0}
@media (max-width:720px){ .apost__html table{display:block;overflow-x:auto} }


/* #####################################################################
   3. PAGE - /gallery
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Gallery page
   Loaded after css/style.css, which owns the shared tokens, the page
   hero (.phero) and the centred section heading.

   Contents
     1. Intro strip
     2. Filter bar
     3. Masonry grid + photo card
     4. Load more
     5. Plan-your-own strip
     6. Lightbox
     7. Responsive
   ===================================================================== */

/* =====================================================================
   1. Intro strip
   ===================================================================== */
.gintro__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.gintro__grid h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.24}
.gintro__copy p{font-size:14.5px;line-height:1.9;margin-bottom:24px}

.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gstat{
  padding:18px 16px;border-radius:14px;text-align:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .35s var(--ease);
}
.gstat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(245,130,32,.35)}
.gstat i{font-size:17px;color:var(--orange);margin-bottom:9px;display:block}
.gstat b{display:block;font-family:var(--head);font-size:21px;color:var(--ink);line-height:1.1}
.gstat span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* =====================================================================
   2. Filter bar
   ===================================================================== */
.ggrid-sec{background:linear-gradient(180deg,#fffdfa,#fdf6ec);padding-top:0}

/* rides just under the sticky header, so the towns stay reachable
   however far down the grid you are */
.gbar{
  position:sticky;top:64px;z-index:8;
  margin:0 -24px 34px;padding:20px 24px 18px;
  background:rgba(253,248,242,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(226,213,195,.6);
}
.gfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gfilter__btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 19px;border-radius:100px;
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid #efe6d8;
  transition:transform .35s var(--ease),background-color .35s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),box-shadow .35s var(--ease);
}
.gfilter__btn i{font-size:12px;color:var(--orange);transition:color .3s var(--ease)}
.gfilter__btn span{
  min-width:20px;height:20px;padding:0 5px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;background:rgba(245,130,32,.12);color:var(--orange);
  transition:.3s var(--ease);
}
.gfilter__btn:hover{transform:translateY(-2px);border-color:rgba(245,130,32,.45);box-shadow:var(--shadow-sm)}
.gfilter__btn.is-active{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 8px 20px rgba(245,130,32,.28)}
.gfilter__btn.is-active i{color:#fff}
.gfilter__btn.is-active span{background:rgba(255,255,255,.24);color:#fff}

.gcount{margin-top:13px;text-align:center;font-size:12.5px;color:var(--muted)}

/* =====================================================================
   3. Masonry grid + photo card
   ---------------------------------------------------------------------
   Tiny rows plus a row span per card (set by js/gallery.js from each
   photo's real aspect ratio) give a masonry that keeps DOM order.
   ===================================================================== */
.ggrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
  grid-auto-rows:8px;
  grid-auto-flow:row dense;   /* without this the odd sizes leave holes */
  gap:18px;
}

.gcard{
  position:relative;margin:0;overflow:hidden;cursor:zoom-in;
  border-radius:16px;background:#e9ecf1;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  animation:gcard-in .6s var(--ease-out) backwards;
  animation-delay:calc(var(--n,0) * 45ms);
}
@keyframes gcard-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

.gcard img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out),filter .5s var(--ease);
}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.gcard:hover img{transform:scale(1.09)}

.gcard__grad{
  position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,rgba(10,26,42,0) 34%,rgba(10,26,42,.42) 62%,rgba(8,22,36,.88) 100%);
}
.gcard:hover .gcard__grad{opacity:1}

.gcard__tag{
  position:absolute;top:13px;left:13px;z-index:2;
  padding:5px 12px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(10,26,42,.5);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-8px);transition:.45s var(--ease);
}
.gcard:hover .gcard__tag{opacity:1;transform:none}

.gcard__ico{
  position:absolute;top:13px;right:13px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;background:var(--orange);
  box-shadow:0 8px 18px rgba(245,130,32,.4);
  opacity:0;transform:scale(.7) rotate(-25deg);transition:.45s var(--ease);
}
.gcard:hover .gcard__ico{opacity:1;transform:none}

.gcard__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 17px;
  color:#fff;opacity:0;transform:translateY(14px);transition:.45s var(--ease);
}
.gcard__cap strong{
  display:block;font-family:var(--head);font-size:14.5px;font-weight:700;
  line-height:1.35;letter-spacing:-.01em;
}
.gcard__cap span{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  font-size:11.5px;color:rgba(255,255,255,.78);
}
.gcard__cap span i{color:var(--orange-2);font-size:10px}
.gcard:hover .gcard__cap{opacity:1;transform:none}

/* invisible button over the whole card - keyboard users get the same
   thing the mouse gets, and the click itself is handled on the grid */
.gcard__hit{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:none}
.gcard__hit:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:16px}

.ggrid__empty{
  text-align:center;font-size:14.5px;color:var(--muted);
  padding:52px 20px;border:1px dashed #e6d9c6;border-radius:var(--radius-lg);background:#fff;
}

/* =====================================================================
   4. Load more
   ===================================================================== */
.gmore{margin-top:34px;text-align:center}
.gmore .btn{min-width:210px}

/* =====================================================================
   5. Plan-your-own strip
   ===================================================================== */
.gplan{background:#fff}
.gsteps{display:grid;gap:16px}
.gstep{
  position:relative;padding:22px 20px;
  background:var(--cream-2);border:1px solid #f4ece0;border-radius:var(--radius-lg);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .4s var(--ease);
}
.gstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);background:#fff}
.gstep__num{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;margin-bottom:15px;
  font-family:var(--head);font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));
  box-shadow:0 10px 22px rgba(245,130,32,.3);
  transition:transform .5s var(--ease);
}
.gstep:hover .gstep__num{transform:rotate(-8deg) scale(1.06)}
.gstep h3{font-size:16px;margin-bottom:8px}
.gstep p{font-size:12.5px;line-height:1.8}

/* =====================================================================
   6. Lightbox
   ===================================================================== */
body.lbox-open{overflow:hidden}

.lbox{
  position:fixed;inset:0;z-index:2000;
  display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;transition:opacity .28s var(--ease);
}
.lbox.is-open{opacity:1}
.lbox[hidden]{display:none}

.lbox__scrim{
  position:absolute;inset:0;background:rgba(6,15,25,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

/* top bar --------------------------------------------------------- */
.lbox__bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,3vw,30px);
}
.lbox__meta{display:flex;align-items:center;gap:14px;min-width:0}
.lbox__count{
  font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:6px 14px;white-space:nowrap;
}
.lbox__place{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:rgba(255,255,255,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lbox__place i{color:var(--orange-2);font-size:11px}

.lbox__tools{display:flex;align-items:center;gap:9px;flex-shrink:0}
.lbox__btn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  transition:background-color .3s var(--ease),transform .35s var(--ease),border-color .3s var(--ease);
}
.lbox__btn:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.08)}
.lbox__btn:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px}
.lbox.is-playing .lbox__btn#lboxPlay{background:var(--orange);border-color:var(--orange)}

/* stage ----------------------------------------------------------- */
.lbox__stage{
  position:relative;z-index:2;margin:0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:0 clamp(16px,7vw,110px);
}
/* the frame takes the leftover height of the stage, which is what lets
   the photo below size itself with max-height:100% */
.lbox__frame{
  position:relative;flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.lbox__frame img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:12px;background:#0b1a2a;
  box-shadow:0 34px 80px rgba(0,0,0,.6);
  opacity:0;transition:opacity .38s var(--ease),transform .45s var(--ease-out);
}
.lbox__frame img.is-in{opacity:1}

.lbox__spin{
  position:absolute;width:34px;height:34px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.22);border-top-color:var(--orange);
  opacity:0;transition:opacity .2s var(--ease);
  animation:lbox-spin .8s linear infinite;
}
.lbox__frame.is-loading .lbox__spin{opacity:1}
@keyframes lbox-spin{to{transform:rotate(360deg)}}

.lbox__cap{text-align:center;max-width:640px}
.lbox__cap h3{
  font-family:var(--display);font-size:clamp(17px,2.2vw,23px);color:#fff;font-weight:700;
  letter-spacing:0;line-height:1.3;
}
.lbox__cap p{margin-top:8px}
.lbox__cap span{
  display:inline-block;padding:4px 13px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-2);background:rgba(245,130,32,.14);border:1px solid rgba(245,130,32,.3);
}

/* arrows ---------------------------------------------------------- */
.lbox__nav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             transform .4s var(--ease),box-shadow .4s var(--ease);
}
.lbox__nav--prev{left:clamp(12px,3vw,38px)}
.lbox__nav--next{right:clamp(12px,3vw,38px)}
/* the rule above sets display:flex, which would otherwise win over the
   hidden attribute the script uses on single-photo galleries */
.lbox__nav[hidden]{display:none}
.lbox__nav:hover{background:var(--orange);border-color:var(--orange);box-shadow:0 16px 34px rgba(245,130,32,.45)}
.lbox__nav--prev:hover{transform:translateY(-50%) translateX(-4px) scale(1.06)}
.lbox__nav--next:hover{transform:translateY(-50%) translateX(4px) scale(1.06)}
.lbox__nav:focus-visible{outline:2px solid var(--orange-2);outline-offset:4px}

/* filmstrip ------------------------------------------------------- */
.lbox__film{
  position:relative;z-index:2;
  display:flex;gap:9px;align-items:center;
  padding:16px clamp(16px,3vw,30px) 20px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.lbox__film::-webkit-scrollbar{display:none}
.lbox__thumb{
  flex:0 0 auto;width:74px;height:52px;border-radius:8px;overflow:hidden;
  opacity:.42;border:2px solid transparent;padding:0;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.lbox__thumb img{width:100%;height:100%;object-fit:cover}
.lbox__thumb:hover{opacity:.85;transform:translateY(-3px)}
.lbox__thumb.is-active{opacity:1;border-color:var(--orange);transform:translateY(-3px)}
.lbox__thumb:focus-visible{outline:2px solid var(--orange-2);outline-offset:2px;opacity:1}

/* =====================================================================
   7. Responsive
   ===================================================================== */
@media (min-width:620px){
  .gsteps{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:992px){
  .gsteps{grid-template-columns:repeat(4,1fr);gap:20px}
}
@media (max-width:1080px){
  .gintro__grid{grid-template-columns:1fr;gap:34px}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
}
@media (max-width:900px){
  .gbar{top:64px;margin-bottom:26px;padding:16px 24px 14px}
  .lbox__nav{width:48px;height:48px;font-size:17px}
}
@media (max-width:720px){
  .ggrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gcard{border-radius:13px}
  .gcard__cap{padding:12px 13px}
  .gcard__cap strong{font-size:13px}
  .gcard__ico{width:31px;height:31px;font-size:11px;top:10px;right:10px}
  .gcard__tag{top:10px;left:10px;font-size:9.5px;padding:4px 9px}
  .gstats{gap:10px}
  .gstat{padding:14px 10px}
  .gstat b{font-size:18px}
  .gstat span{font-size:10px}

  /* no room to keep the arrows clear of the photo - they overlay its
     edges instead, which is what every phone gallery does */
  .lbox__stage{padding:0 12px;gap:12px}
  .lbox__nav{width:42px;height:42px;font-size:15px;background:rgba(10,22,36,.6)}
  .lbox__nav--prev{left:6px}
  .lbox__nav--next{right:6px}
  .lbox__film{padding:10px 14px 14px;gap:7px}
  .lbox__thumb{width:56px;height:40px}
  .lbox__cap h3{font-size:16px}
  .lbox__btn{width:38px;height:38px;font-size:14px}
}
@media (max-width:420px){
  .ggrid{gap:10px}
  .gfilter__btn{padding:9px 14px;font-size:12px}
}

/* the card entrance is decoration - drop it when motion is unwelcome */
@media (prefers-reduced-motion:reduce){
  .gcard{animation:none}
  .lbox,.lbox__frame img{transition:none}
}


/* #####################################################################
   3. PAGE - /videos
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Video gallery page
   Loaded after css/style.css and css/gallery.css. Those two own the
   shared tokens, the page hero, and the pieces this page reuses as is -
   the sticky filter bar (.gbar / .gfilter), the intro stats (.gstat)
   and the numbered steps (.gstep).

   Contents
     1. Featured film + up-next rail
     2. Photos / Videos switch
     3. Video card grid
     4. Player
     5. Responsive
   ===================================================================== */

/* =====================================================================
   1. Featured film
   ---------------------------------------------------------------------
   The page hero above this is dark navy, so the band itself is light -
   two dark blocks stacked read as one. The contrast is inverted inside
   instead: a single navy card, sitting on the light band.

   The player is a facade. The poster and a play button are all that
   load; the real embed only appears on click, so the page does not pull
   a YouTube iframe on every visit.
   ===================================================================== */
.vfeat{position:relative;overflow:hidden;background:#fff;padding-top:64px}
/* a warm wash under the card, so the white is not flat */
.vfeat__glow{
  position:absolute;left:50%;bottom:-140px;transform:translateX(-50%);
  width:min(1100px,130%);height:420px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,130,32,.13),rgba(245,130,32,0) 72%);
}
.vfeat > .container{position:relative;z-index:2}
.vfeat__head{margin-bottom:30px;align-items:flex-end}
.vfeat__head h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.24}
.vfeat__lede{
  max-width:330px;font-size:13.5px;line-height:1.85;
  color:var(--body);padding-bottom:6px;
}

/* ---- the card ---- */
.vfeat__card{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:36px;align-items:center;
  padding:22px;border-radius:24px;
  background:linear-gradient(140deg,#16324b 0%,#0e2135 55%,#0b1a2a 100%);
  box-shadow:0 30px 70px rgba(9,24,40,.34);
}
/* a hairline of brand colour along the top edge */
.vfeat__card::before{
  content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,rgba(245,130,32,0),var(--orange) 32%,var(--orange-2) 68%,rgba(245,130,32,0));
}

/* ---- player ---- */
.vfeat__player{
  position:relative;aspect-ratio:16/9;min-width:0;
  border-radius:16px;overflow:hidden;background:#08131f;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
}
.vfeat__player img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.vfeat__player iframe,
.vfeat__player video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#08131f}
.vfeat__pgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,16,27,.28) 0%,rgba(6,16,27,.06) 45%,rgba(6,16,27,.55) 100%);
  transition:opacity .4s var(--ease);
}

.vfeat__pbtn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;padding-left:6px;
  background:rgba(245,130,32,.95);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  transition:transform .45s var(--ease),background-color .35s var(--ease);
}
.vfeat__pbtn::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);opacity:.7;
}
@media (hover:hover){
  .vfeat__pbtn::after{animation:vplay-ring 2.4s var(--ease) infinite}
}
.vfeat__player:hover img{transform:scale(1.05)}
.vfeat__player:hover .vfeat__pbtn{transform:translate(-50%,-50%) scale(1.09);background:var(--orange)}
.vfeat__pbtn:focus-visible{outline:3px solid var(--orange-2);outline-offset:4px}

.vfeat__player .vcard__len{right:14px;bottom:14px}

/* once the real embed is in, the facade has to get out of the way */
.vfeat__player.is-playing img,
.vfeat__player.is-playing .vfeat__pgrad,
.vfeat__player.is-playing .vfeat__pbtn,
.vfeat__player.is-playing .vcard__len{display:none}

/* ---- the column beside it ---- */
.vfeat__info{min-width:0;padding:6px 12px 6px 0}
.vfeat__badge{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:7px 15px;border-radius:100px;
  font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--orange-2),var(--orange));
  box-shadow:0 10px 24px rgba(245,130,32,.34);
}
.vfeat__badge i{font-size:10px}
.vfeat__info h3{
  font-family:var(--display);font-size:clamp(22px,2.5vw,31px);
  color:#fff;font-weight:700;letter-spacing:0;line-height:1.24;
}
.vfeat__info p{
  margin-top:13px;font-size:14px;line-height:1.85;color:rgba(255,255,255,.66);
}
.vfeat__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:20px;
  font-size:12.5px;color:rgba(255,255,255,.58);
}
.vfeat__meta span{display:inline-flex;align-items:center;gap:8px}
.vfeat__meta i{color:var(--orange-2);font-size:11.5px}
.vfeat__all{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--orange-2);
}
.vfeat__all i{font-size:11px;transition:transform .4s var(--ease)}
.vfeat__all:hover i{transform:translateY(3px)}


/* =====================================================================
   2. Photos / Videos switch
   ===================================================================== */
.gswitch{display:flex;justify-content:center;margin-bottom:26px}
.gswitch__inner{
  display:inline-flex;gap:4px;padding:5px;border-radius:100px;
  background:#fff;border:1px solid #efe6d8;box-shadow:var(--shadow-xs);
}
.gswitch a{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 22px;border-radius:100px;
  font-family:var(--head);font-size:13px;font-weight:700;color:var(--body);
  transition:background-color .35s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease);
}
.gswitch a i{font-size:12.5px}
.gswitch a:hover{color:var(--orange)}
.gswitch a.is-on{
  background:var(--orange);color:#fff;
  box-shadow:0 8px 20px rgba(245,130,32,.28);
}
.gswitch a.is-on:hover{color:#fff}

/* =====================================================================
   3. Video card grid
   ===================================================================== */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}

.vcard{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
  animation:vcard-in .6s var(--ease-out) backwards;
  animation-delay:calc(var(--n,0) * 55ms);
}
@keyframes vcard-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.vcard:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(245,130,32,.3)}

.vcard__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0f2133}
.vcard__thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out),filter .5s var(--ease);
}
.vcard:hover .vcard__thumb img{transform:scale(1.08)}

.vcard__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,20,34,.15) 0%,rgba(8,20,34,.05) 45%,rgba(8,20,34,.6) 100%);
  transition:opacity .45s var(--ease);
}

/* the play button, with a ring that breathes on hover */
.vcard__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;padding-left:4px;
  background:rgba(245,130,32,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  transition:transform .45s var(--ease),background-color .35s var(--ease);
}
.vcard__play::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);opacity:0;transform:scale(.82);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.1);background:var(--orange)}
.vcard:hover .vcard__play::after{opacity:1;transform:scale(1)}
@media (hover:hover){
  .vcard:hover .vcard__play::after{animation:vplay-ring 1.9s var(--ease) infinite}
}
@keyframes vplay-ring{
  0%{opacity:.85;transform:scale(.9)}
  70%{opacity:0;transform:scale(1.28)}
  100%{opacity:0;transform:scale(1.28)}
}

.vcard__tag{
  position:absolute;top:13px;left:13px;
  padding:5px 12px;border-radius:100px;
  font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(10,26,42,.55);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

.vcard__len{
  position:absolute;right:13px;bottom:13px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:7px;
  font-family:var(--head);font-size:11px;font-weight:700;color:#fff;
  background:rgba(8,20,34,.72);
}
.vcard__len i{font-size:10px;color:var(--orange-2)}
.vcard__len--soon{background:rgba(8,20,34,.6);font-weight:600;letter-spacing:.04em}

.vcard__body{padding:17px 19px 20px}
.vcard__body h3{
  font-size:16px;line-height:1.35;margin-bottom:8px;
  transition:color .3s var(--ease);
}
.vcard:hover .vcard__body h3{color:var(--orange)}
.vcard__body p{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.vcard__body p i{color:var(--orange);font-size:11px}
.vcard__dot{width:3px;height:3px;border-radius:50%;background:#cfd5dd;margin:0 2px}

.vcard__hit{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:none}
.vcard__hit:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:var(--radius-lg)}

.vgrid__empty{
  text-align:center;font-size:14.5px;color:var(--muted);
  padding:52px 20px;border:1px dashed #e6d9c6;border-radius:var(--radius-lg);background:#fff;
}

/* =====================================================================
   4. Player
   ===================================================================== */
body.vbox-open{overflow:hidden}

.vbox{
  position:fixed;inset:0;z-index:2000;
  display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;transition:opacity .28s var(--ease);
}
.vbox.is-open{opacity:1}
.vbox[hidden]{display:none}

.vbox__scrim{
  position:absolute;inset:0;background:rgba(5,13,22,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

.vbox__bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,3vw,30px);
}
.vbox__meta{display:flex;align-items:center;gap:14px;min-width:0}
.vbox__count{
  font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:6px 14px;white-space:nowrap;
}
.vbox__place{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vbox__place i{color:var(--orange-2);font-size:11px}

.vbox__btn{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  transition:background-color .3s var(--ease),transform .35s var(--ease),border-color .3s var(--ease);
}
.vbox__btn:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.08)}
.vbox__btn:focus-visible{outline:2px solid var(--orange-2);outline-offset:3px}

.vbox__stage{
  position:relative;z-index:2;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:0 clamp(16px,7vw,110px);
}

/* the 16:9 box every source drops into - iframe, <video> or the
   "not up yet" panel all fill it exactly */
.vbox__frame{
  position:relative;width:min(1120px,100%);aspect-ratio:16/9;
  max-height:100%;border-radius:14px;overflow:hidden;
  background:#0a1725;box-shadow:0 34px 80px rgba(0,0,0,.62);
}
.vbox__frame iframe,
.vbox__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0a1725}

.vbox__soon{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;
  padding:30px 26px;
  background:radial-gradient(120% 130% at 50% 0%,#16354f 0%,#0a1725 70%);
}
.vbox__soon-ico{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;color:var(--orange-2);
  background:rgba(245,130,32,.14);border:1px solid rgba(245,130,32,.32);
}
.vbox__soon h4{font-family:var(--head);font-size:18px;color:#fff}
.vbox__soon p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.66);max-width:430px}
.vbox__soon .btn{margin-top:4px}

.vbox__cap{text-align:center;max-width:680px}
.vbox__cap h3{
  font-family:var(--display);font-size:clamp(17px,2.2vw,23px);color:#fff;
  font-weight:700;letter-spacing:0;line-height:1.3;
}
.vbox__cap p{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.7}

.vbox__nav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             transform .4s var(--ease),box-shadow .4s var(--ease);
}
.vbox__nav--prev{left:clamp(12px,3vw,38px)}
.vbox__nav--next{right:clamp(12px,3vw,38px)}
.vbox__nav:hover{background:var(--orange);border-color:var(--orange);box-shadow:0 16px 34px rgba(245,130,32,.45)}
.vbox__nav--prev:hover{transform:translateY(-50%) translateX(-4px) scale(1.06)}
.vbox__nav--next:hover{transform:translateY(-50%) translateX(4px) scale(1.06)}
.vbox__nav:focus-visible{outline:2px solid var(--orange-2);outline-offset:4px}

.vbox__film{
  position:relative;z-index:2;
  display:flex;gap:10px;align-items:center;
  padding:16px clamp(16px,3vw,30px) 20px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
}
.vbox__film::-webkit-scrollbar{display:none}
.vbox__thumb{
  position:relative;flex:0 0 auto;width:104px;aspect-ratio:16/9;
  border-radius:8px;overflow:hidden;padding:0;
  opacity:.45;border:2px solid transparent;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.vbox__thumb img{width:100%;height:100%;object-fit:cover}
.vbox__thumb-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;color:#fff;padding-left:2px;background:rgba(8,20,34,.6);
}
.vbox__thumb:hover{opacity:.9;transform:translateY(-3px)}
.vbox__thumb.is-active{opacity:1;border-color:var(--orange);transform:translateY(-3px)}
.vbox__thumb.is-active .vbox__thumb-play{background:var(--orange)}
.vbox__thumb:focus-visible{outline:2px solid var(--orange-2);outline-offset:2px;opacity:1}

/* =====================================================================
   5. Responsive
   ===================================================================== */
@media (max-width:1080px){
  /* the copy goes under the player rather than beside it */
  .vfeat__card{grid-template-columns:minmax(0,1fr);gap:22px}
  .vfeat__info{padding:0 6px 6px}
  .vfeat__lede{max-width:none;padding-bottom:0}
}
@media (max-width:900px){
  .vfeat{padding-top:52px}
  .vfeat__pbtn{width:66px;height:66px;font-size:19px}
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
  .vbox__nav{width:48px;height:48px;font-size:17px}
}
@media (max-width:720px){
  .vfeat__head{margin-bottom:22px}
  .vfeat__card{padding:14px;border-radius:18px;gap:18px}
  .vfeat__card::before{left:16px;right:16px}
  .vfeat__player{border-radius:12px}
  .vfeat__pbtn{width:56px;height:56px;font-size:16px}
  .vfeat__pbtn::after{inset:-8px}
  .vfeat__badge{font-size:10px;padding:6px 12px;margin-bottom:12px}
  .vfeat__info p{font-size:13.5px}
  .vgrid{grid-template-columns:1fr;gap:16px}
  .vcard__play{width:50px;height:50px;font-size:15px}
  .vcard__body{padding:15px 16px 18px}
  .vcard__body h3{font-size:15px}

  .gswitch a{padding:9px 16px;font-size:12.5px}

  /* the arrows drop below the film so they never cover the controls */
  .vbox__stage{padding:0 14px;gap:14px}
  .vbox__nav{top:auto;bottom:14px;transform:none;width:44px;height:44px;font-size:16px;background:rgba(10,22,36,.75)}
  .vbox__nav--prev{left:14px}
  .vbox__nav--next{right:14px}
  .vbox__nav--prev:hover,.vbox__nav--next:hover{transform:scale(1.06)}
  .vbox__film{padding:10px 68px 16px;gap:8px}
  .vbox__thumb{width:82px}
  .vbox__cap h3{font-size:16px}
  .vbox__cap p{font-size:12.5px}
  .vbox__btn{width:38px;height:38px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .vcard{animation:none}
  .vfeat__pbtn::after{animation:none}
  .vbox{transition:none}
  .vcard:hover .vcard__play::after{animation:none}
}


/* #####################################################################
   3. PAGE - /faq
   ##################################################################### */

/* =====================================================================
   Kashi Experts - FAQ page stylesheet
   The .faq / .faq__q / .faq__a accordion itself lives in the shared
   faq-accordion.css (loaded alongside this file) and is driven by the
   shared js/faq-accordion.js; this sheet adds the page around it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hero search
   --------------------------------------------------------------------- */
.qhero .phero__bg{filter:saturate(.85)}

.qsearch{
  position:relative;display:flex;align-items:center;gap:10px;
  width:min(540px,100%);margin:26px auto 0;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28);
  border-radius:100px;padding:6px 6px 6px 20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease);
}
.qsearch:focus-within{
  border-color:var(--orange-2);background:rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.qsearch > i{color:rgba(255,255,255,.7);font-size:14px;flex:none}
.qsearch input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--font);font-size:14.5px;color:#fff;padding:10px 0;
}
.qsearch input::placeholder{color:rgba(255,255,255,.62)}
.qsearch input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.qsearch__go{
  flex:none;background:var(--orange);color:#fff;border-radius:100px;
  font-family:var(--head);font-size:13.5px;font-weight:700;padding:11px 24px;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.qsearch__go:hover{background:var(--orange-dark);transform:translateY(-1px)}

/* ---------------------------------------------------------------------
   Category filter
   --------------------------------------------------------------------- */
.qsec{background:linear-gradient(180deg,#fff,var(--cream-2))}

.qfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 34px}
.qfilter__btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:10px 18px;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.qfilter__btn i{font-size:12.5px;color:var(--orange);transition:color .3s var(--ease)}
.qfilter__btn span:last-child{
  font-size:11.5px;font-weight:800;color:var(--muted);
  background:#f4f5f8;border-radius:100px;padding:2px 9px;min-width:24px;text-align:center;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.qfilter__btn:hover{border-color:var(--orange);color:var(--orange-dark);transform:translateY(-2px)}
.qfilter__btn.is-active{
  background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:0 10px 24px rgba(19,41,63,.22);
}
.qfilter__btn.is-active i{color:var(--orange-2)}
.qfilter__btn.is-active span:last-child{background:rgba(255,255,255,.16);color:#fff}

.qresult{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin:-14px 0 30px;font-size:13.5px;color:var(--muted);
}
.qresult b{color:var(--ink)}
.qresult__term{color:var(--ink);font-style:italic}
.qresult__clear{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-size:12.5px;font-weight:700;color:var(--orange-dark);
  background:#fff3e6;border-radius:100px;padding:6px 14px;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.qresult__clear:hover{background:var(--orange);color:#fff}

/* ---------------------------------------------------------------------
   Grouped accordion
   --------------------------------------------------------------------- */
.qwrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:34px}
.qgroup{display:flex;flex-direction:column;gap:12px}
.qgroup__head{
  display:flex;align-items:center;gap:13px;
  font-size:17px;letter-spacing:-.01em;color:var(--ink);
  padding-bottom:13px;margin-bottom:4px;border-bottom:1px solid #efe6d8;
}
.qgroup__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:11px;
  background:#fff3e6;color:var(--orange-dark);font-size:14px;
}
.qgroup__head b{
  margin-left:auto;font-family:var(--head);font-size:11.5px;font-weight:800;
  color:var(--muted);background:#f4f5f8;border-radius:100px;padding:3px 11px;
}
.qitem.is-hidden{display:none}
.qgrid__empty{text-align:center;padding:36px 0 0;font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.qempty{
  text-align:center;max-width:520px;margin:0 auto;padding:52px 28px;
  background:#fff;border:1px dashed #e6dfd4;border-radius:var(--radius-lg);
}
.qempty__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:18px;
  background:#fff3e6;color:var(--orange);font-size:24px;
}
.qempty h3{font-size:21px;margin-bottom:10px}
.qempty p{font-size:14.5px;line-height:1.8;margin-bottom:22px}
.qempty__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------------
   Ask band
   --------------------------------------------------------------------- */
.qask{padding:66px 0;background:var(--cream)}
.qask__inner{
  display:grid;grid-template-columns:1.25fr auto;align-items:center;gap:34px;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  border-radius:var(--radius-lg);padding:44px 48px;
  box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.qask__inner::after{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.28),transparent 68%);
}
.qask__copy{position:relative;z-index:1}
.qask__copy .eyebrow{color:var(--orange-2)}
.qask__copy h2{font-family:var(--display);color:#fff;font-size:clamp(23px,2.5vw,32px);line-height:1.22;margin:10px 0 12px}
.qask__copy p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.8;max-width:56ch}
.qask__meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}
.qask__meta span{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;color:rgba(255,255,255,.78);
}
.qask__meta i{color:var(--orange-2)}
.qask__btns{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.qask__call{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--head);font-size:14px;font-weight:700;color:#fff;
  transition:color .3s var(--ease);
}
.qask__call i{color:var(--orange-2)}
.qask__call:hover{color:var(--orange-2)}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .qask__inner{grid-template-columns:1fr;padding:36px 30px}
  .qask__btns{flex-direction:row;flex-wrap:wrap}
  .qask__btns .btn{flex:1 1 auto}
}

@media (max-width:720px){
  .qsearch{padding:5px 5px 5px 16px}
  .qsearch__go{padding:10px 18px;font-size:12.5px}
  .qfilter{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:6px;margin-inline:-24px;padding-inline:24px;scrollbar-width:none;
  }
  .qfilter::-webkit-scrollbar{display:none}
  .qfilter__btn{flex:none}
}

@media (max-width:470px){
  .qsearch{flex-wrap:wrap;border-radius:var(--radius);padding:12px 14px}
  .qsearch input{width:100%;flex-basis:100%}
  .qsearch__go{width:100%}
  .qgroup__head{font-size:15.5px}
  .qempty{padding:40px 20px}
}


/* #####################################################################
   3. PAGE - /pay-online
   ##################################################################### */

/* =====================================================================
   Kashi Experts - Pay Online page
   ===================================================================== */

.payhero__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.payhero__trust span{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-size:12.6px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:100px;padding:8px 16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.payhero__trust i{color:var(--orange-2);font-size:12px}

/* ---------------------------------------------------------------------
   "Not configured yet" notice
   --------------------------------------------------------------------- */
.paynotice{
  display:flex;gap:20px;align-items:flex-start;max-width:760px;margin:0 auto;
  background:#fff8ee;border:1px solid #f6e0c4;border-radius:var(--radius-lg);
  padding:30px 32px;
}
.paynotice__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:var(--orange);color:#fff;font-size:19px;
}
.paynotice h3{font-size:20px;margin-bottom:9px}
.paynotice p{font-size:14.6px;line-height:1.8;margin-bottom:20px}
.paynotice__btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------------
   Payment method cards
   --------------------------------------------------------------------- */
.paysec{background:linear-gradient(180deg,#fff,var(--cream-2))}
.paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;align-items:start}

.paycard{
  position:relative;display:flex;flex-direction:column;gap:11px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:32px 28px 28px;box-shadow:var(--shadow-xs);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease);
}
.paycard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#ffe2c6}
.paycard__step{
  position:absolute;top:-18px;left:26px;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;
  background:var(--navy);color:#fff;
  font-family:var(--head);font-size:15px;font-weight:800;
  box-shadow:0 10px 20px rgba(19,41,63,.22);
}
.paycard__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:15px;margin-bottom:4px;
  background:linear-gradient(135deg,var(--orange-2),var(--orange-dark));
  color:#fff;font-size:21px;box-shadow:0 10px 22px rgba(245,130,32,.32);
}
.paycard h3{font-size:19px;line-height:1.3}
.paycard > p{font-size:14px;line-height:1.75;color:var(--body)}
.paycard__note{font-size:12.4px;line-height:1.65;color:var(--muted);margin-top:auto;padding-top:6px}

.payqr{
  align-self:center;padding:14px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-xs);
}
.payqr img{width:210px;height:210px;object-fit:contain;display:block}

/* copy-to-clipboard rows */
.paycopy{
  display:flex;align-items:center;gap:12px;
  background:var(--cream-2);border:1px dashed #e6d6bd;border-radius:var(--radius);
  padding:13px 15px;transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.paycopy--sm{padding:10px 13px}
.paycopy.is-copied{border-color:#25d366;border-style:solid;background:#eafaf0}
.paycopy__label{
  flex:none;font-family:var(--head);font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.paycopy__value{
  flex:1;min-width:0;font-family:var(--head);font-size:14.5px;color:var(--ink);
  word-break:break-all;line-height:1.4;
}
.paycopy--sm .paycopy__value{font-size:13.5px}
.paycopy__btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13px;
  transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.paycopy__btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.paycopy.is-copied .paycopy__btn{background:#25d366;border-color:#25d366;color:#fff}

.payrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid #f4f2ee;font-size:13.6px;
}
.payrow:last-child{border-bottom:0}
.payrow span{color:var(--muted);flex:none}
.payrow b{font-family:var(--head);color:var(--ink);text-align:right;word-break:break-word}

.paybank{display:flex;flex-direction:column;gap:8px}
.payupi{align-self:flex-start;margin-top:4px}

.payadvance{
  display:flex;align-items:flex-start;gap:12px;max-width:760px;margin:34px auto 0;
  background:#f4f9ff;border:1px solid #dbe9f8;border-radius:var(--radius);
  padding:18px 22px;font-size:14px;line-height:1.75;color:#4d5b6a;
}
.payadvance i{color:var(--navy);font-size:15px;margin-top:3px;flex:none}

/* ---------------------------------------------------------------------
   Report-a-payment form
   --------------------------------------------------------------------- */
.payform-sec{background:var(--cream)}
.payform__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}

.payform__intro p{font-size:15px;line-height:1.85;margin:14px 0 22px;max-width:52ch}
.paysteps{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.paysteps li{display:flex;align-items:flex-start;gap:13px;font-size:14.4px;line-height:1.7;color:var(--body)}
.paysteps li i{
  flex:none;margin-top:4px;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff3e6;color:var(--orange-dark);font-size:9.5px;
}
.payhelp{
  display:flex;align-items:center;gap:15px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-xs);
}
.payhelp i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--navy);color:var(--orange-2);font-size:16px;
}
.payhelp b{display:block;font-family:var(--head);font-size:14.5px;color:var(--ink)}
.payhelp span{font-size:13px;color:var(--body)}

.payform{
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:34px 34px 30px;box-shadow:var(--shadow-sm);
}
.payform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.payform__field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.payform__field label{
  font-family:var(--head);font-size:12.4px;font-weight:700;color:var(--ink);
}
.payform__field label b{color:var(--orange);font-weight:700}
.payform__field input,
.payform__field select,
.payform__field textarea{
  width:100%;font-family:var(--font);font-size:14px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;outline:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.payform__field textarea{resize:vertical;min-height:84px;line-height:1.7}
.payform__field input:focus,
.payform__field select:focus,
.payform__field textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 4px rgba(245,130,32,.12);
}

.payform__err{
  background:#fdeceb;border:1px solid #f6cfcc;border-radius:10px;
  padding:11px 14px;font-size:13.4px;color:#a33131;margin-bottom:14px;
}
.payform__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.payform__actions .btn{flex:1 1 220px;justify-content:center}
.payform__small{
  margin-top:14px;font-size:12.2px;line-height:1.65;color:var(--muted);
}

/* ---------------------------------------------------------------------
   Receipt attachment. The whole tile is the drop target; the real
   <input type=file> sits invisibly on top of it so a click anywhere
   opens the picker without any JS of its own.
   --------------------------------------------------------------------- */
.payfile{
  position:relative;display:flex;align-items:center;gap:14px;
  border:1.5px dashed var(--line);border-radius:12px;
  background:#fcfaf7;padding:14px 16px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.payfile:hover,
.payfile.is-dragover{border-color:var(--orange);background:#fff7ef}
.payfile.has-file{border-style:solid;border-color:#bfe0cb;background:#f6fbf8}

.payfile input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;padding:0;
}
.payfile__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:10px;
  background:#fff;border:1px solid var(--line);color:var(--orange);font-size:17px;
}
.payfile.has-file .payfile__ico{color:#25a35a;border-color:#bfe0cb}
.payfile__text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.payfile__text b{font-family:var(--head);font-size:13.4px;color:var(--ink)}
.payfile__text small{
  font-size:12.1px;color:var(--muted);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.payfile__pick,
.payfile__clear{
  position:relative;z-index:1;flex:none;cursor:pointer;
  font-family:var(--font);border-radius:8px;transition:all .25s var(--ease);
}
.payfile__pick{
  background:#fff;border:1.5px solid var(--line);color:var(--ink);
  font-size:12.6px;font-weight:600;padding:9px 14px;
}
.payfile__pick:hover{border-color:var(--orange);color:var(--orange)}
.payfile__clear{
  background:none;border:0;color:var(--muted);font-size:15px;padding:6px 8px;
}
.payfile__clear:hover{color:#a33131}
.payfile__preview{
  display:block;margin-top:10px;max-height:150px;border-radius:10px;
  border:1px solid var(--line);object-fit:contain;background:#fff;
}

.paydone{text-align:center;padding:14px 0 4px}
.paydone__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:16px;
  background:#eafaf0;color:#25a35a;font-size:27px;
}
.paydone h3{font-size:22px;margin-bottom:10px}
.paydone p{font-size:14.6px;line-height:1.8;margin-bottom:22px}
.paydone__ask{
  font-size:13.8px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:20px;margin-bottom:16px;
}
.paydone__btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .payform__grid{grid-template-columns:1fr;gap:34px}
}

@media (max-width:720px){
  .paynotice{flex-direction:column;padding:26px 22px}
  .payform{padding:26px 22px 24px}
  .payform__row{grid-template-columns:1fr;gap:0}
  .paycard{padding:30px 22px 24px}
  .payqr img{width:180px;height:180px}
  .payform__actions .btn{flex:1 1 100%}
  .payfile{flex-wrap:wrap}
  .payfile__text{flex:1 1 100%;order:3}
  .paydone__btns .btn{flex:1 1 100%;justify-content:center}
}

@media (max-width:470px){
  .paycopy{flex-wrap:wrap}
  .paycopy__value{flex:1 1 100%;order:3}
  .payrow{flex-direction:column;gap:2px}
  .payrow b{text-align:left}
}

/* The site sets the Playfair display serif on left-aligned section headings
   per page (see .dintro__grid h2 / .faqs__intro h2 in destinations.css);
   only .sec-head--center picks it up from style.css. Without these the
   headings here render in the sans --head face and look wrong next to
   every other page. */
.payform__intro h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.24}


/* #####################################################################
   3. PAGE - /{slug} content pages
   ##################################################################### */

/* =====================================================================
   Kashi Experts - General content pages (/privacy-policy, /terms-conditions,
   and anything else created in the admin Pages module)
   ---------------------------------------------------------------------
   The body is admin-authored HTML, so everything here is styled by element
   rather than by class - a heading typed in the editor gets the same
   treatment as one that was migrated from the old JSON.
   ===================================================================== */

.pgsec{background:linear-gradient(180deg,#fff,var(--cream-2))}
.pgwrap{max-width:860px;margin:0 auto}

.pgdoc{font-size:15.4px;line-height:1.9;color:var(--body)}
.pgdoc > *:first-child{margin-top:0}

.pgdoc h2{
  position:relative;font-family:var(--display);
  font-size:clamp(21px,2.3vw,27px);line-height:1.3;color:var(--ink);
  margin:42px 0 16px;padding-left:20px;scroll-margin-top:110px;
}
.pgdoc h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  border-radius:6px;background:linear-gradient(180deg,var(--orange-2),var(--orange-dark));
}
.pgdoc h3{font-size:17.5px;line-height:1.35;color:var(--ink);margin:28px 0 10px}
.pgdoc p{margin:0 0 18px}
.pgdoc a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}
.pgdoc a:hover{color:var(--orange)}
.pgdoc strong,.pgdoc b{color:var(--ink);font-weight:700}
.pgdoc hr{border:0;border-top:1px solid #efe6d8;margin:32px 0}

.pgdoc ul,.pgdoc ol{margin:0 0 20px;padding-left:0;list-style:none}
.pgdoc ol{counter-reset:pgol}
.pgdoc li{position:relative;padding-left:30px;margin-bottom:10px;line-height:1.8}
.pgdoc ul > li::before{
  content:"";position:absolute;left:8px;top:.72em;
  width:7px;height:7px;border-radius:50%;background:var(--orange);
}
.pgdoc ol > li{counter-increment:pgol}
.pgdoc ol > li::before{
  content:counter(pgol);position:absolute;left:0;top:.15em;
  font-family:var(--head);font-size:11.5px;font-weight:800;color:var(--orange-dark);
  width:20px;height:20px;border-radius:50%;background:#fff3e6;
  display:flex;align-items:center;justify-content:center;
}

/* the migrated "short version" summary panel */
.pgdoc .pg-summary{
  background:linear-gradient(120deg,var(--cream),#fffdfa);
  border:1px solid #f2e7d8;border-left:4px solid var(--orange);
  border-radius:var(--radius);padding:26px 30px;margin:0 0 34px;
}
.pgdoc .pg-summary h2{margin:0 0 14px;padding-left:0;font-size:19px}
.pgdoc .pg-summary h2::before{display:none}
.pgdoc .pg-summary ul{margin-bottom:0}
.pgdoc .pg-summary__foot{margin:14px 0 0;font-size:13.6px;color:var(--muted);font-style:italic}

/* callouts */
.pgdoc .pg-note{
  background:#f4f9ff;border:1px solid #dbe9f8;border-radius:var(--radius);
  padding:16px 20px;margin:0 0 20px;font-size:14.2px;line-height:1.78;color:#4d5b6a;
}
.pgdoc .pg-note--warn{background:#fff6f5;border-color:#f6d5d2;color:#8c4340}

/* tables */
.pgdoc table{
  width:100%;border-collapse:collapse;margin:0 0 24px;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius);overflow:hidden;
  font-size:14px;
}
.pgdoc th,.pgdoc td{padding:12px 16px;text-align:left;border-bottom:1px solid #f4f2ee;vertical-align:top}
.pgdoc thead th{background:var(--cream-2);font-family:var(--head);font-weight:700;color:var(--ink)}
.pgdoc tr:last-child td{border-bottom:0}
.pgdoc td:first-child{font-family:var(--head);font-weight:600;color:var(--ink);width:34%}

.pgdoc img{max-width:100%;height:auto;border-radius:var(--radius);margin:6px 0 20px}
.pgdoc blockquote{
  margin:0 0 22px;padding:18px 24px;border-left:4px solid var(--orange);
  background:var(--cream-2);border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;color:var(--ink);
}

/* ask band + stamp */
.pgask{
  display:flex;gap:20px;align-items:center;margin:42px 0 0;
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:26px 30px;box-shadow:var(--shadow-xs);
}
.pgask__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:15px;
  background:var(--navy);color:var(--orange-2);font-size:20px;
}
.pgask__body h3{font-size:18px;margin-bottom:5px}
.pgask__body p{font-size:14px;line-height:1.7;margin-bottom:16px}
.pgask__btns{display:flex;flex-wrap:wrap;gap:10px}

.pgstamp{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:720px){
  .pgdoc{font-size:14.8px}
  .pgdoc .pg-summary{padding:22px 20px}
  .pgask{flex-direction:column;align-items:flex-start;padding:22px 20px}
  .pgdoc table{display:block;overflow-x:auto}
  .pgdoc td:first-child{width:auto}
}


/* #####################################################################
   3. PAGE - /sitemap
   ##################################################################### */

/* =====================================================================
   Kashi Experts - /sitemap
   ---------------------------------------------------------------------
   The human half of the sitemap. Loaded after pages.css, which supplies
   the hero, the "ask us" band and the shared page furniture.
   ===================================================================== */

.smsec{background:linear-gradient(180deg,#fff,var(--cream-2))}

/* jump bar -------------------------------------------------------- */
.smjump{
  display:flex;flex-wrap:wrap;gap:9px;
  margin:0 0 34px;
}
.smjump a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:#fff;border:1px solid #f1ece4;box-shadow:var(--shadow-xs);
  font-family:var(--head);font-size:13px;font-weight:600;color:var(--body);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.smjump a i{font-size:12px;color:var(--orange-dark)}
.smjump a:hover{color:var(--ink);border-color:#f0d9bd;transform:translateY(-2px)}

/* section cards --------------------------------------------------- */
.smgrid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:start;
}

.smcard{
  background:#fff;border:1px solid #f1ece4;border-radius:var(--radius-lg);
  padding:24px 26px 12px;box-shadow:var(--shadow-xs);
  scroll-margin-top:110px;
}

.smcard__head{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid #f4efe7;
}
.smcard__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;
  background:var(--cream);color:var(--orange-dark);font-size:17px;
}
.smcard__head h2{
  font-family:var(--display);font-size:20px;line-height:1.25;color:var(--ink);margin:0;
}
.smcard__head span{
  display:block;margin-top:2px;
  font-family:var(--head);font-size:12px;font-weight:600;color:var(--muted);
}

/* link list ------------------------------------------------------- */
.smlist{list-style:none;margin:0;padding:0}
.smlist li{border-bottom:1px solid #faf6f0}
.smlist li:last-child{border-bottom:0}

.smlist a{
  display:block;padding:11px 14px;margin:0 -14px;border-radius:10px;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.smlist a:hover{background:var(--cream-2);transform:translateX(3px)}

.smlist__title{
  display:block;
  font-family:var(--head);font-size:14.2px;font-weight:600;color:var(--ink);
  transition:color .25s var(--ease);
}
.smlist a:hover .smlist__title{color:var(--orange-dark)}

/* The blurb is a nicety, not the link text - one line, then ellipsis,
   so a long tagline cannot stretch a card out of the grid. */
.smlist__note{
  display:block;margin-top:2px;
  font-size:12.6px;line-height:1.6;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* footer note ----------------------------------------------------- */
.smxml{
  margin:26px 0 0;text-align:center;
  font-size:13px;color:var(--muted);
}
.smxml a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}
.smxml a:hover{color:var(--orange)}

@media (max-width:720px){
  .smgrid{grid-template-columns:1fr}
  .smcard{padding:20px 20px 8px}
  .smjump{gap:8px;margin-bottom:26px}
}

/* =====================================================================
   Banner panels on narrow screens
   ---------------------------------------------------------------------
   The panel is sized in percentages. On a desktop that leaves the right
   third of the photo completely clean; on a phone the copy runs the full
   width, so the same percentages would drop the end of every line off the
   panel. Below 900px the fade is stretched to the right edge rather than
   turned into a flat wash - the photo still reads through the tail of it.
   Placed at the end of the file so it lands after every base scrim rule.
   ===================================================================== */
@media (max-width:1200px){
  .phero__scrim,
  .pdhero__scrim{
    background:linear-gradient(90deg,rgba(10,28,47,.82) 0%,rgba(10,28,47,.72) 34%,rgba(10,28,47,.46) 58%,rgba(10,28,47,.16) 74%,rgba(10,28,47,0) 88%);
  }
  .ahero__scrim,
  .gphero__scrim{
    background:linear-gradient(90deg,rgba(13,30,47,.82) 0%,rgba(13,30,47,.72) 34%,rgba(13,30,47,.46) 58%,rgba(13,30,47,.16) 74%,rgba(13,30,47,0) 88%);
  }
  .hero__scrim,
  .dhero__scrim{
    background:linear-gradient(90deg,rgba(8,22,37,.82) 0%,rgba(8,22,37,.72) 34%,rgba(8,22,37,.46) 58%,rgba(8,22,37,.16) 74%,rgba(8,22,37,0) 88%);
  }
}
@media (max-width:900px){
  .phero__scrim,
  .pdhero__scrim{
    background:linear-gradient(90deg,rgba(10,28,47,.84) 0%,rgba(10,28,47,.78) 52%,rgba(10,28,47,.58) 80%,rgba(10,28,47,.34) 100%);
  }
  .ahero__scrim,
  .gphero__scrim{
    background:linear-gradient(90deg,rgba(13,30,47,.84) 0%,rgba(13,30,47,.78) 52%,rgba(13,30,47,.58) 80%,rgba(13,30,47,.34) 100%);
  }
  .hero__scrim,
  .dhero__scrim{
    background:linear-gradient(90deg,rgba(8,22,37,.84) 0%,rgba(8,22,37,.78) 52%,rgba(8,22,37,.58) 80%,rgba(8,22,37,.34) 100%);
  }
}

/* =====================================================================
   Large desktops - 1920px wide at 100% OS/browser scale
   ---------------------------------------------------------------------
   The whole sheet is authored in px against a 1280px container, so the
   layout is pinned to a "design viewport" of 1536px - which is exactly
   what a 1920x1080 screen reports at 125% browser zoom. That is the
   rendering that was signed off, so nothing about it is touched here.

   At 100% scale the same screen reports ~1910px instead, and every one
   of those px measurements lands 25% smaller against the glass: the
   1280px container fills two thirds of the monitor instead of five
   sixths. Rather than re-tune several thousand px values, the page is
   scaled back onto its 1536px design viewport with `zoom`, which is the
   same transform the browser applies at 125% - container width, type,
   spacing, shadows and hit targets all move together, and position:fixed
   and position:sticky keep working because zoom (unlike transform) is
   part of the used-value cascade.

   The gate is min-width:1700px. A 1920 screen at 125% reports ~1526px,
   far below it, so this block cannot match there; zoom on <body> (never
   on the root) also leaves media-query evaluation on the real viewport,
   so there is no chance of the query switching itself off and flickering.

   Only vh needs hand-correcting: it is resolved against the unzoomed
   viewport and then scaled, so each vh height below is the original
   divided by 1.25 to land back on its 125% proportion. px heights need
   no such treatment - zoom already scales them.
   ===================================================================== */
@media screen and (min-width:1700px){
  body{zoom:1.25}

  /* 72vh/560/720 at 1.0 */
  .hero{height:57.6vh;min-height:448px;max-height:576px}

  /* min(72vh,620px) at 1.0 */
  .dhero{min-height:min(57.6vh,496px)}

  /* the booking sheet: 90vh from the >=720px block, 94vh on short screens */
  .bk__sheet{max-height:72vh;max-height:72svh}
}
@media screen and (min-width:1700px) and (max-height:760px){
  .bk__sheet{max-height:75.2vh;max-height:75.2svh}
}