/* =========================================================================
   Coastal Charm — Glamping on the Arabian Sea
   Design system + page styles
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Colour — taken from the Coastal Charm logo:
     navy ground, sunset disc, blue water, cream type. */
  --ink:        #14103F;   /* aufgehelltes Logo-Navy - grosse Flaechen  */
  --ink-2:      #1E1A55;
  --ink-3:      #2A2570;
  --ink-deep:   #090439;   /* echtes Logo-Navy - Footer, Hero-Verlauf    */
  --cream:      #FDF8EF;   /* warmes Papierweiss - Seitenhintergrund     */
  --sand:       #F8EFE0;   /* weicher Sandton - ruhige Abschnitte        */
  --sand-2:     #EADCC5;   /* Linien auf Sand                            */
  --terracotta: #F47B20;   /* weicheres Logo-Orange - Flaechen, CTA      */
  --terracotta-d:#DD660F;
  --on-orange:  #14103F;   /* Text AUF Orange - Weiss haelt nur 2,7:1    */
  --accent-text:#B44E05;   /* Orange ALS Text auf Hell - 4,9:1 auf Cream */
  --gold:       #F9A201;   /* Logo-Amber - Linien, Eyebrow               */
  --sun:        #FDD302;   /* Logo-Gelb - hellster Akzent                */
  --water:      #15AAE3;   /* Logo-Wasserblau - zweiter Akzent           */
  --water-deep: #0666CD;
  --on-dark:    #D6D2E4;   /* Fliesstext auf Navy                        */
  --on-dark-dim:#A9A4C4;   /* Labels auf Navy                            */
  --text:       #2B2740;   /* waermeres Dunkel statt kaltem Blauschwarz  */
  --muted:      #66607A;
  --white:      #FFFFFF;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-hero:  clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
  --fs-h2:    clamp(2rem,   1.35rem + 2.6vw, 3.4rem);
  --fs-h3:    clamp(1.25rem,1.08rem + 0.7vw, 1.6rem);
  --fs-lead:  clamp(1.05rem,0.98rem + 0.45vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-eyebrow:0.75rem;

  /* Space */
  --gutter:   clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --section:  clamp(4.5rem, 2.5rem + 8vw, 9rem);
  --maxw:     1240px;
  --maxw-text: 62ch;

  --radius:   4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(9,4,57,.06), 0 4px 14px rgba(9,4,57,.06);
  --shadow-md: 0 4px 12px rgba(9,4,57,.08), 0 18px 40px rgba(9,4,57,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.015em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px}

/* ---------- 3. Layout helpers -------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink);color:var(--sand)}
.section--ink p{color:var(--on-dark)}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:0 0 44px;height:1px;background:var(--gold)}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 44px;height:1px;background:var(--gold)}
.section--ink .eyebrow{color:var(--gold)}
.section--ink .eyebrow::after,.section--ink .eyebrow::before{background:rgba(249,162,1,.45)}

h2.h2{font-size:var(--fs-h2);max-width:20ch}
h2.h2--wide{max-width:26ch}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:var(--maxw-text);line-height:1.6}
.section--ink .lead{color:var(--on-dark)}
.section-head{margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem)}
.section-head--center{text-align:center;display:flex;flex-direction:column;align-items:center}
.section-head--center h2.h2{max-width:22ch}
.section-head--center .lead{margin-inline:auto;text-align:center}

/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;
  font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;border:1px solid transparent;border-radius:var(--radius);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--terracotta);color:var(--on-orange);border-color:var(--terracotta)}
.btn--primary:hover{background:var(--terracotta-d);border-color:var(--terracotta-d);color:var(--on-orange)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--sand-2)}
.btn--outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--wa{background:#1FA855;color:#fff;border-color:#1FA855}
.btn--wa:hover{background:#178A45;border-color:#178A45}
.btn--sm{padding:.65rem 1.25rem;font-size:.85rem}
.btn--block{width:100%}

/* ---------- 5. Header ---------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.site-header__inner{
  display:flex;align-items:center;gap:1.5rem;
  height:80px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.site-header.is-stuck{
  background:rgba(251,247,240,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(9,4,57,.08);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand__mark{width:38px;height:38px;flex:0 0 auto;border-radius:8px;display:block}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);font-size:1.22rem;font-weight:600;
  letter-spacing:.01em;color:var(--white);transition:color .35s var(--ease);
}
.brand__tag{
  font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.68);margin-top:.32rem;transition:color .35s var(--ease);
}
.is-stuck .brand__name{color:var(--ink)}
.is-stuck .brand__tag{color:var(--muted)}

.nav{margin-left:auto;display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;gap:2rem}
.nav__link{
  text-decoration:none;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.9);
  padding-block:.35rem;position:relative;transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.is-stuck .nav__link{color:var(--text)}

.nav__cta{display:flex;align-items:center;gap:.6rem}
.is-stuck .btn--ghost{color:var(--ink);border-color:var(--sand-2)}
.is-stuck .btn--ghost:hover{background:var(--ink);color:var(--cream)}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;padding:.5rem;
  width:44px;height:44px;position:relative;z-index:90;
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:#fff;margin:5px auto;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease),background .3s var(--ease);
}
.is-stuck .nav-toggle span{background:var(--ink)}
.nav-open .nav-toggle span{background:var(--cream)}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0;background:var(--ink);
    flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;
    margin:0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  }
  .nav-open .nav{opacity:1;visibility:visible}
  .nav__list{flex-direction:column;text-align:center;gap:1.6rem}
  .nav__link{font-size:1.5rem;font-family:var(--font-display);color:var(--sand)}
  .is-stuck .nav__link{color:var(--sand)}
  .nav__cta{flex-direction:column;width:min(280px,80vw)}
  .nav__cta .btn{width:100%}
  .is-stuck .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
}

/* ---------- 6. Hero ------------------------------------------------------ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--white);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
/* Slides liegen uebereinander und werden ueberblendet. Ohne JS bleibt
   .is-active auf dem ersten Slide stehen und alles funktioniert weiter. */
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center 55%}

/* Verlaufswerte sind nicht frei gewaehlt: sie sind gegen alle vier Slides
   durchgerechnet, damit jeder Textblock den WCAG-Kontrast haelt. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(9,4,57,.66) 0%,rgba(9,4,57,.38) 44%,
                    rgba(9,4,57,0) 72%),
    linear-gradient(to bottom,rgba(9,4,57,.58) 0%,rgba(9,4,57,.26) 14%,
                    rgba(9,4,57,.38) 38%,rgba(9,4,57,.90) 100%);
}

}
.hero__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  /* Oben MUSS die Header-Hoehe frei bleiben: der Hero fuellt sich von unten
     nach oben, und ohne diese Reserve schiebt sich der Text unter den Header.
     Genau das war der Ueberlappungsfehler auf dem Handy. */
  padding:calc(80px + 1.25rem) var(--gutter) clamp(2.5rem,1.5rem + 4vw,4.5rem);
}
.hero__eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;margin:0 0 1.4rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hero h1{
  font-size:var(--fs-hero);font-weight:400;max-width:15ch;
  text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero__lead{
  font-size:var(--fs-lead);color:rgba(255,255,255,.92);max-width:48ch;
  margin:1.6rem 0 2.2rem;text-shadow:0 1px 16px rgba(0,0,0,.35);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.8rem}

.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.25rem 2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.22);
}
.hero__facts{display:flex;flex-wrap:wrap;gap:.6rem 2rem;flex:1 1 auto}

.hero__dots{display:flex;gap:.25rem;flex:0 0 auto;margin-bottom:-.75rem}
/* Sichtbar ist nur der 3px-Strich, angefasst wird die ganze Flaeche —
   sonst waere das Tap-Ziel auf dem Handy 30x3 px gross. */
.hero__dot{
  width:34px;padding:14px 2px;border:0;background:none;cursor:pointer;
  display:block;line-height:0;
}
.hero__dot::before{
  content:"";display:block;height:3px;border-radius:2px;
  background:rgba(255,255,255,.4);transition:background .3s var(--ease);
}
.hero__dot:hover::before{background:rgba(255,255,255,.75)}
.hero__dot.is-active::before{background:#fff}
.hero__dot:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:4px}
.hero__fact{
  display:flex;align-items:center;gap:.55rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.88);
}
.hero__fact svg{width:15px;height:15px;flex:0 0 auto;color:var(--gold)}

.hero__scroll{
  position:absolute;right:var(--gutter);bottom:clamp(2.5rem,1.5rem + 4vw,4.5rem);
  writing-mode:vertical-rl;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.65);text-decoration:none;display:none;
}
.hero__scroll::after{content:"";display:block;width:1px;height:52px;margin:.9rem auto 0;
  background:linear-gradient(rgba(255,255,255,.6),transparent)}
@media (min-width:1100px){.hero__scroll{display:block}}



/* =========================================================================
   Hero auf dem Handy: Bild oben, Text darunter
   -------------------------------------------------------------------------
   Auf schmalen Schirmen liegt der Text NICHT mehr ueber dem Bild. Er wuerde
   dort genau die Domes verdecken, und ein Verlauf, der ihn lesbar macht,
   nimmt dem Bild zwangslaeufig die Wirkung. Stattdessen: Bild oben in festem
   Seitenverhaeltnis, Text darunter auf ruhigem Navy. Kein Verlauf noetig,
   Kontrast dadurch garantiert.
   ========================================================================= */
@media (max-width:760px){
  .hero{
    min-height:0;
    display:block;
    background:var(--ink);
  }

  /* Bild aus dem Overlay in den normalen Fluss holen */
  .hero__media{
    position:relative;
    z-index:auto;
    aspect-ratio:4/3;
    width:100%;
  }
  .hero__slide img{object-position:center 45%}

  /* Nur noch ein zarter Verlauf oben, damit das Logo im Header lesbar bleibt */
  .hero::after{
    content:"";position:absolute;top:0;left:0;right:0;height:130px;z-index:1;
    background:linear-gradient(to bottom,rgba(9,4,57,.55),rgba(9,4,57,0));
    pointer-events:none;
  }

  /* Slider-Punkte an den unteren Bildrand: 4/3 auf voller Breite = 75vw hoch */
  .hero__dots{
    position:absolute;z-index:2;
    top:calc(75vw - 2.4rem);
    right:var(--gutter);
    margin:0;
  }

  /* Der Textblock - eigener Kasten, kein Overlay.
     KEIN position:relative — sonst waeren die absolut gesetzten Slider-Striche
     an diesem Kasten ausgerichtet statt am Bild darueber. */
  .hero__inner{
    padding:1.75rem var(--gutter) 2.25rem;
    background:var(--ink);
  }
  .hero__eyebrow{
    color:var(--gold);            /* auf ruhigem Navy: 8,7:1 */
    text-shadow:none;
    font-size:.625rem;letter-spacing:.2em;margin-bottom:.85rem;
  }
  .hero h1{
    font-size:clamp(2.1rem,1.2rem + 4.6vw,3rem);max-width:none;text-shadow:none;
  }
  .hero__lead{
    font-size:1rem;line-height:1.6;margin:.9rem 0 1.5rem;max-width:none;
    color:var(--on-dark);text-shadow:none;
  }
  .hero__actions{gap:.6rem;margin-bottom:1.5rem;flex-direction:column}
  .hero__actions .btn{width:100%}
  .hero__foot{padding-top:1.1rem;border-top-color:rgba(249,162,1,.28)}
  .hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;width:100%}
  .hero__fact{font-size:.75rem;gap:.4rem;align-items:flex-start;color:var(--on-dark)}
  .hero__fact svg{margin-top:.15rem;color:var(--gold)}
}
@media (max-width:420px){
  .hero__facts{grid-template-columns:1fr}
}


/* Der Hero-Text ist auf dem Desktop vollstaendig, auf dem Handy gekuerzt —
   65 Woerter wuerden dort den Buchungs-Button zu weit nach unten schieben. */
@media (max-width:760px){
  .hero__lead-more{display:none}
}

/* ---------- 7. Intro / stats --------------------------------------------- */
.intro{display:grid;grid-template-columns:1fr;gap:clamp(2rem,1rem + 4vw,4.5rem)}
@media (min-width:900px){.intro{grid-template-columns:1.05fr .95fr;align-items:center}}
.intro__figure{position:relative}
.intro__figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:4/5;object-fit:cover;width:100%}
.intro__badge{
  position:absolute;left:-1.25rem;bottom:1.75rem;
  background:var(--ink);color:var(--sand);padding:1.15rem 1.5rem;border-radius:var(--radius);
  box-shadow:var(--shadow-md);max-width:230px;
}
.intro__badge strong{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--gold);line-height:1}
.intro__badge span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-dim);display:block;margin-top:.4rem}
/* The negative offset only has room to hang out once there is a side gutter. */
@media (max-width:640px){.intro__badge{left:1rem;bottom:1rem}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--sand-2);border:1px solid var(--sand-2);border-radius:var(--radius);
  margin-top:2.5rem;overflow:hidden}
.stat{background:var(--cream);padding:1.5rem 1.25rem;text-align:center}
.stat strong{display:block;font-family:var(--font-display);font-size:1.85rem;color:var(--accent-text);line-height:1}
.stat span{display:block;margin-top:.45rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- 8. Feature cards --------------------------------------------- */
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.card{
  background:var(--cream);border:1px solid var(--sand-2);border-radius:var(--radius-lg);
  padding:2rem 1.75rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.section--sand .card{background:var(--white)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card__icon{width:42px;height:42px;color:var(--accent-text);margin-bottom:1.3rem}
.card h3{font-size:var(--fs-h3);margin-bottom:.7rem}
.card p{font-size:.9375rem;color:var(--muted);margin:0}

/* ---------- 9. Split blocks (stay / dine) -------------------------------- */
.split{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (min-width:920px){
  .split{grid-template-columns:1fr 1fr}
  .split--flip .split__media{order:2}
}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:5/4;object-fit:cover;width:100%}
.split__body h2{margin-bottom:1.2rem}

.spec-title{
  font-family:var(--font-body);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:2rem 0 -.5rem;
}
.spec-title span{color:var(--accent-text)}
.section--ink .spec-title{color:var(--on-dark-dim)}
.section--ink .spec-title span{color:var(--gold)}

.speclist{margin:2rem 0;border-top:1px solid var(--sand-2)}
.spec-title + .speclist{margin-top:1rem}
.section--ink .speclist{border-color:rgba(249,162,1,.25)}
.speclist li{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.85rem 0;border-bottom:1px solid var(--sand-2);font-size:.9375rem;
}
.section--ink .speclist li{border-color:rgba(249,162,1,.25)}
.speclist svg{width:18px;height:18px;flex:0 0 auto;margin-top:.22rem;color:var(--accent-text)}
.section--ink .speclist svg{color:var(--gold)}

.pricebox{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;
  padding:1.35rem 1.6rem;background:var(--sand);border-radius:var(--radius);
  margin-bottom:1.8rem;border-left:3px solid var(--terracotta);
}
.section--ink .pricebox{background:rgba(255,255,255,.06);border-left-color:var(--gold)}
.pricebox strong{font-family:var(--font-display);font-size:1.75rem;color:var(--ink);line-height:1}
.section--ink .pricebox strong{color:var(--gold)}
.pricebox span{font-size:.85rem;color:var(--muted)}
.section--ink .pricebox span{color:var(--on-dark-dim)}

/* ---------- 10. Quote feature -------------------------------------------- */
.quote{
  text-align:center;max-width:24ch;margin-inline:auto;
  font-family:var(--font-display);font-size:clamp(1.6rem,1.1rem + 2.2vw,2.8rem);
  font-style:italic;line-height:1.24;color:var(--gold);
}
.quote-sub{text-align:center;margin-top:1.5rem;color:var(--on-dark);max-width:54ch;margin-inline:auto}

/* ---------- 11. Experience tiles ----------------------------------------- */
.tiles{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.tile{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:340px;display:flex;align-items:flex-end;isolation:isolate;
  color:var(--white);
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(9,4,57,.88) 0%,rgba(9,4,57,.35) 45%,rgba(9,4,57,.05) 100%)}
.tile:hover img{transform:scale(1.06)}
.tile__body{padding:1.75rem}
.tile__body h3{font-size:1.35rem;margin-bottom:.45rem}
.tile__body p{font-size:.875rem;color:rgba(255,255,255,.85);margin:0}
.tile__meta{
  display:inline-block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.65rem;font-weight:600;
}

/* ---------- 12. Gallery -------------------------------------------------- */
.gallery{
  display:grid;gap:.75rem;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:150px;
}
@media (min-width:760px){.gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--sand-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}

/* ---------- 13. Getting here --------------------------------------------- */
.journey{display:grid;gap:clamp(2rem,1rem + 4vw,4rem)}
@media (min-width:920px){.journey{grid-template-columns:.9fr 1.1fr;align-items:start}}
.routes{border-top:1px solid var(--sand-2)}
.route{display:flex;align-items:baseline;gap:1.25rem;padding:1.15rem 0;border-bottom:1px solid var(--sand-2)}
.route__from{flex:1;font-weight:500}
.route__from small{display:block;font-weight:400;font-size:.8125rem;color:var(--muted);margin-top:.15rem}
.route__val{font-family:var(--font-display);font-size:1.25rem;color:var(--accent-text);white-space:nowrap}
.route__time{font-size:.8125rem;color:var(--muted);white-space:nowrap;min-width:5.5rem;text-align:right}
.map{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);
  filter:saturate(.85);box-shadow:var(--shadow-sm);background:var(--sand-2)}

/* ---------- 14. FAQ ------------------------------------------------------ */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--sand-2)}
.faq details{border-bottom:1px solid var(--sand-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--font-display);font-size:1.15rem;transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.75rem;width:11px;height:11px;
  border-right:1.5px solid var(--terracotta);border-bottom:1.5px solid var(--terracotta);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.95rem}
.faq p{padding:0 2.5rem 1.5rem 0;color:var(--muted);font-size:.9375rem}

/* ---------- 15. Booking -------------------------------------------------- */
.booking{display:grid;gap:clamp(2rem,1rem + 4vw,4rem)}
@media (min-width:920px){.booking{grid-template-columns:1fr 1.1fr}}
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field--row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
/* Two columns squeeze date pickers and long select labels on phones. */
@media (max-width:560px){.field--row{grid-template-columns:1fr}}
.field label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--on-dark-dim)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.9375rem;padding:.85rem 1rem;color:var(--sand);
  background:rgba(255,255,255,.06);border:1px solid rgba(249,162,1,.28);
  border-radius:var(--radius);transition:border-color .25s var(--ease),background .25s var(--ease);
  width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:#767DA3}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.1)
}
.field select option{background:var(--ink);color:var(--sand)}
.field textarea{resize:vertical;min-height:110px}
.form__note{font-size:.8125rem;color:var(--on-dark-dim)}
.form__note a{color:var(--gold)}

.contact-list{margin-top:2.25rem;display:grid;gap:1.1rem}
.contact-item{display:flex;gap:.9rem;align-items:flex-start;font-size:.9375rem}
.contact-item svg{width:18px;height:18px;color:var(--gold);flex:0 0 auto;margin-top:.28rem}
.contact-item a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(249,162,1,.4)}
.contact-item a:hover{color:var(--gold)}

/* ---------- 16. Footer --------------------------------------------------- */
.site-footer{background:var(--ink-deep);color:var(--on-dark-dim);padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2rem;font-size:.875rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-grid h4{font-family:var(--font-body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.1rem;font-weight:600}
.footer-grid li{margin-bottom:.6rem}
.footer-grid a{text-decoration:none;transition:color .25s var(--ease)}
.footer-grid a:hover{color:var(--sand)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center;padding-top:1.75rem;font-size:.8125rem}
.footer-bottom nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-bottom a{text-decoration:none}
.footer-bottom a:hover{color:var(--sand)}

/* ---------- 17. Floating WhatsApp ---------------------------------------- */
.wa-float{
  position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:70;
  width:54px;height:54px;border-radius:50%;background:#1FA855;color:#fff;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 6px 22px rgba(31,168,85,.4);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(31,168,85,.55)}
.wa-float svg{width:28px;height:28px}

/* ---------- 18. Reveal animation ----------------------------------------- */
/* Progressive enhancement: content is visible by default. Only once the inline
   head script has proved JS is alive do we hide it for the scroll-in effect —
   so no-JS visitors, crawlers and background tabs always see the full page. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- 19. Utilities ------------------------------------------------ */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--cream);padding:.85rem 1.5rem;text-decoration:none;
}
.skip-link:focus{left:0}