/* ==========================================================================
   SCALE — v3
   Same brand, sharper sales narrative: section structure, evidence blocks,
   technical specification, combinable floor plan, named contact.
   ========================================================================== */

:root {
  --violet: #5C19F5;
  --violet-press: #4718CC;
  --violet-tint: #EEE9FE;
  --ink: #111111;
  --ink-60: rgba(17, 17, 17, 0.62);
  --ink-40: rgba(17, 17, 17, 0.42);
  --sand: #F1EBE3;
  --sand-deep: #E7E0D6;
  --dark: #0F0F0F;
  --line: rgba(0, 0, 0, 0.1);
  --line-soft: rgba(0, 0, 0, 0.07);
  --line-strong: rgba(0, 0, 0, 0.22);
  --line-on-dark: rgba(255, 255, 255, 0.16);

  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --pad-x: 64px;
  --gap: 72px;
  --nav-h: 58px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1200px) { :root { --pad-x: 44px; --gap: 52px; } }
@media (max-width: 780px)  { :root { --pad-x: 28px; --gap: 40px; } }
@media (max-width: 520px)  { :root { --pad-x: 20px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
::selection { background: var(--violet); color: #fff; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

@keyframes spinBadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--violet); color: #fff; padding: 12px 20px;
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------- reveal on scroll -------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-stagger].is-visible > * {
  animation: staggerIn 0.7s var(--ease) both;
}
[data-stagger].is-visible > *:nth-child(1) { animation-delay: 0.00s; }
[data-stagger].is-visible > *:nth-child(2) { animation-delay: 0.07s; }
[data-stagger].is-visible > *:nth-child(3) { animation-delay: 0.14s; }
[data-stagger].is-visible > *:nth-child(4) { animation-delay: 0.21s; }
[data-stagger].is-visible > *:nth-child(5) { animation-delay: 0.28s; }
[data-stagger].is-visible > *:nth-child(6) { animation-delay: 0.35s; }
[data-stagger].is-visible > *:nth-child(7) { animation-delay: 0.42s; }
[data-stagger].is-visible > *:nth-child(8) { animation-delay: 0.49s; }
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================== TYPOGRAPHY ============================== */

.h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
.h2--lg { font-size: clamp(32px, 4.4vw, 62px); }
.h2--xl { font-size: clamp(32px, 4.6vw, 66px); }

.h3 {
  margin: 0 0 20px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.h3--lg { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.16; }

.lead {
  margin: 0;
  font-size: clamp(23px, 2.7vw, 36px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.016em;
  text-wrap: pretty;
}

.body {
  margin: 0;
  font-size: 18px;
  line-height: 1.62;
  max-width: 68ch;
  color: var(--ink-60);
}
.body + .body { margin-top: 20px; }
.h2 + .body, .h2 + p { margin-top: 26px; }
.h3 + .body, .h3 + p { margin-top: 16px; }
.body--narrow    { max-width: 58ch; }
.body--md        { font-size: 17px; }
.body--sm        { font-size: 16px; max-width: 60ch; }
.body--muted     { color: var(--ink-60); }
.body--on-violet { color: rgba(255, 255, 255, 0.84); }
.body--on-dark   { color: rgba(255, 255, 255, 0.72); }

.eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  font-family: var(--font-mono);
}

.footnote {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-40);
  max-width: 70ch;
}

/* ================================ BUTTONS =============================== */

.btn {
  display: inline-block;
  border: none;
  border-radius: 0;
  background: var(--violet);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 15px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--violet-press); }
.btn:active { transform: translateY(1px); }

.btn--sm    { padding: 10px 20px; font-size: 13px; }
.btn--lg    { padding: 16px 30px; }
.btn--block { display: block; text-align: center; padding: 15px 24px; }

.btn--ghost {
  background: transparent;
  color: var(--violet);
  border: 1px solid var(--violet);
  padding: 15px 26px;
}
.btn--ghost:hover { background: var(--violet-tint); }

.chip {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.chip:hover:not([disabled]) { background: var(--violet-tint); border-color: var(--violet); }
.chip[disabled] { opacity: 0.35; cursor: default; }

/* ================================== NAV ================================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pad-x);
}
/* The frosted bar lives on its own layer: backdrop-filter on .nav itself would
   turn it into the containing block for the fixed full-screen mobile menu. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__brand { display: flex; align-items: center; }
.nav__brand img { height: 16px; width: auto; display: block; }

.nav__menu { display: flex; align-items: center; gap: 30px; }

.nav__link {
  position: relative;
  font-size: 13px;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0.01em;
  padding: 4px 0;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--violet); }

.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.nav__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--violet);
  transition: width 0.1s linear;
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 32px;
  margin-right: -8px;
  padding: 0; border: none; background: none; cursor: pointer;
}
.nav__burger,
.nav__burger::before,
.nav__burger::after {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 0.24s var(--ease), opacity 0.18s var(--ease);
}
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; }
.nav__burger::before { transform: translateY(-6px); }
.nav__burger::after  { transform: translateY(6px); }
.nav.is-open .nav__burger { background: transparent; }
.nav.is-open .nav__burger::before { transform: rotate(45deg); }
.nav.is-open .nav__burger::after  { transform: rotate(-45deg); }

.nav__scrim { position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 10, 0.34); }

.nav__contact { display: none; }

/* Mobile menu: full-screen panel, not a dropdown. */
@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; position: relative; }
  .nav__menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad-x) calc(28px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0s linear 0.26s;
  }
  .nav.is-open .nav__menu { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

  .nav__link {
    padding: 20px 0;
    font-size: clamp(26px, 7vw, 36px);
    font-weight: 600;
    letter-spacing: -0.028em;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__link::after { display: none; }

  .nav__contact {
    display: block;
    margin-top: auto;
    padding-top: 28px;
    font-size: 15px;
    color: var(--violet);
    text-decoration: none;
    font-family: var(--font-mono);
  }
  .nav__menu .btn {
    margin-top: 16px;
    padding: 18px 24px;
    text-align: center;
    font-size: 15px;
  }
}

/* ================================= HERO ================================= */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  /* dark ground: rounding gaps between image edge and factstrip stay invisible */
  background: var(--dark);
}
/* image and veil stop above the factstrip (--strip-h, main.js), so the
   official HdM watermark at the visual's lower edge stays visible */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* not height:auto + bottom: a replaced element keeps its intrinsic ratio
     and collapses to a strip on phones */
  height: calc(100% - var(--strip-h, 0px));
  object-fit: cover;
  object-position: center bottom;
}
.hero__veil {
  position: absolute;
  inset: 0 0 var(--strip-h, 0px) 0;
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.28) 42%, rgba(8, 8, 8, 0.06) 70%);
}
.hero__content {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  bottom: 152px;
  color: #ffffff;
}
.hero__logo {
  display: block;
  width: clamp(280px, 38vw, 540px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0;
  animation: heroIn 1s var(--ease) 0.1s both;
}
.hero__title {
  margin: 22px 0 0;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  opacity: 0;
  animation: heroIn 1s var(--ease) 0.22s both;
}
.hero__lead {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: heroIn 1s var(--ease) 0.34s both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.factstrip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  /* solid: no image runs underneath any more (see --strip-h above) */
  background: var(--dark);
  opacity: 0;
  animation: heroIn 1s var(--ease) 0.5s both;
}
.factstrip__item {
  padding: 20px var(--pad-x);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.factstrip__item:last-child { border-right: none; }
.factstrip dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
}
.factstrip dd {
  margin: 7px 0 0;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* =============================== SECTIONS =============================== */

.section { padding: clamp(72px, 9vw, 140px) var(--pad-x); }
.section--violet { background: var(--violet); color: #ffffff; }
.section--dark   { background: var(--dark); color: #ffffff; }
.section--sand   { background: var(--sand); }

.section + .section:not(.section--violet):not(.section--dark):not(.section--sand) {
  border-top: 1px solid var(--line-soft);
}

.split { display: grid; gap: var(--gap); align-items: start; }
.split--4-8 { grid-template-columns: minmax(260px, 4fr) 8fr; }
.split--5-7 { grid-template-columns: minmax(260px, 5fr) 7fr; }

/* media */
.media { margin: var(--gap) 0 0; }
.media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
/* right bottom keeps the official HdM watermark inside the 21:9 (desktop)
   and 4:3 (phone) crops of the 16:9 visual */
.media--lower { object-position: right bottom; }
.media figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-40);
}
.media--flush { margin-bottom: 0; }

/* key figures */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: var(--gap) 0 0;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.figures__cell { background: #ffffff; padding: 34px 30px 34px 0; }
.figures__cell:not(:first-child) { padding-left: 30px; }
.figures__value {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.028em;
}
.figures__label {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-40);
}
.figures--on-violet {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}
.figures--on-violet .figures__cell { background: var(--violet); }
.figures--on-violet .figures__label { color: rgba(255, 255, 255, 0.6); }

.bridge {
  margin: clamp(56px, 7vw, 96px) auto 0;
  max-width: 26ch;
  text-align: center;
  font-size: clamp(26px, 3.6vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

/* ========================= INTERACTIVE FLOOR PLAN ======================== */

.fp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: clamp(40px, 4.5vw, 64px) 0 18px;
}
.fp-bar__hint { margin: 0; font-size: 13px; color: var(--ink-40); }
.fp-bar__actions { display: flex; gap: 8px; }

.fp {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #faf9f6;
}
.fp__svg { width: 100%; display: block; }

.fp__unit { cursor: pointer; }
.fp__shape {
  fill: #eceae4;
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1;
  transition: fill 0.24s var(--ease), opacity 0.24s var(--ease);
}
.fp__name, .fp__area {
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), fill 0.24s var(--ease);
}
.fp__name { font-size: 22px; font-weight: 700; }
.fp__area { font-size: 13px; font-family: var(--font-mono); opacity: 0; }

.fp__unit:hover .fp__shape,
.fp__unit:focus-visible .fp__shape { fill: #E4DBFD; stroke: var(--violet); stroke-width: 2; }
.fp__unit:hover .fp__area,
.fp__unit:focus-visible .fp__area { opacity: 1; }
.fp__unit:focus { outline: none; }

.fp.is-open .fp__unit:not(.is-selected) .fp__shape { fill: #f4f3ef; opacity: 0.6; }
.fp.is-open .fp__unit:not(.is-selected) .fp__name  { opacity: 0.6; }
.fp.is-open .fp__unit:not(.is-selected):hover .fp__shape,
.fp.is-open .fp__unit:not(.is-selected):focus-visible .fp__shape {
  fill: #E4DBFD; stroke: var(--violet); stroke-width: 2; opacity: 1;
}
.fp.is-open .fp__unit:not(.is-selected):hover .fp__area { opacity: 1; }

.fp__unit.is-selected .fp__shape { fill: var(--violet); stroke: var(--violet); stroke-width: 2; }
.fp__unit.is-selected .fp__name,
.fp__unit.is-selected .fp__area { fill: #ffffff; opacity: 1; }

.fp__split { stroke: rgba(0, 0, 0, 0.28); stroke-width: 1.3; stroke-dasharray: 7 6; pointer-events: none; }
.fp__walls { stroke: rgba(0, 0, 0, 0.4); stroke-width: 1.3; pointer-events: none; }
.fp__cores { pointer-events: none; }
.fp__core  { fill: #e9e6df; stroke: rgba(0, 0, 0, 0.16); }
.fp__stairs { fill: #ffffff; stroke: rgba(0, 0, 0, 0.38); stroke-width: 1.2; }
.fp__shafts { fill: #e9e6df; stroke: rgba(0, 0, 0, 0.16); stroke-width: 1; }
.fp__party  { stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.fp__envelope { fill: none; stroke: var(--ink); stroke-width: 2.5; pointer-events: none; }
.fp__captions { pointer-events: none; }
.fp__captions text { font: 700 11px var(--font); fill: rgba(0, 0, 0, 0.4); }

.fp__scrim {
  position: absolute; inset: 0; z-index: 15;
  background: rgba(10, 10, 10, 0.34);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.fp__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 20;
  width: 380px;
  background: #ffffff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateX(110%);
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease), visibility 0s linear 0.32s;
}
.fp.is-open .fp__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.fp__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fp__panel-eyebrow {
  font-size: 11px; letter-spacing: 0.06em; color: var(--violet);
  font-family: var(--font-mono); text-transform: uppercase;
}
.fp__close {
  border: none; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-40); padding: 0; font-family: inherit;
}
.fp__close:hover { color: var(--ink); }
.fp__panel-area { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.fp__panel-caption { font-size: 12px; color: var(--ink-40); margin-top: 7px; }

.fp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fp__list li {
  font-size: 11.5px;
  font-family: var(--font-mono);
  padding: 4px 9px;
  background: var(--violet-tint);
  color: var(--violet-press);
}

.fp__pdf {
  position: relative; display: block; aspect-ratio: 3 / 2;
  background: #fff; border: 1px solid var(--line); overflow: hidden; text-decoration: none;
  transition: border-color 0.2s var(--ease);
}
.fp__pdf:hover { border-color: var(--violet); }
.fp__pdf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fp__pdf-badge {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 10.5px; letter-spacing: 0.05em; color: #fff;
  background: var(--violet); padding: 4px 9px; font-family: var(--font-mono);
}

/* On a phone the plan fits the screen as one tappable diagram instead of
   panning half off screen: unit numbers grow in viewBox units, the exact
   areas live in the legend below and in the panel. */
@media (max-width: 700px) {
  .fp__name { font-size: 34px; }
  .fp__area { display: none; }
  .fp__captions text { font-size: 24px; }
}

@media (max-width: 1023px) {
  .fp__scrim { position: fixed; inset: 0; z-index: 60; }
  .fp__panel {
    position: fixed;
    top: auto; right: 0; bottom: 0; left: 0;
    z-index: 61;
    width: auto; max-height: 84vh;
    border-left: none; border-top: 1px solid var(--line);
    box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.18);
    opacity: 1;
    transform: translateY(101%);
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .fp.is-open .fp__scrim { opacity: 1; pointer-events: auto; }
  .fp__pdf { max-width: 460px; }

  /* sheet affordance: a grab handle where the panel meets the thumb */
  .fp__panel { padding-top: 14px; }
  .fp__panel::before {
    content: "";
    flex: none;
    align-self: center;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.16);
  }
}

body.is-locked { overflow: hidden; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legend__item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  background: #ffffff; color: var(--ink);
  font-family: inherit; cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.legend__no   { font-size: 13px; font-weight: 700; }
.legend__area { font-size: 12px; opacity: 0.65; font-family: var(--font-mono); }
.legend__item:hover { background: var(--violet-tint); border-color: var(--violet); }
.legend__item.is-selected { background: var(--violet); color: #ffffff; border-color: var(--violet); }
.legend__item.is-selected:hover { background: var(--violet-press); }

/* ----------------------------- long section -----------------------------
   Schematic but dimensionally true: 1 SVG unit = 0.1 m. Levels, storey
   height and clear height come from the building permit drawings.
   ---------------------------------------------------------------------- */

/* the scale story opens the chapter and the floor plan follows it, so it
   needs air on both sides, not just above */
.xsec {
  margin-top: clamp(64px, 8vw, 110px);
  margin-bottom: clamp(64px, 8vw, 110px);
}
.xsec__intro { margin-bottom: clamp(28px, 3vw, 44px); }
.xsec__intro .body { max-width: 720px; }
.xsec__intro .h3 { margin-bottom: 14px; }

.xsec__svg { width: 100%; height: auto; display: block; }

.xsec__ug { fill: rgba(0, 0, 0, 0.045); }
.xsec__slabs rect { fill: var(--ink); }
.xsec__walls rect { fill: var(--ink); }

.xsec__ground line { stroke: rgba(0, 0, 0, 0.4); stroke-width: 1.5; }

.xsec__atria rect { fill: #ffffff; stroke: rgba(0, 0, 0, 0.3); stroke-width: 1; stroke-dasharray: 5 4; }
.xsec__atria path { fill: #ffffff; stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.5; }
.xsec__atria text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: var(--ink-40);
  text-anchor: middle;
}

.xsec__roof line { stroke: rgba(0, 0, 0, 0.45); stroke-width: 2; }

.xsec__party { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.4; stroke-dasharray: 8 6; }

.xsec__hl rect {
  fill: rgba(92, 25, 245, 0.14);
  stroke: var(--violet);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.xsec__hl rect.is-active { opacity: 1; }

/* invisible pointer targets laid over the drawing */
.xsec__zones rect {
  fill: transparent;
  cursor: pointer;
}

.xsec__levels text,
.xsec__storeys text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-40);
}
.xsec__levels text { text-anchor: end; }
.xsec__captions text {
  font: 700 11px var(--font);
  fill: rgba(0, 0, 0, 0.4);
}
.xsec__dim line { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.xsec__dim text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink-40);
  text-anchor: middle;
}

.xsec__caption {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-40);
  max-width: 76ch;
}

.xsec__steps {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.xsec__steps button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 20px 18px 22px;
  border: none;
  background: #ffffff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.xsec__steps button:hover { background: var(--violet-tint); }

.xsec__area {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-40);
  transition: color 0.2s var(--ease);
}
.xsec__what {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
}
.xsec__note {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-60);
}

.xsec__steps button.is-active { background: var(--violet); }
.xsec__steps button.is-active .xsec__area { color: rgba(255, 255, 255, 0.7); }
.xsec__steps button.is-active .xsec__what { color: #ffffff; }
.xsec__steps button.is-active .xsec__note { color: rgba(255, 255, 255, 0.8); }

/* --------------------------- technical specification -------------------- */

.specs {
  margin-top: clamp(64px, 8vw, 110px);
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}
.specs__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 32px;
}
.specs__head .h3 { margin: 0; }
.specs__meta { margin: 0; font-size: 12px; font-family: var(--font-mono); color: var(--ink-40); }

.specs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.specs__title {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--violet);
}
.specs__group dl { margin: 0; }
.specs__group dl > div { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.specs__group dt { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-40); margin-bottom: 4px; }
.specs__group dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }

.specs__note { margin: 30px 0 0; font-size: 13px; color: var(--ink-40); max-width: 70ch; }

/* =============================== STATEMENT ============================== */

.statement {
  padding: clamp(90px, 11vw, 170px) var(--pad-x);
  background: var(--sand);
  text-align: center;
}
.statement__text {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(32px, 5vw, 76px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.statement__logo {
  display: block;
  margin: clamp(40px, 5vw, 64px) auto 0;
  width: clamp(220px, 42vw, 600px);
  height: auto;
}

/* ============================= BUILD-TO-SUIT ============================ */

.badge {
  width: 148px; height: 148px;
  animation: spinBadge 24s linear infinite;
}
.badge text { font-size: 20px; font-weight: 700; letter-spacing: 0.16em; fill: var(--violet); }
.badge circle { fill: var(--violet); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--gap);
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cards__item { background: #ffffff; padding: 32px 30px 32px 0; }
.cards__item:not(:first-child) { padding-left: 30px; }
.cards__label {
  margin: 0 0 14px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-mono); color: var(--violet);
}
.cards__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }

#project .btn--inline { margin-top: var(--gap); }

/* ============================== NEIGHBOURS ============================== */

.neighbours { margin-top: clamp(56px, 7vw, 96px); }
.neighbours .h3 { margin: 0 0 14px; }
.neighbours__lead { margin: 0 0 32px; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 11px 20px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.chips li.chips__more { border-color: transparent; color: var(--ink-40); }
.section--dark .chips li { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); }
.section--dark .chips li.chips__more { border-color: transparent; color: rgba(255, 255, 255, 0.5); }

/* ============================== CAMPUS LIFE ============================= */

.amenities { list-style: none; margin: 0; padding: 0; }
.amenities li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line-on-dark);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.amenities li:last-child { border-bottom: 1px solid var(--line-on-dark); }
/* the label shrinks and wraps internally, so the thumbnail keeps its
   place on the right even for long entries */
.amenities li span { flex: 1 1 0; min-width: 0; }

/* amenity images: hover preview beside the list on wide screens,
   thumbnails inside the rows on small ones */
.amenities__thumb {
  display: none;
  width: 72px;
  height: 54px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line-on-dark);
}
.amenities-view {
  position: relative;
  display: none;
  margin-top: clamp(28px, 3vw, 44px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.amenities-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.5s var(--ease), transform 1.4s var(--ease);
}
.amenities-view img.is-active { opacity: 1; transform: none; }
@media (min-width: 941px) {
  .amenities-view { display: block; }
  .amenities li { transition: color 0.2s var(--ease); }
  .amenities li:hover { color: #ffffff; }
}
@media (max-width: 940px) {
  .amenities__thumb { display: block; }
  .amenities li { padding: 10px 0; flex-wrap: wrap; cursor: pointer; }
  /* tap a row: its image unfolds full width under the label (main.js swaps
     the thumbnail for the large file on first open), tap again to close */
  .amenities li.is-open .amenities__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 6px;
  }
}

.map { margin-top: var(--gap); }
.map__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.map__head .h3 { margin: 0; }
.map__meta { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.map__img { width: 100%; height: auto; display: block; }

/* ================================= OFFER ================================ */

.offer { display: grid; grid-template-columns: 6fr 5fr; gap: var(--gap); align-items: start; }
.offer__title { margin-bottom: 24px; }
.offer__p2 { margin-bottom: 36px; }
.offer__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.facts__cell { background: #ffffff; padding: 30px 26px; }
.facts__label { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); font-family: var(--font-mono); }
.facts__value { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* ================================ CONTACT =============================== */

/* Two columns of equal height: the text and the person on the left, the form
   on the right. The message field absorbs the difference so both columns
   start and finish on the same line at any viewport width. */
.contact {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--gap);
  align-items: stretch;
}
.contact__intro { display: flex; flex-direction: column; }
.contact__title { margin: 0 0 20px; }
.contact__lead  { margin: 0 0 clamp(32px, 4vw, 48px); }

.contact__form { display: flex; flex-direction: column; }
.contact__form .form { flex: 1; }
.form__field--grow { flex: 1 1 auto; min-height: 130px; }
.form__field--grow .form__input { flex: 1; }

/* photo and text share one row height, so both edges line up exactly */
.person {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: stretch;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.person__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  object-position: center 20%;
}
.person__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.person__name {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.person__role { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-60); }
.person__contact { margin: 0 0 22px; font-size: 14px; }
.person__contact a { color: var(--violet); text-decoration: none; }
.person__contact a:hover { text-decoration: underline; }
.person__cta { align-self: flex-start; }

.form { display: flex; flex-direction: column; gap: 20px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
}
.form__field { display: flex; flex-direction: column; gap: 9px; }
.form__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-40); font-family: var(--font-mono); }
.form__input {
  font-size: 16px;
  padding: 15px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: inherit;
  color: var(--ink);
  background: #ffffff;
  outline: none;
  transition: border-color 0.18s var(--ease);
}
textarea.form__input { resize: vertical; }
.form__input:focus { border-color: var(--violet); }
.form__input[aria-invalid="true"] { border-color: #b3261e; }
.form__error { margin: 0; font-size: 14px; color: #b3261e; }
.form__submit { align-self: flex-start; flex: none; }
.form__submit[disabled] { opacity: 0.6; cursor: default; }
.form__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-40); max-width: 62ch; }

.thanks {
  flex: 1;
  border: 1px solid var(--line);
  padding: 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.thanks__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.thanks__text  { margin: 0; font-size: 16px; color: var(--ink-60); }

/* ================================= FOOTER =============================== */

.footer {
  padding: 44px var(--pad-x);
  background: var(--dark);
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.footer__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__mark { width: 44px; height: 44px; display: block; }
.footer__link { font-size: 13px; color: inherit; text-decoration: none; }
.footer__link:hover { color: #ffffff; }
.footer__part {
  display: flex; align-items: center; gap: 12px;
  padding-left: 20px; margin-left: 4px;
  border-left: 1px solid var(--line-on-dark);
  font-size: 13px;
}
/* white plate matches the height of the SENN mark: 32 + 2 × 6 = 44 */
.footer__sip { background: #ffffff; padding: 6px 10px; display: inline-flex; align-items: center; }
.footer__sip img { height: 32px; width: auto; display: block; }
.footer__meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  text-wrap: pretty;
}

/* ============================ ZOOMABLE IMAGE ============================
   The campus aerial reads as one grey mass at full width; zooming in on the
   SCALE plot is what makes the location legible. Zooms itself once on the way
   past, and the button hands control back to the reader.
   ---------------------------------------------------------------------- */

.zoom {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
}
.zoom__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the SCALE plot, not the frame centre */
  transform-origin: 62% 45%;
  transform: scale(1);
  transition: transform 1.6s cubic-bezier(0.2, 0, 0, 1);
}
.zoom.is-in .zoom__img { transform: scale(1.85); }

.zoom__btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(13, 13, 13, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #ffffff;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.16s var(--ease), background 0.16s var(--ease);
}
.zoom__btn:hover { background: rgba(13, 13, 13, 0.78); opacity: 1; }
.zoom.is-in .zoom__btn { opacity: 1; }

/* ================================ STOERER ===============================
   Fixed round CTA. Stays out of the hero so it never fights the headline,
   and steps aside for the floor-plan bottom sheet on small screens.
   ---------------------------------------------------------------------- */

.stoerer {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--violet);
  color: #ffffff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transform: rotate(-8deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.2s var(--ease),
              background 0.2s var(--ease);
}
.stoerer.is-visible { opacity: 1; pointer-events: auto; }
.stoerer.is-visible:hover {
  transform: rotate(-8deg) scale(1.06);
  background: var(--violet-press);
}
.stoerer__kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.stoerer__line {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* the floor-plan panel and the mobile bottom sheet both own the lower right
   of the screen while open, and both carry their own enquiry CTA. fp-in-view
   limits this to while the plan section is actually on screen — the panel
   scrolls away with its section, the Stoerer must come back */
body.is-locked .stoerer,
body.fp-open.fp-in-view .stoerer,
/* the contact section is where the Stoerer points, so it stands down there */
body.at-contact .stoerer { opacity: 0; pointer-events: none; }

/* ========================= SCALE PICKER (SECTION) ======================= */

.xsec__lede {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-40);
}

.xsec__pick { position: relative; }
.xsec__pick .xsec__steps { margin-top: 0; }
.xsec__pick + .xsec__scroll { margin-top: clamp(20px, 2.4vw, 32px); }

.xsec__flag {
  position: absolute;
  right: -6px;
  top: -25px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 12px;
  background: var(--violet);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  transition: opacity 0.2s var(--ease);
}
.xsec__flag.is-done { opacity: 0; }
.xsec__flag-icon { width: 13px; height: 15px; fill: #ffffff; flex: none; }

/* ============================ PAN SURFACES ==============================
   Drawings wider than a phone (long section, campus map) pan sideways.
   The hint names the gesture and disappears after the first drag (main.js).
   ---------------------------------------------------------------------- */

.pan__hint {
  display: none;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
  transition: opacity 0.4s var(--ease);
}
.pan__hint.is-done { opacity: 0; }
.section--dark .pan__hint { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 640px) { .pan__hint { display: block; } }

/* =============================== RESPONSIVE ============================= */

@media (max-width: 1100px) {
  .specs__list { columns: 1; }
  .factstrip { grid-template-columns: repeat(2, 1fr); }
  .factstrip__item:nth-child(2) { border-right: none; }
  .factstrip__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .hero__content { bottom: 210px; }
}

@media (max-width: 1100px) {
  .specs__grid { grid-template-columns: repeat(2, 1fr); gap: 40px var(--gap); }
}

@media (max-width: 940px) {
  .stoerer { right: 18px; bottom: 18px; width: 108px; height: 108px; gap: 4px; }
  .stoerer__line { font-size: 14px; }
  .stoerer__kicker { font-size: 9px; }
  .split--4-8, .split--5-7, .offer, .contact { grid-template-columns: 1fr; }
  /* stacked: no height to match, so the message field stops stretching */
  .contact__form { display: block; margin-top: clamp(36px, 5vw, 56px); }
  .form__field--grow { flex: none; min-height: 0; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr; }
  .xsec__steps { grid-template-columns: repeat(2, 1fr); }
  .xsec__steps li:last-child { grid-column: 1 / -1; }
  .figures__cell, .cards__item { padding-left: 0 !important; padding-right: 0; }
  .figures__cell:nth-child(even), .cards__item { padding-left: 0; }
}

@media (max-width: 640px) {
  /* editorial cut: text whose facts already appear in the stats blocks,
     specs, captions or cards around it stays desktop-only */
  .phone-cut { display: none; }

  /* the flag would sit on top of the first step button once stacked */
  .xsec__flag { position: static; transform: none; align-self: flex-start;
                display: inline-flex; margin-bottom: 12px; }
  .zoom__btn { right: 12px; bottom: 12px; }
  .hero { min-height: 620px; }
  .hero__content { bottom: 196px; }
  .factstrip__item { padding: 15px var(--pad-x); }
  .factstrip dd { font-size: 15px; }

  /* imagery leads on a phone: full bleed and taller than the 21:9 letterbox */
  .media { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); }
  .media img { aspect-ratio: 4 / 3; }
  .media figcaption { padding: 0 var(--pad-x); }
  .zoom { aspect-ratio: 4 / 3; }

  /* key figures as a compact 2 × 2 block instead of a 500 px column */
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures__cell { padding: 22px 14px 22px 0 !important; }
  .figures__cell:nth-child(even) { padding-left: 16px !important; }

  .form__row { grid-template-columns: 1fr; }
  .thanks { padding: 32px 24px; }

  /* technical specification, short form: label and value share one line,
     secondary rows (class specs__more) stay desktop-only */
  .specs__grid { grid-template-columns: 1fr; gap: 28px; }
  .specs__group dl > div.specs__more { display: none; }
  .specs__group dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
  }
  .specs__group dt { margin-bottom: 0; flex: none; }
  .specs__group dd { font-size: 14px; text-align: right; }

  /* the five sizes become swipe cards: the stacked list buried the drawing
     450 px below the headline. The half-visible next card names the gesture. */
  .xsec__steps {
    display: flex;
    gap: 10px;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    padding: 2px var(--pad-x);
    background: none;
    border-top: none;
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-x);
    scrollbar-width: none;
  }
  .xsec__steps::-webkit-scrollbar { display: none; }
  .xsec__steps li { flex: 0 0 240px; display: flex; scroll-snap-align: start; }
  .xsec__steps button { border: 1px solid var(--line-strong); padding: 14px 16px 16px; }
  .xsec__steps button.is-active { border-color: var(--violet); }

  /* the schematic long section stays desktop-only: cropped and panning it
     said little on a phone. The swipe cards drive the floor plan directly. */
  .xsec__scroll,
  .xsec__scroll + .pan__hint,
  .xsec__caption { display: none; }

  /* campus map pans full bleed at readable size; main.js centres it on the
     SCALE plot. The hint names the gesture, so the scrollbar can go. */
  .map__pan {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--pad-x));
    padding: 0 var(--pad-x);
    scrollbar-width: none;
  }
  .map__pan::-webkit-scrollbar { display: none; }
  .map__img { min-width: 780px; }

  /* full-bleed portrait: break out of the section padding on both sides */
  .person { grid-template-columns: 1fr; gap: 24px; }
  .person__photo {
    width: calc(100% + 2 * var(--pad-x));
    margin-left: calc(-1 * var(--pad-x));
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
  .footer { align-items: flex-start; }
  .footer__part { padding-left: 0; margin-left: 0; border-left: none; width: 100%; }
  .footer__meta { text-align: left; }

  .legend { display: grid; grid-template-columns: 1fr 1fr; }
  .legend__item { justify-content: space-between; }
  .specs__row { grid-template-columns: 1fr; gap: 4px; }

  /* primary actions run full width, into the thumb zone. The margin stands
     in for the hidden second paragraph above the buttons. */
  .offer__actions { flex-direction: column; align-items: stretch; margin-top: 32px; }
  .offer__actions .btn { text-align: center; }
  .person__cta { align-self: stretch; text-align: center; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__submit { width: 100%; }
  #project .btn--inline { display: block; text-align: center; }

  /* the round Stoerer becomes a slim action bar: on a phone the circle sat
     on top of the content the whole way down the page */
  .stoerer {
    left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    border-radius: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.16);
    /* keeps the bar readable where it crosses the violet section */
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }
  .stoerer.is-visible { transform: none; }
  .stoerer.is-visible:hover { transform: none; }
  .stoerer__kicker { display: none; }
  .stoerer__line { font-size: 15px; }
  .stoerer__line br { display: none; }
  /* the last footer lines must be able to scroll clear of the fixed bar */
  .footer { padding-bottom: calc(44px + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================= EJ-REVIEW MODE ===========================
   ?ej=1 (main.js setzt body.ej-review) markiert die Änderungen aus EJs Mail
   vom 24.08.2026 rot und zeigt gelöschte Specs-Zeilen durchgestrichen.
   Ohne Parameter ist die Seite unverändert. Diesen Block samt ej-*-Markup
   im HTML nach der finalen Abnahme entfernen.
   ---------------------------------------------------------------------- */

.specs__group dl > div.ej-del { display: none; }

body.ej-review .ej-new { color: #D61F1F; }
body.ej-review .section--violet .ej-new,
body.ej-review .xsec__steps button.is-active .ej-new { color: #FFADAD; }
/* im Review-Modus auch die Desktop-only-Zeilen zeigen, EJ prüft mobil */
body.ej-review .specs__group dl > div.specs__more { display: block; }
body.ej-review .ej-row dt,
body.ej-review .ej-row dd { color: #D61F1F; }
body.ej-review .specs__group dl > div.ej-del { display: block; }
body.ej-review .ej-del dt,
body.ej-review .ej-del dd {
  color: #D61F1F;
  text-decoration: line-through;
  opacity: 0.55;
}
body.ej-review .xsec__hl rect {
  stroke: #D61F1F;
  fill: rgba(214, 31, 31, 0.12);
}

/* ============================ REDUCED MOTION ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* no drifting zoom for readers who asked for stillness; the button still works */
  .zoom__img { transition: none; }
  .hero__logo, .hero__title, .hero__lead, .factstrip { opacity: 1; }
}