/* Cedarstone accessibility controls */
.nav-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.accessibility-toggle{width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:#fff;cursor:pointer;padding:0;border-radius:50%;transition:background .2s ease,color .25s ease,transform .2s ease;z-index:104;text-shadow:0 1px 10px rgba(0,0,0,.32)}
.accessibility-toggle:hover,.accessibility-toggle:focus-visible{background:rgba(255,255,255,.14);outline:none}
.accessibility-toggle:active{transform:scale(.96)}
.accessibility-toggle svg{width:23px;height:23px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav.nav-scrolled .accessibility-toggle,.nav.nav-light .accessibility-toggle{color:var(--cedar-deep);text-shadow:none}
.nav.nav-scrolled .accessibility-toggle:hover,.nav.nav-light .accessibility-toggle:hover{background:rgba(64,88,79,.09)}

.accessibility-panel{position:fixed;z-index:220;top:94px;right:clamp(16px,2vw,30px);width:min(340px,calc(100vw - 32px));padding:20px;background:rgba(255,252,247,.99);color:var(--cedar-deep);border:1px solid rgba(64,88,79,.16);border-radius:12px;box-shadow:0 18px 50px rgba(20,37,31,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.accessibility-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.accessibility-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.accessibility-panel-title{font:500 20px/1.1 "Instrument Serif",serif;letter-spacing:.01em}
.accessibility-close{width:32px;height:32px;border:0;background:rgba(64,88,79,.07);color:var(--cedar-deep);border-radius:50%;cursor:pointer;font:400 20px/1 "DM Sans",sans-serif;display:grid;place-items:center}
.accessibility-group{padding:15px 0;border-top:1px solid rgba(64,88,79,.12)}
.accessibility-group:first-of-type{border-top:0;padding-top:0}
.accessibility-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font:600 10px/1.2 "DM Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase}
.accessibility-value{font-weight:500;letter-spacing:.03em;color:rgba(41,60,53,.62)}
.accessibility-size-controls{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center}
.accessibility-size-btn,.accessibility-reset{min-height:40px;border:1px solid rgba(64,88,79,.18);background:#fff;color:var(--cedar-deep);border-radius:8px;cursor:pointer;font:600 14px/1 "DM Sans",sans-serif}
.accessibility-size-btn:hover,.accessibility-reset:hover{background:#f3f0e7}
.accessibility-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.accessibility-toggle-copy{font:400 13px/1.45 "DM Sans",sans-serif;color:rgba(41,60,53,.78)}
.accessibility-switch{position:relative;width:48px;height:28px;flex:0 0 auto;border:0;border-radius:999px;background:#c9cec8;cursor:pointer;padding:0;transition:background .2s ease}
.accessibility-switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .2s ease}
.accessibility-switch[aria-checked="true"]{background:var(--cedar)}
.accessibility-switch[aria-checked="true"]::after{transform:translateX(20px)}
.accessibility-note{margin:12px 0 0;font:400 10px/1.45 "DM Sans",sans-serif;color:rgba(41,60,53,.55)}

/* Site-wide monochrome viewing mode without changing layout/fixed positioning. */
/*html.a11y-grayscale body>nav,*/
html.a11y-grayscale body>.mobile-overlay,
html.a11y-grayscale body>main,
html.a11y-grayscale body>footer,
html.a11y-grayscale body>.accessibility-panel{filter:grayscale(1)}

@media(max-width:900px){
  .nav-actions{gap:0}
  .accessibility-toggle{width:42px;height:42px;margin-right:2px}
  .accessibility-panel{top:78px;right:12px}
}
@media(max-width:560px){
  .accessibility-toggle{width:38px;height:38px}
  .accessibility-toggle svg{width:21px;height:21px}
  .accessibility-panel{top:70px;left:12px;right:12px;width:auto;padding:18px}
}
@media(prefers-reduced-motion:reduce){
  .accessibility-panel,.accessibility-toggle,.accessibility-switch,.accessibility-switch::after{transition:none}
}


/* 2026-09-19 - correct Cedarstone logo + mountain-edge mobile navigation */
.brand img,.mobile-menu-brand img,
.nav.nav-light .brand img,.nav.nav-scrolled .brand img{
  filter:none!important;
}

@media(max-width:900px){
  .mobile-overlay{
    background:transparent!important;
    overflow:hidden!important;
    padding:0!important;
  }
  .mobile-overlay::before,.mobile-overlay::after{display:none!important}
  .mobile-menu-shell{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:64px!important;
    bottom:0!important;
    width:100%!important;
    min-height:0!important;
    padding:116px clamp(24px,6vw,46px) 28px!important;
    background:#f7f3eb!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    clip-path:polygon(
      0 78px,
      10% 28px,
      20% 60px,
      29% 14px,
      40% 58px,
      50% 38px,
      61% 82px,
      70% 30px,
      82% 62px,
      100% 88px,
      100% 100%,
      0 100%
    );
    -webkit-clip-path:polygon(
      0 78px,
      10% 28px,
      20% 60px,
      29% 14px,
      40% 58px,
      50% 38px,
      61% 82px,
      70% 30px,
      82% 62px,
      100% 88px,
      100% 100%,
      0 100%
    );
  }
  .mobile-menu-top{padding-bottom:20px!important}
}

@media(max-width:560px){
  .mobile-menu-shell{
    top:54px!important;
    padding:106px 22px 24px!important;
    clip-path:polygon(
      0 74px,
      11% 24px,
      21% 58px,
      30% 12px,
      42% 56px,
      51% 36px,
      62% 78px,
      71% 26px,
      83% 58px,
      100% 82px,
      100% 100%,
      0 100%
    );
    -webkit-clip-path:polygon(
      0 74px,
      11% 24px,
      21% 58px,
      30% 12px,
      42% 56px,
      51% 36px,
      62% 78px,
      71% 26px,
      83% 58px,
      100% 82px,
      100% 100%,
      0 100%
    );
  }
}

/* Mobile menu layering fix */
.accessibility-panel{z-index:260!important}
@media(max-width:900px){.accessibility-toggle{position:relative!important;z-index:241!important}}

/* 2026-09-19 - mobile round logo + compact open state + gentle menu bounce */
.brand-logo{display:block;line-height:0;flex:0 0 auto}
.brand-logo img{display:block}

@media(max-width:900px){
  /* Mobile uses the dedicated round mark. The PNG itself is white + transparent. */
  .brand-logo img{
    width:76px!important;
    height:76px!important;
    object-fit:contain!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:none!important;
    transition:width .46s cubic-bezier(.22,.8,.2,1),height .46s cubic-bezier(.22,.8,.2,1),transform .46s cubic-bezier(.22,.8,.2,1)!important;
  }
  .nav.nav-light .brand-logo img,.nav.nav-scrolled .brand-logo img{
    width:54px!important;
    height:54px!important;
    filter:none!important;
  }

  /* While the menu is open, the mark becomes about half-size and the whole lockup lifts. */
  body.menu-open .nav .brand-logo img,
  body.menu-open .nav.nav-light .brand-logo img,
  body.menu-open .nav.nav-scrolled .brand-logo img{
    width:38px!important;
    height:38px!important;
    filter:none!important;
  }
  body.menu-open .nav .brand,
  body.menu-open .nav.nav-scrolled .brand{
    transform:translateY(-8px)!important;
  }

  /* A small spring as the mountain panel settles into place. */
  body.menu-open .mobile-menu-shell{
    animation:cedarMenuSettle .64s cubic-bezier(.22,.8,.2,1) both!important;
  }
  @keyframes cedarMenuSettle{
    0%{transform:translateY(18px);opacity:.82}
    58%{transform:translateY(-5px);opacity:1}
    78%{transform:translateY(2px)}
    100%{transform:translateY(0);opacity:1}
  }
}

@media(max-width:560px){
  .brand-logo img{width:68px!important;height:68px!important}
  .nav.nav-light .brand-logo img,.nav.nav-scrolled .brand-logo img{width:48px!important;height:48px!important}
  body.menu-open .nav .brand-logo img,
  body.menu-open .nav.nav-light .brand-logo img,
  body.menu-open .nav.nav-scrolled .brand-logo img{width:34px!important;height:34px!important}
}

@media(prefers-reduced-motion:reduce){
  body.menu-open .mobile-menu-shell{animation:none!important}
}


/* 2026-09-19 - final mobile mountain motion + depth correction */
@media(max-width:900px){
  /* The overlay may slide, but the mountain panel itself never springs or bounces. */
  .mobile-menu-shell,
  body.menu-open .mobile-menu-shell{
    animation:none!important;
    transform:none!important;
    transition:none!important;
    filter:
      drop-shadow(0 -8px 12px rgba(139,98,57,.30))
      drop-shadow(0 -2px 4px rgba(83,58,34,.24))
      drop-shadow(0 18px 30px rgba(67,43,25,.34))!important;
  }
  .mobile-overlay{overflow:visible!important}
}

/* 2026-09-20 - Cedar-deep mobile menu canopy + contained booking CTA */
@media(max-width:900px){
  /* Fill the formerly transparent canopy with cedar-deep and fade it in behind the mountains. */
  .mobile-overlay{
    background:transparent!important;
    overflow:hidden!important;
  }
  .mobile-overlay::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:linear-gradient(
      180deg,
      #293C35 0,
      #293C35 150px,
      rgba(41,60,53,.96) 190px,
      rgba(41,60,53,.68) 235px,
      rgba(41,60,53,0) 300px
    )!important;
    opacity:0!important;
    transition:opacity .34s ease!important;
  }
  body.menu-open .mobile-overlay::before{opacity:1!important}

  /* Keep the mountain panel and its content above the cedar canopy. */
  .mobile-menu-shell{z-index:2!important}

  /* Header remains fully usable/visible while the menu is active. */
  body.menu-open .nav{z-index:245!important}
  body.menu-open .nav .brand,
  body.menu-open .nav .brand small,
  body.menu-open .nav .accessibility-toggle,
  body.menu-open .nav .menu-toggle{color:#fff!important}
  body.menu-open .nav .menu-toggle span{background:#fff!important}
  body.menu-open .nav .accessibility-toggle{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  body.menu-open .nav .menu-toggle{opacity:1!important;visibility:visible!important;pointer-events:auto!important}

  /* Keep the booking CTA comfortably within the viewport. */
  .mobile-overlay-foot{display:flex!important;justify-content:center!important;width:100%!important}
  .mobile-book-cta{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:calc(100vw - 48px)!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:28px!important;
    padding-right:28px!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
  }
}

@media(max-width:560px){
  .mobile-overlay::before{
    background:linear-gradient(
      180deg,
      #293C35 0,
      #293C35 132px,
      rgba(41,60,53,.96) 170px,
      rgba(41,60,53,.66) 215px,
      rgba(41,60,53,0) 270px
    )!important;
  }
  .mobile-book-cta{
    max-width:calc(100vw - 40px)!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
}


/* 2026-09-20 - keep mobile header controls stationary while menu is open */
@media(max-width:900px){
  body.menu-open .nav:not(.nav-scrolled) .brand{transform:translateY(3px)!important;}
  body.menu-open .nav.nav-scrolled .brand{transform:translateY(0)!important;}
  body.menu-open .nav .accessibility-toggle,
  body.menu-open .nav .menu-toggle{transform:none!important;}
}

/* 2026-09-20 - final mobile menu footer alignment */
@media(max-width:900px){
  .mobile-overlay-foot{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    gap:18px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  .mobile-overlay-foot>div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    gap:9px!important;
    text-align:center!important;
    white-space:normal!important;
  }
  .mobile-overlay-foot>div span,
  .mobile-overlay-foot>div a{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    margin:0 auto!important;
    text-align:center!important;
    line-height:1.45!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-book-cta{
    width:min(300px,calc(100vw - 56px))!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:15px 24px!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }
}
@media(max-width:560px){
  .mobile-overlay-foot{gap:15px!important}
  .mobile-book-cta{width:min(280px,calc(100vw - 44px))!important;padding:14px 20px!important}
}


/* 2026-09-20 - canonical header brand lockup, matched to index page */
.nav,
.nav.nav-scrolled,
.nav:not(.nav-scrolled){
  box-sizing:border-box!important;
}

@media(min-width:901px){
  .nav,
  .nav.nav-scrolled,
  .nav:not(.nav-scrolled){
    left:45px!important;
    right:45px!important;
    width:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

.brand{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  margin-left:0!important;
  padding-left:0!important;
  position:relative!important;
  transform:translateY(6px)!important;
  font-size:clamp(48px,3.7vw,62px)!important;
  line-height:.82!important;
  letter-spacing:.015em!important;
}
.brand>span{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
}
.brand small{
  width:100%!important;
  text-align:center!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:.24em!important;
  margin-top:9px!important;
  font-weight:700!important;
}

.brand-logo{
  display:block!important;
  line-height:0!important;
  flex:0 0 auto!important;
}
.brand-logo img{
  display:block!important;
  width:76px!important;
  height:88px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.28))!important;
}

.brand-logo-scrolled{
  display:none!important;
  flex:0 0 auto!important;
  object-fit:cover!important;
  border-radius:50%!important;
  background:#fff!important;
}

.nav.nav-scrolled .brand{
  transform:translateY(1px)!important;
  font-size:32px!important;
  gap:11px!important;
}
.nav.nav-scrolled .brand small{
  font-size:7px!important;
  margin-top:5px!important;
  letter-spacing:.22em!important;
}
.nav.nav-scrolled .brand-logo{
  display:none!important;
}
.nav.nav-scrolled .brand-logo-scrolled{
  display:block!important;
  width:54px!important;
  height:54px!important;
  box-shadow:none!important;
}

@media(max-width:900px){
  .nav,
  .nav.nav-scrolled,
  .nav:not(.nav-scrolled){
    left:24px!important;
    right:24px!important;
    width:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .brand{
    transform:translateY(3px)!important;
    font-size:36px!important;
    gap:10px!important;
  }
  .brand small{
    font-size:7px!important;
    margin-top:5px!important;
  }
  .brand-logo img{
    width:76px!important;
    height:76px!important;
    object-fit:contain!important;
    filter:none!important;
  }
  .nav.nav-scrolled .brand{
    transform:translateY(0)!important;
    font-size:27px!important;
  }
  .nav.nav-scrolled .brand-logo-scrolled{
    width:54px!important;
    height:54px!important;
  }
}

@media(max-width:560px){
  .nav,
  .nav.nav-scrolled,
  .nav:not(.nav-scrolled){
    left:20px!important;
    right:20px!important;
  }
  .brand{
    font-size:31px!important;
    gap:8px!important;
  }
  .brand small{
    font-size:6px!important;
    letter-spacing:.2em!important;
    margin-top:4px!important;
  }
  .brand-logo img{
    width:68px!important;
    height:68px!important;
  }
  .nav.nav-scrolled .brand{
    font-size:24px!important;
  }
  .nav.nav-scrolled .brand-logo-scrolled{
    width:48px!important;
    height:48px!important;
  }
}

/* 2026-09-25 — faint unified desktop menu pill, accessibility included */
@media (min-width:901px){
  .nav .nav-actions{
    gap:2px!important;
    margin-left:auto;
    padding:4px 5px 4px 7px!important;
    border:1px solid rgba(255,255,255,.075)!important;
    border-radius:999px!important;
    background:rgba(5,10,8,.095)!important;
    box-shadow:0 3px 14px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.035)!important;
    -webkit-backdrop-filter:blur(7px) saturate(102%);
    backdrop-filter:blur(7px) saturate(102%);
    transition:background .3s ease,border-color .3s ease,box-shadow .3s ease!important;
  }
  .nav .navlinks{
    gap:2px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    color:rgba(255,255,255,.96)!important;
    text-shadow:0 1px 7px rgba(0,0,0,.26)!important;
  }
  .nav .navlinks a{
    border-radius:999px!important;
    padding:10px 13px!important;
  }
  .nav .navlinks a:not(.book)::after{
    left:13px!important;
    right:13px!important;
    bottom:5px!important;
  }
  .nav .accessibility-toggle{
    width:36px!important;
    height:36px!important;
    margin:0!important;
    color:rgba(255,255,255,.91)!important;
    text-shadow:0 1px 7px rgba(0,0,0,.24)!important;
    background:transparent!important;
  }
  .nav .accessibility-toggle svg{
    width:21px!important;
    height:21px!important;
  }
  .nav .accessibility-toggle:hover,
  .nav .accessibility-toggle:focus-visible{
    background:rgba(255,255,255,.075)!important;
  }

  /* Keep the pill equally faint once the light sticky header appears. */
  .nav.nav-light .nav-actions,
  .nav.nav-scrolled .nav-actions,
  .nav.nav-light.nav-scrolled .nav-actions{
    background:rgba(10,18,14,.07)!important;
    border-color:rgba(32,55,46,.075)!important;
    box-shadow:0 3px 13px rgba(25,45,38,.055), inset 0 1px 0 rgba(255,255,255,.16)!important;
  }
  .nav.nav-light .navlinks,
  .nav.nav-scrolled .navlinks,
  .nav.nav-light.nav-scrolled .navlinks{
    color:var(--cedar-deep)!important;
    text-shadow:none!important;
  }
  .nav.nav-light .accessibility-toggle,
  .nav.nav-scrolled .accessibility-toggle,
  .nav.nav-light.nav-scrolled .accessibility-toggle{
    color:var(--cedar-deep)!important;
    text-shadow:none!important;
  }
  .nav.nav-light .accessibility-toggle:hover,
  .nav.nav-scrolled .accessibility-toggle:hover,
  .nav.nav-light.nav-scrolled .accessibility-toggle:hover{
    background:rgba(64,88,79,.055)!important;
  }
}


/* 2026-09-25 scrolled logo refinement: transparent mark with safe breathing room */
.nav.nav-scrolled .brand-logo-scrolled{
  width:48px!important;
  height:48px!important;
  padding:2px!important;
  border:0!important;
  border-radius:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
@media(max-width:560px){
  .nav.nav-scrolled .brand-logo-scrolled{
    width:44px!important;
    height:44px!important;
    padding:2px!important;
  }
}
