/* ============================================================================
   Vacation Kardamena — Aegean Editorial
   Design tokens → primitives → components. Light-first, photography-led.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  color-scheme: light;

  /* Colour — deep Aegean ink, bone paper, brass accent */
  --ink:        #0C1E2C;
  --ink-2:      #1B3346;
  --ink-soft:   #435666;
  --ink-mute:   #6B7C8A;
  --sea:        #0F4C64;
  --bone:       #FAF8F4;
  --linen:      #F1EBE1;
  --linen-2:    #E8E0D3;
  --line:       #DED5C7;
  --line-soft:  #EAE3D8;
  --accent:     #8C5F26;   /* AA on bone and with white text        */
  --brand-ink:  #324272;   /* the navy of the client's wordmark      */
  --brand-blue: #98BDDD;   /* the light blue of the nautilus mark    */
  --brass:      #C9A227;   /* decorative + text on dark only        */
  --white:      #FFFFFF;

  --on-dark:      #F6F2EB;
  --on-dark-mute: #A8BAC7;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem,    0.96rem + 0.2vw,  1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem  + 0.4vw,  1.4rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
  --step-3:  clamp(1.85rem, 1.5rem  + 1.7vw,  2.9rem);
  --step-4:  clamp(2.3rem,  1.7rem  + 3vw,    4.2rem);
  --step-5:  clamp(2.9rem,  1.9rem  + 5vw,    6.4rem);

  /* Space — spacious scale (density 3/10) */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem; --sp-8: 6rem;   --sp-9: 8rem;

  --wrap: 1240px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --radius: 2px;
  --radius-lg: 4px;

  --shadow-1: 0 1px 2px rgba(12,30,44,.06), 0 8px 24px -12px rgba(12,30,44,.18);
  --shadow-2: 0 2px 6px rgba(12,30,44,.08), 0 28px 60px -28px rgba(12,30,44,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  260ms;

  --z-header: 100; --z-fab: 200; --z-drawer: 300; --z-lightbox: 400;
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
/* every inline SVG here is an icon: give it an intrinsic size so it can never
   collapse to 0x0 inside an auto-width flex parent. Components override. */
svg{ width:1em; height:1em; flex-shrink:0; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-3);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  text-wrap: balance;
}
h1{ font-size: var(--step-5); }
h2{ font-size: var(--step-4); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); line-height:1.25; }
p{ margin:0 0 var(--sp-3); text-wrap: pretty; }

a{ color: inherit; text-decoration-thickness:1px; text-underline-offset:.22em; }
a:hover{ text-decoration-color: var(--accent); }

ul,ol{ margin:0 0 var(--sp-3); padding-left:1.15em; }
li{ margin-bottom:.35em; }

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection{ background: var(--ink); color: var(--bone); }

.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;
}
.skip-link{
  position:absolute; left:var(--sp-3); top:-100px; z-index:500;
  background:var(--ink); color:var(--bone); padding:.8rem 1.2rem;
  font-size:var(--step--1); font-weight:600; letter-spacing:.04em;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus{ top: var(--sp-3); }

/* ------------------------------------------------------------- primitives - */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width: var(--wrap-narrow); }
.section{ padding-block: var(--sp-8); }
.section--tight{ padding-block: var(--sp-7); }
.section--dark{ background: var(--ink); color: var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3{ color: var(--on-dark); }
.section--linen{ background: var(--linen); }

.eyebrow{
  font-size: .72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color: var(--accent); margin:0 0 var(--sp-3); display:flex; align-items:center; gap:.75rem;
}
.eyebrow::after{ content:''; flex:1; height:1px; background: var(--line); max-width:120px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ content:''; flex:1; height:1px; background: var(--line); max-width:120px; }
.section--dark .eyebrow{ color: var(--brass); }
.section--dark .eyebrow::after,.section--dark .eyebrow::before{ background: rgba(246,242,235,.22); }

.lede{ font-size: var(--step-1); line-height:1.5; color: var(--ink-soft); }
.section--dark .lede{ color: var(--on-dark-mute); }
.muted{ color: var(--ink-mute); }
.center{ text-align:center; }

.rule{ height:1px; background: var(--line); border:0; margin:0; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.7rem;
  font-family: var(--font-body); font-size:.9rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius: var(--radius);
  white-space: nowrap;
  cursor:pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn--primary{ background: var(--ink); color: var(--bone); }
.btn--primary:hover{ background: var(--sea); }
.btn--accent{ background: var(--accent); color: var(--white); }
.btn--accent:hover{ background:#74501F; }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--bone); }
.btn--onDark{ background: transparent; color: var(--on-dark); border-color: rgba(246,242,235,.4); }
.btn--onDark:hover{ background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn--full{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; white-space:nowrap;
  font-weight:600; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink); border-bottom:1px solid var(--line); padding-bottom:.35rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow svg{ width:18px; height:18px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover{ color: var(--accent); border-color: var(--accent); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* Rating pill */
.score{
  display:inline-flex; align-items:baseline; gap:.45rem;
  font-family: var(--font-display); font-weight:600;
}
.score b{ font-size:1.35em; letter-spacing:-.02em; }
.score span{ font-size:.72rem; font-family:var(--font-body); font-weight:500;
             letter-spacing:.1em; text-transform:uppercase; color: var(--ink-mute); }
.section--dark .score span{ color: var(--on-dark-mute); }

/* ---------------------------------------------------------------- header -- */
.header{
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  min-height: 78px;
}
.header a{ text-decoration:none; }

.brand{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.brand__mark{ width:51px; height:38px; flex-shrink:0; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }

/* The handwritten wordmark is a single-colour SVG used as a mask, so it can be
   brand navy on light chrome and bone over the hero without a second file. */
.brand__word{
  display:block; width:132px; height:24px; background: var(--brand-ink);
  -webkit-mask: url("/assets/brand/wordmark.svg") left center / contain no-repeat;
          mask: url("/assets/brand/wordmark.svg") left center / contain no-repeat;
  transition: background var(--dur) var(--ease);
}
.brand__sub{
  font-size:.55rem; letter-spacing:.26em; text-transform:uppercase;
  margin-top:.42rem; color: var(--ink-mute); white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap: clamp(.8rem, 1.6vw, 1.85rem); }
.nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  position:relative; padding-block:.4rem; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor; transition: right var(--dur) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }

.header__cta{ display:flex; align-items:center; gap: var(--sp-2); }
.header__cta .btn{ min-height:44px; padding:.6rem 1.15rem; font-size:.76rem; }

/* transparent over hero */
.header--over{ background: transparent; color: var(--on-dark); }
.header--over .brand__sub{ color: rgba(246,242,235,.75); }
.header--over .brand__word{ background: var(--on-dark); }
.header--over .btn--ghost{ color: var(--on-dark); border-color: rgba(246,242,235,.5); }
.header--over .btn--ghost:hover{ background: var(--on-dark); color: var(--ink); }
.header--over::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(8,20,30,.55), rgba(8,20,30,0));
}
.header--solid{
  background: rgba(250,248,244,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
.header--solid .brand__sub{ color: var(--ink-mute); }
.header--solid .brand__word{ background: var(--brand-ink); }

/* burger */
.burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:none; border:1px solid currentColor; border-radius:var(--radius);
  color:inherit; cursor:pointer; flex-shrink:0;
}
.burger span{ display:block; width:18px; height:1.5px; background: currentColor; position:relative; }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:18px; height:1.5px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background: transparent; }
.burger[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

/* drawer */
.drawer{
  position: fixed; inset:0; z-index: var(--z-drawer);
  background: var(--ink); color: var(--on-dark);
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
  transform: translateY(-100%); transition: transform 420ms var(--ease);
  overflow-y:auto;
}
.drawer[data-open="true"]{ transform: translateY(0); }
.drawer__nav{ display:flex; flex-direction:column; gap:.15rem; }
.drawer__nav a{
  font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.9rem);
  font-weight:500; letter-spacing:-.02em; text-decoration:none; padding:.28em 0;
  border-bottom:1px solid rgba(246,242,235,.12);
}
.drawer__nav a[aria-current="page"]{ color: var(--brass); }
.drawer__foot{ margin-top: var(--sp-5); display:grid; gap:.7rem; font-size:.95rem; }
.drawer__foot .btn{ margin-bottom:.6rem; }
.drawer__foot a{ color: var(--on-dark-mute); text-decoration:none; }
.drawer .brand__word{ background: var(--on-dark); }
.drawer .brand__sub{ color: var(--on-dark-mute); }
.drawer__close svg{ width:20px; height:20px; }
.drawer__close{
  position:absolute; top:1.4rem; right:var(--gutter);
  width:46px; height:46px; background:none; border:1px solid rgba(246,242,235,.4);
  color: var(--on-dark); cursor:pointer; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
}

@media (max-width: 1080px){
  .nav{ display:none; }
  .header__cta .btn--ghost{ display:none; }
  .burger{ display:flex; }
}
@media (max-width: 720px){
  .header__inner{ min-height:68px; }
  .header__cta .btn{ display:none; }
  .brand__mark{ width:43px; height:32px; }
  .brand__word{ width:112px; height:21px; }
  .brand__sub{ font-size:.5rem; letter-spacing:.22em; margin-top:.34rem; }
  .pad-top-header{ padding-top:68px; }
}
@media (max-width: 380px){ .brand__sub{ display:none; } }

/* ------------------------------------------------------------------ hero -- */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:flex-end;
       color: var(--on-dark); overflow:hidden; background: var(--ink); }
.hero--page{ min-height: clamp(460px, 72svh, 760px); }
.hero__media{ position:absolute; inset:0; background: var(--ink-2); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,20,30,.86) 0%, rgba(8,20,30,.42) 42%, rgba(8,20,30,.12) 72%, rgba(8,20,30,.35) 100%);
}
.hero__inner{ position:relative; width:100%; padding-block: var(--sp-7) var(--sp-6); }
.hero h1{ max-width: 15ch; margin-bottom: var(--sp-4); }
.hero__sub{ max-width: 52ch; font-size: var(--step-1); color: rgba(246,242,235,.9); }
.hero .eyebrow{ color: var(--brass); }
.hero .eyebrow::after{ background: rgba(246,242,235,.3); }
.hero__actions{ margin-top: var(--sp-5); }
.hero__scroll{
  position:absolute; right: var(--gutter); bottom:2rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color: rgba(246,242,235,.65); display:flex; flex-direction:column;
  align-items:center; gap:.6rem; text-decoration:none;
  writing-mode: vertical-rl;
}
@media (max-width: 1080px), (max-height: 700px){ .hero__scroll{ display:none; } }
.hero__scroll::after{ content:''; width:1px; height:46px; background: rgba(246,242,235,.4);
  animation: dropline 2.4s var(--ease) infinite; }
@keyframes dropline{ 0%,100%{ transform:scaleY(.35); transform-origin:top; } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .hero__scroll::after{ animation:none; } }

/* trust strip */
.trust{ background: var(--ink-2); color: var(--on-dark); }
.trust__grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-left:1px solid rgba(246,242,235,.14);
}
.trust__cell{ padding: var(--sp-5) var(--sp-3); text-align:center;
  border-right:1px solid rgba(246,242,235,.14); }
.trust__n{ font-family: var(--font-display); font-size: var(--step-3); font-weight:500;
  display:block; line-height:1; margin-bottom:.55rem; }
.trust__l{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--on-dark-mute); }
@media (max-width:720px){ .trust__grid{ grid-template-columns: repeat(2,1fr); } }

/* ------------------------------------------------------------ stay cards -- */
.stays{ display:grid; gap: var(--sp-7); }
.stay{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items:center;
}
.stay:nth-child(even) .stay__media{ order:2; }
.stay__media{ position:relative; }
.stay__media a{ display:block; overflow:hidden; background: var(--linen); }
.stay__media img{
  width:100%; aspect-ratio: 4/3; object-fit:cover;
  transition: transform 700ms var(--ease); will-change: transform;
}
.stay__media a:hover img{ transform: scale(1.04); }
.stay__idx{
  position:absolute; top:-.4em; left:-.15em; z-index:1;
  font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem);
  font-weight:400; color: var(--bone); line-height:1;
  text-shadow: 0 2px 24px rgba(12,30,44,.4); pointer-events:none;
}
.stay__kicker{ font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color: var(--accent); margin-bottom:.9rem; }
.stay h3{ margin-bottom:.5rem; }
.stay__type{ font-size:.95rem; color: var(--ink-mute); margin-bottom: var(--sp-4); }
.stay__facts{
  display:flex; flex-wrap:wrap; gap: .55rem; margin: var(--sp-4) 0;
  list-style:none; padding:0;
}
.stay__facts li{
  font-size:.72rem; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; border:1px solid var(--line); border-radius: var(--radius);
  padding:.7rem .95rem; margin:0; color: var(--ink-soft); background: var(--bone);
}
@media (max-width: 900px){
  .stay{ grid-template-columns:1fr; gap: var(--sp-4); }
  .stay:nth-child(even) .stay__media{ order:0; }
}

/* grid of cards (stays index) */
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
        gap: var(--sp-5); align-items:stretch; }
.card{ display:flex; flex-direction:column; text-decoration:none; background: var(--bone); }
.card__img{ overflow:hidden; margin-bottom: var(--sp-4); background: var(--linen); }
.card__img img{ width:100%; aspect-ratio: 3/2; object-fit:cover;
  transition: transform 700ms var(--ease); }
.card:hover .card__img img{ transform: scale(1.05); }
.card h3{ font-size: var(--step-1); line-height:1.25; margin-bottom:.45rem; }
.card p{ font-size:.9rem; color: var(--ink-mute); margin-bottom:0; }
.cards .stay__kicker{ line-height:1.4; margin-bottom:.6rem; }

/* In the multi-column grid the two variable-length text blocks — the kicker and
   the one-line description — decide where the chips land. Give both a two-line
   floor so the chip rows, and the scores under them, line up across every card.
   A single column has nothing to line up with and shouldn't pay for it. */
@media (min-width: 620px){
  .cards .stay__kicker{ min-height:2.8em; }   /* 2 lines at .72rem / 1.4 */
  .cards h3 + p{ min-height:3.3em; }          /* 2 lines at .9rem / 1.65 */
}
.card .stay__facts{ margin: var(--sp-4) 0 var(--sp-4); }
.card .score{ margin-top:auto; margin-bottom:0; padding-top: var(--sp-2); }

/* --------------------------------------------------------------- features - */
.grid-3{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
         gap: var(--sp-5); }
.grid-2{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr));
         gap: var(--sp-6); }
.feature{ border-top:1px solid var(--line); padding-top: var(--sp-3); }
.section--dark .feature{ border-color: rgba(246,242,235,.2); }
.feature__ico{ width:26px; height:26px; color: var(--accent); margin-bottom: var(--sp-3); }
.section--dark .feature__ico{ color: var(--brass); }
.feature h3{ font-size: var(--step-1); line-height:1.25; margin-bottom:.4rem; }
.feature p{ font-size:.92rem; color: var(--ink-mute); margin:0; }
.section--dark .feature p{ color: var(--on-dark-mute); }

/* split image + text */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,5rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ background: var(--linen); }
.split__media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .split__media img{ aspect-ratio: 4/3; }
}

/* ---------------------------------------------------------------- gallery - */
.gal{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: .5rem; grid-auto-flow: dense;
}
.gal button{
  padding:0; border:0; background: var(--linen); cursor:pointer; overflow:hidden;
  display:block; position:relative; aspect-ratio: 3/2;
}
.gal img{ width:100%; height:100%; object-fit:cover; transition: transform 600ms var(--ease),
  filter var(--dur) var(--ease); }
.gal button:hover img{ transform: scale(1.05); }
.gal button::after{
  content:''; position:absolute; inset:0; background: rgba(12,30,44,0);
  transition: background var(--dur) var(--ease);
}
.gal button:hover::after{ background: rgba(12,30,44,.12); }
.gal button.is-wide{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width:640px){
  .gal button.is-wide{ grid-column: span 1; grid-row: span 1; aspect-ratio: 3/2; }
}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index: var(--z-lightbox); background: rgba(7,16,24,.97);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition: opacity 220ms var(--ease);
}
.lb[data-open="true"]{ display:flex; opacity:1; }
.lb__fig{ margin:0; max-width: 94vw; max-height: 88svh; display:flex;
  flex-direction:column; align-items:center; gap:.9rem; }
.lb__fig img{ max-width:94vw; max-height: 78svh; width:auto; height:auto;
  object-fit:contain; background:transparent; }
.lb__cap{ color: rgba(246,242,235,.72); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; }
.lb__btn{
  position:absolute; background: rgba(246,242,235,.1); border:1px solid rgba(246,242,235,.28);
  color: var(--on-dark); width:56px; height:56px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur) var(--ease);
}
.lb__btn svg{ width:22px; height:22px; }
.lb__btn:hover{ background: rgba(246,242,235,.24); }
.lb__prev{ left: clamp(.5rem, 3vw, 2.5rem); top:50%; transform:translateY(-50%); }
.lb__next{ right: clamp(.5rem, 3vw, 2.5rem); top:50%; transform:translateY(-50%); }
.lb__close{ top: clamp(.6rem,2vw,1.5rem); right: clamp(.5rem,3vw,2.5rem); }
@media (max-width:640px){ .lb__btn{ width:48px; height:48px; }
  .lb__prev{ left:.4rem; } .lb__next{ right:.4rem; } }

/* ---------------------------------------------------------------- reviews - */
.reviews{ display:flex; flex-wrap:wrap; gap: var(--sp-5); }
.review{ flex: 1 1 300px; max-width: 460px; display:flex; flex-direction:column; gap: var(--sp-3);
  border-top:1px solid var(--line); padding-top: var(--sp-4); }
.section--dark .review{ border-color: rgba(246,242,235,.2); }
.review blockquote{ margin:0 0 .4rem; font-family: var(--font-display); font-size: var(--step-1);
  line-height:1.4; letter-spacing:-.012em; }
.review figcaption{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-mute); margin-top:auto; }
.section--dark .review figcaption{ color: var(--on-dark-mute); }
.stars{ display:inline-flex; gap:2px; color: var(--brass); }
.stars svg{ width:14px; height:14px; }

/* ------------------------------------------------------------------ table - */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.cmp{ width:100%; border-collapse:collapse; min-width: 680px; font-size:.92rem; }
table.cmp th, table.cmp td{ padding: var(--sp-3) var(--sp-3); text-align:left;
  border-bottom:1px solid var(--line); vertical-align:top; }
table.cmp thead th{
  font-family: var(--font-display); font-size: var(--step-1); font-weight:500;
  border-bottom:1px solid var(--ink); letter-spacing:-.01em;
}
table.cmp tbody th{ font-weight:500; color: var(--ink-mute); font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
table.cmp tbody tr:hover{ background: var(--linen); }

/* dl facts */
.facts{ display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
        gap:0; border-top:1px solid var(--line); }
.facts div{ padding: var(--sp-3) 0; border-bottom:1px solid var(--line-soft); }
.facts dt{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-mute); margin-bottom:.35rem; }
.facts dd{ margin:0; font-family: var(--font-display); font-size: var(--step-1); }

/* amenities */
.amen{ display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
       gap: var(--sp-5); }
.amen h3{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  font-family: var(--font-body); font-weight:600; color: var(--accent);
  padding-bottom:.7rem; border-bottom:1px solid var(--line); margin-bottom: var(--sp-3); }
.amen ul{ list-style:none; padding:0; margin:0; }
.amen li{ display:flex; gap:.6rem; font-size:.92rem; margin-bottom:.55rem; color: var(--ink-soft); }
.amen li svg{ flex-shrink:0; width:15px; height:15px; margin-top:.35em; color: var(--accent); }

/* rules list */
.rules{ display:grid; gap:0; border-top:1px solid var(--line); }
.rules > div{ display:grid; grid-template-columns: minmax(120px,180px) 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom:1px solid var(--line-soft); }
.rules dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-mute);
  padding-top:.25em; }
.rules dd{ margin:0; font-size:.95rem; }
@media (max-width:560px){ .rules > div{ grid-template-columns:1fr; gap:.3rem; } }

/* ------------------------------------------------------------------- faq -- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding: var(--sp-4) 3rem var(--sp-4) 0;
  position:relative; font-family: var(--font-display); font-size: var(--step-2);
  font-weight:500; letter-spacing:-.015em; line-height:1.25;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color: var(--accent); }
.faq summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:16px; height:16px;
  margin-top:-8px;
  background: currentColor;
  -webkit-mask: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq .faq__a{ padding: 0 max(3rem, 12%) var(--sp-5) 0; color: var(--ink-soft); max-width: 68ch; }

/* ------------------------------------------------------------------ forms - */
.form{ display:grid; gap: var(--sp-4); }
.field{ display:grid; gap:.5rem; }
.field label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color: var(--ink-soft); }
.field .req{ color: var(--accent); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--white); border:1px solid var(--line);
  border-radius: var(--radius); padding: .95rem 1rem; min-height:52px; width:100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.6; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140,95,38,.16);
}
.field .hint{ font-size:.8rem; color: var(--ink-mute); }
.field .err{ font-size:.82rem; color:#A32020; font-weight:500; display:none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select{ border-color:#A32020; }
.field[data-invalid="true"] .err{ display:block; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

/* phone with country code */
.tel{ display:grid; grid-template-columns: 148px 1fr; gap:.5rem; }
.tel select{ font-size:.95rem; }
@media (max-width:420px){ .tel{ grid-template-columns:1fr; } }

.form__note{ font-size:.84rem; color: var(--ink-mute); }
.form__status{ font-size:.92rem; padding: var(--sp-3); border:1px solid var(--line);
  background: var(--linen); display:none; }
.form__status[data-show="true"]{ display:block; }

/* contact tiles */
.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:0;
  border-top:1px solid var(--line); }
.contact-list li{ margin:0; border-bottom:1px solid var(--line); }
.contact-list a, .contact-list .ci{
  display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-4) 0;
  text-decoration:none; transition: color var(--dur) var(--ease);
}
.contact-list a:hover{ color: var(--accent); }
.contact-list svg{ width:20px; height:20px; color: var(--accent); flex-shrink:0; }
.contact-list .ct{ display:grid; gap:.15rem; }
.contact-list .ct b{ font-size:1.02rem; font-weight:500; }
.contact-list .ct span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-mute); }

.map-frame{ border:1px solid var(--line); background: var(--linen); }
.map-frame iframe{ display:block; width:100%; height:clamp(300px, 45svh, 480px); border:0; }

/* ----------------------------------------------------------------- footer - */
/* extra bottom padding keeps the last row clear of the fixed WhatsApp button */
.footer{ background: var(--ink); color: var(--on-dark); padding-block: var(--sp-7) var(--sp-8); }
.footer a{ color: var(--on-dark-mute); text-decoration:none; }
.footer a:hover{ color: var(--on-dark); }
.footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-5);
  padding-bottom: var(--sp-6); border-bottom:1px solid rgba(246,242,235,.16); }
.footer h2{ font-family: var(--font-body); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color: var(--brass); margin:0 0 var(--sp-3); font-weight:600; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.92rem; }
.footer__logo{ display:inline-block; margin-bottom:1.25rem; }
.footer__logo img{ width:210px; height:auto; }
.footer__brand p{ font-size:.92rem; color: var(--on-dark-mute); max-width:34ch; }
.footer__bottom{ padding-top: var(--sp-4); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap: var(--sp-2) var(--sp-4); font-size:.8rem;
  color: var(--on-dark-mute); }
.footer__bottom .fixer-credit:hover{ color: var(--brass); }
.footer__bottom .fixer-credit:hover .fixer-credit__mark{ opacity:1; }
@media (max-width: 880px){ .footer__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer__top{ grid-template-columns: 1fr; } }

/* The Fixer credit — shared markup and class names across every client site,
   only the colours are taken from this palette. */
.fixer-credit{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding-block:.5rem;
  color: var(--on-dark-mute); text-decoration:none;
  transition: color var(--dur) var(--ease);
}
.fixer-credit:hover{ color: var(--on-dark); }
.fixer-credit__mark{ flex:none; width:13px; height:15px; opacity:.7;
  transition: opacity var(--dur) var(--ease); }
.fixer-credit:hover .fixer-credit__mark{ opacity:1; }
.fixer-credit__by{
  font-family: Arial, Helvetica, sans-serif; font-size:.62rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
}
.fixer-credit__name{ display:inline-flex; align-items:baseline; font-size:.9rem; line-height:1; }
.fixer-credit__the{ font-family: Arial, Helvetica, sans-serif; font-weight:400; }
.fixer-credit__fixer{
  font-family: 'Arial Black', 'Arial Bold', Arial, Helvetica, sans-serif;
  font-weight:900; letter-spacing:-.01em;
}
@media (pointer: fine){ .fixer-credit{ min-height:0; padding-block:0; } }

/* --------------------------------------------------------- floating whatsapp */
.fab{
  position:fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-fab);
  display:inline-flex; align-items:center; gap:.65rem;
  background:#1FA855; color:#fff; text-decoration:none;
  padding:.85rem 1.15rem; border-radius:999px; box-shadow: var(--shadow-2);
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fab:hover{ transform: translateY(-2px); background:#17914A; }
.fab svg{ width:22px; height:22px; flex-shrink:0; }
@media (max-width: 560px){
  .fab span{ display:none; }
  .fab{ padding:.95rem; }
}

/* ------------------------------------------------------------- animations - */
[data-reveal]{ opacity:0; transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay: 80ms; }
[data-reveal][data-delay="2"]{ transition-delay: 160ms; }
[data-reveal][data-delay="3"]{ transition-delay: 240ms; }
[data-reveal][data-delay="4"]{ transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .stay__media img, .card__img img, .gal img{ transition:none !important; }
  .btn:hover{ transform:none; }
}

/* ------------------------------------------------------------- breadcrumb - */
.crumbs{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-mute); padding-top: var(--sp-4); }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color: var(--accent); }
.crumbs span{ margin-inline:.5rem; opacity:.5; }

/* prose */
.prose p{ font-size: var(--step-0); line-height:1.75; color: var(--ink-soft); }
.prose p:first-of-type{ font-size: var(--step-1); line-height:1.55; color: var(--ink); }
.prose h3{ margin-top: var(--sp-6); }

/* misc */
.pad-top-header{ padding-top: 78px; }
.tag{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:.42rem .7rem; background: var(--ink); color: var(--bone); }
.tag--accent{ background: var(--accent); color:#fff; }