root{
  --paper:#f2f4f6;
  --ink:#223129;
  --muted:#5f6d63;
  --line:#ffffff;
  --panel:rgba(242,244,246,.86);
  --panel2:rgba(53,60,68,.92);
  --accent:#5ce1e6;
  --route:#ffffff;
  --route-soft:rgba(255,255,255,.23);
  --forest:#6f7f8f;
  --black:#000000;

  /* Main trail position */
  --trail-x:25vw;
  --waypoint-lock-y:50vh;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:auto;
}

body{
  margin:0;
  background:#f2f4f6;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(1rem,1.05vw,1.08rem);
  line-height:1.55;
  overflow-x:hidden;
}


/* ==============================
   Background / world layer
   ============================== */

.world{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#2b3138 !important;
  isolation:isolate;
}

.world::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  opacity:.10;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.12), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08), transparent 50%);
  filter:none !important;
  mix-blend-mode:normal !important;
}

.world::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.26;
  background:
    linear-gradient(90deg,rgba(0,0,0,.24),transparent 34%,transparent 72%,rgba(0,0,0,.20)),
    linear-gradient(180deg,rgba(0,0,0,.16),transparent 28%,rgba(0,0,0,.30));
  filter:none !important;
  mix-blend-mode:normal !important;
}

.bg{
  position:absolute;
  inset:-9vh -9vw;
  z-index:1;
  opacity:0;
  transform:none !important;
  transition:opacity 620ms ease !important;
  will-change:opacity;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.bg.active{
  opacity:1;
  transform:none !important;
  filter:none !important;
}

.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 45% 28%,rgba(255,246,210,.14),transparent 30%),
    radial-gradient(circle at 58% 70%,rgba(0,0,0,.38),transparent 38%),
    linear-gradient(90deg,rgba(0,0,0,.58),transparent 30%,transparent 74%,rgba(0,0,0,.42)),
    linear-gradient(180deg,rgba(0,0,0,.30),transparent 22%,rgba(0,0,0,.52));
  filter:none !important;
  mix-blend-mode:normal !important;
}

.bg::after{
  display:none !important;
}

.bg1{
  background:
    radial-gradient(circle at 9% 6%, rgba(111,127,143,.30), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(111,127,143,.22), transparent 22%),
    linear-gradient(180deg,#2b3138 0%,#353c44 38%,#48515a 68%,#66717b 86%,#8e98a2 100%);
}

.bg2{
  background:
    radial-gradient(circle at 15% 10%, rgba(186,187,188,.22), transparent 42%),
    radial-gradient(circle at 80% 15%, rgba(92,225,230,.10), transparent 26%),
    linear-gradient(180deg,#4a525b 0%,#3f4750 60%,#353c44 100%);
}

.bg3{
  background:
    radial-gradient(circle at 20% 30%, rgba(111,127,143,.24), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(186,187,188,.18), transparent 24%),
    linear-gradient(180deg,#2b3138 0%,#353c44 44%,#66717b 100%);
}

.bg4{
  background:
    radial-gradient(circle at 18% 8%, rgba(92,225,230,.10), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(111,127,143,.24), transparent 30%),
    linear-gradient(180deg,#353c44 0%,#48515a 55%,#8e98a2 100%);
}

.terrain-contours{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:max(150vw, 150vh) !important;
  height:auto !important;
  min-height:115vh !important;
  transform:translate(-50%, -50%) rotate(-2deg) scale(1.03) !important;
  transform-origin:center !important;
  z-index:2 !important;
  pointer-events:none !important;
  opacity:.24 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  will-change:auto !important;
}

.grain{
  opacity:.07 !important;
}

/* ==============================
   Header / controls
   ============================== */

.brand{
  position:fixed;
  z-index:15;
  left:28px;
  top:26px;

  display:flex;
  align-items:center;
  gap:.9rem;

  color:#ffffff;
  pointer-events:auto;
  font-weight:600;
}

.brand .logo{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
}

.brand .logo .motorhoming,
.motorhome-gradient{
  display:inline-block;
  color:#5a646e;
  background-image:linear-gradient(90deg,#5a646e 0%,#0c6980 55%,#5ce1e6 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.brand .logo .adventures{
  color:#ffffff;
}

.brand small{
  display:block;
  margin-top:10px;
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.82);
}

.brand-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
}

.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.brand-copy{
  display:flex;
  flex-direction:column;
}

.nav,
.ticker-wrap,
.ticker,
.marquee,
.scroller,
.scroll-text{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

.legend{
  position:fixed;
  left:30px;
  bottom:30px;
  z-index:15;
  color:#ffffff;
  font-size:11px;
  text-transform:lowercase;
  letter-spacing:.08em;
  display:grid;
  gap:10px;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  mix-blend-mode:normal !important;
}

.legend span{
  display:flex;
  align-items:center;
  gap:10px;
}

.compass{
  position:fixed;
  left:30px;
  bottom:118px;
  z-index:15;

  width:78px;
  height:78px;

  pointer-events:none;
  opacity:.92;
}

.compass-ring{
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.68);
  border-radius:50%;
}

.compass-ring::before,
.compass-ring::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,255,255,.72);
  transform:translate(-50%, -50%);
}

.compass-ring::before{
  width:1px;
  height:70%;
}

.compass-ring::after{
  width:70%;
  height:1px;
}

.compass-contours{
  position:absolute;
  inset:5px;
  border-radius:50%;
  overflow:hidden;
  
  background-size:240%;
  background-position:center;
  opacity:.16;
}

.compass-needle{
  position:absolute;
  left:50%;
  top:50%;

  width:4px;
  height:36px;

  background:#5ce1e6;
  border-radius:999px;

  transform:translate(-50%, -82%) rotate(0deg);
  transform-origin:50% 82%;

  transition:transform .12s linear;
  box-shadow:0 0 14px rgba(92,225,230,.45);
}

.compass-needle::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  transform:translateX(-50%);

  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:13px solid #5ce1e6;
}

.compass-needle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-13px;
  transform:translateX(-50%);

  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:12px solid rgba(255,255,255,.74);
}

.compass-centre{
  position:absolute;
  left:50%;
  top:50%;

  width:13px;
  height:13px;

  transform:translate(-50%, -50%);
  border-radius:50%;

  background:#2b3138;
  border:2px solid #ffffff;
  box-shadow:0 0 10px rgba(92,225,230,.35);
}

.compass-n{
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);

  color:#ffffff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
}

.key{
  width:26px;
  height:2px;
  background:#b8ffcf;
  display:inline-block;
}

.key.dot{
  width:24px;
  height:24px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  position:relative;
  flex:0 0 24px;
}

.key.dot::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cpath fill='none' stroke='%235ce1e6' stroke-width='4' d='M15.5,7.13l6.51-3.83c.75-.44,1.6-.69,2.48-.72l5.4-.18c.13,0,.26-.01.39-.03l3.27-.35c1.15-.12,2.3.14,3.28.74l8.62,5.28c.11.07.22.13.33.19l3.18,1.64c.09.05.19.09.29.14h0c1.14.5,2.06,1.4,2.6,2.52l1.64,3.43,2.71,5.02c.22.4.38.83.48,1.27l.57,2.37c.12.48.16.98.14,1.48l-.04.74c-.02.47.02.94.12,1.4l.16.7c.17.75.17,1.52,0,2.27l-1.28,5.71c-.03.13-.05.25-.07.38l-.63,4.31c-.08.56-.26,1.1-.51,1.61l-.86,1.68c-.18.36-.41.69-.67,1l-.85,1-1.23,1.5c-.38.46-.83.85-1.34,1.16l-1.76,1.06c-.3.18-.59.4-.85.64l-3.66,3.39c-.34.31-.71.58-1.12.79l-.77.4c-.57.3-1.2.49-1.84.57l-3.02.34-7.7,1.28c-.52.09-1.06.09-1.59.02l-8.08-1.15c-.68-.1-1.33-.32-1.92-.67l-1.85-1.09c-.46-.27-.87-.6-1.22-1l-5.2-5.77-3.96-4.38c-.58-.64-.99-1.4-1.19-2.24l-2.28-9.12c-.22-.86-.21-1.77.02-2.63l1.23-4.56c.07-.25.12-.51.15-.77l.59-5.15c.1-.9.44-1.77.98-2.5l4.19-5.7c.41-.55.91-1.02,1.5-1.37l4.68-2.84Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.key.dot::after{
  content:"";
  position:absolute;
  inset:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%235ce1e6' d='m49.58 30.83-5.88 7.41-13.29 2.59-12.71-4-6.47-6 11.53-9.29 7.65-.71 12.35 2.94z'/%3E%3Cpath fill='%23263527' d='M31.23 24.75c-3.44 0-6.24 2.79-6.24 6.24s2.79 6.24 6.24 6.24 6.24-2.79 6.24-6.24-2.79-6.24-6.24-6.24m3.33 5.24c0 .83-2 1-2 1-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5c2.5 0 2 2 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.key.view{
  width:12px;
  height:12px;
  border:1px solid #ffffff;
  transform:rotate(45deg);
  background:transparent;
}

.show{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:20;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12) !important;
  color:#ffffff;
  padding:12px 14px;  
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  mix-blend-mode:normal !important;
}

.home-btn{
  position:fixed;
  right:28px;
  top:28px;

  z-index:20;

  width:132px;
  justify-content:center;

  border:1px solid rgba(255,255,255,.18);
  background:rgba(43,49,56,.45);

  color:#ffffff;
  text-decoration:none;

  padding:12px 14px;

  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;

  cursor:pointer;

  display:flex;
  align-items:center;
  gap:8px;

  transition:
    background .25s ease,
    border-color .25s ease,
    opacity .25s ease;
}

.nav-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.nav-icon path{
  fill:#5ce1e6;
  stroke:#5ce1e6;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-btn:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.28);
}



/* ==============================
   Trail / route
   ============================== */

#main-content{
  position:relative;
  z-index:2;
  min-height:0;
  padding-top:0;
}

.trail-stage{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:visible;
}

.trail-wrap{
  position:absolute;
  left:var(--trail-x) !important;
  top:0;
  width:240px;
  height:760vh !important;
  will-change:transform !important;
  transform:translate3d(0,0,0);
  backface-visibility:hidden !important;
  contain:layout style;
}

.loop-clone,
.loop-clone *{
  pointer-events:none !important;
}

.trail-svg{
  width:240px;
  height:760vh;
  overflow:visible;
  filter:none !important;
}

.route-side{
  fill:none;
  stroke:rgba(255,255,255,.95);
  stroke-width:1.05;
  stroke-dasharray:2 11;
  stroke-linecap:round;
  opacity:0;
  transition:opacity 460ms ease;
}

.trails-on .route-side{
  opacity:1;
}

.route-main{
  fill:none;
  stroke:#b8ffcf !important;
  stroke-width:2.4px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  stroke-dasharray:none;
  opacity:.98;
  filter:none !important;
}

.route-shadow{
  fill:none;
  stroke:rgba(80,222,255,.18) !important;
  stroke-width:3.8px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  opacity:.35 !important;
  filter:none !important;
}

.route-highlight{
  fill:none;
  stroke:rgba(80,222,255,.42) !important;
  stroke-width:.45px !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  opacity:.35 !important;
  filter:none !important;
}

/* Fallback node positions. JS now spaces nodes dynamically at runtime. */
.n1{top:500px}
.n2{top:1275px}
.n3{top:2050px;left:63%}
.n4{top:2825px}
.n5{top:3600px}
.n6{top:4375px}
.n7{top:5150px}
.n8{top:5925px}

/* ==============================
   San Rita style node markers
   ============================== */

.node{
  position:absolute;
  left:50%;
  width:56px !important;
  height:56px !important;
  margin-left:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  clip-path:none !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:auto;
  cursor:pointer;
  overflow:visible !important;
  z-index:20 !important;
  animation:none !important;
}

.node:hover,
.node.active{
  transform:translate(-50%, -50%) !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

.node-marker{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;  
}

.node-outline{
  fill:#2d3329;
  stroke:#5ce1e6;
  stroke-width:4;
  transform-box:fill-box;
  transform-origin:center;
}

.node.active .node-outline,
.node:hover .node-outline{
  animation:nodeRotate 7s linear infinite !important;
}

.node-eye-shape{
  fill:#5ce1e6;
  transform-box:fill-box;
  transform-origin:center;
}

.node.active .node-eye-shape{
  transform-origin:31px 31px;
  animation:eyeBlink 3.8s infinite !important;
}

.node-pupil{
  fill:#2d3329;
}

.node::before{
  display:none !important;
}

.node::after{
  content:attr(data-title) !important;

  position:absolute !important;
  left:72px !important;
  top:50% !important;

  transform:
    translateY(-50%)
    translateX(var(--label-x, 0px))
    scale(var(--label-scale, .86)) !important;

  transform-origin:left center !important;

  color:#ffffff !important;

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;

  font-size:clamp(24px,2.6vw,42px) !important;
  font-weight:500 !important;

  line-height:.95 !important;
  letter-spacing:-0.045em !important;

  text-transform:none !important;
  white-space:nowrap !important;

  opacity:var(--label-opacity, .35) !important;
  visibility:visible !important;

  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;

  pointer-events:none !important;

  transition:none !important;
}

.node.active::after,
.node:hover::after{
  opacity:var(--label-opacity, 1) !important;
  visibility:visible !important;
}

@keyframes nodeRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes eyeBlink{
  0%{transform:scaleY(1)}
  3%{transform:scaleY(.05)}
  6%{transform:scaleY(1)}
  10%{transform:scaleY(.05)}
  13%{transform:scaleY(1)}
  100%{transform:scaleY(1)}
}




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

@media(max-width:1100px){
  .trail-wrap{
    left:clamp(-10px,15vw,140px) !important;
  }
    .node::after{
    left:66px !important;
    font-size:clamp(20px,2.8vw,32px) !important;
  }


  .brand{
    max-width:210px;
  }
}

@media(max-width:900px){
  :root{--trail-x:24vw}
}

@media(max-width:760px){
  :root{
    --trail-x:50vw;
    --waypoint-lock-y:54vh;
  }

  body{
    font-size:16px;
  }

.brand{
    left:18px;
    top:18px;
    gap:.65rem;
  }

  .brand-mark{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }

  .brand .logo{
    font-size:21px;
  }

  

  .trail-wrap{
    left:calc(36vw - 120px) !important;
  }

  .legend{
    display:grid !important;
    left:20px;
    right:auto;
    bottom:72px;
    z-index:25;
    gap:8px;
    padding:10px 12px;
    max-width:calc(100vw - 40px);
    background:rgba(43,49,56,.54);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .legend span{
    gap:8px;
  }
    
    .compass{
    left:20px;
    bottom:158px;
    width:60px;
    height:60px;
  }

  .compass-needle{
    height:28px;
  }

  .compass-n{
    top:-18px;
    font-size:11px;
  }

  .show{
    right:18px;
    bottom:18px;
    padding:10px 12px;
    font-size:11px;
  }
    
    .home-btn{
    right:18px;
    top:18px;
    padding:10px 12px;
    font-size:11px;
    width:118px;
  }

  .terrain-contours{
    width:max(210vw, 150vh) !important;
    min-height:125vh !important;
    opacity:.26 !important;
    transform:translate(-50%, -50%) rotate(-4deg) scale(1.08) !important;
  }

  .node{
    width:44px !important;
    height:44px !important;
  }

 .node::after{
    left:56px !important;

    font-size:clamp(16px,5vw,24px) !important;

    letter-spacing:-0.03em !important;
  }

}


@media(max-width:430px){
  :root{
    --waypoint-lock-y:56vh;
  }

  .trail-wrap{
    left:calc(28vw - 120px) !important;
  }

  .legend{
    left:16px;
    bottom:68px;
    font-size:10px;
    padding:8px 10px;
  }

  .node::after{
    left:48px !important;

    font-size:clamp(14px,4.5vw,18px) !important;

    letter-spacing:-0.02em !important;
  }
    
      .brand{
    left:14px;
    top:14px;
    gap:.55rem;
  }

  .brand-mark{
    width:34px;
    height:34px;
    flex:0 0 34px;
  }

  .brand .logo{
    font-size:18px;
  }
    .home-btn{
    width:112px;
  }

}


@media(max-height:620px){
  :root{
    --waypoint-lock-y:58vh;
  }

  .brand small{
    display:none;
  }
}


/* ==============================
   Option A compact dropdown menu
   Same-width dropdown directly above the existing Show Trails button.
   ============================== */

.trail-menu-shell{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:40;
  width:132px;
  pointer-events:auto;
}

.show.trail-menu-toggle{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;

  width:132px !important;

  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(43,49,56,.45) !important;

  color:#ffffff !important;

  padding:12px 14px !important;

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:none !important;
  text-align:center !important;

  cursor:pointer !important;

  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  mix-blend-mode:normal !important;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.show.trail-menu-toggle:hover,
.trail-menu-shell.open .show.trail-menu-toggle{
  background:rgba(43,49,56,.45) !important;
  border-color:rgba(255,255,255,.28) !important;
}

.trail-menu-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);

  width:132px;

  background:rgba(43,49,56,.45);
  border:1px solid rgba(255,255,255,.18);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(8px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.trail-menu-shell.open .trail-menu-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.trail-menu-item{
  appearance:none;

  width:100%;
  display:block;

  margin:0;
  padding:10px 14px;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);

  background:transparent;

  color:rgba(255,255,255,.82);

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;
  font-weight:500;
  line-height:1;
  letter-spacing:.08em;
  text-align:left;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    color .22s ease,
    background .22s ease;
}

.trail-menu-item:last-child{
  border-bottom:0;
}

.trail-menu-item:hover,
.trail-menu-item:focus-visible,
.trail-menu-item.is-active{
  color:#5ce1e6;
  background:rgba(92,225,230,.08);
  outline:none;
}

@media(max-width:760px){
  .trail-menu-shell{
    right:18px;
    bottom:18px;
    width:118px;
  }

  .show.trail-menu-toggle{
    width:118px !important;
    padding:10px 12px !important;
    font-size:11px !important;
  }

  .trail-menu-panel{
    width:118px;
  }

  .trail-menu-item{
    padding:9px 12px;
    font-size:10px;
  }
}

@media(max-width:430px){
  .trail-menu-shell{
    right:14px;
    bottom:14px;
    width:112px;
  }

  .show.trail-menu-toggle{
    width:112px !important;
  }

  .trail-menu-panel{
    width:112px;
  }
}

/* ==============================
   Image layer (San Rita style)
   ============================== */

.image-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.trail-images{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 620ms ease;
  will-change:opacity;
}

.trail-images.active{
  opacity:1;
}

.trail-img{
  position:absolute;
  object-fit:cover;
  pointer-events:none;
  filter:
    saturate(1.15)
    contrast(1.05)
    brightness(.95);


  mix-blend-mode:normal;
}

.trail-img.left{
  top:0;
  left:0;
  width:50vw;
  height:65vh;
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 20% 40%, rgba(0,0,0,.88) 20%, transparent 68%);
  mask-image:radial-gradient(ellipse 100% 90% at 20% 40%, rgba(0,0,0,.88) 20%, transparent 68%);
}

.trail-img.right{
  bottom:0;
  right:0;
  width:50vw;
  height:65vh;
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 80% 60%, rgba(0,0,0,.88) 20%, transparent 68%);
  mask-image:radial-gradient(ellipse 100% 90% at 80% 60%, rgba(0,0,0,.88) 20%, transparent 68%);
}

@media(max-width:760px){
  .trail-img.left{
    width:62vw;
    height:48vh;
  }

  .trail-img.right{
    width:62vw;
    height:48vh;
  }
}

@media(max-width:430px){
  .trail-img.left{
    width:72vw;
    height:42vh;
  }

  .trail-img.right{
    width:72vw;
    height:42vh;
  }
}

.scroll-spacer{
  min-height:1400vh;
  padding-top:95vh;
}

.tours-type-loader{
  position:fixed;
  top:34px;
  left:62%;
  z-index:9999;

  transform:translateX(-50%);

  color:rgba(255,255,255,.88);

  font-family:"IBM Plex Mono","Geist Mono","SFMono-Regular","Cascadia Mono","Roboto Mono",Consolas,monospace;
  font-size:clamp(13px,1.05vw,16px);
  font-weight:400;
  letter-spacing:.045em;
  line-height:1;

  pointer-events:none;
  white-space:nowrap;

  opacity:1;
  transition:opacity .45s ease, visibility .45s ease;
}

.tours-type-loader.is-hidden{
  opacity:0;
  visibility:hidden;
}

.tours-type-cursor{
  display:inline-block;
  margin-left:3px;
  opacity:.9;
  animation:toursCursorBlink 850ms steps(1,end) infinite;
}

@keyframes toursCursorBlink{
  0%, 48%{opacity:1}
  49%, 100%{opacity:0}
}

@media(max-width:760px){
  .tours-type-loader{
    top:76px;
    left:50%;
    font-size:13px;
    letter-spacing:.035em;
  }
}

@media(max-width:430px){
  .tours-type-loader{
    top:70px;
    font-size:12px;
  }
}

.home-btn{
  position:fixed !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.home-btn::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:url("../images/topology-background.svg") center/190% no-repeat !important;
  opacity:.46 !important;
  pointer-events:none !important;
}

.home-btn > *{
  position:relative !important;
  z-index:1 !important;
}

.show.trail-menu-toggle{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:rgba(43,49,56,.45) !important;
}

.show.trail-menu-toggle::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:url("../images/topology-background.svg") center/190% no-repeat !important;
  opacity:.46 !important;
  pointer-events:none !important;
}

/* Make the visible node label area clickable as part of the tour link. */
.node::after{
  pointer-events:auto !important;
}

.node{
    cursor:pointer;
}

.node::before,
.node::after{
    pointer-events:none;
}