/* IKOU Holidays - built at a 1024px design width and scaled to the viewport (see script.js) */
:root {
  --navy: #0c2340;
  --navy-deep: #002841;
  --cream: #f7f6f1;
  --cream-2: #f6f5f0;
  --gold: #d8af63;
  --gold-light: #e8c375;
  --gold-text: #b98a34;
  --green: #1e3325;
  --gray: #5b6572;
  --serif: 'Source Serif 4', 'Times New Roman', serif;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --logo: 'Cinzel', 'Trajan Pro', serif;
  --script: 'Nothing You Could Do', 'Segoe Script', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip, not hidden, on the root elements (Krishna 2026-09-22: wheel scroll felt jumpy). Chrome/Firefox drop the fast
   compositor-scroll path when html/body carry a non-"visible" overflow, so scrolling falls back to a janky main-thread path.
   "clip" gives the same no-horizontal-scroll result (checked by check-pages' SidewaysScrollPx test) without that penalty;
   #page below already used clip for the same reason. */
html { overflow-x: clip; background: var(--cream); }
body {
  font-family: var(--sans);
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; cursor: pointer; background: none; color: inherit; }
svg { display: block; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

#page { position: relative; width: 1024px; margin: 0 auto; overflow-x: clip; background: var(--cream); }
.sec { position: relative; width: 1024px; overflow: hidden; }
.a { position: absolute; }
.nw { white-space: nowrap; }

/* shared text styles used by several sections */
.eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: 2.1px; text-transform: uppercase; color: var(--gold-light); }
.script { font-family: var(--script); font-weight: 400; color: #fff; line-height: 1.02; white-space: nowrap; }
.loc { position: absolute; display: flex; align-items: center; gap: 6px; font-size: 9px; color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.loc .ic { font-size: 13px; }

/* keyboard focus + smooth in-page jumps for every clickable element */
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a, button, label.field, .tile, .ocard, .bcard { cursor: pointer; }
.tile.flash { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Floating WhatsApp chat button: fixed bottom-right on every page (lives outside the scaled #page, so it keeps a true size). */
.float-stack { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.wa-float { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wa-float .wa-btn { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 6px 18px rgba(8,22,42,.32), 0 0 0 3px #fff; transition: transform .18s, box-shadow .18s, background .18s; }
.wa-float .wa-btn svg { width: 32px; height: 32px; }
.wa-float .wa-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-pulse 2.6s ease-out infinite; pointer-events: none; }
.wa-float .wa-label { padding: 9px 15px; border-radius: 22px; background: #0c2340; color: #fff; font: 600 13px/1 'DM Sans', sans-serif; letter-spacing: .2px; white-space: nowrap; box-shadow: 0 4px 14px rgba(8,22,42,.3); opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity .18s, transform .18s; }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { opacity: 1; transform: none; }
.wa-float:hover .wa-btn, .wa-float:focus-visible .wa-btn { transform: scale(1.07); background: #1ebe5a; box-shadow: 0 9px 22px rgba(8,22,42,.4), 0 0 0 3px #fff; }
.wa-float:focus-visible { outline: none; }
.wa-float:focus-visible .wa-btn { outline: 3px solid var(--gold); outline-offset: 5px; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .65; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-float .wa-btn::after { animation: none; display: none; } }
@media (max-width: 600px) { .wa-float .wa-btn { width: 52px; height: 52px; } .wa-float .wa-label { display: none; } }

/* floating search button: sits above the WhatsApp button, hidden until the visitor scrolls past the header so it never crowds the hero */
.search-float { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-decoration: none; opacity: 0; transform: translateY(10px) scale(.92); pointer-events: none; transition: opacity .2s, transform .2s; }
.search-float.show { opacity: 1; transform: none; pointer-events: auto; }
.search-float .sf-btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 6px 18px rgba(8,22,42,.28), 0 0 0 3px var(--gold); transition: transform .18s, box-shadow .18s, background .18s, color .18s; }
.search-float .sf-btn .ic { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.search-float .sf-label { padding: 9px 15px; border-radius: 22px; background: #0c2340; color: #fff; font: 600 13px/1 'DM Sans', sans-serif; letter-spacing: .2px; white-space: nowrap; box-shadow: 0 4px 14px rgba(8,22,42,.3); opacity: 0; transform: translateX(10px); pointer-events: none; transition: opacity .18s, transform .18s; }
.search-float:hover .sf-label, .search-float:focus-visible .sf-label { opacity: 1; transform: none; }
.search-float:hover .sf-btn, .search-float:focus-visible .sf-btn, .search-float[aria-expanded="true"] .sf-btn { transform: scale(1.07); background: var(--gold); color: #fff; box-shadow: 0 9px 22px rgba(8,22,42,.35), 0 0 0 3px #fff; }
.search-float:focus-visible { outline: none; }
.search-float:focus-visible .sf-btn { outline: 3px solid var(--navy); outline-offset: 5px; }
@media (max-width: 600px) { .search-float .sf-btn { width: 46px; height: 46px; } .search-float .sf-label { display: none; } }

/* ===== RESPONSIVE (home page): at 1024px and wider the page is the 1024px design canvas scaled to the window (base.js). Below 1024px it re-flows:
   tablet 640-1023px and phone <=639px. Each section adds its own rules at the end of its css file, scoped with #page.home. ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 1023px) {
  #page.home { width: 100%; margin: 0; }
  #page.home .sec { width: 100%; }
}

/* SECTION 01 - top navigation bar with the primary logo */
.site-header {
  position: sticky; top: 0; z-index: 40; height: 68px; padding: 0 36px 0 34px;
  display: flex; align-items: center; gap: 30px; background: #fff;
  box-shadow: 0 2px 14px rgba(12,35,64,.10);
  transition: background .25s, box-shadow .25s;
}
/* once scrolled a little, the bar itself fades to a frosted glass so page content shows through, while staying blurred enough to keep the logo/nav readable over whatever section is underneath (.scrolled toggled by 01-header.js) */
.site-header.scrolled {
  background: rgba(255,255,255,.62); box-shadow: 0 2px 14px rgba(12,35,64,.06);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.site-header.scrolled::before, .site-header.scrolled::after { opacity: .68; transition: opacity .25s; }
/* logo: the real artwork split into two crops of the primary logo, laid side by side so the tagline lines can be far larger than in the stacked logo, at the same 68px header height */
.brand { display: flex; align-items: center; gap: 13px; flex: none; height: 54px; }
.brand img { display: block; }
.brand .b-mark { height: 46px; width: auto; }
.brand .b-div { width: 1px; height: 30px; background: linear-gradient(180deg, rgba(185,138,52,0), #b98a34 30%, #b98a34 70%, rgba(185,138,52,0)); }
.brand .b-tag { width: 186px; height: auto; }

/* the logo sits on its own soft cream-to-white panel with a slanted gold edge, so it reads as a brand block and does not run on into the nav */
.site-header::before, .site-header::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 398px; z-index: -1; pointer-events: none; }
.site-header::before { background: linear-gradient(90deg, #f2e9d6 0%, #f8f3e7 50%, #fdfbf6 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.site-header::after { background: linear-gradient(180deg, #e8c375, #c99a45); clip-path: polygon(calc(100% - 2px) 0, 100% 0, calc(100% - 16px) 100%, calc(100% - 18px) 100%); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a {
  position: relative; padding: 8px 0; font-size: 12px; font-weight: 500; letter-spacing: .1px;
  color: var(--navy); white-space: nowrap; transition: color .15s;
}
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--gold); transform: scaleX(0); transition: transform .2s; }
.nav a:hover, .nav a.on { color: var(--gold-text); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
/* IKOU Originals: the one thing nobody else has, marked out as bold gold text with a permanent thin gold underline (Krishna 2026-09-28: dropped the pill/oval button, no shape, just colour + weight) */
.nav a.nav-feature { font-weight: 700; color: var(--gold-text); }
.nav a.nav-feature::after { background: var(--gold); transform: scaleX(1); }
.nav a.nav-feature:hover, .nav a.nav-feature.on { color: var(--navy); }
.nav a.nav-feature:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

.search-ic:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

.search-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; color: var(--navy); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.search-ic:hover, .search-ic[aria-expanded="true"] { background: #f0ece2; }
.search-ic .ic { stroke-width: 1.6; }

.site-search { position: absolute; right: 36px; top: 62px; width: 320px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(12,35,64,.22); display: flex; flex-wrap: wrap; gap: 8px; }
.site-search[hidden] { display: none; }
/* opened from the floating search button: pin it near the float stack instead of under the header, so it stays reachable however far the page has scrolled */
.site-search.floating { position: fixed; top: auto; right: max(18px, env(safe-area-inset-right)); bottom: 98px; width: min(320px, calc(100vw - 36px)); z-index: 95; }
@media (max-width: 600px) { .site-search.floating { right: max(12px, env(safe-area-inset-right)); bottom: 86px; width: calc(100vw - 24px); } }
.site-search input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid #e0dccf; border-radius: 17px; font: 12px var(--sans); color: var(--navy); outline: 0; }
.site-search input:focus { border-color: var(--gold); }
.site-search button { height: 34px; padding: 0 16px; border-radius: 17px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; }
.site-search-results { width: 100%; max-height: 260px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none; }
.site-search-results[hidden] { display: none; }
.site-search-results a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: var(--navy); }
.site-search-results a i { font-style: normal; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-text); }
.site-search-results a:hover, .site-search-results a[aria-selected="true"], .site-search-results a:focus-visible { background: #f6f2e8; outline: 0; }
.site-search-msg a { color: var(--gold-text); text-decoration: underline; }
.site-search-msg { width: 100%; font-size: 11px; color: var(--gray); }
.site-search-msg:empty { display: none; }

/* menu button: only on tablet / phone */
.menu-btn { display: none; }
@media (max-width: 1023px) {
  #page.home .site-header { height: 62px; padding: 0 10px 0 16px; gap: 4px; }
  #page.home .brand { height: 50px; }
  #page.home .brand .b-mark { height: 42px; }
  #page.home .brand .b-tag { width: 172px; }
  #page.home .search-ic { width: 44px; height: 44px; margin-left: auto; font-size: 22px; }
  #page.home .menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex: none; width: 44px; height: 44px; border-radius: 50%; transition: background .15s; }
  #page.home .menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .2s, opacity .2s; }
  #page.home .menu-btn:hover { background: #f0ece2; }
  #page.home .menu-btn:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
  #page.home .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #page.home .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #page.home .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* the nav becomes a dropdown panel under the header */
  #page.home .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 0 16px; background: #fff; border-top: 1px solid #efe9da; box-shadow: 0 16px 28px rgba(12,35,64,.18); z-index: 30; }
  #page.home .site-header.nav-open .nav { display: flex; }
  #page.home .nav a { padding: 15px 24px; font-size: 16px; border-bottom: 1px solid #f3eee2; }
  #page.home .nav a::after { display: none; }
  #page.home .nav a.on { color: var(--gold-text); }
  /* in the dropdown this is just another row: drop the desktop pill (radius/background/border) and highlight it with bold gold text instead */
  #page.home .nav a.nav-feature { margin: 0; padding: 15px 24px; text-align: left; font-size: 16px; font-weight: 700; color: var(--gold-text); background: none; border: 0; border-bottom: 1px solid #f3eee2; border-radius: 0; box-shadow: none; }
  #page.home .nav a.nav-feature:hover, #page.home .nav a.nav-feature.on { background: #fdf8ec; border-color: #f3eee2; color: var(--gold-text); transform: none; box-shadow: none; }
  #page.home .site-search { left: 12px; right: 12px; top: calc(100% + 6px); width: auto; z-index: 31; }
  #page.home .site-search input { height: 42px; font-size: 16px; }
  #page.home .site-search button { height: 42px; font-size: 14px; }
  #page.home .site-search-results a { padding: 12px 10px; font-size: 15px; }
}
@media (max-width: 639px) {
  #page.home .site-header { height: 58px; padding: 0 8px 0 14px; }
  #page.home .site-header::before, #page.home .site-header::after { width: 150px; }
  #page.home .brand .b-mark { height: 40px; }
  #page.home .brand .b-div, #page.home .brand .b-tag { display: none; }
}

/* SECTION 02 - hero photo + headline. Photo: img/hero.jpg (see CREDITS.md) */
#hero { height: 318px; background: #1a2a3f url(img/hero.jpg) 50% 58% / cover no-repeat; color: #fff; }
#hero .hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 300px 200px at 92% 0, rgba(4,28,48,.80), rgba(4,28,48,.50) 50%, rgba(4,28,48,0) 100%), linear-gradient(90deg, rgba(4,28,48,.66) 0%, rgba(4,28,48,.40) 34%, rgba(4,28,48,.08) 62%, rgba(4,28,48,0) 75%), linear-gradient(180deg, rgba(4,28,48,.25), rgba(4,28,48,0) 40%); }
#hero .eyebrow { position: absolute; left: 54px; top: 58px; }
#hero h1 { position: absolute; left: 53px; top: 78px; font-family: var(--serif); font-weight: 400; font-size: 39px; line-height: 40px; letter-spacing: -.2px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
#hero .lede { position: absolute; left: 54px; top: 168px; font-size: 14px; line-height: 19px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
/* accessible business-description sentence for search/answer engines and screen readers: kept out of the tight fixed-height visual layout, never visually hidden from assistive tech */
#hero .hero-desc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#hero .hero-script { position: absolute; left: 812px; top: 22px; font-size: 22px; transform: rotate(-7deg); transform-origin: left top; text-shadow: 0 1px 8px rgba(0,30,55,.7); }
#hero .swoosh { position: absolute; left: 834px; top: 78px; width: 84px; height: 30px; filter: drop-shadow(0 1px 4px rgba(0,40,70,.5)); }
#hero .hero-loc { left: 54px; bottom: 44px; top: auto; padding: 5px 11px 5px 8px; border-radius: 14px; background: rgba(8,22,42,.42); font-size: 10px; transition: background .15s; }
#hero .hero-loc:hover { background: rgba(8,22,42,.65); }


/* tablet / phone: the hero re-flows (text stacked, taller, room at the bottom for the plan bar that overlaps it) */
@media (max-width: 1023px) {
  #page.home #hero { height: auto; min-height: 480px; padding: 60px 32px 118px; display: flex; flex-direction: column; justify-content: center; background-position: 64% 50%; }
  #page.home #hero .hero-shade { background: linear-gradient(180deg, rgba(4,28,48,.55) 0%, rgba(4,28,48,.2) 46%, rgba(4,28,48,.5) 100%), linear-gradient(90deg, rgba(4,28,48,.5) 0%, rgba(4,28,48,0) 80%); }
  #page.home #hero .eyebrow, #page.home #hero h1, #page.home #hero .lede { position: relative; left: auto; top: auto; }
  #page.home #hero .eyebrow { max-width: 440px; font-size: 11.5px; line-height: 17px; letter-spacing: 2px; }
  #page.home #hero h1 { margin-top: 12px; font-size: 46px; line-height: 50px; }
  #page.home #hero .lede { margin-top: 16px; max-width: 480px; font-size: 17px; line-height: 26px; }
  #page.home #hero .hero-script { left: auto; right: 32px; top: 30px; font-size: 26px; }
  #page.home #hero .swoosh { display: none; }
  #page.home #hero .hero-loc { position: relative; left: auto; bottom: auto; align-self: flex-start; margin-top: 26px; padding: 8px 14px 8px 11px; border-radius: 16px; font-size: 12.5px; }
}
@media (max-width: 639px) {
  #page.home #hero { min-height: 520px; padding: 46px 22px 112px; background-position: 68% 50%; }
  #page.home #hero h1 { font-size: 37px; line-height: 41px; }
  #page.home #hero .lede { font-size: 16px; line-height: 24px; }
  #page.home #hero .lede br { display: none; }
  #page.home #hero .hero-script { display: none; }
}

/* SECTION 03 - plan bar (floats over the bottom of the hero). Real <select>s, submits to contact.html?destination=..&month=.. */
#plan {
  position: relative; margin: -22px 0 -59px 18px; width: 987px; height: 81px; border-radius: 14px; z-index: 5;
  background: #f4f2ee; box-shadow: 0 6px 24px rgba(20,30,50,.16), 0 1px 3px rgba(20,30,50,.08);
}
#plan .script { color: var(--navy); left: 22px; top: 24px; font-size: 13.5px; line-height: 19px; transform: rotate(-8deg); transform-origin: left center; }
.field {
  position: absolute; top: 18px; height: 46px; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(20,30,50,.07); display: flex; align-items: center; padding-left: 12px;
  border: 1px solid transparent; transition: box-shadow .15s, border-color .15s;
}
.field:hover { box-shadow: 0 3px 10px rgba(20,30,50,.16); }
.field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,175,99,.28); }
.field .ic { font-size: 20px; color: var(--navy); stroke-width: 1.4; flex: none; }
.field .t { margin-left: 13px; line-height: 1; min-width: 0; }
.field b { display: block; font-size: 10px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field span { display: block; font-size: 8.2px; color: #8a929c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 98px; }
.field span.set { color: var(--navy); font-weight: 500; }
.field .chev { position: absolute; right: 11px; top: 19px; font-size: 9px; color: var(--navy); stroke-width: 2; }
.field select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: 13px var(--sans); border: 0; }
.cta {
  position: absolute; left: 831px; top: 18px; width: 137px; height: 46px; border-radius: 8px; background: linear-gradient(180deg, #e2bd70, #d5ab5e); color: var(--navy);
  box-shadow: 0 2px 8px rgba(185,138,52,.35);
  font-size: 10.2px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .15s, box-shadow .15s;
}
.cta:hover { background: linear-gradient(180deg, #e8c375, #d8af63); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(185,138,52,.45); }
.cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cta .ic { font-size: 13px; stroke-width: 1.8; }

/* tablet / phone: the plan bar becomes a card with a 2-column grid of fields (1 column on small phones) */
@media (max-width: 1023px) {
  #page.home #plan { margin: -84px 16px 0; width: auto; height: auto; padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-radius: 18px; }
  #page.home #plan .script { position: static; grid-column: 1 / -1; margin: 2px 0 6px 4px; font-size: 21px; line-height: 26px; transform: rotate(-3deg); transform-origin: left center; }
  #page.home #plan label.field:first-of-type, #page.home #plan label.field:last-of-type { grid-column: 1 / -1; }
  #page.home .field { position: relative; left: auto !important; top: auto; width: auto !important; height: 62px; padding-left: 14px; }
  #page.home .field .ic { font-size: 22px; }
  #page.home .field .t { flex: 1; min-width: 0; margin-left: 12px; }
  #page.home .field b { margin-bottom: 7px; font-size: 13px; }
  #page.home .field span { max-width: none; padding-right: 30px; font-size: 13px; }
  #page.home .field .chev { top: 25px; right: 14px; font-size: 12px; }
  #page.home .field select { font-size: 16px; }
  #page.home .cta { position: static; grid-column: 1 / -1; width: auto; height: 54px; margin-top: 4px; font-size: 15px; gap: 10px; }
  #page.home .cta .ic { font-size: 17px; }
}
@media (max-width: 479px) {
  #page.home #plan { grid-template-columns: 1fr; margin: -84px 12px 0; padding: 16px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  #page.home #plan { grid-template-columns: repeat(3, 1fr); }
  #page.home #plan label.field:last-of-type { grid-column: auto; }
}

#dest { height: 241px; background: var(--cream); }
#dest h2 { left: 53px; top: 101px; font-family: var(--serif); font-weight: 400; font-size: 18.5px; line-height: 23px; text-transform: uppercase; color: var(--navy); letter-spacing: .2px; }
#dest p { left: 53px; top: 159px; font-size: 11.5px; line-height: 16px; color: #2c3a4d; }
.link { font-size: 10.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--navy); transition: color .15s; }
.link:hover { color: var(--gold-text); }
.link .ic { font-size: 12px; stroke-width: 1.7; }
#dest .link { left: 53px; top: 202px; }
.circ { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(20,30,50,.22); display: flex; align-items: center; justify-content: center; color: var(--navy); z-index: 3; transition: background .15s, transform .15s; }
.circ:hover { background: var(--gold); transform: scale(1.08); }
.circ .ic { font-size: 12px; stroke-width: 2; }
.circ:disabled { opacity: .35; cursor: default; pointer-events: none; }
.circ[hidden] { display: none; }
/* slideshow pause/play (04-destinations.js): one icon shown at a time */
.circ.pp svg { width: 10px; height: 10px; fill: currentColor; }
.circ.pp .pp-play, .circ.pp[aria-pressed="true"] .pp-pause { display: none; }
.circ.pp[aria-pressed="true"] .pp-play { display: block; }
.circ:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

/* home-page tile strip: a real scrolling row, arrows move it */
#dest .tiles { position: absolute; left: 284px; top: 99px; width: 702px; height: 126px; padding: 4px 8px; display: flex; gap: 11px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity; scroll-padding: 0 8px; scrollbar-width: none; }
#dest .tiles::-webkit-scrollbar { display: none; }
.tile { position: relative; flex: none; width: 76px; height: 118px; scroll-snap-align: start; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(20,30,50,.13); overflow: hidden; transition: transform .2s, box-shadow .2s, opacity .4s ease; }
/* page change (04-destinations.js): the visible set fades out, the next set fades in (staggered by JS) */
#dest .tiles.is-fading { pointer-events: none; }
#dest .tiles.is-fading .tile { opacity: 0; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(20,30,50,.2); }
.tile:focus-visible, .dcard:focus-visible, .circ:focus-visible, .link:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.tile img { display: block; width: 100%; height: 88px; object-fit: cover; }
.tile span { display: block; padding: 0 3px; text-align: center; font-size: 10px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; line-height: 30px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile span.l { font-size: 8.4px; letter-spacing: .1px; }
.tile.flash, .dcard.flash { outline: 2px solid var(--gold); outline-offset: 3px; }

/* destinations.html: the large rounded country card (photo on top, name + pin + arrow ring below) */
.dpage { padding: 62px 53px 60px; background: var(--cream); }
.dpage-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 2.1px; text-transform: uppercase; color: var(--gold-text); }
.dpage h1 { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 36px; text-transform: uppercase; letter-spacing: .3px; color: var(--navy); }
.dpage-lede { margin-top: 10px; font-size: 13px; line-height: 20px; color: #2c3a4d; }
.dgrid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 28px; }
.dcard { display: block; border-radius: 24px; background: #fbfaf7; overflow: hidden; box-shadow: 0 6px 22px rgba(12,35,64,.12); transition: transform .25s, box-shadow .25s; }
.dcard:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(12,35,64,.2); }
.dphoto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e4d6; }
.dphoto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.dcard:hover .dphoto img, .dcard:focus-visible .dphoto img { transform: scale(1.05); }
.dfoot { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 18px 0 22px; }
.dfoot .pin { flex: none; font-size: 22px; color: var(--gold-text); stroke-width: 1.4; }
.dfoot b { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgo { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.3px solid var(--gold-text); color: var(--gold-text); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.dgo .ic { font-size: 15px; stroke-width: 1.5; }
.dcard:hover .dgo, .dcard:focus-visible .dgo { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.dcredits { margin-top: 44px; font-size: 10px; line-height: 16px; color: var(--gray); }
.dcredits summary { cursor: pointer; display: inline-block; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.dcredits summary:hover { color: var(--gold-text); }
.dcredits ul { margin-top: 10px; padding-left: 16px; }
.dcredits a { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dcard, .dphoto img, #dest .tiles { transition: none; scroll-behavior: auto; } .dcard:hover, .tile:hover { transform: none; } }

/* tablet / phone: heading stacked, the tiles become a swipeable row (no arrows, no auto-paging) */
@media (max-width: 1023px) {
  #page.home #dest { height: auto; padding: 38px 0 26px; }
  #page.home #dest h2, #page.home #dest p, #page.home #dest .link { position: static; margin-left: 24px; margin-right: 24px; }
  #page.home #dest h2 { font-size: 25px; line-height: 31px; }
  #page.home #dest p { margin-top: 8px; font-size: 15px; line-height: 22px; }
  #page.home #dest .link { margin-top: 14px; font-size: 14px; }
  #page.home #dest .circ { display: none; }
  #page.home #dest .tiles { position: relative; left: auto; top: auto; width: auto; height: auto; margin-top: 22px; padding: 8px 24px 14px; gap: 14px; scroll-snap-type: x proximity; scroll-padding: 0 24px; -webkit-overflow-scrolling: touch; }
  #page.home .tile { width: 132px; height: 196px; }
  #page.home .tile img { height: 144px; }
  #page.home .tile span { font-size: 12.5px; line-height: 52px; }
  #page.home .tile span.l { font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 639px) {
  #page.home #dest h2, #page.home #dest p, #page.home #dest .link { margin-left: 20px; margin-right: 20px; }
  #page.home #dest .tiles { padding: 8px 20px 14px; scroll-padding: 0 20px; gap: 12px; }
  #page.home .tile { width: 116px; height: 174px; }
  #page.home .tile img { height: 126px; }
  #page.home .tile span { font-size: 12px; line-height: 48px; }
}

/* SECTION 05 - seasonal offers. Only the eyebrow line is fixed. Each slide is a finished 3:1 banner image (src/offers.json), with invisible links over its painted buttons. */
#season { height: 170px; background: #10243a; }
/* full page width, 1024 x 170. A 3:1 banner is taller than that, so a slice is hidden top and bottom (--cy = % hidden above; set per banner) */
#season .slides { position: absolute; inset: 0; overflow: hidden; }
#season .eyebrow { position: absolute; z-index: 3; left: 54px; top: 10px; font-size: 9.5px; letter-spacing: 2px; pointer-events: none; text-shadow: 0 1px 6px rgba(0,20,40,.7); }
#season .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
#season .slide.on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
#season .slide .frame { position: absolute; left: 0; width: 100%; aspect-ratio: var(--ratio) / 1; top: calc(var(--cy) * -0.01 * 1024px / var(--ratio)); }
#season .slide .bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#season .slide-link { position: absolute; inset: 0; z-index: 1; }
#season .hot { position: absolute; z-index: 2; border-radius: 999px; transition: background .15s, box-shadow .15s; }
#season .hot:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
#season .hot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(255,255,255,.14); }
#season .hot-cta:hover { background: rgba(255,255,255,.18); }
#season.hotdebug .hot { outline: 2px dashed magenta; background: rgba(255,0,255,.15); }

#season .circ { top: 70px; width: 30px; height: 30px; z-index: 4; }
#season .circ.prev { left: 9px; }
#season .circ.next { left: 985px; }
#season .circ .ic { font-size: 14px; }
.dots { position: absolute; z-index: 4; left: 0; right: 0; top: 154px; display: flex; justify-content: center; gap: 7px; }
.dots button, .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); display: block; cursor: pointer; padding: 0; position: relative; transition: background .15s, transform .15s; }
.dots button::after { content: ''; position: absolute; inset: -6px; }
.dots button:hover { background: rgba(255,255,255,.85); transform: scale(1.2); }
.dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dots button.on, .dots i.on { background: #fff; border-color: #fff; }
#season.single .circ, #season.single .dots { display: none; }

/* shared gold pill button (also used by the boutique section) */
.gold-btn {
  position: absolute; height: 34px; border-radius: 17px; background: linear-gradient(180deg, #e2bd70, #d5ab5e); color: #1c2333;
  font-size: 10.2px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: filter .15s, transform .15s;
}
.gold-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.gold-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gold-btn .ic { font-size: 13px; stroke-width: 1.8; }

/* live WhatsApp badge at the right end of the strip, same look and size as the badge painted on the full-size banner (the painted one is erased from the picture) */
#season .wa-badge { position: absolute; z-index: 3; right: 18px; top: 12px; min-width: 196px; display: flex; align-items: center; gap: 10px; padding: 8px 22px 8px 14px; border-radius: 999px; background: rgb(9,32,58); border: 1.5px solid rgba(216,175,99,.9); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); transition: background .15s, box-shadow .15s, transform .15s; }
#season .wa-badge svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#season .wa-badge span { display: block; line-height: 1.2; }
#season .wa-badge i { display: block; font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .2px; }
#season .wa-badge b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .2px; }
#season .wa-badge:hover { background: rgb(14,42,74); box-shadow: 0 5px 14px rgba(0,0,0,.4); transform: translateY(-1px); }
#season .wa-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* live location tag at the bottom right of the strip, same look and size as the tag painted on the full-size banner (the painted one is erased from the picture) */
#season .loc-tag { position: absolute; z-index: 3; right: 26px; bottom: 14px; display: flex; align-items: flex-start; gap: 8px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); transition: opacity .15s; }
#season .loc-tag svg { width: 24px; height: 24px; flex: none; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
#season .loc-tag span { display: block; }
#season .loc-tag b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 17px; }
#season .loc-tag i { display: block; font-style: normal; font-size: 7.5px; font-weight: 500; letter-spacing: 1.5px; line-height: 10px; margin-top: 2px; }
#season .loc-tag:hover { opacity: .85; }
#season .loc-tag:hover b { text-decoration: underline; }
#season .loc-tag:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* 900-1023px: same banner, scaled to the width (6:1) */
@media (max-width: 1023px) {
  #page.home #season { height: auto; aspect-ratio: 6.0235 / 1; }
  #page.home #season .slide .frame { top: 0; }
  #page.home #season .circ.next { left: auto; right: 9px; }
  #page.home #season .dots { top: auto; bottom: 6px; }
}
/* tablet + phone (up to 899px): the banner keeps its real size (176px high) and the window shows its left part, where the wording is; swipe or use the dots for the next offer */
@media (max-width: 899px) {
  #page.home #season { height: 176px; aspect-ratio: auto; }
  #page.home #season .slide .frame { left: -34px; width: calc(176px * var(--ratio)); height: 176px; aspect-ratio: auto; }
  #page.home #season .eyebrow { left: 24px; top: 12px; font-size: 10.5px; }
  #page.home #season .circ { display: none; }
  #page.home #season .dots { bottom: 8px; }
  #page.home #season .dots button, #page.home #season .dots i { width: 9px; height: 9px; }
}
@media (max-width: 639px) {
  #page.home #season .eyebrow { left: 20px; }
  #page.home #season .wa-badge { right: 12px; top: 10px; min-width: 0; width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; }
  #page.home #season .wa-badge span { display: none; }
  #page.home #season .wa-badge svg { width: 26px; height: 26px; }
  #page.home #season .loc-tag { right: 14px; bottom: 26px; }
}

#orig { height: 216px; background: var(--cream-2); }
#orig .eyebrow { left: 53px; top: 22px; font-size: 13px; line-height: 16px; font-weight: 700; color: #b98a34; letter-spacing: 1.8px; -webkit-font-smoothing: antialiased; }
#orig .eyebrow::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #e0bb6c, #cea350); }
#orig h2 { left: 53px; top: 46px; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 24px; }
#orig p { left: 53px; top: 100px; font-size: 10.4px; line-height: 13px; color: #2c3a4d; }
#orig .link { left: 53px; top: 152px; font-size: 10px; }
#orig .script { color: var(--navy); left: 55px; top: 176px; font-size: 14px; line-height: 17px; transform: rotate(-4deg); transform-origin: left top; }

/* shared card bits */
.ocard, .ofeat { position: absolute; top: 14px; height: 188px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(20,30,50,.14); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.ocard:hover, .ocard:focus-visible, .ofeat:hover, .ofeat:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20,30,50,.26); }
.ocard:hover .circ, .ocard:focus-visible .circ, .ofeat:hover .circ, .ofeat:focus-visible .circ { background: var(--gold); }
.otxt i { display: block; font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #b98a34; }
.otxt b { display: block; font-weight: 600; }
.otxt small { display: block; }

/* small cards: photo on top, words below */
.ocard { width: 185px; }
.ocard img { display: block; width: 100%; height: 100px; object-fit: cover; }
.ocard .otxt { position: absolute; left: 11px; right: 11px; top: 108px; }
.ocard .otxt b { margin-top: 3px; font-family: var(--serif); font-size: 13.5px; line-height: 16px; color: var(--navy); }
.ocard .otxt small { margin-top: 4px; font-size: 9.2px; line-height: 12px; color: #4a5566; }
.ocard .circ { right: 10px; left: auto; top: 88px; width: 24px; height: 24px; box-shadow: 0 1px 6px rgba(20,30,50,.25); }

.ocard strong { position: absolute; left: 8px; top: 76px; display: flex; align-items: center; gap: 3px; padding: 3px 8px 3px 5px; border-radius: 9px; background: rgba(8,22,42,.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 7.8px; font-weight: 600; white-space: nowrap; }
.ocard strong .ic { font-size: 9px; color: var(--gold); }

/* featured card: same neutral look as its neighbours (no gold or green frame, no coloured panel). It stands out by size and by a calm motion: the photo drifts in slowly, a soft light sweeps across it now and then, and the arrow gently pulses. */
.ofeat { width: 330px; color: #fff; box-shadow: 0 6px 18px rgba(20,30,50,.24); }
.ofeat:hover, .ofeat:focus-visible { box-shadow: 0 12px 26px rgba(20,30,50,.34); }
.ofeat:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.ofeat img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; transform-origin: 45% 60%; animation: ofeat-drift 16s ease-in-out infinite alternate; }
.ofeat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,42,0) 42%, rgba(8,22,42,.84) 100%); pointer-events: none; }
.ofeat::before { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 55%; z-index: 1; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%); transform: skewX(-12deg); pointer-events: none; animation: ofeat-shine 8s ease-in-out infinite; }
.ofeat .otxt { position: absolute; left: 14px; right: 50px; bottom: 13px; z-index: 2; }
.ofeat .otxt i { color: #fff; opacity: .92; letter-spacing: 1.5px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.ofeat .otxt b { margin-top: 2px; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 25px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.ofeat .otxt small { margin-top: 3px; font-size: 10px; line-height: 13px; color: rgba(255,255,255,.92); }
.ofeat .circ { z-index: 2; right: 12px; bottom: 12px; top: auto; left: auto; width: 28px; height: 28px; animation: ofeat-pulse 3.2s ease-out infinite; }
@keyframes ofeat-drift { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes ofeat-shine { 0%, 62% { left: -70%; } 82%, 100% { left: 130%; } }
@keyframes ofeat-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 60%, 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
.ofeat:hover img, .ofeat:focus-visible img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ofeat img, .ofeat::before, .ofeat .circ { animation: none; } .ofeat::before { display: none; } }
/* tablet / phone: heading first, then the featured tile full width, then the two cards side by side (one column on phones) */
@media (max-width: 1023px) {
  #page.home #orig { height: auto; padding: 38px 24px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #page.home #orig .eyebrow, #page.home #orig h2, #page.home #orig p, #page.home #orig .link, #page.home #orig .script { position: relative; left: auto; top: auto; grid-column: 1 / -1; }
  #page.home #orig .eyebrow { justify-self: start; padding-bottom: 8px; font-size: 13px; }
  #page.home #orig h2 { font-size: 29px; line-height: 33px; }
  #page.home #orig p { font-size: 15px; line-height: 22px; }
  #page.home #orig .link { font-size: 14px; }
  #page.home #orig .script { font-size: 19px; line-height: 23px; margin: 2px 0 6px 2px; transform: rotate(-3deg); }
  #page.home #orig .ofeat { position: relative; left: auto !important; top: auto; width: auto; height: 270px; grid-column: 1 / -1; margin-top: 6px; }
  #page.home #orig .ofeat .otxt { left: 18px; right: 62px; bottom: 16px; }
  #page.home #orig .ofeat .otxt i { font-size: 10.5px; }
  #page.home #orig .ofeat .otxt b { font-size: 27px; line-height: 31px; }
  #page.home #orig .ofeat .otxt small { font-size: 13.5px; line-height: 18px; }
  #page.home #orig .ofeat .circ { width: 36px; height: 36px; right: 16px; bottom: 16px; }
  #page.home #orig .ocard { position: relative; left: auto !important; top: auto; width: auto; height: auto; }
  #page.home #orig .ocard img { height: 160px; }
  #page.home #orig .ocard .otxt { position: relative; left: auto; right: auto; top: auto; padding: 16px 16px 20px; }
  #page.home #orig .ocard .otxt i { font-size: 10px; }
  #page.home #orig .ocard .otxt b { margin-top: 4px; font-size: 18px; line-height: 22px; }
  #page.home #orig .ocard .otxt small { margin-top: 6px; font-size: 13px; line-height: 19px; }
  #page.home #orig .ocard .circ { top: 134px; right: 14px; width: 34px; height: 34px; }
  #page.home #orig .ocard strong { top: 128px; left: 12px; padding: 5px 11px 5px 8px; font-size: 10.5px; }
}
@media (max-width: 639px) {
  #page.home #orig { grid-template-columns: 1fr; padding: 34px 20px 30px; }
  #page.home #orig .ofeat { height: 250px; }
  #page.home #orig .ofeat .otxt b { font-size: 25px; line-height: 29px; }
  #page.home #orig .ocard img { height: 180px; }
  #page.home #orig .ocard .circ { top: 154px; }
  #page.home #orig .ocard strong { top: 148px; }
}

#bq { height: 264px; background: var(--cream-2); }
.bq-wrap { position: absolute; left: 10px; top: -1px; width: 1004px; height: 261px; border: 3px solid var(--gold); border-radius: 18px; overflow: hidden; background: #f9f3e9; box-shadow: 0 14px 34px rgba(12,35,64,.20), 0 2px 6px rgba(12,35,64,.10); }   /* gold outer frame on Boutique (Krishna); Originals stands out by size/motion instead, no frame there */
.bq-wrap > .photo { transition: transform 9s ease-out; transform-origin: 60% 55%; position: absolute; left: 283px; top: 0; width: 712px; height: 252px; background: url(img/boutique.jpg) center / 100% 100% no-repeat; }
.bq-wrap > .fade { position: absolute; left: 0; top: 0; width: 460px; height: 100%; background: linear-gradient(90deg, #f9f3e9 0, #f9f3e9 268px, rgba(249,243,233,.86) 300px, rgba(249,243,233,.4) 350px, rgba(249,243,233,0) 420px); }
.bq-wrap > .shade { position: absolute; left: 760px; top: 0; width: 240px; height: 100%; background: linear-gradient(90deg, rgba(20,10,5,0), rgba(20,10,5,.18)); }
.bq-wrap .eyebrow { left: 40px; top: 43px; font-size: 13px; font-weight: 600; letter-spacing: 1.4px; color: #c19230; }
.bq-wrap .eyebrow::before { content: ''; position: absolute; left: -14px; top: 1px; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, #e0bb6c, #cea350); }
.bq-wrap h2 { left: 40px; top: 64px; font-family: var(--serif); font-weight: 400; font-size: 29.5px; line-height: 34px; color: #10284a; }
.bq-wrap p { left: 40px; top: 108px; font-size: 11.6px; line-height: 15.5px; color: #26344a; }
.bq-wrap .gold-btn { left: 40px; top: 166px; width: 223px; height: 37px; border-radius: 19px; font-size: 14.2px; font-weight: 600; color: #10284a; background: linear-gradient(180deg, #e0bb6c, #cea350); gap: 11px; }
.bq-wrap .gold-btn .ic { font-size: 15px; stroke-width: 1.9; }
.bq-wrap .script { left: 860px; top: 18px; font-size: 17px; line-height: 23px; transform: rotate(-8deg); transform-origin: left top; }
.bq-wrap .swoosh { position: absolute; left: 905px; top: 140px; width: 60px; height: 12px; }
.bq-wrap .bq-feat { position: absolute; left: 296px; top: 200px; width: 222px; height: 44px; box-sizing: border-box; padding: 5px 10px 0; border-radius: 12px; background: rgba(8,22,42,.38); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid rgba(227,187,98,.6); box-shadow: 0 2px 10px rgba(8,22,42,.18); color: #fff; z-index: 2; cursor: default; }
.bq-wrap .bq-feat strong { display: flex; align-items: center; gap: 4px; font-family: var(--serif); font-weight: 600; font-size: 13.2px; line-height: 18px; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.bq-wrap .bq-feat strong .ic { flex: none; font-size: 11px; color: #f0cc7a; }
.bq-wrap .bq-feat span { display: block; margin-top: 1px; font-size: 8px; line-height: 11px; letter-spacing: .2px; color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; }
.bchip { position: absolute; top: 200px; width: 148px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; box-sizing: border-box; border-radius: 12px; background: rgba(8,22,42,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(224,187,108,.35); color: #fff; z-index: 2; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s ease, transform .4s ease, background .15s, border-color .15s; }
.bchip img { display: block; flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.bchip span { flex: 1; min-width: 0; line-height: 1.2; }
.bchip b { display: block; font-size: 9.4px; font-weight: 700; white-space: nowrap; }
.bchip i { display: block; font-style: normal; font-size: 8px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); }
.bchip .ic { flex: none; font-size: 11px; color: var(--gold); transition: transform .15s; }
.bq-wrap:hover .bchip, .bq-wrap:focus-within .bchip { opacity: 1; transform: none; pointer-events: auto; transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s, 0s; }
.bq-wrap:hover .bchip:hover, .bq-wrap .bchip:focus-visible { background: rgba(8,22,42,.92); border-color: var(--gold); transform: translateY(-2px); transition-delay: 0s; }
@media (hover: none) { .bchip { opacity: 1; transform: none; pointer-events: auto; } }
.bq-wrap .bq-hint { display: none; position: absolute; right: 18px; bottom: 18px; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 14px; background: rgba(8,22,42,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(224,187,108,.45); color: #fff; font-size: 9.6px; font-weight: 600; letter-spacing: .5px; pointer-events: none; z-index: 2; transition: opacity .3s ease, transform .3s ease; animation: bq-hint-pulse 2.6s ease-in-out infinite; }
.bq-wrap .bq-hint svg { width: 11px; height: 11px; color: var(--gold); }
@media (hover: hover) { .bq-wrap .bq-hint { display: flex; } }
.bq-wrap:hover .bq-hint, .bq-wrap:focus-within .bq-hint { opacity: 0; transform: translateY(6px); animation: none; }
@keyframes bq-hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,187,108,.0); } 50% { box-shadow: 0 0 0 5px rgba(224,187,108,.22); } }
@media (prefers-reduced-motion: reduce) { .bq-wrap .bq-hint { animation: none; } }
@media (prefers-reduced-motion: reduce) { .bchip { transition: none; transform: none; } }
.bchip:hover .ic, .bchip:focus-visible .ic { transform: translateX(2px); }

.bq-wrap:hover > .photo, .bq-wrap:focus-within > .photo { transform: scale(1.07); }
.bchip .bbadge { position: absolute; top: -7px; right: 10px; padding: 2px 7px; border-radius: 8px; background: linear-gradient(180deg, #e8c377, #d0a54f); color: #10284a; font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; line-height: 1.2; box-shadow: 0 1px 4px rgba(0,0,0,.3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bq-wrap > .photo { transition: none; transform: none !important; } }


/* tablet / phone: photo on top with the caption over it, then the words and button, then the three stays as a list (they are hover-only on desktop) */
@media (max-width: 1023px) {
  #page.home #bq { height: auto; padding: 10px 12px 28px; }
  #page.home .bq-wrap { position: relative; left: auto; top: auto; width: auto; height: auto; display: grid; grid-template-columns: 1fr; align-content: start; padding-bottom: 22px; border-radius: 18px; }
  #page.home .bq-wrap > .photo { position: relative; left: auto; top: auto; width: 100%; height: 250px; order: 1; background-size: cover; background-position: 55% 55%; transform: none !important; }
  #page.home .bq-wrap > .fade, #page.home .bq-wrap > .shade, #page.home .bq-wrap .swoosh, #page.home .bq-wrap .bq-hint { display: none !important; }
  #page.home .bq-wrap .bq-feat { left: 14px; top: 194px; width: auto; max-width: calc(100% - 28px); height: auto; padding: 8px 12px 8px; }
  #page.home .bq-wrap .bq-feat strong { font-size: 15px; line-height: 20px; white-space: normal; }
  #page.home .bq-wrap .bq-feat span { font-size: 11px; line-height: 15px; white-space: normal; }
  #page.home .bq-wrap .script { left: auto; right: 18px; top: 16px; font-size: 21px; line-height: 27px; }
  #page.home .bq-wrap .eyebrow, #page.home .bq-wrap h2, #page.home .bq-wrap p { position: relative; left: auto; top: auto; margin-left: 30px; margin-right: 22px; }
  #page.home .bq-wrap .eyebrow { order: 2; margin-top: 24px; font-size: 13px; }
  #page.home .bq-wrap .eyebrow::before { left: -14px; }
  #page.home .bq-wrap h2 { order: 3; margin-top: 8px; font-size: 32px; line-height: 37px; }
  #page.home .bq-wrap p { order: 4; margin-top: 10px; font-size: 15px; line-height: 22px; }
  #page.home .bq-wrap .gold-btn { position: relative; left: auto; top: auto; order: 5; width: auto; height: 48px; justify-self: start; margin: 18px 22px 0 22px; padding: 0 26px; font-size: 15.5px; }
  #page.home #bq .bchip { position: relative; left: auto !important; top: auto; order: 6; width: auto; height: 62px; margin: 14px 22px 0; padding: 0 16px 0 9px; gap: 12px; opacity: 1; transform: none; pointer-events: auto; transition: none; background: #10284a; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #page.home #bq .bchip img { width: 46px; height: 46px; border-radius: 10px; }
  #page.home #bq .bchip b { font-size: 14.5px; }
  #page.home #bq .bchip i { font-size: 10.5px; }
  #page.home #bq .bchip .ic { font-size: 15px; }
  #page.home #bq .bchip .bbadge { font-size: 8px; top: -8px; }
}
@media (max-width: 639px) {
  #page.home .bq-wrap > .photo { height: 230px; }
  #page.home .bq-wrap .bq-feat { top: 176px; }
  #page.home .bq-wrap h2 { font-size: 30px; line-height: 35px; }
}

/* SECTION 08 - The IKOU Way: a compact full-width strip. Brand line + button on the left, the six steps and the pace chips on the right. Every element links into discover.html. */
#way { height: 138px; background: linear-gradient(180deg, #1d3826 0%, #152a1c 55%, #10221a 100%); color: #fff; }
#way::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(216,175,99,0), rgba(216,175,99,.55) 30%, rgba(216,175,99,.55) 70%, rgba(216,175,99,0)); }
#way .eyebrow { left: 54px; top: 16px; }
#way h2 { left: 53px; top: 34px; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 22px; letter-spacing: -.1px; white-space: nowrap; }
#way h2 em { font-style: italic; color: var(--gold-light); }

#way .wline { position: absolute; left: 369px; top: 32px; width: 596px; height: 1px; background: linear-gradient(90deg, rgba(216,175,99,.65), rgba(216,175,99,.25)); }
.wstep { position: absolute; top: 15px; width: 104px; height: 82px; text-align: center; color: #fff; }
.wstep .wic { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; background: #152a1c; border: 1px solid var(--gold); color: var(--gold); font-size: 17px; transition: background .15s, color .15s, transform .15s; }
.wstep .wic .ic { stroke-width: 1.4; }
.wstep b { display: block; margin-top: 6px; font-size: 9.6px; font-weight: 600; letter-spacing: 1px; line-height: 12px; text-transform: uppercase; transition: color .15s; }
.wstep em { display: block; margin: 3px auto 0; width: 96px; font-style: normal; font-size: 9px; line-height: 12px; color: rgba(255,255,255,.78); }
.wstep:hover .wic, .wstep:focus-visible .wic { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
.wstep:hover b, .wstep:focus-visible b { color: var(--gold-light); }
.wstep:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }

.wpace { position: absolute; display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; }
.wpace .wlabel { margin-right: 2px; font-size: 8.6px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-light); white-space: nowrap; }
.wpace a { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 12px; border: 1px solid rgba(216,175,99,.55); font-size: 9.6px; font-weight: 500; color: #fff; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.wpace a .ic { font-size: 12px; color: var(--gold); stroke-width: 1.5; transition: color .15s; }
.wpace a:hover, .wpace a:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.wpace a:hover .ic, .wpace a:focus-visible .ic { color: var(--navy); }
.wpace a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* one balanced way to travel: the tag after the pace chips */
.wpace .wtag { margin-left: 8px; font-family: var(--serif); font-style: italic; font-size: 11.5px; line-height: 14px; color: var(--gold-light); white-space: nowrap; }

/* serial highlight: Listen -> Create -> Curate -> Prepare -> Experience -> Remember, one step every 1.5s, then it starts again. A spark travels along the line with it. */
@keyframes wglow {
  0%   { background: #152a1c; color: var(--gold); box-shadow: 0 0 0 0 rgba(216,175,99,0); transform: none; }
  3%, 14% { background: var(--gold); color: var(--navy); box-shadow: 0 0 14px 2px rgba(216,175,99,.5); transform: translateY(-2px); }
  18%, 100% { background: #152a1c; color: var(--gold); box-shadow: 0 0 0 0 rgba(216,175,99,0); transform: none; }
}
@keyframes wtitle {
  0% { color: #fff; }
  3%, 14% { color: var(--gold-light); }
  18%, 100% { color: #fff; }
}
@keyframes wspark {
  0%   { left: 15px; opacity: 0; }
  2%   { opacity: 1; }
  83.3% { left: 545px; opacity: 1; }
  87%, 100% { left: 563px; opacity: 0; }
}
.wstep .wic { animation: wglow 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
.wstep b { animation: wtitle 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s); }
#way .wline::after { content: ''; position: absolute; left: 0; top: -1px; width: 36px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(232,195,117,0), var(--gold-light), rgba(232,195,117,0)); animation: wspark 9s linear infinite; }
/* while the pointer or keyboard focus is in the strip the sequence rests, so hover and focus states show normally */
#way:hover .wstep .wic, #way:hover .wstep b, #way:focus-within .wstep .wic, #way:focus-within .wstep b, #way:hover .wline::after, #way:focus-within .wline::after { animation: none; }
#way:hover .wline::after, #way:focus-within .wline::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .wstep .wic, .wstep b, #way .wline::after { animation: none; }
  #way .wline::after { opacity: 0; }
}
/* tablet / phone: heading + button, the six steps in a grid, then the pace chips. The desktop connecting line is hidden; the step glow still runs in order. */
@media (max-width: 1023px) {
  #page.home #way { height: auto; padding: 36px 24px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
  #page.home #way .eyebrow, #page.home #way h2, #page.home #way .gold-btn, #page.home #way .wpace { grid-column: 1 / -1; }
  #page.home #way .eyebrow { position: relative; left: auto; top: auto; font-size: 12px; }
  #page.home #way h2 { position: relative; left: auto; top: auto; margin-top: -10px; font-size: 27px; line-height: 33px; white-space: normal; }
  #page.home #way .gold-btn { position: relative !important; left: auto !important; top: auto !important; width: 210px !important; height: 46px !important; margin-top: -4px; font-size: 14.5px; }
  #page.home #way .wline { display: none; }
  #page.home #way .wstep { position: relative; left: auto !important; top: auto; width: auto; height: auto; }
  #page.home #way .wstep .wic { width: 48px; height: 48px; font-size: 23px; }
  #page.home #way .wstep b { margin-top: 9px; font-size: 12.5px; line-height: 16px; }
  #page.home #way .wstep em { width: auto; margin-top: 4px; font-size: 13px; line-height: 18px; }
  #page.home #way .wpace { position: relative; left: auto !important; top: auto !important; flex-wrap: wrap; gap: 9px; }
  #page.home #way .wpace .wlabel { flex-basis: 100%; margin: 0 0 2px; font-size: 11px; }
  #page.home #way .wpace a { height: 38px; padding: 0 15px 0 12px; border-radius: 19px; font-size: 13.5px; }
  #page.home #way .wpace a .ic { font-size: 16px; }
  #page.home #way .wpace .wtag { flex-basis: 100%; margin: 6px 0 0; font-size: 17px; line-height: 22px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  #page.home #way { grid-template-columns: repeat(6, 1fr); gap: 26px 10px; }
}
@media (max-width: 639px) {
  #page.home #way { padding: 32px 20px 30px; }
  #page.home #way h2 { font-size: 22px; line-height: 29px; }
}

/* SECTION 10 - footer. Logo: the real dark-background brand file (assets/logo/ikou-dark-inverted.png, keyed from IKOU Primary Logo\DarkInverted.svg so it sits on the footer navy). */
#foot { height: 100px; background: linear-gradient(180deg, #002841 0%, #00273f 60%, #001f33 100%); color: #fff; }
#foot .logo { position: absolute; left: 50px; top: 13px; display: block; width: 124px; transition: opacity .15s; }
#foot .logo img { display: block; width: 100%; height: auto; }
#foot .logo:hover { opacity: .88; }
#foot .logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

.fnav { position: absolute; left: 216px; top: 20px; display: flex; gap: 34px; }
.fnav a { position: relative; padding: 6px 0; font-size: 10.6px; font-weight: 500; letter-spacing: .2px; white-space: nowrap; transition: color .15s; }
.fnav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.fnav a:hover, .fnav a:focus-visible { color: var(--gold-light); }
.fnav a:hover::after, .fnav a:focus-visible::after { transform: scaleX(1); }
.fnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.soc { position: absolute; top: 22px; font-size: 22px; transition: filter .15s, transform .15s; }
.soc:hover, .soc:focus-visible { filter: brightness(1.15) drop-shadow(0 2px 6px rgba(0,0,0,.4)); transform: translateY(-2px); }
.soc:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.soc .ic { stroke-width: 1.8; }
.soc .fill { fill: currentColor; stroke: none; }

#foot .rule { position: absolute; left: 216px; top: 54px; width: 759px; height: 1px; background: rgba(255,255,255,.16); }
#foot .copy { left: 216px; top: 65px; font-size: 9.4px; color: rgba(255,255,255,.85); }
#foot .copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
#foot .copy a:hover, #foot .copy a:focus-visible { color: var(--gold-light); }
#foot .copy a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
#foot .tagline { right: 49px; top: 65px; font-size: 9.4px; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: rgba(255,255,255,.85); }
#foot .tagline::before { content: ''; width: 30px; height: 1.5px; background: var(--gold); display: block; }
#foot::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(216,175,99,0), rgba(216,175,99,.45) 30%, rgba(216,175,99,.45) 70%, rgba(216,175,99,0)); }

.fsoc { display: contents; }
/* tablet / phone: logo and social icons on one row, the nav wraps below, then the copyright and the line */
@media (max-width: 1023px) {
  #page.home #foot { height: auto; padding: 30px 24px 26px; display: grid; grid-template-columns: 1fr auto; gap: 20px 12px; align-items: center; }
  #page.home #foot .logo { position: static; width: 168px; grid-column: 1; grid-row: 1; }
  #page.home #foot .fsoc { display: flex; gap: 20px; grid-column: 2; grid-row: 1; justify-self: end; }
  #page.home #foot .soc { position: static; font-size: 28px; }
  #page.home #foot .fnav { position: static; grid-column: 1 / -1; flex-wrap: wrap; gap: 2px 26px; }
  #page.home #foot .fnav a { padding: 10px 0; font-size: 15px; }
  #page.home #foot .rule { position: static; grid-column: 1 / -1; width: auto; }
  #page.home #foot .copy, #page.home #foot .tagline { position: static; grid-column: 1 / -1; font-size: 12.5px; }
}
@media (max-width: 639px) {
  #page.home #foot { padding: 26px 20px 24px; }
  #page.home #foot .logo { width: 150px; }
  #page.home #foot .fsoc { gap: 16px; }
}

/* touch targets >= 44px on tablet / phone (rule 13); appended, the rules above are unchanged */
@media (max-width: 1023px) {
  #page.home #foot .fnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  #page.home #foot .fsoc { gap: 4px; }
  #page.home #foot .soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
}
@media (max-width: 639px) {
  #page.home #foot .fsoc { gap: 0; }
}

/* ===== inner pages (src\pages\*.css) ===== */
/* PAGE KIT (src\pages\_kit.css) - the shared components every generated inner page is built from (classes pg-*).
   Same 1024px design canvas as the home page, sections stack in normal flow. Site tokens ONLY (src\base.css): no new colours, no new fonts.
   Rendered by tools\lib-blocks.ps1 (JSON pages) or written by hand in src\pages\<name>.html. Change a component here and every page follows. */
/* DENSITY: one knob for every kit page. Sections are always full width (1024px canvas, edge to edge); only the vertical padding is set here. Heights come from content, never from fixed values. */
:root { --pg-y: 20px; --pg-x: 54px; --pg-fs: 1; }
/* AUTO-SPAN TYPE SCALE (Krishna 2026-09-22): as sections get shorter, HEADINGS scale down with them so a heading never looks oversized for its band.
   --pg-fs is the multiplier for this page's density tier (1 = full kit size, .88 = country pages, the tightest tier). Every headline rule below reads
   `calc(<base>px * var(--pg-fs))` wrapped in `max(<floor>px, ...)` so it can shrink toward the floor but never past it. Small body/label text (eyebrows,
   card copy, facts, FAQ answers, tags) is NOT scaled: those are already at the site's readability floor (12.5-13px on phone, rule 13) and stay fixed.
   Add a new density tier by setting --pg-fs on that scope (e.g. `.pg-xyz { --pg-fs: .8; }`); every heading rescales automatically, nothing to edit per-rule. */
.pg-main { display: block; width: 1024px; background: var(--cream); }
.pg { position: relative; width: 1024px; padding: var(--pg-y) var(--pg-x); overflow: hidden; }
.pg-navy  { background: linear-gradient(180deg, #002841 0%, #001f33 100%); color: #fff; }
.pg-green { background: linear-gradient(180deg, #1d3826 0%, #152a1c 55%, #10221a 100%); color: #fff; }   /* same forest gradient as the home page IKOU Way strip */
.pg-ivory { background: var(--cream); color: var(--navy); }   /* kept so old "bg": "ivory" still builds: every light band is the home-page cream (Krishna 2026-09-21) */
.pg-navy .pg-head p:not(.pg-eyebrow), .pg-green .pg-head p:not(.pg-eyebrow) { color: rgba(255,255,255,.82); }
.pg-navy .pg-eyebrow.pg-gold, .pg-green .pg-eyebrow.pg-gold { color: var(--gold-light); }
.pg-cream { background: var(--cream); color: var(--navy); }
.pg-white { background: var(--cream); color: var(--navy); }   /* "white" bands are the home-page cream too: index.html has no white band */
.pg-center { text-align: center; }
.pg h1, .pg h2, .pg h3, .pg-hero h1 { font-family: var(--serif); font-weight: 400; }
.pg-navy h2, .pg-green h2 { color: #fff; }
.pg-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 1.9px; text-transform: uppercase; color: var(--gold-light); }
.pg-eyebrow.pg-gold { color: var(--gold-text); font-weight: 600; }
.pg-script { display: inline-block; font-family: var(--script); font-size: 21px; line-height: 1.1; color: var(--gold-light); transform: rotate(-4deg); }
.pg-script.big { font-size: 28px; margin-bottom: 6px; }
.pg-sub { margin-top: 10px; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.8); }

/* buttons + links */
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pg-actions-c { justify-content: center; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 38px; padding: 0 22px; border-radius: 19px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; transition: filter .15s, transform .15s, background .15s, color .15s, border-color .15s; }
.pg-btn .ic { font-size: 14px; stroke-width: 1.8; }
.pg-btn-gold { background: linear-gradient(180deg, #e2bd70, #d5ab5e); color: #1c2333; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.pg-btn-gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.pg-btn-ghost { border: 1px solid rgba(216,175,99,.75); color: #fff; }
.pg-btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-1px); }
.pg-btn-line { border: 1px solid var(--gold-text); color: var(--navy); }
.pg-btn-line:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-1px); }
.pg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pg-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--gold-text); }
.pg-link .ic { font-size: 14px; transition: transform .15s; }
.pg-link:hover .ic, .pg-link:focus-visible .ic { transform: translateX(3px); }
.pg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-link:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.pg-split-text p a, .pg-faq-a a, .pg-prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.pg-split-text p a:hover, .pg-faq-a a:hover, .pg-prose a:hover { color: var(--navy); }

/* breadcrumb (generated by tools\lib-page.ps1, matches the BreadcrumbList schema) */
.pg-crumbs { margin-bottom: 14px; font-size: 10.5px; letter-spacing: .4px; }
.pg-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-crumbs li { color: var(--gold-light); }
.pg-crumbs li + li::before { content: '\203A'; margin-right: 8px; color: rgba(255,255,255,.5); }
.pg-crumbs a { color: rgba(255,255,255,.72); transition: color .15s; }
.pg-crumbs a:hover, .pg-crumbs a:focus-visible { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* hero: navy, copy on the left, framed photo on the right (plain variant has no photo) */
.pg-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 1024px; padding: 14px var(--pg-x) 18px; overflow: hidden; }
.pg-hero::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(216,175,99,0), rgba(216,175,99,.55) 30%, rgba(216,175,99,.55) 70%, rgba(216,175,99,0)); }
.pg-hero-copy { flex: 1; max-width: 500px; }
.pg-hero h1 { margin-top: 8px; font-size: max(32px, calc(36px * var(--pg-fs))); line-height: 1.17; letter-spacing: -.3px; color: #fff; }
.pg-lede { margin-top: 10px; max-width: 480px; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.84); }
.pg-hero-photo { position: relative; flex: none; width: 370px; height: 190px; margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(216,175,99,.5); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.pg-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 16px; background: rgba(8,22,42,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(224,187,108,.35); font-size: 10.5px; letter-spacing: .4px; color: #fff; }
.pg-chip .ic { font-size: 13px; color: var(--gold); }
/* full-bleed hero (country pages): photo fills the whole section, navy fade keeps the copy readable */
.pg-hero-full { min-height: 260px; padding-top: 16px; padding-bottom: 22px; }
.pg-hero-full .pg-hero-photo { position: absolute; inset: 0; z-index: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.pg-hero-full .pg-hero-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,22,42,.84) 0%, rgba(8,22,42,.6) 34%, rgba(8,22,42,.1) 60%, rgba(8,22,42,0) 100%), linear-gradient(0deg, rgba(8,22,42,.3) 0%, rgba(8,22,42,0) 35%); }
.pg-hero-full .pg-hero-copy { position: relative; z-index: 1; text-shadow: 0 1px 12px rgba(8,22,42,.45); }
.pg-hero-full .pg-chip { left: auto; right: var(--pg-x); bottom: 16px; z-index: 1; }
.pg-hero-plain { padding-bottom: 20px; }
.pg-hero-plain .pg-hero-copy { max-width: 700px; }
.pg-hero-plain .pg-lede { max-width: 600px; }

/* quick-facts strip */
.pg-facts { width: 1024px; background: var(--cream); border-bottom: 1px solid rgba(216,175,99,.35); }
.pg-facts dl { display: flex; padding: 0 54px; }
.pg-facts dl > div { flex: 1; padding: 8px 14px 7px; }
.pg-facts dl > div:first-child { padding-left: 0; }
.pg-facts dl > div + div { border-left: 1px solid rgba(216,175,99,.45); }
.pg-facts dt { font-size: 9.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-text); }
.pg-facts dd { margin-top: 3px; font-family: var(--serif); font-size: 14.5px; line-height: 19px; color: var(--navy); }

/* minimum-package price strip ("starting from"): ONE compact row (price + scope + CTA), full detail behind a closed native <details>
   disclosure -- an "attraction", not a package wall: no card, no shadow, no box, same quiet register as the facts bar above it. */
.pg-price-strip { max-width: 900px; margin: 0 auto; }
.pg-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pg-price-lead { min-width: 220px; }
.pg-price-tag { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text); }
.pg-price-amt { margin-top: 3px; font-family: var(--serif); font-size: max(24px, calc(28px * var(--pg-fs))); line-height: 1.15; color: var(--navy); }
.pg-price-amt span { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--gray); }
.pg-price-scope { margin-top: 3px; font-size: 11px; line-height: 15px; color: var(--gray); }
.pg-price-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pg-price-more { position: relative; }
.pg-price-more summary { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 2px; cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; color: var(--gold-text); white-space: nowrap; transition: color .15s; }
.pg-price-more summary::-webkit-details-marker { display: none; }
.pg-price-more summary::after { content: '+'; flex: none; font-family: var(--sans); font-size: 18px; line-height: 1; color: var(--gold-text); }
.pg-price-more[open] summary::after { content: '\2212'; }
.pg-price-more summary:hover { color: var(--navy); }
.pg-price-more summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.pg-price-panel { width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(216,175,99,.35); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.pg-price-h { grid-column: span 1; font-size: 9.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.pg-price-panel ul { list-style: none; display: grid; gap: 5px; align-content: start; }
.pg-price-inc li { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 16px; color: var(--navy); }
.pg-price-inc .ic { flex: none; margin-top: 2px; font-size: 12px; color: var(--gold-text); }
.pg-price-exc li { position: relative; padding-left: 15px; font-size: 11.5px; line-height: 16px; color: var(--gray); }
.pg-price-exc li::before { content: '\2013'; position: absolute; left: 0; color: var(--gray); }
.pg-price-cond { grid-column: 1 / -1; margin-top: 8px; font-size: 10.5px; line-height: 15px; font-style: italic; color: var(--gray); }
.pg-price-note { max-width: 640px; margin: 12px auto 0; text-align: center; font-size: 10.5px; line-height: 15px; color: var(--gray); }
.pg-price-div { border: 0; border-top: 1px solid rgba(216,175,99,.3); margin: 16px 0; }

/* section heading block */
.pg-head { max-width: 640px; margin: 0 auto 10px; text-align: center; }
.pg-head h2 { margin-top: 5px; font-size: max(20px, calc(24px * var(--pg-fs))); line-height: 1.25; letter-spacing: -.1px; }
.pg-head p:not(.pg-eyebrow) { margin-top: 5px; font-size: 12.5px; line-height: 19px; color: var(--gray); }

/* intro: text + photo / quote card */
.pg-split { display: grid; grid-template-columns: 1fr 330px; gap: 40px; align-items: center; }
.pg-split-rev { grid-template-columns: 330px 1fr; }
.pg-split-rev .pg-split-side { order: -1; }
.pg-split-solo { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; }
.pg-split-text h2 { margin-top: 6px; font-size: max(21px, calc(25px * var(--pg-fs))); line-height: 1.24; letter-spacing: -.2px; }
.pg-split-text p:not(.pg-eyebrow) { margin-top: 8px; font-size: 12.5px; line-height: 20px; color: var(--gray); }
.pg-photo { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(12,35,64,.18); }
.pg-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pg-qcard { padding: 14px 20px 12px; border-radius: 20px; background: var(--navy-deep); color: #fff; border: 1px solid rgba(216,175,99,.5); }
.pg-qcard p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 25px; color: #fff; }
.pg-qcard .pg-script { margin-top: 8px; }
.pg-photo + .pg-qcard { margin-top: 12px; }

/* cards (clickable) */
.pg-cards { display: grid; gap: 16px; }
.pg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pg-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pg-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 4px 16px rgba(12,35,64,.10); transition: transform .2s, box-shadow .2s; }
.pg-card:hover, .pg-card:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(12,35,64,.2); }
.pg-card:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.pg-card-photo { display: block; height: 92px; overflow: hidden; }
.pg-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.pg-card:hover .pg-card-photo img { transform: scale(1.05); }
.pg-card-num { display: flex; align-items: center; justify-content: center; height: 40px; background: var(--cream); border-bottom: 1px solid rgba(216,175,99,.45); font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--gold-text); }
.pg-card-body { display: block; flex: 1; padding: 12px 16px 4px; }
.pg-card-tag { display: block; margin-bottom: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-text); }
.pg-card h3 { font-size: max(15px, calc(17px * var(--pg-fs))); line-height: 1.3; }
.pg-card-body p { margin-top: 4px; font-size: 11.5px; line-height: 17px; color: var(--gray); }
.pg-card-go { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--gold-text); transition: background .15s, color .15s; }
.pg-card-go .ic { font-size: 14px; }
.pg-card:hover .pg-card-go, .pg-card:focus-visible .pg-card-go { background: var(--navy-deep); color: var(--gold); }

/* card layouts: (default) photo on top | row: photo left, text right | compact: number left, no photo. Set "layout" on a cards section. */
.pg-layout-row .pg-card { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: 1fr auto; }
.pg-layout-row .pg-card-photo { position: relative; grid-row: 1 / 3; height: auto; min-height: 140px; }
.pg-layout-row .pg-card-photo img { position: absolute; inset: 0; }
.pg-layout-compact .pg-card { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: 1fr auto; }
.pg-layout-compact .pg-card-num { grid-row: 1 / 3; height: auto; border-bottom: 0; border-right: 1px solid rgba(216,175,99,.45); font-size: 20px; }
.pg-layout-compact .pg-card-body { padding: 10px 14px 2px; }
.pg-layout-compact .pg-card-go { padding: 4px 14px 9px; }

/* places: one card per island / region / city (photo optional), a short list of real places to visit, how to reach it, one action */
.pg-places { display: grid; gap: 16px; }
.pg-place { display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 4px 16px rgba(12,35,64,.10); }
.pg-place .pg-card-photo { height: 78px; }
.pg-place:hover .pg-card-photo img { transform: none; }
.pg-place-body { flex: 1; padding: 9px 14px 4px; }
.pg-place h3 { font-size: max(16px, calc(19px * var(--pg-fs))); line-height: 1.26; }
.pg-place-body > p { margin-top: 4px; font-size: 11.5px; line-height: 17px; color: var(--gray); }
.pg-place-list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid rgba(216,175,99,.45); }
.pg-place-list li { position: relative; padding: 5px 0 5px 14px; border-bottom: 1px solid rgba(216,175,99,.25); font-size: 11.5px; line-height: 16px; color: var(--navy); }
.pg-place-list li::before { content: ""; position: absolute; left: 1px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.pg-place-how { display: flex; align-items: flex-start; gap: 5px; margin-top: 9px; font-size: 11px; line-height: 16px; font-style: italic; color: var(--gold-text); }
.pg-place-how .ic { flex: none; font-size: 13px; margin-top: 2px; }
.pg-place-go { border-top: 1px solid rgba(216,175,99,.45); }
.pg-place-go:hover, .pg-place-go:focus-visible { background: var(--navy-deep); color: var(--gold); }
.pg-place-go:focus-visible { outline: 2px solid var(--gold-text); outline-offset: -3px; }

/* itinerary: a SAMPLE journey, day badge left, title + one or two lines right, in two columns. Always followed by the sample note + a WhatsApp button. */
.pg-itin { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; }
.pg-itin-cols-1 { grid-template-columns: 1fr; }
.pg-itin-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pg-itin-day { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(216,175,99,.45); }
.pg-itin-n { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 22px; color: var(--gold-text); white-space: nowrap; }
.pg-itin-body { display: block; }
.pg-itin-body h3 { font-size: max(14px, calc(16px * var(--pg-fs))); line-height: 1.3; }
.pg-itin-body p { margin-top: 3px; font-size: 11.5px; line-height: 17px; color: var(--gray); }
.pg-itin-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 10px; }
.pg-itin-note { max-width: 560px; font-size: 11.5px; line-height: 17px; font-style: italic; color: var(--gray); }

/* map: a stylized, illustrative map (numbered gold pins over an optional landmass outline, either hand-drawn or a real traced silhouette). Never a real map-tile embed.
   "Ocean" is a genuine light sea-blue (Krishna approved this ONE exception to the navy/gold/cream/green palette 2026-09-26, specifically for map water -
   nowhere else on the site). Land is the site cream with a thin navy coastline (gold stays reserved for the pins/accents). bg:"ocean" makes the WHOLE
   section that sea-blue, edge to edge (not just a framed card), so the island sits directly on open water. */
.pg-ocean { background: linear-gradient(160deg, #bfe0ec 0%, #8fbfd6 100%); color: var(--navy); }
.pg-map { display: flex; flex-direction: column; align-items: center; }
.pg-map-canvas { position: relative; width: 100%; max-width: 900px; aspect-ratio: 4 / 3; }
.pg-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-map-land { fill: var(--cream); fill-rule: evenodd; stroke: var(--navy); stroke-width: 1.5; stroke-opacity: .55; vector-effect: non-scaling-stroke; filter: drop-shadow(0 10px 18px rgba(12,35,64,.22)); }
.pg-map-route { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.pg-map-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pg-map-pin i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--serif); font-size: 13px; font-weight: 600; font-style: normal; box-shadow: 0 2px 8px rgba(12,35,64,.25); }
.pg-map-pin b { font-size: 11px; font-weight: 600; color: var(--navy); background: #fff; padding: 2px 8px; border-radius: 10px; box-shadow: 0 2px 6px rgba(12,35,64,.14); white-space: nowrap; }
.pg-map-pin:hover i, .pg-map-pin:focus-visible i { background: var(--navy); color: var(--gold); }
.pg-map-pin:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 8px; }
.pg-map-list { display: none; }
.pg-map-note { margin-top: 10px; text-align: center; font-size: 11px; font-style: italic; color: var(--navy); opacity: .68; }
.pg-map-compass { position: absolute; top: 4%; right: 3%; width: 46px; height: 46px; }
.pg-map-compass svg { width: 100%; height: 100%; }
.pg-map-compass b { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 10px; font-weight: 700; color: var(--navy); }

/* route: "THE IKOU ROUTE" - the real map (with numbered pins) synced to a tabbed side panel, plus a bottom mood strip. Reuses .pg-map-* for the map itself. */
.pg-route-sec { padding-top: 26px; padding-bottom: 28px; }
.pg-route-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.pg-route-head-l h2 { margin-top: 4px; }
.pg-route-tag { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-text); }
.pg-route-note { text-align: right; font-size: 18px; line-height: 1.35; color: var(--gold-light); transform: rotate(-2deg); white-space: nowrap; }
.pg-route-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.pg-route-map .pg-map-canvas { max-width: none; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #bfe0ec 0%, #8fbfd6 100%); box-shadow: 0 14px 34px rgba(12,35,64,.22); }
/* Zanzibar's traced island outline is unusually tall/narrow (viewBox 96x174, aspect ~0.55); at full column width that makes the map balloon far taller than
   the side panel (Krishna 2026-09-27: "map ... too big"). Cap its width (never its height, which would break the pins' x%/y% alignment to this box) so the
   whole canvas scales down together, aspect-ratio intact; left-aligned (not centred) so it uses the column's own width instead of floating with dead space
   on both sides (Krishna 2026-09-27: "use the left side ... width"). Scoped to this page only (#pg-<slug> = the page's own <main> id), other maps untouched. */
#pg-zanzibar .pg-route-map .pg-map-canvas { max-width: 360px; }
/* Tall/narrow route maps (Maldives, Vietnam, Taiwan, Sri Lanka, Thailand ...) stretched to the full column made the route section 1200-1480px tall.
   Cap the canvas so it is never taller than 540px: width = min(column, 540px x aspect). --ar is set inline by the renderer; the canvas keeps its aspect-ratio,
   so pin x%/y% stay aligned. Desktop/canvas only: the fluid (iPad/phone) rules below set their own width. */
.pg-route-map .pg-map-canvas { width: min(100%, calc(540px * var(--ar, 1.5))); }
.pg-route-panel { display: flex; flex-direction: column; min-width: 0; }
/* tabs are numbered pills (not plain underlined text): easier to scan and to hit as a tap target once there are 6-7 stops */
.pg-route-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pg-route-tab { display: flex; align-items: center; gap: 7px; background: var(--cream); border: 1px solid rgba(216,175,99,.4); border-radius: 999px; padding: 7px 15px 7px 11px; min-height: 38px; cursor: pointer; color: var(--navy); }
.pg-route-tab em { font-family: var(--serif); font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold-text); }
.pg-route-tab span { font-size: 12px; font-weight: 600; }
.pg-route-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(12,35,64,.28); }
.pg-route-tab.on em { color: var(--gold); }
.pg-route-tab:hover, .pg-route-tab:focus-visible { border-color: var(--gold); }
.pg-route-panel-item { display: flex; flex-direction: column; }
.pg-route-panel-item[hidden] { display: none; }
.pg-route-photo { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(12,35,64,.18); }
.pg-route-photo img { display: block; width: 100%; height: 210px; object-fit: cover; }
.pg-route-num { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--gold-text); }
.pg-route-panel-item h3 { margin-top: 2px; font-size: max(20px, calc(26px * var(--pg-fs))); }
.pg-route-mood { margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-text); }
.pg-route-text { margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--gray); }
.pg-route-fact { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--cream); font-size: 12px; font-weight: 600; color: var(--navy); }
.pg-route-fact .ic { flex: none; font-size: 15px; color: var(--gold-text); }
.pg-route-panel-item .pg-btn { align-self: flex-start; margin-top: 14px; }
.pg-route-moods { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(216,175,99,.35); display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.pg-route-moods-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); max-width: 140px; }
.pg-route-mood-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 4px; }
.pg-route-mood-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pg-route-mood-chip .ic { font-size: 20px; color: var(--gold-text); }
.pg-route-mood-chip b { font-weight: 700; color: var(--navy); }
.pg-route-mood-chip em { font-style: normal; color: var(--gray); }
.pg-route-mood-chip b, .pg-route-mood-chip em { display: block; line-height: 1.3; }
.pg-route-arrow { color: rgba(12,35,64,.35); font-size: 13px; }
.pg-route-arrow .ic { display: block; }

.pg-cols-5 { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pg-cols-5 .pg-card-body { padding: 12px 12px 4px; }
.pg-cols-5 .pg-card-go { padding: 8px 12px 10px; }

/* feature (full-width navy band: photo fills the left half edge to edge, copy on the right) */
.pg-feature { padding: 0; }
.pg-feat { display: grid; grid-template-columns: 5fr 6fr; min-height: 210px; }
.pg-feat-media { position: relative; margin: 0; overflow: hidden; min-height: 210px; }
.pg-feat-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-feat-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--pg-y) var(--pg-x); }
.pg-feat-copy h2 { margin-top: 6px; font-size: max(22px, calc(26px * var(--pg-fs))); line-height: 1.23; letter-spacing: -.2px; }
.pg-feat-copy p:not(.pg-eyebrow):not(.pg-feat-note) { margin-top: 8px; font-size: 12.5px; line-height: 20px; color: rgba(255,255,255,.82); }
.pg-feat-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; list-style: none; }
.pg-feat-tags li { padding: 5px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; font-size: 10.5px; letter-spacing: .3px; color: #fff; }
.pg-feat-note { margin-top: 10px; font-size: 11px; line-height: 16px; color: rgba(255,255,255,.7); }
.pg-feat-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }
.pg-feat-cta .pg-actions { margin-top: 0; }
.pg-feat-cta .pg-script { margin: 0; }

/* flash-card variant of feature: the photo half becomes a framed stack of cards (fade, one visible at a time). 30% shorter band: the frame is 210px tall */
.pg-feat-flash { grid-template-columns: calc(var(--pg-x) + 360px) 1fr; min-height: 0; }
.pg-feat-flash .pg-feat-media { min-height: 0; padding: 16px 0 16px var(--pg-x); overflow: visible; }
.pg-feat-flash .pg-feat-copy { padding: 16px var(--pg-x) 16px 40px; }
.pg-feat-flash .pg-feat-copy h2 { margin-top: 4px; font-size: max(19px, calc(22px * var(--pg-fs))); line-height: 1.27; }
.pg-feat-flash .pg-feat-copy p:not(.pg-eyebrow):not(.pg-feat-note) { margin-top: 6px; }
.pg-feat-flash .pg-feat-tags { margin-top: 10px; }
.pg-feat-flash .pg-feat-cta { margin-top: 12px; }
.pg-flash { position: relative; display: grid; height: 180px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(216,175,99,.5); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.pg-flash-card { grid-area: 1 / 1; position: relative; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.pg-flash-card.on { opacity: 1; visibility: visible; }
.pg-flash-card img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-flash-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,20,35,.86), rgba(0,20,35,0) 50%); }
.pg-flash-card figcaption { position: absolute; z-index: 1; left: 14px; right: 112px; bottom: 12px; }
.pg-flash-card figcaption b { display: block; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); }
.pg-flash-card figcaption span { display: block; margin-top: 2px; font-family: var(--serif); font-size: 16px; line-height: 20px; color: #fff; }
.pg-flash-dots { position: absolute; z-index: 2; top: 0; right: 0; display: flex; }
.pg-flash-dots button { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.pg-flash-dots button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background .15s, transform .15s; }
.pg-flash-dots button[aria-current="true"]::before { background: var(--gold); transform: scale(1.3); }
.pg-flash-dots button:hover::before { background: #fff; }
.pg-flash-dots button:focus-visible, .pg-flash-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pg-flash-nav { position: absolute; z-index: 2; bottom: 8px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(216,175,99,.75); background: rgba(8,22,42,.65); color: #fff; cursor: pointer; transition: background .15s, color .15s; }
.pg-flash-nav .ic { font-size: 14px; }
.pg-flash-next { right: 8px; }
.pg-flash-prev { right: 56px; }
.pg-flash-prev .ic { transform: rotate(180deg); }
.pg-flash-nav:hover { background: var(--gold); color: var(--navy); }

/* enquiry (navy panel: copy left, form right; submit opens WhatsApp with the choices pre-typed) */
.pg-cta-enq { padding-top: var(--pg-y); padding-bottom: calc(var(--pg-y) + 2px); }
.pg-enq { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; }
.pg-enq-copy h2 { margin-top: 6px; font-size: max(21px, calc(25px * var(--pg-fs))); line-height: 1.24; letter-spacing: -.2px; }
.pg-enq-lede { margin-top: 8px; font-size: 12.5px; line-height: 20px; color: rgba(255,255,255,.8); }
.pg-enq-copy .pg-script { margin-top: 12px; }
.pg-enq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pg-enq-field { min-width: 0; }
.pg-enq-wide, .pg-enq-actions { grid-column: 1 / -1; }
.pg-enq-field label { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .4px; color: var(--gold-light); }
.pg-enq-form[hidden] { display: none; }
.pg-enq-field select, .pg-enq-field textarea, .pg-enq-field input { display: block; width: 100%; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-family: var(--sans); font-size: 12px; transition: border-color .15s, background .15s; }
.pg-enq-field select, .pg-enq-field input { height: 38px; }
.pg-enq-field input::placeholder { color: rgba(255,255,255,.55); }
.pg-enq-field input:hover { border-color: rgba(216,175,99,.75); }
.pg-enq-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); background: rgba(255,255,255,.14); }
.pg-enq-status { padding: 22px 24px; border: 1px solid rgba(216,175,99,.6); border-radius: 14px; font-size: 14px; line-height: 22px; color: #fff; }
.pg-enq-field textarea { padding: 9px 12px; line-height: 18px; resize: vertical; min-height: 64px; }
.pg-enq-field textarea::placeholder { color: rgba(255,255,255,.55); }
.pg-enq-field option { color: var(--navy); background: #fff; }
.pg-enq-field select:hover, .pg-enq-field textarea:hover { border-color: rgba(216,175,99,.75); }
.pg-enq-field select:focus-visible, .pg-enq-field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); background: rgba(255,255,255,.14); }
.pg-enq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 2px; }
.pg-enq-actions .pg-btn { cursor: pointer; }
.pg-enq-actions button.pg-btn { border: 0; font-family: var(--sans); }
.pg-enq-note { font-size: 10.5px; color: rgba(255,255,255,.7); }

/* card option "go": false hides the action bar; the whole card stays the link */
.pg-nogo .pg-card-go { display: none; }
.pg-nogo .pg-card-body { padding-bottom: 12px; }

/* statement: heading left, one paragraph right */
.pg-statement { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center; }
.pg-statement h2 { margin-top: 6px; font-size: max(22px, calc(26px * var(--pg-fs))); line-height: 1.23; letter-spacing: -.2px; }
.pg-statement-text p { font-size: 12.5px; line-height: 20px; color: var(--gray); }
.pg-statement-text p + p { margin-top: 8px; }
/* statement, "idea" style (fields icon / highlight / chips): airy white band, animated pin + spark badge, gold highlight, example chips */
.pg-idea-sec { padding-top: 12px; padding-bottom: 12px; background: var(--cream); border-bottom: 1px solid rgba(12,35,64,.08); }
.pg-idea { grid-template-columns: .85fr 1.15fr; gap: 32px; }
.pg-idea-head { display: flex; align-items: center; gap: 18px; }
.pg-idea-badge { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(216,175,99,.5), 0 8px 22px rgba(12,35,64,.10), 0 0 0 9px rgba(216,175,99,.12); }
.pg-idea-ic { width: 48px; height: 48px; overflow: visible; }
.pg-idea-ic .pin-body { fill: var(--navy); }
.pg-idea-ic .spark { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: pg-spark 2.8s ease-in-out infinite; }
.pg-idea-ic .pin { animation: pg-pin 3.4s ease-in-out infinite; }
.pg-idea-ic .rip { fill: none; stroke: var(--gold); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; animation: pg-rip 3.4s ease-out infinite; }
.pg-idea-ic .rip.r2 { animation-delay: 1.7s; }
.pg-idea-ic .tw { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: pg-tw 2.8s ease-in-out infinite; }
.pg-idea-ic .tw.t2 { animation-delay: 1.4s; }
@keyframes pg-spark { 0%, 100% { transform: scale(.85) rotate(0); } 50% { transform: scale(1.25) rotate(45deg); } }
@keyframes pg-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pg-rip { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pg-tw { 0%, 100% { transform: scale(.4); opacity: .25; } 50% { transform: scale(1); opacity: 1; } }
.pg-idea h2 { margin-top: 4px; font-size: max(22px, calc(26px * var(--pg-fs))); line-height: 1.23; }

/* compass icon: alternative to the pin+spark "idea" icon (statement block "icon": "compass"), for a founding-story moment.
   A needle settles back and forth like it's finding its heading, and a faint dotted dial slowly turns behind it -- a
   different shape AND a different motion from the pin+spark used elsewhere (Originals), not just a re-timed copy. */
.pg-compass-ic { width: 48px; height: 48px; overflow: visible; }
.pg-compass-ic .cp-ring { fill: none; stroke: var(--navy); stroke-width: 2; opacity: .85; }
.pg-compass-ic .cp-dial { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 1 5.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: pg-compass-spin 16s linear infinite; }
.pg-compass-ic .tick { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.pg-compass-ic .needle { transform-box: fill-box; transform-origin: center; animation: pg-compass-sway 5s ease-in-out infinite; }
.pg-compass-ic .needle-n { fill: var(--gold); }
.pg-compass-ic .needle-s { fill: var(--navy); }
.pg-compass-ic .pivot { fill: var(--navy); }
@keyframes pg-compass-spin { to { transform: rotate(360deg); } }
@keyframes pg-compass-sway { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }

/* about.html only: a slow ambient hero-photo drift (like a living photograph), distinct from Boutique's per-card zoom
   which only fires on its active carousel slide. Scoped to #pg-about (main id = page name). */
#pg-about .pg-hero-photo img { animation: pg-about-drift 20s ease-in-out infinite alternate; }
@keyframes pg-about-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
.pg-hl { background: linear-gradient(transparent 62%, rgba(216,175,99,.5) 62%); color: inherit; padding: 0 3px; margin: 0 -3px; }
.pg-idea .pg-statement-text p:not(.pg-idea-eg) { font-size: 14px; line-height: 22px; color: var(--navy); }
.pg-idea-eg { margin-right: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text); }
.pg-idea-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pg-idea-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--gold-text); border-radius: 18px; background: #fff; font-size: 12px; color: var(--gray); transition: background .15s, border-color .15s, color .15s, transform .15s; }
.pg-idea-chips a b { font-weight: 600; color: var(--navy); }
.pg-idea-chips a:hover, .pg-idea-chips a:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-1px); }
.pg-idea-chips a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* tiles: photo with the text laid over it (destinations, featured originals) + link chips */
.pg-tiles { display: grid; gap: 12px; }
.pg-tile { position: relative; display: block; min-height: 150px; border-radius: 18px; overflow: hidden; color: #fff; box-shadow: 0 4px 16px rgba(12,35,64,.14); transition: transform .2s, box-shadow .2s; }
.pg-tiles-md .pg-tile { min-height: 172px; }
.pg-tile:hover, .pg-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(12,35,64,.24); }
.pg-tile:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.pg-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pg-tile:hover img { transform: scale(1.05); }
.pg-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,26,43,.86), rgba(0,26,43,.06) 68%); }
.pg-tile-tag { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 4px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16); font-style: normal; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; }
.pg-tile-copy { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: block; }
.pg-tile-copy i { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-light); }
.pg-tile-copy b { display: block; margin-top: 2px; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 24px; }
.pg-tiles-md .pg-tile-copy b { font-size: 19px; line-height: 23px; }
.pg-tile-copy span { display: block; margin-top: 4px; font-size: 11px; line-height: 16px; color: rgba(255,255,255,.88); }
.pg-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.pg-chips-label { font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text); }
.pg-chips a { display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid var(--gold-text); border-radius: 16px; font-size: 11px; font-weight: 600; color: var(--navy); transition: background .15s, border-color .15s; }
.pg-chips a:hover, .pg-chips a:focus-visible { background: var(--gold); border-color: var(--gold); }
.pg-chips a:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

/* lenses: numbered cards that open a panel of the real Originals of that kind */
.pg-lens { width: 100%; padding: 0; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.pg-lens .pg-card-go { display: flex; }
.pg-lens .pg-card-go .ic { transition: transform .2s; }
.pg-lens[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(12,35,64,.2); }
.pg-lens[aria-expanded="true"] .pg-card-go { background: var(--navy-deep); color: var(--gold); }
.pg-lens[aria-expanded="true"] .pg-card-go .ic { transform: rotate(180deg); }
/* gold-framed highlight (field "frame": "gold"): a gold line inset from the section edge, a fine inner line, gold corner studs, a soft gold glow, and a small gold diamond on the top line that pulses slowly */
.pg-framed::before { content: ''; position: absolute; inset: 10px; border: 1.5px solid var(--gold); border-radius: 22px; box-shadow: 0 0 22px rgba(216,175,99,.28), inset 0 0 26px rgba(216,175,99,.14); pointer-events: none; z-index: 0; }
.pg-framed::after { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(216,175,99,.4); border-radius: 17px; pointer-events: none; z-index: 0; }
.pg-framed > * { position: relative; z-index: 1; }
.pg-framed .pg-head { position: relative; }
.pg-framed .pg-head::before { content: ''; position: absolute; left: 50%; top: calc(6px - var(--pg-y)); width: 9px; height: 9px; margin-left: -4.5px; background: var(--gold); transform: rotate(45deg); animation: pg-stud 3.2s ease-in-out infinite; }
@keyframes pg-stud { 0%, 100% { transform: rotate(45deg) scale(.8); opacity: .7; } 50% { transform: rotate(45deg) scale(1.15); opacity: 1; } }
/* lenses, highlighted: whitish "warm" band (white fading to cream), gold top edge, ringed icon badge that glows in turn and lights up on hover / open */
.pg-warm { background: var(--cream); color: var(--navy); }   /* same as cream, see .pg-ivory */
.pg-lenses .pg-lens { border-top: 3px solid var(--gold); background: #fff; }
.pg-lenses .pg-card-num { position: relative; flex-direction: column; gap: 0; height: auto; padding: 14px 0 6px; background: #fff; border-bottom: 0; }
.pg-lenses .pg-card-num i { position: absolute; top: 8px; left: 12px; font-size: 13px; line-height: 1; color: var(--gold-text); }
.pg-lenses .pg-card-num:not(:has(.pg-lens-ic)) i { position: static; font-size: 24px; }
.pg-lens-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 0 0 1.5px var(--gold), 0 4px 10px rgba(12,35,64,.10); transition: background .2s, color .2s; animation: pg-lens-glow 10s ease-in-out infinite; }
.pg-lens-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; }
.pg-lens:nth-child(2) .pg-lens-ic { animation-delay: 2s; }
.pg-lens:nth-child(3) .pg-lens-ic { animation-delay: 4s; }
.pg-lens:nth-child(4) .pg-lens-ic { animation-delay: 6s; }
.pg-lens:nth-child(5) .pg-lens-ic { animation-delay: 8s; }
@keyframes pg-lens-glow { 0%, 22%, 100% { box-shadow: 0 0 0 1.5px var(--gold), 0 4px 10px rgba(12,35,64,.10); } 8% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 9px rgba(216,175,99,.28), 0 4px 10px rgba(12,35,64,.10); } }
@keyframes pg-lens-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-9deg) scale(1.15); } 70% { transform: rotate(7deg) scale(1.15); } }
@media (hover: hover) {
  .pg-lens:hover .pg-lens-ic { background: var(--gold); }
  .pg-lens:hover .pg-lens-ic svg { animation: pg-lens-wiggle .6s ease-in-out; }
}
.pg-lens:focus-visible .pg-lens-ic { background: var(--gold); }
.pg-lens[aria-expanded="true"] .pg-lens-ic { background: var(--navy-deep); color: var(--gold); animation: none; }
.pg-lens-panel { margin-top: 12px; padding: 10px 14px; border: 1px solid rgba(216,175,99,.5); border-radius: 16px; background: var(--cream); }
.pg-lens-panel[hidden] { display: none; }
.pg-lens-panel ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; }
.pg-lens-panel a { display: block; padding: 6px 8px; border-radius: 10px; transition: background .15s; }
.pg-lens-panel a:hover, .pg-lens-panel a:focus-visible { background: #fff; }
.pg-lens-panel a:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 1px; }
.pg-lens-panel b { display: block; font-family: var(--serif); font-weight: 500; font-size: 14px; line-height: 19px; color: var(--navy); }
.pg-lens-panel a span { display: block; margin-top: 1px; font-size: 11.5px; line-height: 16px; color: var(--gray); }
/* FAQ accordion (native <details>, keyboard operable) */
.pg-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid rgba(216,175,99,.5); }
.pg-faq-item { border-bottom: 1px solid rgba(216,175,99,.5); }
.pg-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 4px; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 16px; line-height: 22px; color: var(--navy); transition: color .15s; }
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary::after { content: '+'; flex: none; font-family: var(--sans); font-size: 22px; line-height: 1; color: var(--gold-text); }
.pg-faq-item[open] summary::after { content: '\2212'; }
.pg-faq-item summary:hover { color: var(--gold-text); }
.pg-faq-item summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.pg-faq-a { padding: 0 44px 8px 4px; }
.pg-faq-a p { font-size: 12.5px; line-height: 20px; color: var(--gray); }
.pg-faq-a p + p { margin-top: 10px; }

/* gallery */
.pg-gallery { display: grid; gap: 14px; }
.pg-gal-item { margin: 0; }
.pg-gal-item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: 0 6px 20px rgba(12,35,64,.14); }
.pg-gal-item figcaption { margin-top: 8px; font-size: 11px; line-height: 16px; color: var(--gray); }

/* related destinations */
.pg-related { display: grid; gap: 14px; }
.pg-rel { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(12,35,64,.14); transition: transform .2s, box-shadow .2s; }
.pg-rel:hover, .pg-rel:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(12,35,64,.24); }
.pg-rel:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.pg-rel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pg-rel:hover img { transform: scale(1.05); }
.pg-rel span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 26px 12px 9px; background: linear-gradient(0deg, rgba(0,20,35,.86), rgba(0,20,35,0)); color: #fff; }
.pg-rel .ic { flex: none; font-size: 16px; color: var(--gold); }
.pg-rel b { font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; }

/* statement band, prose, closing CTA */
.pg-band { padding: var(--pg-y) 120px; }
.pg-band h2 { margin-top: 6px; font-size: max(21px, calc(26px * var(--pg-fs))); line-height: 1.27; font-style: italic; letter-spacing: -.2px; }
.pg-prose { max-width: 680px; margin: 0 auto; }
.pg-prose h2 { margin-top: 6px; font-size: max(21px, calc(25px * var(--pg-fs))); line-height: 1.24; letter-spacing: -.2px; }
.pg-prose p:not(.pg-eyebrow) { margin-top: 8px; font-size: 13px; line-height: 21px; color: var(--gray); }
.pg-cta { padding: var(--pg-y) 90px calc(var(--pg-y) + 2px); }
.pg-cta h2 { font-size: max(21px, calc(25px * var(--pg-fs))); line-height: 1.28; }

/* newsletter: closing email-capture band, Netlify Forms */
.pg-newsletter { padding: var(--pg-y) 90px; }
.pg-news-card { max-width: 420px; margin: 0 auto; }
.pg-news-card h2 { margin-top: 4px; font-size: max(17px, calc(20px * var(--pg-fs))); line-height: 1.25; }
.pg-news-lede { margin-top: 6px; font-size: 12.5px; line-height: 20px; color: rgba(255,255,255,.75); }
.pg-news-form { display: flex; gap: 8px; margin-top: 14px; }
.pg-news-form input[type="email"] { flex: 1; min-width: 0; line-height: 20px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-family: var(--sans); font-size: 12.5px; }
.pg-news-form input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.pg-news-form input[type="email"]:hover { border-color: rgba(216,175,99,.75); }
.pg-news-form input[type="email"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); background: rgba(255,255,255,.14); }
.pg-news-form .pg-btn-gold { border: 0; cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.pg-news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-news-note { display: block; margin-top: 10px; font-size: 10.5px; color: rgba(255,255,255,.6); }
.pg-news-status { margin-top: 12px; font-size: 12px; color: var(--gold-light); }
.pg-news-status[hidden] { display: none; }

/* photo credits */
.pg-credits { width: 1024px; padding: 8px var(--pg-x) 10px; font-size: 10px; line-height: 16px; color: var(--gray); background: var(--cream); }
.pg-credits summary { display: inline-block; cursor: pointer; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.pg-credits summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.pg-credits ul { margin-top: 8px; padding-left: 16px; }
.pg-credits a { text-decoration: underline; text-underline-offset: 2px; }
.pg-credits a:hover { color: var(--gold-text); }

/* ============================================================================================================================
   COUNTRY-PAGE LOOK (main.pg-cty, every country page; Krishna 2026-09-21: "no plain single-colour pages, real highlights, shorter").
   Colours are ONLY the home page's own: cream #f7f6f1 (page), white #fff (cards), ivory = the header logo-panel gradient (+ boutique #f9f3e9),
   sand #f0ece2, warm-grey #f4f2ee (the plan bar), navy #002841 -> #001f33, forest green #1d3826 -> #10221a, gold. Band recipe: see SKILL.md "Country page recipe".
   ============================================================================================================================ */
.pg-sand { background: #f0ece2; color: var(--navy); }
.pg-cty { --pg-y: 20px; --pg-fs: 1; }   /* Krishna 2026-09-24: dropped the tighter country-page tier entirely - height/type-scale restrictions were over-compressing pages. Country pages now use the same full kit density and type scale as every other page; height comes from content + normal spacing, not a lower tier. */
.pg-cty .pg-white { background: #fff; }
/* the ONE highlight band per country page: CREAM (same as every other light band, matches index.html), with gold kept to a thin accent
   (two faint corner glows + hairline top/bottom), never a gold gradient fill. Corrected 2026-09-22: the first version used the header
   logo-panel's own gradient (#f2e9d6 start) stretched across a whole 200px+ section, which read as a gold panel, not an accent -
   breaking rule 7 (never as gold/heavy as the old site) and this file's own "gold is an accent, never a flat background" line. */
.pg-cty .pg-ivory { background: radial-gradient(circle at 96% 8%, rgba(216,175,99,.12), rgba(216,175,99,0) 34%), radial-gradient(circle at 2% 100%, rgba(216,175,99,.08), rgba(216,175,99,0) 30%), var(--cream); box-shadow: inset 0 1px 0 rgba(216,175,99,.4), inset 0 -1px 0 rgba(216,175,99,.4); }

/* hero: photo edge to edge in a FIXED crop box (21:9, object-fit:cover), one-line title, the key facts float over its bottom edge exactly like the plan bar on the home page.
   Fixed box (Krishna 2026-09-24, after a narrow/odd-shaped source photo stretched thin and looked "spread" full-bleed): every country hero crops to the same box regardless of the source photo's own aspect ratio, so no photo ever looks stretched or empty. */
.pg-cty .pg-hero-full { aspect-ratio: 21 / 9; max-height: 460px; min-height: 300px; align-items: center; padding-top: 14px; padding-bottom: 76px; }
.pg-cty .pg-hero-full .pg-hero-copy { max-width: 560px; }
.pg-cty .pg-hero-full h1 { font-size: max(40px, calc(48px * var(--pg-fs))); line-height: 1.13; letter-spacing: -.5px; }
.pg-cty .pg-hero-full .pg-lede { max-width: 480px; font-size: 14px; line-height: 22px; }
.pg-cty .pg-hero-full .pg-hero-photo::after { background: linear-gradient(90deg, rgba(8,22,42,.82) 0%, rgba(8,22,42,.62) 40%, rgba(8,22,42,.12) 74%, rgba(8,22,42,0) 100%), linear-gradient(0deg, rgba(8,22,42,.5) 0%, rgba(8,22,42,0) 42%); }
.pg-cty .pg-hero-full .pg-chip { top: 20px; bottom: auto; right: var(--pg-x); }
.pg-cty .pg-hero-full::after { display: none; }
.pg-cty .pg-hero-full + .pg-facts { position: relative; z-index: 3; margin-top: -50px; padding: 0 var(--pg-x) 16px; background: none; border: 0; }
.pg-cty .pg-hero-full + .pg-facts dl { padding: 2px 6px; border-radius: 18px; background: #f4f2ee; box-shadow: 0 6px 24px rgba(20,30,50,.16), 0 1px 3px rgba(20,30,50,.08); }
.pg-cty .pg-hero-full + .pg-facts dl > div { padding: 9px 16px 8px; }
.pg-cty .pg-hero-full + .pg-facts dl > div:first-child { padding-left: 16px; }
.pg-cty .pg-hero-full + .pg-facts dd { font-size: 15px; line-height: 20px; }
/* boxed hero (layout:"split", used when the supplied photo is below the 2560px full-bleed minimum, rule 2): facts bar sits normally below it, not overlapping */
.pg-cty .pg-hero:not(.pg-hero-full) + .pg-facts dd { font-size: 15px; line-height: 20px; }

/* green statement strip: slim */
.pg-cty .pg-band { padding: 16px 120px 18px; }
.pg-cty .pg-band h2 { font-size: max(18px, calc(22px * var(--pg-fs))); line-height: 1.27; }
.pg-cty .pg-band .pg-sub { margin-top: 4px; }

/* places: numbered along the route, tighter cards */
.pg-cty .pg-places { counter-reset: pl; }
.pg-cty .pg-place { counter-increment: pl; border-top: 3px solid var(--gold); }
.pg-cty .pg-place .pg-card-photo { position: relative; height: 68px; }
.pg-cty .pg-place .pg-card-photo::before { content: counter(pl); position: absolute; z-index: 1; left: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--serif); font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.pg-cty .pg-place-body { padding: 7px 14px 2px; }
.pg-cty .pg-place-list li { padding: 4px 0 4px 14px; }
.pg-cty .pg-place-list li::before { top: 10px; }
.pg-cty .pg-place-how { margin-top: 7px; }

/* itinerary: navy highlight band, a route strip with the IKOU Pace symbol on every stop */
.pg-cty .pg-itin-sec { padding-top: 18px; padding-bottom: 16px; background: radial-gradient(circle at 50% -30%, rgba(216,175,99,.2), rgba(216,175,99,0) 55%), linear-gradient(180deg, #002841 0%, #001f33 100%); }
.pg-cty .pg-itin-sec::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(216,175,99,0), var(--gold) 20%, var(--gold) 80%, rgba(216,175,99,0)); }
.pg-cty .pg-itin-sec .pg-head { margin-bottom: 10px; }
.pg-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 20px 16px; }
.pg-route > .pg-stop:not(:first-child) { border-left: 1px solid rgba(216,175,99,.28); padding-left: 16px; }   /* a thin divider between each day, so stops read as separate cards, not one run-on block */
.pg-stop-a { display: block; height: 100%; border-radius: 14px; color: #fff; transition: transform .2s; }
.pg-stop-a:hover, .pg-stop-a:focus-visible { transform: translateY(-3px); }
.pg-stop-a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pg-stop-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pg-stop-node { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold); background: rgba(216,175,99,.12); color: var(--gold-light); transition: background .2s, color .2s, box-shadow .2s; }
.pg-stop-node .ic { font-size: 22px; stroke-width: 1.5; }
.pg-stop-a:hover .pg-stop-node, .pg-stop-a:focus-visible .pg-stop-node { background: var(--gold); color: var(--navy); box-shadow: 0 0 0 4px rgba(216,175,99,.22); }
.pg-stop-lab { flex: none; display: flex; flex-direction: column; }
.pg-stop-lab b { font-size: 9.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); }
.pg-stop-lab em { font-family: var(--serif); font-size: 14px; line-height: 17px; font-style: italic; color: #fff; }
.pg-stop-line { flex: 1; min-width: 6px; height: 0; border-top: 1px dashed rgba(216,175,99,.6); }
.pg-stop-place { display: block; font-size: 10px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.64); }
.pg-stop h3 { margin-top: 2px; font-size: max(13px, calc(15px * var(--pg-fs))); line-height: 1.33; color: #fff; }
.pg-stop p { margin-top: 4px; font-size: 11.5px; line-height: 17px; color: rgba(255,255,255,.78); }
/* multi-route itinerary (Krishna 2026-09-24): a big country's ONE navy band holds several SEPARATE, realistically-paced routes (e.g. "Temples & the
   Old Capital" / "The North" / "The Islands") instead of one impossible trip that flies between every region daily. Each route is its own labelled
   sub-block with its own short route strip; the pace key and note/button footer stay shared, once, at the bottom of the whole section. */
.pg-itin-routes { display: grid; gap: 22px; }
.pg-itin-route + .pg-itin-route { padding-top: 20px; border-top: 1px solid rgba(216,175,99,.22); }
.pg-itin-route-name { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-style: italic; font-size: max(15px, calc(17px * var(--pg-fs))); color: #fff; margin-bottom: 4px; }
.pg-itin-route-len { font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-light); }
.pg-itin-route-note { max-width: 640px; font-size: 11.5px; line-height: 17px; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.pg-cty .pg-itin-foot { align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(216,175,99,.3); }
.pg-itin-l { display: grid; gap: 6px; }
.pg-navy .pg-itin-note { max-width: 560px; color: rgba(255,255,255,.72); }
.pg-pace-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 11px; color: rgba(255,255,255,.8); }
.pg-pace-key span { font-size: 9.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-light); }
.pg-pace-key b { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.pg-pace-key .ic { font-size: 15px; color: var(--gold-light); }
.pg-pace-key:hover b, .pg-pace-key:focus-visible b { color: #fff; }
.pg-pace-key:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* faq, related, closing photo band */
.pg-cty .pg-faq-item summary { padding-top: 8px; padding-bottom: 8px; }
.pg-cty .pg-related { gap: 14px; }
.pg-cty .pg-rel { aspect-ratio: 5 / 2; }
.pg-cty .pg-head { margin-bottom: 14px; }
.pg-cta-photo { position: relative; padding: 22px 90px 24px; }
.pg-cta-bg { position: absolute; inset: 0; margin: 0; }
.pg-cta-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,31,51,.8) 0%, rgba(0,40,65,.68) 100%); }
.pg-cta-in { position: relative; z-index: 1; }

/* ============================================================================================================================
   DEVICE EDITIONS (rule 12). At 1024px and wider = the 1024px design canvas scaled by base.js (unchanged). Below 1024px the FLUID edition takes over,
   using the SAME switch as the home page: #page gets class "home" (base.js then stops scaling it and the shell rules scoped #page.home, i.e. the responsive
   header and footer, apply) plus "pg-fluid" (these kit rules: tablet 640-1023px, phone <=639px). Sections stack, text >= 13px, tap targets >= 44px.
   Per page: on by default for new folder-format pages (site.json responsiveNewPages, or "responsive" in _page.json / _page.html); older single-file pages stay fixed-width.
   Same content and same links in every edition (Google indexes the mobile version): only layout changes, nothing is hidden on phones.
   ============================================================================================================================ */
@media (max-width: 1023px) {
  #page.pg-fluid { width: 100%; margin: 0; }
  #page.pg-fluid { --pg-x: clamp(16px, 5vw, 54px); }
  #page.pg-fluid .pg-main, #page.pg-fluid .pg, #page.pg-fluid .pg-hero, #page.pg-fluid .pg-facts, #page.pg-fluid .pg-credits { width: 100%; }
  #page.pg-fluid .pg-facts dl { padding: 0 var(--pg-x); }
  #page.pg-fluid .pg-hero-photo { width: 42%; height: auto; aspect-ratio: 16 / 10; }
  #page.pg-fluid .pg-hero-full .pg-hero-photo { width: auto; aspect-ratio: auto; }
  #page.pg-fluid .pg-hero-full { min-height: 300px; padding-bottom: 56px; }
  #page.pg-fluid .pg-hero-full .pg-chip { left: var(--pg-x); right: auto; bottom: 14px; }
  /* stacked mobile layout puts the title/lede full-width over the photo, not confined to the left like the desktop 90deg fade assumes: a full-width scrim keeps text readable whatever the photo looks like */
  #page.pg-fluid .pg-hero-full .pg-hero-photo::after { background: linear-gradient(180deg, rgba(8,22,42,.8) 0%, rgba(8,22,42,.42) 42%, rgba(8,22,42,.68) 100%); }
  #page.pg-fluid .pg-split { grid-template-columns: 1fr 38%; gap: 28px; }
  #page.pg-fluid .pg-split-rev { grid-template-columns: 38% 1fr; }
  #page.pg-fluid .pg-cols-4 { grid-template-columns: repeat(2, 1fr); }
  #page.pg-fluid .pg-cols-3 { grid-template-columns: repeat(2, 1fr); }
  #page.pg-fluid .pg-cols-5 { grid-template-columns: repeat(3, 1fr); }
  #page.pg-fluid .pg-statement { grid-template-columns: 1fr; gap: 12px; }
  #page.pg-fluid .pg-statement-text p { font-size: 14px; line-height: 22px; }
  #page.pg-fluid .pg-idea { gap: 16px; }
  #page.pg-fluid .pg-idea-head { gap: 16px; }
  #page.pg-fluid .pg-idea-badge { width: 72px; height: 72px; }
  #page.pg-fluid .pg-idea-ic { width: 58px; height: 58px; }
  #page.pg-fluid .pg-idea h2 { font-size: 23px; line-height: 29px; }
  #page.pg-fluid .pg-idea-chips a { min-height: 44px; font-size: 13px; }
  #page.pg-fluid .pg-idea-eg { font-size: 12px; }
  #page.pg-fluid .pg-tiles.pg-cols-4, #page.pg-fluid .pg-tiles.pg-cols-3 { grid-template-columns: repeat(2, 1fr); }
  #page.pg-fluid .pg-tile-tag, #page.pg-fluid .pg-tile-copy i, #page.pg-fluid .pg-chips-label { font-size: 11.5px; }
  #page.pg-fluid .pg-tile-copy span, #page.pg-fluid .pg-chips a, #page.pg-fluid .pg-lens-panel a span { font-size: 13px; line-height: 18px; }
  #page.pg-fluid .pg-chips a { min-height: 44px; }
  #page.pg-fluid .pg-lens-panel ul { grid-template-columns: repeat(2, 1fr); }
  #page.pg-fluid .pg-lens-panel a { min-height: 44px; }  #page.pg-fluid .pg-feat { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-feat-media { min-height: 0; height: 240px; }
  #page.pg-fluid .pg-feat-flash { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-feat-flash .pg-feat-media { height: auto; padding: 16px var(--pg-x) 0; }
  #page.pg-fluid .pg-feat-flash .pg-feat-copy { padding: 18px var(--pg-x) 22px; }
  #page.pg-fluid .pg-flash { height: 230px; max-width: 480px; }
  #page.pg-fluid .pg-flash-card figcaption { right: 116px; }
  #page.pg-fluid .pg-flash-card figcaption b { font-size: 11.5px; }
  #page.pg-fluid .pg-flash-card figcaption span { font-size: 17px; line-height: 21px; }


  #page.pg-fluid .pg-flash-dots button { width: 44px; height: 44px; }

  #page.pg-fluid .pg-feat-copy p:not(.pg-eyebrow):not(.pg-feat-note) { font-size: 14px; line-height: 22px; }
  #page.pg-fluid .pg-feat-tags li, #page.pg-fluid .pg-feat-note { font-size: 12.5px; }
  #page.pg-fluid .pg-enq { grid-template-columns: 1fr; gap: 20px; }
  #page.pg-fluid .pg-enq-lede { font-size: 14px; line-height: 22px; }
  #page.pg-fluid .pg-enq-field label { font-size: 12.5px; }
  #page.pg-fluid .pg-enq-field select, #page.pg-fluid .pg-enq-field textarea, #page.pg-fluid .pg-enq-field input { font-size: 14px; }
  #page.pg-fluid .pg-enq-field select, #page.pg-fluid .pg-enq-field input { height: 46px; }
  #page.pg-fluid .pg-enq-note { font-size: 12.5px; }
  #page.pg-fluid .pg-band, #page.pg-fluid .pg-cta { padding-left: var(--pg-x); padding-right: var(--pg-x); }
  #page.pg-fluid .pg-lede, #page.pg-fluid .pg-split-text p:not(.pg-eyebrow), #page.pg-fluid .pg-card-body p, #page.pg-fluid .pg-faq-a p, #page.pg-fluid .pg-prose p:not(.pg-eyebrow), #page.pg-fluid .pg-head p:not(.pg-eyebrow), #page.pg-fluid .pg-sub { font-size: 14px; line-height: 22px; }
  #page.pg-fluid .pg-eyebrow { font-size: 13px; }
  #page.pg-fluid .pg-facts dt, #page.pg-fluid .pg-card-tag, #page.pg-fluid .pg-crumbs, #page.pg-fluid .pg-price-tag, #page.pg-fluid .pg-price-h { font-size: 11.5px; }
  #page.pg-fluid .pg-card-go, #page.pg-fluid .pg-link, #page.pg-fluid .pg-chip, #page.pg-fluid .pg-credits { font-size: 12.5px; }
  #page.pg-fluid .pg-btn { height: 46px; font-size: 13px; }
  #page.pg-fluid .pg-link { min-height: 44px; }
  #page.pg-fluid .pg-card-go { min-height: 44px; }
  #page.pg-fluid .pg-faq-item summary { min-height: 48px; font-size: 17px; }
  #page.pg-fluid .pg-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 6px; }
#page.pg-fluid .pg-crumbs { margin-bottom: 4px; }
#page.pg-fluid .pg-credits summary { display: inline-flex; align-items: center; min-height: 44px; }
  #page.pg-fluid .pg-newsletter { padding-left: var(--pg-x); padding-right: var(--pg-x); }
  #page.pg-fluid .pg-news-card h2 { font-size: 22px; line-height: 28px; }
  #page.pg-fluid .pg-news-lede, #page.pg-fluid .pg-news-note { font-size: 13px; }
  #page.pg-fluid .pg-news-form input[type="email"] { line-height: 22px; padding: 14px 14px; font-size: 14px; }
  #page.pg-fluid .pg-news-form .pg-btn-gold { min-height: 44px; justify-content: center; }
  #page.pg-fluid .pg-price-amt { font-size: 26px; }
  #page.pg-fluid .pg-price-scope, #page.pg-fluid .pg-price-note { font-size: 13px; line-height: 19px; }
  #page.pg-fluid .pg-price-inc li, #page.pg-fluid .pg-price-exc li { font-size: 13.5px; line-height: 19px; }
  #page.pg-fluid .pg-price-cond { font-size: 12px; line-height: 17px; }
  #page.pg-fluid .pg-price-more summary { min-height: 44px; font-size: 13px; }
}
@media (max-width: 639px) {
  #page.pg-fluid { --pg-y: 24px; }
  #page.pg-fluid .pg-hero { flex-direction: column; align-items: stretch; gap: 18px; }
  #page.pg-fluid .pg-hero-copy, #page.pg-fluid .pg-lede { max-width: none; }
  #page.pg-fluid .pg-hero h1 { font-size: 32px; line-height: 38px; }
  #page.pg-fluid .pg-hero-photo { width: 100%; }
  #page.pg-fluid .pg-hero-full { min-height: 0; padding-top: 22px; padding-bottom: 60px; }
  #page.pg-fluid .pg-hero-full .pg-hero-photo { width: auto; aspect-ratio: auto; }
  #page.pg-fluid .pg-hero-full .pg-hero-photo::after { background: linear-gradient(180deg, rgba(8,22,42,.86) 0%, rgba(8,22,42,.7) 55%, rgba(8,22,42,.35) 100%); }
  #page.pg-fluid .pg-hero-full .pg-chip { left: var(--pg-x); right: auto; bottom: 14px; }
  #page.pg-fluid .pg-actions { flex-direction: column; align-items: stretch; }
  #page.pg-fluid .pg-btn { width: 100%; }
  #page.pg-fluid .pg-facts dl { flex-wrap: wrap; }
  #page.pg-fluid .pg-facts dl > div { flex: 1 1 50%; padding: 12px 12px 11px; }
  #page.pg-fluid .pg-facts dl > div:nth-child(odd) { padding-left: 0; }
  #page.pg-fluid .pg-facts dl > div:nth-child(3) { border-left: 0; }
  #page.pg-fluid .pg-facts dl > div:nth-child(n+3) { border-top: 1px solid rgba(216,175,99,.45); }
  #page.pg-fluid .pg-split, #page.pg-fluid .pg-split-rev { grid-template-columns: 1fr; gap: 20px; }
  #page.pg-fluid .pg-split-rev .pg-split-side { order: 0; }
  #page.pg-fluid .pg-split-text h2, #page.pg-fluid .pg-prose h2, #page.pg-fluid .pg-cta h2 { font-size: 24px; line-height: 30px; }
  #page.pg-fluid .pg-head h2 { font-size: 23px; line-height: 29px; }
  #page.pg-fluid .pg-cols-2, #page.pg-fluid .pg-cols-3 { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-cols-4, #page.pg-fluid .pg-cols-5 { grid-template-columns: repeat(2, 1fr); }
  #page.pg-fluid .pg-tiles.pg-cols-3 { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-tile { min-height: 170px; }
  #page.pg-fluid .pg-lens-panel ul { grid-template-columns: 1fr; }  #page.pg-fluid .pg-enq-form { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-enq-actions .pg-btn { width: 100%; }
  #page.pg-fluid .pg-news-form { flex-direction: column; }
  #page.pg-fluid .pg-layout-row .pg-card { grid-template-columns: 1fr; grid-template-rows: auto; }
  #page.pg-fluid .pg-layout-row .pg-card-photo { grid-row: auto; height: 150px; min-height: 0; }
  #page.pg-fluid .pg-layout-compact .pg-card { grid-template-columns: 40px 1fr; }
  #page.pg-fluid .pg-card-photo { height: 150px; }
  #page.pg-fluid .pg-band, #page.pg-fluid .pg-cta { padding-top: 26px; padding-bottom: 28px; }
  #page.pg-fluid .pg-band h2 { font-size: 23px; line-height: 30px; }
  #page.pg-fluid .pg-qcard p { font-size: 17px; }
  #page.pg-fluid .pg-rel b { font-size: 12.5px; letter-spacing: 1px; }
  #page.pg-fluid .pg-gallery { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-price-row { flex-direction: column; align-items: stretch; gap: 14px; }
  #page.pg-fluid .pg-price-actions { justify-content: space-between; }
  #page.pg-fluid .pg-price-panel { grid-template-columns: 1fr; }
}
/* country-page look on tablet + phone */
@media (max-width: 1023px) {
  #page.pg-fluid .pg-cty .pg-hero-full { aspect-ratio: auto; max-height: none; min-height: 340px; padding-bottom: 124px; }   /* grows with its copy: a fixed ratio box clipped the text and let the location chip overlap it */
  #page.pg-fluid .pg-cty .pg-hero-full h1 { font-size: 40px; line-height: 46px; }
  #page.pg-fluid .pg-cty .pg-hero-full .pg-chip { top: auto; right: auto; left: var(--pg-x); bottom: 78px; }
  /* stacked mobile layout puts the title/lede/chip full-width over the photo, not confined to the left like the desktop 90deg fade assumes: a full-width top+bottom scrim keeps text readable whatever the photo looks like */
  #page.pg-fluid .pg-cty .pg-hero-full .pg-hero-photo::after { background: linear-gradient(180deg, rgba(8,22,42,.82) 0%, rgba(8,22,42,.4) 42%, rgba(8,22,42,.72) 100%); }
  #page.pg-fluid .pg-cty .pg-facts dl > div { padding: 12px 14px 11px; }
  #page.pg-fluid .pg-cty .pg-facts dl > div:first-child { padding-left: 14px; }
  #page.pg-fluid .pg-cty .pg-facts dd { font-size: 15px; }
  #page.pg-fluid .pg-route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #page.pg-fluid .pg-route > .pg-stop:nth-child(3n+1) { border-left: 0; padding-left: 0; }   /* 3 columns here: zero the divider at the start of each new row */
  #page.pg-fluid .pg-stop p { font-size: 14px; line-height: 21px; }
  #page.pg-fluid .pg-stop h3 { font-size: 17px; line-height: 22px; }
  #page.pg-fluid .pg-stop-place, #page.pg-fluid .pg-stop-lab b, #page.pg-fluid .pg-pace-key span { font-size: 11.5px; }
  #page.pg-fluid .pg-stop-lab em { font-size: 15px; }
  #page.pg-fluid .pg-stop-a { min-height: 44px; }
  #page.pg-fluid .pg-pace-key { font-size: 12.5px; min-height: 44px; }
  #page.pg-fluid .pg-itin-l { gap: 8px; }
  #page.pg-fluid .pg-cty .pg-band { padding-left: var(--pg-x); padding-right: var(--pg-x); }
  #page.pg-fluid .pg-cta-photo { padding-left: var(--pg-x); padding-right: var(--pg-x); }
}
@media (max-width: 639px) {
  #page.pg-fluid .pg-cty .pg-hero-full h1 { font-size: 34px; line-height: 40px; }
  #page.pg-fluid .pg-cty .pg-hero-full { aspect-ratio: auto; max-height: none; min-height: 0; padding-top: 22px; padding-bottom: 124px; }
  #page.pg-fluid .pg-cty .pg-places.pg-cols-4, #page.pg-fluid .pg-cty .pg-places.pg-cols-3 { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-cty .pg-hero-full .pg-hero-photo::after { background: linear-gradient(180deg, rgba(8,22,42,.82) 0%, rgba(8,22,42,.45) 40%, rgba(8,22,42,.72) 100%); }
  #page.pg-fluid .pg-route { grid-template-columns: 1fr; gap: 22px; }
  #page.pg-fluid .pg-route > .pg-stop { border-left: 0; padding-left: 0; border-top: 1px solid rgba(216,175,99,.28); padding-top: 18px; }   /* one column here: a horizontal divider instead */
  #page.pg-fluid .pg-route > .pg-stop:first-child { border-top: 0; padding-top: 0; }
  #page.pg-fluid .pg-stop-line { display: none; }
  #page.pg-fluid .pg-cty .pg-itin-foot { flex-direction: column; align-items: stretch; }
  #page.pg-fluid .pg-cty .pg-place-body { padding-top: 14px; }
  #page.pg-fluid .pg-cty .pg-rel { aspect-ratio: 16 / 10; }
}

/* places + itinerary, fluid editions (tablet / phone) */
@media (max-width: 1023px) {
  #page.pg-fluid .pg-place-body > p, #page.pg-fluid .pg-place-list li, #page.pg-fluid .pg-itin-body p, #page.pg-fluid .pg-itin-note { font-size: 14px; line-height: 22px; }
  #page.pg-fluid .pg-place-how { font-size: 12.5px; line-height: 18px; }
  #page.pg-fluid .pg-place-list li::before { top: 14px; }
  #page.pg-fluid .pg-place-go { min-height: 44px; font-size: 12.5px; }
  #page.pg-fluid .pg-itin-body .pg-card-tag { font-size: 11.5px; }
  #page.pg-fluid .pg-itin-body h3 { font-size: 17px; line-height: 22px; }
  #page.pg-fluid .pg-itin-route-name { font-size: 19px; }
  #page.pg-fluid .pg-itin-route-len { font-size: 12.5px; }
  #page.pg-fluid .pg-itin-route-note { font-size: 14px; line-height: 21px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .pg-itin-cols-2 { grid-template-columns: 1fr; }
  #page.pg-fluid .pg-itin-day { grid-template-columns: 1fr; gap: 2px; }
  #page.pg-fluid .pg-itin-foot { flex-direction: column; align-items: stretch; gap: 14px; }
}

/* map: on phone the pinned canvas gets too cramped to read, so it is replaced by a plain linked list of the same places */
@media (max-width: 639px) {
  #page.pg-fluid .pg-map-canvas { display: none; }
  #page.pg-fluid .pg-map-list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
  #page.pg-fluid .pg-map-list li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 4px; text-decoration: none; color: var(--navy); font-size: 14px; font-weight: 600; border-bottom: 1px solid rgba(216,175,99,.3); }
  #page.pg-fluid .pg-map-list i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--serif); font-size: 12px; font-style: normal; }
}

/* route: map + tabs stack on tablet; on phone the map drops (same reason as above) and the tabs alone drive the panel, still full content parity */
@media (max-width: 1023px) {
  #page.pg-fluid .pg-route-body { grid-template-columns: 1fr; gap: 20px; }
  #page.pg-fluid .pg-route-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  #page.pg-fluid .pg-route-note { text-align: left; transform: none; white-space: normal; }
  #page.pg-fluid .pg-route-tab { min-height: 44px; }
}
@media (max-width: 639px) {
  /* the map itself now stays on phone (Krishna 2026-09-28: he wants the "map feel" everywhere) - shrunk, pin
     name labels hidden except the active stop (tabs below still carry every name), tapping a pin drives the
     panel exactly like a tab (shared [data-route-tab] handler in _kit.js, no extra JS needed) */
  #page.pg-fluid .pg-route-map { display: block; text-align: center; margin-bottom: 6px; }
  #page.pg-fluid .pg-route-map .pg-map-canvas { display: inline-block; width: 210px; max-width: 100%; }
  #page.pg-fluid .pg-route-map .pg-map-pin { padding: 9px; min-width: 44px; min-height: 44px; justify-content: center; }
  #page.pg-fluid .pg-route-map .pg-map-pin i { width: 24px; height: 24px; font-size: 11px; }
  #page.pg-fluid .pg-route-map .pg-map-pin b { display: none; }
  #page.pg-fluid .pg-route-map .pg-map-pin.on i { background: var(--navy); color: var(--gold); box-shadow: 0 0 0 3px rgba(216,175,99,.45); }
  #page.pg-fluid .pg-route-map .pg-map-pin.on b { display: block; font-size: 11px; padding: 1px 6px; }
  #page.pg-fluid .pg-route-map .pg-map-compass { width: 32px; height: 32px; }
  #page.pg-fluid .pg-route-tabs { gap: 6px 12px; }
  #page.pg-fluid .pg-route-photo img { height: 190px; }
  #page.pg-fluid .pg-route-text, #page.pg-fluid .pg-route-fact { font-size: 13.5px; }
  #page.pg-fluid .pg-route-moods { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* motion: hover lifts only where there is a real hover (not on touch); everything calms down for visitors who ask for reduced motion */
@media (hover: none) {
  .pg-card:hover, .pg-rel:hover, .pg-btn:hover, .pg-btn-gold:hover, .pg-btn-ghost:hover, .pg-btn-line:hover { transform: none; }
  .pg-card:hover .pg-card-photo img, .pg-rel:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-main *, .pg-main *::before, .pg-main *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* light sections are all the home-page cream: a faint gold hairline tells neighbouring light sections apart (dark navy / green bands need none) */
.pg-main > .pg:not(.pg-navy):not(.pg-green) + .pg:not(.pg-navy):not(.pg-green) { border-top: 1px solid rgba(216,175,99,.35); }

/* PAGE destinations.html - navy hero with the plan form, then a region-grouped index of thumbnail rows (no big tiles), built to stay short at 16 or 60 countries. Same 1024px canvas as every page; site tokens only (src\base.css). Shared atoms (.pg-eyebrow, .pg-btn, .pg-crumbs) come from _kit.css. Filtering + plan form: the inline <script> at the end of destinations.html. */
.dh { width: 1024px; background: var(--cream); color: var(--navy); }
.dh h1, .dh h2, .dh h3 { font-family: var(--serif); font-weight: 400; }
.dh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- hero: title + the plan form, one navy band */
.dh-hero { padding: 12px 40px 16px; background: radial-gradient(circle at 85% 0%, rgba(216,175,99,.14), transparent 40%), linear-gradient(180deg, #002841 0%, #001f33 100%); color: #fff; }
.dh-hero .pg-crumbs { margin-bottom: 6px; }
.dh-hero-top { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: end; }
.dh-hero h1 { font-size: 28px; line-height: 34px; letter-spacing: -.3px; color: #fff; }
.dh-lede { font-size: 11.5px; line-height: 17px; color: rgba(255,255,255,.82); }
.dh-plan { display: grid; grid-template-columns: repeat(3, 1fr) 176px; gap: 10px; align-items: end; margin-top: 12px; }
.dh-f { position: relative; display: block; }
.dh-f span { display: block; margin-bottom: 3px; font-size: 8.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-light); }
.dh-f select { display: block; width: 100%; height: 34px; padding: 0 32px 0 12px; border: 1px solid transparent; border-radius: 8px; background: #fff; font: 12px var(--sans); color: var(--navy); -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dh-f::after { content: ''; position: absolute; right: 14px; bottom: 12px; width: 6px; height: 6px; border-right: 1.6px solid var(--navy); border-bottom: 1.6px solid var(--navy); transform: rotate(45deg); pointer-events: none; }
.dh-f select:hover { border-color: var(--gold); }
.dh-f select:focus-visible { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,175,99,.35); }
.dh-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; border-radius: 8px; background: linear-gradient(180deg, #e2bd70, #d5ab5e); color: var(--navy); font: 600 12px var(--sans); box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; transition: filter .15s, transform .15s; }
.dh-go .ic { font-size: 14px; stroke-width: 1.8; }
.dh-go:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dh-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- world map: CC0 equirectangular outline (assets\map\world-equirectangular.svg, Natural Earth/Wikimedia) with a pin per destination, position computed from lat/lng in gen-destinations.ps1 */
.dh-map { padding: 22px 40px 4px; background: var(--cream); }
.dh-map-copy p:not(.pg-eyebrow) { margin-top: 5px; font-size: 11.5px; line-height: 17px; color: var(--gray); max-width: 560px; }
.dh-map-box { position: relative; width: 100%; aspect-ratio: 2 / 1; margin-top: 14px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--cream) 0%, #f0ece2 100%); border: 1px solid rgba(12,35,64,.10); box-shadow: inset 0 0 0 1px rgba(216,175,99,.12); }
.dh-map-box::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(12,35,64,.05) 0, rgba(12,35,64,.05) 1px, transparent 1px, transparent 12.5%), repeating-linear-gradient(90deg, rgba(12,35,64,.05) 0, rgba(12,35,64,.05) 1px, transparent 1px, transparent 12.5%); pointer-events: none; }
.dh-map-box::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 8%, rgba(216,175,99,.16), transparent 60%); pointer-events: none; }
/* the map image is a fixed 2:1 (its own viewBox); on tablet/phone the outer box goes taller (4:3, 1:1) for legibility, so the image and the pin layer both lock to the SAME 2:1 rect, centred in the box, instead of stretching to the box's own (different) aspect ratio - otherwise the pins' lat/lng percentages land off the letterboxed map */
.dh-map-img { position: absolute; top: 50%; left: 0; width: 100%; aspect-ratio: 2 / 1; height: auto; transform: translateY(-50%); object-fit: contain; opacity: .8; filter: brightness(0) saturate(100%) invert(12%) sepia(29%) saturate(2400%) hue-rotate(180deg) brightness(94%) contrast(97%); }
.dh-pins { position: absolute; top: 50%; left: 0; width: 100%; aspect-ratio: 2 / 1; transform: translateY(-50%); }
.dh-pin { position: absolute; padding: 10px; margin: -10px; transform: translate(-50%, -50%); text-decoration: none; }
.dh-pin-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--navy); box-shadow: 0 0 0 3px rgba(216,175,99,.28); transition: transform .15s, background .15s; }
.dh-pin-lbl { position: absolute; left: 100%; top: 50%; margin-left: 6px; padding: 3px 8px; border-radius: 6px; background: var(--navy); color: #fff; font: 600 10px var(--sans); white-space: nowrap; opacity: 0; transform: translateY(calc(-50% + 2px)); pointer-events: none; transition: opacity .15s, transform .15s; }
.dh-pin:hover, .dh-pin:focus-visible { z-index: 1; }
.dh-pin:hover .dh-pin-dot, .dh-pin:focus-visible .dh-pin-dot { transform: scale(1.35); background: var(--gold-text); }
.dh-pin:hover .dh-pin-lbl, .dh-pin:focus-visible .dh-pin-lbl { opacity: 1; transform: translateY(-50%); }
.dh-pin:focus-visible { outline: 0; }
.dh-pin:focus-visible .dh-pin-dot { outline: 2px solid var(--gold-text); outline-offset: 2px; }

/* ---- directory: toolbar */
.dh-directory { padding: 22px 40px 30px; background: var(--cream); }
.dh-bar { display: flex; align-items: center; gap: 12px; }
.dh-bar2 { margin-top: 10px; }
.dh-bar-label { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); }
.dh-search { flex: none; display: flex; align-items: center; gap: 8px; width: 236px; height: 34px; padding: 0 14px; border: 1px solid rgba(12,35,64,.18); border-radius: 17px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dh-search .ic { flex: none; font-size: 15px; color: var(--gold-text); stroke-width: 1.6; }
.dh-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 12px var(--sans); color: var(--navy); }
.dh-search input::placeholder { color: #8a929c; }
.dh-search input::-webkit-search-cancel-button { cursor: pointer; }
.dh-search:hover { border-color: var(--gold-text); }
.dh-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,175,99,.28); }
.dh-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dh-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid rgba(12,35,64,.18); border-radius: 14px; background: #fff; font: 500 11px var(--sans); color: var(--navy); white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.dh-chip i { margin-left: 6px; font-style: normal; font-size: 9.5px; color: var(--gray); transition: color .15s; }
.dh-chip:hover { border-color: var(--gold-text); background: rgba(216,175,99,.12); }
.dh-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dh-chip.on i { color: var(--gold-light); }
.dh-chips-soft .dh-chip.on { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.dh-chips-soft .dh-chip.on i { color: var(--navy); }
.dh-chip:focus-visible, #dh-reset:focus-visible, .dh-empty a:focus-visible, .dh-gmore:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.dh-count { flex: none; margin-left: auto; font-size: 10.5px; color: var(--gray); }

/* ---- region groups and country rows */
.dh-groups { margin-top: 8px; }
.dh-ghead { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding-bottom: 6px; border-bottom: 1.5px solid rgba(216,175,99,.65); }
.dh-ghead h3 { font-size: 18px; line-height: 24px; color: var(--navy); }
.dh-ghead span { font-size: 9.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gray); }
.dh-group[hidden] { display: none; }
.dh-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.dc { display: flex; align-items: center; gap: 12px; padding: 9px 4px 9px 0; border-bottom: 1px solid rgba(12,35,64,.09); transition: background .15s, padding .15s; }
.dc[hidden] { display: none; }
.dc-ph { flex: none; display: block; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #e9e4d6; }
.dc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.dc-t { flex: 1; min-width: 0; display: block; }
.dc-t b { display: block; font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 19px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.dc-t em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; line-height: 14px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-go { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.3px solid var(--gold-text); color: var(--gold-text); transition: background .2s, color .2s, border-color .2s; }
.dc-go .ic { font-size: 12px; stroke-width: 1.6; }
.dc:hover, .dc:focus-visible { background: rgba(216,175,99,.10); padding-left: 6px; }
.dc:hover .dc-t b, .dc:focus-visible .dc-t b { color: var(--gold-text); }
.dc:hover .dc-ph img, .dc:focus-visible .dc-ph img { transform: scale(1.08); }
.dc:hover .dc-go, .dc:focus-visible .dc-go { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.dc:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; border-radius: 8px; }
.dh-gmore { display: block; margin: 10px 0 0; padding: 4px 0; background: none; border: 0; font: 600 11.5px var(--sans); color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dh-gmore:hover { color: var(--navy); }
.dh-gmore[hidden] { display: none; }

.dh-empty { padding: 30px 0 6px; text-align: center; font-size: 13px; color: var(--gray); }
.dh-empty b { color: var(--navy); }
.dh-empty a, #dh-reset { color: var(--gold-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; }
.dh-empty a:hover, #dh-reset:hover { color: var(--navy); }
.dh-empty[hidden] { display: none; }

/* ---- IKOU Pace: one slim strip */
.dh-pace { display: grid; grid-template-columns: 218px 1fr; gap: 28px; align-items: center; padding: 24px 40px; background: linear-gradient(180deg, #002841 0%, #001f33 100%); color: #fff; }
.dh-pace h2 { margin-top: 6px; font-size: 22px; line-height: 27px; color: #fff; }
.dh-pace-copy p:not(.pg-eyebrow) { margin-top: 6px; font-size: 11px; line-height: 16px; color: rgba(255,255,255,.8); }
.dh-paces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dh-pace-item { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.03); transition: transform .2s, border-color .2s, background .2s; }
.dh-pace-item i { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(216,175,99,.6); color: var(--gold); font-size: 14px; }
.dh-pace-item i .ic { stroke-width: 1.5; }
.dh-pace-item b { margin-top: 9px; font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 18px; }
.dh-pace-item span { margin-top: 2px; font-size: 9.5px; line-height: 13px; color: rgba(255,255,255,.8); }
.dh-pace-item:hover, .dh-pace-item:focus-visible { transform: translateY(-2px); border-color: var(--gold); background: rgba(255,255,255,.07); }
.dh-pace-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- one slim row of onward links */
.dh-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding: 15px 40px; background: var(--cream); border-top: 1px solid rgba(216,175,99,.35); font-size: 11.5px; }
.dh-also span { font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray); }
.dh-also a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); transition: color .15s; }
.dh-also a .ic { font-size: 12px; color: var(--gold-text); }
.dh-also a:hover, .dh-also a:focus-visible { color: var(--gold-text); text-decoration: underline; text-underline-offset: 4px; }
.dh-also a:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

.dh-credits { padding: 14px 40px 22px; font-size: 10px; line-height: 16px; color: var(--gray); background: var(--cream); }
.dh-credits summary { display: inline-block; cursor: pointer; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.dh-credits summary:hover { color: var(--gold-text); }
.dh-credits summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.dh-credits ul { margin-top: 8px; padding-left: 16px; }
.dh-credits a { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .dc, .dc-ph img, .dh-pace-item, .dh-chip, .dh-go, .dh-pin-dot, .dh-pin-lbl { transition: none; } .dc:hover .dc-ph img, .dh-pace-item:hover, .dh-go:hover { transform: none; } .dh-pin:hover .dh-pin-dot, .dh-pin:focus-visible .dh-pin-dot { transform: none; } }

/* ============ DEVICE EDITIONS (rule 13): iPad 640-1023px and phone <= 639px. Active only when the page carries class pg-fluid on #page (gen-destinations passes -Responsive). Desktop above is untouched. ============ */
@media (max-width: 1023px) {
  #page.pg-fluid .dh { width: 100%; }
  #page.pg-fluid .dh-hero, #page.pg-fluid .dh-map, #page.pg-fluid .dh-directory, #page.pg-fluid .dh-pace, #page.pg-fluid .dh-also, #page.pg-fluid .dh-credits { padding-left: clamp(16px, 5vw, 40px); padding-right: clamp(16px, 5vw, 40px); }
  #page.pg-fluid .dh-map { padding-top: 20px; padding-bottom: 4px; }
  #page.pg-fluid .dh-map-copy p:not(.pg-eyebrow) { font-size: 13.5px; line-height: 20px; }
  #page.pg-fluid .dh-map-box { margin-top: 16px; aspect-ratio: 4 / 3; }
  #page.pg-fluid .dh-pin { padding: 15px; margin: -15px; }
  #page.pg-fluid .dh-pin-dot { width: 10px; height: 10px; }
  #page.pg-fluid .dh-pin-lbl { font-size: 12px; padding: 4px 9px; }
  #page.pg-fluid .dh-hero { padding-top: 6px; padding-bottom: 20px; }
  #page.pg-fluid .dh-hero-top { grid-template-columns: 1fr; gap: 8px; }
  #page.pg-fluid .dh-hero h1 { font-size: 30px; line-height: 36px; }
  #page.pg-fluid .dh-lede { font-size: 14px; line-height: 22px; }
  #page.pg-fluid .dh-plan { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
  #page.pg-fluid .dh-go { grid-column: 1 / -1; height: 48px; font-size: 14px; }
  #page.pg-fluid .dh-f span { font-size: 11.5px; margin-bottom: 5px; }
  #page.pg-fluid .dh-f select { height: 46px; font-size: 16px; }
  #page.pg-fluid .dh-f::after { bottom: 19px; }
  #page.pg-fluid .dh-bar { flex-wrap: wrap; gap: 10px 12px; }
  #page.pg-fluid .dh-search { width: 100%; height: 46px; border-radius: 23px; }
  #page.pg-fluid .dh-search input { font-size: 16px; }
  #page.pg-fluid .dh-bar-label { font-size: 11.5px; }
  #page.pg-fluid .dh-chips { gap: 8px; }
  #page.pg-fluid .dh-chip { height: 40px; padding: 0 14px; font-size: 13px; }
  #page.pg-fluid .dh-chip i { font-size: 11.5px; }
  #page.pg-fluid .dh-count { font-size: 12.5px; margin-left: 0; }
  #page.pg-fluid .dh-ghead h3 { font-size: 20px; line-height: 26px; }
  #page.pg-fluid .dh-ghead span { font-size: 11.5px; }
  #page.pg-fluid .dh-list { grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
  #page.pg-fluid .dc { min-height: 64px; padding: 6px 4px 6px 0; }
  #page.pg-fluid .dc-t b { font-size: 16px; line-height: 20px; }
  #page.pg-fluid .dc-t em { font-size: 12px; line-height: 16px; }
  #page.pg-fluid .dc-go { width: 28px; height: 28px; }
  #page.pg-fluid .dh-gmore { min-height: 44px; font-size: 13px; }
  #page.pg-fluid .dh-empty { font-size: 14px; }
  #page.pg-fluid .dh-empty a, #page.pg-fluid #dh-reset { display: inline-block; padding: 12px 4px; }
  #page.pg-fluid .dh-pace { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
  #page.pg-fluid .dh-pace-copy p:not(.pg-eyebrow) { font-size: 13.5px; line-height: 20px; }
  #page.pg-fluid .dh-paces { gap: 8px; }
  #page.pg-fluid .dh-pace-item { min-height: 108px; }
  #page.pg-fluid .dh-pace-item b { font-size: 17px; line-height: 20px; }
  #page.pg-fluid .dh-pace-item span { font-size: 12px; line-height: 16px; }
  #page.pg-fluid .dh-also { gap: 0 22px; font-size: 13.5px; padding-top: 8px; padding-bottom: 8px; }
  #page.pg-fluid .dh-also span { font-size: 11.5px; }
  #page.pg-fluid .dh-also a { min-height: 44px; }
  #page.pg-fluid .dh-credits { font-size: 12px; line-height: 18px; }
  #page.pg-fluid .dh-credits summary { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .dh-map-box { aspect-ratio: 1 / 1; }
  #page.pg-fluid .dh-pin { padding: 17px; margin: -17px; }
  #page.pg-fluid .dh-pin-lbl { font-size: 13px; }
  #page.pg-fluid .dh-hero h1 { font-size: 28px; line-height: 34px; }
  #page.pg-fluid .dh-plan { grid-template-columns: 1fr; }
  #page.pg-fluid .dh-list { grid-template-columns: 1fr; }
  #page.pg-fluid .dh-paces { grid-template-columns: repeat(2, 1fr); }
  #page.pg-fluid .dh-pace-item:last-child { grid-column: 1 / -1; }
  #page.pg-fluid .dh-also { flex-direction: column; align-items: flex-start; }
}

/* PAGE boutique.html - shared bits. Layout follows Krishna's reference (boutique-refined-compact.html); look = site tokens only (src/base.css).
   1024px canvas on desktop (scaled by base.js); below 1024px the page is fluid (#page has class "home pg-fluid"). Sections are full width, prefix bq-. */
#boutique { --bq-x: 54px; --bq-y: 20px; --bq-line: rgba(12,35,64,.14); display: block; width: 1024px; background: var(--cream); color: var(--navy); }
.bq { position: relative; padding: var(--bq-y) var(--bq-x); overflow: hidden; scroll-margin-top: 72px; }
.bq-cream { background: var(--cream); }
.bq-white { background: var(--cream); }
.bq-sand  { background: var(--cream); }
.bq-navy  { background: linear-gradient(180deg, #002841 0%, #001f33 100%); color: #fff; }
.bq h1, .bq h2, .bq h3 { font-family: var(--serif); font-weight: 400; color: var(--navy); }
.bq-navy h1, .bq-navy h2, .bq-navy h3 { color: #fff; }
.bq h2 { margin-top: 6px; font-size: 21px; line-height: 27px; letter-spacing: -.1px; }
.bq-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-text); }
.bq-navy .bq-eyebrow { color: var(--gold-light); }

/* section head: eyebrow + heading left, one short paragraph right */
.bq-head { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: end; margin-bottom: 12px; }
.bq-head > p { justify-self: end; max-width: 450px; font-size: 12.5px; line-height: 19px; color: var(--gray); }
.bq-navy .bq-head > p { color: rgba(255,255,255,.78); }

/* buttons + links */
.bq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 38px; padding: 0 22px; border-radius: 19px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; transition: filter .15s, transform .15s, background .15s, color .15s, border-color .15s; }
.bq-btn .ic { font-size: 14px; stroke-width: 1.8; }
.bq-btn-gold { background: linear-gradient(180deg, #e2bd70, #d5ab5e); color: #1c2333; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.bq-btn-gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bq-btn-line { border: 1px solid rgba(216,175,99,.75); color: #fff; }
.bq-btn-line:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-1px); }
.bq-btn:focus-visible, .bq a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bq-more { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.bq-more i { font-style: normal; color: var(--gold-text); transition: transform .15s; }
.bq-more:hover i, .bq-more:focus-visible i { transform: translateX(3px); }

@media (max-width: 1023px) {
  #page.pg-fluid #boutique { --bq-x: clamp(16px, 5vw, 54px); width: 100%; }
  #page.pg-fluid .bq-head { grid-template-columns: 1fr; gap: 8px; }
  #page.pg-fluid .bq-head > p { justify-self: start; font-size: 13.5px; line-height: 20px; }
}
@media (max-width: 639px) {
  #page.pg-fluid #boutique { --bq-y: 26px; }
  #page.pg-fluid .bq h2 { font-size: 22px; line-height: 28px; }
  #page.pg-fluid .bq-eyebrow { font-size: 13px; }
  #page.pg-fluid .bq-btn { min-height: 44px; font-size: 13px; }
  #page.pg-fluid .bq-more { min-height: 44px; font-size: 13px; }
}
@media (hover: none) { .bq-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { #boutique *, #boutique *::before, #boutique *::after { transition: none !important; animation: none !important; } }

/* boutique / 10-hero */
.bq-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-top: 18px; padding-bottom: 26px; }
.bq-hero h1 { margin-top: 8px; font-size: 28px; line-height: 34px; letter-spacing: -.3px; }
.bq-hero h1 em { font-style: italic; color: var(--gold-light); }
.bq-lede { margin-top: 12px; max-width: 470px; font-size: 12.5px; line-height: 19px; color: rgba(255,255,255,.8); }
.bq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.bq-ghost { padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.4); font-size: 12px; font-weight: 600; color: #fff; transition: color .15s, border-color .15s; }
.bq-ghost:hover, .bq-ghost:focus-visible { color: var(--gold-light); border-color: var(--gold); }

/* three-photo collage: one tall photo left, two stacked right */
.bq-collage { display: grid; grid-template-columns: 1.28fr .72fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 250px; }
.bq-ph { position: relative; display: block; overflow: hidden; border-radius: 16px; border: 1px solid rgba(216,175,99,.45); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.bq-ph-main { grid-row: 1 / 3; }
.bq-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bq-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,20,35,.55), transparent 45%); pointer-events: none; }
.bq-ph span { position: absolute; z-index: 1; left: 12px; bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bq-ph:hover img { transform: scale(1.04); }

@media (max-width: 1023px) {
  #page.pg-fluid .bq-hero { gap: 28px; }
  #page.pg-fluid .bq-lede { font-size: 13.5px; line-height: 20px; }
  #page.pg-fluid .bq-collage { height: clamp(220px, 34vw, 300px); }
}
@media (max-width: 639px) {
  #page.pg-fluid .bq-hero { grid-template-columns: 1fr; gap: 20px; }
  #page.pg-fluid .bq-hero h1 { font-size: clamp(26px, 7.4vw, 28px); line-height: 1.2; }
  #page.pg-fluid .bq-lede { font-size: 14px; line-height: 21px; }
  #page.pg-fluid .bq-actions { flex-direction: column; align-items: stretch; gap: 4px; }`n  #page.pg-fluid .bq-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 2px; font-size: 14px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
  #page.pg-fluid .bq-collage { grid-template-columns: 1.3fr .7fr; height: 300px; }
  #page.pg-fluid .bq-ph span { font-size: 12px; left: 10px; bottom: 8px; }
}
@media (hover: none) { .bq-ph:hover img { transform: none; } }

/* boutique / 30-stays: three stay cards, photo and copy swap sides */
.bq-stays .bq-head { margin-bottom: 12px; }
.bq-stay { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--bq-line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(12,35,64,.5); scroll-margin-top: 72px; }
.bq-stay-media { position: relative; min-height: 210px; background: var(--navy); overflow: hidden; }
.bq-stay-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bq-stay-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,20,35,.5), transparent 48%); pointer-events: none; }
.bq-badge { position: absolute; z-index: 1; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(0,32,51,.8); border: 1px solid rgba(255,255,255,.2); font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #fff; }
.bq-note { position: absolute; z-index: 1; left: 15px; bottom: 11px; font-size: 11px; font-weight: 500; letter-spacing: .3px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bq-stay-copy { display: flex; flex-direction: column; justify-content: center; padding: 16px 22px; }
.bq-type { font-size: 11.5px; font-weight: 600; letter-spacing: .2px; color: var(--gold-text); }
.bq-stay h3 { margin: 4px 0 6px; font-size: 18px; line-height: 24px; }
.bq-desc { font-size: 12.5px; line-height: 19px; color: var(--gray); }
.bq-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 11px 0 12px; }
.bq-reasons > div { padding-top: 7px; border-top: 1px solid var(--bq-line); }
.bq-reasons dt { font-size: 11px; font-weight: 700; letter-spacing: .1px; color: var(--gold-text); }
.bq-reasons dd { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--navy); }

@media (max-width: 1023px) {
  #page.pg-fluid .bq-stay-copy { padding: 18px clamp(16px, 3vw, 24px); }
  #page.pg-fluid .bq-desc { font-size: 13px; line-height: 19px; }
  #page.pg-fluid .bq-reasons dd { font-size: 12.5px; line-height: 17px; }
  #page.pg-fluid .bq-reasons dt { font-size: 11.5px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .bq-stay { grid-template-columns: 1fr; }
  #page.pg-fluid .bq-stay-media { min-height: 240px; }
  #page.pg-fluid .bq-stay-copy { padding: 20px 18px 22px; }
  #page.pg-fluid .bq-stay h3 { font-size: 20px; line-height: 26px; }
  #page.pg-fluid .bq-desc { font-size: 14px; line-height: 21px; }
  #page.pg-fluid .bq-type, #page.pg-fluid .bq-reasons dt { font-size: 12px; }
  #page.pg-fluid .bq-badge { font-size: 12px; }
  #page.pg-fluid .bq-note { font-size: 13px; }
  #page.pg-fluid .bq-reasons dd { font-size: 13px; line-height: 18px; }
}

/* slider: every stay is one slide; only the active one shows (fade + slide), the rest sit in the same spot, hidden. Any number of stays, the section height stays the same.
   Without JS the stays simply stack as a list. JS adds .is-slider to the track. */
.bq-track { display: grid; gap: 12px; padding-bottom: 10px; }
.bq-track:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; border-radius: 18px; }
.bq-track.is-slider { touch-action: pan-y; }
.bq-track.is-slider .bq-stay { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(26px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.bq-track.is-slider .bq-stay.is-active { opacity: 1; visibility: visible; transform: none; z-index: 1; transition-delay: 0s; }
.bq-stay-media img { transform: scale(1); transform-origin: 50% 60%; }
.bq-stay.is-active .bq-stay-media img { animation: bq-drift 9s ease-out both; }
.bq-track.is-slider .bq-stay.is-active .bq-stay-copy > * { animation: bq-rise .6s ease-out both; }
.bq-track.is-slider .bq-stay.is-active .bq-stay-copy > *:nth-child(2) { animation-delay: .08s; }
.bq-track.is-slider .bq-stay.is-active .bq-stay-copy > *:nth-child(3) { animation-delay: .16s; }
.bq-track.is-slider .bq-stay.is-active .bq-stay-copy > *:nth-child(4) { animation-delay: .24s; }
.bq-track.is-slider .bq-stay.is-active .bq-stay-copy > *:nth-child(5) { animation-delay: .32s; }
@keyframes bq-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes bq-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bq-ctl { display: flex; align-items: center; gap: 16px; }
.bq-ctl[hidden] { display: none; }
.bq-count { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--gray); white-space: nowrap; }
.bq-count b { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--navy); }
.bq-count-l { margin-left: 4px; letter-spacing: .2px; font-size: 11.5px; font-weight: 500; }
.bq-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--bq-line); overflow: hidden; }
.bq-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .5s ease; }
.bq-arrows { display: flex; gap: 8px; }
.bq-arrows button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--gold-text); border-radius: 50%; background: #fff; color: var(--navy); font-size: 16px; transition: background .15s, border-color .15s, transform .15s; }
.bq-arrows button:hover, .bq-arrows button:focus-visible { background: var(--gold); border-color: var(--gold); transform: translateY(-1px); }
.bq-arrows button:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.bq-arrows #bq-prev .ic { transform: rotate(180deg); }
@media (hover: none) { .bq-arrows button:hover { transform: none; } }
@media (max-width: 639px) {
  #page.pg-fluid .bq-count-l { display: none; }
  #page.pg-fluid .bq-count { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bq-stay.is-active .bq-stay-media img, .bq-track.is-slider .bq-stay.is-active .bq-stay-copy > * { animation: none; }
  .bq-bar i { transition: none; }
}

/* one line under the slider: the Boutique idea also works beyond India */
.bq-beyond { margin-top: 10px; font-size: 12.5px; line-height: 19px; color: var(--gray); }
.bq-beyond a:not(.bq-more) { font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.bq-beyond a:not(.bq-more):hover, .bq-beyond a:not(.bq-more):focus-visible { color: var(--gold-text); }
.bq-beyond .bq-more { margin-left: 6px; font-size: 12.5px; }
@media (max-width: 1023px) { #page.pg-fluid .bq-beyond { font-size: 13px; } }
@media (max-width: 639px) { #page.pg-fluid .bq-beyond { font-size: 13.5px; line-height: 21px; } #page.pg-fluid .bq-beyond .bq-more { display: flex; margin: 4px 0 0; } }

/* boutique / 50-styles */
.bq-styles .bq-head { margin-bottom: 14px; }
.bq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.9); transition: border-color .15s, color .15s, transform .15s; }
.bq-chips a:hover, .bq-chips a:focus-visible { border-color: var(--gold); color: var(--gold-light); transform: translateY(-1px); }

@media (max-width: 639px) {
  #page.pg-fluid .bq-chips a { min-height: 44px; padding: 0 16px; font-size: 14px; }
}
@media (hover: none) { .bq-chips a:hover { transform: none; } }

/* boutique / 70-itinerary */
.bq-route { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bq-route li { position: relative; padding: 13px 14px 14px; border: 1px solid var(--bq-line); border-radius: 13px; background: rgba(255,255,255,.6); }
.bq-route li:not(:last-child)::after { content: '\2192'; position: absolute; right: -11px; top: 50%; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 700; }
.bq-route span { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold-text); }
.bq-route h3 { margin: 3px 0 3px; font-family: var(--sans); font-size: 13px; line-height: 17px; font-weight: 700; }
.bq-route p { font-size: 12px; line-height: 17px; color: var(--gray); }
.bq-itin-line { margin-top: 12px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 21px; color: var(--navy); }
.bq-itin-line .bq-more { margin-left: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; }

@media (max-width: 1023px) {
  #page.pg-fluid .bq-route { grid-template-columns: 1fr 1fr; }
  #page.pg-fluid .bq-route li:nth-child(2)::after { display: none; }
  #page.pg-fluid .bq-route h3 { font-size: 14px; line-height: 19px; }
  #page.pg-fluid .bq-route p { font-size: 13px; line-height: 18px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .bq-route { grid-template-columns: 1fr; gap: 12px; }
  #page.pg-fluid .bq-route li { padding: 14px 16px; }
  #page.pg-fluid .bq-route li:not(:last-child)::after { content: '\2193'; right: auto; left: 20px; top: auto; bottom: -16px; margin-top: 0; }
  #page.pg-fluid .bq-route li:nth-child(2)::after { display: grid; }
  #page.pg-fluid .bq-route h3 { font-size: 15px; line-height: 20px; }
  #page.pg-fluid .bq-route p { font-size: 13.5px; line-height: 20px; }
  #page.pg-fluid .bq-itin-line { font-size: 15px; }
  #page.pg-fluid .bq-itin-line .bq-more { display: flex; justify-content: center; margin: 4px 0 0; font-size: 13px; }
}

/* boutique / 80-enquiry */
.bq-enq-card { padding: 24px 28px 22px; border-radius: 22px; background: linear-gradient(180deg, #002841 0%, #001f33 100%); color: #fff; box-shadow: 0 22px 50px -30px rgba(0,20,35,.8); }
.bq-enq-card h2 { color: #fff; }
.bq-enq-card .bq-eyebrow { color: var(--gold-light); }
.bq-enq-card .bq-head p { color: rgba(255,255,255,.75); }
.bq-form { display: grid; grid-template-columns: 1.15fr 1fr .9fr .9fr 1.1fr; gap: 10px; }
.bq-field { display: flex; flex-direction: column; gap: 5px; }
.bq-field label { font-size: 11px; font-weight: 600; letter-spacing: .1px; color: var(--gold-light); }
.bq-field select, .bq-field input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(255,255,255,.07); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; }
.bq-field select option { color: var(--navy); background: #fff; }
.bq-field input::placeholder { color: rgba(255,255,255,.5); }
.bq-field select:focus-visible, .bq-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bq-enq-card .bq-actions { align-items: center; margin-top: 16px; }
.bq-form[hidden], .bq-status[hidden] { display: none; }
.bq-field-c1 { grid-column: 1 / 3; } .bq-field-c2 { grid-column: 3 / 5; } .bq-field-c3 { grid-column: 5; }
.bq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bq-status { padding: 20px 22px; border: 1px solid rgba(216,175,99,.6); border-radius: 14px; font-size: 14px; line-height: 22px; }
button.bq-btn { border: 0; cursor: pointer; font-family: var(--sans); }
.bq-enq-note { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.6); }

@media (max-width: 1023px) {
  #page.pg-fluid .bq-form { grid-template-columns: 1fr 1fr 1fr; }
  #page.pg-fluid .bq-field-feel { grid-column: 2 / 4; }
  #page.pg-fluid .bq-field-c1, #page.pg-fluid .bq-field-c2, #page.pg-fluid .bq-field-c3 { grid-column: auto; }
  #page.pg-fluid .bq-enq-card { padding: 22px clamp(16px, 3.4vw, 28px); }
  #page.pg-fluid .bq-field label { font-size: 11px; }
  #page.pg-fluid .bq-field select, #page.pg-fluid .bq-field input { font-size: 13px; }
  #page.pg-fluid .bq-enq-note { font-size: 12px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .bq-form { grid-template-columns: 1fr; }
  #page.pg-fluid .bq-field-feel { grid-column: auto; }
  #page.pg-fluid .bq-field label { font-size: 12px; }
  #page.pg-fluid .bq-field select, #page.pg-fluid .bq-field input { min-height: 48px; font-size: 15px; }
  #page.pg-fluid .bq-enq-card .bq-actions { flex-direction: column; align-items: stretch; }
  #page.pg-fluid .bq-enq-note { margin: 0; text-align: center; font-size: 13px; }
}

/* phone bottom bar from the reference ("Like this stay style?"), leaves room for the site's floating WhatsApp button on the right */
.bq-mobile-bar { display: none; }
@media (max-width: 639px) {
  #page.pg-fluid .bq-enq { padding-bottom: 76px; }
  #page.pg-fluid .bq-mobile-bar { position: fixed; z-index: 95; left: 12px; right: 84px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(0,32,51,.96); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
  #page.pg-fluid .bq-mobile-bar span { font-size: 13px; line-height: 17px; font-weight: 600; color: #fff; }
  #page.pg-fluid .bq-mobile-bar small { display: block; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.65); }
  #page.pg-fluid .bq-mobile-bar .bq-btn { padding: 0 14px; }
}

/* boutique / 90-touch: iPad + phone legibility. Micro labels never below 12px (13px on phone) and every tap target 44px tall. Loaded last so it wins. */
@media (max-width: 1023px) {
  #page.pg-fluid #boutique .bq-eyebrow, #page.pg-fluid #boutique .bq-badge, #page.pg-fluid #boutique .bq-note, #page.pg-fluid #boutique .bq-type,
  #page.pg-fluid #boutique .bq-reasons dt, #page.pg-fluid #boutique .bq-field label, #page.pg-fluid #boutique .bq-ph span,
   #page.pg-fluid #boutique .bq-count-l, #page.pg-fluid #boutique .bq-route p, #page.pg-fluid #boutique .bq-enq-note { font-size: 12.5px; line-height: 18px; }
  #page.pg-fluid #boutique .bq-btn { min-height: 44px; height: auto; font-size: 13px; }
  #page.pg-fluid #boutique .bq-more { min-height: 44px; font-size: 13px; }
  #page.pg-fluid #boutique .bq-chips a { min-height: 44px; padding: 0 16px; font-size: 13px; }
  #page.pg-fluid #boutique .bq-field select, #page.pg-fluid #boutique .bq-field input { min-height: 44px; }
}
@media (max-width: 639px) {
  #page.pg-fluid #boutique .bq-eyebrow, #page.pg-fluid #boutique .bq-badge, #page.pg-fluid #boutique .bq-note, #page.pg-fluid #boutique .bq-type,
  #page.pg-fluid #boutique .bq-reasons dt, #page.pg-fluid #boutique .bq-field label, #page.pg-fluid #boutique .bq-ph span,
   #page.pg-fluid #boutique .bq-count-l, #page.pg-fluid #boutique .bq-route p, #page.pg-fluid #boutique .bq-enq-note { font-size: 13px; }
}

/* PAGE discover.html - built from the reference discover-ikou-v7 (rule 16): same six sections, same order, same layout patterns, same copy. Skin = site tokens only.
   Shared bits: bands, Cinzel kicker with accent bar, section head, icon disc, button. 1024px canvas on desktop (scaled by base.js); below 1024px the page is fluid (#page has class "home pg-fluid"). */
#discover { --dv-x: 54px; --dv-y: 26px; --dv-line: rgba(12,35,64,.14); display: block; width: 1024px; background: var(--cream); color: var(--navy); }
.dv { position: relative; padding: var(--dv-y) var(--dv-x); overflow: hidden; scroll-margin-top: 72px; }
.dv-white { background: var(--cream); }
.dv-cream { background: var(--cream); }
.dv-navy  { background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); color: #fff; }
.dv-stone { background: var(--cream); }
.dv-sand  { background: var(--cream); }
.dv h1, .dv h2, .dv h3 { font-weight: 500; color: var(--navy); }
.dv h2 { font-family: var(--serif); font-size: 21px; line-height: 27px; margin: 4px 0 0; }
.dv h3 { font-family: var(--logo); }
.dv-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-deep); color: var(--gold); font-size: 16px; }
.dv-ic .ic { stroke-width: 1.5; }

/* kicker: Cinzel caps with an accent bar underneath (gold: the reference terracotta is not a site colour) */
.dv-kicker { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--logo); font-size: 17px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; color: var(--navy); }
.dv-kicker::after { content: ''; width: 50px; height: 3px; margin-top: 7px; border-radius: 999px; background: var(--gold); }

/* section head: kicker + heading left, paragraph right */
.dv-head { display: grid; grid-template-columns: .82fr 1.18fr; gap: 36px; align-items: end; margin-bottom: 16px; }
.dv-head > p { font-family: var(--serif); font-size: 14.5px; line-height: 23px; color: var(--gray); }

.dv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 26px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; transition: background .15s, color .15s, transform .15s; }
.dv-btn:hover { background: var(--gold); color: var(--navy); transform: translateY(-1px); }
.dv-btn:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

@media (max-width: 1023px) {
  #page.pg-fluid #discover { --dv-x: clamp(16px, 5vw, 54px); --dv-y: 30px; width: 100%; }
  #page.pg-fluid .dv-head { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 639px) {
  #page.pg-fluid #discover { --dv-y: 26px; }
  #page.pg-fluid .dv h2 { font-size: 20px; line-height: 26px; }
  #page.pg-fluid .dv-kicker { font-size: 16px; }
  #page.pg-fluid .dv-head > p { font-size: 15px; line-height: 23px; }
  #page.pg-fluid .dv-btn { width: 100%; }
}
@media (hover: none) { .dv-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { #discover *, #discover *::before, #discover *::after { transition: none !important; animation: none !important; } }

/* discover / 10-hero */
.dv-hero { padding-top: 28px; padding-bottom: 24px; background: var(--cream); border-bottom: 1px solid var(--dv-line); }
.dv-hero-in { max-width: 916px; }
.dv-h1 { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0 0 12px; font-family: var(--logo); font-size: 29px; line-height: 1.1; font-weight: 500; letter-spacing: .01em; }
.dv-h1::after { content: ''; width: 72px; height: 3px; margin-top: 10px; border-radius: 999px; background: var(--gold); }
.dv-thesis { max-width: 820px; margin: 0; font-family: var(--logo); font-size: 24px; line-height: 1.22; font-weight: 500; color: var(--navy); }
.dv-thesis strong { font-weight: 600; }
.dv-thesis em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-text); }
.dv-hero-copy { max-width: 690px; margin: 12px 0 0; font-family: var(--serif); font-size: 15px; line-height: 24px; color: var(--gray); }
.dv-signoff { margin: 8px 0 0; font-family: var(--script); font-size: 19px; line-height: 1.3; color: var(--gold-text); }

@media (max-width: 1023px) {
  #page.pg-fluid .dv-hero { padding-top: 30px; padding-bottom: 28px; }
  #page.pg-fluid .dv-thesis { font-size: clamp(21px, 3.4vw, 25px); }
}
@media (max-width: 639px) {
  #page.pg-fluid .dv-h1 { font-size: 26px; }
  #page.pg-fluid .dv-thesis { font-size: clamp(19px, 5.4vw, 22px); }
  #page.pg-fluid .dv-hero-copy { font-size: 15px; line-height: 24px; }
  #page.pg-fluid .dv-signoff { font-size: 19px; }
}

/* discover / 20-statement: one centred statement, big serif line + short line, gold accent bar */
.dv-statement-in { max-width: 760px; margin: 0 auto; text-align: center; }
#dv-statement h2 { font-family: var(--serif); font-size: 27px; line-height: 35px; letter-spacing: -.1px; margin: 0; }
#dv-statement h2::after { content: ''; display: block; width: 50px; height: 3px; margin: 12px auto 0; border-radius: 999px; background: var(--gold); }
.dv-statement-copy { max-width: 620px; margin: 12px auto 0; font-family: var(--serif); font-size: 15px; line-height: 24px; color: var(--gray); }
.dv-statement-copy strong { font-weight: 600; color: var(--navy); }

@media (max-width: 639px) {
  #page.pg-fluid #dv-statement h2 { font-size: 23px; line-height: 30px; }
  #page.pg-fluid .dv-statement-copy { font-size: 15px; line-height: 24px; }
}

/* discover / 30-the-way: six columns divided by thin lines, then the bridge line */
.dv-way-list { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; padding: 1px 0; background: var(--dv-line); }
.dv-way-item { display: block; padding: 14px 12px 12px; background: var(--cream); }
.dv-way-item:first-child { padding-left: 0; }
.dv-way-item .dv-ic { margin-bottom: 8px; }
.dv-way-item small { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 600; letter-spacing: .13em; color: var(--gold-text); }
.dv-way-item h3 { margin: 0 0 4px; font-size: 14.5px; line-height: 19px; }
.dv-way-item p { margin: 0; font-size: 11.5px; line-height: 18px; color: var(--gray); }
.dv-way-bridge { margin: 14px 0 0; padding: 11px 20px; background: #fff; border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 14.5px; line-height: 23px; color: var(--navy); }
.dv-way-bridge strong { font-weight: 600; color: var(--gold-text); }

@media (max-width: 1023px) {
  #page.pg-fluid .dv-way-list { grid-template-columns: repeat(3, 1fr); }
  #page.pg-fluid .dv-way-item, #page.pg-fluid .dv-way-item:first-child { padding: 16px 14px 14px; }
  #page.pg-fluid .dv-way-item small { font-size: 13px; }
  #page.pg-fluid .dv-way-item p { font-size: 13px; line-height: 20px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .dv-way-list { grid-template-columns: 1fr; }
  #page.pg-fluid .dv-way-item, #page.pg-fluid .dv-way-item:first-child { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; align-items: start; padding: 14px 0; }
  #page.pg-fluid .dv-way-item .dv-ic { margin: 2px 0 0; }
  #page.pg-fluid .dv-way-item p { font-size: 13px; }
  #page.pg-fluid .dv-way-bridge { padding: 12px 14px; font-size: 14.5px; }
}

/* discover / 40-promise: dark navy band that breaks the page. Glass panel (promise, pulse pillars, note) beside three tool cards. Compact. */
#promise { padding-top: 20px; padding-bottom: 20px; }
#promise h2, #promise h3, #promise .dv-kicker { color: #fff; }
.dv-promise-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: stretch; }
.dv-promise-copy { position: relative; padding: 14px 18px 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(216,175,99,.4); }
#promise .dv-kicker { font-size: 14px; }
#promise .dv-kicker::after { width: 42px; height: 2px; margin-top: 6px; }
.dv-promise-copy h2 { font-size: 18px; line-height: 24px; margin: 6px 0 4px; }
.dv-promise-line { margin: 0; font-family: var(--serif); font-size: 13px; line-height: 19px; color: rgba(255,255,255,.84); }
.dv-pillars { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; padding-top: 14px; }
.dv-pillars::before { content: ''; position: absolute; left: 7%; right: 7%; top: 4px; height: 2px; background: linear-gradient(90deg, rgba(216,175,99,.25), var(--gold), rgba(216,175,99,.25)); }
.dv-pulse { position: absolute; top: 0; left: 7%; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(216,175,99,.18); animation: dvPromiseTravel 5s ease-in-out infinite; }
.dv-pillars:hover .dv-pulse { animation-play-state: paused; }
@keyframes dvPromiseTravel { 0% { left: 7%; } 50% { left: 91%; } 100% { left: 7%; } }
.dv-pillars div { padding: 6px 9px; background: rgba(255,255,255,.08); }
.dv-pillars strong { display: block; margin-bottom: 1px; font-family: var(--logo); font-size: 11.5px; font-weight: 600; color: #fff; }
.dv-pillars span:not(.dv-pulse) { font-size: 11px; line-height: 15px; color: rgba(255,255,255,.82); }
.dv-promise-note { margin: 7px 0 0; font-family: var(--script); font-size: 13px; line-height: 1.3; color: var(--gold-light); }
.dv-tools { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 8px; scroll-margin-top: 90px; }
.dv-tool { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; padding: 8px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(216,175,99,.4); }
.dv-tool .dv-ic { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 16px; background: var(--gold); color: var(--navy); }
.dv-tool h3 { margin: 0 0 2px; font-size: 13px; line-height: 18px; align-self: end; }
.dv-tool p { margin: 0; font-size: 11.5px; line-height: 16px; color: rgba(255,255,255,.84); align-self: start; }

@media (max-width: 1023px) {
  #page.pg-fluid #promise { padding-top: 24px; padding-bottom: 24px; }
  #page.pg-fluid .dv-promise-grid { grid-template-columns: 1fr; gap: 12px; }
  #page.pg-fluid #promise .dv-kicker { font-size: 15px; }
  #page.pg-fluid .dv-promise-copy h2 { font-size: 19px; line-height: 25px; }
  #page.pg-fluid .dv-promise-line { font-size: 14px; line-height: 21px; }
  #page.pg-fluid .dv-pillars strong { font-size: 13px; }
  #page.pg-fluid .dv-pillars span:not(.dv-pulse), #page.pg-fluid .dv-tool p { font-size: 13px; line-height: 19px; }
  #page.pg-fluid .dv-tool h3 { font-size: 14px; line-height: 19px; }
  #page.pg-fluid .dv-promise-note { font-size: 15px; }
}
@media (max-width: 639px) {
  #page.pg-fluid .dv-promise-copy { padding: 16px 14px; }
  #page.pg-fluid .dv-pillars { grid-template-columns: 1fr; padding-top: 0; }
  #page.pg-fluid .dv-pillars::before, #page.pg-fluid .dv-pulse { display: none; }

  #page.pg-fluid .dv-tool { padding: 10px 14px; column-gap: 12px; }

}
@media (prefers-reduced-motion: reduce) { .dv-pulse { animation: none; left: 7%; } }

/* discover / 50-pace: one flowing rhythm wave with a soft gold glow beneath it; the five paces sit on it (no boxes, no dividers, so it does not repeat the IKOU Way) */
.dv-rhythm { position: relative; }
.dv-wave { position: absolute; top: 0; left: 0; width: 100%; height: 68px; overflow: visible; }
.dv-wave-fill { fill: url(#dvWaveFill); stroke: none; }
.dv-wave-line { fill: none; stroke: var(--gold); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.dv-paces { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.dv-pace-item { position: relative; display: block; padding: 80px 12px 4px; text-align: center; }
.dv-pace-item .dv-ic { position: absolute; top: -4px; left: 50%; width: 36px; height: 36px; margin-left: -18px; font-size: 17px; box-shadow: 0 0 0 5px #fff; transition: background .18s, color .18s, transform .18s; }
.dv-pace-item:nth-child(even) .dv-ic { top: 36px; }
.dv-pace-item h3 { margin: 0 0 4px; font-size: 15.5px; line-height: 21px; transition: color .18s; }
.dv-desc { display: block; margin-bottom: 7px; font-size: 11.5px; line-height: 18px; color: var(--gray); }
.dv-fit { display: block; font-family: var(--serif); font-size: 12px; line-height: 18px; font-style: italic; color: var(--navy); }
.dv-pace-item:hover .dv-ic, .dv-pace-item:focus-visible .dv-ic { background: var(--gold); color: var(--navy); transform: scale(1.12); }
.dv-pace-item:hover h3, .dv-pace-item:focus-visible h3 { color: var(--gold-text); }
.dv-pace-item:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.dv-pace-signoff { margin: 12px 0 0; text-align: right; font-family: var(--script); font-size: 17px; line-height: 1.3; color: var(--gold-text); }

@media (min-width: 1024px) { #pace .dv-head { grid-template-columns: .6fr 1.4fr; } }
@media (max-width: 1023px) {
  #page.pg-fluid .dv-desc { font-size: 13px; line-height: 19px; }
  #page.pg-fluid .dv-fit { font-size: 13px; line-height: 19px; color: var(--navy); }
}
@media (max-width: 639px) {
  #page.pg-fluid .dv-wave { display: none; }
  #page.pg-fluid .dv-rhythm::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 18px; border-left: 1px dashed var(--gold); }
  #page.pg-fluid .dv-paces { grid-template-columns: 1fr; row-gap: 16px; }
  #page.pg-fluid .dv-pace-item { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; min-height: 48px; padding: 0; text-align: left; }
  #page.pg-fluid .dv-pace-item .dv-ic, #page.pg-fluid .dv-pace-item:nth-child(even) .dv-ic { position: static; grid-row: 1 / span 3; margin: 0; box-shadow: 0 0 0 4px #fff; }
  #page.pg-fluid .dv-pace-item h3 { margin: 0 0 2px; }
  #page.pg-fluid .dv-desc { margin-bottom: 4px; }
  #page.pg-fluid .dv-pace-signoff { text-align: left; font-size: 18px; }
}
@media (hover: none) { .dv-pace-item:hover .dv-ic { background: var(--navy-deep); color: var(--gold); transform: none; } .dv-pace-item:hover h3 { color: var(--navy); } }

/* discover / 60-cta: centred kicker, heading, line, button */
#dv-cta { padding-top: 24px; padding-bottom: 26px; text-align: center; }
.dv-cta-in .dv-kicker { align-items: center; }
#dv-cta h2 { font-family: var(--logo); font-size: 25px; line-height: 31px; margin: 6px 0 4px; }
.dv-cta-copy { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 22px; color: var(--gray); }
.dv-cta-in .dv-btn { margin-top: 14px; }

@media (max-width: 639px) {
  #page.pg-fluid #dv-cta h2 { font-size: 22px; line-height: 28px; }
  #page.pg-fluid .dv-cta-copy { font-size: 15px; }
}