/* Air Grandson — the page is an orthomosaic: frames from above, fitted edge to edge on an 8px gap.
   Direction: "The well-kept board" (tasteskill seed 1843362913). Brand palette kept: near-black and Air Grandson gold. */
:root {
  --ground: #0c0c0b;
  --tile: #171715;
  --tile-2: #201f1c;
  --ink: #eeeeea;
  --soft: #a9a7a0;
  --accent: #c4a84f;
  --accent-strong: #d4ba62;
  --accent-ink: #0c0c0b;
  --paper: #eeeeea;
  --paper-ink: #0c0c0b;
  --rail-1: #2a2823;
  --rail-2: #3a372f;
  --rail-3: #5a523c;
  --rail-4: #9a843b;
  --field: #c4a84f;
  --field-cell: #b0963f;
  --field-cell-focus: #dccb8a;

  --display: "Stack Sans Headline", "Segoe UI", system-ui, sans-serif;
  --text: "Stack Sans Text", "Segoe UI", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 0.95rem + 1vw, 2rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);

  --gap: 8px;
  --m: 10px;
  --pad: clamp(18px, 1.6vw, 24px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--step-body)/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure, blockquote, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: var(--m); z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; text-decoration: none; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { max-width: 68ch; }

h1, h2, h3 { font-family: var(--display); font-weight: 300; letter-spacing: -0.022em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); }
.soft { color: var(--soft); }
.lead { font-size: var(--step-lead); line-height: 1.22; }
.small { font-size: var(--step-small); line-height: 1.45; }
b, strong { font-weight: 500; }

/* the board */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--m); }
.tile { background: var(--tile); padding: var(--pad); min-width: 0; position: relative; overflow: hidden; }
.photo { padding: 0; background: var(--tile-2); }
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.portrait > img, .portrait-row img { object-position: 50% 28%; }
main > * + * { margin-top: var(--gap); }

/* buttons and links */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 20px; background: var(--accent); color: var(--accent-ink); font: 500 var(--step-body)/1 var(--text); text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--t-hover) var(--ease-out); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background-color: var(--accent-strong); }
  .button:hover .arrow { transform: translateX(4px); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- hero: name band and rails ---------- */
.hero { padding-top: var(--m); }
.band { grid-column: 1 / -1; min-height: clamp(110px, 12vw, 170px); display: flex; align-items: center; justify-content: center; padding: 0; background: var(--tile); overflow: hidden; color: var(--ink); text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.mark { display: block; font-family: "Bungee", "Arial Black", Impact, sans-serif; font-weight: 400; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.01em; line-height: 1.12; font-size: min(9.4vw, 150px); }
@media (hover: hover) and (pointer: fine) { a.band:hover { color: var(--accent); } }
.statement h1 { font-size: var(--step-head); margin-bottom: 12px; max-width: 16ch; }
.name-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.name-line > span { display: block; }
.links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.links a { display: block; min-height: 64px; padding: 18px 20px; background: var(--tile); text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.links a[aria-current] { background: var(--ink); color: var(--ground); }
@media (hover: hover) and (pointer: fine) { .links a:not([aria-current]):hover { background: var(--rail-2); } }
.rails { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); height: max(520px, calc(100svh - clamp(110px, 12vw, 170px) - 64px - 3 * var(--gap) - var(--m))); }
.rail-l { grid-column: 1 / 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.facts { font-size: var(--step-small); line-height: 1.4; }
.facts li + li { margin-top: 10px; }
.centre { grid-column: 3 / 11; position: relative; padding: 0; background: var(--tile-2); overflow: hidden; }
.centre > video, .centre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statement { position: absolute; left: 0; bottom: 0; width: min(100%, 760px); background: var(--ground); padding: 24px 28px 28px 24px; }
.statement p { font-family: var(--display); font-weight: 300; font-size: var(--step-lead); line-height: 1.12; letter-spacing: -0.015em; max-width: 24ch; }
.rail-r { grid-column: 11 / 13; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: var(--gap); min-height: 0; }
.rail-r > * { padding: 16px 18px; font-size: var(--step-small); line-height: 1.4; min-height: 0; }
.rail-r > :nth-child(1) { background: var(--rail-1); }
.rail-r > :nth-child(2) { background: var(--rail-2); }
.rail-r > :nth-child(3) { background: var(--rail-3); }
.rail-r > :nth-child(4) { background: var(--rail-4); color: var(--accent-ink); }
.rail-r p b { display: block; font-size: var(--step-body); font-weight: 500; }
.act { background: var(--accent); color: var(--accent-ink); display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; font: 500 var(--step-body)/1.2 var(--text) !important; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.act:active { transform: scale(0.98); }
.act .arrow { width: 28px; height: 28px; align-self: flex-end; }
@media (hover: hover) and (pointer: fine) { .act:hover { background: var(--accent-strong); } .act:hover .arrow { transform: translateX(4px); } }

/* ---------- intro: lead line over four columns ---------- */
.intro { grid-column: 1 / -1; padding: clamp(40px, 6vw, 96px) clamp(20px, 2vw, 32px); }
.intro .lead { max-width: 60ch; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.cols p { font-size: var(--step-body); line-height: 1.5; color: var(--soft); }
.cols p b { color: var(--ink); }
.cols a { color: var(--ink); }

/* ---------- showcase: one image across tiles (the orthomosaic) ---------- */
.ortho { padding-inline: var(--m); }
.ortho-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.ortho-grid > * { aspect-ratio: 1; min-width: 0; overflow: hidden; position: relative; }
.piece { background: var(--tile-2); }
.piece i { position: absolute; inset: 0; background-image: var(--ortho); background-repeat: no-repeat; background-size: 600% 400%; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .piece:hover i { transform: scale(1.08); } }
.ortho-grid .c { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.c-1 { background: var(--tile); }
.c-2 { background: var(--rail-2); }
.c-3 { background: var(--rail-3); }
.c-4 { background: var(--rail-4); color: var(--accent-ink); }
.ortho-grid .act { padding: 16px; }
.ortho-grid h2 { font-size: var(--step-lead); }
.readout { font-family: var(--display); font-weight: 300; font-size: var(--step-lead); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.readout-note { font-size: var(--step-small); line-height: 1.35; }
.alt-control { display: grid; gap: 4px; }
.alt-control label { font-size: var(--step-small); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--rail-2); }
input[type="range"]::-moz-range-track { height: 6px; background: var(--rail-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; background: var(--accent); border: 0; border-radius: 50%; transition: transform var(--t-press) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; background: var(--accent); border-radius: 50%; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.ortho-caption { margin-top: 12px; padding-inline: 4px; font-size: var(--step-small); color: var(--soft); max-width: 60ch; }

/* ---------- list: tabs and banded deliverables ---------- */
.agenda { grid-column: 1 / -1; padding: clamp(40px, 6vw, 96px) clamp(20px, 2vw, 32px); }
.agenda-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.agenda-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; margin-top: 56px; align-items: start; }
.tabs { display: grid; gap: 6px; }
.tabs button { display: block; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left; background: var(--tile-2); color: var(--ink); border: 0; border-radius: 0; font: 400 var(--step-body)/1.2 var(--text); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tabs button span { display: block; margin-top: 4px; font-size: var(--step-small); color: var(--soft); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.tabs button[aria-selected="true"] span { color: #4a4945; }
.tabs button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .tabs button[aria-selected="false"]:hover { background: var(--rail-2); } }
.panel h3 { margin-bottom: 16px; }
.panel + .panel { margin-top: 40px; }
.js .panel[hidden] { display: none; }
.bands { display: grid; gap: 4px; }
.bands li { display: grid; grid-template-columns: 22% minmax(0, 1fr) 24%; align-items: center; gap: 20px; min-height: 76px; padding: 14px 20px; background: var(--tile-2); }
.bands li:nth-child(even) { background: var(--rail-1); }
.fmt { font: 300 var(--step-lead)/1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.what b { display: block; }
.what span { display: block; font-size: var(--step-small); color: var(--soft); margin-top: 2px; }
.who { text-align: right; font-size: var(--step-small); }
.bands li.more { background: var(--accent); color: var(--accent-ink); padding: 0; transition: background-color var(--t-hover) ease; }
.bands li.more a { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; min-height: 76px; padding: 14px 20px; text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .bands li.more:hover { background: var(--accent-strong); } .bands li.more:hover .arrow { transform: translateX(4px); } }

/* ---------- how it works: accordion of tinted panels ---------- */
.how { grid-column: 1 / -1; padding: clamp(40px, 6vw, 96px) clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px); }
.how-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.how-intro h2 { grid-column: 1 / 6; }
.how-intro p { grid-column: 7 / 12; align-self: end; }
.acc { display: flex; height: 520px; margin-top: 64px; }
.stage { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 450ms var(--ease-in-out); }
.stage:nth-child(1) { background: #241f12; }
.stage:nth-child(2) { background: #3b3219; }
.stage:nth-child(3) { background: #5a4b23; }
.stage:nth-child(4) { background: #9a843b; color: var(--accent-ink); }
.stage:nth-child(5) { background: #c4a84f; color: var(--accent-ink); }
.stage.is-open { flex-grow: 5.6; }
.stage > button { position: absolute; inset: 0; width: 100%; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; }
.stage > button span { position: absolute; left: 20px; bottom: 20px; transform-origin: left bottom; transform: rotate(-90deg) translateY(100%); white-space: nowrap; font: 500 var(--step-body)/1 var(--text); transition: opacity var(--t-ui) ease; }
.stage.is-open > button { pointer-events: none; }
.stage.is-open > button span { opacity: 0; }
.stage-body { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.stage.is-open .stage-body { opacity: 1; visibility: visible; transition: opacity 400ms ease 250ms, visibility 0s; }
.stage-text { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; min-width: 0; }
.stage-text h3 { font-size: var(--step-lead); }
.stage-text p { max-width: 36ch; }
.stage-body img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding-block: clamp(16px, 2vw, 32px); }
.marquee-track { display: flex; width: max-content; }
.marquee-track span { flex: none; padding-right: 0.45em; font: 300 min(8vw, 120px)/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.marquee-track span:nth-child(even) { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- gallery: dense masonry sheet ---------- */
.sheet { padding-inline: 12px; padding-bottom: 56px; }
.sheet-statement { margin-left: 50%; max-width: 34ch; font-size: var(--step-lead); line-height: 1.22; padding-block: clamp(40px, 6vw, 96px) 64px; }
.feature { width: calc((100% - 20px) / 3); margin-bottom: 14px; }
.clip video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tile-2); }
.sheet-small { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: start; }
.sheet-small .sheet-statement { grid-column: 1 / -1; }
.sheet-small .clip { grid-column: 1 / 7; width: auto; }
.sheet-small .masonry { grid-column: 7 / -1; columns: 3; }
.case { margin-top: clamp(88px, 9vw, 140px) !important; }
.masonry { columns: 6; column-gap: 4px; }
.masonry figure { break-inside: avoid; margin-bottom: 14px; }
.sheet img { width: 100%; height: auto; background: var(--tile-2); }
.sheet figcaption { margin-top: 6px; font-size: var(--step-small); line-height: 1.3; color: var(--soft); }
.sheet figcaption b { color: var(--ink); font-weight: 400; }

/* ---------- proof: large marks on tiles ---------- */
.marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--m); }
.marks > * { aspect-ratio: 3 / 2; background: var(--tile); padding: 24px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; min-width: 0; }
.marks > :nth-child(even) { background: var(--tile-2); }
.marks .lead-tile { grid-column: span 2; aspect-ratio: auto; background: var(--accent); color: var(--accent-ink); justify-content: space-between; }
.marks .lead-tile h2 { font-size: var(--step-head); }
.marks strong { font: 300 var(--step-lead)/1.05 var(--display); letter-spacing: -0.02em; }
.marks span { font-size: var(--step-small); color: var(--soft); }

/* ---------- about: wide photo, colour tile, facts ---------- */
.about { padding-inline: var(--m); }
.about-top { background: var(--tile); padding: clamp(40px, 6vw, 96px) clamp(20px, 2vw, 32px); }
.about-top .lead { max-width: 46ch; margin-top: 24px; }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.about-photo { grid-column: 1 / 9; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tile-2); }
.about-photo > img { width: 100%; height: 100%; object-fit: cover; }
.note { position: absolute; top: 0; right: 0; width: 320px; background: var(--paper); color: var(--paper-ink); padding: 20px; font-size: var(--step-body); line-height: 1.45; }
.about-side { grid-column: 9 / 13; }
.map-tile { background: var(--rail-4); aspect-ratio: 16 / 10; padding: 16px; }
.map-tile svg { width: 100%; height: 100%; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 20px; font-size: var(--step-small); }
.pairs dt { color: var(--soft); }
.pairs dd { margin: 2px 0 0; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.portrait-row { display: flex; gap: 16px; align-items: center; margin-top: 28px; }
.portrait-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }

/* ---------- contact: photo strip and cell bar ---------- */
.contact { background: var(--field); color: var(--accent-ink); min-height: 80svh; padding: 48px 0 56px; overflow: hidden; margin-inline: var(--m); }
.strip { display: flex; gap: 8px; height: 150px; width: max-content; margin-left: -60px; }
.strip img { height: 100%; width: auto; object-fit: cover; flex: none; }
.strip img:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.strip img:nth-child(3n+2) { aspect-ratio: 1; }
.strip img:nth-child(3n) { aspect-ratio: 3 / 2; }
.contact-inner { padding-inline: clamp(20px, 2vw, 32px); }
.contact h2 { margin-top: 72px; }
.contact .lead { margin-top: 16px; max-width: 44ch; }
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.cells + .cells { margin-top: 8px; }
.cell { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 12px 20px; background: var(--field-cell); transition: background-color var(--t-hover) ease; }
.cell:focus-within { background: var(--field-cell-focus); }
.cell label { font-size: var(--step-small); }
.cell input, .cell select, .cell textarea { width: 100%; border: 0; border-radius: 0; background: transparent; color: var(--accent-ink); font: 400 var(--step-body)/1.3 var(--text); padding: 4px 0 0; outline: none; }
.cell textarea { resize: vertical; min-height: 28px; height: 28px; }
.cell input::placeholder, .cell textarea::placeholder { color: #4d421c; }
.cell select option { background: var(--paper); color: var(--paper-ink); }
.cells button { min-height: 96px; border: 0; border-radius: 0; background: var(--accent-ink); color: var(--ink); font: 500 var(--step-body)/1 var(--text); cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 12px; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.cells button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .cells button:hover { background: #2a2923; } .cells button:hover .arrow { transform: translateX(4px); } }
.fine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; font-size: var(--step-small); }
.fine p:last-child { grid-column: 3; }
.thanks { display: none; margin-top: 40px; padding: 28px; background: var(--field-cell); }
.thanks p { font-size: var(--step-lead); line-height: 1.25; }
.sent form { display: none; }
.sent .thanks { display: block; }

/* ---------- footer: a board of tiles ---------- */
.foot { padding: var(--gap) var(--m) var(--m); }
.foot-top, .foot-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.foot-bottom { margin-top: var(--gap); }
.foot-top > * { background: var(--tile); padding: 20px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.foot-statement { grid-column: 1 / 4; }
.foot-statement > p:first-child { max-width: 28ch; }
.foot-nav { grid-column: 4 / 7; background: var(--tile-2) !important; }
.foot-nav li + li { margin-top: 2px; }
.foot-nav a { text-decoration: none; }
.foot-mail { grid-column: 7 / 10; }
.foot-mail a { overflow-wrap: anywhere; }
.wordmark { grid-column: 1 / -1; min-height: 320px; background: var(--ink); color: var(--ground); display: grid; place-items: center; overflow: hidden; }
.wordmark span { font: 300 min(clamp(100px, 13.6vw, 260px), calc(212vw / 12))/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; }
.invite { grid-column: 10 / 13; min-height: 220px; background: var(--accent); color: var(--accent-ink); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: background-color var(--t-hover) ease; }
.invite span { font: 300 var(--step-lead)/1.1 var(--display); letter-spacing: -0.015em; }
.invite svg { width: 64px; height: 64px; align-self: flex-end; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .invite:hover { background: var(--accent-strong); } .invite:hover svg { transform: translate(6px, -6px); } }

/* ---------- service pages ---------- */
.svc-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--m); }
.svc-tiles .svc-head { grid-column: 1 / -1; background: var(--tile); padding: clamp(40px, 5vw, 72px) clamp(20px, 2vw, 32px); }
.svc-tiles a { position: relative; display: block; min-height: 380px; overflow: hidden; text-decoration: none; background: var(--tile-2); color: var(--ink); }
.svc-tiles a:nth-of-type(1) { grid-column: span 6; }
.svc-tiles a:nth-of-type(2), .svc-tiles a:nth-of-type(3) { grid-column: span 3; }
.svc-tiles a:nth-of-type(4) { grid-column: span 4; }
.svc-tiles a:nth-of-type(5) { grid-column: span 8; }
.svc-tiles img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-soft); }
.svc-tiles .label { position: absolute; left: 0; bottom: 0; background: var(--ground); padding: 16px 20px; display: flex; gap: 16px; align-items: center; max-width: 100%; }
.svc-tiles .label b { font: 300 var(--step-lead)/1.1 var(--display); }
@media (hover: hover) and (pointer: fine) { .svc-tiles a:hover img { transform: scale(1.04); } .svc-tiles a:hover .arrow { transform: translateX(4px); } }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--m); }
.case > * { background: var(--tile); padding: clamp(20px, 2vw, 32px); min-width: 0; }
.case-head { grid-column: 1 / 7; background: var(--rail-4) !important; color: var(--accent-ink); min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.case-num { grid-column: 7 / 13; display: flex; flex-direction: column; justify-content: space-between; }
.case-num strong { font: 300 min(14.4vw, 260px)/0.9 var(--display); letter-spacing: -0.04em; }
.case-part { grid-column: span 4; }
.case-part b { display: block; font: 300 var(--step-lead)/1.1 var(--display); margin-bottom: 8px; }
.case-part p { color: var(--soft); }

/* ---------- legal pages and 404 ---------- */
.doc { grid-column: 1 / -1; padding: clamp(40px, 6vw, 96px) clamp(20px, 2vw, 32px); }
.doc h1 { font-size: var(--step-head); max-width: 18ch; }
.doc > .lead { margin-top: 24px; max-width: 48ch; }
.prose { margin-top: clamp(40px, 5vw, 72px); max-width: 68ch; }
.prose h2 { font-size: var(--step-lead); margin: 48px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p + p, .prose ul { margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: 6px; }
.prose .lost { list-style: none; padding: 0; display: grid; gap: 8px; font-size: var(--step-lead); }

/* ---------- form states and spam trap ---------- */
.form-note { margin: 32px 0 12px; }
.err { min-height: 0; font-size: var(--step-small); font-weight: 500; color: #5c0f0f; }
.err:empty { display: none; }
.cell.has-error { background: #e6d48f; box-shadow: inset 4px 0 0 #5c0f0f; } /* taste-skill-ignore */
.form-status { margin-top: 12px; font-weight: 500; color: #5c0f0f; }
.form-status:empty { display: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore */
.thanks:focus { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.thanks a { color: inherit; }

/* ---------- cookie consent ---------- */
.consent { position: fixed; z-index: 60; left: var(--m); right: var(--m); bottom: var(--m); max-width: 560px; margin-left: auto; background: var(--paper); color: var(--paper-ink); padding: 20px; display: grid; gap: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore */
.consent[hidden] { display: none; }
.consent .link { color: inherit; text-decoration-color: currentColor; }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.consent .button { min-height: 48px; }
.button-quiet { background: var(--paper-ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .button-quiet:hover { background: #2a2923; } }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.legal { margin-top: 12px; line-height: 2; }
.legal a, .legal .link-button { display: inline-block; min-height: 28px; padding-block: 4px; }

/* ---------- pause motion ---------- */
.motion-toggle { position: absolute; top: 12px; right: 12px; z-index: 2; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 0; background: var(--ground); color: var(--ink); font: 500 var(--step-small)/1 var(--text); cursor: pointer; transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover { background: var(--rail-2); } }
.paused .marquee-track, .paused .centre > img.drift { animation-play-state: paused !important; }

/* ---------- motion layer ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .name-line > span { transform: translateY(105%); animation: line-up 1000ms var(--ease-out) 100ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
 .js .shutter > img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
 .js .shutter.is-in > img { transform: none; }
  .js .ortho-grid > * { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 28ms); }
  .js .ortho-grid:not(.is-in) > * { opacity: 0; transform: scale(0.94); }
  .js .bands li { transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), background-color var(--t-hover) ease; transition-delay: calc(var(--d, 0) * 60ms); }
  .js .bands:not(.is-in) li { opacity: 0; transform: translateX(-16px); }
  .centre > img.drift { animation: slow-scale 24s var(--ease-soft) both alternate infinite; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip { animation: strip-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .about-photo > img { animation: photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes slow-scale { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes strip-drift { from { transform: translateX(0); } to { transform: translateX(-18%); } }
@keyframes photo-drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
@media (prefers-reduced-motion: reduce) {
  .stage { transition: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .rails { height: auto; }
  .rail-l { grid-column: 1 / 4; }
  .centre { grid-column: 4 / 13; min-height: 560px; }
  .rail-r { order: -1; grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); }
  .rail-r > * { min-height: 128px; }
  .cols { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .agenda-body { grid-template-columns: 1fr; gap: 24px; }
  .how-intro h2, .how-intro p { grid-column: 1 / -1; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bands li { grid-template-columns: 28% minmax(0, 1fr); }
  .who { grid-column: 2; text-align: left; }
  .masonry { columns: 4; }
  .sheet-statement { margin-left: 40%; }
  .about-photo { grid-column: 1 / -1; }
  .about-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .pairs { margin-top: 0; }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top > * { grid-column: span 6 !important; }
  .svc-tiles a { grid-column: span 6 !important; }
  .case-head, .case-num { grid-column: 1 / -1; }
}

/* ---------- phone: its own board, two columns ---------- */
@media (max-width: 700px) {
  :root { --gap: 6px; --m: 8px; }
  .band { min-height: 110px; }
  .mark { font-size: 9.2vw; }
  .links { grid-template-columns: 1fr 1fr; }
  .links a { min-height: 56px; padding: 14px 16px; }
  .rails { display: flex; flex-direction: column; }
  .centre { order: 1; min-height: 0; display: flex; flex-direction: column; }
  .centre > video, .centre > img { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; }
  .statement { position: static; width: 100%; padding: 18px 16px 20px; }
  .statement p { font-size: 6vw; }
  .rail-r { order: 2; grid-template-columns: 1fr 1fr; }
  .rail-r > * { min-height: 96px; padding: 14px; }
  .rail-r .act { grid-column: 1 / -1; min-height: 72px; flex-direction: row; align-items: center; }
  .rail-l { order: 3; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .rail-l .photo { aspect-ratio: 1; }
  .intro .lead { font-size: 20px; }
  .cols { grid-template-columns: 1fr; gap: 32px; }
  .ortho-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piece i { background-size: 300% 600%; }
  .ortho-grid .wide-m { grid-column: span 2; aspect-ratio: auto; }
  .ortho-grid .hide-m { display: none; }
  .ortho-grid h2 { font-size: 6vw; }
  .readout { font-size: 7vw; }
  .tabs { grid-template-columns: 1fr 1fr; }
  .bands li { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .who { grid-column: auto; }
  .how-intro h2, .how-intro p { grid-column: 1 / -1; }
  .acc { flex-direction: column; height: auto; margin-top: 40px; }
  .stage { flex: none; }
  .stage > button { position: relative; display: block; text-align: left; }
  .stage > button span { position: static; transform: none; display: block; padding: 22px 16px; }
  .stage.is-open > button { display: none; }
  .stage-body { position: static; display: none; grid-template-columns: 1fr; opacity: 1; visibility: visible; }
  .stage.is-open .stage-body { display: grid; }
  .stage-body img { aspect-ratio: 16 / 10; height: auto; }
  .stage-text { padding: 20px 16px; gap: 16px; }
 .masonry { columns: 3; }
  .feature { width: 100%; }
  .sheet-small .clip, .sheet-small .masonry { grid-column: 1 / -1; }
  .sheet figcaption .type { display: none; }
  .sheet-statement { margin-left: 0; max-width: none; padding-bottom: 32px; }
  .marks > * { padding: 16px; }
  .marks .lead-tile { grid-column: 1 / -1; min-height: 120px; }
 .about-top h2 { font-size: 9vw; }
  .about-photo { aspect-ratio: auto; overflow: visible; }
  .about-photo > img { aspect-ratio: 4 / 3; height: auto; }
  .note { position: static; width: auto; }
  .about-side { grid-template-columns: 1fr; }
  .map-tile { aspect-ratio: 3 / 2; }
  .strip { height: 110px; }
  .contact h2 { font-size: 9vw; }
  .cells { grid-template-columns: 1fr; }
  .cell { min-height: 60px; }
  .cells button { min-height: 60px; }
  .fine { grid-template-columns: 1fr; }
  .fine p:last-child { grid-column: auto; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top > * { grid-column: span 1 !important; min-height: 160px; }
  .foot-statement { order: 4; grid-column: 1 / -1 !important; }
  .invite { order: -1; grid-column: 1 / -1 !important; }
  .foot-bottom { display: flex; flex-direction: column-reverse; }
  .wordmark { min-height: 160px; }
  .invite { min-height: 160px; }
  .svc-tiles a { grid-column: 1 / -1 !important; min-height: 260px; }
  .case-part { grid-column: 1 / -1; }
}