/* ==========================================================================
   muulus. — design tokens
   Colors + RGB values sourced verbatim from Media/Brandmanual (03.1 Farbwelt).
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/jost-v20-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/jost-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/jost-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/jost-v20-latin-300italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/jost-v20-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/jost-v20-latin-500italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-300italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-500italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-v38-latin-600italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* brand colors — see Media/Brandmanual, section 03.1 Farbwelt */
  --color-reed: #c5c7b5;         /* natuur */
  --color-autumn-red: #734a2f;   /* soorce */
  --color-spruce-green: #4b4c3e; /* primary dark surface */
  --color-wood-green: #4f4428;   /* ruum */
  --color-golden-light: #968354; /* moove */
  --color-clear-water: #aeb8c9;  /* aaqua */
  --color-wine: #4c2131;         /* ruum accent per client-directed reference (not in brand manual's 6 core colors) */
  --color-bark-red: #523332;     /* CI bark red — pulse accent on white surfaces */

  --color-paper: #eeeae1;   /* footer / light surface */
  --color-ink: #2a2b22;     /* body copy on light surfaces */
  --color-white: #ffffff;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --container-max: 1600px;
  --header-inset: clamp(1.44rem, 3.45vw, 3.16rem);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.17, 0.84, 0.44, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p,
blockquote {
  margin: 0;
  font-weight: 400;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Custom cursor — a small dot in the "reed" brand color (RGB 197/199/181)
   ========================================================================== */

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-reed);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.25s var(--ease-soft), width 0.2s var(--ease-soft), height 0.2s var(--ease-soft);
  will-change: transform;
}

.cursor-dot.is-active {
  opacity: 1;
}

.cursor-dot.is-hovering {
  width: 38px;
  height: 38px;
}

@media (hover: hover) and (pointer: fine) {
  .js-cursor-ready a,
  .js-cursor-ready button {
    cursor: none;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot {
    display: none;
  }
}

/* ==========================================================================
   Scroll reveal — fade + soft rise, staggered via --reveal-delay
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-image {
  overflow: hidden;
}

.js .reveal-image img {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.5s var(--ease-soft), transform 1.15s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal-image.is-visible img {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-image img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--header-inset);
}

.eyebrow {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ==========================================================================
   Site header — vertical nav (top-left) + icon rail (right)
   ========================================================================== */

.site-header {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: calc(var(--header-inset) * 1.1);
  color: var(--color-white);
  pointer-events: none;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.site-header__left {
  --logo-width: clamp(90px, 9vw, 130px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-header__brand {
  display: block;
  width: var(--logo-width);
}

.site-header__brand img {
  width: auto;
}

.site-header__brand-signet {
  height: clamp(32px, 3.2vw, 42px);
}

.site-header__brand-wordmark {
  display: none;
}

.nav-primary {
  margin-top: var(--space-6);
  margin-left: calc(var(--logo-width) * 0.45);
}

.nav-primary__list {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.nav-primary__list a {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.85;
  transform: translateX(0);
  transition: opacity 0.18s var(--ease-standard), transform 0.18s var(--ease-standard);
}

.nav-primary__list a:hover,
.nav-primary__list a:focus-visible,
.nav-primary__list a[aria-current="page"] {
  opacity: 1;
  font-style: italic;
  transform: translateX(0.9em);
}

.nav-primary__item {
  position: relative;
}

@media (min-width: 861px) {
  .nav-primary__row {
    display: flex;
    align-items: center;
    gap: 0.6em;
  }

  .nav-primary__item--has-sub:hover > .nav-primary__row > a,
  .nav-primary__item--has-sub:focus-within > .nav-primary__row > a,
  .nav-primary__item--has-sub.is-sub-open > .nav-primary__row > a {
    transform: translateX(0.3em);
  }

  .nav-primary__line {
    display: block;
    height: 1px;
    width: 0;
    background: currentColor;
    opacity: 0.5;
    transition: width 0.6s var(--ease-soft) 0.05s;
  }

  .nav-primary__item--has-sub:hover .nav-primary__line,
  .nav-primary__item--has-sub:focus-within .nav-primary__line,
  .nav-primary__item--has-sub.is-sub-open .nav-primary__line {
    width: 5em;
  }

  .nav-primary__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 10em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s var(--ease-soft) 0.15s;
  }

  .nav-primary__sublist li {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-standard);
  }

  .nav-primary__item--has-sub:hover .nav-primary__sublist li,
  .nav-primary__item--has-sub:focus-within .nav-primary__sublist li,
  .nav-primary__item--has-sub.is-sub-open .nav-primary__sublist li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.2s + var(--sub-delay, 0s));
  }

  .nav-primary__sublist a {
    display: block;
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    text-transform: lowercase;
    opacity: 0.75;
    padding-block: 0.3em;
    transition: opacity 0.18s var(--ease-standard);
  }

  .nav-primary__sublist a:hover {
    opacity: 1;
  }

  .nav-primary__item--has-sub:hover .nav-primary__sublist,
  .nav-primary__item--has-sub:focus-within .nav-primary__sublist,
  .nav-primary__item--has-sub.is-sub-open .nav-primary__sublist {
    max-height: 7.5em;
    opacity: 1;
  }

  .nav-primary__sublist--icons {
    position: absolute;
    left: 13.5em;
    bottom: 0;
    height: 22px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-5);
    max-height: none;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-soft) 0.15s;
  }

  .nav-primary__item--has-sub:hover .nav-primary__sublist--icons,
  .nav-primary__item--has-sub:focus-within .nav-primary__sublist--icons,
  .nav-primary__item--has-sub.is-sub-open .nav-primary__sublist--icons {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-primary__sublist-divider-item {
    align-self: flex-start;
  }

  .nav-primary__sublist-divider {
    display: block;
    width: 1px;
    /* spans from the icon's top edge to the label's bottom edge */
    height: 53px;
    background: currentColor;
    opacity: 0.5;
  }

  .nav-primary__sublist--icons a {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    text-transform: lowercase;
    letter-spacing: normal;
    opacity: 0.85;
    padding-block: 0;
    transform: translateY(0);
    transition: transform 0.25s var(--ease-standard), opacity 0.18s var(--ease-standard);
  }

  .nav-primary__sublist--icons a:hover,
  .nav-primary__sublist--icons a:focus-visible {
    opacity: 1;
    transform: translateY(-6px);
  }

  .nav-primary__sublist-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .nav-primary__sublist-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.6em;
    white-space: nowrap;
  }
}

.icon-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding-block: 0.5rem;
}

.icon-rail a {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  opacity: 0.85;
}

.icon-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.9rem);
  transform: translate(6px, -50%) scale(0.97);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--color-white);
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
  transition:
    opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the page name fading in beside the icon is the only hover effect, on every page */
.site-header:not(.is-open) .icon-rail a:hover .icon-rail__label,
.site-header:not(.is-open) .icon-rail a:focus-visible .icon-rail__label {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  filter: blur(0);
}

.icon-rail a svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* the divider spacer only exists in the mobile/tablet drawer (see the max-width: 860px
   block below); the "uunits" item is the first icon of the rail everywhere */
.icon-rail__divider {
  display: none;
}

/* the uunits icon is a plain ring and reads a little smaller than the others: +3%, in
   the rail, the mobile/tablet drawer, the desktop flyout and the home hero list */
.icon-rail__item--uunits svg,
.nav-primary__sublist a[data-unit-sound="units"] svg,
.hero-unit-reveal__item--lead svg,
.org__unit-item[data-org-info="units"] svg {
  transform: scale(1.03);
}

.mobile-menu-contact {
  display: none;
}

.mobile-menu-social {
  display: none;
}

.nav-toggle {
  display: none;
}

/* ==========================================================================
   Splash intro (home page only)
   ========================================================================== */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-spruce-green);
  animation: splash-fade-out 1.2s var(--ease-soft) forwards;
  animation-delay: 5.6s;
}

html.no-splash .splash {
  display: none;
}

/* Skip the reveal stagger too once the splash has already played this
   session — otherwise every later visit to the home page still waits
   out the same multi-second delay for nothing. */
html.no-splash .reveal,
html.no-splash .reveal-image img {
  transition-delay: 0ms;
}

.splash__ring {
  position: relative;
  width: clamp(220px, 26vw, 320px);
  height: clamp(220px, 26vw, 320px);
  animation: splash-ring-spin 14s linear infinite;
}

.splash__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(34px, 4vw, 48px);
  height: clamp(34px, 4vw, 48px);
  margin: calc(clamp(34px, 4vw, 48px) / -2);
  color: var(--color-white);
  animation: splash-icon 4s var(--ease-soft) both;
  animation-delay: var(--splash-delay);
}

/* Counter-spins against .splash__ring's rotation so each icon's own
   orientation stays upright while it still orbits with the ring. */
.splash__icon-inner {
  width: 100%;
  height: 100%;
  animation: splash-counter-spin 14s linear infinite;
}

.splash__icon-inner svg {
  width: 100%;
  height: 100%;
}

.splash__icon--center {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splash-center-icon 1s var(--ease-soft) both;
  animation-delay: var(--splash-delay);
}

.splash__icon--center .splash__icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash__icon--center img {
  width: auto;
  height: 100%;
}

@keyframes splash-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes splash-counter-spin {
  to { transform: rotate(-360deg); }
}

@keyframes splash-center-icon {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes splash-icon {
  0%   { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(0); opacity: 0; }
  8%   { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(1.15); opacity: 1; }
  14%  { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(1); opacity: 1; }
  78%  { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(1); opacity: 1; }
  86%  { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(1.15); opacity: 1; }
  94%  { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(0); opacity: 0; }
  100% { transform: rotate(var(--splash-angle)) translate(0, -125px) rotate(calc(-1 * var(--splash-angle))) scale(0); opacity: 0; }
}

@keyframes splash-fade-out {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .splash {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-spruce-green);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* flat +5% darkening over the whole photo, so the centred wordmark — which the two
       gradients below barely reach — reads more clearly against a busy photo */
    linear-gradient(rgba(10, 12, 8, 0.05), rgba(10, 12, 8, 0.05)),
    linear-gradient(115deg, rgba(10, 12, 8, 0.6) 0%, rgba(10, 12, 8, 0.28) 22%, rgba(10, 12, 8, 0) 42%),
    linear-gradient(180deg, rgba(20, 22, 15, 0.15) 0%, rgba(20, 22, 15, 0.35) 100%);
}

.hero__wordmark {
  position: relative;
  z-index: 5;
  width: clamp(240px, 26vw, 420px);
}

.hero__signet {
  display: none;
}

.hero__signet-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  transition: transform 0.6s var(--ease-soft);
}

.hero__signet-wrap.is-open {
  transform: translateX(-22vw);
}

.hero__signet-trigger {
  display: block;
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.hero-unit-reveal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width 0.7s var(--ease-soft), margin-left 0.7s var(--ease-soft), opacity 0.5s var(--ease-soft);
}

.hero__signet-wrap.is-open .hero-unit-reveal {
  max-width: 220px;
  margin-left: 1.4rem;
  opacity: 1;
  pointer-events: auto;
}

.hero-unit-reveal li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
  transition-delay: calc(var(--reveal-index, 0) * 0.07s);
}

.hero__signet-wrap.is-open .hero-unit-reveal li {
  opacity: 1;
  transform: translateX(0);
}

.hero-unit-reveal a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85rem;
  white-space: nowrap;
}

.hero-unit-reveal svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* a long "/" under "uunits": fit-content makes the uunits row exactly as wide as icon +
   word, so the slash runs from the left edge (above the natuur icon) up to the end of the
   "s"; it fills the 2rem of space (1rem flex gap + 1rem margin on the natuur row) between
   the two rows, leaving 0.3rem to each. Same drawing as the "/" in the mobile menu. */
.hero-unit-reveal__item--lead {
  position: relative;
  width: fit-content;
  color: var(--color-white);
}

.hero-unit-reveal__item--lead::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 0.3rem);
  width: 100%;
  height: 1.4rem;
  pointer-events: none;
  opacity: 0.55;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    currentColor 50%,
    transparent calc(50% + 1px)
  );
}

.hero-unit-reveal__item--divided {
  margin-top: 1rem;
}

.hero__title {
  position: relative;
  z-index: 5;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  text-align: center;
  text-transform: lowercase;
}

/* ==========================================================================
   Section: intro / mission (spruce green)
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--space-8);
}

.section--dark {
  background: var(--color-spruce-green);
  color: var(--color-white);
}

.section__signet {
  display: block;
  width: clamp(32px, 2.7vw, 43px);
  margin: 0 auto var(--space-4);
  opacity: 0.9;
}

.mission__column {
  max-width: 46rem;
  margin-left: auto;
  margin-right: clamp(0px, 4vw, 3rem);
}

.mission__eyebrow {
  text-align: center;
  margin-bottom: var(--space-3);
}

.mission__text {
  text-align: left;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
}

/* the text runs over two paragraphs with one blank line between them (= one line-height) */
.mission__text p + p {
  margin-top: 1.75em;
}

.mission__text strong,
.philosophie__body strong,
.subbrand-body__text strong,
.ruum-haltung__text strong {
  font-weight: 600;
}

/* every quote on the site sits space-8 from the text above and from the next
   section — the same gap as .section's padding above the PHILOSOPHIE title */
.mission__quote {
  max-width: 30rem;
  margin: var(--space-8) auto 0;
  text-align: center;
  /* matches every other quote on the site (was missing here, so this one rendered
     at the browser's bold blockquote default instead of the site's light quote style) */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
}

/* ==========================================================================
   The signet that visually bridges the mission and philosophie sections
   ========================================================================== */

.mission-bridge {
  position: relative;
}

.bridge-signet {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 9vw, 7rem);
  top: 55%;
  bottom: 6%;
  width: clamp(196px, 18.2vw, 336px);
  opacity: 0.18;
  pointer-events: none;
  object-fit: contain;
  object-position: left top;
}

@media (max-width: 860px) {
  .bridge-signet {
    display: none;
  }
}

/* ==========================================================================
   Section: Philosophie (photo background)
   ========================================================================== */

.section--photo {
  color: var(--color-white);
  overflow: hidden;
}

.section--photo .section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section--photo .section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section--photo .section__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 21, 14, 0.72) 0%, rgba(20, 21, 14, 0.6) 50%, rgba(20, 21, 14, 0.52) 100%);
}

.section--photo .section__inner {
  position: relative;
  z-index: 2;
}

.philosophie__body {
  max-width: 46rem;
  margin-left: auto;
  margin-right: clamp(0px, 4vw, 3rem);
  text-align: left;
}

.philosophie__body p:not(.eyebrow) {
  text-align: left;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
}

.philosophie__body p + p {
  margin-top: 1.1em;
}

/* ==========================================================================
   Section: Organigram
   ========================================================================== */

.org {
  text-align: center;
  padding-bottom: var(--space-4);
}

.org__root {
  display: inline-block;
  width: clamp(150px, 14vw, 210px);
  margin-inline: auto;
}

.org__trunk {
  width: 1px;
  height: var(--space-4);
  background: rgba(255, 255, 255, 0.35);
  margin: var(--space-2) auto 0;
}

.org__branches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* gap and max-width both 25% wider than before, so the hover text in the middle
     keeps clear of the Ritter Schumacher logo */
  gap: calc(var(--space-6) * 1.2 * 1.25);
  max-width: calc(60rem * 1.25);
  margin: 0 auto;
  position: relative;
  padding-top: var(--space-4);
}

.org__branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.org__branch {
  position: relative;
  padding-top: var(--space-2);
}

.org__info {
  position: absolute;
  top: 9rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 16rem);
  z-index: 3;
  pointer-events: none;
  text-align: center;
}

.org__info-text {
  display: none;
  flex-direction: column;
  gap: 1.4em;
}

.org__info-text.is-visible {
  display: flex;
}

.org__info-text p {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 0.975rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}

.org__info-text p strong {
  font-weight: 600;
}

.org__info-text.is-visible p {
  opacity: 1;
  transform: translateY(0);
}

.org__info-text p:nth-child(1) { transition-delay: 0.05s; }
.org__info-text p:nth-child(2) { transition-delay: 0.15s; }
.org__info-text p:nth-child(3) { transition-delay: 0.25s; }

.org__branch-title {
  --line-gap: clamp(1.35rem, 3.6vw, 2.5rem);
  --line-length: clamp(1.125rem, 2.25vw, 1.8rem);
  position: relative;
  display: block;
  cursor: default;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: calc(var(--line-gap) * 2 + var(--line-length));
}

.org__branch-title::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--line-gap));
  left: 50%;
  width: 1px;
  height: var(--line-length);
  background: rgba(255, 255, 255, 0.35);
}

.org__group-list {
  display: flex;
  flex-direction: column;
  /* a third of the unit list's gap below */
  gap: calc(clamp(1.8rem, 4.5vw, 3.6rem) / 3);
  align-items: center;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.org__group-list--logos li {
  display: flex;
  justify-content: center;
}

/* the logo is a link to the partner's own site; it also carries the hover/tap description */
.org__logo-link {
  display: flex;
  justify-content: center;
}

.org__group-list--logos img {
  width: clamp(132px, 14.4vw, 192px);
  height: auto;
  object-fit: contain;
}

.org__group-list--logos img[alt="Zero Edition"] {
  width: clamp(145px, 15.8vw, 211px);
}

.org__group-list--logos img[alt="Ritter Schumacher AG"] {
  width: clamp(158px, 17.3vw, 230px);
}

.org__unit-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 4.5vw, 3.6rem);
  align-items: center;
}

.org__unit-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  transition: opacity 0.18s var(--ease-standard);
}

.org__item-text {
  display: none;
}

.org__unit-item:hover,
.org__unit-item:focus-visible {
  opacity: 0.75;
}

.org__unit-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* also covers touch devices in landscape (iPad/iPhone, any width): a fixed-width
   hover-info panel doesn't work without a mouse, and on these overlaps both branch
   columns at once — same safe tap-to-reveal layout as narrow portrait phones */
@media (max-width: 599px), (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .org__branches {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .org__branches::before {
    display: none;
  }

  .org__info {
    display: none;
  }

  .org__group-list--logos li,
  .org__logo-link {
    flex-direction: column;
    align-items: center;
  }

  .org__unit-item {
    flex-wrap: wrap;
    justify-content: center;
  }

  .org__item-text {
    display: block;
    width: 260px;
    max-width: 100%;
    max-height: 0;
    margin-top: 0;
    margin-inline: auto;
    opacity: 0;
    overflow: hidden;
    text-align: center;
    transition: max-height 0.6s var(--ease-soft), opacity 0.7s var(--ease-soft), margin-top 0.6s var(--ease-soft);
  }

  .org__unit-item .org__item-text {
    flex-basis: 100%;
  }

  [data-org-info].is-active .org__item-text {
    max-height: 220px;
    margin-top: 0.7em;
    opacity: 1;
  }

  .org__item-text p {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0.9;
    margin: 0;
  }

  .org__item-text p + p {
    margin-top: 0.4em;
  }
}

/* ==========================================================================
   Section: Team
   ========================================================================== */

.team-slider {
  position: relative;
}

.team-slide {
  display: none;
  opacity: 1;
  transition: opacity 0.6s var(--ease-soft);
  /* the portrait's box, shared with .team below so the text can keep clear of it:
     its height, and its width from the portrait's 561:1002 shape (capped at 40vw) */
  --photo-h: clamp(360px, 48vw, 560px);
  --photo-w: min(40vw, calc(var(--photo-h) * 0.5599));
}

.team-slide.is-active {
  /* flow-root, not block: contains .team's bottom margin so it can't collapse straight
     through .team-slide and .team-slider (the photo overlay's own positioning parent)
     and out the far side, leaving a gap between the photo and the footer that follows */
  display: flow-root;
}

.team-slide.is-fading {
  opacity: 0;
}

.team {
  /* first column = the space the portrait takes up right of the page margin (its left
     edge sits at 2 × inset), so the text always starts one column-gap after the portrait;
     on screens wider than the container the container's own auto margin is subtracted */
  --photo-col: max(200px, calc(var(--header-inset) + var(--photo-w) - max(0px, (100vw - var(--container-max)) / 2)));
  display: grid;
  grid-template-columns: var(--photo-col) minmax(0, 1fr);
  column-gap: var(--space-5);
  /* the text column (heading + bio, flowing together) sits flush with the bottom of the photo */
  align-items: end;
  /* space between the text and the footer — 4x the original (independent of the space
     above the section, and of Jon's photo, which stays flush with the footer either way).
     A margin, not padding, so it doesn't shift the photo overlay's own bottom:0 reference
     point (that's measured from the section's padding edge, unaffected by this) —
     .team-slide.is-active's flow-root keeps this margin from collapsing away, so it still
     pushes the section (and the photo with it) down by exactly this amount. */
  margin-bottom: calc(var(--space-2) * 8);
}

.team--reverse {
  grid-template-columns: minmax(0, 1fr) var(--photo-col);
}

@media (min-width: 861px) {
  .team--reverse {
    padding-left: calc(var(--header-inset) + 4rem);
  }
}

.team--reverse .team__photo {
  order: 2;
}

.team--reverse .team__bio {
  order: 1;
}

.team__photo {
  height: clamp(360px, 52vw, 560px);
}

.team-photo-section {
  position: relative;
  padding-top: calc(var(--space-2) * 2);
  padding-bottom: 0;
  margin-top: -1px;
}

.site-footer {
  position: relative;
  z-index: 2;
}

.team__photo-overlay {
  position: absolute;
  bottom: 0;
  left: calc(var(--header-inset) * 2);
  z-index: 1;
  height: var(--photo-h);
  width: auto;
  max-width: 40vw;
  object-fit: contain;
  object-position: bottom left;
  pointer-events: none;
}

.team__photo-overlay--right {
  left: auto;
  right: calc(var(--header-inset) * 2);
  object-position: bottom right;
}

.team-slider__nav {
  position: absolute;
  bottom: var(--space-3);
  z-index: 3;
  border: none;
  background: none;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease-standard);
}

.team-slider__nav:hover {
  opacity: 1;
}

.team-slider__nav--prev {
  left: calc(var(--header-inset) * 1.1);
}

.team-slider__nav--next {
  right: calc(var(--header-inset) * 1.1);
}

.team__photo-placeholder {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  text-align: center;
  align-self: center;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 65%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.team__name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: var(--space-2);
}

.team__email {
  display: inline-block;
  /* same gap under the name as .team__name has under the eyebrow */
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease-standard);
}

.team__email:hover {
  opacity: 1;
}

.team__bio-text {
  /* 2pt smaller than the base 16px */
  font-size: calc(1rem - 2pt);
}

/* the heading (role/name/email) leads the flowing bio text, not a separate column;
   break-inside: avoid keeps it from splitting once the text below goes 2-column,
   and the bottom margin (~3 spaces) is its gap before the bio text continues */
.team__heading {
  break-inside: avoid;
  margin-bottom: 3ch;
}

/* margin-bottom, not margin-top: whichever paragraph starts the second column must
   have no margin of its own, or it drops below the first column's top edge. */
.team__bio-text > p:not(:last-child) {
  margin-bottom: 1.1em;
}

/* the bio is long: split it into two reading columns once there's room, and give
   its grid column more of the row's width so those columns aren't cramped */
@media (min-width: 1200px) {
  .team__bio-text {
    column-count: 2;
    /* same as the page's left/right margin */
    column-gap: var(--header-inset);
  }

  .team__bio-text p {
    break-inside: avoid;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-paper);
  color: var(--color-ink);
  font-style: normal;
  padding-block: var(--space-5);
}

.site-footer__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer__contact {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.7;
}

.site-footer__contact strong {
  display: block;
  font-weight: 500;
  margin-bottom: 0.2em;
}

.site-footer__contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.4;
}

.site-footer__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(26px, 2.2vw, 34px);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
}

.site-footer__social a {
  width: 18px;
  height: 18px;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease-standard);
}

.site-footer__social a:hover {
  opacity: 1;
}

.site-footer__bottom {
  position: relative;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(42, 43, 34, 0.12);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.site-footer__legal {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}

.site-footer__credit {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease-standard);
}

.site-footer__credit:hover {
  opacity: 1;
}

.site-footer__totop {
  display: inline-flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
}

.site-footer__totop .hero-scroll-cta__pulse,
.site-footer__totop .hero-scroll-cta__pulse::after {
  background: #000;
}

/* ==========================================================================
   Sub-brand shell pages (natuur / soorce / ruum / moove / aaqua)
   ========================================================================== */

.subbrand-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  overflow: hidden;
}

.subbrand-hero__media {
  position: absolute;
  inset: 0;
}

.subbrand-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subbrand-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(10, 12, 8, 0.55) 0%, rgba(10, 12, 8, 0.25) 22%, rgba(10, 12, 8, 0) 42%),
    linear-gradient(180deg, rgba(15, 16, 10, 0.1) 0%, rgba(15, 16, 10, 0.4) 100%);
}

.subbrand-hero__icon {
  position: relative;
  z-index: 2;
  width: clamp(80px, 9vw, 140px);
  height: clamp(80px, 9vw, 140px);
  color: var(--color-white);
}

.subbrand-hero__icon svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s var(--ease-soft);
}

.subbrand-hero__title {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  text-transform: lowercase;
}

.subbrand-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  text-align: center;
}

.subbrand-cta__media {
  position: absolute;
  inset: 0;
}

.subbrand-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subbrand-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 8, 0.35);
}

.subbrand-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  /* wide enough for the title's two lines (the line break is set in the Panel) */
  width: 100%;
  padding-inline: var(--header-inset);
}

.subbrand-cta__subtitle {
  position: relative;
  display: inline-block;
  padding-inline: 1.4em;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.85;
  transform: translateX(0);
  transition: opacity 0.18s var(--ease-standard), transform 0.3s var(--ease-soft);
}

.subbrand-cta__subtitle:hover,
.subbrand-cta__subtitle:focus-visible {
  opacity: 1;
  transform: translateX(0.4em);
}

.subbrand-cta__arrow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: left 0.5s var(--ease-soft);
}

.subbrand-cta__subtitle:hover .subbrand-cta__arrow,
.subbrand-cta__subtitle:focus-visible .subbrand-cta__arrow {
  left: calc(100% - 1em);
}

.subbrand-cta__title {
  display: block;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.46rem, 4.55vw, 2.93rem);
  text-align: center;
  white-space: pre-line;
}

.project-quote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  text-align: center;
}

.project-quote__media {
  position: absolute;
  inset: 0;
}

.project-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-quote__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 8, 0.45);
}

/* the quote is centred on the image, at the same width as the description text below */
.project-quote__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: calc(var(--header-inset) * 1.3);
}

.project-quote__text {
  grid-column: 1 / -1;
  justify-self: center;
  /* as wide as the description text below (two of three columns) */
  width: calc((200% - var(--space-4)) / 3);
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.1vw, 1.75rem);
  line-height: 1.5;
  text-wrap: balance;
}

/* on desktop the quote image is exactly as tall as the location map (16:9 at content width) */
.project-quote-wrap {
  container-type: inline-size;
}

@media (min-width: 861px) {
  .project-quote {
    aspect-ratio: auto;
    height: calc((min(100cqw, var(--container-max)) - 2 * var(--header-inset)) * 9 / 16);
  }
}

@media (max-width: 860px) {
  .project-quote {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 700px) {
  .project-quote .project-quote__text {
    width: 100%;
  }
}

.hero-scroll-cta {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-standard);
}

.hero-scroll-cta:hover {
  opacity: 1;
}

/* .reveal's own transform (translateY) otherwise overwrites the
   translateX(-50%) that centers this element, since both target the
   same `transform` property. */
.js .hero-scroll-cta.reveal {
  transform: translate(-50%, 28px);
}

.js .hero-scroll-cta.reveal.is-visible {
  transform: translate(-50%, 0);
}

.project-hero .hero-scroll-cta {
  bottom: calc(var(--header-inset) * 2);
}

.hero-scroll-cta__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white);
}

.hero-scroll-cta__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-white);
  animation: hero-scroll-cta-pulse 2.2s ease-out infinite;
}

@keyframes hero-scroll-cta-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cta__pulse::after {
    animation: none;
    display: none;
  }
}

.subbrand-body {
  padding-block: var(--space-8);
  color: var(--color-white);
}

.subbrand-body__inner {
  max-width: 46rem;
  margin: 0 auto;
}

.subbrand-body__signet {
  display: block;
  width: clamp(28px, 2.4vw, 38px);
  margin: 0 auto var(--space-5);
  opacity: 0.9;
}

.subbrand-body__text {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.7;
  scroll-margin-top: var(--space-6);
}

.subbrand-body__text p:first-child {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.85;
  margin-bottom: var(--space-4);
}

/* margin-bottom, not margin-top: in the two-column variant, whichever paragraph lands at
   the top of the second column must have no margin of its own, or it drops below the
   first column's top by that amount. The spacing then comes from the paragraph before it.
   (:not(:first-child) so this doesn't fight the eyebrow line's own, larger margin-bottom.) */
.subbrand-body__text p:not(:last-child):not(:first-child) {
  margin-bottom: 1.1em;
}

@media (min-width: 861px) {
  .subbrand-body__text--columns {
    columns: 2;
    column-gap: var(--space-6);
  }

  .subbrand-body__text--columns p:first-child {
    column-span: all;
  }

  /* a paragraph moves whole to the next column rather than splitting mid-sentence —
     otherwise the second column can start on a line fragment, not flush with the first */
  .subbrand-body__text--columns p {
    break-inside: avoid;
  }
}

.subbrand-body__quote {
  max-width: 30rem;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  opacity: 0.85;
}

.subbrand-body__placeholder {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ==========================================================================
   Generic default page (Über uns, Leistungen, Team, muulus.group, muulus.meet)
   ========================================================================== */

.page-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  background: var(--color-spruce-green);
  color: var(--color-white);
  padding: var(--header-inset);
}

.page-hero__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: lowercase;
  padding-bottom: var(--space-3);
}

.page-body {
  padding-block: var(--space-7);
}

.page-body__inner {
  max-width: 42rem;
  margin: 0 auto;
}

.page-body__inner p + p {
  margin-top: 1.1em;
}

/* ==========================================================================
   Legal pages (Impressum / AGB / Datenschutz)
   ========================================================================== */

.legal {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--space-7);
}

.legal__layout {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--space-7);
  align-items: start;
}

.legal__sidebar {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 860px) {
  .legal__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .legal__sidebar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.legal__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.legal__nav a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.18s var(--ease-standard), transform 0.28s var(--ease-soft);
}

.legal__nav a:hover,
.legal__nav a:focus-visible {
  opacity: 0.7;
  transform: translateX(0.9em);
}

.legal__nav a[aria-current="page"] {
  opacity: 1;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transform: translateX(0.9em);
}

.legal__contact-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: var(--space-4);
  margin-bottom: 0.3em;
}

.legal__contact-label:first-child {
  margin-top: 0;
}

.legal__contact a,
.legal__contact p {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.6;
}

.legal__body {
  max-width: 42rem;
}

.legal__updated {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: var(--space-6);
}

.legal__updated span {
  display: block;
  margin-bottom: 0.4em;
}

.legal__text h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.3rem;
  margin-top: var(--space-6);
  margin-bottom: 0.6em;
}

.legal__text h3:first-child {
  margin-top: 0;
}

.legal__text p {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.75;
}

.legal__text p + p {
  margin-top: 1em;
}

.legal__text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.18s var(--ease-standard);
}

.legal__text a:hover {
  opacity: 0.7;
}

.legal__text strong {
  font-weight: 600;
}

.legal__text ul {
  margin-top: 0.8em;
  padding-left: 1.2em;
  list-style: disc;
}

.legal__text li {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.7;
}

.legal__text li + li {
  margin-top: 0.4em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  :root {
    --header-inset: clamp(4.32rem, 10.36vw, 9.48rem);
    --mobile-menu-indent: clamp(36px, 3.6vw, 52px);
  }

  .nav-primary__sublist--icons {
    display: none;
  }

  .site-header {
    align-items: center;
  }

  html .sound-control {
    top: auto;
    left: calc(var(--header-inset) * 1.1);
    bottom: calc(var(--header-inset) * 1.1);
  }

  .site-header__brand {
    position: absolute;
    top: calc(var(--header-inset) * 1.1);
    left: calc(var(--header-inset) * 1.1);
    width: auto;
  }

  .site-header__brand-signet {
    display: none;
  }

  .site-header__brand-wordmark {
    display: block;
    height: 22px;
  }

  .hero__wordmark {
    display: none;
  }

  .hero__signet {
    display: block;
    width: clamp(63px, 22.4vw, 119px);
  }

  .nav-primary,
  .icon-rail {
    display: none;
  }

  .site-header.is-open .nav-primary,
  .site-header.is-open .icon-rail {
    display: flex;
  }

  /* The home page's splash-synced fade-in delay makes no sense here: these
     only become visible once the menu is tapped open, at an arbitrary later
     time, so any pending reveal delay just leaves the panel blank. */
  .nav-primary.reveal,
  .icon-rail.reveal {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }

  .site-header.is-open {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    color: var(--color-ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(var(--space-4) * 1.05);
    overflow-y: auto;
    animation: mobileMenuSlideIn 0.5s var(--ease-soft) forwards;
  }

  .site-header.is-open.is-closing {
    animation: mobileMenuSlideOut 0.5s var(--ease-soft) forwards;
  }

  @keyframes mobileMenuSlideIn {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes mobileMenuSlideOut {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }

  html.nav-open-lock {
    overflow: hidden;
  }

  .site-header.is-open .site-header__left {
    display: contents;
  }

  .site-header.is-open .icon-rail {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    --rail-gap: calc(var(--space-3) * 1.0815);
    gap: var(--rail-gap);
    padding-block: 0;
    margin-left: var(--mobile-menu-indent);
    margin-top: 95px;
  }

  .site-header.is-open .nav-primary {
    order: 2;
    align-self: flex-start;
    margin-left: var(--mobile-menu-indent);
    width: calc(100% - var(--mobile-menu-indent) - calc(var(--header-inset) * 1.1));
  }

  .site-header.is-open .nav-primary__list {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: calc(var(--space-3) * 2.55);
    row-gap: 0.7em;
  }

  .site-header.is-open .nav-primary__list li {
    min-width: 0;
  }

  .site-header.is-open .nav-primary__list a {
    white-space: nowrap;
  }

  .site-header.is-open .icon-rail a {
    display: flex;
    align-items: center;
    gap: 0.945rem;
    width: auto;
    height: auto;
  }

  .site-header.is-open .icon-rail a svg {
    width: 23.1px;
    height: 23.1px;
  }

  .site-header.is-open .icon-rail__label {
    position: static;
    order: 2;
    opacity: 1;
    filter: none;
    transform: none;
    font-size: 1.2075rem;
    color: var(--color-ink);
  }

  .site-header.is-open .icon-rail a svg {
    order: 1;
  }

  /* the divider element itself is just a zero-size spacer: its two flex gaps double the
     space between "uunits" and the sub-brands, where the "/" below is drawn */
  .site-header.is-open .icon-rail__divider {
    display: block;
    height: 0;
  }

  /* a long "/" from the left edge (soorce's icon) up to the end of "uunits": the box is as
     wide as the uunits row, and spans the space down to the first sub-brand */
  .site-header.is-open .icon-rail__item--uunits::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    width: 100%;
    height: calc(var(--rail-gap) * 2 - 0.9rem);
    pointer-events: none;
    opacity: 0.45;
    background: linear-gradient(
      to top left,
      transparent calc(50% - 1px),
      currentColor 50%,
      transparent calc(50% + 1px)
    );
  }

  /* natural DOM order now used here too (natuur, soorce, ruum, moove, aaqua) — matches
     the desktop icon rail; Lara asked (2026-09-28) for the same order everywhere, this
     used to deliberately swap natuur/soorce so the reveal-in stagger read soorce-first */
  .site-header.is-open .nav-primary__list a {
    font-size: 0.63rem;
    letter-spacing: 0.22em;
  }

  .mobile-menu-contact {
    display: none;
  }

  .site-header.is-open .mobile-menu-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6em;
    order: 3;
    align-self: flex-start;
    margin-left: var(--mobile-menu-indent);
    margin-bottom: calc(var(--header-inset) * 1.1);
  }

  .site-header.is-open .mobile-menu-contact a {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--color-ink);
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: absolute;
    top: calc(var(--header-inset) * 1.1 - 8px);
    right: calc(var(--header-inset) * 1.1 - 8px);
  }

  .site-header.is-open .nav-toggle {
    width: auto;
    height: auto;
    top: calc(var(--header-inset) * 1.1);
    right: calc(var(--header-inset) * 1.1);
  }

  .nav-toggle__icon {
    display: block;
    width: 29.48px;
    height: 29.48px;
    transform: translateX(5%);
  }

  .site-header.is-open .nav-toggle__icon {
    display: none;
  }

  .nav-toggle__close {
    display: none;
  }

  .site-header.is-open .nav-toggle__close {
    display: flex;
    align-items: center;
    gap: calc(var(--space-3) * 0.93);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .site-header.is-open .nav-toggle__close .hero-scroll-cta__pulse,
  .site-header.is-open .nav-toggle__close .hero-scroll-cta__pulse::after {
    background: var(--color-bark-red);
  }

  .site-header.is-open .nav-toggle__close .hero-scroll-cta__pulse {
    width: 8.4px;
    height: 8.4px;
  }

  .nav-toggle__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .team {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
  }

  .team--reverse .team__photo,
  .team--reverse .team__bio {
    order: initial;
  }

  .team-photo-section {
    padding-top: var(--space-7);
    padding-bottom: 0;
  }

  .team__photo {
    display: none;
  }

  .team__photo-overlay {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: var(--space-4);
    display: block;
    height: auto;
    width: 70%;
    max-width: 70%;
    object-position: bottom left;
  }

  .team__photo-overlay--right {
    margin-left: 20%;
  }

  .mission__column,
  .section__signet,
  .philosophie__body {
    margin-right: auto;
  }


  .site-footer__top {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
    padding-top: var(--space-6);
  }

  .site-footer__logo {
    position: static;
    order: -1;
    transform: none;
    margin-bottom: var(--space-2);
  }

  .site-footer__social {
    justify-content: center;
  }
}

@media (max-width: 860px) and (orientation: landscape) {
  .hero__signet {
    width: clamp(40px, 11vw, 70px);
  }
}

@media (min-width: 600px) and (max-width: 860px) {
  :root {
    --footer-col1: clamp(70px, 9vw, 120px);
  }

  .team__photo-overlay {
    width: 42%;
    max-width: 42%;
  }

  .subbrand-body {
    padding-top: calc(var(--space-8) * 0.75);
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: var(--footer-col1) 1fr auto;
    align-items: start;
    text-align: left;
    gap: var(--space-4);
    padding-top: var(--space-6);
  }

  .site-footer__logo {
    position: static;
    grid-column: 1;
    grid-row: 1;
    transform: none;
    margin-bottom: 0;
  }

  .site-footer__contact {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .site-footer__social {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-start;
    align-self: end;
  }

  .site-footer__bottom {
    display: grid;
    grid-template-columns: var(--footer-col1) 1fr auto;
    justify-content: normal;
    text-align: left;
  }

  .site-footer__credit {
    grid-column: 1;
    position: static;
  }

  .site-footer__legal {
    grid-column: 2;
    justify-content: center;
  }
}

/* ==========================================================================
   ruum — project overview page
   ========================================================================== */

.ruum-haltung__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding-inline: calc(var(--header-inset) * 3);
}

.ruum-haltung__column {
  /* same width as the intro text on every other unit sub-page (.subbrand-body__inner),
     whether this text ends up in one column or two (see .ruum-haltung__text below) */
  max-width: 46rem;
  margin: 0 auto;
}

.ruum-haltung__column .eyebrow {
  text-align: center;
}

.ruum-haltung__text {
  margin-top: var(--space-4);
  column-count: 2;
  column-gap: var(--space-5);
  text-align: left;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.7;
}

.ruum-haltung__text p {
  break-inside: avoid;
}

.ruum-haltung__text p + p {
  margin-top: 1.5em;
}

@media (max-width: 860px) {
  .ruum-haltung__text {
    column-count: 1;
  }

  .ruum-haltung__layout {
    padding-inline: var(--header-inset);
  }
}

.sustainability-diagram {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.sustainability-diagram__circles {
  position: relative;
  width: clamp(260px, 30vw, 380px);
  height: clamp(260px, 30vw, 380px);
}

.sustainability-diagram__circle {
  position: absolute;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  color: var(--color-white);
}

.sustainability-diagram__circles:hover .sustainability-diagram__center {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(0.9);
}

.sustainability-diagram__circles:hover .sustainability-diagram__ring,
.sustainability-diagram__circles:hover .sustainability-diagram__label,
.sustainability-diagram__circles:hover .sustainability-diagram__dot {
  opacity: 0.55;
}

.sustainability-diagram__circle:hover .sustainability-diagram__label,
.sustainability-diagram__circle:hover .sustainability-diagram__dot,
.sustainability-diagram__circle:active .sustainability-diagram__label,
.sustainability-diagram__circle:active .sustainability-diagram__dot {
  opacity: 1;
}

.sustainability-diagram__circle--planet {
  top: 0;
  left: 17%;
}

.sustainability-diagram__circle--people {
  top: 32%;
  left: 0;
}

.sustainability-diagram__circle--prosperity {
  top: 32%;
  right: 0;
}

.sustainability-diagram__ring {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: none;
  transform-origin: center;
  transform: scale(1.37);
  transition: transform 1.2s var(--ease-soft);
}

.sustainability-diagram__circles:hover .sustainability-diagram__ring {
  transform: scale(1.21);
}

.sustainability-diagram__circle:hover .sustainability-diagram__ring {
  transform: scale(1.63);
}

.sustainability-diagram__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.sustainability-diagram__circle:hover .sustainability-diagram__orbit {
  animation: sustainability-diagram-spin 3.5s linear infinite;
}

@keyframes sustainability-diagram-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sustainability-diagram__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-white);
}

.sustainability-diagram__circle--planet .sustainability-diagram__dot {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-50% + 0.5px));
}

.sustainability-diagram__circle--people .sustainability-diagram__dot {
  left: 15%;
  top: 85%;
  transform: translate(calc(-50% + 0.35px), calc(-50% - 0.35px));
}

.sustainability-diagram__circle--prosperity .sustainability-diagram__dot {
  left: 85%;
  top: 85%;
  transform: translate(calc(-50% - 0.35px), calc(-50% - 0.35px));
}

.sustainability-diagram__label {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  transition: transform 1.2s var(--ease-soft);
}

.sustainability-diagram__circle--planet .sustainability-diagram__label {
  top: 12%;
  left: 50%;
}

.sustainability-diagram__circle--people .sustainability-diagram__label {
  top: 81%;
  left: 17%;
}

.sustainability-diagram__circle--prosperity .sustainability-diagram__label {
  top: 81%;
  left: 83%;
}

.sustainability-diagram__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--color-white);
  pointer-events: none;
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
}

/* project preview */

.ruum-project__heading {
  text-align: center;
  margin-bottom: var(--space-5);
}

.ruum-project__number {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  margin-bottom: 0.4em;
}

.ruum-project__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  text-transform: lowercase;
  transition: opacity 0.18s var(--ease-standard);
}

.ruum-project__title:hover {
  opacity: 0.75;
}

.ruum-project__gallery {
  position: relative;
  overflow: hidden;
}

.ruum-project__track {
  display: flex;
  transition: transform 0.5s var(--ease-soft);
}

.ruum-project__track img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ruum-project__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 21, 14, 0.45);
  color: var(--color-white);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s var(--ease-standard);
}

.ruum-project__nav:hover {
  background: rgba(20, 21, 14, 0.7);
}

.ruum-project__nav--prev {
  left: var(--space-3);
}

.ruum-project__nav--next {
  right: var(--space-3);
}

.ruum-project__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.85;
}

.ruum-project__meta span {
  max-width: 16rem;
}

/* featured project spotlight */

.ruum-featured {
  /* the title's size also drives the gaps under it (see the tags and button below) */
  --featured-title-fs: clamp(2rem, 4.2vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-6);
  align-items: stretch;
  margin-bottom: var(--space-8);
}

.ruum-featured:last-child {
  margin-bottom: 0;
}

/* equal space above and below the project preview */
.ruum-projects {
  padding-block: calc(var(--space-6) * 3);
}

.ruum-featured--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ruum-featured--reverse .ruum-featured__text {
  order: 2;
}

.ruum-featured--reverse .ruum-featured__media {
  order: 1;
}

.ruum-featured__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ruum-featured__number {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

.ruum-featured__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: var(--featured-title-fs);
  text-transform: lowercase;
  line-height: 1.05;
}

.ruum-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ruum-featured__tag {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  white-space: nowrap;
}

.ruum-featured__number--top,
.ruum-featured__title--top,
.ruum-featured__tags--top {
  display: none;
}

.ruum-featured__number--inline,
.ruum-featured__title--inline,
.ruum-featured__tags--inline {
  display: block;
}

.ruum-featured__tags--inline {
  display: flex;
  /* lines up the gap under the title with the one between eyebrow and title
     (measured between the actual letter shapes, not the line boxes) */
  margin-top: calc(var(--featured-title-fs) * 0.2365);
}

/* same base font as the home page's intro text (Introtext) — inherits the body's
   Fraunces serif, no explicit font-family — muted the same way the other elements
   here read grey (an opacity applied to the ambient ink color, not a literal grey) */
.ruum-featured__kurzinfo {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.4;
  opacity: 0.7;
  /* same gap as the other elements in this column */
  margin-top: calc(var(--featured-title-fs) * 0.2365);
}

.ruum-featured__kurzinfo p {
  margin: 0;
}

.ruum-featured__row {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-2);
}

.ruum-featured__thumb {
  flex: 0 0 clamp(162px, 21.6vw, 252px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.ruum-featured__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s var(--ease-standard), transform 0.6s var(--ease-soft);
}

/* project previews shrink 10% on hover; the .is-visible selectors outrank the reveal-in transform */
.ruum-featured__thumb:hover img,
.js .ruum-featured__thumb.is-visible:hover img {
  transform: scale(0.9);
  transition: transform 0.8s var(--ease-soft);
}

.ruum-featured__row-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: space-between;
}

.ruum-featured__desc {
  font-family: "Georgia Pro", Georgia, serif;
  font-style: normal;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  max-width: 22rem;
}

.ruum-featured__desc p {
  margin: 0;
}

.ruum-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  /* 3× the standard gap between the other elements in this column */
  margin-top: calc(var(--featured-title-fs) * 0.2365 * 3);
  border: 1px solid rgba(75, 76, 62, 0.5);
  padding: 0.7em 1.1em;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}

.ruum-featured__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  font-size: 0.85em;
  transition: transform 0.3s var(--ease-standard);
}

.ruum-featured__cta:hover {
  background: var(--color-spruce-green);
  color: var(--color-white);
  border-color: var(--color-spruce-green);
}

.ruum-featured__cta:hover .ruum-featured__cta-icon {
  transform: translate(2px, -2px);
}

/* the project overview page isn't live yet: the button sits there, greyed out, not clickable */
.ruum-featured__cta.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.ruum-featured__media {
  display: block;
  width: 100%;
  margin-inline: auto;
  align-self: start;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ruum-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-soft);
}

.ruum-featured__media:hover img,
.js .ruum-featured__media.is-visible:hover img {
  transform: scale(0.9);
  transition: transform 0.8s var(--ease-soft);
}

/* Desktop with a mouse only (iPad and phones keep the plain 4:3 photo): the preview is 16:9,
   the width it would have if the 4:3 box grew toward the text at the same height (width 4/3,
   pulled back by a third of the column), so its outer edge and its height stay put. On hover
   the photo shrinks to 90% (the base rule above). */
@media (min-width: 861px) and (hover: hover) {
  /* the text column never gets narrower than (width + 836px) / 4: that keeps the three
     bracket tags on one line and leaves 24px between them and the wider photo
     (identical to 0.85fr from about 1440px up) */
  .ruum-featured {
    grid-template-columns: minmax(calc((100% + 836px) / 4), 0.85fr) minmax(0, 1.15fr);
  }

  .ruum-featured--reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(calc((100% + 836px) / 4), 0.85fr);
  }

  .ruum-featured__media {
    width: calc(100% * 4 / 3);
    margin-inline: calc(-100% / 3) 0;
    aspect-ratio: 16 / 9;
  }

  .ruum-featured--reverse .ruum-featured__media {
    margin-inline: 0 calc(-100% / 3);
  }
}

@media (max-width: 860px) {
  .ruum-featured,
  .ruum-featured--reverse {
    grid-template-columns: 1fr;
  }

  .ruum-featured__media,
  .ruum-featured--reverse .ruum-featured__media {
    order: -1;
    aspect-ratio: 4 / 3;
  }

  .ruum-featured--reverse .ruum-featured__text {
    order: 2;
  }

  /* the button sits flush with the photo's right edge */
  .ruum-featured__cta {
    align-self: flex-end;
  }
}

@media (max-width: 599px) {
  .ruum-featured {
    margin-bottom: var(--space-6);
    gap: var(--header-inset);
  }

  .ruum-featured__text {
    gap: var(--space-3);
  }

  .ruum-featured {
    --featured-title-fs: clamp(1.5rem, 7vw, 2.1rem);
  }

  /* narrower gap and slightly smaller type — keeps all three bracket tags on one line */
  .ruum-featured__tags {
    gap: var(--space-2);
  }

  .ruum-featured__tag {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .ruum-featured__row {
    flex-direction: row;
    align-items: flex-start;
    margin-top: 0;
    gap: var(--space-3);
  }

  .ruum-featured__row-body {
    gap: 0.6em;
  }

  /* half of the 192px above and below the project preview */
  .ruum-projects {
    padding-block: calc(var(--space-6) * 1.5);
  }

  .ruum-featured__thumb {
    flex-basis: auto;
    width: 34%;
  }
}

/* ==========================================================================
   project — individual project detail page
   ========================================================================== */

.project-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--header-inset);
  padding-bottom: calc(var(--header-inset) * 2);
  overflow: hidden;
}

.project-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.project-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 21, 14, 0.5), rgba(20, 21, 14, 0) 42%),
    linear-gradient(to top, rgba(20, 21, 14, 0.55), rgba(20, 21, 14, 0) 45%);
}

.project-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-hero__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.project-hero__caption {
  position: relative;
}

.project-hero__stat {
  display: flex;
  align-items: flex-start;
  gap: 0.15em;
  white-space: nowrap;
  margin-right: calc(var(--header-inset) * 4);
}

.project-hero__stat-value {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.project-hero__stat-unit {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  margin-top: 0.3em;
}

.project-hero__number {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.68rem;
  opacity: 0.85;
  margin-bottom: 0.4em;
}

.project-hero__title,
.project-einheiten__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: lowercase;
}

.project-einheiten {
  padding-bottom: calc(var(--space-6) * 3);
}

.project-meta-section {
  padding-top: 10vh;
  padding-bottom: var(--space-6);
}

/* the map below starts half as far from the description as before */
.project-meta-section + .project-location {
  padding-top: var(--space-6);
}

.project-meta-section .container {
  padding-inline: calc(var(--header-inset) * 1.3);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.project-meta__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}

@media (max-width: 700px) {
  .project-meta {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  .project-meta__item {
    flex: 1 1 0;
    min-width: 0;
  }
}

.project-meta__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.project-meta__value {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  max-width: 18rem;
}

.project-description-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.project-description__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.3rem;
}

.project-description {
  grid-column: 2 / span 2;
  text-align: left;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
}


@media (max-width: 700px) {
  .project-description-layout {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .project-description {
    grid-column: 1;
  }
}

/* space above the signet and below the text: double what it was briefly (twice the 4rem) */
.project-konzept {
  padding-block: var(--space-8);
}

.project-konzept__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

/* the block is centred on the page, two thirds of the content width (same as the quote and description) */
@media (min-width: 701px) {
  .project-konzept__text {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((200% - var(--space-4)) / 3);
  }
}

.project-konzept__sketch img {
  width: 100%;
  opacity: 0.9;
}

.project-konzept__text {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  /* title: same size and type as the quote below "Jetzt." on the home page */
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
}

/* signet, label and title are centred over the text; the text itself stays left-aligned, like the muutus intro */
.project-konzept__text > p {
  text-align: center;
}

/* the "t" signet above the label: text colour, 70% of the signet size in the muutus intro */
.project-konzept__signet {
  display: block;
  margin-inline: auto;
  width: calc(clamp(32px, 2.7vw, 43px) * 0.7);
  aspect-ratio: 245 / 594;
  margin-bottom: var(--space-4);
  background-color: currentColor;
  -webkit-mask: url("../img/logo/signet-black.png") center / contain no-repeat;
  mask: url("../img/logo/signet-black.png") center / contain no-repeat;
  opacity: 0.9;
}

/* "Konzept" label: same type and spacing as the "Jetzt." label */
.project-konzept__text .project-konzept__eyebrow {
  margin-bottom: var(--space-3);
  line-height: 1.65;
}

.project-konzept__text .project-konzept__eyebrow + p {
  margin-top: 0;
}

.project-konzept__text p + p {
  margin-top: 0.6em;
}

/* intro text under the title: same body type as the "Jetzt." text on the home page */
.project-konzept__subtext {
  margin-top: var(--space-4);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.75;
}

.project-konzept__text .project-konzept__subtext p + p {
  margin-top: 1em;
}

@media (max-width: 700px) {
  .project-konzept__layout {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}


.project-visuals {
  padding-block: 0;
}

/* the visualisations reuse the neighbourhood scroller (.project-location__*): same size, spacing and arrows */

.project-carousel {
  position: relative;
  width: calc(min(100%, var(--container-max)) - 2 * var(--header-inset));
  margin-inline: auto;
  overflow: hidden;
}

.project-carousel__track {
  display: flex;
}

.project-carousel__item {
  flex: 0 0 33.3333%;
  aspect-ratio: 3 / 4;
}

.project-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: var(--color-white);
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
}

.project-carousel__nav:hover {
  background: rgba(20, 21, 14, 0.7);
  border-color: var(--color-white);
}

.project-carousel__nav--prev {
  left: clamp(8px, 3vw, 32px);
}

.project-carousel__nav--next {
  right: clamp(8px, 3vw, 32px);
}

@media (max-width: 860px) {
  .project-carousel__item {
    flex-basis: 100%;
  }
}

.plans-carousel {
  padding-block: var(--space-6);
  overflow: hidden;
}

.plans-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--header-inset);
  margin-bottom: var(--space-7);
}

.plans-carousel__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.plans-carousel__current {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: normal;
  color: var(--color-spruce-green);
}

.plans-carousel__stage {
  position: relative;
  height: clamp(300px, 40vw, 546px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans-carousel__slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(286px, 39vw, 546px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transform: translate(-50%, -50%) translateX(var(--plans-x, 0)) scale(var(--plans-scale, 1));
  opacity: var(--plans-opacity, 1);
  transition: transform 0.8s var(--ease-soft), opacity 0.8s var(--ease-soft);
  pointer-events: none;
}

.plans-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-white);
  padding: var(--space-4);
  display: block;
}

.plans-carousel .plans-carousel__stage {
  height: auto;
  aspect-ratio: 5 / 3;
}

.plans-carousel .plans-carousel__slide {
  width: 70%;
  aspect-ratio: 4 / 3;
}

@media (max-width: 860px) {
  .plans-carousel .plans-carousel__stage {
    aspect-ratio: 4 / 3;
  }

  .plans-carousel .plans-carousel__slide {
    width: 100%;
  }

  .plans-carousel .plans-carousel__slide img {
    padding: 0;
  }
}

.plans-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  border: 1px solid rgba(42, 43, 34, 0.35);
  background: none;
  color: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
}

.plans-carousel__nav--prev {
  left: clamp(8px, 4vw, 48px);
}

.plans-carousel__nav--next {
  right: clamp(8px, 4vw, 48px);
}

.plans-carousel__nav svg {
  width: 40%;
  height: 40%;
}

.plans-carousel__nav:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

@media (max-width: 860px) {
  .plans-carousel__slide {
    width: clamp(150px, 46vw, 240px);
  }

  .plans-carousel__nav {
    width: 40px;
    height: 40px;
  }
}

.project-detail-text__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.project-detail-text .project-detail-text__sketch {
  width: 100%;
  margin-inline: auto;
}

.project-detail-text__sketch > img {
  width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.compare-slider {
  position: relative;
  width: 100%;
  /* three 3:4 gallery images side by side have exactly this proportion (9:4) */
  aspect-ratio: 9 / 4;
  overflow: hidden;
  border-radius: 2px;
  user-select: none;
  touch-action: none;
}

.compare-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.compare-slider__img--after {
  z-index: 1;
}

.compare-slider__img--before {
  z-index: 2;
  opacity: 0.8;
  clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0);
}

.compare-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal, 50%);
  transform: translateX(-50%);
  width: 2px;
  background: var(--color-white);
  z-index: 3;
  pointer-events: none;
}

.compare-slider__handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-spruce-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.compare-slider__handle-grip svg {
  width: 1.2rem;
  height: 1.2rem;
}

.compare-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.compare-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
}

.compare-slider__range::-moz-range-thumb {
  width: 2px;
  height: 100%;
  border: none;
  background: transparent;
}

.project-detail-text__body {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
}

.project-detail-text__body .project-detail-text__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.65;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.75;
}

.project-detail-text__body p {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
}

@media (max-width: 700px) {
  .project-detail-text__body {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }
}

@media (max-width: 700px) {
  .project-detail-text__body p + p {
    margin-top: 1.1em;
  }
}

@media (max-width: 860px) {
  .project-detail-text__layout {
    grid-template-columns: 1fr;
  }

  .compare-slider {
    aspect-ratio: 9 / 5;
  }
}

/* one even spacing around the slider: above, left, right, between slider and text, and below the text.
   The section is a size container so the gap can follow the side margin, even on screens wider than the page. */
.project-detail-text {
  container-type: inline-size;
  padding-block: 0;
}

.project-detail-text > .container {
  --detail-inset: var(--header-inset);
  --detail-gap: calc((100cqw - min(100cqw, var(--container-max))) / 2 + var(--detail-inset));
  padding-block: var(--detail-gap) calc(var(--detail-gap) * 2);
  gap: var(--detail-gap);
}

@media (min-width: 861px) {
  .project-detail-text > .container {
    --detail-inset: calc(var(--header-inset) * 2);
    /* the slider is 20% smaller than the full content width; the spacing grows to fill the difference */
    --detail-width: calc((min(100cqw, var(--container-max)) - 2 * var(--detail-inset)) * 0.8);
    --detail-gap: calc((100cqw - var(--detail-width)) / 2);
    max-width: none;
    padding-inline: var(--detail-gap);
    /* above the slider: half the side margin; between slider and text: a third; below the text: two thirds */
    padding-block: calc(var(--detail-gap) / 2) calc(var(--detail-gap) * 2 / 3);
    gap: calc(var(--detail-gap) / 3);
  }
}

@media (max-width: 860px) {
  .project-detail-row {
    grid-template-columns: 1fr;
  }
}

.project-einheiten__layout {
  display: block;
}

.project-einheiten__diagram img {
  width: 100%;
  opacity: 0.9;
}

.project-einheiten__table-wrap {
  overflow-x: auto;
}

.project-einheiten__scrubber {
  display: none;
  padding-top: var(--space-3);
}

.project-einheiten__scrubber.is-visible {
  display: flex;
  justify-content: center;
}

.project-einheiten__scrubber-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 16rem;
  height: 1px;
  background: rgba(42, 43, 34, 0.25);
  border-radius: 1px;
  outline: none;
  touch-action: none;
  cursor: ew-resize;
}

.project-einheiten__scrubber-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ink);
  cursor: pointer;
}

.project-einheiten__scrubber-input::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  background: var(--color-ink);
  cursor: pointer;
}

.project-einheiten__row-download {
  width: 1%;
  padding-inline: 0.6em;
}

.project-einheiten__row-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(42, 43, 34, 0.35);
  color: currentColor;
  transition: background 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
}

.project-einheiten__row-download svg {
  width: 45%;
  height: 45%;
}

.project-einheiten__row-download-link:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-spruce-green);
}

.project-einheiten__table tbody tr:hover .project-einheiten__row-download-link {
  border-color: rgba(255, 255, 255, 0.6);
}

.project-einheiten__row-download-link.is-disabled {
  border-color: rgba(42, 43, 34, 0.15);
  color: rgba(42, 43, 34, 0.3);
  cursor: not-allowed;
  pointer-events: none;
}

.project-einheiten__table tbody tr:hover .project-einheiten__row-download-link.is-disabled {
  background: none;
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.35);
}

.project-einheiten__stage {
  position: relative;
  margin-bottom: var(--space-6);
}

/* "Unsere Wohnungen": same type as the page title; above the plan on smaller screens,
   left of it and vertically centred on it on wide screens */
.project-einheiten__title {
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  text-transform: none;
}

@media (min-width: 1200px) {
  .project-einheiten__stage--visual .project-einheiten__heading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  .project-einheiten__stage--visual .project-einheiten__title {
    margin: 0;
  }
}

.project-einheiten__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

@media (min-width: 861px) {
  /* the plan sits on the right; the drawing's own white margin plus 1rem gives twice the space to the row's end */
  .project-einheiten__visual {
    width: 61.2%;
    margin-left: auto;
    margin-right: 1rem;
  }

  .project-einheiten__visual-img {
    object-position: right center;
  }
}

.project-einheiten__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}

.project-einheiten__visual-img.is-active {
  opacity: 1;
}

.project-einheiten__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  white-space: nowrap;
}

.project-einheiten__table th,
.project-einheiten__table td {
  padding: 0.6em 1em;
  text-align: left;
  border-bottom: 1px solid rgba(42, 43, 34, 0.18);
}

.project-einheiten__table th {
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.project-einheiten__table tbody tr {
  transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}

.project-einheiten__table tbody tr:hover {
  background: var(--color-spruce-green);
  color: var(--color-white);
}

.project-einheiten__table tbody tr:hover td {
  border-color: rgba(255, 255, 255, 0.25);
}

.project-einheiten__status {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
}

.project-einheiten__status--verfuegbar {
  background: var(--color-spruce-green);
}

.project-einheiten__status--reserviert {
  background: var(--color-golden-light);
}

.project-einheiten__status--verkauft {
  background: var(--color-bark-red);
}


/* Gentle hover on project pages: images dim by 20% */
.page-project .project-carousel__item img,
.page-project .plans-carousel__slide img,
.page-project .project-location__photo img {
  transition: opacity 0.35s var(--ease-soft);
}

.page-project .project-carousel__item img:hover,
.page-project .plans-carousel__slide img:hover,
.page-project .project-location__photo img:hover,
.page-project .project-einheiten__visual-img.is-active:hover,
.page-project .project-quote__media.is-visible:hover img,
.page-project .project-location__map.is-visible:hover img {
  opacity: 0.8;
  transition-delay: 0ms;
}

.page-project .plans-carousel__slide img {
  pointer-events: auto;
}

.project-location {
  padding-bottom: 0;
}

.project-location__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.project-location__map {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-location__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: 999px;
  padding: 0.95em 2.2em;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}

.project-location__btn:hover,
.project-location__btn:focus-visible {
  background-color: transparent;
  color: var(--color-white);
}

.project-location__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-location__grid {
  --loc-gap: var(--space-4);
  display: flex;
  gap: var(--loc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.project-location__grid::-webkit-scrollbar {
  display: none;
}

.project-location__item {
  flex: 0 0 calc((100% - 2 * var(--loc-gap)) / 3);
  scroll-snap-align: start;
  min-width: 0;
}

.project-location__scroller {
  position: relative;
  container-type: inline-size;
}

/* sits left and right, vertically centred on the photo row (photo height = item width * 2/3) */
.project-location__nav {
  position: absolute;
  top: calc((100cqw - 2 * var(--space-4)) / 3 / 3);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-inline: var(--space-2);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.project-location__nav[hidden] {
  display: none;
}

.project-location__arrow {
  width: 31px;
  height: 31px;
  padding: 7px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-white);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard);
}

.project-location__arrow:hover:not(:disabled),
.project-location__arrow:focus-visible:not(:disabled) {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.project-location__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.project-location__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* One arrow design for every carousel on the project page:
   same size, same inset, vertically centred, same hover. */
.page-project .project-carousel__nav,
.page-project .plans-carousel__nav,
.page-project .project-location__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 7px;
  font-size: 0;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard);
}

.page-project .project-carousel__nav:hover,
.page-project .project-carousel__nav:focus-visible,
.page-project .plans-carousel__nav:hover,
.page-project .plans-carousel__nav:focus-visible,
.page-project .project-location__arrow:hover:not(:disabled),
.page-project .project-location__arrow:focus-visible:not(:disabled) {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.page-project .project-carousel__nav svg,
.page-project .plans-carousel__nav svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-project .project-carousel__nav--prev,
.page-project .plans-carousel__nav--prev {
  left: var(--space-2);
}

.page-project .project-carousel__nav--next,
.page-project .plans-carousel__nav--next {
  right: var(--space-2);
}

.project-location__photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.project-location__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-location__caption {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.8;
}

@media (max-width: 860px) {
  .project-location__item {
    flex-basis: 78%;
  }

  .project-location__nav {
    top: calc(100cqw * 0.78 / 3);
  }
}

.project-nav-section {
  padding-block: calc(var(--space-6) * 2);
}

.project-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.project-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  max-width: 16rem;
  transition: opacity 0.18s var(--ease-standard);
}

.project-nav__link:hover {
  opacity: 0.75;
}

.project-nav__link--next {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.project-nav__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.project-nav__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  text-transform: lowercase;
}

@media (max-width: 860px) {
  .project-nav-section .container {
    padding-inline: calc(var(--header-inset) * 0.5);
  }

  .project-nav {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .project-nav__link {
    align-items: flex-start;
    text-align: left;
    max-width: 8.5rem;
  }

  .project-nav__link--next {
    align-items: flex-end;
    text-align: right;
    max-width: 8.5rem;
  }
}

/* project actions / dossier request */

.project-actions {
  display: flex;
  justify-content: center;
}

.project-actions + .project-nav {
  margin-top: var(--space-6);
}

.project-actions__btn {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.95em 2.2em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}

.project-actions__btn:hover {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.dossier-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft), visibility 0s linear 0.3s;
}

.dossier-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s var(--ease-soft);
}

.dossier-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 43, 34, 0.55);
  backdrop-filter: blur(4px);
}

.dossier-modal__panel {
  position: relative;
  width: min(92%, 26rem);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: 4px;
  padding: var(--space-5) var(--space-4) var(--space-4);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.35s var(--ease-soft);
}

.dossier-modal.is-open .dossier-modal__panel {
  transform: translateY(0) scale(1);
}

.dossier-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-ink);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.18s var(--ease-standard);
}

.dossier-modal__close:hover {
  opacity: 1;
}

.dossier-modal__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dossier-modal__eyebrow {
  margin-bottom: 0.5em;
}

.dossier-modal__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: 0.6em;
}

.dossier-modal__intro {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: var(--space-4);
}

.dossier-form__field {
  margin-bottom: var(--space-3);
}

.dossier-form.is-submitted .dossier-form__field,
.dossier-form.is-submitted .dossier-form__honey,
.dossier-form.is-submitted .dossier-form__submit {
  display: none;
}

.dossier-form__field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.4em;
}

.dossier-form__field input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(42, 43, 34, 0.3);
  padding: 0.5em 0;
  transition: border-color 0.18s var(--ease-standard);
}

.dossier-form__field input:focus {
  outline: none;
  border-color: var(--color-ink);
}

.dossier-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dossier-form__submit {
  width: 100%;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-paper);
  background-color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  padding: 0.9em 1.5em;
  cursor: pointer;
  transition: opacity 0.18s var(--ease-standard);
}

.dossier-form__submit:hover {
  opacity: 0.85;
}

.dossier-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.dossier-form__status {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: var(--space-3);
  min-height: 1em;
}

.dossier-form__status.is-error {
  color: var(--color-autumn-red);
}

.dossier-form__status.is-success {
  color: var(--color-spruce-green);
}

body.has-modal-open {
  overflow: hidden;
}

/* quote */

.ruum-quote-bridge {
  position: relative;
}

/* same background as .ruum-quote, so its own bottom padding would otherwise
   stack with .ruum-quote's top padding and double the gap above the quote */
.ruum-haltung {
  padding-bottom: 0;
}

.ruum-quote {
  text-align: center;
  /* same space-8 above and below as every other quote on the site */
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.ruum-quote__title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin-bottom: 0.5em;
}

.ruum-quote__sub {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  opacity: 0.85;
}

/* alternating content blocks */

.ruum-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ruum-block--reverse {
  direction: rtl;
}

.ruum-block--reverse > * {
  direction: ltr;
}

.ruum-block__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ruum-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-soft);
}

.ruum-block__media:hover img {
  transform: scale(1.05);
}

.ruum-block__text {
  background: var(--color-wine);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--header-inset);
}

.ruum-block__text p + p {
  margin-top: 1.1em;
}

/* units page: same blocks as ruum, on the unit's own green */
.units-blocks .ruum-block__text {
  background: var(--color-spruce-green);
}

/* several images in one block: hairline-separated grid; an odd count lets the first image span the full width */
.ruum-block__media--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  background: var(--color-white);
}

.units-block__cell {
  display: block;
  overflow: hidden;
}

.units-block__cell:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}

.ruum-block__media--grid:hover img {
  transform: none;
}

.units-block__cell:hover img {
  transform: scale(1.05);
}

.mobile-home-fab {
  display: none;
}

.tablet-drawer-brand {
  display: none;
}

/* ==========================================================================
   Unit sound control — mute + volume for the per-unit hover ambience
   ========================================================================== */

.sound-control {
  position: fixed;
  left: calc(var(--header-inset) * 1.1 + clamp(90px, 9vw, 130px) * 0.45);
  /* desktop: under the last navigation item (muutus.meet), about 2.7rem below it. The nav ends after
     the header padding, the logo, the nav's top margin and its four items (about 6.875rem: each
     item adds 1.775rem); adjust if the nav gets more or fewer items. The mobile rule below moves
     it to the bottom-left. */
  top: calc(var(--header-inset) * 1.1 + clamp(32px, 3.2vw, 42px) + var(--space-6) + 6.875rem + 2.25rem);
  z-index: 36;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.75rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease-standard), visibility 0.4s, transform 0.5s var(--ease-soft);
}

/* .js-prefixed to match (and, being later in the file, win the tie against) the
   ".js .reveal.is-visible" rule's specificity — on the home page this control also
   carries "reveal", whose permanent opacity:1/translateY(0) would otherwise win. */
.js .sound-control.is-near-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* scrolled past the hero: on desktop the icon slides out through the top; scrolling back to
   the header brings it back down. Mobile keeps its own bottom-left docked icon (see below),
   always visible, so this only applies above the mobile/tablet breakpoint. The sound itself
   fades with it, handled in main.js. */
@media (min-width: 861px) {
  .js .sound-control.is-past-hero {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2.5rem);
  }
}

.sound-control__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28.9px;
  height: 28.9px;
  flex-shrink: 0;
  border-radius: 50%;
  touch-action: none;
  background: rgba(75, 76, 62, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-white);
}

.sound-control__icon svg {
  width: 14px;
  height: 14px;
}

.sound-control__label {
  position: absolute;
  left: calc(100% + 0.7rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.85;
  transition: opacity 0.25s var(--ease-standard), visibility 0.25s;
}

.sound-control.is-past-hero .sound-control__label {
  opacity: 0;
  visibility: hidden;
}

.sound-control__muted-line {
  opacity: 0;
  transition: opacity 0.15s var(--ease-standard);
}

.sound-control.is-muted .sound-control__wave {
  opacity: 0;
}

.sound-control.is-muted .sound-control__muted-line {
  opacity: 1;
}

.sound-control__volume-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28.9px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: height 0.25s var(--ease-standard), opacity 0.2s var(--ease-standard);
}

.sound-control:not(.is-past-hero):hover .sound-control__volume-track,
.sound-control:not(.is-past-hero):focus-within .sound-control__volume-track {
  height: 70px;
  opacity: 1;
  pointer-events: auto;
}

.sound-control__volume {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  touch-action: none;
  width: 70px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1px;
  outline: none;
  transform: rotate(-90deg);
}

.sound-control__volume::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}

.sound-control__volume::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}


@media (max-width: 860px) {
  .ruum-block,
  .ruum-block--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .sustainability-diagram__label {
    font-size: 0.62rem;
  }

  .mobile-home-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: calc(var(--header-inset) * 1.1);
    bottom: calc(var(--header-inset) * 1.1);
    width: 28.9px;
    height: 28.9px;
    z-index: 35;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-standard), visibility 0.3s;
  }

  .mobile-home-fab.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-home-fab__blur {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(211, 211, 211, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .mobile-home-fab__pulse {
    position: relative;
    width: 10px;
    height: 10px;
  }

  .site-footer__totop {
    display: none;
  }
}

@media (min-width: 600px) and (max-width: 860px) {
  .team {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    /* wide enough that the text stays at least ~60px clear of the portrait down to 600px */
    column-gap: var(--space-5);
    row-gap: var(--space-2);
  }

  .team__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: auto;
  }

  .team__bio {
    width: 100%;
    grid-column: 2;
  }

  .team--reverse {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .team--reverse .team__bio {
    grid-column: 1;
  }

  .team--reverse .team__photo {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .team__photo-overlay {
    position: absolute;
    bottom: 0;
    left: calc(var(--header-inset) * 1.1);
    margin-top: 0;
    height: clamp(280px, 42vw, 420px);
    width: auto;
    max-width: 38vw;
    object-position: bottom left;
  }

  .team__photo-overlay--right {
    left: auto;
    right: calc(var(--header-inset) * 1.1);
    object-position: bottom right;
  }

  .plans-carousel {
    padding-block: var(--space-6);
  }

  .plans-carousel__stage {
    height: clamp(420px, 56vw, 764px);
  }

  .plans-carousel__slide {
    width: clamp(400px, 54.6vw, 764px);
  }

  .site-header__brand-wordmark {
    height: 26.4px;
  }

  .project-hero .hero-scroll-cta {
    bottom: calc(var(--header-inset) * 0.968);
  }

  .site-footer__credit {
    white-space: nowrap;
  }

  .site-footer__bottom {
    justify-content: flex-end;
  }

  .project-einheiten {
    padding-top: var(--space-6);
  }

  .project-einheiten__visual {
    width: 90%;
    margin-inline: auto;
  }

  .site-header.is-open {
    left: 22%;
    right: 0;
    gap: calc(var(--space-4) * 1.6);
  }

  .site-header.is-open .nav-primary {
    margin-left: 0;
  }

  .site-header.is-open .mobile-menu-social {
    display: none;
  }

  .site-header.is-open .site-header__brand {
    display: none;
  }

  body:has(.site-header.is-open) .tablet-drawer-brand {
    display: block;
    position: fixed;
    top: calc(var(--header-inset) * 1.1);
    left: calc(var(--header-inset) * 1.1);
    z-index: 40;
  }

  .tablet-drawer-brand img {
    height: clamp(32px, 3.2vw, 42px);
    width: auto;
  }

  .site-header.is-open .icon-rail {
    margin-bottom: 0;
    margin-left: clamp(90px, 9vw, 130px);
    --rail-gap: calc(var(--space-3) * 1.4);
    gap: var(--rail-gap);
  }

  .site-header.is-open .icon-rail a {
    gap: 1.3rem;
  }

  .site-header.is-open .nav-primary {
    margin-left: clamp(90px, 9vw, 130px);
    width: calc(100% - clamp(90px, 9vw, 130px) - calc(var(--header-inset) * 1.1));
  }

  .site-header.is-open .mobile-menu-contact {
    margin-left: clamp(90px, 9vw, 130px);
  }

  body:has(.site-header.is-open) .hero > *:not(header):not(header *),
  body:has(.site-header.is-open) .subbrand-hero > *:not(header):not(header *),
  body:has(.site-header.is-open) .project-hero > *:not(header):not(header *),
  body:has(.site-header.is-open) .page-hero > *:not(header):not(header *),
  body:has(.site-header.is-open) > *:not(header):not(.hero):not(.subbrand-hero):not(.project-hero):not(.page-hero) {
    filter: blur(10px);
    transition: filter 0.4s var(--ease-soft);
  }

  .site-header.is-open .mobile-menu-social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    order: 4;
    align-self: flex-start;
    margin-left: clamp(90px, 9vw, 130px);
    margin-top: var(--space-3);
  }

  .site-header.is-open .mobile-menu-social a {
    width: 18px;
    height: 18px;
    opacity: 0.75;
    transition: opacity 0.18s var(--ease-standard);
  }

  .site-header.is-open .mobile-menu-social a:hover {
    opacity: 1;
  }
}

@media (max-width: 599px) {
  :root {
    --header-inset: clamp(2.42rem, 5.8vw, 5.31rem);
  }

  .hero-scroll-cta {
    bottom: 8rem;
  }

  .project-einheiten {
    padding-top: var(--space-4);
  }

  .project-einheiten__stage {
    margin-bottom: var(--space-3);
  }

  .project-einheiten__visual {
    aspect-ratio: 16 / 8.4;
  }

  .project-konzept {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .plans-carousel__stage {
    height: clamp(220px, 40vw, 546px);
  }

  .project-hero {
    padding-bottom: calc(var(--header-inset) * 2 + 2.4rem);
  }

  .project-hero .hero-scroll-cta {
    bottom: calc(var(--header-inset) * 2 + 7.7rem);
  }

  .plans-carousel {
    padding-block: var(--space-6);
  }

  .plans-carousel__header {
    margin-bottom: calc(var(--space-7) * 0.5);
  }

  /* phones only: doubles the container's own inset on both sides, symmetrically. (On tablets
     the text sits in the grid's second column, where extra side margins would push it
     past the page edge.) */
  .team__bio {
    margin-inline: var(--header-inset);
  }

  .team--reverse .team__bio {
    margin-inline: 0;
  }

  /* here the photo sits below the text, so .team's bottom margin is the gap to Jon's head:
     82.7px + ~23px of empty space at the top of the image = 30% less than the 128px + 23px before */
  .team {
    margin-bottom: 5.17rem;
  }

  /* the portrait sits outside the padded container (it used to touch the screen edge):
     its left arm now lines up with the text's left margin (2 × inset, less the ~1.5%
     of empty space at the image's left edge) */
  .team__photo-overlay {
    margin-left: calc(var(--header-inset) * 2 - 1.5%);
  }

  .team__photo-overlay--right {
    margin-left: auto;
    margin-right: 0;
    object-position: bottom right;
  }

  .site-header.is-open .site-header__brand {
    display: none;
  }

  .site-header.is-open .nav-primary {
    margin-top: calc(var(--space-4) * 1.05 * 1.1);
    margin-bottom: calc(var(--space-4) * 1.05 * 1.1);
  }

  .subbrand-body {
    padding-top: calc(var(--space-8) * 0.8);
  }

  .site-footer .container {
    padding-inline: calc(var(--header-inset) * 1.6);
  }

  .site-footer__top {
    position: relative;
    flex-direction: row;
    align-items: flex-end;
    text-align: left;
    justify-content: flex-start;
    gap: var(--space-4);
    padding-top: 0;
    padding-bottom: var(--space-6);
  }

  .site-footer__logo {
    position: static;
    order: 0;
    transform: none;
    margin-bottom: 0;
    flex-shrink: 0;
    align-self: flex-end;
  }

  .site-footer__contact {
    order: 1;
    text-align: left;
  }

  .site-footer__social {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    justify-content: center;
    width: auto;
  }

  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .site-footer__credit {
    order: 2;
    position: static;
    transform: none;
  }

  .site-footer__legal {
    order: 1;
    justify-content: center;
    gap: var(--space-2);
  }

  .site-footer__totop {
    display: none;
  }
}