/*
Theme Name: Bondi Beach Magaluf
Theme URI: https://bondibeachmagaluf.com
Author: Bondi Beach Magaluf
Description: Coastal custom theme for Bondi Beach Magaluf, Magaluf. Full-bleed beachfront hero, immersive showcase panels, editorial gallery and contact pages, with smooth scroll reveals, parallax and a built-in EN/ES/FR/IT language switcher. Brand blue #6DB7D8.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bondi
*/

/* ============================================================
   BONDI BEACH MAGALUF — Coastal design system
   Sandy off-whites, sea blue (#6DB7D8), clean modern sans.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  --sand:      #f4eee3;   /* page background, warm off-white */
  --sand-2:    #ece3d4;   /* alternating sections */
  --paper:     #fbf8f2;   /* cards / lightest surface */
  --ink:       #1b1812;   /* warm near-black text */
  --ink-soft:  #6a6155;   /* muted text */
  --blue:      #6db7d8;   /* brand */
  --blue-deep: #4a93b6;   /* hover / pressed */
  --sea:       #11343f;   /* deep footer / dark sections */
  --sea-soft:  #2a5663;
  --line:      rgba(27,24,18,.13);
  --line-light:rgba(255,255,255,.16);

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(76px, 11vw, 168px);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;

  --ff-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ff-body: "Instrument Sans", system-ui, sans-serif;

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

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  background:var(--sand);
  color:var(--ink);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; }

::selection{ background:var(--blue); color:#fff; }

/* ---- Typography ---- */
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:400; line-height:1.08; letter-spacing:-.005em; }
.display{
  font-size:clamp(2.7rem, 7.4vw, 6.6rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.008em;
}
.h-xl{ font-size:clamp(2.1rem, 4.6vw, 4.1rem); letter-spacing:-.012em; }
.h-lg{ font-size:clamp(1.8rem, 3.4vw, 3rem); letter-spacing:-.01em; }
.h-md{ font-size:clamp(1.35rem, 2.1vw, 1.85rem); letter-spacing:-.008em; }
.lead{ font-size:clamp(1.12rem, 1.5vw, 1.4rem); line-height:1.5; color:var(--ink-soft); }

.eyebrow{
  font-family:var(--ff-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--blue-deep);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--blue-deep);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.on-dark{ color:var(--blue); }
.eyebrow.on-dark::before{ background:var(--blue); }

em, .italic{ font-style:italic; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section-sm{ padding-block:clamp(54px,7vw,104px); }
.bg-sand2{ background:var(--sand-2); }
.bg-paper{ background:var(--paper); }
.bg-sea{ background:var(--sea); color:var(--sand); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:48ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1.02em 1.7em;
  border-radius:100px;
  font-weight:600;
  font-size:.96rem;
  letter-spacing:.01em;
  line-height:1;
  overflow:hidden;
  white-space:nowrap;
  transition:transform .5s var(--ease-out), color .45s var(--ease), border-color .45s var(--ease);
  isolation:isolate;
}
.btn .arrow{ transition:transform .5s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn:active{ transform:scale(.97); }

/* filled blue */
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--blue-deep);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn-primary:hover::before{ transform:translateY(0); }

/* outline */
.btn-outline{ border:1.4px solid var(--ink); color:var(--ink); }
.btn-outline::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--blue);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn-outline:hover{ color:#fff; border-color:var(--blue); }
.btn-outline:hover::before{ transform:translateY(0); }

/* light outline on dark */
.btn-ghost{ border:1.4px solid rgba(255,255,255,.5); color:var(--sand); }
.btn-ghost::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--blue);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn-ghost:hover{ color:#fff; border-color:var(--blue); }
.btn-ghost:hover::before{ transform:translateY(0); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  padding-block:20px;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.header .nav-bar{ display:flex; align-items:center; gap:18px; position:relative; }
.header .nav-links{ flex:1 1 auto; justify-content:center; }
.header.scrolled{
  background:rgba(244,238,227,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line);
  padding-block:12px;
}

/* ---- traditional editorial nav ---- */
.brand{ flex:0 0 auto; display:flex; align-items:center; z-index:2; }
.brand img{ height:46px; width:auto; display:block; filter:drop-shadow(0 2px 14px rgba(11,30,37,.4)); transition:height .5s var(--ease), filter .5s var(--ease); }
.header.scrolled .brand img{ height:38px; filter:brightness(0) saturate(0); }

.nav-links{ display:flex; align-items:center; gap:clamp(22px,2.6vw,42px); }
.tnav-link{
  position:relative; font-family:var(--ff-display);
  font-size:1.22rem; font-weight:400; letter-spacing:0;
  color:#fff; padding-block:6px; white-space:nowrap;
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.tnav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.tnav-link:hover::after, .tnav-link.active::after{ transform:scaleX(1); }
.tnav-link.active{ color:#fff; }
.header.scrolled .tnav-link{ color:var(--ink); }
.header.scrolled .tnav-link.active{ color:var(--blue-deep); }

.nav-right{ flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:clamp(14px,1.8vw,24px); }
/* Book a Table button */
.nav-book{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-body); font-size:.86rem; font-weight:600; letter-spacing:.03em;
  padding:.74em 1.4em; border-radius:100px; white-space:nowrap;
  background:var(--blue); color:#fff; border:1.4px solid var(--blue);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.nav-book .arrow{ transition:transform .5s var(--ease-out); }
.nav-book:hover .arrow{ transform:translateX(4px); }
.nav-book:hover{ background:var(--blue-deep); border-color:var(--blue-deep); transform:translateY(-1px); }
.nav-book:active{ transform:scale(.97); }

/* burger */
.burger{ display:none; width:28px; height:16px; position:relative; z-index:200; flex:0 0 auto; }
.burger span{
  position:absolute; left:0; height:2px; width:100%; background:#fff;
  transition:transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:7px; }
.burger span:nth-child(3){ top:14px; }
.header.scrolled .burger span{ background:var(--ink); }
body.nav-open .burger span{ background:#fff; }
body.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- language selector (text dropdown) ---- */
.lang-select{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--ff-body); font-weight:600; font-size:.8rem; letter-spacing:.1em;
  color:#fff; background:transparent; border:0; padding:6px 2px; cursor:pointer;
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.lang-btn:hover{ opacity:.68; }
.lang-btn .globe{ width:14px; height:14px; opacity:.85; }
.lang-btn .chev{ width:10px; height:10px; opacity:.7; transition:transform .4s var(--ease); }
.lang-select.open .lang-btn .chev{ transform:rotate(180deg); }
.header.scrolled .lang-btn{ color:var(--ink); }
.header.scrolled .lang-btn:hover{ color:var(--blue-deep); opacity:1; }

.lang-menu{
  position:absolute; top:calc(100% + 16px); right:0; min-width:176px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 58px rgba(17,52,63,.14); padding:10px 8px;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top right;
  pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease-out); z-index:60;
}
.lang-select.open .lang-menu{ opacity:1; transform:none; pointer-events:auto; }
.lang-opt{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:.55em .8em; border-radius:8px;
  font-family:var(--ff-body); font-size:.96rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink-soft); text-align:left;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.lang-opt:hover{ color:var(--ink); background:rgba(17,52,63,.04); }
.lang-menu .lang-opt.active{ color:var(--blue-deep); }
.lang-menu .lang-opt.active::after{ content:"\2713"; font-size:.72em; color:var(--blue-deep); }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.mobile-nav{
  position:fixed; inset:0; z-index:110;
  background:var(--sea); color:var(--sand);
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 104px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 34px);
  clip-path:circle(0% at 8% 4%);
  transition:clip-path .7s var(--ease-out);
  pointer-events:none; overflow-y:auto;
}
body.nav-open .mobile-nav{ clip-path:circle(150% at 8% 4%); pointer-events:auto; }

.mnav-links{ display:flex; flex-direction:column; gap:clamp(2px,1.2vh,12px); margin-top:clamp(8px,3vh,30px); }
.mnav-links a{
  font-family:var(--ff-display); font-style:normal; font-weight:400;
  font-size:clamp(2.1rem,9vw,3.1rem); line-height:1.16; letter-spacing:-.01em; color:var(--sand);
  width:max-content;
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mnav-links a:hover{ color:var(--blue); }
body.nav-open .mnav-links a{ opacity:1; transform:none; }
body.nav-open .mnav-links a:nth-child(1){ transition-delay:.16s; }
body.nav-open .mnav-links a:nth-child(2){ transition-delay:.23s; }
body.nav-open .mnav-links a:nth-child(3){ transition-delay:.30s; }
body.nav-open .mnav-links a:nth-child(4){ transition-delay:.37s; }

.m-foot{ margin-top:auto; padding-top:36px; display:flex; flex-direction:column; gap:22px;
  opacity:0; transition:opacity .5s var(--ease) .42s; }
body.nav-open .m-foot{ opacity:1; }
.m-lang{ display:flex; gap:8px; }
.m-lang-opt{
  padding:.6em 1em; border-radius:100px; border:1px solid rgba(255,255,255,.32);
  color:rgba(255,255,255,.82); font-family:var(--ff-body); font-size:.82rem; font-weight:600; letter-spacing:.1em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.m-lang-opt:hover{ border-color:rgba(255,255,255,.6); }
.m-lang-opt.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.m-social{ display:flex; flex-wrap:wrap; gap:14px 22px; }
.m-social a{ font-family:var(--ff-body); font-size:.96rem; letter-spacing:.03em; color:rgba(255,255,255,.7); transition:color .3s var(--ease); }
.m-social a:hover{ color:var(--blue); }

/* keep header readable while the drawer is open */
body.nav-open .header{ background:transparent; box-shadow:none; }
body.nav-open .header.scrolled .brand-center img{ filter:drop-shadow(0 2px 14px rgba(11,30,37,.4)); }

/* ============================================================
   HERO  (centered headline · bottom intro · rating card)
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; overflow:hidden; }
/* Fit the hero inside the viewport when the WP admin bar is shown (logged-in view),
   so the intro paragraph + rating card stay above the fold on load. */
.admin-bar .hero{ min-height:calc(100svh - 32px); }
@media screen and (max-width:782px){ .admin-bar .hero{ min-height:calc(100svh - 46px); } }
.hero-media{ position:absolute; inset:-8% 0; z-index:0; }
.hero-media img{ width:100%; height:116%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(17,52,63,.34) 0%, rgba(17,52,63,.05) 26%, rgba(17,52,63,.10) 60%, rgba(17,52,63,.62) 100%);
}
.hero-center{
  position:relative; z-index:2; margin:auto;
  width:100%; padding-inline:var(--gutter); text-align:center;
}
.hero-title{
  font-family:var(--ff-display); font-style:normal; font-weight:400; color:#fff;
  font-size:clamp(2.4rem, 5.7vw, 5.4rem); line-height:1.06; letter-spacing:-.005em;
  max-width:21ch; margin-inline:auto;
  text-shadow:0 2px 14px rgba(11,30,37,.5), 0 6px 50px rgba(11,30,37,.4);
}
.hero-foot{
  position:absolute; left:0; right:0; bottom:clamp(26px,4vw,52px); z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
}
.hero-intro{ color:rgba(255,255,255,.94); max-width:40ch; font-size:clamp(.98rem,1.15vw,1.12rem); line-height:1.55; text-shadow:0 2px 20px rgba(11,30,37,.45); }

/* rating card */
.rating-card{
  flex:0 0 auto; background:#fff; color:var(--ink);
  border-radius:14px; padding:18px 22px; min-width:248px;
  box-shadow:0 24px 60px rgba(11,30,37,.28);
}
.rating-card .rc-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.rating-card .stars{ color:#e7a33b; letter-spacing:.06em; font-size:1.08rem; }
.rating-card .rc-brand{ font-family:var(--ff-body); font-weight:700; font-size:.82rem; letter-spacing:.01em; color:#1c7f57; }
.rating-card .rc-bottom{ display:flex; align-items:flex-end; gap:13px; margin-top:11px; }
.rating-card .rc-score{ font-family:var(--ff-display); font-size:2.7rem; font-weight:400; line-height:.85; }
.rating-card .rc-of{ color:var(--ink-soft); font-size:1rem; margin-bottom:4px; }
.rating-card .rc-meta{ font-size:.82rem; line-height:1.32; margin-left:2px; }
.rating-card .rc-meta strong{ display:block; font-weight:700; }
.rating-card .rc-meta span{ color:var(--ink-soft); }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(38px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay:var(--d,0s); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }

.img-reveal{ position:relative; overflow:hidden; }
.img-reveal img{ transform:scale(1.18); transition:transform 1.5s var(--ease-out); will-change:transform; }
.img-reveal::after{ content:""; position:absolute; inset:0; background:var(--sand); transform-origin:bottom; transition:transform 1.15s var(--ease-out); z-index:1; }
.img-reveal.in img{ transform:scale(1); }
.img-reveal.in::after{ transform:scaleY(0); }

.parallax-wrap{ overflow:hidden; }
.parallax-wrap img{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .img-reveal img{ transform:none !important; }
  .img-reveal::after{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   INTRO / ABOUT
   ============================================================ */
.intro-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px); align-items:center; }
.intro-copy p + p{ margin-top:1.1em; }
.intro-copy .h-xl{ margin:.3em 0 .7em; }

.stat-row{ display:flex; gap:clamp(28px,5vw,64px); margin-top:46px; flex-wrap:wrap; }
.stat .n{ font-family:var(--ff-display); font-size:clamp(2.3rem,3.8vw,3.4rem); font-weight:400; letter-spacing:-.01em; line-height:1; color:var(--blue-deep); }
.stat .l{ margin-top:8px; font-size:.92rem; color:var(--ink-soft); letter-spacing:.02em; }

.media-stack{ position:relative; }
.media-stack .m-main{ border-radius:var(--r-md); aspect-ratio:4/5; }
.media-stack .m-main img{ width:100%; height:100%; object-fit:cover; }
.media-stack .m-badge{
  position:absolute; bottom:-26px; left:-26px; background:var(--paper);
  border-radius:var(--r-md); padding:22px 26px; box-shadow:0 24px 60px rgba(17,52,63,.16);
  max-width:60%;
}
.media-stack .m-badge img{ width:100%; height:auto; }

/* ============================================================
   FEATURE BANDS (image + text, alternating)
   ============================================================ */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.feature + .feature{ margin-top:var(--section); }
.feature .f-media{ border-radius:var(--r-md); aspect-ratio:5/4; }
.feature .f-media img{ width:100%; height:108%; object-fit:cover; margin-top:-4%; }
.feature.flip .f-media{ order:2; }
.feature .f-copy p{ margin-top:1.1em; }
.feature .f-copy .btn{ margin-top:30px; }

/* ============================================================
   SHOWCASE PANELS (full-bleed image + frosted glass text card)
   ============================================================ */
.showcase{ position:relative; min-height:clamp(560px,88vh,920px); display:flex; align-items:center; overflow:hidden; }
.showcase-bg{ position:absolute; inset:-8% 0; z-index:0; }
.showcase-bg img{ width:100%; height:116%; object-fit:cover; }
.showcase::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(11,30,37,.6) 0%, rgba(11,30,37,.18) 52%, rgba(11,30,37,0) 86%); }
.showcase.right::after{ background:linear-gradient(270deg, rgba(11,30,37,.6) 0%, rgba(11,30,37,.18) 52%, rgba(11,30,37,0) 86%); }
.showcase .wrap{ position:relative; z-index:2; width:100%; display:flex; }
.showcase.right .wrap{ justify-content:flex-end; }
.showcase-card{
  max-width:min(540px,92%);
  background:rgba(17,52,63,.28);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px; padding:clamp(32px,3.6vw,56px); color:#fff;
  box-shadow:0 30px 80px rgba(11,30,37,.34);
}
.showcase-card .h-lg{ color:#fff; margin:.3em 0 .55em; }
.showcase-card p{ color:rgba(255,255,255,.92); font-size:clamp(1.02rem,1.2vw,1.18rem); line-height:1.55; }
.showcase-card .btn{ margin-top:30px; }
@media (max-width: 720px){
  .showcase{ min-height:78vh; }
  .showcase::after, .showcase.right::after{ background:linear-gradient(0deg, rgba(11,30,37,.7) 0%, rgba(11,30,37,.2) 60%, rgba(11,30,37,.1) 100%); }
}

/* ============================================================
   FEATURED TRIO (cards to gallery)
   ============================================================ */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.tcard{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:3/4; display:block; }
.tcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.tcard:hover img{ transform:scale(1.07); }
.tcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,52,63,0) 40%,rgba(17,52,63,.82)); }
.tcard .t-label{ position:absolute; left:24px; bottom:22px; z-index:2; color:#fff; }
.tcard .t-label .k{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; opacity:.85; }
.tcard .t-label .v{ font-family:var(--ff-display); font-size:1.7rem; font-weight:600; display:flex; align-items:center; gap:.4em; }
.tcard .t-label .v .arrow{ transition:transform .5s var(--ease-out); }
.tcard:hover .t-label .v .arrow{ transform:translate(5px,-5px); }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:54px; }

.reviews-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; margin-bottom:clamp(38px,5vw,60px); }
.reviews-intro{ max-width:34ch; }
.reviews-intro .h-xl{ margin-top:.3em; }
.reviews-intro .lead{ margin:.7em 0 1.5em; }
@media (min-width:600px){ .reviews-intro{ flex:0 1 auto; max-width:42ch; } .reviews-intro .h-xl{ white-space:nowrap; } }
.reviews-aside{ display:flex; flex-direction:column; align-items:flex-end; gap:24px; }
.rev-nav{ display:flex; gap:12px; }
.rev-arrow{ width:54px; height:54px; border-radius:50%; border:1.4px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.rev-arrow svg{ width:18px; height:18px; }
.rev-arrow:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.rev-arrow:active{ transform:scale(.93); }

.reviews-rail{
  display:flex; gap:clamp(16px,1.6vw,24px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab;
  padding-inline:max(var(--gutter), calc((100vw - var(--maxw))/2));
  scroll-padding-inline:max(var(--gutter), calc((100vw - var(--maxw))/2));
}
.reviews-rail::-webkit-scrollbar{ display:none; }
.rev-card{
  flex:0 0 clamp(282px,30vw,400px); scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(28px,2.4vw,38px); display:flex; flex-direction:column; gap:22px; min-height:336px;
}
.rev-card .rev-stars{ color:#e7a33b; letter-spacing:.1em; font-size:1.05rem; }
.rev-card .rev-text{ font-family:var(--ff-display); font-size:clamp(1.18rem,1.5vw,1.45rem); line-height:1.42; color:var(--sea); }
.rev-card .rev-who{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.rev-card .rev-av{ width:46px; height:46px; border-radius:50%; background:var(--sand-2); display:grid; place-items:center; font-family:var(--ff-display); font-weight:500; font-size:1.12rem; color:var(--blue-deep); flex:0 0 auto; }
.rev-card .rev-nm{ font-weight:600; font-size:.98rem; color:var(--ink); }
.rev-card .rev-src{ font-size:.8rem; color:var(--ink-soft); }

/* ============================================================
   GALLERY TEASER (home)
   ============================================================ */
.teaser-track{
  display:flex; gap:18px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:60px; /* room for staggered cells + scrollbar clearance */
  scrollbar-width:none;
  cursor:grab;
}
.teaser-track::-webkit-scrollbar{ display:none; }
.teaser-track .t-img{ flex:0 0 auto; width:clamp(220px,26vw,360px); aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden; scroll-snap-align:start; }
.teaser-track .t-img:nth-child(even){ margin-top:46px; }
.teaser-track .t-img img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .cta-media{ position:absolute; inset:-12% 0; z-index:0; }
.cta-band .cta-media img{ width:100%; height:124%; object-fit:cover; }
.cta-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,52,63,.42),rgba(17,52,63,.66)); z-index:1; }
.cta-band .wrap{ position:relative; z-index:2; text-align:center; }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,4.2vw,3.6rem); }
.cta-band p{ color:rgba(255,255,255,.86); margin:.6em auto 0; }
.cta-band .btn-row{ justify-content:center; margin-top:38px; }

/* ============================================================
   PAGE HERO (gallery / contact)
   ============================================================ */
.page-hero{ position:relative; padding-top:clamp(168px,22vh,256px); padding-bottom:clamp(48px,7vw,88px); overflow:hidden; }
.page-hero.dark{ background:var(--sea); color:var(--sand); }
.page-hero.dark .lead{ color:rgba(244,238,227,.82); }
.page-hero h1{ margin-top:.18em; }
.page-hero .lead{ margin-top:1em; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero-media{ position:absolute; inset:-8% 0; z-index:0; }
.page-hero-media img{ width:100%; height:116%; object-fit:cover; }
.page-hero.has-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,30,37,.62) 0%, rgba(11,30,37,.42) 48%, rgba(11,30,37,.72) 100%);
}
.page-hero.has-media h1{ color:#fff; }
.page-hero.has-media .lead{ color:rgba(255,255,255,.9); }

/* ============================================================
   GALLERY BANDS
   ============================================================ */
.gband{ padding-block:clamp(48px,7vw,104px); }
.gband-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.gband-head .meta{ font-size:.92rem; color:var(--ink-soft); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.3vw,18px); }
.gcell{ overflow:hidden; border-radius:var(--r-sm); position:relative; aspect-ratio:1/1; }
.gcell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease-out); }
.gcell:hover img{ transform:scale(1.06); }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } .gcell{ aspect-ratio:4/3; } }

/* ============================================================
   CONTACT (premium card layout)
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(28px,3.4vw,52px); align-items:start; }

.contact-panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(28px,3vw,46px);
  box-shadow:0 28px 70px rgba(17,52,63,.07);
}
.info-row{ display:flex; gap:20px; padding:clamp(22px,2.4vw,30px) 0; border-top:1px solid var(--line); }
.info-row:first-child{ padding-top:4px; border-top:0; }
.info-ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px;
  background:rgba(109,183,216,.14); color:var(--blue-deep);
  display:grid; place-items:center;
}
.info-ico svg{ width:21px; height:21px; }
.info-body{ flex:1; min-width:0; }
.info-body .k{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-deep); font-weight:600; }
.info-body .v{ margin-top:9px; font-family:var(--ff-display); font-size:clamp(1.32rem,1.8vw,1.66rem); font-weight:400; letter-spacing:-.005em; line-height:1.24; color:var(--ink); }
.info-body a.v{ display:inline-block; transition:color .3s var(--ease); }
.info-body a.v:hover{ color:var(--blue-deep); }
.info-body .map-link{ margin-top:14px; display:inline-flex; align-items:center; gap:.45em; font-size:.92rem; font-weight:600; color:var(--blue-deep); }
.info-body .map-link .arrow{ transition:transform .4s var(--ease-out); }
.info-body .map-link:hover .arrow{ transform:translateX(4px); }

/* hours table — all seven days */
.hours-table{ margin-top:16px; display:flex; flex-direction:column; }
.hours-table .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:1rem; }
.hours-table .row:last-child{ border-bottom:0; }
.hours-table .row.today{ }
.hours-table .day{ color:var(--ink-soft); display:flex; align-items:center; gap:10px; }
.hours-table .row.today .day{ color:var(--ink); font-weight:600; }
.hours-table .time{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.today-pill{ font-family:var(--ff-body); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--blue); padding:.28em .6em; border-radius:100px; }
.open-now{ margin-top:16px; display:inline-flex; align-items:center; gap:9px; font-size:.9rem; font-weight:600; color:#1c7f57; }
.open-now .dot{ width:9px; height:9px; border-radius:50%; background:#1c9b66; box-shadow:0 0 0 4px rgba(28,155,102,.18); }

/* social icon buttons */
.socials{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.social-icon{
  width:50px; height:50px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink);
  display:grid; place-items:center;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.social-icon svg{ width:21px; height:21px; }
.social-icon:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px); }

.contact-cta{ margin-top:clamp(26px,2.6vw,34px); display:flex; flex-wrap:wrap; gap:14px; }

.map-card{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper); position:sticky; top:96px; box-shadow:0 28px 70px rgba(17,52,63,.07); }
.map-card iframe{ width:100%; height:clamp(420px,62vh,640px); border:0; display:block; filter:saturate(.92); }
.map-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; flex-wrap:wrap; }
.map-foot .addr{ font-size:.96rem; color:var(--ink-soft); }

/* ---- editorial contact (two text columns + full-width map) ---- */
.contact-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,120px); }
.cc-head{ font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:clamp(28px,3vw,44px); }
.cc-block + .cc-block{ margin-top:clamp(26px,2.6vw,38px); }
.cc-label{ font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:14px; }
.cc-addr{ font-size:clamp(1.12rem,1.4vw,1.32rem); line-height:1.7; color:var(--ink); }
.cc-addr a{ transition:color .3s var(--ease); }
.cc-addr a:hover{ color:var(--blue-deep); }
.cc-note{ margin-top:22px; font-size:1rem; color:var(--ink-soft); line-height:1.6; }

.cc-hours{ display:flex; flex-direction:column; }
.cc-hours .row{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); }
.cc-hours .row:last-child{ border-bottom:0; }
.cc-hours .day{ font-size:clamp(1.06rem,1.3vw,1.24rem); color:var(--ink-soft); display:flex; align-items:center; gap:12px; }
.cc-hours .row.today .day{ color:var(--ink); font-weight:600; }
.cc-hours .time{ font-size:clamp(1.06rem,1.3vw,1.24rem); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-status{ margin-top:22px; display:inline-flex; align-items:center; gap:9px; font-size:.96rem; font-weight:600; color:#1c7f57; }
.cc-status .dot{ width:9px; height:9px; border-radius:50%; background:#1c9b66; box-shadow:0 0 0 4px rgba(28,155,102,.18); }

.cc-socials{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.cc-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

.map-full{ margin-top:clamp(56px,7vw,104px); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.map-full iframe{ width:100%; height:clamp(380px,52vh,560px); border:0; display:block; filter:saturate(.92); }

@media (max-width:760px){
  .contact-cols{ grid-template-columns:1fr; gap:48px; }
}

/* big full-bleed image band */
.image-band{ height:clamp(440px,60vh,720px); overflow:hidden; }
.image-band img{ width:100%; height:118%; object-fit:cover; will-change:transform; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:linear-gradient(180deg, var(--sand) 0%, #e3eef2 100%);
  color:var(--sea);
  padding-top:clamp(64px,9vw,124px);
}
.footer a{ transition:color .3s var(--ease), transform .35s var(--ease); }
.footer-cols{ display:flex; justify-content:space-between; gap:clamp(40px,6vw,80px); flex-wrap:wrap; padding-bottom:clamp(54px,8vw,110px); }
.fgroup{ display:flex; gap:clamp(36px,6vw,104px); flex-wrap:wrap; }
.fcol h4{ font-family:var(--ff-body); font-size:.76rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:22px; }
.flinks li + li{ margin-top:4px; }
.flinks a{
  font-family:var(--ff-display); font-size:clamp(1.5rem,2vw,2.05rem); font-weight:400;
  color:var(--sea); line-height:1.34; display:inline-block;
}
.flinks a:hover{ color:var(--blue-deep); transform:translateX(6px); }
.fcol-meta{ display:flex; flex-direction:column; gap:30px; min-width:200px; }
.fmeta p{ font-size:1rem; color:var(--ink-soft); line-height:1.55; }
.fmeta a{ color:var(--sea); }
.fmeta a:hover{ color:var(--blue-deep); }

.footer-wordmark{ display:flex; align-items:center; gap:clamp(20px,4vw,56px); }
.footer-wordmark .fline{ flex:1; height:1px; background:rgba(17,52,63,.22); }
.fbrand{
  display:flex; align-items:center; justify-content:center;
}
.fbrand img{ height:clamp(64px,8vw,110px); width:auto; display:block; filter:brightness(0) saturate(0); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-block:clamp(26px,3vw,40px); font-size:.86rem; color:var(--ink-soft); }
.footer-bottom .links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom a{ color:var(--ink-soft); }
.footer-bottom a:hover{ color:var(--blue-deep); }
@media (max-width: 720px){
  .footer-cols{ flex-direction:column; gap:46px; }
  .fgroup{ gap:46px; }
  .footer-wordmark .fline{ display:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .intro-grid, .feature, .contact-grid{ grid-template-columns:1fr; }
  .feature.flip .f-media{ order:0; }
  .media-stack{ max-width:520px; }
  .trio, .review-grid{ grid-template-columns:1fr 1fr; }
  .map-card{ position:static; }
}
@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-right .lang-select{ display:none; }
  .nav-book{ font-size:.78rem; padding:.66em 1.15em; }
  .burger{ display:block; }
}
@media (max-width: 720px){
  body{ font-size:17px; }
  .trio, .review-grid{ grid-template-columns:1fr; }
  .media-stack .m-badge{ left:0; }
  .reviews-head{ margin-bottom:36px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:20px; }
  .rating-card{ min-width:0; width:100%; max-width:300px; }
  .hero-title{ font-size:clamp(2.2rem,8vw,3.2rem); }
}

/* ============================================================
   HARDENING
   Keep the header's <button> controls (language switcher + burger)
   free of any inherited or plugin-injected button styling. Some
   environments paint generic <button> elements with a background;
   these higher-specificity resets override that.
   ============================================================ */
.header .lang-btn,
.header .burger,
body.nav-open .header .burger{
  -webkit-appearance:none; appearance:none;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.header .lang-btn:hover,
.header .lang-btn:focus,
.header .burger:hover,
.header .burger:focus{
  background:transparent !important;
  box-shadow:none !important;
}
.header .burger{ padding:0 !important; }