/* ============ Header / Navigation ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* without JavaScript: a plain bar in the page colour */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  /* stays in place while the page below cross-fades to the next one
     (motion.css, view transitions) */
  view-transition-name: site-header;
}

/* With JavaScript (html.js, set in <head>) the header lies on top of the
   dark hero / page header – light type, no surface – and gets a frosted
   surface once the page scrolls: a full-width bar on phones, a floating
   pill on desktop. Nothing changes size: the surface is a pseudo element
   that fades in, and the header only moves with transform, so the switch
   never causes layout (and the browser's scroll anchoring has nothing to
   fight with). */
html.js .site-header {
  background: none;
  border-bottom: 0;
  /* the first section starts underneath the header */
  margin-bottom: calc(var(--header-height) * -1);
  transition: transform 500ms var(--ease-soft);
}

html.js .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 1px 0 var(--color-border);
  opacity: 0;
  transition: opacity 320ms var(--ease-standard), transform 500ms var(--ease-soft);
}

html.js .site-header:is(.is-scrolled, .is-menu-open, .site-header--solid)::before {
  opacity: 1;
}

@media (max-width: 63.99em) {
  /* opaque and without blur: at 97 % the blur was invisible, but it had
     to be recomputed for every scrolled frame */
  html.js .site-header::before {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* pages without a dark top (404): the surface is there from the start and
   the page begins below the header */
html.js .site-header--solid {
  margin-bottom: 0;
}

/* Breakpoints for the header are in em so a larger browser font size
   switches to the compact menu instead of overflowing. */
@media (min-width: 64em) {
  /* a little wider than the page container, so the pill has room around
     the logo and the switch while both still line up with the content */
  .site-header__bar {
    max-width: calc(var(--container-max) + 1.5rem);
    padding-inline: 2rem;
  }

  html.js .site-header::before {
    inset: 6px max(0.5rem, calc((100% - var(--container-max) - 1.5rem) / 2 + 0.5rem));
    border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    box-shadow: var(--shadow-md);
    transform: scale(0.985, 0.88);
  }

  html.js .site-header:is(.is-scrolled, .site-header--solid)::before {
    transform: none;
  }

  html.js .site-header:is(.is-scrolled, .site-header--solid) {
    transform: translateY(8px);
  }
}

/* ---- light header content while it sits on the dark top ---- */

.brand__logo,
.brand__sub,
.lang-switch a,
.theme-switch__ghost {
  transition: color var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .brand__logo {
  filter: invert(1);
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .brand__sub {
  color: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(255, 255, 255, 0.4);
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .nav__list > li > a,
html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .nav__dropdown-toggle {
  color: #fff;
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .nav__list > li > a[aria-current="page"],
html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .nav__item--dropdown:has([aria-current="page"]) > .nav__dropdown-toggle {
  color: var(--color-accent-light);
  border-bottom-color: var(--color-accent-light);
}

@media (hover: hover) and (pointer: fine) {
  html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .nav__list > li > a:hover,
  html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .nav__dropdown-toggle:hover {
    color: var(--color-accent-light);
    border-bottom-color: var(--color-accent-light);
  }
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .lang-switch a {
  color: rgba(255, 255, 255, 0.75);
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .lang-switch a[aria-current="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .theme-switch,
html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .mobile-nav-toggle {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) .theme-switch__ghost {
  color: rgba(255, 255, 255, 0.78);
}

html.js .site-header:not(.is-scrolled, .is-menu-open, .site-header--solid) :focus-visible {
  outline-color: var(--color-accent-light);
}

/* the header logo is a solid-black line-art SVG; inverting it turns it
   white for dark mode without needing a second asset. The footer logo is
   the dedicated white variant and lives outside .site-header, so it is
   unaffected. */
html.dark .site-header .brand__logo {
  filter: invert(1);
}

/* generic hook for any other solid-black logo mark placed on a surface that
   flips with the theme (e.g. the large mark on the Unternehmen page) */
html.dark .theme-aware-logo {
  filter: invert(1);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  flex-shrink: 0;
}

.brand:hover {
  color: var(--color-ink);
}

.brand__logo {
  height: 46px;
  width: auto;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}

.brand__sub {
  display: none;
}

@media (min-width: 640px) {
  .brand__sub {
    display: inline;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--color-slate);
    letter-spacing: 0.04em;
    margin-left: var(--space-2);
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border-strong);
    text-transform: uppercase;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast);
}

.nav__list a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .nav__list a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}

.nav__item--dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-heading);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
  .nav__dropdown-toggle:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}

/* on a product page the "Produkte" item shows where you are, like the
   other nav items do */
.nav__item--dropdown:has([aria-current="page"]) > .nav__dropdown-toggle {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.nav__item--dropdown[data-open="true"] .chevron {
  transform: rotate(180deg);
}

.nav__dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 280px;
  padding: var(--space-2);
  z-index: 50;
  /* drops in 4 px and fades (150 ms); hidden via visibility so the
     exit can fade too */
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px) scale(0.98);
  transform-origin: 50% 0;
  transition: opacity 200ms var(--ease-standard), transform 260ms var(--ease-soft), visibility 0s linear 200ms;
}

/* invisible bridge between the menu item and the panel, so the pointer can
   travel down without the menu closing (it opens on hover, nav.js) */
.nav__dropdown-panel::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto 0;
  height: 12px;
}

.nav__item--dropdown[data-open="true"] .nav__dropdown-panel {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%);
  transition-delay: 0s;
}

.nav__dropdown-panel a {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  border-bottom: none;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .nav__dropdown-panel a:hover {
    background: var(--color-bg);
    color: var(--color-accent);
  }
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-family: var(--font-heading);
  font-weight: 600;
}

.lang-switch a {
  color: var(--color-slate);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.lang-switch a[aria-current="true"],
.mobile-nav__lang [aria-current="true"] {
  color: var(--color-ink);
  background: var(--color-surface-2);
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  /* round like the theme switch next to it */
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.mobile-nav-toggle:active,
.theme-switch:active {
  transform: scale(0.97);
}

.mobile-nav-toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-toggle .icon-close {
  display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Sliding pill toggle — a knob carries the active mode's icon and travels
   between a dim moon hint (left, always present) and a dim sun hint
   (right, always present); the knob's own background simply covers
   whichever hint isn't active. */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 60px;
  height: 30px;
  padding: 3px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base),
    transform var(--duration-fast) var(--ease-standard);
}

/* 30 px tall switch, 44 px tall touch area */
.theme-switch::before {
  content: "";
  position: absolute;
  inset: -7px -2px;
}

.theme-switch__ghost {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.theme-switch__ghost svg {
  width: 100%;
  height: 100%;
}

.theme-switch__ghost--moon {
  left: 8px;
  color: var(--color-slate);
}

.theme-switch__ghost--sun {
  right: 8px;
  color: var(--color-slate);
}

.theme-switch__knob {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  color: var(--color-ink);
  transform: translateX(30px);
  transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base),
    color var(--duration-base);
}

html.dark .theme-switch__knob {
  transform: translateX(0);
}

.theme-switch__knob svg {
  width: 14px;
  height: 14px;
  display: block;
}

.theme-switch__knob .icon-sun {
  display: block;
}

.theme-switch__knob .icon-moon {
  display: none;
}

html.dark .theme-switch__knob .icon-sun {
  display: none;
}

html.dark .theme-switch__knob .icon-moon {
  display: block;
}

.theme-switch--mobile {
  margin-left: auto;
  margin-right: var(--space-2);
}

@media (min-width: 64em) {
  .theme-switch--mobile {
    display: none;
  }
}

@media (min-width: 64em) {
  .mobile-nav-toggle {
    display: none;
  }
}

.nav {
  display: none;
}

@media (min-width: 64em) {
  .nav {
    display: flex;
  }
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-bg);
  z-index: 90;
  overflow-y: auto;
  /* scrolling inside the menu never scrolls the page behind it */
  overscroll-behavior: contain;
  padding: var(--space-5) var(--container-pad) var(--space-7);
}

.mobile-nav[data-open="true"] {
  display: block;
}

/* opens and closes with a fade and a 10 px drop (display is switched at
   the end of the exit, where the browser supports it; otherwise closing is
   instant). Only with JavaScript — without it the menu is simply open. */
html.js .mobile-nav {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 240ms var(--ease-standard), transform 360ms var(--ease-soft), display 360ms;
  transition-behavior: allow-discrete;
}

html.js .mobile-nav[data-open="true"] {
  opacity: 1;
  transform: none;
}

@starting-style {
  html.js .mobile-nav[data-open="true"] {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* the entries follow one after another */
@keyframes nav-item-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

html.js .mobile-nav[data-open="true"] .mobile-nav__list > li,
html.js .mobile-nav[data-open="true"] > .mobile-nav__lang,
html.js .mobile-nav[data-open="true"] > .btn {
  animation: nav-item-in 520ms var(--ease-soft) both;
}

html.js .mobile-nav[data-open="true"] .mobile-nav__list > li:nth-child(2) { animation-delay: 45ms; }
html.js .mobile-nav[data-open="true"] .mobile-nav__list > li:nth-child(3) { animation-delay: 90ms; }
html.js .mobile-nav[data-open="true"] .mobile-nav__list > li:nth-child(4) { animation-delay: 135ms; }
html.js .mobile-nav[data-open="true"] > .mobile-nav__lang { animation-delay: 180ms; }
html.js .mobile-nav[data-open="true"] > .btn { animation-delay: 225ms; }

@media (min-width: 64em) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav__list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.mobile-nav__list li {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__list a,
.mobile-nav__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-1);
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.mobile-nav__sublist {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0 0 0 var(--space-3);
  display: none;
}

.mobile-nav__sublist[data-open="true"] {
  display: block;
}

/* the product list unfolds instead of popping open (height: auto can be
   animated where interpolate-size is supported; elsewhere it opens at once,
   as before) */
html.js .mobile-nav__sublist {
  display: block;
  height: 0;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  interpolate-size: allow-keywords;
  transition: height 380ms var(--ease-soft), margin-bottom 380ms var(--ease-soft), opacity 260ms var(--ease-standard),
    visibility 0s linear 380ms;
}

html.js .mobile-nav__sublist[data-open="true"] {
  height: auto;
  margin-bottom: var(--space-2);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-nav__subtoggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.mobile-nav__sublist li:last-child {
  border-bottom: 0;
}

.mobile-nav__sublist a {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 400;
  padding: var(--space-2) var(--space-1);
  color: var(--color-slate);
}

.mobile-nav__lang {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

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

.site-footer {
  background: var(--color-dark);
  color: var(--color-dark-text-soft);
  /* separates the footer from the dark contact band above it */
  border-top: 1px solid var(--color-dark-border);
}

.footer__top {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
  grid-template-columns: 1fr;
}

/* tablets: 2 × 2, so "Öffnungszeiten" and the long product names keep
   their full width; four columns from 64em */
@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .footer__top {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__logo {
  width: 100%;
  max-width: 240px;
  height: auto;
}

.footer__tagline {
  color: var(--color-dark-text-soft);
  max-width: 32ch;
  font-size: var(--text-sm);
  /* keeps wrapped lines close to equal length instead of a ragged last line */
  text-wrap: balance;
}

.footer__heading {
  /* an h2 (the page outline goes h1 → footer sections), sized as a label */
  line-height: var(--leading-snug);
  font-family: var(--font-heading);
  color: var(--color-dark-text);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li {
  margin-bottom: var(--space-2);
}

.footer__list a {
  color: var(--color-dark-text-soft);
  text-decoration: none;
  font-size: var(--text-sm);
}

/* taller touch area for the small footer links; inline padding doesn't
   change the layout */
.footer__list a,
.footer__legal a,
.footer__address a,
.breadcrumb a {
  padding-block: 5px;
}

.site-footer a {
  color: var(--color-dark-text-soft);
}

.site-footer :focus-visible {
  outline-color: var(--color-accent-light);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover,
  .footer__list a:hover {
    color: var(--color-dark-text);
  }
}

.footer__address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.footer__hours dt {
  color: var(--color-dark-text-soft);
}

.footer__hours dd {
  margin: 0;
  color: var(--color-dark-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.footer__bottom {
  border-top: 1px solid var(--color-dark-border);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}

.footer__legal {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal li {
  margin: 0;
}

.footer__legal a {
  color: var(--color-dark-text-soft);
  text-decoration: none;
}

.footer__bottom p {
  margin: 0;
  color: var(--color-dark-text-soft);
}

/* stacked single-column footer on mobile reads better centered than
   left-aligned — logo, headings, link lists and hours all centered as a
   unit rather than hugging the left edge. Placed after the base rules
   above so it wins the cascade at equal specificity regardless of source
   order elsewhere in the file. */
@media (max-width: 767px) {
  .footer__top {
    text-align: center;
  }

  .footer__brand {
    align-items: center;
  }

  .footer__hours {
    width: fit-content;
    margin-inline: auto;
  }

  .footer__bottom {
    justify-content: center;
    text-align: center;
  }
}

/* ============ Grid helpers ============ */

/* Grid/flex items default to min-width:auto, which lets wide content (e.g.
   images with a width attribute) force the track wider than its container
   and break out of the viewport. Reset to 0 wherever we rely on shrinking. */
.two-col > *,
.product-detail > *,
.footer__top > *,
.grid > * {
  min-width: 0;
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

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

/* ============ Hero (homepage) — pour video, fades into the page ============ */

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-section {
  position: relative;
  overflow: hidden;
  /* generous bottom padding gives the fade below room to be gradual
     without crossing through the badge/title/subtitle/buttons */
  padding-block: var(--space-8) 10.5rem;
  text-align: center;
  /* fades to the page's own background at the bottom edge so the next
     section meets it seamlessly, instead of a hard line — uses the
     mode-aware token so this still works when the light/dark toggle flips.
     Stop spacing follows an ease-in-out curve (slow → fast → slow) rather
     than a linear ramp, so the rate of change never jumps abruptly at
     either end — that jump is what reads as a hard edge even when the
     colors themselves interpolate smoothly. */
  background: linear-gradient(
    180deg,
    #1b1e22 0%,
    #1b1e22 74%,
    color-mix(in srgb, #1b1e22 97%, var(--color-bg)) 77%,
    color-mix(in srgb, #1b1e22 89%, var(--color-bg)) 80%,
    color-mix(in srgb, #1b1e22 74%, var(--color-bg)) 83%,
    color-mix(in srgb, #1b1e22 50%, var(--color-bg)) 87%,
    color-mix(in srgb, #1b1e22 26%, var(--color-bg)) 91%,
    color-mix(in srgb, #1b1e22 11%, var(--color-bg)) 94%,
    color-mix(in srgb, #1b1e22 3%, var(--color-bg)) 97%,
    var(--color-bg) 100%
  );
}

@media (max-width: 768px) {
  .hero-section {
    padding-block: var(--space-7) 6rem;
  }
}

.hero-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-section__poster,
.hero-section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.hero-section__video {
  opacity: 0;
  transition: opacity 600ms var(--ease-standard);
}

.hero-section__video.is-playing {
  opacity: 1;
}

.hero-section__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* even darkening so the light type stays readable */
  background: linear-gradient(180deg, rgba(18, 20, 23, 0.36) 0%, rgba(18, 20, 23, 0.46) 30%, rgba(18, 20, 23, 0.58) 100%);
}

/* The footage dissolves into the page below the buttons: the section's own
   fade colour is painted over it with the same eased stops as the section
   background, so there is no seam where the dark band meets the light
   page. It is a layer of the section, not of the footage — the footage
   drifts down while the hero scrolls away (motion.css) and would otherwise
   carry the fade out of the frame and leave a hard edge. (Done as an
   overlay rather than a mask: a mask on a playing video doubles the
   compositor work.) */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 74%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 97%, var(--color-bg)) 3%, transparent) 77%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 89%, var(--color-bg)) 11%, transparent) 80%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 74%, var(--color-bg)) 26%, transparent) 83%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 50%, var(--color-bg)) 50%, transparent) 87%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 26%, var(--color-bg)) 74%, transparent) 91%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 11%, var(--color-bg)) 89%, transparent) 94%,
    color-mix(in srgb, color-mix(in srgb, #1b1e22 3%, var(--color-bg)) 97%, transparent) 97%,
    var(--color-bg) 100%
  );
}

.hero-section__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: var(--color-dark-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hero-section__title {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.06;
  margin-bottom: var(--space-4);
  /* solid light type on the dark video (no gradient text) */
  color: var(--color-dark-text);
  text-shadow: 0 2px 24px rgba(18, 20, 23, 0.35);
  animation: fade-in 700ms var(--ease-standard) both;
  animation-delay: 80ms;
}

.hero-section__subtitle {
  text-wrap: balance;
  font-size: var(--text-lg);
  color: var(--color-dark-text);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  animation: fade-in 700ms var(--ease-standard) both;
  animation-delay: 200ms;
}

.hero-section__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  animation: fade-in 700ms var(--ease-standard) both;
  animation-delay: 320ms;
}

.hero-section .btn--outline {
  color: #fff;
}

.hero-section :focus-visible {
  outline-color: var(--color-accent-light);
}

/* touch devices keep :hover after a tap — the label must stay white on the
   dark hero there (beats the generic .btn--outline:hover reset) */
.hero-section .btn--outline:hover {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .hero-section .btn--outline:hover {
    border-color: #fff;
    background: #fff;
    /* fixed dark tone, not the mode-aware --color-ink — this hero band is
       always dark regardless of the light/dark toggle, and --color-ink
       flips to a LIGHT color in dark mode, which made this text nearly
       invisible against the white hover background */
    color: var(--color-dark);
  }
}

/* pause / play for the hero animation (added by assets/js/hero-video.js) */
.hero-section__toggle {
  position: absolute;
  z-index: 2;
  right: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  bottom: 32%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(18, 20, 23, 0.45);
  backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.hero-section__toggle svg {
  width: 16px;
  height: 16px;
}

.hero-section__toggle:active {
  transform: scale(0.94);
}

.hero-section__toggle:focus-visible {
  outline: 3px solid var(--color-accent-light);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .hero-section__toggle:hover {
    background: rgba(18, 20, 23, 0.7);
  }
}

/* phones and small tablets: right edge, below the stacked buttons and
   above the fade (the header now lies on the hero's top edge) */
@media (max-width: 768px) {
  .hero-section__toggle {
    bottom: 9.5rem;
  }
}

/* ============ Page header (interior pages) ============ */

.page-header {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.page-header__title {
  margin-bottom: var(--space-2);
}

/* centred-feeling lead lines on wider screens; phones keep normal
   ("pretty") wrapping so the lead uses the full width */
@media (min-width: 640px) {
  .page-header p {
    text-wrap: balance;
  }
}

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-slate);
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-1);
  color: var(--color-border-strong);
}

.breadcrumb a {
  color: var(--color-slate);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover {
    color: var(--color-accent);
  }
}

/* ============ Product detail layout ============ */

.product-detail {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.product-detail__media {
  background: var(--color-panel);
  border-radius: var(--radius-md);
  padding: clamp(20px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(28px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail__media {
  margin: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.product-detail__media img {
  filter: var(--shadow-object);
}

.product-detail__media figcaption,
.product-figure figcaption {
  font-size: var(--text-xs);
  color: var(--color-slate);
  text-align: center;
  max-width: 46ch;
}

/* second product view inside a text section (e.g. floor plate side view) */
.product-figure {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-panel);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.product-figure img {
  width: 100%;
  height: auto;
  filter: var(--shadow-object);
}

@media (min-width: 900px) {
  .product-detail__media {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

/* ============ Utility layout ============ */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.two-col {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .two-col--centered {
    align-items: center;
  }
}