/* 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.
   ══════════════════════════════════════════════════════════════ */

/* Restore the sticky header.
   The design sets `html,body{max-width:100%;overflow-x:hidden}`. `overflow:hidden`
   makes an element a scroll container, and `position:sticky` binds to the nearest
   scroll container — so the header was sticking to <body>, which never scrolls,
   instead of the viewport. It scrolled away like a static header, and because it
   then sat at the top of the document, focusing anything inside it (the menu
   hamburger) scrolled the page back to the top.
   `overflow-x:clip` clips exactly the same way but does NOT create a scroll
   container, so sticky works and horizontal overflow is still contained.
   Browsers without `clip` fall back to the `hidden` above: header stops sticking
   again, nothing breaks. */
body{overflow-x:clip}

/* Keep every image's intrinsic proportions.
   An <img> width/height attribute is a presentational hint for the CSS width
   and height properties, not just an aspect-ratio hint. So wherever CSS
   overrides the width (e.g. width:100%;max-width:300px) while the height
   attribute remains, that height sticks and the image distorts. height:auto
   makes the height follow the real aspect ratio while the attributes still do
   their real job — reserving layout space so nothing shifts as images load.
   Images that crop deliberately set height themselves and are unaffected:
   .imgslot__img and the service-area map set it inline (inline wins), and
   .hero-panel__img sets it via a class (class beats this element selector). */
img{height:auto}

/* 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 lives inside .nav-actions, right beside the hamburger it drives.
   It used to sit before <header> so a `~` selector could reach the panel, but
   that put the focus target at the top of the document — and activating a
   <label for> focuses its control, so opening the menu scrolled the page to the
   top. Anchored in the sticky header, there is nothing to scroll to. State is
   read with :has() on the header, which works regardless of DOM order. */
.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){
  header:has(#nav-open:checked) .nav-panel{display:flex}
  header:has(#nav-open:checked) .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  header:has(#nav-open:checked) .nav-toggle span:nth-child(2){opacity:0}
  header:has(#nav-open:checked) .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);position:relative}
.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)}

/* The radio sits INSIDE its own .seg, immediately before its label.
   It used to live at <main> level so a `~` selector could reach the panels
   further down the page — but activating a <label for> also focuses the
   control, and the browser scrolls a focused element into view, which threw
   the page back to the top on every toggle. Anchored here, the focus target
   is the toggle the user just clicked, so there is nothing to scroll to.
   Panel switching now uses :has() on an ancestor, which does not care about
   DOM order. */
.seg-radio{position:absolute;top:50%;left:0;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.seg-radio:checked + .seg__opt{background:var(--fg);color:var(--bg)}

/* Maintenance: swap the package grids from the checked radio's ancestor */
main:has(#pkg-res:checked) .pkg-grid--com{display:none}
main:has(#pkg-com:checked) .pkg-grid--res{display:none}

/* ── 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
}

/* Build marker in the footer bar. Deliberately quiet. */
.foot-version{font-family:var(--font-mono);letter-spacing:.06em;opacity:.75}

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