/* ══════════════════════════════════════════════════════════════
   SHARED STYLESHEET for standalone SEO/Ads content pages
   (whale-shark-snorkeling.html, manta-ray-snorkeling.html,
   south-ari-atoll-guide.html, holiday-packages.html)

   Curated subset of vilu-website.html's design system — same palette,
   type scale, nav/footer, and content-block styling established in the
   Wave 2 #guides section — so these pages read as genuinely the same
   site, without shipping the homepage's full booking/calendar/FAQ CSS
   that these lighter pages don't use.
   ══════════════════════════════════════════════════════════════ */

/* ── SELF-HOSTED WEBFONTS (Phase 11B-P3) ──
   Cormorant Garamond + DM Sans, mirrored from Google Fonts (v21/v17) at the
   exact weights/styles/subsets already in use (latin, latin-ext, cyrillic --
   the only scripts these two families actually cover; Arabic/CJK visitors
   already fell back to the OS default font before this change, since neither
   family ships Arabic or CJK glyphs -- unchanged by self-hosting).
   SIL Open Font License 1.1 -- see fonts/webfonts/OFL-*.txt. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-300-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-300-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-300-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-400-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-300-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/webfonts/cormorant-garamond-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/webfonts/dm-sans-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/webfonts/dm-sans-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/webfonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/webfonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/webfonts/dm-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/webfonts/dm-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --navy: #0a1628;
  --navy2: #0d2545;
  --teal: #0e7490;
  --teal-light: #22d3ee;
  --gold: #22d3ee;
  --gold-light: #67e8f9;
  --sand: #0d2545;
  --sand2: rgba(255,255,255,.14);
  --white: #ffffff;
  --text: #eaf6ff;
  --muted: #8fb4c9;
  --ocean: #22d3ee;
  --abyss: #050b14;
  --surface-glow: #dbeef4;
  --glow: rgba(34,211,238,.4);
  --card: #0f2d52;
  --card-border: rgba(34,211,238,.15);
  --rose: #d88fa8;
  --rose-light: #f0c3d4;
  --warn: #f0a94e;
  --warn-border: rgba(240,169,78,.3);
  --warn-bg: rgba(240,169,78,.08);
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-display: 48px;
  --font-size-display-lg: 64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{font-family:'DM Sans',sans-serif;color:var(--white);overflow-x:hidden;position:relative;
  background:linear-gradient(180deg,var(--surface-glow) 0%,#6fb0c2 4%,var(--teal) 9%,var(--navy2) 32%,var(--navy) 60%,var(--abyss) 100%)}
a{color:inherit}
.section-inner{max-width:1200px;margin:0 auto;padding:0 5vw;position:relative;z-index:1}

/* ── NAV — GLOBAL SHELL (Phase 10): unified across every page, including
   the homepage. Transparent-over-hero on load, solid once `.scrolled` is
   toggled by nav-shell.js's scroll listener at scrollY>60. ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;flex-direction:column;transition:background .4s,box-shadow .4s,border-color .4s;background:transparent}
nav.scrolled{background:rgba(4,20,30,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(34,211,238,.22);box-shadow:0 8px 30px rgba(0,10,20,.35)}
.nav-row-top{display:flex;align-items:center;gap:28px;padding:16px 5vw}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.nav-logo img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 14px var(--glow)}
.nav-logo-text{display:flex;flex-direction:column}
.nav-logo-name{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-xl);font-weight:600;letter-spacing:.04em;color:var(--white);line-height:1}
.nav-logo-sub{font-size:var(--font-size-xs);font-weight:300;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;margin-top:2px}

/* Top-level links (Holiday Packages + 4 dropdown triggers) */
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;flex:1;justify-content:center}
.nav-links>li{position:relative;display:flex;align-items:center}
.nav-links>li>a,.nav-drop-trigger{font-family:'DM Sans',sans-serif;font-size:var(--font-size-sm);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 2px;transition:color .25s}
.nav-links>li>a:hover,.nav-drop-trigger:hover{color:var(--gold-light);text-shadow:0 0 12px var(--glow)}
.nav-drop-trigger i{font-size:11px;transition:transform .25s}
.nav-drop.open .nav-drop-trigger i{transform:rotate(180deg)}
.nav-active{color:var(--white) !important;position:relative}
.nav-active::after{content:'';position:absolute;left:2px;right:2px;bottom:-8px;height:1.5px;background:var(--teal-light)}

/* Dropdown panel — restrained compact card, not a browser-default box */
.nav-drop-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:240px;background:var(--card);border:1px solid var(--card-border);border-radius:2px;box-shadow:0 20px 50px rgba(0,10,20,.5);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out}
.nav-drop.open .nav-drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop-panel a{font-family:'DM Sans',sans-serif;font-size:var(--font-size-base);font-weight:400;color:rgba(255,255,255,.75);text-decoration:none;padding:12px 16px;border-radius:2px;transition:background .2s,color .2s}
.nav-drop-panel a:hover{background:rgba(34,211,238,.06);color:var(--white)}

/* Right cluster: language, primary CTA, secondary CTA */
.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.lang-switcher{position:relative;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px 10px}
.lang-switcher i{font-size:15px;color:var(--teal-light);pointer-events:none}
.lang-switcher select{background:none;border:none;appearance:none;font-family:'DM Sans',sans-serif;font-size:var(--font-size-xs);font-weight:500;letter-spacing:.04em;color:var(--white);cursor:pointer;padding-right:14px}
.lang-switcher select option{color:#000}
.lang-switcher::after{content:'';position:absolute;right:9px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--teal-light);border-bottom:1.5px solid var(--teal-light);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.btn-plan-holiday{background:linear-gradient(135deg,var(--gold),var(--gold-light) 55%,var(--gold));background-size:220% 100%;color:var(--navy);padding:10px 22px;border:none;border-radius:2px;font-family:'DM Sans',sans-serif;font-size:var(--font-size-sm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-plan-holiday:hover{background-position:100% 0;box-shadow:0 6px 20px rgba(34,211,238,.4)}
.nav-check-availability{font-family:'DM Sans',sans-serif;font-size:var(--font-size-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;white-space:nowrap;transition:color .2s}
.nav-check-availability:hover{color:var(--white)}
@media(max-width:1310px){.nav-check-availability{display:none}}

/* Hamburger — real button, keyboard/AT accessible */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px;background:none;border:none;flex-shrink:0}
.nav-hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:all .3s}

/* Focus-visible — applied sitewide to every interactive nav element */
.nav-logo:focus-visible,.nav-links>li>a:focus-visible,.nav-drop-trigger:focus-visible,.nav-drop-panel a:focus-visible,.lang-switcher select:focus-visible,.btn-plan-holiday:focus-visible,.nav-check-availability:focus-visible,.nav-hamburger:focus-visible{outline:2px solid var(--teal-light);outline-offset:3px;border-radius:2px}
/* Phase 14: keyboard-only "skip to main content" link -- off-screen until
   focused, matching the site's existing focus-visible convention rather
   than inventing a new visual treatment. */
.skip-link{position:absolute;top:-999px;inset-inline-start:8px;z-index:10000;background:var(--navy);color:var(--white);padding:10px 18px;border-radius:4px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus{top:8px;outline:2px solid var(--teal-light);outline-offset:2px}
/* Phase 14: standard visually-hidden-but-accessible utility -- used to give
   assistive tech extra label text (e.g. a table's blank corner header)
   with zero visual change to the existing design. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Phase 14: #main-content carries tabindex="-1" purely so the skip-link's
   fragment jump can programmatically move focus there (browsers otherwise
   leave focus on the skip-link itself, so the very next Tab press re-enters
   the nav it was meant to bypass). It's never part of normal tab order, so
   it needs no visible focus ring of its own -- suppressing the default
   outline avoids an ugly box around the entire page content area. */
#main-content:focus{outline:none}

/* RTL — dropdown panel position/text + lang-switcher (moved from a
   homepage-only rule to the shared sheet so standalone pages match) */
[dir="rtl"] .nav-drop-panel a{text-align:right}
[dir="rtl"] .lang-switcher select{padding-right:0;padding-left:14px}
[dir="rtl"] .lang-switcher::after{right:auto;left:9px}

/* ── RESPONSIVE CROSSOVER ── */
/* Determined empirically by measuring real overflow (.nav-right's rendered
   right edge vs the nav row's right edge) at 1440/1366/1280/1180/1024px and
   the intermediate widths between them — a naive scrollWidth check is
   misleading here because .nav is position:fixed, so real horizontal
   overflow doesn't register on document.documentElement and never produces
   a page scrollbar; it just clips/overlaps at the viewport edge instead.
   Two real crossovers were found: the full nav (5 links + dropdowns + lang
   switcher + Plan Your Holiday + Check Availability) stops fitting below
   ~1305px, so Check Availability (the lower-priority secondary CTA) is
   dropped first, at 1310px. The reduced nav (without Check Availability)
   itself stops fitting below ~1160px, so the full mobile-drawer crossover
   is set at 1180px, not the smaller 1024px placeholder used during
   implementation — that placeholder left real overflow in the 1025-1159px
   range (common laptop viewport widths) where "Plan Your Holiday" visibly
   clipped past the header's right edge. */
@media(max-width:1180px){
  .nav-links,.nav-right>.lang-switcher:not(.lang-switcher-mobile),.nav-right>.btn-plan-holiday{display:none}
  .nav-mobile-right{display:flex}
  .nav-hamburger{display:flex}
}
@media(min-width:1025px){
  .nav-mobile-right{display:none}
}
.nav-mobile-right{align-items:center;gap:14px;margin-left:auto}

/* ── MOBILE DRAWER — full-screen cinematic overlay ── */
.mobile-menu{display:none;position:fixed;inset:0;z-index:1100;background:rgba(6,16,28,.98);backdrop-filter:blur(20px);flex-direction:column;overflow-y:auto}
.mobile-menu.open{display:flex}
.mm-header{display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;flex-shrink:0}
.mm-header .nav-logo img{width:32px;height:32px}
.mm-header .nav-logo-name{font-size:var(--font-size-lg)}
.mm-close{background:none;border:none;color:var(--white);font-size:28px;line-height:1;cursor:pointer;padding:8px;flex-shrink:0}
.mm-body{padding:8px 5vw 32px;display:flex;flex-direction:column;gap:4px;flex:1}
.mm-packages{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(26px,6vw,32px);font-weight:500;color:var(--white);text-decoration:none;background:rgba(34,211,238,.06);border-radius:10px;padding:22px 20px;margin:12px 0 20px}
.mm-group{border-bottom:1px solid rgba(255,255,255,.08)}
.mm-group-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;color:var(--white);font-family:'DM Sans',sans-serif;font-size:var(--font-size-md);font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:18px 4px;cursor:pointer}
.mm-group-trigger i{font-size:14px;color:var(--teal-light);transition:transform .25s}
.mm-group.open .mm-group-trigger i{transform:rotate(180deg)}
.mm-group-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mm-group.open .mm-group-panel{max-height:400px}
.mm-group-panel a{display:block;padding:12px 4px 12px 16px;font-size:var(--font-size-base);color:rgba(255,255,255,.7);text-decoration:none}
.mm-group-panel a:hover{color:var(--gold-light)}
.mm-ctas{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.mm-ctas .btn-plan-holiday{text-align:center;padding:16px;font-size:var(--font-size-base)}
.mm-ctas .mm-check-availability{text-align:center;padding:14px;border:1px solid rgba(255,255,255,.25);border-radius:2px;color:var(--white);text-decoration:none;font-family:'DM Sans',sans-serif;font-size:var(--font-size-sm);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mm-lang{margin-top:24px}
.mm-lang .lang-switcher{width:100%;justify-content:center;padding:12px}
.mm-contact{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px;font-size:var(--font-size-sm)}
.mm-contact a{color:rgba(255,255,255,.6);text-decoration:none}
.mm-contact-social{display:flex;gap:12px;margin-top:4px}
.mm-contact-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:rgba(255,255,255,.6);font-size:16px}
[dir="rtl"] .mm-group-panel a{padding:12px 16px 12px 4px}
[dir="rtl"] .mm-contact-social{flex-direction:row-reverse}
.mm-close:focus-visible,.mm-group-trigger:focus-visible,.mm-group-panel a:focus-visible,.mm-packages:focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}

/* ── PAGE HEADER (static hero, no slideshow — content pages, not the homepage) ── */
.page-header{position:relative;padding:180px 5vw 90px;overflow:hidden;background-size:cover;background-position:center}
.page-header::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,20,.55) 0%,rgba(5,11,20,.75) 60%,var(--navy) 100%)}
.page-header-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center}
.breadcrumbs{font-size:var(--font-size-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.breadcrumbs a{color:var(--gold-light);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.page-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,6vw,72px);font-weight:300;line-height:1.05;letter-spacing:-.01em;margin-bottom:20px;text-shadow:0 0 40px rgba(34,211,238,.3)}
.page-h1 em{font-style:italic;color:var(--gold-light)}
.page-sub{font-size:var(--font-size-lg);color:rgba(255,255,255,.8);max-width:640px;margin:0 auto;line-height:1.6}

/* ── SECTION TYPOGRAPHY (matches homepage/.guides) ── */
.section-tag{font-size:var(--font-size-xs);font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4.2vw,48px);font-weight:300;line-height:1.15;letter-spacing:-.01em;color:var(--white)}
.section-title em{font-style:italic;color:var(--gold-light)}
.page-sub-text{font-size:var(--font-size-lg);color:var(--muted);max-width:70ch;line-height:1.65;margin-top:16px}
section{padding:80px 0;position:relative}
.content-block{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.content-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.content-block h2.section-title{margin-bottom:14px}
.content-block h3{font-size:var(--font-size-lg);font-weight:600;color:var(--gold-light);margin:22px 0 8px}
.content-block p{font-size:var(--font-size-base);color:var(--muted);line-height:1.75;max-width:70ch}
.content-block p:first-of-type{margin-top:0}
.content-block a{color:var(--gold-light)}
.content-list{margin:10px 0 0;padding-left:20px;max-width:70ch}
.content-list li{font-size:var(--font-size-base);color:var(--muted);line-height:1.75;margin-bottom:6px}

/* ── CARDS (islands, related-links, quick-facts) ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:32px}
.info-card{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:24px;transition:transform .3s ease,box-shadow .3s ease}
.info-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,4,10,.3)}
.info-card i{font-size:24px;color:var(--gold-light);margin-bottom:12px;display:block}
.info-card h2,.info-card h3,.info-card h4{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-xl);font-weight:600;color:var(--white);margin-bottom:8px}
.info-card p{font-size:var(--font-size-sm);color:var(--muted);line-height:1.6}

/* ── TABLE OF CONTENTS (guide pages with many sections, e.g. maamigili-guide.html) ── */
/* position:static overrides a pre-existing, already-live site-wide defect:
   the bare `nav{position:fixed;...}` element selector (meant only for the
   real #nav site header) also matches this TOC's own <nav> element, since
   .toc-block never declared its own `position`. Phase 12D-A's new sticky
   TOC rail surfaced this severely (the TOC floated fixed over the hero);
   this fix is corrective for every guide page that already ships this
   <nav class="toc-block">, not just the 4 in this stage's scope, and has
   no effect on the homepage/package page (neither has a .toc-block). */
.toc-block{position:static;background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:20px 24px;margin-top:24px}
.toc-block .section-title{font-size:var(--font-size-xl);margin-bottom:10px}
.toc-block ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 20px;counter-reset:toc}
.toc-block ol li{counter-increment:toc;font-size:var(--font-size-sm)}
.toc-block ol li::before{content:counter(toc)'. ';color:var(--gold-light)}
.toc-block a{color:var(--muted);text-decoration:none;transition:color .2s}
.toc-block a:hover{color:var(--gold-light);text-decoration:underline}

/* ── TIP BOX (advisory content — same trusted-card language as .info-card, full-width banner) ── */
.tip-box{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--card-border);border-inline-start:3px solid var(--gold-light);border-radius:8px;padding:18px 20px;margin:20px 0}
.tip-box i{font-size:20px;color:var(--gold-light);flex-shrink:0;margin-top:2px}
.tip-box p{font-size:var(--font-size-sm);color:var(--muted);line-height:1.7;margin:0;max-width:none}
.tip-box p+p{margin-top:10px}
.tip-box strong{color:var(--white)}

/* ── WARNING BOX (legal/cultural compliance — alcohol, dress code, visa — deliberately
   more visually serious than a tip box, using the new --warn amber accent) ── */
.warning-box{display:flex;gap:14px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-border);border-inline-start:3px solid var(--warn);border-radius:8px;padding:18px 20px;margin:20px 0}
.warning-box i{font-size:20px;color:var(--warn);flex-shrink:0;margin-top:2px}
.warning-box p{font-size:var(--font-size-sm);color:var(--muted);line-height:1.7;margin:0;max-width:none}
.warning-box p+p{margin-top:10px}
.warning-box strong{color:var(--white)}

/* ── IN-ARTICLE CONTENT IMAGES (guide pages embedding photos within prose) ── */
.content-img{width:100%;max-width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:10px;border:1px solid var(--card-border);display:block;margin:20px 0}

/* ── CONTENT TABLES (comparison/reference tables within guide-page prose) ── */
.table-wrap{margin:20px 0}
.table-wrap table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--card-border);border-radius:10px;overflow:hidden;font-size:var(--font-size-sm)}
.table-wrap th,.table-wrap td{padding:12px 16px;text-align:left;color:var(--muted);border-bottom:1px solid var(--card-border);line-height:1.5}
.table-wrap th{color:var(--gold-light);font-weight:600;background:rgba(34,211,238,.06);white-space:nowrap}
.table-wrap tr:last-child td{border-bottom:none}
[dir="rtl"] .table-wrap th,[dir="rtl"] .table-wrap td{text-align:right}

/* ── FAQ (native <details>/<summary> — crawlable, no JS, matches FAQPage schema) ── */
.faq-block{margin-top:32px}
.faq-block details{background:var(--card);border:1px solid var(--card-border);border-radius:10px;margin-bottom:10px;overflow:hidden;transition:border-color .25s}
.faq-block details:hover,.faq-block details[open]{border-color:rgba(34,211,238,.35)}
.faq-block summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:'DM Sans',sans-serif;font-size:var(--font-size-base);font-weight:500;color:var(--white)}
.faq-block summary::-webkit-details-marker{display:none}
.faq-block summary i{color:var(--teal-light);transition:transform .25s;flex-shrink:0;font-size:16px}
.faq-block details[open] summary i{transform:rotate(180deg)}
.faq-block .faq-a{padding:0 20px 20px;color:var(--muted);font-size:var(--font-size-sm);line-height:1.7}
[dir="rtl"] .faq-block summary{text-align:right}

/* ── CTA BAND (funnels back to real homepage booking flow) ── */
.cta-band{background:linear-gradient(135deg,var(--navy2),var(--navy));border:1px solid rgba(34,211,238,.2);border-radius:14px;padding:48px 5vw;text-align:center;margin-top:20px}
.cta-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.4vw,38px);font-weight:300;margin-bottom:14px}
.cta-band p{color:var(--muted);font-size:var(--font-size-base);max-width:60ch;margin:0 auto 28px;line-height:1.6}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light) 55%,var(--gold));background-size:220% 100%;color:var(--navy);padding:16px 36px;border:none;border-radius:2px;font-family:'DM Sans',sans-serif;font-size:var(--font-size-base);font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .35s;text-decoration:none;display:inline-block}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 10px 30px rgba(34,211,238,.4)}
.btn-outline{background:rgba(255,255,255,.03);backdrop-filter:blur(6px);color:var(--white);padding:16px 36px;border:1px solid rgba(255,255,255,.4);border-radius:2px;font-family:'DM Sans',sans-serif;font-size:var(--font-size-base);font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block}
.btn-outline:hover{border-color:var(--ocean);color:var(--ocean);box-shadow:0 0 24px var(--glow)}

/* ── RELATED PAGES STRIP ── */
.related-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:32px}
.related-card{background:var(--card);border:1px solid var(--card-border);border-radius:10px;overflow:hidden;text-decoration:none;display:block;transition:transform .3s ease,box-shadow .3s ease}
.related-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,4,10,.3)}
.related-card-img{aspect-ratio:16/10;width:100%;object-fit:cover;display:block}
.related-card-body{padding:18px 20px}
.related-card-tag{font-size:var(--font-size-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.related-card h3,.related-card h4{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-lg);font-weight:600;color:var(--white);margin:0}

/* ══ Phase 12D-A: Guide / Destination Editorial System ══
   Page-scoped to body[data-page-type="guide"] so nothing here can affect
   the homepage or the frozen Holiday Packages page. Builds on the
   existing, already-shared component vocabulary (.toc-block/.content-
   block/.card-grid/.info-card/.tip-box/.warning-box/.content-img/
   .related-strip/.cta-band) rather than replacing it -- every guide's
   own headings/paragraphs/links/FAQ/schema stay exactly as authored;
   this only adds layout, motion and a few new component classes. */

/* Hero motion: reuses the exact pcHeroSettle/pcFadeUp keyframes proven on
   the package page (Phase 12C-C) -- ::after carries the scale-settle
   since ::before is already the shared darkening gradient overlay, so
   paint order stays base-bg -> ::after (photo) -> ::before (gradient) ->
   .page-header-inner (text). No new hero markup: the breadcrumb/H1/
   subtitle already on every guide page get the stagger directly. */
body[data-page-type="guide"] .page-header::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:inherit;background-position:center;background-size:cover;
  transform-origin:center;
}
@media (prefers-reduced-motion:no-preference){
  body[data-page-type="guide"] .page-header::after{animation:pcHeroSettle 1100ms cubic-bezier(.16,1,.3,1) both}
  body[data-page-type="guide"] .breadcrumbs{animation:pcFadeUp 450ms ease both;animation-delay:.1s}
  body[data-page-type="guide"] .page-h1{animation:pcFadeUp 450ms ease both;animation-delay:.22s}
  body[data-page-type="guide"] .page-sub{animation:pcFadeUp 450ms ease both;animation-delay:.34s}
}

/* Two-zone desktop composition: a quiet sticky TOC rail beside the
   reading column. Below 1100px this collapses to a single column with
   the TOC (now a mobile "On this page" disclosure) stacked above the
   article, in the same order the inline TOC already appeared in. */
body[data-page-type="guide"] .guide-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
@media(min-width:1100px){
  body[data-page-type="guide"] .guide-layout{grid-template-columns:236px minmax(0,1fr);gap:48px}
  body[data-page-type="guide"] .guide-toc-rail{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
  body[data-page-type="guide"] .guide-toc-rail .toc-block{padding:18px 20px}
  body[data-page-type="guide"] .guide-toc-rail .toc-block ol{grid-template-columns:1fr}
  body[data-page-type="guide"] .guide-toc-rail .section-title{font-size:var(--font-size-lg)}
}
/* Mobile "On this page" disclosure: a plain button appended into the TOC
   heading by nav-shell.js (initGuideToc) -- content-visible-by-default,
   since without JS the <ol> simply has no collapse mechanism at all and
   stays fully shown. */
.toc-toggle{display:none}
@media(max-width:1099px){
  .toc-block .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .toc-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--gold-light);cursor:pointer;padding:4px;font-size:18px;transition:transform .25s}
  .toc-collapsed ol{display:none}
  .toc-toggle[aria-expanded="false"] i{transform:rotate(-90deg)}
}
/* Active-section highlight (decorative only, added by IntersectionObserver
   when available -- see nav-shell.js). */
.toc-block a.toc-active{color:var(--gold-light);text-decoration:underline}

/* Cinematic image breakout: ONE strong image moment per guide, wider than
   the reading column, with a restrained clip-path reveal on scroll-entry
   (mirrors the Featured Journeys treatment on the package page). Applied
   alongside the existing .content-img class, not replacing it. */
body[data-page-type="guide"] .guide-breakout{max-height:520px}
@media(min-width:1100px){
  body[data-page-type="guide"] .guide-breakout{width:calc(100% + 160px);margin-inline:-80px;max-width:none}
}
body[data-page-type="guide"] .guide-breakout-caption{font-size:var(--font-size-xs);color:var(--muted);text-align:center;margin-top:-12px;margin-bottom:20px;font-style:italic}
@media (prefers-reduced-motion:no-preference){
  body[data-page-type="guide"] .guide-breakout.reveal{clip-path:inset(0 0 8% 0);transition:clip-path 1100ms cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}
  body[data-page-type="guide"] .guide-breakout.reveal.visible{clip-path:inset(0 0 0 0)}
}

/* Editorial "commercial bridge" -- upgrades the existing (previously
   unstyled, plain-paragraph) .exp-links class used site-wide for the
   inline "Read our X guide ->" / "See our packages ->" links, so a bridge
   reads as a distinct, quiet invitation rather than another paragraph.
   Zero markup change: every guide already wraps these links in .exp-links. */
.exp-links{display:block;max-width:none;margin:24px 0;padding:14px 18px;background:var(--card);border:1px solid var(--card-border);border-inline-start:3px solid var(--gold-light);border-radius:8px;font-size:var(--font-size-sm)}
.exp-links a{font-weight:600}

/* Small category eyebrow for existing tip-box/warning-box/info-card
   instances (GOOD TO KNOW / WILDLIFE NOTE / LOCAL TIP / PLANNING NOTE) --
   labels facts already present in the guide's own copy, invents nothing. */
.box-label{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:6px}
.warning-box .box-label{color:var(--warn)}

/* Existing enumerable guide content (e.g. price tiers, checklists) that was
   previously a bare, unstyled <ul> -- visual upgrade only, no text changed. */
.guide-list{list-style:none;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.guide-list li{background:var(--card);border:1px solid var(--card-border);border-inline-start:3px solid var(--gold-light);border-radius:8px;padding:14px 18px;font-size:var(--font-size-sm);color:var(--muted);line-height:1.6}

@media(max-width:900px){
  body[data-page-type="guide"] .guide-breakout{margin-inline:0}
}

/* ── FOOTER — GLOBAL SHELL (Phase 10): brand + 4 link groups
   (Explore / Stay / South Ari Guides / Plan), identical on every page ── */
footer{padding:60px 5vw 32px;position:relative;overflow:hidden}
.footer-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:1024px){.footer-top{grid-template-columns:1.6fr 1fr 1fr;gap:32px}}
.footer-brand-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-brand-logo img{width:48px;height:48px;border-radius:50%;border:2px solid rgba(34,211,238,.4);object-fit:cover}
.footer-brand-name{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-2xl);font-weight:400;color:var(--white)}
.footer-brand-sub{font-size:var(--font-size-xs);color:var(--gold);letter-spacing:.2em;text-transform:uppercase}
.footer-desc{font-size:var(--font-size-base);color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:20px}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:rgba(255,255,255,.6);font-size:17px;transition:all .25s;text-decoration:none}
.footer-social a:hover{color:var(--navy);background:var(--gold);border-color:var(--gold)}
.footer-col h3,.footer-col h4{font-size:var(--font-size-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:var(--font-size-base);color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.footer-col ul a:hover{color:var(--ocean)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:var(--font-size-sm);color:rgba(255,255,255,.3)}

/* ── FLOATING WHATSAPP ── */
.floating-whatsapp{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--teal);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 24px rgba(0,4,10,.4);z-index:900;transition:transform .25s,background .25s;text-decoration:none}
.floating-whatsapp:hover{background:var(--teal-light);color:var(--navy);transform:scale(1.08)}
@media(max-width:600px){.floating-whatsapp{bottom:16px;right:16px;width:50px;height:50px;font-size:22px}}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(40px) scale(.97);filter:blur(6px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0ms !important;scroll-behavior:auto !important}
}

/* ── PACKAGE CARDS (Holiday Packages page) ── */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:40px}
.pkg-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 20px 60px rgba(0,4,10,.35);padding:28px;display:flex;flex-direction:column;position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.pkg-card:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(14,116,144,.25)}
.pkg-img{aspect-ratio:16/10;width:calc(100% + 56px);object-fit:cover;display:block;margin:-28px -28px 20px;border-radius:12px 12px 0 0}
.pkg-badge{position:absolute;top:-12px;inset-inline-start:28px;background:var(--gold);color:var(--navy);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:20px;z-index:1}
.pkg-name{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-2xl);font-weight:600;color:var(--white);margin-top:8px}
.pkg-price-row{display:flex;align-items:baseline;gap:8px;margin:10px 0 4px}
.pkg-price{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-display);font-weight:600;color:var(--teal-light,var(--gold-light))}
/* Phase 12C-D contrast audit: .pkg-price (used only on holiday-packages.html)
   measured 4.04:1 in Light against its card background -- below the 4.5:1
   normal-text target (17px/600 isn't reliably "large text" under WCAG's
   bold threshold). Dark already clears 7.48:1, untouched. Scoped exactly
   like the existing :root[data-theme="dark"] .room-price-amount override
   (vilu-website.html) -- a darker shade of the same gold hue, not a color-
   family change, measured at ~5.8:1 against rgb(255,253,249). */
:root[data-theme="light"] .pkg-price{color:#8a5a1a}
.pkg-price-unit{font-size:var(--font-size-xs);color:var(--muted)}
.pkg-pernight{font-size:var(--font-size-xs);color:var(--muted);margin-bottom:14px}
.pkg-desc{font-size:var(--font-size-sm);color:var(--muted);line-height:1.6;margin-bottom:16px}
.pkg-section-label{font-size:var(--font-size-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:12px 0 6px}
.pkg-list{list-style:none;font-size:var(--font-size-sm);color:var(--muted);line-height:1.7}
.pkg-cta{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.pkg-cta a{flex:1;text-align:center;font-size:var(--font-size-xs);padding:12px 14px}
.pkg-cta-trust{margin:10px 0 0;text-align:center;font-size:var(--font-size-xs);color:var(--muted)}
.pkg-cta-alt{display:block;text-align:center;margin-top:10px;font-size:var(--font-size-xs);color:var(--muted);text-decoration:none;transition:color var(--pc-micro,220ms) ease,letter-spacing var(--pc-micro,220ms) ease}
.pkg-cta-alt:hover{color:var(--gold-light);text-decoration:underline;letter-spacing:.008em}

/* ══ Phase 12C-B: Holiday Packages editorial redesign ══
   Page-scoped `.pc-` namespace (holiday-packages.html only) so nothing here
   can unexpectedly restyle any other guide/content page that also loads
   this stylesheet — the old `.pkg-grid`/`.pkg-card`/`.pkg-img`/`.pkg-name`/
   `.pkg-price-row`/`.pkg-pernight`/`.pkg-desc` rules above are left in place
   (now unused dead CSS, not deleted, to avoid any risk of an undiscovered
   reference elsewhere). `.pkg-badge`/`.pkg-price`/`.pkg-price-unit`/
   `.pkg-section-label`/`.pkg-list`/`.pkg-cta`/`.pkg-cta-alt` ARE still
   reused below, deliberately, for their already-proven-theme-safe colors. */

.pc-hero-eyebrow{font-size:var(--font-size-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light)}
.pc-hero-display{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:var(--font-size-2xl);color:var(--white);margin:10px 0 12px}

.pc-verified-line{font-size:var(--font-size-sm);color:var(--gold-light);font-style:italic;margin-top:14px}

/* Featured Journeys: one large flagship + two secondary editorial panels,
   not three equal cards. */
.pc-featured{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:20px;margin-top:32px}
.pc-featured-panel{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;text-decoration:none;box-shadow:0 20px 50px rgba(0,4,10,.3);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.pc-featured-flagship{grid-row:1 / 3}
.pc-featured-img{width:100%;object-fit:cover;display:block;transition:transform var(--pc-interface,450ms) var(--pc-ease,cubic-bezier(.16,1,.3,1))}
/* Featured hover — desktop pointer devices only (item 7): panel lift + tiny
   image zoom + arrow nudge. Touch/no-hover devices get none of this, so
   there is no hover-dependent affordance a touch visitor could miss. */
@media (hover:hover) and (pointer:fine){
  .pc-featured-panel:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(14,116,144,.2)}
  .pc-featured-panel:hover .pc-featured-img{transform:scale(1.03)}
  .pc-featured-panel:hover .pc-arrow{transform:translateX(4px)}
}
.pc-arrow{display:inline-block;transition:transform var(--pc-micro,220ms) var(--pc-ease,ease)}
.pc-featured-secondary .pc-featured-img{aspect-ratio:16/9}
.pc-featured-body{padding:22px;display:flex;flex-direction:column;flex-shrink:0}
.pc-featured-flagship .pc-featured-body{padding:30px}
/* The flagship spans both rows of the two stacked secondary panels, whose
   combined height varies with their own (shorter) copy -- rather than
   stretching the flagship's own text area to match and leaving a dead gap,
   its image grows to absorb any extra height (object-fit:cover crops
   gracefully at any resulting aspect ratio); the body below stays sized to
   its own content. */
.pc-featured-flagship{min-height:0}
.pc-featured-flagship .pc-featured-img{flex:1;min-height:220px;aspect-ratio:auto}
.pc-featured-badge{position:static;display:inline-block;margin-bottom:10px;align-self:flex-start}
.pc-featured-name{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-xl);font-weight:600;color:var(--white)}
.pc-featured-flagship .pc-featured-name{font-size:var(--font-size-3xl)}
.pc-featured-meta{margin:6px 0 10px;font-size:var(--font-size-sm)}
.pc-featured-meta .pkg-price{font-size:var(--font-size-lg)}
.pc-featured-flagship .pc-featured-meta .pkg-price{font-size:var(--font-size-xl)}
.pc-featured-hook{font-size:var(--font-size-sm);color:var(--muted);line-height:1.6;flex:1;margin:0}
.pc-featured-link{margin-top:14px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light)}
.pc-featured-panel:hover .pc-featured-link{text-decoration:underline}

/* Full Collection: compact summary, native <details> for full package
   detail — content stays real/crawlable HTML at all times, collapsed is
   purely a visual/CSS state (no-JS visitors can still open every one). */
.pc-collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-top:32px}
.pc-pkg{background:var(--card);border:1px solid var(--card-border);border-radius:12px;position:relative;overflow:hidden;transition:border-color .25s}
.pc-pkg[open],.pc-pkg:hover{border-color:rgba(34,211,238,.35)}
.pc-pkg-summary{list-style:none;cursor:pointer;display:flex;gap:14px;padding:16px;align-items:center}
.pc-pkg-summary::-webkit-details-marker{display:none}
.pc-pkg-thumb{width:80px;height:80px;object-fit:cover;border-radius:8px;flex-shrink:0}
.pc-pkg-summary-body{flex:1;min-width:0}
.pc-pkg-badge{position:static;display:inline-block;margin-bottom:6px;font-size:10px;padding:3px 10px}
.pc-pkg-name{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-lg);font-weight:600;color:var(--white);margin:0}
.pc-pkg-meta{font-size:var(--font-size-xs);color:var(--muted);margin:3px 0 4px}
.pc-pkg-meta .pkg-price{font-size:var(--font-size-base);font-family:inherit}
.pc-pkg-hook{font-size:var(--font-size-xs);color:var(--muted);line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pc-pkg-toggle{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;color:var(--gold-light);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;width:52px}
.pc-pkg-toggle i{font-size:18px;transition:transform .25s}
.pc-pkg[open] .pc-pkg-toggle i{transform:rotate(180deg)}
.pc-pkg-detail{padding:0 20px 22px;border-top:1px solid var(--border);margin-top:2px;opacity:1;transform:translateY(0);transition:opacity var(--pc-interface,400ms) var(--pc-ease,cubic-bezier(.16,1,.3,1)),transform var(--pc-interface,400ms) var(--pc-ease,cubic-bezier(.16,1,.3,1))}
.pc-pkg-detail .pkg-section-label:first-child{margin-top:16px}
.pc-pkg-save{font-size:var(--font-size-xs);color:var(--muted);margin-top:6px}
/* Decorative reveal-on-open only (item 9/24) — native <details> already
   shows this content instantly and correctly with zero JS/CSS; JS (see
   holiday-packages.html) briefly applies this class right as a package
   opens so the content settles in rather than snapping, then removes it.
   The base rule above is always the fully-visible resting state, so a
   visitor with JS disabled, or whose JS runs before this class exists,
   or under reduced motion, sees the exact same fully-visible content. */
.pc-pkg-detail.pc-detail-enter{opacity:0;transform:translateY(8px);transition:none}
/* One-shot confirmation after arriving via a package deep link (item 18) —
   never a flash/glow, and only ever applied then removed by JS once. */
.pc-pkg.pc-deep-link-emphasis{border-color:var(--gold-light);transition:border-color 1.1s var(--pc-ease,ease)}

/* Duration Guide: a restrained vertical list, never a spreadsheet-style
   matrix and never a price-per-night figure (Phase 12C-B §4/§15/§21). */
.pc-duration{display:flex;flex-direction:column;gap:1px;margin-top:24px;border:1px solid var(--border);border-radius:10px;overflow:hidden;position:relative}
.pc-duration-row{display:flex;align-items:baseline;gap:16px;padding:14px 20px;background:var(--card);text-decoration:none;transition:background .2s,border-color var(--pc-interface,450ms) var(--pc-ease,ease);flex-wrap:wrap;border-inline-start:2px solid transparent}
.pc-duration-row:hover{background:var(--surface-secondary,var(--card))}
/* One elegant, decorative motion idea for this section (item 11): a thin
   progression line grows down the list as it enters view, and each row's
   left edge picks up a brief accent, sequenced roughly as the line reaches
   it. Content itself (text, prices, links) is never gated behind this --
   the pseudo-element and border-accent are purely decorative additions on
   top of rows that are already fully visible, so this degrades to "no
   line, plain rows" with zero JS/motion/reduced-motion support. */
@media (prefers-reduced-motion:no-preference){
  .pc-duration.reveal::before{
    content:'';position:absolute;inset-inline-start:0;top:0;width:2px;height:0;background:var(--gold-light);
    transition:height 1s var(--pc-ease,cubic-bezier(.16,1,.3,1)) .1s;
  }
  .pc-duration.reveal.visible::before{height:100%}
  .pc-duration-row:nth-child(n+1){transition-delay:0ms}
  .pc-duration-row:nth-child(n+2){transition-delay:45ms}
  .pc-duration-row:nth-child(n+3){transition-delay:90ms}
  .pc-duration-row:nth-child(n+4){transition-delay:135ms}
  .pc-duration-row:nth-child(n+5){transition-delay:180ms}
  .pc-duration-row:nth-child(n+6){transition-delay:225ms}
  .pc-duration-row:nth-child(n+7){transition-delay:270ms}
  .pc-duration-row:nth-child(n+8){transition-delay:315ms}
  .pc-duration-row:nth-child(n+9){transition-delay:360ms}
  .pc-duration.reveal.visible .pc-duration-row{border-inline-start-color:var(--gold-light)}
}
.pc-duration-nights{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-lg);font-weight:600;color:var(--white);min-width:90px}
.pc-duration-name{flex:1;min-width:150px;font-size:var(--font-size-sm);color:var(--muted)}
.pc-duration-price{font-size:var(--font-size-sm);color:var(--white);white-space:nowrap}
.pc-duration-price .pkg-price{font-size:var(--font-size-base);font-family:inherit}
.pc-duration-diff{font-size:var(--font-size-xs);color:var(--gold-light);flex-basis:100%}

@media(max-width:900px){
  .pc-featured{grid-template-columns:1fr;grid-template-rows:none}
  .pc-featured-flagship{grid-row:auto}
  .pc-collection{grid-template-columns:1fr}
}
@media(max-width:480px){
  .pc-pkg-summary{gap:10px;padding:14px}
  .pc-pkg-thumb{width:60px;height:60px}
  .pc-pkg-toggle{width:36px}
  .pc-pkg-toggle span{display:none}
  .pc-duration-row{padding:12px 16px;gap:8px}
  .pc-duration-nights{min-width:64px;font-size:var(--font-size-base)}
}

/* ══ Phase 12C-C: premium package-page motion + deep-link hardening ══
   Page-scoped motion tokens -- holiday-packages.html only, via the same
   body[data-page-type="package"] scope already used to keep hero styling
   off every other page that loads this stylesheet. Three levels per the
   approved spec: micro (buttons/badges/chevrons), interface (package
   expansion/reveal/sticky CTA), cinematic (hero, Featured imagery). */
body[data-page-type="package"]{
  --pc-micro:220ms; --pc-interface:450ms; --pc-cinematic:1100ms;
  --pc-ease:cubic-bezier(.16,1,.3,1);
}

/* Hero entrance -- pure CSS, no JS, plays once per page paint (so it also
   runs correctly with JS fully disabled). The image settle lives on ::after
   (::before is already the page's darkening gradient overlay) at a negative
   z-index so paint order stays: base bg -> ::after (animated photo copy) ->
   ::before (gradient) -> .page-header-inner (text) -- i.e. the gradient's
   legibility contrast is never covered by the new layer. Text gets its own
   opacity+translateY stagger, entirely separate from the image's scale, per
   the "one dominant reveal" rule -- a clip-path mask was tried and dropped:
   combined with the scale settle it read as fussy, not premium (item 5). */
body[data-page-type="package"] .page-header::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:inherit;background-position:center;background-size:cover;
  transform-origin:center;
}
@media (prefers-reduced-motion:no-preference){
  body[data-page-type="package"] .page-header::after{animation:pcHeroSettle var(--pc-cinematic) var(--pc-ease) both}
  body[data-page-type="package"] .pc-hero-eyebrow{animation:pcFadeUp var(--pc-interface) var(--pc-ease) both;animation-delay:.15s}
  body[data-page-type="package"] .page-h1{animation:pcFadeUp var(--pc-interface) var(--pc-ease) both;animation-delay:.3s}
  body[data-page-type="package"] .pc-hero-display{animation:pcFadeUp var(--pc-interface) var(--pc-ease) both;animation-delay:.45s}
}
@keyframes pcHeroSettle{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes pcFadeUp{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}

/* Featured Journeys premium reveal (item 6) -- the three panels arrive as a
   restrained cascade (0/80/160ms), each panel's own image getting the
   cinematic-length settle since it is the single dominant reveal per panel;
   deliberately NOT also staggering every individual text line inside each
   panel on top of that -- see the 12C-C report's motion-quality note on
   why that reads as over-engineered rather than more premium. */
@media (prefers-reduced-motion:no-preference){
  #pkg-featured.reveal .pc-featured-panel{opacity:0;transform:translateY(16px);transition:opacity var(--pc-interface) var(--pc-ease),transform var(--pc-interface) var(--pc-ease)}
  #pkg-featured.reveal.visible .pc-featured-panel{opacity:1;transform:translateY(0)}
  #pkg-featured.reveal .pc-featured-panel:nth-child(1){transition-delay:0ms}
  #pkg-featured.reveal .pc-featured-panel:nth-child(2){transition-delay:80ms}
  #pkg-featured.reveal .pc-featured-panel:nth-child(3){transition-delay:160ms}
  #pkg-featured.reveal .pc-featured-img{clip-path:inset(0 0 6% 0);transition:clip-path var(--pc-cinematic) var(--pc-ease),transform var(--pc-cinematic) var(--pc-ease)}
  #pkg-featured.reveal.visible .pc-featured-img{clip-path:inset(0 0 0 0)}
}

/* Mobile: shorter travel, no stagger, no image mask -- item 21/30. */
@media (max-width:600px){
  #pkg-featured.reveal .pc-featured-panel{transform:translateY(8px)}
  #pkg-featured.reveal .pc-featured-panel:nth-child(1),#pkg-featured.reveal .pc-featured-panel:nth-child(2),#pkg-featured.reveal .pc-featured-panel:nth-child(3){transition-delay:0ms}
  #pkg-featured.reveal .pc-featured-img{clip-path:none}
}

/* ── HOLIDAY PACKAGES: intro / accommodation / trust sections ── */
.hp-section{max-width:70ch}
.hp-section p{font-size:var(--font-size-base);color:var(--muted);line-height:1.75;margin-top:10px}
.hp-soft-link{display:inline-block;margin-top:14px;font-size:var(--font-size-sm);color:var(--gold-light);text-decoration:none}
.hp-soft-link:hover{text-decoration:underline}

/* ── HOLIDAY PACKAGES: accommodation section image + text layout ── */
.hp-section-accom{max-width:900px}
.hp-accom-layout{display:flex;gap:28px;align-items:center;margin-top:16px}
.hp-accom-img{width:260px;flex-shrink:0;aspect-ratio:4/3;object-fit:cover;border-radius:10px;box-shadow:0 12px 30px rgba(0,4,10,.3)}
.hp-accom-text{flex:1;min-width:0}
.hp-accom-text p{margin-top:0}
@media(max-width:700px){
  .hp-accom-layout{flex-direction:column;align-items:stretch}
  .hp-accom-img{width:100%;aspect-ratio:16/9}
}

/* ── HOLIDAY PACKAGES: generic mobile sticky CTA (non-package-aware) ── */
/* Phase 12C-C (item 20): switched the show/hide mechanism from display:none
   (which cannot transition) to visibility+opacity+transform, so the bar now
   actually enters/leaves with a translateY+opacity settle instead of
   snapping into place -- no bounce, no pulse, single one-shot transition
   each way. visibility:hidden keeps it out of the accessibility tree and
   tab order exactly like display:none did (no a11y change), and the
   transitioned visibility flip is delayed on the way out / instant on the
   way in so it stays paintable for the full fade. */
.pkg-sticky-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:800;background:var(--card);border:1px solid var(--card-border);border-radius:10px;box-shadow:0 12px 30px rgba(0,4,10,.4);padding:12px 16px;align-items:center;justify-content:space-between;gap:10px;transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--pc-interface,350ms) var(--pc-ease,ease),opacity var(--pc-interface,350ms) var(--pc-ease,ease),visibility 0s linear var(--pc-interface,350ms);display:flex}
.pkg-sticky-cta.visible{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--pc-interface,350ms) var(--pc-ease,ease),opacity var(--pc-interface,350ms) var(--pc-ease,ease),visibility 0s linear}
.pkg-sticky-cta-link{color:var(--white);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;flex:1}
.pkg-sticky-cta-link i{color:var(--teal-light);margin-right:6px}
.pkg-sticky-cta-close{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 4px;flex-shrink:0}
@media(min-width:701px){.pkg-sticky-cta{display:none !important}}
/* Reserved bottom clearance while the sticky bar is showing, so content at
   the very end of the page (closing CTA, footer) can still be scrolled clear
   of the bar's fixed footprint. Toggled by JS alongside .visible; removed on
   dismiss. Matches the bar's own footprint: 12px offset + ~50px bar height +
   12px breathing room + safe-area, on mobile widths only. */
body.pkg-sticky-clearance{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
@media(min-width:701px){body.pkg-sticky-clearance{padding-bottom:0}}
/* Phase 39: the floating WhatsApp button (bottom-right, z-index:900) sits
   directly over the right edge of this sticky bar (z-index:800) on mobile --
   both are WhatsApp CTAs, so showing both at once is a redundant, visually
   overlapping duplicate rather than two useful options. Hide the floating
   button only while the sticky bar is actually showing; it reappears the
   instant the bar is dismissed or scrolled past, so WhatsApp access is never
   actually lost, just never doubled up in the same footprint. */
body.pkg-sticky-clearance .floating-whatsapp{display:none}

/* ── RTL ── */
[dir="rtl"] .content-list{padding-left:0;padding-right:20px}
[dir="rtl"] .breadcrumbs a{margin-left:4px}
[dir="rtl"] .pkg-sticky-cta-link i{margin-right:0;margin-left:6px}
[dir="rtl"] .hp-accom-img{margin-right:0}

/* ── HOLIDAY PACKAGES: related-strip scoped 3-column desktop layout
   (page-specific modifier — does not alter .related-strip's default
   auto-fit behavior used by other guide pages) ── */
.related-strip-3col{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.related-strip-3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.related-strip-3col{grid-template-columns:1fr}}

/* ── RESPONSIVE ── */
@media(max-width:800px){
  .footer-top{grid-template-columns:1fr;gap:32px}
  .page-header{padding:150px 5vw 60px}
}
@media(max-width:600px){
  section{padding:56px 0}
}

/* ── CONSENT MANAGER (Phase 11B) ──
   Bar sits above the floating WhatsApp button (z-index 900) but below the
   mobile menu (1100); the panel dialog sits above everything so it can open
   regardless of what else is on screen. */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:rgba(6,16,28,.97);backdrop-filter:blur(16px);border-top:1px solid var(--card-border);box-shadow:0 -12px 30px rgba(0,4,10,.4);padding:20px 5vw}
.consent-bar[hidden]{display:none}
.consent-bar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.consent-bar-text strong{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--font-size-xl);font-weight:600;color:var(--white);margin-bottom:4px}
.consent-bar-text p{font-size:var(--font-size-sm);color:var(--muted);line-height:1.6;max-width:60ch;margin:0}
.consent-bar-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.consent-btn{font-family:'DM Sans',sans-serif;font-size:var(--font-size-sm);font-weight:500;letter-spacing:.04em;padding:11px 20px;border-radius:2px;cursor:pointer;white-space:nowrap;transition:all .25s}
.consent-btn-reject{background:none;border:1px solid rgba(255,255,255,.3);color:var(--white)}
.consent-btn-reject:hover{border-color:var(--white)}
.consent-btn-customize{background:none;border:1px solid var(--card-border);color:var(--gold-light)}
.consent-btn-customize:hover{border-color:var(--gold-light)}
.consent-btn-accept{background:linear-gradient(135deg,var(--gold),var(--gold-light) 55%,var(--gold));background-size:220% 100%;border:none;color:var(--navy)}
.consent-btn-accept:hover{background-position:100% 0}

.consent-panel-overlay{position:fixed;inset:0;z-index:1200;background:rgba(5,11,20,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:5vw}
.consent-panel-overlay[hidden]{display:none}
.consent-panel{width:100%;max-width:560px;max-height:85vh;overflow-y:auto;background:var(--navy2);border:1px solid var(--card-border);border-radius:10px;box-shadow:0 30px 80px rgba(0,4,10,.6)}
.consent-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.consent-panel-header h2{font-family:'Cormorant Garamond',serif;font-size:var(--font-size-2xl);font-weight:500;color:var(--white);margin:0}
.consent-panel-close{background:none;border:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;flex-shrink:0}
.consent-panel-close:hover{color:var(--white)}
.consent-panel-body{padding:8px 24px}
.consent-row{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.consent-row:last-child{border-bottom:none}
.consent-row-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.consent-row-header>span:first-child{font-size:var(--font-size-base);font-weight:500;color:var(--white)}
.consent-row p{font-size:var(--font-size-sm);color:var(--muted);line-height:1.6;margin:0}
.consent-locked{font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);opacity:.8}
.consent-toggle{position:relative;width:44px;height:24px;flex-shrink:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.consent-toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--white);transition:transform .2s}
.consent-toggle[aria-checked="true"]{background:var(--teal);border-color:var(--teal-light)}
.consent-toggle[aria-checked="true"] .consent-toggle-knob{transform:translateX(20px)}
.consent-toggle:focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}
.consent-panel-footer{padding:16px 24px 24px}
.consent-panel-footer .consent-btn{width:100%;text-align:center;padding:13px 20px}

.footer-privacy-choices{background:none;border:none;padding:0;font-family:'DM Sans',sans-serif;font-size:var(--font-size-xs);color:rgba(255,255,255,.35);text-decoration:underline;cursor:pointer;transition:color .2s}
.footer-privacy-choices:hover{color:var(--gold-light)}

.consent-btn:focus-visible,.consent-panel-close:focus-visible,.footer-privacy-choices:focus-visible{outline:2px solid var(--teal-light);outline-offset:3px}

[dir="rtl"] .consent-toggle-knob{left:auto;right:2px}
[dir="rtl"] .consent-toggle[aria-checked="true"] .consent-toggle-knob{transform:translateX(-20px)}
[dir="rtl"] .consent-locked{margin-left:0}

@media(max-width:700px){
  .consent-bar-inner{flex-direction:column;align-items:stretch}
  .consent-bar-actions{width:100%}
  .consent-btn{flex:1}
}

/* ══════════════ CHINA CONVERSION PATH (Phase 27) ══════════════ */
/* WhatsApp is blocked in mainland China without a VPN. Scoped entirely to
   html[lang="zh"] so every other locale is byte-for-byte unaffected: the
   package-enquiry and closing-band CTA pairs (WhatsApp = .btn-primary,
   Email = .btn-outline in the shared English markup) swap visual roles for
   zh only -- Email becomes the filled/primary action, WhatsApp becomes the
   outlined/secondary one, and moves after Email in reading order. Markup,
   hrefs, onclick tracking, and every other locale are untouched. */
html[lang="zh"] .pkg-cta a.btn-primary[href^="https://wa.me"],
html[lang="zh"] .cta-buttons a.btn-primary[href^="https://wa.me"]{
  order:2;background:transparent;background-image:none;color:var(--text);border:1px solid var(--border-strong)
}
html[lang="zh"] .pkg-cta a.btn-primary[href^="https://wa.me"]:hover,
html[lang="zh"] .cta-buttons a.btn-primary[href^="https://wa.me"]:hover{
  border-color:var(--accent);color:var(--accent-text);box-shadow:none
}
html[lang="zh"] .pkg-cta a.btn-outline[href^="mailto:"],
html[lang="zh"] .cta-buttons a.btn-outline[href^="mailto:"]{
  order:1;background:var(--accent);background-image:none;color:var(--accent-ink);border:none
}
html[lang="zh"] .pkg-cta a.btn-outline[href^="mailto:"]:hover,
html[lang="zh"] .cta-buttons a.btn-outline[href^="mailto:"]:hover{
  background:var(--accent-hover);color:var(--accent-ink);box-shadow:0 8px 24px var(--accent-soft)
}

/* Phase 14: same Light-theme label-contrast fix as vilu-website.html --
   --gold/--gold-light (aliases for --accent/--accent-hover) measure 4.04:1
   / 3.27:1 against Light's near-white surfaces, below WCAG AA's 4.5:1 for
   normal text. --accent-text (5.33:1/4.82:1) is theme.css's own token
   for exactly this. Scoped to these small-label selectors only -- never
   touching --gold/--gold-light directly, which stay correct elsewhere as
   button/badge backgrounds (paired with --navy ink) or large display text. */
:root[data-theme="light"] .related-card-tag,
:root[data-theme="light"] .pkg-section-label,
:root[data-theme="light"] .pc-hero-eyebrow,
:root[data-theme="light"] .pc-pkg-toggle{color:var(--accent-text)}