/* =====================================================================
   Montevelli Studio — site styles
   One page, one descent. Pixel-art scenes of the Matterhorn fill the screen behind
   everything (assets/js/journey.js) and move with the scroll: summit → upper
   slopes → mid-mountain → lower slopes → base camp. Each section sits at a
   "stop" on that route, where its scene is open (see STOPS below).
   Palette, roughly 60 / 30 / 10: the scenes and blue-black night (the foundation);
   snow, ice and glacier blue (text and support); alpenglow orange (the accent).
   Orange means one of two things, everywhere:
     - an action: the main button of each stop, "Start a project", "Send inquiry";
     - the current or active state: the stage you are in (the route's dot, the dot beside a
       section's stage name, the progress line), the bar's underline, "You are here", a live
       demo, an open question, hover, keyboard focus.
   The one exception is the word "place." on the landing view, which carries the summit's light.
   Nothing else is orange: no numbers, rules, ticks or labels. Flat colour, no glows or gradients.
   Type: Space Grotesk (headings, labels) and Work Sans (text), self-hosted.
   ===================================================================== */
/* Fallbacks sized to the two fonts (measured: Work Sans runs 13.2% wider than Arial, Space Grotesk 9.7%),
   so text keeps its line breaks and the page doesn't jump when the real fonts arrive. */
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"); size-adjust: 113.2%; ascent-override: 82%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"); size-adjust: 109.7%; ascent-override: 89%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/work-sans.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk.woff2") format("woff2"); }

:root {
  /* ---- Palette: edit these values only ----
     Sampled from the original palette reference (the Matterhorn at dusk, its summit lit amber):
     blue-black #051118, midnight #0F2230 / #142633, alpine blues #305067 / #3C566B,
     icy blue-grey #788591 (lifted for text), snow (lifted from #A0A0A3 for text),
     alpenglow #DB9542 with highlight #F8BF5C. */
  --night: #051118;          /* blue-black: page and deepest shadow */
  --charcoal: #0F2230;       /* midnight: raised surfaces */
  --slate: #142633;          /* panels and cards */
  --alpine: #305067;         /* deep alpine blue: structure, frames */
  --steel: #3C566B;          /* lines and quiet marks (decorative only) */
  --ice: #B9C6D2;            /* secondary text: icy blue-grey */
  --mist: #8C9DAD;           /* tertiary text */
  --glacier: #9CC3DD;        /* emphasis, links, live states, focus */
  --snow: #EEF3F8;           /* primary text and light surfaces */
  --alpenglow: #DB9542;      /* the summit's last light: small accents only */
  --alpenglow-soft: #F8BF5C;

  /* ---- Roles ---- */
  --bg: var(--night);
  --text: var(--snow);
  --text-2: var(--ice);
  --text-3: var(--mist);
  --rule: color-mix(in oklab, var(--ice) 14%, transparent);
  --rule-strong: color-mix(in oklab, var(--ice) 26%, transparent);
  --focus: var(--alpenglow-soft);
  --accent: var(--alpenglow);
  --accent-hi: var(--alpenglow-soft);
  --accent-ink: #1A1206;      /* text on an orange fill */
  --paper: var(--snow);
  --ink: var(--night);
  --ink-2: #304356;
  --panel: #050F18;           /* Alpine Shadow: the solid shade text stands on (its edge colour, --edge, is set per section) */

  /* ---- Type ---- */
  /* Two fonts, two jobs. Space Grotesk: headlines, headings and short statements.
     Work Sans: everything else (paragraphs, navigation, buttons, labels, captions, forms). */
  --display: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
  --sans: "Work Sans", "Work Sans Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --tech: var(--sans);       /* labels and captions */
  --fs-hero: clamp(2.25rem, 9.4vw, 3.5rem);
  --fs-h2: clamp(2.1rem, 3.9vw, 3.9rem);
  --fs-h3: clamp(1.9rem, 3vw, 3rem);          /* project names: below the section heading, never above it */
  --fs-lead: clamp(1.06rem, 1.3vw, 1.3rem);
  --fs-body: 1rem;
  --fs-label: .78rem;

  /* ---- Space & motion ---- */
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --maxw: 1240px;
  --sec: clamp(88px, 13vh, 156px);
  --vista: clamp(120px, 30vh, 340px);      /* open land between sections on the same stage */
  --vista-stage: clamp(260px, 72vh, 800px); /* open sky where one stage of the descent gives way to the next */
  --r: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --bar-h: 72px;
  --route-w: 0px;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Anything the browser scrolls to (a link's target, a focused control, find-in-page) stops clear of the fixed header. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; background: var(--bg); scroll-padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 20px); }
html.index-open { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--accent-hi); color: var(--night); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 500; transition: top .2s ease; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) + var(--gut-r)); margin: 0 auto; padding-left: var(--gut); padding-right: calc(var(--gut-r) + var(--route-w)); }
.label { font: 500 var(--fs-label)/1.4 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-shadow: 0 1px 12px color-mix(in oklab, var(--night) 85%, transparent); }
.label .stage { color: inherit; }
/* a waypoint: the same dot as the current stage on the route */
.label .stage::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; vertical-align: 1px; background: var(--accent); }
.label .stage::after { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 12px; vertical-align: middle; background: color-mix(in oklab, var(--ice) 50%, transparent); }
.label--solo .stage::after { display: none; }
em { font-style: normal; }
.glow-text { color: var(--alpenglow-soft); }   /* "place." — the summit's light, flat */

/* Titles share one treatment */
.sec-title, .hero-title, .project-name, .climb-title { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.sec-title { font-size: var(--fs-h2); line-height: 1.02; }
.sec-title em, .climb-title em { color: var(--glacier); font-weight: 400; }
.climb-title .quiet { display: block; margin-top: .7em; font-size: .56em; line-height: 1.2; letter-spacing: -.02em; color: var(--text-2); font-weight: 400; }     /* the supporting line: clearly second */
.sec-title--sm { font-size: clamp(1.8rem, 3vw, 3rem); }      /* a smaller heading for a smaller section */
.sec-head { display: grid; gap: 22px; max-width: 46rem; }
.sec-lead { max-width: 40rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); font-weight: 400; text-shadow: 0 1px 16px color-mix(in oklab, var(--night) 80%, transparent); }

/* ---------- Buttons ---------- */
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; font: 500 .95rem/1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease); }
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--paper); color: var(--ink); }
.btn--solid:hover { background: #FFFFFF; }
.btn--line { border: 1px solid color-mix(in oklab, var(--snow) 38%, transparent); color: var(--text); background: color-mix(in oklab, var(--night) 46%, transparent); }
.btn--line:hover { border-color: var(--accent); color: var(--accent-hi); }
/* "Start a project" is the one primary action: filled orange wherever it appears. Other actions are quieter. */
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hi); }
/* V17's button answers, in V23's orange system. "Start a project": its arrow steps forward. "See the work": an orange
   ring opens around it. Both are quick, change nothing about the label, and never delay the click. */
.btn--route::after { content: "→"; display: inline-block; transition: transform .3s var(--ease); }
.btn--route:hover::after, .btn--route:focus-visible::after { transform: translateX(4px); }
.btn--halo { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease); }
.btn--halo:hover, .btn--halo:focus-visible { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 40%, transparent); }
/* R3 V7's underline, drawn once under the offer in the landing text (site.js); already drawn without script or with reduced motion */
.ul-draw { color: var(--snow); background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 2px; padding-bottom: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ul-js .ul-draw { background-size: 0 2px; transition: background-size .45s cubic-bezier(.65, 0, .35, 1); }
.ul-js .ul-draw.is-drawn { background-size: 100% 2px; }
.btn--accent:focus-visible, .pill--accent:focus-visible { outline-color: var(--snow); }      /* a white ring: an orange ring would vanish against an orange button */
.btn--line:focus-visible, .btn--solid:focus-visible { outline-color: var(--accent-hi); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font: 500 .86rem/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.pill--accent { background: var(--accent); color: var(--accent-ink); }
.pill--accent:hover { background: var(--accent-hi); }
.pill--big { min-height: 48px; padding: 0 24px; }

/* =====================================================================
   THE MOUNTAIN — six pixel-art scenes fixed behind the page (assets/js/journey.js)
   Each scene fills the screen on every device. Without JavaScript the summit
   scene stays behind the whole page; with it, scroll moves through them.
   The files are true pixel art stored at 2x and 4x (lossless); the browser's
   normal smooth scaling keeps their edges crisp without shimmer as the camera moves.
   ===================================================================== */
.scene { position: fixed; z-index: 0; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; background: var(--night); pointer-events: none; }
/* Each scene is a window onto its stage. The window's top edge is feathered (a fixed mask, --feather
   tall); journey.js slides the window up over the scene above it, in step with the page, while the
   scene inside stays still. At rest the feathered edge sits just above the top of the screen. */
.scene { --feather: clamp(160px, 46vh, 600px); }
.scene-stage { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--feather)); margin: 0; overflow: hidden; visibility: hidden;
  transform: translate3d(0, calc(-1 * var(--feather)), 0); }
/* the feather is only applied while a window is rising; once risen its edge is off-screen and the mask is dropped */
.scene-stage.is-rising {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.1) calc(var(--feather) * .2), rgba(0,0,0,.5) calc(var(--feather) * .5), rgba(0,0,0,.9) calc(var(--feather) * .8), #000 var(--feather));
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.1) calc(var(--feather) * .2), rgba(0,0,0,.5) calc(var(--feather) * .5), rgba(0,0,0,.9) calc(var(--feather) * .8), #000 var(--feather)); }
.scene-stage:first-child, .journey .scene-stage.is-on { visibility: visible; }
.journey .scene-stage:first-child:not(.is-on) { visibility: hidden; }
.journey .scene-stage.is-on, .journey .scene-stage.is-on picture { will-change: transform; }
.scene-stage picture { position: absolute; left: 0; right: 0; top: var(--feather); height: calc(100% - var(--feather)); display: block; }
.scene-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journey .scene-stage.is-on img { will-change: transform; }
/* a scene appears only once it is downloaded and decoded (journey.js); until then the one above stays */
.journey .scene-stage:not(:first-child) img { transition: opacity .45s ease; }
.journey .scene-stage:not(:first-child):not(.is-ready) img { opacity: 0; }
/* crops: keep each scene's subject in view at any screen shape */
.scene-stage[data-stage="summit"] img { object-position: 50% 0%; }   /* the whole summit, never cropped at the top */
.scene-stage[data-stage="upper"] img { object-position: 50% 45%; }
@media (min-aspect-ratio: 1/1) { .scene-stage[data-stage="upper"] img { object-position: 50% 34%; } }   /* wide screens: the peak a little lower, clear of the centred Work heading */
.scene-stage[data-stage="mid"] img { object-position: 46% 70%; }
.scene-stage[data-stage="lower"] img { object-position: 50% 10%; }
.scene-stage[data-stage="base"] img { object-position: 50% 30%; }
/* The last scene: one drawing in three lights. Its box is sized and placed by journey.js (not object-fit), so the
   stars can be laid on the drawing's own pixel grid. Golden hour and dusk lie over day; scroll sets their opacity. */
.scene-stage .scene-hold { position: absolute; left: 0; right: 0; top: var(--feather); height: calc(100% - var(--feather)); overflow: hidden; background: #0A0918; }
.scene-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.journey .scene-stage.is-on .scene-box { will-change: transform; }
.scene-box picture { position: absolute; inset: 0; height: 100%; }
.scene-box img, .journey .scene-stage.is-on .scene-box img { object-fit: fill; will-change: auto; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; }
.journey .scene-stage .scene-box img[data-light] { opacity: 0; transition: none; will-change: opacity; }
/* stars: single art pixels (1em = one pixel of the drawing). A third of them blink, slowly and out of step, and only
   while the scene is at dusk and on screen (journey.js adds .is-night); with reduced motion they hold still. */
.scene-stars { position: absolute; inset: 0; opacity: 0; font-size: 3px; }
.star { position: absolute; width: 1em; height: 1em; background: #FFFFFF; }
.star--dim { background: #B4ADCF; }
.star--warm { background: #FFE0AE; }
.star--big { box-shadow: 1em 0 0 rgba(255, 255, 255, .5), -1em 0 0 rgba(255, 255, 255, .5), 0 1em 0 rgba(255, 255, 255, .5), 0 -1em 0 rgba(255, 255, 255, .5); }
.is-night .star--blink { animation-name: star-blink; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
@keyframes star-blink { 0%, 100% { opacity: 1; } 44% { opacity: .55; } 50% { opacity: .25; } 56% { opacity: .7; } 62% { opacity: 1; } }
/* a very occasional shooting star: one short, soft streak in the scene's own star colours, falling to the lower left
   behind the content, then a long quiet. Never brighter than the stars themselves; none with reduced motion. */
.shoot { position: absolute; width: 1em; height: 1em; background: rgba(255, 255, 255, .7); opacity: 0;
  box-shadow: 1em 0 0 rgba(255, 255, 255, .5), 2em -1em 0 rgba(217, 212, 232, .38), 3em -1em 0 rgba(217, 212, 232, .28), 4em -2em 0 rgba(180, 173, 207, .2), 5em -2em 0 rgba(180, 173, 207, .13), 6em -3em 0 rgba(180, 173, 207, .07); }
.is-night .shoot.is-go { animation: shoot .8s steps(16, end) both; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .85; } 60% { opacity: .7; } 100% { opacity: 0; transform: translate(-30em, 15em); } }
/* a thin veil of mist that travels with the feathered edge, where two scenes meet */
.scene-mist { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--feather) * 1.5); opacity: 0; will-change: transform, opacity;
  background:
    radial-gradient(60% 50% at 55% 50%, rgba(214, 226, 236, .7), rgba(185, 198, 210, .35) 50%, transparent 78%),
    linear-gradient(180deg, transparent 8%, rgba(176, 192, 206, .5) 50%, transparent 92%); }
/* readability: a little dusk at the top and bottom edges and a soft vignette; the text itself sits on shade */
.scene-scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--night) 62%, transparent) 0%, transparent 14%, transparent 72%, color-mix(in oklab, var(--night) 58%, transparent) 100%),
    radial-gradient(130% 110% at 50% 45%, transparent 55%, color-mix(in oklab, var(--night) 45%, transparent) 100%); }   /* edges only: no tint over the whole scene */
.journey .scene-scrim { opacity: .45; }
.journey .foot { background: transparent; }   /* the last scene’s dark foreground continues under the footer */   /* lightest over the summit; journey.js brings it in with the first crossing */
main, .foot { position: relative; z-index: 1; }

/* =====================================================================
   GLOBAL BAR — fixed, identical everywhere
   ===================================================================== */
.bar { position: fixed; z-index: 40; left: 0; right: 0; top: 0; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(var(--gut-r), calc((100% - var(--maxw)) / 2)) 0 max(var(--gut), calc((100% - var(--maxw)) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background-color .4s ease, box-shadow .4s ease; }
.bar.is-scrolled { background: var(--night); box-shadow: 0 1px 0 var(--rule); }   /* solid: text scrolling beneath never shows through the header */
.index-open .bar { background: transparent; box-shadow: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 6px 4px; margin-left: -4px; border-radius: 8px; }
.brand-mark { width: 30px; height: 30px; color: var(--snow); }
.brand-word { font: 500 1.3rem/1 var(--display); letter-spacing: -.035em; }
.brand-sub { font: 500 .66rem/1 var(--tech); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.bar-actions { display: flex; align-items: center; gap: 10px; }
.bar-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; text-decoration: none; font: 500 .86rem/1 var(--sans); color: var(--text); border-radius: 999px; }
.bar-link:hover { color: var(--accent-hi); }
.bar-link { position: relative; }
.bar-link[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); }   /* the section you are in */
.bar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); display: none; }
.count { color: var(--text-2); }
.index-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 .86rem/1 var(--sans);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7); transition: background-color .3s ease, transform .35s var(--ease); }
.index-btn:hover { background: #FFFFFF; }
.index-btn:active { transform: scale(.96); }
.index-btn-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); }
.index-btn-icon i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 3px; background: var(--paper); transition: transform .45s var(--ease-io), width .45s var(--ease-io), height .45s var(--ease-io); }
.index-btn-icon i:first-child { transform: translate(calc(-50% - 4.5px), -50%); }
.index-btn-icon i:last-child { transform: translate(calc(-50% + 4.5px), -50%); }
.index-btn[aria-expanded="true"] .index-btn-icon i { width: 15px; height: 1.6px; }
.index-btn[aria-expanded="true"] .index-btn-icon i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.index-btn[aria-expanded="true"] .index-btn-icon i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* =====================================================================
   THE ROUTE — five stages, where you are, and a way to skip ahead
   ===================================================================== */
.route { position: fixed; z-index: 30; right: calc(var(--gut-r) - 4px); top: 50%; transform: translateY(-50%); }
.route ol { position: relative; z-index: 1; display: grid; gap: clamp(2px, 1.6vh, 18px); }
/* each stop is a 40px target (the dot itself stays 9px); its name shows for the current stage,
   on hover or keyboard focus, and always on touch screens, where there is no hover */
.route a { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; min-height: 40px; min-width: 40px; padding: 0 15px 0 12px; margin-right: -11px; border-radius: 10px; text-decoration: none; color: var(--text-2); }
.route a:focus-visible { outline-offset: -2px; background: color-mix(in oklab, var(--night) 70%, transparent); }
.route-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--ice) 60%, transparent); background: var(--night); transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease); }
.route-name { font: 500 .75rem/1.25 var(--tech); letter-spacing: .1em; text-transform: uppercase; text-align: right; opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .4s var(--ease), color .3s ease; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.route-name small { display: block; font-size: .7rem; letter-spacing: .08em; color: var(--text-2); }
.route:hover .route-name, .route a:focus-visible .route-name, .route a[aria-current="step"] .route-name { opacity: 1; transform: none; }
.route a:hover { color: var(--text); }
@media (hover: none) and (min-width: 901px) { .route .route-name { opacity: 1; transform: none; } }
.route a:hover .route-dot { border-color: var(--snow); }
.route a[aria-current="step"] { color: var(--text); }
/* the scenes behind are bright in places (snow, cloud, daylight): the current stop's name stands on a small solid plate,
   and every dot carries a dark ring, so the route reads on any of them */
.route a[aria-current="step"] .route-name, .route:hover .route-name, .route a:focus-visible .route-name { padding: 5px 8px; background: var(--panel); text-shadow: none; }
.route-dot { box-shadow: 0 0 0 2px rgba(4, 12, 18, .7); }
.route a.is-passed .route-dot { background: var(--snow); border-color: var(--snow); }   /* stages already descended */
.route a[aria-current="step"] .route-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.route-line { position: absolute; right: 8px; top: 20px; bottom: 20px; width: 1px; background: color-mix(in oklab, var(--ice) 20%, transparent); }
.route-line i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); }
.index-open .route { visibility: hidden; }

/* =====================================================================
   FULL-PAGE INDEX — slides in from the right
   ===================================================================== */
.index { position: fixed; inset: 0; z-index: 35; overflow-y: auto; overscroll-behavior: contain; display: block;
  background: var(--night);
  transform: translate3d(101%, 0, 0); visibility: hidden;
  transition: transform .36s var(--ease-io), visibility 0s linear .36s; }
.index[hidden] { display: none; }
.index.is-open { transform: none; visibility: visible; transition: transform .42s var(--ease-io), visibility 0s; }
.index-inner { min-height: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px 64px; align-content: center;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 32px) var(--gut-r) calc(36px + env(safe-area-inset-bottom, 0px)) var(--gut); max-width: calc(var(--maxw) + 80px); margin: 0 auto; }
.index-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.index-col--side { align-self: end; gap: 26px; justify-items: start; }
.index-list { border-top: 1px solid var(--rule); }
.index-list li, .index-projects li { opacity: 0; transform: translate3d(48px, 0, 0); transition: opacity .2s ease, transform .3s ease; }
.index.is-open li { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s var(--ease); }
.index.is-open .index-list li:nth-child(1) { transition-delay: .14s; } .index.is-open .index-list li:nth-child(2) { transition-delay: .18s; }
.index.is-open .index-list li:nth-child(3) { transition-delay: .22s; } .index.is-open .index-list li:nth-child(4) { transition-delay: .26s; }
.index.is-open .index-list li:nth-child(5) { transition-delay: .30s; } .index.is-open .index-list li:nth-child(6) { transition-delay: .34s; } .index.is-open .index-projects li { transition-delay: .3s; }
.index-list li { border-bottom: 1px solid var(--rule); }
.index-list a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: clamp(6px, 1.2vh, 14px) 2px; text-decoration: none; color: var(--text-2); border-radius: 6px; }
.index-list .n { font: 500 .78rem/1 var(--tech); letter-spacing: .08em; align-self: start; margin-top: 1.1em; color: var(--text-3); }
.index-list .t { font: 500 clamp(2.4rem, 5.4vw, 5.2rem)/1.04 var(--display); letter-spacing: -.045em; transition: transform .4s var(--ease), color .25s ease; }
.index-list .here { font: 500 var(--fs-label)/1 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--alpenglow); opacity: 0; }
.index-list a:hover .t, .index-list a:focus-visible .t { color: var(--text); transform: translateX(10px); }
.index-list a[aria-current="location"] .n { color: var(--accent-hi); }
.index-list a[aria-current="location"] .t { color: var(--snow); }
.index-list a[aria-current="location"] .here { opacity: 1; }
.index-projects { display: grid; gap: 4px; width: 100%; }
.index-projects a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 500 1.3rem/1.1 var(--display); letter-spacing: -.03em; color: var(--text); }
.index-projects a span { font: 500 var(--fs-label)/1 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.index-projects a:hover { color: var(--accent-hi); }
.index-projects--small a { font-size: 1.05rem; }
.index-col--side .label + .index-projects { margin-top: -10px; }
.index-foot { font-size: .8rem; color: var(--text-3); }
.index-foot kbd { font: 500 .72rem/1 var(--tech); padding: 3px 6px; border: 1px solid var(--rule); border-radius: 5px; color: var(--text-2); }
@media (hover: none) { .esc-hint { display: none; } }

/* =====================================================================
   SUMMIT — the opening view
   ===================================================================== */
/* The scene: the Matterhorn with first light on its summit.
   Wide screens: the words sit in the open sky to the left of the peak, with no plate. The drawing itself falls into
   shade where the supporting text and the buttons sit (it is drawn that way), so nothing dims the summit.
   Phones, portrait and squarer screens: the words stand on an Alpine Shadow plate at the foot of the scene, as
   everywhere else on the page, and the lit summit stands clear above it. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; }
.hero-copy { padding-bottom: clamp(72px, 13vh, 150px); padding-top: calc(var(--bar-h) + 40px); }
.hero-copy .stop-col { gap: 0; justify-items: start; max-width: 640px; }
.hero-title { font-size: var(--fs-hero); line-height: .98; letter-spacing: -.045em; max-width: 13ch; text-shadow: 0 2px 0 rgba(3, 10, 16, .35), 0 2px 30px rgba(3, 10, 16, .5); }
.hero-lead { max-width: 30rem; margin-top: clamp(18px, 2.8vh, 28px); font-size: clamp(1.02rem, 1.15vw, 1.18rem); line-height: 1.6; color: #E8EEF4; text-shadow: 0 1px 0 rgba(3, 10, 16, .6), 0 1px 16px rgba(3, 10, 16, .8); }
.hero-actions { margin-top: clamp(24px, 3.6vh, 36px); }
/* landscape screens that are not wide enough for the open-sky layout (tablets on their side, squarer monitors) */
@media (min-aspect-ratio: 1/1) {
  :root { --fs-hero: clamp(2.5rem, min(4.8vw, 7vh), 3.6rem); }
  .hero-copy { padding-bottom: clamp(36px, 7vh, 80px); }
  .hero-copy .stop-col { max-width: min(600px, 100%); }
}
@media (min-aspect-ratio: 3/2) and (min-width: 1100px) {
  :root { --fs-hero: clamp(2.6rem, min(4.4vw, 7.2vh), 5.4rem); }
  .hero .shade.shade--hero { padding: 0; }
  .hero .shade.shade--hero::before { display: none; }
  .hero { align-items: start; }
  .hero-copy { padding-top: calc(var(--bar-h) + clamp(22px, 4.6vh, 64px)); padding-bottom: 0; }
  .hero-line { display: block; }                           /* five short lines beside the peak */
  .hero-title { max-width: none; }
  .hero-copy .stop-col { max-width: min(36vw, 36rem); }
  .hero-lead { max-width: min(28vw, 30rem); }
}

/* =====================================================================
   NEAR THE TOP — one idea, with the summit close
   ===================================================================== */
.climb { min-height: 120vh; min-height: 120svh; display: grid; align-items: center; padding: var(--sec) 0; }
.climb-inner { display: grid; gap: 26px; justify-items: start; }
.climb-title { font-size: var(--fs-h2); line-height: 1.02; max-width: 15ch; text-shadow: 0 2px 40px rgba(0, 0, 0, .5); }
.climb-lead { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); text-shadow: 0 1px 18px rgba(0, 0, 0, .8); }

/* =====================================================================
   THE ROUTE DOWN THE PAGE — open land between sections on the same stage,
   and a longer stretch of open sky where one stage gives way to the next
   (the scenes cross there, behind no text)
   ===================================================================== */
.leg { margin-top: var(--vista); }
.leg[data-stage-first] { margin-top: var(--vista-stage); }
.leg > .wrap { position: relative; }

/* =====================================================================
   STOPS — each section's content is placed at a spot in its landscape
   The camera (journey.js) frames each scene so its calm area lies behind the
   content and the peak stays on the open side.

   ALPINE SHADOW — how text sits on the mountain.
   Each block of text stands on a deep, solid plate with one fine edge and a
   short fall of shadow beneath it. The edge is not a fixed colour: each
   section gives it a tone taken from the scene behind that section (--edge:
   cloud blue over the sea of cloud, sky blue in the valley, lilac at dusk…),
   and it is drawn slightly see-through with a fainter line outside it. So over
   open sky it all but joins the sky, and against rock or forest it reads as a
   quiet line of the same light. No rule, no corner marks, no blur, no glass.
   ===================================================================== */
.shade { position: relative; isolation: isolate; padding: clamp(26px, 2.8vw, 40px) clamp(24px, 3vw, 44px); }
.shade::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 2px;
  background-color: var(--panel);
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--edge, #86ABC4) 80%, transparent),      /* the edge */
              0 0 0 3.5px color-mix(in oklab, var(--edge, #86ABC4) 20%, transparent),      /* …feathered into the scene */
              0 24px 44px -20px rgba(2, 7, 11, .8); }                                      /* a short fall of shadow beneath */
/* the edge takes its tone from the scene behind each stop */
.hero, .climb { --edge: #6690AC; }            /* summit: the blue of first light */
.work { --edge: #9CC0DC; }                    /* upper slopes: the sea of cloud */
.process { --edge: #A8C4D8; }                 /* mid-mountain: cloud and snow */
.services, .studio { --edge: #7FB0DB; }       /* lower slopes: valley sky */
.pricing { --edge: #AEBFCB; }                 /* base camp: overcast light on the trail */
.faq { --edge: #8FBDE4; }                     /* base camp, by day */
.contact { --edge: #8F86B3; }                 /* base camp at dusk: lilac snow */
/* the landing text has no plate where the scene itself is in shade behind it (see SUMMIT) */
main, .foot { overflow-x: clip; }   /* the shade reaches the screen edge without widening the page */
.stop-col { position: relative; display: grid; gap: clamp(20px, 3vh, 30px); max-width: min(720px, 100%); }
.stop--right .stop-col { margin-left: auto; }
.climb-inner .stop-col { justify-items: start; }
.shade .label, .shade .project-index { color: var(--ice); }

/* =====================================================================
   UPPER SLOPES — WORK
   ===================================================================== */
.work .sec-head { margin-bottom: clamp(40px, 8vh, 96px); }
.work > .wrap:first-child .sec-head { max-width: min(620px, 100%); }
/* Work opens centred: the heading in the sky, the peak above the cloud directly beneath it */
.sec-head--center { position: relative; left: calc(var(--route-w) / 2); margin-left: auto; margin-right: auto; justify-items: center; text-align: center; }   /* centred on the screen (the page column leaves room for the route on the right) */
.work > .wrap:first-child .sec-head--center { max-width: min(700px, 100%); }
.sec-head--center .sec-lead { max-width: 36rem; }
/* projects alternate: 01 and 03 introduce themselves on the left, 02 and 04 on the right; the demos stay full width */
.project--right .project-head { margin-left: auto; }
/* each project: its name on the cloud, the demo wide and in the clear, its controls below;
   open sky between projects lets the peak and the ridge show */
.project { position: relative; display: grid; gap: clamp(16px, 2.2vh, 24px); margin-top: clamp(120px, 26vh, 300px); }
.project-head { display: grid; gap: 10px; max-width: min(760px, 100%); }
.project-head .project-line { margin-bottom: 0; }
.project-foot { display: grid; }
.project-foot .project-actions { margin-top: 0; }
.project .frame, .project .live-card { position: relative; z-index: 1; }   /* above the shade that falls across from the text */
.project-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.project-index { font: 500 var(--fs-label)/1.4 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.project-index span { color: var(--snow); margin-right: 12px; }
/* what kind of project it is: plain text on the same line as its number, not a badge */
.tag { font: 500 var(--fs-label)/1.4 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.tag::before { content: "·"; margin-right: 14px; color: var(--text-3); }
.tag--live { color: var(--accent-hi); }      /* a live website: an active state */
.project-name { font-size: var(--fs-h3); line-height: 1; letter-spacing: -.045em; }
.project-hook { font: 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.2 var(--display); letter-spacing: -.025em; color: var(--glacier); }
.project-line { max-width: 44rem; font-size: 1.05rem; line-height: 1.55; color: var(--text-2); font-weight: 400; margin-bottom: 18px; }

/* Demo frame */
.frame { border-radius: var(--r); overflow: hidden; background: #081925; box-shadow: 0 0 0 1px var(--rule-strong), 0 50px 120px -60px rgba(0, 0, 0, .9); }
.frame-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 8px 0 16px; background: #0C1D2A; box-shadow: inset 0 -1px 0 var(--rule); font-size: 13px; }
.frame-addr { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-state { display: inline-flex; align-items: center; gap: 6px; font: 500 .66rem/1 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.frame-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--snow) 30%, transparent); transition: background-color .3s ease; }
.frame.is-live .frame-state { color: var(--snow); }
.frame.is-live .frame-state::before { background: var(--accent); }
.frame.is-using { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 80%, transparent), 0 50px 120px -60px rgba(0, 0, 0, .9); }
.frame-tool { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; }
.frame-tool:hover { background: color-mix(in oklab, var(--snow) 8%, transparent); }
.frame-tool svg { width: 14px; height: 14px; }
.frame-view { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 76vh; max-height: 76svh; background: #081925; }
.frame-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .5s ease, filter .5s ease; }
.frame-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #FFFFFF; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.frame.is-live .frame-view iframe { opacity: 1; }
.frame.is-live .frame-poster { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; }   /* faded and out of the way: clicks reach the live demo */
.frame.is-using .frame-view iframe { pointer-events: auto; }
.fv-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; cursor: pointer; background: color-mix(in oklab, var(--night) 34%, transparent); transition: background-color .35s ease; }
.fv-cover:hover, .fv-cover:focus-visible { background: color-mix(in oklab, var(--night) 50%, transparent); }
.fv-cover:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.frame.is-using .fv-cover { display: none; }
.fv-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 .95rem/1 var(--sans); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8); }
.fv-msg { font-size: .9rem; color: var(--text); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.fv-error-link { color: var(--text); text-decoration: underline; text-underline-offset: 4px; font-size: .9rem; }
.fv-done { position: absolute; z-index: 3; right: 12px; top: 12px; display: none; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 .8rem/1 var(--sans); box-shadow: 0 0 0 1px color-mix(in oklab, var(--glacier) 50%, transparent); }
.frame.is-using .fv-done { display: inline-flex; align-items: center; }

.project-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: 18px; }
.try { max-width: 36rem; color: var(--text-2); }
.try .label { margin-right: 10px; color: var(--snow); }
.details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.details > div { min-height: 0; overflow: hidden; }
.details.is-open { grid-template-rows: 1fr; }
.details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 28px; border-top: 1px solid var(--rule); margin-top: 10px; }
.details-grid dt { font: 500 var(--fs-label)/1.4 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--glacier); margin-bottom: 10px; }
.details-grid dd { color: var(--text-2); font-size: .95rem; }

/* Live site card (Strided) */
.live-card { display: grid; grid-template-rows: auto 1fr auto; min-height: clamp(300px, 46vh, 520px); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--text);
  background: #081925; box-shadow: 0 0 0 1px var(--rule-strong); transition: box-shadow .4s ease; }
.live-card:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--glacier) 55%, transparent), 0 50px 120px -60px rgba(0, 0, 0, .9); }
.live-addr { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; background: #0C1D2A; box-shadow: inset 0 -1px 0 var(--rule); font-size: 13px; color: var(--text-2); }
.live-body { display: grid; align-content: center; gap: 18px; padding: clamp(28px, 6vw, 80px); }
.live-quote { font: 500 clamp(1.8rem, 3.8vw, 3.8rem)/1.04 var(--display); letter-spacing: -.04em; max-width: 18ch; }
.live-sub { font: 500 var(--fs-label)/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.live-go { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0 0 clamp(24px, 4vw, 40px) clamp(28px, 6vw, 80px); padding-bottom: 4px; border-bottom: 1px solid color-mix(in oklab, var(--glacier) 50%, transparent); color: var(--glacier); font-weight: 500; }
.live-go svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.live-card:hover .live-go svg { transform: translate(3px, -3px); }


.work-end { margin-top: clamp(120px, 24vh, 280px); }
.work-end-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; width: fit-content; max-width: 100%; }
.work-end p { font: 500 clamp(1.4rem, 2.2vw, 2rem)/1.15 var(--display); letter-spacing: -.03em; text-shadow: 0 1px 18px rgba(0, 0, 0, .8); }

/* =====================================================================
   MID-MOUNTAIN — SERVICES AND PROCESS
   ===================================================================== */
/* Services, lower slopes: three offers stepping down the slope like terraces */
/* nearer the centre and less tall: the three offers stand side by side as equal columns instead of a stepped stack */
.services .stop-col { max-width: min(800px, 100%); margin-left: clamp(0px, 1.6vw, 28px); gap: clamp(16px, 2.2vh, 22px); }
.services .sec-lead { max-width: 44rem; }
.offers { margin-top: 4px; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 34px); }
.offer { display: grid; align-content: start; gap: 10px; padding: 22px 0 24px; border-top: 1px solid var(--rule-strong); }
@media (min-width: 761px) {
  .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer { padding: 18px 0 20px; }
}
.offer h3 { font: 500 clamp(1.3rem, 1.7vw, 1.6rem)/1.15 var(--display); letter-spacing: -.03em; }
.offer p { color: var(--text-2); }
.audience { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--rule-strong); display: grid; gap: 10px; }
/* "Especially for": a plain run of text, not a row of badges */
.chips { display: block; max-width: 46rem; color: var(--text); line-height: 1.7; }
.chips li { display: inline; }
.chips li:not(:last-child)::after { content: "  ·  "; white-space: pre; color: var(--text-3); }
.audience-note { max-width: 46rem; color: var(--text-2); font-size: .95rem; }

/* Process, mid-mountain: one centred plate that reads at a glance. Wide screens: the introduction on the left, the six
   steps beside it as two short trails (01–03, then 04–06); the timing note sits under the introduction. Nothing is
   smaller than before; the section is simply no longer one long column. */
.stop--center .stop-col { margin-left: auto; margin-right: auto; }
.process .stop-col { max-width: min(660px, 100%); }
/* Process, mid-mountain: the steps descend like a route along the ridge */
.steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(28px, 4vh, 44px); padding-left: 34px; }
.steps::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 34px; border-left: 1.5px dashed color-mix(in oklab, var(--ice) 45%, transparent); }
.step { position: relative; display: grid; align-content: start; gap: 8px; padding: 0 0 clamp(22px, 3.4vh, 34px); }
.step::after { content: ""; position: absolute; left: -33px; top: 2px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--ice) 75%, transparent); background: var(--night); }
.step-n { font: 500 .78rem/1 var(--tech); letter-spacing: .1em; color: var(--text-2); }
.step h3 { font: 500 clamp(1.2rem, 1.5vw, 1.45rem)/1.15 var(--display); letter-spacing: -.025em; }
.step p { color: var(--text-2); font-size: .95rem; }
.step--key::after { background: var(--snow); border-color: var(--snow); }   /* the step that sets Montevelli apart */
@media (min-width: 1081px) {
  .process .stop-col { max-width: min(1120px, 100%); grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr); grid-template-areas: "head steps" "time steps"; grid-template-rows: auto 1fr; column-gap: clamp(36px, 4.4vw, 68px); row-gap: 22px; align-items: start; }
  .process .sec-head { grid-area: head; gap: 18px; }
  .process .sec-title { font-size: clamp(1.9rem, 2.9vw, 2.8rem); }
  .process .timing { grid-area: time; align-self: end; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--rule-strong); }
  .process .steps { grid-area: steps; margin-top: 0; padding-left: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: clamp(28px, 3vw, 44px); }
  .process .steps::before { display: none; }
  .process .step { padding-left: 32px; padding-bottom: clamp(18px, 2.6vh, 26px); }
  .process .step::after { left: 0; }
  .process .step::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: 2px; border-left: 1.5px dashed color-mix(in oklab, var(--ice) 45%, transparent); }   /* the trail from one step to the next */
  .process .step:nth-child(3n) { padding-bottom: 0; }
  .process .step:nth-child(3n)::before { display: none; }
}
@media (min-width: 641px) and (max-width: 1080px) {      /* in between: the six steps as two short trails under the introduction */
  .process .stop-col { max-width: min(760px, 100%); }
  .process .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 28px; padding-left: 0; }
  .process .steps::before { display: none; }
  .process .step { padding-left: 32px; }
  .process .step::after { left: 0; }
}
.timing { margin-top: 4px; display: flex; align-items: baseline; gap: 12px; max-width: 46rem; color: var(--text-2); }
.timing-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ice); transform: translateY(-1px); }

/* =====================================================================
   DESCENDING — STUDIO AND QUESTIONS
   ===================================================================== */
/* Studio, lower slopes: a balanced split, the Matterhorn standing between the two columns */
/* the two plates stand nearer the centre, the same height, with the peak between them; "This page" is a slim plate
   of its own beneath them, so neither column is stretched by it */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3vh, 30px) clamp(96px, 10vw, 160px); align-items: stretch; }
.studio .split { padding-left: calc(var(--gut) + clamp(0px, 2.4vw, 40px)); padding-right: calc(var(--gut-r) + var(--route-w) + clamp(0px, 2.4vw, 40px)); }
.studio .split-a { align-content: center; }
.split .sec-title { font-size: clamp(1.9rem, 2.9vw, 3.1rem); }
.studio-text { display: grid; gap: 22px; align-content: start; }
.studio-text > p:not(.label) { max-width: 38rem; color: var(--text-2); font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; }
.studio-text .studio-lead { color: var(--text); }
.studio-proof { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px clamp(18px, 2.4vw, 34px); padding-top: 20px; padding-bottom: 20px; font-size: .95rem; color: var(--text-2); }
.studio-proof .label { color: var(--snow); white-space: nowrap; }
.compare { width: 100%; max-width: 42rem; border-collapse: collapse; text-align: left; }
.compare th { padding: 0 16px 10px 0; font: 500 var(--fs-label)/1.4 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--rule-strong); }
.compare th + th { color: var(--snow); }
.compare td { width: 50%; padding: 14px 16px 14px 0; vertical-align: top; font-size: .95rem; color: var(--text-2); border-bottom: 1px solid var(--rule); }
.compare td + td { color: var(--text); }

/* Questions, base camp: across the trail from pricing */
.faq .stop-col { max-width: min(700px, 100%); }
.faq.leg { margin-top: var(--vista-stage); }
.faq .sec-head { justify-items: start; }
.faq-list { border-top: 1px solid var(--rule); }
.qa { position: relative; border-bottom: 1px solid var(--rule); }

.qa h3 { font: inherit; }
.qa-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; text-align: left; font: 500 clamp(1.1rem, 1.45vw, 1.35rem)/1.3 var(--display); letter-spacing: -.02em; }
.qa-q:hover span { color: var(--accent-hi); }
.qa-q i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule-strong); transition: background-color .3s ease, border-color .3s ease; }
.qa-q i::before, .qa-q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.4px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.qa-q i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa-q[aria-expanded="true"] i { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.qa-q[aria-expanded="true"] i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa-a > div { min-height: 0; overflow: hidden; }
.qa-a p { padding: 0 60px 26px 0; max-width: 40rem; color: var(--text-2); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }

/* =====================================================================
   LOWER SLOPES — PRICING
   ===================================================================== */
/* Pricing, base camp: beside the trail */
.pricing .stop-col { max-width: min(620px, 100%); }
.terms { margin-top: 8px; }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.terms > div { padding: 18px 0; border-top: 1px solid var(--rule-strong); }
.terms dt { font: 500 1.05rem/1.2 var(--display); letter-spacing: -.02em; color: var(--text); }
.terms dd { margin-top: 6px; color: var(--text-2); font-size: .95rem; }
.terms-big { display: block; margin-bottom: 4px; font: 500 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--display); letter-spacing: -.05em; color: var(--snow); }

/* =====================================================================
   BASE CAMP — CONTACT ("Time to connect")
   The last scene is behind this section, by now at dusk (journey.js turns day
   to evening while Questions and the open land above are scrolled). The
   mountain stands in the sky with the stars; the heading sits at its foot and
   carries it up the screen, so nothing here ever crosses the peak. Heading,
   form and notes lie on the scene's dark foreground and do not animate: only
   the light behind them changes.
   ===================================================================== */
.contact { position: relative; }
.contact.leg { margin-top: clamp(260px, 62vh, 640px); }      /* open land: the mountain alone, as the light goes */
.contact-stack { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(20px, 3vh, 30px); padding: 0 var(--gut-r) clamp(48px, 8vh, 96px) var(--gut); }
/* one Alpine Shadow plate: the heading, then R3 V7's "Time to connect" order of fields (name and email, business and
   need, the project, send) */
.contact-panel { display: grid; gap: clamp(22px, 3.4vh, 34px); width: min(100%, 760px); }
.contact-head { display: grid; gap: 12px; justify-items: start; }
.contact-head .sec-title { font-size: clamp(2rem, 3.2vw, 2.9rem); }
.contact-head .sec-lead { max-width: 38rem; font-size: 1.05rem; }
.contact-after { display: grid; gap: 8px; justify-items: center; text-align: center; max-width: 34rem; padding: 10px 14px; background: var(--panel); }
.contact-mail a { color: var(--accent-hi); }
.contact-note { font-size: .9rem; color: var(--ice); }
.contact-note a { color: var(--snow); text-underline-offset: 3px; }
.contact-note a:hover { color: var(--accent-hi); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; text-align: left; color: var(--text); }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 .78rem/1.3 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 3px; border: 1px solid #5F788D; background: #0E2130; color: var(--snow); caret-color: var(--accent-hi); font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease; }
.field ::placeholder { color: #A9B8C6; opacity: 1; }
/* not connected yet: the main action stays orange but muted, and still easy to read */
.form .btn[disabled] { opacity: 1; background: color-mix(in oklab, var(--accent) 52%, #0E2130); color: #FFF4E4; }
.field select option { background: #0E2130; color: var(--snow); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ice); }
.field textarea { resize: vertical; min-height: 118px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-hi); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent); }
.field [aria-invalid="true"] { border-color: #F4A58F; }
.field-error { min-height: 0; font-size: .9rem; color: #F4A58F; }
.field-error:empty { display: none; }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; margin-top: 6px; }
.form-status { font-size: .95rem; font-weight: 500; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #F4A58F; }
.form-status[data-state="success"] { color: #A6DDB6; }
.form-status[data-state="pending"], .form-status[data-state="notice"] { color: var(--ice); }

.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
/* the form's state, stated first: while it isn't connected this is a plain notice across the top of the form */
.form-state { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; padding: 4px 0 4px 14px; border-left: 2px solid var(--ice); font-size: .95rem; font-weight: 500; color: var(--snow); }   /* a note, not a field */
.form-state-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ice); transform: translateY(-1px); }      /* hollow: not connected */
.form-state[data-ready="true"] { padding: 0; font-weight: 400; color: var(--ice); border: 0; }
.form-state[data-ready="true"] .form-state-dot { border: 0; background: #6FCF97; }

/* =====================================================================
   FOOTER & COOKIE DIALOG
   ===================================================================== */
.foot { padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px)); background: var(--night); }   /* the night foreground continues under the footer */
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.foot-nav, .foot-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: .9rem; color: var(--text-2); }
.foot-nav a, .foot-legal a, .foot-legal button { text-decoration: none; color: inherit; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.foot-nav a:hover, .foot-legal a:hover, .foot-legal button:hover { color: var(--accent-hi); border-color: color-mix(in oklab, var(--accent) 60%, transparent); }

/* The cookie pop-up has its own stylesheet (cookie.css), shared with the Privacy and 404 pages. */

/* ---------- Reveal ---------- */
/* each stop arrives once, as one piece, when the visitor reaches it; then it stays still */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 901px) { :root { --route-w: 150px; } }
@media (max-width: 1080px) {
  .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .studio .split { padding-left: var(--gut); padding-right: calc(var(--gut-r) + var(--route-w)); }
  .split .studio-proof { max-width: min(660px, 100%); grid-template-columns: minmax(0, 1fr); }
  .services .stop-col { margin-left: 0; }
  .split .sec-title { font-size: var(--fs-h2); }
  .split .studio-text { max-width: min(660px, 100%); }
}
@media (max-width: 900px) {
  :root { --bar-h: 64px; }
  .bar-link { display: none; }
  .index-inner { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .index-col--side { align-self: start; }
    /* the route becomes a slim progress line with the current stage */
  .route { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: var(--gut-r); transform: none; }
  .route ol { gap: 0; }
  .route li { display: none; }
  .route li:has(a[aria-current="step"]) { display: block; }
  .route a { padding: 6px 8px 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--night) 78%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
  .route-name { opacity: 1; transform: none; }
  .route-name small { display: none; }
  .route-line { display: none; }
  .bar-progress { display: block; }     /* small screens: the route is a brief chip, so progress shows here */
  .route { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--ease); pointer-events: none; }
  .route.is-flash, .route:focus-within { opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 640px) {
  :root { --vista: clamp(100px, 24vh, 220px); --vista-stage: clamp(220px, 54vh, 460px); }
  .scene { --feather: clamp(140px, 36vh, 380px); }
  /* phones: the plate spans the column, with a little less padding */
  .shade { padding: 24px 20px 26px; }
  .contact.leg { margin-top: clamp(240px, 56vh, 520px); }
  .project { margin-top: clamp(90px, 18vh, 180px); }
  .project-meta { display: grid; gap: 2px; }
  .tag::before { display: none; }
  .sec-head--center { left: 0; margin-left: 0; justify-items: start; text-align: left; }      /* phones: one readable column, left-aligned */
  .bar .pill { min-height: 40px; padding: 0 13px; font-size: .8rem; }
  .brand-sub { display: none; }
  .index-btn { padding-left: 14px; }
  .hero-copy { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .cta-pair .btn { flex: 1 1 auto; }
  .details-grid { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .frame-view { aspect-ratio: 4 / 5; }
  .frame-tool span { display: none; }
  .qa-a p { padding-right: 0; }
  .project-actions { flex-direction: column; align-items: stretch; }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .climb { min-height: 100vh; min-height: 100svh; }
}
@media (max-width: 440px) {
  .brand-word { display: none; }
  .bar-actions { gap: 8px; }
  .index-btn { gap: 8px; padding-left: 12px; }
}
/* Reduced motion: the same page, calmer. Still views of each stage replace the moving camera. */
@media (prefers-reduced-motion: reduce) {
  .index, .index.is-open, .index li, .index.is-open li, .details, .qa-a, .index-btn-icon i, .route-dot, .route-name { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn--route::after, .btn--halo { transition: none; }
  .star--blink, .shoot { animation: none !important; }      /* the stars hold still; no shooting stars */
}