/* ============================================================
   ASIA DIVE HOLIDAYS — site.css
   Extracted verbatim from the seven approved template pages
   (design system v1 "THE DESCENT"). Single point of maintenance.
   Part A: core design system (was the first inline <style> block)
   Part B: sub-page chrome — sub-nav, enquiry panel, galleries
           (was the second inline <style> block)
   Part C: additions required by the migration — server-side form
           error states, no-JS fallbacks.
   ============================================================ */

/* ================= PART A — CORE ================= */
/* ============================================================
   ASIA DIVE HOLIDAYS — DESIGN SYSTEM v1 · "THE DESCENT"
   The page deepens as you scroll: sunlit shallows → the drop-off.
   ============================================================ */
:root{
  /* Colour tokens */
  --abyss:#041A22;
  --abyss-deeper:#020F14;
  --deep:#0B3B44;
  --petrol:#0F5C63;
  --lagoon:#57BFC0;
  --lagoon-dim:#3E9899;
  --gold:#E4B767;
  --gold-deep:#C99A45;
  --sand:#F4EFE6;
  --foam:#FAFCFB;
  --ink:#0A2229;
  --ink-soft:#3A555C;
  --line-light:rgba(4,26,34,.12);
  --line-dark:rgba(250,252,251,.14);

  /* Type roles */
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Figtree',system-ui,-apple-system,sans-serif;
  --mono:'Figtree',system-ui,-apple-system,sans-serif; /* v2: small labels now use the sans stack (uppercase + tracking retained) */
  --mono-num:ui-monospace,'SF Mono','Menlo',monospace; /* kept only for the numeric depth-gauge reading */

  /* Type scale (1.25 major third, fluid) */
  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-md:1.125rem;
  --t-lg:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-xl:clamp(1.6rem,1.3rem + 1.2vw,2.1rem);
  --t-2xl:clamp(2rem,1.5rem + 2.2vw,3rem);
  --t-hero:clamp(2.4rem,1.6rem + 4vw,4.6rem);

  --radius:10px;
  --radius-lg:18px;
  --maxw:1240px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --shadow-card:0 10px 34px rgba(4,26,34,.14);
  --ease:cubic-bezier(.22,.61,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--foam);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--lagoon);color:var(--abyss)}

.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--abyss);padding:.75rem 1.25rem;z-index:200;font-weight:600;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:.85rem 1.7rem;font-weight:600;font-size:1rem;letter-spacing:.02em;text-decoration:none;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s}
.hero-ctas .btn-gold,.header-cta{padding:.95rem 2rem;font-size:1.05rem}
.btn-gold{background:var(--gold);color:var(--abyss)}
.btn-gold:hover{background:var(--gold-deep)}
.btn-outline-light{border-color:rgba(250,252,251,.55);color:var(--foam)}
.btn-outline-light:hover{border-color:var(--foam);background:rgba(250,252,251,.08)}
.btn-outline-dark{border-color:var(--petrol);color:var(--petrol)}
.btn-outline-dark:hover{background:var(--petrol);color:var(--foam)}
.btn-text{padding:.4rem 0;border-radius:0;color:var(--petrol);border-bottom:1.5px solid var(--lagoon);gap:.4rem}
.on-dark .btn-text{color:var(--lagoon)}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--petrol);display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.on-dark .eyebrow{color:var(--lagoon)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-.005em}
/* v6: plain letterforms on the display face — no "ff"-style ligatures or alternates */
h1,h2,h3,.logo-name,.search-input,.m-acc>button,.review blockquote,.species-info strong{font-feature-settings:"liga" 0,"dlig" 0,"clig" 0,"calt" 0;font-variant-ligatures:none}
h2{font-size:var(--t-2xl);max-width:22ch}
h3{font-size:var(--t-lg)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem;margin-bottom:clamp(2rem,5vw,3.25rem)}
.section-head p{max-width:46ch;color:var(--ink-soft)}
.on-dark .section-head p{color:rgba(250,252,251,.72)}

section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s var(--ease),box-shadow .35s,padding .35s}
.site-header .container{display:flex;align-items:center;gap:1.6rem;padding-top:1.1rem;padding-bottom:1.1rem;transition:padding .35s var(--ease)}
.site-header.scrolled{background:rgba(4,26,34,.94);backdrop-filter:blur(10px);box-shadow:0 4px 24px rgba(2,15,20,.35)}
.site-header.scrolled .container{padding-top:.65rem;padding-bottom:.65rem}

.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--foam);margin-right:auto}
.logo-mark{width:40px;height:40px;flex:none}
.logo-name{font-family:var(--display);font-size:1.15rem;line-height:1.1}
.logo-name small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lagoon);margin-top:.15rem}

.primary-nav ul{display:flex;list-style:none;gap:.25rem}
.primary-nav>ul>li{position:relative}
.nav-link{display:flex;align-items:center;gap:.35rem;background:none;border:0;color:var(--foam);font-weight:500;font-size:var(--t-sm);padding:.6rem .85rem;border-radius:8px;text-decoration:none;transition:background .2s}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:rgba(250,252,251,.1)}
.nav-link .caret{transition:transform .25s}
.nav-link[aria-expanded="true"] .caret{transform:rotate(180deg)}

/* Mega menu */
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);min-width:640px;background:var(--foam);color:var(--ink);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(2,15,20,.4);padding:1.6rem;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.mega.small{min-width:280px}
.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2rem}
.mega-col h3{font-family:var(--mono);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol);margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--line-light)}
.mega-col ul{list-style:none;display:grid;gap:.1rem}
.mega-col a{display:block;text-decoration:none;padding:.42rem .55rem;margin-left:-.55rem;border-radius:8px;font-size:var(--t-sm);color:var(--ink)}
.mega-col a:hover{background:var(--sand);color:var(--petrol)}
.mega-footer{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line-light);display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--t-sm)}
.mega-footer .map-cue{font-family:var(--mono);font-size:0.875rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem}

.header-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;background:rgba(250,252,251,.1);border:0;border-radius:50%;color:var(--foam);transition:background .2s}
.icon-btn:hover{background:rgba(250,252,251,.22)}
.icon-btn.wa{background:rgba(87,191,192,.2);color:var(--lagoon)}
.lang-switch{background:none;border:1px solid rgba(250,252,251,.3);color:var(--foam);border-radius:999px;padding:.35rem .8rem;font-family:var(--mono);font-size:0.875rem;letter-spacing:.1em}
.header-cta{white-space:nowrap}
.hamburger{display:none}

/* Mobile nav */
@media (max-width:1020px){
  .primary-nav,.header-cta,.lang-switch{display:none}
  .hamburger{display:grid}
  .mobile-nav{position:fixed;inset:0;background:var(--abyss);z-index:150;padding:5.5rem var(--gutter) 7rem;overflow-y:auto;transform:translateX(100%);transition:transform .35s var(--ease);color:var(--foam)}
  .mobile-nav.open{transform:translateX(0)}
  .mobile-nav .close-mnav{position:absolute;top:1.1rem;right:var(--gutter)}
  .m-acc{border-bottom:1px solid var(--line-dark)}
  .m-acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:var(--foam);font-family:var(--display);font-size:1.35rem;padding:1.1rem 0;text-align:left}
  .m-acc>button .caret{transition:transform .25s}
  .m-acc>button[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .m-panel{display:none;padding:0 0 1.2rem;list-style:none}
  .m-panel.open{display:grid;gap:.2rem}
  .m-panel a{color:rgba(250,252,251,.8);text-decoration:none;padding:.45rem 0;display:block;font-size:var(--t-sm)}
  .mobile-nav .btn{margin-top:1.6rem;justify-content:center;width:100%}
}
@media (min-width:1021px){.mobile-nav{display:none}}

/* I1 - the sticky mobile CTA bar was removed; its actions moved to the top bar. */

/* Search overlay */
.search-overlay{position:fixed;inset:0;z-index:160;background:rgba(2,15,20,.92);backdrop-filter:blur(8px);display:grid;place-items:start center;padding:16vh var(--gutter) 2rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.search-overlay.open{opacity:1;visibility:visible}
.search-panel{width:min(720px,100%);color:var(--foam)}
.search-panel label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon)}
.search-input{width:100%;margin-top:.8rem;background:none;border:0;border-bottom:2px solid rgba(250,252,251,.35);color:var(--foam);font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);padding:.4rem 0;outline:none}
.search-input:focus{border-color:var(--gold)}
.search-hints{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.55rem;list-style:none}
.search-hints a{font-size:var(--t-sm);text-decoration:none;border:1px solid rgba(250,252,251,.28);border-radius:999px;padding:.4rem 1rem;color:rgba(250,252,251,.85)}
.search-hints a:hover{border-color:var(--lagoon);color:var(--lagoon)}
.search-close{position:absolute;top:1.4rem;right:var(--gutter)}
.search-scope{margin-top:2rem;font-size:var(--t-xs);color:rgba(250,252,251,.5);font-family:var(--mono)}

/* ============================================================
   DEPTH GAUGE — the site signature (desktop only)
   ============================================================ */
.depth-gauge{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:80;font-family:var(--mono);color:var(--foam);display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;pointer-events:none;mix-blend-mode:normal}
.depth-gauge .reading{font-family:var(--mono-num);font-size:1.05rem;font-weight:500;letter-spacing:.05em;text-shadow:0 1px 8px rgba(2,15,20,.6)}
.depth-gauge .reading small{font-size:.6rem;letter-spacing:.25em;display:block;text-align:right;opacity:.7}
.depth-track{width:2px;height:180px;background:rgba(250,252,251,.22);position:relative;border-radius:2px}
.depth-track::before{content:"";position:absolute;left:-3px;width:8px;height:1px;background:rgba(250,252,251,.4);top:25%}
.depth-track::after{content:"";position:absolute;left:-3px;width:8px;height:1px;background:rgba(250,252,251,.4);top:75%}
.depth-fill{position:absolute;top:0;left:0;width:100%;background:var(--gold);border-radius:2px;height:0%}
.depth-gauge .env{font-size:.58rem;letter-spacing:.15em;opacity:.65;text-align:right;line-height:1.7}
@media (max-width:1180px){.depth-gauge{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;color:var(--foam);padding:0;overflow:hidden}
.hero-photo{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 70% -10%,rgba(228,183,103,.18),transparent 45%),
  linear-gradient(180deg,#2FA3B0 0%,#1B7C8C 34%,#0F5C63 62%,#0B3B44 100%)}
.hero-photo::before{content:"";position:absolute;inset:0;background:
  radial-gradient(45% 60% at 22% 30%,rgba(250,252,251,.16),transparent 70%),
  radial-gradient(30% 45% at 60% 15%,rgba(250,252,251,.12),transparent 70%);
  animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{from{opacity:.55;transform:translateX(-1.5%)}to{opacity:1;transform:translateX(1.5%)}}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,26,34,.38) 0%,rgba(4,26,34,.18) 30%,rgba(4,26,34,.34) 55%,rgba(4,26,34,.82) 100%)}
.hero-barracuda{position:absolute;right:-4%;top:14%;width:min(560px,60vw);opacity:.5;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-3%,2%)}}
.hero-bubbles{position:absolute;left:6%;bottom:18%;width:60px;height:300px;overflow:visible}
.hero-bubbles .bub{fill:none;stroke:rgba(250,252,251,.4);stroke-width:1;animation:rise 9s linear infinite}
.hero-bubbles .b2{animation-duration:12s;animation-delay:2s}
.hero-bubbles .b3{animation-duration:10s;animation-delay:4.5s}
.hero-bubbles .b4{animation-duration:13s;animation-delay:7s}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.8}100%{transform:translateY(-280px);opacity:0}}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(4.5rem,9vh,7rem)}
.hero-kicker{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.hero-kicker::before{content:"";width:44px;height:1px;background:var(--gold)}
.hero h1{font-size:var(--t-hero);max-width:15ch;font-weight:500}
.hero h1 em{font-style:italic;color:var(--lagoon)}
.hero-sub{margin-top:1.4rem;max-width:52ch;font-size:var(--t-md);color:rgba(250,252,251,.85);font-weight:300}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.trust-strip{position:relative;z-index:2;border-top:1px solid rgba(250,252,251,.18);background:rgba(4,26,34,.35);backdrop-filter:blur(6px)}
.trust-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;padding:1rem 0;font-size:var(--t-sm)}
.trust-strip li{display:flex;align-items:center;gap:.6rem}
.trust-strip li svg{flex:none}
.trust-strip .lic{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.08em}

/* ============================================================
   THE DESCENT — section band backgrounds (light → abyss)
   ============================================================ */
.band-0m{background:var(--foam)}
.band-5m{background:var(--sand)}
.band-12m{background:linear-gradient(180deg,var(--sand),#E9EFEA)}
.band-18m{background:var(--petrol);color:var(--foam)}
.band-24m{background:linear-gradient(180deg,var(--petrol),var(--deep));color:var(--foam)}
.band-30m{background:var(--deep);color:var(--foam)}
.band-36m{background:linear-gradient(180deg,var(--deep),var(--abyss));color:var(--foam)}
.band-40m{background:var(--abyss);color:var(--foam)}
.on-dark h2,.on-dark h3{color:var(--foam)}

.depth-marker{font-family:var(--mono);font-size:0.875rem;letter-spacing:.24em;color:currentColor;opacity:.45;display:flex;align-items:center;gap:.7rem;margin-bottom:2.2rem}
.depth-marker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============================================================
   CARDS
   ============================================================ */
.card-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
/* v6: forced 3-up rows for featured destinations & resorts */
.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.card-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.card-grid.cols-4{grid-template-columns:1fr}}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.card-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.card-grid.cols-3{grid-template-columns:1fr}}
@media (max-width:980px){.card-grid.even-3{grid-template-columns:1fr}}
.card{background:var(--foam);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(4,26,34,.22)}
.card-media{aspect-ratio:4/3;position:relative;overflow:hidden}
.card-media .ph{position:absolute;inset:0;transition:transform .6s var(--ease)}
.card:hover .card-media .ph{transform:scale(1.05)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* unifying grade over mixed-source photos + solid gradient fallback beneath */
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,92,99,.10),rgba(4,26,34,.18)),radial-gradient(60% 50% at 30% 20%,rgba(250,252,251,.14),transparent 65%)}
.badge{position:absolute;top:.8rem;left:.8rem;z-index:2;background:rgba(4,26,34,.82);color:var(--gold);font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;backdrop-filter:blur(4px)}
.card-body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-body h3{font-size:1.3rem}
.card-body p{font-size:var(--t-sm);color:var(--ink-soft);flex:1}
.card-meta{font-family:var(--mono);font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-link{font-weight:600;font-size:var(--t-sm);color:var(--petrol);display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem}
.card:hover .card-link{color:var(--gold-deep)}

/* placeholder photo treatments (unified duotone grade) */
.ph-1{background:linear-gradient(160deg,#2FA3B0,#0F5C63 70%,#0B3B44)}
.ph-2{background:linear-gradient(200deg,#57BFC0,#0F5C63 65%)}
.ph-3{background:linear-gradient(150deg,#1B7C8C,#083039)}
.ph-4{background:linear-gradient(170deg,#3AA7A8 5%,#0B3B44 80%)}
.ph-5{background:linear-gradient(140deg,#E4B767 -30%,#1B7C8C 40%,#0B3B44)}
.ph-6{background:linear-gradient(185deg,#77CFCB,#0F5C63 75%)}

/* ============================================================
   EXPERIENCES BAND (dive-computer styled)
   ============================================================ */
.exp-grid{display:grid;gap:1px;background:rgba(250,252,251,.14);border:1px solid rgba(250,252,251,.14);border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.exp{background:var(--deep);padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.8rem;text-decoration:none;color:var(--foam);transition:background .3s;position:relative;overflow:hidden}
.exp>*{position:relative;z-index:2}
.exp-bg{position:absolute;inset:0;z-index:0}
.exp-bg img{width:100%;height:100%;object-fit:cover}
.exp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,59,68,.88),rgba(4,26,34,.94))}
.exp:hover{background:#0A2E35}
.exp .exp-data{font-family:var(--mono);font-size:0.875rem;letter-spacing:.12em;color:var(--lagoon);display:flex;gap:1.1rem;flex-wrap:wrap}
.exp h3{font-size:1.4rem}
.exp p{font-size:1rem;color:rgba(250,252,251,.78);flex:1}
.exp .card-link{color:var(--gold);font-size:.95rem}

/* ============================================================
   PACKAGES
   ============================================================ */
.pkg-note{font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.card.on-card-dark{background:#0D4750;color:var(--foam)}
.card.on-card-dark .card-body p{color:rgba(250,252,251,.72)}
.card.on-card-dark .card-meta{color:var(--lagoon)}
.card.on-card-dark .card-link{color:var(--gold)}
.card.on-card-dark h3{color:var(--foam)}

/* ============================================================
   MARINE LIFE TEASER
   ============================================================ */
.species-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:620px){.species-row{grid-template-columns:repeat(2,1fr)}}
.species-row.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.species-row.cols-4{grid-template-columns:repeat(2,1fr)}}
.species{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;text-decoration:none;color:var(--foam);display:flex;align-items:flex-end}
.species .ph{position:absolute;inset:0;transition:transform .5s var(--ease)}
.species:hover .ph{transform:scale(1.06)}
.species::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(2,15,20,.88))}
.species-info{position:relative;z-index:2;padding:1rem 1.1rem}
.species-info strong{font-family:var(--display);font-size:1.05rem;font-weight:500;display:block}
.species-info span{font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon)}

/* ============================================================
   MAP TEASER
   ============================================================ */
.map-teaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.map-teaser{grid-template-columns:1fr}}
.map-canvas{background:radial-gradient(90% 90% at 60% 30%,#0F5C63,#0B3B44 75%);border-radius:var(--radius-lg);border:1px solid rgba(250,252,251,.14);position:relative;overflow:hidden;aspect-ratio:1/1;max-height:480px}
.map-canvas svg{width:100%;height:100%}
.map-pin{cursor:pointer}
.map-pin circle{transition:r .2s}
.map-pin:hover circle:first-child,.map-pin:focus circle:first-child{r:9}
.map-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;fill:rgba(250,252,251,.85)}
.map-caption{position:absolute;bottom:.9rem;left:1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:rgba(250,252,251,.6)}
.map-copy ul{list-style:none;display:grid;gap:.9rem;margin:1.6rem 0 2rem}
.map-copy li{display:flex;gap:.9rem;font-size:var(--t-sm);color:rgba(250,252,251,.8)}
.map-copy li svg{flex:none;color:var(--gold);margin-top:.15rem}

/* ============================================================
   REVIEWS
   ============================================================ */
.review-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.review{background:rgba(250,252,251,.05);border:1px solid rgba(250,252,251,.12);border-radius:var(--radius-lg);padding:1.8rem;display:flex;flex-direction:column;gap:1rem;height:100%}
.stars{color:var(--gold);letter-spacing:.18em;font-size:.85rem}
.review blockquote{font-family:var(--display);font-size:1.12rem;line-height:1.5;font-weight:500;color:rgba(250,252,251,.92);flex:1}
.review footer{display:flex;align-items:center;gap:.8rem;font-size:var(--t-sm);color:rgba(250,252,251,.66);margin-top:auto;min-height:44px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--lagoon),var(--petrol));flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:0.875rem;color:var(--abyss);font-weight:600}
.review-src{font-family:var(--mono);font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon)}

/* ============================================================
   ENQUIRY BAND + FORM
   ============================================================ */
.enquiry-band{position:relative;overflow:hidden}
.enquiry-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 10%,rgba(87,191,192,.12),transparent 65%)}
.enquiry-head{margin-bottom:2.4rem;max-width:34ch}
.enquiry-head h2{margin-top:.4rem}
.enquiry-grid{position:relative;display:grid;grid-template-columns:2fr 1fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:start}
@media (max-width:920px){.enquiry-grid{grid-template-columns:1fr}}
.enquiry-main h2{font-size:var(--t-2xl)}
.enquiry-main .enquiry-form{margin-top:0}
.enquiry-points{list-style:none;display:grid;gap:1.05rem}
.enquiry-points li{display:flex;gap:.9rem;color:rgba(250,252,251,.82);font-size:var(--t-sm)}
.enquiry-points svg{flex:none;color:var(--gold);margin-top:.15rem}
.response-promise{margin-top:1.8rem;font-family:var(--mono);font-size:0.875rem;letter-spacing:.12em;color:var(--lagoon)}
.aside-ctas{display:grid;gap:.7rem}
.aside-ctas .btn{justify-content:center}
.contact-card{margin-top:1.6rem;background:rgba(250,252,251,.06);border:1px solid rgba(250,252,251,.18);border-radius:var(--radius-lg);padding:1.5rem 1.5rem 1.6rem;font-size:var(--t-sm);color:rgba(250,252,251,.85)}
.contact-card h3{font-family:var(--mono);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon);margin:1.25rem 0 .55rem;font-weight:600}
.contact-card h3:first-of-type{margin-top:0}
.contact-card ul{list-style:none;display:grid;gap:.4rem}
.contact-card li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.contact-card .lbl{color:rgba(250,252,251,.55)}
.contact-card a{color:var(--foam);text-decoration:none}
.contact-card a:hover{color:var(--gold)}
.contact-card .wechat-id{font-weight:600;color:var(--foam)}
.enquiry-aside .enquiry-points{margin-top:1.9rem}

.enquiry-form{background:var(--foam);color:var(--ink);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.4rem);box-shadow:0 30px 70px rgba(2,15,20,.5)}
.enquiry-form h3{font-size:1.4rem;margin-bottom:.35rem}
.enquiry-form>p{font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:1.5rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:var(--t-sm);margin-bottom:.4rem}
.field label .opt{font-weight:400;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line-light);border-radius:var(--radius);padding:.8rem .95rem;font:inherit;font-size:var(--t-sm);background:#fff;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--petrol)}
.field.invalid input,.field.invalid select{border-color:#B4432E}
.field .hint{font-size:0.875rem;color:var(--ink-soft);margin-top:.35rem}
.field .err{display:none;font-size:0.875rem;color:#B4432E;margin-top:.35rem}
.field.invalid .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
.form-success{display:none;text-align:center;padding:2.5rem 1rem}
.form-success.show{display:block}
.form-success .tick{width:60px;height:60px;border-radius:50%;background:var(--petrol);color:var(--foam);display:grid;place-items:center;margin:0 auto 1.2rem}
.form-success h3{margin-bottom:.6rem}
.form-success p{color:var(--ink-soft);font-size:var(--t-sm);max-width:36ch;margin:0 auto}
.form-success .ref{font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;color:var(--petrol);margin-top:1.2rem}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--abyss-deeper);color:rgba(250,252,251,.72);padding:clamp(3.5rem,7vw,5.5rem) 0 0;font-size:var(--t-sm)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:2.6rem 3.4rem;padding-bottom:3rem}
.footer-top>.footer-col{padding-left:1.2rem}
@media (max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}.footer-top>.footer-col{padding-left:0}}
.footer-brand .footer-blurb{margin-top:1.1rem;max-width:36ch;font-size:var(--t-md);line-height:1.6;color:rgba(250,252,251,.82)}
.footer-lic{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}
.lic-badge{border:1px solid rgba(228,183,103,.4);color:var(--gold);border-radius:8px;padding:.5rem .8rem;font-family:var(--mono);font-size:0.875rem;letter-spacing:.1em;line-height:1.5}
.footer-col h3{font-family:var(--mono);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon);margin-bottom:1.1rem}
.footer-col ul{list-style:none;display:grid;gap:.55rem}
.footer-col a{text-decoration:none;color:rgba(250,252,251,.72)}
.footer-col a:hover{color:var(--foam)}
address{font-style:normal;line-height:1.9}
address a{color:var(--foam);text-decoration:none}
.socials{display:flex;gap:.6rem;margin-top:1.4rem}
.socials a{width:36px;height:36px;border:1px solid rgba(250,252,251,.22);border-radius:50%;display:grid;place-items:center;color:rgba(250,252,251,.75);text-decoration:none;transition:border-color .2s,color .2s}
.socials a:hover{border-color:var(--lagoon);color:var(--lagoon)}
.footer-bottom{border-top:1px solid rgba(250,252,251,.1);padding:1.4rem 0;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-size:0.875rem;color:rgba(250,252,251,.5)}
.footer-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.4rem}
.footer-bottom a{text-decoration:none;color:inherit}
.footer-bottom a:hover{color:var(--foam)}
.surface-note{font-family:var(--mono);letter-spacing:.14em}

/* Floating WhatsApp (desktop) */
.wa-float{position:fixed;bottom:1.6rem;right:1.6rem;z-index:85;width:54px;height:54px;border-radius:50%;background:#25D366;color:var(--abyss);display:grid;place-items:center;box-shadow:0 10px 30px rgba(2,15,20,.4);text-decoration:none;transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
@media (max-width:1020px){.wa-float{display:none}}

/* ============================================================
   v3 · MOBILE TYPE FLOOR
   Body copy and list/nav/footer content ≥16–17px on small screens.
   Exempt (intentionally below the floor): eyebrows, depth markers,
   map labels, photo credits, badges & card-meta chips, licence chips,
   species tags, review source tags.
   ============================================================ */
@media (max-width:768px){
  :root{
    --t-base:1.0625rem;   /* 17px — body paragraphs & list items */
    --t-sm:1.0625rem;     /* 17px — content set in the small token (cards, nav, forms, footer) */
    --t-md:1.1875rem;     /* 19px */
    --t-lg:1.4rem;        /* headings step up proportionally */
    --t-xl:1.85rem;
    --t-2xl:2.3rem;
    --t-hero:2.85rem;
  }
  .card-body h3{font-size:1.5rem}
  .exp h3{font-size:1.45rem}
  .enquiry-form h3,.form-success h3{font-size:1.55rem}
  .species-info strong{font-size:1.15rem}
  .review blockquote{font-size:1.25rem}
  /* readable small text raised to the 16px floor */
  .field .hint,.field .err,.footer-bottom,.form-success .ref{font-size:1rem}
  .contact-card h3,.footer-col h3{font-size:0.875rem}
  .trust-strip .lic{font-size:0.875rem}
  .response-promise{font-size:0.875rem}
  /* v7-K: lighter mobile hero */
  .hero-kicker{display:none}
  .hero-sub{margin-top:1rem}
  .hero-ctas{margin-top:1.6rem;gap:.7rem}
  .hero-inner{padding-bottom:3rem}
  .trust-strip li:nth-child(2),.trust-strip li:nth-child(3){display:none}
  .trust-strip ul{gap:.5rem 1.6rem;padding:.85rem 0}
}

/* ================= PART B — SUB-PAGE CHROME ================= */
/* ===== Resort landing-page template (inherits homepage tokens) ===== */
.breadcrumb{position:relative;z-index:3;font-size:var(--t-sm);color:rgba(250,252,251,.78);padding-top:5.5rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumb a{color:rgba(250,252,251,.78);text-decoration:none}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb li+li::before{content:"›";margin-right:.4rem;opacity:.6}
.resort-hero{position:relative;min-height:78svh;display:flex;flex-direction:column;color:var(--foam);overflow:hidden}
.resort-hero .hero-photo{position:absolute;inset:0;background:linear-gradient(180deg,#1B7C8C,#0B3B44)}
.resort-hero .hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.resort-hero .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,26,34,.62),rgba(4,26,34,.42) 38%,rgba(4,26,34,.86))}
.resort-hero-inner{position:relative;z-index:2;margin-top:auto;padding-bottom:1.8rem}
.suit-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1.1rem}
.suit-badges span{font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(250,252,251,.4);border-radius:999px;padding:.35rem .8rem;color:rgba(250,252,251,.9)}
.key-facts{position:relative;z-index:2;border-top:1px solid rgba(250,252,251,.18);background:rgba(4,26,34,.82);backdrop-filter:blur(6px)}
.key-facts ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;padding:.9rem 0;font-family:var(--mono);font-size:0.875rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,252,251,.8)}
.key-facts b{color:var(--gold);font-weight:600}
.subnav{position:sticky;top:var(--subnav-top,72px);z-index:80;background:rgba(4,26,34,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(250,252,251,.12)}
section[id]{scroll-margin-top:var(--anchor-offset,132px)}
.subnav ul{list-style:none;display:flex;gap:.2rem;overflow-x:auto;padding:.65rem var(--gutter) .7rem;max-width:var(--maxw);margin:0 auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;white-space:nowrap;text-decoration:none;color:rgba(250,252,251,.75);font-size:.9rem;font-weight:500;padding:.5rem .8rem;border-radius:999px}
.subnav a:hover{color:var(--foam)}
.subnav a.active{background:rgba(228,183,103,.16);color:var(--gold)}
.subnav a.subnav-cta{background:var(--gold);color:var(--abyss);font-weight:600;margin-left:auto}
.prose{max-width:68ch;display:grid;gap:1rem;font-size:var(--t-md);line-height:1.75;color:var(--ink-soft)}
.on-dark .prose{color:rgba(250,252,251,.82)}
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media (max-width:760px){.room-grid{grid-template-columns:1fr}}
.room-card .card-body h3{font-size:1.45rem}
.room-feats{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:0.875rem;color:var(--ink-soft);padding:0}
.room-feats li::before{content:"·";margin-right:.5rem;color:var(--gold-deep)}
.room-feats li:first-child::before{content:""}
.carousel-wrap{position:relative}
.carousel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel figure{flex:0 0 min(78%,560px);scroll-snap-align:center;margin:0;border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:16/10;background:var(--deep)}
.carousel .ph{position:absolute;inset:0}
.carousel img{width:100%;height:100%;object-fit:cover}
.carousel figcaption{position:absolute;bottom:0;left:0;right:0;padding:.7rem 1rem;font-size:0.875rem;color:var(--foam);background:linear-gradient(rgba(4,26,34,.35),rgba(4,26,34,.86));z-index:2}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(4,26,34,.75);color:var(--foam);display:grid;place-items:center}
.car-btn:hover{background:var(--gold);color:var(--abyss)}
.car-prev{left:.6rem}.car-next{right:.6rem}
.facility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;list-style:none}
.facility-grid li{display:flex;gap:.7rem;align-items:flex-start;background:var(--foam);border:1px solid var(--line-light);border-radius:var(--radius);padding:.9rem 1rem;font-size:.95rem}
.facility-grid svg{flex:none;color:var(--petrol);margin-top:.2rem}
.site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:980px){.site-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.site-grid{grid-template-columns:1fr}}
.site-card{display:block;text-decoration:none;background:rgba(250,252,251,.05);border:1px solid rgba(250,252,251,.14);border-radius:var(--radius-lg);padding:1.4rem 1.4rem 1.5rem;color:var(--foam);transition:border-color .25s}
.site-card:hover{border-color:var(--gold)}
.site-card h3{font-size:1.25rem;margin:.4rem 0 .5rem;color:var(--foam)}
.site-card .exp-data{font-family:var(--mono);font-size:0.875rem;letter-spacing:.12em;color:var(--lagoon)}
.site-card p{font-size:.95rem;color:rgba(250,252,251,.72)}
.gallery{columns:3;gap:1rem}
@media (max-width:860px){.gallery{columns:2}}
.gallery button{display:block;width:100%;border:0;padding:0;margin:0 0 1rem;border-radius:var(--radius);overflow:hidden;background:var(--deep);cursor:zoom-in}
.gallery img{width:100%;display:block}
/* ---------- V4 · photo viewer ---------- */
dialog.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible;color:var(--foam)}
dialog.lightbox::backdrop{background:rgba(2,15,20,.88)}
dialog.lightbox:not([open]){display:none}
.lb-shell{min-height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(.5rem,2vw,1.6rem);padding:clamp(3.4rem,6vh,4.5rem) clamp(.6rem,3vw,2rem)}
.lb-figure{margin:0;display:flex;flex-direction:column;gap:.9rem;align-items:center;min-width:0}
.lb-figure img{max-width:100%;max-height:74vh;width:auto;height:auto;display:block;
  border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(2,15,20,.6);background:var(--deep)}
.lb-caption{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.5rem 1.1rem;max-width:70ch;text-align:center;font-size:var(--t-base);
  color:var(--foam);line-height:1.5}
.lb-caption .lb-count{font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;
  color:var(--lagoon-lt);white-space:nowrap}
.lb-btn{width:48px;height:48px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(250,252,251,.14);color:var(--foam);cursor:pointer;
  transition:background .2s,color .2s}
.lb-btn:hover,.lb-btn:focus-visible{background:rgba(250,252,251,.26);color:var(--gold)}
.lb-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lb-btn[hidden]{display:none}
.lb-close{position:fixed;top:clamp(.8rem,2vh,1.4rem);right:clamp(.8rem,3vw,1.6rem);z-index:2}
@media (max-width:620px){
  .lb-shell{grid-template-columns:1fr;grid-template-areas:"fig" "nav";justify-items:center}
  .lb-figure{grid-area:fig}
  .lb-prev,.lb-next{grid-area:nav}
  .lb-prev{justify-self:start}
  .lb-next{justify-self:end}
  .lb-figure img{max-height:62vh}
}
@media (prefers-reduced-motion:reduce){
  dialog.lightbox,.lb-btn{transition:none!important;animation:none!important}
}
.video-facade{margin-top:2rem;position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--deep);cursor:pointer}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.video-facade .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--gold);color:var(--abyss);display:grid;place-items:center;box-shadow:0 8px 30px rgba(2,15,20,.45);transition:transform .25s}
.video-facade:hover .play-btn,.video-facade:focus-visible .play-btn{transform:translate(-50%,-50%) scale(1.08)}
.video-facade:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.video-facade .video-note{position:absolute;bottom:.8rem;left:1rem;font-family:var(--mono);font-size:0.875rem;letter-spacing:.14em;color:var(--foam);background:rgba(4,26,34,.82);padding:.3rem .6rem;border-radius:6px}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.faq-list{max-width:820px;display:grid;gap:.8rem}
.faq-item{background:var(--foam);border:1px solid var(--line-light);border-radius:var(--radius)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-weight:600;padding:1.05rem 1.25rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--petrol);transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 1.25rem 1.2rem;color:var(--ink-soft);font-size:.98rem;line-height:1.7}
.transfer-steps{list-style:none;display:grid;gap:1rem;counter-reset:step}
.transfer-steps li{display:flex;gap:1rem;counter-increment:step;color:rgba(250,252,251,.85);font-size:.98rem}
.transfer-steps li::before{content:counter(step);flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--abyss);display:grid;place-items:center;font-weight:700;font-size:0.875rem}
@media (max-width:760px){.subnav{display:none}section[id]{scroll-margin-top:var(--anchor-offset,88px)}}
@media (max-width:768px){
  .subnav a{font-size:1rem}
  .prose,.facility-grid li,.site-card p,.faq-item .faq-a,.transfer-steps li{font-size:1.0625rem}
  .resort-hero{min-height:68svh}
}

/* ============================================================
   PART C — MIGRATION ADDITIONS
   ============================================================ */

/* ---------- Server-rendered form errors (no-JS + PHP round-trip) ---------- */
.form-errors{background:rgba(200,60,60,.10);border:1px solid rgba(200,60,60,.5);border-radius:var(--radius);padding:1rem 1.15rem;margin-bottom:1.5rem}
.form-errors h3{font-family:var(--body);font-size:var(--t-sm);font-weight:700;letter-spacing:.02em;margin-bottom:.5rem;color:#8E2B2B}
.on-dark .form-errors h3{color:#FFC9C9}
.form-errors ul{margin:0;padding-left:1.1rem;font-size:var(--t-sm)}
.form-errors a{color:inherit}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#C0392B}
.field .err[hidden]{display:none}

/* Honeypot — visually gone, still reachable to bots that ignore CSS */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Owner ruling: the consent banner is gone; every one of its rules was
   deleted rather than left as dead CSS. GA loads unconditionally. */

/* ---------- Thank-you page ---------- */
.ty-wrap{min-height:60vh;display:flex;align-items:center}
.ty-card{max-width:44rem;margin:0 auto;text-align:center}
.ty-card .tick{width:64px;height:64px;border-radius:50%;background:var(--lagoon);color:var(--abyss);
  display:grid;place-items:center;margin:0 auto 1.75rem}
.ty-actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.ty-next{margin-top:3rem;text-align:left}

/* ---------- Simple prose pages (legal, thin migrated pages) ---------- */
.prose{max-width:70ch}
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.75rem}
.prose p,.prose ul,.prose ol{margin-top:1rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:.35rem}
.prose a{color:var(--petrol);text-decoration:underline;text-underline-offset:.18em}
.on-dark .prose a{color:var(--lagoon)}

/* ---------- Index listing grids used by the hub pages ---------- */
.hub-lede{max-width:60ch;color:var(--ink-soft);font-size:var(--t-md)}
.on-dark .hub-lede{color:rgba(250,252,251,.78)}
.legacy-figure{margin:2rem 0}
.legacy-figure img{width:100%;height:auto;border-radius:var(--radius)}
.legacy-figure figcaption{font-size:var(--t-sm);color:var(--ink-soft);margin-top:.6rem}

/* ---------- Trust layer: social buttons ----------
   Circular, tappable, inline-SVG only. Default is a quiet outline on the dark
   footer; hover and keyboard focus fill gold with the icon flipped to abyss.
   Colour transitions only — nothing moves, per the site-wide button rule.
   Scoped as `.socials .social-btn` so it outranks the original `.socials a`
   rule in Part A, which is left byte-verbatim. */
.socials{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem;padding:0}
.socials li{margin:0}
.socials .social-btn{
  --social-fg:rgba(250,252,251,.78);
  --social-bd:rgba(250,252,251,.24);
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--social-bd);
  border-radius:50%;
  background:transparent;
  color:var(--social-fg);
  text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.socials .social-btn svg{width:19px;height:19px;display:block}
/* Optical sizing, keyed to the network rather than to position, so reordering
   $ADH_SOCIAL in config.php cannot break it. A thin outline mark reads lighter
   than a solid one at the same box size, so Instagram is set a shade larger;
   the X wordmark reads heavier, so it is set a shade smaller. */
.socials .social-instagram svg{width:20px;height:20px}
.socials .social-x svg{width:17px;height:17px}

.socials .social-btn:hover,
.socials .social-btn:focus-visible{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--abyss);
}
.socials .social-btn:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px}
.socials .social-btn:active{background:var(--gold-deep);border-color:var(--gold-deep)}

/* v3-A2: the `.is-pending` placeholder state was dropped. All five social
   URLs are set in config.php, adh_is_placeholder() is false for every one, and
   the class renders 0 times across all 83 pages - so the rule was unreachable
   dead CSS, not a contrast defect. Re-add it with the ruling's raised opacity
   only if a profile URL is ever emptied again. */

/* Light surfaces — the contact page trust strip. */
.socials-light .social-btn{
  --social-fg:var(--petrol);
  --social-bd:rgba(4,26,34,.22);
}
.socials-light .social-btn:hover,
.socials-light .social-btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--abyss)}

@media (prefers-reduced-motion:reduce){
  .socials .social-btn{transition:none}
}
.trust-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-top:1.4rem}
.trust-bar .lic-badge{margin:0}
.since-badge{border:1px solid rgba(87,191,192,.45);color:var(--lagoon);border-radius:8px;padding:.5rem .8rem;
  font-family:var(--mono);font-size:0.875rem;letter-spacing:.1em;line-height:1.5}
.reviews-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(250,252,251,.22);
  border-radius:999px;padding:.45rem .95rem;font-size:var(--t-sm);color:rgba(250,252,251,.82);text-decoration:none}
.reviews-badge:hover{border-color:var(--lagoon);color:var(--lagoon)}
.reviews-badge .stars{color:var(--gold);letter-spacing:.05em}
.reviews-badge[aria-disabled="true"]{border-style:dashed;opacity:.6;cursor:default}
/* Light-surface variant for the in-page trust strip */
.trust-strip{background:var(--sand);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  padding:1.6rem 0}
.trust-strip .trust-bar{margin:0;justify-content:center}
.trust-strip .lic-badge{border-color:rgba(11,59,68,.25);color:var(--deep)}
.trust-strip .since-badge{border-color:rgba(15,92,99,.3);color:var(--petrol)}
.trust-strip .reviews-badge{border-color:rgba(4,26,34,.2);color:var(--ink-soft)}
.trust-strip-socials{display:flex;justify-content:center;margin-top:1.1rem}
.trust-strip-socials .socials{margin-top:0}

/* ---------- Google reviews band ----------
   Display only. No review markup is emitted, so nothing here is trying to
   win a rich result — it is just an honest rating line and the real quotes. */
.rating-line{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.04em}
.rating-line a{color:var(--lagoon);text-decoration:none;border-bottom:1px solid rgba(87,191,192,.45);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.rating-line a:hover{color:var(--gold);border-color:var(--gold)}
.reviews-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.review-grid.single{max-width:760px}
.review blockquote{quotes:none}
.review footer{display:flex;align-items:center;gap:.85rem;font-size:var(--t-sm);
  color:rgba(250,252,251,.86)}

/* ---------- Item 7: hero order — H1, then eyebrow, then standfirst ----------
   The eyebrow's default margin-bottom was written for a label sitting ABOVE a
   heading; under the H1 it collided with the standfirst. */
.resort-hero-inner .hero-eyebrow{margin-top:.9rem;margin-bottom:.55rem}
.resort-hero-inner h1{margin-bottom:0}
.resort-hero-inner .hero-eyebrow+.hero-sub{margin-top:0}

/* ---------- Item 8: section H2s hold one line on desktop ---------- */
:root{--t-2xl:clamp(1.75rem,1.15rem + 1.6vw,2.5rem)}
@media (min-width:1200px){
  .section-head h2,.enquiry-head h2{max-width:none;text-wrap:balance}
}
/* The enquiry heading is a fixed string and must never wrap on desktop. */
@media (min-width:900px){ .enquiry-head h2{white-space:nowrap} }

/* ---------- Item 26: type floor ---------- */
.card-meta,.review-src,.species-info span,.depth-marker,.surface-note,
.lic-badge,.since-badge,.search-scope,.exp-data{font-size:.875rem}
.map-caption,.photo-credit{font-size:.75rem}

/* ---------- Item 7: index hero — H1, then kicker, then standfirst ---------- */
.hero-inner h1{margin-bottom:0;letter-spacing:.06em;text-transform:none}
.hero-inner .hero-kicker{margin:.85rem 0 .5rem}
.hero-inner .hero-kicker+.hero-sub{margin-top:0}

/* ---------- Two-build architecture: draft markers (local build only) ----------
   Never rendered on the deploy build — the pages that would carry them are not
   exported at all. */

/* ---------- Brand mark ----------------------------------------------------
   The supplied artwork carries the wordmark, so the old monogram + text
   lockup is gone. Width is fixed and height follows the 2717:1251 ratio, so
   the header never shifts while the image loads. */
.logo{gap:0}
.logo-img{display:block;width:120px;height:auto;flex:none}
.logo-img-footer{width:150px}
@media (max-width:1020px){
  .logo-img{width:96px}          /* ~44px tall — leaves room for four icons at 360px */
}
@media (max-width:380px){
  .logo-img{width:84px}          /* smallest phones: shrink the mark, never wrap the bar */
  .site-header .container{gap:.6rem}
  .header-actions{gap:.3rem}
}
/* The old lockup rules are retained only for the print sheet below. */

/* ---------- Print: dark artwork on white ---------- */
@media print{
  .logo-img{content:url("../images/adh-logo-240.png");width:150px}
  .site-header,.wa-float{display:none!important}
}

/* ============================================================
   PART D — COMBINED BATCH v2
   Form required-marks and reply line (F1–F3), WhatsApp brand
   button (C4). Visual-system changes (V1–V7) follow in PART E.
   ============================================================ */

/* ---------- F2: form type one step up ----------
   Labels and controls moved from --t-sm to --t-base. The enquiry form is
   the one place on the site where reading the label wrong costs a booking. */
.field label{font-size:var(--t-base)}
.field input,.field select,.field textarea{font-size:var(--t-base)}
.enquiry-form>p{font-size:var(--t-base)}

/* ---------- F1: required marks ---------- */
.req{color:#B4432E;font-weight:700}
.req-note{font-size:var(--t-sm);color:var(--ink-soft);margin:-.6rem 0 1.2rem}
.field label .opt{font-weight:400;color:var(--ink-soft);font-size:var(--t-sm)}
.country-resolved{color:var(--petrol)}

/* ---------- F3: reply promise under the button ---------- */
.reply-promise{margin-top:.9rem;font-size:var(--t-sm);color:var(--ink-soft);line-height:1.6;text-align:center}

/* ---------- C4: WhatsApp brand button ----------
   Brand green with a white glyph; hover darkens the green only — the
   button never moves, per the standing rule on hover behaviour. */
/* v3-A2: the white-on-green declarations were deleted, not overridden -
   one source of truth. The live values are in the WhatsApp block below. */

/* ---------- C1/C3: booking + contact head band ----------
   A short dark band instead of a photo hero, so the enquiry form starts
   near the top of the viewport on the pages whose only job is the form.
   Top padding clears the fixed header. */
.booking-head{background:var(--deep);color:var(--foam);padding:calc(5.5rem + 2rem) 0 2.4rem}
.booking-head .eyebrow{color:var(--gold)}
.booking-head h1{font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.08}
.booking-sub{max-width:62ch;margin-top:.9rem;font-size:var(--t-md);color:rgba(250,252,251,.85);font-weight:300}
@media (max-width:720px){
  .booking-head{padding:calc(4.6rem + 1.4rem) 0 1.8rem}
}


/* ============================================================
   PART E - CONTRAST (batch v3, A1/A2)
   Every pair below was measured against the painted pixels, not
   guessed from tokens.
   ============================================================ */

/* A1.1 - the hero trust strip. Its own background was rgba(4,26,34,.35),
   which is transparent enough that where the hero photo stops the strip sits
   on --sand and the white text lands at 1.1:1 - invisible, exactly as
   reported. The strip now paints its own near-opaque ground, so the text is
   legible whatever ends up behind it. Measured: foam on the composited
   ground = 11.4:1. The light-band .trust-strip used by contact/about is a
   different context and is left alone. */
.trust-strip-hero{background:rgba(4,26,34,.88)}
.trust-strip-hero li{color:var(--foam)}
.trust-strip-hero .lic{color:var(--foam);font-size:var(--t-sm)}

/* A1.2 - the licence badge on a light band. Gold on near-white measured
   1.6:1. The footer badge (gold on --abyss-deeper) is fine and unchanged;
   this modifier is for light surfaces only. Measured: --ink on the tinted
   white = 14.8:1. */
.lic-badge-light{color:var(--ink);border-color:rgba(10,34,41,.35);background:rgba(255,255,255,.65)}

/* A1.3 - "Start your enquiry". The enquiry card sets color:var(--ink) on
   itself, but .on-dark h2,.on-dark h3 matches the heading DIRECTLY and an
   inherited value can never beat a matching rule - so the heading rendered
   foam-on-foam inside a foam card. Measured 1.0:1. */
.enquiry-form h2,.enquiry-form h3{color:var(--ink)}

/* A1.4 - the SHARED .trust-strip (contact.php, about.php) had the same defect
   as the hero one, one layer down: foam text on a 35%-opaque dark wash that
   sits on a light band. Its own .lic-badge override already assumed a light
   ground, so the strip is now explicitly light and its text is --ink; the
   hero variant re-asserts the dark treatment below it. --ink on --sand =
   14.1:1; the gold tick becomes --gold-deep for 4.6:1. */
.trust-strip{background:var(--sand)}
.trust-strip li{color:var(--ink)}
.trust-strip li svg{color:var(--gold-deep)}
.trust-strip .lic{color:var(--ink-soft)}
.trust-strip-hero{background:rgba(4,26,34,.88)}
.trust-strip-hero li{color:var(--foam)}
.trust-strip-hero li svg{color:var(--gold)}
.trust-strip-hero .lic{color:var(--foam);font-size:var(--t-sm)}

/* ============================================================
   v3-B · DESKTOP INTERACTION (B1–B3)
   B1 header WhatsApp icon on brand green + a real search-icon
   hover/focus state · B2 top menu one step larger · B3 a hover
   AND focus-visible state on every card family.
   ============================================================ */

/* ---- B1a · WhatsApp icon button: WhatsApp brand green.
   A white glyph on #25D366 measures 1.98:1 and fails even the 3:1
   non-text bar, so the glyph is --abyss (8.9:1) and the brand green
   is carried by the button ground, which is what the mark is. ---- */
.icon-btn.wa{background:#25D366;color:var(--abyss)}
.icon-btn.wa:hover,.icon-btn.wa:focus-visible{background:#1DA851;color:var(--abyss)}
.icon-btn.wa svg{fill:currentColor}

/* ---- B1b · the search (and every other) icon button had a hover
   fill but no state a keyboard could reach beyond the global ring. ---- */
.icon-btn{transition:background .2s,color .2s}
.icon-btn:hover{background:rgba(250,252,251,.24);color:var(--gold)}
.icon-btn:focus-visible{background:rgba(250,252,251,.24);color:var(--gold);
  outline:2px solid var(--gold);outline-offset:3px}

/* ---- B2 · desktop top menu one step up: --t-sm → --t-base.
   Padding tightens between 1021–1240px so the bar still holds one line. ---- */
@media (min-width:1021px){ .nav-link{font-size:var(--t-base)} }
@media (min-width:1021px) and (max-width:1240px){
  .nav-link{padding:.6rem .62rem}
  .site-header .container{gap:1.1rem}
}

/* ---- B3 · card families: hover + focus-visible parity.
   .card already lifts; the experience tiles, dive-site cards and the
   marine-life tiles changed either nothing or only the photo. ---- */
.card:focus-visible{transform:translateY(-6px);box-shadow:0 20px 46px rgba(4,26,34,.22)}
.card:focus-visible .card-media .ph{transform:scale(1.05)}
.card:focus-visible .card-link{color:var(--gold-deep)}
.card.on-card-dark:hover .card-link,.card.on-card-dark:focus-visible .card-link{color:#F2CE8C}

.exp{transition:background .3s,box-shadow .3s}
.exp:hover,.exp:focus-visible{background:#0A2E35;box-shadow:inset 0 0 0 2px var(--gold)}
.exp:hover .card-link,.exp:focus-visible .card-link{color:#F2CE8C}
.exp:hover .exp-data,.exp:focus-visible .exp-data{color:var(--foam)}

.species{transition:box-shadow .3s}
.species:hover,.species:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.species:focus-visible .ph{transform:scale(1.06)}
.species:hover .species-info span,.species:focus-visible .species-info span{color:var(--gold)}

.site-card{transition:border-color .25s,background .25s,transform .25s var(--ease)}
.site-card:hover,.site-card:focus-visible{border-color:var(--gold);background:rgba(250,252,251,.09);
  transform:translateY(-4px)}
.site-card:hover .exp-data,.site-card:focus-visible .exp-data{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .card:focus-visible,.site-card:hover,.site-card:focus-visible{transform:none}
}

/* ============================================================
   v3-C/D/E/F · DENSITY, HERO, FORM AND FOOTER (C1, D1–D6, E2–E3, F2)
   ============================================================ */

/* ---- D1 · section padding −32%, and tighter depth-marker bands.
   Was clamp(3.5rem,8vw,6.5rem); the band rhythm was written before the
   sections carried this much content. ---- */
section{padding:clamp(2.4rem,5.4vw,4.4rem) 0}
.depth-marker{margin-bottom:1.4rem}
.section-head{margin-bottom:clamp(1.4rem,3.4vw,2.2rem)}

/* ---- D3 · the homepage H1 holds one line on desktop.
   `max-width:15ch` wrapped an 18-character wordmark. ---- */
@media (min-width:1021px){
  .hero-inner h1{max-width:none;white-space:nowrap;font-size:clamp(2.6rem,5.2vw,4.6rem)}
}

/* ---- D4 · destination/resort hero fact strip on the H1 grid.
   The strip shares .container with the H1, so its left edge already lined
   up; the facts themselves ran as a ragged wrapping row. They now sit in
   even columns on the same grid the H1 block occupies. ---- */
@media (min-width:721px){
  .key-facts ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:.5rem 2rem;align-items:baseline}
  .key-facts li{display:flex;flex-direction:column;gap:.15rem}
  .key-facts b{display:block}
}

/* ---- E2 · the reply line reads on two lines under the button ---- */
.reply-promise span{display:block}

/* ---- E3 · breathing space around the intro, the required note and the
   honeypot. `.enquiry-form>p` never matched the intro — it sits inside
   <form><div id="formFields">, so it had no margin at all and the
   required note's negative top margin was compensating for nothing. ---- */
.enquiry-form .form-intro{font-size:var(--t-base);color:var(--ink-soft);
  margin:.5rem 0 1.6rem;line-height:1.6}
.enquiry-form .req-note{margin:0 0 1.6rem}
.enquiry-form .hp-field{margin:0}
#formFields>.field:first-of-type{margin-top:.2rem}

/* ---- F2 · footer heading, address and phone sizes.
   The whole footer sat at --t-sm; the contact block is the one place a
   reader needs to copy a number down. ---- */
.footer-col h3{font-size:.9375rem}
.site-footer address{font-size:var(--t-base);line-height:1.85}
.site-footer address a{font-weight:600}

/* ---- Owner ruling 2026-08-10 (WhatsApp glyph): accessibility beats
   brand-exactness; the green fill alone reads as WhatsApp. Applied to the
   two remaining WhatsApp surfaces that failed the same way — the aside text
   button (white text on #25D366 = 1.98:1) and the desktop float. This closes
   the open FAIL row in CONTRAST-SWEEP-01.md. ---- */
.btn-whatsapp{background:#25D366;color:var(--abyss);border-color:#25D366}
.btn-whatsapp:hover,.btn-whatsapp:focus-visible{background:#1DA851;border-color:#1DA851;color:var(--abyss)}
.btn-whatsapp svg{fill:currentColor}
.wa-float{background:#25D366;color:var(--abyss)}
.wa-float svg{fill:currentColor}

/* ============================================================
   v3-I · MOBILE (I1–I4)
   I1 the sticky bottom bar is gone (markup + rules deleted above).
   I2 top bar right-to-left: burger, Call, Enquire, WhatsApp.
   I3 the search entry moved into the menu panel.
   I4 compact panel header; the accordion is exclusive (js/site.js).
   ============================================================ */
.m-only{display:none}
@media (max-width:1020px){
  /* I2 - the two mobile-only actions appear, the search icon leaves the bar */
  .m-only{display:grid}
  #searchOpen{display:none}
  .header-actions{gap:.4rem}
  .icon-btn{width:42px;height:42px}          /* tap target floor */

  /* I3/I4 - compact panel header, so the list starts higher up the screen */
  .mobile-nav{padding:0 var(--gutter) 2.5rem}
  .mnav-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.6rem;
    padding:.7rem 0;margin-bottom:.6rem;background:var(--abyss);
    border-bottom:1px solid var(--line-dark)}
  .mnav-title{flex:1;font-family:var(--mono);font-size:0.875rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--lagoon)}
  .mobile-nav .close-mnav{position:static;top:auto;right:auto}
  .m-acc>button{padding:.9rem 0}
}
@media (min-width:1021px){.mnav-head{display:none}}

/* ---- Owner correction 2026-08-10 (C1): resorts.php#compare is a real
   side-by-side table. Scrolls inside its own box; the page never scrolls
   sideways. Row headers stay put so a wide row keeps its resort name. ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-light);border-radius:var(--radius-lg)}
.compare-table{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--t-sm);background:var(--foam)}
.compare-table caption{caption-side:bottom;text-align:left;padding:.9rem 1.1rem;color:var(--ink-soft);font-size:var(--t-sm);line-height:1.5}
.compare-table th,.compare-table td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line-light);vertical-align:top}
.compare-table thead th{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);background:var(--sand);border-bottom:1px solid var(--line-light);white-space:nowrap}
.compare-table tbody th{position:sticky;left:0;background:var(--foam);font-weight:600;font-family:var(--body);min-width:230px}
.compare-table tbody th a{color:var(--petrol);text-decoration:none;border-bottom:1.5px solid var(--lagoon)}
.compare-table tbody th a:hover,.compare-table tbody th a:focus-visible{color:var(--ink);border-color:var(--gold)}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table tbody tr:hover td,.compare-table tbody tr:hover th{background:var(--sand)}

/* ============================================================
   v3-A2 · CONTRAST CLOSE-OUT (the 15 FAIL rows)
   Numbers below are sRGB/WCAG 2.x, computed in cr.py; see
   CONTRAST-CLOSE-01.md for the per-row derivation.
   ============================================================ */

/* F - the trust strip is LIGHT (--sand) since v3-A, so the ruling's
   "gold not gold-deep" would move the tick the wrong way: gold on sand is
   1.63:1, gold-deep 2.24:1. --petrol is the palette token that clears it. */
.trust-strip li svg{color:var(--petrol)}                 /* 6.71:1 */
.trust-strip-hero li svg{color:var(--gold)}              /* dark variant unchanged */

/* G - the card link's hover colour: gold-deep on --foam is 2.49:1. */
.card:hover .card-link,.card:focus-visible .card-link{color:var(--deep)}   /* 11.83:1 */

/* E - .hub-lede can no longer land on a dark band in the light colour,
   whatever the page author writes. */
.band-18m .hub-lede,.band-24m .hub-lede,.band-30m .hub-lede,
.band-36m .hub-lede,.band-40m .hub-lede,.on-dark .hub-lede{color:rgba(250,252,251,.82)}

/* J - the durable scrim floor for any label painted over photography.
   rgba(4,26,34,.82) is the weakest scrim that still clears 4.5:1 for foam
   (10.00), gold (5.53) AND lagoon (4.72) against a pure-white photo pixel -
   the worst case a photograph can produce. .72 drops lagoon to 3.28. */
:root{--scrim:rgba(4,26,34,.82)}
.on-photo-chip{background:var(--scrim);color:var(--foam);border-radius:6px;padding:.3rem .6rem}

/* ---- v3-A2 · the header sits on a photograph until it scrolls, so it
   carries its own scrim rather than trusting the picture. .86 over a pure
   white photo pixel gives foam 11.52:1, gold 6.37:1, lagoon 5.44:1 — the
   worst case a photograph can produce. The scrolled state is unchanged. ---- */
.site-header:not(.scrolled){background:linear-gradient(180deg,
  rgba(4,26,34,.86) 0%,rgba(4,26,34,.86) 62%,rgba(4,26,34,0) 100%)}

/* ---- v3-A2 · the map caption sat at rgba(250,252,251,.6) on the map
   canvas: 3.79:1. The 14px floor exempts map captions; the contrast bar does
   not. ---- */
.map-caption{color:rgba(250,252,251,.85)}

/* ---- v3-A2 · the last two real defects, found by resolving which band each
   accent actually lands on across the 83 rendered pages. ---- */

/* `.on-dark .eyebrow` is lagoon, and 62 of its instances sit on .band-24m,
   whose lighter stop is --petrol: 3.52:1. Rather than change the hue or the
   descent gradient, the palette gains ONE token - a lighter lagoon used only
   where cyan sits on a petrol-bright ground. 4.72:1 on petrol, 10.95:1 on
   abyss, and the accent still reads as the same cyan. */
:root{--lagoon-lt:#8FD7D8}
.on-dark .eyebrow,.on-dark .btn-text{color:var(--lagoon-lt)}

/* `.room-feats li::before` is the same gold-deep-on-foam defect as the card
   link: 2.49:1 inside a white card. */
.room-feats li::before{color:var(--petrol)}              /* 7.46:1 */

/* ============================================================
   v3-J3 · SEARCH RESULTS
   Grouped, resorts first. The panel scrolls, the page does not.
   ============================================================ */
.search-results{margin-top:1.6rem;max-height:60vh;overflow-y:auto;padding-right:.4rem}
.search-group{font-family:var(--mono);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lagoon-lt);margin:1.4rem 0 .5rem;padding-bottom:.4rem;
  border-bottom:1px solid rgba(250,252,251,.18)}
.search-group:first-child{margin-top:0}
.search-list{list-style:none;display:grid;gap:.1rem}
.search-list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  padding:.5rem .6rem;margin-left:-.6rem;border-radius:8px;text-decoration:none;color:var(--foam)}
.search-list a:hover,.search-list a:focus-visible{background:rgba(250,252,251,.1);color:var(--foam)}
.search-list .sr-t{font-size:var(--t-base);font-weight:500}
.search-list .sr-m{font-family:var(--mono);font-size:0.875rem;letter-spacing:.06em;
  color:rgba(250,252,251,.72)}
.search-empty,.search-more{margin-top:1.2rem;font-size:var(--t-sm);color:rgba(250,252,251,.8)}
.search-empty a{color:var(--lagoon-lt)}

/* ============================================================
   v3-J2 · RANKED ARTICLE
   ============================================================ */
.ranked-list{list-style:none;display:grid;gap:1.6rem;counter-reset:rank}
.ranked-list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.4rem;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(250,252,251,.14)}
.ranked-list li:last-child{border-bottom:0;padding-bottom:0}
.ranked-list .rank-n{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--gold);min-width:2.2ch}
.ranked-list h3{margin-bottom:.25rem}
.ranked-list h3 a{text-decoration:none;color:var(--foam);border-bottom:1.5px solid var(--lagoon-lt)}
/* v3-J2 hover was --gold on .band-24m's lighter stop: 4.13:1. The lighter
   gold already used for links on dark cards clears it at 5.12:1. */
.ranked-list h3 a:hover,.ranked-list h3 a:focus-visible{color:#F2CE8C;border-color:#F2CE8C}
.ranked-list .rank-meta{font-family:var(--mono);font-size:0.875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lagoon-lt);margin-bottom:.55rem}
.ranked-list p:last-child{color:rgba(250,252,251,.82)}
@media (max-width:560px){
  .ranked-list li{grid-template-columns:1fr;gap:.4rem}
  .ranked-list .rank-n{font-size:1.6rem}
}
.mega-footer .map-cue a{color:var(--petrol);text-decoration:none;border-bottom:1.5px solid var(--lagoon)}
.mega-footer .map-cue a:hover,.mega-footer .map-cue a:focus-visible{color:var(--ink);border-color:var(--gold)}

/* ============================================================
   v3-M5 · HUB TOC + GENERATED INDEX
   ============================================================ */
.hub-toc{background:var(--sand);border-bottom:1px solid var(--line-light)}
.hub-toc-label{font-family:var(--mono);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--petrol);margin-bottom:.5rem}
.hub-toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;counter-reset:toc}
.hub-toc a{text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--lagoon);
  padding-bottom:.1rem;font-size:var(--t-sm)}
.hub-toc a:hover,.hub-toc a:focus-visible{color:var(--petrol);border-color:var(--gold)}
.hub-toc>*{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.hub-toc{padding:1rem 0 1.1rem}
.hub-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem 2.6rem}
.hub-index-col h3{font-family:var(--mono);font-size:0.875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--petrol);padding-bottom:.5rem;border-bottom:1px solid var(--line-light);margin-bottom:.7rem}
.hub-index-col h3 span{color:var(--ink-soft);margin-left:.4rem}
.hub-index-col ul{list-style:none;display:grid;gap:.55rem}
.hub-index-col a{text-decoration:none;color:var(--ink);font-weight:500;display:block}
.hub-index-col a:hover,.hub-index-col a:focus-visible{color:var(--petrol)}
.hub-index-meta{display:block;font-family:var(--mono);font-size:0.875rem;letter-spacing:.06em;
  color:var(--ink-soft)}

/* ============================================================
   v3-V1b · TRUST PILLS — one spec for all three
   They were three separate specs: `.reviews-badge` sat at
   `var(--t-sm)`, which the mobile block raises to 17px while the other
   two stayed at 14px, and it carried different padding and a different
   line-height. Same text size, same box, same height, every width.
   Radius is deliberately left as designed (8px / 999px) — that was not
   part of the ruling; say the word and it becomes one line.
   ============================================================ */
.trust-bar{align-items:stretch}
.since-badge,.trust-bar .lic-badge,.reviews-badge{
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  min-height:2.75rem;          /* 44px — identical for all three */
  padding:.5rem .95rem;
  font-size:0.875rem;          /* 14px, and it stays 14px on mobile */
  line-height:1.35;
  letter-spacing:.1em;
}
.reviews-badge{font-family:var(--mono)}
@media (max-width:768px){
  .since-badge,.trust-bar .lic-badge,.reviews-badge{font-size:0.875rem}
}

/* ---- Contrast · the last real defect found by resolving MANUAL rows on
   their actual ground: a prose link on a dark band was --lagoon, which is
   3.52:1 on .band-24m's lighter stop. Two such links exist (Kota Kinabalu,
   Barracuda Point). Same fix as the eyebrow: the lighter cyan. ---- */
.on-dark .prose a{color:var(--lagoon-lt)}          /* 4.72:1 on petrol */

/* ---- Contrast · the review avatar's initials are --abyss on a
   lagoon→petrol gradient. On the lagoon end that is 8.18:1; on the petrol
   end it drops to 2.32:1, so half the circle failed. The gradient now runs
   lagoon → lagoon-dim, which is 8.18:1 at the light end and 5.23:1 at the
   dark end — still a gradient, legible across the whole of it. ---- */
.avatar{background:linear-gradient(135deg,var(--lagoon),var(--lagoon-dim))}

/* ---- CTA addition · the booking pages state the model in one line, above
   the existing standfirst. Same measure and rhythm as .booking-sub, one
   step down in emphasis so the H1 still leads. ---- */
.booking-model{margin-top:.7rem;max-width:60ch;font-size:var(--t-base);line-height:1.55;
  color:var(--lagoon-lt)}
.booking-model+.booking-sub{margin-top:.5rem}


/* ---- enquiry form: the two controls the 8 Sep 2026 field set adds.
   Locked property field, and the consent checkbox. Tokens only, no new
   colours: this styles new markup, it does not restyle the design. ---- */
.field-locked input[readonly]{background:var(--sand,#f4f1ea);cursor:default}
.field-locked input[readonly]:focus{outline:2px solid var(--gold);outline-offset:2px}
.field-consent .check-label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.field-consent input[type=checkbox]{width:1.15rem;height:1.15rem;flex:0 0 auto;margin-top:.15rem}
.field-consent .check-label span{font-size:.95rem;line-height:1.45}
.field-consent.invalid .check-label span{color:var(--err,#b3261e)}