/*
Theme Name: MPS Tours
Theme URI: https://mpstours.com/
Author: MPS Tours LLC
Author URI: https://mpstours.com/
Description: Custom theme for MPS Tours — luxury Umrah packages from the USA. Tour packages, hotels, reviews, the blog and every enquiry form are managed from the dashboard.
Version: 1.1.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mpstours
Tags: travel, business, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* Photography used behind the hero and the closing band. Both can be
   changed under Appearance > Customize > Site photos. */
:root{
  --hero-photo:url('https://images.unsplash.com/photo-1513072064285-240f87fa81e8?auto=format&fit=crop&w=1900&q=72');
  --cta-photo:url('https://images.unsplash.com/photo-1565330770968-0240c0046ce3?auto=format&fit=crop&w=1900&q=72');
}

/* ============================================================
   MPS TOURS — DESIGN TOKENS
   Palette grounded in Haramain architecture: deep malachite
   green, brass/gold leaf, limestone sand, and a cool marble mist.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --sand:#FAF6EC;
  --mist:#EDF3F0;

  --green:#0B5D4B;
  --green-deep:#062E25;
  --green-800:#083A2F;
  --green-glass:rgba(11,93,75,0.07);

  --gold:#C7A54A;
  --gold-soft:#E6D3A0;
  --gold-line:rgba(199,165,74,0.38);

  --ink:#0D1B16;
  --ink-soft:#4A5C55;
  --ink-faint:#7B8B84;

  --wa:#25D366;

  --line:rgba(11,93,75,0.10);
  --line-strong:rgba(11,93,75,0.16);

  --r-xl:26px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;

  --shadow-soft:0 30px 60px -34px rgba(6,46,37,0.42);
  --shadow-card:0 18px 40px -26px rgba(6,46,37,0.30);
  --shadow-lift:0 34px 62px -30px rgba(6,46,37,0.40);

  --maxw:1200px;
  --gutter:clamp(20px, 4vw, 40px);

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

  --font:'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* ---------- Invisible scrollbars, everywhere ---------- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{width:0 !important; height:0 !important; display:none !important;}
*{scrollbar-width:none; -ms-overflow-style:none;}

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-bottom:74px;
}
@media (min-width:700px){ body{padding-bottom:0;} }
body.is-locked{overflow:hidden;}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{
  color:var(--green-deep);
  margin:0 0 .5em;
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1.12;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem, 1.35rem + 4.1vw, 4.05rem); letter-spacing:-0.042em; line-height:1.03;}
h2{font-size:clamp(1.85rem, 1.15rem + 2.6vw, 2.95rem); letter-spacing:-0.036em;}
h3{font-size:1.16rem; font-weight:600; letter-spacing:-0.017em; line-height:1.3;}
h4{font-size:1rem; font-weight:600;}
p{margin:0 0 1em; color:var(--ink-soft); max-width:70ch;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
strong{font-weight:600;}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:4px;}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}

/* ---------- Icon system ---------- */
.icon{width:1.25em; height:1.25em; flex:none; display:inline-block; vertical-align:middle;}
.sprite{position:absolute; width:0; height:0; overflow:hidden;}

/* ---------- Signature: eight-point star tessellation ---------- */
.tessellate{position:relative; isolation:isolate;}
.tessellate::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230B5D4B' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}

/* ---------- Eyebrow (sentence case, gold marker) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.83rem; font-weight:500; letter-spacing:.005em;
  color:var(--gold); margin-bottom:16px;
}
.eyebrow.center{justify-content:center;}

.section-head{max-width:660px; margin:0 auto 52px; text-align:center;}
.section-head p{font-size:1.06rem; margin:0 auto; color:var(--ink-soft);}
.section-head .eyebrow{margin-bottom:14px;}

/* ---------- Section rhythm: full viewport-height sections ---------- */
.section{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex; align-items:center;
  padding:clamp(84px, 11vh, 132px) 0;
}
.section > .container{width:100%;}
.section.alt{background:var(--mist);}
.section.sand{background:var(--sand);}
/* Bands & strips keep their natural height */
.band{min-height:0; display:block;}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2.5px; width:100%; z-index:120;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .1s linear;
}

/* ============================================================
   MOTION — reveal on scroll
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
[data-reveal="left"]{transform:translateX(-26px);}
[data-reveal="right"]{transform:translateX(26px);}
[data-reveal="scale"]{transform:scale(.965);}
[data-reveal="up"]{transform:translateY(30px);}
[data-reveal="blur"]{transform:translateY(16px); filter:blur(9px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);}
[data-reveal].in{opacity:1; transform:none; filter:none; will-change:auto;}

/* Auto-stagger: a container hands its children their own --d, so we stop
   hand-writing style="--d:160ms" on every card. */
[data-stagger] > *{--d:calc(var(--i, 0) * var(--step, 80ms));}

@keyframes floatUp{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
@keyframes drawArch{from{stroke-dashoffset:1400;} to{stroke-dashoffset:0;}}
@keyframes softPulse{0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:1; transform:scale(1.35);}}
@keyframes shimmer{0%{background-position:-160% 0;} 100%{background-position:260% 0;}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px;
  font-weight:500; font-size:.97rem; letter-spacing:-0.01em;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease),
             background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
  white-space:nowrap; text-align:center;
}
.btn .icon{width:1.1em; height:1.1em;}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
  background-size:200% 100%; background-position:-160% 0;
  opacity:0; pointer-events:none;
}
.btn:hover{transform:translateY(-2.5px);}
.btn:hover::after{opacity:1; animation:shimmer .95s var(--ease) forwards;}
.btn:active{transform:translateY(0);}

.btn-primary{background:var(--gold); color:var(--green-deep); font-weight:600; box-shadow:0 14px 28px -14px rgba(199,165,74,.72);}
.btn-primary:hover{background:#D3B25B; box-shadow:0 20px 36px -16px rgba(199,165,74,.85);}
.btn-outline{background:transparent; border-color:var(--line-strong); color:var(--green);}
.btn-outline:hover{background:var(--green); border-color:var(--green); color:#fff;}
.btn-solid{background:var(--green); color:#fff;}
.btn-solid:hover{background:var(--green-800);}
.btn-ghost-white{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.42); color:#fff; backdrop-filter:blur(6px);}
.btn-ghost-white:hover{background:#fff; color:var(--green-deep); border-color:#fff;}
.btn-call{background:#fff; color:var(--green-deep); border-color:#fff;}
.btn-call:hover{background:var(--sand);}
.btn-whatsapp{background:var(--wa); color:#fff; border-color:var(--wa);}
.btn-whatsapp:hover{background:#1EB755; border-color:#1EB755; color:#fff;}
.btn-sm{padding:11px 18px; font-size:.87rem; gap:7px;}
.btn-block{width:100%;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 10px 34px -26px rgba(6,46,37,.5);
  background:rgba(255,255,255,.94);
}
/* Layout lives in the Tailwind classes on the element itself. */
.header-inner{transition:padding .35s var(--ease);}
.site-header.scrolled .header-inner{padding-top:10px; padding-bottom:10px;}
.brand{display:flex; align-items:center; flex:none;}
.brand img{height:42px; width:auto; transition:height .35s var(--ease);}
.site-header.scrolled .brand img{height:36px;}

.primary-nav{display:none; align-items:center; gap:6px;}
.primary-nav a{
  position:relative; padding:9px 14px; border-radius:999px;
  font-size:.94rem; font-weight:400; color:var(--ink-soft);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.primary-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px;
  background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .38s var(--ease);
}
.primary-nav a:hover{color:var(--green-deep);}
.primary-nav a:hover::after{transform:scaleX(1); transform-origin:0 50%;}
.primary-nav a.active{color:var(--green-deep); font-weight:500;}
.primary-nav a.active::after{transform:scaleX(1);}

.header-actions{display:flex; align-items:center; gap:12px; flex:none;}
.header-phone{
  display:none; align-items:center; gap:8px;
  font-weight:500; font-size:.95rem; color:var(--green-deep);
  padding:8px 4px; transition:color .25s var(--ease);
}
.header-phone .icon{color:var(--gold); width:1.15em; height:1.15em;}
.header-phone:hover{color:var(--green);}
.header-cta{display:none;}

@media (min-width:1000px){
  .primary-nav{display:flex;}
  .header-phone{display:flex;}
  .header-cta{display:inline-flex;}
}
@media (min-width:760px) and (max-width:999px){
  .header-cta{display:inline-flex;}
}

/* ---------- Hamburger ---------- */
.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--mist); color:var(--green-deep);
  transition:background-color .3s var(--ease), transform .3s var(--ease);
  position:relative; z-index:112;
}
.nav-toggle:hover{background:#E2EBE7;}
.nav-toggle .bars{position:relative; width:20px; height:14px; display:block;}
.nav-toggle .bars i{
  position:absolute; left:0; height:2px; border-radius:2px; background:currentColor;
  transition:transform .42s var(--ease), opacity .24s var(--ease), width .42s var(--ease), background-color .3s var(--ease);
}
.nav-toggle .bars i:nth-child(1){top:0; width:20px;}
.nav-toggle .bars i:nth-child(2){top:6px; width:14px;}
.nav-toggle .bars i:nth-child(3){top:12px; width:20px;}
.nav-toggle[aria-expanded="true"]{background:rgba(255,255,255,.12); color:#fff;}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0; width:0;}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}


/* ---------- Mobile nav: opens from top-right, sweeps to bottom-left ---------- */
.mobile-nav{
  position:fixed; inset:0; z-index:110;
  background:linear-gradient(150deg, var(--green-deep) 0%, var(--green) 62%, #04211B 100%);
  color:#fff;
  clip-path:circle(0% at calc(100% - 43px) 40px);
  transition:clip-path .74s var(--ease-out), visibility 0s linear .74s;
  visibility:hidden;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 96px) var(--gutter) calc(env(safe-area-inset-bottom) + 32px);
  overflow-y:auto;
}
.mobile-nav.open{
  clip-path:circle(165% at calc(100% - 43px) 40px);
  visibility:visible;
  transition:clip-path .82s var(--ease-out), visibility 0s linear 0s;
}
.mobile-nav::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.mnav-links{display:flex; flex-direction:column; gap:2px; position:relative;}
.mnav-links a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:17px 4px;
  font-size:1.72rem; font-weight:400; letter-spacing:-0.035em; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.13);
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .25s;
}
.mobile-nav.open .mnav-links a{opacity:1; transform:none;}
.mobile-nav.open .mnav-links a:nth-child(1){transition-delay:.20s;}
.mobile-nav.open .mnav-links a:nth-child(2){transition-delay:.27s;}
.mobile-nav.open .mnav-links a:nth-child(3){transition-delay:.34s;}
.mobile-nav.open .mnav-links a:nth-child(4){transition-delay:.41s;}
.mobile-nav.open .mnav-links a:nth-child(5){transition-delay:.48s;}
.mobile-nav.open .mnav-links a:nth-child(6){transition-delay:.55s;}
.mnav-links a .icon{width:1.05rem; height:1.05rem; color:var(--gold-soft); opacity:.8;}
.mnav-links a:hover{color:var(--gold-soft);}
.mnav-foot{
  margin-top:auto; padding-top:34px; position:relative;
  display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease-out) .60s, transform .55s var(--ease-out) .60s;
}
.mobile-nav.open .mnav-foot{opacity:1; transform:none;}
.mnav-contact{display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.9); font-size:1rem;}
.mnav-contact .icon{color:var(--gold-soft);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden; color:#fff;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  padding:clamp(52px, 8vh, 96px) 0 clamp(56px, 8vh, 100px);
  background-color:var(--green-deep);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(158deg, rgba(6,46,37,.93) 0%, rgba(11,93,75,.80) 52%, rgba(4,33,27,.95) 100%),
    var(--hero-photo);
  background-size:cover; background-position:center 38%;
  transform:scale(1.06); opacity:0;
  animation:heroBg 1.5s var(--ease-out) forwards;
}
@keyframes heroBg{to{opacity:1; transform:scale(1);}}
.hero-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.14;
  background-image:radial-gradient(circle, var(--gold) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
/* the signature mihrab arch */
.hero-arch{
  position:absolute; z-index:1; pointer-events:none;
  right:-6%; top:50%; transform:translateY(-50%);
  width:min(640px, 62vw); height:auto; opacity:.5;
  display:none;
}
.hero-arch path{
  stroke:var(--gold); stroke-width:1.1; fill:none;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:drawArch 2.6s var(--ease-out) .5s forwards;
}
@media (min-width:1080px){ .hero-arch{display:block;} }

.hero-inner{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:44px;
}
@media (min-width:1000px){
  .hero-inner{grid-template-columns:1.06fr .94fr; align-items:center; gap:60px;}
}
.hero-copy > *{opacity:0; animation:floatUp .9s var(--ease-out) forwards;}
.hero-copy > *:nth-child(1){animation-delay:.24s;}
.hero-copy > *:nth-child(2){animation-delay:.36s;}
.hero-copy > *:nth-child(3){animation-delay:.48s;}
.hero-copy > *:nth-child(4){animation-delay:.60s;}
.hero-copy > *:nth-child(5){animation-delay:.72s;}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  color:var(--gold-soft); font-size:.87rem; font-weight:400; letter-spacing:.005em;
  margin-bottom:20px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:8px 16px 8px 13px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; animation:softPulse 2.6s ease-in-out infinite;}
.hero h1{color:#fff; margin-bottom:22px;}
.hero h1 em{font-style:normal; font-weight:300; color:var(--gold-soft);}
.hero .lede{color:rgba(255,255,255,.85); font-size:1.08rem; max-width:54ch; margin-bottom:30px;}
.hero-cta-row{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:32px;}
.hero-badges{display:flex; flex-wrap:wrap; gap:9px;}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.79rem; font-weight:400; color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:8px 14px; border-radius:999px;
  transition:background-color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.badge:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); transform:translateY(-2px);}
.badge .icon{width:.95rem; height:.95rem; color:var(--gold-soft);}

/* ---------- Lead card ---------- */
.lead-card{
  background:#fff; color:var(--ink); border-radius:var(--r-xl);
  padding:30px 28px 28px; box-shadow:var(--shadow-soft);
  border:1px solid rgba(255,255,255,.6);
  position:relative; z-index:4;
  opacity:0; animation:floatUp 1s var(--ease-out) .58s forwards;
}
.lead-card .lc-head{margin-bottom:20px;}
.lead-card .lc-head .eyebrow{margin-bottom:9px;}
.lead-card h3{font-size:1.36rem; margin-bottom:4px; letter-spacing:-0.028em;}
.lead-card .lc-sub{font-size:.89rem; color:var(--ink-faint); margin:0;}

.field{margin-bottom:14px;}
.field label{
  display:block; font-size:.79rem; font-weight:500; letter-spacing:.005em;
  color:var(--ink-soft); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1.5px solid #E4E1D6; font-family:inherit; font-size:.95rem; font-weight:400;
  background:var(--sand); color:var(--ink);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5C55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
}
.field textarea{resize:vertical; min-height:82px; line-height:1.55;}
.field input::placeholder, .field textarea::placeholder{color:#A9B4AF;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--green); background:#fff; outline:none;
  box-shadow:0 0 0 4px rgba(11,93,75,.09);
}
.field-row{display:grid; grid-template-columns:1fr; gap:0;}
@media (min-width:420px){ .field-row{grid-template-columns:1fr 1fr; gap:13px;} }

.form-note{font-size:.75rem; color:var(--ink-faint); text-align:center; margin:13px 0 0; line-height:1.5;}
.form-success{display:none; text-align:center; padding:26px 8px;}
.form-success.show{display:block; animation:floatUp .5s var(--ease-out);}
.form-success .tick{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:var(--mist); color:var(--green);
  display:flex; align-items:center; justify-content:center;
}
.form-success .tick .icon{width:26px; height:26px;}
.form-success h4{font-size:1.18rem; color:var(--green-deep); margin-bottom:7px;}
.form-success p{font-size:.91rem; margin:0 auto; color:var(--ink-soft);}
.form-success a{color:var(--green); font-weight:600;}

/* ============================================================
   TRUST STRIP (band — natural height)
   ============================================================ */
.trust-strip{
  background:var(--sand); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden;
}
.trust-strip .container{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px 42px;
}
.trust-item{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.86rem; font-weight:500; color:var(--green-deep); letter-spacing:-0.008em;
}
.trust-item .icon{width:1.15rem; height:1.15rem; color:var(--gold);}

/* ---------- Geometric divider (band) ---------- */
.geo-divider{display:flex; align-items:center; justify-content:center; gap:16px; padding:clamp(30px,5vh,58px) 0;}
.geo-divider .line{height:1px; width:clamp(40px, 12vw, 110px); background:linear-gradient(90deg, transparent, var(--gold-line), transparent);}
.geo-divider .icon{width:22px; height:22px; color:var(--gold); opacity:.85;}

/* ============================================================
   PACKAGES — equal-height cards
   ============================================================ */
.pkg-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  align-items:stretch;
}
@media (min-width:1080px){ .pkg-grid{grid-template-columns:repeat(3, 1fr);} }

.pkg-card{
  position:relative;
  display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .48s var(--ease), box-shadow .48s var(--ease), border-color .48s var(--ease);
}
.pkg-card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);}
.pkg-media{
  position:relative; height:186px; flex:none; overflow:hidden;
  background-color:var(--green-deep);
  display:flex; align-items:flex-end; padding:16px;
}
.pkg-media .bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 1.05s var(--ease);
}
.pkg-card:hover .pkg-media .bg{transform:scale(1.07);}
.pkg-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,46,37,0) 40%, rgba(4,33,27,.72) 100%);
}
.pkg-tier{
  position:relative; z-index:2; color:#fff;
  font-size:.75rem; font-weight:500; letter-spacing:-0.005em;
  background:rgba(6,46,37,.42); padding:7px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(4px);
}
.pkg-body{display:flex; flex-direction:column; flex:1; padding:24px 22px 24px;}
.pkg-body h3{margin-bottom:4px;}
.pkg-nights{
  display:flex; align-items:center; gap:7px;
  font-size:.82rem; color:var(--ink-faint); font-weight:400; margin-bottom:16px;
}
.pkg-nights .icon{width:.95rem; height:.95rem; color:var(--gold);}

.pkg-price-wrap{
  min-height:84px; display:flex; flex-direction:column; justify-content:center;
  padding:14px 16px; margin-bottom:4px;
  background:var(--sand); border-radius:var(--r-md); border:1px solid rgba(199,165,74,.18);
}
.pkg-price .from{font-size:.73rem; color:var(--ink-faint); font-weight:400; display:block; letter-spacing:.01em;}
.pkg-price .amount{font-size:1.72rem; font-weight:500; color:var(--green-deep); letter-spacing:-0.038em; line-height:1.15;}
.pkg-price .per{font-size:.84rem; font-weight:400; color:var(--ink-faint); letter-spacing:-0.01em;}
.pkg-price-tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%;}
.pkg-price-tiers div{text-align:center; background:#fff; border-radius:9px; padding:8px 4px; border:1px solid rgba(199,165,74,.2);}
.pkg-price-tiers .tier-label{display:block; font-size:.63rem; font-weight:400; color:var(--ink-faint); margin-bottom:2px;}
.pkg-price-tiers .tier-amount{font-size:.99rem; font-weight:500; color:var(--green-deep); letter-spacing:-0.03em;}
.pkg-price-note{font-size:.73rem; color:var(--ink-faint); margin:8px 0 0; text-align:center;}

.pkg-list{margin:18px 0 20px; flex:1 1 auto;}
.pkg-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.875rem; line-height:1.5; color:var(--ink-soft); margin-bottom:10px;
}
.pkg-list li:last-child{margin-bottom:0;}
.pkg-list .icon{width:1.02rem; height:1.02rem; color:var(--gold); margin-top:.18em;}
.pkg-cta-row{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto;}
/* Card actions: quote + WhatsApp on one row, then a full-width details pill. */
.pkg-details-btn{margin-top:9px; font-size:.92rem; padding:13px 22px;}
.pkg-details-btn .icon{color:inherit;}

/* Custom / callout card */
.pkg-card.callout{
  background:linear-gradient(155deg, var(--green-deep), var(--green) 130%);
  border-color:transparent; color:#fff;
}
.pkg-card.callout .pkg-body{justify-content:center; padding:38px 26px;}
.pkg-card.callout h3{color:#fff; font-size:1.42rem; margin-bottom:10px;}
.pkg-card.callout p{color:rgba(255,255,255,.78); font-size:.92rem; margin-bottom:22px;}
.pkg-card.callout .eyebrow{color:var(--gold-soft);}
.callout-star{
  position:absolute; right:-38px; bottom:-38px; width:190px; height:190px;
  color:var(--gold); opacity:.13; pointer-events:none;
  transition:transform 1.1s var(--ease);
}
.pkg-card.callout:hover .callout-star{transform:rotate(22deg) scale(1.07);}

/* ============================================================
   FEATURE GRIDS — uniform tiles
   ============================================================ */
.icon-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items:stretch;
}
@media (min-width:640px){ .icon-grid{grid-template-columns:repeat(3, 1fr);} }
@media (min-width:1020px){ .icon-grid{grid-template-columns:repeat(5, 1fr);} }

.icon-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 20px; text-align:left;
  transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease);
}
.icon-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:var(--gold-line);}
.ic-wrap{
  width:46px; height:46px; flex:none; border-radius:13px;
  background:var(--mist); color:var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:background-color .42s var(--ease), color .42s var(--ease), transform .42s var(--ease);
}
.ic-wrap .icon{width:22px; height:22px;}
.icon-card:hover .ic-wrap{background:var(--green); color:var(--gold-soft); transform:rotate(-6deg) scale(1.05);}
.icon-card h3{font-size:.99rem; font-weight:600; color:var(--green-deep); margin-bottom:5px;}
.icon-card p{font-size:.83rem; color:var(--ink-faint); margin:0; line-height:1.5;}
/* included-tiles have no body copy — keep them vertically centred */
.icon-card.compact{justify-content:center;}
.icon-card.compact h3{margin-bottom:0;}

/* ============================================================
   HOTELS
   ============================================================ */
.hotel-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items:stretch;
}
@media (min-width:1080px){ .hotel-grid{grid-template-columns:repeat(3, 1fr);} }
.hotel-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .48s var(--ease), box-shadow .48s var(--ease), border-color .48s var(--ease);
}
.hotel-card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);}
.hotel-media{
  position:relative; height:172px; flex:none; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:flex-start; padding:14px;
  background-color:var(--green-800);
}
.hotel-media .bg{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.05s var(--ease);}
.hotel-card:hover .hotel-media .bg{transform:scale(1.07);}
.hotel-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,33,27,.42) 0%, rgba(4,33,27,.05) 45%, rgba(4,33,27,.28) 100%);}
.hotel-city{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-size:.74rem; font-weight:500;
  background:rgba(6,46,37,.44); border:1px solid rgba(255,255,255,.26);
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px);
}
.hotel-city .icon{width:.85rem; height:.85rem; color:var(--gold-soft);}
.hotel-body{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px;}
.hotel-body h3{font-size:1.06rem; margin-bottom:7px;}
.hotel-body p{font-size:.87rem; margin-bottom:16px; flex:1 1 auto; color:var(--ink-soft);}
.hotel-proximity{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  font-size:.81rem; font-weight:500; color:var(--green);
  background:var(--mist); border-radius:999px; padding:8px 14px; align-self:flex-start;
}
.hotel-proximity .icon{width:.95rem; height:.95rem; color:var(--gold);}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px;}
.testi-head-row .section-head{margin:0; text-align:left; max-width:640px;}
.testi-head-row .section-head p{margin:0;}
.testi-head-row .eyebrow.center{justify-content:flex-start;}
.testi-nav{display:none; gap:10px; flex:none; padding-bottom:6px;}
@media (min-width:860px){ .testi-nav{display:flex;} }
.testi-nav button{
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:1px solid var(--line-strong); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.testi-nav button:hover{background:var(--green); color:#fff; border-color:var(--green); transform:translateY(-2px);}
.testi-nav button:disabled{opacity:.32; cursor:default; transform:none; background:#fff; color:var(--green-deep); border-color:var(--line);}

.testi-scroll{
  display:flex; gap:22px; overflow-x:auto; padding:6px 2px 8px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.testi-card{
  scroll-snap-align:start;
  flex:0 0 min(340px, 84vw);
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-lg); padding:26px 24px;
  border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.testi-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);}
.testi-quote{width:30px; height:30px; color:var(--gold); opacity:.32; margin-bottom:12px; flex:none;}
.testi-stars{display:flex; gap:3px; margin-bottom:14px;}
.testi-stars .icon{width:16px; height:16px; color:var(--gold);}
.testi-card p{font-size:.93rem; color:var(--ink); margin-bottom:22px; flex:1 1 auto; line-height:1.62;}
.testi-person{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line);}
.testi-avatar{
  width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--green); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-weight:500; font-size:.88rem; letter-spacing:-0.02em;
}
.testi-name{font-weight:500; font-size:.9rem; color:var(--green-deep); line-height:1.35;}
.testi-city{font-size:.78rem; color:var(--ink-faint); line-height:1.4;}
.testi-link{color:var(--green); font-weight:500; text-decoration:underline; text-underline-offset:3px;}

/* ============================================================
   CREDIBILITY BAND
   ============================================================ */
.cred-band{background:var(--green-deep); color:#fff; position:relative; overflow:hidden;}
.cred-band::before{
  content:""; position:absolute; inset:0; opacity:.1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.cred-band .container{position:relative; z-index:1;}
.cred-band .section-head h2{color:#fff;}
.cred-band .section-head p{color:rgba(255,255,255,.76);}
.cred-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items:stretch;
}
@media (min-width:820px){ .cred-grid{grid-template-columns:repeat(3, 1fr);} }
.cred-item{
  display:flex; gap:16px; align-items:flex-start; height:100%;
  padding:22px 20px; border-radius:var(--r-md);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
  transition:background-color .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease);
}
.cred-item:hover{background:rgba(255,255,255,.09); border-color:rgba(230,211,160,.32); transform:translateY(-4px);}
.cred-item .icon{width:26px; height:26px; color:var(--gold-soft); flex:none; margin-top:2px;}
.cred-item h3{font-size:1rem; color:#fff; margin-bottom:5px; font-weight:500;}
.cred-item p{font-size:.84rem; color:rgba(255,255,255,.72); margin:0; line-height:1.55;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  position:relative; color:#fff; text-align:center; overflow:hidden;
  background-color:var(--green-deep);
}
.final-cta::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(158deg, rgba(6,46,37,.94), rgba(11,93,75,.88)),
    var(--cta-photo);
  background-size:cover; background-position:center;
}
.final-cta .container{position:relative; z-index:1;}
.final-cta .section-head h2{color:#fff;}
.final-cta .section-head p{color:rgba(255,255,255,.85); font-size:1.06rem;}
.final-cta-buttons{display:flex; flex-wrap:wrap; justify-content:center; gap:13px; margin-bottom:46px;}
.final-form-wrap{
  max-width:560px; margin:0 auto; background:#fff; color:var(--ink);
  border-radius:var(--r-xl); padding:32px 28px; box-shadow:var(--shadow-soft); text-align:left;
}
.final-form-wrap h3{font-size:1.2rem; text-align:center; margin-bottom:20px;}

/* ============================================================
   FOOTER (band)
   ============================================================ */
footer{background:#04211B; color:rgba(255,255,255,.72); padding:56px 0 30px; font-size:.89rem;}
.footer-top{
  display:grid; gap:34px; margin-bottom:36px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
@media (min-width:820px){ .footer-top{grid-template-columns:1.6fr 1fr 1fr;} }
.footer-brand{color:#fff; font-size:1.24rem; font-weight:500; letter-spacing:-0.03em; margin-bottom:12px;}
.footer-col p{color:rgba(255,255,255,.62); font-size:.86rem; max-width:34ch;}
.footer-col h4{color:#fff; font-size:.85rem; font-weight:500; margin-bottom:16px; letter-spacing:-0.01em;}
.footer-col ul li{margin-bottom:11px; display:flex; align-items:center; gap:10px;}
.footer-col ul li .icon{width:1.05rem; height:1.05rem; color:var(--gold-soft); flex:none;}
.footer-col ul li a{transition:color .25s var(--ease);}
.footer-col ul li a:hover{color:#fff;}
.footer-social{display:flex; gap:10px; margin-top:18px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background-color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.footer-social a:hover{background:var(--gold); color:var(--green-deep); border-color:var(--gold); transform:translateY(-3px);}
.footer-social .icon{width:1.05rem; height:1.05rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.79rem; color:rgba(255,255,255,.6);
}

/* ============================================================
   FLOATING ACTIONS
   ============================================================ */
.fab-stack{position:fixed; right:20px; bottom:20px; z-index:80; display:none; flex-direction:column; gap:12px;}
@media (min-width:700px){ .fab-stack{display:flex;} }
.fab{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 14px 30px -10px rgba(4,33,27,.5);
  opacity:0; transform:translateY(14px) scale(.9);
  transition:transform .45s var(--ease), opacity .45s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.fab-stack.ready .fab{opacity:1; transform:none;}
.fab-stack.ready .fab{transition-delay:.05s;}
.fab:hover{transform:translateY(-4px) scale(1.05);}
.fab .icon{width:23px; height:23px;}
.fab.whatsapp{background:var(--wa);}

.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(4,33,27,.4);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:700px){ .mobile-bar{display:none;} }
.mobile-bar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px 13px; font-size:.7rem; font-weight:500; color:var(--green-deep);
  transition:background-color .25s var(--ease);
}
.mobile-bar a .icon{width:20px; height:20px;}
.mobile-bar a.mb-call .icon{color:var(--green);}
.mobile-bar a.mb-whatsapp .icon{color:var(--wa);}
.mobile-bar a.mb-quote{background:var(--gold); color:var(--green-deep);}
.mobile-bar a.mb-quote .icon{color:var(--green-deep);}
.mobile-bar a:active{background:var(--mist);}

/* ============================================================
   QUOTE MODAL
   ============================================================ */
.quote-modal-overlay{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(4,33,27,.62); backdrop-filter:blur(5px);
  overflow-y:auto;
}
.quote-modal-overlay.show{display:flex; animation:fadeIn .26s var(--ease) forwards;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.quote-modal{
  position:relative; background:#fff; border-radius:var(--r-xl);
  max-width:470px; width:100%; padding:34px 28px 28px;
  box-shadow:0 40px 80px -26px rgba(0,0,0,.5);
  max-height:92vh; max-height:92dvh; overflow-y:auto;
  animation:qmIn .42s var(--ease-out);
}
@keyframes qmIn{from{opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:none;}}
.quote-modal-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:var(--mist); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.quote-modal-close:hover{background:var(--green); color:#fff; transform:rotate(90deg);}
.quote-modal-close .icon{width:17px; height:17px;}
.quote-modal-package{
  display:none; font-size:.81rem; font-weight:500; color:var(--green);
  background:var(--mist); border-radius:999px; padding:7px 15px; margin-bottom:16px;
}
.quote-modal h3{font-size:1.34rem; margin-bottom:4px;}
.quote-modal .qm-sub{font-size:.89rem; color:var(--ink-faint); margin-bottom:18px;}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .hero-copy > *, .lead-card, .hero-bg{opacity:1 !important; transform:none !important;}
  .fab{opacity:1 !important; transform:none !important;}
  .mobile-nav{transition:none;}
  .mnav-links a{opacity:1; transform:none;}
}

/* ============================================================
   ADDED — ROUTED VIEWS, MOBILE-NAV FIX, PACKAGE DETAIL, BLOG
   ============================================================ */

/* ---------- Routed views ---------- */
.view{display:none;}
.view.active{display:block; animation:viewIn .6s var(--ease-out) both;}
@keyframes viewIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* Inner pages breathe naturally — no forced 100vh */
.view .section.flow{min-height:0; display:block; padding:clamp(56px,7vh,86px) 0;}

/* ---------- FIX: the mobile menu had no working close control ----------
   .site-header sat at z-index:90 and opened a stacking context, so the
   toggle's own z-index:112 could never rise above the .mobile-nav overlay
   at z-index:110 — the morphed X painted *behind* the panel and was
   unclickable. Lift the header over the panel and dissolve its chrome
   while the menu is open so the X reads white on green. */
.site-header{z-index:130;}
.mobile-nav{z-index:120;}
body.nav-open .site-header,
body.nav-open .site-header.scrolled{
  background:transparent; box-shadow:none; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.nav-open .site-header .brand img{filter:brightness(0) invert(1);}
body.nav-open .primary-nav,
body.nav-open .header-phone,
body.nav-open .header-cta{opacity:0; pointer-events:none; transition:opacity .22s var(--ease);}
.nav-toggle[aria-expanded="true"]{background:rgba(255,255,255,.14); color:#fff;}
.nav-toggle[aria-expanded="true"]:hover{background:rgba(255,255,255,.26);}

/* Tap the empty panel area to dismiss as well */
.mnav-dismiss{
  position:absolute; inset:0; z-index:0; border:none; background:none;
  cursor:default; -webkit-tap-highlight-color:transparent;
}
.mnav-links,.mnav-foot{position:relative; z-index:1;}
.mobile-nav.open .mnav-links a:nth-child(7){transition-delay:.62s;}

/* ---------- Breadcrumb ---------- */
.crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.83rem; color:var(--ink-faint); margin-bottom:18px;
}
.crumb a{color:var(--ink-soft); transition:color .25s var(--ease);}
.crumb a:hover{color:var(--green);}
.crumb .sep{color:var(--gold); opacity:.7;}
.crumb .here{color:var(--green-deep); font-weight:500;}

/* ---------- Back link ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; font-weight:500; color:var(--green);
  padding:9px 0; transition:gap .3s var(--ease), color .25s var(--ease);
}
.back-link .icon{width:1.05em; height:1.05em;}
.back-link:hover{gap:15px; color:var(--green-deep);}

/* ---------- "Details" affordance on the package cards ---------- */
.pkg-card .pkg-media{cursor:pointer;}
.pkg-peek{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--green-deep);
  font-size:.79rem; font-weight:600; letter-spacing:-.01em;
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(9px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.pkg-card:hover .pkg-peek,.pkg-card:focus-within .pkg-peek{opacity:1; transform:none;}
.pkg-peek .icon{width:14px; height:14px; color:var(--gold);}

/* ============================================================
   PACKAGE DETAIL — HERO
   ============================================================ */
.pd-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:calc(env(safe-area-inset-top) + 116px) 0 clamp(50px,7vh,86px);
  background:var(--green-deep); color:#fff;
}
.pd-hero .pd-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  transform:scale(1.09); animation:pdZoom 18s var(--ease-out) forwards;
}
@keyframes pdZoom{to{transform:scale(1);}}
.pd-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,46,37,.60) 0%,rgba(6,46,37,.80) 46%,rgba(4,33,27,.96) 100%);
}
.pd-hero .crumb{color:rgba(255,255,255,.6);}
.pd-hero .crumb a{color:rgba(255,255,255,.82);}
.pd-hero .crumb a:hover{color:var(--gold-soft);}
.pd-hero .crumb .here{color:#fff;}
.pd-hero h1{color:#fff; margin-bottom:14px; font-size:clamp(1.95rem,1.1rem + 3.3vw,3.25rem);}
.pd-hero .eyebrow{color:var(--gold-soft);}
.pd-lede{color:rgba(255,255,255,.80); font-size:1.05rem; max-width:58ch; margin-bottom:24px;}

.pd-meta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.pd-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17);
  font-size:.85rem; color:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pd-chip .icon{width:1.05em; height:1.05em; color:var(--gold-soft);}

.pd-hero-grid{display:grid; grid-template-columns:1fr; gap:32px; align-items:end;}
@media (min-width:940px){ .pd-hero-grid{grid-template-columns:1.45fr .95fr; gap:52px;} }

.pd-pricebox{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-xl); padding:26px 24px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.7);
}
.pd-pricebox .pb-from{font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-soft);}
.pd-pricebox .pb-amount{
  display:flex; align-items:baseline; gap:9px; margin:5px 0 3px;
  font-size:2.6rem; font-weight:600; color:#fff; letter-spacing:-.045em; line-height:1;
}
.pd-pricebox .pb-per{font-size:.88rem; font-weight:400; color:rgba(255,255,255,.6);}
.pd-pricebox .pb-note{font-size:.81rem; color:rgba(255,255,255,.58); margin:0 0 18px;}
.pd-pricebox .btn{width:100%; margin-bottom:9px;}
.pd-tiers{display:grid; gap:8px; margin:2px 0 18px;}
.pd-tiers div{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:.87rem; color:rgba(255,255,255,.84);
}
.pd-tiers div b{color:#fff; font-weight:600; font-size:1.02rem;}

/* ---------- Sticky sub-nav ---------- */
.pd-subnav{
  position:sticky; top:70px; z-index:60;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.pd-subnav .inner{
  display:flex; gap:2px; overflow-x:auto;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
}
.pd-subnav button{
  position:relative; flex:none; padding:16px 15px;
  font-size:.91rem; font-weight:500; color:var(--ink-soft); white-space:nowrap;
  transition:color .25s var(--ease);
}
.pd-subnav button::after{
  content:""; position:absolute; left:15px; right:15px; bottom:0; height:2px;
  background:var(--gold); border-radius:2px 2px 0 0;
  transform:scaleX(0); transition:transform .4s var(--ease);
}
.pd-subnav button:hover{color:var(--green-deep);}
.pd-subnav button.active{color:var(--green-deep); font-weight:600;}
.pd-subnav button.active::after{transform:scaleX(1);}

/* ---------- Detail layout ---------- */
.pd-layout{display:grid; grid-template-columns:1fr; gap:42px; align-items:start;}
@media (min-width:1000px){ .pd-layout{grid-template-columns:minmax(0,1fr) 388px; gap:54px;} }
.pd-block{margin-bottom:clamp(44px,6vh,70px); scroll-margin-top:150px;}
.pd-block > h2{font-size:clamp(1.45rem,1.1rem + 1.2vw,1.95rem); margin-bottom:8px;}
.pd-block > .pd-sub{color:var(--ink-soft); margin-bottom:24px; font-size:1.01rem;}

/* ---------- Highlights ---------- */
.pd-highlights{display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:14px;}
.pd-hl{
  position:relative; overflow:hidden;
  padding:22px 20px; border-radius:var(--r-lg);
  background:var(--sand); border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.pd-hl::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-soft));
  transform:scaleY(0); transform-origin:0 0; transition:transform .5s var(--ease-out);
}
.pd-hl:hover{transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:var(--gold-line);}
.pd-hl:hover::before{transform:scaleY(1);}
.pd-hl .icon{width:23px; height:23px; color:var(--green); margin-bottom:11px;}
.pd-hl h4{margin-bottom:5px; font-size:.98rem;}
.pd-hl p{margin:0; font-size:.87rem; line-height:1.6;}

/* ---------- Itinerary timeline ---------- */
.pd-timeline{position:relative; padding-left:36px;}
.pd-timeline::before{
  content:""; position:absolute; left:11px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg,var(--gold-line),var(--line),transparent);
}
.tl-item{position:relative; margin-bottom:11px;}
.tl-item::before{
  content:""; position:absolute; left:-30px; top:23px;
  width:11px; height:11px; border-radius:50%;
  background:#fff; border:2.5px solid var(--gold); z-index:1;
  transition:transform .4s var(--ease), background-color .3s var(--ease);
}
.tl-item.open::before{background:var(--gold); transform:scale(1.32);}
.tl-head{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:18px 20px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line);
  transition:border-color .3s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease);
}
.tl-head:hover{border-color:var(--gold-line); box-shadow:var(--shadow-card);}
.tl-item.open .tl-head{border-color:var(--gold-line); background:var(--sand);}
.tl-day{
  flex:none; font-size:.69rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--green); background:var(--green-glass);
  padding:5px 10px; border-radius:999px;
}
.tl-head h4{margin:0; flex:1; font-size:.97rem; letter-spacing:-.015em;}
.tl-head .chev{
  flex:none; width:17px; height:17px; color:var(--ink-faint);
  transition:transform .42s var(--ease), color .3s var(--ease);
}
.tl-item.open .tl-head .chev{transform:rotate(180deg); color:var(--green);}
.tl-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out);}
.tl-item.open .tl-body{grid-template-rows:1fr;}
.tl-body > div{overflow:hidden;}
.tl-body p{margin:0; padding:15px 20px 6px; font-size:.92rem; line-height:1.72;}
.tl-body ul{padding:2px 20px 16px; display:grid; gap:7px;}
.tl-body li{display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--ink-soft); line-height:1.6;}
.tl-body li .icon{width:15px; height:15px; color:var(--gold); flex:none; margin-top:4px;}

/* ---------- Hotels ---------- */
.pd-hotels{display:grid; gap:16px;}
.pd-hotel{
  display:grid; grid-template-columns:1fr;
  border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
@media (min-width:640px){ .pd-hotel{grid-template-columns:208px 1fr;} }
.pd-hotel:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);}
.pd-hotel .ph-img{min-height:156px; background-size:cover; background-position:center; transition:transform .8s var(--ease-out);}
.pd-hotel:hover .ph-img{transform:scale(1.05);}
.pd-hotel .ph-body{padding:21px 22px;}
.ph-city{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold); margin-bottom:7px;
}
.ph-city .icon{width:13px; height:13px;}
.pd-hotel h4{font-size:1.06rem; margin-bottom:6px;}
.ph-stars{display:flex; gap:2px; margin-bottom:9px;}
.ph-stars .icon{width:14px; height:14px; color:var(--gold);}
.ph-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.ph-facts span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; color:var(--ink-soft);
  background:var(--mist); padding:6px 11px; border-radius:999px;
}
.ph-facts .icon{width:13px; height:13px; color:var(--green);}

/* ---------- Inclusions / exclusions ---------- */
.pd-incex{display:grid; grid-template-columns:1fr; gap:18px;}
@media (min-width:760px){ .pd-incex{grid-template-columns:1fr 1fr;} }
.incex-card{padding:26px 24px; border-radius:var(--r-lg); border:1px solid var(--line);}
.incex-card.inc{background:var(--mist);}
.incex-card.exc{background:var(--sand);}
.incex-card h4{display:flex; align-items:center; gap:9px; font-size:1.01rem; margin-bottom:16px;}
.incex-card h4 .icon{width:19px; height:19px;}
.incex-card.inc h4 .icon{color:var(--green);}
.incex-card.exc h4 .icon{color:#B08A3E;}
.incex-card ul{display:grid; gap:10px;}
.incex-card li{display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--ink-soft); line-height:1.6;}
.incex-card li .icon{width:16px; height:16px; flex:none; margin-top:3px;}
.incex-card.inc li .icon{color:var(--green);}
.incex-card.exc li .icon{color:#C0A264;}

/* ---------- Gallery + lightbox ---------- */
.pd-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px;}
.pd-gallery button{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  aspect-ratio:4/3; background-size:cover; background-position:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pd-gallery button::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,46,37,.45));
  opacity:0; transition:opacity .4s var(--ease);
}
.pd-gallery button:hover{transform:scale(1.03); box-shadow:var(--shadow-lift);}
.pd-gallery button:hover::after{opacity:1;}

.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(4,20,16,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lightbox.show{display:flex; animation:fadeIn .3s var(--ease) forwards;}
.lightbox img{
  max-width:min(1100px,94vw); max-height:86vh; width:auto; border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  animation:floatUp .45s var(--ease-out);
}
.lb-btn{
  position:absolute; width:47px; height:47px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.lb-btn:hover{background:rgba(255,255,255,.26);}
.lb-close{top:20px; right:20px;}
.lb-close:hover{transform:rotate(90deg);}
.lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.lb-next{right:16px; top:50%; transform:translateY(-50%);}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.09);}
.lb-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.85rem; letter-spacing:.04em;
}

/* ---------- FAQ accordion ---------- */
.faq-list{display:grid; gap:10px;}
.faq-item{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .35s var(--ease);}
.faq-item:hover{border-color:var(--gold-line);}
.faq-item.open{border-color:var(--gold-line); box-shadow:var(--shadow-card);}
.faq-q{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:18px 20px; font-size:.98rem; font-weight:500; color:var(--green-deep);
}
.faq-q .plus{position:relative; flex:none; width:16px; height:16px; margin-left:auto;}
.faq-q .plus::before,.faq-q .plus::after{
  content:""; position:absolute; left:0; top:7px; width:16px; height:2px;
  border-radius:2px; background:var(--gold);
  transition:transform .42s var(--ease-out);
}
.faq-q .plus::after{transform:rotate(90deg);}
.faq-item.open .plus::after{transform:rotate(0);}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .48s var(--ease-out);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{margin:0; padding:0 20px 19px; font-size:.93rem; line-height:1.75;}

/* ============================================================
   CUSTOM FORM COMPONENTS — dropdown, calendar, choice, stepper
   ============================================================ */

.builder{
  position:sticky; top:132px;
  border-radius:var(--r-xl); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
@media (max-width:999px){ .builder{position:static;} }
.builder-head{
  padding:22px 24px 18px;
  background:linear-gradient(145deg,var(--green-deep),var(--green) 130%);
  color:#fff; position:relative; overflow:hidden;
}
.builder-head::before{
  content:""; position:absolute; inset:0; opacity:.15; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.builder-head .eyebrow{color:var(--gold-soft); margin-bottom:6px; position:relative;}
.builder-head h3{color:#fff; font-size:1.2rem; margin:0 0 4px; position:relative;}
.builder-head p{color:rgba(255,255,255,.7); font-size:.85rem; margin:0; position:relative;}
.builder-body{padding:22px 24px 24px;}

.bx{margin-bottom:20px;}
.bx > .bx-label{
  display:flex; align-items:center; gap:7px;
  font-size:.77rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:10px;
}
.bx > .bx-label .icon{width:14px; height:14px; color:var(--gold);}

/* ---------- Custom dropdown (listbox) ---------- */
.dd{position:relative;}
.dd-btn{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:13px 15px; border-radius:var(--r-sm);
  border:1.5px solid #E4E1D6; background:var(--sand);
  font-size:.95rem; color:var(--ink); text-align:left;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dd-btn:hover{border-color:var(--gold-line);}
.dd.open .dd-btn,.dd-btn:focus-visible{
  border-color:var(--green); background:#fff; outline:none;
  box-shadow:0 0 0 4px rgba(11,93,75,.09);
}
.dd-btn .dd-val{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dd-btn .dd-val.placeholder{color:#A9B4AF;}
.dd-btn .dd-sub{font-size:.8rem; color:var(--ink-faint); margin-left:auto; flex:none;}
.dd-btn .chev{flex:none; width:15px; height:15px; color:var(--ink-soft); transition:transform .4s var(--ease);}
.dd.open .dd-btn .chev{transform:rotate(180deg); color:var(--green);}

.dd-menu{
  position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:70;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-lift); padding:6px; max-height:264px; overflow-y:auto;
  opacity:0; transform:translateY(-8px) scale(.985); visibility:hidden;
  transition:opacity .28s var(--ease), transform .34s var(--ease-out), visibility 0s linear .34s;
}
.dd.open .dd-menu{opacity:1; transform:none; visibility:visible; transition-delay:0s;}
.dd-opt{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 13px; border-radius:var(--r-sm);
  font-size:.93rem; color:var(--ink);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.dd-opt .o-main{flex:1; min-width:0;}
.dd-opt .o-sub{font-size:.79rem; color:var(--ink-faint); flex:none;}
.dd-opt .tick{width:15px; height:15px; flex:none; color:var(--green); opacity:0; transition:opacity .2s var(--ease);}
.dd-opt:hover,.dd-opt.cursor{background:var(--mist);}
.dd-opt[aria-selected="true"]{color:var(--green-deep); font-weight:500;}
.dd-opt[aria-selected="true"] .tick{opacity:1;}

/* ---------- Custom calendar ---------- */
.cal-wrap{position:relative;}
.cal-panel{
  position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:75;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-lift); padding:16px;
  opacity:0; transform:translateY(-8px) scale(.985); visibility:hidden;
  transition:opacity .28s var(--ease), transform .34s var(--ease-out), visibility 0s linear .34s;
}
.cal-wrap.open .cal-panel{opacity:1; transform:none; visibility:visible; transition-delay:0s;}
.cal-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.cal-nav strong{font-size:.96rem; font-weight:600; color:var(--green-deep); letter-spacing:-.02em;}
.cal-nav button{
  width:32px; height:32px; border-radius:50%; color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; background:var(--mist);
  transition:background-color .25s var(--ease), transform .25s var(--ease), opacity .2s;
}
.cal-nav button:hover:not(:disabled){background:var(--green); color:#fff;}
.cal-nav button:disabled{opacity:.3; cursor:not-allowed;}
.cal-nav .icon{width:14px; height:14px;}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:5px;}
.cal-dow span{
  text-align:center; font-size:.68rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-faint); padding:4px 0;
}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-day{
  position:relative; aspect-ratio:1; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:.86rem; color:var(--ink);
  transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.cal-day.pad{visibility:hidden;}
.cal-day:disabled{color:#C9D2CE; cursor:not-allowed;}
.cal-day:not(:disabled):hover{background:var(--mist); transform:scale(1.08);}
.cal-day.today{font-weight:600; color:var(--green);}
.cal-day.today::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--gold);
}
.cal-day.selected{background:var(--green); color:#fff; font-weight:600;}
.cal-day.selected::after{background:var(--gold-soft);}
.cal-day.selected:hover{background:var(--green-deep); transform:scale(1.08);}
.cal-day.peak:not(.selected){box-shadow:inset 0 0 0 1.5px var(--gold-line);}
.cal-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:13px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.75rem; color:var(--ink-faint);
}
.cal-foot i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
.cal-foot .k-peak{box-shadow:inset 0 0 0 1.5px var(--gold); background:#fff;}
.cal-foot .k-sel{background:var(--green);}

/* ---------- Choice cards (radio) ---------- */
.choice-grid{display:grid; gap:9px;}
.choice{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:14px 15px; border-radius:var(--r-md); cursor:pointer;
  border:1.5px solid #E4E1D6; background:var(--sand);
  transition:border-color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.choice:hover{border-color:var(--gold-line); transform:translateX(3px);}
.choice input{position:absolute; opacity:0; width:0; height:0;}
.choice .mark{
  flex:none; width:19px; height:19px; border-radius:50%;
  border:2px solid #CFD8D4; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .26s var(--ease);
}
.choice .mark::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--green);
  transform:scale(0); transition:transform .3s var(--ease-out);
}
.choice input:checked ~ .mark{border-color:var(--green);}
.choice input:checked ~ .mark::after{transform:scale(1);}
.choice:has(input:checked){border-color:var(--green); background:var(--mist);}
.choice input:focus-visible ~ .mark{box-shadow:0 0 0 4px rgba(11,93,75,.14);}
.choice .c-text{flex:1; min-width:0;}
.choice .c-text b{display:block; font-size:.93rem; font-weight:500; color:var(--ink); letter-spacing:-.01em;}
.choice .c-text small{display:block; font-size:.79rem; color:var(--ink-faint); margin-top:1px;}
.choice .c-price{flex:none; font-size:.88rem; font-weight:600; color:var(--green);}
.choice .c-price.free{color:var(--ink-faint); font-weight:400;}

/* ---------- Checkboxes (add-ons) ---------- */
.check-grid{display:grid; gap:9px;}
.check{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:13px 15px; border-radius:var(--r-md); cursor:pointer;
  border:1.5px solid #E4E1D6; background:var(--sand);
  transition:border-color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.check:hover{border-color:var(--gold-line); transform:translateX(3px);}
.check input{position:absolute; opacity:0; width:0; height:0;}
.check .box{
  flex:none; width:20px; height:20px; border-radius:6px;
  border:2px solid #CFD8D4; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .26s var(--ease), border-color .26s var(--ease), transform .26s var(--ease);
}
.check .box .icon{width:12px; height:12px; color:#fff; stroke-width:3.4;
  transform:scale(0); transition:transform .3s var(--ease-out);}
.check input:checked ~ .box{background:var(--green); border-color:var(--green);}
.check input:checked ~ .box .icon{transform:scale(1);}
.check:has(input:checked){border-color:var(--green); background:var(--mist);}
.check input:focus-visible ~ .box{box-shadow:0 0 0 4px rgba(11,93,75,.14);}
.check .c-text{flex:1; min-width:0;}
.check .c-text b{display:block; font-size:.92rem; font-weight:500; color:var(--ink); letter-spacing:-.01em;}
.check .c-text small{display:block; font-size:.78rem; color:var(--ink-faint); margin-top:1px;}
.check .c-price{flex:none; font-size:.87rem; font-weight:600; color:var(--green);}

/* ---------- Steppers ---------- */
.step-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 4px;
}
.step-row + .step-row{border-top:1px solid var(--line);}
.step-row .s-text{flex:1;}
.step-row .s-text b{display:block; font-size:.93rem; font-weight:500; color:var(--ink);}
.step-row .s-text small{display:block; font-size:.78rem; color:var(--ink-faint);}
.stepper{display:flex; align-items:center; gap:4px; flex:none;}
.stepper button{
  width:33px; height:33px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:#fff; color:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .24s var(--ease), color .24s var(--ease),
             border-color .24s var(--ease), transform .24s var(--ease), opacity .2s;
}
.stepper button:hover:not(:disabled){background:var(--green); border-color:var(--green); color:#fff; transform:scale(1.08);}
.stepper button:disabled{opacity:.32; cursor:not-allowed;}
.stepper button .icon{width:13px; height:13px; stroke-width:2.6;}
.stepper output{
  min-width:30px; text-align:center; font-size:1rem; font-weight:600;
  color:var(--green-deep); font-variant-numeric:tabular-nums;
}

/* ---------- Live price summary ---------- */
.bx-total{
  margin-top:22px; padding:18px 18px 6px;
  border-radius:var(--r-md); background:var(--mist); border:1px solid var(--line);
}
.bx-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:.87rem; color:var(--ink-soft); padding:5px 0;
}
.bx-line span:last-child{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500;}
.bx-line.muted span:last-child{color:var(--ink-faint); font-weight:400;}
.bx-sum{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:9px; padding:13px 0 15px; border-top:1.5px solid var(--line-strong);
}
.bx-sum .lbl{font-size:.83rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}
.bx-sum .val{
  font-size:1.75rem; font-weight:600; color:var(--green-deep);
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  transition:transform .3s var(--ease);
}
.bx-sum .val.bump{animation:bump .42s var(--ease-out);}
@keyframes bump{0%{transform:scale(1);}38%{transform:scale(1.09);}100%{transform:scale(1);}}
.bx-est{font-size:.75rem; color:var(--ink-faint); text-align:center; margin:0 0 4px; line-height:1.55;}

.builder .btn-block + .btn-block{margin-top:9px;}
.builder-actions{margin-top:18px;}

/* ============================================================
   BLOG — index, filters, cards, article
   ============================================================ */
.blog-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:calc(env(safe-area-inset-top) + 118px) 0 clamp(46px,6vh,74px);
  background:linear-gradient(160deg,var(--green-deep) 0%,var(--green) 118%);
  color:#fff; text-align:center;
}
.blog-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.blog-hero h1{color:#fff; font-size:clamp(2rem,1.2rem + 3vw,3.1rem);}
.blog-hero .eyebrow{color:var(--gold-soft);}
.blog-hero p{color:rgba(255,255,255,.78); max-width:56ch; margin:0 auto; font-size:1.05rem;}
.blog-hero .crumb{justify-content:center; color:rgba(255,255,255,.6);}
.blog-hero .crumb a{color:rgba(255,255,255,.82);}
.blog-hero .crumb a:hover{color:var(--gold-soft);}
.blog-hero .crumb .here{color:#fff;}

/* ---------- Search + filters ---------- */
.blog-tools{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:32px;
}
.blog-search{position:relative; flex:1 1 260px; max-width:420px;}
.blog-search input{
  width:100%; padding:13px 15px 13px 44px; border-radius:999px;
  border:1.5px solid #E4E1D6; background:var(--sand);
  font-family:inherit; font-size:.94rem; color:var(--ink);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-search input:focus{
  border-color:var(--green); background:#fff; outline:none;
  box-shadow:0 0 0 4px rgba(11,93,75,.09);
}
.blog-search input::placeholder{color:#A9B4AF;}
.blog-search .icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--ink-faint); pointer-events:none;
}
.blog-count{font-size:.86rem; color:var(--ink-faint); flex:none;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px;}
.chip{
  padding:9px 17px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:#fff;
  font-size:.86rem; font-weight:500; color:var(--ink-soft);
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.chip:hover{border-color:var(--gold); color:var(--green-deep); transform:translateY(-2px);}
.chip.active{background:var(--green); border-color:var(--green); color:#fff;}

/* ---------- Blog grid ---------- */
.blog-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media (min-width:660px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1020px){ .blog-grid{grid-template-columns:repeat(3,1fr);} }

.blog-card{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
.blog-card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);}
.blog-card .bc-media{position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--mist);}
.blog-card .bc-media .bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .9s var(--ease-out);
}
.blog-card:hover .bc-media .bg{transform:scale(1.07);}
.bc-date{
  position:absolute; left:12px; top:12px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:50px; height:52px; border-radius:12px;
  background:rgba(255,255,255,.94); color:var(--green-deep);
  backdrop-filter:blur(8px); box-shadow:0 8px 20px -12px rgba(6,46,37,.6);
}
.bc-date .d{font-size:1.14rem; font-weight:600; line-height:1; letter-spacing:-.03em;}
.bc-date .m{font-size:.62rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); margin-top:2px;}
.blog-card .bc-body{padding:20px 21px 22px; display:flex; flex-direction:column; flex:1;}
.bc-tag{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
  font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold); margin-bottom:9px;
}
.blog-card h3{
  font-size:1.06rem; line-height:1.34; margin-bottom:9px;
  transition:color .28s var(--ease);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card:hover h3{color:var(--green);}
.blog-card p{
  font-size:.89rem; line-height:1.66; margin:0 0 16px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:14px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--ink-faint);
}
.bc-foot .read{display:inline-flex; align-items:center; gap:6px;}
.bc-foot .read .icon{width:13px; height:13px; color:var(--gold);}
.bc-more{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; color:var(--green); font-size:.83rem;
  transition:gap .3s var(--ease);
}
.blog-card:hover .bc-more{gap:12px;}
.bc-more .icon{width:14px; height:14px;}

.blog-empty{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--ink-faint);
}
.blog-empty .icon{width:38px; height:38px; color:var(--line-strong); margin-bottom:14px;}

/* ---------- Article ---------- */
.post-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:calc(env(safe-area-inset-top) + 116px) 0 clamp(46px,6vh,76px);
  background:var(--green-deep); color:#fff;
}
.post-hero .pd-bg{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.09); animation:pdZoom 20s var(--ease-out) forwards;
}
.post-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(6,46,37,.66) 0%,rgba(6,46,37,.84) 50%,rgba(4,33,27,.96) 100%);
}
.post-hero .crumb{color:rgba(255,255,255,.6);}
.post-hero .crumb a{color:rgba(255,255,255,.82);}
.post-hero .crumb a:hover{color:var(--gold-soft);}
.post-hero .crumb .here{color:#fff; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.post-hero h1{color:#fff; max-width:20ch; font-size:clamp(1.85rem,1.05rem + 3vw,3rem);}
.post-hero .eyebrow{color:var(--gold-soft);}
.post-meta{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px;}

.post-layout{display:grid; grid-template-columns:1fr; gap:44px; align-items:start;}
@media (min-width:1000px){ .post-layout{grid-template-columns:minmax(0,1fr) 306px; gap:56px;} }

/* Reading progress for the article */
.post-progress{
  position:sticky; top:70px; z-index:55; height:2.5px; margin-bottom:-2.5px;
  background:var(--line);
}
.post-progress i{
  display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:transform .1s linear;
}

/* ---------- Article typography ---------- */
.post-body{font-size:1.045rem; line-height:1.82; color:var(--ink-soft); max-width:none;}
.post-body > *:first-child{margin-top:0;}
.post-body p{margin:0 0 1.25em; max-width:72ch;}
.post-body h2{
  font-size:clamp(1.42rem,1.1rem + 1.1vw,1.85rem);
  margin:2em 0 .6em; scroll-margin-top:150px; position:relative; padding-left:19px;
}
.post-body h2::before{
  content:""; position:absolute; left:0; top:.22em; bottom:.22em; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--gold),var(--gold-soft));
}
.post-body h3{font-size:1.16rem; margin:1.7em 0 .5em; color:var(--green-deep); scroll-margin-top:150px;}
.post-body h4{font-size:1.02rem; margin:1.5em 0 .45em; color:var(--green-deep);}
.post-body strong{color:var(--ink); font-weight:600;}
.post-body a[data-link],.post-body a{
  color:var(--green); font-weight:500;
  background-image:linear-gradient(var(--gold-line),var(--gold-line));
  background-size:100% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:1px;
  transition:color .25s var(--ease), background-size .32s var(--ease);
}
.post-body a:hover{color:var(--green-deep); background-size:100% 100%;
  background-image:linear-gradient(rgba(199,165,74,.18),rgba(199,165,74,.18));}
.post-body ul,.post-body ol{margin:0 0 1.35em; padding-left:0; display:grid; gap:11px;}
.post-body ul li{position:relative; padding-left:29px; list-style:none;}
.post-body ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; border-radius:2px; transform:rotate(45deg);
  background:var(--gold);
}
.post-body ol{counter-reset:pc; list-style:none;}
.post-body ol li{position:relative; padding-left:34px; counter-increment:pc;}
.post-body ol li::before{
  content:counter(pc); position:absolute; left:0; top:.16em;
  width:22px; height:22px; border-radius:50%;
  background:var(--green-glass); color:var(--green);
  font-size:.76rem; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.post-body figure{margin:1.9em 0;}
.post-body img{
  width:100%; height:auto; border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); background:var(--mist);
}
.post-body blockquote{
  margin:1.8em 0; padding:22px 26px;
  border-radius:var(--r-md); background:var(--mist); border-left:3px solid var(--gold);
  font-size:1.06rem; color:var(--green-deep); font-style:italic;
}
.post-body blockquote p:last-child{margin:0;}
.post-body hr{
  border:none; height:1px; margin:2.4em 0;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.post-table{overflow-x:auto; margin:1.7em 0; border-radius:var(--r-md); border:1px solid var(--line);}
.post-table table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:440px;}
.post-table tr:nth-child(odd){background:var(--sand);}
.post-table tr:first-child{background:var(--green-deep);}
.post-table tr:first-child td{color:#fff; font-weight:600;}
.post-table td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft);}
.post-table tr:last-child td{border-bottom:none;}

/* ---------- Article sidebar ---------- */
.post-side{position:sticky; top:132px; display:grid; gap:18px;}
@media (max-width:999px){ .post-side{position:static;} }
.side-card{
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:#fff; padding:21px 22px; box-shadow:var(--shadow-card);
}
.side-card h4{
  display:flex; align-items:center; gap:9px;
  font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px;
}
.side-card h4 .icon{width:14px; height:14px; color:var(--gold);}
.toc{display:grid; gap:2px;}
.toc a{
  display:block; padding:8px 12px; border-radius:var(--r-sm);
  font-size:.88rem; line-height:1.5; color:var(--ink-soft);
  border-left:2px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.toc a:hover{background:var(--mist); color:var(--green-deep);}
.toc a.active{background:var(--mist); color:var(--green-deep); font-weight:500; border-left-color:var(--gold);}

.side-cta{
  background:linear-gradient(150deg,var(--green-deep),var(--green) 130%);
  color:#fff; border:none; position:relative; overflow:hidden;
}
.side-cta::before{
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.side-cta h4{color:var(--gold-soft);}
.side-cta strong{display:block; position:relative; font-size:1.1rem; font-weight:500; color:#fff; margin-bottom:7px; letter-spacing:-.025em;}
.side-cta p{position:relative; font-size:.87rem; color:rgba(255,255,255,.74); margin-bottom:16px;}
.side-cta .btn{position:relative; width:100%;}

.side-list{display:grid; gap:3px;}
.side-list a{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 11px; border-radius:var(--r-sm);
  transition:background-color .25s var(--ease);
}
.side-list a:hover{background:var(--mist);}
.side-list .n{
  flex:none; width:26px; height:26px; border-radius:8px;
  background:var(--green-glass); color:var(--green);
  font-size:.75rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.side-list .t{font-size:.87rem; line-height:1.45; color:var(--ink-soft); font-weight:500;}
.side-list a:hover .t{color:var(--green-deep);}

/* ---------- Share row ---------- */
.share-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:34px 0 0; padding-top:24px; border-top:1px solid var(--line);
}
.share-row span{font-size:.83rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px;}
.share-btn{
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:#fff; color:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.share-btn:hover{background:var(--green); border-color:var(--green); color:#fff; transform:translateY(-3px);}
.share-btn .icon{width:16px; height:16px;}
.copied-toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,14px); z-index:210;
  padding:12px 22px; border-radius:999px;
  background:var(--green-deep); color:#fff; font-size:.88rem; font-weight:500;
  box-shadow:var(--shadow-lift); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .4s var(--ease-out);
}
.copied-toast.show{opacity:1; transform:translate(-50%,0);}

/* ---------- Prev / next ---------- */
.post-nav{display:grid; grid-template-columns:1fr; gap:12px; margin-top:34px;}
@media (min-width:640px){ .post-nav{grid-template-columns:1fr 1fr;} }
.post-nav a{
  display:flex; flex-direction:column; gap:5px;
  padding:19px 21px; border-radius:var(--r-md);
  border:1px solid var(--line); background:#fff;
  transition:border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.post-nav a:hover{border-color:var(--gold-line); box-shadow:var(--shadow-card); transform:translateY(-3px);}
.post-nav .lbl{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.73rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--gold);
}
.post-nav .lbl .icon{width:13px; height:13px;}
.post-nav .t{font-size:.95rem; font-weight:500; color:var(--green-deep); line-height:1.4; letter-spacing:-.015em;}
.post-nav a.next{text-align:right;}
.post-nav a.next .lbl{justify-content:flex-end;}

/* ---------- Related ---------- */
.related-head{
  display:flex; align-items:center; gap:16px; margin:0 0 26px;
}
.related-head h2{margin:0; font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem); white-space:nowrap;}
.related-head .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--line-strong),transparent);}

@media (prefers-reduced-motion:reduce){
  .view.active,.pd-hero .pd-bg,.post-hero .pd-bg,.lightbox img{animation:none;}
  .dd-menu,.cal-panel,.tl-body,.faq-a{transition-duration:.01ms;}
}


/* ============================================================
   ADDED — SPLIT NAVBAR WITH CENTRED LOGO, SOLO HERO, CONTACT
   ============================================================ */

/* ---------- Header ---------- */
.primary-nav{display:none !important;}

.nav-side a{
  position:relative; padding:10px 15px; border-radius:8px;
  font-size:.95rem; font-weight:500; letter-spacing:-.005em;
  color:var(--green-deep);
  transition:color .28s var(--ease);
  white-space:nowrap;
}
.nav-side a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:2px; height:2.5px;
  background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .42s var(--ease);
}
.nav-side a:hover::after,.nav-side a.active::after{transform:scaleX(1);}
.nav-side a.active{color:var(--green-deep); font-weight:600;}


/* ---------- Enquire pill ---------- */
.btn-enquire{
  padding:13px 26px; border-radius:999px;
  background:var(--gold); color:var(--green-deep);
  font-size:.84rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; border:1.5px solid var(--gold);
  box-shadow:0 12px 26px -16px rgba(199,165,74,.9);
  transition:background-color .3s var(--ease), color .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.btn-enquire:hover{
  background:#D8B65C; border-color:#D8B65C; transform:translateY(-2px);
  box-shadow:0 18px 34px -16px rgba(199,165,74,1);
}

/* ---------- Brand mark ----------
   The artwork carries its own colours, so instead of recolouring paths we
   flip it to a white silhouette wherever it sits on a dark ground. */
.brand img{
  height:52px; width:auto; display:block;
  transition:height .35s var(--ease), filter .35s var(--ease);
}
.site-header.scrolled .brand img{height:42px;}
@media (max-width:759px){
  .brand img{height:42px;}
  .site-header.scrolled .brand img{height:36px;}
}
/* Open mobile panel: the logo sits on deep green */
body.nav-open .site-header .brand img{filter:brightness(0) invert(1);}

/* ---------- Hero without the lead card ---------- */
.hero-inner{display:block;}
@media (min-width:1000px){ .hero-inner{display:block; grid-template-columns:none;} }
.hero-copy{
  max-width:820px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-copy .lede{margin-left:auto; margin-right:auto; max-width:60ch;}
.hero-cta-row{justify-content:center;}
.hero-badges{justify-content:center;}
.hero .hero-arch{right:auto; left:50%; transform:translate(-50%,-50%); opacity:.32;}

.hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:none; flex-direction:column; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  opacity:0; animation:floatUp .9s var(--ease-out) 1.5s forwards;
}
@media (min-height:640px) and (min-width:760px){ .hero-scroll{display:flex;} }
.hero-scroll .rail{
  width:1.5px; height:44px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.18); position:relative;
}
.hero-scroll .rail::after{
  content:""; position:absolute; left:0; right:0; top:-60%; height:60%;
  background:linear-gradient(180deg,transparent,var(--gold));
  animation:railRun 2.2s var(--ease) infinite;
}
@keyframes railRun{0%{top:-60%;}100%{top:100%;}}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ct-hero{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding:calc(env(safe-area-inset-top) + 124px) 0 clamp(52px,7vh,86px);
  background:linear-gradient(160deg,var(--green-deep) 0%,var(--green) 122%);
  color:#fff;
}
.ct-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.ct-hero h1{color:#fff; font-size:clamp(2rem,1.2rem + 3vw,3.15rem);}
.ct-hero p{color:rgba(255,255,255,.79); max-width:58ch; margin:0 auto; font-size:1.06rem;}
.ct-hero .eyebrow{color:var(--gold-soft);}
.ct-hero .crumb{justify-content:center; color:rgba(255,255,255,.6);}
.ct-hero .crumb a{color:rgba(255,255,255,.82);}
.ct-hero .crumb a:hover{color:var(--gold-soft);}
.ct-hero .crumb .here{color:#fff;}

/* Contact method cards, lifted over the hero edge */
.ct-methods{
  display:grid; grid-template-columns:1fr; gap:16px;
  margin-top:calc(clamp(52px,7vh,86px) * -1 - 22px);
  position:relative; z-index:5;
}
/* Three cards: one column, then straight to three. A 2-up step would
   leave the third stranded on its own row. */
@media (min-width:820px){ .ct-methods{grid-template-columns:repeat(3,1fr);} }
.ct-method{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 24px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.ct-method::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.ct-method:hover{transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);}
.ct-method:hover::after{transform:scaleX(1);}
.ct-method .ico{
  width:46px; height:46px; border-radius:14px; margin-bottom:15px;
  background:var(--mist); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--ease);
}
.ct-method:hover .ico{background:var(--green); color:#fff; transform:rotate(-6deg) scale(1.06);}
.ct-method .ico .icon{width:21px; height:21px;}
.ct-method h4{font-size:1.02rem; margin-bottom:5px;}
.ct-method p{font-size:.86rem; margin:0 0 14px; line-height:1.6;}
.ct-method .val{
  margin-top:auto; font-size:.96rem; font-weight:600; color:var(--green);
  display:inline-flex; align-items:center; gap:8px;
  transition:gap .3s var(--ease);
}
.ct-method:hover .val{gap:13px;}
.ct-method .val .icon{width:14px; height:14px;}
.ct-method.wa .ico{background:rgba(37,211,102,.12); color:#1EB755;}
.ct-method.wa:hover .ico{background:var(--wa); color:#fff;}
.ct-method.wa .val{color:#1EB755;}

/* Form + side panel */
.ct-layout{display:grid; grid-template-columns:1fr; gap:38px; align-items:start;}
@media (min-width:1000px){ .ct-layout{grid-template-columns:minmax(0,1fr) 360px; gap:52px;} }

.ct-form-card{
  border-radius:var(--r-xl); background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-soft); overflow:hidden;
}
.ct-form-card .cf-head{
  padding:28px 30px 22px; border-bottom:1px solid var(--line);
  background:var(--sand);
}
.ct-form-card .cf-head h3{font-size:1.3rem; margin-bottom:5px;}
.ct-form-card .cf-head p{font-size:.9rem; margin:0; color:var(--ink-faint);}
.ct-form-card .cf-body{padding:26px 30px 30px;}
@media (max-width:520px){
  .ct-form-card .cf-head{padding:22px 20px 18px;}
  .ct-form-card .cf-body{padding:22px 20px 24px;}
}
.ct-grid2{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media (min-width:560px){ .ct-grid2{grid-template-columns:1fr 1fr;} }

.ct-side{display:grid; gap:18px; position:sticky; top:132px;}
@media (max-width:999px){ .ct-side{position:static;} }
.ct-panel{
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:#fff; padding:24px 24px; box-shadow:var(--shadow-card);
}
.ct-panel h4{
  display:flex; align-items:center; gap:9px;
  font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:15px;
}
.ct-panel h4 .icon{width:14px; height:14px; color:var(--gold);}
.hours-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; font-size:.9rem; color:var(--ink-soft);
  border-bottom:1px dashed var(--line);
}
.hours-row:last-child{border-bottom:none;}
.hours-row b{color:var(--ink); font-weight:500;}
.hours-row.now b{color:var(--green);}
.ct-live{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:.83rem; font-weight:500; color:var(--green);
  background:var(--green-glass); padding:8px 14px; border-radius:999px;
}
.ct-live i{
  width:8px; height:8px; border-radius:50%; background:var(--wa);
  animation:softPulse 2.4s ease-in-out infinite;
}
.ct-live.closed{color:#8A6D2F; background:rgba(199,165,74,.13);}
.ct-live.closed i{background:var(--gold);}

.ct-office{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(150deg,var(--green-deep),var(--green) 135%);
  color:#fff; padding:24px; position:relative;
}
.ct-office::before{
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C7A54A' stroke-width='1'%3E%3Cpath d='M36 6 44 20 58 14 52 28 66 36 52 44 58 58 44 52 36 66 28 52 14 58 20 44 6 36 20 28 14 14 28 20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
.ct-office h4{color:var(--gold-soft); position:relative;}
.ct-office address{
  font-style:normal; position:relative; font-size:.95rem;
  line-height:1.75; color:rgba(255,255,255,.86);
}
.ct-office .btn{position:relative; margin-top:16px; width:100%;}

.ct-trust{display:grid; gap:11px;}
.ct-trust li{display:flex; gap:11px; align-items:flex-start; font-size:.89rem; color:var(--ink-soft); line-height:1.6;}
.ct-trust li .icon{width:16px; height:16px; color:var(--green); flex:none; margin-top:3px;}

.ct-social{display:flex; gap:9px;}
.ct-social a{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:#fff; color:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.ct-social a:hover{background:var(--green); border-color:var(--green); color:#fff; transform:translateY(-3px);}
.ct-social .icon{width:17px; height:17px;}

/* FAQ block on the contact page */
.ct-faq{max-width:860px; margin:0 auto;}
.ct-faq .faq-item{background:#fff;}

.field .req{color:var(--gold); margin-left:3px;}
.ct-err{
  display:none; font-size:.79rem; color:#B3452F; margin-top:6px;
}
.field.invalid .ct-err{display:block;}
.field.invalid input,.field.invalid textarea{border-color:#D98A78; background:#FEF7F5;}

/* ============================================================
   HEADER — floats transparent over the hero, solidifies on scroll
   ============================================================ */

/* Sticky sat *above* the hero, so "transparent" just exposed the page
   background. Fixed lets it genuinely overlay the artwork instead. */
.site-header{position:fixed; top:0; left:0; right:0; z-index:130;}

/* At the top of any route the hero behind is dark, so drop all chrome. */
.site-header:not(.scrolled){
  background:transparent; background-color:transparent;
  border-bottom-color:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.site-header:not(.scrolled) .nav-side a{color:rgba(255,255,255,.92);}
.site-header:not(.scrolled) .nav-side a:hover,
.site-header:not(.scrolled) .nav-side a.active{color:#fff;}
/* Over the dark hero the logo's greens would vanish — go white. */
.site-header:not(.scrolled) .brand img{filter:brightness(0) invert(1);}
.site-header:not(.scrolled) .nav-toggle{background:rgba(255,255,255,.16); color:#fff;}
.site-header:not(.scrolled) .nav-toggle:hover{background:rgba(255,255,255,.28);}

/* The scroll progress rail has to clear the lifted header. */
.progress{z-index:135;}

/* The hero sits under the fixed bar — give its content room to clear it. */
.hero{padding-top:clamp(112px, 8vh + 76px, 156px);}

/* ---------- Nav spacing: an evenly gapped cluster around the mark ----------
   The links stay grouped either side of the centred logo (rather than being
   pushed to the window edges) and the Enquire pill holds the far right. */
.nav-side a{padding:10px 2px;}
.nav-side a::after{left:2px; right:2px;}

/* ---------- Dropdown: open upward when the space below is tight ----------
   The quote modal is a short overflow-y:auto box, so a downward menu would
   be clipped by it. */
.dd.dd-up .dd-menu{
  top:auto; bottom:calc(100% + 7px);
  transform:translateY(8px) scale(.985);
}
.dd.dd-up.open .dd-menu{transform:none;}

/* A custom dropdown inside a .field shares the native invalid styling */
.field .ct-err{display:none;}
.field.invalid .ct-err{display:block;}
.field.invalid .dd-btn{border-color:#D98A78; background:#FEF7F5;}
.field.invalid .dd-btn .dd-val.placeholder{color:#C08874;}


.footer-brand img{height:54px; width:auto; max-width:100%; filter:brightness(0) invert(1);}


/* ============================================================
   ADDED 2026-09 — NAVBAR BALANCE, WHATSAPP PILL, SINGLE FAB
   ============================================================ */

/* ---------- 2.2  Move the CTA out of the balanced 1fr pair ----------
   The old grid was 1fr auto 1fr with the pill living inside the right 1fr,
   so a ~170px button ate that track and shoved the right-hand links in
   toward the logo. The pill now owns a fourth `auto` track, which leaves
   the two link groups genuinely mirrored. */
/* ---------- 2.3  The Enquire pill is now a WhatsApp pill ----------
   Kept gold: it is the brand accent and reads correctly on both the
   transparent-over-hero and the scrolled-white header states. */
.btn-enquire .icon{width:1.05rem; height:1.05rem; flex:none; transition:transform .3s var(--ease);}
.btn-enquire:hover .icon{transform:scale(1.08);}

/* Minor links at the foot of the mobile drawer read as secondary. */
.mnav-minor{font-size:.9rem !important; opacity:.66;}

/* ---------- 8  One FAB, restyled with a breathing ring ---------- */
.fab-stack{right:22px; bottom:22px;}
.fab.whatsapp{width:62px; height:62px; position:relative;}
.fab.whatsapp .icon{width:27px; height:27px;}
.fab.whatsapp::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wa); opacity:.7;
  animation:fabRing 2.8s var(--ease-out) infinite;
  pointer-events:none;
}
@keyframes fabRing{
  0%{transform:scale(1); opacity:.55;}
  70%,100%{transform:scale(1.45); opacity:0;}
}
.fab.whatsapp:hover{box-shadow:0 20px 40px -12px rgba(37,211,102,.6);}


/* ============================================================
   ADDED 2026-09 — NEW PAGES: ABOUT, REVIEWS, LEGAL, PACKAGES
   ============================================================ */

/* ---------- Shared: stat band ---------- */
.ab-stats{background:var(--sand); border-block:1px solid var(--line); padding:clamp(30px,4vh,48px) 0;}
.ab-stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px 12px;}
@media (min-width:760px){ .ab-stat-grid{grid-template-columns:repeat(4,1fr);} }
.ab-stat{text-align:center;}
.ab-stat b{
  display:block; font-size:clamp(1.8rem,1.2rem + 1.9vw,2.7rem); font-weight:300;
  letter-spacing:-.04em; color:var(--green-deep); line-height:1.1;
}
.ab-stat span{display:block; margin-top:6px; font-size:.82rem; color:var(--ink-faint);}
.ab-stat-note{
  margin:26px auto 0; max-width:70ch; text-align:center;
  font-size:.78rem; line-height:1.6; color:var(--ink-faint);
}

/* ---------- About: story split ---------- */
.ab-split{display:grid; gap:38px; align-items:center;}
@media (min-width:940px){ .ab-split{grid-template-columns:.85fr 1.15fr; gap:60px;} }
.ab-art{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-soft);}
.ab-art img{display:block; width:100%; height:100%; max-height:520px; object-fit:cover;}
.ab-art-badge{
  position:absolute; left:18px; bottom:18px;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  border-radius:999px; padding:9px 17px 9px 13px;
  box-shadow:var(--shadow-card);
}
.ab-art-badge .icon{width:19px; height:19px; color:var(--gold);}
.ab-art-badge span{font-size:.76rem; color:var(--ink-faint); line-height:1.25;}
.ab-art-badge b{display:block; font-size:.98rem; font-weight:600; color:var(--green-deep);}
.ab-copy h2{margin-bottom:16px;}
.ab-copy .ab-lede{
  font-size:1.1rem; line-height:1.65; color:var(--green-deep);
  border-left:2px solid var(--gold); padding-left:18px; margin-bottom:20px;
}
.ab-copy p{color:var(--ink-soft); margin-bottom:14px;}
.ab-copy p:last-child{margin-bottom:0;}
@media (min-width:640px){ .icon-grid.ab-values{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1020px){ .icon-grid.ab-values{grid-template-columns:repeat(3,1fr);} }

/* ---------- About: why-choose checklist ---------- */
.ab-why{display:grid; gap:14px;}
@media (min-width:700px){ .ab-why{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .ab-why{grid-template-columns:repeat(3,1fr);} }
.ab-why-item{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 20px 21px;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.ab-why-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--gold-line);}
.ab-why-item .ic{
  flex:none; width:40px; height:40px; border-radius:12px;
  background:var(--mist); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .38s var(--ease), color .38s var(--ease), transform .38s var(--ease);
}
.ab-why-item:hover .ic{background:var(--green); color:var(--gold-soft); transform:rotate(-6deg) scale(1.05);}
.ab-why-item .ic .icon{width:19px; height:19px;}
.ab-why-item h3{font-size:.97rem; font-weight:600; color:var(--green-deep); margin-bottom:5px;}
.ab-why-item p{font-size:.84rem; color:var(--ink-faint); margin:0; line-height:1.55;}

/* ---------- Reviews page ---------- */
.rv-hero{padding-bottom:clamp(44px,6vh,72px);}
.rv-score{
  margin:clamp(28px,4vh,44px) auto 0; max-width:840px;
  display:grid; gap:26px; align-items:center; text-align:left;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl); padding:26px 28px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
@media (min-width:820px){ .rv-score{grid-template-columns:auto 1fr 1fr; gap:34px;} }
.rv-score-num{text-align:center; flex:none;}
.rv-score-num b{
  display:block; font-size:3.4rem; font-weight:300; line-height:1;
  letter-spacing:-.05em; color:#fff;
}
.rv-score-num span{display:block; margin-top:4px; font-size:.76rem; color:rgba(255,255,255,.6);}
.rv-score-mid p{color:rgba(255,255,255,.72); font-size:.88rem; margin:9px 0 14px;}
.rv-score-mid p b{color:#fff; font-weight:600;}

/* 4.8 clipped honestly rather than rounded up to a flat five */
.rv-stars{position:relative; display:inline-block; line-height:0;}
.rv-stars .icon{width:22px; height:22px;}
.rv-stars-bg .icon{color:rgba(255,255,255,.22);}
.rv-stars-fg{
  position:absolute; inset:0; overflow:hidden; white-space:nowrap;
  width:calc(var(--fill) * 1%);
}
.rv-stars-fg .icon{color:var(--gold);}

.rv-dist{display:grid; gap:6px; min-width:0;}
.rv-dist-row{display:grid; grid-template-columns:30px 1fr 38px; gap:9px; align-items:center;
  font-size:.76rem; color:rgba(255,255,255,.66);}
.rv-bar{display:block; height:6px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden;}
.rv-bar i{
  display:block; height:100%; border-radius:999px; background:var(--gold);
  width:var(--w); transform:scaleX(0); transform-origin:0 50%;
  animation:rvBar 1.1s var(--ease-out) .25s forwards;
}
@keyframes rvBar{to{transform:scaleX(1);}}
.rv-pct{text-align:right;}

.rv-grid{display:grid; gap:20px; grid-template-columns:1fr;}
@media (min-width:700px){ .rv-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1060px){ .rv-grid{grid-template-columns:repeat(3,1fr);} }
.rv-grid .testi-card{width:auto; min-width:0; flex:none;}
/* .testi-card sets display:flex, which outranks the [hidden] default. */
.rv-card[hidden]{display:none !important;}
.testi-stars .icon.dim{color:var(--line-strong);}
.rv-empty{text-align:center; color:var(--ink-faint); padding:40px 0;}

/* ---------- Legal pages ---------- */
.legal-page{background:#fff;}
.lg-layout{display:grid; gap:34px;}
@media (min-width:1000px){ .lg-layout{grid-template-columns:minmax(0,1fr) 300px; gap:52px; align-items:start;} }
.lg-side{display:none;}
@media (min-width:1000px){ .lg-side{display:grid; gap:18px; position:sticky; top:132px;} }
.lg-body{max-width:72ch;}
.lg-updated{
  display:inline-block; font-size:.76rem; color:var(--ink-faint);
  background:var(--mist); border-radius:999px; padding:6px 15px; margin-bottom:20px;
}
.lg-updated b{color:var(--green-deep); font-weight:600;}
.lg-intro{font-size:1.06rem; line-height:1.7; color:var(--ink); margin-bottom:8px;}
.lg-sec{padding-top:30px; scroll-margin-top:120px;}
.lg-sec h2{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(1.15rem,1rem + .6vw,1.42rem); margin-bottom:12px; color:var(--green-deep);
}
.lg-num{
  flex:none; width:30px; height:30px; border-radius:9px;
  background:var(--mist); color:var(--green);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:600; font-family:var(--font);
}
.lg-num .icon{width:15px; height:15px;}
.lg-sec p{color:var(--ink-soft); line-height:1.75; margin-bottom:12px; font-size:.95rem;}
.lg-sec p:last-child{margin-bottom:0;}
.lg-sec a{color:var(--green); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.lg-contact{list-style:none; padding:0; margin:6px 0 0; display:grid; gap:9px;}
.lg-contact li{display:flex; align-items:center; gap:11px; font-size:.93rem; color:var(--ink-soft);}
.lg-contact .icon{width:17px; height:17px; color:var(--gold); flex:none;}
.lg-note{
  margin-top:34px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--sand); border:1px solid var(--gold-line);
  font-size:.81rem; line-height:1.65; color:var(--ink-soft);
}

/* ---------- All-packages page ---------- */
.pkg-custom{
  display:flex; align-items:center;
  background:linear-gradient(155deg,var(--green-deep),var(--green) 145%);
  color:#fff; border-color:transparent;
}
.pkg-custom-inner{padding:32px 28px; width:100%;}
.pkg-custom .ic{
  width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  background:rgba(255,255,255,.12); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
}
.pkg-custom .ic .icon{width:21px; height:21px;}
.pkg-custom h3{color:#fff; font-size:1.22rem; margin-bottom:9px;}
.pkg-custom p{color:rgba(255,255,255,.74); font-size:.89rem; line-height:1.62; margin-bottom:20px;}


/* ============================================================
   ADDED 2026-09 — HERO FORM + TRUST ROW, UNDER-HERO BANDS, CONSENT
   ============================================================ */

/* ---------- 3.1  Full-viewport hero on laptops only ----------
   On a phone a six-row form inside a fixed 100dvh box gets squeezed, so
   below 1000px the hero takes its natural height with generous padding. */
.hero{min-height:auto;}
@media (min-width:1000px){
  .hero{min-height:100vh; min-height:100dvh;}
}
@media (max-width:999px){
  .hero{padding-bottom:clamp(48px,7vh,80px);}
}
/* Two more slots on the hero-copy entrance timeline (trust row, badges). */
.hero-copy > *:nth-child(6){animation-delay:.84s;}
.hero-copy > *:nth-child(7){animation-delay:.96s;}

/* ---------- 3.3  Trustpilot rating row ---------- */
.hero-trust{
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-bottom:22px; padding:2px 0;
  transition:transform .3s var(--ease);
}
.hero-trust:hover{transform:translateY(-2px);}
.ht-stars{position:relative; display:inline-block; line-height:0; flex:none;}
.ht-stars .icon{width:17px; height:17px;}
.ht-bg .icon{color:rgba(255,255,255,.26);}
.ht-fg{position:absolute; inset:0; overflow:hidden; white-space:nowrap; width:calc(var(--fill) * 1%);}
.ht-fg .icon{color:var(--gold);}
.hero-trust b{
  font-family:var(--font); font-size:1.02rem; font-weight:600;
  color:#fff; letter-spacing:-.02em;
}
.hero-trust .ht-label{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  font-size:.83rem; color:rgba(255,255,255,.72);
}
.hero-trust .ht-label .icon{width:13px; height:13px; transform:rotate(-45deg);}
.hero-trust .ht-label::after{
  content:""; position:absolute; left:0; right:18px; bottom:-3px; height:1.5px;
  background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.hero-trust:hover .ht-label::after{transform:scaleX(1);}

/* ---------- 3.2  Two columns again ----------
   A previous pass collapsed .hero-inner to a centred single column when the
   lead card was removed. The form is back in that column, so the split
   layout returns at >=1000px; below that the hero stays centred and the
   form drops underneath. */
@media (min-width:1000px){
  .hero-inner{
    display:grid; grid-template-columns:1.04fr .96fr;
    align-items:center; gap:52px;
  }
  .hero-copy{max-width:none; margin:0; text-align:left; align-items:flex-start;}
  .hero-copy .lede{margin-left:0; margin-right:0; max-width:52ch;}
  .hero-cta-row{justify-content:flex-start;}
  .hero-badges{justify-content:flex-start;}
  .hero .hero-arch{right:-10%; left:auto; transform:translateY(-50%); opacity:.26;}
}
@media (max-width:999px){
  .hero-trust{justify-content:center; align-self:center;}
  .hero-form-wrap{max-width:560px; margin:0 auto; width:100%;}
  .hero-scroll{display:none;}
}

/* ---------- 3.2  The hero form, filling the column left for it ---------- */
.hero-form-wrap{
  position:relative; z-index:4;
  background:#fff; color:var(--ink);
  border-radius:var(--r-xl); padding:28px 26px 26px;
  box-shadow:var(--shadow-soft); border:1px solid rgba(255,255,255,.6);
  opacity:0; animation:floatUp 1s var(--ease-out) .62s forwards;
}
/* Glass only where it has a dark ground behind it to sit on. */
@media (min-width:1000px){
  .hero-form-wrap{
    background:rgba(255,255,255,.07); color:#fff;
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
    overflow:hidden;
  }
  .hero-form-wrap::before{
    content:""; position:absolute; inset:0 0 auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:.8;
  }
  .hero-form-wrap h3{color:#fff;}
  .hero-form-wrap .hf-sub{color:rgba(255,255,255,.62);}
  .hero-form-wrap .eyebrow{color:var(--gold-soft);}
  .hero-form-wrap .field label{color:rgba(255,255,255,.78);}
  .hero-form-wrap .field input,
  .hero-form-wrap .field textarea,
  .hero-form-wrap .dd-btn{
    background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); color:#fff;
  }
  .hero-form-wrap .field input::placeholder,
  .hero-form-wrap .field textarea::placeholder{color:rgba(255,255,255,.44);}
  .hero-form-wrap .field input:focus,
  .hero-form-wrap .field textarea:focus{
    background:rgba(255,255,255,.14); border-color:var(--gold-soft);
    box-shadow:0 0 0 4px rgba(199,165,74,.16);
  }
  .hero-form-wrap .check .c-text{color:rgba(255,255,255,.74);}
  .hero-form-wrap .check .box{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08);}
  .hero-form-wrap .form-success h4{color:#fff;}
  .hero-form-wrap .form-success p{color:rgba(255,255,255,.72);}
  .hero-form-wrap .form-success .tick{background:rgba(255,255,255,.12); color:var(--gold-soft);}
}
.hf-head{margin-bottom:18px;}
.hf-head .eyebrow{margin-bottom:9px;}
.hf-head h3{font-size:1.3rem; margin-bottom:4px; letter-spacing:-.028em;}
.hf-head .hf-sub{font-size:.87rem; color:var(--ink-faint); margin:0;}
.hero-form .field{margin-bottom:12px;}
.hero-form textarea{min-height:68px;}
/* A 1366x768 laptop is the tight case: copy, badges and a six-row form
   will not fit a 100dvh box at the default rhythm, so the rhythm tightens
   rather than the section scrolling inside itself. */
@media (min-width:1000px) and (max-height:820px){
  .hero{padding-top:clamp(92px, 4vh + 68px, 118px); padding-bottom:34px;}
  .hero h1{font-size:clamp(1.9rem, 1rem + 2.1vw, 2.75rem); margin-bottom:15px;}
  .hero-eyebrow{margin-bottom:15px;}
  .hero .lede{margin-bottom:18px; font-size:.98rem;}
  .hero-cta-row{margin-bottom:18px;}
  .hero-trust{margin-bottom:14px;}
  .hero-badges .badge:nth-child(n+4){display:none;}
  .hero-badges .badge{font-size:.75rem; padding:6px 12px;}
  .hero .btn{padding:12px 22px;}
  .hero-form-wrap{padding:20px 22px 18px;}
  .hf-head{margin-bottom:12px;}
  .hf-head h3{font-size:1.18rem;}
  .hero-form .field{margin-bottom:8px;}
  .hero-form .field label{margin-bottom:5px;}
  .hero-form .field input, .hero-form .dd-btn{padding:10px 14px;}
  .hero-form textarea{min-height:50px;}
  .consent-row{margin:11px 0 10px;}
  .hero-scroll{display:none;}
}

/* The consent wording has to stay readable on the glass panel — including
   once it is ticked, when .check:has(input:checked) would otherwise drop a
   pale mint ground behind white text.

   Scoped to the width where the panel is actually dark glass. Below 1000px
   .hero-form-wrap is a plain white card, so leaving these unscoped painted
   white text and a white checkbox onto white — the consent sentence simply
   vanished on mobile and only the gold links were left floating. Mobile now
   inherits the light-card defaults from the Consent row section below. */
@media (min-width:1000px){
  .hero-form-wrap .check.consent .c-text{color:rgba(255,255,255,.82);}
  .hero-form-wrap .check.consent{border-color:rgba(255,255,255,.2);}
  .hero-form-wrap .check.consent .box{border-color:rgba(255,255,255,.45);}
  .hero-form-wrap .check.consent:has(input:checked){
    background:rgba(199,165,74,.15); border-color:rgba(230,211,160,.55);
  }
  .hero-form-wrap .check.consent:has(input:checked) .c-text{color:#fff;}
  .hero-form-wrap .check.consent:hover{transform:none; background:rgba(255,255,255,.06);}
}

/* ---------- 4.1  Secure payments band ---------- */
.secure-band{
  background:#fff; padding:13px 0;
  border-bottom:1px solid var(--gold-line);
}
.secure-band .container{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 14px; text-align:center;
}
.secure-band .sb-main{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.87rem; font-weight:500; color:var(--green-deep); letter-spacing:-.01em;
}
.secure-band .sb-main .icon{width:16px; height:16px; color:var(--gold);}
.secure-band .sb-sub{display:none; font-size:.78rem; color:var(--ink-faint);}
@media (min-width:760px){ .secure-band .sb-sub{display:inline;} }

/* ---------- 4.2  Badge strip: wrapped row on desktop, marquee on mobile ---------- */
.trust-strip .container{display:block;}
.trust-track{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px 42px;
}
.trust-track .dup{display:none;}
@media (max-width:699px){
  /* Wrapping made three ragged rows on a phone; one seamless row reads
     better and costs nothing but a duplicated, aria-hidden set. */
  .trust-strip .container{padding:0; overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  }
  .trust-track{
    flex-wrap:nowrap; justify-content:flex-start; width:max-content;
    gap:0 34px; padding-right:34px;
    will-change:transform;
    animation:trustMarquee 22s linear infinite;
  }
  .trust-track .dup{display:inline-flex;}
  .trust-track .trust-item{flex:none; white-space:nowrap;}
  .trust-strip:hover .trust-track,
  .trust-strip:focus-within .trust-track{animation-play-state:paused;}
}
@keyframes trustMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- 7  Consent row ---------- */
.consent-row{margin:16px 0 14px;}
.check.consent{align-items:flex-start; padding:11px 13px; background:transparent;}
.check.consent .c-text{font-size:.79rem; line-height:1.55; color:var(--ink-soft);}
.check.consent .c-text a{
  color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px;
}
/* Pale gold reads on the glass panel but is ~1.5:1 on the white mobile
   card, so below 1000px the links keep the green treatment above. */
@media (min-width:1000px){
  .hero-form-wrap .check.consent .c-text a{color:var(--gold-soft);}
}
.consent-err{
  display:none; font-size:.75rem; color:#C0644A; margin:5px 0 0 13px;
}
.consent-row.invalid .consent-err{display:block;}
.consent-row.invalid .check.consent{border-color:#D98A78; background:#FEF7F5;}
.consent-row.invalid .check.consent .box{border-color:#D98A78;}
@media (min-width:1000px){
  .hero-form-wrap .consent-row.invalid .check.consent{background:rgba(217,138,120,.16);}
}

/* ---------- 7  Legal reader modal ----------
   It has to sit above the quote modal, which it can be opened from and
   which shares the same z-index. */
.legal-modal-overlay{z-index:210;}
.legal-modal{max-width:620px;}
.legal-modal h3{padding-right:44px;}
.lm-body{
  max-height:52vh; overflow-y:auto; padding-right:6px; margin-bottom:18px;
  border-top:1px solid var(--line); padding-top:16px;
  scrollbar-width:none;
}
.lm-body::-webkit-scrollbar{width:0; height:0;}
.lm-body .lm-intro{font-size:.92rem; color:var(--ink); margin-bottom:14px; line-height:1.7;}
.lm-body h4{
  display:flex; align-items:center; gap:10px;
  font-size:.98rem; color:var(--green-deep); margin:20px 0 8px;
}
.lm-body h4 .lg-num{width:25px; height:25px; font-size:.76rem; border-radius:8px;}
.lm-body p{font-size:.87rem; line-height:1.7; color:var(--ink-soft); margin-bottom:9px;}
.lm-body a{color:var(--green); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.lm-foot{display:flex; flex-wrap:wrap; gap:9px;}
.lm-foot .btn{flex:1 1 auto;}


/* ============================================================
   ADDED 2026-09 — PHASE 9 POLISH
   ============================================================ */

/* ---------- 9.1  Page transitions ---------- */
@keyframes viewIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}
}
.view.active{animation:viewIn .5s var(--ease-out) both;}
body.route-out .view.active{
  opacity:0; transform:translateY(-6px);
  transition:opacity .15s var(--ease), transform .15s var(--ease);
  animation:none;
}

/* ---------- 9.2  One heading treatment, applied everywhere ----------
   Section heads previously each improvised their own entrance. */
.section-head[data-reveal]{
  transform:translateY(20px); filter:blur(7px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);
}
.section-head[data-reveal].in{transform:none; filter:none;}

/* ---------- 9.3  Hero parallax ---------- */
@keyframes heroBg{to{opacity:1; transform:scale(1) translateY(var(--py, 0));}}
.hero-bg{transform:scale(1.06); --py:0px;}

/* ---------- 9.4  One button hover system ----------
   2px lift, shadow bloom, icon nudge — previously each variant differed. */
.btn{transition:border-color .35s var(--ease), box-shadow .35s var(--ease),
                background-color .35s var(--ease), color .35s var(--ease),
                transform .3s var(--ease);}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-card);}
.btn:active{transform:translateY(0);}
.btn .icon{transition:transform .3s var(--ease);}
.btn:hover .icon{transform:translateX(2px);}
.btn-block:hover .icon{transform:none;}

/* ---------- 9.5  Two card-lift tokens instead of five ---------- */
:root{--lift-card:-5px; --lift-feature:-7px;}
.icon-card:hover,
.ab-why-item:hover,
.cred-item:hover{transform:translateY(var(--lift-card));}
.pkg-card:hover,
.hotel-card:hover,
.blog-card:hover,
.testi-card:hover{transform:translateY(var(--lift-feature)); box-shadow:var(--shadow-lift);}

/* ---------- 9.6  Visible focus everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}
.site-header:not(.scrolled) a:focus-visible,
.site-header:not(.scrolled) button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible{outline-color:var(--gold-soft);}

/* ---------- 9.7  Below-fold sections stop costing layout ----------
   Deliberately NOT applied to .view .section.flow: content-visibility
   brings paint containment with it, which clips any child that draws
   outside the section — and .ct-methods is designed to lift up over the
   hero edge above it. */
.cred-band,
.final-cta{content-visibility:auto; contain-intrinsic-size:auto 600px;}

/* ---------- 9.7b  Reveal transforms must not scroll the page ----------
   [data-reveal="left"|"right"] park an element 26px off to one side until
   it reveals. On a phone a full-width card doing that pushes 6px past the
   viewport and the whole page gains a horizontal scrollbar. Below 760px
   the sideways variants fall back to the default rise, which reads the
   same at that width and costs nothing. */
@media (max-width:759px){
  [data-reveal="left"],
  [data-reveal="right"]{transform:translateY(22px);}
}

/* ---------- 9.8  Reduced motion covers everything added above ---------- */
@media (prefers-reduced-motion: reduce){
  .trust-track{animation:none !important; width:auto; flex-wrap:wrap; justify-content:center;}
  .trust-track .dup{display:none !important;}
  .trust-strip .container{mask-image:none; -webkit-mask-image:none; overflow:visible;}
  .hero-form-wrap, .rv-bar i{opacity:1 !important; transform:none !important; animation:none !important;}
  .rv-bar i{transform:scaleX(1) !important;}
  .fab.whatsapp::after{animation:none; opacity:0;}
  .section-head[data-reveal]{filter:none !important;}
  body.route-out .view.active{opacity:1; transform:none;}
  .hero-bg{--py:0px !important;}
  .btn:hover, .pkg-card:hover, .hotel-card:hover, .blog-card:hover,
  .testi-card:hover, .icon-card:hover, .ab-why-item:hover{transform:none;}
}


/* ============================================================
   ADDED 2026-09 — FORM DELIVERY STATES
   ============================================================ */

/* The honeypot must be unreachable for people but present for bots, so it
   is hidden by position rather than display:none. */
.botcheck{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

.btn.is-loading{position:relative; color:transparent !important; pointer-events:none;}
.btn.is-loading .icon{opacity:0;}
/* ::before, not ::after — .btn::after is already the hover shimmer, and
   its inset:0 and gradient would swallow the spinner. */
.btn.is-loading::after{opacity:0 !important; animation:none !important;}
.btn.is-loading::before{
  content:""; position:absolute; top:50%; left:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2px solid currentColor; border-top-color:transparent;
  color:var(--green-deep); z-index:2;
  animation:btnSpin .7s linear infinite;
}
.btn-whatsapp.is-loading::before,
.btn-call.is-loading::before{color:#fff;}
@keyframes btnSpin{to{transform:rotate(360deg);}}

.form-error{
  display:none; margin:0 0 13px;
  padding:12px 15px; border-radius:var(--r-sm);
  background:#FEF7F5; border:1px solid #E7BFB3;
  font-size:.82rem; line-height:1.6; color:#9A4B33;
}
.form-error.show{display:block; animation:floatUp .35s var(--ease-out);}
.form-error a{color:#8A3F28; font-weight:600; text-decoration:underline; text-underline-offset:2px;}
/* Same story as the consent row: pale pink text and a white link are for
   the dark glass panel only. Unscoped they made the hero form's error
   banner unreadable on the white mobile card. */
@media (min-width:1000px){
  .hero-form-wrap .form-error{
    background:rgba(217,138,120,.16); border-color:rgba(231,191,179,.5); color:#F6D9D0;
  }
  .hero-form-wrap .form-error a{color:#fff;}
}

@media (prefers-reduced-motion: reduce){
  .btn.is-loading::before{animation-duration:1.4s !important; animation-iteration-count:infinite !important;}
  .form-error.show{animation:none;}
}

/* ============================================================
   NAVBAR FALLBACK — mirrors the Tailwind classes on .header-inner
   so the header still lays out if the Tailwind CDN never loads.
   ============================================================ */
.header-inner{
  display:flex; align-items:center; width:100%;
  max-width:1340px; margin:0 auto; padding:16px var(--gutter);
}
.nav-side{display:none; align-items:center; gap:24px;}
.nav-right-wrap{display:flex; flex:1 1 0%; align-items:center; justify-content:flex-end; gap:24px;}
.brand{display:flex; flex:none; align-items:center;}
@media (min-width:768px){ .btn-enquire{display:inline-flex; align-items:center; gap:8px; flex-shrink:0;} }
@media (min-width:1080px){
  .nav-side{display:flex;}
  .nav-left{flex:1 1 0%; justify-content:flex-end;}
  .nav-right-wrap{justify-content:flex-start;}
  .brand{margin-left:32px; margin-right:32px;}
  .nav-toggle{display:none;}
}
@media (min-width:1280px){
  .nav-side, .nav-right-wrap{gap:32px;}
  .brand{margin-left:48px; margin-right:48px;}
}
}
}

/* ============================================================
   LAYOUT UTILITIES (header + hero form)
   The handful of utility classes the navigation was laid out with.
   `nav` breakpoint (1080px) is where the desktop menu replaces the
   hamburger; md is 768px and xl is 1280px.
   ============================================================ */
.mx-auto{margin-left:auto; margin-right:auto;}
.flex{display:flex;}
.hidden{display:none;}
.w-full{width:100%;}
.max-w-\[1340px\]{max-width:1340px;}
.items-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-end{justify-content:flex-end;}
.justify-start{justify-content:flex-start;}
.px-\[var\(--gutter\)\]{padding-left:var(--gutter); padding-right:var(--gutter);}
.py-4{padding-top:1rem; padding-bottom:1rem;}
.gap-2{gap:.5rem;}
.gap-6{gap:1.5rem;}
.flex-1{flex:1 1 0%;}
.flex-none{flex:none;}
.shrink-0{flex-shrink:0;}
.whitespace-nowrap{white-space:nowrap;}
.mt-6{margin-top:1.5rem;}
@media (min-width:768px){
  .md\:inline-flex{display:inline-flex;}
  .md\:justify-start{justify-content:flex-start;}
  .md\:mt-0{margin-top:0;}
}
@media (min-width:1080px){
  .nav\:flex{display:flex;}
  .nav\:hidden{display:none;}
  .nav\:justify-start{justify-content:flex-start;}
  .nav\:mx-8{margin-left:2rem; margin-right:2rem;}
}
@media (min-width:1280px){
  .xl\:gap-8{gap:2rem;}
  .xl\:mx-12{margin-left:3rem; margin-right:3rem;}
}

/* ============================================================
   SERVER-RENDERED PAGES
   Every page is its own document now, so the view container is
   always visible and the entrance animation runs on load.
   ============================================================ */
.view{display:block; animation:viewIn .6s var(--ease-out) both;}

/* About page: the photograph fills the full height of the copy beside
   it instead of stopping at 520px and leaving the column half empty. */
@media (min-width:940px){
  .ab-split{align-items:stretch;}
  .ab-art{align-self:stretch; min-height:560px;}
  .ab-art img{position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover;}
}
@media (max-width:939px){
  .ab-art img{max-height:460px;}
}

/* Blog featured images may come from the media library or a URL. */
.bc-media .bg,.pd-bg{background-size:cover; background-position:center;}

/* Photos are real <img> tags (alt text, lazy-loading, srcset) that fill the
   same box the CSS background used to, so every hover/zoom/overlay rule on
   the wrapper still applies and nothing changes visually. */
.mps-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  margin:0; padding:0; border:0; border-radius:0; pointer-events:none;
}
.pd-hotel .ph-img{position:relative; overflow:hidden;}

/* Comments (WordPress core) */
.mps-comments{margin-top:56px; padding-top:40px; border-top:1px solid var(--line);}
.mps-comments h2{font-size:1.4rem; margin-bottom:22px;}
.mps-comments .comment-list{list-style:none; padding:0; margin:0 0 30px;}
.mps-comments .comment{padding:18px 0; border-bottom:1px solid var(--line);}
.mps-comments .comment-author{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--green-deep);}
.mps-comments .comment-author img{border-radius:50%;}
.mps-comments .comment-metadata{font-size:.8rem; color:var(--ink-faint); margin:4px 0 10px;}
.mps-comments .comment-content p{color:var(--ink-soft);}
.mps-comments .reply a{font-size:.82rem; font-weight:600; color:var(--green);}
.mps-comments .comment-form label{display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--green-deep);}
.mps-comments .comment-form input,.mps-comments .comment-form textarea{width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm); font:inherit; margin-bottom:14px;}
.mps-comments .comment-form .btn{cursor:pointer; border:0;}

/* Search results and archive fallbacks reuse the blog card grid. */
.mps-search-form{display:flex; gap:10px; max-width:520px; margin:26px auto 0;}
.mps-search-form input{flex:1; padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r-sm); font:inherit;}
.mps-search-form .btn{cursor:pointer; border:0;}
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important;}
.alignwide{max-width:1240px;}
.alignfull{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw);}
.wp-block-image img,.post-body img{max-width:100%; height:auto;}