/* Construct Media site.
   Single theme by design: stone ground, ultramarine, venetian-red text. Every colour is set explicitly.
   Albert Sans Light from Google Fonts. */

:root {
  --stone: #F2EDE4;
  --stone-2: #E8E1D5;
  --blue: #4251A5;
  --blue-deep: #313895;
  --hair: rgba(49, 56, 149, 0.28);
  --ink: #4251A5;
  --ink-soft: rgba(66, 81, 165, 0.88);
  --link: rgba(104, 52, 49, 0.8);
  --link-hover: #683431;
  --sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --gut: max(16px, 8.3vw);
  --head: clamp(64px, 5.8vw, 104px);
  --ease: cubic-bezier(0.912, -0.011, 0.094, 1.018);
  --out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --t-body: clamp(15px, 0.98vw, 19px);
  --t-large: clamp(18px, 1.42vw, 30px);
  --t-title: clamp(30px, 3.05vw, 70px);
  --t-h3: clamp(22px, 1.95vw, 42px);
  --t-cap: clamp(10px, 0.68vw, 13px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head) + 8px); }
body {
  margin: 0; background: var(--stone); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: var(--t-body); line-height: 1.35;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
b, strong, th, h1, h2, h3, h4 { font-weight: 300; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--blue); color: var(--stone); }
.frame { padding-inline: var(--gut); }
.caps { text-transform: uppercase; letter-spacing: 0.06rem; font-size: var(--t-cap); }
.soft { color: var(--ink-soft); }
.tbc { color: var(--blue); border-bottom: 1px dotted currentColor; }

/* ---------- Header ---------- */
.head { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--head); display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; padding-bottom: clamp(10px, 0.9vw, 18px); background: var(--stone); }
.mark { display: block; line-height: 0; }
.mark img { width: clamp(150px, 15.6vw, 340px); height: auto; transform-origin: 0 0; }
.nav { display: flex; gap: 0 clamp(0.9rem, 2.1vw, 2.6rem); color: var(--blue); text-transform: uppercase; font-size: clamp(11px, 0.88vw, 17px); letter-spacing: 0.01em; line-height: 1; padding-bottom: 0.08em; }
.nav a { position: relative; padding-block: 0.3em; transition: opacity 0.35s var(--out); white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--out); }
.nav a:hover::after, .nav a[aria-current]::after, .nav a.is-here::after { transform: scaleX(1); transform-origin: left; }
.nav:hover a:not(:hover) { opacity: 0.45; }

main { padding-top: var(--head); }

/* ---------- Frames: the big image under the header ---------- */
.stage { --fw: calc(100vw - 2 * var(--gut)); position: relative; width: 100%; height: min(calc(var(--fw) / 1.5), calc(100svh - var(--head) - 1.2rem)); overflow: hidden; background: var(--stone-2); }

.stage.capped { height: min(calc(var(--fw) / 1.5), calc(100svh - var(--head) - 3.6rem)); }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.figcap { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.5rem; flex-wrap: wrap; padding-top: 0.75rem; color: var(--ink-soft); }
.figcap b { color: var(--ink); }

/* Home slideshow */
.show img { opacity: 0; transform: scale(1.045); transition: opacity 1.6s var(--out), transform 9s cubic-bezier(0.2, 0.55, 0.15, 1); }
.show img.on { opacity: 1; transform: scale(1); z-index: 1; }
.show img.was { opacity: 0; transform: scale(1); transition: opacity 1.6s var(--out); }
.show button { position: absolute; inset: 0; z-index: 2; width: 100%; background: none; border: 0; cursor: pointer; }
.tick { position: absolute; z-index: 3; left: 0; bottom: 0; height: 1px; width: 100%; background: rgba(242, 237, 228, 0.85); transform-origin: left; transform: scaleX(0); }
.tick.run { animation: tick linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }

/* States: one frame, several layers (photograph, outline, render) */
.states img { opacity: 0; transition: opacity 1.1s var(--out); }
.states img.on { opacity: 1; }
.seg { display: flex; gap: 0 1.4rem; flex-wrap: wrap; }
.seg button { all: unset; cursor: pointer; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06rem; font-size: var(--t-cap); padding-block: 0.25em; position: relative; transition: color 0.35s var(--out); }
.seg button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--out); }
.seg button[aria-pressed="true"] { color: var(--blue); }
.seg button[aria-pressed="true"]::after { transform: scaleX(1); }
.seg button:hover { color: var(--ink); }
.seg button:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }

/* ---------- Compare slider ---------- */
.compare { position: relative; overflow: hidden; background: var(--stone-2); --p: 50%; aspect-ratio: 3 / 2; touch-action: pan-y; }
.stage .compare, .compare.fill { position: absolute; inset: 0; aspect-ratio: auto; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .over { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.compare .line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 1px; background: rgba(242, 237, 228, 0.95); pointer-events: none; }
.compare .knob { position: absolute; top: 50%; left: var(--p); width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid rgba(242, 237, 228, 0.95); border-radius: 50%; pointer-events: none; display: grid; place-items: center; backdrop-filter: blur(2px); background: rgba(31, 33, 48, 0.12); transition: transform 0.5s var(--out); }
.compare .knob::before { content: ""; width: 14px; height: 6px; border-left: 1px solid #F2EDE4; border-right: 1px solid #F2EDE4; }
.compare:hover .knob { transform: scale(1.1); }
.compare .lab { position: absolute; top: 14px; color: #F2EDE4; text-transform: uppercase; letter-spacing: 0.06rem; font-size: var(--t-cap); text-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; transition: opacity 0.4s var(--out); }
.compare .lab.l { left: 16px; } .compare .lab.r { right: 16px; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare input:focus-visible ~ .knob { outline: 1px solid #F2EDE4; outline-offset: 4px; }

/* Project opener: the whole image, never cropped */
.fit-frame { position: relative; }
.compare.natural { aspect-ratio: auto; }
.compare.natural > img:first-child { position: relative; display: block; width: 100%; height: auto; }
.fit-still { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--head) - 3.6rem); object-fit: contain; object-position: left center; }

/* Zoomable tiles and lightbox */
.zoom { all: unset; display: block; width: 100%; cursor: zoom-in; }
.zoom .ph { display: block; }
.zoom img { transition: transform 1.2s var(--out); }
.zoom:hover img { transform: scale(1.03); }
.zoom:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(242, 237, 228, 0.97); display: grid; place-items: center; padding: clamp(16px, 4vw, 64px); opacity: 0; transition: opacity 0.35s var(--out); }
.lb.on { opacity: 1; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; display: grid; gap: 0.8rem; max-width: 100%; }
.lb img { max-width: min(92vw, 2400px); max-height: calc(100svh - 9rem); width: auto; height: auto; object-fit: contain; }
.lb figcaption { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); }
.lb button { all: unset; cursor: pointer; color: var(--blue); }
.lb .lb-x { text-transform: uppercase; letter-spacing: 0.06rem; font-size: var(--t-cap); position: absolute; top: clamp(16px, 2vw, 32px); right: clamp(16px, 4vw, 64px); padding: 0.4em 0; border-bottom: 1px solid currentColor; }
.lb .lb-p, .lb .lb-n2 { position: absolute; top: 50%; transform: translateY(-50%); font-size: clamp(22px, 2vw, 34px); padding: 0.4em; }
.lb .lb-p { left: clamp(4px, 1vw, 20px); } .lb .lb-n2 { right: clamp(4px, 1vw, 20px); }
.lb button:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }

/* ---------- Rows: label left, content right ---------- */
.row { display: grid; grid-template-columns: 42% 1fr; }
.label { margin: 0; color: var(--blue); text-transform: uppercase; font-size: var(--t-large); line-height: 1.2; letter-spacing: 0.005em; }
.title { margin: 0; color: var(--blue); font-size: var(--t-title); line-height: 1.04; letter-spacing: -0.012em; }
.large { font-size: var(--t-large); line-height: 1.32; letter-spacing: -0.003em; margin: 0 0 1.2rem; max-width: 34em; }
.prose p { margin: 0 0 1rem; max-width: 38em; }
.link { color: var(--link); transition: color 0.35s var(--out); display: inline-flex; gap: 0.5em; align-items: center; }
.link i { font-style: normal; display: inline-block; transition: transform 0.5s var(--out); }
.link:hover { color: var(--link-hover); }
.link:hover i { transform: translateX(0.35em); }

.sec { padding-block: clamp(3.5rem, 6vw, 7.5rem); }
.sec.tight { padding-block: clamp(2.5rem, 4vw, 5rem); }
.intro { padding-block: clamp(2.6rem, 4.4vw, 5.5rem) clamp(4rem, 8vw, 10rem); }
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: clamp(1rem, 1.4vw, 1.6rem); }
.rule { position: relative; }
.rule::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--blue-deep); transform-origin: left; }
.rule.thin::after { background: var(--hair); }

/* Service rows */
.svc { padding-block: clamp(1.8rem, 2.4vw, 3rem) clamp(2.4rem, 3.4vw, 4.2rem); }
.svc h3 { margin: 0; font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.008em; }
.svc .lede { margin: 0.3em 0 clamp(2rem, 3.6vw, 4.4rem); }
.svc ul { list-style: none; margin: 0; padding: 0; line-height: 1.55; }
.svc .link { margin-top: 1.8rem; }

/* Key/value and tables */
.kv { margin: 0; display: grid; grid-template-columns: minmax(9rem, 34%) 1fr; }
.kv dt, .kv dd { margin: 0; padding: 0.85rem 0; border-bottom: 1px solid var(--hair); }
.kv dt { color: var(--ink-soft); padding-right: 1.5rem; }
.kv > :nth-child(1), .kv > :nth-child(2) { border-top: 1px solid var(--hair); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 0.85rem 1.4rem 0.85rem 0; border-bottom: 1px solid var(--hair); }
.tbl thead th { color: var(--blue); text-transform: uppercase; letter-spacing: 0.06rem; font-size: var(--t-cap); padding-top: 0; }
.tbl td:first-child { white-space: nowrap; }
.tbl .num { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

/* Buttons: solid and square, for the proof links */
.btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn { display: inline-flex; align-items: center; gap: 0.9em; background: var(--blue); color: var(--stone); text-transform: uppercase; letter-spacing: 0.06rem; font-size: clamp(11px, 0.78vw, 14px); line-height: 1.2; padding: 1.05em 1.5em; transition: background 0.35s var(--out); }
.btn i { font-style: normal; transition: transform 0.5s var(--out); }
.btn:hover { background: var(--blue-deep); }
.btn:hover i { transform: translateX(0.3em); }
.btn[download]:hover i { transform: translateY(0.2em); }
.btn:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
.sched td, .sched th { padding-right: 1.1rem; white-space: nowrap; }
.sched tr.hl td { color: var(--blue); background: rgba(66, 81, 165, 0.07); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: minmax(10rem, 34%) 1fr; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
.steps li:first-child { border-top: 1px solid var(--hair); }
.steps b { color: var(--ink); padding-right: 1.5rem; }
.steps span { color: var(--ink-soft); }

/* ---------- Project cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3.6rem) clamp(1rem, 1.6vw, 2rem); }
.card { display: grid; gap: 0.7rem; transition: opacity 0.5s var(--out); }
.cards:hover .card:not(:hover) { opacity: 0.55; }
.card .pic { aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone-2); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--out); }
.card:hover .pic img { transform: scale(1.035); }
.card .name { font-size: clamp(17px, 1.25vw, 24px); line-height: 1.2; color: var(--ink); }
.card .nrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.card .status { color: var(--blue); white-space: nowrap; }
.card .meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); }
.card .horn { color: var(--blue); }
.card[hidden] { display: none; }

.filters { display: flex; gap: 0 1.6rem; flex-wrap: wrap; }

/* Figures in a grid */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3.6rem) clamp(1rem, 1.6vw, 2rem); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3.6rem) clamp(1rem, 1.6vw, 2rem); }
figure { margin: 0; }
.ph { overflow: hidden; background: var(--stone-2); aspect-ratio: 3 / 2; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.tall { aspect-ratio: 4 / 5; }
.ph.wide { aspect-ratio: auto; }

/* Prev / next */
.pnav { display: grid; grid-template-columns: 1fr 1fr; }
.pnav a { padding-block: 1.6rem 0.2rem; display: grid; gap: 0.4rem; }
.pnav a:last-child { text-align: right; }
.pnav b { font-size: var(--t-h3); line-height: 1.1; color: var(--ink); transition: color 0.35s var(--out); }
.pnav a:hover b { color: var(--blue); }

/* Credits */
.credits { display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; font-size: var(--t-large); line-height: 1.32; }

/* Contact */
.contact-line a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--out); }
.contact-line a:hover { background-size: 100% 1px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.field { display: grid; gap: 0.35rem; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--ink-soft); }
.field .hint { color: var(--ink-soft); font-size: 0.86em; }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--blue-deep); border-radius: 0; padding: 0.45rem 0; width: 100%; }
.field textarea { min-height: 7rem; resize: vertical; }
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--blue) 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--blue) 50%) right 0 center / 6px 6px no-repeat; padding-right: 1.4rem; }
.send { all: unset; cursor: pointer; color: var(--blue); text-transform: uppercase; letter-spacing: 0.06rem; font-size: var(--t-cap); border-bottom: 1px solid currentColor; padding-bottom: 0.2em; }
.sent { color: var(--blue); font-size: var(--t-large); }

/* ---------- Opening sequence (home only) ---------- */
.veil { display: none; }
.intro-on .veil { display: block; position: fixed; inset: 0; z-index: 20; background: var(--stone); }
.intro-on .nav a { opacity: 0; }
.play .veil { transform: translateY(-100%); transition: transform 1.5s var(--ease) 0.95s; }
.play .nav a { opacity: 1; transition: opacity 0.9s var(--out); }
.play .nav a:nth-child(1) { transition-delay: 1.9s; } .play .nav a:nth-child(2) { transition-delay: 1.95s; } .play .nav a:nth-child(3) { transition-delay: 2s; }
.play .nav a:nth-child(4) { transition-delay: 2.05s; } .play .nav a:nth-child(5) { transition-delay: 2.1s; } .play .nav a:nth-child(6) { transition-delay: 2.15s; }
.intro-on .show img.on { transform: scale(1.09); }
.play .show img.on { transform: scale(1); transition: opacity 1.6s var(--out), transform 3.4s var(--out) 1s; }

/* ---------- Scroll reveals (JS only) ---------- */
.js [data-r] { opacity: 0; transform: translateY(1.1rem); transition: opacity 1.1s var(--out), transform 1.1s var(--out); transition-delay: var(--d, 0s); }
.js [data-r].in { opacity: 1; transform: none; }
.js .rule::after { transform: scaleX(0); transition: transform 1.6s var(--ease); }
.js .rule.in::after { transform: scaleX(1); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .nav { gap: 0 1rem; }
}
@media (max-width: 900px) {
  .cards, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 1.1rem; }
  .svc .lede { margin-bottom: 1.4rem; }
  .grid2, .form { grid-template-columns: 1fr; }
  .kv, .steps li { grid-template-columns: 1fr; }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
  .kv > :nth-child(2) { border-top: 0; }
  .steps li { gap: 0.3rem; }
}
@media (max-width: 640px) {
  .head { position: sticky; height: auto; flex-direction: column; align-items: flex-start; padding-top: 14px; padding-bottom: 12px; }
  .nav { flex-wrap: wrap; gap: 0.25rem 1.1rem; }
  main { padding-top: 0; }
  .stage, .stage.capped { height: calc(var(--fw) / 1.5); }
  .cards, .grid3 { grid-template-columns: 1fr; }
  html { scroll-padding-top: 7rem; }
  .pnav b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .show img, .show img.was, .states img { transition: none; transform: none; }
  .tick { display: none; }
  .js [data-r] { opacity: 1; transform: none; transition: none; }
  .js .rule::after { transform: none; transition: none; }
  .card .pic img, .compare .knob { transition: none; }
}

.clients { list-style: none; margin: 0; padding: 0; font-size: var(--t-large); line-height: 1.45; }
.clientcols { align-items: start; }

.card .cnt { color: var(--blue); margin-top: -0.3rem; }

/* Case study features on the Heritage page */
.case { display: block; color: inherit; text-decoration: none; }
.case .ph { display: block; }
.case .ph img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.case:hover .ph img { transform: scale(1.02); }
.case-t { display: block; margin-top: 1.4rem; color: var(--blue); font-size: var(--t-title); line-height: 1.05; letter-spacing: -0.012em; }
.case-s { display: block; margin: .9rem 0 1.2rem; max-width: 30em; color: var(--blue); }

/* Header enquiry button, book-a-call tab, footer */
.head-r { display: flex; align-items: flex-end; gap: clamp(1rem, 2.2vw, 2.8rem); }
.enq { border: 1px solid var(--blue); color: var(--blue); padding: .55em 1.1em .5em; font-size: clamp(10px, .78vw, 14px); line-height: 1; transition: background .35s var(--out), color .35s var(--out); white-space: nowrap; }
.enq:hover { background: var(--blue); color: var(--stone); }
.booktab { position: fixed; right: 0; top: 50%; z-index: 25; transform: translateY(-50%); writing-mode: vertical-rl; background: var(--stone); border: 1px solid var(--blue); border-right: 0; color: var(--blue); padding: 1.1em .55em; font-size: clamp(10px, .72vw, 13px); letter-spacing: .08em; transition: background .35s var(--out), color .35s var(--out); }
.booktab:hover { background: var(--blue); color: var(--stone); }
.foot { margin-top: clamp(3rem, 6vw, 7rem); color: var(--blue); }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem 2rem; border-top: 1px solid var(--blue); padding-block: clamp(1.8rem, 2.6vw, 3rem); }
.foot-cols > div { display: flex; flex-direction: column; gap: .6rem; }
.foot-cols a:hover { color: var(--link-hover); }
.foot-bar { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--hair); padding-block: 1.4rem 2rem; font-size: var(--t-cap); color: var(--ink-soft); }
.foot-bar a { color: var(--link); } .foot-bar a:hover { color: var(--link-hover); }
@media (max-width: 1000px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .enq { display: none; } .booktab { display: none; } .foot-cols { grid-template-columns: 1fr; } .foot-bar { flex-direction: column; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cookie choice */
.consent { position: fixed; left: var(--gut); bottom: 1.2rem; z-index: 40; max-width: 30rem; background: var(--stone); border: 1px solid var(--blue); color: var(--blue); padding: 1rem 1.2rem; font-size: var(--t-cap); line-height: 1.5; }
.consent p { margin: 0 0 .8rem; }
.consent div { display: flex; gap: .6rem; }
.consent button { font: inherit; text-transform: uppercase; letter-spacing: .06rem; border: 1px solid var(--blue); background: none; color: var(--blue); padding: .5em 1em .45em; cursor: pointer; }
.consent button[data-c="yes"] { background: var(--blue); color: var(--stone); }
@media (max-width: 700px) { .consent { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* Phone menu */
.menu-btn, .mnav { display: none; }
@media (max-width: 640px) {
  .head { flex-direction: row; align-items: center; justify-content: space-between; }
  .head-r { display: none; }
  .menu-btn { display: block; font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: none; border: 1px solid var(--blue); padding: .55em 1em .5em; cursor: pointer; }
  .head.open .menu-btn { background: var(--blue); color: var(--stone); }
  .mnav { position: fixed; inset: var(--mtop, 64px) 0 0 0; z-index: 29; background: var(--stone); padding: 1.6rem 16px 2rem; overflow-y: auto; }
  .head.open .mnav { display: block; }
  .mnav nav { display: flex; flex-direction: column; border-top: 1px solid var(--blue); }
  .mnav nav a { color: var(--blue); font-size: 26px; line-height: 1.1; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
  .mnav nav a[aria-current] { color: var(--ink-soft); }
  .mnav-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.8rem; }
  .mnav-foot .enq { display: inline-block; }
  body.menu-open { overflow: hidden; }
}

/* Methodology lens table: clear gap from the text column */
.lens-row { column-gap: clamp(3rem, 6vw, 7rem); }
.lens-row .prose p { max-width: 34em; }
.lens-tbl td:last-child, .lens-tbl th:last-child { padding-right: 0; }

/* Keyboard focus on comparison sliders */
.compare:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.compare:focus-within .knob { box-shadow: 0 0 0 3px var(--stone), 0 0 0 5px var(--blue); }