/* ==========================================================================
   Form PPF — Eastbourne, East Sussex
   Bold Minimal: one full-bleed photograph, near-black canvas, oversized
   condensed display type anchored bottom-left. Monochrome. No accent colour.
   ========================================================================== */

:root {
  --background:        oklch(0.08 0.01  260);
  --foreground:        oklch(0.98 0.005 260);
  --muted:             oklch(0.65 0.03  260);
  --card:              oklch(0.12 0.015 260);
  --secondary:         oklch(0.18 0.02  260);
  --border:            oklch(1 0 0 / 12%);
  --outline:           oklch(0.98 0.005 260 / 30%);
  --outline-strong:    oklch(0.98 0.005 260 / 60%);

  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layered near-blacks. A single flat black reads cheap at this scale — the
     eye needs the ground to shift slightly between sections to register depth.
     All four sit on hue 260 with chroma under 0.02, so the page stays
     functionally monochrome. */
  --ink:               oklch(0.055 0.008 260);
  --charcoal:          oklch(0.115 0.012 260);

  --gutter: 24px;
  --measure: 28rem;
  --content: 64rem;
  --wide: 82rem;

  /* Cinematic aspect ratios, used as a compositional device rather than
     decoration — a 2.35:1 band reads as a film still, not a website banner. */
  --cinema: 2.35 / 1;
  --wide-ratio: 16 / 9;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;

  /* Film grain. Used only where it genuinely adds atmosphere — over
     photographic bands — never as a page-wide overlay. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@media (min-width: 768px)  { :root { --gutter: 48px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Skip link — keyboard users land here first */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--foreground); color: var(--background);
  padding: 12px 20px; font-size: 14px; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Type scale
   The size gap between headline and body is extreme (~8:1). That gap is the
   whole idea: the H1 shouts, everything else stays quiet.
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  line-height: 0.78;
  letter-spacing: 0.025em;
  margin: 0;
  text-transform: uppercase;
}

.display--sm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.85;
  letter-spacing: 0.025em;
  margin: 0;
  text-transform: uppercase;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.lede {
  font-size: 16px;
  line-height: 1.625;
  color: var(--muted);
  max-width: var(--measure);
  margin: 20px 0 0;
}
@media (min-width: 768px) { .lede { font-size: 18px; } }

.micro {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Header — pinned to the top, sharing the hero's optical left edge
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--gutter);
  transition: background-color 400ms var(--ease), padding 400ms var(--ease),
              border-color 400ms var(--ease);
  border-bottom: 1px solid transparent;
}

/* On scroll the header settles onto a solid ground so navigation stays legible
   once the hero photograph is gone. */
.header.is-stuck {
  background: oklch(0.055 0.008 260 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  padding-top: 16px;
  padding-bottom: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.nav {
  display: none;
  gap: 32px;
}
@media (min-width: 900px) { .nav { display: flex; } }

.nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: oklch(0.98 0.005 260 / 80%);
  transition: color 150ms ease;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--foreground); }

/* --------------------------------------------------------------------------
   Buttons — every interactive element is fully rounded. Nothing else is.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.025em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* The only light-filled shape on the screen */
.btn--solid {
  background: var(--foreground);
  color: var(--background);
  padding: 14px 32px;
}
.btn--solid:hover { transform: scale(1.05); }

.btn--ghost {
  background: transparent;
  color: var(--foreground);
  border-color: var(--outline);
  padding: 8px 20px;
}
.btn--ghost:hover {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
  .btn--solid:hover { transform: none; }
}

/* Icon + label: a bare button, no fill, no background */
.action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  cursor: pointer;
}
.action__circle {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 9999px;
  border: 1px solid var(--outline);
  display: grid;
  place-items: center;
  transition: border-color 150ms ease;
}
.action__circle svg { width: 16px; height: 16px; fill: currentColor; }
.action:hover .action__circle { border-color: var(--outline-strong); }
.action:hover .action__label { color: var(--muted); }
.action__label { transition: color 150ms ease; }

.actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Hero — photo z0, content z10, header and scroll cue z20
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder ground: stands in for the photograph until a real image is
   dropped into /img. Reads as a dark studio surface rather than an empty box,
   so the composition is judgeable without the final photography. */
.hero__media--placeholder {
  background:
    radial-gradient(120% 90% at 72% 38%, oklch(0.30 0.012 260) 0%, transparent 55%),
    radial-gradient(80% 70% at 88% 72%, oklch(0.22 0.010 260) 0%, transparent 60%),
    linear-gradient(196deg, oklch(0.16 0.010 260) 0%, oklch(0.09 0.008 260) 62%, oklch(0.07 0.006 260) 100%);
}
.hero__media--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Darken, don't decorate. Horizontal scrim, dark on the text side,
   clearing toward the subject. Then a flat wash to unify photo with canvas. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    oklch(0.08 0.01 260 / 0.90) 0%,
    oklch(0.08 0.01 260 / 0.60) 50%,
    oklch(0.08 0.01 260 / 0.30) 100%
  );
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0.08 0.01 260 / 0.20);
}

.hero__inner {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--gutter) 64px;
  width: 100%;
  max-width: var(--content);
}

.hero--short { min-height: 78svh; }

/* Scroll cue — bottom right, desktop only */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
@media (min-width: 900px) { .scroll-cue { display: flex; } }

.scroll-cue svg {
  width: 12px; height: 12px;
  fill: currentColor;
  animation: bounce 2.4s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* --------------------------------------------------------------------------
   Sections below the fold
   -------------------------------------------------------------------------- */

.section {
  padding: 96px var(--gutter);
  border-top: 1px solid var(--border);
}
@media (min-width: 768px) { .section { padding: 128px var(--gutter); } }

.section__inner { max-width: var(--content); }
.section__inner--wide { max-width: 78rem; }

.section p { color: var(--muted); max-width: 42rem; }

.grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 48px;
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.cell {
  background: var(--card);
  padding: 32px 28px;
}
.cell h3 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 400;
}
.cell p { font-size: 15px; margin: 0; color: var(--muted); }
.cell__price {
  display: block;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--foreground);
}

/* Numbered process — used only where the content genuinely is a sequence */
.steps { counter-reset: step; margin-top: 48px; border-top: 1px solid var(--border); }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) { .step { grid-template-columns: 90px 1fr 1.2fr; gap: 32px; } }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.4;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
.step p { margin: 8px 0 0; font-size: 15px; }
@media (min-width: 768px) { .step p { margin: 0; } }

.points { list-style: none; padding: 0; margin: 40px 0 0; max-width: 42rem; }
.points li {
  padding: 18px 0 18px 28px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 15px;
  position: relative;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0; top: 27px;
  width: 12px; height: 1px;
  background: var(--muted);
}

/* --------------------------------------------------------------------------
   FAQ — plain disclosure. The answers are written to be extractable by
   answer engines, so they lead with the answer, not with preamble.
   -------------------------------------------------------------------------- */

.faq { margin-top: 48px; border-top: 1px solid var(--border); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 40px 26px 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 150ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--muted); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 33px;
  width: 11px; height: 11px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 38px; }
.faq p { margin: 0 0 26px; font-size: 15px; max-width: 44rem; }

/* --------------------------------------------------------------------------
   Area links
   -------------------------------------------------------------------------- */

.areas { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 48px; }
@media (min-width: 600px)  { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .areas { grid-template-columns: repeat(3, 1fr); } }
.areas a {
  background: var(--card);
  padding: 28px;
  transition: background-color 150ms ease;
}
.areas a:hover { background: var(--secondary); }
.areas strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.areas span { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid { display: grid; gap: 48px; margin-top: 48px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

.detail { padding: 22px 0; border-bottom: 1px solid var(--border); }
.detail dt {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.detail dd { margin: 0; font-size: 17px; }
.detail dd a { border-bottom: 1px solid var(--outline); transition: border-color 150ms ease; }
.detail dd a:hover { border-color: var(--foreground); }

.field { margin-bottom: 24px; }
.field label {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 0;
  transition: border-color 150ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--outline-strong);
}
.field textarea { min-height: 140px; resize: vertical; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 48px; }
@media (min-width: 700px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(110% 85% at 68% 35%, oklch(0.26 0.012 260) 0%, transparent 58%),
    linear-gradient(200deg, oklch(0.15 0.010 260) 0%, oklch(0.09 0.008 260) 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.shot span {
  position: relative;
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   Map — click to load
   Google's map tiles arrive bright, saturated and very much not on hue 260.
   Inverting and desaturating drags them back into the palette so the map reads
   as part of the page rather than a window cut into someone else's website.
   -------------------------------------------------------------------------- */

.map {
  position: relative;
  margin-top: 48px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  background:
    radial-gradient(100% 80% at 60% 40%, oklch(0.20 0.012 260) 0%, transparent 60%),
    linear-gradient(200deg, oklch(0.14 0.010 260) 0%, oklch(0.09 0.008 260) 100%);
  overflow: hidden;
}
@media (max-width: 640px) { .map { aspect-ratio: 4 / 5; } }

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) grayscale(0.85) contrast(0.88) brightness(1.05);
}

.map__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 18px;
  padding: 32px;
}
.map.is-loaded .map__cover { display: none; }

.map__addr {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--foreground);
  max-width: 20ch;
}
.map__note {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  padding: 80px var(--gutter) 40px;
  border-top: 1px solid var(--border);
}
.footer__inner { max-width: var(--content); }
.footer__cols { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer__cols { grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; } }
.footer h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 20px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 12px; font-size: 14px; }
.footer li a { color: var(--muted); transition: color 150ms ease; }
.footer li a:hover { color: var(--foreground); }
.footer address { font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.9; }
.footer__base {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

/* Breadcrumbs */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.crumbs a { transition: color 150ms ease; }
.crumbs a:hover { color: var(--foreground); }
.crumbs span { margin: 0 8px; opacity: 0.5; }

.cta-band { text-align: left; }
.cta-band .display--sm { margin-bottom: 20px; }


/* ==========================================================================
   EXTENDED SYSTEM — internal pages
   Everything below extends the homepage language rather than replacing it.
   Same hue, same two typefaces, same restraint. What changes is rhythm:
   sections deliberately alternate between typographic, photographic,
   technical and quiet so no two screens feel the same.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation — dropdown, mobile overlay
   -------------------------------------------------------------------------- */

.nav__item { position: relative; display: flex; align-items: center; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: oklch(0.98 0.005 260 / 80%);
  transition: color 150ms ease;
}
.nav__trigger:hover,
.nav__item.is-open .nav__trigger { color: var(--foreground); }
.nav__trigger svg {
  width: 8px; height: 8px; fill: currentColor;
  transition: transform 250ms var(--ease);
}
.nav__item.is-open .nav__trigger svg { transform: rotate(180deg); }

/* Understated panel, not a mega menu */
.nav__menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px;
  background: oklch(0.055 0.008 260 / 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.nav__item.is-open .nav__menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__menu a {
  display: block;
  padding: 11px 22px;
  font-size: 14px;
  color: oklch(0.98 0.005 260 / 72%);
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease;
}
.nav__menu a:hover { color: var(--foreground); background: oklch(1 0 0 / 5%); }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1px;
  width: 22px;
  background: var(--foreground);
  transition: transform 300ms var(--ease), opacity 200ms ease;
}
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--gutter) 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 320ms;
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

.mobile-menu a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 7px 0;
  color: var(--foreground);
}
.mobile-menu .mobile-menu__sub a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 8px 0;
}
.mobile-menu__sub { margin: 6px 0 18px 2px; }
.mobile-menu__foot {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}
@media (min-width: 900px) { .mobile-menu { display: none; } }

/* --------------------------------------------------------------------------
   Motion — scroll reveals
   Slow, physical, once. No bouncing, no floating, nothing that repeats.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Section variants — the rhythm
   -------------------------------------------------------------------------- */

.section--ink      { background: var(--ink); }
.section--charcoal { background: var(--charcoal); }
.section--tall     { padding-top: 140px; padding-bottom: 140px; }
@media (min-width: 768px) {
  .section--tall   { padding-top: 200px; padding-bottom: 200px; }
}
.section--flush    { border-top: 0; }
.section__inner--wide { max-width: var(--wide); }
.section__inner--full { max-width: none; }

/* Asymmetric editorial split. Deliberately not 50/50 — the offset is what
   stops it reading as a template two-column. */
.split {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: 80px; }
  .split--reverse { grid-template-columns: 7fr 5fr; }
  .split--offset > *:last-child { padding-top: 88px; }
}
.split p { max-width: 38rem; }
.split p + p { margin-top: 22px; }

/* A single line of type given a whole screen. Used sparingly. */
.statement {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  max-width: 18ch;
}
.statement--muted { color: var(--muted); }

.aside-note {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Media bands — cinematic photographic breaks
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cinema);
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 66% 38%, oklch(0.26 0.012 260) 0%, transparent 58%),
    linear-gradient(198deg, oklch(0.15 0.010 260) 0%, oklch(0.075 0.008 260) 100%);
}
@media (max-width: 700px) { .band { aspect-ratio: var(--wide-ratio); } }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band--grain::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.26;
  pointer-events: none;
  background-image: var(--grain);
}
.band__caption {
  position: absolute;
  left: var(--gutter); bottom: 28px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}

/* Hero video (homepage). Falls back to the placeholder ground when absent. */
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Process — editorial vertical sequence, not a step-card grid
   -------------------------------------------------------------------------- */

.process { border-top: 1px solid var(--border); }

.stage {
  border-bottom: 1px solid var(--border);
  padding: 72px 0;
}
@media (min-width: 900px) { .stage { padding: 104px 0; } }

.stage__head {
  display: grid;
  gap: 24px;
  align-items: baseline;
}
@media (min-width: 900px) {
  .stage__head { grid-template-columns: 180px 1fr 1.1fr; gap: 56px; }
}

.stage__n {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: oklch(0.98 0.005 260 / 22%);
  transition: color 700ms var(--ease);
}
.stage.is-in .stage__n { color: oklch(0.98 0.005 260 / 42%); }

.stage__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 400;
}
.stage__line {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  max-width: 30rem;
}
.stage__body { margin: 0; font-size: 15px; color: var(--muted); max-width: 34rem; }
.stage__detail {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.98 0.005 260 / 45%);
}
.stage__media { margin-top: 48px; }

/* Sticky progress rail */
.rail {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + 40px);
  align-self: start;
}
@media (min-width: 1200px) { .rail { display: block; } }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.98 0.005 260 / 30%);
  padding: 9px 0 9px 22px;
  position: relative;
  transition: color 400ms var(--ease);
}
.rail li::before {
  content: "";
  position: absolute; left: 0; top: 17px;
  width: 10px; height: 1px;
  background: currentColor;
  transition: width 400ms var(--ease);
}
.rail li.is-active { color: var(--foreground); }
.rail li.is-active::before { width: 16px; }

.process-layout { display: block; }
@media (min-width: 1200px) {
  .process-layout { display: grid; grid-template-columns: 170px 1fr; gap: 64px; }
}

/* --------------------------------------------------------------------------
   Layer diagram — technical, not an infographic
   -------------------------------------------------------------------------- */

.layers { margin-top: 56px; border-top: 1px solid var(--border); }

.layer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background-color 400ms var(--ease);
}
@media (min-width: 800px) {
  .layer { grid-template-columns: 1.1fr 1fr 1fr; gap: 32px; align-items: baseline; }
}
.layer:hover { background: oklch(1 0 0 / 3%); }

.layer__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.layer__spec { font-size: 13px; color: var(--foreground); letter-spacing: 0.02em; }
.layer__note { font-size: 13px; color: var(--muted); }

/* The film layer is the point of the diagram, so it carries the only emphasis */
.layer--key .layer__name { color: var(--foreground); }
.layer--key { background: oklch(1 0 0 / 4%); }

/* --------------------------------------------------------------------------
   Typographic impact list — imagery and space, not icons
   -------------------------------------------------------------------------- */

.impact { margin-top: 56px; border-top: 1px solid var(--border); }
.impact__row {
  display: grid;
  gap: 10px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
@media (min-width: 800px) {
  .impact__row { grid-template-columns: 1.2fr 1fr; gap: 48px; }
}
.impact__t {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  transition: transform 500ms var(--ease), color 500ms var(--ease);
}
.impact__row:hover .impact__t { transform: translateX(10px); }
.impact__d { font-size: 15px; color: var(--muted); margin: 0; max-width: 30rem; }

/* --------------------------------------------------------------------------
   Coverage — a comparison, not pricing cards
   -------------------------------------------------------------------------- */

.coverage { margin-top: 56px; border-top: 1px solid var(--border); }

.cov {
  display: grid;
  gap: 16px;
  padding: 38px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 400ms var(--ease);
}
@media (min-width: 900px) {
  .cov { grid-template-columns: 1fr 1.4fr auto; gap: 56px; align-items: center; }
}
.cov:hover { background: oklch(1 0 0 / 3%); }
.cov__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}
.cov__desc { font-size: 15px; color: var(--muted); margin: 0; }
.cov__price {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cov__price--poa { color: var(--muted); }

/* --------------------------------------------------------------------------
   Films — profile selector
   -------------------------------------------------------------------------- */

.profiles { margin-top: 56px; border-top: 1px solid var(--border); }

.profile { border-bottom: 1px solid var(--border); }
.profile__btn {
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: left;
  background: none;
  border: 0;
  padding: 36px 40px 36px 0;
  cursor: pointer;
  color: var(--foreground);
  font-family: var(--font-body);
  position: relative;
  transition: background-color 350ms var(--ease);
}
@media (min-width: 800px) {
  .profile__btn { grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: baseline; }
}
.profile__btn:hover { background: oklch(1 0 0 / 3%); }
.profile__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.profile__for { font-size: 14px; color: var(--muted); }
.profile__btn::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 350ms var(--ease);
}
.profile.is-open .profile__btn::after { transform: translateY(-30%) rotate(-135deg); }

.profile__panel {
  display: grid;
  gap: 28px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 500ms var(--ease), opacity 400ms var(--ease),
              padding 500ms var(--ease);
  opacity: 0;
}
.profile.is-open .profile__panel { max-height: 640px; opacity: 1; padding-bottom: 44px; }
@media (min-width: 800px) {
  .profile__panel { grid-template-columns: 1fr 1.3fr; gap: 48px; }
}
.profile__desc { font-size: 15px; color: var(--muted); margin: 0; }
.profile__rec {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.profile__rec dt {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.profile__rec dd {
  margin: 0 0 20px;
  font-size: 17px;
}
.profile__rec dd em {
  font-style: normal; color: var(--muted);
  font-size: 14px; display: block; margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Gallery — editorial grid, fewer and larger
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 48px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
/* Underline, not pills — pills belong to buttons only in this system */
.filters button {
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.98 0.005 260 / 40%);
  border-bottom: 1px solid transparent;
  transition: color 250ms ease, border-color 250ms ease;
}
.filters button:hover { color: var(--muted); }
.filters button.is-active {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}

.work-grid {
  display: grid;
  gap: 28px;
  margin-top: 48px;
}
@media (min-width: 800px)  { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (min-width: 1200px) { .work-grid { gap: 56px; } }

/* Deliberate irregularity: every third item runs full width and cinematic.
   Stops the grid reading as a uniform card wall. */
@media (min-width: 800px) {
  .work-item:nth-child(3n+1) { grid-column: 1 / -1; }
  .work-item:nth-child(3n+1) .work-item__media { aspect-ratio: var(--cinema); }
}

.work-item { display: block; position: relative; }
.work-item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(110% 85% at 68% 35%, oklch(0.25 0.012 260) 0%, transparent 58%),
    linear-gradient(200deg, oklch(0.145 0.010 260) 0%, oklch(0.08 0.008 260) 100%);
}
.work-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1100ms var(--ease);
}
/* A few percent only. Anything more reads as a stock template. */
.work-item:hover .work-item__media img { transform: scale(1.03); }

.work-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 18px;
  opacity: 0.55;
  transition: opacity 350ms var(--ease);
}
.work-item:hover .work-item__meta { opacity: 1; }
.work-item__v {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.work-item__w {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.work-item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Project case study
   -------------------------------------------------------------------------- */

.spec { margin-top: 56px; border-top: 1px solid var(--border); }
.spec__row {
  display: grid;
  gap: 10px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 800px) {
  .spec__row { grid-template-columns: 200px 1fr; gap: 56px; }
}
.spec__k {
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.spec__v { font-size: 16px; margin: 0; max-width: 42rem; color: var(--muted); }

.coverage-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.coverage-list li {
  font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  position: relative; padding-left: 16px;
}
.coverage-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 1px; background: var(--muted);
}

.next-project {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.next-project a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 400ms var(--ease);
  display: inline-block;
}
.next-project a:hover { transform: translateX(12px); }

/* --------------------------------------------------------------------------
   Before / after comparison
   The strongest proof mechanism this industry has. Drag or arrow keys.
   -------------------------------------------------------------------------- */

.compare {
  position: relative;
  margin-top: 48px;
  aspect-ratio: var(--wide-ratio);
  overflow: hidden;
  border: 1px solid var(--border);
  touch-action: pan-y;
  user-select: none;
}
.compare__side { position: absolute; inset: 0; }
.compare__side img { width: 100%; height: 100%; object-fit: cover; }
.compare__side--a {
  background: linear-gradient(200deg, oklch(0.17 0.010 260) 0%, oklch(0.085 0.008 260) 100%);
}
.compare__side--b {
  background:
    radial-gradient(100% 80% at 60% 35%, oklch(0.30 0.012 260) 0%, transparent 60%),
    linear-gradient(200deg, oklch(0.13 0.010 260) 0%, oklch(0.07 0.008 260) 100%);
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.compare__label {
  position: absolute; bottom: 20px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.compare__label--a { left: 24px; }
.compare__label--b { right: 24px; }

.compare__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 1px;
  background: var(--foreground);
  cursor: ew-resize;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--foreground);
  background: oklch(0.055 0.008 260 / 0.7);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  cursor: ew-resize;
}
.compare__grip svg { width: 16px; height: 16px; fill: var(--foreground); }
.compare:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Tint comparison — real preview, no fake controls
   -------------------------------------------------------------------------- */

.tint { margin-top: 48px; }
.tint__stage {
  position: relative;
  aspect-ratio: var(--wide-ratio);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 70% 40%, oklch(0.24 0.012 260) 0%, transparent 60%),
    linear-gradient(200deg, oklch(0.145 0.010 260) 0%, oklch(0.075 0.008 260) 100%);
}
.tint__glass {
  position: absolute;
  inset: 26% 18% 40% 30%;
  background: oklch(0.62 0.02 260);
  transition: background-color 600ms var(--ease);
}
.tint__stage[data-level="70"] .tint__glass { background: oklch(0.52 0.02 260); }
.tint__stage[data-level="50"] .tint__glass { background: oklch(0.38 0.018 260); }
.tint__stage[data-level="35"] .tint__glass { background: oklch(0.26 0.015 260); }
.tint__stage[data-level="20"] .tint__glass { background: oklch(0.17 0.012 260); }
.tint__stage[data-level="5"]  .tint__glass { background: oklch(0.10 0.010 260); }

.tint__levels {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.tint__levels button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(0.98 0.005 260 / 40%);
  border-bottom: 1px solid transparent;
  transition: color 250ms ease, border-color 250ms ease;
}
.tint__levels button:hover { color: var(--muted); }
.tint__levels button.is-active { color: var(--foreground); border-bottom-color: var(--foreground); }
.tint__legal {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Multi-step booking form
   -------------------------------------------------------------------------- */

.steps-nav {
  display: flex; gap: 0; margin-top: 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.steps-nav div {
  flex: 1;
  padding: 18px 0;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(0.98 0.005 260 / 30%);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 350ms var(--ease), border-color 350ms var(--ease);
}
.steps-nav div.is-active { color: var(--foreground); border-bottom-color: var(--foreground); }
.steps-nav div.is-done { color: var(--muted); }

.step-panel { display: none; padding-top: 48px; }
.step-panel.is-active { display: block; }

.step-panel__q {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 32px;
  font-weight: 400;
}

.field-row { display: grid; gap: 24px; }
@media (min-width: 700px) { .field-row--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .field-row--2 { grid-template-columns: repeat(2, 1fr); } }

/* Choice list — squared, not pills */
.choices { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 700px) { .choices { grid-template-columns: repeat(2, 1fr); } }
.choice {
  position: relative;
  display: block;
  background: var(--charcoal);
  padding: 26px 24px;
  cursor: pointer;
  transition: background-color 300ms var(--ease);
}
.choice:hover { background: var(--secondary); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__t {
  display: block;
  font-family: var(--font-display);
  font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 6px;
}
.choice__d { display: block; font-size: 13px; color: var(--muted); }
.choice:has(input:checked) { background: var(--secondary); }
.choice:has(input:checked)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--foreground);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--foreground); outline-offset: -2px; }

.step-actions {
  display: flex; align-items: center; gap: 24px;
  margin-top: 44px; padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.step-back {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  transition: color 200ms ease;
}
.step-back:hover { color: var(--foreground); }
.step-back[hidden] { display: none; }
.step-count { margin-left: auto; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   Principles — restrained, no icons
   -------------------------------------------------------------------------- */

.principles {
  margin-top: 56px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 800px) { .principles { grid-template-columns: repeat(2, 1fr); column-gap: 56px; } }
.principle { padding: 36px 0; border-bottom: 1px solid var(--border); }
.principle h3 {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 12px; font-weight: 400;
}
.principle p { font-size: 15px; color: var(--muted); margin: 0; max-width: 32rem; }

/* --------------------------------------------------------------------------
   Logo
   The header shows the FORM mark alone; the footer carries the full lockup
   with the tagline, where there is room for it to be readable. Both are white
   PNGs with transparency, sitting on the near-black ground.
   -------------------------------------------------------------------------- */

.wordmark--img { display: block; line-height: 0; }
.wordmark--img img {
  height: 26px;
  width: auto;
  display: block;
  transition: height 400ms var(--ease), opacity 200ms ease;
}
/* Shrinks with the header as it settles on scroll */
.header.is-stuck .wordmark--img img { height: 22px; }
.wordmark--img:hover img { opacity: 0.78; }

@media (max-width: 480px) {
  .wordmark--img img { height: 22px; }
  .header.is-stuck .wordmark--img img { height: 19px; }
}

.footer__logo { margin: 0 0 24px; }
.footer__logo img {
  height: 56px;
  width: auto;
  display: block;
  opacity: 0.9;
}
@media (max-width: 600px) { .footer__logo img { height: 44px; } }

/* --------------------------------------------------------------------------
   Photographs in placeholder slots
   Each slot keeps its CSS ground underneath the <img>; onerror removes a
   missing image so the ground shows through instead of a broken icon.
   -------------------------------------------------------------------------- */
.hero__media--placeholder img,
.band img,
.work-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media--placeholder:has(img)::after { opacity: 0.10; }

/* --------------------------------------------------------------------------
   Page column
   The layout was built on a left-aligned max-width with no centring, so on a
   wide desktop every column hugged the left edge and left a third of the
   screen empty. One centred band fixes it: symmetric padding that collapses
   to the plain gutter below 1440px, so nothing changes on laptop or mobile.
   Content stays LEFT-ALIGNED inside the band — the bold-minimal anchoring is
   intact, the band itself is just centred. Header, hero headline, section
   copy and footer now share one left edge. Full-bleed bands are unaffected:
   .section--flush zeroes its inline padding inline, which wins over this.
   -------------------------------------------------------------------------- */

:root { --page: 82rem; }

.header,
.section,
.footer,
.hero__inner,
.mobile-menu { padding-inline: max(var(--gutter), (100% - var(--page)) / 2); }

/* The hero headline sits in the band, not in a narrower column of its own */
.hero__inner { max-width: none; }

/* Band captions and the scroll cue align to the same edges as the copy */
.band__caption { left: max(var(--gutter), (100% - var(--page)) / 2); }
.scroll-cue { right: max(var(--gutter), (100% - var(--page)) / 2); }

/* The footer is a three-column directory, so it uses the full band rather
   than the reading measure — that is what made it look pushed to one side. */
.footer__inner { max-width: none; }
@media (min-width: 1100px) {
  .footer__cols { grid-template-columns: 1.6fr 1fr 1fr; gap: 72px; }
}

/* Above the band width the type can afford one more step up */
@media (min-width: 1600px) {
  :root { --page: 88rem; --content: 68rem; }
}

/* --------------------------------------------------------------------------
   Band caption legibility
   The captions were 12px muted grey, which read fine over the original dark
   CSS gradients. Several of the real photographs are bright in the lower
   left (reflective concrete), dropping the caption to about 1.3:1. A bottom
   scrim restores the dark ground the type was designed against, and the
   caption itself goes to full-opacity ink. Only applied where there is an
   actual photograph, so the gradient-only bands are untouched.
   -------------------------------------------------------------------------- */

.band:has(img)::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    oklch(0.055 0.008 260 / 0.82) 0%,
    oklch(0.055 0.008 260 / 0.45) 42%,
    transparent 100%);
}

.band__caption {
  z-index: 2;
  color: var(--foreground);
  text-shadow: 0 1px 14px oklch(0.055 0.008 260 / 0.85);
}

/* The grain sits above the scrim but below the caption */
.band--grain::after { z-index: 1; }