@charset "utf-8";
/* ==========================================================================
   Sea Horizon Hotel — "Crisp Caribbean"
   Shared stylesheet for every page. Pure CSS, no build step.
   1. Tokens          5. Hero / page headers     9.  Gallery + lightbox
   2. Base            6. Facts strip             10. Contact
   3. Buttons         7. Sections / rooms        11. Footer + book bar
   4. Header / nav    8. Amenities               12. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --coral:#F4622A;
  --coral-dark:#D94E1B;
  --coral-soft:#FFE7DC;
  --coral-light:#FFC7AE;
  /* text-only coral: 6.76:1 on white, 6.33:1 on --sand. Use for small type;
     --coral stays the fill/border colour. */
  --coral-text:#9E3C10;

  --navy:#0C2B49;
  --navy-deep:#071D33;
  --navy-black:#04121F;
  --ink:#3E5670;

  --sea:#0E86B0;
  --sea-deep:#0A5E7C;
  --sea-soft:#E3F4FA;

  --sand:#FBF7F1;
  --sand-2:#F4EDE4;
  --white:#fff;
  --line:#E3DED6;
  --line-soft:#EFE9E1;

  --shadow-s:0 2px 8px rgba(12,43,73,.06);
  --shadow-m:0 12px 32px -14px rgba(12,43,73,.28);
  --shadow-l:0 26px 60px -28px rgba(12,43,73,.42);

  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --pill:999px;

  --nav-h:64px;
  --pad:20px;
  --maxw:1180px;

  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0;
}
h1 em,h2 em{font-style:italic;font-weight:400}
ul{margin:0;padding:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* fixed, not absolute: body is static, so an absolutely positioned skip link is
   parked at the top of the document and focusing it from a scrolled position
   sends focus off-screen */
.skip{position:fixed;left:-9999px;top:0}
.skip:focus{
  left:14px;top:10px;z-index:120;background:#fff;color:var(--navy);
  padding:11px 16px;border:2px solid var(--coral);border-radius:var(--r-s);
  font-weight:600;text-decoration:none;
}
/* --coral-dark clears 3:1 on every surface the ring lands on (white, --sand,
   --sand-2, --navy-deep); plain --coral does not. */
:focus-visible{outline:3px solid var(--coral-dark);outline-offset:2px;border-radius:4px}

.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.75rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--coral-text);
  display:block;margin-bottom:12px;
}

/* anchor targets clear the sticky header: sections, the room <article>s on
   rooms.html and the skip-link's <main id="main"> */
section,article[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 10px)}
.sec{padding:56px 0}
.sec-sand{background:var(--sand)}
.sec-head{max-width:640px;margin-bottom:30px}
.sec-head h2{font-size:clamp(1.8rem,5.4vw,2.6rem)}
.sec-head p{margin-top:14px;color:var(--ink);font-size:1.03rem}

/* ---------- 3. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.82em 1.5em;border-radius:var(--pill);
  min-height:46px;text-decoration:none;border:2px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease;
  white-space:nowrap;cursor:pointer;
}
/* deepened from --coral so white label text clears WCAG AA (5.06:1 / 7.0:1 hover);
   --coral itself is still the fill colour everywhere else. */
.btn-primary{background:#C2450F;color:#fff;box-shadow:0 8px 20px -8px rgba(194,69,15,.7)}
.btn-primary:hover{background:#A33A0C;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.72)}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-sm{font-size:.92rem;padding:.6em 1.15em;min-height:42px}

/* min-height keeps this the same 44px tap target as the pill it sits beside */
.arrowlink{
  display:inline-flex;align-items:center;gap:.45em;text-decoration:none;
  font-weight:600;font-size:.95rem;color:var(--coral-text);
  min-height:44px;padding:10px 0 4px;
}
.arrowlink span{border-bottom:1px solid rgba(158,60,16,.45);padding-bottom:2px}
.arrowlink svg{width:16px;height:16px;transition:transform .15s ease}
/* #8A3309 = 8.2:1 on white; plain --coral is only 3.17:1 at this size */
.arrowlink:hover{color:#8A3309}
.arrowlink:hover svg{transform:translateX(3px)}

/* ---------- 4. Header / nav ---------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav.is-scrolled{box-shadow:0 6px 20px -12px rgba(12,43,73,.5)}
.nav-in{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* logo.png carries ~11% transparent padding on its left edge; pull it back so
   the wordmark sits on the same left grid line as the rest of the page */
/* 42px on a phone: the script wordmark is only the bottom ~20% of logo.png, so
   at 34px it rendered ~7px tall and was illegible */
.brand img{height:42px;width:auto;margin-inline-start:-10px}
/* the auto margin lives on the <nav> landmark, which is the flex item here */
.nav-in>nav{display:none;margin-left:auto}
.nav-links{
  display:flex;align-items:center;gap:26px;list-style:none;
}
.nav-links a{
  display:inline-block;font-weight:600;font-size:.95rem;text-decoration:none;
  color:var(--navy);padding:11px 0;border-bottom:2px solid transparent;
}
/* --coral-text, not --coral-dark: 15.2px semibold is not large text, and
   aria-current is a permanent state. The border keeps --coral (3:1 is enough
   for a non-text indicator). */
.nav-links a:hover{color:var(--coral-text);border-bottom-color:var(--coral)}
.nav-links a[aria-current="page"]{color:var(--coral-text);border-bottom-color:var(--coral)}
.nav-book{display:none;margin-left:18px}
.nav-toggle{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;width:auto;min-height:44px;padding:0 12px;background:none;
  border:1px solid var(--line);border-radius:var(--pill);cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--navy);
}
.nav-toggle svg{width:20px;height:20px;stroke:var(--navy);fill:none;stroke-width:1.9;stroke-linecap:round}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
/* absolute, not in flow: an in-flow panel added ~330px to the sticky header's
   height and pushed the document down on open. iOS Safari has no scroll
   anchoring, so the page behind the menu jumped. .nav is position:sticky, so
   it is the containing block. */
.nav-panel{
  display:none;position:absolute;left:0;right:0;top:100%;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  border-top:1px solid var(--line);background:#fff;
  box-shadow:0 18px 30px -22px rgba(12,43,73,.6);
}
.nav-panel.is-open{display:block}
.nav-panel ul{list-style:none;padding:6px 0 14px}
.nav-panel ul a{
  display:block;padding:13px 2px;text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--line-soft);color:var(--navy);
}
.nav-panel ul a[aria-current="page"]{color:var(--coral-text)}
.nav-panel .btn{margin-top:14px;width:100%}

/* ---------- 5. Hero / page headers --------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* deep enough that the eyebrow, h1 and sub-head all clear AA over the
     blown-out white facade in hero-3.jpg */
  background:linear-gradient(175deg,rgba(6,24,43,.74) 0%,rgba(6,24,43,.66) 34%,rgba(6,24,43,.92) 100%);
}
.hero-in{padding:56px 0 52px;color:#fff;max-width:830px}
/* #FFD9C6 rather than --coral-light: 12px type over the photo needs 4.5:1 and
   --coral-light measured 4.43:1 against the lightest part of the scrim */
.hero .eyebrow{color:#FFD9C6}
.hero h1{font-size:clamp(2.2rem,7.6vw,4.05rem);color:#fff;text-shadow:0 2px 26px rgba(6,24,43,.5)}
.hero h1 em{color:var(--coral-light);white-space:nowrap}
.hero-sub{
  margin-top:18px;font-size:clamp(1rem,2.4vw,1.18rem);color:rgba(255,255,255,.95);
  max-width:33em;text-shadow:0 1px 16px rgba(6,24,43,.65);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-note{
  margin-top:20px;font-size:.92rem;color:rgba(255,255,255,.88);font-weight:500;
  text-shadow:0 1px 12px rgba(6,24,43,.7);
}
/* underline rather than border-bottom: the link carries block padding for the
   tap target, and a border would float 9px below the text */
.hero-note a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.hero-note a:hover{text-decoration-color:#fff}

/* compact header band for interior pages */
.phead{background:var(--navy-deep);color:#fff;padding:40px 0 42px}
.phead .eyebrow{color:var(--coral-light)}
.phead h1{font-size:clamp(1.95rem,6.4vw,3.1rem);color:#fff}
.phead p{margin-top:14px;color:rgba(255,255,255,.82);max-width:46em;font-size:1.02rem}
.crumbs{font-size:.82rem;color:rgba(255,255,255,.62);margin-bottom:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li+li::before{content:"\203A";margin-right:6px;opacity:.6}
.crumbs a{color:rgba(255,255,255,.82);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
.crumbs a:hover{color:#fff;text-decoration-color:#fff}

/* ---------- 6. Facts strip ----------------------------------------------- */
.facts{background:var(--navy);color:#fff}
.facts ul{list-style:none;padding:8px 0 10px;display:grid}
.facts li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.facts li:last-child{border-bottom:0}
.fact-n{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.2}
.fact-l{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.78);text-align:right;
}

/* ---------- 7. Sections: intro, rooms ------------------------------------ */
.intro-grid{display:grid;gap:28px}
.intro-copy p+p{margin-top:16px}
.intro-copy p{color:var(--ink);font-size:1.03rem}
.intro-list{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
/* 6px, not 13px: the inline links inside these rows carry 9px of block padding
   of their own (see the tap-target rule below), so the row rhythm is unchanged */
.intro-list li{
  display:grid;grid-template-columns:1fr;gap:2px;padding:6px 0;
  border-bottom:1px solid var(--line);
}
.intro-list b{
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--sea-deep);
}
.intro-list span{color:var(--ink);font-size:.98rem}
/* bare inline links that are primary actions (tap to call, tap to message, the
   booking link) — block padding takes them from ~25px to ~43px tall */
.intro-list span a,.hero-note a,.foot-addr a{display:inline-block;padding-block:9px}
.crumbs a{display:inline-block;padding-block:6px}
.intro-copy .sec-head{margin-bottom:22px}
.intro-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
figure{margin:0}
.fig img{border-radius:var(--r-l);box-shadow:var(--shadow-m);width:100%}
.fig figcaption{
  margin-top:12px;font-family:var(--serif);font-style:italic;font-size:.95rem;
  color:var(--ink);
}

/* room cards (home) */
.rooms{display:grid;gap:22px;grid-template-columns:1fr}
.room{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;overflow:hidden;
}
.room-img{aspect-ratio:16/10;width:100%;object-fit:cover}
.room-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;gap:11px}
.room-no{
  display:flex;align-items:center;gap:10px;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;color:var(--coral-text);
}
.room-no::after{content:"";height:1px;flex:1;background:var(--line)}
.room h3{font-size:1.32rem}
.room p{color:var(--ink);font-size:.95rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.chips li{
  background:var(--sea-soft);color:var(--sea-deep);font-size:.76rem;font-weight:600;
  padding:5px 11px;border-radius:var(--pill);
}
.room-act{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* full room rows (rooms.html) */
.rm{
  display:grid;gap:22px;grid-template-columns:1fr;
  padding:38px 0;border-top:1px solid var(--line);
}
.rm:first-of-type{border-top:0;padding-top:12px}
.rm-media{display:grid;gap:10px}
.rm-media img{border-radius:var(--r-m);box-shadow:var(--shadow-m);width:100%}
.rm-extra{display:flex;flex-wrap:wrap;gap:10px}
/* framed identically to .rm-media img so the two stacked penthouse photos
   read as one component */
.rm-extra img{
  flex:1 1 150px;min-width:0;width:100%;border-radius:var(--r-m);
  box-shadow:var(--shadow-m);aspect-ratio:16/10;object-fit:cover;
}
.rm-no{
  display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;color:var(--coral-text);margin-bottom:10px;
}
.rm-no::after{content:"";height:1px;flex:1;background:var(--line)}
.rm-body h2{font-size:clamp(1.6rem,4.6vw,2.1rem)}
.rm-body>p{margin-top:14px;color:var(--ink)}
.rm-specs{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.rm-specs li{
  padding:9px 0 9px 26px;border-bottom:1px solid var(--line-soft);
  font-size:.96rem;position:relative;
}
.rm-specs li::before{
  content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--coral-soft);border:2px solid var(--coral);
}
.rm-base{margin-top:14px;font-size:.88rem;color:var(--ink)}
.rm-act{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 8. Amenities -------------------------------------------------- */
.amen{list-style:none;display:grid;gap:12px;grid-template-columns:1fr}
.amen li{
  display:flex;gap:13px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-s);padding:13px 14px;
  min-width:0;
}
.amen .ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--coral-soft);
  display:grid;place-items:center;
}
.amen svg{width:20px;height:20px;stroke:var(--coral-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.amen .a-name{display:block;font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.3}
.amen .a-note{display:block;font-size:.85rem;color:var(--ink);line-height:1.5;margin-top:2px}
.amen-note{margin-top:18px;font-size:.88rem;color:var(--ink)}

/* ---------- 9. Gallery + lightbox ---------------------------------------- */
/* 480/307 is the exact thumbnail ratio (1.5635, not 1.5), so object-fit:cover
   has nothing to crop */
.tile{
  display:block;overflow:hidden;border-radius:var(--r-s);line-height:0;
  aspect-ratio:480/307;background:var(--sand-2);
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile:hover img{transform:scale(1.05)}
.galh{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
/* flex, not grid: the gallery sections hold 3, 5, 6 or 8 photos, and a grid
   left the 8-photo sections with a hole in the last row. Tile sizes are the
   same; only a short final row centres. */
.gal{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gal>.tile{flex:0 1 calc((100% - 10px)/2)}
/* the home teaser shows six photos on a phone, eight from tablet up */
.galh > :nth-child(n+7){display:none}
.gal-more{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.catnav{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 30px;
}
.catnav a{
  display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  font-size:.87rem;font-weight:600;padding:8px 16px;border-radius:var(--pill);
  background:var(--sand-2);color:var(--navy);border:1px solid var(--line);
}
.catnav a:hover{background:var(--coral-soft);border-color:var(--coral-light)}
.gal-sec{padding-top:8px;margin-bottom:44px}
.gal-sec h2{font-size:clamp(1.4rem,4.2vw,1.9rem)}
.gal-sec .cap{margin-top:8px;color:var(--ink);font-size:.95rem;margin-bottom:20px}

.lb{
  position:fixed;inset:0;z-index:200;background:rgba(4,18,31,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 14px 22px;
}
.lb[hidden]{display:none}
.lb img{
  max-width:min(1200px,94vw);max-height:76vh;width:auto;border-radius:var(--r-s);
  box-shadow:0 30px 80px -30px #000;
}
.lb-cap{color:rgba(255,255,255,.88);font-size:.9rem;margin-top:14px;text-align:center;max-width:44em}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--coral);border-color:var(--coral)}
.lb-close{top:12px;right:12px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lb svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 10. Contact --------------------------------------------------- */
.contact{background:var(--navy-deep);color:#fff}
.contact .sec-head h2{color:#fff}
.contact .sec-head .eyebrow{color:var(--coral-light)}
.contact .sec-head p{color:rgba(255,255,255,.8)}
.contact-grid{display:grid;gap:24px}
.cards{display:grid;gap:12px}
.ccard{
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-m);padding:15px 17px;min-width:0;
  transition:background .15s ease,border-color .15s ease;
}
a.ccard:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42)}
.ccard>span:last-child{min-width:0}
.ccard .ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--coral);display:grid;place-items:center}
.ccard svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ccard .k{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-light);font-weight:600}
.ccard .v{display:block;font-weight:600;font-size:1.02rem;margin-top:2px;overflow-wrap:anywhere}
.contact-side{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-l);padding:24px;
}
.contact-side h3{font-size:1.4rem;color:#fff}
.contact-side p{margin-top:12px;color:rgba(255,255,255,.82);font-size:.97rem}
.contact-side .btn{margin-top:18px;width:100%}
.contact-side .btn+.btn{margin-top:10px}

.mapwrap{
  margin-top:0;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);
  background:var(--sand-2);line-height:0;
}
.mapwrap iframe{width:100%;height:340px;border:0;display:block}

/* text pages (privacy / terms / 404) */
/* .prose is used together with .wrap: the band stays on the site grid and the
   measure is constrained on the children, so text lines up with the header. */
.prose>*{max-width:46em}
.prose h2{font-size:1.4rem;margin-top:34px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink);font-size:1rem}
.prose p{margin-top:14px}
.prose ul{margin-top:12px;padding-left:22px;list-style:disc}
.prose li{margin-top:7px}
/* the 404 page's link list is a pill row, not a bulleted list */
.prose .catnav{padding-left:0;list-style:none;margin-top:18px}
.prose .catnav li{margin-top:0}
/* :not(.btn) so button anchors keep their own .btn-primary / .btn-outline colours */
.prose a:not(.btn){color:var(--sea-deep)}
.prose .updated{font-size:.88rem;color:var(--ink);margin-top:26px;font-style:italic}

/* ---------- 11. Footer + sticky book bar ---------------------------------- */
.foot{background:var(--navy-black);color:rgba(255,255,255,.74);padding:38px 0 30px;font-size:.9rem}
.foot-in{display:grid;gap:24px}
.foot-brand{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:#fff}
.foot-addr{margin-top:8px;max-width:30em}
.foot a{color:rgba(255,255,255,.84)}
/* 10px block padding takes the targets to 44px; the 2px row gap keeps the
   visual spacing between wrapped rows unchanged */
.foot nav{display:flex;flex-wrap:wrap;gap:2px 18px}
.foot nav a{text-decoration:none;font-weight:600;padding:10px 0}
.foot nav a:hover{color:var(--coral)}
.socials{display:flex;gap:10px}
.socials a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
}
.socials a:hover{background:var(--coral);border-color:var(--coral)}
/* Hidden, not dimmed: three unclickable grey circles read as a broken site.
   The markup stays in place and the icons reappear on their own the moment a
   real URL replaces href="#" — delete this rule (and the tabindex/aria-hidden
   in the markup) when the real Facebook / Instagram / TripAdvisor URLs exist. */
.socials a[href="#"]{display:none}
.socials svg{width:18px;height:18px;fill:#fff}
.foot-legal{
  border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.82rem;
  grid-column:1/-1;
}
.foot-legal a{text-decoration:none}
.foot-legal a:hover{color:var(--coral)}

.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -10px rgba(12,43,73,.5);
}
.bookbar .btn{flex:1;min-width:0;padding:.78em 1em;font-size:.95rem}
.bookbar .btn-outline{flex:0 0 auto;padding:.78em 1.05em}

/* ---------- 12. Responsive ------------------------------------------------ */
@media (min-width:560px){
  .facts ul{grid-template-columns:repeat(2,1fr);gap:0 26px;padding:14px 0}
  .facts li{
    display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .facts li:nth-last-child(-n+2){border-bottom:0}
  .fact-l{text-align:left;display:block;margin-top:3px}
  .amen{grid-template-columns:repeat(2,1fr)}
  .gal>.tile{flex:0 1 calc((100% - 20px)/3)}
}
@media (min-width:700px){
  .galh{grid-template-columns:repeat(4,1fr);gap:14px}
  .galh > :nth-child(n+7){display:block}
}
@media (min-width:620px){
  .rooms{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
  :root{--pad:32px;--nav-h:72px}
  .nav-toggle{display:none}
  .nav-panel{display:none!important}
  .nav-in>nav{display:block}
  .nav-book{display:inline-flex}
  .brand img{height:40px}
  body{padding-bottom:0}
  .bookbar{display:none}
  .hero-in{padding:104px 0 92px}
  .phead{padding:60px 0 64px}
  .sec{padding:84px 0}
  .sec-head{margin-bottom:36px}
  .facts ul{grid-template-columns:repeat(4,1fr);gap:0 30px;padding:22px 0}
  .facts li{border-bottom:0;position:relative;padding:16px 0 16px 0}
  .facts li+li{padding-left:30px;margin-left:-30px}
  .facts li+li::before{
    content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;
    background:rgba(255,255,255,.2);
  }
  .intro-grid{grid-template-columns:1.02fr .98fr;align-items:center;gap:52px}
  /* contact.html: the right column is a hard-edged map box, so centring it
     lined it up with nothing. Top-align it with the eyebrow instead. */
  .intro-grid--top{align-items:start}
  .intro-list li{grid-template-columns:130px 1fr;gap:16px;align-items:baseline}
  .intro-list b{padding-top:2px}
  .rooms{grid-template-columns:repeat(3,1fr);gap:24px}
  .amen{grid-template-columns:repeat(4,1fr);gap:14px}
  /* 3 across: 4 columns always left a half-empty trailing row */
  .gal{gap:14px}
  .gal>.tile{flex:0 1 calc((100% - 28px)/3)}
  .contact-grid{grid-template-columns:1.12fr .88fr;gap:34px;align-items:start}
  /* one column: at ~296px the address wrapped to three lines and dragged the
     whole card column out of alignment with the panel beside it */
  .cards{grid-template-columns:1fr}
  /* contact.html lists the details once, in the .intro-list above, so this
     band holds the booking panel alone: full width, buttons side by side */
  .contact-grid--solo{grid-template-columns:1fr}
  .contact-grid--solo .contact-side{padding:28px 32px}
  .contact-grid--solo .contact-side p{max-width:54em}
  .contact-grid--solo .contact-side .btn{width:auto;min-width:230px;margin-top:20px}
  .contact-grid--solo .contact-side .btn+.btn{margin-top:20px;margin-left:12px}
  /* nav column wide enough for all six links on one row */
  .foot-in{grid-template-columns:1.1fr 1.25fr auto;align-items:start;gap:34px}
  .mapwrap iframe{height:420px}
  /* equal columns: with 1.02fr/.98fr plus the even-row order swap the photo
     landed in a different column each row, so every photo was a different
     width from the one above it */
  .rm{grid-template-columns:1fr 1fr;gap:46px;align-items:stretch;padding:52px 0}
  .rm:nth-of-type(even) .rm-media{order:2}
  /* single-photo rows fill the row height instead of leaving a hole under the
     photo; the penthouse row has a second image in .rm-extra and is untouched */
  .rm-media{align-self:stretch}
  .rm-media>img:only-child{height:100%;max-height:430px;object-fit:cover;object-position:center}
}
/* hero scrim: on a phone the headline runs the full width, so the vertical
   scrim above stays. From 860px the text sits in the left 830px of a 1116px
   wrap, so the scrim is anchored to the text column and the right third keeps
   the daylight, the pool and the sky the brief asks for. */
@media (min-width:860px){
  .hero::after{
    background:
      linear-gradient(100deg,rgba(6,24,43,.86) 0%,rgba(6,24,43,.80) 46%,rgba(6,24,43,.34) 70%,rgba(6,24,43,.14) 100%),
      linear-gradient(to top,rgba(6,24,43,.42),rgba(6,24,43,0) 40%);
  }
}
/* the longest facts label ("TO THE CARIBBEAN SEA") needed 27px more than a
   360px Android leaves, and wrapped to two lines against a one-line value */
@media (max-width:400px){
  .fact-l{font-size:.72rem;letter-spacing:.09em}
}
/* lightbox: at 390px the 46px round controls covered 12% of each edge of the
   photo, so below 560px they move under it */
@media (max-width:560px){
  .lb{padding:56px 14px 78px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
  .lb-prev{left:calc(50% - 58px)}
  .lb-next{right:calc(50% - 58px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}