/* Sitework - general contractor theme. All colours, fonts and sizes are tokens here in :root.
   Colours: the page takes the colour of the section in the middle of the screen. Sections pick one with
   data-bg="night | concrete | hat | signal"; text and accent for each are set in js/main.js (SCHEME). */
:root {
  --night: #141414;       /* site at night */
  --concrete: #d9d6cf;    /* poured concrete */
  --hat: #ffc81e;         /* hard hat yellow */
  --signal: #ff6a13;      /* signal orange */
  --light: #e7e4dd;       /* text on dark */
  --charcoal: #1c1c1a;    /* text on light */

  --bg: var(--night);
  --fg: var(--light);
  --accent: var(--hat);
  --on-accent: var(--charcoal);
  --muted: color-mix(in srgb, var(--fg) 64%, var(--bg));
  --line: color-mix(in srgb, var(--fg) 18%, transparent);
  --dark: var(--night);   /* footer and menu */
  --on-dark: var(--light);
  --pit: #0b0b0a;         /* the black gap the next project rises out of */

  --head: "Anybody", "Arial Black", sans-serif;
  --head-weight: 900;
  --head-stretch: 125%;
  --head-case: uppercase;
  --head-track: -.045em;
  --head-lh: .92;
  --text: "Public Sans", system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, monospace;

  --radius: 0;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1680px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --snap: cubic-bezier(.7, 0, .15, 1); /* hero entrances: firm start, firm stop */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); transition: background-color .7s ease; }
body { margin: 0; color: var(--fg); font: 400 17px/1.55 var(--text); overflow-x: clip; transition: color .7s ease; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.head { font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); text-transform: var(--head-case);
  letter-spacing: var(--head-track); line-height: var(--head-lh); overflow-wrap: break-word; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.label { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-top: clamp(80px, 11vw, 168px); padding-bottom: clamp(80px, 11vw, 168px); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; }
.skip:focus { top: 12px; }

/* buttons */
/* raised 3D slab (soft UI): light from the top left, shadow to the bottom right; pressed = pushed into the surface */
.btn, .nav-cta, .menu-btn, .chip { --raise: 6px 6px 14px rgba(0, 0, 0, .38), -3px -3px 10px rgba(255, 255, 255, .12),
    inset 2px 2px 1px rgba(255, 255, 255, .42), inset -3px -3px 6px rgba(0, 0, 0, .2);
  --press: inset 4px 4px 10px rgba(0, 0, 0, .38), inset -3px -3px 8px rgba(255, 255, 255, .22);
  box-shadow: var(--raise); background-image: linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(0, 0, 0, .14));
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover, .nav-links .nav-cta:hover, .menu-btn:hover, .chip:hover { transform: translateY(-2px);
  box-shadow: 9px 10px 20px rgba(0, 0, 0, .42), -3px -3px 10px rgba(255, 255, 255, .14), inset 2px 2px 1px rgba(255, 255, 255, .48), inset -3px -3px 6px rgba(0, 0, 0, .2); }
.btn:active, .nav-links .nav-cta:active, .menu-btn:active { transform: translateY(1px); box-shadow: var(--press); background-image: linear-gradient(145deg, rgba(0, 0, 0, .12), rgba(255, 255, 255, .1)); }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--radius);
  font: 500 14px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.btn-accent { background-color: var(--accent); color: var(--on-accent); }
.btn-ghost { background-color: rgba(255, 255, 255, .1); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.link { text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.link:hover { color: var(--accent); }

/* header */
.header { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter); color: #fff; transition: background .3s, color .3s; }
.header.solid { background: var(--bg); color: var(--fg); box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: var(--head-weight) 26px/1 var(--head); font-stretch: var(--head-stretch);
  text-transform: uppercase; text-decoration: none; letter-spacing: .02em; }
.logo-mark { width: 14px; height: 14px; background: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 28px; font: 500 14px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nav-links a { text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--accent); }
.nav-cta { padding: 12px 16px; background-color: var(--accent); color: var(--on-accent); }
.nav-links .nav-cta:hover { color: var(--on-accent); }
.menu-btn { display: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius); background-color: rgba(255, 255, 255, .1); color: inherit;
  font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: 35; background: var(--dark); color: var(--on-dark); padding: 110px var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: var(--head-weight) clamp(40px, 11vw, 72px)/1 var(--head); font-stretch: var(--head-stretch); text-transform: uppercase; text-decoration: none; }
.menu nav a[aria-current] { color: var(--accent); }
.menu-foot { display: flex; flex-direction: column; gap: 10px; }
.menu-foot a { text-decoration: none; }
.menu-open .header { color: var(--on-dark); background: transparent; box-shadow: none; }
@media (max-width: 980px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}

/* ===== THE PIT (signature): the photo cracks down the middle, the halves slide apart,
   and the next project rises out of the dark gap. Without motion the frames simply stack. ===== */
.pit { position: relative; background: var(--pit); color: #fff; }
.pit-frame { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.pit-photo { position: absolute; inset: 0; }
.pit-photo img { width: 100%; height: 100%; object-fit: cover; }
.pit-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .35)); }
.pit-cap { position: absolute; inset: auto 0 0; z-index: 2; padding-bottom: clamp(28px, 5vw, 64px); }
.pit-hero .pit-cap { top: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 110px; }
.kicker { color: rgba(255, 255, 255, .8); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 10px; height: 10px; background: var(--accent); }
/* sized by width AND height, so the four lines always fit between the header and the buttons */
.hero-title { font-size: clamp(38px, min(13vw, (100svh - 330px) / 3.75), 240px); max-width: 11ch; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.hero-text { max-width: 440px; font-size: 18px; color: rgba(255, 255, 255, .88); }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pit-no { color: var(--accent); margin-bottom: 14px; }
.pit-name { font-size: clamp(34px, 10.5vw, 170px); }
.pit-name a { text-decoration: none; }
.pit-name a:hover { color: var(--accent); }
.pit-data { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px 48px; margin-top: 24px; }
.pit-data dt { color: rgba(255, 255, 255, .6); margin-bottom: 4px; }
.pit-mark { display: none; }

.motion .pit { height: calc(var(--frames, 5) * 140vh - 40vh); }
.motion .pit-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 560px; overflow: hidden; }
/* the stage is as tall as the screen WITHOUT the phone address bar, so no dark strip shows when the bar hides and nothing
   resizes while scrolling; the text keeps clear of the bar */
.motion .pit-cap { bottom: calc(100lvh - 100svh); }
.motion .pit-frame { position: absolute; inset: 0; height: auto; min-height: 0; overflow: visible; visibility: hidden; }
.motion .pit-frame.on { visibility: visible; }
.motion .pit-frame .pit-photo { overflow: hidden; will-change: transform; }
.motion .pit-frame .half-l { clip-path: inset(0 50% 0 0); }
.motion .pit-frame .half-r { clip-path: inset(0 0 0 50%); }
.motion .pit-frame .half-r::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 1px; background: rgba(255, 255, 255, .25); z-index: 1; }
.motion .pit-frame::after { z-index: 1; opacity: var(--veil, 1); }
.motion .pit-cap { will-change: opacity, transform; }
.motion .pit-mark { display: block; position: absolute; left: 50%; top: 50%; z-index: 30; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--accent); opacity: 0; pointer-events: none; }

/* text over photos: a soft dark glow keeps it readable on any photo the buyer puts in */
.pit-cap, .header:not(.solid) .logo, .header:not(.solid) .nav-links a:not(.nav-cta), .header:not(.solid) .menu-btn {
  text-shadow: 0 0 2px rgba(0, 0, 0, .35), 0 0 18px rgba(0, 0, 0, .45), 0 0 42px rgba(0, 0, 0, .3); }
.pit-cap .btn { text-shadow: none; }

/* ===== INTRO (Home, every load): the same idea as the pit. A dark ground, a crack runs down from the marker,
   the ground opens left and right and the site photo settles; then the title slides in (see ENTRANCES). ===== */
.opening { display: none; }
.motion .opening { display: block; position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.motion .opening-l, .motion .opening-r { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--pit); animation: intro-open 1s cubic-bezier(.7, 0, .2, 1) 1s both; }
.motion .opening-l { left: 0; --x: -100%; }
.motion .opening-r { right: 0; --x: 100%; }
.motion .opening-crack { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent);
  animation: intro-mark .45s var(--ease) .15s both, intro-crack .45s cubic-bezier(.7, 0, .3, 1) .6s both, intro-gone .3s linear 1.15s both; }
.motion .pit-hero .pit-photo img { animation: intro-settle 1.8s var(--ease) 1s both; }
/* ENTRANCES, every page: solid blocks, no fading or stretching. The header drops from the top, the title (with its kicker)
   comes in from beyond the right edge, text and buttons come up from below the screen. On scroll main.js takes them out again. */
.motion .header { animation: in-down .8s var(--snap) .1s backwards; }
.motion .home .header { animation-delay: 1.9s; }
.motion :where(.pit-hero .kicker, .hero-title, .page-head .kicker, .page-title, .lost .kicker, .lost-title,
  .page .pit-frame:first-child :is(.pit-no, .pit-name)) { animation: in-side 1s var(--snap) .2s backwards; }
.motion .home :is(.pit-hero .kicker, .hero-title) { animation-delay: 1.25s; }
.motion :where(.hero-foot, .page-head .page-lead, .lost .page-lead, .lost .hero-btns, .page .pit-frame:first-child .pit-data) {
  animation: in-up 1s var(--snap) .4s backwards; }
.motion .home .hero-foot { animation-delay: 1.55s; }
.motion :is(.hero-title, .pit-name, .pit-sum, .pit-no, .kicker) { will-change: transform; }
@keyframes intro-mark { from { transform: scale(0); } to { transform: none; } }
@keyframes intro-crack { from { height: 14px; top: 50%; width: 14px; margin-left: -7px; } to { height: 100%; top: 0; margin-top: 0; width: 2px; margin-left: -1px; } }
@keyframes intro-gone { to { opacity: 0; } }
@keyframes intro-open { to { transform: translateX(var(--x)); } }
@keyframes intro-settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes in-side { from { transform: translateX(100vw); } }
@keyframes in-up { from { transform: translateY(100vh); } }
@keyframes in-down { from { transform: translateY(-100%); } }

/* numbers */
.numbers { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.num { border-top: 3px solid var(--fg); padding-top: 18px; }
.num { min-width: 0; }
.num-v { font-size: clamp(64px, 7vw, 120px); flex-wrap: wrap; display: flex; align-items: baseline; gap: 8px; }
.num-v small { font: 500 14px/1 var(--mono); letter-spacing: .06em; color: var(--accent); }
.num-k { color: var(--muted); margin-top: 12px; }
@media (max-width: 760px) { .numbers-grid { grid-template-columns: 1fr 1fr; } .num-v { font-size: clamp(40px, 12vw, 64px); flex-wrap: wrap; } }

/* intro */
.intro-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; }
.intro-text { font-size: clamp(24px, 3vw, 44px); line-height: 1.22; font-weight: 500; letter-spacing: -.01em; max-width: 24ch; }
@media (max-width: 760px) { .intro-grid { grid-template-columns: 1fr; } }

/* section heads */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-title { font-size: clamp(34px, 9vw, 144px); }
.sec-note { max-width: 420px; color: var(--muted); }

/* services: number, text, two photos per row */
.service { display: grid; grid-template-columns: 80px 1.1fr 1.4fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service-no { color: var(--accent); }
.service-title { font-size: clamp(24px, 4.4vw, 60px); margin-bottom: 16px; }
.service-body p { max-width: 460px; color: var(--muted); }
.service-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; gap: 16px; }
}

/* phases as a Gantt chart: bar position and length come from the data (weeks of a 100 unit programme) */
.gantt { border-top: 3px solid var(--fg); }
.gantt-scale { display: grid; grid-template-columns: 220px 1fr 240px; gap: 0 24px; color: var(--muted); padding: 12px 0; }
.gantt-ticks { display: flex; justify-content: space-between; }
.gantt-row { display: grid; grid-template-columns: 220px 1fr 240px; gap: 0 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.gantt-name { font-weight: 600; }
.gantt-name .mono { color: var(--accent); margin-right: 8px; }
.gantt-track { position: relative; height: 22px; background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 18)); }
.gantt-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc(var(--b) * 1%); background: var(--fg); transform-origin: left; }
.gantt-row:nth-child(even) .gantt-bar { background: var(--accent); }
.gantt-text { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) {
  .gantt-scale { grid-template-columns: 1fr; }
  .gantt-scale > span { display: none; }
  .gantt-row { grid-template-columns: 1fr; gap: 8px; }
}

/* safety */
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.safety-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.safety-days { white-space: nowrap; font-size: clamp(64px, 11vw, 190px); color: var(--accent); margin: 16px 0 20px; }
.safety-text { max-width: 440px; font-size: 18px; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 36px; }
.certs li { padding: 14px 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .safety-grid { grid-template-columns: 1fr; } .certs { grid-template-columns: 1fr; } }

/* client voice */
.voice-grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.voice-quote p { font-size: clamp(40px, 5.4vw, 88px); text-transform: none; line-height: .98; }
.voice-quote footer { margin-top: 28px; color: var(--muted); }
.clients ul { margin-top: 16px; }
.clients li { padding: 12px 0; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .voice-grid { grid-template-columns: 1fr; } }

/* footer */
.footer { background: var(--dark); color: var(--on-dark); padding: clamp(72px, 9vw, 128px) 0 28px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.footer-ask { font-size: clamp(30px, 6vw, 96px); max-width: 14ch; min-width: 0; }
.footer .btn-accent:hover { color: var(--on-accent); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: clamp(56px, 7vw, 96px); padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .16); }
.footer-cols .label { margin-bottom: 12px; }
.footer-cols p { margin-bottom: 4px; }
/* the name fills the column exactly: main.js scales it from its measured width ([data-fit]); this size is only the start */
.footer-mark { font-size: clamp(40px, 12vw, 240px); line-height: .8; margin-top: clamp(56px, 7vw, 96px); color: var(--accent); white-space: nowrap; }
.footer-mark span { display: inline-block; padding-inline: .02em; }
.footer-small { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; color: color-mix(in srgb, var(--on-dark) 55%, transparent); font-size: 12px; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-cols > div { min-width: 0; overflow-wrap: anywhere; }

/* back to top */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); border-radius: var(--radius); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }

/* calm reveal: blocks rise a little from below once */
.motion .rise { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion .rise.in { opacity: 1; transform: none; }
.motion .gantt .gantt-bar { transform: scaleX(0); transition: transform 1s var(--ease); }
.motion .gantt.in .gantt-bar { transform: none; }
.motion .gantt.in .gantt-row:nth-child(3) .gantt-bar { transition-delay: .1s; }
.motion .gantt.in .gantt-row:nth-child(4) .gantt-bar { transition-delay: .2s; }
.motion .gantt.in .gantt-row:nth-child(5) .gantt-bar { transition-delay: .3s; }
.motion .gantt.in .gantt-row:nth-child(6) .gantt-bar { transition-delay: .4s; }
.motion .gantt.in .gantt-row:nth-child(7) .gantt-bar { transition-delay: .5s; }

@media (max-width: 760px) {
  .pit-data { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .hero-btns .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== INNER PAGES ===== */
.page-head { padding: clamp(140px, 16vw, 220px) 0 clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.page-head .wrap { display: grid; gap: 28px; }
.page-head .kicker, .lost .kicker { color: var(--muted); margin-bottom: 0; }
.page-title { font-size: clamp(46px, 11vw, 200px); max-width: 12ch; }
.page-lead { max-width: 560px; font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); justify-self: end; }
.page-head-short .page-title { font-size: clamp(42px, 8vw, 140px); }
@media (max-width: 760px) { .page-lead { justify-self: start; } }

/* chips: raised slabs that get pushed in when chosen (filter buttons, form choices) */
.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--bg) 82%, #fff); color: var(--fg); font: 500 13px/1 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; }
.chip[aria-pressed="true"], .chip:has(input:checked) { background-color: var(--accent); color: var(--on-accent); box-shadow: var(--press); transform: translateY(1px); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 5vw, 64px); }

/* project cards: a plain grid, rows fill left to right */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(48px, 5vw, 80px) clamp(24px, 3vw, 48px); }
.card[hidden] { display: none; }
.card a { display: block; text-decoration: none; }
.card-photo { overflow: hidden; border-radius: var(--radius); }
.card-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.card a:hover .card-photo img { transform: scale(1.04); }
.card-no { color: var(--accent); margin-top: 20px; }
.card-name { font-size: clamp(28px, 3.4vw, 52px); margin-top: 10px; }
.card a:hover .card-name { color: var(--accent); }
.card-text { color: var(--muted); margin-top: 10px; max-width: 46ch; }
.card-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.card-data dt { color: var(--muted); margin-bottom: 4px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* project page */
.pit-sum { font-size: clamp(26px, 4.2vw, 68px); max-width: 20ch; text-transform: none; line-height: 1; }

/* the site board: the sign on a site hoarding. It stays a physical sign (light board, dark letters) whatever the section colour */
.board { --ink: var(--charcoal); background-color: #f3f1ea; color: var(--ink); border: 4px solid var(--ink); border-radius: var(--radius);
  box-shadow: 10px 12px 30px rgba(0, 0, 0, .28);
  background-image: radial-gradient(circle, #9a978f 3px, transparent 4px), radial-gradient(circle, #9a978f 3px, transparent 4px),
    radial-gradient(circle, #9a978f 3px, transparent 4px), radial-gradient(circle, #9a978f 3px, transparent 4px);
  background-size: 24px 24px; background-repeat: no-repeat; background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px); }
.board-band { background: var(--hat); color: var(--ink); padding: 14px 24px; border-bottom: 4px solid var(--ink); font-weight: 500; }
.board-name { font-size: clamp(24px, 4.6vw, 72px); padding: 24px 24px 20px; }
.board-rows > div { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 16px; padding: 12px 24px; border-top: 1px solid rgba(0, 0, 0, .14); }
.board-rows dt { color: #6b6860; padding-top: 3px; }
.board-rows dd { font-weight: 600; }
.board-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 30px 24px 14px; margin-top: 8px;
  background: repeating-linear-gradient(-45deg, var(--hat) 0 14px, var(--ink) 14px 28px) top / 100% 14px no-repeat; }
.board-wide .board-rows { display: grid; grid-template-columns: repeat(3, 1fr); }
.board-wide .board-rows > div { grid-template-columns: 1fr; gap: 4px; }
@media (max-width: 860px) { .board-wide .board-rows { grid-template-columns: 1fr; } .board-wide .board-rows > div { grid-template-columns: minmax(120px, 40%) 1fr; } }
@media (max-width: 440px) { .board-rows > div, .board-wide .board-rows > div { grid-template-columns: 1fr; gap: 2px; } }

.story-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; }
.story-text p { font-size: clamp(20px, 2vw, 28px); line-height: 1.45; max-width: 52ch; }
.story-text p + p { margin-top: 1em; }
@media (max-width: 760px) { .story-grid { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.split-text .label { margin-bottom: 24px; }
.split-text p:not(.label) { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; max-width: 50ch; }
.split-text p + p { margin-top: 1em; }
.split .board { position: sticky; top: 100px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .board { position: static; } }

/* site diary / year by year */
.log .sec-title { margin-bottom: clamp(32px, 4vw, 56px); }
.log-list { list-style: none; padding: 0; margin: 0; border-bottom: 3px solid var(--fg); }
.log-list li { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 3px solid var(--fg); }
.log-t { font-size: clamp(20px, 2.2vw, 32px); font-weight: 500; line-height: 1.25; }
@media (max-width: 600px) { .log-list li { grid-template-columns: 1fr; gap: 6px; } }

/* photos from site: a grid, rows fill left to right */
.shots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.shots-b { grid-template-columns: repeat(3, 1fr); }
.shots-b .shot:first-child { grid-column: 1 / -1; }
.shots-b .shot:first-child img { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .shots-grid, .shots-b { grid-template-columns: 1fr; } .shots-b .shot:first-child img { aspect-ratio: 4 / 3; } }

.next-link { position: relative; display: block; height: clamp(340px, 50vw, 640px); overflow: hidden; color: #fff; text-decoration: none; background: var(--pit); }
.next-photo { position: absolute; inset: 0; }
.next-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform 1s var(--ease), filter .6s; }
.next-link:hover .next-photo img { transform: scale(1.04); filter: brightness(.7); }
.next-cap { position: absolute; inset: auto 0 0; margin-inline: auto; display: flex; flex-direction: column; gap: 14px;
  padding-bottom: clamp(28px, 5vw, 64px); text-shadow: 0 0 2px rgba(0, 0, 0, .35), 0 0 18px rgba(0, 0, 0, .45), 0 0 42px rgba(0, 0, 0, .3); }
.next-cap .mono { color: var(--hat); }
.next-name { font-size: clamp(36px, 8.5vw, 150px); }

/* services page */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 5vw, 80px); padding: clamp(40px, 5vw, 72px) 0; border-top: 3px solid var(--fg); }
.svc:last-child { border-bottom: 3px solid var(--fg); }
.svc-head { grid-column: 1; }
.svc-title { font-size: clamp(24px, 3.6vw, 64px); margin-top: 12px; }
.svc-body { grid-column: 2; grid-row: 1 / span 2; }
.svc-body p { color: var(--muted); max-width: 54ch; }
.svc-body .svc-lead { color: var(--fg); font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; line-height: 1.4; margin-bottom: 16px; }
.svc-photos { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: end; }
.svc-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 28px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } .svc-head, .svc-body, .svc-photos { grid-column: 1; grid-row: auto; } }
@media (max-width: 480px) { .ticks { grid-template-columns: 1fr; } }

/* questions and open roles: rows that open */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 32px clamp(32px, 5vw, 80px); }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 500 22px/1 var(--mono); color: var(--accent); transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--accent); }
.qa > p { color: var(--muted); max-width: 60ch; padding-bottom: 24px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.role summary { align-items: center; }
.role-title { font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); text-transform: uppercase;
  font-size: clamp(22px, 2.8vw, 44px); line-height: 1; flex: 1; min-width: 0; }
.role-meta { color: var(--muted); font-weight: 400; }
.role-body { padding-bottom: 32px; }
.role-body p { color: var(--muted); max-width: 60ch; margin-bottom: 24px; }
@media (max-width: 600px) { .role summary { flex-wrap: wrap; gap: 8px 24px; } .role-meta { order: 3; flex-basis: 100%; } }

/* about */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.person-name { font-size: clamp(20px, 1.8vw, 28px); margin-top: 16px; }
.person-role { color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr 1fr; } }

/* careers */
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; margin-top: 28px; }
.perk { border-top: 3px solid var(--fg); padding-top: 18px; }
.perk-title { font-size: clamp(22px, 2.2vw, 34px); margin: 12px 0; }
.perk p:last-child { color: var(--muted); }
@media (max-width: 860px) { .perk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .perk-grid { grid-template-columns: 1fr; } }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.band-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.band-body p { font-size: 18px; max-width: 46ch; margin: 24px 0 32px; }
@media (max-width: 760px) { .band-grid { grid-template-columns: 1fr; } }

/* quote form */
.ask-grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.form fieldset { border: 0; padding: 0; margin: 0 0 36px; min-width: 0; }
.form legend { padding: 0; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field .label { display: block; margin-bottom: 6px; }
.input { width: 100%; padding: 12px 0; border: 0; border-bottom: 2px solid var(--fg); border-radius: 0; background: transparent; color: inherit;
  font: 400 18px/1.4 var(--text); transition: border-color .2s; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); }
textarea.input { resize: vertical; min-height: 140px; }
.field-error { display: none; color: var(--accent); margin-top: 8px; text-transform: none; letter-spacing: 0; }
.field.bad .field-error { display: block; }
.field.bad .input { border-color: var(--accent); }
.form-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.form-note { font-weight: 500; }
.ask-side .label { margin: 40px 0 14px; }
.ask-side .label:first-child { margin-top: 0; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.steps .mono { color: var(--accent); padding-top: 4px; }
.ask-contact { font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.ask-contact a { text-decoration: none; }
.ask-contact a:hover { color: var(--accent); }
.ask-hours { color: var(--muted); margin-top: 10px; }
@media (max-width: 860px) { .ask-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* 404 */
.lost { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px 0 80px; }
.lost-title { font-size: clamp(44px, 11vw, 190px); max-width: 10ch; margin: 18px 0 24px; }
.lost .hero-btns { margin-top: 36px; }
/* grid children may shrink below their longest word (long names in the wide heading font) */
.svc > *, .split > *, .band-grid > *, .safety-grid > *, .story-grid > *, .ask-grid > *, .faq-grid > *, .voice-grid > *, .intro-grid > * { min-width: 0; }
@media (max-width: 860px) { .svc-title { font-size: clamp(24px, 7.4vw, 60px); } }
.faq-list { width: 100%; max-width: 980px; justify-self: end; }
.nav-links .nav-cta[aria-current] { color: var(--on-accent); }
.band-body .sec-title { font-size: clamp(34px, 5.4vw, 104px); }
/* evened headings (main.js): screen readers get the plain text, words never break inside */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wd { display: inline-block; white-space: nowrap; letter-spacing: 0; } /* the spacing comes from main.js, not from tracking */
/* "Copied" note next to a clicked e-mail link (main.js) */
.copied-tip { position: absolute; z-index: 60; padding: 6px 9px; background: var(--accent); color: var(--on-accent); font: 500 11px/1 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.copied-tip.on { opacity: 1; transform: none; }
/* project pages: the way back to all projects, above the project name */
.crumb { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.crumb:hover { color: #fff; }