@import url('../scene-rail.css?v=3');
/* V10.12 — shared MSK navigation for every detail page */
.detail-top.detail-top--site{
  position:fixed!important;
  top:0!important;
  z-index:5000!important;
  width:100%!important;
  height:auto!important;
  padding:12px 16px 0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.detail-shell{padding-top:164px!important}
.detail-top__shell{
  width:100%;
  display:grid;
  grid-template-columns:minmax(300px,.95fr) minmax(0,1.9fr) auto;
  align-items:center;
  gap:12px 16px;
  min-height:94px;
  padding:9px clamp(14px,1.5vw,27px) 10px;
  border:1px solid transparent;
  border-radius:20px;
  background:linear-gradient(115deg,rgba(28,22,18,.96),rgba(12,15,17,.95) 56%,rgba(15,30,32,.94)) padding-box,linear-gradient(110deg,rgba(248,210,145,.72),rgba(232,205,166,.16) 44%,rgba(160,223,228,.38) 74%,rgba(248,210,145,.6)) border-box;
  box-shadow:0 20px 55px rgba(0,0,0,.45),0 4px 13px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,238,205,.14);
  backdrop-filter:blur(22px) saturate(1.25);
}
.detail-top--site .detail-brand{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  min-width:0;
  color:#fff!important;
  opacity:1!important;
  text-transform:none!important;
  text-decoration:none!important;
}
.detail-brand__mark{
  width:72px;
  height:72px;
  flex:0 0 72px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(239,202,142,.43);
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,rgba(239,202,142,.18),rgba(11,13,14,.76) 65%);
  box-shadow:inset 0 1px 0 rgba(255,238,203,.18),0 0 24px rgba(205,147,75,.19);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.detail-brand__mark img{
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
  filter:invert(1) brightness(2.2)!important;
}
.detail-brand:hover .detail-brand__mark,
.detail-brand:focus-visible .detail-brand__mark{
  transform:translateY(-2px) scale(1.025);
  border-color:rgba(226,197,121,.58);
  box-shadow:0 18px 38px rgba(0,0,0,.3),0 0 42px rgba(226,197,121,.15) inset;
}
.detail-brand__copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.detail-brand__copy strong{
  font:750 19px/1.05 var(--body,"Segoe UI",sans-serif)!important;
  letter-spacing:.075em!important;
  color:#fff!important;
  white-space:nowrap;
}
.detail-brand__copy em{
  font:650 10px/1 var(--body,"Segoe UI",sans-serif)!important;
  font-style:normal!important;
  letter-spacing:.15em!important;
  color:rgba(226,197,121,.84)!important;
  white-space:nowrap;
}

.detail-world-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  font-family:var(--body,"Segoe UI",sans-serif)!important;
}
.detail-world-nav::-webkit-scrollbar,.detail-section-nav::-webkit-scrollbar{display:none}
.detail-world-nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-height:43px;
  padding:9px clamp(9px,.76vw,16px);
  border:1px solid transparent;
  border-radius:999px!important;
  background:transparent;
  box-shadow:none;
  color:rgba(255,255,255,.74)!important;
  font:700 11px/1 var(--body,"Segoe UI",sans-serif)!important;
  letter-spacing:.025em!important;
  text-transform:none!important;
  white-space:nowrap;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}
.detail-world-nav a > span{
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 5px;
  border:1px solid rgba(226,197,121,.18);
  border-radius:999px;
  background:rgba(226,197,121,.13);
  color:#e2c579;
  font-size:9px;
  letter-spacing:.06em;
}
.detail-world-nav a:hover,
.detail-world-nav a:focus-visible,
.detail-world-nav a.is-current{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.12));
  background:linear-gradient(135deg,rgba(235,185,110,.22),rgba(226,196,146,.07));
  color:#fff!important;
  box-shadow:0 16px 30px rgba(0,0,0,.24),0 0 19px color-mix(in srgb,var(--accent) 10%,transparent);
}
.detail-world-nav a.is-current > span{background:color-mix(in srgb,var(--accent) 24%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

.detail-contact-cta{
  min-height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:10px 19px;
  border:1px solid rgba(226,197,121,.36);
  border-radius:999px!important;
  background:linear-gradient(120deg,rgba(237,190,117,.19),rgba(222,179,114,.07));
  box-shadow:0 18px 34px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
  color:#fff!important;
  white-space:nowrap;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.detail-contact-cta small{font:700 9px/1 var(--body,"Segoe UI",sans-serif);letter-spacing:.2em;color:rgba(226,197,121,.78)}
.detail-contact-cta span{font:750 12px/1.05 var(--body,"Segoe UI",sans-serif);letter-spacing:.055em}
.detail-contact-cta:hover,.detail-contact-cta:focus-visible{transform:translateY(-2px);border-color:rgba(226,197,121,.6);box-shadow:0 22px 38px rgba(0,0,0,.3),0 0 24px rgba(226,197,121,.09)}

.detail-section-nav{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.075);
  scrollbar-width:none;
}
.detail-section-nav__label{
  flex:0 0 auto;
  margin-right:4px;
  color:rgba(226,197,121,.62);
  font:700 8px/1 var(--body,"Segoe UI",sans-serif)!important;
  letter-spacing:.19em!important;
}
.detail-section-nav a{
  flex:0 0 auto;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:999px!important;
  color:rgba(255,255,255,.6)!important;
  font:650 10px/1 var(--body,"Segoe UI",sans-serif)!important;
  letter-spacing:.025em!important;
  text-transform:none!important;
  transition:color .22s ease,border-color .22s ease,background .22s ease;
}
.detail-section-nav a:hover,.detail-section-nav a:focus-visible{color:#fff!important;border-color:rgba(226,197,121,.22);background:rgba(226,197,121,.07)}
.detail-section-nav .detail-section-back{margin-left:auto;color:#e2c579!important;border-color:rgba(226,197,121,.18)}

/* The chapter index stays outside the global header on desktop. This keeps the
   same one-row site navigation on every detail page. */
@media(min-width:1051px){
  .detail-section-nav{
    position:fixed;
    z-index:38;
    top:50%;
    right:16px;
    grid-column:auto;
    display:flex;
    width:142px;
    max-height:calc(100vh - 210px);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:5px;
    overflow-y:auto;
    padding:15px 10px 10px;
    border:1px solid rgba(226,197,121,.25);
    border-radius:22px!important;
    background:rgba(8,13,14,.9);
    box-shadow:0 20px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(14px);
    transform:translateY(-42%);
  }
  .detail-section-nav__label{margin:0 4px 7px;font-size:8px!important}
  .detail-section-nav a{width:100%;padding:10px 8px;border-radius:13px!important}
  .detail-section-nav .detail-section-back{margin:5px 0 0;border-radius:999px!important;text-align:center}
}

.lean-mode:not(.feature-coffee) .detail-world-nav [data-feature="coffee"],
.lean-mode:not(.feature-coaching) .detail-world-nav [data-feature="coaching"],
.lean-mode:not(.feature-rental) .detail-world-nav [data-feature="rental"],
.lean-mode:not(.feature-water) .detail-world-nav [data-feature="water"],
.lean-mode:not(.feature-nocs) .detail-world-nav [data-feature="nocs"]{display:none!important}
.lean-mode .detail-world-nav a.is-current[data-feature]{display:inline-flex!important}

html{scroll-padding-top:170px}
.detail-shell :is(section,[id]){scroll-margin-top:170px}

@media(max-width:1180px){
  .detail-shell{padding-top:218px!important}
  .detail-top__shell{grid-template-columns:minmax(260px,1fr) auto}
  .detail-world-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;padding-bottom:1px}
  .detail-section-nav{grid-row:3}
}
@media(max-width:760px){
  .detail-shell{padding-top:258px!important}
  .detail-top.detail-top--site{padding:8px 8px 0!important}
  .detail-top__shell{gap:9px 10px;padding:8px 11px;border-radius:17px}
  .detail-brand__mark{width:56px;height:56px;flex-basis:56px;border-radius:50%;padding:0}
  .detail-brand__mark img{width:50px!important;height:50px!important}
  .detail-brand__copy strong{font-size:14px!important}
  .detail-brand__copy em{font-size:8px!important;letter-spacing:.11em!important}
  .detail-contact-cta{min-height:42px;padding:8px 13px;border-radius:999px!important}
  .detail-contact-cta span{font-size:11px}
  .detail-world-nav a{padding:10px 12px;font-size:10px!important}
  .detail-section-nav{justify-content:flex-start;padding-top:8px}
  .detail-section-nav__label{display:none}
  .detail-section-nav a{padding:8px 10px}
  .detail-section-nav .detail-section-back{margin-left:0}
  html{scroll-padding-top:190px}
  .detail-shell :is(section,[id]){scroll-margin-top:190px}
}
@media(max-width:520px){
  .detail-top__shell{grid-template-columns:minmax(0,1fr) auto}
  .detail-top--site .detail-brand{gap:10px!important}
  .detail-top--site .detail-brand__mark{display:grid!important;width:56px;height:56px;flex-basis:56px;border-radius:50%}
  .detail-top--site .detail-brand__copy{display:flex!important}
  .detail-brand__mark img{width:50px!important;height:50px!important}
  .detail-brand__copy strong{font-size:11px!important;letter-spacing:.055em!important}
  .detail-brand__copy em{display:none}
  .detail-contact-cta small{display:none}
  .detail-contact-cta{min-height:46px;padding:9px 12px}
  .detail-contact-cta span{font-size:10px;letter-spacing:.025em}
  .detail-world-nav a > span{min-width:22px;height:22px}
}
@media(max-width:360px){
  .detail-top--site .detail-brand__copy{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .detail-brand__mark,.detail-world-nav a,.detail-contact-cta{transition:none!important}
}