/* ==========================================================================
   Rodenstock Eyewear – rodenstock-eyewear.com (local build)
   Design tokens follow the Rodenstock Corporate Design Manual:
   Dark Blue #0c2340, background grey = Dark Blue 20 % gradation.
   ========================================================================== */

/* ---------- Fonts (Trade Gothic Next, licensed webfont package) ---------- */
@font-face {
  font-family: "Trade Gothic Next";
  src: url("../fonts/TradeGothicNextLTW05-Rg.woff2") format("woff2"),
       url("../fonts/TradeGothicNextLTW05-Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trade Gothic Next";
  src: url("../fonts/TradeGothicNextLTW05-Bold.woff2") format("woff2"),
       url("../fonts/TradeGothicNextLTW05-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trade Gothic Next Cond";
  src: url("../fonts/TradeGothicNextLTW05-Cond.woff2") format("woff2"),
       url("../fonts/TradeGothicNextLTW05-Cond.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trade Gothic Next Cond";
  src: url("../fonts/TradeGothicNextLTW05-BoldCn.woff2") format("woff2"),
       url("../fonts/TradeGothicNextLTW05-BoldCn.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --c-navy: #0c2340;
  --c-grey: #ced3d9;
  --c-grey-soft: #e7e9ec;
  --c-ink: #24272b;
  --c-ink-soft: #4b525b;
  --c-muted: #6b7380;
  --c-white: #ffffff;
  --c-line: #dfe2e6;

  --font-sans: "Trade Gothic Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cond: "Trade Gothic Next Cond", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --header-h: 76px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 56px);
  --section-space: clamp(56px, 9vw, 140px);
  --panel-pad: clamp(28px, 3.6vw, 56px);

  --sticky-top: var(--header-h); /* where sticky content docks: below the header ... */
  --dwell: 45vh;                  /* extra scroll during which a full-screen frame holds still */
  --index-h: 58px;                /* sticky series index on the eyewear page */

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 700ms;
}

/* ... or at the very top when the header is only shown at the start of the page */
:root[data-header="top-only"] { --sticky-top: 0px; }

@media (min-width: 900px) {
  :root { --header-h: 96px; }
}

@media (max-width: 899px) {
  :root { --header-h: 64px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--sticky-top);
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
picture,
svg { display: block; max-width: 100%; }

img { height: auto; }

[hidden] { display: none !important; }

a { color: inherit; }

main { overflow-x: clip; }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none; }
.hero :focus-visible,
.panel--navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--c-white); }
.hero :focus-visible { box-shadow: 0 0 0 5px rgba(12, 35, 64, 0.85); }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 24px rgba(12, 35, 64, 0.06);
}

:root[data-header="top-only"] body { padding-top: var(--header-h); }
:root[data-header="top-only"] .site-header {
  position: fixed;
  left: 0;
  right: 0;
  transition: transform 450ms var(--ease-out), border-color 300ms ease, box-shadow 300ms ease;
}
:root[data-header="top-only"].header-hidden .site-header:not(:has(:focus-visible)) {
  transform: translateY(-100%);
  box-shadow: none;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand-logo {
  display: inline-flex;
  color: var(--c-ink);
  text-decoration: none;
}
.brand-logo img { width: clamp(136px, 13vw, 176px); height: auto; }

.site-nav__list {
  display: flex;
  gap: clamp(32px, 7vw, 132px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-family: var(--font-cond);
  font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

@media (min-width: 900px) {
  .site-nav { display: flex; flex: 1; justify-content: center; }
  .site-nav__list { gap: clamp(48px, 12vw, 200px); }
  .site-nav__link { font-size: clamp(1.25rem, 0.55rem + 1.6vw, 2.2rem); }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  margin: 6px auto;
  background: currentColor;
  transition: transform 300ms var(--ease-out), opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, transform 250ms var(--ease-out), visibility 0s linear 250ms;
  }
  .site-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms ease, transform 250ms var(--ease-out);
  }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 24px;
  }
  .site-nav__link {
    display: block;
    padding-block: 14px;
    font-size: 1.35rem;
    border-bottom: 1px solid var(--c-line);
  }
  .site-nav__link::after { display: none; }
}

/* ---------- Language switch (EN / DE) ----------
   Small condensed caps, clearly secondary to the main nav; the current language
   is in full ink and underlined, the other one muted. On desktop the switch is
   taken out of the flex flow (right end of the bar) so the centred main nav keeps
   its position; below 900 px it sits in the bar next to the menu toggle. */
.lang-switch__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang-switch__list li { display: flex; align-items: center; }
.lang-switch__list li + li::before {
  content: "";
  width: 1px;
  height: 0.95em;
  background: var(--c-grey);
}
.lang-switch__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 44px;
  padding-inline: 8px;
  color: var(--c-muted);
  font-family: var(--font-cond);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 250ms ease;
}
.lang-switch__link:hover,
.lang-switch__link[aria-current="page"] { color: var(--c-ink); }
.lang-switch__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: calc(8px + 0.08em);
  bottom: 10px;
  height: 1px;
  background: currentColor;
}

@media (min-width: 900px) {
  .lang-switch {
    position: absolute;
    top: 50%;
    right: calc(var(--gutter) - 8px);
    transform: translateY(-50%);
  }
  .lang-switch__link { font-size: clamp(0.95rem, 0.7rem + 0.4vw, 1.15rem); }
}

@media (max-width: 899px) {
  .lang-switch { margin-left: auto; }
  .nav-toggle { order: 1; }
  /* keyboard order = what you see (logo, EN | DE, menu) where supported (Chromium); elsewhere the DOM order */
  .site-header__inner { reading-flow: flex-visual; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 34px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--font-cond);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.btn--light { color: var(--c-white); }
.btn--light:hover { background: var(--c-white); color: var(--c-navy); }
.btn--dark { color: var(--c-ink); }
.btn--dark:hover { background: var(--c-ink); color: var(--c-white); }
.btn--small { min-height: 38px; padding: 8px 22px; font-size: 0.8rem; }

@media (max-width: 899px) {
  .btn--small { min-height: 44px; }
}

/* ---------- Hero (campaign video) ---------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  max-height: 1600px;
  overflow: hidden;
  background: #8d9196;
  color: var(--c-white);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  transform: scale(1.02); /* hides 1px encoding edges of the source film */
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(20, 24, 30, 0.22), rgba(20, 24, 30, 0.22)),
    linear-gradient(180deg, rgba(12, 35, 64, 0.08) 0%, rgba(12, 35, 64, 0) 30%),
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(20, 24, 30, 0.5) 0%, rgba(20, 24, 30, 0.14) 70%, rgba(20, 24, 30, 0.05) 100%);
}

.hero--clean { place-items: end center; }
.hero--clean .hero__content { padding-top: 0; padding-bottom: clamp(80px, 15vh, 170px); }
.hero--clean::after {
  background: linear-gradient(180deg, rgba(12, 35, 64, 0.06) 0%, rgba(12, 35, 64, 0) 30%,
              rgba(12, 35, 64, 0) 60%, rgba(12, 35, 64, 0.3) 100%);
}

.hero .btn--light { background: rgba(12, 35, 64, 0.45); }
.hero .btn--light:hover { background: var(--c-white); }

.hero__content {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 5vh, 56px);
  padding-inline: var(--gutter);
  padding-top: 6vh;
  text-align: center;
}

.hero__title {
  display: grid;
  font-family: var(--font-cond);
  font-weight: 400;
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
}
.hero__title-main {
  font-size: clamp(2.9rem, 1.2rem + 6.4vw, 7.25rem);
  letter-spacing: 0.005em;
}
.hero__title-sub {
  font-size: clamp(1.75rem, 0.9rem + 3.4vw, 4.25rem);
  letter-spacing: 0.01em;
}

.hero__control {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(16px, 3vh, 32px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(12, 35, 64, 0.6);
  color: var(--c-white);
  font-family: var(--font-cond);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.hero__control:hover { background: rgba(12, 35, 64, 0.85); }
.hero__control svg { width: 12px; height: 12px; }

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 30px);
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  transform: translateX(-50%);
  animation: cue 2.4s var(--ease-out) 2;
}
@keyframes cue {
  0% { transform: translateX(-50%) scaleY(0); transform-origin: top; }
  50% { transform: translateX(-50%) scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; }
}

/* ---------- Split sections (text panel + photo) ---------- */
.section { padding-top: var(--section-space); }

@media (max-width: 899px) {
  .section--contact { padding-bottom: var(--section-space); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.split--media-left .split__media { order: -1; }

.split__media { position: relative; overflow: hidden; }
.split__media img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

@media (min-width: 900px) {
  .split--square .split__media img { aspect-ratio: 1 / 1; }
  .split .panel { position: relative; top: -6%; }
  .section--contact .split .panel { top: 0; }
}

.panel {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 30px);
  min-height: 60%;
  padding: var(--panel-pad);
  background: var(--c-grey);
  color: var(--c-ink);
}
.panel--navy { background: var(--c-navy); color: var(--c-white); }
.panel .btn { align-self: flex-start; margin-top: clamp(4px, 1vw, 16px); }
.panel--airy .panel__title { margin-bottom: clamp(8px, 3vw, 52px); }
.panel--airy .btn { margin-top: clamp(16px, 3vw, 44px); }

.panel__title {
  font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.panel__kicker {
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.panel__text {
  max-width: 34em;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.panel__text + .panel__text { margin-top: -0.4em; }
.panel--navy .panel__text { color: rgba(255, 255, 255, 0.92); }

.panel__spaced-title {
  display: grid;
  gap: 0.35em;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.panel__label {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.panel--contact { min-height: 70%; }
.panel--contact .panel__label { margin-top: auto; padding-top: clamp(32px, 7vw, 120px); }
.panel--contact .panel__label + .contact-link { margin-top: calc(clamp(18px, 2.2vw, 30px) * -0.6); }

.contact-link {
  align-self: flex-start;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  text-decoration: underline;
  text-decoration-color: rgba(36, 39, 43, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 250ms ease;
}
.contact-link:hover { text-decoration-color: currentColor; }

@media (max-width: 899px) {
  .contact-link { padding-block: 10px; }
}

@media (max-width: 899px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split__media { order: -1; }
  .split__media img { aspect-ratio: 4 / 5; }
  .split .panel {
    position: relative;
    z-index: 1;
    margin: -56px 16px 0;
  }
}

/* ---------- Scroll-in (Brand Mindset -> Form Follows Lightness) ----------
   Pinned stage modelled on the Sitecore Symposium 2026 landing page
   (GSAP ScrollTrigger timeline, re-built here with CSS sticky + vanilla JS).
   main.js writes smoothed progress values (0 -> 1) onto the section:
   --exit  : Brand Mindset leaves – text box to the left, photo to the right
   --mid   : interlude – words glide to the centre, hairlines draw, "+" appears
   --enter : Form Follows Lightness is revealed – text box wipes in from the top,
             photo wipes in from the bottom (clip-path), image settles
   --txt   : copy of the new panel rises in, staggered via --i
   The pinned layout is gated by a media query (same as SCROLL_IN_QUERY in
   main.js) so it exists before the first layout – scroll restoration and
   #anchors then land correctly. Without JS, on narrow or short viewports and
   with reduced motion the panels simply stack. */
.scroll-in { position: relative; }

.scroll-in__stage { display: grid; gap: var(--section-space); }

.scroll-in__panel { width: 100%; }

.scroll-in__interlude,
.scroll-in__progress { display: none; }

@media (min-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .js .scroll-in {
    --travel: 210vh;
    height: calc(100vh - var(--sticky-top) + var(--travel) + 2 * var(--dwell));
    padding-block: 0;
    margin-bottom: calc(var(--section-space) * 0.6);
  }
  .js .scroll-in--direct { --travel: 150vh; }
  .js .scroll-in .panel { padding-block: min(var(--panel-pad), 5.5vh); }
  .js .scroll-in .panel--airy .panel__title { margin-bottom: min(clamp(8px, 3vw, 52px), 3vh); }
  .js .scroll-in__stage {
    position: sticky;
    top: var(--sticky-top);
    height: calc(100vh - var(--sticky-top));
    gap: 0;
    align-items: center;
    overflow: hidden;
  }
  .js .scroll-in__panel,
  .js .scroll-in__interlude { grid-area: 1 / 1; }
  .js .scroll-in .split__media img { max-height: calc(100vh - var(--sticky-top) - 72px); }
  .js .scroll-in__panel .panel,
  .js .scroll-in__panel .split__media { will-change: transform, opacity, clip-path; }

  /* phase 1 – Brand Mindset exits: text box to the left, photo to the right */
  .js .scroll-in__panel--a .panel {
    transform: translate3d(calc(var(--exit, 0) * -62vw), 0, 0);
    opacity: calc(1 - var(--exit, 0) * 1.1);
  }
  .js .scroll-in__panel--a .split__media {
    transform: translate3d(calc(var(--exit, 0) * 62vw), 0, 0);
    opacity: calc(1 - var(--exit, 0) * 0.9);
  }
  .js .scroll-in__panel--a .split__media img {
    transform: scale(calc(1 + var(--exit, 0) * 0.12));
  }

  /* phase 2 – typographic interlude (decorative duplicate, aria-hidden) */
  .js .scroll-in__interlude {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: clamp(28px, 4vw, 72px);
    align-self: stretch;
    width: 100%;
    padding-inline: var(--gutter);
    opacity: calc(min(var(--mid, 0) * 1.6, 1) - var(--enter, 0) * 4);
    pointer-events: none;
  }

  /* phase 3 – Form Follows Lightness: clip-path wipes, image settles, copy rises */
  .js .scroll-in__panel--b .panel {
    clip-path: inset(0 0 calc((1 - var(--enter, 0)) * 100%) 0);
  }
  .js .scroll-in__panel--b .split__media {
    clip-path: inset(calc((1 - var(--enter, 0)) * 100%) 0 0 0);
  }
  .js .scroll-in__panel--b .split__media img {
    opacity: calc(var(--enter, 0) * 1.5);
    transform: translate3d(calc((1 - var(--enter, 0)) * 12px), 0, 0) scale(calc(1.06 - var(--enter, 0) * 0.06));
  }
  .js .scroll-in__panel--b .panel > * {
    --t: clamp(0, calc(var(--txt, 0) * 1.5 - var(--i, 0) * var(--stagger, 0.25)), 1);
    opacity: var(--t);
    transform: translate3d(0, calc((1 - var(--t)) * 36px), 0);
  }
  /* the German copy has three paragraphs (--i up to 3): a shorter step lets the last one
     arrive at full opacity when --txt reaches 1 (--i * step must not exceed 0.5) */
  :root:lang(de) .scroll-in__panel--b .panel { --stagger: calc(0.5 / 3); }
  /* alternative, German: the three paragraphs make panel B taller than its square photo –
     tighter spacing keeps it on the photo (centred, see below) and inside the pinned stage */
  :root.js[data-scale="container"]:lang(de) .scroll-in__panel--b .split .panel {
    gap: clamp(14px, 1.6vw, 22px);
    padding-block: min(var(--panel-pad), 4vh, 40px);
  }

  /* once revealed, drop compositor hints so the copy renders crisply */
  .js .scroll-in[data-settled] .scroll-in__panel--b .panel,
  .js .scroll-in[data-settled] .scroll-in__panel--b .split__media { will-change: auto; }
  .js .scroll-in[data-settled] .scroll-in__panel--b .panel > *,
  .js .scroll-in[data-settled] .scroll-in__panel--b .split__media img { transform: none; }

  /* only the visible panel is interactive */
  .js .scroll-in__panel--a { z-index: 2; }
  .js .scroll-in__panel--b { z-index: 3; pointer-events: none; }
  .js .scroll-in[data-state="b"] .scroll-in__panel--a { pointer-events: none; }
  .js .scroll-in[data-state="b"] .scroll-in__panel--b { pointer-events: auto; }

  .js .scroll-in__progress {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 4;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
  }
}

@media (max-height: 759px) {
  .js .scroll-in__progress { display: none; }
  .js .scroll-in .split .panel { top: 0; }
}

/* alternative, German: centre the taller Form Follows Lightness panel on its photo instead of
   lifting it by 6 %, with the tighter spacing also where the scroll-in is not pinned (reduced motion,
   no JavaScript, low windows); on short screens slightly smaller copy keeps it inside the pinned stage */
@media (min-width: 900px) {
  :root[data-scale="container"]:lang(de) .scroll-in__panel--b .split .panel {
    top: 0;
    gap: clamp(14px, 1.6vw, 22px);
    padding-block: min(var(--panel-pad), 40px);
  }
}
@media (min-width: 900px) and (min-height: 600px) and (max-height: 759px) and (prefers-reduced-motion: no-preference) {
  :root.js[data-scale="container"]:lang(de) .scroll-in__panel--b .panel__text { font-size: 1rem; line-height: 1.4; }
}

.scroll-in__line {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 1px;
  background: var(--c-navy);
  opacity: 0.55;
}
.scroll-in__line--left { left: 0; transform-origin: left; transform: scaleX(calc(var(--mid, 0) * 0.97)); }
.scroll-in__line--right { right: 0; transform-origin: right; transform: scaleX(calc(var(--mid, 0) * 0.97)); }
.scroll-in__word {
  grid-row: 1;
  align-self: end;
  padding-bottom: clamp(14px, 2.2vh, 26px);
  font-family: var(--font-cond);
  font-size: clamp(2.6rem, 0.8rem + 5.4vw, 6.75rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}
.scroll-in__sub {
  grid-row: 2;
  align-self: start;
  padding-top: clamp(14px, 2.2vh, 26px);
  color: var(--c-ink-soft);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.scroll-in__word--left,
.scroll-in__sub--left {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  transform: translate3d(calc((1 - var(--mid, 0)) * -9vw), 0, 0);
}
.scroll-in__word--right,
.scroll-in__sub--right {
  grid-column: 3;
  justify-self: start;
  transform: translate3d(calc((1 - var(--mid, 0)) * 9vw), 0, 0);
}
.scroll-in__word--right { color: var(--c-navy); font-weight: 700; }
.scroll-in__plus {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  background:
    linear-gradient(var(--c-navy), var(--c-navy)) center / 100% 2px no-repeat,
    linear-gradient(var(--c-navy), var(--c-navy)) center / 2px 100% no-repeat;
  transform: scale(var(--mid, 0)) rotate(calc((1 - var(--mid, 0)) * 90deg));
}

.scroll-in__progress span {
  width: 36px;
  height: 2px;
  background: var(--c-grey);
  overflow: hidden;
}
.scroll-in__progress span::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--c-navy);
  transform-origin: left;
}
.scroll-in__progress span:nth-child(1)::after { transform: scaleX(var(--exit, 0)); }
.scroll-in__progress span:nth-child(2)::after { transform: scaleX(var(--mid, 0)); }
.scroll-in__progress span:nth-child(3)::after { transform: scaleX(var(--enter, 0)); }
.scroll-in--direct .scroll-in__progress span:nth-child(2)::after { transform: scaleX(var(--enter, 0)); }

/* ---------- Frames: full-screen sections that hold briefly (desktop) ----------
   Each frame is one viewport tall plus --dwell; its content sticks while the
   extra distance is scrolled, so a perfectly framed section "rests" before the
   next one moves in. Same gate idea as the scroll-in (wide, tall, motion ok). */
@media (min-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .js .frame {
    --frame-top: var(--sticky-top);
    --frame-h: calc(100vh - var(--frame-top));
    height: calc(var(--frame-h) + var(--dwell));
  }
  .js .frame--below-index { --frame-top: calc(var(--sticky-top) + var(--index-h)); }
  .js .frame__sticky {
    position: sticky;
    top: var(--frame-top);
    display: grid;
    align-content: center;
    height: var(--frame-h);
  }
  .js .frame .section,
  .js .frame .series,
  .js .frame--series + .frame--series .series { padding-block: 0; border-top: 0; }
  .js .frame .split__media img,
  .js .frame .collage { max-height: calc(var(--frame-h) - 64px); }
  .js .frame .series__visual { justify-self: center; width: min(100%, calc(var(--frame-h) - 64px)); }
}

/* ---------- Campaign collage ---------- */
.campaign {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 3px;
  aspect-ratio: 9 / 10;
}
.collage__item { overflow: hidden; margin: 0; }
.collage__item picture { display: block; height: 100%; }
.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.collage__item:hover img { transform: scale(1.03); }
.collage__item--1 { grid-column: 1; grid-row: 1 / 8; }
.collage__item--2 { grid-column: 2; grid-row: 1 / 5; }
.collage__item--3 { grid-column: 1; grid-row: 8 / 13; }
.collage__item--4 { grid-column: 2; grid-row: 5 / 13; }

@media (max-width: 899px) {
  .campaign { grid-template-columns: minmax(0, 1fr); }
  .campaign .panel { order: 2; margin: -56px 16px 0; position: relative; z-index: 1; }
  .collage { aspect-ratio: 4 / 5; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-navy);
  color: var(--c-white);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 44px) var(--gutter);
}
.site-footer__logo { color: var(--c-white); }
.site-footer__logo img { width: 132px; height: auto; }
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(28px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  display: inline-block;
  padding-block: 4px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 250ms ease;
}
.site-footer__nav a:hover { text-decoration-color: currentColor; }

@media (max-width: 899px) {
  .site-footer__nav a { padding-block: 12px; }
}
.site-footer__legal {
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
}

/* ---------- Eyewear subpage ---------- */
.page-intro {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 64px) var(--gutter) clamp(16px, 2vw, 28px);
}
.page-intro__eyebrow {
  margin-bottom: 18px;
  color: var(--c-muted);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.page-intro__title {
  font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}

.series-index {
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-block: 1px solid var(--c-line);
  backdrop-filter: blur(8px);
}
.series-index ul {
  display: flex;
  height: calc(var(--index-h) - 2px);
  gap: clamp(18px, 3.2vw, 48px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.series-index ul::-webkit-scrollbar { display: none; }
.series-index a {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--c-muted);
  font-family: var(--font-cond);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 250ms ease, border-color 250ms ease;
}
.series-index a:hover { color: var(--c-ink); }
.series-index a[aria-current="true"] { color: var(--c-navy); border-bottom-color: var(--c-navy); }

.series {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5.5vw, 96px);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 112px) var(--gutter);
}
.frame--below-index { scroll-margin-top: var(--index-h); }
.frame--series + .frame--series .series { border-top: 1px solid var(--c-grey-soft); }
.series--reverse .series__visual { order: 2; }

.series__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--c-grey-soft);
}
.series__visual img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1600ms var(--ease-out);
}
.series:hover .series__visual img { transform: scale(1.025); }

.series__body { display: grid; gap: clamp(18px, 2.2vw, 30px); min-width: 0; }

.series__title {
  display: grid;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}
.series__name { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.5rem); }
.series__claim {
  margin-top: 0.12em;
  font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.35rem);
  letter-spacing: -0.03em;
}
.series__text {
  max-width: 31em;
  color: var(--c-ink);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.12rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

@media (max-width: 899px) {
  .series { grid-template-columns: minmax(0, 1fr); }
  .series--reverse .series__visual { order: 0; }
  .series__visual img { aspect-ratio: 4 / 3; }
}

/* ---------- Product carousel ---------- */
.carousel { position: relative; margin-top: clamp(4px, 1vw, 12px); }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--carousel-gap)) / 2);
  gap: var(--carousel-gap);
  --carousel-gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  scroll-snap-align: start;
  margin: 0;
}

@media (min-width: 560px) {
  .carousel__slide { scroll-snap-align: none; }
  .carousel__slide:nth-child(2n + 1) { scroll-snap-align: start; }
}
.carousel__slide img {
  width: 100%;
  aspect-ratio: 2800 / 1287;
  object-fit: contain;
  transition: transform 500ms var(--ease-out);
}
.carousel__slide:hover img { transform: translateY(-3px); }
.carousel__caption {
  margin-top: 6px;
  padding-right: 10%;
  color: var(--c-ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: right;
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(14px, 2vw, 22px);
}
.carousel__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 250ms ease, background-color 250ms ease, color 250ms ease, opacity 250ms ease;
}
.carousel__btn:hover:not([aria-disabled="true"]) { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.carousel__btn[aria-disabled="true"] { color: rgba(36, 39, 43, 0.35); border-color: rgba(223, 226, 230, 0.6); cursor: default; }
.carousel__btn svg { width: 18px; height: 18px; }

.carousel__dots { display: flex; gap: 8px; margin-inline: 4px; }
.carousel__dot {
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  display: block;
  height: 2px;
  background: #868e99;
  transition: background-color 300ms ease, height 300ms ease;
}
.carousel__dot[aria-current="true"]::before { height: 3px; background: var(--c-navy); }

@media (max-width: 559px) {
  .carousel__track { grid-auto-columns: 86%; }
}

/* quiet variant: thin chevrons beside the frames, hairline position marks below */
.carousel--subtle { padding-inline: 42px; }
.carousel--subtle .carousel__controls {
  justify-content: center;
  margin-top: 6px;
}
.carousel--subtle .carousel__btn {
  position: absolute;
  color: var(--c-muted);
  top: 0;
  bottom: 30px;
  width: 42px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.carousel--subtle .carousel__btn--prev { left: 0; }
.carousel--subtle .carousel__btn--next { right: 0; }
.carousel--subtle .carousel__btn svg { width: 30px; height: 30px; }
.carousel--subtle .carousel__btn:hover:not([aria-disabled="true"]) { background: transparent; color: var(--c-muted); }
@media (hover: hover) {
  .carousel--subtle .carousel__btn:hover:not([aria-disabled="true"]) { color: var(--c-navy); }
}
.carousel--subtle .carousel__btn[aria-disabled="true"] { color: rgba(134, 142, 153, 0.3); }
.carousel--subtle .carousel__dots { gap: 6px; margin: 0; }
.carousel--subtle .carousel__dot { width: 18px; height: 24px; }

@media (max-width: 559px) {
  .carousel--subtle { padding-inline: 0; }
  .carousel--subtle .carousel__track { grid-auto-columns: 100%; }
}

/* ---------- Legal pages ---------- */
.legal {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(64px, 8vw, 128px);
}
.legal__title {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.legal__source {
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: 16px 20px;
  background: var(--c-grey-soft);
  color: var(--c-ink-soft);
  font-size: 0.9rem;
}
/* German pages: "available in English only" note, shown in the same box as the source line */
.legal__note {
  padding: 16px 20px 0;
  background: var(--c-grey-soft);
  color: var(--c-ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-wrap: balance;
}
.legal__note + .legal__source { padding-top: 4px; }
.legal__content { color: var(--c-ink); }
.legal__content h2 {
  margin: 2.2em 0 0.6em;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.legal__content p,
.legal__content ul,
.legal__content ol { margin: 0 0 1em; }
.legal__content li { margin-bottom: 0.4em; }
.legal__content a {
  color: var(--c-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal__table-wrap { margin: 1.4em 0 2em; overflow-x: auto; }
.legal__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
@media (min-width: 720px) {
  .legal__content td:first-child { width: 24%; overflow-wrap: anywhere; }
  .legal__content td:nth-child(3) { min-width: 14em; }
}
.legal__content th,
.legal__content td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.legal__content th { background: var(--c-grey-soft); font-weight: 700; }

@media (max-width: 719px) {
  .legal__content table,
  .legal__content tbody,
  .legal__content tr,
  .legal__content td { display: block; width: auto; min-width: 0; }
  .legal__content thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .legal__content tr { padding-block: 10px; border-bottom: 1px solid var(--c-line); }
  .legal__content td { padding: 4px 0; border: 0; overflow-wrap: anywhere; }
  .legal__content td::before {
    content: attr(data-label);
    display: block;
    color: var(--c-ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}

/* ---------- Version chooser (root index.html) ---------- */
.chooser { background: var(--c-grey-soft); }
.chooser__main {
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 8vw, 120px);
}
.chooser__logo { width: clamp(160px, 16vw, 220px); height: auto; }
.chooser__heading {
  margin-top: clamp(28px, 4vw, 56px);
  font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}
.chooser__lead { max-width: 40em; margin-top: 12px; color: var(--c-ink-soft); }
/* versions: one column on phones, one horizontal card per row on tablets, three columns from 1000 px
   (the featured version spans the full width, see below) */
.chooser__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(28px, 4vw, 48px);
}
.chooser__card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;  /* language rows line up at the bottom of every card */
  gap: 18px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--c-white);
}
.chooser__media { display: block; overflow: hidden; background: var(--c-grey); aspect-ratio: 16 / 10; }
.chooser__thumb { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.chooser__title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 400; letter-spacing: -0.02em; }
.chooser__list { margin: 0; padding-left: 1.1em; color: var(--c-ink-soft); }
.chooser__list li { margin-bottom: 0.35em; }
.chooser__langs {
  display: grid;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.chooser__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chooser__lang {
  grid-column: 1 / -1;
  color: var(--c-muted);
  font-family: var(--font-cond);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chooser__links .btn { padding-inline: 10px; text-align: center; }
.chooser__shared { margin-top: clamp(28px, 4vw, 48px); }
.chooser__subheading { margin-bottom: 10px; font-size: 1.2rem; font-weight: 700; }

@media (min-width: 640px) and (max-width: 999px) {
  .chooser__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(20px, 3vw, 32px);
  }
  .chooser__media { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .chooser__title,
  .chooser__list,
  .chooser__langs { grid-column: 2; }
}

@media (min-width: 1000px) {
  .chooser__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the featured (final) version: a wide card above the others, with links to its film variants */
.chooser__films-block {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.chooser__films-title { font-size: 1rem; font-weight: 700; }
.chooser__films { display: grid; gap: 4px; }
.chooser__film-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the separator belongs to the following link, so it never hangs at a line end and is not read out */
.chooser__film-list li + li::before {
  content: "·";
  content: "·" / "";
  margin-right: 10px;
  color: var(--c-muted);
}
.chooser__film-list a { color: var(--c-navy); text-underline-offset: 0.2em; }

@media (min-width: 640px) {
  .chooser__card--featured {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr auto auto;
    column-gap: clamp(20px, 3vw, 40px);
  }
  .chooser__card--featured .chooser__media { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .chooser__card--featured > :not(.chooser__media) { grid-column: 2; }
}
@media (min-width: 1000px) {
  .chooser__card--featured { grid-column: 1 / -1; }
}

/* ---------- Proportional desktop layout (requested version) ----------
   Geometry and type measured from the briefing mockups (16:9 frames, slides
   4-15): both columns meet at the centre line, main-page photos run the full
   frame height (~47 vw), text panels are ~43 vw wide and span 13.4 %-73.8 % of
   the frame height, type scales with the screen like the slides.
   1u = 1 % of a 16:9 frame width (falls back to the height on wider screens). */
@media (min-width: 900px) {
  :root[data-scale="viewport"] {
    --u: min(1vw, calc(100vh / 56.25), 28px);
    --fh: calc(100vh - var(--sticky-top));
    --footer-h: max(calc(var(--fh) * 0.142), 104px);
    --section-gap: clamp(64px, 14vh, 180px);
  }

  /* white space between consecutive full-screen sections (Get in Touch + footer stay flush, slide 8) */
  :root[data-scale="viewport"] .hero + .scroll-in,
  :root[data-scale="viewport"] .scroll-in + .frame,
  :root[data-scale="viewport"] .frame + .frame { margin-top: var(--section-gap); }
  :root[data-scale="viewport"] .scroll-in { margin-bottom: 0; }

  /* split sections (slides 4, 5, 6, 8) */
  :root[data-scale="viewport"] .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    max-width: none;
    height: var(--fh);
    padding-inline: 0;
  }
  :root[data-scale="viewport"] .split__media { height: 100%; }
  :root[data-scale="viewport"] .split__media picture { display: block; height: 100%; }
  :root[data-scale="viewport"] .split__media img,
  :root[data-scale="viewport"] .frame .split__media img,
  :root[data-scale="viewport"] .scroll-in .split__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
  :root[data-scale="viewport"] .split .panel,
  :root[data-scale="viewport"] .scroll-in .panel {
    top: 0;
    min-height: calc(var(--fh) * 0.604);
    margin-top: calc(var(--fh) * 0.134);
    padding: calc(2.4 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)) calc(3.6 * var(--u));
    gap: calc(2.4 * var(--u));
  }
  :root[data-scale="viewport"] .panel--navy { padding-left: calc(2.9 * var(--u)); }
  /* outer margins: ~3.4 vw on the photo side, ~7 vw on the panel side */
  :root[data-scale="viewport"] .split:not(.split--media-left) .panel { margin-left: 7vw; }
  :root[data-scale="viewport"] .split:not(.split--media-left) .split__media { margin-right: 3.4vw; }
  :root[data-scale="viewport"] .split--media-left .split__media { margin-left: 3.4vw; }
  :root[data-scale="viewport"] .split--media-left .panel { margin-right: 7vw; }

  /* Form Follows Lightness (slide 5): wider panel, square photo centred in the frame */
  :root[data-scale="viewport"] .scroll-in__panel--b .panel {
    margin-left: 2.9vw;
    padding-left: calc(2.6 * var(--u));
    gap: calc(1.8 * var(--u));
  }
  :root[data-scale="viewport"] .scroll-in__panel--b .split__media {
    align-self: center;
    justify-self: start;
    width: min(44.5vw, calc(var(--fh) * 0.8));
    height: auto;
    margin-right: 0;
  }
  :root[data-scale="viewport"] .scroll-in__panel--b .split__media img { height: auto; aspect-ratio: 1 / 1; }
  /* German: three paragraphs – tighter paragraph spacing and bottom padding keep the panel
     clearly inside the photo height on 16:9 screens (it would end a few px below the photo) */
  :root[data-scale="viewport"]:lang(de) .scroll-in__panel--b .panel { padding-bottom: calc(2.4 * var(--u)); }
  :root[data-scale="viewport"]:lang(de) .scroll-in__panel--b .panel__text + .panel__text {
    margin-top: calc(-0.4 * var(--u));
  }

  /* Get in Touch (slide 8): photo + panel fill the frame above the footer */
  :root[data-scale="viewport"] .section--contact .split { height: calc(var(--fh) - var(--footer-h)); }
  :root[data-scale="viewport"] .frame--last { --frame-h: calc(var(--fh) - var(--footer-h)); }
  :root[data-scale="viewport"] .section--contact .panel {
    min-height: calc(var(--fh) * 0.607);
    margin-top: calc(var(--fh) * 0.132);
    padding: calc(6.5 * var(--u)) calc(1.5 * var(--u)) calc(2.6 * var(--u)) calc(8.1 * var(--u));
  }
  :root[data-scale="viewport"] .section--contact .panel__title {
    font-size: calc(6.4 * var(--u));
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  :root[data-scale="viewport"] .panel--contact .panel__label { padding-top: calc(6 * var(--u)); }
  :root[data-scale="viewport"] .panel--contact .panel__label + .contact-link { margin-top: calc(-1.6 * var(--u)); }
  :root[data-scale="viewport"] .site-footer__inner {
    flex-wrap: nowrap;
    max-width: none;
    height: var(--footer-h);
    padding: 0 7vw 0 3.4vw;
  }
  :root[data-scale="viewport"] .site-footer__legal {
    order: 2;
    flex: 1 1 18em;
    width: auto;
    padding-top: 0;
    border-top: 0;
  }
  :root[data-scale="viewport"] .site-footer__nav { order: 3; }
  :root[data-scale="viewport"] .site-footer__nav a { font-size: max(13px, calc(1.3 * var(--u))); }

  /* Experience Lightness Campaign (slide 7) */
  :root[data-scale="viewport"] .campaign {
    grid-template-columns: 46.2vw minmax(0, 1fr);
    align-items: start;
    max-width: none;
    height: var(--fh);
    padding-inline: 0;
  }
  :root[data-scale="viewport"] .campaign .panel {
    min-height: calc(var(--fh) * 0.606);
    margin: calc(var(--fh) * 0.13) 0 0 7.2vw;
    padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)) calc(5.3 * var(--u));
    gap: calc(2.6 * var(--u));
  }
  :root[data-scale="viewport"] .collage,
  :root[data-scale="viewport"] .frame .collage {
    height: var(--fh);
    max-height: none;
    aspect-ratio: auto;
    margin-right: 2.9vw;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 36.8fr) minmax(0, 19.8fr) minmax(0, 43.4fr);
    gap: 2px;
  }
  :root[data-scale="viewport"] .collage__item--1 { grid-column: 1; grid-row: 1 / 3; }
  :root[data-scale="viewport"] .collage__item--2 { grid-column: 2; grid-row: 1; }
  :root[data-scale="viewport"] .collage__item--3 { grid-column: 1; grid-row: 3; }
  :root[data-scale="viewport"] .collage__item--4 { grid-column: 2; grid-row: 2 / 4; }

  /* type (sizes measured relative to the frame width) */
  :root[data-scale="viewport"] .panel__title { font-size: calc(5.1 * var(--u)); line-height: 1.02; }
  :root[data-scale="viewport"] .panel--airy .panel__title,
  :root[data-scale="viewport"] .scroll-in .panel--airy .panel__title { margin-bottom: calc(4.5 * var(--u)); }
  :root[data-scale="viewport"] .panel__kicker { font-size: calc(1.85 * var(--u)); }
  :root[data-scale="viewport"] .panel__text {
    max-width: none;
    font-size: max(15px, calc(1.55 * var(--u)));
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  :root[data-scale="viewport"] .panel__text + .panel__text { margin-top: calc(0.4 * var(--u)); }
  :root[data-scale="viewport"] .campaign .panel__text { font-size: max(14px, calc(1.5 * var(--u))); line-height: 1.5; letter-spacing: -0.01em; }
  :root[data-scale="viewport"] .panel__spaced-title { gap: 0.55em; font-size: calc(3.25 * var(--u)); letter-spacing: 0.155em; }
  :root[data-scale="viewport"] .panel__label { font-size: max(12px, calc(1.5 * var(--u))); }
  :root[data-scale="viewport"] .contact-link { font-size: max(14px, calc(1.3 * var(--u))); }
  :root[data-scale="viewport"] .btn {
    min-height: calc(3.7 * var(--u));
    padding: calc(1 * var(--u)) calc(3.4 * var(--u));
    font-size: max(13px, calc(1.4 * var(--u)));
  }
  :root[data-scale="viewport"] .panel--airy .btn { margin-top: calc(3.6 * var(--u)); }

  /* eyewear series (slides 9-15): square visual (44.5 vw / 80 % of the frame) against the centre line */
  :root[data-scale="viewport"] .series,
  :root[data-scale="viewport"] .frame .series {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    max-width: none;
    height: var(--fh);
    padding: 0;
  }
  :root[data-scale="viewport"] .series__visual,
  :root[data-scale="viewport"] .frame .series__visual {
    justify-self: end;
    width: min(44.5vw, calc(var(--fh) * 0.8));
  }
  :root[data-scale="viewport"] .series--reverse .series__visual,
  :root[data-scale="viewport"] .frame .series--reverse .series__visual { justify-self: start; }
  :root[data-scale="viewport"] .series__body {
    align-self: start;
    margin-top: calc((var(--fh) - min(44.5vw, var(--fh) * 0.8)) / 2 + 2.2 * var(--u));
    padding: 0 4.5vw 0 6.2vw;
    gap: calc(3 * var(--u));
  }
  :root[data-scale="viewport"] .series--reverse .series__body { padding: 0 5vw 0 5.7vw; }
  :root[data-scale="viewport"] .series__name { font-size: calc(4.8 * var(--u)); }
  :root[data-scale="viewport"] .series__claim { font-size: calc(3.3 * var(--u)); }
  :root[data-scale="viewport"] .series__text {
    max-width: 33vw;
    margin-top: calc(1.4 * var(--u));
    font-size: max(15px, calc(1.62 * var(--u)));
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  /* frames slightly wider than the text column, arrows in the gutter (slide 9) */
  :root[data-scale="viewport"] .series .carousel { margin-top: calc(3.5 * var(--u)); }
  :root[data-scale="viewport"] .series .carousel--subtle { margin-inline: -42px; }
  :root[data-scale="viewport"] .series .carousel__track { --carousel-gap: calc(2 * var(--u)); }
}

/* ---------- Final version ----------
   Switched on per version by build.py (content.py: compact_nav, rotating_carousel,
   series_films); the page slide between pages lives in page-slide.css. */

/* main navigation at the size of alternative2 */
@media (min-width: 900px) {
  :root[data-nav="compact"] .site-nav__link { font-size: 1.3rem; }
}

/* hero video control as in alternative2: a small round outline button, icon only; the light navy
   fill keeps the white icon at 3:1 or more on bright film frames */
.hero__control--round {
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(12, 35, 64, 0.45);
  backdrop-filter: none;
}
.hero__control--round:hover { background: rgba(12, 35, 64, 0.75); }

/* interlude type scales with the proportional layout like the rest of the page
   (same sizes as before at 1512 x 860, larger on big screens) */
@media (min-width: 900px) {
  :root[data-scale="viewport"] .scroll-in__word { font-size: calc(6.25 * var(--u)); }
  :root[data-scale="viewport"] .scroll-in__sub { font-size: max(15px, calc(1.27 * var(--u))); }
}

/* Get in Touch without a hold: the footer comes along and the page ends on one screen */
@media (min-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .js .frame--flush { height: var(--frame-h); }
}

/* rotating carousel (carousel.js, data-mode="rotate"): the track moves by whole pairs (--page),
   timing and easing as in alternative2; keep 1680ms in sync with GLIDE_MS in carousel.js */
.carousel--rotate { min-width: 0; }   /* the loop copies must not widen the series column on phones */
.carousel--rotate .carousel__viewport { overflow: hidden; }
.carousel--rotate .carousel__track {
  overflow: visible;
  scroll-snap-type: none;
  touch-action: pan-y pinch-zoom;
  transform: translate3d(calc(var(--page, 0) * (-100% - var(--carousel-gap))), 0, 0);
}
.carousel--rotate .carousel__track.is-gliding { transition: transform 1680ms cubic-bezier(0.65, 0, 0.35, 1); }
.carousel--rotate .carousel__caption {
  margin-top: 8px;
  padding-right: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-align: center;
}
.carousel--rotate .carousel__controls { margin: 0; }
/* quieter than the requested arrows: smaller, thinner and lighter (the line still renders at 3:1 against white) */
.carousel--rotate .carousel__btn { bottom: 2em; color: #8a929d; }
.carousel--rotate .carousel__btn svg { width: 22px; height: 22px; }
.carousel--rotate .carousel__btn path { stroke-width: 1.4; }
@media (max-width: 559px) {
  .carousel--rotate { padding-inline: 30px; }
  .carousel--rotate .carousel__btn { width: 30px; }
  .carousel--rotate .carousel__track { grid-auto-columns: calc((100% - var(--carousel-gap)) / 2); }
}

/* product films over the series stills: main.js fades a film in once it plays. The whole 16:9 film keeps
   the width of the square visuals and stays centred in the frame, between the series title and the carousel
   next to it (a square crop would cut off the texts in the films) */
.series__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease, transform 1600ms var(--ease-out);
}
.series__film.is-playing { opacity: 1; }
.series:hover .series__film { transform: scale(1.025); }
.series__visual--film img { aspect-ratio: 16 / 9; }
.film-control {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(12, 35, 64, 0.45);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color 250ms ease;
}
.film-control:hover { background: rgba(12, 35, 64, 0.85); }
.film-control svg { width: 11px; height: 11px; }

/* ---------- German pages: longer copy ----------
   Scoped with :lang(de) so the English pages stay pixel-identical. */
/* a button label that has to wrap (narrow panels, phones) breaks into two even lines */
:root:lang(de) .btn { text-wrap: balance; }
/* the longer company line wraps into even lines instead of breaking after "USt-" */
:root:lang(de) .site-footer__legal { text-wrap: balance; }
/* below 360px "VIDEO PAUSIEREN" reaches the centred scroll cue, so the cue is left out */
@media (max-width: 359px) {
  :root:lang(de) .hero__scroll-cue { display: none; }
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="left"] { transform: translate3d(-36px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(36px, 0, 0); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__scroll-cue { display: none; }
}