/* Halvern Architecture & Build · SIGNATURE tier ($1,500), construction vertical.
   The same brand and the same building blocks as the Essential site (essential/construction/css/halvern.css):
   the HALVERN wordmark, Inter Tight + Geist Mono, warm grey / paper / ink, one 2px corner radius.
   What Signature adds, and nothing more (no WebGL, no video, no canvas: that is Immersive):
   a layered parallax hero with a line drawing that draws itself in, scroll reveals and counters,
   a scroll-driven timeline, a review slider, a filterable gallery with a photo viewer, an FAQ
   accordion, a quote request form, a custom cursor and a reading-progress bar with an active nav.
   Copy source: signature/construction/CONTENT.md (and essential/construction/CONTENT.md). */

:root {
  --paper: #f3f0ea;
  --card: #f9f7f3;
  --tint: #e8e4dc;            /* muted text on it 5.5:1 */
  --bone: #eeebe5;
  --ink: #1b1a17;
  --ink-2: #2c2a26;
  --muted: #5e594f;           /* body copy on paper 6.1:1 */
  --stone: #8f887d;           /* never for text on paper (3.1:1): rules and decoration only */
  --char: #26241f;
  --char-2: #1f1d19;
  --on-dark: rgba(238, 235, 229, .8);
  --line: rgba(27, 26, 23, .14);
  --line-strong: rgba(27, 26, 23, .3);
  --go: #56703f;
  --soon: #a8742a;
  --bad: #9b3b2a;             /* errors: 6.4:1 on paper */
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r: 2px;
  --gut: clamp(20px, 5vw, 48px);
  --head-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
p, h1, h2, h3, figure, ul, ol, dl, dd, blockquote, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r); }
.dark :focus-visible, .reviews :focus-visible, .site-footer :focus-visible, .lb :focus-visible { outline-color: var(--bone); }

h1, h2, h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--r);
  font-size: 14px; text-decoration: none; transition: top .2s ease;
}
.skip:focus { top: 12px; }

.eyebrow {
  display: flex; align-items: flex-start; gap: 12px;
  font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; margin-top: .62em; background: currentColor; opacity: .55; }
/* the eyebrow's rule draws itself in when its section comes into view */
html.js .reveal .eyebrow::before, html.js .eyebrow.reveal::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) .15s; }
html.js .reveal.in .eyebrow::before, html.js .eyebrow.reveal.in::before { transform: none; }

.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; }

/* ---------- buttons, with small hover moves (the arrow nudges, the ghost button fills from the left) ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: var(--r);
  border: 1px solid var(--ink); background: none; cursor: pointer;
  font: 500 15px/1.2 var(--sans); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; color: var(--ink);
  transition: background-color .25s ease, color .3s ease, border-color .25s ease, transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn .arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-fill { background: var(--ink); color: var(--bone); }
.btn-fill:hover { background: #000; border-color: #000; }
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease);
}
.btn-ghost:hover { color: var(--bone); }
.btn-ghost:hover::before { transform: none; }
.btn-light { border-color: rgba(238, 235, 229, .5); color: var(--bone); }
.btn-light:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.text-link {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding: 22px 0 4px; min-height: 44px;
}
/* the underline darkens from the left on hover */
.text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.text-link:hover::after { transform: none; }
.text-link .arr { display: inline-block; transition: transform .3s var(--ease); }
.text-link:hover .arr { transform: translateX(3px); }
.text-link.route:hover .arr { transform: translate(2px, -2px); }

/* ---------- header + reading progress ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(243, 240, 234, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; gap: 12px; min-height: var(--head-h); }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font: 600 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap; margin-right: auto;
  padding: 11px 0;
}
.brand svg { flex: none; width: 22px; height: 22px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  position: relative;
  font: 500 14.5px/1 var(--sans); letter-spacing: -.005em;
  color: var(--ink); text-decoration: none; padding: 15px 0; white-space: nowrap;
  min-width: 44px; text-align: center;
}
/* the section you are reading is underlined in the nav (home); the page you are on as well */
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current]::after { transform: none; }
.nav .btn { margin-left: 4px; }
.nav-cta[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--stone); }

.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

.lang { display: flex; gap: 2px; margin-left: 14px; }
.lang button {
  font: 500 11.5px/1 var(--mono); letter-spacing: .08em;
  color: var(--muted); background: none; border: 0; border-radius: var(--r);
  min-width: 44px; min-height: 44px; padding: 0 8px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--tint); color: var(--ink); }
.lang--menu, .head-cta { display: none; }
.head-cta { min-height: 44px; padding: 0 16px; font-size: 14px; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0 11px; margin-right: -11px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .25s ease; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- live open / closed status ---------- */
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.status i {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--stone); box-shadow: 0 0 0 4px rgba(143, 136, 125, .2);
}
.status[data-state="open"] i { background: var(--go); box-shadow: 0 0 0 4px rgba(86, 112, 63, .18); animation: breathe 2.6s ease-in-out infinite; }
.status[data-state="closing"] i { background: var(--soon); box-shadow: 0 0 0 4px rgba(168, 116, 42, .2); }
.status .tz { color: var(--muted); font-size: 12.5px; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(86, 112, 63, .08); } }

/* =====================================================================================
   HERO: the photo and the line drawing traced over it are ONE layer (.hero-art), so the tracing
   always sits on the house; the two sheet labels float a little on their own, the copy moves the
   other way. On load every line draws itself in ink on bare paper (about 1 s); then the photo
   arrives, the lines on it turn from ink to paper and "Drawn" becomes "Built" (js: .built).
   Wide screens: the photo is a crisp sheet that starts at the corner of the grey wing (x 928 of
   2000) and runs to the right edge; left of that seam the wing stays a drawing in ink on the paper,
   and the dimension line runs on from the paper under the photo.
   ===================================================================================== */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-stage { position: relative; }
.hero-art { position: absolute; inset: 0; will-change: transform; }
.hero-plate { position: absolute; inset: 0; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; background: var(--tint); }
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl path { fill: none; stroke: url(#hl-full); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hl .hl-w, .hl .hl-dim { stroke-width: 1.8; }
.hl .hl-mark { display: none; }
.st-ink { stop-color: var(--ink); }
.st-flip { stop-color: var(--paper); }

/* the two small sheet labels on the drawing (decorative) */
.hs {
  position: absolute; z-index: 2; white-space: nowrap;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: rgba(243, 240, 234, .92); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 6px 8px 5px;
}
.hs-state { transform: translate(-50%, -50%); }
.hs-word { display: inline-block; }
.hs-word.flip { animation: flip .5s var(--ease); }
@keyframes flip { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-copy { position: relative; z-index: 3; will-change: transform; }
.hero h1 {
  font-size: clamp(48px, 6.1vw, 92px); line-height: .95; letter-spacing: -.047em;
  margin: 22px 0 26px; max-width: 8.4em;
}
.lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; color: var(--muted); max-width: 44ch; }
.hero .lead { margin-bottom: 34px; }
.hero-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-addr { font-size: 14.5px; color: var(--muted); }
.scroll-cue { display: none; }

/* the load sequence. html.motion is set in the page head (no reduced motion), so the first paint is
   already "bare paper": every line draws in ink, finished in about a second; the photo waits for js
   to add .built (photo decoded and the lines done), then fades in while the lines on it turn to paper.
   If the script never runs, the late animations below show the photo and the paper lines anyway. */
html.motion .hero .hl path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .42s var(--ease) forwards; animation-delay: calc(.1s + var(--i) * .03s); }
html.motion .hero .st-flip { transition: stop-color 1s ease; }
html.motion .hero:not(.built) .st-flip { stop-color: var(--ink); animation: to-paper .6s ease 5s forwards; }
html.motion .hero .hero-photo { transition: opacity 1s ease, transform 1.8s var(--ease); }
html.motion .hero:not(.built) .hero-photo { opacity: 0; transform: scale(1.03); animation: settle .9s ease 5s forwards; }
html.motion .hero .hs { animation: fadein .6s ease .3s both; }
html.motion .hero .hero-copy > * { animation: rise .9s var(--ease) both; }
html.motion .hero .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.motion .hero .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.motion .hero .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.motion .hero .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes to-paper { to { stop-color: var(--paper); } }
@keyframes settle { to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (min-width: 1101px) {
  /* the hero fills the screen (no cap), so the photo always ends where the screen ends */
  .hero { display: flex; align-items: center; min-height: max(600px, calc(100svh - var(--head-h))); }
  .hero-stage { position: absolute; inset: 0; }
  /* The house fills the room between the copy (max 520px wide, in the 1240px column) and 3% from the
     right edge: --pw is the plate width that puts the house (x 26%–90.5% of the photo) exactly there. */
  .hero-plate {
    --pw: min(calc(150.9vw - 921px), calc(73.1vw + 44px));
    inset: auto; width: var(--pw); aspect-ratio: 1.6; bottom: 0; right: calc(3vw - var(--pw) * .095);
  }
  /* the photo sheet: a crisp edge at the corner of the grey wing, nothing faded */
  .hero-photo-plate { clip-path: inset(0 0 0 46.4%); }
  .hl path { stroke: url(#hl-wide); stroke-width: 1.9; }
  .hl .hl-w, .hl .hl-dim { stroke-width: 1.6; }
  .hl .hl-mark { display: inline; stroke: var(--ink); stroke-width: 1.4; }
  .hs-sheet { left: 25.5%; top: 41%; }
  .hs-state { left: 46.4%; top: 92%; }
  .hero-wrap { width: 100%; }
  .hero-copy { max-width: 520px; padding: clamp(36px, 6vh, 72px) 0 clamp(56px, 9vh, 96px); }
  .scroll-cue {
    display: flex; align-items: center; gap: 12px; position: absolute; z-index: 3; bottom: 22px;
    left: calc(max(0px, (100% - 1240px) / 2) + var(--gut));
    font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .sc-line { position: relative; width: 1px; height: 34px; background: var(--line); overflow: hidden; }
  .sc-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: var(--ink); animation: cue 2.2s var(--ease) infinite; }
  @keyframes cue { from { transform: translateY(-12px); } to { transform: translateY(34px); } }
}

/* tablets and phones: the photo first, full width, then the copy on paper below it. The picture and
   the drawing are anchored at the bottom (object-position and xMidYMax), so the dimension line under
   the house always shows; the "Drawn / Built" label sits on it (5vw = 100 of 2000 drawing units). */
@media (max-width: 1100px) {
  .hero-stage { height: clamp(300px, 56vw, 560px); overflow: hidden; }
  .hero-photo { object-position: 50% 100%; }
  .hs-sheet { left: var(--gut); top: 14px; }
  .hs-state { left: 52%; top: auto; bottom: 5vw; transform: translate(-50%, 50%); }
  .hero-copy { padding: 30px 0 64px; }
  .hero h1 { max-width: 11em; }
}

/* ---------- sections ---------- */
.pad { padding: clamp(72px, 9vw, 128px) 0; }
.tint { background: var(--tint); }
.section-head { max-width: 680px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head h2, .split-copy h2, .area-copy h2, .faq-side h2, .rv-head h2 { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -.04em; line-height: 1; margin: 18px 0 20px; }
.section-head p:not(.eyebrow) { color: var(--muted); max-width: 56ch; }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.section-head--row h2 { margin-bottom: 0; max-width: 15em; }

/* intro + counters */
.intro { padding-top: clamp(56px, 7vw, 104px); }
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 7vw, 120px); align-items: end;
}
.statement { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.042em; margin-bottom: 30px; max-width: 15ch; }
.intro-copy p { color: var(--muted); font-size: 18px; max-width: 54ch; }
.intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--tint); }

.counters-block { margin-top: clamp(56px, 7vw, 96px); }
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--line-strong); }
.counter { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 4px 0; }
.counter + .counter { padding-left: 24px; border-left: 1px solid var(--line); }
.c-num { font: 300 clamp(56px, 6.4vw, 92px)/.9 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.c-label { font: 400 12.5px/1.45 var(--mono); letter-spacing: .04em; color: var(--muted); max-width: 22ch; }

/* three services */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { background: var(--card); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27, 26, 23, .1); }
.card-media { overflow: hidden; background: var(--bone); }
.card-photo { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card-photo { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.card h3 { font-size: 28px; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 12px; }
.card-text { font-size: 15.5px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.card-price {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.45; color: var(--ink);
}
.card-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; margin-top: 16px; padding: 12px 0 0; border-top: 1px dashed var(--line-strong);
  font: 500 12px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.card-link .arr { transition: transform .3s var(--ease); }
.card-link:hover .lbl { text-decoration: underline; text-underline-offset: 4px; }
.card-link:hover .arr { transform: translateX(4px); }
.cards-note { margin-top: clamp(22px, 3vw, 34px); max-width: 64ch; color: var(--muted); font-size: 15.5px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .cards { grid-template-rows: auto auto 1fr auto auto; row-gap: 0; }
    .card { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
    .card-body { display: contents; }
    .card h3 { padding: 24px var(--cp, 26px) 0; }
    .card-text { padding: 0 var(--cp, 26px); }
    .card-price { margin: 0 var(--cp, 26px); }
    .card-link { margin: 16px var(--cp, 26px) 18px; }
  }
}

/* ---------- how we work: the timeline ---------- */
.dark { background: var(--char); color: var(--bone); }
.dark .eyebrow { color: rgba(238, 235, 229, .72); }
.dark .section-head p:not(.eyebrow) { color: var(--on-dark); }
.tl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.tl-media { position: sticky; top: calc(var(--head-h) + 32px); }
.tl-frame { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--head-h) - 72px); border-radius: var(--r); overflow: hidden; background: #3a372f; }
.tl-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--ease); }
.tl-pic.on { opacity: 1; transform: none; }
.tl-sheet {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--ink);
  background: rgba(243, 240, 234, .92); border-radius: var(--r); padding: 7px 9px 6px;
}
.tl-col { position: relative; padding-left: 44px; }
.tl-track { position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: rgba(238, 235, 229, .18); }
.tl-fill { position: absolute; inset: 0; background: var(--bone); transform-origin: 50% 0; transform: scaleY(0); }
.tl-step { position: relative; padding: 0 0 clamp(64px, 14vh, 150px); }
.tl-step:last-child { padding-bottom: 8px; }
.tl-step::before {
  content: ""; position: absolute; left: -44px; top: 9px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--char); border: 1px solid rgba(238, 235, 229, .4); transition: background-color .4s ease, border-color .4s ease, transform .4s var(--ease);
}
.tl-step.on::before { background: var(--bone); border-color: var(--bone); transform: scale(1.1); }
.tl-step h3 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -.035em; line-height: 1.08; transition: color .4s ease; color: rgba(238, 235, 229, .62); }
.tl-step.on h3 { color: var(--bone); }
.tl-no { flex: none; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: rgba(238, 235, 229, .66); }
.tl-chip {
  display: inline-block; margin: 16px 0 14px; padding: 6px 9px 5px; border: 1px solid rgba(238, 235, 229, .32); border-radius: var(--r);
  font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
}
.tl-text { color: var(--on-dark); font-size: 16px; max-width: 54ch; transition: opacity .4s ease; }
.tl-step:not(.on) .tl-text { opacity: .72; }
.tl-pic-m { display: none; }
/* reduced motion: nothing moves, every step is lit, each photo sits with its own step */
.tl--static .tl-media { display: none; }
.tl--static { grid-template-columns: 1fr; }
.tl--static .tl-step { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; align-items: start; padding-bottom: 56px; }
.tl--static .tl-pic-m { display: block; grid-row: span 3; }
.tl--static .tl-pic-m img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.tl--static .tl-step h3, .tl--static .tl-chip, .tl--static .tl-text { grid-column: 2; justify-self: start; }

/* ---------- work teaser + gallery tiles ---------- */
.teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tile-img, .g-open { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--tint); }
.tile-img img, .g-open img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s ease; }
.tile:hover .tile-img img, .g-open:hover img { transform: scale(1.045); }
/* a thin frame that closes in on hover, like the corner ticks of a drawing sheet */
.tile-img::after, .g-open::after {
  content: ""; position: absolute; inset: 12px; border: 1px solid rgba(243, 240, 234, .0); border-radius: 1px;
  transition: inset .5s var(--ease), border-color .5s ease; pointer-events: none;
}
.tile:hover .tile-img::after, .g-open:hover::after, .g-open:focus-visible::after { inset: 16px; border-color: rgba(243, 240, 234, .75); }
.g-tag { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 9px; }
.g-title { display: block; font: 500 23px/1.15 var(--sans); letter-spacing: -.025em; }
.g-text { display: block; color: var(--muted); font-size: 15.5px; margin-top: 8px; max-width: 46ch; }
.tile:hover .g-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- demo reviews ---------- */
.reviews { background: var(--char-2); color: var(--bone); }
.reviews .eyebrow { color: rgba(238, 235, 229, .72); }
.rv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.rv-head h2 { margin-bottom: 0; max-width: 14em; }
.demo-tag {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); border: 1px solid rgba(238, 235, 229, .4); border-radius: var(--r); padding: 8px 10px 7px;
}
.demo-tag::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); }
.rv { position: relative; border-top: 1px solid rgba(238, 235, 229, .18); }
/* the slides sit 64px apart, so no letter of the next review ever shows at the right edge */
.rv-track {
  display: flex; gap: 64px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; position: relative; cursor: grab;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.rv-track:focus-visible { outline-offset: -2px; }
/* the name follows its own quote (not pinned to the bottom of the tallest one) */
.rv-slide { flex: 0 0 100%; scroll-snap-align: start; padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; }
.rv-quote { font: 400 clamp(23px, 2.7vw, 38px)/1.28 var(--sans); letter-spacing: -.025em; max-width: 30em; color: var(--bone); text-wrap: pretty; }
.rv-slide figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.rv-name { font: 500 19px/1.2 var(--sans); letter-spacing: -.02em; }
.rv-proj { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 235, 229, .72); }
.rv-ctrl { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(238, 235, 229, .18); }
.rv-btn {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: none; border: 1px solid rgba(238, 235, 229, .4); color: var(--bone); cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.rv-btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.rv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rv-dots { display: flex; align-items: center; gap: 2px; }
.rv-dot { width: 28px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.rv-dot::before { content: ""; width: 20px; height: 2px; background: rgba(238, 235, 229, .3); transition: background-color .3s ease, width .3s var(--ease); }
.rv-dot[aria-current="true"]::before { background: var(--bone); width: 26px; }
.rv-count { margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: rgba(238, 235, 229, .72); }
.rv-note { margin-top: 22px; font-size: 14px; color: rgba(238, 235, 229, .72); }

/* the studio */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--bone); }
.split-copy > p:not(.eyebrow) { color: var(--muted); max-width: 54ch; }
.split-copy > p + p { margin-top: 16px; }
.team { margin-top: 36px; border-top: 1px solid var(--line-strong); max-width: 54ch; }
.team li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.team b { font-weight: 500; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; }
.team span { font-size: 14.5px; color: var(--muted); text-align: right; }

/* where we work */
.area-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(36px, 7vw, 112px); align-items: start; }
.area-copy h2 { margin-top: 18px; }
.area-copy p:not(.eyebrow) { color: var(--muted); max-width: 46ch; }
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--line-strong); }
.places li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: -.01em; transition: padding-left .3s var(--ease); }
.places li:hover { padding-left: 6px; }
.places li:first-child { grid-column: 1 / -1; font-weight: 500; }
.area-small { margin-top: 20px; font-size: 15px; color: var(--muted); }
.area-side { padding-top: 6px; }

/* contact */
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.hours-card { background: var(--card); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); }
.hours-card h3, .info-block h3 {
  font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px;
}
.status--card { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 11px; row-gap: 3px; font: 500 22px/1.25 var(--sans); letter-spacing: -.025em; margin-bottom: 22px; }
.status--card i { align-self: start; margin-top: .5em; }
.status--card .tz { grid-column: 2; letter-spacing: 0; font-weight: 400; }
.hours-list li {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 15px;
}
.hours-list li:last-child { border-bottom: 1px solid var(--line); }
.hours-list .d { flex: 1; color: var(--muted); order: 0; }
.hours-list .t { font-variant-numeric: tabular-nums; order: 2; }
.hours-list .t-closed { color: var(--muted); }
.hours-list .is-today .d, .hours-list .is-today .t { color: var(--ink); font-weight: 500; }
.today-tag {
  order: 1; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal;
  color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 4px 6px 3px;
}
.hours-note { margin-top: 18px; font-size: 14.5px; color: var(--muted); }

/* the map and its floating card */
.map-wrap { position: relative; min-height: 440px; display: flex; }
.visit-map { position: relative; z-index: 0; flex: 1; min-height: 440px; contain: size; border-radius: var(--r); overflow: hidden; background: #dcd8d0; }
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
.leaflet-container { font-family: var(--sans); background: #dcd8d0; }
.leaflet-tile-pane { filter: grayscale(.72) sepia(.14) contrast(.96) brightness(1.03); }
.leaflet-bar { border: 0 !important; border-radius: var(--r); box-shadow: 0 6px 18px rgba(27, 26, 23, .18); overflow: hidden; }
.leaflet-bar a { color: var(--ink); }
@media (pointer: coarse) { .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; } }
.leaflet-control-attribution { font-size: 11px; }
.map-pin { background: none; border: 0; }
.map-pin svg { display: block; width: 34px; height: 44px; filter: drop-shadow(0 5px 7px rgba(27, 26, 23, .35)); }
.map-pop .leaflet-popup-content-wrapper { border-radius: var(--r); }
.map-pop .leaflet-popup-content { margin: 10px 14px; font: 600 15px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink); }
.map-pop .leaflet-popup-content span { font: 400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.map-hint {
  position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; text-align: center;
  background: rgba(27, 26, 23, .55); color: #fff; font: 500 20px/1.25 var(--sans); letter-spacing: -.02em;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.map-hint.show { opacity: 1; }
.map-guard {
  position: absolute; inset: 0; z-index: 2; border: 0; cursor: pointer; padding: 20px;
  background: rgba(27, 26, 23, .3); color: #fff; font: 500 19px var(--sans);
}
.map-live .map-guard { display: none; }
.map-card {
  position: absolute; z-index: 5; left: 18px; top: 18px; width: min(290px, calc(100% - 36px));
  background: var(--paper); border-radius: var(--r); padding: 20px 22px 14px;
  box-shadow: 0 18px 44px rgba(27, 26, 23, .22); border: 1px solid var(--line);
}
.map-card[hidden] { display: none; }
html.js .map-card { animation: rise .6s var(--ease) both; }
.mc-x {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r); cursor: pointer; color: var(--muted);
}
.mc-x:hover { background: var(--tint); color: var(--ink); }
.mc-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mc-title { font: 600 15px/1.3 var(--sans); letter-spacing: .01em; padding-right: 36px; }
.mc-line { font-size: 14.5px; color: var(--muted); margin: 2px 0 12px; }
.mc-status { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 10px; font-size: 14px; font-weight: 500; }
.mc-status i { align-self: start; margin-top: .45em; }
.mc-visits { font-size: 14px; color: var(--muted); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.map-card .text-link { padding-top: 14px; }

.visit-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--line-strong);
}
.addr { font: 500 24px/1.2 var(--sans); letter-spacing: -.03em; margin-bottom: 14px; }
.getting, .contact-intro { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.contact-line { display: flex; align-items: baseline; gap: 12px; font-size: 16px; margin-bottom: 2px; }
.contact-line a { display: inline-block; min-width: 0; min-height: 44px; overflow-wrap: anywhere; padding: 13px 0 4px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; transition: border-color .2s ease; }
.contact-line a:hover { border-color: var(--ink); }
.soft { flex: none; width: 6.4em; font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-cta { margin-top: 22px; }
.socials { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.socials a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 14.5px; color: var(--ink); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.socials a:hover { background: var(--card); border-color: var(--ink); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.handle { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* =====================================================================================
   WORK PAGE
   ===================================================================================== */
.page-head { position: relative; }
.page-head h1 { font-size: clamp(44px, 6vw, 88px); line-height: .96; letter-spacing: -.047em; margin-top: 20px; max-width: 10em; }
.page-head .lead { max-width: 50ch; font-size: 17px; }

/* the header band: the bench photo on the right, dissolving into the paper under the title */
.band-head { overflow: hidden; min-height: clamp(380px, 46vw, 560px); display: flex; align-items: center; }
.bh-media { position: absolute; top: -8%; bottom: -8%; right: 0; width: 60%; will-change: transform; }
.bh-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; background: var(--tint);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 46%); mask-image: linear-gradient(90deg, transparent 4%, #000 46%);
}
.bh-inner { position: relative; z-index: 2; width: 100%; }
.bh-copy { max-width: 530px; padding: clamp(40px, 6vw, 80px) 0; }
.bh-copy .lead { margin-top: 26px; }
html.js .band-head .bh-copy > * { animation: rise .9s var(--ease) both; }
html.js .band-head .bh-copy > :nth-child(2) { animation-delay: .08s; }
html.js .band-head .bh-copy > :nth-child(3) { animation-delay: .16s; }
html.js .band-head .bh-img { animation: fadein 1.4s ease .1s both; }

.gallery-sec { padding-top: clamp(40px, 5vw, 64px); }
.g-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(28px, 3.5vw, 44px); padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: none; cursor: pointer;
  font: 500 14px/1 var(--sans); letter-spacing: -.005em; color: var(--ink);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip-n { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; opacity: .7; }
.g-count { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* The editorial grid: 4 columns on wide screens, 3 on tablets, 2 on phones (--cols, which the script reads
   too). Rows come in pairs: a photo row exactly as tall as a 4:5 tile, then a caption row. A tile spans
   one pair, a wide tile two columns, a big tile two columns and two pairs; subgrid keeps every caption
   row level, whatever the tile. The script picks the sizes per filter so the grid never has a hole. */
.g-shell { container-type: inline-size; }
.gallery {
  --cols: 4; --gx: clamp(14px, 1.8vw, 24px);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gx);
  transition: opacity .2s ease;
}
.gallery.swap { opacity: 0; }
.g-item[hidden], .g-cta[hidden] { display: none; }
.g-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--tint); }
.g-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; }
.g-open img { height: 100%; aspect-ratio: auto; }
.g-cap { padding: 16px 0 clamp(30px, 3.4vw, 46px); }
.g-cap .g-tag { margin: 0 0 8px; }
.g-title { font-size: 21px; }
.g-item.is-big .g-title { font-size: clamp(22px, 2vw, 27px); }
.g-media:hover + .g-cap .g-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* the one-line description: on the photo when you point at it (and in the photo viewer) */
.g-hover {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 64px 26px 28px; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 22, 19, 0), rgba(23, 22, 19, .66) 42%, rgba(23, 22, 19, .88));
  opacity: 0; transition: opacity .35s ease;
}
.g-hover .g-text { display: block; margin: 0; max-width: 44ch; color: var(--bone); font-size: 14.5px; line-height: 1.45; transform: translateY(8px); transition: transform .45s var(--ease); }
.g-item.is-big .g-hover .g-text { font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .g-media:hover .g-hover, .g-open:focus-visible + .g-hover { opacity: 1; }
  .g-media:hover .g-hover .g-text, .g-open:focus-visible + .g-hover .g-text { transform: none; }
}
html.js .g-item.enter { animation: rise .55s var(--ease) both; animation-delay: calc(var(--n, 0) * 45ms); }
.g-cta { grid-column: span var(--span, 1); display: flex; align-self: start; }
@supports (width: 1cqw) and (grid-template-rows: subgrid) {
  .gallery { grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gx)) / var(--cols) * 1.25) auto; }
  .g-item, .g-cta { grid-row: span 2; display: grid; grid-template-rows: subgrid; align-self: stretch; }
  .g-media { aspect-ratio: auto; }
  .g-item.is-wide { grid-column: span 2; }
  .g-item.is-big { grid-column: span 2; grid-row: span 4; }
  .g-item.is-big .g-media { grid-row: 1 / 4; }
  .g-item.is-big .g-cap { grid-row: 4; }
  .g-cta-link { grid-row: 1; min-height: 0; }
}
.g-cta-link {
  position: relative; overflow: hidden;
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px;
  min-height: 160px; padding: 26px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  text-decoration: none; color: var(--ink); font: 500 22px/1.15 var(--sans); letter-spacing: -.025em;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  transition: border-color .3s ease, background-color .3s ease;
}
.g-cta-link .cta-icon { width: 30px; height: 30px; position: relative; z-index: 1; }
.g-cta-link .lbl, .g-cta-link .arr { position: relative; z-index: 1; }
.cta-drawing { position: absolute; left: 8%; top: 7%; width: 84%; height: 50%; }
.cta-drawing path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .4s ease; }
.cta-drawing .hl-w { stroke-width: 2; }
.g-cta-link:hover .cta-drawing path { opacity: .9; }
.g-cta.is-narrow .cta-drawing { top: 10%; height: 30%; }
html.js .g-cta-link .cta-drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .g-cta.in .cta-drawing path { animation: draw 1.1s var(--ease) forwards; animation-delay: calc(.1s + var(--i) * .05s); }
.g-cta-link .arr { display: inline-block; transition: transform .3s var(--ease); }
.g-cta-link:hover { border-color: var(--ink); background-color: var(--card); }
.g-cta-link:hover .arr { transform: translateX(4px); }

/* ---------- the photo viewer ---------- */
.lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #171613; color: var(--bone); overflow: hidden;
}
.lb::backdrop { background: rgba(22, 21, 18, .6); }
.lb[open] { animation: fadein .25s ease; }
html:has(.lb[open]) { overflow: hidden; }
.lb-inner { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 14px clamp(16px, 4vw, 40px) 18px; }
.lb-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.lb-count { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(238, 235, 229, .78); }
.lb-x, .lb-nav {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(238, 235, 229, .08); border: 1px solid rgba(238, 235, 229, .28); color: var(--bone); cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.lb-x:hover, .lb-nav:hover { background: var(--bone); color: var(--ink); }
.lb-x svg, .lb-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-fig { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 8px clamp(0px, 5vw, 72px) 0; }
.lb-stage { position: relative; min-height: 0; touch-action: pan-y; }
/* the photo is contained in the stage, whatever its shape (portrait tiles, landscape large files) */
.lb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s ease, filter .4s ease; user-select: none; -webkit-user-drag: none; }
.lb-img:not([src]) { visibility: hidden; }
.lb.loading .lb-img { filter: blur(6px) saturate(.9); opacity: .85; }
.lb-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 10px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  background: rgba(22, 21, 18, .72); border-radius: var(--r); padding: 10px 12px;
}
.lb.loading .lb-loading { display: inline-flex; }
.lb-spin { width: 12px; height: 12px; border: 1.5px solid rgba(238, 235, 229, .35); border-top-color: var(--bone); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lb-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; justify-content: center; text-align: center; max-width: 900px; margin: 0 auto; }
.lb-tag { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(238, 235, 229, .72); }
.lb-title { font: 500 19px/1.25 var(--sans); letter-spacing: -.02em; }
.lb-text { flex-basis: 100%; font-size: 14.5px; color: rgba(238, 235, 229, .78); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb-prev { left: clamp(10px, 2vw, 28px); }
.lb-next { right: clamp(10px, 2vw, 28px); }
.lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 14px; }
.lb-hint { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: rgba(238, 235, 229, .7); }
.lb-plan { min-height: 46px; }
.lb-img.slide-l { animation: slideL .35s var(--ease); }
.lb-img.slide-r { animation: slideR .35s var(--ease); }
@keyframes slideL { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slideR { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* the closing band */
.closing { padding: clamp(80px, 10vw, 136px) 0; text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -.047em; line-height: .98; max-width: 14ch; }
.closing-text { color: var(--muted); margin: 20px 0 34px; max-width: 46ch; font-size: 17.5px; }
.closing .actions { justify-content: center; }
.closing-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px;
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line-strong);
  font-size: 14.5px; color: var(--muted);
}
html:not(.js) .closing-hours { display: none; }

/* =====================================================================================
   START PAGE: the quote request and the FAQ
   ===================================================================================== */
.start-head { padding: clamp(40px, 6vw, 88px) 0 0; }
.sh-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
html.js .start-head .sh-grid > * { animation: rise .9s var(--ease) both; }
html.js .start-head .sh-grid > :nth-child(2) { animation-delay: .1s; }
.start-sec { padding-top: clamp(44px, 5vw, 72px); }
.start-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(36px, 6vw, 96px); align-items: start; }

.quote { display: grid; gap: 26px; }
.f-req { font-size: 14px; color: var(--muted); }
.f-field { display: grid; gap: 8px; align-content: start; }
.f-label { font: 500 15.5px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink); }
legend.f-label { margin-bottom: 12px; padding: 0; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.f-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.f-opt { position: relative; display: block; cursor: pointer; }
.f-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-opt span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card);
  font-size: 15px; line-height: 1.25; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.f-opt span::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--muted);
  box-shadow: inset 0 0 0 3px var(--card); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.f-opt:hover span { border-color: var(--ink); }
.f-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.f-opt input:checked + span::before { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 0 0 3px var(--ink); }
.f-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.f-type.is-bad .f-opt span { border-color: var(--bad); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--card); color: var(--ink); font-size: 16px; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
textarea { resize: vertical; min-height: 140px; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: #fff; }
::placeholder { color: #7a7469; opacity: 1; }    /* 4.6:1 on the card colour */
.f-select { position: relative; }
.f-select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.f-select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); pointer-events: none;
}
select:invalid, select option[value=""] { color: var(--muted); }
.f-field.is-bad input, .f-field.is-bad select, .f-field.is-bad textarea { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.f-hint { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.f-note { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.f-note:empty { display: none; }
.f-note::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin-right: .3em; background-color: currentColor; -webkit-mask: var(--ic-arr) center/contain no-repeat; mask: var(--ic-arr) center/contain no-repeat; color: var(--muted); }
.f-err { display: flex; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--bad); }
.f-err:empty { display: none; }
.f-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--bad); color: #fff; font: 600 11px/1 var(--sans); }
.f-privacy { font-size: 14px; color: var(--muted); }
.f-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding-top: 6px; }
.f-submit .btn { min-width: 220px; }
.f-demo {
  font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 7px 9px 6px;
}
.f-summary {
  margin-bottom: 28px; padding: 20px 22px; border: 1px solid var(--bad); border-left-width: 4px; border-radius: var(--r); background: #f7ece8;
}
.f-summary:focus { outline: 2px solid var(--ink); outline-offset: 3px; }
.f-sum-title { font: 600 16px/1.3 var(--sans); color: var(--bad); margin-bottom: 8px; }
.f-sum-list { display: grid; gap: 2px; }
.f-sum-list a { display: inline-block; padding: 6px 0; color: var(--ink); font-size: 15px; text-decoration: underline; text-decoration-color: rgba(155, 59, 42, .5); text-underline-offset: 3px; }
.f-sum-list a:hover { text-decoration-color: var(--bad); }

.f-done { padding: clamp(28px, 4vw, 44px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
html.js .f-done:not([hidden]) { animation: rise .6s var(--ease) both; }
.cn-chip {
  display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 6px 8px 5px;
}
.fd-title { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.04em; line-height: 1.02; margin: 18px 0 16px; overflow-wrap: anywhere; }
.fd-title:focus { outline: none; }
.fd-body { color: var(--muted); max-width: 58ch; }
.fd-sum { margin: 22px 0 28px; padding: 16px 18px 12px; border-left: 2px solid var(--ink); background: var(--paper); }
.fd-sum-h { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fd-list > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.fd-list > div:first-child { border-top: 0; }
.fd-list dt { font: 400 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fd-list dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

.start-aside { position: sticky; top: calc(var(--head-h) + 28px); display: grid; gap: 28px; }
.sa-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); background: var(--bone); }
.sa-next h2 { font-size: 28px; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 16px; }
.next-steps { counter-reset: n; border-top: 1px solid var(--line-strong); }
.next-steps li { counter-increment: n; position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.next-steps li::before { content: "0" counter(n); position: absolute; left: 0; top: 14px; font: 500 11.5px/1.9 var(--mono); letter-spacing: .1em; color: var(--ink); }
.next-steps .num { color: var(--ink); font-weight: 500; }
.rather { margin-top: 22px; font-weight: 500; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--head-h) + 32px); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 18px 0;
  cursor: pointer; list-style: none; font: 500 clamp(19px, 1.7vw, 23px)/1.25 var(--sans); letter-spacing: -.02em;
  transition: padding-left .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { padding-left: 6px; }
.faq-ic { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; transition: background-color .25s ease, border-color .25s ease, transform .4s var(--ease); }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); transition: transform .35s var(--ease), background-color .25s ease; }
.faq-ic::after { transform: rotate(90deg); }
.faq-item[open] .faq-ic { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.faq-item[open] .faq-ic::before, .faq-item[open] .faq-ic::after { background: var(--bone); }
.faq-item[open] .faq-ic::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 56px 24px 0; color: var(--muted); max-width: 66ch; }
.faq-a .num { color: var(--ink); font-weight: 500; }

/* ---------- footer ---------- */
.site-footer { background: var(--char-2); color: rgba(238, 235, 229, .78); padding: clamp(56px, 6vw, 80px) 0 32px; font-size: 14.5px; }
.reviews + .site-footer, .dark + .site-footer { border-top: 1px solid rgba(238, 235, 229, .1); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 36px; padding-bottom: 40px; }
.site-footer .brand { color: var(--bone); margin: -11px 0 6px; }
.foot-tag { color: var(--bone); max-width: 40ch; }
.foot-hours { margin-top: 6px; }
.foot-nav, .foot-contact { display: flex; flex-direction: column; gap: 0; align-items: flex-start; margin-top: -10px; }
.foot-nav a, .foot-contact a { padding: 10px 0; min-width: 44px; }
.site-footer a { color: rgba(238, 235, 229, .86); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.site-footer a:hover { color: var(--bone); border-bottom-color: rgba(238, 235, 229, .5); }
.site-footer .foot-nav a:hover, .site-footer .foot-contact a:hover { border-bottom-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(238, 235, 229, .5); }
.foot-small { position: relative; padding-top: 24px; display: grid; gap: 6px; font-size: 13px; color: rgba(238, 235, 229, .64); }
.foot-small::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(238, 235, 229, .14); }
.foot-small a {
  display: inline-block; padding: 12px 0; margin: -12px 0;
  color: rgba(238, 235, 229, .82); border-bottom: 0;
  text-decoration: underline; text-decoration-color: rgba(238, 235, 229, .3); text-underline-offset: 3px;
}
.site-footer .foot-small a:hover { text-decoration-color: rgba(238, 235, 229, .7); }
.foot-small p > span + span::before { content: "·"; margin: 0 8px; }

/* ---------- the same company in every package: a slim row in the footer's colour, just above it ----------
   Same columns as .foot-grid, so the packages start where the footer's links do. The package of this
   page is marked (aria-current, no link); the other two link to that package's home page. 44px to tap. */
.tiers { background: var(--char-2); color: rgba(238, 235, 229, .64); font-size: 14.5px; }
.tiers-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  column-gap: 36px; align-items: center; padding-top: 18px; padding-bottom: 18px;
}
.tiers-row::after { content: ""; position: absolute; bottom: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(238, 235, 229, .14); }
.tiers-k { display: flex; align-items: center; gap: 12px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.tiers-k::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.tiers-list { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-left: -12px; }
.tiers-list a, .tiers-on {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--r); line-height: 1.2;
}
.tiers-list a { color: rgba(238, 235, 229, .86); text-decoration: none; transition: color .2s ease; }
.tiers-list a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(238, 235, 229, .5); }
.tiers-on { background: rgba(238, 235, 229, .1); color: var(--bone); }
.tiers :focus-visible { outline-color: var(--bone); }
@media (max-width: 900px) {
  .tiers-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tiers-row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-top: 24px; padding-bottom: 16px; }
  .tiers-list { grid-column: auto; margin-left: 0; }
  .tiers-list:has(> li:first-child > a) { margin-left: -12px; }   /* a link first: its word lines up with the label */
}

/* demo toast */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 60; width: max-content; max-width: min(calc(100vw - 32px), 460px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bone); font-size: 14.5px; line-height: 1.5;
  padding: 13px 18px; border-radius: var(--r); box-shadow: 0 14px 40px rgba(27, 26, 23, .3);
  border: 1px solid rgba(238, 235, 229, .18);
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 600; }

/* ---------- custom cursor (fine pointers only, never with reduced motion; the system cursor stays) ---------- */
.cursor, .cursor-dot { display: none; }
html.has-cursor .cursor, html.has-cursor .cursor-dot {
  display: block; position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; opacity: 0;
}
html.has-cursor .cursor.live, html.has-cursor .cursor.live + .cursor-dot { opacity: 1; }
html.has-cursor .cursor {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(243, 240, 234, .95); mix-blend-mode: difference;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
html.has-cursor .cursor::after {
  content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); opacity: 0; transition: opacity .2s ease;
}
html.has-cursor .cursor.grow { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
/* over a photo or the reviews: a paper disc with the word in ink, legible on light and dark alike */
html.has-cursor .cursor.label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--bone); border-color: var(--bone); mix-blend-mode: normal; box-shadow: 0 8px 24px rgba(27, 26, 23, .25); }
html.has-cursor .cursor.label::after { color: var(--ink); }
html.has-cursor .cursor.label::after { opacity: 1; }
html.has-cursor .cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #f3f0ea; mix-blend-mode: difference; }
html.has-cursor .cursor.live.label + .cursor-dot { opacity: 0; }
html.has-cursor .cursor.hide, html.has-cursor .cursor.hide + .cursor-dot { opacity: 0 !important; }

/* ---------- scroll reveals ---------- */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
/* photos open like a sheet being lifted: a clip from the bottom and a slight settle */
/* (the clip sits on the picture, not on the observed box: a fully clipped box never "intersects") */
html.js .reveal-img { overflow: hidden; border-radius: var(--r); }
html.js .reveal-img img { clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1.2s var(--ease), transform 1.6s var(--ease); }
html.js .reveal-img.in img { clip-path: inset(0 0 0 0); transform: none; }
/* groups: the children follow each other */
html.js .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s var(--ease); }
html.js .stagger.in > * { opacity: 1; transform: none; }
html.js .stagger.in > :nth-child(2) { transition-delay: .1s; }
html.js .stagger.in > :nth-child(3) { transition-delay: .2s; }
html.js .stagger.in > :nth-child(4) { transition-delay: .3s; }
html.js .stagger.done > * { transition-delay: 0s; }

/* ================= tablet ================= */
@media (max-width: 1120px) {
  .nav { gap: 22px; }
  .nav .btn { display: none; }
  .head-cta { display: inline-flex; }
  .lang { margin-left: 6px; }
}
@media (max-width: 1040px) {
  .cards { gap: 16px; }
  .card-body { padding: 20px 20px 22px; }
  .card h3 { font-size: 25px; }
  .cards { --cp: 20px; }
  .gallery { --cols: 3; --gx: 20px; }
}
@media (max-width: 1000px) {
  :root { --head-h: 64px; }
  .site-header .wrap { position: relative; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px var(--gut) 20px;
    box-shadow: 0 18px 30px rgba(27, 26, 23, .08);
  }
  .nav.open { display: flex; animation: drop .3s var(--ease); }
  @keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav-link { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; text-align: left; }
  .nav-link::after { display: none; }
  .nav-link[aria-current] { font-weight: 600; }
  .nav-link[aria-current]::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin-right: .3em; background-color: currentColor; -webkit-mask: var(--ic-arr) center/contain no-repeat; mask: var(--ic-arr) center/contain no-repeat; }
  .nav-toggle { display: block; }
  .head-row > .lang { display: none; }
  .lang--menu { display: flex; gap: 6px; margin: 16px 0 0; }
  .lang--menu button { border: 1px solid var(--line-strong); min-width: 52px; font-size: 12px; }
  .lang--menu button[aria-pressed="true"] { border-color: var(--tint); }
  .tl { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; }
}

@media (max-width: 900px) {
  .intro-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter:nth-child(3) { padding-left: 0; border-left: 0; }
  .counter:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .card-media { height: 100%; }
  .card-photo { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .card-body { align-self: stretch; }
  /* the timeline on one column: the photo sits above each step, nothing sticks */
  .tl { grid-template-columns: 1fr; }
  .tl-media { display: none; }
  .tl-pic-m { display: block; margin-bottom: 20px; }
  .tl-pic-m img, .tl--static .tl-pic-m img { width: 100%; max-width: 520px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); }
  .tl-step { padding-bottom: 56px; }
  .tl--static .tl-step { display: block; }
  .teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser .tile:nth-child(3) { display: none; }
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .area-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .map-wrap, .visit-map, .visit-map iframe { min-height: 400px; }
  .visit-info { grid-template-columns: 1fr 1fr; }
  .sh-grid { grid-template-columns: 1fr; }
  .start-grid { grid-template-columns: 1fr; }
  .start-aside { position: static; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .sa-photo img { aspect-ratio: 4 / 5; }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-side { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .band-head { min-height: 0; display: block; }
  .bh-media { position: relative; top: auto; bottom: auto; width: 100%; height: clamp(200px, 38vw, 340px); overflow: hidden; }
  .bh-img { -webkit-mask-image: none; mask-image: none; object-position: 60% 50%; height: 116%; margin-top: -8%; }
  .bh-copy { padding: 30px 0 0; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* a shorter photo band, so "Plan a first call" sits in the first screen (above ~700px on a 390x844 phone) */
  .hero-stage { height: min(80vw, 360px); }
  .hs { font-size: 9.5px; padding: 5px 7px 4px; }
  /* phones draw on hero-m (viewBox 840 -41.3 1000 1333, 1000 units = 100vw). The art reaches 9vw below the
     band, so less gravel and more trees show above the roof; the dimension line (y 1150, 141.7 units
     above the art's bottom edge) stays in the band, and the "Built" label sits on it. */
  .hero-art { bottom: -9vw; }
  .hs-state { left: 36%; bottom: 14.17vw; }
  .hero-copy { padding: 22px 0 52px; }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); margin: 12px 0 14px; }
  .hero .lead { font-size: 16.5px; line-height: 1.5; margin-bottom: 20px; }
  .hero-note { margin-top: 22px; padding-top: 16px; gap: 8px 18px; }
  .actions .btn { flex: 1 1 auto; }
  .hl path { stroke-width: 3; }
  .hl .hl-w, .hl .hl-dim { stroke-width: 2.6; }

  .pad { padding: 72px 0; }
  .intro { padding-top: 56px; }
  .section-head h2, .split-copy h2, .area-copy h2, .faq-side h2, .rv-head h2 { font-size: clamp(34px, 9.6vw, 42px); }
  .section-head--row { align-items: flex-start; }
  .intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .statement { font-size: clamp(34px, 9.8vw, 44px); margin-bottom: 20px; }
  .intro-copy p { font-size: 17px; }
  .intro-photo { width: 62%; justify-self: end; }
  .counters-block { margin-top: 56px; }
  .counter { padding: 20px 14px 4px 0; }
  .counter + .counter { padding-left: 14px; }
  .counter:nth-child(3) { padding-left: 0; }
  .c-num { font-size: clamp(52px, 15vw, 64px); }
  .c-label { font-size: 12px; }

  .card { display: flex; }
  .card-media { height: auto; }
  .card-photo { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .card-body { padding: 20px 20px 22px; }
  .card h3 { font-size: 26px; }

  .tl-col { padding-left: 34px; }
  .tl-step::before { left: -34px; }
  .tl-step h3 { font-size: 27px; }

  .teaser { grid-template-columns: 1fr; gap: 40px; }
  .teaser .tile:nth-child(3) { display: flex; }
  .tile-img img { aspect-ratio: 4 / 3.4; }

  .rv-quote { font-size: clamp(21px, 5.6vw, 24px); }
  .rv-ctrl { gap: 8px; }
  .rv-dot { width: 22px; }
  .rv-dot::before { width: 14px; }
  .rv-dot[aria-current="true"]::before { width: 18px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-photo img { aspect-ratio: 4 / 4.2; }
  .team b { font-size: 21px; }
  .team li { flex-wrap: wrap; gap: 4px 16px; }

  .places { grid-template-columns: 1fr 1fr; }
  .places li { font-size: 16px; }

  .status--card { font-size: 20px; }
  /* phones: the card sits under the map instead of over it */
  .map-wrap { flex-direction: column; min-height: 0; }
  .visit-map, .visit-map iframe { min-height: 320px; flex: none; height: 320px; }
  .map-card { position: relative; left: auto; top: auto; width: auto; margin-top: -1px; box-shadow: none; border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--card); }
  .visit-info { grid-template-columns: 1fr; gap: 36px; }
  .socials { flex-direction: row; flex-wrap: wrap; }

  .page-head h1 { font-size: clamp(40px, 11.6vw, 56px); }
  .gallery { --cols: 2; --gx: 12px; }
  .g-title { font-size: 18px; }
  .g-item.is-big .g-title { font-size: 21px; }
  .g-text { font-size: 14.5px; }
  .g-tag { margin: 12px 0 6px; font-size: 10.5px; }
  .g-cap { padding: 12px 0 30px; }
  .g-cap .g-tag { margin: 0 0 6px; }
  /* phones: tag and title only; the line is in the photo viewer */
  .g-hover { display: none; }
  .g-cta-link { min-height: 0; padding: 20px; font-size: 19px; }
  .chip { padding: 0 13px; }
  .lb-inner { padding: 10px 12px 14px; }
  .lb-fig { padding: 6px 0 0; }
  .lb-nav { top: 40%; width: 42px; height: 42px; background: rgba(23, 22, 19, .6); }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .lb-plan { width: 100%; }
  .closing h2 { font-size: clamp(36px, 10.4vw, 48px); }
  .closing .actions { width: 100%; max-width: 380px; }
  .closing-strip { flex-direction: column; align-items: center; gap: 8px; }

  .f-row, .f-row--3 { grid-template-columns: 1fr; }
  .fd-list > div { grid-template-columns: 1fr; gap: 2px; }
  .f-opts { grid-template-columns: 1fr 1fr; }
  .f-submit .btn { width: 100%; }
  .start-aside { grid-template-columns: 1fr; }
  .sa-photo img { aspect-ratio: 16 / 10; }
  .faq-a p { padding-right: 0; }
  .faq-item summary { gap: 16px; }

  .foot-grid { grid-template-columns: auto auto; justify-content: start; gap: 28px 40px; }
}

@media (max-width: 360px) {
  .foot-grid { grid-template-columns: 1fr; }
  .brand { letter-spacing: .14em; font-size: 14px; gap: 9px; }
  .head-cta { padding: 0 12px; }
  .hero h1 { font-size: 42px; }
  .places { grid-template-columns: 1fr; }
  .f-opts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-track { scroll-behavior: auto; }
  html.js .reveal, html.js .stagger > * { opacity: 1; transform: none; transition: none; }
  html.js .reveal-img img { clip-path: none; transform: none; transition: none; }
  html.js .reveal .eyebrow::before, html.js .eyebrow.reveal::before { transform: none; transition: none; }
  /* (html.motion is never set with reduced motion: the lines show at rest in paper on the photo, "Built") */
  html.js .band-head .bh-copy > *, html.js .band-head .bh-img, html.js .start-head .sh-grid > * { animation: none; }
  .status[data-state="open"] i { animation: none; }
  .sc-line::after { animation: none; }
  .tl-pic { transition: none; }
  .card, .card-photo, .tile-img img, .g-open img { transition: none; }
  .card:hover { transform: none; }
  .card:hover .card-photo, .tile:hover .tile-img img, .g-open:hover img { transform: none; }
  .btn-ghost::before { transition: none; }
  .lb[open], .lb-img.slide-l, .lb-img.slide-r, .map-card, .f-done:not([hidden]), .nav.open { animation: none !important; }
  .gallery { transition: none; }
  html.js .g-item.enter { animation: none; }
  html.js .g-cta-link .cta-drawing path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .toast { transition: none; }
}