/* =====================================================================
   Serenity Bay — Resort & Spa
   Design direction referenced from the Rominal hotel booking theme:
   yellow accent on cream, centred logo over a centred nav, an inset hero,
   an overlapping availability bar and card-based room listings.
   Typeface: Inter throughout, plus Great Vibes for the hero script line.

   01 Tokens & reset            13 About / split media
   02 Typography                14 Amenity cards
   03 Layout helpers            15 Room cards
   04 Buttons                   16 Counters & stats
   05 Forms                     17 Parallax / video CTA
   06 Info list                 18 Testimonials
   07 Header & nav              19 Gallery & lightbox
   08 Mobile nav                20 Blog
   09 Search overlay            21 Newsletter & footer
   10 Hero slider               22 Page banner
   11 Availability bar          23 Inner page blocks
   12 Section heads             24 Utilities & motion
                                25 Responsive
   ===================================================================== */

/* ---------- 01 Tokens & reset --------------------------------------- */
:root{
  --cream:#F8F4ED;
  --sand:#EFE6D8;
  --sand-2:#E4D8C5;
  --white:#FFFFFF;
  --ink:#15181B;
  --ink-2:#23282D;
  --body:#5F666E;
  --muted:#8C939B;
  --line:#E6DED1;
  /* accent — bright yellow for FILLS (buttons, nav highlight, badges),
     --gold-ink for text sitting ON those fills, --gold-deep for accent
     text and hairlines on light backgrounds, where yellow would vanish. */
  --gold:#F2D200;
  --gold-2:#DCBF00;
  --gold-ink:#15181B;
  --gold-deep:#9C8100;
  --gold-soft:#FBF2BE;
  --green:#2F4F44;

  /* how far the hero and inner-page banners sit in from the page edge */
  --shell:68px;

  /* one family throughout — swap 'Inter' for 'Roboto' in both tokens and in
     the Google Fonts <link> to change the whole site over */
  --ff-head:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container:1240px;
  --gutter:20px;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 18px 50px -24px rgba(21,24,27,.28);
  --shadow-sm:0 8px 24px -14px rgba(21,24,27,.3);
  --t:.35s cubic-bezier(.4,0,.2,1);
  --header-h:158px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* ---------- 02 Typography ------------------------------------------- */
body{
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--cream);
  /* clip, not hidden: overflow-x:hidden makes body a scroll container, which
     stops every position:sticky on the page from sticking */
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-head);
  color:var(--ink);
  /* Inter needs weight and tighter tracking at display sizes, where the
     previous serif carried the emphasis through its own contrast */
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.6rem,5.2vw,4.4rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.85rem)}
h4{font-size:1.25rem}
h5{font-size:1.08rem}
p + p{margin-top:1em}
.lead{font-size:1.075rem;line-height:1.85}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;margin-bottom:14px;
}
.eyebrow::before,.eyebrow--center::after{
  content:"";width:38px;height:1px;background:var(--gold-deep);opacity:.6;
}
.eyebrow--center{justify-content:center}
/* no leading rule — for eyebrows that sit under a dotted mark instead */
.eyebrow--bare::before{display:none}
.eyebrow--gap{margin-top:40px}

/* ---------- 03 Layout helpers --------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:900px}
.section{padding:100px 0}
.section--tight{padding:70px 0}
.section--cream{background:var(--cream)}
.section--white{background:var(--white)}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink);color:#B9BFC6}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}

.grid{display:grid;gap:30px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--sidebar{grid-template-columns:minmax(0,1fr) 340px;gap:44px}
.flex{display:flex}
.ic{width:1em;height:1em;fill:currentColor;flex:none}

/* ---------- 04 Buttons ---------------------------------------------- */
.btn{
  --bg:var(--gold); --fg:var(--gold-ink); --bd:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  border-radius:var(--radius);cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.btn:hover{--bg:var(--gold-2);--bd:var(--gold-2);transform:translateY(-2px)}
.btn--outline{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--outline:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5)}
.btn--ghost:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
/* --fg must be set: the base .btn uses ink text for the yellow fill, which
   would otherwise leave dark text on this dark button */
.btn--dark{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--dark:hover{--bg:var(--gold);--fg:var(--gold-ink);--bd:var(--gold)}
.btn--sm{padding:11px 22px;font-size:.7rem}
.btn--block{width:100%}
.btn .ic{font-size:1.05rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:500;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:5px;transition:color var(--t),border-color var(--t);
}
.link-arrow:hover{color:var(--gold-deep);border-color:var(--gold)}
.link-arrow .ic{transition:transform var(--t)}
.link-arrow:hover .ic{transform:translateX(5px)}

/* ---------- 05 Forms ------------------------------------------------ */
.field{margin-bottom:20px;position:relative}
.field label{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);font-weight:500;margin-bottom:9px;
}
.field .req{color:var(--gold-deep)}
.input,.select,.textarea{
  width:100%;padding:14px 16px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:.95rem;color:var(--ink);transition:border-color var(--t),box-shadow var(--t);
}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235F666E'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:40px}
.textarea{min-height:150px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(156,129,0,.16)}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:#C0453B;box-shadow:0 0 0 3px rgba(192,69,59,.12)}
.error-msg{display:none;color:#C0453B;font-size:.8rem;margin-top:6px}
.field.is-invalid .error-msg{display:block}
.form-note{font-size:.85rem;color:var(--muted)}
.form-success{
  display:none;align-items:center;gap:12px;margin-top:22px;padding:16px 20px;
  background:#EAF3EE;border-left:3px solid var(--green);color:var(--green);border-radius:var(--radius);
}
.form-success.is-on{display:flex}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem}
.check input{margin-top:5px;accent-color:var(--gold);width:16px;height:16px;flex:none}

/* ---------- 06 Info list (mobile drawer footer) --------------------- */
.info-list{display:flex;gap:28px;flex-wrap:wrap}
.info-list li{display:flex;align-items:center;gap:8px}
.info-list .ic{color:var(--gold-deep);font-size:1rem}

/* ---------- 07 Header & nav ----------------------------------------- */
.header{
  background:transparent;position:relative;z-index:60;transition:box-shadow var(--t);
}
/* stacked and centred: logo lockup on its own row, nav centred beneath */
.header__in{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:26px 0 22px;position:relative;
}
/* opaque only once fixed, or content would scroll under it — page colour, not its own */
.header.is-stuck{
  position:fixed;inset:0 0 auto;background:var(--cream);
  box-shadow:var(--shadow-sm);animation:slideDown .4s ease;
}
/* once fixed it collapses to one row: logo left, nav right */
.header.is-stuck .header__in{
  flex-direction:row;align-items:center;justify-content:flex-start;
  padding:12px 0;gap:24px;
}
.header.is-stuck .brand{margin-right:auto}
.header.is-stuck .brand__word{font-size:1.4rem}
.header.is-stuck .brand__crest{width:26px;height:31px}
.header.is-stuck .brand__sub{font-size:.5rem}
.header.is-stuck .nav__list{justify-content:flex-end}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
/* reserves the header's in-flow height so nothing jumps when it goes fixed */
body.stuck-pad{padding-top:var(--header-h)}

/* brand lockup — crest + wordmark, subtitle centred beneath */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.brand__lock{display:flex;align-items:center;gap:10px}
.brand__crest{width:30px;height:36px;color:var(--ink);flex:none;transition:all var(--t)}
.brand__word{
  font-family:var(--ff-head);font-size:1.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:font-size var(--t);
}
.brand__sub{
  font-family:var(--ff-body);font-size:.56rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--muted);padding-left:.42em;white-space:nowrap;
}
.brand--left{align-items:flex-start}
.brand--left .brand__sub{padding-left:40px}
.footer .brand__crest,.footer .brand__word{color:#fff}
.footer .brand__sub{color:var(--gold)}

.nav__list{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px}
.nav__list > li{position:relative}
.nav__list > li > a{
  display:flex;align-items:center;gap:7px;padding:10px 17px;
  font-family:var(--ff-head);font-size:.85rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);transition:color var(--t),background var(--t);
}
.nav__list > li > a:hover{color:var(--gold-deep)}
.nav__list > li.is-active > a{background:var(--gold);color:var(--gold-ink)}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px;opacity:.6}

/* search sits at the far right of the nav row so the menu stays centred */
.header__util{
  position:absolute;right:var(--gutter);bottom:24px;
  display:flex;align-items:center;gap:12px;
}
.header__book{white-space:nowrap}
/* flows after the nav instead of being pinned, but stays a positioned
   ancestor so the search popover keeps anchoring to the icon */
.header.is-stuck .header__util{position:relative;right:auto;bottom:auto}

.drop{
  position:absolute;top:calc(100% + 10px);left:0;min-width:216px;
  background:var(--white);border:1px solid var(--line);border-top:2px solid var(--gold);
  box-shadow:var(--shadow);padding:10px 0;border-radius:0 0 var(--radius) var(--radius);
  opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:all var(--t);
  left:50%;
}
.has-drop:hover > .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{
  display:block;padding:9px 22px;font-size:.86rem;color:var(--body);
  transition:color var(--t),background var(--t),padding-left var(--t);
}
.drop a:hover{color:var(--gold-deep);background:var(--cream);padding-left:28px}

.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;color:var(--ink);font-size:1.05rem;transition:all var(--t);
}
.icon-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.icon-btn--plain{border-color:transparent;width:46px;height:46px;font-size:1.45rem}
/* the icon swaps to a close mark while its panel is open */
.icon-btn--plain .ic--close{display:none}
.icon-btn--plain.is-open{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.icon-btn--plain.is-open .ic--search{display:none}
.icon-btn--plain.is-open .ic--close{display:block}
.burger{
  display:none;width:44px;height:44px;flex-direction:column;justify-content:center;
  gap:5px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);
  position:absolute;right:var(--gutter);top:26px;
}
.burger span{width:20px;height:2px;background:var(--ink);transition:var(--t)}

/* ---------- 08 Mobile nav ------------------------------------------- */
.backdrop{
  position:fixed;inset:0;background:rgba(21,24,27,.6);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:var(--t);z-index:90;
}
.backdrop.is-on{opacity:1;visibility:visible}
.mnav{
  position:fixed;top:0;right:0;height:100%;width:330px;max-width:88vw;background:var(--white);
  z-index:100;transform:translateX(100%);transition:transform var(--t);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mnav.is-on{transform:translateX(0)}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.mnav__list{padding:10px 0}
.mnav__list a{display:block;padding:13px 24px;font-size:.94rem;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav__list a:hover{color:var(--gold-deep)}
.mnav__toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:13px 24px;font-size:.94rem;color:var(--ink);border-bottom:1px solid var(--line);text-align:left;
}
.mnav__sub{display:none;background:var(--cream)}
.mnav__sub.is-on{display:block}
.mnav__sub a{padding-left:38px;font-size:.88rem;color:var(--body)}
.mnav__foot{margin-top:auto;padding:24px}
.mnav__foot .info-list{flex-direction:column;gap:10px;font-size:.85rem;margin-bottom:18px;color:var(--body)}

/* ---------- 09 Search overlay --------------------------------------- */
/* small panel floating under the header search icon, not a full-screen modal */
.search-ov{
  position:absolute;top:calc(100% + 14px);right:0;width:340px;z-index:120;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:var(--t);
}
.search-ov.is-on{opacity:1;visibility:visible;transform:translateY(0)}
/* caret pointing back up at the icon */
.search-ov::before{
  content:"";position:absolute;top:-7px;right:16px;width:12px;height:12px;
  background:var(--white);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.search-ov__form{
  display:flex;align-items:center;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius);
}
.search-ov__form input{flex:1;min-width:0;background:none;border:0;padding:11px 14px;color:var(--ink);font-size:.95rem}
.search-ov__form input::placeholder{color:var(--muted)}
.search-ov__form input:focus{outline:0}
.search-ov__form button{color:var(--gold-deep);font-size:1.15rem;padding:0 12px}
.search-res{margin-top:8px;max-height:320px;overflow-y:auto}
.search-res a{
  display:block;padding:9px 12px;border-radius:var(--radius);color:var(--body);
  transition:background var(--t),color var(--t);
}
.search-res a:hover{background:var(--cream)}
.search-res strong{display:block;font-weight:600;color:var(--ink);font-size:.94rem}
.search-res span{font-size:.8rem;line-height:1.5;display:block}
.search-res .empty{padding:10px 12px;color:var(--muted);font-size:.9rem}

/* ---------- 10 Hero slider ------------------------------------------ */
/* inset from the page edge on both sides — the page background frames it */
.hero{
  position:relative;margin-inline:var(--shell);
  height:min(80vh,760px);min-height:540px;overflow:hidden;background:var(--ink);
}
.hero__slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
  background-size:cover;background-position:center;
}
.hero__slide.is-on{opacity:1}
.hero__slide.is-on .hero__bg{animation:kb 9s linear forwards}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.11)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(21,24,27,.34),rgba(21,24,27,.46));
}
.hero__inner{position:relative;z-index:3;height:100%;display:flex;align-items:center;justify-content:center}
.hero__copy{max-width:900px;margin-inline:auto;text-align:center;color:#E7EAED}
/* script line overlaps the heading below it, as in the reference */
.hero__script{
  display:block;font-family:'Great Vibes', cursive;color:var(--gold);
  font-size:clamp(3.6rem,7.4vw,7.2rem);line-height:.92;margin-bottom:-.14em;
}
.hero__copy h1{
  color:#fff;margin-bottom:0;text-transform:uppercase;letter-spacing:.035em;
  font-size:clamp(2rem,5.3vw,4.9rem);
}
.hero__copy p{
  font-family:var(--ff-head);font-size:clamp(1rem,1.7vw,1.42rem);
  color:#EEF0F2;max-width:none;margin:20px 0 36px;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn--hero{padding:21px 40px;border-radius:0;font-size:.8rem;letter-spacing:.2em}
.hero__dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:34px;z-index:5;
  display:flex;gap:10px;
}
.hero__dots button{
  width:34px;height:3px;background:rgba(255,255,255,.35);transition:background var(--t);
}
.hero__dots button.is-on{background:var(--gold)}
.hero__arrows{position:absolute;inset:auto 0 0;z-index:5;display:none}

/* ---------- 11 Availability bar ------------------------------------- */
/* padded to the shell so the card can never overhang the inset hero */
.availability{position:relative;z-index:20;margin-top:-62px;padding-inline:var(--shell)}
.availability--flat{margin-top:0}
.avail-card{
  background:var(--white);box-shadow:var(--shadow);border-top:3px solid var(--gold);
  padding:26px 30px;border-radius:var(--radius-lg);
}
.avail-form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:22px;align-items:end}
.avail-form .field{margin:0}
.avail-form .btn{height:50px;white-space:nowrap}
.avail-title{
  font-family:var(--ff-head);font-weight:600;font-size:1.1rem;color:var(--ink);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.avail-title .ic{color:var(--gold-deep)}

/* ---------- 12 Section heads ---------------------------------------- */
.sec-head{max-width:660px;margin-bottom:54px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:16px}
.sec-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;max-width:none}
.sec-head--split > div{max-width:620px}

/* ---------- 13 About / split media ---------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--radius-lg);width:100%;object-fit:cover}
.split__media--stack{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.split__media--stack img:first-child{grid-column:1/-1;height:290px}
.split__media--stack img:not(:first-child){height:210px}
.badge-years{
  position:absolute;right:-18px;bottom:-18px;width:150px;height:150px;border-radius:50%;
  background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;text-align:center;
  font-family:var(--ff-head);line-height:1.15;box-shadow:var(--shadow);
}
.badge-years b{display:block;font-size:2.6rem}
.badge-years span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--ff-body)}
.tick-list{display:grid;gap:12px;margin:24px 0 30px}
.tick-list li{display:flex;gap:12px;align-items:flex-start}
.tick-list .ic{color:var(--gold-deep);font-size:1.15rem;margin-top:5px}
.sig{display:flex;align-items:center;gap:18px;margin-top:28px}
.sig img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.sig b{display:block;font-family:var(--ff-head);color:var(--ink);font-size:1.05rem}
.sig span{font-size:.82rem;color:var(--gold-deep);letter-spacing:.14em;text-transform:uppercase}

/* ---------- 14 Amenity cards ---------------------------------------- */
.amenity{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:38px 30px;text-align:center;transition:all var(--t);position:relative;overflow:hidden;
}
.amenity::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold);transition:width var(--t)}
.amenity:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.amenity:hover::after{width:100%}
.amenity__ic{
  width:74px;height:74px;margin:0 auto 22px;display:grid;place-items:center;
  border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);font-size:1.9rem;
  transition:all var(--t);
}
.amenity:hover .amenity__ic{background:var(--gold);color:var(--gold-ink)}
.amenity h3{font-size:1.25rem;margin-bottom:10px}
.amenity p{font-size:.94rem}

/* facility switcher — hovering a row cross-fades the image beside it */
.facilities{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
.facilities__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:460px;background:var(--sand-2);
}
.facilities__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
}
.facilities__img.is-on{opacity:1}
.facilities__cap{
  position:absolute;left:24px;bottom:20px;z-index:2;
  color:#fff;font-weight:600;font-size:1.02rem;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.facilities__list{display:grid;gap:14px;align-content:start}
.fac{
  width:100%;display:flex;gap:18px;align-items:flex-start;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;transition:background var(--t),border-color var(--t);
}
.fac__ic{font-size:1.9rem;color:var(--gold-deep);flex:none;line-height:1;transition:color var(--t)}
.fac__body b{
  display:block;font-size:1.12rem;font-weight:600;color:var(--ink);
  margin-bottom:4px;transition:color var(--t);
}
.fac__body > span{display:block;font-size:.93rem;color:var(--body);transition:color var(--t)}
/* hover no longer switches the tab, so it only hints that the row is clickable */
.fac:hover{border-color:var(--gold)}
.fac.is-on{background:var(--gold);border-color:var(--gold)}
.fac.is-on .fac__ic,
.fac.is-on .fac__body b,
.fac.is-on .fac__body > span{color:var(--gold-ink)}

.feature-row{display:flex;gap:18px;align-items:flex-start}
.feature-row__ic{
  width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--white);border:1px solid var(--line);color:var(--gold-deep);font-size:1.4rem;
}
.feature-row h4{margin-bottom:6px}
.feature-row p{font-size:.93rem}

/* ---------- 15 Room cards ------------------------------------------- */
.room{
  background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);transition:all var(--t);display:flex;flex-direction:column;
}
.room:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.room__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.room__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.room:hover .room__media img{transform:scale(1.07)}
.room__price{
  position:absolute;left:18px;bottom:18px;background:rgba(21,24,27,.86);color:#fff;
  padding:8px 16px;border-radius:var(--radius);font-size:.86rem;backdrop-filter:blur(4px);
}
.room__price b{font-family:var(--ff-head);font-size:1.15rem;color:var(--gold)}
.room__tag{
  position:absolute;right:18px;top:18px;background:var(--gold);color:var(--gold-ink);
  padding:5px 13px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius);
}
.room__body{padding:26px;display:flex;flex-direction:column;flex:1}
.room__body h3{margin-bottom:10px;transition:color var(--t)}
.room:hover .room__body h3{color:var(--gold-deep)}
.room__body > p{font-size:.94rem;margin-bottom:18px}
.room__meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;padding:16px 0;margin-bottom:18px;
  border-block:1px solid var(--line);font-size:.85rem;
}
.room__meta li{display:flex;align-items:center;gap:7px}
.room__meta .ic{color:var(--gold-deep);font-size:1.05rem}
.room__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.stars{display:flex;gap:3px;color:var(--gold-deep);font-size:.9rem}

.room--wide{display:grid;grid-template-columns:400px 1fr;align-items:stretch}
.room--wide .room__media{aspect-ratio:auto;height:100%;min-height:270px}

/* ---------- 16 Counters & stats ------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat b{display:block;font-family:var(--ff-head);font-size:3rem;color:var(--gold);line-height:1}
.stat span{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;display:block}
.section--ink .stat span{color:#A9B0B7}

/* ---------- 17 Parallax / video CTA --------------------------------- */
.parallax{
  position:relative;background-size:cover;background-position:center;background-attachment:fixed;
  padding:130px 0;color:#fff;text-align:center;
}
.parallax::after{content:"";position:absolute;inset:0;background:rgba(21,24,27,.66)}
.parallax > *{position:relative;z-index:2}
.parallax h2{color:#fff;margin-bottom:18px}
.parallax p{max-width:620px;margin:0 auto 34px;color:#DCE0E4}
.play{
  width:88px;height:88px;border-radius:50%;background:var(--gold);color:var(--gold-ink);
  display:grid;place-items:center;margin:0 auto 30px;font-size:1.6rem;position:relative;
}
.play::before{content:"";position:absolute;inset:-14px;border:1px solid rgba(255,255,255,.4);border-radius:50%;animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}

.offer-band{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.offer-band__media{min-height:460px;background-size:cover;background-position:center}
.offer-band__body{padding:80px}
.offer-price{display:flex;align-items:baseline;gap:12px;margin:20px 0 26px}
.offer-price b{font-family:var(--ff-head);font-size:3rem;color:var(--gold-deep)}
.offer-price s{color:var(--muted)}

/* ---------- 17b Why choose us (1-up slider) -------------------------- */
/* full-bleed: the media runs to the left viewport edge, the panel to the right */
.why{display:grid;grid-template-columns:1.68fr 1fr;background:var(--sand)}
.why__media{position:relative}
.why .carousel__item{padding:0}
.why__slide{position:relative}
.why__slide img{width:100%;height:640px;object-fit:cover}
/* white card overlapping the foot of the image */
.why__card{
  position:absolute;left:0;bottom:0;width:min(470px,74%);
  background:var(--white);padding:42px 46px 44px;
}
.why__card h3{margin-bottom:14px}
.why__card p{font-size:.96rem;margin:0}
.why__nav{position:absolute;right:0;bottom:0;z-index:4;display:flex;background:var(--white)}
.why__nav button{
  width:52px;height:52px;display:grid;place-items:center;
  color:var(--ink);font-size:1.1rem;transition:background var(--t),color var(--t);
}
.why__nav button + button{border-left:1px solid var(--line)}
.why__nav button:hover{background:var(--gold);color:var(--gold-ink)}

.why__panel{padding:80px 40px 80px 78px;align-self:center}
.why__panel h2{font-size:clamp(2.4rem,3.5vw,3.5rem);margin-bottom:36px;line-height:1.14}
.dots-mark{
  display:block;width:54px;height:16px;margin-bottom:20px;opacity:.5;
  background-image:radial-gradient(var(--gold-deep) 1.3px, transparent 1.3px);
  background-size:8px 8px;
}

/* ---------- 17c Dining & opening hours ------------------------------- */
.dining__media{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dining__media img{width:100%;height:600px;object-fit:cover}
.hours{display:grid;gap:20px}
.hours b{display:block;color:var(--ink);font-weight:600;font-size:.95rem;margin-bottom:2px}
.hours span{font-size:.95rem}

/* ---------- 18 Testimonials ----------------------------------------- */
.carousel{position:relative;overflow:hidden}
.carousel__track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.carousel__item{flex:0 0 33.3333%;padding:0 15px}
.carousel[data-per="2"] .carousel__item{flex-basis:50%}
.carousel[data-per="1"] .carousel__item{flex-basis:100%}
.carousel__nav{display:flex;justify-content:center;gap:12px;margin-top:40px}
.carousel__nav button{
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);transition:all var(--t);background:var(--white);
}
.carousel__nav button:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

.quote{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 32px;height:100%;position:relative;
}
.quote__mark{font-family:var(--ff-head);font-weight:700;font-size:4.5rem;line-height:.7;color:var(--gold-soft);margin-bottom:8px}
.quote p{font-size:.98rem;margin-bottom:24px}
.quote__by{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.quote__by img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.quote__by b{display:block;font-family:var(--ff-head);color:var(--ink);font-size:1.05rem}
.quote__by span{font-size:.82rem;color:var(--muted)}

/* ---------- 19 Gallery & lightbox ----------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.filters button{
  padding:10px 24px;border:1px solid var(--line);border-radius:100px;background:var(--white);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body);transition:all var(--t);
}
.filters button:hover{border-color:var(--gold);color:var(--gold-deep)}
.filters button.is-on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal__item{position:relative;overflow:hidden;border-radius:var(--radius-lg);cursor:pointer;aspect-ratio:1}
.gal__item--tall{grid-row:span 2;aspect-ratio:auto}
.gal__item--wide{grid-column:span 2}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gal__item:hover img{transform:scale(1.09)}
.gal__item::after{
  content:"";position:absolute;inset:0;background:rgba(21,24,27,.5);
  opacity:0;transition:opacity var(--t);
}
.gal__item:hover::after{opacity:1}
.gal__zoom{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;z-index:2;
  opacity:0;transform:scale(.6);transition:all var(--t);pointer-events:none;font-size:1.2rem;
}
.gal__item:hover .gal__zoom{opacity:1;transform:scale(1)}
.is-hidden{display:none !important}

/* masonry via CSS columns — images keep their own proportions instead of
   being cropped square, and filtered-out tiles simply reflow */
.mason{columns:4;column-gap:16px}
.shot{
  display:block;position:relative;overflow:hidden;border-radius:var(--radius-lg);
  margin-bottom:16px;break-inside:avoid;-webkit-column-break-inside:avoid;
}
.shot img{width:100%;height:auto;transition:transform .7s ease}
.shot:hover img{transform:scale(1.06)}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 45%,rgba(21,24,27,.8));
  opacity:0;transition:opacity var(--t);
}
.shot:hover::after{opacity:1}
.shot__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  color:#fff;font-weight:600;font-size:.98rem;line-height:1.3;
  opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t);
}
.shot__label em{
  display:block;font-style:normal;font-weight:400;
  font-size:.8rem;color:#D6DBE0;margin-top:3px;
}
.shot:hover .shot__label{opacity:1;transform:none}
.shot__zoom{
  position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;
  border-radius:50%;background:var(--gold);color:var(--gold-ink);
  display:grid;place-items:center;font-size:1rem;
  opacity:0;transform:scale(.7);transition:all var(--t);
}
.shot:hover .shot__zoom{opacity:1;transform:none}

.filters button span{
  margin-left:7px;font-size:.72rem;opacity:.6;
}
.gal-count{text-align:center;font-size:.9rem;color:var(--muted);margin:-26px 0 34px}
.gal-count b{color:var(--ink);font-weight:600}
.gal-empty{
  text-align:center;padding:60px 20px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius-lg);
}

.lightbox{
  position:fixed;inset:0;background:rgba(11,13,15,.94);z-index:130;
  display:grid;place-items:center;padding:60px 24px;
  opacity:0;visibility:hidden;transition:var(--t);
}
.lightbox.is-on{opacity:1;visibility:visible}
.lightbox img{max-width:min(1100px,92vw);max-height:82vh;border-radius:var(--radius);object-fit:contain}
.lightbox__cap{color:#C6CBD0;text-align:center;margin-top:16px;font-size:.9rem}
.lightbox__btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  font-size:1.3rem;transition:background var(--t);
}
.lightbox__btn:hover{background:var(--gold);color:var(--gold-ink)}
.lightbox__btn--prev{left:24px}
.lightbox__btn--next{right:24px}
.lightbox__close{position:absolute;top:24px;right:24px;color:#fff;font-size:1.6rem}

/* ---------- 19b Resort in pictures (homepage teaser) ----------------- */
/* the heading sits inside the mosaic as a tall left panel, so this reads
   as a teaser rather than a second copy of the gallery page grid */
.rp{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:232px;gap:14px}
.rp__intro{
  grid-column:1;grid-row:1 / span 2;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:38px 32px;display:flex;flex-direction:column;justify-content:center;
}
.rp__intro h2{font-size:clamp(1.6rem,2vw,2.05rem);margin-bottom:14px}
.rp__intro p{font-size:.94rem;margin-bottom:26px}
.rp__intro .link-arrow{align-self:flex-start}

.rp__item{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg)}
.rp__item--wide{grid-column:span 2}
.rp__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.rp__item:hover img{transform:scale(1.07)}
.rp__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 42%,rgba(21,24,27,.78));
  opacity:0;transition:opacity var(--t);
}
.rp__item:hover::after{opacity:1}
.rp__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  color:#fff;font-weight:600;font-size:.98rem;line-height:1.3;
  opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t);
}
.rp__label em{
  display:block;font-style:normal;font-weight:400;
  font-size:.8rem;color:#D6DBE0;margin-top:3px;
}
.rp__item:hover .rp__label{opacity:1;transform:none}
.rp__zoom{
  position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;
  border-radius:50%;background:var(--gold);color:var(--gold-ink);
  display:grid;place-items:center;font-size:1rem;
  opacity:0;transform:scale(.7);transition:all var(--t);
}
.rp__item:hover .rp__zoom{opacity:1;transform:none}

/* ---------- 20 Blog -------------------------------------------------- */
.post{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:all var(--t);display:flex;flex-direction:column;
}
.post:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.post__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.post:hover .post__media img{transform:scale(1.07)}
.post__date{
  position:absolute;left:16px;top:16px;background:var(--gold);color:var(--gold-ink);text-align:center;
  padding:9px 13px;border-radius:var(--radius);line-height:1.1;
}
.post__date b{display:block;font-family:var(--ff-head);font-size:1.35rem}
.post__date span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.post__body{padding:26px;display:flex;flex-direction:column;flex:1}
.post__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.post__meta .ic{color:var(--gold-deep);margin-right:5px}
.post__body h3{font-size:1.3rem;margin-bottom:12px;transition:color var(--t)}
.post:hover .post__body h3{color:var(--gold-deep)}
.post__body p{font-size:.94rem;margin-bottom:18px}
.post__body .link-arrow{margin-top:auto;align-self:flex-start}

.sidebar{display:grid;gap:30px;align-content:start}
/* Opt-in sticky sidebar. align-self:start keeps the grid item at content
   height so it can travel inside the taller column beside it. Only used where
   the sidebar is short enough to stay fully visible. */
.sidebar--sticky{position:sticky;top:100px;align-self:start}
.sidebar--sticky .book-box{position:static;top:auto}
.widget{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.widget h4{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);position:relative}
.widget h4::after{content:"";position:absolute;left:0;bottom:-1px;width:46px;height:2px;background:var(--gold)}
/* accent panel — the fill is bright yellow, so everything on it is ink,
   including the rule under the heading */
.widget--gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.widget--gold h4{color:var(--gold-ink);border-color:rgba(21,24,27,.18)}
.widget--gold h4::after{background:var(--gold-ink)}
.widget--gold p{color:rgba(21,24,27,.78);margin-bottom:20px}
.widget--gold .btn--dark:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}

.widget-search{display:flex}
.widget-search input{flex:1;border:1px solid var(--line);border-right:0;padding:12px 14px;border-radius:var(--radius) 0 0 var(--radius)}
.widget-search input:focus{outline:0;border-color:var(--gold)}
.widget-search button{width:50px;background:var(--gold);color:var(--gold-ink);border-radius:0 var(--radius) var(--radius) 0}
.cat-list li a{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.93rem;transition:color var(--t),padding var(--t)}
.cat-list li:last-child a{border:0}
.cat-list li a:hover{color:var(--gold-deep);padding-left:6px}
.mini-post{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.mini-post:last-child{border:0;padding-bottom:0}
.mini-post img{width:76px;height:70px;object-fit:cover;border-radius:var(--radius);flex:none}
.mini-post b{font-family:var(--ff-head);font-size:.98rem;color:var(--ink);display:block;line-height:1.35;transition:color var(--t)}
.mini-post:hover b{color:var(--gold-deep)}
.mini-post span{font-size:.78rem;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{padding:7px 15px;border:1px solid var(--line);border-radius:100px;font-size:.78rem;transition:all var(--t)}
.tags a:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

.article__lead{font-size:1.1rem;color:var(--ink-2)}
.article h2,.article h3{margin:34px 0 14px}
/* direct child only — otherwise this hits every avatar in the byline,
   author box and comment thread, spacing them 28px apart */
.article > img{border-radius:var(--radius-lg);margin:28px 0}
.article blockquote{
  margin:30px 0;padding:28px 32px;background:var(--sand);border-left:3px solid var(--gold);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-family:var(--ff-head);
  font-weight:500;font-size:1.25rem;color:var(--ink);line-height:1.6;
}
/* prose lists only — a classed list (.article__meta, .tags) must not be
   turned into a bulleted stack by these */
.article ul:not([class]){display:grid;gap:10px;margin:18px 0}
.article ul:not([class]) li{display:flex;gap:12px}
.article ul:not([class]) li::before{content:"";width:7px;height:7px;background:var(--gold-deep);border-radius:50%;margin-top:11px;flex:none}
.article__foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}

/* --- single article: meta bar, prev/next, author, comments ----------- */
.article__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  padding-bottom:24px;margin-bottom:30px;border-bottom:1px solid var(--line);
  font-size:.88rem;color:var(--muted);
}
.article__meta li{display:flex;align-items:center;gap:8px}
.article__meta .ic{color:var(--gold-deep);font-size:1.05rem}
.article__byline{display:flex;align-items:center;gap:11px}
.article__byline img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.article__byline b{color:var(--ink);font-weight:600}

.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:44px;padding-top:34px;border-top:1px solid var(--line);
}
.post-nav a{
  display:flex;gap:14px;align-items:center;padding:18px 20px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color var(--t),transform var(--t);
}
.post-nav a:hover{border-color:var(--gold);transform:translateY(-3px)}
.post-nav .is-next{flex-direction:row-reverse;text-align:right}
.post-nav small{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:5px;
}
.post-nav b{display:block;font-weight:600;color:var(--ink);font-size:.97rem;line-height:1.35}
.post-nav .ic{font-size:1.2rem;color:var(--ink);flex:none}

.author-box{
  display:flex;gap:24px;align-items:flex-start;
  margin-top:44px;padding:32px;background:var(--sand);border-radius:var(--radius-lg);
}
.author-box img{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:none}
.author-box b{display:block;font-size:1.15rem;color:var(--ink);font-weight:600}
.author-box span{
  display:block;margin:3px 0 12px;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);
}
.author-box p{font-size:.94rem;margin:0}

.comment{display:flex;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.comment--reply{margin-left:64px}
.comment img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.comment__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:8px}
.comment__head b{color:var(--ink);font-weight:600;font-size:1rem}
.comment__head time{font-size:.82rem;color:var(--muted)}
.comment__reply{
  margin-left:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;transition:color var(--t);
}
.comment__reply:hover{color:var(--ink)}
.comment p{font-size:.95rem;margin:0}

.pagination{display:flex;justify-content:center;gap:9px;margin-top:56px}
.pagination a,.pagination span{
  min-width:46px;height:46px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  font-size:.9rem;transition:all var(--t);
}
.pagination a:hover,.pagination .is-on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

/* ---------- 21 Newsletter & footer ---------------------------------- */
.news{
  background:var(--gold);border-radius:var(--radius-lg);padding:56px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:var(--gold-ink);
}
.news h2{color:var(--gold-ink)}
.news p{color:rgba(21,24,27,.72);margin-top:12px}
.news form{display:flex;gap:12px}
.news input{
  flex:1;padding:15px 18px;border:1px solid rgba(21,24,27,.28);
  background:rgba(255,255,255,.55);border-radius:var(--radius);color:var(--ink);
}
.news input::placeholder{color:rgba(21,24,27,.5)}
.news input:focus{outline:0;background:#fff}
.news .btn{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.news .btn:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}

.footer{background:var(--ink);color:#9AA1A9;padding-top:90px}
.footer h4{color:#fff;font-size:1.1rem;margin-bottom:24px;letter-spacing:.04em}
.footer a:hover{color:var(--gold)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:44px;padding-bottom:60px}
.footer__about p{margin:22px 0}
.footer__social{display:flex;gap:9px}
.footer__social a{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);
  border-radius:50%;transition:all var(--t);
}
.footer__social a:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.footer__links li{margin-bottom:11px}
.footer__links a{display:inline-flex;align-items:center;gap:9px;transition:padding var(--t),color var(--t);font-size:.94rem}
.footer__links a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.7}
.footer__links a:hover{padding-left:5px}
.footer__contact li{display:flex;gap:12px;margin-bottom:16px;font-size:.94rem}
.footer__contact .ic{color:var(--gold);font-size:1.15rem;margin-top:4px;flex:none}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.1);padding:24px 0;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.87rem;
}
.footer__bar ul{display:flex;gap:22px;flex-wrap:wrap}

.to-top{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;z-index:70;font-size:1.15rem;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:var(--t);box-shadow:var(--shadow-sm);
}
.to-top.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--ink)}

/* ---------- 22 Page banner ------------------------------------------ */
.banner{
  position:relative;margin-inline:var(--shell);
  padding:130px 0 110px;background-size:cover;background-position:center;
  text-align:center;color:#fff;
}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(21,24,27,.72),rgba(21,24,27,.62))}
.banner > *{position:relative;z-index:2}
.banner h1{color:#fff;font-size:clamp(2.2rem,4.4vw,3.5rem)}
.crumbs{display:flex;justify-content:center;gap:12px;margin-top:16px;font-size:.85rem;color:#CBD0D5}
.crumbs a:hover{color:var(--gold)}
.crumbs li:not(:first-child)::before{content:"/";margin-right:12px;opacity:.5}
.crumbs li{display:flex;align-items:center}
.crumbs .is-on{color:var(--gold)}

/* ---------- 23 Inner page blocks ------------------------------------ */
/* timeline */
.timeline{position:relative;padding-left:40px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline li{position:relative;padding-bottom:38px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-36px;top:7px;width:19px;height:19px;border-radius:50%;
  background:var(--cream);border:2px solid var(--gold-deep);
}
.timeline b{display:block;font-family:var(--ff-head);color:var(--gold-deep);font-size:1.4rem}
.timeline h4{margin:4px 0 8px}

/* accordion */
.acc{display:grid;gap:14px}
.acc__item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.acc__item.is-on{border-color:var(--gold)}
.acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 26px;text-align:left;font-family:var(--ff-head);font-weight:600;font-size:1.1rem;color:var(--ink);
  transition:color var(--t);
}
.acc__head:hover{color:var(--gold-deep)}
.acc__item.is-on .acc__head{color:var(--gold-deep)}
.acc__sign{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);
  display:grid;place-items:center;font-size:1.15rem;transition:all var(--t);
}
.acc__item.is-on .acc__sign{background:var(--gold);color:var(--gold-ink);transform:rotate(45deg)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc__body p{padding:0 26px 22px;font-size:.95rem}

/* pricing */
.plan{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px 34px;text-align:center;transition:all var(--t);position:relative;
}
.plan:hover,.plan.is-featured{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-6px)}
.plan.is-featured{border-top:3px solid var(--gold)}
.plan__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--gold-ink);
  padding:5px 18px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border-radius:100px;
}
.plan__price{font-family:var(--ff-head);font-weight:700;font-size:3.2rem;color:var(--gold-deep);line-height:1;margin:18px 0 4px}
.plan__price sup{font-size:1.2rem;top:-1.2rem}
.plan__per{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.plan ul{display:grid;gap:11px;margin:28px 0 32px;text-align:left}
.plan ul li{display:flex;gap:11px;font-size:.94rem}
.plan ul .ic{color:var(--gold-deep);margin-top:5px;flex:none}
.plan ul li.off{color:var(--muted);text-decoration:line-through}
.plan ul li.off .ic{color:var(--muted)}

/* team */
.member{text-align:center}
.member__media{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:3/3.6}
.member__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.member:hover .member__media img{transform:scale(1.07)}
.member__social{
  position:absolute;left:0;right:0;bottom:-60px;display:flex;justify-content:center;gap:8px;
  padding:16px;background:linear-gradient(transparent,rgba(21,24,27,.8));transition:bottom var(--t);
}
.member:hover .member__social{bottom:0}
.member__social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;transition:background var(--t);
}
.member__social a:hover{background:var(--gold);color:var(--gold-ink)}
.member h4{margin:20px 0 4px}
.member span{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}

/* room details */
.rd-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rd-gallery__main{grid-column:1/-1;aspect-ratio:16/8;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer}
.rd-gallery__main img{width:100%;height:100%;object-fit:cover}
.rd-gallery__thumb{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;cursor:pointer}
.rd-gallery__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.rd-gallery__thumb:hover img{transform:scale(1.08)}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0}
.spec{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;text-align:center}
.spec .ic{font-size:1.7rem;color:var(--gold-deep);margin:0 auto 10px}
.spec b{display:block;font-family:var(--ff-head);color:var(--ink);font-size:1.05rem}
.spec span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.amen-grid li{display:flex;align-items:center;gap:11px;font-size:.94rem}
.amen-grid .ic{color:var(--gold-deep);font-size:1.1rem}

.book-box{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--radius-lg);padding:30px;position:sticky;top:100px;
}
.book-box__price{display:flex;align-items:baseline;gap:8px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.book-box__price b{font-family:var(--ff-head);font-size:2.4rem;color:var(--gold-deep)}
.totals{display:grid;gap:11px;margin:22px 0;padding-top:20px;border-top:1px solid var(--line);font-size:.94rem}
.totals li{display:flex;justify-content:space-between}
.totals .total{
  border-top:1px solid var(--line);padding-top:13px;margin-top:6px;
  font-family:var(--ff-head);font-weight:600;font-size:1.25rem;color:var(--ink);
}
.totals .total span:last-child{color:var(--gold-deep)}

/* contact */
.contact-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 28px;text-align:center;transition:all var(--t);
}
.contact-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.contact-card__ic{
  width:66px;height:66px;margin:0 auto 20px;border-radius:50%;background:var(--gold-soft);
  color:var(--gold-deep);display:grid;place-items:center;font-size:1.6rem;transition:all var(--t);
}
.contact-card:hover .contact-card__ic{background:var(--gold);color:var(--gold-ink)}
.contact-card h4{margin-bottom:10px}
.map{border-radius:var(--radius-lg);overflow:hidden;line-height:0;border:1px solid var(--line)}
.map iframe{width:100%;height:440px;border:0}

/* steps / process */
.step{text-align:center;position:relative}
.step__num{
  width:76px;height:76px;margin:0 auto 20px;border-radius:50%;background:var(--white);
  border:1px dashed var(--gold-deep);color:var(--gold-deep);display:grid;place-items:center;
  font-family:var(--ff-head);font-weight:600;font-size:1.7rem;transition:all var(--t);
}
.step:hover .step__num{background:var(--gold);color:var(--gold-ink);border-style:solid}

/* menu list (restaurant) */
.menu-item{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px dashed var(--line)}
.menu-item__line{flex:1;border-bottom:1px dotted var(--sand-2);transform:translateY(-4px)}
.menu-item h5{font-size:1.05rem}
.menu-item p{font-size:.88rem;color:var(--muted);margin-top:3px}
.menu-item b{font-family:var(--ff-head);color:var(--gold-deep);font-size:1.2rem}

/* 404 */
.err{text-align:center;padding:120px 0}
.err__code{font-family:var(--ff-head);font-weight:700;font-size:clamp(6rem,18vw,13rem);line-height:.9;color:var(--gold-deep);opacity:.28}
.err h1{margin:-20px 0 16px}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white)}
.table-wrap table{min-width:640px}
.table-wrap th,.table-wrap td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
.table-wrap th{font-family:var(--ff-head);color:var(--ink);background:var(--cream);font-weight:600}
.table-wrap tr:last-child td{border-bottom:0}

/* ---------- 24 Utilities & motion ----------------------------------- */
.mb-0{margin-bottom:0}.mt-30{margin-top:30px}.mt-40{margin-top:40px}
.text-center{text-align:center}
.gold{color:var(--gold-deep)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.no-scroll{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .parallax{background-attachment:scroll}
}

/* ---------- 25 Responsive ------------------------------------------- */
@media (max-width:1199px){
  :root{--shell:40px}
  .section{padding:84px 0}
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .grid--sidebar{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  /* eight top-level items now, so tighten rather than grow below 1200 */
  .nav__list > li > a{padding:10px 11px;font-size:.79rem;letter-spacing:.05em}
  .split{gap:40px}
  .offer-band__body{padding:56px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .rp{grid-auto-rows:198px}
  .mason{columns:3}
  .badge-years{width:124px;height:124px;right:-10px;bottom:-10px}
  .badge-years b{font-size:2.1rem}
}
@media (max-width:991px){
  :root{--header-h:96px;--shell:24px}
  .nav{display:none}
  /* search icon keeps its place, just left of the burger — pinned in both
     states, since the stuck header is still a column at this width */
  .header__util,
  .header.is-stuck .header__util{
    position:absolute;right:calc(var(--gutter) + 56px);
    top:50%;bottom:auto;transform:translateY(-50%);
  }
  .search-ov{width:min(320px,calc(100vw - var(--gutter) * 2 - 16px))}
  .burger{display:flex;top:50%;transform:translateY(-50%)}
  .header__in{padding:22px 0;gap:0}
  /* no nav to sit beside, so the logo stays centred when stuck */
  .header.is-stuck .header__in{flex-direction:column;padding:14px 0}
  .header.is-stuck .brand{margin-right:0}
  .brand__word{font-size:1.5rem}
  .hero{height:auto;min-height:0;padding:110px 0 130px}
  .availability{margin-top:-46px}
  .avail-form{grid-template-columns:repeat(2,1fr)}
  .avail-form .btn{grid-column:1/-1}
  .split,.grid--2,.grid--sidebar,.offer-band,.news{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .carousel__item{flex-basis:50%}
  .mason{columns:2}
  /* no hover on touch, so captions stay up */
  .shot::after,.shot__label{opacity:1}
  .shot__label{transform:none}
  .rp{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .rp__intro{grid-column:1 / -1;grid-row:auto;padding:30px 24px}
  /* no hover on touch, so the captions stay up */
  .rp__item::after{opacity:1}
  .rp__label{opacity:1;transform:none}
  .why{grid-template-columns:1fr}
  .why__panel{padding:52px var(--gutter) 60px;text-align:center}
  .why__panel .dots-mark{margin-inline:auto}
  .why__slide img{height:480px}
  .dining__media img{height:440px}
  .facilities{grid-template-columns:1fr;gap:24px}
  .facilities__media{min-height:340px}
  .sec-head--split{flex-direction:column;align-items:flex-start}
  .footer__grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .room--wide{grid-template-columns:1fr}
  .specs{grid-template-columns:repeat(2,1fr)}
  .book-box,.sidebar--sticky{position:static}
  .offer-band__media{min-height:320px}
  .news{padding:40px}
  .article blockquote{padding:22px 24px;font-size:1.1rem}
  .post-nav{grid-template-columns:1fr}
  .post-nav .is-next{flex-direction:row;text-align:left}
}
@media (max-width:767px){
  :root{--gutter:16px;--shell:12px;--header-h:88px}
  .section{padding:64px 0}
  .section--tight{padding:48px 0}
  /* below 768 the button would run into the centred logo — the drawer
     footer carries a full-width "Book Your Stay" instead */
  .header__book{display:none}
  .brand__word{font-size:1.25rem}
  .brand__crest{width:24px;height:29px}
  .brand__sub{font-size:.5rem;letter-spacing:.34em}
  .hero{padding:84px 0 110px}
  .banner{padding:96px 0 82px}
  .hero__cta .btn{flex:1 1 100%}
  .avail-form{grid-template-columns:1fr}
  .avail-card{padding:22px 20px}
  .grid,.gal{gap:18px}
  .grid--3,.grid--4,.gal,.amen-grid,.rd-gallery{grid-template-columns:repeat(2,1fr)}
  .carousel__item{flex-basis:100%}
  .why__slide img{height:400px}
  .why__card{width:100%;padding:26px 22px 28px}
  /* nav moves off the foot of the image so it clears the widened card */
  .why__nav{top:0;bottom:auto}
  .sec-head{margin-bottom:36px}
  .parallax{padding:90px 0}
  .offer-band__body{padding:40px 22px}
  .footer{padding-top:64px}
  .footer__grid{grid-template-columns:1fr;gap:32px;padding-bottom:44px}
  .footer__bar{flex-direction:column;text-align:center;align-items:center}
  .news form{flex-direction:column}
  .article__foot{flex-direction:column;align-items:flex-start}
  .comment--reply{margin-left:26px}
  .comment img{width:46px;height:46px}
  .author-box{flex-direction:column;gap:18px;padding:26px 22px}
  .author-box img{width:74px;height:74px}
  .timeline{padding-left:32px}
  .err{padding:80px 0}
  .badge-years{position:static;margin:20px auto 0}
}
@media (max-width:575px){
  :root{--shell:0px}
  .grid--3,.grid--4,.specs,.amen-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .mason{columns:1}
  .rp{grid-template-columns:1fr;grid-auto-rows:220px}
  .rp__item--wide{grid-column:span 1}
  .gal__item--wide,.gal__item--tall{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .dining__media{grid-template-columns:1fr}
  .dining__media img{height:300px}
  .fac{padding:18px;gap:14px}
  .fac__ic{font-size:1.6rem}
  .stats{grid-template-columns:1fr}
  .brand__text{font-size:1.1rem}
  .pagination a,.pagination span{min-width:40px;height:40px}
  .lightbox__btn{width:42px;height:42px}
  .lightbox__btn--prev{left:8px}
  .lightbox__btn--next{right:8px}
}