/*
Theme Name:        RESRV Travel
Theme URI:         https://resrvtravel.com
Author:            Reserve Travel LLC
Author URI:        https://resrvtravel.com
Description:       Editorial luxury travel-concierge theme for RESRV (Reserve Travel LLC). Built with Elementor compatibility, Lenis smooth-scroll, full WordPress template hierarchy, and the RESRV brand palette (cream / taupe / charcoal / espresso). Includes header, footer, sidebar, page templates, single templates, search, 404, archives, author, tags, and a placeholder front-page that preserves the RESRV homepage design.
Version:           1.0.0
Requires at least: 5.8
Tested up to:      6.4
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       resrv
Tags:              travel, luxury, editorial, elementor, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar
*/

/* ============================================================
   RESRV Theme — Inner-page (non-homepage) styles
   The homepage uses its own scoped stylesheet (see assets/css/homepage.css)
   ============================================================ */

:root{
  --cream:#f7f1e8;
  --cream-2:#efe7d8;
  --charcoal:#333333;
  --taupe:#b8a99a;
  --taupe-light:#d4c8b8;
  --taupe-dark:#9a8b7d;
  --espresso:#221a14;
  --muted:#7a7268;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --container:1240px;
  --pad-x:clamp(20px, 5vw, 60px);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--charcoal);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--charcoal); text-decoration:none; transition:color .2s ease}

a:hover, a:focus{color:var(--taupe-dark)}

img,video,iframe,svg{max-width:100%; height:auto; display:block}

h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.2;
  margin:0 0 .6em;
  color:var(--charcoal);
}

h1{font-size:clamp(32px,5vw,56px)}

h2{font-size:clamp(26px,3.5vw,40px)}

h3{font-size:clamp(22px,2.5vw,28px)}

h4{font-size:clamp(18px,2vw,22px)}

p{margin:0 0 1em; line-height:1.7}

.site-container{max-width:var(--container); margin:0 auto; padding:0 var(--pad-x)}

/* ===== Inner-page header (non-homepage) ===== */

/* Mobile menu toggle */

.menu-toggle{
  display:none; background:none; border:none; cursor:pointer;
  padding:8px; font:inherit; color:var(--charcoal);
}

.menu-toggle svg{width:24px; height:24px}

/* ===== Inner-page main ===== */

.site-main{
  /* Leave room for the fixed nav (~88px tall on desktop, smaller on mobile) */
  padding:clamp(96px, 11vw, 140px) 0 80px;
  min-height:50vh;
}

.site-main.with-sidebar{
  display:grid; grid-template-columns:1fr 320px; gap:64px;
  max-width:var(--container); margin:0 auto;
  padding-left:var(--pad-x); padding-right:var(--pad-x);
}

/* ===== Posts / pages ===== */

.entry{margin-bottom:48px}

.entry-header{margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(51,51,51,.08)}

.entry-title{margin:0 0 12px}

.entry-title a{color:var(--charcoal)}

.entry-title a:hover{color:var(--taupe-dark)}

.entry-meta{font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap}

.entry-meta a{color:var(--muted)}

.entry-meta a:hover{color:var(--taupe-dark)}

.entry-content > * + *{margin-top:1em}

.entry-content h2,.entry-content h3{margin-top:1.5em}

.entry-content blockquote{
  border-left:3px solid var(--taupe);
  padding:12px 24px;
  margin:24px 0;
  color:var(--muted);
  font-family:var(--serif); font-style:italic;
}

.entry-footer{margin-top:24px; padding-top:18px; border-top:1px solid rgba(51,51,51,.08); font-size:13px; color:var(--muted)}

.entry-footer a{color:var(--taupe-dark)}

.post-thumbnail{margin-bottom:28px; overflow:hidden}

.post-thumbnail img{width:100%; height:auto}

/* ===== Pagination ===== */

.pagination{
  display:flex; gap:8px; justify-content:center;
  margin:48px 0 0; padding:32px 0 0;
  border-top:1px solid rgba(51,51,51,.08);
}

.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:1px solid rgba(51,51,51,.15);
  font-size:13px;
  transition:all .2s ease;
}

.pagination a:hover{background:var(--charcoal); color:var(--cream); border-color:var(--charcoal)}

.pagination .current{background:var(--taupe); color:var(--charcoal); border-color:var(--taupe)}

/* ===== Search form ===== */

.search-form{display:flex; gap:0; max-width:520px}

.search-form label{flex:1; display:flex}

.search-field{
  flex:1; padding:12px 16px;
  border:1px solid rgba(51,51,51,.2);
  background:var(--cream);
  font-family:var(--sans); font-size:15px;
  outline:none; transition:border-color .2s ease;
}

.search-field:focus{border-color:var(--taupe-dark)}

.search-submit{
  padding:12px 24px;
  background:var(--charcoal); color:var(--cream);
  border:1px solid var(--charcoal);
  font-family:var(--sans); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all .2s ease;
}

.search-submit:hover{background:var(--taupe-dark); border-color:var(--taupe-dark)}

/* ===== Sidebar widgets ===== */

.widget{
  margin-bottom:48px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(51,51,51,.08);
}

.widget:last-child{border-bottom:none}

.widget-title{
  font-family:var(--sans);
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--taupe-dark); margin:0 0 18px;
  font-weight:500;
}

.widget ul{list-style:none; margin:0; padding:0}

.widget li{padding:8px 0; border-bottom:1px solid rgba(51,51,51,.05)}

.widget li:last-child{border-bottom:none}

/* ===== Comments ===== */

.comments-area{margin-top:64px; padding-top:48px; border-top:1px solid rgba(51,51,51,.1)}

.comments-title{margin-bottom:32px}

.comment-list{list-style:none; margin:0 0 48px; padding:0}

.comment{margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid rgba(51,51,51,.08)}

.comment-author{font-family:var(--serif); font-size:18px; margin-bottom:6px}

.comment-meta{font-size:13px; color:var(--muted); margin-bottom:12px}

.comment-form input, .comment-form textarea{
  width:100%; padding:12px 14px;
  border:1px solid rgba(51,51,51,.2);
  background:var(--cream);
  font-family:var(--sans); font-size:15px;
  margin-bottom:14px;
}

/* ===== 404 page ===== */

.error-404{text-align:center; padding:80px 0}

.error-404 .error-num{font-family:var(--serif); font-size:clamp(80px,15vw,160px); color:var(--taupe); line-height:1; margin:0}

.error-404 h1{margin:24px 0 16px}

.error-404 p{color:var(--muted); max-width:480px; margin:0 auto 32px}

.error-404 .search-form{margin:0 auto}

/* ===== Inner-page footer ===== */

.site-footer{
  background:var(--charcoal); color:var(--cream);
  padding:60px 0 24px; 
}

.footer-widgets{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:48px; margin-bottom:48px;
  max-width:var(--container); margin-left:auto; margin-right:auto;
  padding:0 var(--pad-x);
}

.footer-widgets .widget{padding:0; border:none; margin:0}

.footer-widgets .widget-title{color:var(--taupe-light)}

.footer-widgets a{color:var(--cream); opacity:.75}

.footer-widgets a:hover{opacity:1; color:var(--taupe-light)}

.footer-widgets ul li{border-bottom:1px solid rgba(247,241,232,.08)}

.site-info{
  text-align:center; padding-top:24px; padding-left:var(--pad-x); padding-right:var(--pad-x);
  border-top:1px solid rgba(247,241,232,.1);
  font-size:12px; opacity:.6;
}

/* ===== Buttons ===== */

.btn, .wp-block-button__link{
  display:inline-block;
  padding:14px 28px;
  background:var(--charcoal); color:var(--cream);
  font-family:var(--sans); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--charcoal);
  cursor:pointer; transition:all .25s ease;
  text-decoration:none;
}

.btn:hover, .wp-block-button__link:hover{background:var(--taupe-dark); border-color:var(--taupe-dark); color:var(--cream)}

/* ===== Screen reader ===== */

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Responsive ===== */

@media (max-width:980px){
  .site-main.with-sidebar{grid-template-columns:1fr; gap:48px}
  .footer-widgets{grid-template-columns:1fr 1fr; gap:36px}
  .menu-toggle{display:inline-flex}
}

@media (max-width:640px){
  .footer-widgets{grid-template-columns:1fr; gap:32px}
}

/* ===== Elementor compatibility ===== */

/* Hide theme header/footer when using Elementor Canvas template */

/* Let Elementor handle its own canvas */

/* ===== Footer must sit ABOVE the fixed homepage hero ===== */

/* The .hero-fixed has z-index:1, .scroll-content z-index:2, so the footer
   needs to be on a higher stacking context too — otherwise on the homepage
   the footer is hidden underneath the fixed hero backdrop. */

.site-footer{
  position:relative;
  z-index:3;
}

.mobile-cta{
  z-index:90;  /* already set in homepage.css, reaffirm here for inner pages */
}

/* ===== Site footer — complete styling (was previously in homepage.css) ===== */

.site-footer{
  background:var(--charcoal); color:var(--cream);
  padding:60px 0 24px;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

.site-footer .container{max-width:var(--container); margin:0 auto; padding:0 var(--pad-x)}

.footer-brand .logo{
  font-family:var(--serif); font-size:28px;
  letter-spacing:5px; color:var(--taupe-light);
  margin-bottom:18px; font-weight:400;
}

.footer-brand .email-link{
  color:var(--taupe-light); font-size:14px;
  display:inline-block; margin-bottom:24px;
}

.footer-brand h6{
  font-family:var(--sans); font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--taupe-light); margin:24px 0 10px;
  font-weight:500;
}

.footer-brand p.small{
  font-size:13px; opacity:.75;
  max-width:320px; margin:0 0 14px;
  line-height:1.6; color:var(--cream);
}

.footer-brand .addr{
  font-size:13px; opacity:.65;
  margin-top:14px; line-height:1.7;
}

.footer-brand .addr p{margin:0; line-height:1.7}

/* Footer columns from widget areas */

.footer-col h5,
.footer-col .widget-title{
  font-family:var(--sans); font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--taupe-light); margin-bottom:18px;
  font-weight:500;
}

.footer-col ul{list-style:none; margin:0; padding:0}

.footer-col li{padding:6px 0}

.footer-col a{color:var(--cream); opacity:.75; font-size:14px}

.footer-col a:hover{opacity:1; color:var(--taupe-light)}

.footer-col .widget{margin:0; padding:0; border:none}

/* Newsletter form */

.newsletter{
  display:flex; gap:0; margin-top:8px;
}

.newsletter input{
  flex:1; padding:12px 14px;
  background:transparent; color:var(--cream);
  border:1px solid rgba(247,241,232,.25);
  font-family:var(--sans); font-size:14px;
  outline:none;
}

.newsletter input::placeholder{color:rgba(247,241,232,.45)}

.newsletter input:focus{border-color:var(--taupe-light)}

.newsletter button{
  padding:12px 18px;
  background:var(--taupe);
  color:var(--charcoal);
  border:1px solid var(--taupe);
  font-family:var(--sans); font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all .2s ease;
  font-weight:500;
}

.newsletter button:hover{background:var(--taupe-dark); color:var(--cream); border-color:var(--taupe-dark)}

/* Social row in footer */

.site-footer .social{
  display:flex; gap:14px; margin-top:24px;
}

.site-footer .social a{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--cream); opacity:.7;
  border:1px solid rgba(247,241,232,.2);
  border-radius:50%;
  transition:all .25s ease;
}

.site-footer .social a:hover{
  opacity:1; color:var(--charcoal);
  background:var(--taupe); border-color:var(--taupe);
}

.site-footer .social svg{width:15px; height:15px}

/* Center the social icons beneath the footer logo. */
.site-footer .social{justify-content:center}

/* ===== Header nav-right cluster (was inline style) ===== */

.nav-right{
  display:flex; align-items:center; gap:10px;
  grid-column:3;
  grid-row:1;
  justify-self:end;
  /* Min-width matches the CTA pill on the left so the centered logo
     stays visually balanced even when only menu+search are visible */
}

/* ===== Footer responsive grid (auto-adjust to active widget count) ===== */

.footer-grid{
  display:grid;
  gap:48px;
  margin-bottom:48px;
  grid-template-columns:1.4fr 1fr 1fr 1fr;  /* default fallback */
}

.site-footer.footer-cols-1 .footer-grid{ grid-template-columns:1fr; max-width:680px; margin-left:auto; margin-right:auto; text-align:center }

.site-footer.footer-cols-2 .footer-grid{ grid-template-columns:1.4fr 1fr }

.site-footer.footer-cols-3 .footer-grid{ grid-template-columns:1.4fr 1fr 1fr }

.site-footer.footer-cols-4 .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr }

/* Footer-bottom layout */

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  padding-top:24px;
  border-top:1px solid rgba(247,241,232,.1);
  font-size:12px; opacity:.7;
}

.footer-bottom .footer-menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:20px; flex-wrap:wrap;
}

.footer-bottom .footer-menu a{
  color:var(--cream); opacity:.7;
  font-size:12px;
}

.footer-bottom .footer-menu a:hover{opacity:1; color:var(--taupe-light)}

/* ===== Footer responsive ===== */

@media (max-width:980px){
  .site-footer.footer-cols-3 .footer-grid,
  .site-footer.footer-cols-4 .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
  .site-footer.footer-cols-2 .footer-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
}

@media (max-width:640px){
  .footer-grid,
  .site-footer.footer-cols-2 .footer-grid,
  .site-footer.footer-cols-3 .footer-grid,
  .site-footer.footer-cols-4 .footer-grid{
    grid-template-columns:1fr !important;
    gap:32px;
  }
  .footer-bottom{
    justify-content:center; text-align:center; flex-direction:column;
  }
  .footer-bottom .footer-menu ul{justify-content:center}
}

/* ===== Mobile nav fix — keep logo perfectly centered when CTA hides ===== */

@media (max-width:1199px){
  .nav-cta-top{padding:10px 16px; font-size:11px; letter-spacing:1.5px}
}

@media (max-width:809px){
  .nav{grid-template-columns:auto 1fr auto; gap:8px}
  .nav-right{gap:6px}
  .nav-cta-top{padding:9px 14px; font-size:10px}
  .nav-logo .hero-logo-wordmark{font-size:18px; letter-spacing:.16em; text-indent:.16em}
  .nav-logo .hero-logo-img{max-height:32px}
}

@media (max-width:479px){
  .nav{gap:6px}
  .nav-cta-top{padding:8px 12px; font-size:9px; letter-spacing:.8px}
  .nav-logo .hero-logo-wordmark{font-size:15px; letter-spacing:.1em; text-indent:.1em}
  .nav-logo .hero-logo-img{max-height:28px}
}


/* Dim the page behind the search panel */

body.search-open::after{
  content:""; position:fixed; inset:0; z-index:150;
  background:rgba(51,51,51,.4);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  animation:resrvFadeIn .3s ease forwards;
}

@keyframes resrvFadeIn{ from{opacity:0} to{opacity:1} }

@media (max-width:809px){
}

/* ============================================================
   CHROME — header nav, full-screen menu overlay, mobile sticky CTA
   (moved from homepage.css so they apply to every page, not just homepage)
   ============================================================ */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:24px var(--pad-x);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
  padding-top:max(24px, env(safe-area-inset-top));
  gap:16px;
}

.nav.scrolled{
  background:rgba(247,241,232,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  padding:14px var(--pad-x);
  padding-top:max(14px, env(safe-area-inset-top));
  border-color:rgba(51,51,51,.08);
}

/* On inner pages the nav floats over cream content — give it a baseline tint
   from the very first paint so it doesn't look transparent or overlap text. */
body.is-inner-page .nav{
  background:rgba(247,241,232,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(51,51,51,.06);
}

.nav-cta-top{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  font-family:var(--sans);
  font-size:12px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  white-space:nowrap;
  position:relative;
  /* Real-button styling — taupe pill on cream/hero, inverts cleanly on scroll */
  padding:12px 22px;
  background:var(--taupe);
  color:var(--charcoal);
  border:1px solid var(--taupe);
  border-radius:999px;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.nav-cta-top .cta-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--charcoal);
  display:inline-block;
  animation:pulseDot 2.4s infinite ease-in-out;
}

@keyframes pulseDot{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.4); opacity:.6}
}

.nav.scrolled .nav-cta-top{
  background:var(--charcoal);
  color:var(--cream);
  border-color:var(--charcoal);
}

.nav.scrolled .nav-cta-top .cta-dot{background:var(--taupe)}

.nav-cta-top:hover{
  background:var(--charcoal);
  color:var(--cream);
  border-color:var(--charcoal);
  opacity:1;
}

.nav-cta-top:hover .cta-dot{background:var(--taupe)}

.nav-logo{
  /* Brand logo pinned to the top-left of the nav, medium size. */
  grid-column:1;
  grid-row:1;
  justify-self:start;
  display:inline-flex; align-items:center;
  width:auto; height:auto; overflow:visible;
  /* Logo is now a link (home / back-to-top): keep it clean. */
  text-decoration:none; cursor:pointer; color:inherit;
}

/* Medium-size brand mark inside the nav (overrides the large hero sizing). */
.nav-logo .hero-logo-img{
  max-height:40px; width:auto;
  -webkit-filter:none; filter:none;
}

.nav-logo .hero-logo-wordmark{
  font-size:22px;
  letter-spacing:.3em;
  text-indent:.3em;
  color:var(--charcoal);
}

/* Over the dark front-page hero (before scroll) the logo should read cream. */
body.has-dark-hero .nav:not(.scrolled) .nav-logo .hero-logo-wordmark{color:var(--cream)}

/* ===== Multi-logo system (Customizer → RESRV Theme Settings → Logos) ===== */
.resrv-logo{display:block; width:auto; max-width:100%}
/* Header light/dark swap by scroll/hero state */
.nav-logo .nav-logo-light{display:none}
.nav-logo .nav-logo-dark{display:inline-block}
body.has-dark-hero .nav:not(.scrolled) .nav-logo .nav-logo-light{display:inline-block}
body.has-dark-hero .nav:not(.scrolled) .nav-logo .nav-logo-dark{display:none}
/* Footer + menu logo placement */
.footer-brand .footer-logo{margin-bottom:18px}
.site-footer.footer-cols-1 .footer-brand .footer-logo{margin-left:auto; margin-right:auto}
.site-menu-mark .resrv-logo{margin:0 auto}
body.has-dark-hero .nav:not(.scrolled) .nav-logo .hero-logo-img{
  -webkit-filter:brightness(0) invert(1); filter:brightness(0) invert(1);
}

.menu-toggle{
  justify-self:end;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px; min-width:44px; min-height:44px;
  /* Default = charcoal so it's visible on every page. Cream only when sitting
     over the dark hero (front-page) and not yet scrolled — see body class rule. */
  color:var(--charcoal);
  z-index:101;
  transition:color .3s ease, opacity .25s ease;
}

body.has-dark-hero .nav:not(.scrolled) .menu-toggle{color:var(--cream)}

/* Legibility over lighter hero images: subtle shadow on the cream logo + toggle. */
body.has-dark-hero .nav:not(.scrolled) .nav-logo .hero-logo-wordmark{text-shadow:0 1px 14px rgba(0,0,0,.35)}
body.has-dark-hero .nav:not(.scrolled) .nav-logo .hero-logo-img,
body.has-dark-hero .nav:not(.scrolled) .menu-toggle-icon{-webkit-filter:drop-shadow(0 1px 6px rgba(0,0,0,.4)); filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))}

.menu-toggle:hover{opacity:.65}

/* Overlay is cream, so the close (X) must be charcoal to stay visible. */
.menu-toggle.is-open{color:var(--charcoal) !important; opacity:1}

/* While the full-screen menu is open, recede the fixed nav so the centered
   CTA pill and left logo don't sit on top of the overlay — only the X shows. */
body.menu-open .nav{
  background:transparent !important;
  border-color:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

body.menu-open .nav-cta-top,
body.menu-open .nav-logo{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease;
}

.menu-toggle-icon{
  position:relative; display:inline-block;
  width:22px; height:14px;
}

.menu-toggle-icon span{
  position:absolute; left:0; right:0;
  height:1.5px; background:currentColor;
  transition:transform .35s var(--ease), top .35s var(--ease);
}

.menu-toggle-icon span:nth-child(1){top:4px}

.menu-toggle-icon span:nth-child(2){top:10px}

.menu-toggle.is-open .menu-toggle-icon span:nth-child(1){top:7px; transform:rotate(45deg)}

.menu-toggle.is-open .menu-toggle-icon span:nth-child(2){top:7px; transform:rotate(-45deg)}

.site-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--cream);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
  overflow-y:auto;
}

.site-menu.open{
  opacity:1; pointer-events:auto; visibility:visible;
  transition:opacity .5s var(--ease), visibility 0s linear 0s;
}

.site-menu-actions{
  position:absolute; top:0; left:0;
  display:flex; gap:14px; align-items:center;
  padding:calc(env(safe-area-inset-top) + 22px) 0 0 var(--pad-x);
  z-index:2;
  opacity:0; transform:translateY(-10px);
  transition:opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s;
}

.site-menu.open .site-menu-actions{opacity:1; transform:translateY(0)}

.site-menu-actions a{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px;
  font-size:13px; font-weight:500; letter-spacing:1.5px;
  text-transform:uppercase;
  background:var(--charcoal); color:var(--cream);
  transition:background .25s ease, color .25s ease;
  min-height:44px;
}

.site-menu-actions a:hover{background:var(--taupe-dark); color:var(--cream)}

.site-menu-actions a.outline{
  background:transparent; color:var(--charcoal);
  border:1px solid var(--charcoal);
}

.site-menu-actions a.outline:hover{background:var(--charcoal); color:var(--cream)}

.site-menu-actions a svg{width:14px; height:14px}

.site-menu-inner{
  max-width:680px;
  min-height:100dvh;
  box-sizing:border-box;
  margin:0 auto;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  text-align:center;
  /* Lifted up, with comfortable breathing room at the bottom (no clipping). */
  padding:calc(env(safe-area-inset-top) + 22px) var(--pad-x) 48px;
  gap:6px;
}

.site-menu-brand{
  display:flex; flex-direction:column;
  align-items:center; gap:8px;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s;
  margin-bottom:8px;
}

.site-menu.open .site-menu-brand{opacity:1; transform:translateY(0)}

.site-menu-mark{
  width:auto; height:auto;
  display:flex; align-items:center; justify-content:center;
  color:var(--taupe);
}

.site-menu-mark svg{width:88px; height:88px}

/* Brand mark renders in taupe. Hide the redundant hero wordmark so the
   taupe RESRV from .site-menu-logo is the single brand lockup; show an
   uploaded logo image in its natural colors (no hero invert). */
.site-menu-mark .hero-logo-wordmark{display:none}

.site-menu-mark .hero-logo-img{
  max-height:72px; width:auto;
  -webkit-filter:none; filter:none;
}

.site-menu-logo{
  font-family:var(--serif);
  font-size:30px;
  letter-spacing:7px;
  color:var(--taupe);
  font-weight:400;
}

.site-menu-nav{
  display:flex; flex-direction:column;
  align-items:center; gap:2px;
  width:100%;
  list-style:none;
}

/* Strip default list bullets from WordPress menu items. */
.site-menu-nav ul,
.site-menu-nav li{
  list-style:none;
  margin:0; padding:0;
}

.site-menu-nav li{
  width:100%;
  display:flex; justify-content:center;
}

.site-menu-nav li::marker{content:""}

.site-menu-nav a{
  display:inline-block;
  padding:7px 16px;
  font-family:var(--serif);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:400;
  color:var(--charcoal);
  transition:color .35s ease, opacity .35s ease;
  opacity:0; transform:translateY(12px);
}

.site-menu-nav a:hover{color:var(--taupe-dark); opacity:.85}

.site-menu-nav a.menu-cta{
  margin-top:10px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--taupe-dark);
}

.site-menu-nav a.menu-cta:hover{color:var(--charcoal)}

.site-menu.open .site-menu-nav a{opacity:1; transform:translateY(0)}

.site-menu.open .site-menu-nav a:nth-child(1){transition:opacity .6s var(--ease) .22s, transform .6s var(--ease) .22s, color .35s ease}

.site-menu.open .site-menu-nav a:nth-child(2){transition:opacity .6s var(--ease) .28s, transform .6s var(--ease) .28s, color .35s ease}

.site-menu.open .site-menu-nav a:nth-child(3){transition:opacity .6s var(--ease) .34s, transform .6s var(--ease) .34s, color .35s ease}

.site-menu.open .site-menu-nav a:nth-child(4){transition:opacity .6s var(--ease) .40s, transform .6s var(--ease) .40s, color .35s ease}

.site-menu.open .site-menu-nav a:nth-child(5){transition:opacity .6s var(--ease) .46s, transform .6s var(--ease) .46s, color .35s ease}

.site-menu.open .site-menu-nav a:nth-child(6){transition:opacity .6s var(--ease) .52s, transform .6s var(--ease) .52s, color .35s ease}

.site-menu.open .site-menu-nav a:nth-child(7){transition:opacity .6s var(--ease) .58s, transform .6s var(--ease) .58s, color .35s ease}

.site-menu-footer{
  display:flex; flex-direction:column;
  align-items:center; gap:12px;
  margin-top:18px;
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease) .7s, transform .8s var(--ease) .7s;
}

.site-menu.open .site-menu-footer{opacity:1; transform:translateY(0)}

.connect-label{
  font-family:var(--sans);
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
}

.site-menu-social{display:flex; gap:18px}

.site-menu-social a{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--charcoal); opacity:.55;
  transition:all .25s ease;
}

.site-menu-social a:hover{
  opacity:1; color:var(--taupe-dark); transform:translateY(-2px);
}

.site-menu-social svg{width:18px; height:18px}

.menu-toggle.is-open{color:var(--charcoal) !important}

.mobile-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  z-index:90;
  padding:14px 16px;
  padding-bottom:max(14px, env(safe-area-inset-bottom));
  background:var(--charcoal);
  border-top:1px solid rgba(184,169,154,.2);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}

.mobile-cta.show{transform:translateY(0)}

.mobile-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}

.mobile-cta .label{flex:1; display:flex; flex-direction:column; gap:2px}

.mobile-cta .label .top{
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--taupe-light); opacity:.85;
}

.mobile-cta .label .main{
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--cream); font-weight:400;
}

.mobile-cta .btn{
  padding:12px 20px; font-size:11px;
  background:var(--taupe); color:var(--charcoal); border-color:var(--taupe);
  min-height:44px;
}

.mobile-cta .btn:hover{background:var(--cream); border-color:var(--cream)}

@media (max-width:809px) {
  .nav{
    padding:16px var(--pad-x);
    padding-top:max(16px, env(safe-area-inset-top));
    grid-template-columns:auto 1fr auto;
  }
  .nav.scrolled{
    padding:12px var(--pad-x);
    padding-top:max(12px, env(safe-area-inset-top));
  }
  .menu-toggle{padding:10px; min-width:44px}
  .menu-toggle-icon{width:24px; height:16px}
  .menu-toggle-icon span{height:1.5px}
  .menu-toggle-icon span:nth-child(1){top:5px}
  .menu-toggle-icon span:nth-child(2){top:11px}
  .menu-toggle.is-open .menu-toggle-icon span:nth-child(1){top:8px}
  .menu-toggle.is-open .menu-toggle-icon span:nth-child(2){top:8px}
  .site-menu-inner{padding:64px var(--pad-x) 56px}
  .site-menu-logo{font-size:24px; letter-spacing:7px; text-align:center}
  .site-menu-mark{width:auto; height:auto}
  .site-menu-nav a{padding:8px 12px; font-size:clamp(20px, 5vw, 26px)}
  .site-menu-footer{flex-direction:column; align-items:center; gap:14px; margin-top:24px}
  .site-menu-actions{
    top:auto; bottom:0; left:0; right:0;
    padding:14px var(--pad-x) calc(env(safe-area-inset-bottom) + 14px) var(--pad-x);
    display:flex; gap:10px; justify-content:center;
    background:rgba(247,241,232,.92);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid rgba(51,51,51,.08);
  }
  .site-menu-actions a{
    flex:1;
    max-width:200px;
    justify-content:center;
    padding:14px 14px;
    font-size:12px;
    letter-spacing:1.5px;
    min-height:48px;
  }
  .site-menu-actions a svg{width:14px; height:14px}
  .mobile-cta{display:block}
}

@media (max-width:380px) {
  .nav{padding:12px 14px; padding-top:max(12px, env(safe-area-inset-top))}
  .menu-toggle{padding:8px}
  .site-menu-actions{padding:12px 14px calc(env(safe-area-inset-bottom) + 12px) 14px; gap:8px}
  .site-menu-actions a{padding:12px 10px; font-size:11px; letter-spacing:1.2px; gap:6px}
  .site-menu-inner{padding:60px 14px 52px}
}

@media (forced-colors: active) {
  .nav.scrolled{background:Canvas}
}

@media print {
  .nav, .hero-fixed, .hero-spacer, .scene-nav, .menu-toggle, .site-menu, .mobile-cta{display:none !important}
}

/* ============================================================
   FAQ page template — editorial accordion
   ============================================================ */

.faq-main{
  /* Slightly tighter top padding than other inner pages — the FAQ hero is
     part of the same column, so we let the header carry the spacing rhythm. */
  padding:clamp(110px, 13vw, 160px) 0 clamp(80px, 10vw, 120px);
}

.faq-main .site-container{max-width:880px}

.faq-header{
  text-align:center;
  margin-bottom:clamp(56px, 7vw, 88px);
}

.faq-header .eyebrow{
  display:inline-flex;
  font-family:var(--sans);
  font-size:12px; font-weight:500;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--taupe-dark);
  margin-bottom:18px;
}

.faq-headline{
  font-family:var(--serif);
  font-size:clamp(36px, 5.5vw, 64px);
  line-height:1.08;
  margin:0 0 18px;
  color:var(--charcoal);
  text-wrap:balance;
}

.faq-intro{
  max-width:620px;
  margin:0 auto;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.faq-list{
  border-top:1px solid rgba(51,51,51,.12);
}

.faq-item{
  border-bottom:1px solid rgba(51,51,51,.12);
}

/* Strip default <details> marker — we render our own + icon */
.faq-item summary{
  list-style:none;
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}

.faq-question{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:clamp(20px, 2.6vw, 32px) 0;
  outline:none;
  position:relative;
}

.faq-q-text{
  flex:1;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.3;
  color:var(--charcoal);
  text-wrap:balance;
  transition:color .25s ease;
}

.faq-q-icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:36px; height:36px;
  color:var(--taupe-dark);
  border:1px solid rgba(51,51,51,.18);
  border-radius:50%;
  transition:transform .35s var(--ease, ease), background .25s ease, color .25s ease, border-color .25s ease;
}

/* Rotate + → × when open */
.faq-item[open] .faq-q-icon{
  transform:rotate(45deg);
  background:var(--charcoal);
  color:var(--cream);
  border-color:var(--charcoal);
}

.faq-item summary:hover .faq-q-text,
.faq-item summary:focus-visible .faq-q-text{color:var(--taupe-dark)}

.faq-item summary:hover .faq-q-icon,
.faq-item summary:focus-visible .faq-q-icon{
  border-color:var(--taupe-dark);
  color:var(--taupe-dark);
}

.faq-answer{
  padding:4px 0 clamp(20px, 2.6vw, 32px);
  padding-right:60px;             /* keep answer text away from the icon */
  color:var(--charcoal);
  opacity:.82;
}

.faq-answer p{
  font-size:16px;
  line-height:1.75;
  margin:0 0 .9em;
}

.faq-answer p:last-child{margin-bottom:0}

.faq-extra{margin-top:64px}

/* Open-state smooth grow — only browsers that support the modern selector get
   the animation; everything else just instant-expands which is still fine. */
@supports (interpolate-size: allow-keywords){
  .faq-item[open] > .faq-answer,
  .faq-item:not([open]) > .faq-answer{
    interpolate-size: allow-keywords;
  }
}

@media (max-width:809px){
  .faq-main{padding:clamp(90px, 14vw, 130px) 0 80px}
  .faq-answer{padding-right:0}
  .faq-q-icon{width:32px; height:32px}
  .faq-q-icon svg{width:18px; height:18px}
}