/* Renova Pross homepage. Spec: website/DESIGN.md (reference lock: Lamborghini.com). */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Lamborghini.com neutrals, research/refero/styles/style-lamborghini.txt */
  --black: #000000;
  --carbon: #202020;
  --carbon-deep: #181818;
  --anvil: #313131;
  --graphite: #494949;
  --steel: #7d7d7d;
  --ash: #969696;
  --marble: #f5f5f5;
  --white: #ffffff;
  /* Renova accent. Roles: primary CTA fill, hero signal line, footer logo. Nothing else. */
  --aqua: #79ebd8;
  --aqua-shade: #2bc9b6; /* hover only, Lamborghini "Giallo Ombra" role */

  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --track: 0.023em;

  /* Motion, Premium archetype: lottie-motion-design/director/motion-personality.md */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
  --t-quick: 350ms;
  --t-std: 500ms;
  --t-slow: 800ms;
  --stagger: 80ms;

  --nav-h: 64px;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, canvas, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--white); color: var(--black); padding: 8px 16px; z-index: 100; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.display, h1, h2, h3, .label, .btn, .nav__links > li > a {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track);
}
.label { font-size: 14px; line-height: 1.3; }
.muted { color: var(--steel); }
/* Steel passes on black only. Light sections take graphite (8.3:1 on marble), carbon takes ash (5.5:1). */
.section--light .muted, .section--white .muted { color: var(--graphite); }
.process .muted { color: var(--ash); }

/* ---------- Buttons (Lamborghini: Giallo Action / Ghost Link / Outlined Nav) ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1; padding: 16px 24px; white-space: nowrap; transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--t-quick) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--aqua); color: var(--black); }
.btn--primary:hover { background: var(--aqua-shade); }
.btn--ghost { padding-left: 0; padding-right: 0; color: var(--white); }
.btn--ghost.on-light { color: var(--carbon); }
.btn--outline { border: 1px solid var(--steel); padding: 11px 18px; font-size: 14px; color: var(--white); }
.btn--outline:hover { border-color: var(--white); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); background: var(--carbon); z-index: 50; }
.nav > .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 32px; }
.nav__links > li > a { font-size: 14px; opacity: 0.82; transition: opacity var(--t-quick) var(--ease); }
.nav__links > li > a:hover { opacity: 1; }
.nav__right { display: flex; align-items: center; gap: 24px; }
.nav__phone { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); font-size: 14px; }
.menu-btn { display: none; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); font-size: 14px; text-transform: uppercase; padding: 8px 0; }
.menu-btn__bars { width: 22px; height: 10px; display: grid; align-content: space-between; }
.menu-btn__bars i { display: block; height: 2px; background: currentColor; transition: transform var(--t-quick) var(--ease); }
.nav[data-open="true"] .menu-btn__bars i:first-child { transform: translateY(4px) rotate(45deg); }
.nav[data-open="true"] .menu-btn__bars i:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__sheet { display: none; }
.menu-link { display: none; align-items: center; padding: 8px 0; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); font-size: 14px; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 220vh; background: var(--black); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__media { position: absolute; inset: 0; will-change: transform; transform-origin: 60% 50%; }
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__canvas { opacity: 0; transition: opacity var(--t-std) var(--ease); }
.hero__canvas.is-ready { opacity: 1; }
/* Functional legibility scrim, not decoration: see DESIGN.md ledger */
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,0) 66%),
  linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 34%); }

.hero__mark { position: absolute; right: max(5vw, 48px); top: 50%; width: min(34vw, 520px); color: var(--white); pointer-events: none; transform: translateY(-50%); will-change: transform; }
.hero__mark-in { opacity: 0.16; animation: rp-breathe 4000ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.hero__mark svg { width: 100%; height: auto; overflow: visible; }

.hero__content { position: absolute; left: 0; right: 0; bottom: clamp(72px, 13vh, 150px); }
.hero__beats { display: grid; }
/* One beat since 2026-09-14 (DESIGN.md "Homepage v2"): three heading lines, the service line, actions, a discreet trust line. */
.hero__beat { grid-area: 1 / 1; max-width: min(66vw, 980px); }
.hero__eyebrow { font-size: 16px; line-height: 1.3; margin-bottom: 24px; }
.hero h1 { font-size: clamp(52px, 6.4vw, 104px); line-height: 0.92; }
.hero__h-line { display: block; }
.hero__sub { font-size: 18px; line-height: 1.56; max-width: 560px; margin-top: 24px; color: rgba(255,255,255,0.86); }
.hero__list { display: flex; flex-wrap: wrap; }
.hero__list li + li::before { content: "\2022"; content: "\2022" / ""; margin: 0 12px; opacity: 0.6; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 36px; }
.hero__trust { margin-top: 20px; font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.66); }

.hero__line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--aqua); transform: scaleX(0); transform-origin: 0 50%; overflow: hidden; }
.hero__line::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0)); opacity: 0; animation: rp-gleam 6000ms var(--ease) 2400ms infinite; }
.hero__cue { position: absolute; right: var(--gutter); bottom: 32px; display: flex; align-items: center; gap: 16px; font-size: 12px; }
.hero__cue i { display: block; width: 40px; height: 2px; background: var(--white); }

/* Load arrival: rise + separate arc bump on its own property (DESIGN.md, Arcs) */
.js [data-arrive] { opacity: 0; }
.is-loaded [data-arrive] {
  animation: rp-rise var(--t-std) var(--ease) both, rp-arc var(--t-std) cubic-bezier(0.45, 0, 0.55, 1) both;
  animation-delay: calc(200ms + var(--i, 0) * var(--stagger));
}

/* ---------- Section scaffolding ---------- */
.section { position: relative; padding: clamp(80px, 12vh, 140px) 0; }
.section--light { background: var(--marble); color: var(--carbon); }
.section--white { background: var(--white); color: var(--carbon); }
.section--carbon { background: var(--carbon); }
.section--black { background: var(--black); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.head h2 { font-size: clamp(40px, 5vw, 54px); line-height: 1.05; }
.head__eyebrow { display: block; margin-bottom: 16px; }
.lead { font-size: 18px; line-height: 1.56; max-width: 560px; margin-top: 16px; }

.js [data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: rp-rise var(--t-std) var(--ease) both, rp-arc var(--t-std) cubic-bezier(0.45, 0, 0.55, 1) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* ---------- Services ---------- */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tile--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: end; }
.tile__media { position: relative; overflow: hidden; background: #e7e7e7; transition: clip-path 600ms var(--ease); }
.js .tile__media { clip-path: inset(100% 0 0 0); }
.tile__media picture { width: 100%; height: 100%; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform var(--t-slow) var(--ease) 50ms; }
.tile .tile__media { aspect-ratio: 4 / 5; }
.tile--lead .tile__media { aspect-ratio: 3 / 2; }
.tile.is-in .tile__media { clip-path: inset(0 0 0 0); }
.tile.is-in .tile__media img { transform: none; }
.tile__body { padding-top: 24px; }
.js .tile__body { opacity: 0; }
.tile.is-in .tile__body { animation: rp-rise var(--t-std) var(--ease) 100ms both, rp-arc var(--t-std) cubic-bezier(0.45, 0, 0.55, 1) 100ms both; }
.tile__title { font-size: 27px; line-height: 1.1; }
.tile--lead .tile__title { font-size: clamp(40px, 5vw, 54px); line-height: 1; }
.tile__text { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--graphite); max-width: 420px; }
.tile--lead .tile__body { padding: 0 0 8px; }
.tile--lead .tile__text { font-size: 18px; }

/* ---------- Process ---------- */
.process { position: relative; height: 400vh; background: var(--carbon); }
.process__stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); display: flex; align-items: center; }
.process__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; width: 100%; }
.process__label { display: block; margin-bottom: 24px; }
.process__nums { position: relative; height: clamp(160px, 24vw, 320px); }
.process__num { position: absolute; left: 0; top: 0; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); font-size: clamp(160px, 24vw, 320px); line-height: 0.8; opacity: 0; transform: translateY(20px); transition: opacity var(--t-quick) var(--ease-in), transform var(--t-quick) var(--ease-in); }
.process__num.is-active { opacity: 1; transform: none; transition: opacity var(--t-std) var(--ease) 150ms, transform var(--t-std) var(--ease) 150ms; }
.process__steps { position: relative; min-height: 220px; }
.step { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(20px); transition: opacity var(--t-quick) var(--ease-in), transform var(--t-quick) var(--ease-in); }
.step.is-active { opacity: 1; transform: none; transition: opacity var(--t-std) var(--ease) 150ms, transform var(--t-std) var(--ease) 150ms; }
.step h3 { font-size: clamp(40px, 5vw, 54px); line-height: 1; }
.step p { margin-top: 24px; font-size: 18px; line-height: 1.56; color: rgba(255,255,255,0.82); max-width: 520px; }
.process__track { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px; height: 1px; background: var(--anvil); }
.process__fill { position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
.process__ticks { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 52px; display: flex; justify-content: space-between; }
.process__ticks span { font-size: 12px; color: var(--ash); transition: color var(--t-quick) var(--ease); }
.process__ticks span.is-active { color: var(--white); }

/* ---------- Work (placeholders) ---------- */
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.work__slot { aspect-ratio: 4 / 5; background: var(--marble); outline: 1px dashed var(--ash); outline-offset: -12px; display: grid; place-items: center; text-align: center; padding: 24px; }
.work__slot span { color: var(--graphite); }
.work__cap { padding-top: 14px; }
.work__cap b { display: block; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 16px; }
.work__cap i { display: block; font-style: normal; font-size: 14px; color: var(--graphite); }

/* ---------- Areas ---------- */
.areas__list { margin-top: 48px; border-top: 1px solid var(--anvil); }
.areas__list li { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: clamp(44px, 7vw, 104px); line-height: 1; padding: 16px 0 14px; border-bottom: 1px solid var(--anvil); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.areas__list li small { font-size: 14px; color: var(--steel); letter-spacing: var(--track); }
.areas__note { margin-top: 32px; font-size: 18px; line-height: 1.56; color: rgba(255,255,255,0.82); max-width: 560px; }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; background: var(--black); padding: clamp(120px, 20vh, 220px) 0; }
.cta__bg { position: absolute; left: 0; right: 0; top: -80px; bottom: -80px; background: var(--black) url("../img/cta-band.webp") right center / cover no-repeat; will-change: transform; }
/* Legibility scrim, functional like the hero's: the tile photo's lit patches drop body text under 4.5:1. */
.cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 75%); }
.cta__inner { position: relative; }
.cta h2 { font-size: clamp(56px, 8vw, 104px); line-height: 0.92; max-width: 900px; }
.cta p { margin-top: 24px; font-size: 18px; line-height: 1.56; max-width: 520px; color: rgba(255,255,255,0.86); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 40px; }

/* ---------- Footer ---------- */
.footer { background: var(--black); border-top: 1px solid var(--anvil); padding: 80px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 3fr; gap: 40px; }
.footer__logo img { width: 240px; height: auto; }
.footer h3 { font-size: 14px; color: var(--steel); margin-bottom: 16px; }
.footer li { font-size: 16px; line-height: 2; }
.footer li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__base { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--anvil); font-size: 12px; color: var(--steel); }
.footer__by { flex: none; text-align: center; }
.footer__by a { color: var(--ash); text-decoration: none; }
.footer__by a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Keyframes ---------- */
@keyframes rp-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rp-arc { 0% { translate: 0 0; } 50% { translate: 5px 0; } 100% { translate: 0 0; } }
@keyframes rp-breathe { from { transform: scale(0.99); } to { transform: scale(1.01); } }
@keyframes rp-gleam { 0% { transform: translateX(-100%); opacity: 0; } 5% { opacity: 0.3; } 33% { transform: translateX(340%); opacity: 0.3; } 38%, 100% { transform: translateX(340%); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .nav__links, .nav__phone, .nav__right > .btn--outline { display: none; }
  .menu-btn { display: inline-flex; }
  /* No JavaScript: the sheet cannot open, so the menu word is a link to the HTML sitemap. */
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .menu-link { display: inline-flex; }
  .nav__sheet { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--carbon); padding: 32px var(--gutter); flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
  .nav[data-open="true"] .nav__sheet { display: flex; }
  .nav__sheet a { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 40px; line-height: 1.2; }
  .nav__sheet .btn { margin-top: 24px; align-self: flex-start; font-size: 16px; }
  /* Phone menu groups: DESIGN.md "Mega menu". */
  .mega, .mega__scrim { display: none; }
  .sheet__group { width: 100%; }
  .sheet__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; text-align: left; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 40px; line-height: 1.2; }
  .sheet__toggle::after { content: ""; flex: none; width: 20px; height: 20px; background: linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 20px no-repeat; transition: transform 150ms var(--ease); }
  .sheet__toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
  .sheet__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 200ms var(--ease-in), visibility 0s linear 200ms; }
  .sheet__sub > ul { min-height: 0; overflow: hidden; }
  .sheet__group.is-open .sheet__sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 280ms var(--ease), visibility 0s; }
  .nav__sheet .sheet__sub a { display: block; padding: 8px 0; font-size: 22px; line-height: 1.2; }
  .nav__sheet .sheet__sub a.sheet__all { padding-bottom: 20px; font-size: 16px; color: var(--ash); }
  .nav__sheet a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .sheet__group.is-open .sheet__sub li { animation: rp-rise 280ms var(--ease) both; animation-delay: calc(50ms + var(--i, 0) * 40ms); }
  .nav[data-open="true"] .nav__sheet > * { animation: rp-rise 280ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

  .hero { height: 180vh; }
  .hero__beat { max-width: none; }
  .hero__mark { top: calc(var(--nav-h) + 32px); right: var(--gutter); width: 120px; transform: none; }
  .hero__mark-in { opacity: 0.35; }
  .hero__scrim { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.15) 100%); }
  .hero h1 { font-size: clamp(42px, 11.5vw, 68px); }
  .hero__sub { font-size: 16px; }
  .hero__list li + li::before { margin: 0 8px; }
  .hero__cue { display: none; }

  .head { flex-direction: column; align-items: flex-start; }
  .services__grid { grid-template-columns: 1fr; }
  .tile--lead { grid-template-columns: 1fr; }
  .tile--lead .tile__body { padding: 0; }

  .process { height: auto; }
  .process__stage { position: relative; top: 0; height: auto; padding: 96px 0; }
  .process__grid { grid-template-columns: 1fr; }
  .process__nums, .process__track, .process__ticks { display: none; }
  .process__steps { min-height: 0; display: grid; gap: 48px; }
  .step { position: relative; opacity: 1; transform: none; }

  /* Stacked steps get the scroll response the sticky stage gives on desktop. */
  .js .step { opacity: 0; }
  .js .step.is-in { animation: rp-rise var(--t-std) var(--ease) both, rp-arc var(--t-std) cubic-bezier(0.45, 0, 0.55, 1) both; }
  .cta__bg::after { background: rgba(0,0,0,.4); }

  .work__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .hero__canvas { display: none; }
  .hero__line { transform: scaleX(1); }
  .js .tile__media { clip-path: none; }
  .tile__media img { transform: none; }
  .process { height: auto; }
  .process__stage { position: relative; top: 0; height: auto; padding: 96px 0; }
  .process__nums, .process__track, .process__ticks { display: none; }
  .process__steps { min-height: 0; display: grid; gap: 48px; }
  .step { position: relative; opacity: 1; transform: none; }
}

/* Stacked process (mobile, reduced motion) hides the big number morph, so each step carries its own. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .process__steps { counter-reset: step; }
  .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); content: counter(step, decimal-leading-zero) / ""; display: block; margin-bottom: 16px; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); font-size: 64px; line-height: 0.8; }
}

/* Landscape phones and short windows: the hero copy is taller than the stage there, so it compacts. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__content { bottom: 20px; }
  .hero__beat { max-width: min(80vw, 860px); }
  .hero__eyebrow { font-size: 13px; margin-bottom: 10px; }
  .hero h1 { font-size: clamp(28px, 9vh, 48px); }
  .hero__sub, .hero__trust { display: none; }
  .hero__actions { margin-top: 18px; }
  .hero__mark { display: none; }
  .js .rebuild__sub { display: none; }
  .js .rebuild h2 { font-size: clamp(28px, 9vh, 48px); }
  .js .rebuild__copy { bottom: 64px; }
}

/* ================= Generated inner pages (website/build). Same lock as the homepage: black stage, uppercase condensed, 0 radius, one aqua CTA per screen. ================= */
.section--light, .section--white { --line: #d6d6d6; --soft: var(--graphite); }
.section--carbon, .section--black { --line: var(--anvil); --soft: rgba(255, 255, 255, 0.8); }

.nav__links > li > a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }
.nav__lang { font-size: 13px; opacity: 0.82; transition: opacity var(--t-quick) var(--ease); }
.nav__lang:hover { opacity: 1; }

/* ---------- Mega menu. Spec and citations: DESIGN.md "Mega menu". ---------- */
.nav__item { display: flex; align-items: center; }
.nav__trigger { display: none; position: relative; align-items: center; gap: 6px; padding: 10px 0; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 14px; line-height: 1; opacity: 0.82; transition: opacity var(--t-quick) var(--ease); }
.js .nav__trigger { display: inline-flex; }
.js .nav__plain { display: none; }
.nav__trigger:hover, .nav__trigger[aria-expanded="true"], .nav__trigger[data-current] { opacity: 1; }
.nav__chev { width: 10px; height: 10px; transition: transform var(--t-quick) var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__trigger::after { content: ""; position: absolute; left: 0; right: 16px; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--t-quick) var(--ease); }
.nav__trigger[aria-expanded="true"]::after, .nav__trigger[data-current]::after { transform: scaleX(1); }

.mega { position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 49; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--carbon); border-top: 1px solid var(--anvil); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 250ms var(--ease-in), visibility 0s linear 250ms; }
.mega.is-open { z-index: 50; visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path var(--t-quick) var(--ease), visibility 0s; }
.mega.is-swap { transition: none; }
.mega.is-leaving { visibility: visible; clip-path: inset(0 0 0 0); opacity: 0; transition: opacity 175ms var(--ease-in), visibility 0s linear 175ms; }
.mega__inner { display: grid; grid-template-columns: minmax(220px, 3fr) 9fr; gap: 48px; padding-top: 40px; padding-bottom: 48px; }
.mega--areas .mega__inner { grid-template-columns: minmax(220px, 3fr) 6fr 3fr; }
.mega__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mega .muted { color: var(--ash); }
.mega__line { max-width: 300px; font-size: 16px; line-height: 1.5; color: var(--ash); }
.mega__all { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 14px; }
.mega__all svg { width: 14px; height: 14px; transition: transform var(--t-quick) var(--ease); }
.mega__all:hover svg { transform: translateX(4px); }
.mega__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mega__tile { display: block; }
.mega__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--anvil); }
.mega__media picture, .mega__media img { width: 100%; height: 100%; }
.mega__media img { object-fit: cover; transform: scale(1.06); transition: transform var(--t-slow) var(--ease); }
.mega.is-open .mega__media img { transform: none; }
.mega.is-open .mega__tile:hover .mega__media img { transform: scale(1.03); }
.mega__title { display: block; margin-top: 14px; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 20px; line-height: 1.1; }
.mega__text { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ash); }
.mega__tile:hover .mega__title, .mega__tile[aria-current] .mega__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mega__cities a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--anvil); font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; }
.mega__cities a svg { width: 18px; height: 18px; flex: none; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); }
.mega__cities a:hover svg, .mega__cities a:focus-visible svg, .mega__cities a[aria-current] svg { opacity: 1; transform: none; }
/* Twelve cities in three counties (2026-09-16). Three columns, at the tile title's size rather than the
   display size the old five-city list used, so the panel keeps its height. */
.mega__counties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; align-items: start; }
.mega__county > .label { margin: 0 0 2px; }
.mega__counties .mega__cities a { font-size: 18px; padding: 9px 0; gap: 10px; }
.mega__counties .mega__cities a svg { width: 14px; height: 14px; }
.mega__aside { aspect-ratio: 3 / 4; align-self: start; }
.mega.is-open .mega__intro, .mega.is-open .mega__item { animation: rp-rise var(--t-quick) var(--ease) both, rp-arc var(--t-quick) cubic-bezier(0.45, 0, 0.55, 1) both; }
.mega.is-open .mega__intro { animation-delay: 40ms; }
.mega.is-open .mega__item { animation-delay: calc(80ms + var(--i, 0) * 60ms); }
/* The areas panel now carries 15 rows, so its step drops to keep the whole stagger under 500ms
   (multi-element.md L11, budget in timing-easing-tables.md L96). */
.mega--areas.is-open .mega__item { animation-delay: calc(80ms + var(--i, 0) * 28ms); }
.mega__scrim { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 48; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease-in), visibility 0s linear 250ms; }
.nav.has-mega .mega__scrim { opacity: 1; visibility: visible; transition: opacity var(--t-quick) var(--ease), visibility 0s; }
@media (min-width: 900px) and (max-width: 1199px) {
  .mega__inner, .mega--areas .mega__inner { grid-template-columns: 1fr; gap: 28px; }
  .mega__intro { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
  .mega__line { max-width: none; }
  .mega__aside { display: none; }
}

/* ---------- Before and after sliders. DESIGN.md "Before and after" and "Before and after slider". ---------- */
.ba__list { display: grid; gap: clamp(56px, 8vw, 104px); margin-top: 8px; }
.ba__pair { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.ba__pair:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
.ba__pair:nth-child(even) .ba__cap { order: 2; }
.ba__cap { position: sticky; top: calc(var(--nav-h) + 32px); }
.ba__title { font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.ba__place { margin-top: 10px; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 14px; color: var(--ash); }
.ba__text { margin-top: 16px; max-width: 360px; font-size: 16px; line-height: 1.55; color: var(--ash); }
/* 4:5, never taller than 78% of the window (760px at most). */
.ba__compare { --pos: 50%; position: relative; width: 100%; max-width: min(88vh, 760px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--anvil); touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.js .ba__compare { cursor: ew-resize; }
.ba__layer { position: absolute; inset: 0; }
.ba__layer picture, .ba__layer img { width: 100%; height: 100%; }
.ba__layer img { object-fit: cover; pointer-events: none; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.js .ba__compare img { transform: scale(1.06); transition: transform var(--t-slow) var(--ease); }
.js .ba__compare.is-in img { transform: none; }
.ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); pointer-events: none; }
/* The divider reaches both edges; the handle stops 30px short, so it and its focus ring stay whole. */
.ba__handle { position: absolute; top: 50%; left: clamp(30px, var(--pos), calc(100% - 30px)); display: grid; place-items: center; width: 48px; height: 48px; background: var(--white); color: var(--black); border: 1px solid rgba(0, 0, 0, 0.12); transform: translate(-50%, -50%) scale(var(--lift, 1)); transition: transform 200ms var(--ease); cursor: grab; touch-action: none; }
.ba__handle[hidden] { display: none; }
.ba__handle svg { width: 28px; height: 16px; overflow: visible; }
.ba__chev { transition: transform 180ms var(--ease); }
.ba__compare.is-dragging .ba__handle { --lift: 1.03; transition-duration: 150ms; cursor: grabbing; }
.ba__compare.is-dragging .ba__chev { transition-duration: 100ms; }
.ba__compare.is-dragging .ba__chev--l { transform: translateX(-2px); }
.ba__compare.is-dragging .ba__chev--r { transform: translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .ba__handle:hover .ba__chev { transition-duration: 100ms; }
  .ba__handle:hover .ba__chev--l { transform: translateX(-2px); }
  .ba__handle:hover .ba__chev--r { transform: translateX(2px); }
}
.ba__handle:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 6px var(--white); }
.ba__tag { position: absolute; top: 0; padding: 8px 12px; font-size: 13px; line-height: 1; pointer-events: none; transition: opacity 200ms var(--ease) 50ms; }
.ba__tag--before { left: 0; background: var(--black); color: var(--white); }
.ba__tag--after { right: 0; background: var(--white); color: var(--black); }
.ba__tag.is-covered { opacity: 0; transition: opacity 150ms var(--ease-in); }
.section--white .ba__place, .section--white .ba__text, .section--light .ba__place, .section--light .ba__text { color: var(--graphite); }
.section--white .ba__compare, .section--light .ba__compare { background: var(--marble); }
@media (max-width: 899px) {
  .ba__pair, .ba__pair:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  .ba__pair:nth-child(even) .ba__cap { order: 0; }
  .ba__cap { position: static; }
  .ba__compare { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ba__compare img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { clip-path: none; }
  .mega, .mega.is-open, .mega.is-leaving, .mega__scrim, .nav.has-mega .mega__scrim, .sheet__sub, .sheet__group.is-open .sheet__sub { transition-duration: 1ms; transition-delay: 0s; }
  .mega.is-open .mega__intro, .mega.is-open .mega__item, .sheet__group.is-open .sheet__sub li, .nav[data-open="true"] .nav__sheet > * { animation: none; }
  .mega__media img, .mega.is-open .mega__media img { transform: none; transition: none; }
}
.footer__line { margin-top: 20px; max-width: 320px; font-size: 15px; line-height: 1.6; color: var(--ash); }
.footer__h { font-size: 14px; color: var(--steel); margin-bottom: 16px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a:hover { color: var(--white); }

/* Page hero: a real job photo on the black stage, copy bottom-left like the homepage */
.phero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 80svh, 880px); padding: calc(var(--nav-h) + 56px) 0 clamp(56px, 9vh, 112px); background: var(--black); overflow: hidden; }
.phero__media { position: absolute; inset: 0; }
.phero__media picture, .phero__media img { width: 100%; height: 100%; }
.phero__media img { object-fit: cover; }
.phero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.52) 44%, rgba(0,0,0,.1) 74%), linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 42%); }
.phero__inner { position: relative; }
.phero__text { max-width: min(64vw, 900px); }
.phero h1 { font-size: clamp(48px, 7.2vw, 108px); line-height: 0.92; }
.phero__lead { margin-top: 24px; max-width: 580px; font-size: 18px; line-height: 1.56; color: rgba(255, 255, 255, 0.88); }
.phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 36px; }
.phero--plain { min-height: 0; padding-top: calc(var(--nav-h) + clamp(88px, 14vh, 160px)); background: var(--carbon); }
@media (min-width: 900px) {
  /* Portrait job photo in a framed right column; the black stage and the copy stay where the homepage put them. */
  .phero--split .phero__media { left: auto; right: var(--gutter); top: calc(var(--nav-h) + 40px); bottom: 40px; width: min(38vw, 600px); }
  .phero--split .phero__scrim { display: none; }
  .phero--split .phero__text { max-width: min(50vw, 740px); }
}
.phero--plain h1 { font-size: clamp(44px, 6vw, 88px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 28px; font-size: 13px; color: rgba(255, 255, 255, 0.74); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--steel); }
.crumbs a { transition: color var(--t-quick) var(--ease); }
.crumbs a:hover { color: var(--white); }

/* Heading column beside a body column */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 104px); align-items: start; }
.split__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.split__head h2, .feature__text h2 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.02; }
.split__intro { margin-top: 20px; max-width: 440px; font-size: 17px; line-height: 1.6; color: var(--soft); }
.prose > * + * { margin-top: 20px; }
.prose p, .prose li { font-size: 18px; line-height: 1.62; }
.section--carbon .prose, .section--black .prose { color: rgba(255, 255, 255, 0.86); }
.prose h3 { margin-top: 40px; font-size: 24px; line-height: 1.1; }
.prose ul { display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 2px; background: currentColor; }
.prose a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Text beside a real photo */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 104px); align-items: center; }
.feature--rev .feature__media { order: 2; }
.feature__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--anvil); }
.feature__media picture, .feature__media img { width: 100%; height: 100%; }
.feature__media img { object-fit: cover; }
.feature__text .prose { margin-top: 24px; }
.js .reveal-clip { clip-path: inset(100% 0 0 0); transition: clip-path 600ms var(--ease); }
.js .reveal-clip img { transform: scale(1.08); transition: transform var(--t-slow) var(--ease) 50ms; }
.reveal-clip.is-in { clip-path: inset(0 0 0 0); }
.reveal-clip.is-in img { transform: none; }

/* What the job includes */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; border-top: 1px solid var(--line); }
.checks li { padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.checks h3 { font-size: 22px; line-height: 1.1; }
.checks p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--soft); }
.checks h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.checks__note { margin-top: 32px; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--soft); }

/* Four steps, static */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; counter-reset: s4; }
.steps4 li { padding-top: 24px; border-top: 1px solid var(--line); }
.steps4 li::before { counter-increment: s4; content: counter(s4, decimal-leading-zero); content: counter(s4, decimal-leading-zero) / ""; display: block; margin-bottom: 24px; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); font-size: 64px; line-height: 0.8; }
.steps4 h3 { font-size: 26px; line-height: 1.05; }
.steps4 p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--soft); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: clamp(20px, 2vw, 24px); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat; transition: transform var(--t-quick) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { max-width: 720px; padding: 0 0 28px; }
.faq__a p { font-size: 17px; line-height: 1.62; color: var(--soft); }
.faq__a p + p { margin-top: 12px; }
.faq__a a { text-decoration: underline; text-underline-offset: 4px; }

/* Real project photos, two-line captions (Studio HEED borrow) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery__item.is-lead { grid-column: 1 / -1; }
.gallery__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--marble); }
.gallery__item.is-lead .gallery__media { aspect-ratio: 16 / 9; }
.gallery__media picture, .gallery__media img { width: 100%; height: 100%; }
.gallery__media img { object-fit: cover; }
.section--black .work__cap i, .section--carbon .work__cap i { color: var(--ash); }

/* Linked service tiles */
.tile__link { display: block; height: 100%; }
.tile--lead:has(> .tile__link) { display: block; }
.tile--lead > .tile__link { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: end; }
.tile__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; }
.tile__more svg { width: 14px; height: 14px; transition: transform var(--t-quick) var(--ease); }
.tile__link:hover .tile__more svg { transform: translateX(4px); }
.tile__link:hover .tile__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Linked city rows */
.areas__list li a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; width: 100%; transition: opacity var(--t-quick) var(--ease); }
.areas__list li a:hover { opacity: 0.72; }

/* City rows grouped by county (2026-09-16, sections/cities.j2 with group_by "county"). Twelve rows at the old display
   size would nearly triple the section, so from 900px up each county is one band: its label on the left and its
   cities in two columns at a smaller size. Under 900px the label sits above one column. County rules run full width;
   row rules stay inside the city columns. */
.areas__groups { margin-top: 48px; border-bottom: 1px solid var(--anvil); }
.areas__group { border-top: 1px solid var(--anvil); }
.areas__county { padding-top: 22px; }
.areas__groups .areas__list { margin-top: 4px; border-top: 0; }
.areas__groups .areas__list li { font-size: clamp(34px, 9vw, 56px); }
.areas__groups .areas__list li:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .areas__group { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; column-gap: 40px; align-items: start; }
  .areas__county { padding-top: 30px; }
  .areas__groups .areas__list { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .areas__groups .areas__list li { font-size: clamp(32px, 3.4vw, 52px); }
  .areas__groups .areas__list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* The CTA band takes a per-page photo */
.cta__bg { background-image: var(--cta-img, url("../img/cta-band.webp")); }

/* Contact: info column + estimate form */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
.contact__info h2 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.02; }
.contact__info .prose { margin-top: 24px; }
.contact__direct { margin-top: 40px; border-top: 1px solid var(--anvil); }
.contact__direct li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--anvil); }
.contact__direct a { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 24px; word-break: break-word; }
.contact__direct a[href^="mailto:"] { text-transform: none; letter-spacing: 0.01em; }
.estimate { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: clamp(24px, 4vw, 48px); background: var(--carbon); }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 14px; }
.field__hint { font-size: 13px; color: var(--ash); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; color: var(--white); background: var(--black); border: 1px solid var(--graphite); border-radius: 0; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 150px; resize: vertical; }
.field select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field input:not([type="checkbox"]):not([type="radio"]):focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--white); outline-offset: 0; border-color: var(--white); }
.field [aria-invalid="true"] { border-color: #ff8a7a; }
.field__error { font-size: 13px; color: #ffb3a8; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.chips legend { width: 100%; margin-bottom: 10px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip span { display: inline-block; padding: 12px 16px; border: 1px solid var(--graphite); font-size: 15px; line-height: 1; cursor: pointer; transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease); }
.chip input:checked + span { background: var(--white); color: var(--black); border-color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.choice { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.choice input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--white); }
.choice a { text-decoration: underline; text-underline-offset: 3px; }
.estimate__foot { grid-column: 1 / -1; display: grid; gap: 16px; }
.estimate__foot .btn { justify-self: start; }
.estimate__note { max-width: 560px; font-size: 13px; line-height: 1.55; color: var(--ash); }
.estimate__note a { text-decoration: underline; }
.estimate__status { grid-column: 1 / -1; min-height: 1.5em; font-size: 15px; }
.estimate__status[data-state="error"] { color: #ffb3a8; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Shown only when the server sends a visitor without JavaScript back to #form-error. */
.estimate__static-error { display: none; grid-column: 1 / -1; padding: 14px 16px; border: 1px solid #ff8a7a; color: #ffb3a8; font-size: 15px; }
.estimate__static-error:target { display: block; }
.js .field--other { display: none; }
.js .field--other.is-on { display: grid; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* Legal and long text */
.legal { max-width: 780px; color: #262626; }
.legal h2 { margin: 56px 0 16px; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 32px 0 10px; font-size: 21px; line-height: 1.15; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; }
.legal p + p { margin-top: 14px; }
.legal ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.legal ol { margin: 12px 0; padding-left: 22px; list-style: decimal; }
.legal li + li { margin-top: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal strong { font-weight: 500; }

/* HTML sitemap */
.sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.sitemap h2 { margin-bottom: 16px; font-size: 22px; }
.sitemap li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.sitemap a:hover { text-decoration: underline; }

@media (min-width: 900px) and (max-width: 1199px) {
  .nav__phone { display: none; }
  .checks, .steps4, .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .nav__lang { display: none; }
  .nav__sheet a.nav__sheet-lang { margin-top: 16px; font-size: 16px; opacity: 0.82; }
  .phero { min-height: clamp(540px, 88svh, 760px); }
  .phero--plain { min-height: 0; }
  .phero__text { max-width: none; }
  .phero__scrim { background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.22) 100%); }
  .phero h1 { font-size: clamp(42px, 12.5vw, 64px); }
  .phero__lead { font-size: 16px; }
  .split, .feature, .contact-grid { grid-template-columns: 1fr; }
  .split__head { position: static; }
  .feature--rev .feature__media { order: 0; }
  .checks, .steps4, .gallery, .sitemap { grid-template-columns: 1fr; }
  .steps4 { gap: 32px; }
  .tile--lead > .tile__link { grid-template-columns: 1fr; }
  .estimate { grid-template-columns: 1fr; padding: 24px 20px; }
  .contact__direct a { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-clip { clip-path: none; }
  .js .reveal-clip img { transform: none; }
}

/* ================= Homepage v2 (2026-09-14). Spec and motion citations: DESIGN.md "Homepage v2". ================= */

/* ---------- How every project starts: the kitchen rebuild stage ---------- */
/* Base layout is the static one (no JavaScript, reduced motion): the copy, the Illustration label, then both stills. */
.rebuild { position: relative; background: var(--black); padding-bottom: clamp(80px, 12vh, 140px); }
.rebuild__stage { position: relative; display: flex; flex-direction: column; }
.rebuild__copy { order: -2; padding-top: clamp(80px, 12vh, 140px); }
.rebuild__eyebrow { font-size: 16px; line-height: 1.3; margin-bottom: 24px; }
.rebuild h2 { font-size: clamp(48px, 6.4vw, 104px); line-height: 0.92; }
.rebuild__line { display: block; }
.rebuild__sub { max-width: 560px; margin-top: 24px; font-size: 18px; line-height: 1.56; color: rgba(255, 255, 255, 0.86); }
.rebuild__note { order: -1; width: 100%; max-width: var(--max); margin: 40px auto 16px; padding: 0 var(--gutter); font-size: 12px; color: var(--ash); }
.rebuild__stills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.rebuild__still { position: relative; }
.rebuild__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--anvil); }
.rebuild__media picture, .rebuild__media img { width: 100%; height: 100%; }
.rebuild__media img { object-fit: cover; }
.rebuild__tag { position: absolute; top: 0; left: 0; padding: 8px 12px; font-size: 13px; line-height: 1; background: var(--black); color: var(--white); }
.rebuild__still--after .rebuild__tag { background: var(--white); color: var(--black); }
.rebuild__canvas, .rebuild__scrim, .rebuild__progress { display: none; }

/* Pinned stage: JavaScript on and motion allowed. The copy, scrim, steps and frames follow scroll from app.js. */
@media (prefers-reduced-motion: no-preference) {
  .js .rebuild { height: 200vh; padding-bottom: 0; }
  .js .rebuild__stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; overflow: hidden; }
  .js .rebuild__stills { position: absolute; inset: 0; display: block; max-width: none; margin: 0; padding: 0; transform-origin: 50% 50%; will-change: transform; }
  .js .rebuild__still { position: absolute; inset: 0; }
  .js .rebuild__still--after, .js .rebuild__tag { display: none; }
  .js .rebuild__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .js .rebuild__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--t-std) var(--ease); }
  .js .rebuild__canvas.is-ready { opacity: 1; }
  /* Functional legibility scrim, the hero's role; it thins out once the copy has left. */
  .js .rebuild__scrim { position: absolute; inset: 0; display: block; background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 45%); }
  .js .rebuild__copy { position: absolute; left: 0; right: 0; bottom: clamp(72px, 13vh, 150px); padding-top: 0; }
  .js .rebuild__copy [data-item] { opacity: 0; }
  .js .rebuild h2 { max-width: min(66vw, 980px); }
  .js .rebuild__note { position: absolute; top: calc(var(--nav-h) + 20px); right: var(--gutter); width: auto; max-width: none; margin: 0; padding: 6px 10px; background: rgba(0, 0, 0, 0.6); color: var(--white); }
  .js .rebuild__progress { position: absolute; right: var(--gutter); bottom: 28px; display: block; width: min(420px, calc(100% - 2 * var(--gutter))); padding: 12px 16px 14px; background: rgba(0, 0, 0, 0.6); }
}
.rebuild__steps { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.rebuild__steps li { transition: color var(--t-quick) var(--ease); }
.rebuild__steps li.is-active { color: var(--white); }
.rebuild__track { position: relative; height: 1px; margin-top: 10px; background: rgba(255, 255, 255, 0.3); }
.rebuild__fill { position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
@media (max-width: 899px) {
  .rebuild__stills { grid-template-columns: 1fr; }
  .rebuild__media { aspect-ratio: 4 / 5; }
  .rebuild h2 { font-size: clamp(42px, 11.5vw, 68px); }
  .rebuild__sub { font-size: 16px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .rebuild { height: 190vh; }
  .js .rebuild h2 { max-width: none; }
  .js .rebuild__scrim { background: linear-gradient(0deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.12) 100%); }
  .js .rebuild__copy { bottom: 104px; }
  .js .rebuild__progress { left: var(--gutter); right: var(--gutter); bottom: 20px; width: auto; }
}

/* ---------- Recent transformations: the rail ---------- */
.railsec .head { margin-bottom: 32px; }
.rail__controls { display: flex; align-items: center; gap: 24px; }
.rail__buttons { display: flex; gap: 8px; }
.rail__buttons[hidden] { display: none; }
.rail__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c6c6c6; transition: border-color var(--t-quick) var(--ease); }
.rail__btn svg { width: 16px; height: 16px; }
.rail__btn:hover { border-color: currentColor; }
.section--black .rail__btn, .section--carbon .rail__btn { border-color: var(--graphite); }
/* The rail starts on the page grid and runs to the window edge; the gutter math matches .wrap. */
.rail { --rail-h: clamp(340px, 72vh, 720px); --rail-pad: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--rail-pad); overscroll-behavior-x: contain; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.rail__track { display: flex; gap: 14px; width: max-content; padding: 0 var(--rail-pad); }
/* One row height for every card, so a before and after pair and a photo line up instead of one towering over the other.
   Width follows from the height and the 4/5 frame (2026-09-18: the client asked for the pairs bigger). */
.rail__item { flex: none; width: auto; scroll-snap-align: start; }
.rail .ba__compare { height: var(--rail-h); width: auto; max-width: none; touch-action: pan-x pan-y; }
.rail__card { display: block; }
.rail__media { position: relative; display: block; overflow: hidden; height: var(--rail-h); width: auto; aspect-ratio: 4 / 5; background: var(--marble); }
.rail__media picture, .rail__media img { width: 100%; height: 100%; }
.rail__media img { object-fit: cover; transform: scale(1.06); transition: transform var(--t-slow) var(--ease); }
.rail__item.is-in .rail__media img { transform: none; }
.rail__cap { display: block; padding-top: 14px; }
.rail__title { display: block; font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 20px; line-height: 1.1; }
.rail__place { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--graphite); }
.section--black .rail__place, .section--carbon .rail__place { color: var(--ash); }
.rail__place svg { width: 14px; height: 14px; transition: transform var(--t-quick) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .rail__card:hover .rail__media img { transform: scale(1.03); transition-duration: var(--t-std); }
  .rail__card:hover .rail__place svg { transform: translateX(4px); }
  .rail__card:hover .rail__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.rail__bar { position: relative; height: 2px; margin-top: 28px; overflow: hidden; background: #e3e3e3; }
.section--black .rail__bar, .section--carbon .rail__bar { background: var(--anvil); }
.rail__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: currentColor; }
/* Warmer grade on the rail only (client, 2026-09-26: "the same photo, but warmer"). A white-balance shift applied
   to every frame alike, before and after the same, so it changes no content (DESIGN.md "Before and after" honesty rule). */
.rail img { filter: sepia(0.14) saturate(1.14) brightness(1.02); }
/* Phones (client, 2026-09-26): each project fills the screen under the nav, and the links, arrows, tags and caption
   sit on the photo instead of in white bands above and below it. The section heading stays for screen readers. */
@media (max-width: 899px) {
  .railsec { padding: 0; background: var(--black); color: var(--white); }
  .railsec .head { position: absolute; top: 16px; left: 0; right: 0; z-index: 4; margin: 0; padding: 0 var(--gutter); pointer-events: none; }
  .railsec .head > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail__controls { width: 100%; justify-content: space-between; pointer-events: auto; }
  .railsec .rail__controls > .btn { padding: 12px 16px; background: rgba(20, 20, 20, 0.6); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .railsec .rail__controls :focus-visible { outline: 2px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--black); }
  .railsec .rail__btn { background: rgba(20, 20, 20, 0.6); border-color: rgba(255, 255, 255, 0.55); color: var(--white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .rail { scroll-snap-type: x mandatory; scroll-padding-inline: 0; touch-action: pan-x pan-y; }
  .rail__track { gap: 0; padding: 0; }
  .rail__item { position: relative; width: 100vw; }
  .rail__media, .rail .ba__compare { width: 100%; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); max-height: 920px; aspect-ratio: auto; touch-action: pan-x pan-y; }
  .rail .ba__tag { top: 82px; padding: 10px 14px; font-size: 15px; }
  .rail .zoom { right: 16px; bottom: 28px; z-index: 3; }
  .rail__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 120px var(--gutter) 44px; background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,0) 100%); color: var(--white); pointer-events: none; }
  .rail__title { font-size: 44px; line-height: 0.95; }
  .rail__place, .section--white .rail__place { margin-top: 6px; font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 19px; color: rgba(255, 255, 255, 0.82); }
  .railsec > .wrap:last-child { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; pointer-events: none; }
  .rail__bar { margin: 0; background: rgba(255, 255, 255, 0.28); color: var(--white); }
}

/* ---------- Our specialties: three large cards, the title link covers the card ---------- */
.specialties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.special { position: relative; }
.special__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.special__link:focus-visible { outline: none; }
.special__link:focus-visible::after { outline: 2px solid currentColor; outline-offset: 4px; }
.special__more { position: relative; z-index: 2; }
/* The body rises without rp-arc and fills backwards only: in Chrome an animation that keeps filling a transform or a
   translate makes the body the containing block, which trapped the stretched link inside it (caught by home-v2-check). */
.special.is-in .tile__body { opacity: 1; animation: rp-rise var(--t-std) var(--ease) 100ms backwards; }
.special:hover .special__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.special__more:hover svg { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .special.is-in:hover .tile__media img { transform: scale(1.03); transition-duration: var(--t-std); transition-delay: 0ms; }
}
.section--black .tile__text, .section--carbon .tile__text { color: var(--ash); }
.section--black .tile__media, .section--carbon .tile__media { background: var(--anvil); }
@media (max-width: 899px) {
  .specialties { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Additional services: lighter photo cards, title on the photo ---------- */
.extras__line { display: block; }
.extras__lead { max-width: 380px; font-size: 16px; line-height: 1.6; color: var(--graphite); }
.extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.extra { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: #e3e3e3; color: var(--white); }
.extra__media { position: absolute; inset: 0; }
.extra__media picture, .extra__media img { width: 100%; height: 100%; }
.extra__media img { object-fit: cover; transition: transform var(--t-std) var(--ease); }
/* Functional scrim so the title holds contrast on light photos. */
.extra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,0) 55%); pointer-events: none; }
.extra__title { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 22px; line-height: 1.05; }
.extra__title svg { width: 18px; height: 18px; transition: transform var(--t-quick) var(--ease); }
.extra:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .extra:hover .extra__media img { transform: scale(1.04); }
  .extra:hover .extra__title svg { transform: translateX(4px); }
}
@media (max-width: 1099px) {
  .extras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .extras__lead { max-width: none; }
  .extras { gap: 10px; }
  .extra__title { left: 14px; right: 14px; bottom: 14px; gap: 8px; font-size: 18px; }
}

/* ---------- Service showcases: one core service per screen, copy on a full-bleed plate (client, 2026-09-26) ---------- */
/* The plates are illustrations: 16:9 on desktop, 9:16 on phones (DESIGN.md "Service showcases"). The scrims are
   functional: they hold the copy's contrast on the lit parts of each plate. */
.show, .twp { position: relative; isolation: isolate; display: flex; overflow: hidden; background: var(--black); color: var(--white); }
.show { align-items: flex-end; min-height: min(calc(100vh - var(--nav-h)), 1000px); min-height: min(calc(100svh - var(--nav-h)), 1000px); }
.show__bg, .twp__bg { position: absolute; inset: 0; z-index: -2; }
.show__bg picture, .show__bg img, .twp__bg picture, .twp__bg img { width: 100%; height: 100%; }
.show__bg img, .twp__bg img { object-fit: cover; }
.show::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 36%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 45%); }
.show__inner { padding-top: calc(var(--nav-h) + 64px); padding-bottom: clamp(64px, 11vh, 128px); }
.show__copy { max-width: 620px; }
.show__eyebrow { display: flex; align-items: center; gap: 16px; font-size: 13px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.72); }
.show__num { display: flex; align-items: center; gap: 16px; font-size: 18px; letter-spacing: 0.06em; color: var(--white); }
.show__num::after { content: ""; width: 56px; height: 1px; background: rgba(255, 255, 255, 0.6); }
.show h2 { margin-top: 20px; font-size: clamp(56px, 7vw, 104px); line-height: 0.92; }
.show__line { display: block; }
.show__link:hover .show__line, .show__link:focus-visible .show__line { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.show__text { max-width: 460px; margin-top: 22px; font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.show__actions { margin-top: 36px; }
.show .btn--outline { padding: 16px 24px; font-size: 16px; border-color: rgba(255, 255, 255, 0.7); }
@media (max-width: 899px) {
  .show { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
  .show::before { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,0) 60%); }
  .show__inner { padding-top: 96px; padding-bottom: 48px; }
  .show__eyebrow { gap: 12px; font-size: 12px; letter-spacing: 0.12em; }
  .show__num { gap: 12px; }
  .show__num::after { width: 28px; }
  .show h2 { margin-top: 16px; font-size: clamp(50px, 15vw, 76px); }
  .show__text { font-size: 17px; }
  .show__actions { margin-top: 28px; }
}

/* ---------- The finishing touch: The Wall Pross, full-bleed since 2026-09-26 (the client's reference) ---------- */
.twp { align-items: center; min-height: min(calc(100vh - var(--nav-h)), 1000px); min-height: min(calc(100svh - var(--nav-h)), 1000px); }
.twp::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,0) 66%); }
.twp__inner { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 88px; }
.twp__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.twp__eyebrow { display: flex; align-items: center; gap: 16px; font-size: 13px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.78); }
.twp__eyebrow::before { content: ""; width: 56px; height: 1px; background: var(--aqua); }
.twp__brand { margin-top: 36px; }
.twp h2 { margin-top: 36px; font-size: clamp(44px, 5vw, 72px); line-height: 0.96; }
.twp__line { display: block; }
.twp__line + .twp__line { color: var(--aqua); }
.twp__services { display: flex; flex-wrap: wrap; margin-top: 20px; font-size: 15px; color: rgba(255, 255, 255, 0.86); }
.twp__services li + li::before { content: "\2022"; content: "\2022" / ""; margin: 0 12px; color: var(--aqua); }
.twp__lead { max-width: 480px; margin-top: 28px; font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.twp__body { position: relative; max-width: 440px; margin-top: 20px; padding-top: 20px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.twp__body::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 1px; background: var(--aqua); }
.twp__actions { margin-top: 36px; }
@media (max-width: 899px) {
  .twp { align-items: flex-start; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
  .twp::before { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.2) 78%, rgba(0,0,0,.35) 100%); }
  .twp__inner { padding-top: 56px; padding-bottom: 56px; }
  .twp h2 { margin-top: 28px; font-size: clamp(38px, 11vw, 56px); }
  .twp__services { font-size: 13px; }
  .twp__services li + li::before { margin: 0 8px; }
  .twp__lead { font-size: 18px; }
}

/* The Wall Pross lockup: the rebuilt mark, THE WALL / PROSS in Noto Sans 500 (the Renova wordmark face). Aqua is its logo colour. */
.twp-lockup { display: inline-flex; align-items: center; gap: 18px; color: var(--white); }
.twp-mark { display: block; flex: none; width: 72px; height: auto; overflow: visible; color: var(--aqua); }
.twp-lockup__words { display: flex; flex-direction: column; }
.twp-lockup__name { font-family: var(--body); font-weight: 500; text-transform: uppercase; font-size: 30px; line-height: 1.02; letter-spacing: 0.02em; }
.twp-lockup__pross { display: block; color: var(--aqua); letter-spacing: 0.16em; }
.twp-lockup__by { margin-top: 8px; font-family: var(--body); font-weight: 500; text-transform: uppercase; font-size: 11px; line-height: 1.2; letter-spacing: 0.22em; color: var(--ash); }
.twp-lockup--page { margin-bottom: 8px; }
.twp-lockup--page .twp-mark { width: 56px; }
.twp-lockup--page .twp-lockup__name { font-size: 22px; }
.phero__brand { margin-bottom: 20px; }
/* Mark draw-on as the block enters: outline first, then the three folds (1000ms each, 100ms apart). */
.js .twp__brand .twp-mark path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1000ms var(--ease); }
.twp__brand .twp-mark path:nth-child(1) { transition-delay: 120ms; }
.twp__brand .twp-mark path:nth-child(2) { transition-delay: 220ms; }
.twp__brand .twp-mark path:nth-child(3) { transition-delay: 320ms; }
.twp__brand .twp-mark path:nth-child(4) { transition-delay: 420ms; }
.twp__brand.is-in .twp-mark path { stroke-dashoffset: 0; }
.js .twp__brand .twp-lockup__words { opacity: 0; }
.twp__brand.is-in .twp-lockup__words { animation: rp-rise var(--t-std) var(--ease) 400ms both, rp-arc var(--t-std) cubic-bezier(0.45, 0, 0.55, 1) 400ms both; }
@media (max-width: 899px) {
  .twp-mark { width: 56px; }
  .twp-lockup__name { font-size: 24px; }
}

/* Services menu: The Wall Pross as its own branded entry, not a photo tile. */
.mega__special { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 300px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--anvil); transition: border-color var(--t-quick) var(--ease); }
.mega__special:hover, .mega__special[aria-current] { border-color: var(--ash); }
.mega__special .twp-mark { width: 34px; }
.mega__special-words { display: flex; flex-direction: column; gap: 2px; }
.mega__special-name { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 18px; line-height: 1.1; }
.mega__special-text { font-size: 13px; line-height: 1.3; color: var(--ash); }
.mega__special > svg:last-child { width: 14px; height: 14px; margin-left: auto; transition: transform var(--t-quick) var(--ease); }
.mega__special:hover > svg:last-child { transform: translateX(4px); }
.nav__sheet .sheet__sub a.sheet__special { display: flex; align-items: center; gap: 12px; }
.sheet__special .twp-mark { width: 26px; }
@media (min-width: 900px) and (max-width: 1199px) {
  .mega__special { width: auto; margin-top: 0; }
}

/* ---------- Expand button and the full-screen viewer (2026-09-18: the client asked to see the work bigger) ---------- */
.zoom { position: absolute; right: 0; bottom: 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: var(--white); color: var(--black); cursor: pointer; opacity: 0.92; transition: opacity var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); }
.zoom[hidden] { display: none; }
.zoom svg { width: 18px; height: 18px; }
.zoom:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 4px var(--white); }
@media (hover: hover) and (pointer: fine) {
  .zoom { opacity: 0; }
  .ba__compare:hover .zoom, .gallery__media:hover .zoom, .ba__compare:focus-within .zoom, .gallery__media:focus-within .zoom { opacity: 0.92; }
  .zoom:hover { opacity: 1; transform: scale(1.04); }
}
.lbox { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: clamp(12px, 2vw, 24px); background: rgba(8, 8, 8, 0.96); color: var(--white); opacity: 0; visibility: hidden; transition: opacity var(--t-std) var(--ease), visibility 0s linear var(--t-std); }
.lbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-std) var(--ease), visibility 0s; }
.lbox__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lbox__title { font-family: var(--display); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 16px; line-height: 1.1; }
.lbox__place { font-size: 14px; color: var(--ash); }
.lbox__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--white); cursor: pointer; }
.lbox__close svg { width: 16px; height: 16px; }
.lbox__close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lbox__stage { display: grid; place-items: center; min-height: 0; }
.lbox__hint { font-size: 13px; color: var(--ash); text-align: center; min-height: 1.2em; }
/* A photo is shown whole; a before and after pair keeps filling its frame, or the frame shows through as grey. */
.lbox .gallery__media { height: auto; width: auto; aspect-ratio: auto; overflow: visible; background: none; }
.lbox .gallery__media picture { display: block; }
.lbox .gallery__media img { display: block; max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; }
.lbox .ba__compare { --pos: 50%; width: auto; max-width: none; height: min(100%, calc(100vh - 160px)); aspect-ratio: 4 / 5; }
.lbox .ba__compare picture, .lbox .ba__compare img { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
.lbox .ba__handle { display: grid; }
@media (max-width: 899px) {
  .lbox .ba__compare { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lbox { transition: none; }
}
.lbox-open chat-widget, .lbox-open #chat-widget, .lbox-open .chat-widget { display: none !important; }