@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');:root{
  --bg:#fbfbfa;
  --surface:#ffffff;
  --text:#1b1b1b;
  --muted:#6b6b6b;
  --line:rgba(0,0,0,.08);
  --shadow:0 10px 30px rgba(0,0,0,.08);

  --max:1120px;
  --radius:18px;

  --serif:"Playfair Display", ui-serif, Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.section{padding:78px 0}
.section-tight{padding:54px 0}
hr.sep{border:0; border-top:1px solid var(--line); margin:0}

header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.brand img{height:34px; width:auto; display:block}
.brand img{
  height:44px;
  width:auto;
  display:block;
}
.brand .name{
  display: none;
}
/* === Header brand cleanup === */
.brand > *:not(img) {
  display: none;
}

/* Enlarge logo to occupy freed space */
.brand img {
  height: 52px; /* was 44px */
}

nav.primary{
  display:flex; align-items:center; gap:18px;
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 84%, #000 16%);
}
nav.primary a{padding:8px 10px; border-radius:999px}
nav.primary a.active{background:rgba(0,0,0,.05)}

.lang-toggle{
  display:flex; gap:6px; align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px;
  background:var(--surface);
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.lang-toggle button{
  border:0; background:transparent;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
}
.lang-toggle button[aria-pressed="true"]{
  background:rgba(0,0,0,.06);
  color:var(--text);
}

.hero{
  position:relative;
  min-height:84vh;
  display:grid;
  align-items:center;
  justify-items:center;
  padding:70px 0 60px;
  overflow:hidden;
}
/* Homepage hero title — more luxury serif (does NOT affect other pages) */
body.home .hero h1{
   font-family: "Playfair Display", var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(
      to top,
      rgba(251,251,250,0.08) 0%,   /* was 0.18 */
      rgba(251,251,250,0.35) 28%, /* was 0.55 */
      rgba(251,251,250,.05) 60%,  /* was 0.08 */
      rgba(251,251,250,0) 100%
    ),
    url("../photos/hero.jpg") 50% 85% / cover no-repeat;

  transform:scale(1.02);
  will-change:transform;
}
.hero .content{
  position:relative;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 60%, var(--muted) 40%);
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
}
h1{
  margin:16px 0 10px;
  font-family:var(--serif);
  font-weight:500;
  font-size:48px;
  line-height:1.06;
  letter-spacing:-.2px;
}
.lead{
  margin:0;
  font-size:18px;
  letter-spacing:0.01em;
  color:color-mix(in srgb, var(--text) 80%, var(--muted) 20%);
  max-width:56ch;
}
.hero-actions{
  margin-top:22px;
  display:flex;
  gap:16px;
  justify-content:center;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  font-size:13px;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.btn.primary{
  background:var(--text);
  color:var(--bg);
  border-color:rgba(0,0,0,.25);
}
.btn.ghost{
  background:transparent;
  box-shadow:none;
}
.btn:hover{transform:translateY(-1px); transition:transform .25s var(--ease), opacity .96s var(--ease)}
.btn:active{transform:translateY(0px)}

.grid-2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:center;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.07);
}
.card .media{
  position:relative;
  height:420px;
  overflow:hidden;
}
.card .media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  will-change:transform;
}
.card .body{padding:22px 22px 24px}
.card h2{
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.1px;
  font-size:26px;
}
.card p{margin:0; color:color-mix(in srgb, var(--text) 78%, var(--muted) 22%)}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.tile{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}
.tile .media{height:340px; overflow:hidden}
.tile .media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); will-change:transform}
.tile .body{padding:18px 18px 20px}
.tile .meta{
  display:flex; gap:10px; flex-wrap:wrap;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted);
}
.tile h3{
  margin:10px 0 8px;
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:-.1px;
}
.tile p{margin:0; color:color-mix(in srgb, var(--text) 78%, var(--muted) 22%)}
.tile .linkrow{margin-top:14px}
.inline-link{
  display:inline-flex; gap:8px; align-items:center;
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--text) 84%, #000 16%);
}
/* ========================================
   Awards – Editorial Minimal (Option A)
======================================== */

.awards-editorial{
  margin-top: 32px;
  text-align: center;
}

/* group title matches your editorial serif system */
.awards-group-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .03em;
  margin: 18px 0 14px;
  text-align: center;
}

/* portrait feature = calm, not hero-sized */
.award-feature{
  width: min(100%, 420px);
  height: 360px;
  margin: 0 auto 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.07);
}
.award-feature img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* badges: tight, centered, stable */
.awards-grid{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.award-badge{
  width: 280px;
  height: auto;
  object-fit: contain;
}

/* separator between the two businesses */
.awards-sep{
  margin: 34px auto;
  max-width: 900px;
}

/* tablet */
@media (max-width: 900px){
  .award-feature{
    width: min(100%, 390px);
    height: 330px;
  }
  .award-badge{
    width: 280px;
  }
}

/* mobile */
@media (max-width: 520px){
  .awards-group-title{
    font-size: 22px;
    margin: 12px 0 12px;
  }
  .award-feature{
    width: min(92vw, 360px);
    height: 320px;
    margin-bottom: 12px;
  }
  .awards-grid{
    gap: 6px;
  }
  .award-badge{
    width: min(92vw, 360px);
  }
}

.inline-link span.arrow{display:inline-block; transform:translateY(1px)}
.gallery{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.gimg{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
  position:relative;
  min-height:240px;
}
.gimg img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); will-change:transform}
.g1{grid-column:span 7}
.g2{grid-column:span 5}
.g3{grid-column:span 5}
.g4{grid-column:span 7}

.location{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.map{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.07);
  background:var(--surface);
}
.map iframe{width:100%; height:100%; min-height:420px; border:0}
.note{
  font-size:13px;
  color:var(--muted);
  margin-top:10px;
}

footer{
  padding:50px 0;
  color:color-mix(in srgb, var(--text) 70%, var(--muted) 30%);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:18px;
}
.footer-title{
  font-family:var(--serif);
  color:var(--text);
  font-weight:500;
  margin:0 0 8px;
}
.small{font-size:13px}
.footer-links a{display:block; padding:6px 0; font-size:13px}

.sticky-book{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
}
.sticky-book a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:var(--text);
  color:var(--bg);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 16px 50px rgba(0,0,0,.18);
  font-size:13px;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.sticky-book a:hover{transform:translateY(-1px); transition:transform .25s var(--ease), opacity .25s var(--ease)}
.sticky-book a:active{transform:translateY(0px)}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:translateY(0)}

.zoomable img,
.zoomable::before{
  transition:transform 1.2s var(--ease);
}
.zoomable.in img{transform:scale(1.0)}
.zoomable.in::before{transform:scale(1.0)}

@media (max-width: 980px){
  h1{font-size:40px}
  .grid-2{grid-template-columns:1fr; gap:18px}
  .location{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  nav.primary{display:none}
}

@media (max-width: 720px){
  .hero{
    min-height:78vh;
    padding:60px 0 52px;
    align-items:center;
    justify-items:center;
  }
.hero .content{
  text-align:center;
  margin:0 auto;
}
.hero::before{
  background:
    linear-gradient(
      to top,
     rgba(251,251,250,.35) 0%,   /* lighter bottom */
        rgba(251,251,250,.18) 30%,
        rgba(251,251,250,.04) 65%,
        rgba(251,251,250,0) 100%
      ),
    url("../photos/hero.jpg") 50% 60% / cover no-repeat;
}
.hero .lead{
  font-size:15px;
  line-height:1.55;
  margin-top:4px;
}

.hero-micro{
  opacity:0.45;
  font-size:0.68rem;
  margin-top:0.7rem;
}

.hero-actions{
  margin-top:14px;
}
  h1{font-size:34px}
 /* Mobile fix for hero kicker pill */
  .kicker{
    display:inline-flex;
    justify-content:center;
    text-align:center;

    max-width:92vw;
    white-space:normal;
    line-height:1.3;

    padding:10px 14px;
    font-size:11px;
    letter-spacing:.8px;
  }
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr; gap:12px}
  .g1,.g2,.g3,.g4{grid-column:auto}
  .sticky-book{
    left:0; right:0; bottom:0;
    padding:10px 14px 14px;
    background:linear-gradient(to top, rgba(251,251,250,.96), rgba(251,251,250,0));
  }
  .sticky-book a{width:100%}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .zoomable img, .zoomable::before, .btn:hover, .sticky-book a:hover{
    transition:none !important;
    transform:none !important;
  }
}


/* Mobile drawer nav */
.nav-toggle{
  display:none;
  width:38px;
  height:38px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  color:#111;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle-icon{font-size:18px; line-height:1;}
.mobile-scrim{
  display:none;
}
.mobile-nav{
  display:none;
}

@media (max-width: 980px){
  .nav-toggle{display:inline-flex;}
  /* keep brand + language nicely aligned */
  .header-inner{gap:14px;}
  /* Drawer */
  .mobile-scrim{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.32);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:1200;
  }
  .mobile-nav{
    display:block;
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:min(84vw, 340px);
    background:#fff;
    border-right:1px solid rgba(0,0,0,.08);
    padding:18px 18px 22px;
    transform:translateX(-105%);
    transition:transform .22s ease;
    z-index:1210;
    overflow:auto;
  }
  .mobile-nav a{
    display:block;
    padding:12px 2px;
    font-size:18px;
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .mobile-nav a:last-of-type{border-bottom:none;}
  .mobile-close{
    width:38px;
    height:38px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:#fff;
    color:#111;
    font-size:20px;
    cursor:pointer;
    margin-bottom:10px;
  }
  .mobile-lang{
    margin-top:16px;
    display:flex;
    gap:8px;
  }
  .mobile-lang .lang-btn{
    flex:0 0 auto;
  }

  body.nav-open .mobile-nav{transform:translateX(0);}
  body.nav-open .mobile-scrim{opacity:1; pointer-events:auto;}
}
/* End mobile drawer nav */


/* ===== Mobile spacing & typography polish (Step 1A) ===== */
@media (max-width: 720px){
  .section{padding:56px 0;}
  .section-tight{padding:40px 0;}
  .container{padding:0 18px;}

  h1{
    font-size:32px;
    line-height:1.12;
    margin:12px 0 10px;
  }
  h2{
    font-size:24px;
    line-height:1.18;
    margin-bottom:8px;
  }
  h3{
    font-size:20px;
    line-height:1.2;
  }

  .lead{
    font-size:16px;
    line-height:1.6;
    margin-top:6px;
  }
  p{
    font-size:15px;
    line-height:1.65;
  }

  .hero-actions{
    margin-top:18px;
    gap:12px;
  }

  .btn{
    padding:13px 18px;
    font-size:13px;
  }

  .card .body,
  .tile .body{
    padding:18px 18px 20px;
  }

  footer{
    padding:42px 0;
  }
}
/* ===== End Step 1A ===== */


/* ===== Mobile footer refinement (Step 3A) ===== */
@media (max-width: 720px){
  footer{
    padding:64px 0 72px;
  }

  .footer-grid{
    gap:28px;
  }

  .footer-title{
    margin-bottom:10px;
  }

  .footer-links a{
    padding:8px 0;
    font-size:14px;
  }

  .small{
    line-height:1.7;
  }
}
/* ===== End Step 3A ===== */


/* ===== Mobile booking button width refinement ===== */
@media (max-width: 720px){
  .sticky-book{
    display:flex;
    justify-content:center;
  }

  .sticky-book a{
    width:52%;
    max-width:260px;
    margin:0 auto;
  }
}
/* ===== End booking width refinement ===== */



/* ===== Mobile header logo centering fix ===== */
@media (max-width: 980px){
  .header-inner{
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
  }

  .nav-toggle{
    justify-self: start;
  }

  .brand{
    justify-self: center;
  }
}
/* ===== End mobile header fix ===== */

/* ===== Definitive mobile language toggle fix ===== */
@media (max-width: 980px) {
  header.site .lang-toggle,
  header.site .lang-switch,
  header.site .lang,
  header.site .language {
    display: none !important;
  }
}


/* ===== Typography micro-refinement (Step B) ===== */

/* Global heading rhythm */
h1{
  line-height:1.08;
  letter-spacing:-0.01em;
  margin-bottom:0.4em;
}

h2{
  line-height:1.18;
  letter-spacing:-0.001em;
  margin-bottom:0.6em;
}

h3{
  line-height:1.25;
  margin-bottom:0.45em;
}
/* Balanced headline wrapping (supported browsers only) */
h1, h2, h3{
  text-wrap: balance;
}
/* Paragraph readability */
p{
  line-height:1.7;
  margin-bottom:1.2em;
}

/* Title to paragraph spacing */
h1 + p,
h2 + p,
h3 + p{
  margin-top:0.25em;
}

/* Mobile-specific fine tuning */
@media (max-width: 720px){
  h1{
    font-size: clamp(28px, 6vw, 34px);
    margin-bottom:0.45em;
  }
  h2{
    font-size: clamp(22px, 5vw, 26px);
  }
  h3{
    font-size: clamp(18px, 4.5vw, 20px);
  }
  p{
    line-height:1.7;
  }
}

/* ===== Step C: Section spacing & visual rhythm ===== */

/* Base section rhythm */
.section{
  padding:104px 0;
}

.section-tight{
  padding:64px 0;
}

/* Hero to first section transition */
.hero + .section{
  padding-top:72px;
}

/* Card & tile breathing room */
.card{
  margin-bottom:12px;
}

.card .body{
  padding:26px 26px 28px;
}

.tile{
  margin-bottom:16px;
}

.tile .body{
  padding:22px 22px 24px;
}

/* Section endings feel less abrupt */
.section:last-of-type{
  padding-bottom:110px;
}

/* Mobile refinements */
@media (max-width: 720px){
  .section{
    padding:68px 0;
  }

  .section-tight{
    padding:48px 0;
  }

  .hero + .section{
    padding-top:56px;
  }

  .card .body,
  .tile .body{
    padding:20px 20px 22px;
  }
}

/* ===== End Step C ===== */
/* ===== Book Now pill: fixed top-right on desktop, floating centered on mobile ===== */
/* Keeps the button visible while scrolling, with a lighter translucent feel. */
.sticky-book{
  position: fixed;
  top: 94px;           /* sits below the sticky header */
  right: 34px;
  bottom: auto;
  left: auto;
  z-index: 60;
  transform: none;
  padding: 0;          /* prevent mobile bar padding from affecting desktop */
  background: none;    /* prevent mobile bar background from affecting desktop */
}

.sticky-book a{
  width: auto !important;
  max-width: none !important;
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;

  /* ~85–90% transparent */
  background: rgba(255,255,255,.12);
  color: #111;

  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 16px 50px rgba(0,0,0,.12);

  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);

  /* keep the refined site style */
  font-weight: 500; /* not bold */
}

/* Mobile: floating pill centered, no bottom “bar” */
@media (max-width: 720px){
  .sticky-book{
    top: auto;
    right: auto;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 !important;
    background: none !important;
  }
  .sticky-book a{
    padding: 12px 20px;
  }
}

/* ===== End Book Now pill ===== */

/* === Book Now stability fix === */
.sticky-book {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.sticky-book a {
  transition: none !important;
}

/* === Mobile Book Now centering fix === */
@media (max-width: 768px) {
  .sticky-book {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateZ(0);
  }
}

/* ===== Lightbox mobile smoothness ===== */
@media (max-width: 720px){
  .zoomable img,
  .zoomable::before{
    transition:transform .35s ease;
  }
}

/* ===== Contact Page Background ===== */

.contact-bg{
  position: fixed;
  inset: 0;
  background-image: url("../photos/Contacts_Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}

.contact-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.80);
}

/* ==============================
   CONTACT FULL BACKGROUND
============================== */

body.contact-page {
  background-image: url("../photos/Contacts_Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.contact-page main {
  background: rgba(255,255,255,0.85);
}

.hero-micro {
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  text-align: center;
}

@media (max-width: 720px) {
  .hero-micro {
    font-size: 0.72rem;
    line-height: 1.6;
    padding: 0 1.2rem;
  }
}

/* Hero paragraph relocated */
.intro-positioning{
  max-width:720px;
  margin:0 auto 60px;
  text-align:center;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--text);
  opacity:.85;
}

@media (max-width:720px){
  .intro-positioning{
    font-size:0.95rem;
    margin-bottom:42px;
    padding:0 10px;
  }
}