/* ============================================================
   MALDIVES POSTCARDS — RUNTIME CSS
   ============================================================ */
:root{
  /* primary palette */
  --abyss:#020A14; --cream:#F5EDDF; --cyan:#22D3EE;
  --teal:#0E7490; --foam:#A5F3FC; --mint:#2DD4BF;
  --coral:#F97066; --sunset:#FBBF24; --sand:#DFE3E8;
  /* derivatives */
  --cream-deep:#EFE5D2; --cream-light:#FBF6EC;
  --ink:#0B1324; --ink-soft:#2A3447;
  --ink-mute:rgba(2,10,20,0.55);
  --rule:rgba(2,10,20,0.12);
  /* type */
  --serif:'Fraunces','Times New Roman',serif;
  --sans:'Outfit',system-ui,sans-serif;
  --hand:'Fraunces','Times New Roman',serif;
  /* spacing */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
  --s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --sh-sm:0 1px 2px rgba(2,10,20,.06),0 1px 1px rgba(2,10,20,.04);
  --sh-md:0 4px 12px rgba(2,10,20,.08),0 2px 4px rgba(2,10,20,.05);
  --sh-lg:0 16px 40px rgba(2,10,20,.12),0 4px 12px rgba(2,10,20,.06);
  --sh-xl:0 24px 64px rgba(2,10,20,.18),0 8px 24px rgba(2,10,20,.08);
  --sh-postcard:0 18px 40px rgba(14,116,144,.18),0 6px 14px rgba(2,10,20,.10),0 1px 0 rgba(255,255,255,.5) inset;
  /* Live-tunable spacing & typography (admin overrides set these on documentElement) */
  --sp-section-y:96px;
  --sp-section-x:64px;
  --sp-head-gap:48px;
  --sp-paragraph:16px;
  --sp-hero-bottom:80px;
  --type-body-lh:1.55;
  --type-body-ls:0;
  --type-heading-lh:1;
  --type-heading-ls:-0.025em;
  --type-hero-lh:0.85;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; font-family:var(--sans); font-weight:400; font-size:16px;
  line-height:var(--type-body-lh); letter-spacing:var(--type-body-ls);
  color:var(--abyss); background:var(--cream);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4,h5{ font-family:var(--serif); font-weight:300; letter-spacing:var(--type-heading-ls); margin:0; }
.about-bio p + p{ margin-top:var(--sp-paragraph); }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
img,svg{ display:block; max-width:100%; }

/* paper grain — fixed overlay, very low cost */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(14,116,144,.025), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(249,112,102,.02), transparent 50%);
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.shell{ position:relative; z-index:3; }

/* utilities */
.cap{ text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:600; }
.muted{ color:var(--ink-mute); }
.hand{ font-family:var(--hand);font-style:italic; color:var(--coral); }
.hand-teal{ color:var(--teal); }
.serif-i{ font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:-0.02em; }
.kicker{ font-family:var(--sans); color:var(--coral); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; }
.kicker::before,.kicker::after{ content:''; width:18px; height:1px; background:var(--coral); opacity:.6; }

/* airmail border stripe */
.airmail{
  --stripe:8px;
  background-image:repeating-linear-gradient(-45deg,
    var(--coral) 0 var(--stripe),
    var(--cream) var(--stripe) calc(var(--stripe)*2),
    var(--teal) calc(var(--stripe)*2) calc(var(--stripe)*3),
    var(--cream) calc(var(--stripe)*3) calc(var(--stripe)*4));
  height:6px; width:100%;
}
.airmail-top{ position:fixed; top:0; left:0; right:0; z-index:80; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-pill); font-family:var(--sans);
  font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--coral); color:var(--cream-light);
  box-shadow:0 6px 16px rgba(249,112,102,.35); }
.btn-primary:hover{ background:#f6584b; box-shadow:0 12px 28px rgba(249,112,102,.45); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--abyss); border-color:var(--abyss); }
.btn-ghost:hover{ background:var(--abyss); color:var(--cream); }
.btn-wa{ background:#25D366; color:#fff; box-shadow:0 6px 16px rgba(37,211,102,.35); }
.btn-wa:hover{ background:#1ebe57; }
.btn-link{ background:transparent; color:var(--teal); padding:6px 0; border-radius:0;
  border-bottom:1px solid currentColor; }

/* postage stamp — coral square with perforated edge only */
.stamp{
  --bg:var(--coral); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg); padding:6px;
  filter:drop-shadow(0 6px 14px rgba(2,10,20,.18));
  /* perforated edges — tiny half-circles cut on all four sides only */
  --p:5px;
  -webkit-mask:
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) bottom left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top right/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    linear-gradient(#000,#000) center/calc(100% - var(--p)*2) calc(100% - var(--p)*2) no-repeat;
  -webkit-mask-composite:source-over;
  mask:
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) bottom left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top right/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    linear-gradient(#000,#000) center/calc(100% - var(--p)*2) calc(100% - var(--p)*2) no-repeat;
  mask-composite:add;
}
.stamp-inner{ background:var(--bg); border:1.5px dashed rgba(255,255,255,.55);
  padding:8px 10px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:2px; min-width:50px; }
.stamp-curve-top, .stamp-curve-bot{ font-family:var(--sans); font-size:7px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; opacity:.95; }
.stamp-mono{ font-family:var(--serif); font-style:italic; font-size:16px; line-height:1; }

/* wax seal */
.wax{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a7d 0%, #f97066 35%, #c2453c 95%);
  color:var(--cream-light); font-family:var(--serif); font-style:italic; font-size:24px;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.25),inset 4px 4px 10px rgba(255,255,255,.18),0 8px 18px rgba(2,10,20,.25);
  position:relative;
}
.wax::after{ content:''; position:absolute; inset:6px; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.4); }

/* postcard / card */
.paper{ background:var(--cream-light); border-radius:var(--r-md);
  box-shadow:var(--sh-postcard); position:relative; }
.paper::before{ content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(2,10,20,.08); pointer-events:none; }

/* pills / tags */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:var(--r-pill); font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; background:rgba(14,116,144,.12); color:var(--teal); }
.pill-coral{ background:rgba(249,112,102,.15); color:var(--coral); }
.pill-mint{ background:rgba(45,212,191,.18); color:#0f766e; }
.pill-sunset{ background:rgba(251,191,36,.20); color:#92400e; }
.pill-sand{ background:var(--sand); color:var(--ink-soft); }

/* divider perforated */
.divider-perf{ height:12px; background-image:radial-gradient(circle at 6px 6px, transparent 4px, var(--rule) 4.5px);
  background-size:12px 12px; background-position:0 50%; background-repeat:repeat-x;
  margin:var(--s-6) 0; border:none; }

/* ============================================================ */
/* HEADER NAV                                                   */
/* ============================================================ */
.kit-nav{
  position:fixed; top:6px; left:0; right:0; z-index:50;
  background:rgba(245,237,223,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.kit-nav-inner{ max-width:1440px; margin:0 auto; display:flex; align-items:center;
  gap:var(--s-5); padding:14px 24px; }
.kit-nav-brand{ font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:22px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;
  color:var(--abyss); text-decoration:none; user-select:none; }
.kit-nav-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--coral);
  display:inline-block; }
/* Explore menu button — opens overlay with deep navigation links */
.kit-explore{ display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:1px solid var(--rule); color:var(--abyss);
  padding:8px 16px 8px 12px; border-radius:var(--r-pill); cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; transition:all 200ms ease; }
@media(max-width:760px){ .kit-explore{ display:none; } }
.kit-explore:hover{ background:var(--abyss); color:var(--cream); border-color:var(--abyss); }
.kit-explore-bars{ display:inline-flex; flex-direction:column; gap:3px; width:14px; }
.kit-explore-bars span{ height:1.5px; background:currentColor; border-radius:1px; transition:all 200ms ease; }
.kit-explore-bars span:nth-child(1){ width:14px; }
.kit-explore-bars span:nth-child(2){ width:10px; }
.kit-explore-bars span:nth-child(3){ width:14px; }
.kit-explore:hover .kit-explore-bars span:nth-child(2){ width:14px; }

/* Explore menu overlay — full-screen postcard-style nav */
.kit-explore-modal{ position:fixed; inset:0; z-index:400; background:rgba(2,10,20,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:flex-start; justify-content:center; padding:6vh 4vw; opacity:0;
  transition:opacity 280ms ease; overflow-y:auto; }
.kit-explore-modal.is-open{ display:flex; opacity:1; }
.kit-explore-card{ background:var(--cream-light); border-radius:var(--r-lg);
  width:min(960px,100%); padding:48px 40px 56px;
  box-shadow:0 32px 80px rgba(2,10,20,.4);
  transform:translateY(20px) scale(.98); transition:transform 320ms cubic-bezier(.2,.8,.2,1); position:relative; }
.kit-explore-modal.is-open .kit-explore-card{ transform:none; }
.kit-explore-close{ position:absolute; top:16px; right:16px; width:36px; height:36px;
  border-radius:50%; background:rgba(2,10,20,.06); border:none; cursor:pointer;
  font-size:18px; color:var(--abyss); display:flex; align-items:center; justify-content:center;
  transition:all 160ms ease; }
.kit-explore-close:hover{ background:var(--coral); color:#fff; transform:rotate(90deg); }
.kit-explore-h{ font-family:var(--hand);font-style:italic; color:var(--coral); font-size:22px; margin:0 0 4px; font-weight:400; letter-spacing:.02em; }
.kit-explore-title{ font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(34px,5vw,48px); letter-spacing:-.02em; color:var(--abyss); margin:0 0 28px; line-height:1.05; }
.kit-explore-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.kit-explore-link{ display:flex; flex-direction:column; gap:6px; padding:24px 22px;
  background:#fff; border:1px solid var(--rule); border-radius:var(--r-md);
  text-decoration:none; color:var(--abyss); transition:all 240ms cubic-bezier(.2,.8,.2,1);
  position:relative; overflow:hidden; }
.kit-explore-link::after{ content:'→'; position:absolute; top:24px; right:22px;
  font-size:18px; color:var(--coral); transform:translateX(-4px); opacity:0; transition:all 240ms ease; }
.kit-explore-link:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(2,10,20,.08);
  border-color:var(--coral); padding-right:42px; }
.kit-explore-link:hover::after{ transform:translateX(0); opacity:1; }
.kit-explore-link .label{ font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:-.01em; line-height:1.1; }
.kit-explore-link .desc{ font-size:13px; color:var(--ink-mute); line-height:1.45; }

@media(max-width:760px){
  .kit-explore-card{ padding:36px 24px 44px; }
  .kit-explore-title{ font-size:32px; margin:0 0 22px; }
  .kit-explore-link{ padding:20px 18px; }
  .kit-explore-link .label{ font-size:19px; }
}

.kit-nav-links{ display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.kit-nav-links a{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); padding:8px 14px; border-radius:var(--r-pill);
  transition:background 160ms ease, color 160ms ease; }
.kit-nav-links a:hover{ background:rgba(2,10,20,.06); color:var(--abyss); }
.kit-nav-cta{ margin-left:8px; }
.kit-nav-toggle{ display:none; background:transparent; border:1px solid var(--rule); color:var(--abyss);
  border-radius:var(--r-pill); padding:8px 12px; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; }
@media (max-width:900px){
  .kit-nav-links{ display:none; }
  .kit-nav-toggle{ display:block; margin-left:auto; }
  .kit-nav-cta{ display:none; }
  .kit-nav-links.is-open{ display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:100%; left:0; right:0; background:var(--cream);
    padding:12px; border-bottom:1px solid var(--rule); gap:4px; }
  .kit-nav-links.is-open a{ padding:12px 16px; }
}

/* ============================================================ */
/* HERO                                                         */
/* ============================================================ */
.hero{ position:relative; min-height:100vh;
  padding:140px clamp(20px,4vw,var(--sp-section-x)) var(--sp-hero-bottom);
  max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; }
.hero-eyebrow{ font-family:var(--sans); font-size:11px; color:var(--coral);
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:inline-block; margin-bottom:24px; }
.hero-title{ font-size:clamp(56px,11vw,148px); line-height:var(--type-hero-lh);
  letter-spacing:var(--type-heading-ls); font-weight:300; }
.hero-title em{ font-style:italic; color:var(--teal); }
.hero-line{ display:block; }
.hero-sub-hand{ font-family:var(--hand);font-style:italic; color:var(--coral);
  font-size:clamp(28px,3.5vw,42px); transform:rotate(-2.4deg);
  display:inline-block; margin-top:20px; }
.hero-sub{ margin-top:32px; font-size:clamp(15px,1.2vw,18px); max-width:48ch;
  color:var(--ink-soft); line-height:1.55; }
.hero-ctas{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-meta{ margin-top:48px; display:flex; flex-wrap:wrap; gap:32px 56px; }
.hero-meta .label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:6px; }
.hero-meta .value{ font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:22px; color:var(--abyss); }
/* hero postcard wall — 9 polaroids scattered, responsive */
.hero-cluster{ position:relative; min-height:600px; display:flex; align-items:center; justify-content:center; padding:30px 0; }
.hero-pc{ position:absolute; width:clamp(150px, 14vw, 190px); aspect-ratio:5/6; background:var(--cream-light);
  border-radius:5px; box-shadow:var(--sh-postcard); padding:9px;
  display:flex; flex-direction:column; gap:7px;
  transition:transform 600ms cubic-bezier(.2,.8,.2,1); }
.hero-pc img{ width:100%; flex:1; min-height:0; object-fit:cover; border-radius:3px; background:linear-gradient(135deg,#0E9F8F,#2DD4BF); }
.hero-pc.no-img img{ display:none; }
.hero-pc.no-img{ background:linear-gradient(135deg,#FAF3E5,#EDE3D2); }
.hero-pc.no-img::after{ content:''; position:absolute; inset:9px 9px 44px; background:linear-gradient(135deg,#0E9F8F 0%,#2DD4BF 45%,#F4A261 100%); border-radius:3px; pointer-events:none; }
.hero-pc .cap-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:6px; }
.hero-pc .cap-name{ font-family:var(--serif); font-style:italic; font-size:13px; line-height:1.1; }
.hero-pc .cap-loc{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.hero-pc .stamp-mini{ position:absolute; top:6px; right:6px; transform:rotate(8deg); }
/* scattered wall positions (laptop) */
.hero-pc-1{ top:0;     left:50%; margin-left:-340px; transform:rotate(-9deg); z-index:2; }
.hero-pc-2{ top:14px;  left:50%; margin-left:-160px; transform:rotate(4deg); z-index:5; }
.hero-pc-3{ top:0;     left:50%; margin-left:30px;   transform:rotate(7deg); z-index:3; }
.hero-pc-4{ top:30px;  left:50%; margin-left:200px;  transform:rotate(-5deg); z-index:4; }
.hero-pc-5{ top:200px; left:50%; margin-left:-330px; transform:rotate(6deg); z-index:6; }
.hero-pc-6{ top:230px; left:50%; margin-left:-130px; transform:rotate(-7deg); z-index:8; }
.hero-pc-7{ top:200px; left:50%; margin-left:60px;   transform:rotate(8deg); z-index:7; }
.hero-pc-8{ top:230px; left:50%; margin-left:240px;  transform:rotate(-4deg); z-index:5; }
.hero-pc-9{ top:410px; left:50%; margin-left:-90px;  transform:rotate(2deg); z-index:9; }
.hero-pc:hover{ transform:translateY(-6px) rotate(0deg) scale(1.06); z-index:20; box-shadow:0 24px 48px rgba(2,10,20,.18); }

.hero-scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute);
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.hero-scroll .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral);
  animation:bounce 1.6s infinite; }

@keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* drifting fish along bottom */
.hero-fish{ position:absolute; bottom:8px; left:0; right:0; height:36px; pointer-events:none; opacity:.35; }
.hero-fish svg{ position:absolute; bottom:0; animation:swim 26s linear infinite; }
.hero-fish svg:nth-child(2){ animation-duration:38s; animation-delay:-12s; opacity:.5; }
.hero-fish svg:nth-child(3){ animation-duration:46s; animation-delay:-22s; opacity:.4; }
@keyframes swim{ from{ transform:translateX(-200px);} to{ transform:translateX(110vw);} }

/* tablet: shrink the wall */
@media (max-width:1100px){
  .hero-cluster{ min-height:520px; }
  .hero-pc{ width:clamp(130px, 16vw, 170px); }
  .hero-pc-1{ margin-left:-300px; } .hero-pc-2{ margin-left:-140px; }
  .hero-pc-3{ margin-left:30px; }   .hero-pc-4{ margin-left:180px; }
  .hero-pc-5{ margin-left:-290px; top:180px; }
  .hero-pc-6{ margin-left:-110px; top:200px; }
  .hero-pc-7{ margin-left:60px; top:180px; }
  .hero-pc-8{ margin-left:220px; top:200px; }
  .hero-pc-9{ margin-left:-80px; top:360px; }
}

/* mobile: scrolling marquee of 9 cards in two staggered rows */
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; padding-top:120px; }
  .hero-cluster{ min-height:auto; margin-top:24px; padding:30px 0 30px; display:grid;
    grid-template-columns:repeat(3, 1fr); gap:18px 14px;
    max-width:520px; margin-left:auto; margin-right:auto; }
  .hero-pc{ position:relative; width:100%; aspect-ratio:5/6;
    left:auto !important; right:auto !important; top:auto !important;
    margin:0 !important; padding:7px; }
  .hero-pc .cap-row{ gap:4px; }
  .hero-pc .cap-name{ font-size:11px; }
  .hero-pc .cap-loc{ font-size:7.5px; letter-spacing:.12em; }
  .hero-pc-1, .hero-pc-4, .hero-pc-7{ transform:rotate(-3deg); }
  .hero-pc-2, .hero-pc-5, .hero-pc-8{ transform:rotate(2deg); }
  .hero-pc-3, .hero-pc-6, .hero-pc-9{ transform:rotate(-1deg); }
}
@media (max-width:420px){
  .hero-cluster{ grid-template-columns:repeat(2, 1fr); max-width:340px; }
  .hero-pc-9{ display:none; } /* drop one to keep the grid even */
}

/* ============================================================ */
/* SECTIONS                                                     */
/* ============================================================ */
.section{ max-width:1440px; margin:0 auto;
  padding:var(--sp-section-y) clamp(20px, 4vw, var(--sp-section-x));
  position:relative; scroll-margin-top:80px; }
.section-head{ display:flex; flex-direction:column; gap:14px;
  margin-bottom:var(--sp-head-gap); max-width:880px; }
.section-title{ font-size:clamp(40px,5.5vw,84px); line-height:var(--type-heading-lh); letter-spacing:var(--type-heading-ls); font-weight:300; }
.section-title em{ font-style:italic; color:var(--teal); }
.section-desc{ font-size:clamp(15px,1.3vw,18px); color:var(--ink-soft); max-width:60ch; line-height:1.55; }

/* ============================================================ */
/* OFFERS CAROUSEL                                              */
/* ============================================================ */
.offers-rail{ overflow-x:auto; overflow-y:visible; padding:30px 8px 40px;
  margin:0 -8px; scrollbar-width:thin; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.offers-rail::-webkit-scrollbar{ height:6px; }
.offers-rail::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:6px; }
.offers-track{ display:flex; gap:24px; padding:0 8px; }
.offer-card{ flex:0 0 280px; aspect-ratio:9/16; cursor:pointer; position:relative;
  background:var(--cream-light); border-radius:var(--r-sm);
  filter:drop-shadow(0 12px 28px rgba(14,116,144,.18));
  transition:transform 200ms ease; padding:10px;
  --p:5px;
  -webkit-mask:
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) bottom left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top right/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    linear-gradient(#000,#000) center/calc(100% - var(--p)*2) calc(100% - var(--p)*2) no-repeat;
  mask:
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) bottom left/calc(var(--p)*2) calc(var(--p)*2) repeat-x,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top left/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    radial-gradient(circle at var(--p) var(--p), transparent calc(var(--p) - 1px), #000 var(--p)) top right/calc(var(--p)*2) calc(var(--p)*2) repeat-y,
    linear-gradient(#000,#000) center/calc(100% - var(--p)*2) calc(100% - var(--p)*2) no-repeat; }
.offer-card:hover{ transform:translateY(-4px); }
.offer-card-inner{ width:100%; height:100%; border:1.5px dashed rgba(2,10,20,.18);
  border-radius:6px; overflow:hidden; position:relative; background:var(--cream); }
.offer-card-inner img{ width:100%; height:100%; object-fit:cover; }
.offer-vol{ position:absolute; top:10px; right:10px; font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--coral);
  background:rgba(245,237,223,.92); padding:4px 8px; border-radius:var(--r-pill); }

.lightbox{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:200; background:rgba(2,10,20,.85);
  backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center;
  padding:5vh 4vw; cursor:zoom-out; overflow:auto; }
.lightbox.is-open{ display:flex; }
.lightbox-inner{ display:flex; align-items:center; justify-content:center; min-height:100%; width:100%; }
.lightbox img{ max-width:90vw; max-height:80vh; object-fit:contain; border-radius:var(--r-md);
  box-shadow:var(--sh-xl); }
.lightbox-cap{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%) rotate(-1.5deg);
  font-family:var(--hand);font-style:italic; color:var(--cream); font-size:24px; }
.lightbox-close{ position:absolute; top:20px; right:24px; width:42px; height:42px;
  border-radius:50%; background:var(--cream); color:var(--abyss); border:none;
  font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ============================================================ */
/* ABOUT                                                        */
/* ============================================================ */
.about{ display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:center; }
/* Polaroid-style photo postcard for the About section. The image inside the
   frame can be zoomed and panned via CSS variables driven by the admin About
   tab — admin edits photoZoom / photoX / photoY and the change is live. */
.about-photo-postcard{
  position:relative;
  width:min(360px, 90%);
  margin:0 auto;
  background:var(--cream-light);
  border-radius:6px;
  padding:14px 14px 70px;
  box-shadow:var(--sh-postcard);
  transform:rotate(-2.5deg);
  transition:transform 320ms cubic-bezier(.2,.8,.2,1);
  border:1px solid rgba(2,10,20,.06);
}
.about-photo-postcard:hover{ transform:rotate(0deg) translateY(-4px) scale(1.02); }
.about-photo-postcard::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:multiply; border-radius:inherit;
}
.aphoto-frame{
  position:relative; width:100%; aspect-ratio:4/5;
  overflow:hidden; border-radius:3px;
  background:linear-gradient(135deg, #0e7490, #155e75);
}
.aphoto-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  /* Zoom + pan are admin-tunable. Numbers come from ABOUT.photoZoom/X/Y. */
  transform-origin:center center;
  transform:scale(var(--ph-zoom, 1)) translate(var(--ph-x, 0%), var(--ph-y, 0%));
  transition:transform 240ms cubic-bezier(.2,.8,.2,1);
  user-select:none; -webkit-user-drag:none;
}
.aphoto-caption{
  position:absolute; left:0; right:0; bottom:18px;
  text-align:center;
  font-family:var(--hand);font-style:italic; color:var(--coral);
  font-size:24px; transform:rotate(-1.5deg); display:inline-block;
  width:100%;
}
.about h2{ font-size:clamp(38px,4.4vw,68px); line-height:1; margin-bottom:18px; }
.about h2 em{ color:var(--teal); font-style:italic; }
.about-bio{ font-size:17px; color:var(--ink-soft); line-height:1.65; margin-bottom:24px; }
.about-stats{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.about-count{ position:relative; }
.about-count .stamp-mono{ font-size:36px; font-weight:300; }
.about-hand-note{ font-family:var(--hand);font-style:italic; color:var(--coral); font-size:24px;
  transform:rotate(-3deg); display:inline-block; margin-top:14px; }
@media (max-width:900px){
  .about{ grid-template-columns:1fr; gap:32px; }
  .about-seal{ max-width:300px; }
}

/* ============================================================ */
/* MARQUEE                                                      */
/* ============================================================ */
.marquee{ overflow:hidden; padding:32px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--cream-deep); }
.marquee-track{ display:flex; gap:48px; animation:marquee 40s linear infinite; white-space:nowrap;
  font-family:var(--serif); font-size:clamp(34px,5vw,72px); font-weight:300; color:var(--abyss); }
.marquee-track span{ display:inline-flex; align-items:center; gap:48px; }
.marquee-track em{ font-style:italic; color:var(--teal); }
.marquee-track .em-coral{ color:var(--coral); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================ */
/* UNDERWATER PARALLAX                                          */
/* ============================================================ */
.underwater{ position:relative; height:60vh; min-height:420px; overflow:hidden;
  background:linear-gradient(180deg, #155e75 0%, #083344 50%, #020A14 100%); }
.uw-layer{ position:absolute; inset:0; pointer-events:none; }
.uw-rays{ background:radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.18), transparent 60%); }
.uw-bubble{ position:absolute; bottom:-40px; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(165,243,252,.4) 60%, transparent);
  animation:rise linear infinite; }
@keyframes rise{ from{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.9; }
  to{ transform:translateY(-70vh) translateX(20px); opacity:0; } }
.uw-manta{ position:absolute; opacity:.45; animation:drift linear infinite; }
@keyframes drift{ from{ transform:translateX(-200px);} to{ transform:translateX(110vw);} }

/* ============================================================ */
/* RESORT SCATTER                                               */
/* ============================================================ */
.resorts-surface{ position:relative; padding-top:24px; }
.resort-grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:48px 32px; padding:24px 8px 8px; }
@media (max-width:1100px){ .resort-grid{ grid-template-columns:repeat(3,1fr); gap:36px 24px; } }
@media (max-width:780px){ .resort-grid{ grid-template-columns:repeat(2,1fr); gap:28px 16px; } }
@media (max-width:420px){ .resort-grid{ grid-template-columns:1fr; gap:24px; } }

.resort{ position:relative; cursor:pointer; perspective:1000px;
  transform:rotate(var(--rot,0deg));
  transition:transform 360ms cubic-bezier(.2,.8,.2,1), filter 200ms ease;
  will-change:transform;
  opacity:0; }
.resort.is-visible{ opacity:1; transition:transform 360ms cubic-bezier(.2,.8,.2,1), filter 200ms ease, opacity 600ms ease; }
.resort:hover{ transform:rotate(0deg) scale(1.04) translateY(-4px); z-index:8; filter:drop-shadow(0 24px 36px rgba(2,10,20,.18)); }
.resort-card{
  background:var(--cream-light); border-radius:6px;
  box-shadow:var(--sh-postcard); padding:10px 10px 14px;
  position:relative; overflow:visible;
  border:1px solid rgba(2,10,20,.05);
}
.resort-img{ aspect-ratio:5/3.4; background:linear-gradient(135deg,#155e75,#22d3ee 60%,#67e8f9);
  border-radius:3px; overflow:hidden; position:relative; }
.resort-img img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms ease; }
.resort:hover .resort-img img{ transform:scale(1.06); }
.resort-img.fallback::after{ content:attr(data-name); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; padding:14px;
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--cream);
  text-align:center; }
.resort-body{ padding:14px 6px 4px; text-align:center; position:relative; }
.resort-name{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:20px;
  line-height:1.1; color:var(--abyss); margin-bottom:4px; }
.resort-loc{ font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); }
.resort-price-stamp{ position:absolute; top:0; right:-6px; transform:rotate(-8deg);
  z-index:3; }
.resort-compare{ position:absolute; top:14px; left:14px; width:34px; height:34px;
  border-radius:50%; background:var(--cream-light); color:var(--coral);
  border:1.5px solid var(--coral); font-family:var(--serif); font-style:italic;
  font-weight:600; font-size:18px; line-height:1; cursor:pointer; z-index:4;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(2,10,20,.12); transition:all 160ms ease; }
.resort-compare:hover{ background:var(--coral); color:var(--cream-light); }
.resort-compare.is-added{ background:var(--mint); color:#0f766e; border-color:var(--mint); }
/* Awards now flow on their own dedicated row between the picture and the
   resort name — out of the way of the + compare button and the price stamp. */
.resort-awards{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;
  gap:5px; padding:10px 8px 0; }
.resort-awards:empty{ display:none; }
.award-ribbon{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:var(--r-pill); font-size:10px; font-weight:700; letter-spacing:.04em;
  background:rgba(2,10,20,.85); color:#fff;
  box-shadow:0 2px 6px rgba(2,10,20,.18);
  white-space:nowrap; }
.award-ribbon .e{ font-size:11px; }

/* ============================================================ */
/* RESORT MODAL                                                 */
/* ============================================================ */
.modal-back{ position:fixed; inset:0; z-index:300;
  background:rgba(2,10,20,.6); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:3vh 3vw;
  opacity:0; transition:opacity 240ms ease; }
.modal-back.is-open{ display:flex; opacity:1; }
.modal-card{ position:relative; width:min(960px,100%); max-height:94vh; overflow:hidden;
  background:var(--cream-light); border-radius:var(--r-lg);
  box-shadow:var(--sh-xl); transform:translateY(20px) scale(.98);
  transition:transform 320ms cubic-bezier(.2,.8,.2,1); }
.modal-back.is-open .modal-card{ transform:translateY(0) scale(1); }
.modal-scroll{ position:relative; max-height:94vh; overflow-y:auto; z-index:5;
  padding-bottom:60px; -webkit-overflow-scrolling:touch; }
.modal-hero{ position:relative; height:340px; overflow:hidden; }
.modal-hero img{ width:100%; height:100%; object-fit:cover; }
.modal-hero::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(245,237,223,.95) 100%); }
.modal-stamp{ position:absolute; top:18px; right:18px; transform:rotate(-9deg); z-index:2; }
.modal-close{ position:absolute; top:14px; left:14px; z-index:6; width:38px; height:38px;
  border-radius:50%; background:rgba(245,237,223,.92); color:var(--abyss); border:none;
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-body{ padding:28px clamp(20px,4vw,40px) 24px; }
.modal-body h2{ font-size:clamp(30px,3.6vw,46px); font-style:italic; line-height:1.05; }
.modal-body .modal-loc{ font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:6px; }
.modal-body .award-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.modal-body p.lede{ font-size:16px; line-height:1.65; color:var(--ink-soft); margin-top:18px; }
.tips-h{ font-family:var(--hand);font-style:italic; color:var(--coral); font-size:28px;
  margin:24px 0 8px; transform:rotate(-1.5deg); display:inline-block; }
.tips-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.tips-list li{ position:relative; padding-left:22px; font-size:15px; color:var(--abyss); line-height:1.55; }
.tips-list li::before{ content:'★'; position:absolute; left:0; top:0; color:var(--sunset); }
.modal-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.albums-h{ font-family:var(--serif); font-style:italic; font-size:22px; margin:28px 0 12px; }
.album-list{ display:flex; flex-direction:column; gap:8px; }
.album-row{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--cream); border-radius:var(--r-sm); border:1px dashed var(--rule); }
.album-row a{ color:var(--teal); font-weight:600; font-size:13px; text-decoration:none; }
.album-row a:hover{ text-decoration:underline; }

/* availability checker */
.avail{ margin-top:24px; padding:20px; background:linear-gradient(135deg, var(--cream) 0%, rgba(165,243,252,.25) 100%);
  border:1.5px solid var(--mint); border-radius:var(--r-md); }
.avail h4{ font-family:var(--serif); font-style:italic; font-size:20px; margin-bottom:14px; }
.avail-grid{ display:grid; grid-template-columns:1fr 1fr 100px; gap:12px; margin-bottom:14px; }
.avail-field{ display:flex; flex-direction:column; gap:4px; }
.avail-field label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.avail-field input{ font-family:var(--sans); font-size:14px; padding:10px 12px;
  border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--cream-light); }
@media (max-width:560px){ .avail-grid{ grid-template-columns:1fr; } }
.modal-cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:20px; border-top:1px dashed var(--rule); }

/* water at bottom of modal */
.modal-water{ position:absolute; left:0; right:0; bottom:-25px; height:40px; opacity:.5; z-index:1;
  pointer-events:none; }
.modal-water svg{ width:200%; height:100%; animation:wave-flow 8s linear infinite; }
@keyframes wave-flow{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================ */
/* COMPARE BAR (top-right)                                      */
/* ============================================================ */
.compare-bar{ position:fixed; top:80px; right:16px; z-index:60; width:280px;
  background:var(--cream-light); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); padding:14px; display:none; flex-direction:column; gap:8px; }
.compare-bar.is-shown{ display:flex; }
.compare-bar.is-collapsed{ width:auto; padding:8px 14px; }
.compare-bar.is-collapsed .compare-body, .compare-bar.is-collapsed .compare-cta{ display:none; }
.compare-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.compare-head h4{ font-family:var(--serif); font-style:italic; font-size:16px; margin:0; }
.compare-head button{ background:transparent; border:none; color:var(--ink-mute); width:24px; height:24px;
  cursor:pointer; border-radius:4px; font-size:14px; }
.compare-head button:hover{ background:var(--rule); color:var(--abyss); }
.compare-body{ display:flex; flex-direction:column; gap:6px; }
.compare-slot{ display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:8px 10px; background:var(--cream); border:1px dashed var(--rule); border-radius:var(--r-sm);
  font-size:12px; }
.compare-slot.empty{ color:var(--ink-mute); font-style:italic; }
.compare-slot button{ background:transparent; border:none; color:var(--coral); cursor:pointer; padding:0; }
.compare-cta{ margin-top:6px; }
@media (max-width:720px){
  .compare-bar{ top:auto; bottom:8px; right:8px; left:8px; width:auto; }
}

/* compare modal grid */
.compare-modal{ position:fixed; inset:0; z-index:310;
  background:rgba(2,10,20,.7); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center; padding:5vh 4vw;
  overflow-y:auto; }
.compare-modal.is-open{ display:flex; }
.compare-modal-inner{ width:100%; max-width:1200px; background:var(--cream-light);
  border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-xl); }
.compare-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
.compare-cell{ background:var(--cream); border-radius:var(--r-sm); padding:12px;
  border:1px solid var(--rule); display:flex; flex-direction:column; gap:8px; font-size:13px; }
.compare-cell img{ width:100%; aspect-ratio:5/3; object-fit:cover; border-radius:4px; }
.compare-cell h5{ font-family:var(--serif); font-style:italic; font-size:18px; margin:0; }
.compare-cell .row{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:12px; color:var(--ink-soft); }
.compare-cell .row .k{ color:var(--ink-mute); letter-spacing:.06em; text-transform:uppercase; font-size:10px; }

/* ============================================================ */
/* FAQ                                                          */
/* ============================================================ */
.faq-list{ display:flex; flex-direction:column; gap:10px; max-width:880px; }
.faq-item{ background:var(--cream-light); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:18px 22px; transition:border-color 200ms ease; }
.faq-item:hover{ border-color:var(--coral); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; user-select:none; }
.faq-q h4{ font-family:var(--serif); font-style:italic; font-size:19px; font-weight:300; line-height:1.3; }
.faq-toggle{ font-family:var(--serif); font-size:24px; color:var(--coral);
  transition:transform 240ms ease; line-height:1; }
.faq-item.is-open .faq-toggle{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 320ms ease; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.faq-item.is-open .faq-a{ max-height:600px; padding-top:12px; }

/* ============================================================ */
/* REVIEWS — Trustpilot postcards                               */
/* ============================================================ */
.reviews-rating{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:28px; padding:18px 22px;
  background:var(--cream-light); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); }
.reviews-rating .stars{ color:#00B67A; font-size:24px; letter-spacing:2px; line-height:1; }
.reviews-rating .num{ font-family:var(--serif); font-style:italic; font-size:32px; font-weight:300; line-height:1; color:var(--abyss); }
.reviews-rating .meta{ font-size:13px; color:var(--ink-soft); }
.reviews-rating .meta strong{ color:#00B67A; }
.reviews-rating a{ margin-left:auto; }

.reviews-rail{ overflow-x:auto; overflow-y:visible; padding:14px 8px 30px; margin:0 -8px;
  scrollbar-width:thin; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.reviews-rail::-webkit-scrollbar{ height:6px; }
.reviews-rail::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:6px; }
.reviews-track{ display:flex; gap:24px; padding:8px; }
.review-card{ flex:0 0 320px; background:var(--cream-light); border-radius:6px;
  padding:24px 22px 18px; box-shadow:var(--sh-postcard); position:relative;
  border:1px solid rgba(2,10,20,.06);
  transform:rotate(var(--rot,-1.5deg)); transition:transform 220ms ease; }
.review-card:hover{ transform:rotate(0) translateY(-4px); z-index:2; }
.review-card .stars{ color:#00B67A; font-size:14px; letter-spacing:2px; line-height:1; margin-bottom:10px; }
.review-card .body{ font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.55; color:var(--abyss); margin-bottom:14px; min-height:120px; }
.review-card .body::before{ content:'"'; font-family:var(--serif); font-size:48px; color:var(--coral); line-height:0; vertical-align:-12px; margin-right:4px; }
.review-card .who{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding-top:12px; border-top:1px dashed var(--rule); }
.review-card .who .nm{ font-family:var(--hand);font-style:italic; color:var(--coral); font-size:22px; line-height:1.1; transform:rotate(-1.5deg); display:inline-block; }
.review-card .who .wh{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); text-align:right; }
.review-card .stamp-mini{ position:absolute; top:-8px; right:14px; transform:rotate(8deg); }

/* ============================================================ */
/* CONTACT FORM                                                 */
/* ============================================================ */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
.contact-form{ background:var(--cream-light); padding:32px; border-radius:var(--r-md);
  box-shadow:var(--sh-md); position:relative; transform-style:preserve-3d; }
.contact-form .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.contact-form label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.contact-form input, .contact-form textarea, .contact-form select{
  font-family:var(--sans); font-size:15px; padding:12px 14px;
  border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--cream);
  color:var(--abyss); transition:border-color 160ms ease, box-shadow 160ms ease; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(249,112,102,.15); }
.contact-form input:invalid:not(:placeholder-shown), .contact-form textarea:invalid:not(:placeholder-shown){
  border-color:var(--coral); }
.contact-form textarea{ resize:vertical; min-height:100px; }
.contact-form .req{ color:var(--coral); font-weight:700; margin-left:2px; }
@media (max-width:780px){ .contact{ grid-template-columns:1fr; } }

/* ============================================================ */
/* FLOATING WIDGETS                                             */
/* ============================================================ */
.float-stack{ position:fixed; z-index:55; display:flex; flex-direction:column; gap:10px; }
.float-right{ right:14px; bottom:14px; align-items:flex-end; }
.float-left{ left:14px; bottom:14px; align-items:flex-start; }
.float-btn{ background:var(--cream-light); color:var(--abyss); border:1px solid var(--rule);
  border-radius:var(--r-pill); padding:9px 14px; font-size:12px; font-weight:600;
  letter-spacing:.06em; box-shadow:var(--sh-md); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:transform 160ms ease, background 160ms ease; }
.float-btn:hover{ transform:translateY(-2px); background:var(--cream); }
.float-btn.coral{ background:linear-gradient(135deg, var(--coral), var(--sunset)); color:#fff; border-color:transparent;
  box-shadow:0 8px 20px rgba(249,112,102,.35); animation:pulseSoft 4s ease-in-out infinite; }
.float-btn.mint{ border-color:var(--mint); color:#0f766e; }
.float-btn.circle{ width:42px; height:42px; padding:0; justify-content:center; }
.float-btn .badge{ position:absolute; top:-4px; right:-4px; background:var(--coral); color:#fff;
  border-radius:50%; min-width:18px; height:18px; font-size:10px; padding:0 5px;
  display:flex; align-items:center; justify-content:center; font-weight:700; }
@keyframes pulseSoft{ 0%,100%{ box-shadow:0 8px 20px rgba(249,112,102,.35);} 50%{ box-shadow:0 12px 28px rgba(249,112,102,.55);} }

/* small modals (find/trip/passport) */
.mini-modal{ position:fixed; inset:0; z-index:280;
  background:rgba(2,10,20,.6); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:4vh 4vw; }
.mini-modal.is-open{ display:flex; }
.mini-modal-inner{ width:100%; max-width:640px; max-height:90vh; overflow-y:auto;
  background:var(--cream-light); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--sh-xl); }
.mini-modal-inner h2{ font-size:30px; font-style:italic; line-height:1.05; margin-bottom:8px; }
.mini-modal-inner h2 em{ color:var(--coral); }
.mini-modal-inner .lede{ color:var(--ink-soft); margin-bottom:20px; }
.mini-modal-close{ background:transparent; border:none; color:var(--ink-mute); font-size:22px; cursor:pointer; }
.mini-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }

/* find my island */
.find-q{ margin-bottom:22px; }
.find-q .q-title{ font-family:var(--serif); font-style:italic; font-size:18px; margin-bottom:10px; }
.find-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.find-pill{ padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--rule);
  background:var(--cream); font-size:13px; cursor:pointer; transition:all 160ms ease; user-select:none; }
.find-pill:hover{ border-color:var(--coral); }
.find-pill.is-on{ background:var(--coral); color:#fff; border-color:var(--coral); }
.find-results{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.find-result{ display:flex; gap:12px; padding:10px; background:var(--cream); border-radius:var(--r-sm);
  border:1px solid var(--rule); align-items:center; cursor:pointer; transition:transform 160ms;
  text-decoration:none; color:inherit; }
.find-result:hover{ transform:translateX(4px); }
.find-result img{ width:80px; height:60px; object-fit:cover; border-radius:4px; }
.find-result .info{ flex:1; }
.find-result .info h5{ font-family:var(--serif); font-style:italic; font-size:17px; }
.find-match{ font-weight:700; color:var(--mint); font-size:18px; }

/* trip builder */
.trip-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.trip-row{ display:grid; grid-template-columns:1fr 90px 36px; gap:8px; align-items:center;
  padding:10px 12px; background:var(--cream); border-radius:var(--r-sm); border:1px solid var(--rule); }
.trip-row .nights-input{ width:100%; padding:6px 8px; border:1px solid var(--rule); border-radius:4px; }
.trip-row .rm{ background:transparent; border:none; color:var(--coral); font-size:18px; cursor:pointer; }
.trip-add{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:14px; }
.trip-add select{ padding:9px 12px; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--cream); }
.trip-summary{ margin-top:14px; padding:12px; background:rgba(45,212,191,.1); border-radius:var(--r-sm);
  font-size:14px; }

/* passport stamps */
.passport-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
@media (max-width:560px){ .passport-grid{ grid-template-columns:repeat(3,1fr); } }
.stamp-slot{ aspect-ratio:1; border-radius:50%; border:1.5px solid var(--rule); border-style:dashed;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8px; background:var(--cream); opacity:.55; gap:2px; }
.stamp-slot.collected{ opacity:1; border-color:var(--cyan); border-style:solid;
  background:radial-gradient(circle at 50% 30%, rgba(34,211,238,.18), transparent 60%); }
.stamp-slot .ico{ font-size:18px; }
.stamp-slot .nm{ font-family:var(--serif); font-style:italic; font-size:11px; line-height:1.05; }
.stamp-slot .at{ font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }

/* ============================================================ */
/* SEND CEREMONY                                                */
/* ============================================================ */
.ceremony{ position:fixed; inset:0; z-index:400; pointer-events:none; display:none; }
.ceremony.is-on{ display:block; }
.ceremony-bg{ position:absolute; inset:0; background:rgba(2,10,20,.4); backdrop-filter:blur(6px);
  opacity:0; animation:fadeIn 400ms ease forwards; }
@keyframes fadeIn{ to{ opacity:1; } }
.ceremony-water{ position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg, var(--cyan), var(--teal));
  animation:waterRise 2.2s ease forwards .8s; }
@keyframes waterRise{ to{ height:60vh; } }
.ceremony-boat{ position:absolute; bottom:48vh; left:-200px; width:200px;
  animation:sail 4s linear forwards 1.2s; }
@keyframes sail{ to{ left:110vw; } }
.ceremony-toast{ position:absolute; top:30%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-style:italic; font-size:48px; color:var(--cream-light);
  text-shadow:0 4px 12px rgba(0,0,0,.4); opacity:0;
  animation:toastIn 700ms ease forwards 1.6s, toastOut 600ms ease forwards 5.4s; }
.ceremony-toast em.dot{ color:var(--coral); font-style:normal; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,-30%); } to{ opacity:1; transform:translate(-50%,-50%); } }
@keyframes toastOut{ from{ opacity:1; } to{ opacity:0; } }

.boarding-pass{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  width:min(560px,92vw); padding:24px; background:var(--cream-light);
  border-radius:var(--r-md); box-shadow:var(--sh-xl); pointer-events:auto;
  display:flex; gap:18px; opacity:0; }
.boarding-pass.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); transition:all 600ms cubic-bezier(.2,.8,.2,1); }
.boarding-pass-stub{ flex:0 0 110px; padding-right:18px; border-right:2px dashed var(--rule);
  display:flex; flex-direction:column; gap:8px; }
.boarding-pass-stub .barcode{ width:100%; height:60px;
  background:repeating-linear-gradient(90deg, var(--abyss) 0 2px, transparent 2px 4px,
    var(--abyss) 4px 5px, transparent 5px 8px); margin-top:10px; }
.boarding-pass-main{ flex:1; }
.boarding-pass-main .brand{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--coral); }
.boarding-pass-main h3{ font-size:24px; font-style:italic; margin:6px 0; }
.boarding-pass-main .row{ display:flex; gap:24px; flex-wrap:wrap; margin-top:12px; }
.boarding-pass-main .row > div .k{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.boarding-pass-main .row > div .v{ font-family:var(--serif); font-style:italic; font-size:18px; }
.boarding-pass-close{ position:absolute; top:8px; right:10px; width:30px; height:30px;
  border-radius:50%; background:var(--cream); border:1px solid var(--rule); cursor:pointer; }

/* ============================================================ */
/* FOOTER                                                       */
/* ============================================================ */
.kit-foot{ background:var(--abyss); color:var(--cream); padding:80px clamp(20px,4vw,64px) 32px;
  position:relative; z-index:3; margin-top:60px; }
.kit-foot::before{ content:''; position:absolute; top:0; left:0; right:0; height:6px;
  background-image:repeating-linear-gradient(-45deg,
    var(--coral) 0 8px,
    var(--abyss) 8px 16px,
    var(--teal) 16px 24px,
    var(--abyss) 24px 32px); }
.kit-foot::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:6px;
  background-image:repeating-linear-gradient(-45deg,
    var(--coral) 0 8px,
    var(--abyss) 8px 16px,
    var(--teal) 16px 24px,
    var(--abyss) 24px 32px); }
.kit-foot-inner{ max-width:1440px; margin:0 auto; display:grid;
  grid-template-columns:2fr 1fr 1fr; gap:48px; }
.foot-brand{ display:flex; flex-direction:column; gap:18px; }
.foot-brand .wax{ background:radial-gradient(circle at 35% 30%, #ff8a7d 0%, #f97066 35%, #c2453c 95%); }
.foot-brand .wordmark{ font-family:var(--serif); font-style:italic; font-size:48px; line-height:1; color:var(--cream); }
.foot-brand .wordmark .dot{ color:var(--coral); }
.foot-brand .tagline{ font-family:var(--hand);font-style:italic; color:var(--foam); font-size:24px; transform:rotate(-1.5deg); display:inline-block; }
.kit-foot h4{ font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--foam); margin-bottom:12px; font-weight:700; }
.kit-foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.kit-foot a{ color:rgba(245,237,223,.85); text-decoration:none; font-size:14px; }
.kit-foot a:hover{ color:var(--cyan); }
.kit-foot .legal{ border-top:1px solid rgba(245,237,223,.12); margin-top:48px;
  padding-top:24px; font-size:12px; color:rgba(245,237,223,.55);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  max-width:1440px; margin-left:auto; margin-right:auto; }
@media (max-width:780px){ .kit-foot-inner{ grid-template-columns:1fr; } }

/* ============================================================ */
/* ADMIN PANEL                                                  */
/* ============================================================ */
.admin{ position:fixed; inset:0; z-index:500; background:#0f1828; color:var(--cream);
  display:none; flex-direction:column; overflow:hidden; }
.admin.show{ display:flex; }
.admin-head{ background:#0a121f; padding:14px 24px; display:flex; align-items:center;
  gap:24px; border-bottom:1px solid rgba(255,255,255,.08); }
.admin-head .brand{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--cream); }
.admin-head .stats{ display:flex; gap:16px; margin-left:auto; flex-wrap:wrap; }
.admin-stat{ background:rgba(255,255,255,.05); padding:6px 12px; border-radius:var(--r-sm);
  font-size:12px; }
.admin-stat .v{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--coral); margin-right:6px; }
.admin-tabs{ background:#0a121f; padding:0 24px; display:flex; gap:4px; border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
.admin-tab{ background:transparent; border:none; color:rgba(245,237,223,.55); font-family:var(--sans);
  padding:14px 18px; cursor:pointer; font-size:13px; letter-spacing:.06em; border-bottom:2px solid transparent;
  text-transform:uppercase; font-weight:600; }
.admin-tab.is-active{ color:var(--cream); border-bottom-color:var(--coral); }
.admin-body{ flex:1; overflow-y:auto; padding:24px; }
.admin-pane{ display:none; max-width:1100px; margin:0 auto; }
.admin-pane.is-active{ display:block; }
.admin-group{ background:rgba(255,255,255,.04); border-radius:var(--r-md); padding:20px;
  margin-bottom:18px; border:1px solid rgba(255,255,255,.08); }
.admin-group h3{ font-family:var(--serif); font-style:italic; font-size:22px; margin-bottom:14px; color:var(--cream); }
.admin-row{ display:grid; grid-template-columns:200px 1fr; gap:16px; margin-bottom:12px; align-items:start; }
@media (max-width:780px){ .admin-row{ grid-template-columns:1fr; gap:6px; } }
.admin-row label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,237,223,.65); padding-top:8px; }
.admin-row input, .admin-row textarea, .admin-row select{
  font-family:var(--sans); font-size:14px; padding:9px 12px;
  background:rgba(0,0,0,.3); color:var(--cream); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm); width:100%; }
.admin-row textarea{ min-height:90px; resize:vertical; }
.admin-action-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 0; }
.admin-resort-list{ display:flex; flex-direction:column; gap:6px; }
.admin-resort{ display:grid; grid-template-columns:30px 1fr auto; gap:10px; padding:10px 12px;
  background:rgba(255,255,255,.04); border-radius:var(--r-sm); align-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.06); transition:background 160ms; }
.admin-resort:hover{ background:rgba(255,255,255,.08); }
.admin-resort .num{ font-family:var(--serif); font-style:italic; color:var(--ink-mute); }
.admin-resort .nm{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--cream); }
.admin-resort .lc{ font-size:11px; color:rgba(245,237,223,.55); }
.admin-resort .actions button{ background:transparent; border:none; color:rgba(245,237,223,.55); cursor:pointer; padding:4px 6px; font-size:14px; }
.admin-resort .actions button:hover{ color:var(--coral); }

.admin-edit-resort{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md); padding:24px; margin-top:16px; }
.admin-tip-row{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:6px; }
.admin-tip-row input{ width:100%; }
.admin-album-row{ display:grid; grid-template-columns:140px 1fr auto; gap:8px; margin-bottom:6px; }
.admin-awards{ display:flex; flex-wrap:wrap; gap:8px; }
.admin-award-pill{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); cursor:pointer; font-size:12px; user-select:none; }
.admin-award-pill.on{ background:var(--coral); color:#fff; border-color:var(--coral); }
.admin-offer-row{ display:grid; grid-template-columns:80px 1fr auto; gap:12px; padding:10px;
  background:rgba(255,255,255,.04); border-radius:var(--r-sm); margin-bottom:8px; align-items:center; }
.admin-offer-row img{ width:80px; height:108px; object-fit:cover; border-radius:4px; background:rgba(255,255,255,.08); }
.admin-publish{ background:rgba(249,112,102,.08); border:1px solid var(--coral); padding:24px; border-radius:var(--r-md); }
.admin-publish h3{ color:var(--coral); }

.admin-pw{ position:fixed; inset:0; z-index:550; display:none; align-items:center; justify-content:center;
  background:rgba(2,10,20,.85); backdrop-filter:blur(10px); }
.admin-pw.is-on{ display:flex; }
.admin-pw-inner{ background:var(--cream-light); padding:32px; border-radius:var(--r-md);
  width:min(420px,90vw); display:flex; flex-direction:column; gap:14px; }
.admin-pw-inner input{ padding:10px 14px; border:1px solid var(--rule); border-radius:var(--r-sm);
  font-family:var(--sans); font-size:15px; background:var(--cream); color:var(--abyss); }
.admin-pw-inner h3{ font-family:var(--serif); font-style:italic; font-size:24px; }

/* ============================================================ */
/* SOUND TOGGLE / PROGRESS                                      */
/* ============================================================ */
.read-progress{ position:fixed; top:0; left:0; height:3px; background:var(--coral);
  z-index:90; transition:width 120ms ease; width:0%; }

/* misc decoration */
.atoll-ring{ width:18px; height:14px; border-radius:50%;
  border:1.2px solid rgba(14,116,144,.4); display:inline-block; margin:2px; }
.dashed-route{ stroke:var(--teal); stroke-dasharray:5 6; stroke-width:1.4; fill:none; opacity:.5; }

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

/* small responsive fixes */
@media (max-width:540px){
  .modal-hero{ height:240px; }
  .compare-bar{ width:auto; }
}