/* Arx & Arbor — design tokens + base styles */

:root {
  /* Brand palette */
  --obsidian: #1A1A1A;
  --forest: #2F3B35;
  --forest-deep: #232b27;
  --slate: #4A5859;
  --sage: #6B7B6E;
  --sage-light: #A9BEA6;
  --stone: #8C8C84;
  --chalk: #F2F0EC;
  --chalk-warm: #ece9e2;
  --paper: #faf8f3;

  /* Mood-driven (overridden by Tweaks) */
  --bg: var(--chalk);
  --bg-alt: var(--paper);
  --fg: var(--obsidian);
  --fg-muted: var(--slate);
  --rule: rgba(26,26,26,0.12);
  --feature-bg: var(--forest);
  --feature-fg: var(--chalk);

  /* Type — v2: Montserrat is the single brand typeface (Bold titles,
     Medium subheads, Regular labels); Inter for body. Serif tier removed. */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-display-weight: 600;
  --font-display-tracking: -0.02em;
  --font-sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --measure: 68ch;
  --col-max: 1360px;
  --pad-x: clamp(20px, 4vw, 56px);

  /* Density (overridden) */
  --section-y: clamp(80px, 9vw, 140px);
  --gap-tight: 14px;
  --gap: 24px;
  --gap-loose: 40px;
}

[data-mood="forest"] {
  --bg: var(--forest);
  --bg-alt: var(--forest-deep);
  --fg: var(--chalk);
  --fg-muted: rgba(242,240,236,0.65);
  --rule: rgba(242,240,236,0.16);
  --feature-bg: var(--chalk);
  --feature-fg: var(--obsidian);
}

[data-density="compact"] {
  --section-y: clamp(56px, 6vw, 96px);
  --gap-tight: 10px;
  --gap: 18px;
  --gap-loose: 28px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "kern";
  font-size: 16px;
  line-height: 1.55;
  transition: background 0.4s ease, color 0.4s ease;
}

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

/* Typography classes */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
[style*="feature-bg"] .eyebrow, [style*="obsidian"] .eyebrow { color: var(--sage-light); }
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.sans { font-family: var(--font-sans); }

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
.h-display {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.0;
  letter-spacing: var(--font-display-tracking);
  font-weight: var(--font-display-weight);
}
.h-display em { font-style: italic; font-weight: 500; color: var(--sage); }
.h-section {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: var(--font-display-tracking);
  font-weight: var(--font-display-weight);
}
.h-section em { font-style: italic; font-weight: 500; }
.h-card {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: var(--measure);
}

/* Layout */
.shell { width: 100%; }
.wrap {
  max-width: var(--col-max);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--section-y); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0;
  transition: transform 0.15s ease, background 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn--inline {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--fg);
  border-radius: 0;
  padding-bottom: 2px;
}
.btn--inline:hover { color: var(--sage); border-color: var(--sage); transform: none; }
.arrow { display: inline-block; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* Image slots — branded placeholders */
.imgslot {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(75,88,89,0.05) 0 12px,
      rgba(75,88,89,0.09) 12px 13px
    ),
    var(--chalk-warm);
  color: var(--slate);
  overflow: hidden;
  isolation: isolate;
}
[data-mood="forest"] .imgslot {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(242,240,236,0.05) 0 12px,
      rgba(242,240,236,0.10) 12px 13px
    ),
    rgba(0,0,0,0.18);
  color: rgba(242,240,236,0.7);
}
.imgslot--filled {
  background: var(--slate);
  color: var(--chalk);
}
.imgslot--filled .imgslot__img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.imgslot--filled:hover .imgslot__img { transform: scale(1.035); }
.imgslot__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(26,26,26,0.30) 0%, rgba(26,26,26,0) 42%);
  z-index: 1;
}
.imgslot__label {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(26,26,26,0.85);
  color: var(--chalk);
  padding: 5px 8px;
  z-index: 2;
}
.imgslot__corners::before,
.imgslot__corners::after,
.imgslot__corners > span::before,
.imgslot__corners > span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: currentColor;
  opacity: 0.4;
}
.imgslot__corners::before { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.imgslot__corners::after { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
.imgslot__corners > span::before { content: ""; position: absolute; bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; width: 16px; height: 16px; }
.imgslot__corners > span::after { content: ""; position: absolute; bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; width: 16px; height: 16px; }
.imgslot__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.imgslot__center .dim {
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.18em;
}

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-family: var(--font-body);
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--fg); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Nav links */
.navlink {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 1px 10px;
  position: relative;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
.navlink:hover { opacity: 1; }
.navlink:hover::after { transform: scaleX(1); }
.navlink.is-active { opacity: 1; }
.navlink.is-active::after { transform: scaleX(1); }

/* Underline-wipe text links */
.link-wipe {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s cubic-bezier(.2,.7,.2,1);
}
.link-wipe:hover { background-size: 100% 1px; }

/* Path card arrow */
.path-card .arrow { transition: transform 0.2s ease; }
.path-card:hover .arrow { transform: translateX(4px); }

/* Cinematic split hero */
.hero-split {
  position: relative;
  display: flex;
  height: calc(100svh - 108px);
  min-height: 600px;
  background: #0e0f0e;
  overflow: hidden;
}
.hero-panel {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  transition: flex-grow 0.7s cubic-bezier(.2,.7,.2,1);
  isolation: isolate;
}
.hero-panel + .hero-panel { border-left: 1px solid rgba(242,240,236,0.22); }
.hero-panel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.62) saturate(1.02);
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter 0.6s ease;
}
.hero-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,9,8,0.85) 0%, rgba(8,9,8,0.12) 48%, rgba(8,9,8,0.38) 100%);
}
.hero-panel:hover { flex-grow: 1.45; }
.hero-panel:hover .hero-panel__img { transform: scale(1.09); filter: brightness(0.82) saturate(1.06); }
.hero-split:hover .hero-panel:not(:hover) .hero-panel__img { filter: brightness(0.4) saturate(0.95); }
.hero-panel__label {
  position: absolute; z-index: 3;
  left: clamp(24px,4vw,64px); right: clamp(24px,4vw,64px); bottom: clamp(28px,4vw,56px);
  color: var(--chalk);
}
.hero-panel__label--right { text-align: right; }
.hero-panel__label .eyebrow { color: var(--sage-light); }
.hero-panel__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px,2.2vw,34px); letter-spacing: -0.02em; line-height: 1.05;
  margin-top: 10px; color: var(--chalk);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.hero-panel__enter {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chalk); opacity: 0.85;
}
.hero-panel__label--right .hero-panel__enter { flex-direction: row-reverse; }
.hero-panel:hover .hero-panel__enter { opacity: 1; }
.hero-panel__label .arrow { transition: transform 0.2s ease; }
.hero-panel:hover .arrow { transform: translateX(4px); }

.hero-center {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; pointer-events: none;
}
.hero-center::before {
  content: ""; position: absolute; z-index: -1;
  width: min(1000px,92%); height: min(52%,440px);
  background: radial-gradient(ellipse at center, rgba(8,9,8,0.6) 0%, rgba(8,9,8,0) 72%);
}
.hero-headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(38px,6.4vw,96px); line-height: 1.0; letter-spacing: -0.03em;
  color: var(--chalk); margin: 18px 0 0;
  text-shadow: 0 4px 44px rgba(0,0,0,0.5);
}
.hero-headline em { font-style: italic; font-weight: 500; color: var(--sage-light); }
.hero-sub {
  margin: 22px 0 0; color: rgba(242,240,236,0.82);
  font-family: var(--font-body); font-size: clamp(15px,1.3vw,19px);
}
.hero-scroll {
  position: absolute; z-index: 4; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; color: rgba(242,240,236,0.7);
  pointer-events: none;
}
.hero-scroll__line { width: 1px; height: 38px; background: linear-gradient(to bottom, rgba(242,240,236,0.7), transparent); animation: scrollpulse 1.9s ease-in-out infinite; transform-origin: top; }
@keyframes scrollpulse { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 760px) {
  .hero-split { flex-direction: column; height: auto; min-height: 0; }
  .hero-panel + .hero-panel { border-left: 0; border-top: 1px solid rgba(242,240,236,0.22); }
  .hero-panel:hover { flex-grow: 1; }
  .hero-center { position: relative; padding: 56px 24px; background: #0e0f0e; }
  .hero-center::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll__line { animation: none; } }

/* Kinetic services marquee */
.marquee { overflow: hidden; padding: 26px 0; background: var(--bg); border-bottom: 1px solid var(--rule); }
.marquee__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 34s linear infinite; }
.marquee__item {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px,4.6vw,64px); letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap; line-height: 1;
}
.marquee__item--out { color: var(--stone); }
.marquee__dot { color: var(--sage); font-size: clamp(14px,2vw,26px); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Homepage hero doorways */
.hero-duo {
  display: block;
  position: relative;
}
.hero-duo__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.hero-duo .imgslot { transition: transform 0.25s ease; }
.hero-duo:hover .imgslot { transform: translateY(-4px); }
.hero-duo:hover .hero-duo__cap { color: var(--sage); }
.hero-duo:hover .arrow { transform: translateX(4px); }

/* Homepage service grid cells */
.svc-cell {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--bg);
  transition: background 0.2s ease;
  min-height: 190px;
}
.svc-cell__arm {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
}
.svc-cell__more {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.svc-cell:hover .svc-cell__more { opacity: 0.75; transform: translateX(0); }
@media (max-width: 900px) {
  .svc-cell__more { opacity: 0.6; }
}

/* Animations */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both; }
.rise-2 { animation-delay: 0.08s; }
.rise-3 { animation-delay: 0.16s; }
.rise-4 { animation-delay: 0.24s; }

/* Helpers */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
@media (max-width: 900px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
}
.flex-row { display: flex; gap: var(--gap); }
.flex-col { display: flex; flex-direction: column; gap: var(--gap); }
.stack-tight { display: flex; flex-direction: column; gap: var(--gap-tight); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-loose { display: flex; flex-direction: column; gap: var(--gap-loose); }

/* selection */
::selection { background: var(--forest); color: var(--chalk); }
[data-mood="forest"] ::selection { background: var(--chalk); color: var(--forest); }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT SYSTEM (mobile-optimised build)
   Layout grids live here as classes so breakpoints can override
   them — inline styles could not be overridden.
   ══════════════════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr}
.split--form{grid-template-columns:1.4fr 1fr}
.g2{display:grid;grid-template-columns:repeat(2,1fr)}
.g3{display:grid;grid-template-columns:repeat(3,1fr)}
.g4{display:grid;grid-template-columns:repeat(4,1fr)}
.cells{display:grid;grid-template-columns:repeat(3,1fr)}
.proc{display:grid;grid-template-columns:repeat(4,1fr)}

/* Nav */
.nav-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding-block:16px}
.nav-links{display:flex;gap:28px;justify-content:center}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 11px;background:transparent;border:1px solid var(--rule);cursor:pointer}
.nav-toggle span{display:block;height:1.5px;width:100%;background:var(--fg);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-panel{display:none;flex-direction:column;gap:4px;padding:8px var(--pad-x) 30px;border-top:1px solid var(--rule);background:var(--bg)}
.nav-panel__links{display:flex;flex-direction:column}
.nav-panel__link{display:flex;align-items:center;min-height:56px;font-family:var(--font-sans);font-size:17px;font-weight:500;letter-spacing:.01em;border-bottom:1px solid var(--rule)}
.nav-panel__link.is-active{color:var(--sage)}
.nav-panel__cta{margin-top:24px;justify-content:center;width:100%;min-height:52px}
.nav-panel__mail{margin-top:18px;font-size:14px;color:var(--fg-muted);text-align:center}

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(2,1fr);row-gap:36px!important}
  .proc>*:nth-child(odd){border-left:0!important;padding-left:0!important}
}
@media (max-width:960px){
  .cells,.g3{grid-template-columns:repeat(2,1fr)}
  .nav-links{gap:20px}
}

/* ── Nav collapses to a menu ────────────────────────────── */
@media (max-width:900px){
  .nav-bar{grid-template-columns:auto auto;justify-content:space-between}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-panel.is-open{display:flex}
}

/* ── Stack the two-column splits ────────────────────────── */
@media (max-width:860px){
  .split,.split--form{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)!important;align-items:start!important}
}

/* ── Phone ──────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--pad-x:20px;--section-y:clamp(52px,11vw,72px)}
  .g2,.g3,.g4,.cells,.proc{grid-template-columns:1fr}
  .g2,.g3,.g4{gap:clamp(22px,5vw,30px)!important}
  .proc{row-gap:30px!important}
  .proc>*{border-left:0!important;padding-left:0!important;padding-right:0!important;border-top:1px solid rgba(242,240,236,.2);padding-top:22px!important}
  .chips{grid-template-columns:1fr 1fr!important;gap:8px!important}
  /* type: keep display sizes legible rather than viewport-tiny */
  .h-display{font-size:clamp(31px,8.4vw,44px);letter-spacing:-.02em}
  .h-section{font-size:clamp(24px,6.6vw,32px)}
  .lead{font-size:16px;line-height:1.6}
  .eyebrow{font-size:10.5px;letter-spacing:.18em}
  /* full-width CTAs read better on a phone */
  .btn{min-height:50px;padding-inline:22px}
  .nav-cta{padding:0 16px;min-height:44px;font-size:11px}
  /* cells lose their fixed height when single column */
  .svc-cell{min-height:0!important;padding:26px 22px!important}
  .foot-grid{gap:38px!important}
}
@media (max-width:520px){
  .chips{grid-template-columns:1fr!important}
}

/* Footer */
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ── Forms: 16px minimum stops iOS zooming on focus ─────── */
@media (max-width:860px){
  input,textarea,select,button{font-size:16px}
  input,textarea,select{min-height:48px}
  textarea{min-height:120px}
}

/* ── Touch: hover-only affordances need a resting state ── */
@media (hover:none){
  .imgslot--filled .imgslot__img{transform:none}
  .btn:hover{transform:none}
  .navlink::after{transform:scaleX(0)}
  .navlink.is-active::after{transform:scaleX(1)}
  .svc-cell__more{opacity:.7;transform:none}
  a,button,summary,[role="button"]{-webkit-tap-highlight-color:rgba(47,59,53,.12)}
}

/* ── Hero on small screens ──────────────────────────────── */
@media (max-width:760px){
  .hero-panel{flex:0 0 auto;height:auto;min-height:0;aspect-ratio:16/11}
  .hero-panel__title{font-size:clamp(19px,5.2vw,26px)}
  .hero-center{order:-1;padding:44px 20px 40px}
  .hero-headline{font-size:clamp(32px,9vw,48px);line-height:1.04}
  .hero-sub{font-size:16px;margin-top:16px}
  .hero-scroll{display:none}
}
@media (max-width:480px){
  .hero-panel{flex:0 0 auto;aspect-ratio:4/3}
  .hero-panel__label{left:20px;right:20px;bottom:22px}
}

/* Nothing should overflow the viewport horizontally */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%}

/* Service-area map: the SVG has baked-in 10-12px type, so it must never render
   below its native 640px width. Full-width row beneath the copy until the
   viewport can genuinely fit both side by side. */
.split--map{display:grid;grid-template-columns:1fr;row-gap:clamp(28px,4vw,44px)}
.split--map>*:last-child{width:100%;max-width:688px}
@media (min-width:1400px){
  .split--map{grid-template-columns:minmax(0,1fr) 688px;align-items:center!important}
}

/* Header phone number */
.nav-tel{font-family:var(--font-sans);font-size:13.5px;font-weight:500;letter-spacing:.05em;color:var(--fg-muted);white-space:nowrap}
.nav-tel:hover{color:var(--fg)}
.nav-panel__tel{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:14px;font-family:var(--font-sans);font-size:17px;font-weight:500;letter-spacing:.04em;color:var(--fg)}
.nav-panel__mail{margin-top:6px}
@media (max-width:900px){.nav-tel{display:none}}


/* ══════════════════════════════════════════════════════════════
   STATIC-SITE ADDITIONS
   Everything above this banner is the design's stylesheet verbatim.
   Below: only what is needed to reproduce the React build's
   interactions without JavaScript. No visual values are changed.
   ══════════════════════════════════════════════════════════════ */

/* Accessibility helpers (new) */
.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}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--fg);color:var(--bg);padding:12px 18px;font-family:var(--font-sans);font-size:13px;font-weight:600}
.skip-link:focus{left:0}
:where(a,button,input,select,textarea,label,summary):focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* ── Mobile nav: CSS-only, replaces the React useState toggle ──────
   The checkbox sits immediately before <header> so `~` can reach in. */
.nav-open-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.nav-toggle{align-items:center}
@media (max-width:900px){
  #nav-open:checked ~ header .nav-panel{display:flex}
  #nav-open:checked ~ header .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  #nav-open:checked ~ header .nav-toggle span:nth-child(2){opacity:0}
  #nav-open:checked ~ header .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
/* the hamburger's 4th child is the sr-only text, keep it out of the flex flow */
.nav-toggle .sr-only{height:1px}

/* ── Segmented toggles (market / scale) ───────────────────────────
   Same box model and colours as the design's inline-styled buttons. */
.seg{display:flex;border:1px solid var(--fg)}
.seg--narrow{max-width:360px}
.seg--form{max-width:380px}
.seg__opt{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0;background:transparent;color:var(--fg);border:0;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;transition:background 0.2s,color 0.2s;cursor:pointer;text-align:center}
.seg__opt.is-on{background:var(--fg);color:var(--bg)}
.seg-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}

/* Maintenance: radios live at <main> level, panels are later siblings */
#pkg-res:checked ~ * .seg__opt[for="pkg-res"],
#pkg-com:checked ~ * .seg__opt[for="pkg-com"]{background:var(--fg);color:var(--bg)}
#pkg-res:checked ~ * .pkg-grid--com{display:none}
#pkg-com:checked ~ * .pkg-grid--res{display:none}

/* Quote form market toggle */
.qm-wrap .seg__opt{cursor:pointer}
#qm-com:checked ~ * .seg__opt[for="qm-com"],
#qm-res:checked ~ * .seg__opt[for="qm-res"]{background:var(--fg);color:var(--bg)}

/* ── Chips (configurator + quote form) ────────────────────────────
   Reproduces the inline-styled chip buttons, driven by :checked. */
.chip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--rule);background:transparent;color:var(--fg);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0.02em;transition:background .18s,color .18s;text-align:left;cursor:pointer}
.chip__mark{font-family:var(--font-mono);font-size:14px}
.chip__mark::after{content:"+"}
.chip:has(:checked){background:var(--fg);color:var(--bg)}
.chip:has(:checked) .chip__mark::after{content:"\2713"}

/* quote form chips are the "+ Name" / "✓ Name" variant */
.chip--q{justify-content:flex-start;padding:12px 14px;font-size:12.5px}
.chip--q .chip__mark{font-family:var(--font-sans);font-size:12.5px}

/* ── Configurator output ──────────────────────────────────────────
   Rendered server-side at the design's default state, then kept live
   by enhance.js. Hidden states use [hidden] so no-JS shows the default. */
.cfg-panel{background:var(--feature-bg);color:var(--feature-fg);padding:40px;position:sticky;top:100px;min-height:480px}
.cfg-line{display:flex;justify-content:space-between;font-size:14px}
.cfg-line__val{font-family:var(--font-mono);color:rgba(242,240,236,0.7)}
@media (max-width:860px){.cfg-panel{position:static;top:auto;min-height:0}}

/* Quote: sticky aside loses stickiness once stacked */
@media (max-width:860px){.q-aside{position:static!important;top:auto!important}}

/* Turnstile widget + its no-JS fallback message */
.cf-turnstile{margin-top:4px;min-height:65px}
.q-nojs{
  margin:12px 0 0;padding:14px 16px;border-left:3px solid var(--sage);
  background:var(--bg-alt);font-size:13.5px;line-height:1.6;color:var(--fg-muted)
}
.q-nojs a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}

/* Thank-you panel (JS only) */
.q-sent{display:none}

/* ── Footer: statutory company details ────────────────────────────── */
.foot-legal{
  margin:18px 0 0;max-width:70ch;
  font-family:var(--font-sans);font-size:11.5px;line-height:1.7;
  letter-spacing:.04em;color:rgba(242,240,236,.42)
}
/* Conspicuous on purpose: a statutory disclosure must not ship half-filled. */
.foot-legal__todo{
  color:var(--sage-light);background:rgba(169,190,166,.12);
  padding:1px 6px;border:1px dashed rgba(169,190,166,.5);font-weight:600
}

/* ── Enquiry form: honeypot, errors, consent ───────────────────────
   Off-screen rather than display:none — bots that skip hidden fields still
   fill this one, and it stays out of the tab order for everyone else. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.q-error{
  padding:18px 20px;border-left:3px solid #8f3a2e;background:rgba(143,58,46,.07);
  font-size:14px;line-height:1.6;color:var(--fg)
}
.q-error strong{display:block;margin-bottom:4px;font-family:var(--font-sans);font-size:13px;letter-spacing:.02em}
.q-error a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}

.q-consent{margin:0;font-size:13px;line-height:1.6;color:var(--fg-muted)}
.q-consent a{color:var(--fg)}

/* Configurator VAT statement */
.cfg-vat-note{
  margin:18px 0 0;font-family:var(--font-sans);font-size:13px;line-height:1.6;
  letter-spacing:.01em;color:var(--fg)
}

/* ── Long-form prose (privacy notice) ─────────────────────────────── */
.prose{max-width:74ch;margin-top:clamp(36px,4vw,56px)}
.prose>*:first-child{margin-top:0}
.prose h2{
  font-family:var(--font-display);font-weight:var(--font-display-weight);
  font-size:clamp(20px,2.2vw,27px);line-height:1.15;
  letter-spacing:var(--font-display-tracking);
  margin:clamp(38px,4vw,54px) 0 14px
}
.prose h3{
  font-family:var(--font-sans);font-weight:600;font-size:16px;
  margin:30px 0 10px;letter-spacing:-.005em
}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:var(--fg-muted)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--sage)}
.prose a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--sage)}
.prose strong{color:var(--fg);font-weight:600}
.prose code{
  font-family:var(--font-mono);font-size:.9em;
  background:var(--chalk-warm);padding:2px 6px
}
.prose hr{border:0;border-top:1px solid var(--rule);margin:clamp(32px,4vw,48px) 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:12px 14px 12px 0;border-top:1px solid var(--rule);vertical-align:top}
.prose th{
  font-family:var(--font-sans);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)
}
.prose dl{margin:0 0 18px}
.prose dt{font-family:var(--font-sans);font-weight:600;font-size:14.5px;margin-top:16px}
.prose dd{margin:6px 0 0;font-size:15.5px;line-height:1.7;color:var(--fg-muted)}

.prose-placeholder{
  padding:26px 28px;border:1px dashed var(--rule);background:var(--bg-alt)
}
.prose-placeholder p{margin:0 0 12px}
.prose-placeholder p:last-child{margin:0}

/* Outstanding item inside otherwise-final copy. Loud on purpose: these must be
   resolved before launch and must not blend into the page. */
.todo{
  display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:.9em;
  color:#6d3f0b;background:rgba(214,158,46,.18);
  border:1px dashed rgba(109,63,11,.45);padding:1px 7px
}

.privacy-updated{
  margin:20px 0 0;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)
}