/* Landscaping Scenes — shell styles. Colours/fonts come from site.config.json as CSS vars (scripts/site.mjs). */

:root {
  --header-h: 88px;
  --gap: 28px;           /* stage inset from the viewport sides/bottom */
  --cut: 44px;           /* chamfer on the stage corners */
  --pad: clamp(20px, 3.4vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --line: color-mix(in oklab, var(--text) 12%, transparent);
  --glass: color-mix(in oklab, var(--ink) 62%, transparent);
  --p: 0;
}
@media (max-width: 760px) {
  :root { --header-h: 60px; --gap: 8px; --cut: 18px; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the display face: bold + expanded, always uppercase */
.display, .type, .page__title, .nav__link, .btn, .brand__name, .loader__brand, .home__statement {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
}

/* ── stage: the framed 3D window ─────────────────────────────────────────────────────────────── */
.stage, .view {
  position: fixed;
  top: var(--header-h);
  left: var(--gap); right: var(--gap); bottom: var(--gap);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.stage { background: var(--deep); }
.stage canvas { display: block; width: 100%; height: 100%; }
/* legibility: shade under the copy, inside the frame */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 55%, transparent) 0, transparent 34%),
    linear-gradient(0deg, color-mix(in oklab, var(--ink) 70%, transparent) 0, transparent 40%);
}
.no-gl .stage { background: var(--deep) url(/media/hero/000.webp) center / cover; }
.no-gl .stage canvas { display: none; }

/* ── header ──────────────────────────────────────────────────────────────────────────────────── */
.header {
  position: fixed; inset: 0 0 auto; height: var(--header-h); z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--gap) + var(--cut) * .6);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand__mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand__name { font-size: 20px; letter-spacing: -.01em; }
.brand__logo { height: 32px; width: auto; display: block; }

.nav ul { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav__sep { width: 26px; height: 1px; background: var(--line); }
.nav__link {
  font-size: 15px; letter-spacing: .01em; text-decoration: none; color: var(--text);
  transition: color .2s, opacity .2s;
}
.nav__link:hover { opacity: .75; }
.nav__link[aria-current="page"] { color: var(--accent); opacity: 1; }
.nav__link--quote {
  display: inline-block; padding: 9px 14px 8px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.menu-toggle { display: none; }

@media (max-width: 760px) {
  .header { padding: 0 16px; }
  .brand__name { font-size: 17px; }
  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; color: var(--text); cursor: pointer;
  }
  .menu-toggle i, .menu-toggle i::before, .menu-toggle i::after {
    display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease-out), background .2s;
  }
  .menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; }
  .menu-toggle i::before { top: -7px; }
  .menu-toggle i::after { top: 7px; }
  .menu-open .menu-toggle i { background: transparent; }
  .menu-open .menu-toggle i::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-toggle i::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; top: var(--header-h); left: var(--gap); right: var(--gap);
    background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path .45s var(--ease-out), opacity .3s;
  }
  .menu-open .nav { clip-path: inset(0); opacity: 1; pointer-events: auto; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
  .nav__sep { width: auto; margin: 0 20px; }
  .nav__link { display: block; padding: 16px 20px; font-size: 18px; }
  .nav__link--quote { margin: 10px 20px 8px; padding: 14px 18px 13px; text-align: center; }
}

/* ── loader ──────────────────────────────────────────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 22px; justify-items: center;
  background: var(--ink); transition: opacity .6s var(--ease-out), visibility 0s .6s;
}
.loader__brand { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.loader__brand svg { width: 28px; height: 28px; color: var(--accent); }
.loader__bar { width: min(220px, 60vw); height: 2px; background: color-mix(in oklab, var(--text) 18%, transparent); overflow: hidden; }
.loader__bar b { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.is-ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── view (the page content layer, same box as the stage) ────────────────────────────────────── */
.view { z-index: 10; outline: none; transition: opacity .28s ease; }
.view.is-leaving { opacity: 0; }
.is-loading .view { visibility: hidden; }

.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 600 12px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px 15px;
  font-size: 13px; letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .2s, color .2s, transform .2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: color-mix(in oklab, var(--accent) 85%, white); }
.btn__arrow { transition: transform .25s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost {
  background: var(--glass); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: color-mix(in oklab, var(--ink) 40%, transparent); }

/* entrance stagger (first reveal of each view) */
.is-entered [data-in], .is-entered .home__intro > *, .is-entered .page__panel > * {
  animation: rise .9s var(--ease-out) both;
}
.is-entered .home__intro > :nth-child(2), .is-entered .page__panel > :nth-child(2) { animation-delay: .08s; }
.is-entered .home__intro > :nth-child(3), .is-entered .page__panel > :nth-child(3) { animation-delay: .16s; }
.is-entered .home__intro > :nth-child(4), .is-entered .page__panel > :nth-child(4) { animation-delay: .24s; }
.is-entered .page__panel > :nth-child(n+5) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ── home ────────────────────────────────────────────────────────────────────────────────────── */
.home { position: absolute; inset: 0; pointer-events: none; }
.home a, .home button { pointer-events: auto; }
.home__intro {
  position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) + var(--cut) * .4);
  max-width: 1180px;
  /* scroll: intro lifts and fades over the first third of the descent */
  opacity: clamp(0, 1 - var(--p) * 3.2, 1);
  transform: translateY(calc(var(--p) * -60px));
}
.past-intro .home__intro a { pointer-events: none; }
.type {
  margin: 0 0 22px; font-size: clamp(34px, 6.4vw, 96px); line-height: .94; letter-spacing: -.01em;
  max-width: 12.5em;
  /* every headline sits invisibly in the same grid cell, so the h1 is always as tall as the longest one
     and typing never shifts the layout below it */
  display: grid;
}
.type__size, .type__live { grid-area: 1 / 1; }
.type__size { visibility: hidden; }
/* caret glued to the last word (word joiner) so it can never wrap onto a line of its own */
.type__text::after { content: "\2060_"; color: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.home__sub { margin: 0 0 30px; max-width: 34em; font-size: clamp(15px, 1.25vw, 18px); color: color-mix(in oklab, var(--text) 82%, transparent); }
.home__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

.home__outro {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 20px);
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  /* scroll: the statement arrives as the camera settles on the crew */
  opacity: clamp(0, (var(--p) - .55) * 3.2, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p) - .55) * 3.2, 1)) * 30px));
}
.home__statement { margin: 0; max-width: 19em; font-size: clamp(20px, 2.5vw, 38px); line-height: 1.02; text-wrap: balance; }
.home__area { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  font: 500 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  opacity: clamp(0, 1 - var(--p) * 12, 1);
}
.scroll-hint__mouse { position: relative; width: 24px; height: 36px; border: 1.5px solid currentColor; border-radius: 12px; }
.scroll-hint__mouse b {
  position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: var(--accent);
  animation: wheel 1.6s var(--ease-out) infinite;
}
@keyframes wheel { from { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(11px); } }

@media (max-width: 760px) {
  .home__intro { top: var(--pad); }
  .home__sub { margin-bottom: 22px; }
  .home__outro { flex-direction: column; align-items: start; gap: 12px; bottom: calc(var(--pad) + 8px); }
  .scroll-hint { display: none; }
  .btn { padding: 15px 18px 14px; }
}
@media (max-height: 620px) and (min-width: 761px) {
  .home__sub { display: none; }
}

/* ── inner pages: a text panel on the left, the 3D parked and dimmed behind ──────────────────── */
.page { position: absolute; inset: 0; }
.page__panel {
  height: 100%; width: min(720px, 100%); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--pad) + var(--cut) * .5) var(--pad) var(--pad);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 88%, transparent), color-mix(in oklab, var(--ink) 70%, transparent));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.page__title { margin: 0 0 22px; font-size: clamp(32px, 4.6vw, 68px); line-height: .96; }
.page__intro { margin: 0 0 32px; max-width: 32em; font-size: clamp(16px, 1.3vw, 19px); color: color-mix(in oklab, var(--text) 85%, transparent); }
.page__contact { display: grid; gap: 10px; margin-bottom: 32px; }
.glass-link {
  display: grid; gap: 4px; padding: 22px 24px; text-decoration: none;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 19px; transition: background .2s;
}
.glass-link span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.glass-link:hover { background: color-mix(in oklab, var(--moss) 70%, transparent); }
.page__foot {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--muted);
}
@media (max-width: 760px) {
  .page__panel { width: 100%; border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── jobs: the corridor index. The 3D panes fill the stage; this layer is the crawlable list on top ─── */
.jobs { position: absolute; inset: 0; pointer-events: none; }
.jobs a { pointer-events: auto; }
.jobs__side {
  /* heading + list share one column so they can never overlap. When the list is taller than the room left, the
     column scrolls (app.js keeps the current row in view) and the heading fades and lifts out of the way first. */
  position: absolute; left: var(--pad); top: calc(var(--pad) + var(--cut) * .4); bottom: var(--pad);
  width: min(560px, 44%); display: flex; flex-direction: column; overflow: hidden;
}
.jobs__side.is-scrolled { mask-image: linear-gradient(transparent 0, #000 40px); -webkit-mask-image: linear-gradient(transparent 0, #000 40px); }
.jobs__head { flex: none; max-width: 30em; transition: opacity .35s ease, transform .5s var(--ease-out); }
.jobs__side.is-scrolled .jobs__head { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.jobs__head .page__intro { margin-bottom: 0; max-width: 26em; }
.jobs__list {
  flex: none; margin: auto 0 0; padding: 24px 0 0; width: min(470px, 100%);
  list-style: none; display: grid; gap: 2px;
}
.jobs__item {
  display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: baseline;
  padding: 12px 14px; text-decoration: none; color: var(--muted);
  border-left: 2px solid transparent; transition: color .25s, background .25s, border-color .25s;
}
.jobs__thumb { display: none; }
.jobs__num { grid-row: span 2; font: 600 12px/1 var(--font-body); letter-spacing: .14em; }
.jobs__name { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 15px; line-height: 1.15; }
.jobs__meta { font-size: 13px; }
.jobs__item:hover, .jobs__item:focus-visible, .jobs__item.is-current {
  color: var(--text); background: var(--glass); border-left-color: var(--accent);
}
.jobs__item.is-current .jobs__num { color: var(--accent); }
.jobs__hint {
  position: absolute; right: var(--pad); bottom: calc(var(--pad) + 6px); margin: 0;
  display: flex; align-items: center; gap: 12px; color: var(--muted);
  font: 500 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.jobs__hint .scroll-hint__mouse { color: var(--text); }
.is-entered .jobs__head > *, .is-entered .jobs__list > li { animation: rise .9s var(--ease-out) both; }
.is-entered .jobs__head > :nth-child(2) { animation-delay: .08s; }
.is-entered .jobs__head > :nth-child(3) { animation-delay: .16s; }
.is-entered .jobs__list > li:nth-child(n) { animation-delay: calc(.2s + var(--i, 0) * .05s); }
/* without the 3D corridor the list is the page: thumbnails, full width, scrolls */
body:not(.has-corridor) .jobs { pointer-events: auto; overflow-y: auto; padding: calc(var(--pad) + var(--cut) * .4) var(--pad) var(--pad); }
body:not(.has-corridor) .jobs__side { position: static; width: auto; max-width: 720px; overflow: visible; }
body:not(.has-corridor) .jobs__list { width: auto; margin-top: 4px; }
body:not(.has-corridor) .jobs__item { grid-template-columns: 120px 40px 1fr; color: var(--text); }
body:not(.has-corridor) .jobs__thumb { display: block; grid-row: span 2; width: 120px; height: 80px; object-fit: cover; }
body:not(.has-corridor) .jobs__hint { display: none; }

@media (max-width: 760px) {
  .jobs__head .page__title { font-size: 30px; margin-bottom: 10px; }
  .jobs__head .page__intro { font-size: 14px; }
  .jobs__hint { display: none; }
  /* phones: the corridor fills the frame, the list collapses to a card for the pane in view */
  .has-corridor .jobs__side { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .has-corridor .jobs__head { padding: 0 calc(var(--pad) - 12px); }
  .has-corridor .jobs__list { width: auto; }
  .has-corridor .jobs__list > li { display: none; }
  .has-corridor .jobs__list > li:has(.is-current) { display: block; }
  .has-corridor .jobs__item {
    padding: 16px 18px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .has-corridor .jobs__item::after {
    content: "\2192"; grid-column: 2; justify-self: end; margin-top: -1.6em; color: var(--accent); font-size: 18px;
  }
  body:not(.has-corridor) .jobs__item { grid-template-columns: 96px 1fr; }
  body:not(.has-corridor) .jobs__num { display: none; }
  body:not(.has-corridor) .jobs__thumb { width: 96px; height: 72px; }
}

/* ── job detail: text panel on the left, the job's pane framed in the stage beside it ──────────── */
.job__panel { width: min(720px, 50%); }
.job__back { align-self: start; margin: 0 0 22px; font-size: 13px; color: var(--muted); text-decoration: none; }
.job__back:hover { color: var(--text); }
.label {
  margin: 0 0 12px; font: 600 12px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.job__scope { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.job__scope li { position: relative; padding-left: 22px; }
.job__scope li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--accent); }
.tags { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags a {
  display: inline-block; padding: 9px 13px 8px; font-size: 13px; text-decoration: none;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background .2s;
}
.tags a:hover { background: color-mix(in oklab, var(--moss) 70%, transparent); }
.job__photos { display: grid; gap: 10px; margin-bottom: 32px; }
.job__photos figure { margin: 0; }
.job__photos img { display: block; width: 100%; height: auto; }
.job__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; margin-bottom: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
}
.job__cta p { margin: 0; font-size: 17px; }
.job__next {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 22px 0 6px;
  text-decoration: none; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.05;
}
.job__next span:first-child { grid-column: 1 / -1; font: 600 12px/1 var(--font-body); letter-spacing: .2em; color: var(--muted); }
.job__next .btn__arrow { color: var(--accent); }
.job__next:hover .btn__arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .job__panel { width: 100%; }
}

/* before / after slider (job pages): the before photo is clipped to the handle at --ba */
.ba { position: relative; margin: 0; overflow: hidden; user-select: none; background: var(--moss); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: var(--accent);
  pointer-events: none;
}
.ba__line b {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 44px; height: 44px; font: 700 15px/1 var(--font-body); letter-spacing: .1em;
  color: var(--ink); background: var(--accent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.ba__tag {
  position: absolute; top: 12px; left: 12px; padding: 7px 10px 6px; pointer-events: none;
  font: 600 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: calc(min(1, var(--ba-n, .5) * 4));
}
.ba__tag--after { left: auto; right: 12px; opacity: calc(min(1, (1 - var(--ba-n, .5)) * 4)); }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  touch-action: pan-y; /* vertical swipes still scroll the panel */
}
.ba__range:focus-visible + * , .ba:has(.ba__range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── services: the ring index reuses the jobs layout; rows are one line, the current one shows its tagline ── */
.services__list { gap: 0; }
.has-corridor .services__item { padding: 9px 14px; }
.has-corridor .services__item .jobs__meta { display: none; }
.has-corridor .services__item.is-current .jobs__meta { display: block; }
/* with the title stage the eight rows are a slim index, so the title keeps room even on 720px-tall laptops */
@media (min-width: 761px) {
  .has-titles.services .services__item { padding: 6px 14px; }
  .has-titles.services .jobs__side { width: min(520px, 40%); }
  .has-titles.services .jobs__list { padding-top: 16px; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .has-titles.services .services__item { padding: 4px 14px; }
  .has-titles.services .services__item .jobs__name { font-size: 13px; }
}
@media (max-width: 760px) {
  .has-corridor .services__item { padding: 16px 18px; }
}

/* ── service detail: text panel left, the service's footage framed on the stage beside it ─────────────
   The figure is the picture without WebGL. With the stage running it disappears on desktop; on phones it becomes
   an empty window onto the stage (height = PHONE_WINDOW in scenes/services.js) that the text scrolls up over. */
.service__window { margin: 0 0 28px; }
.service__window img { display: block; width: 100%; height: auto; }
.has-gl .service__window { display: none; }
.steps { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 2px; counter-reset: step; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; padding: 16px 18px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
}
.steps li::before {
  content: counter(step, decimal-leading-zero); grid-row: span 2; color: var(--accent);
  font: 600 12px/1.6 var(--font-body); letter-spacing: .14em;
}
.steps b { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 15px; line-height: 1.3; }
.steps span { color: color-mix(in oklab, var(--text) 80%, transparent); font-size: 15px; }
.service__detail { margin: 0 0 32px; }
.service__detail img { display: block; width: 100%; height: auto; }
.service__jobs { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.service__jobs a { display: grid; gap: 4px; text-decoration: none; }
.service__jobs img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; margin-bottom: 6px; transition: opacity .2s; }
.service__jobs a:hover img { opacity: .85; }
.service__jobs span { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 13px; line-height: 1.2; }
.service__jobs small { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .has-gl .service__panel {
    background: linear-gradient(180deg, transparent 0, transparent calc(var(--win) - 1px),
      color-mix(in oklab, var(--ink) 92%, transparent) var(--win), color-mix(in oklab, var(--ink) 82%, transparent) 100%) local;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    --win: calc((100svh - var(--header-h) - var(--sticky, var(--gap))) * .42); /* stage height × PHONE_WINDOW */
  }
  .has-gl .service__window { display: block; order: -1; flex: none; height: calc(var(--win) - var(--pad) - var(--cut) * .5); margin: 0 0 var(--pad); }
  .has-gl .service__window img { display: none; }
  .service__jobs { grid-template-columns: 1fr 1fr; }
}

/* ── blog: index cards and articles, in the job-page panel over the parked, dimmed home scene ─────────── */
.post-cards { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.post-card {
  display: grid; gap: 8px; padding: 14px 14px 18px; text-decoration: none;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s;
}
.post-card:hover { background: color-mix(in oklab, var(--moss) 70%, transparent); }
.post-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; margin-bottom: 6px; }
.post-card__meta { font: 600 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post-card__title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.08; text-wrap: balance;
}
.post-card__desc { color: color-mix(in oklab, var(--text) 80%, transparent); font-size: 15px; }
.post-card__more { display: inline-flex; gap: 10px; align-items: center; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.post-card:hover .btn__arrow { transform: translateX(4px); }
.page__foot a { color: var(--muted); }
.page__foot a:hover { color: var(--text); }

.post__title { font-size: clamp(28px, 3.4vw, 52px); text-wrap: balance; }
.post__hero { margin: 0 0 28px; }
.post__hero img { display: block; width: 100%; height: auto; }
.post__toc { margin: 0 0 30px; padding: 18px 20px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.post__toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 15px; }
.post__toc a { text-decoration: none; color: color-mix(in oklab, var(--text) 85%, transparent); }
.post__toc a:hover { color: var(--accent); }
.post__toc li::marker { color: var(--accent); font-size: 13px; }
.post__updated { margin: -12px 0 30px; font-size: 13px; color: var(--muted); }

/* article body: the panel's measure, a quieter body size, accent rules */
.prose { margin: 0 0 36px; font-size: 17px; line-height: 1.7; color: color-mix(in oklab, var(--text) 90%, transparent); }
.prose > * { margin: 0 0 18px; }
.prose h2, .prose h3 {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; color: var(--text); line-height: 1.1; scroll-margin-top: 24px;
}
.prose h2 { margin: 40px 0 16px; font-size: clamp(20px, 1.8vw, 26px); }
.prose h3 { margin: 30px 0 12px; font-size: 16px; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 2px; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 32px; counter-increment: n; }
.prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 600 12px/1.6 var(--font-body); letter-spacing: .1em; color: var(--accent); }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); color: var(--text); }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.prose figure { margin: 28px 0; }
.prose img { display: block; max-width: 100%; height: auto; }
.prose figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.prose code { font-size: .9em; padding: 1px 5px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.prose__table { overflow-x: auto; margin: 24px 0 26px; box-shadow: inset 0 0 0 1px var(--line); background: var(--glass); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { font: 600 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: var(--text); font-weight: 600; }
.post-links { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 2px; }
.post-links a {
  display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; text-decoration: none;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; transition: background .2s;
}
.post-links a:hover { background: color-mix(in oklab, var(--moss) 70%, transparent); }
.post-links .btn__arrow { color: var(--accent); }
@media (max-width: 760px) {
  .prose { font-size: 16px; }
  .prose th, .prose td { padding: 10px 11px; }
}

/* ── about ───────────────────────────────────────────────────────────────────────────────────────── */
.about__h {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.02; text-wrap: balance;
}
.about__lede { margin: 0 0 22px; color: color-mix(in oklab, var(--text) 80%, transparent); max-width: 34em; }
.about__story { margin: 0 0 30px; display: grid; gap: 14px; font-size: 17px; line-height: 1.7; color: color-mix(in oklab, var(--text) 88%, transparent); }
.about__story p { margin: 0; }
.stats { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.stats li { display: grid; gap: 8px; align-content: start; padding: 18px 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.stats__num {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stats__label { font-size: 13px; line-height: 1.35; color: var(--muted); }
.badges { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.badge {
  display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.badge__icon { grid-row: span 2; width: 30px; height: 30px; color: var(--accent); }
.badge__title { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 14px; }
.badge__detail { font-size: 13px; color: var(--muted); }
.crew { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.crew__card { display: grid; gap: 4px; align-content: start; padding: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.crew__mono, .crew__photo { width: 56px; height: 56px; margin-bottom: 10px; object-fit: cover; }
.crew__mono {
  display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 14%, var(--moss)); color: var(--accent);
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: 18px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.crew__name { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 15px; }
.crew__role { font: 600 11px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.crew__bio { margin-top: 6px; font-size: 14px; color: color-mix(in oklab, var(--text) 78%, transparent); }
.area { margin: 0 0 14px; padding: 10px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: var(--accent); }
.area__map { display: block; width: 100%; height: auto; overflow: visible; }
.area__ring { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 6; }
.area__river { fill: none; stroke: color-mix(in oklab, #6fa7c9 70%, var(--text)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.area__river-label { fill: color-mix(in oklab, #6fa7c9 70%, var(--text)); opacity: .7; font: italic 500 12px var(--font-body); }
.area__town circle { fill: var(--text); }
.area__town text { fill: color-mix(in oklab, var(--text) 82%, transparent); font: 500 13px var(--font-body); }
.area__town--hq circle { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.area__town--hq text { fill: var(--accent); font-weight: 700; }
.area__scale { fill: var(--accent); font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.area__list { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.area__list li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); vertical-align: middle; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .badges, .crew { grid-template-columns: 1fr; }
  .area__town text { font-size: 17px; }
  .area__river-label { font-size: 15px; }
}

/* ── quote: a wider, lighter panel so the glass packages pick up the stage behind them ───────────────── */
.quote__panel {
  width: min(1040px, 100%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 74%, transparent), color-mix(in oklab, var(--ink) 52%, transparent));
}
.quote__panel > .page__intro, .qform-wrap { max-width: 720px; }
.packages { margin: 8px 0 48px; }
.packages__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.pkg {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 22px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--text) 9%, transparent), color-mix(in oklab, var(--text) 2%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 16%, transparent), inset 0 1px 0 color-mix(in oklab, var(--text) 22%, transparent);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.pkg--featured {
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 18%, transparent), color-mix(in oklab, var(--accent) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent), inset 0 1px 0 color-mix(in oklab, var(--accent) 60%, transparent);
}
.pkg__badge {
  align-self: start; padding: 6px 9px 5px; margin-bottom: 2px; background: var(--accent); color: var(--ink);
  font: 700 10px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
}
.pkg__name { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 19px; }
.pkg__price { margin: 0; color: var(--muted); font-size: 14px; }
.pkg__price b { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: 36px; line-height: 1; color: var(--text); }
.pkg--featured .pkg__price b { color: var(--accent); }
.pkg__summary { margin: 0; font-size: 15px; color: color-mix(in oklab, var(--text) 85%, transparent); }
.pkg__features { list-style: none; margin: 4px 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.pkg__features li { position: relative; padding-left: 20px; }
.pkg__features li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 5px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.pkg__cta { margin-top: auto; justify-content: center; }
.packages__note { margin: 0; font-size: 13px; color: var(--muted); }

.qform-wrap { margin: 0 0 36px; scroll-margin-top: 20px; }
.qform { display: grid; gap: 16px; }
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qform__field { display: grid; gap: 7px; }
.qform__field > span, .qform__set legend { font: 600 12px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.qform__req { color: var(--accent); text-decoration: none; }
.qform input:not([type="checkbox"], [type="radio"]), .qform select, .qform textarea, .est select {
  width: 100%; padding: 13px 14px; font: 400 16px/1.4 var(--font-body); color: var(--text);
  background: color-mix(in oklab, var(--ink) 55%, transparent); border: 1px solid var(--line); border-radius: 0;
  transition: border-color .2s, background .2s;
}
.qform select, .est select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(-45deg, transparent 50%, var(--accent) 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.qform select option, .est select option { background: var(--ink); }
.qform textarea { resize: vertical; min-height: 120px; }
.qform input:focus, .qform select:focus, .qform textarea:focus, .est select:focus { outline: none; border-color: var(--accent); background: color-mix(in oklab, var(--ink) 75%, transparent); }
.qform input:user-invalid, .qform textarea:user-invalid { border-color: #e2836b; }
.qform ::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
.qform__file input { padding: 10px; font-size: 14px; }
.qform__file input::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; background: var(--moss); color: var(--text); font: 600 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.qform__file small { color: var(--muted); font-size: 13px; }
.qform__set { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.qform__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qform__radios { display: flex; flex-wrap: wrap; gap: 6px; }
.qform__check { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: 15px; background: color-mix(in oklab, var(--ink) 45%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.qform__check input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.qform__check:has(input:checked) { background: color-mix(in oklab, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent); }
.qform__check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.qform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.qform__submit { justify-self: start; }
.qform__submit:disabled { opacity: .6; cursor: progress; }
.qform__status:empty { display: none; }
.qform__status { outline: none; }
.qform__error { display: grid; gap: 8px; justify-items: start; padding: 18px 20px; border-left: 2px solid #e2836b; background: color-mix(in oklab, #e2836b 10%, transparent); }
.qform__error p { margin: 0 0 6px; }
.qform__done { padding: 26px 24px; background: color-mix(in oklab, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); outline: none; }
.qform__done h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 22px; color: var(--accent); }
.qform__done p { margin: 0; }
.qform__note { margin-top: 10px !important; font-size: 14px; color: var(--muted); }
.quote__panel .page__contact { max-width: 720px; }
.quote__panel .page__contact .label { margin-bottom: 2px; }
@media (max-width: 900px) {
  .packages__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .qform__row, .qform__checks { grid-template-columns: 1fr; }
  .qform__submit { justify-self: stretch; justify-content: center; }
}

/* ── sticky quote button (phones, every page). The stage + view stop above it, so it never covers content.
   On the quote pages it becomes "Call us". ─────────────────────────────────────────────────────────── */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  :root { --sticky: 64px; }
  .sticky-cta {
    display: flex; position: fixed; left: var(--gap); right: var(--gap); bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px)); z-index: 15;
    height: calc(var(--sticky) - var(--gap) * 2 + 2px);
  }
  .sticky-cta .btn { flex: 1; justify-content: center; font-size: 14px; }
  .sticky-cta__call, [data-page^="quote"] .sticky-cta__quote { display: none; }
  [data-page^="quote"] .sticky-cta__call { display: inline-flex; }
  .stage, .view { bottom: calc(var(--sticky) + env(safe-area-inset-bottom, 0px)); }
  .is-loading .sticky-cta, .menu-open .sticky-cta { visibility: hidden; }
}

/* ── jobs title stage (src/titles.js): the active job's title takes the heading's place, letter by letter ───── */
.has-titles .jobs__head { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; max-width: none; }
.has-titles .titles { position: relative; flex: 1 1 auto; min-height: 7.5em; }
.has-titles .titles > h1, .has-titles .titles > .page__intro {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.has-titles.jobs .jobs__side { overflow: visible; } /* letters fly past the column; the column no longer scrolls */
.titles__stage, .titles__fx { position: absolute; inset: 0; }
.titles__fx { pointer-events: none; }
.titles__grain { position: absolute; pointer-events: none; }
.titles__layer, .titles__text {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; line-height: .96; letter-spacing: normal;
}
.titles__layer { position: absolute; inset: 0; }
.titles__layer[hidden] { display: none; }
.titles__layer > span { position: absolute; display: block; white-space: pre; will-change: transform, opacity; }
.titles__meta {
  position: absolute; left: 0; right: 0; margin: 0; max-width: 30em;
  font: 400 clamp(14px, 1.15vw, 17px)/1.45 var(--font-body); text-transform: none; color: color-mix(in oklab, var(--text) 82%, transparent);
}
.titles__measure { position: absolute !important; top: 0 !important; left: 0; visibility: hidden; }
.titles__measure .w { display: inline-block; white-space: nowrap; }
/* the list under it is a slim index: one line per job, the active one lit */
.has-titles .jobs__item { padding: 9px 14px; }
.has-titles .jobs__item .jobs__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-titles .jobs__item .jobs__meta, .has-titles .services__item.is-current .jobs__meta, .jobs__open { display: none; }
@media (max-width: 760px) {
  .has-titles .titles { min-height: 9em; }
  .has-titles .titles__meta { font-size: 14px; }
  /* phones: the card under the corridor just opens the job — the title stage already names it */
  .has-titles .jobs__item { grid-template-columns: 40px 1fr; align-items: center; padding: 15px 18px; }
  .has-titles .jobs__item .jobs__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .has-titles .jobs__open { display: block; font: 600 13px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
  .has-titles .jobs__num { grid-row: 1; grid-column: 1; }
  .has-titles .jobs__open { grid-row: 1; grid-column: 2; }
  .has-titles.jobs .jobs__item::after { margin-top: 0; grid-column: 2; grid-row: 1; }
}

/* ── Home's guided scroll (app.js createStory). Without JS/WebGL the chapters are a normal scrolling page. ───── */
.home.story:not(.has-story) { pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; }
.home.story:not(.has-story) .ch { position: relative; min-height: 100%; }
.home.story:not(.has-story) .ch:not(.ch--hero) { padding: calc(var(--pad) + var(--cut) * .4) var(--pad) var(--pad); background: color-mix(in oklab, var(--ink) 80%, transparent); }
.home.story:not(.has-story) .ch__panel { position: static; width: auto; max-width: 1040px; }
.ch--hero { position: absolute; inset: 0; }
.has-story .ch { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.has-story .ch.is-active { opacity: 1; }
.has-story .ch:not(.is-active) * { pointer-events: none !important; }
.ch__title {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; font-size: clamp(30px, 4vw, 60px); line-height: .96; text-wrap: balance;
}
.ch__col { position: absolute; left: var(--pad); top: calc(var(--pad) + var(--cut) * .4); width: min(520px, 42%); }
.ch__col .page__intro { margin-bottom: 22px; }
.has-story .ch.is-active .ch__col > *, .has-story .ch.is-active li { animation: rise .8s var(--ease-out) .18s both; }
.has-story .ch.is-active li { animation-delay: calc(.3s + var(--i, 0) * .08s); }
.home.story:not(.has-story) .ch__col { position: static; width: auto; max-width: 720px; }

/* services: the ring turns on the right; the list follows it */
.story__svcs { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.story__svc {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; text-decoration: none; font-size: 14px; color: var(--muted);
  border-left: 2px solid transparent; transition: color .25s, background .25s, border-color .25s;
}
.story__svc .jobs__num { font-size: 11px; }
.story__svc:hover, .story__svc.is-current { color: var(--text); background: var(--glass); border-left-color: var(--accent); }
.story__svc.is-current .jobs__num { color: var(--accent); }

/* featured jobs: three cards along the bottom */
.story__jobs { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home.story:not(.has-story) .story__jobs { position: static; margin: 24px 0; }
.story__job { display: grid; gap: 6px; padding: 10px 10px 14px; text-decoration: none; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s; }
.story__job:hover { background: color-mix(in oklab, var(--moss) 70%, transparent); }
.story__job img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 4px; }
.story__job-title { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 15px; line-height: 1.15; }
.story__job-meta { font-size: 13px; color: var(--muted); }
.story__more { position: absolute; left: var(--pad); bottom: var(--pad); }
.home.story:not(.has-story) .story__more { position: static; }

/* trust: reviews + proof strip */
.story__reviews { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--pad); right: var(--pad); top: 46%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home.story:not(.has-story) .story__reviews { position: static; transform: none; margin: 24px 0; }
.review { margin: 0; height: 100%; display: grid; gap: 12px; align-content: start; padding: 22px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.55; }
.review figcaption { font-size: 13px; color: var(--muted); }
.stars { color: var(--accent); letter-spacing: .12em; font-size: 15px; }
.story__proof { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.home.story:not(.has-story) .story__proof { position: static; }
.story__proof li { display: grid; gap: 4px; align-content: center; padding: 14px 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.story__proof b { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
.story__proof span { font-size: 12px; color: var(--muted); }
.story__badge { grid-template-columns: 30px 1fr; column-gap: 10px; }
.story__badge .badge__icon { grid-row: span 2; width: 26px; height: 26px; }
.story__badge b { font-size: 15px; color: var(--text); }

/* book a quote: the quote panel, scrolling on its own */
.ch__panel {
  position: absolute; left: 0; top: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  padding: calc(var(--pad) + var(--cut) * .5) var(--pad) var(--pad); display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
}
.ch__panel > .page__intro, .ch__panel > .est { max-width: 720px; }

@media (max-width: 760px) {
  .ch__col { left: var(--pad); right: var(--pad); width: auto; }
  .ch__title { font-size: 28px; }
  .ch--services .ch__col .page__intro, .ch--jobs .ch__col .page__intro { display: none; }
  .has-story .ch--services .story__svcs { position: absolute; left: 0; right: 0; bottom: 0; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; margin: 0; padding: 0 var(--pad) var(--pad); }
  .has-story .ch--services .ch__col { bottom: 0; }
  .has-story .ch--services .ch__col > .btn { position: absolute; top: 0; right: 0; padding: 10px 12px; font-size: 11px; }
  .story__svc { white-space: nowrap; background: var(--glass); }
  .story__jobs { grid-template-columns: 1fr; gap: 8px; bottom: calc(var(--pad) + 52px); }
  .story__job { grid-template-columns: 96px 1fr; column-gap: 12px; align-items: center; padding: 8px; }
  .story__job img { grid-row: span 2; margin: 0; aspect-ratio: 4 / 3; }
  .story__reviews { top: calc(var(--pad) + 96px); transform: none; grid-template-columns: 1fr; gap: 8px; }
  .review { padding: 14px 16px; gap: 6px; }
  .review blockquote { font-size: 14px; line-height: 1.45; }
  .story__proof { grid-template-columns: 1fr 1fr; }
  .story__proof li { padding: 10px 12px; }
  .story__proof b { font-size: 18px; }
  .ch__panel { width: 100%; border-right: 0; }
}

/* ── estimator ─────────────────────────────────────────────────────────────────────────────────────── */
.est { margin: 8px 0 44px; }
.est[hidden] { display: none; }
.est__grid { display: grid; gap: 16px; margin-bottom: 18px; }
.est__size legend output { margin-left: 8px; color: var(--accent); letter-spacing: .06em; }
.est__presets .qform__check span { display: grid; gap: 2px; }
.est__presets small { font-size: 12px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.est__range { width: 100%; margin: 6px 0 0; accent-color: var(--accent); height: 28px; }
.est__addons-set[hidden] { display: none; }
.est__result {
  display: grid; gap: 8px; justify-items: start; padding: 22px 24px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 16%, transparent), color-mix(in oklab, var(--accent) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.est__result .label { margin: 0; }
.est__range-out { margin: 0; color: var(--muted); font-size: 15px; }
.est__range-out b { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: clamp(28px, 3vw, 42px); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.est__note { margin: 0 0 6px; font-size: 14px; color: color-mix(in oklab, var(--text) 82%, transparent); }
.qform__estimate { display: grid; gap: 4px; padding: 14px 16px; background: color-mix(in oklab, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
.qform__estimate[hidden] { display: none; }
.qform__estimate .label { margin: 0; }
.qform__estimate p { margin: 0; font-size: 15px; }
.qform__estimate a { justify-self: start; font-size: 13px; color: var(--accent); }

/* footer: phone + email on every page (there's no Contact page) */
.page__reach { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.page__reach a { color: var(--text); text-decoration: none; }
.page__reach a:hover { color: var(--accent); }
/* jobs + trust chapters flow as one column (heading → content pushed to the bottom) so nothing can overlap */
.has-story .ch--jobs, .has-story .ch--trust { display: flex; flex-direction: column; gap: 14px; padding: calc(var(--pad) + var(--cut) * .4) var(--pad) var(--pad); }
.has-story .ch--jobs .ch__col, .has-story .ch--trust .ch__col { position: static; width: min(640px, 100%); flex: none; }
.has-story .story__jobs, .has-story .story__reviews, .has-story .story__proof, .has-story .story__more { position: static; transform: none; flex: none; }
.has-story .story__jobs, .has-story .story__reviews { margin-top: auto; }
.has-story .story__more { align-self: start; }
.has-story .story__job img { aspect-ratio: auto; height: clamp(84px, 26vh, 280px); }
@media (max-width: 760px) {
  .has-story .story__job img { height: 72px; }
  .has-story .ch--trust .ch__col .page__intro { display: none; }
}

/* services chapter: a narrower column + one-column list, so the ring's front pane has the right side to itself */
.has-story .ch--services .ch__col { width: min(420px, 33%); }
.has-story .ch--services .ch__title { font-size: clamp(28px, 3vw, 46px); }
.has-story .story__svcs { grid-template-columns: 1fr; }
.has-story .story__svc { padding: 7px 12px; }
@media (max-width: 760px) {
  .has-story .ch--services .ch__col { width: auto; }
  .has-story .ch--services .ch__col > .btn { display: none; } /* the chips are the index on phones; Services is in the menu */
  .has-story .story__badge span { display: none; }
  .has-story .story__badge { align-items: center; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .has-story .ch--services .ch__col .page__intro { display: none; }
  .has-story .story__svc { padding: 5px 12px; }
}
@media (max-width: 760px) {
  /* phones: no live blur behind the story cards over the moving 3D — a solid glass tint reads the same */
  .story__job, .review { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in oklab, var(--ink) 80%, transparent); }
}

/* ── location pages: FAQ accordion, the town on the area map ──────────────────────────────────────── */
.faq { margin: 8px 0 34px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 16px 2px; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; font-size: 15px; line-height: 1.25;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--accent); font: 600 20px/1 var(--font-body); transition: transform .25s var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item .prose { margin: 0 0 16px; font-size: 16px; }
.area__town--here circle { fill: var(--accent); r: 6.5; }
.area__town--here text { fill: var(--accent); font-weight: 700; }
.area__list a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.area__list a:hover { color: var(--text); }

/* ── chapter handoff ("Next: X" with a fill bar) and "← Previous" ─────────────────────────────────────────── */
.chapter-prev {
  align-self: start; display: inline-block; margin: 0 0 16px; font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.chapter-prev:hover { color: var(--text); }
.handoff {
  --fill: 0;
  display: grid; gap: 10px; margin: 6px 0 28px; padding: 18px 20px 16px; text-decoration: none; color: var(--text);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background .2s, box-shadow .2s;
}
.handoff:hover { background: color-mix(in oklab, var(--moss) 70%, transparent); }
.handoff__label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  text-transform: uppercase; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.1;
}
.handoff__label b { color: var(--accent); }
.handoff__label .btn__arrow { color: var(--accent); }
.handoff:hover .btn__arrow { transform: translateX(4px); }
.handoff__bar { position: relative; height: 3px; background: color-mix(in oklab, var(--text) 14%, transparent); overflow: hidden; }
.handoff__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--fill)); transform-origin: left; }
.handoff__hint { font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.handoff.is-armed .handoff__hint { color: var(--text); }
.handoff.is-filling { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); }
/* corridor / ring pages: floats bottom-right, appears on the last item */
.has-corridor .jobs .handoff {
  position: absolute; right: var(--pad); bottom: var(--pad); width: min(340px, 34%); margin: 0; pointer-events: auto;
  opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), visibility 0s .4s;
}
.has-corridor .jobs .handoff.is-at { opacity: 1; transform: none; visibility: visible; transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.has-corridor .jobs:has(.handoff.is-at) .jobs__hint { opacity: 0; transition: opacity .3s; }
body:not(.has-corridor) .jobs .handoff { margin-top: 24px; max-width: 720px; }
@media (max-width: 760px) {
  .has-corridor .jobs .handoff { left: 12px; right: 12px; width: auto; bottom: 92px; }
  .has-corridor .jobs .handoff.is-at ~ * {}
}
/* reduced motion: page changes are a short fade, not an instant cut */
@media (prefers-reduced-motion: reduce) {
  .view { transition: opacity .2s linear !important; }
}