/* Design Surrey — Modern County, palette B
   Depends on tokens.css.

   Corrected reading of the system:
     THE FIELD IS A SURFACE, NOT A RULE. Ink-800 areas bleed edge to edge and
     carry an 8px brass edge. Thin rules everywhere read as form furniture.
     Brass-500 is a graphic colour only — never text on light.
   System rules kept:
     square corners (2px chips only) · headlines left-aligned, never centred
     measure caps at 62ch, never justified · serif once per page
     mono for facts, never sentences · 48px hit target (44px below 520px) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--brass-300); color: var(--ink-900); }

:focus-visible { outline: 3px solid var(--brass-500); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink-900); color: var(--bone-50); padding: 14px 22px; z-index: 100; }
.skip:focus { left: 0; }

/* ---------- layout ---------- */

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s32); }
.section--tight { padding-block: var(--s24); }
.measure { max-width: var(--measure); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-6 > * + * { margin-top: var(--s6); }
.stack-8 > * + * { margin-top: var(--s8); }

/* ---------- type ---------- */

h1, h2, h3, h4 { margin: 0; color: var(--heading); text-wrap: balance; font-weight: 700; }
.display-1 { font-size: var(--display-1); line-height: var(--display-1-lh); letter-spacing: var(--display-1-ls); font-weight: 700; }
.display-2 { font-size: var(--display-2); line-height: var(--display-2-lh); letter-spacing: var(--display-2-ls); font-weight: 700; }
h1, .h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); font-weight: 700; }
h2, .h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); font-weight: 600; }
h3, .h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); font-weight: 600; }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--lead); line-height: 1.55; letter-spacing: -0.01em; }
.small { font-size: var(--small); line-height: 1.55; }

/* serif — once per page */
.quote {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.14; letter-spacing: -0.02em; font-weight: 400;
  color: var(--heading); max-width: 20ch;
}

/* mono — facts only */
.label {
  font-family: var(--font-mono); font-size: var(--label); line-height: 1;
  letter-spacing: 0.16em; font-weight: 500; text-transform: uppercase;
  color: var(--accent); display: block;
}
.label--mute { color: var(--ink-300); }
.on-ink .label--mute { color: rgba(207,206,197,.6); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--brass-700); }
.on-ink a:hover { color: var(--bone-50); }
.link-underline { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--hit); padding: 0 var(--s8);
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--small); font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink-900); color: var(--bone-50); }
.btn--primary:hover { background: var(--brass-700); color: var(--bone-50); }
.btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--bone-300); }
.btn--secondary:hover { background: var(--bone-100); border-color: var(--ink-900); color: var(--ink-900); }
.btn--tertiary { background: transparent; color: var(--link); padding-inline: 0; min-height: auto; text-decoration: underline; text-underline-offset: 5px; }
.btn--sm { min-height: 42px; padding-inline: var(--s5); font-size: 14px; }
.btn[disabled] { background: var(--bone-200); color: var(--ink-300); border-color: var(--bone-300); cursor: not-allowed; }

.on-ink .btn--primary { background: var(--bone-50); color: var(--ink-900); }
.on-ink .btn--primary:hover { background: var(--brass-300); color: var(--ink-900); }
.on-ink .btn--secondary { color: var(--bone-50); border-color: rgba(251,250,247,.34); }
.on-ink .btn--secondary:hover { background: rgba(251,250,247,.1); border-color: var(--bone-50); color: var(--bone-50); }
.on-ink .btn--tertiary { color: var(--brass-300); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- hero — photograph, scrim, brass edge ---------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-800);
  border-bottom: var(--field-edge) solid var(--brass-500);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; }

/* Scrim exactly as specified on board 04 of the art direction canvas.
   Two stacked gradients — never a single flat overlay, which dims the
   picture into mud instead of shaping where the type sits. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(16,19,18,0.97) 0%,
      rgba(16,19,18,0.86) 22%,
      rgba(16,19,18,0.62) 52%,
      rgba(16,19,18,0.34) 100%),
    linear-gradient(180deg,
      rgba(16,19,18,0.50) 0%,
      rgba(16,19,18,0) 32%,
      rgba(16,19,18,0) 60%,
      rgba(16,19,18,0.62) 100%);
}
/* Light frames need the stops as-is; a dark frame drops each by ~0.12. */
.hero--dark-frame .hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(16,19,18,0.85) 0%,
      rgba(16,19,18,0.74) 22%,
      rgba(16,19,18,0.50) 52%,
      rgba(16,19,18,0.22) 100%),
    linear-gradient(180deg,
      rgba(16,19,18,0.38) 0%,
      rgba(16,19,18,0) 32%,
      rgba(16,19,18,0) 60%,
      rgba(16,19,18,0.50) 100%);
}

/* ---------- hero rotator ----------
   Four services, 3s each, crossfaded. Arrows and a mono counter bottom-right.
   Pauses on hover, on focus, and entirely under prefers-reduced-motion. */

.hero { display: flex; flex-direction: column; }
/* Every slide is exactly the same height, whatever its copy runs to. */
.hero__slides {
  position: relative; flex: 1; display: grid;
  min-height: clamp(480px, 44vw, 640px);
}
.hero__slide {
  grid-area: 1 / 1; position: relative; height: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), visibility 0s linear .7s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

/* Type occupies the left 46%, bottom-aligned above the brass edge (board 03). */
.hero__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--s16) var(--s24);
}
.hero__inner > * { max-width: 58%; }

/* Content settles in on every change — a transition, so it re-runs each slide. */
.hero__slide .hero__inner > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
.hero__slide.is-active .hero__inner > * { opacity: 1; transform: none; }
.hero__slide.is-active .hero__inner > *:nth-child(1) { transition-delay: .10s; }
.hero__slide.is-active .hero__inner > *:nth-child(2) { transition-delay: .17s; }
.hero__slide.is-active .hero__inner > *:nth-child(3) { transition-delay: .24s; }
.hero__slide.is-active .hero__inner > *:nth-child(4) { transition-delay: .31s; }
.hero__slide.is-active .hero__inner > *:nth-child(5) { transition-delay: .38s; }

.hero__controls {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: var(--s4);
  justify-content: flex-end;
  margin-top: calc(var(--s16) * -1);
  padding-bottom: var(--s8);
  pointer-events: none;
}
.hero__controls > * { pointer-events: auto; }

.hero__count {
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .16em; color: rgba(251,250,247,.55);
  font-variant-numeric: tabular-nums; margin-right: var(--s2);
}
.hero__count b { color: var(--brass-300); font-weight: 500; }

.hero__arrow {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--bone-50);
  border: 1px solid rgba(251,250,247,.34); border-radius: var(--radius);
  cursor: pointer; padding: 0;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.hero__arrow:hover { background: var(--brass-500); border-color: var(--brass-500); color: var(--ink-900); }
.hero__arrow svg { width: 15px; height: 15px; }

.hero__pause {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: rgba(251,250,247,.6);
  border: 1px solid rgba(251,250,247,.2); border-radius: var(--radius);
  cursor: pointer; padding: 0;
  transition: color .14s ease, border-color .14s ease;
}
.hero__pause:hover { color: var(--bone-50); border-color: rgba(251,250,247,.45); }

/* Progress hairline — brass, fills across the 3 seconds. */
.hero__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: rgba(251,250,247,.14); }
.hero__progress i { display: block; height: 100%; width: 0; background: var(--brass-500); }
.hero[data-playing="true"] .hero__progress i { animation: heroFill 3s linear forwards; }
@keyframes heroFill { from { width: 0; } to { width: 100%; } }

@media (max-width: 767px) {
  .hero__controls { justify-content: flex-start; margin-top: calc(var(--s12) * -1); }
  .hero__inner { padding-bottom: var(--s24); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide .hero__inner > * { transition: none; }
  .hero__progress { display: none; }
}
.hero .display-1 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.0; letter-spacing: -.04em; max-width: 15ch; color: var(--bone-50); margin-top: var(--s5); }
.hero .lead { font-size: clamp(16px, 1.35vw, 19px); max-width: 44ch; color: #CFCEC5; margin-top: var(--s5); }
.hero .btn-row { margin-top: var(--s8); max-width: none; }
.hero .facts { margin-top: var(--s12); max-width: none; }
.hero .label { color: var(--brass-300); }

@media (max-width: 1023px) { .hero__inner > * { max-width: 62%; } }
@media (max-width: 767px) { .hero__inner > * { max-width: 100%; } }

/* ---------- service band — 21:9, one flat layer at 0.70, no brass edge ---------- */

.band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-800); }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.band__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(16,19,18,0.70); }
.band__inner {
  position: relative; z-index: 2;
  min-height: clamp(280px, 30vw, 420px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--s16);
}
.band__inner > * { max-width: 52%; }
.band h2 { color: var(--bone-50); margin-top: var(--s4); }
@media (max-width: 767px) { .band__inner > * { max-width: 100%; } }

.facts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s12); border-top: 1px solid rgba(251,250,247,.26); padding-top: var(--s6); }
.facts span { font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--brass-300); }

@media (max-width: 767px) {
  .hero__media img { object-position: 74% 55%; }
  .hero__scrim { background:
    linear-gradient(180deg, rgba(14,15,14,.9) 0%, rgba(14,15,14,.82) 46%, rgba(14,15,14,.94) 100%); }
}

/* ---------- sector strip ---------- */

.strip { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s12); padding-block: var(--s8); border-bottom: 1px solid var(--border); }
.strip span { font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink-400); }

/* ---------- section head ---------- */

.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s8); margin-bottom: var(--s16); flex-wrap: wrap; }
.section-head h2 { max-width: 18ch; }

/* ---------- services — no boxes ---------- */

.services { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink-900); }
.service { padding: var(--s8) var(--s8) var(--s12); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s4); }
/* the cell that begins a row keeps its left edge on the container; the rest
   get the gutter they were missing beside their divider */
.service:nth-child(4n+1) { padding-left: 0; }
.service:last-child { border-right: none; padding-right: 0; }
.service__no { font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em; color: var(--ink-300); font-weight: 500; }
.service p { font-size: var(--small); max-width: 26ch; }
.service__price { margin-top: auto; padding-top: var(--s8); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--brass-700); }

@media (max-width: 900px) {
  .services { grid-template-columns: 1fr 1fr; }
  .service:nth-child(4n+1) { padding-left: var(--s8); }
  .service:nth-child(2n+1) { padding-left: 0; }
  .service { border-right: none; border-bottom: 1px solid var(--border); padding-right: var(--s6); }
  .service:nth-child(odd) { border-right: 1px solid var(--border); }
  .service:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 519px) {
  .services { grid-template-columns: 1fr; }
  .service, .service:nth-child(odd) { border-right: none; padding: var(--s6) 0 var(--s8); border-bottom: 1px solid var(--border); }
  .service:last-child { border-bottom: none; }
  .service__price { padding-top: var(--s4); }
}

/* ---------- process — on ink, brass numerals ---------- */

/* Five steps since the process became the five-day build. At repeat(4)
   the fifth orphaned onto a row of its own, which is what made this
   section look broken. Phone-first: one column, two from 560, all five
   from 1024 where there is genuinely room for five columns of type. */
.process { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .process { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .process__step { padding-right: var(--s6); } }
.process__step { padding: var(--s12) var(--s8) 0 0; border-top: 1px solid rgba(251,250,247,.22); display: flex; flex-direction: column; gap: var(--s3); }
.process__no { font-family: var(--font-mono); font-size: clamp(40px, 5vw, 62px); line-height: 1; font-weight: 500; color: var(--brass-500); letter-spacing: -.04em; margin-bottom: var(--s4); }
.process__step p { font-size: var(--small); max-width: 24ch; }

@media (max-width: 767px) {
  .process { grid-template-columns: 1fr; }
  .process__step { padding: var(--s8) 0; }
  .process__no { font-size: 40px; margin-bottom: var(--s2); }
}

/* ---------- work ---------- */

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16) var(--s12); }
.case { display: flex; flex-direction: column; gap: var(--s6); }
.case__media {
  aspect-ratio: 3 / 2; overflow: hidden; position: relative;
  border-bottom: var(--field-edge) solid var(--brass-500);
  background: var(--ink-800);
}
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.case:hover .case__media img { transform: scale(1.03); }
.case h3 { font-size: var(--h2); letter-spacing: var(--h2-ls); max-width: 18ch; }
.case--offset { margin-top: var(--s24); }

@media (max-width: 767px) { .work-grid { grid-template-columns: 1fr; gap: var(--s12); } .case--offset { margin-top: 0; } }

/* ---------- testimonial ---------- */

.testimonial { margin: 0; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,4fr); gap: var(--s12); align-items: end; }
.testimonial__meta { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s2); }
@media (max-width: 767px) { .testimonial { grid-template-columns: 1fr; gap: var(--s8); align-items: start; } }

/* ---------- form ---------- */

.f-field { display: block; }
.f-field + .f-field { margin-top: var(--s6); }
.f-field__label { display: block; font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--brass-300); margin-bottom: var(--s3); }
.f-field__input, .f-field__textarea {
  width: 100%; min-height: var(--hit); padding: var(--s3) var(--s4);
  background: rgba(251,250,247,.06); border: 1px solid rgba(251,250,247,.26);
  border-radius: var(--radius); font-family: var(--font-sans); font-size: var(--body); color: var(--bone-50);
}
.f-field__textarea { min-height: 120px; resize: vertical; }
.f-field__input::placeholder, .f-field__textarea::placeholder { color: rgba(251,250,247,.4); }
.f-field__input:focus, .f-field__textarea:focus { outline: none; border-color: var(--brass-500); background: rgba(251,250,247,.1); }

/* Autofill. Chrome paints its own pale background into an autofilled
   field using an internal shadow that background-color cannot override,
   while leaving the site's colour alone — so bone-50 text lands on a
   near-white ground and the value is invisible. The inset shadow trick
   repaints the ground dark; -webkit-text-fill-color is the only thing
   that reliably wins over the text colour. transition-delay keeps Chrome
   from repainting its own colour back on the next frame. */
.f-field__input:-webkit-autofill,
.f-field__input:-webkit-autofill:hover,
.f-field__input:-webkit-autofill:focus,
.f-field__textarea:-webkit-autofill,
.f-field__textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bone-50);
  caret-color: var(--bone-50);
  -webkit-box-shadow: 0 0 0 1000px #1B1D17 inset;
  box-shadow: 0 0 0 1000px #1B1D17 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* the caret itself, which inherits nothing useful by default */
.f-field__input, .f-field__textarea { caret-color: var(--brass-500); }

/* ---------- full price list ---------- */

.plist__head {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500; color: var(--brass-700);
  margin: var(--s16) 0 var(--s6);
}
.plist__head:first-of-type { margin-top: 0; }
.plist { border-top: 1px solid var(--ink-900); }
.prow {
  display: grid;
  grid-template-columns: minmax(0,3fr) minmax(0,6fr) 110px 130px;
  gap: var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.prow__n { font-weight: 600; color: var(--ink-900); }
.prow__d { font-size: var(--small); color: var(--ink-500); }
.prow__s, .prow__m {
  font-family: var(--font-mono); font-size: var(--small);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.prow__s { color: var(--ink-400); }
.prow__m { color: var(--ink-900); font-weight: 500; }
.prow--feat { background: var(--bone-200); }
.prow--feat .prow__m { color: var(--brass-700); }

.plist__notes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s8); margin-top: var(--s16);
  padding-top: var(--s8); border-top: 1px solid var(--ink-900);
}
.plist__notes h4 { font-size: 15px; font-weight: 600; color: var(--ink-900); margin: 0 0 var(--s2); }
.plist__notes p { font-size: var(--small); max-width: 34ch; }

@media (max-width: 900px) {
  .prow { grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding-block: var(--s4); }
  .prow__d { grid-column: 1 / -1; }
  .prow__s { text-align: left; grid-row: 3; }
  .prow__m { grid-row: 3; }
  .plist__notes { grid-template-columns: 1fr; gap: var(--s6); }
}

/* ---------- nav ---------- */

.nav { border-bottom: 1px solid var(--border); background: var(--page); position: sticky; top: 0; z-index: 20; }
.nav__inner { display: flex; align-items: center; gap: var(--s8); min-height: 80px; }
/* links and the call button travel together on the right, so the bar reads
   as mark-then-actions rather than three things spaced apart */
.nav__links { display: flex; align-items: center; gap: var(--s8); margin-left: auto; }
.nav__links a { font-size: var(--small); font-weight: 500; color: var(--ink-700); min-height: var(--hit); display: inline-flex; align-items: center; }
.nav__links a:hover { color: var(--brass-700); }

/* ---------- mobile navigation ---------- */

.nav__toggle {
  display: none;
  width: 48px; height: 48px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; padding: 0;
  color: var(--ink-900);
}
.nav__toggle:hover { border-color: var(--ink-900); }
.nav__toggle span {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  position: relative; transition: background-color .18s ease;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: currentColor; transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__panel {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--page);
}
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li + li { border-top: 1px solid var(--border); }
.nav__panel a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding-block: var(--s3);
  font-size: var(--h3); font-weight: 600; letter-spacing: -.02em;
  color: var(--ink-900);
}
.nav__panel a[aria-current="page"] { color: var(--brass-700); }
.nav__panel a::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid var(--brass-500); border-top: 1.5px solid var(--brass-500);
  transform: rotate(45deg);
}
.nav__panel .btn { width: 100%; margin-block: var(--s6) var(--s8); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  /* the links carried margin-left:auto; with them gone the toggle has to
     take over pushing itself right */
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav > .nav__panel.is-open { display: block; }
  .nav__inner > .btn--sm { display: none; }
}

/* ---------- logo ---------- */

.logo { display: inline-flex; align-items: center; gap: .32em; }
.logo__mark {
  width: 1.4em; height: 1.4em; background: var(--ink-900); color: var(--bone-50);
  display: inline-flex; align-items: flex-end; padding: 0 .13em .05em;
  font-weight: 700; font-size: 1em; letter-spacing: -.07em; line-height: 1; flex: none;
}
.logo__word { font-weight: 700; letter-spacing: -.035em; color: var(--heading); line-height: 1; }
.on-ink .logo__mark { background: var(--brass-500); color: var(--ink-900); }
.logo--lg { font-size: 21px; }

/* ---------- footer ---------- */

.footer { padding-block: var(--s24) var(--s8); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s12) var(--s8); padding-bottom: var(--s16); border-bottom: 1px solid rgba(251,250,247,.2); }
.footer__col ul { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.footer__col a { font-size: var(--small); color: #CFCEC5; }
.footer__col a:hover { color: var(--brass-300); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s6); padding-top: var(--s8); flex-wrap: wrap; }
.footer__bottom span, .footer__bottom a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(207,206,197,.55); }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__col--wide { grid-column: 1 / -1; } }
@media (max-width: 767px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 439px)  { .footer__grid { grid-template-columns: 1fr; gap: var(--s8); } }

/* ---------- mobile ---------- */

@media (max-width: 519px) {
  .btn { width: 100%; min-height: 56px; }
  .btn--tertiary { width: auto; min-height: auto; }
  .btn-row { flex-direction: column; }
  .section { padding-block: var(--s16); }
  .facts { flex-direction: column; gap: var(--s3); }
}

/* ---------- motion — one moment, on load ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .68s cubic-bezier(.2,.7,.3,1) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .14s; }
.rise-3 { animation-delay: .23s; }
.rise-4 { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* deep links land below the sticky bar rather than under it */
:target, [id] { scroll-margin-top: 96px; }
@media (max-width: 767px) { :target, [id] { scroll-margin-top: 72px; } }


/* ---------- a hero that does not rotate --------------------------------
   Every page now opens with one composition instead of three or four.

   Why the rotator went: on an interior page it asked the reader to work
   through competing propositions before reaching the page they had already
   chosen to visit, and on a phone the artwork behind it is hidden anyway,
   leaving controls that moved between headings and nothing else. On the
   homepage it split one offer into four and showed most people only the
   first. None of the copy was lost — the other slides said what the
   sections below already say at length.

   Everything the art system does is keyed to .hero, so the markup keeps
   that class. All this adds is the height the .hero__slides grid used to
   supply, since there is no longer a slides wrapper to supply it. */

.hero--static .hero__inner { min-height: clamp(420px, 38vw, 560px); }
.hero--page.hero--static .hero__inner {
  min-height: clamp(300px, 26vw, 400px);
  padding-block: var(--s16);
}

/* on a phone the head is type on ink and takes exactly the height its
   words need — mobile.css sets the padding */
@media (max-width: 899px) {
  .hero--static .hero__inner,
  .hero--page.hero--static .hero__inner { min-height: 0; }
}


/* ---------- film in the hero ------------------------------------------
   The hero cut is rendered at 2200x1238 — the same artboard the drawn
   compositions use — with its type removed, because the films put their
   words in the type-safe left 58% and that is where the page headline
   already sits. So this layer is the artwork and nothing else, and it
   drops into exactly the box .hero__board occupies.

   It sits above .hero__art and below .hero__scrim. The drawn board stays
   in the markup underneath: if the film is never fetched — a phone, a
   data-saver, reduced motion, a codec refusal — the page still has its
   composition rather than a hole. That is why it fades in rather than
   appearing: the artwork is already there to fade over. */

.hero__film {
  position: absolute;
  left: 0; top: 50%;
  width: 100cqw; height: 56.27cqw;
  transform: translateY(-50%);
  z-index: 0;
  object-fit: fill;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.hero__film.is-ready { opacity: 1; }

/* Below 900 the drawn board is already scaled and cropped for the mobile
   composition, and a 600KB download to sit behind a scrim on a phone is
   exactly the thing we criticise other people's sites for. No film here. */
@media (max-width: 899px) { .hero__film { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__film { display: none; } }

/* ---------- film band --------------------------------------------------
   Where a film is the point rather than the backdrop. Two cuts are wired
   up: the 2200x1238 landscape one, and the 1080x1920 vertical one on a
   phone — where a letterboxed 16:9 strip would be about eighty pixels of
   actual picture. The aspect box switches with it so there is never a
   black bar or a jump when the video arrives. */

.film { position: relative; background: var(--ink-900);
        border-top: var(--field-edge) solid var(--brass-500);
        border-bottom: var(--field-edge) solid var(--brass-500); }
.film__frame {
  position: relative;
  aspect-ratio: 2200 / 1238;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 76% 44%, rgba(154,124,58,.15), rgba(14,15,14,0) 60%),
    var(--ink-900);
}
.film__frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* the control that stands in until someone asks for the download */
.film__wait {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); border: 0; cursor: pointer; background: transparent;
  color: var(--bone-50); font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .16em; text-transform: uppercase; min-height: var(--hit);
}
.film__wait i {
  display: block; width: 64px; height: 64px;
  border: 1px solid var(--brass-500);
  position: relative; transition: background-color .2s ease;
}
.film__wait i::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 17px solid var(--brass-500);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.film__wait:hover i { background-color: rgba(154,124,58,.16); }
.film__wait small { color: rgba(251,250,247,.6); font-size: 11px; letter-spacing: .14em; }
.film[data-film-ready] .film__wait { display: none; }

.film__cap {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8);
  padding-block: var(--s5);
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .14em; text-transform: uppercase; color: #8A8D84;
}
.film__cap b { color: var(--brass-300); font-weight: 500; }

@media (max-width: 767px) {
  /* the vertical cut, and a box shaped for it. Capped so the film cannot
     run taller than the screen and push everything else off the page. */
  .film__frame { aspect-ratio: 1080 / 1920; max-height: 76vh; margin-inline: auto; }
  .film__frame video { object-fit: contain; }
  .film__cap { gap: var(--s2); flex-direction: column; padding-block: var(--s4); }
}

/* Once a source is attached the film is either running or showing its own
   controls; either way the stand-in must get out of the way. */
.film__frame video[src] ~ .film__wait { display: none; }


/* ---------- the services menu ------------------------------------------
   Phone first: below 900px .nav__links is display:none and the hamburger
   panel does the work, so none of the dropdown rules below are even live
   there. The panel nests the categories under Services as an indented
   list — see the builder in motion.js.

   On a pointer device the menu opens on hover and on focus-within, which
   means it is keyboard-operable without a line of JavaScript: tab to
   Services and the panel is open and tabbable. JS only adds the case
   hover cannot cover — a touch screen wide enough to be showing the
   desktop nav, where the first tap should open rather than navigate. */

.nav__group { position: relative; display: inline-flex; align-items: center; }
.nav__group > a { gap: var(--s2); }
.nav__chev { flex: none; transition: transform .2s ease; opacity: .6; }

.nav__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  min-width: 300px; padding: var(--s3);
  background: var(--page);
  border: 1px solid var(--border);
  border-top: var(--field-edge) solid var(--brass-500);
  box-shadow: var(--shadow-lift, 0 18px 44px rgba(14,15,14,.14));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 30;
}
/* a strip of hover-safe space so the pointer can cross the gap */
.nav__group::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__group.is-open .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav__group:hover .nav__chev,
.nav__group:focus-within .nav__chev,
.nav__group.is-open .nav__chev { transform: rotate(180deg); }

.nav__menu a {
  display: block; padding: var(--s3) var(--s4);
  min-height: 0; color: var(--ink-900);
}
.nav__menu a b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.nav__menu a span {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400);
}
.nav__menu a:hover { background: var(--bone-100); color: var(--ink-900); }
.nav__menu a:hover b { color: var(--brass-700); }
.nav__menu a[aria-current="page"] b { color: var(--brass-700); }

@media (prefers-reduced-motion: reduce) {
  .nav__menu { transition: none; }
  .nav__chev { transition: none; }
}

/* ---------- the same six inside the mobile panel ---------------------- */
.nav__panel .nav__sub { margin: 0 0 var(--s2); padding: 0; list-style: none; }
.nav__panel .nav__sub li + li { border-top: 1px solid var(--border); }
.nav__panel .nav__sub a {
  padding-left: var(--s6); font-size: 15px; font-weight: 500; color: var(--ink-700);
  min-height: 52px;
}
.nav__panel .nav__sub a::after { display: none; }
.nav__panel .nav__sub a[aria-current="page"] { color: var(--brass-700); }


/* ---------- cookie consent ----------------------------------------------
   A bar, not a modal. Blocking the page to demand a decision before
   anyone has read a word is hostile, and the ICO is clear that reject
   must be as easy as accept — so the two buttons sit together, same size,
   same weight, no dark pattern.

   Its resting state is visible. No transition brings it in: this file has
   already lost a sticky bar to a transition that never ran in a
   non-compositing frame, and a consent bar that fails that way sets
   nothing but also asks nobody. */

/* mobile.js puts a booking bar at bottom:0 as well. While the consent
   notice is up it takes the space; the booking bar comes back the moment
   a choice is made. */
html.ds-cc-open .bookbar { display: none; }

.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ink-900);
  border-top: var(--field-edge) solid var(--brass-500);
  box-shadow: 0 -18px 44px rgba(14,15,14,.36);
}
.cc__in {
  display: flex; flex-direction: column; gap: var(--s5);
  padding-block: var(--s5);
}
.cc__copy {
  font-size: 13.5px; line-height: 1.55; color: #CFCEC5; max-width: 78ch; margin: 0;
}
.cc__copy a { color: var(--brass-300); text-decoration: underline; text-underline-offset: 3px; }
.cc__copy a:hover { color: var(--bone-50); }
.cc__acts { display: flex; gap: var(--s3); }
/* equal prominence — neither button is made harder to find than the other */
.cc__acts .btn { flex: 1; min-height: 46px; }
.cc__acts .btn--secondary { color: var(--bone-50); border-color: rgba(251,250,247,.4); }
.cc__acts .btn--secondary:hover { background: rgba(251,250,247,.1); border-color: var(--bone-50); }
.cc__acts .btn--primary { background: var(--bone-50); color: var(--ink-900); }
.cc__acts .btn--primary:hover { background: var(--brass-300); }

@media (min-width: 768px) {
  .cc__in { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s10); }
  .cc__acts { flex: none; }
  .cc__acts .btn { flex: none; min-width: 118px; }
}