/* ==========================================================================
   Seylocal — design system
   Light, search-first, generous. Hand-authored, no framework, no runtime.
   Contrast: every text/background pair below meets WCAG 2.2 AA, body text AAA.
   ========================================================================== */

:root{
  /* ── The flag ──────────────────────────────────────────────────────────
     The Seychelles flag is the only one in the world with five rays fanning
     from the lower-left corner: blue for sky and sea, yellow for the sun, red
     for the people, white for justice, green for the land. Those five are the
     whole palette. Every ratio below is measured, not estimated — body text
     lands at 14:1, which is AAA with room to spare.

     One rule that is load-bearing: on the yellow, only the deep blues pass.
     Green, red and link blue all fail against it, so yellow surfaces carry
     --ink and nothing else. */
  /* All five are the flag's own values, unmodified. The red was previously
     darkened to #C81E1E out of caution about white text on it — measurement
     says that was unnecessary: white on #D62828 is 5.01:1, and AA for normal
     text starts at 4.5. The flag keeps its colour. */
  --flag-blue:#003F87;
  --flag-yellow:#FCD856;
  --flag-red:#D62828;
  --flag-white:#FFFFFF;
  --flag-green:#007A3D;

  --petrol-900:#012B5B;  /* deepest sea — 14.0:1 on white */
  --petrol-800:#003F87;  /* flag blue — 10.2:1 */
  --petrol-600:#1163B8;  /* links — 6.0:1 */
  --turquoise:#00A08C;   /* lagoon, decorative and large text only */
  --coral:#D62828;       /* the flag red, one job: the enquiry action */
  --coral-hi:#B31F1F;    /* hover goes darker, so contrast rises on interaction */
  --sand:#F6F8FB;        /* cool ground, deliberately not cream */
  --sand-2:#EAF0F8;
  --sand-3:#DCE6F3;
  --ink:#012B5B;
  --ink-2:#3A5578;
  --line:#D3DFEE;
  --hairline:#BECEE4;
  --surface:#FFFFFF;
  --on-accent:#FFFFFF;
  --gold:#8A6A00;        /* deep sun — 5.6:1, eyebrows and marks, never body */
  --gold-soft:#FCD856;   /* the flag's own yellow, decorative */

  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(6,42,44,.06), 0 6px 18px -10px rgba(6,42,44,.22);
  --sh-2:0 2px 4px rgba(6,42,44,.08), 0 20px 44px -20px rgba(6,42,44,.32);
  --sh-3:0 8px 20px rgba(6,42,44,.10), 0 40px 80px -32px rgba(6,42,44,.40);

  --maxw:1240px;
  --gutter:clamp(1.1rem, .6rem + 2vw, 2rem);

  --f--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --f-0:clamp(1.02rem,.99rem + .16vw,1.1rem);
  --f-1:clamp(1.25rem,1.16rem + .38vw,1.5rem);
  --f-2:clamp(1.7rem,1.45rem + 1.1vw,2.4rem);
  --f-3:clamp(2.2rem,1.7rem + 2.2vw,3.6rem);
  --f-4:clamp(2.9rem,1.95rem + 4.2vw,5.6rem);

  /* Archivo is wide, grotesque and sunlit — it holds a headline the way the
     flag holds its bands. It carries no Cyrillic, and that is handled rather
     than patched: the browser falls back per glyph, so Russian headlines get
     Jost, which is self-hosted in Cyrillic. Cormorant survives in one role
     only, the italic accent, which is why it still earns its place. */
  --ff-display:"Archivo","Jost",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  --ff-ui:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-accent:"Cormorant Garamond","Hoefler Text",Georgia,serif;
  --track-wide:.22em;
  --ease:cubic-bezier(.22,.8,.28,1);
  --ease-slow:cubic-bezier(.16,.72,.24,1);
}

@media (prefers-color-scheme:dark){
  :root{
    /* Night over the water: the ground drops to deep sea, the flag colours
       lift to stay readable on it. Yellow needs almost no adjustment — it was
       already the light in the palette. */
    --sand:#04162E; --sand-2:#0A2547; --sand-3:#123963; --surface:#0A2547;
    --ink:#E8F0FA; --ink-2:#A9BFD8; --line:#1E3E68; --hairline:#2B5183;
    --petrol-800:#8FBEF0; --petrol-600:#A9D0F7; --coral:#FF8D8D; --coral-hi:#FFA9A9;
    --turquoise:#4FD3C2; --gold:#FCD856; --gold-soft:#8A6A00;
    --flag-blue:#2C6FC4; --flag-red:#E85252; --flag-green:#2FA86A;
    --sh-1:0 1px 2px rgba(0,0,0,.5),0 6px 18px -10px rgba(0,0,0,.7);
    --sh-2:0 2px 4px rgba(0,0,0,.5),0 20px 44px -20px rgba(0,0,0,.8);
    --sh-3:0 8px 20px rgba(0,0,0,.55),0 40px 80px -32px rgba(0,0,0,.85);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--ff-ui);
  font-size:var(--f-0);line-height:1.66;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--ff-display);margin:0 0 .42em;text-wrap:balance;
  font-variant-ligatures:common-ligatures;font-kerning:normal}
h1{font-size:var(--f-4);font-weight:700;line-height:.98;letter-spacing:-.033em}
h2{font-size:var(--f-3);font-weight:700;line-height:1.04;letter-spacing:-.028em}
h3{font-size:var(--f-2);font-weight:600;line-height:1.12;letter-spacing:-.02em}
h4{font-size:var(--f-1);font-weight:600;line-height:1.26;letter-spacing:-.012em}
/* One serif italic inside a wide grotesque headline. It is the only place the
   old face survives, and it earns the contrast precisely because it is rare. */
h1 em,h2 em,h3 em{font-family:var(--ff-accent);font-style:italic;font-weight:500;
  color:var(--gold);letter-spacing:0}
p{margin:0 0 1.05em;text-wrap:pretty;max-width:70ch}
a{color:var(--petrol-600);text-underline-offset:.2em;text-decoration-thickness:.06em}
a:hover{color:var(--petrol-800)}

/* .rule is defined once, at the foot of this file, as the flag hairline. */
.rule-mark{display:flex;align-items:center;gap:1rem;margin:2.4rem 0;color:var(--gold-soft)}
.rule-mark::before,.rule-mark::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55}
.rule-mark span{font-family:var(--ff-ui);font-size:.68rem;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--gold)}
:focus-visible{outline:3px solid var(--coral-hi);outline-offset:3px;border-radius:8px}
ul,ol{padding-inline-start:1.15em} li{margin:.28em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--turquoise);color:#04211F}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gutter)*2, var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gutter)*2, 72ch);margin-inline:auto}
.section{padding-block:clamp(2.6rem,1.6rem + 3.4vw,5rem)}
.section-sm{padding-block:clamp(1.6rem,1.1rem + 1.8vw,2.8rem)}
.grid{display:grid;gap:1.5rem}
@media (min-width:620px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:620px) and (max-width:959px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
.center{text-align:center}
.eyebrow{font-family:var(--ff-ui);font-size:.72rem;font-weight:500;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--gold);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.7rem;height:1px;background:var(--gold-soft);flex:0 0 auto}
.eyebrow.center-eb{justify-content:center}
/* The serif takes the lede. Loading Cormorant for occasional italics alone
   would not be worth its weight; giving it the introductory paragraph makes it
   earn the download and sets up the contrast against the grotesque headline. */
.lede{font-family:var(--ff-accent);font-size:calc(var(--f-1) * 1.08);font-weight:400;
  line-height:1.45;color:var(--ink-2);max-width:56ch;letter-spacing:0}
.muted{color:var(--ink-2)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:999;background:var(--petrol-900);color:#fff;
  padding:.9rem 1.3rem;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{inset-inline-start:0}

/* ---------- brand lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.logo img{width:38px;height:38px;border-radius:9px}
.logo-word{font-family:var(--ff-display);font-size:1.72rem;font-weight:400;letter-spacing:.01em;
  line-height:1;font-feature-settings:"liga" 1}
.logo-word b{font-weight:400;font-style:italic;color:var(--gold)}
.logo-sub{display:block;font-family:var(--ff-ui);font-size:.55rem;font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-2);margin-top:.3rem}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--sand) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:1rem;min-height:4.5rem}
.nav{margin-inline-start:auto;display:none}
@media (min-width:1080px){.nav{display:block}.burger{display:none}}
.nav ul{display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.55rem .8rem;border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink);font-size:.95rem;font-weight:600;transition:background .18s var(--ease)}
.nav a:hover,.nav a[aria-current]{background:var(--sand-3)}
.head-actions{margin-inline-start:auto;display:flex;gap:.5rem;align-items:center}
@media (min-width:1080px){.head-actions{margin-inline-start:0}}

details.pop{position:relative}
details.pop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  padding:.52rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);font-weight:600;font-size:.9rem}
details.pop>summary::-webkit-details-marker{display:none}
details.pop>summary:hover,details.pop[open]>summary{background:var(--sand-3)}
.pop-panel{position:absolute;inset-inline-end:0;top:calc(100% + .5rem);min-width:14rem;max-height:72vh;
  overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:.45rem;z-index:70}
.pop-panel ul{list-style:none;margin:0;padding:0}
.pop-panel a{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .7rem;
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:.94rem}
.pop-panel a:hover{background:var(--sand-3)}
.pop-panel a[aria-current]{background:var(--sand-3);font-weight:700}
.pop-panel .code{color:var(--ink-2);font-size:.8rem;font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.9rem;
  border-radius:var(--r-pill);font-family:var(--ff-ui);font-weight:500;font-size:.83rem;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease),
  background .22s var(--ease),border-color .22s var(--ease)}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:none}
.btn-primary{background:var(--coral);color:var(--on-accent);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--coral-hi);color:var(--on-accent);box-shadow:var(--sh-2)}
.btn-dark{background:var(--petrol-800);color:#fff}
.btn-dark:hover{background:var(--petrol-600);color:#fff}
.btn-quiet{background:transparent;border-color:var(--hairline);color:var(--ink)}
.btn-quiet:hover{background:var(--sand-2);border-color:var(--gold-soft);color:var(--ink)}
.btn-gold{background:transparent;border-color:var(--gold-soft);color:var(--gold)}
.btn-gold:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-sm{padding:.58rem 1.1rem;font-size:.74rem}
.btn-onhero{border-color:rgba(255,255,255,.45);color:#F7F2E8;background:transparent}
.btn-onhero:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
@media (prefers-color-scheme:dark){
  /* These were #63200F and #0F4B4E — terracotta and petrol left over from the
     old palette, hardcoded rather than tokenised, so the flag colours never
     reached them. The dark-mode --coral is a *light* red meant for text; as a
     button ground under white it would fail contrast. The action therefore
     states the flag red outright, where white reaches 5.0:1. */
  .btn-primary{background:#D62828;color:#fff}
  .btn-primary:hover{background:#B31F1F;color:#fff}
  .btn-dark{background:#003F87;color:#fff}
}

/* ---------- hero + search ---------- */
.hero{position:relative;isolation:isolate;background:var(--petrol-900);color:#EAF2FC;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;
  animation:kenburns 26s var(--ease-slow) both alternate infinite}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.2%,-1.6%,0)}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(4,30,32,.62) 0%,rgba(4,30,32,.40) 38%,rgba(4,30,32,.90) 100%)}
.hero-in{padding-block:clamp(4.5rem,2.6rem + 8vw,9rem) clamp(5rem,3rem + 8vw,8rem);max-width:48rem}
.hero h1{color:#FFFFFF;text-shadow:0 1px 30px rgba(1,43,91,.45)}
/* Flag yellow on the deep sea reads at about 10:1 — it is the brightest thing
   on the page, which is what an eyebrow over a hero should be. */
.hero .eyebrow{color:var(--flag-yellow)}
.hero .eyebrow::before{background:var(--flag-yellow)}
.hero .lede{color:#D6E5F8;max-width:46ch}
.hero-tall .hero-in{min-height:min(78vh,44rem);display:flex;flex-direction:column;justify-content:center}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.7rem 0 0}
.hero-trust li{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.25);color:#F4EFE6;padding:.36rem .82rem;
  border-radius:var(--r-pill);font-size:.83rem;font-weight:600}

/* search widget that overlaps the hero */
.searchbox{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:1.6rem;margin-top:-3.6rem;position:relative;z-index:5}
.searchbox::before{content:"";position:absolute;inset-inline:1.6rem;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.searchbox h2{font-size:1.05rem;font-family:var(--ff-ui);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 1.1rem}
.search-grid{display:grid;gap:.8rem}
@media (min-width:800px){.search-grid{grid-template-columns:1.3fr 1fr 1fr .9fr auto;align-items:end}}
.search-grid .btn{width:100%;justify-content:center}
@media (min-width:800px){.search-grid .btn{width:auto}}

/* ---------- form controls ---------- */
.field{display:grid;gap:.32rem}
.field label{font-weight:700;font-size:.85rem;color:var(--ink)}
.field .hint{font-size:.8rem;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--sand);
  border:2px solid var(--line);border-radius:var(--r-sm);padding:.7rem .8rem;width:100%;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--petrol-600);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--turquoise) 28%,transparent);outline:none}
.field textarea{min-height:7rem;resize:vertical}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--coral-hi)}
.field .err{font-size:.83rem;color:var(--coral);font-weight:600}
.req{color:var(--coral);font-weight:800}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.2rem,.8rem + 1.6vw,2.2rem);box-shadow:var(--sh-1)}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin:0 0 1.3rem}
legend{font-weight:700;font-size:.95rem;padding-inline:.4rem}
@media (min-width:640px){.row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}}
.checkline{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0}
.checkline input{width:1.15rem;height:1.15rem;margin-top:.25rem;accent-color:var(--petrol-600);flex:0 0 auto}

/* ---------- chips / filters ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:1px solid var(--hairline);
  color:var(--ink);padding:.5rem 1rem;border-radius:var(--r-pill);font-family:var(--ff-ui);
  font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.chip:hover{background:var(--sand-3);color:var(--ink)}
.chip[aria-current],.chip.is-on{background:var(--petrol-800);border-color:var(--petrol-800);color:#fff}
@media (prefers-color-scheme:dark){.chip[aria-current],.chip.is-on{color:#062A2C}}
.chip .n{font-weight:600;opacity:.72;font-variant-numeric:tabular-nums}

.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.badge-eco{background:#1E5F3A;color:#EAFBF0}
.badge-family{background:#1F4E6B;color:#E8F4FC}
.badge-honeymoon{background:#6B2440;color:#FCE9F1}
.badge-value{background:#5A4A12;color:#FBF3D8}

/* ---------- result layout ---------- */
.results{display:grid;gap:2rem}
@media (min-width:1000px){.results{grid-template-columns:270px 1fr;align-items:start}}
.rail{position:sticky;top:5.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.1rem;box-shadow:var(--sh-1)}
.rail h2{font-size:1.02rem;font-family:var(--ff-ui);letter-spacing:.02em;margin:0 0 .8rem}
.rail section{padding-block:.85rem;border-top:1px solid var(--line)}
.rail section:first-of-type{border-top:0;padding-top:0}
.rail h3{font-size:.85rem;font-family:var(--ff-ui);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-2);margin:0 0 .55rem}
@media (max-width:999px){
  .rail{position:static}
  .rail-wrap{margin-bottom:1.4rem}
}
.result-head{display:flex;flex-wrap:wrap;gap:.8rem;align-items:baseline;justify-content:space-between;
  margin-bottom:1.1rem}
.result-head .count{font-weight:700}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;box-shadow:none;
  transition:transform .3s var(--ease-slow),box-shadow .3s var(--ease-slow),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--gold-soft)}
.card-media{position:relative;aspect-ratio:4/3;background:var(--sand-3);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-slow)}
.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.card-body h3{font-size:var(--f-1);margin:0;font-weight:400}
.card-body h3 a{text-decoration:none;color:var(--ink)}
.card-body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card-body h3 a:hover{color:var(--petrol-600)}
.card-loc{font-family:var(--ff-ui);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:0;display:flex;gap:.55rem;flex-wrap:wrap}
.card-desc{font-size:.94rem;color:var(--ink-2);margin:0;line-height:1.6}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding-top:.75rem;border-top:1px solid var(--line);font-family:var(--ff-ui);font-size:.72rem;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--petrol-600)}

/* photo-pending treatment — never fake a property photo */
.pending{position:absolute;inset:0;display:grid;place-content:center;gap:.5rem;text-align:center;
  padding:1rem;background:
    repeating-linear-gradient(135deg,var(--sand-2) 0 14px,var(--sand-3) 14px 28px)}
.pending span{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2);max-width:22ch;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:.3rem .8rem}
.pending svg{width:30px;height:30px;color:var(--ink-2);margin-inline:auto}

/* wishlist toggle (progressive enhancement, works as a link without JS) */
.wish{position:absolute;top:.6rem;inset-inline-end:.6rem;z-index:2;width:2.3rem;height:2.3rem;
  display:grid;place-content:center;border-radius:var(--r-pill);border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);
  cursor:pointer;color:var(--ink);transition:background .16s var(--ease),transform .16s var(--ease)}
.wish:hover{background:var(--surface);transform:scale(1.06)}
.wish svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2}
.wish[aria-pressed="true"]{color:var(--coral)}
.wish[aria-pressed="true"] svg{fill:currentColor}

/* ---------- detail page ---------- */
.gallery{display:grid;gap:.6rem;border-radius:var(--r-lg);overflow:hidden}
@media (min-width:820px){.gallery{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
  .gallery>*:first-child{grid-row:span 2}}
.gallery figure{position:relative;margin:0;aspect-ratio:4/3;background:var(--sand-3)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;inset-inline:0;bottom:0;font-size:.72rem;padding:.35rem .6rem;
  background:linear-gradient(transparent,rgba(6,42,44,.82));color:#F2ECE1}
.detail{display:grid;gap:2rem}
@media (min-width:1000px){.detail{grid-template-columns:1fr 380px;align-items:start}}
.aside-card{position:sticky;top:5.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.3rem;box-shadow:var(--sh-2)}
@media (max-width:999px){.aside-card{position:static}}
.facts{display:grid;gap:.5rem;margin:0}
@media (min-width:520px){.facts{grid-template-columns:auto 1fr;column-gap:1.2rem}}
.facts dt{font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0}
.facts dd{margin:0}
.amenities{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
@media (min-width:620px){.amenities{grid-template-columns:repeat(2,1fr)}}
.amenities li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem}
.amenities li::before{content:"✓";color:var(--petrol-600);font-weight:800;flex:0 0 auto}

.notice{border:1px solid var(--line);border-inline-start:4px solid var(--turquoise);
  background:var(--sand-2);border-radius:var(--r);padding:1rem 1.15rem;margin:0 0 1.3rem;font-size:.94rem}
.notice strong{display:block;margin-bottom:.2rem}
.notice-warn{border-inline-start-color:var(--coral-hi)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.65rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-weight:700;font-size:1.02rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:.62rem;height:.62rem;border-right:2.5px solid var(--petrol-600);
  border-bottom:2.5px solid var(--petrol-600);transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{background:var(--sand-2)}
.faq .a{padding:0 1.2rem 1.1rem}
.faq .a p{margin:0;color:var(--ink-2)}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.85rem;color:var(--ink-2);padding-block:.9rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-inline-end:.4rem;color:var(--line)}
.crumbs a{color:var(--ink-2)}

/* ---------- founder ---------- */
.founder{display:grid;gap:1.8rem;align-items:center}
@media (min-width:860px){.founder{grid-template-columns:300px 1fr;gap:2.6rem}}
.founder-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/5;
  background:var(--sand-3);position:relative}
.sig{font-family:var(--ff-display);font-size:1.25rem;color:var(--petrol-600);margin-top:.8rem}

/* ---------- footer ---------- */
.foot{background:var(--petrol-900);color:#D3CFC5;margin-top:3rem;padding-block:3.2rem 2rem}
.foot a{color:#E9E2D5}
.foot h2{font-size:.68rem;font-family:var(--ff-ui);font-weight:500;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:#C6A96B;margin:0 0 1.1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.93rem}
.foot-grid{display:grid;gap:2rem}
@media (min-width:800px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot .logo{color:#F4EFE6}
.foot .logo-sub{color:#9FB3B2}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.4rem;padding-top:1.4rem;
  font-size:.85rem;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;justify-content:space-between;color:#ADA79B}

/* ---------- sticky mobile action bar ---------- */
.sticky-bar{position:fixed;inset-inline:0;bottom:0;z-index:80;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px -18px rgba(6,42,44,.6);padding:.6rem 0}
.sticky-bar .wrap{display:flex;align-items:center;gap:.9rem;justify-content:space-between}
.sticky-bar p{margin:0;font-size:.85rem;font-weight:600;color:var(--ink-2)}
@media (min-width:1080px){.sticky-bar{display:none}}
body{padding-bottom:4.6rem}
@media (min-width:1080px){body{padding-bottom:0}}

/* ---------- misc ---------- */
.prose h2{margin-top:2.1em} .prose h2:first-child{margin-top:0}
.split{display:grid;gap:2rem;align-items:center}
@media (min-width:920px){.split{grid-template-columns:1.05fr .95fr;gap:3rem}}
.media-round{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.error-page{text-align:center;padding-block:clamp(3rem,2rem + 6vw,7rem)}
.error-code{font-family:var(--ff-display);font-size:clamp(4rem,2rem + 12vw,9rem);line-height:1;
  color:var(--petrol-600);margin:0 0 .3rem}
.fade{animation:fade .65s var(--ease) both}
.fade-2{animation:fade .65s .09s var(--ease) both}
.fade-3{animation:fade .65s .18s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

@media print{.head,.sticky-bar,.foot,.btn,.rail{display:none!important}body{padding:0;background:#fff;color:#000}}

/* ── Scripts beyond Latin and Cyrillic ───────────────────────────────────
   Arabic and Chinese use the reader's system fonts on purpose. A subsetted
   CJK webfont is several megabytes even after trimming; shipping one would
   cost the Chinese market the page speed it is being built for. Both stacks
   name the faces that are actually installed on Windows, macOS, Android and
   the common Linux desktops, in that order. */
html[lang="ar"]{
  --ff-display:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic","Times New Roman",serif;
  --ff-ui:"Noto Sans Arabic","Segoe UI","Geeza Pro",Tahoma,Arial,sans-serif;
  /* Arabic is cursive: letter-spacing pulls the joins apart and makes the
     script unreadable. Every tracked element here resets to normal. */
  --track-wide:normal;
}
html[lang="ar"] .rule-mark span,
html[lang="ar"] .eyebrow,
html[lang="ar"] .logo-sub,
html[lang="ar"] .logo-word,
html[lang="ar"] .btn,
html[lang="ar"] .chip,
html[lang="ar"] .searchbox h2,
html[lang="ar"] .rail h2,
html[lang="ar"] .rail h3,
html[lang="ar"] .card-loc,
html[lang="ar"] .count,
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4{letter-spacing:normal}

html[lang="zh-Hans"]{
  --ff-display:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  --ff-ui:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --track-wide:.06em;
}
/* Chinese sets no word spaces, so justified text and hyphenation do nothing
   useful, and the display face runs heavy at the sizes used for Latin. */
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3{
  letter-spacing:normal;font-weight:600;text-wrap:initial}
html[lang="zh-Hans"] .lede{font-weight:400}

/* ── Right to left ───────────────────────────────────────────────────────
   The layout is built on flexbox, grid and logical properties, so <html
   dir="rtl"> carries almost everything by itself. These are the leftovers. */
[dir="rtl"] .card-loc,
[dir="rtl"] .facts{text-align:start}
[dir="rtl"] .faq summary::after{transform:rotate(135deg)}
[dir="rtl"] .faq details[open] summary::after{transform:rotate(-45deg)}
[dir="rtl"] .crumbs li + li::before{content:"‹"}

/* ══ The five rays ═══════════════════════════════════════════════════════
   The signature. The Seychelles flag fans five bands out of its lower-left
   corner — blue, yellow, red, white, green — and no other national flag does
   this. Here it is not a logo dropped onto the page but a structural device:
   over the hero photograph it behaves like light falling through water, and
   at section boundaries it thins down to a five-colour hairline.

   Built from one conic-gradient rather than an SVG so it costs no request and
   scales to any hero. Origin 0% 100% is the lower-left corner; 0deg points
   north and 90deg east, so the visible quadrant is exactly the flag's fan. */
.rays{position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 0deg at 0% 100%,
    var(--flag-blue)   0deg 18deg,
    var(--flag-yellow) 18deg 36deg,
    var(--flag-red)    36deg 54deg,
    var(--flag-white)  54deg 72deg,
    var(--flag-green)  72deg 90deg,
    transparent        90deg 360deg);
  mix-blend-mode:soft-light;opacity:.72;
  -webkit-mask-image:linear-gradient(to top right, #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  mask-image:linear-gradient(to top right, #000 0%, rgba(0,0,0,.35) 45%, transparent 72%)}
/* The photograph has to survive the tint, so the fan fades out before it
   reaches the headline in the upper right. */
/* The animation moves the fan; it never decides whether the fan is there.
   Opacity stays on the base rule, so if the animation is dropped, paused or
   never composited, the rays are still visible. An earlier version keyframed
   opacity from 0 and the fan vanished whenever the animation did not run. */
@media (prefers-reduced-motion:no-preference){
  .rays{animation:rays-in 1.1s var(--ease-slow) both;transform-origin:0 100%}
  @keyframes rays-in{from{transform:rotate(-6deg) scale(1.06)}
                     to{transform:none}}
}

/* The same five bands, flattened, wherever the page needs a divider. The
   white band would vanish on a white ground, so a hairline runs beneath the
   whole rule and gives it an edge to sit on. */
.rule{border:0;height:4px;border-bottom:1px solid var(--hairline);
  background:linear-gradient(90deg,
    var(--flag-blue)   0 20%,
    var(--flag-yellow) 20% 40%,
    var(--flag-red)    40% 60%,
    var(--flag-white)  60% 80%,
    var(--flag-green)  80% 100%);
  margin:clamp(2rem,1.4rem + 2vw,3.4rem) auto;max-width:34rem;border-radius:2px}

/* Section eyebrows pick up one band each instead of a single gold dash, so the
   colour tells you where you are in the page rather than merely decorating. */
.eyebrow::before{background:var(--gold-soft);height:3px;border-radius:2px}
.section:nth-of-type(4n+1) .eyebrow::before{background:var(--flag-blue)}
.section:nth-of-type(4n+2) .eyebrow::before{background:var(--flag-yellow)}
.section:nth-of-type(4n+3) .eyebrow::before{background:var(--flag-green)}
.section:nth-of-type(4n+4) .eyebrow::before{background:var(--flag-red)}

/* The fan lives inside .hero-bg, above the photograph and below the scrim that
   .hero::after already paints. No extra positioning context is needed — the
   hero has had one since the first version. */

/* ══ Comparison pages ════════════════════════════════════════════════════
   Two columns of hard numbers, then the case for each side. The Seychelles
   column carries the flag blue so the reader never has to check which side
   they are reading; the other destination stays neutral, because tilting it
   visually would undermine the point of writing an honest comparison. */
.cmp-table-wrap{overflow-x:auto;margin:0 0 .8rem}
.cmp-table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:30rem}
.cmp-table thead th{font-family:var(--ff-display);font-weight:600;font-size:1.02rem;
  text-align:start;padding:.55rem .9rem;border-bottom:2px solid var(--line);color:var(--ink)}
.cmp-table thead th:first-of-type{color:var(--flag-blue);
  border-bottom-color:var(--flag-blue)}
.cmp-table th[scope="row"]{font-family:var(--ff-ui);font-weight:500;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);
  text-align:start;padding:.7rem .9rem .7rem 0;white-space:nowrap}
.cmp-table td{padding:.7rem .9rem;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.cmp-table tbody tr:last-child td,
.cmp-table tbody tr:last-child th{border-bottom:0}
[dir="rtl"] .cmp-table th[scope="row"]{padding:.7rem 0 .7rem .9rem}
/* Arabic and Chinese set no tabular Latin numerals to align, and the uppercase
   transform does nothing useful in either script. */
html[lang="ar"] .cmp-table th[scope="row"],
html[lang="zh-Hans"] .cmp-table th[scope="row"]{text-transform:none;letter-spacing:normal}

.cmp-note{font-size:.82rem;margin:0}

/* The verdict is the passage most likely to be quoted, so it is set apart and
   given the flag yellow — the one surface in the palette that stops the eye. */
.cmp-verdict{background:var(--flag-yellow);color:var(--petrol-900);
  border-radius:var(--r);padding:1.3rem 1.5rem;margin-top:2.2rem}
.cmp-verdict .eyebrow{color:var(--petrol-900);margin-bottom:.5rem}
.cmp-verdict .eyebrow::before{background:var(--petrol-900)}
.cmp-verdict p:last-child{margin:0;font-family:var(--ff-display);font-weight:600;
  font-size:var(--f-1);line-height:1.35;letter-spacing:-.015em}
@media (prefers-color-scheme:dark){
  /* The yellow stays; only the ink needs to keep its 10:1 against it. */
  .cmp-verdict{background:var(--flag-yellow);color:#012B5B}
  .cmp-verdict .eyebrow,.cmp-verdict .eyebrow::before{color:#012B5B;background:#012B5B}
  .cmp-verdict .eyebrow{background:none}
}

/* ── Review stamp on health pages ────────────────────────────────────────
   Deliberately plain and slightly cool: this block is a disclosure, not a
   feature. It sits after the content because a reader wants the answer first
   and the caveat second — but it is never collapsed or hidden, because a
   caveat you have to open is a caveat you did not give. */
.asof{border:1px solid var(--line);border-inline-start:4px solid var(--flag-blue);
  border-radius:var(--r-sm);background:var(--sand-2);padding:1.1rem 1.3rem;
  margin:2rem 0 0;font-size:.92rem}
.asof p{margin:0 0 .55rem;max-width:none}
.asof p:last-child{margin:0}
.asof time{font-variant-numeric:tabular-nums}

/* ── Closing call to action ──────────────────────────────────────────────
   Centred, but the lede keeps a readable measure instead of stretching the
   full card width — centred text past about 60 characters is where "elegant"
   turns into "hard to read". The proof line sits between the argument and the
   button because that is the moment the objection appears. */
.cta-close{text-align:center}
.cta-close h2{margin-bottom:.35em}
.cta-close .lede{margin-inline:auto;max-width:52ch}
.cta-proof{margin:1.1rem auto 0;max-width:46ch;font-size:.95rem;color:var(--ink-2)}
.cta-proof::before{content:"";display:block;width:2rem;height:2px;
  background:var(--flag-yellow);margin:0 auto 1rem}
[dir="rtl"] .cta-close{text-align:center}

/* ══ Interaction ═════════════════════════════════════════════════════════
   The brief asked for maximum effect. What follows is deliberately less than
   that, for one reason: on a page whose whole argument is "we do not oversell
   you", a carnival of animation contradicts the copy. Boldness is spent in one
   place — the primary action — and everything else stays quiet enough that the
   one bold thing reads as intentional.

   Every rule here is already covered by the global prefers-reduced-motion
   block at the top of this file, which flattens all durations to 0.001ms. */

/* ── The primary action ──────────────────────────────────────────────────
   One signature: light crosses the button, the way sun crosses water. It runs
   once per hover, not on a loop, so it reads as a response rather than as
   decoration demanding attention. */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,
    transparent 35%,
    color-mix(in srgb, var(--flag-yellow) 55%, transparent) 50%,
    transparent 65%);
  transform:translateX(-120%);
  transition:transform .62s var(--ease-slow);
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after{transform:translateX(120%)}

/* Press should feel like press: the lift collapses and the shadow tucks in. */
.btn{will-change:transform}
.btn:active{transform:translateY(1px) !important;box-shadow:var(--sh-1)}

/* ── Cards ───────────────────────────────────────────────────────────────
   The heading already carries the link. This makes the whole card the target
   without nesting anchors, which keeps one link per card for a screen reader
   and gives a mouse the full rectangle. */
.card-body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card-body h3 a{text-decoration:none;color:inherit}
.card:hover .card-body h3 a,
.card:focus-within .card-body h3 a{color:var(--petrol-600);
  text-decoration:underline;text-underline-offset:.18em}
.card:focus-within{box-shadow:var(--sh-2);border-color:var(--flag-blue)}

/* The arrow appears on approach instead of sitting there permanently. */
.card-foot span{display:inline-flex;align-items:center;gap:.4rem}
.card-foot span::after{content:"→";transform:translateX(-.25rem);opacity:0;
  transition:transform .24s var(--ease),opacity .24s var(--ease)}
.card:hover .card-foot span::after,
.card:focus-within .card-foot span::after{transform:translateX(0);opacity:1}
[dir="rtl"] .card-foot span::after{content:"←"}

/* ── Chips ───────────────────────────────────────────────────────────────
   Small targets, so the feedback is colour and a hairline lift, nothing more. */
.chip{transition:background .2s var(--ease),border-color .2s var(--ease),
  color .2s var(--ease),transform .2s var(--ease)}
.chip:hover{transform:translateY(-1px);border-color:var(--flag-blue)}

/* ── Facts tables ────────────────────────────────────────────────────────
   A row highlight makes long fact lists scannable on a wide screen, where the
   eye otherwise loses the line between label and value. */
.facts dt,.facts dd{transition:background .18s var(--ease)}
.facts:hover dt,.facts:hover dd{background:transparent}
.facts dt:hover,.facts dt:hover + dd,
.facts dd:hover,.facts dt:has(+ dd:hover){background:var(--sand-2)}

/* ── Links in running text ───────────────────────────────────────────────
   The underline grows from the left rather than switching on, which reads as
   a response to the pointer instead of a state change. */
.prose p a,.prose li a{
  background-image:linear-gradient(var(--flag-blue),var(--flag-blue));
  background-size:0% .09em;background-position:0 100%;
  background-repeat:no-repeat;text-decoration:none;
  transition:background-size .28s var(--ease);
  padding-bottom:.06em;
}
.prose p a:hover,.prose li a:hover,
.prose p a:focus-visible,.prose li a:focus-visible{background-size:100% .09em}
[dir="rtl"] .prose p a{background-position:100% 100%}