/* Halvern Architecture & Build · ESSENTIAL tier ($800), construction vertical.
   The brand of the Immersive demo (/immersive/house): the HALVERN wordmark with its small
   house icon, Inter Tight for everything you read, Geist Mono for the small "drawing sheet"
   labels, warm grey / paper / ink. Photography instead of 3D.
   Restrained motion: one fade-up on scroll, nothing else. One corner radius: 2px, as on the
   Immersive buttons (a drawing has square corners). Copy source: essential/construction/CONTENT.md. */

:root {
  --paper: #f3f0ea;
  --card: #f9f7f3;            /* cards on the tinted sections */
  --tint: #e8e4dc;            /* the tinted sections: 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;            /* the process band */
  --char-2: #1f1d19;          /* the footer */
  --on-dark: rgba(238, 235, 229, .8);
  --line: rgba(27, 26, 23, .14);
  --line-strong: rgba(27, 26, 23, .3);
  --go: #56703f;              /* "open now" dot */
  --soon: #a8742a;            /* "closing soon" dot */
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --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 { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r); }

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; }

/* the small mono label with a short rule in front, as on the Immersive captions */
.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);
}
/* the rule sits on the first line when a long label wraps */
.eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; margin-top: .62em; background: currentColor; opacity: .55; }

/* times and prices: lining, tabular figures */
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.005em; }

/* ---------- buttons ---------- */
.btn {
  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;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-fill { background: var(--ink); color: var(--bone); }
.btn-fill:hover { background: #000; border-color: #000; }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bone); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.text-link {
  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;   /* 44px tall to tap */
  transition: border-color .2s ease;
}
.text-link:hover { border-color: var(--ink); }

/* ---------- header ---------- */
.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); }
/* the wordmark: the small house icon and HALVERN in tracked capitals, as on /immersive/house */
.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;   /* 44px tall to tap */
}
.brand svg { flex: none; width: 22px; height: 22px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font: 500 14.5px/1 var(--sans); letter-spacing: -.005em;
  color: var(--ink); text-decoration: none; padding: 15px 0; white-space: nowrap;   /* 44px tall to tap */
  min-width: 44px; text-align: center;   /* and never narrower: "Work" is a short word */
  text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.nav a:hover, .nav a[aria-current="page"] { text-decoration-line: underline; }
.nav .btn { margin-left: 4px; }

.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;   /* a 44px tap area */
  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); }
/* the copy of the language switch inside the phone menu, and the short "Plan a call" button that
   stays in the header bar once the nav's own button no longer fits */
.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); }
.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; }

/* ---------- hero ---------- */
.hero .wrap { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 5vw, 72px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero h1 {
  font-size: clamp(48px, 6.6vw, 100px); line-height: .95; letter-spacing: -.047em;
  margin: 22px 0 26px; max-width: 9em;
}
.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); }
/* the photo with four small corner ticks, like the drawing sheet of the Immersive site */
.hero-media { position: relative; padding: 10px; }
.hero-media::before, .hero-media::after, .hero-media picture::before, .hero-media picture::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--line-strong); pointer-events: none;
}
.hero-media::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero-media::after { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero-media picture::before { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero-media picture::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hero-photo {
  width: 100%; height: clamp(520px, 74vh, 720px); object-fit: cover; object-position: 50% 50%;
  border-radius: var(--r); background: var(--tint);
}
/* on load the copy rises once; the photo just appears (no parallax: that is Signature) */
html.js .hero-copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.js .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.js .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 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, .know-side 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: one statement, one small photo */
.intro { padding-top: clamp(32px, 4vw, 56px); }
.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); }

/* 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; }
.card-photo { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; background: var(--bone); }
.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; }
/* the price line sits at the foot of every card, so the three line up */
.card-price {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.45; color: var(--ink);
}
.cards-note { margin-top: clamp(22px, 3vw, 34px); max-width: 64ch; color: var(--muted); font-size: 15.5px; }

/* on wide screens the three cards share their rows (subgrid), so the price lines start on one
   line whatever the length of the text above them */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .cards { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
    .card { display: grid; grid-row: span 4; 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) 24px; }
  }
}

/* how we work: the one dark band */
.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); }
.process-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px);
  align-items: end; margin-bottom: clamp(44px, 5vw, 72px);
}
.process-head .section-head { margin-bottom: 0; }
.process-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: #3a372f; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.step { display: flex; flex-direction: column; padding-top: 22px; border-top: 1px solid rgba(238, 235, 229, .24); }
.step h3 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.035em; margin-bottom: 16px; }
.step-no { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: rgba(238, 235, 229, .66); }
.step-text { color: var(--on-dark); font-size: 15.5px; }
.step-cost {
  margin-top: auto; padding-top: 18px;
  font: 400 13px/1.55 var(--mono); letter-spacing: .01em; color: var(--bone);
}
.step-text { margin-bottom: 22px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .steps { grid-template-rows: auto 1fr auto; row-gap: 0; }
    .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .step-cost { margin-top: 0; }
  }
}
.step-cost::before { content: ""; display: block; width: 100%; height: 0; border-top: 1px dashed rgba(238, 235, 229, .24); margin-bottom: 14px; }

/* projects (home teaser and the work page) */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.project { display: flex; flex-direction: column; }
.project-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--tint); }
.project-tag { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 9px; }
.project h3 { font-size: 23px; letter-spacing: -.025em; line-height: 1.15; }
.project-text { color: var(--muted); font-size: 15.5px; margin-top: 8px; max-width: 46ch; }

/* 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; }
/* Amersfoort, where the studio is, gets a row of its own; the twelve others fill the grid evenly */
.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;
}
/* a grid, not a wrapping row: a long status line wraps under itself and the dot stays on line one */
.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); }

/* position + z-index 0 = its own stacking context, or Leaflet's panes (z 200-1000) climb over the sticky header.
   contain: size = the box never takes its height from what is inside it. Leaflet's script can arrive
   before its stylesheet; for that moment the tiles sit in the normal flow and stretch the box to some
   3000px, Leaflet centres the pin in that tall box, and once the CSS lands the visible part shows
   somewhere else instead of the pin. */
.visit-map { position: relative; z-index: 0; 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; }
/* take most of the colour out of the OpenStreetMap tiles so the map sits in the paper-and-ink palette;
   the canal and the parks keep a trace of theirs */
.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); }
/* on touch screens the zoom buttons get the same 44px tap area as everything else */
@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); }
/* "Use Ctrl + scroll to zoom the map": shown for a moment when someone scrolls over the map */
.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; }

.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; }
/* "Phone 033 …" / "E-mail hello@…": the small label sits in front of what it labels, on the same line */
.contact-line, .cn-lines li { display: flex; align-items: baseline; gap: 12px; }
.contact-line { font-size: 16px; margin-bottom: 2px; }
/* 44px tall to tap; the border is the underline, so the extra room goes above the text */
.contact-line a, .cn-lines 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; }
.contact-line a:hover, .cn-lines 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 { padding: clamp(36px, 6vw, 88px) 0 0; }
.page-head-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px);
}
.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 projects follow the title straight away (the first row shows on load at 1366 x 760); the low
   band of hands at the bench closes the grid */
.pad.work-list { padding-top: 0; }   /* two classes: the phone rule for .pad must not undo it */
.band { margin-top: clamp(56px, 7vw, 96px); }
.band img { width: 100%; aspect-ratio: 4.4 / 1; object-fit: cover; object-position: 50% 50%; border-radius: var(--r); background: var(--tint); }

.know-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.know-photo { width: 100%; max-width: 340px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); margin-top: 12px; background: var(--bone); }
.know-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.know-list > div { padding: 24px 0; border-top: 1px solid var(--line-strong); }
.know-list dt { font-weight: 500; font-size: 22px; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 8px; }
.know-list dd { color: var(--muted); font-size: 15.5px; }
.know-list dd .num { color: var(--ink); font-weight: 500; }

.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);
}
/* without the script the status line already shows the hours: the hours line joins it only once the
   live status has taken their place */
html:not(.js) .closing-hours { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--char-2); color: rgba(238, 235, 229, .78); padding: clamp(56px, 6vw, 80px) 0 32px; font-size: 14.5px; }
.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; }   /* 44px tall to tap, and never narrower ("Work") */
.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); }
/* the rule stops where the text does, not at the wrap's padding */
.foot-small::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(238, 235, 229, .14); }
/* the two links in the small print ("Unsplash", the tier comparison) sit inside a sentence; the padding
   gives them a 44px tap area and the negative margin keeps the lines where they were */
.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 */
}

/* ---------- "Plan a first call": the demo notice ---------- */
.call-note {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--r); background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(27, 26, 23, .35);
}
.call-note::backdrop { background: rgba(27, 26, 23, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.call-note[open] { animation: pop .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cn-inner { position: relative; padding: 34px clamp(24px, 5vw, 40px) 32px; }
.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;
}
.call-note h2 { font-size: clamp(30px, 6vw, 38px); letter-spacing: -.04em; margin: 16px 0 14px; padding-right: 24px; }
.call-note h2:focus { outline: none; }   /* it takes the focus on open, so a screen reader starts at the title */
.call-note p { color: var(--muted); font-size: 15.5px; }
.cn-lines { margin: 14px 0 0; display: grid; gap: 4px; }
.cn-lines li { font-size: 17px; }
.cn-said { min-height: 0; margin-top: 10px; font-size: 14px !important; color: var(--ink) !important; }
.cn-said:empty { display: none; }
.cn-said b { font-weight: 600; }
.cn-small { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px !important; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cn-actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
.cn-x {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r); cursor: pointer; color: var(--muted);
}
.cn-x:hover { background: var(--tint); color: var(--ink); }
.cn-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html:has(.call-note[open]) { overflow: hidden; }

/* demo toast: says what a placeholder link would do on a real site */
.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);   /* still reads over the dark band and the footer */
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 600; }

/* ---------- the one scroll animation ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ================= tablet ================= */
@media (max-width: 1120px) {
  .nav { gap: 22px; }
  .nav .btn { display: none; }
  .head-cta { display: inline-flex; }   /* "Plan a call" stays one tap away at every width */
  .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; }
}

/* the nav folds into the menu a little before the content goes single-column: below ~1000px
   the Spanish menu items no longer fit on one line next to the languages and the button */
@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; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; text-align: left; }
  .nav a:hover, .nav a[aria-current="page"] { text-decoration-line: none; }
  .nav a[aria-current="page"] { font-weight: 600; }
  .nav-toggle { display: block; }
  /* the bar keeps the brand, "Plan a call" and the menu button; the languages move into the menu */
  .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); }
}

@media (max-width: 900px) {
  /* the photo comes first, in a 3:2 crop, so a phone's first screen is not text only */
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-media { order: -1; }
  .hero-photo { height: auto; aspect-ratio: 3 / 2; }
  .intro-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .card-photo { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .card-body { align-self: stretch; }
  .process-head { grid-template-columns: 1fr; }
  .process-photo { max-width: 560px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 24px 0 28px; }
  .step-cost { margin-top: 0; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects--3 .project:nth-child(3) { display: none; }   /* two side by side, not two and an orphan */
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .area-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-map, .visit-map iframe { min-height: 380px; }
  .visit-info { grid-template-columns: 1fr 1fr; }
  .know-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-head-grid { grid-template-columns: 1fr; }
  .know-photo { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero .wrap { padding-top: 14px; padding-bottom: 64px; }
  .hero-media { padding: 8px; margin: 0 -8px; }
  .hero h1 { font-size: clamp(44px, 13vw, 60px); margin: 16px 0 18px; }
  .hero .lead { margin-bottom: 26px; }
  .hero-note { margin-top: 26px; padding-top: 18px; gap: 8px 18px; }
  .actions .btn { flex: 1 1 auto; }

  .pad { padding: 72px 0; }
  .intro { padding-top: 16px; }
  .section-head h2, .split-copy h2, .area-copy h2, .know-side 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; }

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

  .projects { grid-template-columns: 1fr; gap: 40px; }
  .projects--3 .project:nth-child(3) { display: flex; }
  .project h3 { font-size: 22px; }

  .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; }
  .visit-map, .visit-map iframe { min-height: 320px; }
  .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); }
  .band img { aspect-ratio: 2.4 / 1; object-position: 45% 50%; }
  .know-list { grid-template-columns: 1fr; }
  .know-list dt { font-size: 21px; }
  .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; }

  .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; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero-copy > * { animation: none; }
  .call-note[open] { animation: none; }
  .toast { transition: none; }
}