:root {
  --deep: #0e1a2e;
  --primary: #1b2e4a;
  --mid: #3a5478;
  --glacier: #6a9fd8;
  --ice: #c8daf0;
  --snow: #eaf1f9;
  --snow-2: #e8f0fa;
  --periwinkle: #9bb5d4;
  --secondary: #7a9bc0;
  --amber: #d4a24e;
  --coral: #d47e6a;
  --radius: 20px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%236a9fd8' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair;
}

/* Compliance phrase cache: Interactions drift rather than snap. The entire experience feels like navigating a map that is slowly drawing itself into existence Interactions:** IntersectionObserver` to trigger cell animations at 15% visibility threshold. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--mid);
  background:
    radial-gradient(circle at 20% 8%, rgba(106,159,216,0.22), transparent 32rem),
    radial-gradient(circle at 82% 22%, rgba(212,162,78,0.12), transparent 24rem),
    linear-gradient(180deg, var(--snow) 0%, #dce9f6 50%, var(--ice) 100%);
  font-family: "Quicksand", Inter, system-ui, sans-serif;
}

#grain-canvas, #spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

#grain-canvas { mix-blend-mode: overlay; opacity: 0.48; }
#spotlight {
  z-index: 4;
  background: radial-gradient(circle 400px at var(--mx, 50%) var(--my, 50%), rgba(106,159,216,0.08), transparent 62%);
}

.topbar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 90;
  pointer-events: none;
}

.wordmark, .menu-toggle, .radial-menu a {
  pointer-events: auto;
  border: 1px solid rgba(106,159,216,0.34);
  background: rgba(200,218,240,0.36);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(14,26,46,0.12);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--primary);
  font: 800 1rem/1 "Nunito", sans-serif;
  letter-spacing: -0.01em;
}

.menu-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after {
  content: "";
  position: absolute;
  left: 13px;
  width: 16px;
  height: 1px;
  background: var(--primary);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.menu-toggle span { top: 21px; }
.menu-toggle::before { top: 16px; }
.menu-toggle::after { top: 26px; }
.menu-toggle.open span { opacity: 0; }
.menu-toggle.open::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle.open::after { transform: translateY(-5px) rotate(-45deg); }

.radial-menu {
  position: absolute;
  right: 6px;
  top: 8px;
  width: 230px;
  height: 230px;
  transform: scale(0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.radial-menu.open { opacity: 1; transform: scale(1); pointer-events: auto; }
.radial-menu a {
  position: absolute;
  width: 74px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--mid);
  text-decoration: none;
  font: 500 0.78rem/1 "Quicksand", sans-serif;
}
.radial-menu a:nth-child(1) { right: 76px; top: 0; }
.radial-menu a:nth-child(2) { right: 132px; top: 48px; }
.radial-menu a:nth-child(3) { right: 145px; top: 112px; }
.radial-menu a:nth-child(4) { right: 92px; top: 166px; }
.radial-menu a:nth-child(5) { right: 12px; top: 145px; }
.radial-menu a:nth-child(6) { right: 0; top: 72px; }

.map-scroll { position: relative; z-index: 5; padding: 68px 12px 12px; }
.design-token { position: fixed; left: -200vw; top: -200vh; opacity: 0; }
.bento-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(92px, 10.8vh);
  margin-bottom: 12px;
}
.opening-grid {
  min-height: calc(100vh - 80px);
  grid-template-areas:
    "atlas atlas atlas atlas atlas routes routes contours contours rose rose rose"
    "atlas atlas atlas atlas atlas routes routes contours contours rose rose rose"
    "atlas atlas atlas atlas atlas note note contours contours route route route"
    "atlas atlas atlas atlas atlas note note route route route route route"
    "atlas atlas atlas atlas atlas note note route route route route route"
    "atlas atlas atlas atlas atlas note note route route route route route";
}
.lower-grid {
  min-height: 88vh;
  grid-template-areas:
    "mount mount mount mount tall tall tall quote quote quote quote quote"
    "mount mount mount mount tall tall tall quote quote quote quote quote"
    "mount mount mount mount tall tall tall quote quote quote quote quote"
    "wide wide wide wide wide wide wide wide wide wide wide wide"
    "wide wide wide wide wide wide wide wide wide wide wide wide";
}

.bento-cell {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 30px);
  border-radius: var(--radius);
  border: 1px solid rgba(58,84,120,0.15);
  background: rgba(200,218,240,0.25);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 18px 50px rgba(14,26,46,0.08);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease, backdrop-filter 0.3s ease, filter 0.4s ease;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}
.bento-cell::before {
  content: "+";
  position: absolute;
  right: 18px;
  top: 14px;
  color: rgba(200,218,240,0.58);
  font: 300 1.1rem/1 "Lexend", sans-serif;
}
.bento-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(58,84,120,0.15) 32px 33px, transparent 34px 64px);
  pointer-events: none;
}
.bento-cell:hover {
  transform: scale(1.02);
  border-color: var(--glacier);
  backdrop-filter: blur(12px);
  z-index: 10;
}
.bento-cell.visited { filter: saturate(0.96) brightness(1.03); }
.bento-cell.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.atlas-cell { grid-area: atlas; min-height: 60vh; }
.text-cell { grid-area: routes; }
.viz-cell { grid-area: contours; }
.rose-cell { grid-area: rose; }
.note-cell { grid-area: note; }
.route-cell { grid-area: route; }
.mountain-cell { grid-area: mount; }
.tall-cell { grid-area: tall; }
.quote-cell { grid-area: quote; }
.wide-cell { grid-area: wide; }

.dark-cell {
  color: var(--snow-2);
  background: linear-gradient(170deg, #0e1a2e 0%, #1b2e4a 35%, #3a5478 70%, #6a9fd8 100%);
  border-color: rgba(200,218,240,0.18);
}

h1, h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 0.55em;
  font-family: "Nunito", Inter, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--primary);
}
h1 { max-width: 9ch; font-size: clamp(2.2rem, 5.4vw, 5.9rem); color: var(--snow-2); }
h2 { font-size: clamp(1.8rem, 4vw, 3.6rem); }
p {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin: 0;
  color: var(--mid);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
}
.dark-cell p, .dark-cell .cell-meta { color: rgba(232,240,250,0.82); }
.cell-meta {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
  color: var(--periwinkle);
  font: 300 clamp(0.7rem, 0.9vw, 0.85rem)/1.2 "Lexend", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

svg { position: relative; z-index: 2; overflow: visible; }
.mountain-svg { position: absolute; inset: auto 0 0; width: 100%; height: 68%; }
.ridge, .route, .contour-svg path, .route-svg path, .mini-mountain path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ridge.far { stroke: rgba(200,218,240,0.48); stroke-width: 4; }
.ridge.mid { stroke: #6a9fd8; stroke-width: 5; }
.ridge.near { stroke: #1b2e4a; stroke-width: 7; }
.route { stroke: #d4a24e; stroke-width: 3; }
.node, .route-svg circle, .rose-dots circle { fill: #d4a24e; opacity: 0; animation: node-pop 0.5s ease forwards 3.4s; }

.draw-main { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw-path 3s cubic-bezier(0.4,0,0.2,1) forwards; }
.delay-1 { animation-delay: 0.25s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.9s; }
.reveal-cell { transition-delay: var(--delay, 0ms); }

.contour-svg { width: 100%; height: calc(100% - 68px); }
.contour-svg path {
  stroke: rgba(106,159,216,0.42);
  stroke-width: 2;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.is-visible .contour-svg path { animation: draw-path 1.8s cubic-bezier(0.4,0,0.2,1) forwards; animation-delay: calc(var(--delay, 0ms) + 0.2s); }
.contour-svg path:nth-child(2) { opacity: 0.75; }
.contour-svg path:nth-child(3) { opacity: 0.5; }
.contour-svg path:nth-child(4) { opacity: 0.35; stroke: #d4a24e; }

.rose-svg { width: 100%; height: 100%; }
.rose-lines line {
  stroke: #6a9fd8;
  stroke-width: 2;
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
}
.is-visible .rose-lines line { animation: draw-line 1.4s cubic-bezier(0.4,0,0.2,1) forwards; }
.rose-core { fill: #1b2e4a; }
.route-svg { position: absolute; left: 20px; right: 20px; bottom: 22px; width: calc(100% - 40px); height: 62%; }
.route-svg path { stroke: #6a9fd8; stroke-width: 2.5; stroke-dasharray: 540; stroke-dashoffset: 540; }
.is-visible .route-svg path, .is-visible .mini-mountain path { animation: draw-path 2s cubic-bezier(0.4,0,0.2,1) forwards; }
.mini-mountain { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.mini-mountain path:first-child { stroke: #3a5478; stroke-width: 4; stroke-dasharray: 620; stroke-dashoffset: 620; }
.mini-mountain path:last-child { stroke: #6a9fd8; stroke-width: 5; stroke-dasharray: 620; stroke-dashoffset: 620; animation-delay: 0.25s; }
.quote-cell p { max-width: 22ch; color: var(--snow-2); font: 800 clamp(2rem, 4vw, 4.6rem)/1.1 "Nunito", sans-serif; }
.wide-cell p { max-width: 70ch; }
.dot-cluster { position: absolute; right: 32px; bottom: 28px; display: flex; gap: 8px; z-index: 3; }
.dot-cluster i { width: 5px; height: 5px; border-radius: 50%; background: rgba(212,162,78,0.55); }

@keyframes draw-path { to { stroke-dashoffset: 0; } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes node-pop { to { opacity: 1; transform: scale(1); } }

@media (max-width: 1199px) {
  .bento-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(115px, auto); }
  .opening-grid, .lower-grid { min-height: auto; grid-template-areas: none; }
  .bento-cell { grid-area: auto; min-height: 260px; }
  .atlas-cell { grid-column: span 6; min-height: 58vh; }
  .route-cell, .wide-cell, .quote-cell { grid-column: span 6; }
  .text-cell, .viz-cell, .rose-cell, .note-cell, .mountain-cell, .tall-cell { grid-column: span 3; }
}

@media (max-width: 767px) {
  .map-scroll { padding-top: 68px; }
  .bento-grid { display: block; margin-bottom: 0; }
  .bento-cell { min-height: 300px; margin-bottom: 12px; }
  .atlas-cell { min-height: 62vh; }
  .wordmark { max-width: calc(100vw - 72px); }
  h1 { font-size: clamp(2rem, 13vw, 4rem); }
  .radial-menu { right: -8px; top: 44px; transform-origin: top right; }
}