/* Ensure clean top background, no pink from page bg */
html, body{
  background: var(--offwhite) !important;
}

/* === Overrides: ensure hero sits behind glass nav === */
body { padding-top: 0 !important; }

/* Remove any hero top padding from earlier fade styles and pull hero up */
.hero-animated {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: 0 !important;
  position: relative;
  z-index: 0;
}

/* Keep the nav above everything */
.nav-glass { z-index: 120 !important; position: fixed; top: 0; left: 0; right: 0; }

/* Kill any wrapper offsets that may be adding top gap */
main, .page, .site-content, .content-area, .wrapper, .container-page { 
  margin-top: 0 !important; 
  padding-top: 0 !important;
}

/* Make anchor jumps account for the fixed nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }


/* === Mobile polish: hero under nav, iOS safe-area, no hairlines, hidden drawer when closed === */
@media (max-width: 768px){
  :root{
    --nav-h: 64px; /* mobile header height */
  }

  /* Respect iOS notch safe area and use it to size the fixed header */
  .nav-glass{
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Pull the hero up to sit fully beneath the fixed header (including notch) */
  .hero-animated{
    margin-top: calc(-1 * (var(--nav-h) + env(safe-area-inset-top, 0px)));
    padding-top: 0 !important;
  }
  .nav-toggle:not(:checked) ~ .nav-glass .scrim{ opacity: 0 !important; pointer-events: none !important; }

  /* Slightly reduce brand size/tracking for tight widths */
  .brand-text{ font-size: 20px; letter-spacing: .28em; }
}


/* === Mobile: drawer pushes page content down instead of overlaying === */
@media (max-width: 768px){
  :root{ --mobile-menu-push: 360px; } /* approx height of menu on phones */

  /* Turn drawer into a drop-down panel under the fixed header */
  .drawer{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
    left: 0; right: 0; width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    background: rgba(8,18,24,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 20px 16px;
    transition: max-height .25s ease;
  }
  .drawer nav{ padding-top: 16px; }
  .drawer a{ padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .drawer a:last-child{ border-bottom: 0; }

  /* Scrim not needed when we push content */
  .scrim{ display: none !important; }

  /* Push the first section after header down when menu is open */
  .nav-toggle:checked ~ .nav-glass + *{
    transform: translateY(var(--mobile-menu-push));
    transition: transform .25s ease;
  }
  .nav-toggle:not(:checked) ~ .nav-glass + *{
    transform: translateY(0);
    transition: transform .25s ease;
  }
}


/* === Mobile pushdown v2: push ALL content when menu opens, and expand drawer === */
@media (max-width: 768px){
  :root{ --mobile-menu-push: 360px; }

  /* Expand the dropdown panel when toggled */
  .nav-toggle:checked ~ .nav-glass .drawer{
    max-height: var(--mobile-menu-push);
  }

  /* Push every element after the header, not just the first */
  .nav-toggle:checked ~ .nav-glass ~ *{
    transform: translateY(var(--mobile-menu-push)) !important;
    transition: transform .25s ease;
  }
  .nav-toggle:not(:checked) ~ .nav-glass ~ *{
    transform: none !important;
    transition: transform .25s ease;
  }
}


/* === Mobile menu pushdown (robust) === */
@media (max-width: 768px){
  :root{ --mobile-menu-push: 360px; } /* adjust if your menu is taller/shorter */

  /* Drawer turns into dropdown below fixed header and expands */
  .drawer{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
    left: 0; right: 0; width: 100%;
    height: auto; max-height: 0; overflow: hidden;
    background: rgba(8,18,24,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 20px 16px;
    transition: max-height .28s ease;
    z-index: 130; /* above content, below header */
  }
  .drawer nav{ padding-top: 16px; }
  .drawer a{ display:block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .drawer a:last-child{ border-bottom: 0; }

  .scrim{ display: none !important; } /* not needed when we push content */

  /* Expand panel when toggled */
  .nav-toggle:checked ~ .nav-glass .drawer{ max-height: var(--mobile-menu-push); }

  /* Fallback: push *all* siblings after header */
  .nav-toggle:checked ~ .nav-glass ~ *{ transform: translateY(var(--mobile-menu-push)) !important; transition: transform .28s ease; }
  .nav-toggle:not(:checked) ~ .nav-glass ~ *{ transform: none !important; transition: transform .28s ease; }

  /* Preferred: if :has is supported, push specific roots for reliability */
  @supports selector(body:has(#nav-toggle:checked)) {
    .nav-toggle ~ .nav-glass ~ *{ transform: none !important; } /* cancel fallback */
    body:has(#nav-toggle:checked) :where(main, .site, .site-content, .page, .content, .wrapper, .container, #content){
      transform: translateY(var(--mobile-menu-push)) !important;
      transition: transform .28s ease;
    }
  }
}


/* === Mobile pushdown v3: make drawer visible when open (no off-canvas) === */
@media (max-width: 768px){
  /* Ensure base position is on-screen for the drop panel */
  .drawer{ left: 0 !important; right: 0 !important; width: 100% !important; }

  /* When open: pull it fully on-screen and expand it */
  .nav-toggle:checked ~ .nav-glass .drawer{
    left: 0 !important;
    max-height: var(--mobile-menu-push) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* When closed: collapse the panel (don't shove it left) */
  .nav-toggle:not(:checked) ~ .nav-glass .drawer{
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


/* === Hide ALL text/CTAs in hero, keep only video + centered logo === */
.hero-animated .hero-copy,
.hero-animated .copy,
.hero-animated .hero-content,
.hero-animated .content,
.hero-animated .container > .hero-title,
.hero-animated .container > .subhead,
.hero-animated h1,
.hero-animated h2,
.hero-animated p,
.hero-animated .btn,
.hero-animated .cta,
.hero-animated .buttons,
.hero-animated .cta-group {
  display: none !important;
}

/* neutralize any offsets just in case */
.hero-animated .hero-copy{ transform: none !important; padding: 0 !important; }


/* === Semplicita body webfont === */
@font-face{
  font-family: 'Semplicita';
  src: url('../fonts/semplicita/Semplicita-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Apply Semplicita to body copy only.
   Branding remains Diaspora via existing rules. */
html, body{
  font-family: 'Semplicita', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Arial, sans-serif !important;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Headings use Diaspora */
h1, h2, h3, h4, h5, h6{
  font-family: 'Diaspora', 'Marcellus', 'Optima', 'Trajan Pro', ui-serif, Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  line-height: 1.15;
}


/* === Font cleanup ===
   Force general UI to inherit Semplicita, keep Diaspora for brand, CTA, and headings.
   This neutralizes leftover Inter/Roboto rules elsewhere. */
:where(nav, .nav-glass, .nav-left, .nav-right, .drawer, .section, .content, p, li, a, button, input, select, textarea){
  font-family: 'Semplicita', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Arial, sans-serif !important;
}

/* Preserve buttons inheriting Semplicita unless explicitly styled */
button, .btn{
  font-family: inherit !important;
}

/* Diaspora keeps priority on brand, CTA, and headings via existing rules */


/* === Brand Colour System ===
   Source: Style guide — Navy #3E5462, Blush #D6B7B5, Natural #D4C6BC, Off White #F5F0EF
   Includes 80/60/40/20 tints via color-mix for quick use. */
:root{
  --navy:    #3E5462;
  --blush:   #D6B7B5;
  --natural: #D4C6BC;
  --offwhite:#F5F0EF;

  /* Tints */
  --navy-80:    color-mix(in srgb, var(--navy) 80%,  white);
  --navy-60:    color-mix(in srgb, var(--navy) 60%,  white);
  --navy-40:    color-mix(in srgb, var(--navy) 40%,  white);
  --navy-20:    color-mix(in srgb, var(--navy) 20%,  white);

  --blush-80:   color-mix(in srgb, var(--blush) 80%, white);
  --blush-60:   color-mix(in srgb, var(--blush) 60%, white);
  --blush-40:   color-mix(in srgb, var(--blush) 40%, white);
  --blush-20:   color-mix(in srgb, var(--blush) 20%, white);

  --natural-80: color-mix(in srgb, var(--natural) 80%, white);
  --natural-60: color-mix(in srgb, var(--natural) 60%, white);
  --natural-40: color-mix(in srgb, var(--natural) 40%, white);
  --natural-20: color-mix(in srgb, var(--natural) 20%, white);

  --offwhite-80: color-mix(in srgb, var(--offwhite) 80%, white);
  --offwhite-60: color-mix(in srgb, var(--offwhite) 60%, white);
  --offwhite-40: color-mix(in srgb, var(--offwhite) 40%, white);
  --offwhite-20: color-mix(in srgb, var(--offwhite) 20%, white);
}

/* Utility classes */
.text-navy{ color: var(--navy) !important; }
.text-blush{ color: var(--blush) !important; }
.text-natural{ color: var(--natural) !important; }
.text-offwhite{ color: var(--offwhite) !important; }

.bg-navy{ background: var(--navy) !important; }
.bg-blush{ background: var(--blush) !important; }
.bg-natural{ background: var(--natural) !important; }
.bg-offwhite{ background: var(--offwhite) !important; }

.border-navy{ border-color: var(--navy) !important; }
.border-blush{ border-color: var(--blush) !important; }
.border-natural{ border-color: var(--natural) !important; }
.border-offwhite{ border-color: var(--offwhite) !important; }

/* Tints utilities, 20/40/60/80 */
.bg-navy-20{ background: var(--navy-20) !important; }
.bg-navy-40{ background: var(--navy-40) !important; }
.bg-navy-60{ background: var(--navy-60) !important; }
.bg-navy-80{ background: var(--navy-80) !important; }

.bg-blush-20{ background: var(--blush-20) !important; }
.bg-blush-40{ background: var(--blush-40) !important; }
.bg-blush-60{ background: var(--blush-60) !important; }
.bg-blush-80{ background: var(--blush-80) !important; }

.bg-natural-20{ background: var(--natural-20) !important; }
.bg-natural-40{ background: var(--natural-40) !important; }
.bg-natural-60{ background: var(--natural-60) !important; }
.bg-natural-80{ background: var(--natural-80) !important; }

.text-navy-60{ color: var(--navy-60) !important; }
.text-blush-60{ color: var(--blush-60) !important; }

/* Hairline helper using Off White tint */
.hairline{ border-color: color-mix(in srgb, var(--offwhite) 50%, transparent) !important; }


/* === Section background defaults === */
.section{ background: var(--offwhite-20) !important; }
.section.alt{ background: var(--natural-20) !important; }


/* === Story section typography polish === */
:root{
  --text: var(--navy); /* brand text color */
}
body{ color: var(--text); }

/* Comfortable reading for paragraphs sitewide */
.section p{
  line-height: 1.6;
  font-size: clamp(1rem, 0.98rem + 0.2vw, 1.15rem);
}

/* Focus the intro copy and Our Story block */
#story .container{
  max-width: 760px;
  margin-inline: auto;
}
#story h2{
  color: var(--navy);
  letter-spacing: 0.08em;
  margin: 1rem 0 .75rem;
}
#story p{ color: color-mix(in srgb, var(--navy) 92%, black); }


/* === Hero overlay: dark top readability + blush to offwhite bottom fade === */
.hero-overlay{
  background-image:
    linear-gradient(180deg, rgba(8,18,24,.45) 0%, rgba(8,18,24,.18) 42%, rgba(8,18,24,0) 64%),
    linear-gradient(180deg, rgba(214,183,181,0) 46%, rgba(214,183,181,.55) 74%, var(--offwhite) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  pointer-events: none;
}


/* === Global fixed fade overlay (top -> bottom), hovers above the whole page === */
html, body{ background: var(--offwhite); }



/* Avoid double-stacking with the hero overlay */
.hero-overlay{ background: none !important; }


/* === Global fixed blush -> off white fade across the whole page === */


/* Avoid double-stacking fade on hero */
.hero-overlay{ background: none !important; }


/* === Fixed page overlay (no top fade) === */


/* Keep hero overlay off to prevent double fading */
.hero-overlay{ background: none !important; }


/* === No-top overlay (final): fully transparent until mid viewport === */



/* === Page fade overlay (visible) ===
   Transparent at top, blush appears mid-page, then feathers toward off white. */




@keyframes pageFadeDrift{
  0%   { background-position: 0 -20vh; }
  100% { background-position: 0 40vh; }
}




/* === Page fade overlay, darker with dual-layer + drift === */
@keyframes pageFadeDrift{
  0%   { background-position: 0 -20vh, 0 -20vh; }
  100% { background-position: 0 40vh, 0 40vh; }
}

body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 119; /* below header (120), above content */
  /* Top transparent, darker mid with navy tint, then blush feather to offwhite */
  background-image:
    linear-gradient(
      to bottom,
      rgba(8,18,24,0.00) 0%,
      rgba(8,18,24,0.00) 30%,
      rgba(8,18,24,0.26) 58%,
      rgba(8,18,24,0.20) 76%,
      rgba(8,18,24,0.10) 92%,
      rgba(8,18,24,0.00) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(214,183,181,0.00) 0%,
      rgba(214,183,181,0.00) 30%,
      rgba(214,183,181,0.58) 58%,
      rgba(214,183,181,0.42) 76%,
      rgba(245,240,239,0.32) 92%,
      rgba(245,240,239,0.00) 100%
    );
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 180%, 100% 180%;
  background-position: 0 0, 0 0;
  animation: pageFadeDrift 42s linear infinite;
}


/* Our Story meaning list */
#story ul.meaning{
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .4rem;
}
#story ul.meaning li{
  padding-left: 0;
  color: color-mix(in srgb, var(--navy) 92%, black);
}
#story ul.meaning strong{ letter-spacing:.02em; }


/* === Our Story media styling === */
#story .media{
  display: grid;
  place-items: center;
  padding: 0.5rem;
}
#story .story-photo{
  width: min(520px, 38vw);
  height: auto;
  border-radius: 24px;
  border: 2px solid color-mix(in srgb, var(--blush) 30%, var(--offwhite));
  box-shadow: 0 8px 28px rgba(8,18,24,.18);
  background: radial-gradient(120% 120% at 0% 0%, var(--offwhite) 0%, transparent 60%);
}
#story .story-caption{
  margin-top: .6rem;
  font-size: .9rem;
  color: color-mix(in srgb, var(--navy) 78%, black);
  opacity: .9;
  text-align: center;
}
@media (max-width: 960px){
  #story .story-photo{ width: min(92vw, 560px); }
}

/* Optimize picture container styling */
#story .story-photo{
  display:block;
  max-width: min(520px, 38vw);
  width: 100%;
}
#story .story-photo img{
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 2px solid color-mix(in srgb, var(--blush) 30%, var(--offwhite));
  box-shadow: 0 8px 28px rgba(8,18,24,.18);
  background: radial-gradient(120% 120% at 0% 0%, var(--offwhite) 0%, transparent 60%);
}
@media (max-width: 960px){
  #story .story-photo{ max-width: min(92vw, 560px); }
}


/* Single-image Our Story styling */
#story img.story-photo{
  display: block;
  width: min(520px, 38vw);
  height: auto;
  border-radius: 24px;
  border: 2px solid color-mix(in srgb, var(--blush) 30%, var(--offwhite));
  box-shadow: 0 8px 28px rgba(8,18,24,.18);
  background: radial-gradient(120% 120% at 0% 0%, var(--offwhite) 0%, transparent 60%);
}
@media (max-width: 960px){
  #story img.story-photo{ width: min(92vw, 560px); }
}


/* Our Story layout: text left, image right */
#story .wrap{ 
  display: grid; 
  grid-template-columns: 1.2fr .9fr; 
  gap: clamp(1rem, 3vw, 3rem); 
  align-items: start;
}
#story .content{ order: 1; }
#story .media{ order: 2; justify-self: center; }

@media (max-width: 960px){
  #story .wrap{ display: block; }
  #story .media{ margin-top: 1.25rem; }
}


/* === Our Story: force image to the RIGHT on desktop === */
@media (min-width: 961px){
  #story .container > .wrap{
    display: grid !important;
    grid-template-columns: 1fr min(38vw, 520px) !important; /* text | image */
    gap: clamp(1rem, 3vw, 3rem) !important;
    align-items: start;
  }
  #story .container > .wrap .content{
    grid-column: 1 !important;
  }
  #story .container > .wrap .media{
    grid-column: 2 !important;
    justify-self: end;
  }
}


/* === Our Story: enforce image RIGHT (high specificity + flex fallback) === */
@media (min-width: 961px){
  section#story .container > .wrap{
    display: flex !important;                /* robust fallback */
    align-items: flex-start !important;
    gap: clamp(1rem, 3vw, 3rem) !important;
  }
  section#story .container > .wrap .content{
    order: 1 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  section#story .container > .wrap .media{
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: clamp(1rem, 3vw, 3rem) !important;
    float: none !important;
    clear: none !important;
    justify-self: end !important;
  }
  section#story .container > .wrap .media .story-photo,
  section#story .container > .wrap .media picture.story-photo{
    max-width: min(38vw, 520px) !important;
    width: 100% !important;
  }
}


/* Our Story layout targeting existing 'container split' */
@media (min-width: 961px){
  #story .container.split{
    display: grid !important;
    grid-template-columns: 1fr min(38vw, 520px) !important; /* text | image */
    gap: clamp(1rem, 3vw, 3rem) !important;
    align-items: start;
  }
  #story .container.split .content{ grid-column: 1 !important; }
  #story .container.split .media{ grid-column: 2 !important; justify-self: end; }
}


/* === Our Story: simple, dependable layout (no pinning) === */
.story-simple{ padding: clamp(2.5rem, 6vw, 5rem) 0; }
.story-simple .simple-grid{
  display:grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .story-simple .simple-grid{
    grid-template-columns: minmax(320px, 480px) 1fr;
  }
}
.story-simple .heart-card{
  position: relative; margin: 0; display: grid; place-items:center;
  background:#fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.16);
  width: min(560px, 46vw); aspect-ratio:4/3; overflow:hidden;
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .6s ease, opacity .6s ease;
}
.story-simple.in-view .heart-card{ transform: translateY(0) scale(1); opacity: 1; }
.story-simple .heart-svg{ width:100%; height:100%; display:block; }
.story-simple .content{ max-width: 62ch; }


/* Text-only Our Story */
.story-simple .simple-grid{ grid-template-columns: 1fr !important; }
.story-simple .content{ max-width: 62ch; margin-inline: auto; }




/* === Our Story link — minimal styling, no layout changes === */
.nav-left{ display:flex; align-items:center; gap: clamp(12px, 2vw, 20px); }
.nav-ourstory{
  font-family: 'Diaspora', 'Semplicita', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(12px, 1.05vw, 16px); /* smaller than brand */
  letter-spacing: .22em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: .9;
}
.nav-ourstory:hover{ opacity: 1; }


/* === Our Story link: minimal / safe === */
.nav-left{ display:flex; align-items:center; gap: clamp(10px, 1.8vw, 18px); padding-inline: clamp(8px,1.5vw,16px); }
.nav-ourstory{
  font-family: 'Diaspora','Semplicita',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size: clamp(12px, 1.0vw, 15px); /* smaller than PRANAYA */
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
  opacity:.9;
}
.nav-ourstory:hover{ opacity:1; }
#story{ scroll-margin-top: var(--nav-h, 84px); }


/* === Header Our Story link (absolute, non-destructive) === */
.nav-glass{ position: relative; }
.nav-link-ourstory{
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Diaspora','Semplicita',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size: clamp(12px, 1.0vw, 15px); /* smaller than brand */
  letter-spacing: .22em;
  text-transform: uppercase;
  color: currentColor;
  text-decoration: none;
  opacity: .9;
  z-index: 3;
  pointer-events: auto;
}
.nav-link-ourstory:hover{ opacity: 1; }
#story{ scroll-margin-top: var(--nav-h, 84px); }




/* === Left header links: Our Story + Cafe === */
.nav-glass{ position: relative; }
.nav-links-left{
  position: absolute;
  left: calc(clamp(12px, 3vw, 28px) + 1cm); /* 1cm nudge from divider */
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
  z-index: 3; pointer-events: auto;
}
.nav-links-left .nav-link{
  font-family: 'Diaspora','Semplicita',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size: clamp(12px, 1.0vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff; text-decoration: none; opacity: .9;
}
.nav-links-left .nav-link:hover{ opacity: 1; }
#story, #cafe, #stay, #yoga, #surf, #boutique{ scroll-margin-top: var(--nav-h, 84px); }


/* === Pink page fade removed (global) === */
body::after{
  content: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}



/* === FINAL MOBILE BRAND CENTERING (loaded last) === */
@media (max-width: 768px){
  .nav-glass{ position: relative !important; }
  .nav-glass .brand{
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
  .nav-glass::before,
  
}


/* === Mobile nav 3-column centering === */
@media (max-width: 768px){
  .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important; /* left | brand | right */
    align-items: center !important;
  }
  .nav-glass .brand{
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  .btn-book,
  .nav-glass::before,
  }


/* === FORCE TRUE CENTER ON MOBILE (wins load order) === */
@media (max-width: 960px){ /* pill hidden on mobile */

  .nav-glass > .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important; /* left | PRANAYA | right */
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nav-glass > .nav-wrap > .nav-left{
    grid-column: 1 !important;
    justify-self: start !important;
  }
  .nav-glass > .nav-wrap > .brand{
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
    position: static !important;  /* undo any absolute hacks */
    transform: none !important;   /* ensure no residual offsets */
  }
  .nav-glass > .nav-wrap > .nav-right,
  .nav-glass > .nav-wrap > .btn-book{
    grid-column: 3 !important;
    justify-self: end !important;
  }
}



}




/* === Mobile brand vertical nudge (20px) === */
@media (max-width: 960px){
  .nav-glass > .nav-wrap > .brand{
    position: relative !important;
    top: 20px !important;
    transform: none !important;
    margin: 0 !important;
  }
}






}


/* === Mobile brand wrapper for vertical alignment (-4px up) === */
@media (max-width: 960px){
  .brand-wrapper{
    grid-column: 2 !important;
    justify-self: center !important;
    position: relative !important;
    top: -4px !important; /* pulls PRANAYA up */
  }
}


/* === Mobile center lock for PRANAYA === */
@media (max-width: 960px){
  /* Pure 3-col grid */
  .nav-glass > .nav-wrap{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }
  .brand{
    display: inline-block !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }
}


/* Nav dividers (desktop only, v2) — left:12px, right:6px */
@media (min-width: 961px){
  /* make sure container can show pseudos */
  .nav-glass { position: relative !important; overflow: visible !important; }