/* Viek Cleaning: page layer. The engine's tokens are overridden here; nothing in
   scrollcraft.css is edited. Two grounds: morning (plaster) and evening (warm night).
   One accent hue, brass, at two lightnesses keyed to the ground. */

:root {
  --sc-canvas:     #F5F1EA;
  --sc-surface:    #ECE5DA;
  --sc-ink:        #181B1D;
  --sc-ink-soft:   #55524B;
  --sc-accent:     #85662C;
  --sc-accent-ink: #FFFCF6;
  --sc-font-display: "Noto Serif Display", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Geist", "Helvetica Neue", Arial, sans-serif;

  /* older readers: a slightly larger body floor than the engine default */
  --sc-t-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --sc-shadow-color: 32 30% 20%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.12), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);
  --r: 3px;
  --bar-h: 68px;
  --sc-maxw: 84rem;
}

[data-ground="dark"] {
  --sc-canvas:     #15120E;
  --sc-surface:    #201B16;
  --sc-ink:        #F4EDE1;
  --sc-ink-soft:   #BDB2A0;
  --sc-accent:     #D9B56E;
  --sc-accent-ink: #15120E;
  --sc-shadow-color: 30 40% 3%;
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.3), 0 14px 30px -8px hsl(var(--sc-shadow-color) / 0.5);
  --sc-edge: inset 0 1px 0 rgb(255 240 215 / 0.07);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}

body { background: var(--sc-canvas); }
html { scroll-padding-top: var(--bar-h); }
.sc-grain { opacity: 0.035; z-index: 70; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--sc-ink); color: var(--sc-canvas); padding: .6rem 1rem; border-radius: var(--r); }
.skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ type -- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
  font-optical-sizing: auto;
}
.display em { font-style: italic; font-weight: 340; }
.display--hero { font-size: clamp(3rem, 1.4rem + 5.4vw, 6.6rem); font-weight: 360; letter-spacing: -0.03em; line-height: 0.98; }
.display--lg { font-size: clamp(2.35rem, 1.5rem + 3vw, 4.4rem); }
.display--md { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); letter-spacing: -0.015em; }
.display--sm { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.01em; line-height: 1.15; }
.lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; margin: 0; text-wrap: pretty; }
.body { color: var(--sc-ink-soft); max-width: 58ch; margin: 0; text-wrap: pretty; }
[data-ground="dark"] .body, [data-ground="dark"] .lede { letter-spacing: 0.002em; }

/* --------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 1.6rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: 0.01em; white-space: nowrap;
  border: 0; border-radius: var(--r); text-decoration: none; cursor: pointer;
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.18);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); box-shadow: var(--sc-e2); }
}
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 42px; padding: 0 1.1rem; font-size: 0.92rem; }
.btn--wide { width: 100%; min-height: 54px; font-size: 1.05rem; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--r); }

/* -------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-inline: var(--sc-gutter);
  color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent);
  transition: background-color 260ms var(--sc-ease-out), color 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out);
}
.bar.is-top { background: color-mix(in oklab, var(--sc-canvas) 40%, transparent); border-color: transparent; }
.bar.is-dark {
  --sc-canvas: #15120E; --sc-ink: #F4EDE1; --sc-ink-soft: #BDB2A0; --sc-accent: #D9B56E; --sc-accent-ink: #15120E;
  color: var(--sc-ink); background: color-mix(in oklab, #15120E 80%, transparent);
  border-color: rgb(255 240 215 / 0.08);
}
/* The logo as live type: Noto Serif Display is the logo's own face, so this matches
   assets/logo exactly. The mark stands on the baseline, as tall as the k's ascender. */
.mark { display: inline-flex; align-items: baseline; gap: .26em; color: inherit; text-decoration: none; margin-right: auto; font-size: 1.95rem; }
.mark__icon { width: .76em; height: .76em; flex: none; }
.mark__word { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.mark__word em { font-style: italic; font-weight: 300; font-size: .5em; letter-spacing: 0; color: var(--sc-accent); transition: color 260ms var(--sc-ease-out); }
.bar__nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.bar__nav a, .bar__phone { color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.bar__nav a { position: relative; padding-block: .4rem; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover::after { transform: scaleX(1); } }
.bar__phone { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bar__phone-label { color: var(--sc-ink-soft); font-weight: 500; margin-right: .3rem; }

/* ------------------------------------------------------------- hero --
   Every plane shares one scene box (--sx/--sy/--sw/--sh, written by page.js so
   the photograph covers the viewport and keeps the chandelier where the
   composition wants it). Order back to front: far plate, window light, floor
   fade, headline, chandelier, near banister. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; background: var(--sc-canvas); isolation: isolate; }
.hero__layer { position: absolute; left: var(--sx, 0); top: var(--sy, 0); width: var(--sw, 100%); height: var(--sh, 100%); pointer-events: none; will-change: transform; }
.hero__far { z-index: 1; }
.hero__far img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__light { z-index: 2; mix-blend-mode: soft-light; }
.hero__light i { position: absolute; top: 14%; width: 15%; height: 92%; transform-origin: 50% 0; transform: rotate(32deg); filter: blur(22px);
  background: linear-gradient(to bottom, rgb(255 246 222 / 0), rgb(255 246 222 / .75) 32%, rgb(255 246 222 / .25) 70%, rgb(255 246 222 / 0));
  animation: breathe 11s ease-in-out infinite; }
.hero__light i:nth-child(1) { left: 34%; }
.hero__light i:nth-child(2) { left: 58%; animation-delay: -5s; }
@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.hero__floor { position: absolute; inset: auto 0 0 0; height: 26%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 0%, transparent), color-mix(in oklab, var(--sc-canvas) 55%, transparent) 55%, var(--sc-canvas)); }
.hero__copy { position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 7.5rem); max-width: 44rem; }
.hero__sub { margin: 1.4rem 0 0; max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.5; color: #3F3C36; text-wrap: pretty; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.4rem; margin-top: 2rem; }
.link-phone { color: var(--sc-ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero__subject { z-index: 4; }
.chand { position: absolute; left: 43.53%; top: 0; width: 13.01%; aspect-ratio: 354 / 824; transform-origin: 50% 0; will-change: transform; }
.chand img { width: 100%; height: 100%; max-width: none; }
.glint { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; translate: -50% -50%; opacity: 0; mix-blend-mode: screen; animation: twinkle 6.5s ease-in-out infinite; animation-delay: var(--d); }
.glint::before, .glint::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 244 214 / .5) 35%, transparent); }
.glint::before { inset: 46% 0; }
.glint::after { inset: 0 46%; }
@keyframes twinkle { 0%, 82%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); } 88% { opacity: 1; transform: scale(1) rotate(20deg); } }
.hero__near { z-index: 5; left: auto; top: auto; right: -4vw; bottom: -12vh; width: auto; height: 60vh;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
.hero__near img { height: 100%; width: auto; max-width: none; }

/* ------------------------------------------------------------- andy -- */
.andy__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.andy__text .lede { margin-top: var(--sc-6); }
.andy__photo { margin: 0; }
.andy__frame { overflow: clip; border-radius: var(--r); aspect-ratio: 4 / 5; box-shadow: var(--sc-e2); }
.andy__frame img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 2rem; margin: clamp(4rem, 8vw, 7rem) 0 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent); padding-top: 2rem; }
.figure { margin: 0; }
.figure dt { font-family: var(--sc-font-display); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem); font-weight: 340; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.figure dd { margin: .7rem 0 0; color: var(--sc-ink-soft); max-width: 22ch; font-size: 0.98rem; line-height: 1.45; }
.figure--note dd { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.25rem, 1rem + .6vw, 1.55rem); color: var(--sc-ink); line-height: 1.3; margin-top: .4rem; max-width: 18ch; }

/* ---------------------------------------------------------- windows -- */
.windows { background: var(--sc-canvas); }
.windows__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: calc(var(--bar-h) + 2vh) var(--sc-gutter) 3vh; max-width: var(--sc-maxw); margin-inline: auto; }
.windows__copy { display: grid; gap: 1.4rem; max-width: 30rem; }
.windows__aside { margin: .4rem 0 0; font-family: var(--sc-font-display); font-style: italic; font-size: 1.3rem; }
.pane { position: relative; height: min(82svh, 940px); aspect-ratio: 1300 / 1733; border-radius: var(--r); overflow: clip; box-shadow: var(--sc-e2); }
.pane__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pane__clean { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
.pane__edge { position: absolute; left: 0; top: 0; width: 3px; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .9) 18%, rgb(255 255 255 / .9) 82%, transparent); filter: blur(.6px); }
.squeegee { position: absolute; left: 0; top: 0; width: auto; max-width: none; opacity: 0; pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(0 12px 14px rgb(40 30 20 / .32)) drop-shadow(0 2px 3px rgb(40 30 20 / .25)); }

/* ----------------------------------------------------------- ledger -- */
.ledger { background: var(--sc-surface); }
.ledger__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ledger__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.ledger__head { font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); margin: 0 0 1rem; }
.ledger__row { display: grid; grid-template-columns: minmax(10rem, 0.9fr) 1.1fr; gap: 1.5rem; margin: 0; padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 13%, transparent); }
.ledger__row span:first-child { font-family: var(--sc-font-display); font-size: 1.28rem; line-height: 1.25; }
.ledger__row span:last-child { color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.45; padding-top: .15rem; }
.ledger__foot { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; max-width: 54ch; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------ visit -- */
.visit { background: var(--sc-canvas); }
.visit__stage { display: flex; align-items: center; padding-top: var(--bar-h); }
.rail { gap: clamp(1.4rem, 2.6vw, 2.6rem); padding-inline: var(--sc-gutter); align-items: flex-start; }
.rail__lead { flex: 0 0 clamp(16rem, 26vw, 25rem); display: grid; gap: 1.2rem; align-self: center; }
.step { flex: 0 0 clamp(15rem, 21vw, 20.5rem); margin: 0; }
.step__img { aspect-ratio: 3 / 4; overflow: clip; border-radius: var(--r); box-shadow: var(--sc-e1); background: var(--sc-surface); }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.65rem; letter-spacing: -0.01em; margin: 1.1rem 0 .4rem; }
.step p { margin: 0; color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.5; max-width: 30ch; }
.rail__note { flex: 0 0 clamp(15rem, 22vw, 21rem); display: grid; gap: 1rem; align-self: center; padding-right: 4vw; }

/* ------------------------------------------------------------- peak -- */
.peak__stage { background: var(--sc-canvas); }
.peak__art { position: absolute; top: 0; right: 0; bottom: 0; width: 72%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; }
.peak__canvas, .peak__fallback { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 48%; }
.peak__fallback { display: none; }
.no-canvas .peak__fallback { display: block; }
.rainbows { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.bow { position: absolute; width: var(--w, 54px); height: calc(var(--w, 54px) * .26); border-radius: 50%; opacity: 0; filter: blur(1.6px); will-change: transform, opacity;
  background: linear-gradient(90deg, transparent 0%, rgb(255 60 60 / .75) 16%, rgb(255 170 50 / .75) 32%, rgb(250 240 90 / .7) 46%, rgb(90 230 120 / .65) 60%, rgb(70 150 255 / .7) 76%, rgb(150 90 255 / .6) 88%, transparent 100%); }
.peak__copy { position: absolute; z-index: 3; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(31rem, 36vw); display: grid; }
.peak__copy > * { grid-area: 1 / 1; align-self: center; }
.peak__line { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 330; font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1.22; letter-spacing: -0.01em; text-wrap: balance; }
.peak__end { display: grid; gap: 1.3rem; }

/* ------------------------------------------------------------ close -- */
.close { position: relative; overflow: clip; }
.close__scene { position: relative; height: clamp(24rem, 72vh, 48rem); }
.close__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.close__scene::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 0%, transparent 18%, transparent 42%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 78%, var(--sc-canvas) 100%); }
.close__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(2.5rem, 7vw, 8rem); margin-top: clamp(-11rem, -16vh, -6rem); padding-bottom: clamp(4rem, 8vw, 7rem); align-items: start; }
.close__lead { display: grid; gap: 1.4rem; align-content: start; padding-top: 2.5rem; }
.close__lead .lede { color: var(--sc-ink-soft); }
.close__phone { display: grid; gap: .3rem; margin-top: 1rem; color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-size: clamp(2.3rem, 1.6rem + 2.6vw, 4rem); font-weight: 360; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; width: max-content; }
.close__phone span { font: 600 0.82rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .close__phone:hover { color: var(--sc-accent); } }
.close__mail { color: var(--sc-ink-soft); width: max-content; }

.request { background: var(--sc-surface); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--sc-e2), var(--sc-edge); display: grid; gap: 1.25rem; }
.field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field:not(.field--choice) > label:not(.drop), .field legend { font-size: 0.9rem; font-weight: 500; color: var(--sc-ink-soft); padding: 0; }
.field label span, .field legend span { font-weight: 400; opacity: .8; }
.field input[type="text"], .field textarea { width: 100%; background: color-mix(in oklab, var(--sc-canvas) 55%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); border-radius: var(--r); padding: .8rem .9rem; font-size: 1.05rem; color: var(--sc-ink); transition: border-color 160ms var(--sc-ease-out); }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.field input[type="text"]:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 30%, transparent); }
.field--choice { display: flex; flex-wrap: wrap; gap: .2rem; margin-inline: -.8rem; }
.field--choice legend { width: 100%; margin-bottom: .3rem; float: left; padding-inline: .8rem; }
/* no resting border: plain options with a 44px tap area; only the chosen one is tinted.
   The group is pulled out by the options' own padding, so every row's radios line up
   with the field edges above and below, wrapped or not. */
.field--choice label { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .8rem; border-radius: 6px; cursor: pointer; font-size: 1rem; color: var(--sc-ink-soft); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .field--choice label:hover { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); color: var(--sc-ink); } }
.field--choice label:has(input:checked) { background: color-mix(in oklab, var(--sc-accent) 14%, transparent); color: var(--sc-ink); }
.field--choice label:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
.field--choice input:focus-visible { outline: none; }
.field--choice input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 38%, transparent); background: transparent;
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.field--choice input:checked { border-color: var(--sc-accent); box-shadow: inset 0 0 0 3.5px var(--sc-surface), inset 0 0 0 9px var(--sc-accent); }
.field.is-invalid input { border-color: #E08A6B; }
.field--photos { gap: .7rem; }
.photos__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field__label { font-size: 0.9rem; font-weight: 500; color: var(--sc-ink-soft); }
.field__label span { font-weight: 400; opacity: .8; }
.photos__count { font-size: 0.82rem; font-weight: 600; letter-spacing: .04em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; opacity: .55; transition: color 160ms var(--sc-ease-out), opacity 160ms var(--sc-ease-out); }
.photos__count.is-on { color: var(--sc-accent); opacity: 1; }

.drop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  padding: 1.7rem 1.4rem 1.55rem; cursor: pointer;
  border: 1.5px dashed color-mix(in oklab, var(--sc-ink) 24%, transparent); border-radius: 6px;
  background: color-mix(in oklab, var(--sc-canvas) 45%, transparent);
  transition: border-color 180ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out); }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.drop:focus-within { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.drop__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .35rem; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-accent) 30%, transparent);
  transition: transform 220ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out); }
.drop__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--sc-accent); stroke-width: 1.5; stroke-linejoin: round; }
.drop__main { font-size: 1.02rem; color: var(--sc-ink-soft); }
.drop__main > span:first-child { font-weight: 600; color: var(--sc-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.drop__hint { font-size: 0.84rem; line-height: 1.45; color: var(--sc-ink-soft); opacity: .85; max-width: 34ch; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .drop:not(.is-full):hover { border-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); }
  .drop:not(.is-full):hover .drop__icon { transform: translateY(-2px); background: color-mix(in oklab, var(--sc-accent) 22%, transparent); }
}
@media not ((hover: hover) and (pointer: fine)), (max-width: 480px) { .drop__or { display: none; } }
.drop.has-photos { flex-direction: row; justify-content: center; gap: .7rem; padding: .85rem 1rem; }
.drop.has-photos .drop__icon { width: 34px; height: 34px; margin: 0; }
.drop.has-photos .drop__icon svg { width: 17px; height: 17px; }
.drop.has-photos .drop__hint { display: none; }
.drop.is-over { border-color: var(--sc-accent); border-style: solid; background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.drop.is-full { cursor: default; border-style: solid; border-color: color-mix(in oklab, var(--sc-ink) 12%, transparent); padding-block: 1.1rem; }
.drop.is-full .drop__icon { display: none; }
.drop.is-full .drop__main > span:first-child { color: var(--sc-ink); text-decoration: none; }

.thumbs { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.thumbs:empty { display: none; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: color-mix(in oklab, var(--sc-ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 12%, transparent), var(--sc-e1); }
.thumb.is-new { animation: thumb-in 260ms var(--sc-ease-out) both; }
.thumb.is-leaving { animation: thumb-out 180ms cubic-bezier(0.68, 0, 0.77, 0.32) both; pointer-events: none; }
@keyframes thumb-in { from { opacity: 0; transform: scale(.95); } }
@keyframes thumb-out { to { opacity: 0; transform: scale(.95); } }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[data-ext]::before { content: attr(data-ext); position: absolute; inset: 0; display: grid; place-items: center; font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--sc-ink-soft); }
.thumb--empty { background: transparent; box-shadow: none; animation: none; }
.thumb__add { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; border-radius: 6px;
  border: 1px dashed color-mix(in oklab, var(--sc-ink) 20%, transparent); color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent);
  font-size: 1.4rem; font-weight: 300; line-height: 1; transition: border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .thumb__add:hover { border-color: var(--sc-accent); color: var(--sc-accent); } }
.thumb__remove { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 50%; background: rgb(21 18 14 / .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 120ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.thumb__remove svg { width: 10px; height: 10px; stroke: #F4EDE1; stroke-width: 1.6; stroke-linecap: round; }
.thumb__remove:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .thumb__remove:hover { background: rgb(21 18 14 / .95); } }
/* a 44px touch target without growing the visible dot */
.thumb__remove::after { content: ""; position: absolute; inset: -10px; }
@media (prefers-reduced-motion: reduce) { .thumb.is-new, .thumb.is-leaving { animation: none; } .drop__icon { transition: none; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request__note { margin: 0; font-size: 0.9rem; color: var(--sc-ink-soft); line-height: 1.45; }
.request__note.is-alert { color: #F0B49C; }

.foot { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark contact" "desc copy";
  gap: .55rem 2.5rem; align-items: baseline; padding-block: 2.2rem 2.6rem; border-top: 1px solid rgb(255 240 215 / 0.1); color: var(--sc-ink-soft); font-size: 0.9rem; }
.foot p { margin: 0; }
.foot a { color: inherit; }
.foot__mark { grid-area: mark; color: var(--sc-ink); display: flex; align-items: baseline; gap: .26em; font-size: 2.2rem; }
.foot__desc { grid-area: desc; }
.foot__contact { grid-area: contact; text-align: right; }
.foot__small { grid-area: copy; text-align: right; opacity: .75; }

/* ------------------------------------------------------------- menu --
   Below 1080px. The sheet comes out from under the bar and leaves the same way; its
   position is owned by a spring in page.js (so a drag can catch it mid-flight), and
   the button's two lines turn into a cross with the same progress, --p. */
.menu-btn { display: none; position: relative; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; --p: 0;
  transition: background-color 160ms var(--sc-ease-out), transform 100ms var(--sc-ease-out); }
.menu-btn span { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor; }
.menu-btn span:first-child { transform: translateY(calc((1 - var(--p)) * -3.5px)) rotate(calc(var(--p) * 45deg)); }
.menu-btn span:last-child { transform: translateY(calc((1 - var(--p)) * 3.5px)) rotate(calc(var(--p) * -45deg)); }
.menu-btn:active { transform: scale(.92); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); transition-duration: 60ms; }

.menu { position: fixed; inset: var(--bar-h) 0 0 0; z-index: calc(var(--sc-z-chrome) - 1); visibility: hidden; pointer-events: none; }
.menu.is-on { visibility: visible; }
.menu.is-dark { --sc-canvas: #15120E; --sc-ink: #F4EDE1; --sc-ink-soft: #BDB2A0; --sc-accent: #D9B56E; --sc-accent-ink: #15120E; --sc-shadow-color: 30 40% 3%; }
.menu__scrim { position: absolute; inset: 0; background: rgb(12 10 8 / .4); opacity: 0; -webkit-tap-highlight-color: transparent; }
.menu.is-on .menu__scrim, .menu.is-on .menu__panel { pointer-events: auto; }
.menu__clip { position: absolute; inset: 0; overflow: hidden; }
.menu__panel { position: relative; max-height: calc(100dvh - var(--bar-h) - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
  padding: .4rem var(--sc-gutter) 0; color: var(--sc-ink); border-radius: 0 0 20px 20px;
  background: color-mix(in oklab, var(--sc-canvas) 95%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 18px 40px -16px hsl(var(--sc-shadow-color) / .45);
  transform: translate3d(0, -110%, 0); will-change: transform; touch-action: none; }
/* the bar and the open sheet read as one surface */
.bar.menu-open, .bar.menu-open.is-top { background: color-mix(in oklab, var(--sc-canvas) 95%, transparent); border-bottom-color: transparent; }
.bar.menu-open::after { opacity: 0; }

.menu__links { list-style: none; margin: 0; padding: 0; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; color: inherit; text-decoration: none;
  font-family: var(--sc-font-display); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.3rem); font-weight: 380; letter-spacing: -0.02em; line-height: 1.1;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent); transition: opacity 160ms var(--sc-ease-out); }
/* wayfinding: the part of the page you are on carries a brass dot */
.menu__links a::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); opacity: 0; transform: scale(.4); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); }
.menu__links a[aria-current]::after { opacity: 1; transform: none; }
.menu__links a:active, .menu__call:active { opacity: .55; transition-duration: 60ms; }
.menu__contact { display: grid; gap: 1rem; padding-top: 1.4rem; }
.menu__call { display: flex; flex-direction: column; gap: .15rem; color: inherit; text-decoration: none; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: opacity 160ms var(--sc-ease-out); }
.menu__call span { font-size: .86rem; font-weight: 500; letter-spacing: .008em; color: var(--sc-ink-soft); }
.menu__grab { display: grid; place-items: center; height: 30px; margin-top: .6rem; cursor: grab; }
.menu__grab span { width: 36px; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--sc-ink) 22%, transparent); }

@media (max-width: 1080px) {
  .menu-btn { display: block; }
}
/* tablet: a card anchored under the button rather than a full-width sheet */
@media (min-width: 761px) and (max-width: 1080px) {
  .menu__panel { width: min(24rem, calc(100vw - 2 * var(--sc-gutter))); margin-left: auto; margin-right: calc(var(--sc-gutter) - .5rem); margin-top: .5rem;
    padding-inline: 1.5rem; border-radius: 18px; }
  .menu__links a { font-size: 1.85rem; }
}
html.menu-lock { overflow: hidden; }

/* ----------------------------------------------------------- tablet -- */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peak__art { width: 80%; }
}

/* ------------------------------------------------------------ phone --
   Recomposed, not shrunk: type first where it needs to be read, scenes cropped
   around their subject. */
@media (max-width: 760px) {
  :root { --bar-h: 60px; }
  .bar { gap: .6rem; }
  .bar__phone-label, .bar .mark__word em { display: none; }
  .bar__phone { font-size: .9rem; }
  .bar .btn--small { display: none; }
  .mark { font-size: 1.55rem; }

  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 2.2rem; z-index: 6; }
  .display--hero { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .hero__sub { font-size: 1.06rem; margin-top: 1rem; max-width: 30ch; }
  .hero__actions { margin-top: 1.4rem; }
  .hero__near { display: none; }
  .hero__floor { height: 52%; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 0%, transparent), color-mix(in oklab, var(--sc-canvas) 62%, transparent) 38%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 70%, var(--sc-canvas)); }

  .andy__grid { grid-template-columns: 1fr; }
  .andy__photo { order: -1; }
  .andy__frame { aspect-ratio: 4 / 3.6; }
  .figures { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .figure--note { grid-column: 1 / -1; }

  .windows__stage { grid-template-columns: 1fr; align-content: start; gap: 1.1rem; padding-top: calc(var(--bar-h) + 1.2rem); }
  .windows__copy { gap: .7rem; }
  .windows__copy .display--lg { font-size: 2rem; }
  .windows__copy .body { font-size: 1rem; }
  .windows__aside { display: none; }
  .pane { height: auto; width: min(100%, calc((100svh - var(--bar-h) - 15.5rem) * 0.75)); justify-self: center; }

  .ledger__cols { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: .25rem; }

  .rail__lead { flex-basis: 74vw; }
  .step { flex-basis: 70vw; }
  .rail__note { flex-basis: 74vw; }

  .peak__art { width: 100%; bottom: auto; height: 60svh; top: var(--bar-h);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 72%, transparent 100%); }
  .peak__copy { top: auto; bottom: 2.4rem; translate: none; width: auto; right: var(--sc-gutter); }
  .peak__line { font-size: 1.45rem; }
  .peak__end .display--lg { font-size: 2.2rem; }

  .close__scene { height: 46svh; }
  .close__grid { grid-template-columns: 1fr; margin-top: -4.5rem; gap: 2rem; }
  .close__lead { padding-top: 0; }
  .foot { grid-template-columns: 1fr; grid-template-areas: "mark" "desc" "contact" "copy"; gap: .6rem; }
  .foot__contact, .foot__small { text-align: left; }
  .foot__small { margin-top: .6rem !important; }
}


/* ---------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .menu__panel { transform: none !important; transition: opacity 200ms ease; }
  .menu__scrim { transition: opacity 200ms ease; }
  .hero__light i, .glint { animation: none; }
  .glint { display: none; }
  .squeegee { display: none; }
}

/* =================================================== Apple design layer ==
   Response, wayfinding, materials, type tracking, and the accessibility
   preferences, added on top of the build. */

/* Response: feedback on press, everywhere something can be pressed, and no
   double-tap zoom delay on the input path. */
a, button, label, input, textarea, select { touch-action: manipulation; }
.bar__nav a, .bar__phone, .mark, .link-phone, .close__phone, .close__mail, .foot a { transition: opacity 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.bar__nav a:active, .bar__phone:active, .mark:active, .link-phone:active, .close__phone:active, .close__mail:active, .foot a:active { opacity: .6; transition-duration: 60ms; }
.field--choice label { transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 100ms var(--sc-ease-out); }
.field--choice label:active { transform: scale(.97); }
.drop { transition: border-color 180ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out), transform 100ms var(--sc-ease-out); }
.drop:not(.is-full):active { transform: scale(.99); }
.thumb__add:active { transform: scale(.95); }

/* Wayfinding: the nav says where you are. */
.bar__nav a[aria-current]::after { transform: scaleX(1); }
.bar__nav a { opacity: .78; }
.bar__nav a[aria-current], .bar__nav a:hover { opacity: 1; }

/* Materials: a scroll edge instead of a hard divider. The bar stays a
   translucent layer; where content passes under it, a short soft fade
   separates the two, and it disappears at the very top where nothing is under. */
.bar { border-bottom-color: transparent; }
.bar::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 16px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 60%, transparent), transparent);
  transition: opacity 260ms var(--sc-ease-out); }
.bar.is-top::after { opacity: 0; }

/* Evening falls between the visit and the peak: no abrupt jump from daylight
   to the dark act. */
.dusk { height: clamp(10rem, 34vh, 22rem); background: linear-gradient(in oklab to bottom, #ECE5DA, #C6B59D 38%, #4A3F33 72%, #15120E); }
/* the visit sits in the evening now: photos read as lit prints on a dark wall */
.visit[data-ground="dark"] .step__img { box-shadow: 0 0 0 1px rgb(255 240 215 / .08), 0 14px 30px -10px rgb(0 0 0 / .6); }

/* Type: tracking is size-specific. Display is tightened in its own rules;
   body sits at 0 and small text opens up a touch for legibility. */
body { letter-spacing: 0; }
.request__note, .figure dd, .step p, .drop__hint, .field > label, .field legend, .field__label, .ledger__row span:last-child, .foot, .field__error { letter-spacing: 0.008em; }

/* Inline validation: the message sits under the field it is about. */
.field__error { margin: .1rem 0 0; font-size: .86rem; line-height: 1.4; color: #F0B49C; }
.field__error[hidden] { display: none; }
.field.is-invalid input { border-color: #E08A6B; box-shadow: 0 0 0 3px rgb(224 138 107 / .16); }
.link-undo { margin-left: .35rem; padding: .2rem .1rem; border: 0; background: none; color: var(--sc-accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.link-undo:active { opacity: .6; }

/* Reduced transparency: frosted layers become solid. */
@media (prefers-reduced-transparency: reduce) {
  .bar, .bar.is-top { background: var(--sc-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar.is-dark { background: #15120E; }
  .thumb__remove { background: #15120E; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu__panel, .bar.menu-open, .bar.menu-open.is-top { background: var(--sc-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: solid chrome with a defined edge, stronger field borders and
   secondary text. */
@media (prefers-contrast: more) {
  :root { --sc-ink-soft: #3B3832; }
  [data-ground="dark"], .bar.is-dark { --sc-ink-soft: #DCD2C1; }
  .bar, .bar.is-top { background: var(--sc-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); }
  .bar::after { display: none; }
  .field input[type="text"], .field textarea, .drop { border-color: color-mix(in oklab, var(--sc-ink) 50%, transparent); }
  .bar__nav a { opacity: 1; }
  .menu__panel { background: var(--sc-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent); border-top: 0; }
  .menu__links a { border-bottom-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); }
}