/* =========================================================
   OSSLER BRAND HOME
   Brand-hub homepage built on the existing Ossler tokens,
   typography, site-container and motion primitives.
   ========================================================= */

.brand-home {
  --brand-section-y: clamp(112px, 8.8vw, 156px);
  --brand-section-y-mobile: clamp(78px, 13vw, 108px);
  --brand-card-radius: 20px;
}

.brand-home main > section:not(.hero) {
  margin-block: 0;
  padding-block: var(--brand-section-y);
  border-top: 0;
}

.brand-home .brand-section,
.brand-home .reviews-section,
.brand-home .why-ossler-video {
  background: var(--background);
}

.brand-home .brand-section h2,
.brand-home .brand-founder h2,
.brand-home .brand-ways h2 {
  color: var(--ink);
  font-size: var(--type-section-xl);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.055em;
}

.brand-home .brand-section p,
.brand-home .brand-founder p,
.brand-home .brand-ways p {
  color: var(--muted);
}

.brand-text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.brand-text-link span {
  transition: transform .3s var(--ease-out);
}

.brand-text-link:hover span {
  transform: translateX(5px);
}

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

@media (min-width: 951px) {
  .brand-home .brand-hero {
    height: clamp(700px, 86vh, 850px);
    min-height: 700px;
  }

  .brand-home .brand-hero .hero-copy {
    top: 25%;
    width: min(48vw, 690px);
  }

  .brand-home .brand-hero .hero-title {
    max-width: 14ch;
    font-size: clamp(52px, 4.8vw, 74px);
    line-height: .94;
  }

  .brand-home .brand-hero .hero-subtitle {
    max-width: 45ch;
    color: rgba(255,255,255,.82);
    font-size: clamp(18px, 1.18vw, 21px);
    line-height: 1.5;
  }
}

.brand-home .brand-hero .hero-haze {
  background:
    linear-gradient(90deg, rgba(9,15,12,.76) 0%, rgba(9,15,12,.56) 33%, rgba(9,15,12,.17) 61%, rgba(9,15,12,.05) 82%, rgba(9,15,12,.18) 100%),
    linear-gradient(180deg, rgba(9,15,12,.06) 0%, rgba(9,15,12,.02) 50%, rgba(9,15,12,.34) 100%);
}

.brand-hero__actions {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.brand-hero__routes {
  display: flex;
  gap: 18px;
  padding-bottom: 4px;
}

.brand-hero__routes a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.32);
}

.brand-hero__routes a span {
  color: var(--orange);
  transition: transform .3s var(--ease-out);
}

.brand-hero__routes a:hover span { transform: translateX(4px); }

.brand-hero__trust {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255,255,255,.72);
  letter-spacing: 1.7px;
}

.brand-hero__trust-item strong {
  color: #fff;
  font-weight: 600;
}

.brand-hero__trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}

.brand-hero__note {
  position: absolute;
  z-index: 12;
  right: clamp(46px, 7vw, 118px);
  top: 16%;
  color: rgba(255,255,255,.92);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(16px, 1.25vw, 21px);
  font-style: italic;
  line-height: 1.1;
  transform: rotate(-4deg);
}

.brand-hero__note span { display: block; }
.brand-hero__note svg {
  width: 70px;
  margin: 4px 0 0 -32px;
  overflow: visible;
}
.brand-hero__note path {
  fill: none;
  stroke: rgba(255,255,255,.9);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   FOUNDER STORY
   ========================================================= */

.brand-home .brand-founder__grid {
  grid-template-columns: minmax(0, 1.24fr) minmax(320px, .76fr);
  gap: clamp(64px, 7vw, 112px);
  align-items: center;
}

.brand-home .brand-founder__visual { grid-column: 1; }
.brand-home .brand-founder__copy { grid-column: 2; }

.brand-home .brand-founder .why-ossler-video__media {
  aspect-ratio: 16 / 9.1;
  min-height: 390px;
  border-radius: 22px;
}

.brand-home .brand-founder .why-ossler-video__copy h2 {
  max-width: 9.5ch;
  margin-top: 20px;
}

.brand-home .brand-founder .why-ossler-video__lead {
  max-width: 31ch;
  margin-top: 24px;
}

.brand-founder__story {
  max-width: 34ch;
  margin-top: 20px;
  font-size: var(--body-md);
  line-height: 1.68;
}

.brand-home .brand-founder .why-ossler-video__annotation {
  right: 28px;
  bottom: 28px;
  color: rgba(255,255,255,.93);
  font-size: clamp(13px, .9vw, 16px);
}

/* =========================================================
   TEAM — OVERLAPPING PEOPLE DECK
   ========================================================= */

.brand-team {
  overflow: clip;
}

.brand-team__grid {
  display: grid;
  grid-template-columns: minmax(290px, .52fr) minmax(0, 1.48fr);
  gap: clamp(72px, 7vw, 120px);
  align-items: start;
}

.brand-team__intro {
  padding-top: 12px;
}

.brand-team__intro h2 {
  max-width: 9.5ch;
  margin-top: 24px;
}

.brand-team__intro p {
  max-width: 34ch;
  margin-top: 26px;
  font-size: var(--body-lg);
  line-height: 1.58;
}

.brand-team__carousel {
  position: relative;
  min-width: 0;
  padding-top: 72px;
}

.brand-team__controls {
  position: absolute;
  z-index: 50;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-team__control {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255,255,255,.56);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, opacity .25s ease;
}

.brand-team__control span {
  transform: translateY(-1px);
  font-size: 19px;
}

.brand-team__control:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(232,113,70,.5);
  background: rgba(255,255,255,.9);
}

.brand-team__control:focus-visible,
.brand-team-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.brand-team__control:disabled {
  cursor: default;
  opacity: .28;
}

.brand-team__counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 74px;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}

.brand-team__counter b {
  color: var(--ink);
  font-weight: 600;
}

.brand-team__counter i {
  color: var(--line-strong);
  font-style: normal;
}

.brand-team__stage {
  position: relative;
  height: clamp(420px, 31vw, 520px);
  min-width: 0;
  overflow: hidden;
  perspective: 1200px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-team__stage::before,
.brand-team__stage::after {
  content: none !important;
}

.brand-team-card {
  --team-card-w: clamp(220px, 17.2vw, 292px);
  position: absolute;
  top: 0;
  left: 0;
  width: var(--team-card-w);
  min-width: var(--team-card-w);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(42,54,46,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(24,34,29,.045);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.brand-team-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: .78;
  overflow: hidden;
  background: #eceeea;
}

.brand-team-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  transform: scale(1.015);
  transition: transform .7s var(--ease-out);
}

.brand-team-card--sven .brand-team-card__media img {
  object-position: 48% 36%;
}

.brand-team-card:hover .brand-team-card__media img {
  transform: scale(1.045);
}

.brand-team-card.is-active {
  box-shadow: 0 22px 54px rgba(24,34,29,.10);
}

.brand-team-card:not(.is-active) {
  box-shadow: 0 5px 18px rgba(24,34,29,.035);
}

.brand-team-card:not(.is-active) .brand-team-card__body {
  background: #fff;
}

.brand-team-card__body {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 15px 15px 18px;
  background: #fff;
}

.brand-team-card__body > span {
  min-width: 0;
}

.brand-team-card__copy {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.brand-team-card__body strong,
.brand-team-card__body small {
  display: block;
}

.brand-team-card__body strong {
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 600;
  letter-spacing: -.02em;
}

.brand-team-card__body small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}


.brand-team-card__email {
  display: block;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: rgba(45,56,49,.54);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .25s ease;
}

.brand-team-card.is-active .brand-team-card__email,
.brand-team-card:hover .brand-team-card__email {
  color: rgba(45,56,49,.72);
}

.brand-team-card__mail {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 15px;
  font-style: normal;
  text-decoration: none;
  transition: transform .25s var(--ease-out), border-color .25s ease, background .25s ease, color .25s ease;
}

.brand-team-card__mail:hover {
  transform: translateY(-2px);
  border-color: rgba(232,113,70,.45);
  background: rgba(232,113,70,.08);
  color: var(--orange);
}

.brand-team-card__mail:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.brand-team-card__placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 72% 22%, rgba(232,113,70,.16), transparent 30%),
    linear-gradient(145deg, #f3f3ef 0%, #e7eae4 100%);
  color: rgba(36,46,40,.34);
}

.brand-team-card__placeholder span {
  font-size: clamp(64px, 6vw, 96px);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.07em;
}

.brand-team-card__placeholder em {
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .23em;
}

.brand-team__route {
  position: relative;
  height: 102px;
  margin-top: 18px;
}

.brand-team__route svg {
  position: absolute;
  left: 80px;
  right: 0;
  top: 8px;
  width: calc(100% - 80px);
  height: 70px;
  overflow: visible;
}

.brand-team__route path {
  fill: none;
  stroke: rgba(86,98,90,.33);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.brand-team__route-dot {
  fill: var(--background);
  stroke: rgba(199,151,117,.72);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.brand-team__route-dot--solid {
  fill: var(--orange);
  stroke: var(--orange);
}

.brand-team__route-note {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--ink-soft);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: 14px;
  font-style: italic;
  line-height: 1.05;
  transform: rotate(-5deg);
}

.brand-team__route-note i {
  color: var(--orange);
  font-style: normal;
}

.brand-team__count {
  position: absolute;
  right: 10%;
  bottom: 2px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
}

.brand-team__hand {
  position: absolute;
  right: 0;
  bottom: -20px;
  color: var(--ink-soft);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(17px, 1.25vw, 21px);
  font-style: italic;
  transform: rotate(-5deg);
}

@media (max-width: 1180px) {
  .brand-team__grid {
    grid-template-columns: minmax(250px, .5fr) minmax(0, 1.5fr);
    gap: 54px;
  }
  .brand-team-card { --team-card-w: clamp(210px, 20vw, 250px); }
}

@media (max-width: 980px) {
  .brand-team__grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .brand-team__intro h2 { max-width: 10ch; }
  .brand-team__carousel { padding-top: 64px; }
  .brand-team__stage { height: 470px; }
  .brand-team-card { --team-card-w: clamp(220px, 31vw, 270px); }
}

@media (max-width: 760px) {
  .brand-team { overflow: hidden; }
  .brand-team__carousel { padding-top: 58px; }
  .brand-team__controls { left: 0; right: auto; }
  .brand-team__stage {
    display: flex;
    height: auto;
    gap: 14px;
    margin-inline: -18px;
    padding: 2px 18px 20px;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 0;
    contain: none;
    perspective: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .brand-team__stage::-webkit-scrollbar { display: none; }
  .brand-team-card {
    position: relative;
    top: auto;
    left: auto;
    width: min(78vw, 280px);
    min-width: min(78vw, 280px);
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    scroll-snap-align: start;
  }
  .brand-team__route { margin-top: 8px; }
  .brand-team__hand { display: none; }
}

/* =========================================================
   PROJECTS — headline intentionally on the right
   ========================================================= */

.brand-projects__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: clamp(72px, 7.5vw, 124px);
  align-items: center;
}

.brand-projects__gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(250px, .78fr);
  gap: clamp(16px, 1.5vw, 24px);
  min-height: 610px;
  align-items: start;
}

.brand-projects__gallery::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 310px;
  height: 310px;
  right: -36px;
  top: 28px;
  border: 1px solid rgba(231, 105, 63, .46);
  border-radius: 50%;
  pointer-events: none;
}

.brand-project {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(24, 34, 29, .11);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 24px 58px rgba(24,34,29,.07);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}

.brand-project--feature { min-height: 594px; }
.brand-project--secondary {
  min-height: 492px;
  margin-top: 86px;
}

.brand-project:hover,
.brand-project:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(231, 105, 63, .32);
  box-shadow: 0 30px 76px rgba(24,34,29,.11);
}

.brand-project:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.brand-project__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 10px 10px 0;
  border-radius: 14px;
  background: var(--surface);
}

.brand-project--feature .brand-project__media { height: 365px; }
.brand-project--secondary .brand-project__media { height: 252px; }

.brand-project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,13,10,.14), transparent 38%, rgba(8,13,10,.08));
  pointer-events: none;
}

.brand-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s var(--ease-out);
}
.brand-project:hover .brand-project__media img,
.brand-project:focus-visible .brand-project__media img { transform: scale(1.035); }

.brand-project__index,
.brand-project__status {
  position: absolute;
  z-index: 2;
  top: 14px;
}
.brand-project__index {
  left: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}
.brand-project__status {
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.brand-project__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.brand-project__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.brand-project--secondary .brand-project__body { padding: 18px 18px 20px; }

.brand-project__eyebrow {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand-project__heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 54px;
  margin-top: 5px;
}
.brand-project__heading strong {
  font-size: clamp(23px, 1.65vw, 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}
.brand-project--secondary .brand-project__heading strong { font-size: clamp(20px, 1.35vw, 25px); }
.brand-project__heading > span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.brand-project__facts {
  display: grid;
  grid-template-columns: 1fr .8fr 1.45fr;
  gap: 0;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.brand-project__facts > span {
  min-width: 0;
  padding-inline: 14px;
  border-left: 1px solid var(--line);
}
.brand-project__facts > span:first-child { padding-left: 0; border-left: 0; }
.brand-project__facts > span:last-child { padding-right: 0; }
.brand-project__facts small,
.brand-project__facts b {
  display: block;
}
.brand-project__facts small {
  margin-bottom: 5px;
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.brand-project__facts b {
  font-size: 11px;
  font-weight: 560;
  line-height: 1.28;
}
.brand-project__facts--compact { grid-template-columns: 1.2fr .8fr; }

.brand-project__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 18px;
  transition: color .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.brand-project:hover .brand-project__arrow,
.brand-project:focus-visible .brand-project__arrow {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(45deg);
}

.brand-projects__intro {
  position: relative;
  padding-right: 10px;
}
.brand-projects__intro h2 {
  max-width: 8.5ch;
  margin-top: 22px;
}
.brand-projects__intro p {
  max-width: 32ch;
  margin-top: 24px;
  font-size: var(--body-lg);
  line-height: 1.55;
}
.brand-projects__note {
  display: block;
  margin-top: 54px;
  color: var(--orange);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(16px, 1.2vw, 20px);
  font-style: italic;
  line-height: 1.15;
  transform: rotate(-4deg);
}

/* =========================================================
   VALUES — process-line language reused as brand motif
   ========================================================= */

.brand-values__header {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.brand-values__header .section-kicker { justify-content: center; }
.brand-values__header h2 { margin-top: 22px; }
.brand-values__header p {
  max-width: 44ch;
  margin: 24px auto 0;
  font-size: var(--body-lg);
  line-height: 1.55;
}

.brand-values__route {
  width: 100%;
  height: 110px;
  margin-top: 70px;
}
.brand-values__route svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.brand-values__route path {
  fill: none;
  stroke-linecap: round;
}
.brand-values__route-base { stroke: rgba(24,34,29,.18); stroke-width: 1.1; }
.brand-values__route-progress { stroke: var(--orange); stroke-width: 1.4; }
.brand-values__route circle { fill: var(--orange); }

.brand-values__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 0;
}
.brand-values__grid article {
  min-width: 0;
  padding: 22px clamp(18px, 2vw, 32px) 0;
  border-left: 1px solid var(--line);
}
.brand-values__grid article:first-child { border-left: 0; }
.brand-values__grid article > span {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 1.6px;
}
.brand-values__grid h3 {
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.03em;
}
.brand-values__grid p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

/* Reviews are reused from the existing page; only give the chapter more air. */
.brand-home .reviews-section {
  overflow: hidden;
}

/* =========================================================
   KNOWLEDGE — headline on the right
   ========================================================= */

.brand-knowledge__grid {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(300px,.5fr);
  gap: clamp(72px, 7.5vw, 124px);
  align-items: center;
}
.brand-knowledge__cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.brand-knowledge__card {
  position: relative;
  min-width: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}
.brand-knowledge__card img {
  width: 100%;
  aspect-ratio: 1.36;
  object-fit: cover;
  border-radius: 16px;
}
.brand-knowledge__card > span {
  display: block;
  margin-top: 16px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.brand-knowledge__card h3 {
  margin-top: 10px;
  color: var(--ink);
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.035em;
}
.brand-knowledge__card small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}
.brand-knowledge__card i {
  position: absolute;
  right: 0;
  bottom: 22px;
  color: var(--ink);
  font-style: normal;
}
.brand-knowledge__intro h2 {
  max-width: 8.6ch;
  margin-top: 22px;
}
.brand-knowledge__intro p {
  max-width: 30ch;
  margin-top: 24px;
  font-size: var(--body-lg);
  line-height: 1.55;
}

/* =========================================================
   CAREERS — one visual chapter, no repeated left-heading grid
   ========================================================= */

.brand-careers__panel {
  position: relative;
  min-height: clamp(31.25rem, 42vw, 40rem);
  overflow: hidden;
  border-radius: 1.5rem;
  background: #18221d;
}
.brand-careers__panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.brand-careers__veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,12,9,.92) 0%, rgba(7,12,9,.8) 31%, rgba(7,12,9,.5) 50%, rgba(7,12,9,.1) 76%),
    linear-gradient(0deg, rgba(7,12,9,.44) 0%, rgba(7,12,9,0) 42%);
}
.brand-careers__copy {
  position: absolute;
  z-index: 2;
  left: clamp(2.125rem, 5vw, 4.75rem);
  bottom: clamp(2.375rem, 5vw, 4.5rem);
  max-width: 38.125rem;
  color: #fff;
}
/* Higher specificity than the generic brand-section typography rules. */
.brand-home .brand-careers .brand-careers__copy .section-kicker {
  color: rgba(255,255,255,.9);
}
.brand-home .brand-careers .brand-careers__copy .section-kicker__number,
.brand-home .brand-careers .brand-careers__copy .section-kicker__label {
  color: inherit;
}
.brand-home .brand-careers .brand-careers__copy .section-kicker__line {
  background: var(--orange);
}
.brand-home .brand-careers .brand-careers__copy h2 {
  margin-top: 1.375rem;
  color: #fff;
  font-size: var(--type-section-xl);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.055em;
}
.brand-home .brand-careers .brand-careers__copy p {
  max-width: 34rem;
  margin-top: 1.375rem;
  color: rgba(255,255,255,.88);
  font-size: var(--body-lg);
  line-height: 1.5;
}
.brand-careers__link {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 1.75rem;
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
}
.brand-careers__link:hover,
.brand-careers__link:focus-visible {
  color: #fff;
}
.brand-careers__hand {
  position: absolute;
  z-index: 2;
  right: clamp(2.25rem, 5vw, 4.5rem);
  top: clamp(2.25rem, 5vw, 4.375rem);
  color: rgba(255,255,255,.96);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-style: italic;
  transform: rotate(-5deg);
}

/* =========================================================
   WAYS IN
   ========================================================= */

.brand-ways__header {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(300px,.75fr);
  gap: 64px;
  align-items: end;
}
.brand-ways__header h2 {
  grid-column: 1;
  max-width: 10ch;
  margin-top: 22px;
}
.brand-ways__header > p {
  grid-column: 2;
  align-self: end;
  max-width: 38ch;
  font-size: var(--body-lg);
  line-height: 1.55;
}
.brand-ways__header .section-kicker { grid-column: 1 / -1; }

.brand-ways__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: clamp(54px, 5vw, 82px);
}
.brand-way {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 46px;
  gap: 24px;
  align-items: center;
  min-height: 180px;
  padding: 18px 20px 18px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.46);
  transition: transform .35s var(--ease-out), border-color .35s ease, background-color .35s ease;
}
.brand-way:hover {
  transform: translateY(-4px);
  border-color: rgba(242,110,63,.3);
  background: #fff;
}
.brand-way img {
  width: 150px;
  height: 144px;
  border-radius: 13px;
  object-fit: cover;
}
.brand-way > div { min-width: 0; }
.brand-way span {
  color: var(--orange);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.brand-way h3 {
  margin-top: 10px;
  color: var(--ink);
  font-size: clamp(21px, 1.5vw, 27px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.brand-way p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.brand-way > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  font-style: normal;
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.brand-way:hover > i { transform: translateX(3px); border-color: var(--orange); }

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

.brand-footer {
  padding: clamp(72px, 6vw, 96px) 0 28px;
  background: #f1f4f2;
  border-top: 1px solid var(--line);
}
.brand-footer__top {
  display: grid;
  grid-template-columns: 1.35fr repeat(3,.72fr) .7fr;
  gap: clamp(30px, 4vw, 64px);
}
.brand-footer__brand img { width: 150px; height: auto; }
.brand-footer__brand p {
  max-width: 26ch;
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.brand-footer__column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brand-footer strong {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.brand-footer__column a,
.brand-footer__column button {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}
.brand-footer__social > div { display: flex; gap: 10px; margin-top: 10px; }
.brand-footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}
.brand-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 72px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 11px;
}

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

@media (max-width: 1180px) {
  .brand-home .brand-founder__grid,
  .brand-projects__grid,
  .brand-knowledge__grid {
    gap: 58px;
  }
  .brand-person { grid-template-columns: 70px minmax(0,1fr); }
  .brand-person img { width: 70px; }
  .brand-values__grid h3 { font-size: 17px; }
}

@media (max-width: 980px) {
  .brand-home { --brand-section-y: var(--brand-section-y-mobile); }

  .brand-home .brand-founder__grid,
  .brand-team__grid,
  .brand-projects__grid,
  .brand-knowledge__grid,
  .brand-ways__header {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .brand-home .brand-founder__visual,
  .brand-home .brand-founder__copy,
  .brand-ways__header h2,
  .brand-ways__header > p,
  .brand-ways__header .section-kicker {
    grid-column: 1;
  }

  .brand-projects__intro { order: -1; }
  .brand-projects__intro h2,
  .brand-knowledge__intro h2 { max-width: 12ch; }
  .brand-knowledge__intro { order: -1; }

  .brand-values__route { display: none; }
  .brand-values__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 0;
    margin-top: 50px;
  }
  .brand-values__grid article { border-left: 1px solid var(--line); }
  .brand-values__grid article:nth-child(odd) { border-left: 0; }

  .brand-ways__grid { grid-template-columns: 1fr; }
  .brand-footer__top { grid-template-columns: 1.2fr 1fr 1fr; }
  .brand-footer__social { grid-column: 2 / span 1; }
}

@media (max-width: 950px) {
  .brand-home .brand-hero .hero-title { max-width: 13ch; }
  .brand-home .brand-hero__routes a { color: var(--ink); border-color: var(--line-strong); }
  .brand-hero__note { display: none; }
  .brand-hero__trust {
    color: var(--muted);
    flex-wrap: wrap;
    gap: 10px;
  }
  .brand-hero__trust-item strong { color: var(--ink); }

  .brand-home .brand-founder .why-ossler-video__media { min-height: 0; }
  .brand-team__hand { display: none; }
}

@media (max-width: 760px) {
  .brand-home main > section:not(.hero) { padding-block: var(--brand-section-y-mobile); }

  .brand-hero__actions { align-items: flex-start; gap: 14px; }
  .brand-hero__routes { width: 100%; flex-wrap: wrap; }

  .brand-team__group,
  .brand-team__group img { min-height: 280px; }
  .brand-team__people { grid-template-columns: 1fr; }
  .brand-person { grid-template-columns: 82px minmax(0,1fr); }
  .brand-person img { width: 82px; }

  .brand-projects__gallery {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 18px;
  }
  .brand-projects__gallery::before { display: none; }
  .brand-project--feature,
  .brand-project--secondary {
    min-height: 0;
    margin-top: 0;
  }
  .brand-project--feature .brand-project__media,
  .brand-project--secondary .brand-project__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .brand-project__facts { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .brand-project__facts > span:nth-child(3) {
    grid-column: 1 / -1;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .brand-values__header { text-align: left; margin-inline: 0; }
  .brand-values__header .section-kicker { justify-content: flex-start; }
  .brand-values__header p { margin-left: 0; }
  .brand-values__grid { grid-template-columns: 1fr; }
  .brand-values__grid article,
  .brand-values__grid article:nth-child(odd) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px 0 0;
  }
  .brand-values__grid article:first-child { border-top: 0; }

  .brand-knowledge__cards { grid-template-columns: 1fr; }
  .brand-knowledge__card img { aspect-ratio: 16 / 9; }

  .brand-careers__panel { min-height: 520px; }
  .brand-careers__hand { display: none; }

  .brand-way {
    grid-template-columns: 92px minmax(0,1fr) 42px;
    min-height: 130px;
  }
  .brand-way img { width: 92px; height: 96px; }

  .brand-footer__top { grid-template-columns: 1fr 1fr; }
  .brand-footer__brand { grid-column: 1 / -1; }
  .brand-footer__social { grid-column: auto; }
}

@media (max-width: 520px) {
  .brand-home .brand-section h2,
  .brand-home .brand-founder h2,
  .brand-home .brand-ways h2,
  .brand-careers__copy h2 {
    font-size: clamp(40px, 11vw, 54px);
  }

  .brand-home .brand-founder .why-ossler-video__media { aspect-ratio: 4 / 3; }
  .brand-team__group figcaption { flex-direction: column; align-items: flex-start; }
  .brand-projects__gallery { grid-template-rows: repeat(3, 210px); }
  .brand-ways__grid { margin-top: 42px; }
  .brand-way {
    grid-template-columns: 72px minmax(0,1fr);
    gap: 14px;
    padding: 14px;
  }
  .brand-way img { width: 72px; height: 78px; }
  .brand-way > i { display: none; }
  .brand-footer__top { grid-template-columns: 1fr; }
  .brand-footer__bottom { flex-direction: column; margin-top: 48px; }
}

/* =========================================================
   HERO — TRUST + PARTNER LAYER
   Designed to sit on top of the existing cinematic hero while
   preserving the site's established Ossler spacing and tokens.
   ========================================================= */

@media (min-width: 951px) {
  .brand-home .brand-hero {
    height: clamp(720px, 88vh, 880px);
    min-height: 720px;
  }

  .brand-home .brand-hero .hero-copy {
    top: 24.5%;
    width: min(50vw, 740px);
  }

  .brand-home .brand-hero .hero-title {
    max-width: 13.5ch;
    font-size: clamp(58px, 5.15vw, 88px);
    line-height: .94;
    letter-spacing: -.058em;
  }

  .brand-home .brand-hero .hero-subtitle {
    max-width: 46ch;
    font-size: clamp(18px, 1.12vw, 21px);
  }
}

.brand-hero__partners {
  position: absolute;
  z-index: 22;
  top: 29%;
  right: clamp(42px, 5.2vw, 98px);
  width: clamp(300px, 21vw, 355px);
  padding: 24px 24px 22px;
  border: 1px solid rgba(255,255,255,.40);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(35,30,24,.35), rgba(21,23,20,.26));
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(15px) saturate(115%);
  -webkit-backdrop-filter: blur(15px) saturate(115%);
  color: #fff;
}

.brand-hero__partners-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
}

.brand-hero__partners-head span {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 2px;
}

.brand-hero__partners-head i {
  height: 1px;
  background: rgba(255,255,255,.46);
}

.brand-hero__partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.brand-hero__partner {
  min-width: 0;
  padding-right: 20px;
}

.brand-hero__partner + .brand-hero__partner {
  padding: 0 0 0 20px;
  border-left: 1px solid rgba(255,255,255,.24);
}

.brand-hero__partner-mark {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand-hero__partner-mark svg {
  width: 38px;
  height: auto;
  flex: 0 0 auto;
}

.brand-hero__partner-mark span {
  font-size: 13px;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.03em;
}

.brand-hero__partner-wordmark {
  min-height: 48px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: .73;
  letter-spacing: -.055em;
}

.brand-hero__partner p {
  margin: 12px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.4;
}

.brand-hero__partner p strong {
  color: #fff;
  font-weight: 500;
}

.brand-hero__proof {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: auto;
  max-width: none;
  color: #fff;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.brand-hero__proof-card {
  min-height: 82px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 22px;
  background: rgba(14,18,16,.30);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}

.brand-hero__google {
  gap: 15px;
  min-width: 300px;
  padding: 13px 20px 13px 17px;
  color: #fff;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, transform .35s var(--ease-out);
}

.brand-hero__google:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.48);
  background: rgba(14,18,16,.42);
}

.brand-hero__google-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
}

.brand-hero__google-icon svg { width: 27px; height: 27px; }

.brand-hero__google-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
}

.brand-hero__google-copy > strong {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.brand-hero__stars {
  color: var(--orange);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.brand-hero__google-copy small {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0;
}

.brand-hero__credentials {
  min-width: 302px;
  padding: 12px 18px;
  gap: 18px;
}

.brand-hero__credentials > i {
  width: 1px;
  height: 42px;
  background: rgba(255,255,255,.22);
}

.brand-hero__credential {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-hero__credential > b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.30);
  color: rgba(255,255,255,.92);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .6px;
}

.brand-hero__credential > svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  fill: none;
  stroke: rgba(255,255,255,.88);
  stroke-width: 1.5;
}

.brand-hero__credential > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-hero__credential strong {
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
}

.brand-hero__credential small {
  color: rgba(255,255,255,.60);
  font-size: 9px;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-hero__arc {
  position: absolute;
  z-index: 11;
  right: -30px;
  bottom: -4px;
  width: clamp(250px, 24vw, 400px);
  height: clamp(170px, 18vw, 255px);
  pointer-events: none;
}

.brand-hero__arc svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-hero__arc path {
  fill: none;
  stroke: rgba(255,255,255,.66);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.brand-hero__arc circle {
  fill: var(--orange);
  stroke: rgba(255,255,255,.25);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.brand-hero__arc > div {
  position: absolute;
  right: clamp(34px, 4vw, 68px);
  bottom: clamp(28px, 3vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 3px;
  text-align: center;
}

/* Strengthen the hierarchy of the existing handwritten note without
   introducing a second visual language. */
.brand-hero__note {
  right: clamp(58px, 6.5vw, 116px);
  top: 15.5%;
  font-size: clamp(17px, 1.24vw, 21px);
  text-shadow: 0 4px 22px rgba(0,0,0,.16);
}

/* Tablet: keep the trust objects in the document flow beneath the image. */
@media (max-width: 1280px) and (min-width: 951px) {
  .brand-hero__partners {
    right: 3.4vw;
    width: 300px;
    padding: 20px;
  }
  .brand-hero__partner-wordmark { font-size: 25px; }
  .brand-hero__proof-card { min-height: 76px; }
  .brand-hero__google { min-width: 276px; }
  .brand-hero__credentials { min-width: 276px; gap: 12px; }
}

@media (max-width: 950px) {
  .brand-hero__partners {
    position: relative;
    grid-column: 1;
    grid-row: 3;
    inset: auto;
    width: min(650px, calc(100% - 2 * var(--site-gutter)));
    margin: 18px auto 0;
    color: var(--ink);
    border-color: var(--line-strong);
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 45px rgba(24,34,29,.07);
    backdrop-filter: blur(12px);
  }

  .brand-hero__partners-head i,
  .brand-hero__partner + .brand-hero__partner {
    border-color: var(--line-strong);
  }

  .brand-hero__partners-head span,
  .brand-hero__partner-mark,
  .brand-hero__partner-mark span,
  .brand-hero__partner-wordmark,
  .brand-hero__partner p strong {
    color: var(--ink);
  }

  .brand-hero__partner p { color: var(--muted); }

  .brand-hero__proof {
    grid-row: 4;
    width: min(650px, calc(100% - 2 * var(--site-gutter)));
    margin: 18px auto var(--section-y-m);
    gap: 12px;
  }

  .brand-hero__proof-card {
    flex: 1 1 0;
    border-color: var(--line-strong);
    background: rgba(255,255,255,.78);
    box-shadow: 0 14px 34px rgba(24,34,29,.06);
  }

  .brand-hero__google,
  .brand-hero__google-copy > strong,
  .brand-hero__credential strong { color: var(--ink); }

  .brand-hero__google-copy small,
  .brand-hero__credential small { color: var(--muted); }

  .brand-hero__credentials > i { background: var(--line-strong); }
  .brand-hero__credential > b { color: var(--ink); border-color: var(--line-strong); }
  .brand-hero__credential > svg { stroke: var(--ink); }
  .brand-hero__arc { display: none; }
}

@media (max-width: 700px) {
  .brand-hero__proof { flex-direction: column; }
  .brand-hero__google,
  .brand-hero__credentials { min-width: 0; width: 100%; }
  .brand-hero__credentials { justify-content: space-between; }
}

@media (max-width: 520px) {
  .brand-hero__partners { padding: 20px 18px; }
  .brand-hero__partners-grid { grid-template-columns: 1fr; gap: 20px; }
  .brand-hero__partner { padding: 0; }
  .brand-hero__partner + .brand-hero__partner {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
  }
  .brand-hero__partner p { margin-top: 8px; }
  .brand-hero__credentials { gap: 10px; }
  .brand-hero__credential > b { width: 34px; height: 34px; }
}

/* Real Orrön Energy partner artwork */
.brand-hero__partner-mark--orron {
  min-height: 48px;
}

.brand-hero__partner-mark--orron img {
  display: block;
  width: min(100%, 116px);
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 950px) {
  .brand-hero__partner-mark--orron img {
    width: 108px;
    height: 56px;
  }
}

/* Partner logos — linked monochrome marks */
.brand-hero__partner-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .brand-hero__partner-link:hover {
    opacity: .78;
    transform: translateY(-1px);
  }
}

.brand-hero__partner-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 5px;
  border-radius: 4px;
}

.brand-hero__partner-mark--smart {
  min-height: 48px;
}

.brand-hero__partner-mark--smart img {
  display: block;
  width: min(100%, 116px);
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 950px) {
  .brand-hero__partner-mark--smart img {
    width: 108px;
    height: 56px;
  }
}

/* Video playback state */
.why-ossler-video__media.is-playing .why-ossler-video__play {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(.82) !important;
}

/* Founder scroll story: deliberately scoped to #geschichte. Static first
   (mobile + reduced motion); the pinned story lives further down. */
#geschichte { --story-top: clamp(112px, 16vh, 170px); }
#geschichte .founder-stage { position: relative; display: grid; gap: 56px; }
#geschichte .founder-portrait { position: relative; margin: 0; overflow: hidden; border-radius: 26px; background: var(--surface); }
#geschichte .founder-portrait > img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
#geschichte .founder-portrait figcaption { position: absolute; bottom: 20px; left: 20px; padding: 10px 14px; border-radius: 12px; background: var(--background); color: var(--ink); font-size: 14px; }
#geschichte .founder-portrait figcaption span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
#geschichte .founder-storybar { display: none; }
#geschichte .founder-chapters { display: grid; gap: 88px; min-width: 0; }
#geschichte .founder-chapter { position: relative; min-width: 0; color: var(--ink); }
#geschichte .founder-chapter .section-kicker { margin: 0; }
#geschichte h2 { margin: 0; font-size: clamp(48px, 6.5vw, 100px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
#geschichte .founder-lead { max-width: 42ch; margin: 24px 0 0; font-size: var(--body-md); line-height: 1.6; color: var(--ink-soft); }
#geschichte h2 > span, #geschichte .founder-lead > span { display: block; }
#geschichte .brand-text-link, #geschichte button { cursor: pointer; }

/* Chapter 2 · Herkunft */
#geschichte .founder-origin__title { margin: 0; color: var(--ink); font-size: clamp(40px, 6.2vw, 104px); font-weight: 400; line-height: .94; letter-spacing: -.055em; }
#geschichte .founder-origin__title--b { margin-top: 28px; text-align: right; }
#geschichte .founder-route { display: none; }
#geschichte .founder-origin__caption { max-width: 44ch; margin: 32px 0 0; color: var(--muted); font-size: var(--body-md); line-height: 1.6; }

/* Chapter 3 · Haltung */
#geschichte .founder-beliefs__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
#geschichte .founder-beliefs__kicker { display: flex; align-items: center; gap: 14px; margin: 0; }
#geschichte .founder-beliefs__progress { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
#geschichte .founder-beliefs__progress b { color: var(--ink); font-weight: 500; }
#geschichte .founder-beliefs__progress em { font-style: normal; }
#geschichte .founder-beliefs__progress span { position: relative; width: clamp(90px, 10vw, 160px); height: 2px; background: var(--line-strong); }
#geschichte .founder-beliefs__progress i { position: absolute; inset: 0 auto 0 0; width: 33.33%; background: var(--orange); }
#geschichte .founder-beliefs__viewport { margin-inline: calc(var(--site-gutter) * -1); padding-inline: var(--site-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#geschichte .founder-beliefs__viewport::-webkit-scrollbar { display: none; }
#geschichte .founder-beliefs__track { display: flex; gap: 16px; width: max-content; }
#geschichte .founder-panel { position: relative; width: min(82vw, 420px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 26px; background: var(--surface); scroll-snap-align: start; }
#geschichte .founder-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#geschichte .founder-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,34,29,0) 38%, rgba(24,34,29,.66) 100%); pointer-events: none; }
#geschichte .founder-panel figcaption { position: absolute; z-index: 2; left: clamp(22px, 2.4vw, 38px); right: clamp(22px, 2.4vw, 38px); bottom: clamp(22px, 2.4vw, 36px); color: #fff; }
#geschichte .founder-panel strong { display: block; font-size: clamp(36px, 4.4vw, 70px); font-weight: 300; line-height: 1; letter-spacing: -.05em; }
#geschichte .founder-panel figcaption span { display: block; max-width: 28ch; margin-top: 12px; color: rgba(255,255,255,.88); font-size: clamp(15px, 1.15vw, 20px); line-height: 1.4; }

/* Chapter 4 · Versprechen */
#geschichte .founder-promise { margin: 0; color: var(--ink); font-size: clamp(44px, 6vw, 100px); font-weight: 400; line-height: .92; letter-spacing: -.058em; }
#geschichte .founder-promise__line { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); white-space: nowrap; }
#geschichte .founder-promise__line--pill { margin: .12em 0 0 clamp(74px, 7.6vw, 132px); }
#geschichte .founder-promise__accent { color: var(--orange); }
#geschichte .founder-videopill { position: relative; flex: 0 0 auto; width: 330px; height: 156px; padding: 0; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface); cursor: pointer; }
#geschichte .founder-videopill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .7s var(--ease-out); }
#geschichte .founder-videopill:hover img { transform: scale(1.05); }
#geschichte .founder-videopill__play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; border-radius: 50%; background: rgba(251,252,251,.94); transform: translate(-50%, -50%); transition: transform .35s var(--ease-spring); }
#geschichte .founder-videopill__play::before { content: ""; position: absolute; left: 50%; top: 50%; border-left: 16px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: translate(-35%, -50%); }
#geschichte .founder-videopill:hover .founder-videopill__play { transform: translate(-50%, -50%) scale(1.08); }
#geschichte .founder-videopill__time { position: absolute; right: 26px; bottom: 16px; padding: 4px 9px; border-radius: 999px; background: rgba(24,34,29,.55); color: #fff; font-size: 11px; letter-spacing: 0; }
#geschichte .founder-videopill:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
#geschichte .founder-promise__hand { display: inline-flex; align-items: flex-start; gap: 6px; margin: 14px 0 0 clamp(150px, 13vw, 230px); color: var(--orange); font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: clamp(16px, 1.18vw, 20px); font-style: italic; transform: rotate(-4deg); }
#geschichte .founder-promise__hand svg { order: -1; width: 38px; height: 38px; margin-top: -26px; overflow: visible; }
#geschichte .founder-promise__hand path { stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; }
#geschichte .founder-promise__bottom { margin-top: clamp(28px, 3.7vh, 48px); }
#geschichte .founder-promise__bottom .founder-lead { max-width: 34ch; margin: 0; color: var(--ink); font-size: clamp(14px, 1vw, 17px); line-height: 1.5; }
#geschichte .founder-promise__bottom .founder-lead span { display: inline; color: var(--muted); }
#geschichte .founder-signature { margin: -10px 0 0; color: var(--orange); font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: clamp(26px, 2.4vw, 38px); font-style: italic; line-height: 1.1; }
#geschichte .founder-signature > span { display: inline-block; transform: rotate(-4deg); }
#geschichte .founder-signature svg { display: block; width: 100%; height: 14px; overflow: visible; }
#geschichte .founder-signature path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#geschichte .founder-signature small { display: block; margin-top: 6px; color: var(--muted); font-family: inherit; font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-body, "DM Sans", sans-serif); }
#geschichte .founder-promise__link { color: var(--ink); text-decoration: none; }
#geschichte .founder-promise__link:hover i { border-color: var(--orange); }

/* Video lightbox */
#geschichte .founder-video-dialog { width: min(1120px, 92vw); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 22px; background: transparent; }
#geschichte .founder-video-dialog::backdrop { background: rgba(10,15,12,.78); backdrop-filter: blur(6px); }
#geschichte .founder-video-dialog .why-ossler-video__media { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; border-radius: 22px; background: #0b100d; }
#geschichte .founder-video-dialog .why-ossler-video__video { display: block; width: 100%; height: 100%; object-fit: cover; }
#geschichte .founder-video-dialog__close { position: absolute; z-index: 5; top: -52px; right: 0; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; color: #fff; font-size: 24px; line-height: 1; }
#geschichte .founder-video-dialog__close:hover { border-color: var(--orange); color: var(--orange); }
#geschichte .why-ossler-video__media.is-playing .why-ossler-video__play { visibility: hidden; }

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  #geschichte .founder-stage { height: auto; }
  #geschichte .founder-portrait { max-height: 520px; }
  #geschichte .founder-origin__title--b { text-align: left; }
  #geschichte .founder-promise__line { flex-wrap: wrap; white-space: normal; }
  #geschichte .founder-promise__line--pill { margin-left: 0; }
  #geschichte .founder-videopill { width: 210px; height: 100px; }
  #geschichte .founder-promise__hand { margin-left: 24px; }
  #geschichte .founder-promise__bottom .founder-ch1__bottom-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* =========================================================
   FOUNDER STORY — CHAPTER 01 / SCROLL 0%
   Only the opening composition. Chapters 2–4 keep the
   existing founder-story rules above.
   ========================================================= */

#geschichte .founder-ch1__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

#geschichte .founder-ch1__top .section-kicker,
#geschichte .founder-ch1__chapter {
  margin: 0;
}

#geschichte .founder-ch1__chapter {
  flex: 0 0 auto;
  justify-content: flex-end;
}

#geschichte .founder-ch1__chapter .section-kicker__label {
  color: var(--muted);
}

#geschichte .founder-ch1__rule {
  width: 100%;
  height: 1px;
  background: var(--line);
}

#geschichte .founder-ch1__top + .founder-ch1__rule {
  margin-top: 18px;
}

#geschichte .founder-ch1__headline-wrap {
  position: relative;
  margin-top: clamp(24px, 3.4vh, 44px);
}

#geschichte .founder-ch1__title {
  max-width: none;
}

#geschichte .founder-ch1__line {
  display: flex;
  align-items: center;
  min-width: 0;
}

#geschichte .founder-ch1__line--one {
  gap: clamp(20px, 2.2vw, 38px);
  white-space: nowrap;
}

#geschichte .founder-ch1__line--two {
  margin-top: .05em;
}

#geschichte .founder-ch1__indent {
  display: inline-block;
  margin-left: clamp(74px, 7.6vw, 132px);
}

#geschichte .founder-ch1__period {
  color: var(--orange);
}

#geschichte .founder-pill-slot {
  display: inline-block;
  width: 330px;
  height: 156px;
  flex: 0 0 330px;
  border-radius: 999px;
  vertical-align: middle;
}

#geschichte .founder-ch1__note {
  right: clamp(112px, 13vw, 220px);
  top: clamp(-24px, -1.3vw, -8px);
  color: var(--orange);
  font-size: clamp(16px, 1.18vw, 20px);
  transform: rotate(-5deg);
}

#geschichte .founder-ch1__note svg {
  width: 62px;
  margin: 1px 0 0 -36px;
  transform: rotate(17deg);
}

#geschichte .founder-ch1__note path {
  stroke: var(--orange);
}

#geschichte .founder-ch1__team {
  position: absolute;
  right: 1%;
  bottom: clamp(2px, .7vw, 12px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

#geschichte .founder-ch1__avatars {
  display: flex;
  align-items: center;
}

#geschichte .founder-ch1__avatars img {
  display: block;
  width: clamp(34px, 2.65vw, 44px);
  height: clamp(34px, 2.65vw, 44px);
  margin-left: -9px;
  border: 2px solid var(--background);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
}

#geschichte .founder-ch1__avatars img:first-child {
  margin-left: 0;
}

#geschichte .founder-ch1__team-copy {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

#geschichte .founder-ch1__team-copy strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

#geschichte .founder-ch1__bottom {
  margin-top: clamp(28px, 3.7vh, 48px);
}

#geschichte .founder-ch1__bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(180px, .72fr) minmax(220px, .86fr);
  gap: clamp(26px, 3.7vw, 64px);
  align-items: start;
  padding-top: 18px;
}

#geschichte .founder-ch1__bottom .founder-lead {
  max-width: 39ch;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: clamp(12px, .82vw, 14px);
  line-height: 1.5;
}

#geschichte .founder-ch1__identity {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

#geschichte .founder-ch1__identity strong,
#geschichte .founder-ch1__identity span {
  display: block;
}

#geschichte .founder-ch1__identity strong {
  margin-bottom: 3px;
  color: var(--ink);
  font-weight: 600;
}

#geschichte .founder-ch1__scroll {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-align: right;
}

#geschichte .founder-ch1__scroll i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: 0 0 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--orange);
  font-size: 15px;
  font-style: normal;
  letter-spacing: 0;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  #geschichte.is-story-pinned [data-founder-chapter="idee"] {
    left: 3%;
    top: 50%;
    width: 94%;
    max-width: none;
    z-index: 5;
  }

  #geschichte.is-story-pinned [data-founder-chapter="idee"] h2 {
    max-width: none;
    font-size: clamp(66px, 6vw, 100px);
    line-height: .9;
    letter-spacing: -.058em;
  }

  #geschichte.is-story-pinned [data-founder-chapter="idee"] .founder-lead {
    max-width: 39ch;
    margin: 0;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
}

@media (min-width: 900px) and (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  #geschichte.is-story-pinned [data-founder-chapter="idee"] {
    left: 4%;
    width: 92%;
  }

  #geschichte.is-story-pinned [data-founder-chapter="idee"] h2 {
    font-size: clamp(58px, 6.7vw, 80px);
  }

  #geschichte .founder-pill-slot {
    width: 270px;
    height: 128px;
    flex-basis: 270px;
  }

  #geschichte .founder-ch1__indent {
    margin-left: 66px;
  }

  #geschichte .founder-ch1__team {
    right: 0;
  }
}

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  #geschichte .founder-ch1__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  #geschichte .founder-ch1__chapter {
    justify-content: flex-start;
  }

  #geschichte .founder-ch1__headline-wrap {
    display: grid;
    gap: 26px;
    margin-top: 28px;
  }

  #geschichte .founder-ch1__line {
    display: block;
  }

  #geschichte .founder-ch1__line--one {
    white-space: normal;
  }

  #geschichte .founder-pill-slot {
    display: none;
  }

  #geschichte .founder-ch1__indent {
    margin-left: 0;
  }

  #geschichte .founder-ch1__note {
    position: relative;
    inset: auto;
    width: max-content;
    max-width: 100%;
    color: var(--orange);
    transform: rotate(-4deg);
  }

  #geschichte .founder-ch1__note svg {
    display: none;
  }

  #geschichte .founder-ch1__team {
    position: relative;
    inset: auto;
    width: max-content;
    max-width: 100%;
  }

  #geschichte .founder-ch1__bottom {
    margin-top: 36px;
  }

  #geschichte .founder-ch1__bottom-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #geschichte .founder-ch1__scroll {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Founder ch1: note above the pill, faces right after "gibt." */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  #geschichte .founder-ch1__note {
    right: auto;
    top: -52px;
    left: calc(4.35 * clamp(66px, 6vw, 100px) + clamp(20px, 2.2vw, 38px) + 210px);
  }
  #geschichte .founder-ch1__team {
    right: auto;
    left: calc(clamp(74px, 7.6vw, 132px) + 5.2 * clamp(66px, 6vw, 100px));
  }
}
@media (min-width: 900px) and (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  #geschichte .founder-ch1__note {
    top: -48px;
    left: calc(4.35 * clamp(58px, 6.7vw, 80px) + clamp(20px, 2.2vw, 38px) + 170px);
  }
  #geschichte .founder-ch1__team {
    left: calc(66px + 5.2 * clamp(58px, 6.7vw, 80px));
  }
}

/* =========================================================
   FOUNDER STORY — PINNED SCENES (chapters 2–4)
   Chapter 1 opens with the pill; afterwards the portrait
   becomes a small narrator avatar in the shared story bar.
   ========================================================= */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .brand-home main > #geschichte.is-story-pinned { padding-block: 0; }
  #geschichte.is-story-pinned .founder-stage { display: block; height: 100svh; min-height: 640px; }

  #geschichte.is-story-pinned .founder-portrait { position: absolute; z-index: 6; left: 36%; top: 14%; width: 330px; height: 156px; border-radius: 0; will-change: transform, clip-path; backface-visibility: hidden; }
  #geschichte.is-story-pinned .founder-portrait > img { aspect-ratio: auto; object-position: center 22%; }
  #geschichte.is-story-pinned .founder-portrait figcaption { display: none; }

  #geschichte.is-story-pinned .founder-storybar { position: absolute; z-index: 4; left: 3%; right: 3%; top: var(--story-top); display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 42px; }
  #geschichte.is-story-pinned .founder-storybar::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 18px); height: 1px; background: var(--line); }
  #geschichte.is-story-pinned .founder-storybar__left { position: relative; min-height: 42px; display: flex; align-items: center; }
  #geschichte .founder-narrator { display: flex; align-items: center; gap: 14px; }
  #geschichte .founder-narrator__slot { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--orange); }
  #geschichte .founder-narrator__copy { display: grid; gap: 2px; color: var(--muted); font-size: 11px; line-height: 1.25; }
  #geschichte .founder-narrator__copy strong { color: var(--ink); font-size: 12px; font-weight: 600; }
  #geschichte.is-story-pinned .founder-storybar__kicker { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; }
  #geschichte.is-story-pinned .founder-storybar__chapter { margin: 0; justify-content: flex-end; }
  #geschichte.is-story-pinned .founder-storybar__label { color: var(--muted); }

  #geschichte.is-story-pinned .founder-chapters { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; }
  #geschichte.is-story-pinned .founder-chapter { position: absolute; left: 3%; right: 3%; width: auto; top: calc(var(--story-top) + 84px); bottom: clamp(28px, 6vh, 64px); transform: none; pointer-events: auto; }

  /* Chapter 1 shares the story bar's top line so the swap is seamless. */
  #geschichte.is-story-pinned [data-founder-chapter="idee"] { top: var(--story-top); bottom: auto; width: auto; right: 3%; transform: none; }
  #geschichte.is-story-pinned .founder-ch1__top { min-height: 42px; }
  #geschichte.is-story-pinned .founder-ch1__headline-wrap { margin-top: clamp(28px, 10vh, 130px); }
  #geschichte.is-story-pinned .founder-ch1__bottom { margin-top: clamp(28px, 7vh, 90px); }

  /* Chapter 2 · Herkunft */
  #geschichte.is-story-pinned .founder-origin__title { position: absolute; }
  #geschichte.is-story-pinned .founder-origin__title--a { left: 0; top: 2%; }
  #geschichte.is-story-pinned .founder-origin__title--b { right: 0; bottom: 4%; margin: 0; }
  #geschichte.is-story-pinned .founder-route { position: absolute; inset: 0; display: block; pointer-events: none; }
  #geschichte .founder-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  #geschichte .founder-route path { fill: none; stroke: var(--orange); stroke-linecap: round; vector-effect: non-scaling-stroke; }
  #geschichte .founder-route__ghost { stroke-width: 1.4; stroke-dasharray: 3 7; opacity: .55; }
  #geschichte .founder-route__line { stroke-width: 2.2; }
  #geschichte .founder-route__pin { position: absolute; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: .2em; }
  #geschichte .founder-route__pin i { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(242,110,63,.14); transform: translate(-50%, 0); }
  #geschichte .founder-route__pin small { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
  #geschichte .founder-route__pin--from { left: 86%; top: 10.33%; transform: translateY(-50%); }
  #geschichte .founder-route__pin--to { left: 26.2%; top: 62%; transform: translateY(-50%); }
  #geschichte .founder-route__pin--to i { background: var(--background); border: 1.5px solid var(--ink); box-shadow: none; }
  #geschichte .founder-route__hand { position: absolute; left: 42%; top: 52%; color: var(--orange); font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: clamp(15px, 1.1vw, 19px); font-style: italic; transform: rotate(-7deg); white-space: nowrap; }
  #geschichte.is-story-pinned .founder-origin__caption { position: absolute; left: 0; bottom: 4%; max-width: 38ch; margin: 0; font-size: clamp(13px, .95vw, 16px); }

  /* Chapter 3 · Haltung: horizontal scroll through three people panels */
  #geschichte.is-story-pinned .founder-chapter--beliefs { display: flex; flex-direction: column; }
  #geschichte.is-story-pinned .founder-beliefs__viewport { position: relative; flex: 1 1 auto; margin-inline: -3.2vw; padding: 0; overflow: visible; }
  #geschichte.is-story-pinned .founder-beliefs__track { position: absolute; top: 0; bottom: 0; left: 0; gap: 2.6vw; align-items: stretch; will-change: transform; }
  #geschichte.is-story-pinned .founder-panel { width: clamp(420px, 44vw, 780px); height: 100%; aspect-ratio: auto; transform-origin: 50% 60%; }
  #geschichte.is-story-pinned .founder-panel { transform: scale(.9); opacity: .42; transition: transform .8s var(--ease-out), opacity .8s ease; backface-visibility: hidden; }
  #geschichte.is-story-pinned .founder-panel.is-active { transform: none; opacity: 1; }
  #geschichte .founder-beliefs__progress i { transition: width .6s var(--ease-out); }

  /* Chapter 4 · Versprechen */
  #geschichte.is-story-pinned .founder-chapter--promise { top: calc(var(--story-top) + 58px + 5vh); bottom: auto; }
}

@media (min-width: 900px) and (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  #geschichte .founder-videopill { width: 270px; height: 128px; }
  #geschichte .founder-promise__line--pill { margin-left: 66px; }
  #geschichte.is-story-pinned .founder-panel { width: clamp(380px, 52vw, 560px); }
}

/* Founder story — Sven's signature (chapter 4) */
#geschichte .founder-signature svg.founder-signature__svg {
  display: block;
  width: clamp(190px, 15.5vw, 280px);
  height: auto;
  margin: -14px 0 2px -6px;
  overflow: visible;
}
#geschichte .founder-signature svg.founder-signature__svg path { stroke: none; }

/* Route: Berlin label sits above-left of its pin. The line leaves the
   pin towards the upper right, so the label can never touch it. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  #geschichte .founder-route__pin--to {
    display: block;
    text-align: right;
    white-space: nowrap;
    transform: translate(calc(-100% + 8px), calc(-100% - 20px));
  }
  #geschichte .founder-route__pin--to b,
  #geschichte .founder-route__pin--to small { display: block; }
  #geschichte .founder-route__pin--to small { margin-top: 3px; }
  #geschichte .founder-route__pin--to i {
    position: absolute;
    right: 8px;
    bottom: -20px;
    transform: translate(50%, 50%);
  }
}

/* =========================================================
   TEAM DECK — don't clip the cards or their shadows.
   The stage used to hide overflow, which cut the cards' edges
   and left a hard-edged grey shadow box around the deck.
   ========================================================= */
@media (min-width: 761px) {
  /* Row layout: right side bleeds to the page edge, left edge clipped
     just outside the first card so leaving cards disappear cleanly. */
  .brand-team__stage {
    overflow: visible;
    perspective: none;
    clip-path: inset(-80px -100vw -80px -48px);
  }
  .brand-team-card,
  .brand-team-card.is-active,
  .brand-team-card:not(.is-active) {
    box-shadow: 0 10px 30px rgba(24, 34, 29, .06);
  }
}

/* Team cards: e-mail address no longer displayed; clicking the
   front card (or the ↗ button) opens an e-mail instead. */
.brand-team-card__email { display: none; }
.brand-team-card { border: 0; }
.brand-team-card .brand-team-card__body { min-height: 88px; }
.brand-team__carousel { padding-bottom: clamp(24px, 3vw, 48px); }

/* =========================================================
   VALUES — "Woran Sie uns messen können"
   Sticky intro on the left, five rows on the right. Each row's
   rule draws in and the row lights up as it crosses the middle
   of the screen.
   ========================================================= */
.values-v2__grid {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.5fr);
  gap: clamp(56px, 7vw, 128px);
  align-items: start;
}
.values-v2__intro { position: sticky; top: clamp(110px, 16vh, 170px); }
.values-v2__intro h2 { margin-top: 24px; max-width: 10ch; }
.values-v2__intro p { max-width: 34ch; margin-top: 26px; font-size: var(--body-lg); line-height: 1.55; }

.values-v2__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.values-v2__row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(28px, 3.2vw, 44px) 0;
}
.values-v2__row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
  transform: scaleX(var(--rule, 1));
}
.values-v2__num {
  padding-top: .55em;
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}
.values-v2__title h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 2.9vw, 50px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.045em;
  transition: color .5s ease;
}
.values-v2__claim {
  margin: 12px 0 0;
  color: var(--ink-soft) !important;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.values-v2__body {
  margin: 0;
  padding-top: .45em;
  max-width: 40ch;
  font-size: var(--body-md);
  line-height: 1.65;
}

/* Scroll states (only when JS + motion are on) */
.values-v2.is-animated .values-v2__row { --rule: 0; }
.values-v2.is-animated .values-v2__row .values-v2__title h3,
.values-v2.is-animated .values-v2__row .values-v2__claim,
.values-v2.is-animated .values-v2__row .values-v2__body { transition: color .5s ease, opacity .5s ease; }
.values-v2.is-animated .values-v2__row:not(.is-lit) .values-v2__title h3 { color: rgba(24, 34, 29, .28); }
.values-v2.is-animated .values-v2__row:not(.is-lit) .values-v2__claim,
.values-v2.is-animated .values-v2__row:not(.is-lit) .values-v2__body { color: rgba(24, 34, 29, .3) !important; }
.values-v2.is-animated .values-v2__row:not(.is-lit) .values-v2__num { color: rgba(242, 110, 63, .45); }

@media (max-width: 980px) {
  .values-v2__grid { grid-template-columns: 1fr; gap: 44px; }
  .values-v2__intro { position: static; }
  .values-v2__intro h2 { max-width: 12ch; }
}
@media (max-width: 640px) {
  .values-v2__row { grid-template-columns: 40px minmax(0, 1fr); }
  .values-v2__body { grid-column: 2; padding-top: 0; }
}

/* Video lightbox: never render in the page when it is not a real modal */
#geschichte .founder-video-dialog:not([open]) { display: none !important; }
#geschichte .founder-video-dialog:not(:modal) { display: none !important; }

/* ---------- Kapitel 4: reactive pill play button + magnetic lightbox play button ---------- */
#geschichte .founder-videopill__play {
  margin: -31px 0 0 -31px;
  transform: none;
  will-change: transform;
}
#geschichte .founder-videopill:hover .founder-videopill__play { transform: none; }
#geschichte .founder-videopill__play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: inset .45s var(--ease-out), border-color .35s ease;
}
#geschichte .founder-videopill.is-near .founder-videopill__play::after { inset: -16px; border-color: rgba(255, 255, 255, .75); }
@media (max-width: 1100px) { #geschichte .founder-videopill__play { margin: -26px 0 0 -26px; width: 52px; height: 52px; } }

#geschichte .founder-video-dialog .why-ossler-video__play-magnet {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .35s var(--ease-out), visibility .35s;
}
#geschichte .founder-video-dialog .why-ossler-video__play-inner { will-change: transform; }
#geschichte .founder-video-dialog .why-ossler-video__play-magnet .why-ossler-video__play {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
#geschichte .founder-video-dialog .why-ossler-video__media.is-playing .why-ossler-video__play-magnet,
#geschichte .founder-video-dialog .why-ossler-video__media.is-playing .why-ossler-video__duration {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Über uns — mobile alignment polish for Haltung + Versprechen */
@media (max-width: 899px) {
  #geschichte .founder-beliefs__viewport {
    margin-inline: 0;
    padding-inline: clamp(24px, 6.7vw, 28px);
    scroll-padding-inline: clamp(24px, 6.7vw, 28px);
  }

  #geschichte .founder-promise__line--pill {
    display: block;
    width: 100%;
    margin-left: 0;
  }

  #geschichte .founder-videopill__magnet {
    display: block;
    width: 100%;
    max-width: none;
  }

  #geschichte .founder-videopill {
    display: block;
    width: 100%;
    height: clamp(138px, 38vw, 162px);
    border-radius: 16px;
  }

  #geschichte .founder-promise__accent {
    display: block;
    margin-top: 18px;
  }
}

/* =========================================================
   ÜBER UNS — MOBILE GRID/RHYTHM ALIGNMENT
   Mobile-only. Desktop founder-story choreography is intentionally untouched.
   Keep the static mobile story on the same gutter + vertical rhythm as index.html.
   ========================================================= */
@media (max-width: 899px) {
  /* Match the homepage mobile section rhythm instead of the larger brand-page rhythm. */
  .about-page main > section:not(.hero) {
    padding-block: var(--section-y-m);
  }

  /* The story is already inside .site-container. Let the carousel viewport bleed
     back to the viewport edge, then re-introduce exactly one site gutter so the
     first slide aligns with all surrounding copy. */
  .about-page #geschichte .founder-beliefs__viewport {
    margin-inline: calc(var(--site-gutter) * -1);
    padding-inline: var(--site-gutter);
    scroll-padding-inline: var(--site-gutter);
  }

  /* Use the same compact mobile spacing language as index.html. */
  .about-page #geschichte .founder-stage {
    gap: var(--section-y-m);
  }

  .about-page #geschichte .founder-chapters {
    gap: var(--section-y-m);
  }

  .about-page #geschichte .founder-beliefs__head {
    margin-bottom: 24px;
  }

  .about-page #geschichte h2,
  .about-page #geschichte .founder-origin__title,
  .about-page #geschichte .founder-promise {
    font-size: clamp(38px, 10.5vw, 50px);
    line-height: .98;
    letter-spacing: -.05em;
  }

  .about-page #geschichte .founder-panel {
    width: min(calc(100vw - (2 * var(--site-gutter))), 420px);
    border-radius: 20px;
  }

  .about-page #geschichte .founder-panel figcaption {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .about-page #geschichte .founder-panel strong {
    font-size: clamp(30px, 8.8vw, 38px);
    line-height: 1;
  }

  .about-page #geschichte .founder-panel figcaption span {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.42;
  }

  .about-page #geschichte .founder-promise__bottom {
    margin-top: 28px;
  }

  .about-page #geschichte .founder-promise__hand {
    margin-top: 14px;
    margin-left: 20px;
  }
}

/* =========================================================
   ÜBER UNS — MOBILE BREATHING ROOM + PROJECT CARDS
   Mobile-only. Do not alter the desktop founder-story choreography.
   ========================================================= */
@media (max-width: 899px) {
  /* Chapter 4: give the headline / video / annotation / closing copy room to breathe. */
  .about-page #geschichte .founder-chapter--promise {
    padding-bottom: 8px;
  }

  .about-page #geschichte .founder-promise__line--pill {
    margin-top: 28px;
  }

  .about-page #geschichte .founder-videopill {
    height: clamp(158px, 43vw, 184px);
  }

  .about-page #geschichte .founder-promise__accent {
    margin-top: 26px;
  }

  .about-page #geschichte .founder-promise__hand {
    margin-top: 18px;
    margin-left: 22px;
  }

  .about-page #geschichte .founder-promise__bottom {
    margin-top: 48px;
  }

  .about-page #geschichte .founder-promise__bottom .founder-ch1__bottom-grid {
    gap: 30px;
    padding-top: 26px;
  }

  .about-page #geschichte .founder-promise__bottom .founder-lead {
    line-height: 1.62;
  }

  .about-page #geschichte .founder-signature {
    margin-top: 2px;
  }

  .about-page #geschichte .founder-promise__link {
    margin-top: 2px;
  }
}

@media (max-width: 760px) {
  /* Projects: use a true mobile stack instead of the former desktop composition. */
  .about-page .brand-projects__grid {
    gap: 34px;
  }

  .about-page .brand-projects__intro {
    order: -1;
    padding-right: 0;
  }

  .about-page .brand-projects__intro h2 {
    max-width: 10ch;
    margin-top: 20px;
  }

  .about-page .brand-projects__intro p {
    max-width: 34ch;
    margin-top: 20px;
    line-height: 1.55;
  }

  .about-page .brand-projects__intro .brand-text-link {
    margin-top: 24px;
  }

  .about-page .brand-projects__gallery,
  .about-page .brand-projects__gallery--cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 18px;
    min-height: 0;
    width: 100%;
  }

  .about-page .brand-projects__gallery::before {
    display: none;
  }

  .about-page .brand-project {
    width: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(24,34,29,.07);
  }

  .about-page .brand-project:hover,
  .about-page .brand-project:focus-visible {
    transform: none;
  }

  .about-page .brand-project--feature .brand-project__media,
  .about-page .brand-project--secondary .brand-project__media {
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 8px 8px 0;
    border-radius: 12px;
  }

  .about-page .brand-project__body,
  .about-page .brand-project--secondary .brand-project__body {
    min-height: 0;
    padding: 18px 18px 20px;
  }

  .about-page .brand-project__heading {
    padding-right: 52px;
  }

  .about-page .brand-project__heading strong,
  .about-page .brand-project--secondary .brand-project__heading strong {
    font-size: clamp(22px, 6.5vw, 26px);
  }

  .about-page .brand-project__facts,
  .about-page .brand-project__facts--compact {
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
  }

  .about-page .brand-project__facts > span:nth-child(3) {
    grid-column: 1 / -1;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .about-page .brand-project__arrow {
    top: 18px;
    right: 18px;
  }
}

@media (max-width: 520px) {
  /* Override the old 3-row gallery rule from the pre-card layout. */
  .about-page .brand-projects__gallery,
  .about-page .brand-projects__gallery--cards {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
}


/* =========================================================
   ÜBER UNS — project showcase uses the Aktuelle-Projekte card language
   Desktop composition stays one large + one smaller card.
   ========================================================= */
.about-page .brand-projects__gallery--cards::before {
  display: none;
}

.about-page .brand-projects__gallery--cards .brand-showcase-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(24, 34, 29, .065);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), border-color .34s ease, box-shadow .34s ease;
}

.about-page .brand-showcase-card--feature {
  height: 594px;
}

.about-page .brand-showcase-card--secondary {
  height: 492px;
  margin-top: 86px;
}

.about-page .brand-showcase-card .invest-card__media {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--surface);
}

.about-page .brand-showcase-card--feature .invest-card__media {
  height: 224px;
}

.about-page .brand-showcase-card--secondary .invest-card__media {
  height: 156px;
}

.about-page .brand-showcase-card .invest-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.about-page .brand-showcase-card .invest-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, rgba(18, 28, 23, .48), transparent 52%);
  transition: opacity .32s ease;
}

.about-page .brand-showcase-card .invest-card__hover-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 13px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: rgba(18,28,23,.58);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(7px);
  backdrop-filter: blur(10px);
  transition: opacity .28s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}

.about-page .brand-showcase-card .invest-card__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 18px 20px 14px;
}

.about-page .brand-showcase-card--secondary .invest-card__body {
  padding: 15px 16px 12px;
}

.about-page .brand-showcase-card .invest-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--slate);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
}

.about-page .brand-showcase-card .invest-card__badge--project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--orange) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 6%, var(--surface));
  color: var(--orange);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
}

.about-page .brand-showcase-card .invest-card__badge--project i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}

.about-page .brand-showcase-card .invest-card__statusline {
  display: block;
  margin-top: 10px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.about-page .brand-showcase-card__title {
  display: block;
  margin-top: 7px;
  font-size: clamp(24px, 1.7vw, 31px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.about-page .brand-showcase-card--secondary .brand-showcase-card__title {
  font-size: clamp(20px, 1.35vw, 25px);
}

.about-page .brand-showcase-card .invest-card__location {
  display: block;
  margin-top: 5px;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.4;
}

.about-page .brand-showcase-card .invest-card__yield-card {
  display: block;
  margin-top: 14px;
  padding: 11px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--orange) 3%, var(--surface));
}

.about-page .brand-showcase-card--secondary .invest-card__yield-card {
  margin-top: 11px;
  padding: 9px 10px 8px;
}

.about-page .brand-showcase-card .invest-card__yield-label,
.about-page .brand-showcase-card .invest-card__summary-grid small {
  display: block;
  color: var(--slate);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.about-page .brand-showcase-card .invest-card__yield-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

.about-page .brand-showcase-card .invest-card__yield-value {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
}

.about-page .brand-showcase-card .invest-card__yield-value strong {
  font-size: 28px;
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.055em;
}

.about-page .brand-showcase-card--secondary .invest-card__yield-value strong {
  font-size: 23px;
}

.about-page .brand-showcase-card .invest-card__yield-value span {
  margin-bottom: 2px;
  color: var(--slate);
  font-size: 10px;
  font-weight: 650;
}

.about-page .brand-showcase-card .invest-card__yield-delta {
  padding: 6px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  color: var(--orange);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.about-page .brand-showcase-card .invest-card__yield-note {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.about-page .brand-showcase-card .invest-card__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.about-page .brand-showcase-card .invest-card__summary-grid > span {
  min-width: 0;
}

.about-page .brand-showcase-card .invest-card__summary-grid strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.about-page .brand-showcase-card--secondary .invest-card__summary-grid strong {
  font-size: 10px;
}

.about-page .brand-showcase-card .invest-card__summary-grid small {
  margin-top: 4px;
}

.about-page .brand-showcase-card .invest-card__summary-grid > span:last-child strong {
  color: var(--orange);
}

.about-page .brand-showcase-card .invest-card__details {
  width: max-content;
  min-height: 34px;
  margin: auto 0 0 auto;
  padding: 5px 6px 5px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--orange) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  transition: background .28s ease, border-color .28s ease, color .28s ease;
}

.about-page .brand-showcase-card .invest-card__details-arrow {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.about-page .brand-showcase-card:hover,
.about-page .brand-showcase-card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--orange) 48%, var(--line));
  box-shadow: 0 20px 48px rgba(24, 34, 29, .11);
  outline: none;
}

.about-page .brand-showcase-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--orange) 72%, transparent);
  outline-offset: 3px;
}

.about-page .brand-showcase-card:hover .invest-card__image,
.about-page .brand-showcase-card:focus-visible .invest-card__image {
  transform: scale(1.035);
}

.about-page .brand-showcase-card:hover .invest-card__media::after,
.about-page .brand-showcase-card:focus-visible .invest-card__media::after {
  opacity: 1;
}

.about-page .brand-showcase-card:hover .invest-card__hover-hint,
.about-page .brand-showcase-card:focus-visible .invest-card__hover-hint {
  opacity: 1;
  transform: translateY(0);
}

.about-page .brand-showcase-card:hover .invest-card__details,
.about-page .brand-showcase-card:focus-visible .invest-card__details {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.about-page .brand-showcase-card:hover .invest-card__details-arrow,
.about-page .brand-showcase-card:focus-visible .invest-card__details-arrow {
  background: rgba(255,255,255,.17);
  transform: translateX(2px);
}

@media (max-width: 760px) {
  .about-page .brand-projects__gallery--cards .brand-showcase-card,
  .about-page .brand-projects__gallery--cards .brand-showcase-card--feature,
  .about-page .brand-projects__gallery--cards .brand-showcase-card--secondary {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 18px;
  }

  .about-page .brand-showcase-card--feature .invest-card__media,
  .about-page .brand-showcase-card--secondary .invest-card__media {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .about-page .brand-showcase-card .invest-card__body,
  .about-page .brand-showcase-card--secondary .invest-card__body {
    padding: 18px 18px 16px;
  }

  .about-page .brand-showcase-card .brand-showcase-card__title,
  .about-page .brand-showcase-card--secondary .brand-showcase-card__title {
    font-size: clamp(24px, 7vw, 29px);
  }

  .about-page .brand-showcase-card .invest-card__location {
    font-size: 13px;
  }

  .about-page .brand-showcase-card .invest-card__yield-card,
  .about-page .brand-showcase-card--secondary .invest-card__yield-card {
    margin-top: 16px;
    padding: 13px 14px 12px;
  }

  .about-page .brand-showcase-card .invest-card__yield-value strong,
  .about-page .brand-showcase-card--secondary .invest-card__yield-value strong {
    font-size: 30px;
  }

  .about-page .brand-showcase-card .invest-card__summary-grid strong,
  .about-page .brand-showcase-card--secondary .invest-card__summary-grid strong {
    font-size: 13px;
  }

  .about-page .brand-showcase-card .invest-card__details {
    margin-top: 18px;
  }
}

@media (hover: none) {
  .about-page .brand-showcase-card:hover {
    transform: none;
    box-shadow: 0 18px 48px rgba(24, 34, 29, .065);
  }

  .about-page .brand-showcase-card .invest-card__hover-hint {
    display: none;
  }
}


/* =========================================================
   ABOUT / CAREERS — full-width editorial chapter
   Removes the double outside spacing: the section itself is
   edge-to-edge and all breathing room lives inside its columns.
   ========================================================= */
.about-page main > section.brand-careers {
  padding-block: 0;
}

.about-page .brand-careers__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  min-height: clamp(34rem, 43vw, 42rem);
  overflow: hidden;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: #f5f6f3;
}

.about-page .brand-careers__panel > img {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 54% 48%;
}

.about-page .brand-careers__veil {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245,246,243,.16) 0%, rgba(245,246,243,0) 18%),
    linear-gradient(0deg, rgba(13,20,16,.18) 0%, rgba(13,20,16,0) 32%);
}

.about-page .brand-careers__copy {
  position: relative;
  z-index: 2;
  left: auto;
  bottom: auto;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: none;
  padding:
    clamp(4.5rem, 7vw, 7rem)
    clamp(3rem, 5vw, 5.5rem)
    clamp(4.5rem, 7vw, 7rem)
    max(var(--site-gutter), calc((100vw - var(--site-width)) / 2));
  color: var(--ink);
}

.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker,
.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__number,
.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__label {
  color: var(--muted);
}

.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__number {
  color: var(--orange);
}

.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__line {
  background: var(--line);
}

.brand-home.about-page .brand-careers .brand-careers__copy h2 {
  max-width: 8.6ch;
  margin-top: 1.75rem;
  color: var(--ink);
}

.brand-home.about-page .brand-careers .brand-careers__copy p {
  max-width: 31rem;
  margin-top: 1.75rem;
  color: var(--muted);
}

.about-page .brand-careers__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding: 0 0 .65rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
}

.about-page .brand-careers__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transition: background-color .25s ease;
}

.about-page .brand-careers__link span {
  color: var(--orange);
  transition: transform .25s var(--ease-out);
}

.about-page .brand-careers__link:hover,
.about-page .brand-careers__link:focus-visible {
  color: var(--ink);
}

.about-page .brand-careers__link:hover::after,
.about-page .brand-careers__link:focus-visible::after {
  background: var(--orange);
}

.about-page .brand-careers__link:hover span,
.about-page .brand-careers__link:focus-visible span {
  transform: translateX(.3rem);
}

.about-page .brand-careers__hand {
  z-index: 3;
  right: max(var(--site-gutter), calc((100vw - var(--site-width)) / 2));
  top: clamp(2.5rem, 5vw, 4.75rem);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}

@media (max-width: 900px) {
  .about-page main > section.brand-careers {
    padding-block: 0;
  }

  .about-page .brand-careers__panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .about-page .brand-careers__panel > img,
  .about-page .brand-careers__veil {
    grid-column: 1;
    grid-row: 1;
  }

  .about-page .brand-careers__panel > img {
    min-height: 0;
    aspect-ratio: 16 / 10;
    object-position: 54% 48%;
  }

  .about-page .brand-careers__copy {
    grid-column: 1;
    grid-row: 2;
    padding: var(--section-y-m) var(--site-gutter);
  }

  .brand-home.about-page .brand-careers .brand-careers__copy h2 {
    max-width: 9ch;
    margin-top: 1.5rem;
  }

  .brand-home.about-page .brand-careers .brand-careers__copy p {
    margin-top: 1.5rem;
  }

  .about-page .brand-careers__link {
    margin-top: 2rem;
  }

  .about-page .brand-careers__hand {
    display: block;
    right: var(--site-gutter);
    top: 1.75rem;
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .about-page .brand-careers__panel > img {
    aspect-ratio: 4 / 3;
  }

  .about-page .brand-careers__copy {
    padding-block: clamp(3.25rem, 14vw, 4.5rem);
  }
}


/* =========================================================
   ABOUT / CAREERS — Karriere hero language
   Mirrors the dedicated Karriere hero: editorial copy left,
   clipped team image + orange contour right.
   ========================================================= */
.about-page main > section.brand-careers {
  padding: var(--section-y) 0;
  border-block: 1px solid var(--line);
  background: var(--background);
}

.about-page .brand-careers__grid {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(2.75rem, 4.7vw, 4.5rem);
  align-items: center;
}

.about-page .brand-careers__copy {
  position: relative;
  z-index: 2;
  left: auto;
  bottom: auto;
  max-width: none;
  padding: 0;
  color: var(--ink);
}

.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker,
.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__label {
  color: var(--muted);
}

.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__number {
  color: var(--orange);
}

.brand-home.about-page .brand-careers .brand-careers__copy .section-kicker__line {
  background: var(--line);
}

.brand-home.about-page .brand-careers .brand-careers__copy h2 {
  max-width: 9.5ch;
  margin-top: 1.45rem;
  color: var(--ink);
  font-size: var(--type-section-xl);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.about-page .brand-careers__punctuation {
  color: var(--orange);
}

.brand-home.about-page .brand-careers .brand-careers__copy p {
  max-width: 34em;
  margin-top: 1.45rem;
  color: var(--muted);
  font-size: var(--body-md);
  line-height: 1.55;
}

.about-page .brand-careers__button {
  min-height: 3.3rem;
  margin-top: 1.65rem;
  padding: .45rem .6rem .45rem 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 .9rem 2.6rem rgba(24, 34, 29, .1);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    transform .35s var(--ease-out),
    background-color .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}

.about-page .brand-careers__button-arrow {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.11);
  color: #fff;
  font-size: .95rem;
  transition: transform .35s var(--ease-out);
}

.about-page .brand-careers__button:hover,
.about-page .brand-careers__button:focus-visible {
  transform: translateY(-.125rem);
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
  box-shadow: 0 1rem 2.7rem rgba(242, 110, 63, .2);
}

.about-page .brand-careers__button:hover .brand-careers__button-arrow,
.about-page .brand-careers__button:focus-visible .brand-careers__button-arrow {
  transform: translate(.125rem, -.125rem);
}

.about-page .brand-careers__media {
  position: relative;
  height: clamp(26rem, 29vw, 31.5rem);
  min-height: 0;
  margin: 0;
  isolation: isolate;
}

.about-page .brand-careers__media-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14.5% 100%, 0 78%);
  border-radius: 0 1.25rem 1.25rem 0;
  background: var(--neutral-7);
}

.about-page .brand-careers__media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(24, 34, 29, .2) 100%);
  pointer-events: none;
}

.about-page .brand-careers__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  transform: scale(1.015);
}

.about-page .brand-careers__media-arc {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 78%;
  overflow: visible;
  pointer-events: none;
}

.about-page .brand-careers__media-arc path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.about-page .brand-careers__caption {
  position: absolute;
  z-index: 3;
  left: 5rem;
  bottom: 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.4rem;
  padding: .5rem .95rem;
  border-radius: var(--radius-pill);
  background: rgba(24,34,29,.92);
  color: #fff;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1;
  backdrop-filter: blur(.45rem);
}

.about-page .brand-careers__caption-dot {
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}

/* The former handwritten image note is intentionally removed. */
.about-page .brand-careers__hand { display: none !important; }

@media (max-width: 1080px) {
  .about-page .brand-careers__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 2.5rem;
  }

  .about-page .brand-careers__media {
    height: clamp(25rem, 44vw, 31rem);
  }

  .about-page .brand-careers__caption { left: 4rem; }
}

@media (max-width: 820px) {
  .about-page main > section.brand-careers {
    padding: var(--section-y-m) 0;
  }

  .about-page .brand-careers__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-page .brand-careers__copy {
    grid-column: auto;
    grid-row: auto;
    padding: 0;
  }

  .brand-home.about-page .brand-careers .brand-careers__copy h2 {
    max-width: 10.5em;
    margin-top: 1.45rem;
  }

  .brand-home.about-page .brand-careers .brand-careers__copy p {
    max-width: 39em;
    margin-top: 1.45rem;
  }

  .about-page .brand-careers__button {
    margin-top: 1.65rem;
  }

  .about-page .brand-careers__media {
    height: min(68vw, 31rem);
    min-height: 24rem;
  }

  .about-page .brand-careers__media-arc { display: none; }

  .about-page .brand-careers__media-frame {
    clip-path: none;
    border-radius: 1.5rem;
  }

  .about-page .brand-careers__caption {
    left: 1.25rem;
    bottom: 1.25rem;
  }
}

@media (max-width: 520px) {
  .about-page .brand-careers__media {
    height: 74vw;
    min-height: 20rem;
  }

  .about-page .brand-careers__media-frame {
    border-radius: 1.15rem;
  }

  .about-page .brand-careers__button {
    width: 100%;
    justify-content: space-between;
  }
}