/* c-alm module library — builds on ../styles.css (all tokens live there: colours, type ladder, grid).
   The Figma module kit is the structural base; every visual value here comes
   from the final home page: hairlines, mint slide-overs, Manrope; DM Mono only in the review chrome. */

body { position: relative; }

/* ---------- page chrome ---------- */

/* ---------- overview: intro, group markers, per-module heads ----------
   The overview is documentation, not a page: before a module shows itself it
   says what it is, and where several configurations follow, each one says what
   sets it apart. Groups (Site, Header, Content, Teaser, CTA) get a band of
   their own, so the list reads in sections (F-R380). */
.mod-block { position: relative; }

.mod-section {
  position: relative;
  padding: 10rem var(--margin) 0;
}

/* the group band opens with a line across the page */
.mod-section::before {
  content: "";
  position: absolute;
  top: 7rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-ink);
}

.mod-section h2 {
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-4xl);
}

.mod-section .m-lead {
  margin-top: 1.25rem;
  width: var(--col4);
  font-size: var(--large-text-md);
  line-height: 1.5;
  color: var(--color-ink-mid);
}

/* one head per module: name, then the sentence that places it */
.mod-head {
  position: relative;
  padding: 5rem var(--margin) 1.5rem;
}

.mod-head::before {
  content: "";
  position: absolute;
  top: 2.5rem;
  left: var(--margin);
  right: var(--margin);
  height: 1px;
  background: var(--color-line);
}

.mod-section + .mod-block .mod-head::before { display: none; } /* the band already separated */

.mod-name {
  font-size: var(--large-text-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--track-3xl);
}

.mod-spacing {
  margin-top: 0.75rem;
  width: var(--prose-area);
  font-family: "DM Mono", monospace;
  font-size: var(--large-text-xs);
  line-height: 1.6;
  color: var(--color-ink-mid);
}

.mod-desc {
  margin-top: 0.75rem;
  width: var(--prose-area);
  font-size: var(--large-text-md);
  line-height: 1.5;
  color: var(--color-ink-mid);
}

/* the label of one configuration: its name in the review face, then the
   difference to the others in words */
.mod-config {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 2.5rem var(--margin) 1rem;
}

.mod-config b {
  flex-shrink: 0;
  font-family: "DM Mono", monospace;
  font-size: var(--large-text-xs);
  font-weight: 400;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.mod-config span {
  width: var(--prose-area);
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  line-height: 1.5;
  color: var(--color-ink-mid);
}

/* ---------- annotation layer: module and configuration tags ----------
   The names never take part in the layout — they float above it and can be
   switched off entirely, so the page reads as a real site. */

.tag-anchor {
  position: sticky;
  top: 7rem;
  z-index: 30;
  height: 0;
}

.tag {
  font-family: "DM Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tag-module {
  /* review aid, not design: a small black tab standing on the right edge */
  position: absolute;
  right: var(--sbw, 0px); /* flush with the visible edge, not under a classic scrollbar */
  display: inline-flex;
  align-items: center;
  writing-mode: vertical-rl;
  padding: 0.375rem 0.125rem;
  background: hsl(0 0% 0%);
  color: hsl(0 0% 100% / 0.8);
  border-radius: 0.125rem 0 0 0.125rem;
  letter-spacing: 0.08em;
  cursor: default;
}

/* the toggles: last boxes in the chrome family, mint dot while active */

.view-toolbar {
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 60;
  display: flex;
  gap: 0.25rem;
}

.tag-toggle,
.grid-toggle,
.pc-btn {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.25rem;
  padding: 0 0.4375rem;
  background: hsl(0 0% 0%);
  color: hsl(0 0% 100% / 0.8);
  border: 0;
  border-radius: 0.125rem;
  font-family: "DM Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.tag-toggle:hover,
.grid-toggle:hover,
.pc-btn:hover { opacity: 1; }

.tag-toggle-dot,
.pc-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  transition: background 0.25s ease;
}

body.tags-hidden .tag-toggle .tag-toggle-dot { background: hsl(0 0% 100% / 0.3); }
.grid-toggle .tag-toggle-dot { background: hsl(0 0% 100% / 0.3); }
body.grid-on .grid-toggle .tag-toggle-dot { background: var(--color-accent); }
/* reviewer comments (comments.js, design-to-web skill): the button is the third toggle,
   the pins go with the tags and stay under the menu */
.pc-dot { background: hsl(0 0% 100% / 0.3); }
body.pc-mode .pc-dot { background: var(--color-accent); }
body.tags-hidden .pc-layer,
body.menu-open .pc-layer { display: none; }

/* ---------- the 8-column grid, on demand ---------- */

.grid-overlay {
  /* the page grid: 8 columns of 9.09375rem with a 2rem gutter inside 3.5rem margins */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: none;
  width: var(--page-width);
  padding: 0 var(--margin);
  pointer-events: none;
  gap: var(--gut);
  background:
    linear-gradient(hsl(var(--hsl-valentino) / 0.06), hsl(var(--hsl-valentino) / 0.06)) left / var(--margin) 100% no-repeat,
    linear-gradient(hsl(var(--hsl-valentino) / 0.06), hsl(var(--hsl-valentino) / 0.06)) right / var(--margin) 100% no-repeat;
}

body.grid-on .grid-overlay { display: flex; }

.grid-overlay i {
  position: relative;
  flex: 1;
  /* light enough to read the layout through it */
  background: hsl(var(--hsl-mint) / 0.16);
}

body.tags-hidden .tag {
  opacity: 0;
  transform: translateY(-0.35rem);
  pointer-events: none;
}

/* one rendered configuration of a module; its label lives in data-config
   (not rendered since F-R7 — the review layer shows module names only) */

.mod-case {
  position: relative;
}

/* The home page keeps its tag anchors INSIDE the sections (the sub-pages and
   the library wrap modules instead). In a flex container the zero-size anchor
   would become a flex item and the tag would end up at the left edge, inside
   the padding. So there the anchor is an invisible overlay of the whole
   section and the tag itself is sticky inside it — right edge, top, and it
   travels with the scroll like everywhere else. (The quote, a grid, is
   handled in styles.css.) */
.m-teaser > .tag-anchor,
.m-cta > .tag-anchor {
  position: absolute;
  inset: 0;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}
.m-teaser > .tag-anchor > .tag-module,
.m-cta > .tag-anchor > .tag-module {
  position: sticky;
  top: 7rem;
  right: auto;
  margin-right: var(--sbw, 0px);
  pointer-events: none;
}

/* the four areas at their real width (F-R380): the track is the page, inset by
   the margins, so each bar lands exactly where the area lands on a real page */
.sg-areas {
  width: 100vw;
  margin-left: calc(-1 * var(--margin));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sg-area-track {
  padding-inline: var(--margin);
  background: var(--color-card);
}

.sg-area {
  display: flex;
  align-items: center;
  height: 3.5rem;
  padding-left: 0.75rem;
  background: var(--color-box);
  font-family: "DM Mono", monospace;
  font-size: var(--large-text-xs);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--color-ink-mid);
}

.sg-area-table { margin-top: 3.5rem; }
.sg-area-table dd b { font-weight: var(--fw-bold); color: var(--color-ink); }

@media (max-width: 800px) {
  .sg-areas { width: auto; margin-left: 0; }
  .sg-area-track { padding-inline: 0; }
  .sg-area { height: 2.5rem; font-size: 0.5625rem; }
}

/* ---------- review layer: module frames in the library ----------
   Where a module starts and ends, and how much of that is its own margin or
   padding — so spacing can be checked against the design. Dashed = the
   module's outer edge (border box); dotted = its margin box (the case keeps
   the module's margins inside it); the chips read the vertical values in rem.
   All of it goes with the tags (key T). */
body:not(.tags-hidden) .mod-case {
  display: flow-root;
  margin-bottom: 6rem; /* review separation between configurations — not part of the design */
  outline: 1px dotted hsl(0 0% 0% / 0.35);
}
body:not(.tags-hidden) .mod-frame {
  outline: 1px dashed hsl(0 0% 0% / 0.75);
  outline-offset: -1px;
}
.mod-metric {
  position: absolute;
  left: var(--margin);
  z-index: 31;
  font-family: "DM Mono", monospace;
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.25rem 0.375rem;
  background: hsl(0 0% 0%);
  color: hsl(0 0% 100% / 0.8);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* The review layer belongs to the library, where it goes with the tags (T).
   On a page — and on the home, where the module element carries the marker
   itself — both the chips and the frame wait for the grid (G), so a page looks
   like a page until it is asked otherwise (F-R388). */
body:not(.grid-on) main > [data-mod] > .mod-metric { opacity: 0; }
body:not(.grid-on) main > [data-mod].mod-frame,
body:not(.grid-on) main > [data-mod] .mod-frame { outline: none; }

.mod-metric.is-top { top: 0.25rem; }
.mod-metric.is-bottom { bottom: 0.25rem; }
body.tags-hidden .mod-metric { opacity: 0; }

/* No hairline between modules: the boundary lines are the ones sitting directly
   inside a module's outermost section. Lines *within* a module (accordion rows,
   benefit cells, download rows, footer) are deeper and stay. */
.mod-case > section > i.line,
.mod-case > footer > i.line,
.mod-block > section.statement > i.line { display: none; }

/* ---------- shared module head: title left, lead offset one column ---------- */

/* One head for every module: eyebrow + title in the first three columns, lead
   and optional link in the three columns after a one-column gap. */
.m-head {
  position: relative;
  display: flex;
  padding: 0 var(--margin) 3.5rem;
}

.m-head-left {
  width: var(--col3);
  flex-shrink: 0;
}

.m-head-left > .eyebrow + h2 { margin-top: var(--space-kicker); }
.m-head-left > * + .m-lead { margin-top: var(--space-copy); }
.m-head-left > * + .m-link { margin-top: var(--space-action); }

/* an optional field that is not filled leaves no wrapper behind */
.m-head-right:empty,
.m-head-left:empty,
.m-text-title:empty,
.m-head-right > :empty:not(.line-mark) { display: none; }

.m-head h2 {
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--track-4xl);
  font-feature-settings: "case" 1;
}

.m-head-right {
  margin-left: var(--step);
  width: var(--col3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding-top: 3.25rem;
}

.m-lead {
  font-size: var(--large-text-md);
  line-height: 1.5;
}

.m-section {
  position: relative;
  padding-top: var(--mod-top, var(--space-module));
}

.m-link {
  display: inline-flex;
  align-self: flex-start; /* the click target is the button, not the whole column (F-R380) */
  align-items: center;
  gap: 1.0625rem;
  font-size: var(--large-text-md);
  line-height: 1.4;
}

.m-link:hover .arrow-box { background: var(--color-accent); }
.m-link:hover .arrow-a { transform: translateX(100%); }
.m-link:hover .arrow-b { transform: translateX(0); }
.m-link:hover .text-link::after { transform: scaleX(1); }

/* the hero module page: the block after the hero carries its own ground,
   so the hero's tinted halftone plane never shows through underneath */
/* ---------- Site-Header: menu overlay ----------
   Exactly one viewport tall. Two blocks on the grid: navigation over five
   columns, an aside over three. Rows carry the library's hairline hover. */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  height: 100vh;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
}

.menu-overlay.is-open { display: block; }

.menu-inner {
  /* three tracks: main navigation, its sub level, and the aside */
  position: relative;
  display: grid;
  /* main list wide again, second level keeps its own track, the aside steps
     back to two columns */
  grid-template-columns: var(--col3) var(--col3) var(--col2);
  gap: var(--gut);
  align-content: end;
  align-items: end;
  width: var(--page-width);
  height: 100%;
  margin: 0 auto;
  padding: 6rem var(--margin) 3.5rem;
}

.menu-main,
/* the module library is a review aid, so it stays quiet */
.menu-modules {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: var(--track-xs);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.menu-modules:hover { opacity: 1; }
.footer-legal a.is-quiet { opacity: 0.55; }
.footer-legal a.is-quiet:hover { opacity: 1; }

.menu-side {
  display: flex;
  flex-direction: column;
  align-self: end;
}

/* the aside is wider now: the card runs full width, the addresses stand in two
   columns so the block does not read as a narrow strip */
.menu-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.75rem;
}

.menu-modules { grid-column: 1 / -1; }

/* navigation */

.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid hsl(var(--hsl-alabaster) / 0.15);
}

.menu-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid hsl(var(--hsl-alabaster) / 0.15);
  font-size: 2.625rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--track-4xl);
  color: inherit;
  transition: color 0.25s ease;
}

/* the row's own hairline is the hover */
.menu-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.menu-nav a:hover { color: var(--color-accent); }
.menu-nav a:hover::after { transform: scaleX(1); }

/* the page you are on: mint label, its hairline already drawn, mint marker */
.menu-nav a.is-active { color: var(--color-accent); }
.menu-nav a.is-active::after { transform: scaleX(1); }

.menu-nav a.is-active::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--color-accent);
}

/* keyboard focus, for everything in the panel */
.menu-nav a:focus-visible,
.menu-col a:focus-visible,
.menu-feature:focus-visible,
.menu-close:focus-visible,
.lang-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* the sub level: shown for whichever main entry is hovered or focused */
/* the sub level hangs off a hairline, so it reads as belonging to the list */
.menu-subs {
  /* keeps its width while empty, so nothing jumps when a level opens; the
     divider fades in with the level */
  position: relative;
  align-self: stretch;
}

/* no rule beside the sub level — the column gap separates it well enough */

.menu-sub {
  display: none;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-left: 1.5rem;
}

.menu-sub-label {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  letter-spacing: var(--track-xs);
  color: hsl(var(--hsl-alabaster) / 0.45);
}

.menu-sub.is-active { display: flex; }

.menu-sub a {
  padding: 0.5rem 0;
  font-size: var(--large-text-lg);
  line-height: 1.4;
  color: hsl(var(--hsl-alabaster) / 0.8);
  transition: color 0.2s ease, transform 0.25s ease;
}

.menu-sub a:hover {
  color: var(--color-accent);
  transform: translateX(0.25rem);
}

/* the page you are on, inside the sub level */
.menu-sub a.is-current {
  position: relative;
  color: var(--color-accent);
}

/* the current entry is marked by its colour alone — the square repeated the
   marker that already sits beside the main entry */
.menu-sub a.is-current::before { content: none; }

/* entries with a level below carry a small square at the row's right edge */
.menu-nav a[data-sub]::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
  background: hsl(var(--hsl-alabaster) / 0.35);
  transition: background 0.25s ease;
}

.menu-nav a.is-open::before { background: var(--color-accent); }

/* the section you are in: mint label, its hairline already drawn */
.menu-nav a.is-current { color: var(--color-accent); }
.menu-nav a.is-current::after { transform: scaleX(1); }
.menu-nav a.is-current::before { background: var(--color-accent); }

.menu-nav a.is-open { color: var(--color-accent); }
.menu-nav a.is-open::before { background: var(--color-accent); }

/* the section you are in: mint label, its hairline already drawn */
.menu-nav a.is-current { color: var(--color-accent); }
.menu-nav a.is-current::after { transform: scaleX(1); }
.menu-nav a.is-current::before { background: var(--color-accent); }
.menu-nav a.is-open::after { transform: scaleX(1); }

/* aside: the current study, then the addresses */
/* quiet pointers, not a second navigation: small still, one line of text */
.menu-feature {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: inherit;
  background: hsl(var(--hsl-alabaster) / 0.06);
}

.menu-feature-media {
  display: block;
  width: 5.5rem;
  flex-shrink: 0;
  overflow: hidden;
}

.menu-feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* hover like the action fields: mint slides in from the left, both texts turn
   Valentino; the picture stays still (F-R366) */
.menu-feature { position: relative; }
.menu-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}
.menu-feature > * { position: relative; }
.menu-feature:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.menu-feature .eyebrow, .menu-feature-title { transition: color 0.25s ease; }
.menu-feature:is(:hover, :focus-visible) .eyebrow,
.menu-feature:is(:hover, :focus-visible) .menu-feature-title { color: var(--color-ink); }

.menu-feature-body {
  display: block;
  padding: 1rem 1.25rem;
}

.menu-feature .eyebrow { color: var(--color-accent); font-size: 0.8125rem; }

.menu-feature-title {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}

.menu-meta {
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--hsl-alabaster) / 0.15);
}

/* both blocks span the same height; the aside settles on the navigation's
   bottom edge */

.menu-col {
  display: flex;
  flex-direction: column;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs);
  line-height: 1.45;
  color: hsl(var(--hsl-alabaster) / 0.7);
}

.menu-col-label {
  margin-bottom: 0.125rem;
  font-size: 0.8125rem;
  letter-spacing: var(--track-xs);
  color: var(--color-paper);
}

.menu-col a { transition: color 0.25s ease; }
.menu-col a:hover { color: var(--color-accent); }

/* language switch and close button, pinned next to each other */

/* the open menu keeps the page's own Kontakt card — same element, same look —
   and puts the language switch to its left */
.menu-lang {
  position: fixed;
  top: 1.5rem;
  /* starts on the left edge of the menu's aside column (the last two grid
     columns, ending on the margin) and shares the chrome's centre line (F-R344) */
  left: calc(100vw - var(--sbw, 0px) - var(--margin) - var(--col2));
  z-index: 60;
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  font-size: 0.8125rem;
  letter-spacing: var(--track-xs);
  color: hsl(var(--hsl-alabaster) / 0.7);
}

.menu-lang .lang-toggle { padding: 0; }
.menu-lang .toggle-track { background: hsl(var(--hsl-alabaster) / 0.25); }
.menu-lang .toggle-dot { background: var(--color-paper); }

.menu-close {
  position: fixed;
  top: 1.5rem;
  right: var(--margin);
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  /* the same box as the burger it replaces: ink ground, paper glyph */
  background: var(--color-ink);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.menu-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.menu-close svg {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-paper);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease;
}

.menu-close:hover::before { transform: scaleX(1); }
.menu-close:hover svg { transform: rotate(90deg); color: var(--color-ink); }

/* while the menu is open the page is frozen and the page chrome steps aside */
/* the page is frozen behind the overlay; the scrollbar's gutter stays reserved
   on <html>, so nothing shifts sideways when it disappears */
.menu-open { overflow: hidden; }
.menu-open .menu-lang,
.menu-open .menu-close { display: flex; }
/* the burger stays and becomes the X: the outer bars rotate onto each other,
   the middle one collapses. One control, one movement — no swap between two
   different buttons. */
.menu-open .burger-box { display: flex; z-index: 60; }

.burger-box span { transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, background 0.25s ease; }

.menu-open .burger-box span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); } /* bar pitch: 2px + 0.25rem gap */
.menu-open .burger-box span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-open .burger-box span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

/* the separate close button is no longer needed */
.menu-open .menu-close, .menu-close { display: none; }
/* the open menu brings it back to the top right, next to the close button */
.menu-open .contact-card {
  position: fixed;
  right: calc(var(--contact-right) - var(--sbw, 0px));
  z-index: 60;
}

/* over the open menu the chrome runs without an edge, like everywhere else —
   the hairline belonged to the solid boxes (removed F-R344) */

/* ---------- Site-Footer ----------
   Kept short on purpose: logo and navigation, the two addresses, a legal line.
   The ground is the CTA's halftone field so it belongs to the same family. */

.site-footer {
  position: relative;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
}

.footer-inner {
  position: relative;
  padding: 4rem var(--margin) 2rem;
}

.footer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding-bottom: 3rem;
}

.footer-logo {
  display: block;
  width: 5.5rem;
  color: var(--color-paper);
}

.footer-logo svg {
  display: block; /* inline SVG would sit on the baseline and add a 5px descender gap (standards mode) */
}

.footer-nav {
  /* the six links share the last four columns, first and last on a column edge */
  display: flex;
  justify-content: space-between;
  width: var(--col4);
}

.footer-nav a {
  position: relative;
  padding-bottom: 0.25rem;
  /* the footer list is navigation, not a control: it reads in the body weight */
  font-size: var(--large-text-lg);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  transition: background-size var(--arrow-swap), color 0.25s ease;
}

.footer-nav a:hover {
  color: var(--color-accent);
  background-size: 100% 2px;
}

.footer-cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* two grid columns each */
  gap: var(--gut);
  padding: 2.5rem 0 3rem;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  line-height: 1.6;
  color: hsl(var(--hsl-alabaster) / 0.7);
}

.footer-col-label {
  margin-bottom: 0.5rem;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs);
  color: var(--color-paper);
}

.footer-col a { transition: color 0.25s ease; }
.footer-col a:hover { color: var(--color-accent); }

.footer-bottom {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
  align-items: center;
  padding-top: 1.5rem;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs); /* normal case — the only label row that is not versal (F-R329) */
  color: hsl(var(--hsl-alabaster) / 0.55);
}

.footer-legal {
  grid-column: 2 / 4;
  display: flex;
  gap: 2rem;
}

.footer-bottom > span:last-child { text-align: right; }
/* the language switch sits at the end of the row, before the credit (F-R342) */
.footer-end { display: flex; justify-content: space-between; align-items: center; gap: 2rem; } /* credit on the last column's left edge, switch on the right margin (F-R344) */
.footer-lang { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-lang .lang-toggle { padding: 0; }
.footer-lang .toggle-track { background: hsl(var(--hsl-alabaster) / 0.25); }
.footer-lang .toggle-dot { background: var(--color-paper); }
/* the language in use is set bold, in the menu and in the footer (F-R367) —
   the labels sit on either side of the switch, which carries .is-en */
.menu-lang:has(.lang-toggle:not(.is-en)) > span:first-of-type,
.menu-lang:has(.lang-toggle.is-en) > span:last-of-type,
.footer-lang:has(.lang-toggle:not(.is-en)) > span:first-of-type,
.footer-lang:has(.lang-toggle.is-en) > span:last-of-type { font-weight: var(--fw-bold); }

.footer-legal a { transition: color 0.25s ease; }
.footer-legal a:hover { color: var(--color-accent); }

.site-footer .line { background: hsl(var(--hsl-alabaster) / 0.15); }
/* the footer's top edge: a hairline across the whole band separates it from a
   dark module above it (the CTA) — drawn in like every line (F-R361) */
.site-footer > .footer-top-line { z-index: 1; }
/* the inner lines run across the whole band too, past the side margins (F-R365) */
.footer-cols > .line,
.footer-bottom > .line { left: calc(-1 * var(--margin)); right: calc(-1 * var(--margin)); }

/* ---------- Header.Text / Header.Text-Media ---------- */

/* as the first block of a page the header sits closer under the pinned chrome */
/* a page header fills the viewport; Header.Text carries the line cloud in .cta-field (F-R377) */
.m-pageheader {
  position: relative;
  padding: 7.5rem var(--margin);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.m-pageheader .cta-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.m-pageheader > *:not(.cta-field):not(.line) { position: relative; }

/* as the first block of a page it still has to clear the pinned boxes */
main > .m-pageheader:first-child { padding-top: 11rem; }

/* the split header (F-R377): the picture starts below the header zone
   (--ph-top) and bleeds off the bottom right corner, so the chrome sits on the
   page ground at the top; the text starts under the picture's top edge. At
   least one screen high, taller when the text needs it. */
.m-pageheader-split {
  --ph-top: max(30vh, 10rem);
  flex-direction: row;
  align-items: stretch;
  height: auto;
  min-height: 100vh;
  /* the section keeps its padding for the text column only — the image sits
     flush in the bottom right corner */
  padding: 0 0 0 var(--margin);
}

main > .m-pageheader-split:first-child { padding-top: 0; }

.m-pageheader-split .m-pageheader-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 3rem under the horizon, level with the picture's top */
  padding-top: calc(var(--ph-top) + 3rem);
  padding-bottom: 4rem;
}

/* the picture fills its columns to the right and bottom edges and starts at
   the horizon */
.m-pageheader-split .m-pageheader-media {
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin-top: var(--ph-top);
  padding-top: 0;
}

/* two hairlines set the picture into the grid (F-R377): its top edge runs on
   as a horizon across the whole header, its left edge runs up to the header
   hairline. Drawn in like every line (modules.js). */
.m-pageheader-split > .ph-horizon { top: var(--ph-top); left: 0; right: 0; }
.m-pageheader-split > .ph-stem { top: 5rem; bottom: auto; height: calc(var(--ph-top) - 5rem); left: calc(var(--margin) + var(--col4) + var(--gut)); }
/* part of the module, not a line between modules: the library shows them */
.mod-case > .m-pageheader-split > i.line.ph-line,
.page-block > .m-pageheader-split > i.line.ph-line { display: block; }
/* the line reveal's canvas over the picture (line-cloud.js) */
.line-reveal { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* laid over its frame, so the picture's own height never stretches the header */
.m-pageheader-split .m-pageheader-media img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The head's fields space themselves in pairs, so any of them may be missing:
   a header without a kicker starts with its title, exactly on the inset — no
   rule fires for an element that is not there (F-R387). */
.m-pageheader > .eyebrow + h2,
.m-pageheader-text > .eyebrow + h2 { margin-top: var(--space-kicker-lg); }
.m-pageheader > * + .m-lead,
.m-pageheader-text > * + .m-lead { margin-top: var(--space-copy-lg); }
.m-pageheader > * + .m-link,
.m-pageheader-text > * + .m-link { margin-top: var(--space-action-lg); }

.m-pageheader h2 {
  /* one size with the CTA title: 60 and 64 did the same job at a difference
     nobody sees */
  width: var(--col6);
  font-size: var(--large-text-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-5xl);
}

.m-pageheader .m-lead {
  width: var(--col3);
}

.m-pageheader-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-right: 0;
}

.m-pageheader-split .m-pageheader-text {
  /* four columns plus the gutter, so the image starts on the column-5 line;
     the padding equals the gutter so the type ends on the column-4 line */
  width: calc(var(--col4) + var(--gut));
  flex-shrink: 0;
  padding-right: var(--gut);
}

.m-pageheader-split h2 { width: 100%; }
.m-pageheader-split .m-lead { width: 100%; }

.m-pageheader-media {
  flex: 1;
  align-self: stretch;
  min-height: 32rem;
  overflow: hidden;
}

.m-pageheader-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------- Content.Text ----------
   Figma 6909:12509: title beside the text column, and the column is rich text —
   lead, paragraphs, H3/H4/H5 and bullet lists. */

.m-text {
  position: relative;
  display: flex;
  padding: var(--mod-top, var(--space-module)) var(--margin) 0;
}

.m-text-title {
  width: var(--col3);
  flex-shrink: 0;
}

.m-text-title h2 {
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--track-4xl);
  font-feature-settings: "case" 1;
}

/* layout: on-side — the body is the prose-area-on-side, the title beside it */
.m-text-body {
  margin-left: var(--step);
  width: var(--prose-area);
  font-size: var(--large-text-md);
  line-height: 1.5;
}

/* without a title the column keeps its place on the grid */
.m-text > .m-text-body:first-child {
  margin-left: calc(var(--col3) + var(--step));
}

/* layout: default (Figma 6915:3513, "Default-Centered"): title above the text,
   both in the prose-area-default — the centred measure for long-form reading */
.m-text.is-centered {
  display: block;
  /* the page minus the measure, halved: the block IS the prose-area-default */
  padding: var(--mod-top, var(--space-module)) calc((var(--full-area) - var(--prose-area)) / 2) 0;
}

.m-text.is-centered .m-text-title,
.m-text.is-centered .m-text-body {
  width: 100%;
  margin-left: 0;
}

.m-text.is-centered .m-text-title h2 { font-size: var(--large-text-4xl); line-height: 1.3; }
.m-text.is-centered .m-text-body { margin-top: 2.5rem; }

/* vertical rhythm: air before a heading, close contact after it */
.m-text-body > * + * { margin-top: 1.25rem; }

.m-text-body .is-lead {
  font-size: var(--large-text-xl);
  line-height: 1.5;
}

/* only a heading may follow the lead — body copy right underneath makes the
   lead look like an oversized paragraph. The heading keeps its own distance. */
.m-text-body .is-lead + h3 { margin-top: 3.5rem; }
.m-text-body .is-lead + h4,
.m-text-body .is-lead + h5 { margin-top: 3rem; }
.m-text-body .is-lead + p { margin-top: 2.25rem; }

.m-text-body h3 {
  margin-top: 4.5rem;
  font-size: var(--large-text-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  font-feature-settings: "case" 1;
}

.m-text-body h4 {
  margin-top: 3.5rem;
  font-size: var(--large-text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  font-feature-settings: "case" 1;
}

.m-text-body h5 {
  margin-top: 3rem;
  font-size: var(--large-text-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

/* what follows a heading belongs to it */
.m-text-body h3 + *,
.m-text-body h4 + *,
.m-text-body h5 + * { margin-top: 1rem; }

/* buttons: the filled one carries the action, the ghost one sits beside it */
.m-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* one label size for every control */
.m-btn span:first-child { font-size: var(--large-text-md); font-weight: var(--fw-regular); }

.m-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--control-h);
  padding: 0 1.5rem;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: 0.375rem;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  transition: color 0.25s ease;
}

.m-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.m-btn > * { position: relative; }
.m-btn:hover { color: var(--color-ink); }
.m-btn:hover::before { transform: scaleX(1); }

.m-btn .arrow-clip {
  position: relative;
  overflow: hidden;
  width: 1rem;
  height: 1.5rem;
}

.m-btn:hover .arrow-a { transform: translateX(100%); }
.m-btn:hover .arrow-b { transform: translateX(0); }

.m-btn .download-glyph {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.35s ease;
}

.m-btn:hover .download-glyph { transform: translateY(0.1875rem); }

/* the quiet twin: hairline instead of a filled surface */
.m-btn.is-ghost {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink-quiet);
}

.m-btn.is-ghost:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }

.m-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* the standalone reference gets its own breathing room */
.m-text-body > p > .m-link { margin-top: 0; }
.m-text-body p:has(> .m-link) { margin-top: 1.75rem; }

.m-text-body ul {
  padding-left: 0;
  list-style: none;
}

.m-text-body ul li {
  display: flex;
  gap: 0;
}

.m-text-body ul li::before {
  content: "";
  box-sizing: content-box;
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.5625rem;
  padding-right: 0.875rem;
  background: var(--color-ink);
  background-clip: content-box;
}

.m-text-body li + li { margin-top: 0.5rem; }

/* numbered list: mono numerals in their own column, like the module rows */
.m-text-body ol.m-ordered {
  padding-left: 0;
  list-style: none;
}

.m-ordered li {
  display: flex;
  gap: 1.25rem;
}

.m-lnum {
  flex-shrink: 0;
  width: 1.6875rem;
  font-size: var(--large-text-xs);
  line-height: 1.7;
  letter-spacing: var(--track-xs);
  color: var(--color-ink);
}

/* a standalone reference under the paragraph */
.m-text-body .m-link { margin-top: 0; }

/* level chips — review layer, they disappear with the tags */
.m-level {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.125rem;
  background: hsl(var(--hsl-valentino) / 0.08);
  font-family: "DM Mono", monospace;
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--color-ink);
  vertical-align: middle;
  transition: opacity 0.3s ease;
}

body.tags-hidden .m-level { opacity: 0; }

/* wider heads: title over four columns, lead moving to columns 6-8 */
#content-benefits .m-head-left,
#content-media-slider .m-head-left,
#content-downloads .m-head-left { width: var(--col4); }

/* these two carry their lead right after the title, on column 5 */
#content-media-slider .m-head-right,
#content-downloads .m-head-right { margin-left: var(--gut); }

/* stacked, that gutter would indent the lead a second time */
@media (max-width: 800px) {
  #content-media-slider .m-head-right,
  #content-downloads .m-head-right { margin-left: 0; }
}

/* ---------- Content.Benefits ---------- */

.m-benefits {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gut);
  margin: 0 var(--margin);
}

.benefit {
  position: relative;
  padding: 2.5rem 0 3.5rem;
}

/* No hover: a benefit is a statement, not a link, and a mint rule over its
   hairline promised a click that never comes (F-R382) */

.benefit:nth-child(even) { padding-left: 0; padding-right: 0; }

.benefit-index {
  /* on the ladder: 32, the same step as the subheadings */
  font-size: var(--large-text-3xl);
  line-height: 1;
  letter-spacing: var(--track-3xl);
  color: var(--color-ink-quiet);
}

.benefit h3 {
  margin-top: 1.25rem;
}

.benefit h3 {
  font-size: var(--large-text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.benefit p {
  margin-top: 0.75rem;
  width: 100%;
  font-size: var(--large-text-md);
  line-height: 1.5;
  color: var(--color-ink);
}

/* ---------- Content.Media-Assets ---------- */

.m-media {
  position: relative;
  margin: 0 auto;
  padding-top: var(--mod-top, var(--space-module));
}

/* the three configurations are the three areas (F-R380): the reading measure,
   the eight columns, the whole page */
.m-media.is-standard { width: var(--prose-area); }
.m-media.is-wide { width: var(--grid-area); }
.m-media.is-full { width: var(--full-area); }

.m-media figure { margin: 0; }

.m-media figure { overflow: hidden; }

.m-media .media-frame {
  display: block;
  overflow: hidden;
}

.m-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* the caption belongs to the picture, not to the text column: same face as the
   body copy, quieter, and without a rule that would read as a new block */
.m-media figcaption {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--gut);
  margin-top: 0.875rem;
  padding: 0;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  line-height: 1.5;
  color: hsl(var(--hsl-valentino) / 0.5);
}

.m-media.is-full figcaption { padding: 0 var(--margin); }

/* ---------- Content.Media-Slider ----------
   A mood strip that runs by itself: mixed formats, alternating vertical
   offsets, no controls — the row drifts left as the section passes. */

.m-mood {
  position: relative;
  overflow: hidden;
}

.m-mood-track {
  /* seamless loop: the set is duplicated in JS, so no padding on the track —
     the strip starts on the page margin and drifts left from there */
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  width: max-content;
  margin-left: var(--margin);
  will-change: transform;
}

.m-slide {
  flex: 0 0 auto;
  overflow: hidden;
}

/* one height for every frame — the strip already moves, mixed formats and
   vertical offsets made it restless */
.m-slide.is-wide { width: var(--col3); }
.m-slide.is-square { width: var(--col2); }
.m-slide.is-tall { width: var(--col2); }
.m-slide.is-drop { margin-top: 0; }

.slide-frame { display: block; overflow: hidden; }

.m-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.m-slide img { height: 22rem; aspect-ratio: auto; }

/* ---------- CTA.Default ----------
   A full-bleed ink band carrying the hero's halftone field, with a lot of air
   around one line and one mint action field. No band-wide hover — only the
   action field reacts. */

.m-cta {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6rem;
  padding: 14rem var(--margin) 11rem;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
  overflow: clip; /* clip, not hidden — hidden makes the band a scroll container and traps the sticky review tag inside its padding */
}

.cta-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.m-cta-text {
  position: relative;
  width: var(--col4);
  flex-shrink: 0;
}

.m-cta .eyebrow { color: hsl(var(--hsl-alabaster) / 0.55); }
.m-cta .eyebrow::before { background: var(--color-accent); }

.m-cta-text > .eyebrow + h2,
.m-newsletter-text > .eyebrow + h2 { margin-top: var(--space-kicker-lg); }
.m-cta-text > * + .m-lead,
.m-newsletter-text > * + .m-lead { margin-top: var(--space-copy-lg); }
.m-cta-text > * + .m-link,
.m-newsletter-text > * + .m-link { margin-top: var(--space-action-lg); }

.m-cta h2 {
  font-size: var(--large-text-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-5xl);
}

.m-cta .m-lead {
  width: var(--col3);
  color: hsl(var(--hsl-alabaster) / 0.7);
}

/* same mechanics as the header's Kontakt card and the menu rows: a colour
   slides over the field and the arrow swaps out of its clip */
.cta-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-shrink: 0;
  width: var(--col3);
  min-height: var(--control-h-lg);
  padding: 0 2.25rem;
  overflow: hidden;
  /* like the header's Kontakt box: dark field, mint slides over it. Opaque —
     the same tints as Alabaster 8% / 25% over Valentino, mixed, so nothing of
     the band's field shows through (F-R361) */
  background: color-mix(in srgb, var(--color-paper) 8%, var(--color-ink));
  border: 1px solid color-mix(in srgb, var(--color-paper) 25%, var(--color-ink));
  color: var(--color-paper);
  transition: color 0.25s ease;
}

.cta-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.cta-action > * { position: relative; }

.cta-action:hover { color: var(--color-ink); }
.cta-action:hover::before { transform: scaleX(1); }

.cta-action .arrow-clip {
  position: relative;
  overflow: hidden;
  width: 1.75rem;
  height: 2.25rem;
  font-size: 1.75rem;
  line-height: 1.3;
}

.cta-action:hover .arrow-a { transform: translateX(100%); }
.cta-action:hover .arrow-b { transform: translateX(0); }

.cta-action-label {
  font-size: var(--large-text-md);
  font-weight: var(--fw-regular);
  line-height: 1.4;
}

/* ---------- Teaser.Default ----------
   The whole block is the link: text in three columns on the page ground, the
   image bleeding off the opposite edge; only the button reacts to hover. */

.m-teaser {
  position: relative;
  display: flex;
  align-items: stretch;
  color: inherit;
}

.m-teaser-text {
  position: relative;
  z-index: 2;
  width: calc(var(--col4) + var(--margin) + var(--gut));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 7.5rem var(--margin);
  justify-content: center;
}

.m-teaser-text h2 {
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--track-4xl);
  transition: color 0.3s ease;
}

.m-teaser-text .m-lead { width: var(--col3); }

.m-teaser-media {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 34rem;
}

.m-teaser-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Teaser.Default: the top edge (F-R384) ----------
   One hairline, nothing more: the picture's top edge carried across the text
   column to the page edge, so the two halves sit on one line. It draws in with
   the module and then stays — no colour, no reaction; the button is the only
   thing here that answers a pointer. */

.teaser-top {
  top: 0;
  left: 0;
  right: calc(100% - var(--col4) - var(--margin) - var(--gut));
}

.m-teaser.is-mirrored .teaser-top {
  left: calc(100% - var(--col4) - var(--margin) - var(--gut));
  right: 0;
}

/* the page composer hides a teaser's own lines; this one is the module (F-R384) */
.page-block > .m-teaser > i.line.teaser-line,
.mod-case > .m-teaser > i.line.teaser-line { display: block; }

/* only the button answers the hover — the picture stays still, no mint edge (F-R370) */

/* the teaser's link reads with its paragraph, so it takes the body size */
.m-teaser .m-link { font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm); }

.m-teaser .m-link:hover .arrow-box,
.m-teaser .m-link:focus-visible .arrow-box { background: var(--color-accent); }
.m-teaser .m-link:hover .arrow-a,
.m-teaser .m-link:focus-visible .arrow-a { transform: translateX(100%); }
.m-teaser .m-link:hover .arrow-b,
.m-teaser .m-link:focus-visible .arrow-b { transform: translateX(0); }
.m-teaser .m-link:hover .text-link::after,
.m-teaser .m-link:focus-visible .text-link::after { transform: scaleX(1); }

.m-teaser .m-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.m-teaser.is-mirrored { flex-direction: row-reverse; }

/* ---------- Content.Logo-Wall ---------- */

.m-logowall {
  position: relative;
  display: grid;
  /* like the article band: the cells butt against each other and share their
     hairlines, each drawn once — the grid carries the top and left edge, every
     cell its right and bottom one (F-R369) */
  grid-template-columns: repeat(4, 1fr);
  margin: 0 var(--margin);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
  background-image: radial-gradient(var(--color-ink-quiet) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  background-position: 0.75rem 0.75rem;
}

.logo-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-mid);
  background: transparent;
  overflow: hidden;
  transition: color 0.3s ease;
}

.logo-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
}

.logo-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.logo-name {
  font-size: var(--large-text-md);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--track-md);
}

.logo-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.logo-cell:hover { color: var(--color-ink); }
.logo-cell:hover::before { transform: scaleX(1); }

/* ---------- Teaser.Team ----------
   A short way to the team: text left, three faces and a counter tile right. */
/* the counter tile stands in for the other 57 */
/* ---------- Content.Downloads ----------
   Same row anatomy and the same measures as the home FAQ: 8.9375rem number
   column, 2.25rem title, 2rem vertical padding, 8.625rem icon column. */

.m-downloads {
  position: relative;
  display: flex;
  flex-direction: column;
}

.download-row {
  position: relative;
  display: flex;
  align-items: stretch;
  color: inherit;
  transition: background 0.25s ease;
}

.download-row:hover { background: var(--color-accent); }

.download-num {
  /* 14.59375rem = margin + one column + one gutter: the title then starts on
     the column-2 line instead of floating at 143px */
  position: relative;
  display: flex;
  align-items: center;
  width: 14.59375rem;
  flex-shrink: 0;
  padding: 0 var(--margin);
  font-size: var(--large-text-sm);
  line-height: 1.4;
  letter-spacing: var(--track-sm);
  color: var(--color-ink);
}

.download-title {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 1.25rem var(--margin);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.download-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 3.5rem;
  font-size: var(--large-text-sm);
  line-height: 1.4;
  letter-spacing: var(--track-sm);
  color: var(--color-ink);
}

.file-chip {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.25rem;
  color: var(--color-ink);
}

.download-row:hover .file-chip { border-color: var(--color-ink); }

.download-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.625rem;
  flex-shrink: 0;
  background: var(--color-box);
  font-size: 2.5rem;
  line-height: 1.3;
  transition: background 0.25s ease;
}

.download-row:hover .download-icon { background: var(--color-accent); }

.download-glyph {
  /* drawn, not a font glyph — U+2B73 fell back to a system face and did not
     match the FAQ's stroke weight */
  display: block;
  width: 2rem;
  height: 2rem;
  transition: transform 0.35s ease;
}

.download-row:hover .download-glyph { transform: translateY(0.25rem); }

/* ---------- Content.Team ----------
   Contact details are the point of this module, so nothing hides on hover: the
   portrait stays in colour, the caption sits under a hairline, and hovering
   fills the caption with mint. */

.m-team {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
  padding: 0 var(--margin);
}

/* the overview runs over several rows — one gap in both directions, so the
   cards sit in a even field rather than in rows pushed apart */
.m-team.is-overview { row-gap: var(--gut); }

/* the row stretches its cards, so the tile can take their height */
.m-team .team-card { height: 100%; }

/* square portraits in both team modules — the 3:4 crops made the rows very
   tall, and the overview runs over two of them */
.m-team .team-card img { aspect-ratio: 1 / 1; }

/* one card for both team modules: caption on the tint surface, no mint fill */
.m-team .team-body {
  padding: 1rem 1rem 1.25rem;
  background: var(--color-box);
}

.m-team .team-body::before { content: none; }
.m-team .team-card:hover .team-role,
.m-team .team-card:hover .team-contact { color: var(--color-ink); }
.m-team .team-card h3 {
  /* eight names in a row: at 20 they carried more weight than the module head */
  font-size: var(--large-text-md);
  font-weight: var(--fw-regular);
  line-height: 1.4;
}
.m-team .team-contact { font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs); }

.team-card {
  position: relative;
  display: block;
  color: inherit;
}

/* the card itself is not a link — only mail and phone are */

.team-photo {
  position: relative; /* the line reveal lies over it (F-R380) */
  display: block;
  overflow: hidden;
}

.team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}


.team-body {
  /* a span in the markup — it needs to be a block for the mint fill to cover it */
  display: block;
  position: relative;
  padding: 1.25rem 1.25rem 1.5rem;
  overflow: hidden;
}

/* the card still reacts on hover, even though only mail and phone are links */
.team-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.team-card:hover .team-body::before { transform: scaleY(1); }

.team-body > * { position: relative; }

.team-card h3 {
  font-size: var(--large-text-lg);
  font-weight: var(--fw-regular);
  line-height: 1.4;
}

.team-role {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs);
  color: var(--color-ink);
  transition: color 0.3s ease;
}

.team-contact {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  line-height: 1.6;
  color: var(--color-ink);
  transition: color 0.3s ease;
}

.team-contact {
  /* the two links need room between them — with the resting underlines they
     read as one wrapped line at 2px apart */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.team-contact a {
  color: inherit;
  transition: color 0.25s ease;
}

.team-card:hover .team-role,
.team-card:hover .team-contact { color: var(--color-ink); }

.team-contact a:hover { color: var(--color-ink); }
.team-contact a:hover .text-link::after { transform: scaleX(1); }

.team-contact a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.team-card.is-all {
  /* it sits next to three photographs — a 2% tint disappeared, so the tile
     carries the ink surface of the header boxes instead. Its height comes from
     the row, so it lines up with the cards beside it. */
  display: flex;
  align-items: flex-end;
  height: 100%;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: hidden;
}

.team-card.is-all .eyebrow { color: hsl(var(--hsl-alabaster) / 0.55); }
.team-card.is-all .arrow-box { background: hsl(var(--hsl-alabaster) / 0.12); color: var(--color-paper); }
.team-card.is-all:hover { color: var(--color-ink); }
.team-card.is-all:hover .eyebrow { color: var(--color-ink); }

.team-card.is-all::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  /* fills from the left, as every other field does (F-R380) */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.team-card.is-all:hover::before { transform: scaleX(1); }

.team-all-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
}

.team-all-label {
  font-size: var(--large-text-md);
  font-weight: var(--fw-regular);
  line-height: 1.4;
}

.team-card.is-all:hover .arrow-box { background: hsl(var(--hsl-valentino) / 0.12); color: var(--color-ink); }
.team-card.is-all:hover .arrow-a { transform: translateX(100%); }
.team-card.is-all:hover .arrow-b { transform: translateX(0); }

/* ---------- overview page ---------- */
/* ---------- final signature passes on the kit modules ---------- */

/* a mint tick in front of every kit eyebrow — the home sections keep theirs plain */
.m-head .eyebrow,
.m-pageheader .eyebrow,
.m-teaser-text .eyebrow,
.m-cta .eyebrow,
.m-newsletter .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.m-head .eyebrow::before,
.m-pageheader .eyebrow::before,
.m-teaser-text .eyebrow::before,
.m-cta .eyebrow::before,
.m-newsletter .eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ---------- Header.Article ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  line-height: 1.5;
  color: var(--color-ink);
  transition: color 0.25s ease;
}

.back-link:hover { color: var(--color-ink); }
.back-link .arrow-clip { position: relative; overflow: hidden; width: 1rem; height: 1.5rem; }
.back-link .arrow-clip.is-back { transform: rotate(180deg); }
.back-link:hover .arrow-a { transform: translateX(100%); }
.back-link:hover .arrow-b { transform: translateX(0); }
.back-link:hover .text-link::after { transform: scaleX(1); }

.article-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs);
  color: var(--color-ink);
}

.article-cat {
  padding: 0.375rem 0.75rem;
  background: var(--color-accent);
  color: var(--color-ink);
}

/* ---------- Article.Overview ---------- */

.article-filter {
  display: flex;
  justify-content: flex-end;
  margin: 0 var(--margin) 3.5rem;
}

/* the home tabs are absolutely placed inside their section — inside this module
   they sit in the flow, right-aligned under the head */
/* five categories share the same row width as four */
#content-team .insights-tabs .tab { width: auto; padding: 0 1.5rem; }

.article-filter .insights-tabs {
  position: relative;
  left: auto;
  top: auto;
}

/* equal cards, three per row — the home insight card, normalised */
.article-grid {
  /* like the Insights band on the home page, the cards butt against each other:
     1388 / 4 = 347, the same width as the small insight cards */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 var(--margin);
  /* every hairline is drawn once (F-R369): the grid carries the top and left
     edge, each card its right and bottom one — at any column count */
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}

.article-card-eq {
  /* the cards butt against each other and share their hairlines: each card
     draws only its right and bottom one, the grid the rest (F-R369 — the
     overlapping full borders landed on fractional pixels and read double) */
  position: relative;
  display: block;
  min-height: 21.6875rem;
  margin: 0;
  background: var(--color-card);
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: inherit;
  overflow: hidden;
}

.article-card-eq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.article-card-eq:hover::before { transform: scaleX(1); }

.article-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 21.6875rem;
  padding: 2.5rem 2rem;
}

.article-card-title {
  margin-top: auto;
  font-size: var(--large-text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.article-card-date {
  margin-top: 1rem;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs);
  color: var(--color-ink);
  transition: color 0.25s ease;
}

.article-card-eq:hover .article-card-date { color: var(--color-ink); }

/* ---------- the modules that bring their own ground ----------
   Teaser, CTA, Newsletter and footer bleed to the page edges, so their inset
   cannot be padding: inside the surface the colour (or the picture) would
   swallow it. They take it as margin above the ground instead (F-R387). */
.m-teaser { margin-top: var(--mod-top, var(--space-module)); }
.m-teaser-text { padding: 3.5rem var(--gut) 3.5rem var(--margin); }
.m-cta { margin-top: var(--mod-top, var(--space-module)); }
.m-newsletter { margin-top: var(--mod-top, var(--space-module)); }
.site-footer { margin-top: var(--mod-top, var(--space-module)); }

/* the library's own stack: there the blocks are the siblings, so the resolver's
   pair rule cannot see across them */
#cta-default + #site-footer .site-footer { margin-top: 0; }

/* ---------- chrome that stands out from the ground ----------
   One reading for the whole header (modules.js, "contrast-aware chrome"), all
   boxes switch at once (F-R371). At the top of the page the chrome starts
   light — Valentino marks, the fields Alabaster (the default tokens). Once the
   mark folds, the boxes stand out from the ground behind them (F-R372):
   Alabaster and Pearl: Valentino fields with Alabaster marks.
   Valentino: Mint fields with Valentino marks (F-R374); hovers turn the field
   Alabaster, since the mint hover would not show on a Mint field.
   Over the open menu: Alabaster marks on Valentino fields.
   Mint: Valentino fields with Alabaster marks, as on Alabaster (F-R373); hovers
   keep the Valentino field and turn the marks Mint — a mint field would vanish
   into the band. The Kontakt label has no field, so its text keeps the colour
   that reads on the ground (--chrome-text). */

.site-header-v4.is-on-alabaster,
.burger-box.is-on-alabaster,
.contact-card.is-on-alabaster {
  --chrome-mark: var(--color-paper);
  --chrome-field: var(--color-ink);
  --chrome-text: var(--color-ink);
}

.menu-open .site-header-v4,
.menu-open .burger-box,
.menu-open .contact-card {
  --chrome-mark: var(--color-paper);
  --chrome-field: var(--color-ink);
  --chrome-text: var(--color-paper);
}

.site-header-v4.is-on-valentino,
.burger-box.is-on-valentino,
.contact-card.is-on-valentino {
  --chrome-mark: var(--color-ink);
  --chrome-field: var(--color-accent);
  --chrome-text: var(--color-paper);
  --chrome-hover-field: var(--color-paper); /* the fields are Mint already */
  --chrome-hover-mark: var(--color-ink);
}

.site-header-v4.is-on-mint,
.burger-box.is-on-mint,
.contact-card.is-on-mint {
  --chrome-mark: var(--color-paper);
  --chrome-field: var(--color-ink);
  --chrome-text: var(--color-ink);
  --chrome-hover-field: var(--color-ink); /* a mint field would vanish into the band */
  --chrome-hover-mark: var(--color-accent);
}

/* the Kontakt label follows the ground right under it at any scroll position (F-R377) */
.contact-card.is-text-on-valentino { --chrome-text: var(--color-paper); }

/* hovers: every box takes --chrome-hover-field / --chrome-hover-mark (F-R376) —
   Mint with Valentino marks by default, Valentino with Mint marks on Mint,
   Alabaster with Valentino marks on Valentino (styles.css) */

/* ---------- a FAQ with a lead (the module version) ----------
   The home page's FAQ head has no lead; when a page adds one it belongs beside
   the title, like every other module head — not squeezed under it. */
.faq-head:has(.m-lead) {
  display: grid;
  grid-template-columns: var(--col3) var(--col3);
  column-gap: var(--step);
  align-items: start;
}

.faq-head:has(.m-lead) .eyebrow { grid-column: 1; grid-row: 1; }
.faq-head:has(.m-lead) h2 { grid-column: 1; grid-row: 2; margin-top: 1.25rem; }

.faq-head .m-lead {
  grid-column: 2;
  grid-row: 2;
  margin-top: 1.25rem;
  font-size: var(--large-text-md);
  line-height: 1.5;
}

/* on the pages every module sits in a wrapper that carries its review tab */
.page-block { position: relative; }

/* the modules' own boundary hairlines are a library device — on a real page the
   spacing separates the blocks, so the full-width lines go (same rule as
   .mod-case uses in the library) */
.page-block > section > i.line,
.page-block > .m-teaser > i.line,
.page-block > section > .statement > i.line { display: none; }

/* ---------- a sitemap "Frame 551": headline left, lead and button right ----- */
/* ---------- test: a second module on a colour ----------
   Content.Facts was the only mint surface on a page. The testimonial works as
   a second one: it is a self-contained band, and mint suits a quote better
   than the photographic ground it had. */
.quote.is-mint {
  height: auto;
  padding: 9rem 0;
  background-image: none;
  background-color: var(--color-accent);
}

.quote.is-mint .quote-inner { color: var(--color-ink); }

/* an article's pictures sit in the centred measure, so they line up with the
   text column instead of the page grid */
.m-text.is-centered + .page-block .m-media.is-standard,
.page-block:has(.m-text.is-centered) + .page-block .m-media.is-standard {
  margin-left: 25.6875rem;
  margin-right: 25.6875rem;
  width: auto;
}

/* a title-less text block keeps the column, not the empty title space */
.m-text.is-centered .m-text-title:empty,
.m-text.is-centered .m-text-title h2:empty { display: none; }

/* ---------- small: one column ----------
   A first breakpoint at 500px. The eight-column grid collapses to a single
   column inside 1.25rem margins; the overlay shows that column, so the small
   layout can be checked against a grid too. */
@media (max-width: 800px) {
  /* ---------- small: one column on one margin ----------
     The eight-column grid collapses to a single column inside 1.25rem
     margins. One rule decides the horizontal position: sections carry no
     padding of their own, every block inside them sits on --margin, and only
     pictures are allowed to run edge to edge. */
  :root {
    --margin: 1.25rem;
    --page-width: 100%;
    --gut: 1.25rem;
    --col1: 100%;
    --col2: 100%;
    --col3: 100%;
    --col4: 100%;
    --col5: 100%;
    --col6: 100%;
    --step: 0rem;
  }

  .grid-overlay i:nth-child(n + 2) { display: none; }

  /* ---- 1. stacking ---- */
  .menu-inner,
.m-benefits,
.m-team,
.article-grid,
.m-text,
.m-teaser,
.m-teaser.is-mirrored,
.m-pageheader-split {
    display: block;
    grid-template-columns: 1fr;
    flex-direction: column;
    width: auto;
  }

  /* the reference wall is one column too: mark and name in a row keep the
     cells short, so eight of them stay scannable */
  /* the same 24px texture as on large, only the columns change */
  .m-logowall { display: grid; grid-template-columns: 1fr; }

  .logo-cell {
    justify-content: center;
    height: 5.5rem;
    min-height: 0;
    padding: 0 1rem;
  }

  .logo-lockup { padding: 0; gap: 0.75rem; }
  .logo-name { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); }
  .logo-mark { flex-shrink: 0; }

  .m-text-title,
.m-text-body,
.menu-nav,
.menu-subs,
.menu-side,
.m-teaser-text,
.m-pageheader-text,
.m-cta-text,
.m-head-left,
.m-head-right,
.insights-title {
    flex: none;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    box-sizing: border-box;
  }

  /* ---- 2. one horizontal position ---- */
  section,
.m-section,
.m-text,
.m-teaser,
.faq,
.insights,
.m-pageheader,
.m-cta,
.m-mood {
    padding-left: 0;
    padding-right: 0;
  }

  /* the margin blocks stay inside the viewport */
  .m-pageheader > *:not(.cta-field):not(.m-pageheader-media):not(.m-pageheader-text):not(.tag-anchor),
.m-head,
.faq-head,
.insights-head,
.m-text-title,
.m-text-body,
.m-benefits,
.m-team,
.article-grid,
.article-filter,
.m-logowall,
.m-downloads,
.faq-list,
.m-teaser-text,
.m-pageheader-text,
.m-cta-text,
.cta-action,
.quote-inner,
.insights-all,
.m-buttons,
.stage-block h3,
.stage-block p {
    box-sizing: border-box;
    max-width: calc(100% - var(--margin) * 2);
    margin-left: var(--margin);
    margin-right: var(--margin);
    padding-left: 0;
    padding-right: 0;
  }

  /* pictures are the exception: they run to both edges */
  .m-pageheader-media, .m-teaser-media, .m-media.is-full,
  .m-slide, .stage-block img {
    margin-left: 0;
    margin-right: 0;
  }

  /* the module's 7.5rem band is desktop rhythm — on small the picture keeps
     air above it and none below, so the text that follows owns the gap */


  .m-media.is-standard, .m-media.is-wide,
  .m-text.is-centered + .page-block .m-media.is-standard,
  .page-block:has(.m-text.is-centered) + .page-block .m-media.is-standard {
    width: auto;
    margin-left: var(--margin);
    margin-right: var(--margin);
  }

  .m-media img { width: 100%; height: auto; }

  .m-media figcaption {
    display: block;
    margin-top: 0.75rem;
    font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md);
  }

  .m-media figcaption span + span { display: block; margin-top: 0.25rem; }

  /* ---- 3. vertical rhythm ---- */
  /* the vertical values come from --space-module at this width (F-R387) */
  /* heads stack: eyebrow, title, lead */
  .m-head, .faq-head, .faq-head:has(.m-lead), .insights-head {
    display: block;
    width: auto;
    padding-top: 0;
    padding-bottom: 2rem;
  }

  .faq-head:has(.m-lead) h2 { margin-top: 1rem; }

  .m-head-left, .m-head-right { position: static; flex-shrink: 1; }
  .m-head-right, .insights-head .m-lead, .faq-head:has(.m-lead) .m-lead { margin-top: 1rem; }

  /* the lead follows its title closely — the right column kept a 52px top
     padding from the desktop layout, on top of both margins. It also inherits
     the margin rule meant for blocks that sit directly in a section, which
     indented it a second time inside an already-indented head. */
  .m-head-right {
    padding-top: 0;
    margin: 1rem 0 0;
    max-width: 100%;
  }
  .m-head-right .m-lead { margin-top: 0; }
  .m-text { padding-bottom: 0; }
  /* stacked, the two variants are the same block — the centred one keeps no
     measure of its own, its children carry the margin like everywhere else */
  .m-text.is-centered { padding-left: 0; padding-right: 0; }

  .m-text.is-centered .m-text-title,
  .m-text.is-centered .m-text-body {
    box-sizing: border-box;
    max-width: calc(100% - var(--margin) * 2);
    margin-left: var(--margin);
    margin-right: var(--margin);
  }

  .m-text.is-centered .m-text-body { margin-top: 1.5rem; }
  .m-text.is-centered .m-text-title h2 { font-size: var(--small-text-3xl); line-height: 1.3; }

  /* the controls step down, and the button starts on the margin like the text
     above it — its paragraph carried an indent of its own */
  .m-btn { padding: 0 1.125rem; gap: 0.75rem; }
  .m-btn span:first-child { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); }
  .m-btn .arrow-clip, .m-btn .download-glyph { width: 1.125rem; height: 1.125rem; }
  .m-text-body > p:has(> .m-btn), .m-buttons { margin-left: 0; padding-left: 0; }
  .m-teaser { padding: 3rem 0; }
  .m-cta { padding: 3.5rem 0; }
  .m-pageheader { min-height: 0; height: auto; padding: 0 0 3.5rem; }
  .m-pageheader-split { height: auto; }
  .m-pageheader-media { padding-top: 0; margin-top: 2rem; }
  /* stacked there is no horizon: the picture follows the text (F-R377) */
  .m-pageheader-split .m-pageheader-media { margin-top: 2rem; }
  .m-pageheader-split > i.line.ph-line,
  .mod-case > .m-pageheader-split > i.line.ph-line,
  .page-block > .m-pageheader-split > i.line.ph-line { display: none; }
  .m-pageheader-split .m-pageheader-media img { position: static; } /* stacked, the picture takes its own height again */
  /* the split header's picture fills its column on desktop (height: 100%) —
     stacked it has to take a height of its own */
  .m-pageheader-media img, .m-teaser-media img,
  .m-pageheader-split .m-pageheader-media img {
    width: 100%;
    height: 60vw;
    max-height: 60vw;
    object-fit: cover;
  }
  .m-pageheader-media, .m-teaser-media { width: auto; max-width: 100%; overflow: hidden; }

  /* the article header's three meta columns go under each other */
  .m-article-meta, .article-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.25rem;
  }

  .back-link { margin-bottom: 1.25rem; }
  .m-pageheader-media img, .m-teaser-media img { transform: none !important; }
  /* the text block already ends with its own 3.5rem — one gap is enough */
  .m-teaser-media { height: auto; min-height: 0; margin-top: 0; }
  /* one column: the picture sits under the text, its edge is its own (F-R384) */
  .teaser-line,
  .page-block > .m-teaser > i.line.teaser-line,
  .mod-case > .m-teaser > i.line.teaser-line { display: none; }
  .m-teaser-text { padding-bottom: 2rem; }

  /* ---- 4. type ---- */
  /* titles: 1.25 was tight for two- and three-line headlines at this size */
  .m-pageheader h2,
.m-text-title h2,
.m-head-left h2,
.faq-head h2,
.m-cta h2,
.m-teaser-text h2,
.insights-title,
.faq-head:has(.m-lead) h2 {
    width: auto;
    max-width: 100%;
    font-size: var(--small-text-3xl);
    line-height: 1.3;
    letter-spacing: var(--small-track-3xl);
  }

  .m-text-title { margin-bottom: 1.5rem; }
  .m-text-body .is-lead + h3 { margin-top: 2rem; }
  .m-text-body h3 { font-size: var(--small-text-2xl); margin-top: 2.5rem; }
  .m-text-body h4 { font-size: var(--small-text-xl); margin-top: 2rem; }
  .m-text-body h5 { font-size: var(--small-text-lg); margin-top: 1.75rem; }
  .m-text-body .is-lead, .m-lead { font-size: var(--small-text-lg); line-height: 1.6; }
  .m-text-body { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); line-height: 1.65; }
  h2, h3, h4, .card-title-large, .card-title-small, .benefit h3,
  .download-title, .faq-question { overflow-wrap: anywhere; hyphens: auto; }

  /* ---- 5. chrome ----
     the boxes sit on the page margin on all four sides, and the Kontakt card
     keeps a gutter from the menu box instead of butting against it */
  .burger-box, .contact-card { top: var(--margin); height: 2.5rem; }
  .site-header-line { top: calc(2 * var(--margin) + 2.5rem); } /* the 2.5rem chrome's centre line, mirrored */
  /* the mark's centre line on the 2.5rem field's: margin + 1.25rem */
  .site-header-v4 { top: calc(var(--margin) - 0.5rem); }
  .site-header-v4.is-compact:not(:hover) { --mark-pad: 0.5rem; top: var(--margin); width: 2.5rem; height: 2.5rem; }
  .mark-line { left: 0.75rem; } /* the 2.5rem field's centre: 1.25rem − 0.5rem pad */
  .site-header-v4.is-compact:not(:hover) .bar-logo svg { transform: translateX(calc(0.75rem - 1.4515rem)) scale(0.387, 0.08); }
  /* the fields are a touch larger for the thumb; the bars still end on the margin */
  .burger-box { width: 2.5rem; right: calc(var(--margin) - 0.6875rem - var(--sbw, 0px)); } /* (2.5 − 1.125) / 2 */
  .contact-card { --contact-right: calc(var(--margin) - 0.6875rem + 2.5rem + 0.75rem); gap: 0.75rem; font-size: var(--small-text-sm);
  letter-spacing: var(--small-track-sm); }
  .contact-card .arrow-clip { width: 2.5rem; height: 2.5rem; }

  /* the first block clears the pinned boxes (they end at 68px) by one margin.
     In the split header the text column carries that padding, in the plain one
     the section itself. */
  /* the first block clears the pinned boxes and then some — 20px of air read
     as the header starting right under the chrome. In the library a header is
     a specimen in mid-page, so it carries the same opening space. */
  main > .m-pageheader:first-child,
  main > .page-block:first-child .m-pageheader,
  .mod-case > .m-pageheader { padding-top: 8rem; }
  .m-pageheader-split, main > .page-block:first-child .m-pageheader-split { padding-top: 0; }
  .m-pageheader-split .m-pageheader-text { padding-top: 8rem; padding-bottom: 2rem; }
  /* Header.Text carries the line cloud above its eyebrow (F-R377) */
  main > .m-pageheader:not(.m-pageheader-split):first-child,
  main > .page-block:first-child .m-pageheader:not(.m-pageheader-split),
  .mod-case > .m-pageheader:not(.m-pageheader-split) { padding-top: 13rem; }

  /* the review chrome follows the margin too */
  .view-toolbar { right: var(--margin); bottom: var(--margin); }
  .tag-module { font-size: 0.4375rem; }

  /* ---- 6. rows: number, title, icon ---- */
  /* as on large: the index in its own column at the far left, the question
     beside it, the icon field at the right edge */
  .download-row, .faq-row {
    /* the row's own padding moved into the columns, so the icon field can run
       the full height as on large */
    display: grid;
    grid-template-columns: 1fr 4rem;
    gap: 0.375rem 0.75rem;
    align-items: stretch;
    padding: 0;
  }

  /* the index sits above its question — a left column would leave the question
     three words a line at this width */
  .download-num, .faq-num {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: auto;
    padding: 1.25rem var(--margin) 0;
    font-size: var(--small-text-sm); letter-spacing: var(--small-track-sm);
  }
  .download-title, .faq-question {
    grid-column: 1;
    grid-row: 2;
    display: block;
    width: auto;
    padding: 0 var(--margin) 1.25rem;
  }

  /* the download row keeps the format and size line it has on large */
  .m-downloads .download-title { padding-bottom: 0.5rem; }

  .download-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    grid-column: 1;
    grid-row: 3;
    width: auto;
    margin: 0;
    padding: 0 var(--margin) 1.25rem;
    font-size: var(--small-text-sm); letter-spacing: var(--small-track-sm);
    color: var(--color-ink-mid);
  }

  .download-icon, .faq-arrow {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }

  /* the hairlines run edge to edge as on large — only the content keeps the
     margin, the row itself does not */
  .faq-list, .m-downloads {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin: 0;
  }

  .faq-row, .download-row { padding-left: 0; }

  .faq-row, .download-row { padding-right: 0; }
  .faq-answer { padding-left: 0; }
  .faq-item:last-child, .m-downloads .download-row:last-child { border-bottom: 1px solid var(--color-line); }

  /* the row hairlines are drawn on scroll with a transform — on small they are
     simply borders so they always span the row, including above the first */
  .faq-item, .download-row {
    border-bottom: 1px solid var(--color-line);
  }

  .faq-list, .m-downloads { border-top: 1px solid var(--color-line); }

  .faq-item:first-child, .m-downloads .download-row:first-child {
    border-top: 1px solid var(--color-line);
  }

  .faq-item i.line, .download-row i.line, .m-downloads > i.line { display: none; }
  .faq, .faq-list, .faq-item, .m-downloads { width: auto; }
  .faq-list > .line, .m-downloads > .line { display: none; }

  /* the question keeps the weight it has on large */
  .download-title, .faq-question { font-size: var(--small-text-lg); line-height: 1.4; }

  /* the field keeps its edge in every state — the mint fill of an open row
     covered the hairline the transform-drawn line used to provide */
  .download-icon, .faq-arrow {
    /* the rows are implicit, so "1 / -1" would only span the explicit one —
       a span reaches across index, title and meta */
    grid-row: 1 / span 3;
    align-self: stretch;
    width: 4rem;
    height: auto;
    background: var(--color-box);
    border-left: 1px solid var(--color-line);
  }

  .faq-item.is-open .faq-arrow { background: none; }
  .download-icon svg, .faq-arrow svg { width: 1rem; height: 1rem; }
  .faq-arrow-glyph { font-size: var(--small-text-2xl); line-height: 1.2; }

  .download-icon .line, .faq-arrow .line, .download-num .line, .faq-num .line { display: none; }
  /* the answer keeps the question's left edge */
  .faq-answer-inner {
    padding: 0.75rem 4.5rem 2rem var(--margin);
    font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md);
    line-height: 1.6;
  }

  /* ---- 7. grids ---- */
  .m-benefits { row-gap: 2.5rem; }
  .m-team, .m-team.is-overview { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
  .m-benefits .benefit { padding-top: 1.5rem; }
  /* the same list as Teaser.Article: cards inset on the margin, touching,
     sharing one hairline */
  .article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 var(--margin);
  }

  .article-card-eq { min-height: 0; } /* the hairlines come from the large rule: one per edge (F-R369) */

  .article-card-body { min-height: 0; padding: 1.75rem 1.25rem; }
  .article-card-title { font-size: var(--small-text-lg); line-height: 1.45; margin-top: 1rem; }
  .article-card-eq .eyebrow, .article-card-cat { font-size: var(--small-text-md); letter-spacing: var(--small-track-md); }
  .article-card-date { font-size: var(--small-text-sm); letter-spacing: var(--small-track-sm); margin-top: 1rem; }

  .card {
    margin: 0 var(--margin);
    border: 1px solid hsl(var(--hsl-valentino) / 0.07);
    border-bottom: 0;
  }

  /* the "Alle Beiträge" link follows the cards, so neither :last-of-type nor
     :last-child finds the last one — the card before that link does */
  .card:has(+ .insights-all),
  .card:last-child { border-bottom: 1px solid hsl(var(--hsl-valentino) / 0.07); }

  /* the filter row is replaced by a dropdown (built in modules.js) */
  .insights-tabs { display: none; }

  .article-filter, .insights-tabs-wrap {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .tab-select {
    position: relative;
    margin: 0 var(--margin) 2rem;
  }

  .tab-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--color-box);
    border: 1px solid var(--color-ink-quiet);
    font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md);
    font-weight: var(--fw-regular);
    color: var(--color-ink);
    cursor: pointer;
  }

  .tab-select-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
  }

  .tab-select-caret svg { width: 1rem; height: 1rem; display: block; }

  .tab-select-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    z-index: 20;
    background: var(--color-paper);
    border: 1px solid var(--color-ink-quiet);
  }

  .tab-select.is-open .tab-select-list { display: block; }

  .tab-select-item {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md);
    text-align: left;
    color: var(--color-ink);
    cursor: pointer;
  }

  .tab-select-item:last-child { border-bottom: 0; }
  .tab-select-item.is-active { background: var(--color-ink); color: var(--color-paper); }

  .insights-tabs .tab { width: auto; flex: 0 0 auto; padding: 0 1rem; white-space: nowrap; }

  /* ---- 8. quote ---- */
  .quote { height: auto; padding: 4rem 0; }
  .quote:not(.is-mint) {
    background-image: linear-gradient(hsl(var(--hsl-valentino) / 0.88), hsl(var(--hsl-valentino) / 0.88)), url("../assets/quote-bg.webp");
  }
  .quote-inner { width: auto; max-width: none; padding: 0; }
  /* the hanging opening quote is a desktop refinement — at this measure it
     pushed the first line 25px outside the margin */
  .quote blockquote { font-size: var(--small-text-3xl); line-height: 1.35; hyphens: auto; text-indent: 0; }
  .quote .line-outline { -webkit-text-stroke: 0; color: var(--color-accent); }
  .quote.is-mint .line-outline { color: var(--color-ink); }
  .quote blockquote .line-fill { display: none; }
  .quote-attribution { margin-top: 1.5rem; }

  /* ---- 9. the Insights collage becomes a stack ---- */
  .insights { height: auto; width: auto; padding-bottom: 2rem; }
  .insights-canvas { position: static; height: auto; width: auto; }
  .insights-head { display: block; }
  /* the title is absolutely placed on desktop — on small it joins the flow so
     the filter can sit under it instead of over it */
  .insights-title {
    position: static;
    width: auto;
    margin: 0 var(--margin) 1.5rem;
  }
  .insights-tabs { margin-bottom: 0; }
  .insights .tab-select { margin-bottom: 2rem; }

  .card {
    display: block;
    position: static;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    margin: 0 var(--margin);
    padding: 1.75rem 1.25rem;
    background: var(--color-card);
  }

  /* the lead article is the biggest thing in the module: more room and one
     step up in size */
  .card-large { padding: 2.5rem 1.25rem; }
  .card-large .card-title-large { font-size: var(--small-text-2xl); line-height: 1.35; }

  .card-eyebrow, .card-title-large, .card-title-small {
    position: static;
    width: auto;
    left: auto; top: auto; right: auto; bottom: auto;
  }

  .card-title-large, .card-title-small {
    font-size: var(--small-text-lg);
    line-height: 1.45;
    margin-top: 1rem;
  }

  .card-eyebrow { line-height: 1.4; }
  .card .line { display: none; }
  .insights-all { position: static; margin: 2rem var(--margin) 0; }

  /* ---- 10. mood strip ---- */
  .m-mood { padding-bottom: 2rem; }
  .m-mood .m-head { margin-left: var(--margin); margin-right: var(--margin); }
  .m-slide img, .m-slide .slide-frame { height: 13rem; }
  .m-slide.is-wide { width: 17rem; }
  .m-slide.is-square, .m-slide.is-tall { width: 11rem; }

  /* ---- 11. CTA stacks ---- */
  .m-cta { display: block; }
  .m-cta { padding-top: 13rem; } /* room for the line cloud above the eyebrow (F-R362) */
  .cta-action {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: auto;
    min-height: var(--control-h-lg); /* the phone height of every field (F-R381) */
    margin-top: 2rem;
    padding: 0 1.25rem;
  }

  /* ---- 11b. footer stacks ---- */
  .site-footer { padding: 0; }
  .footer-inner { padding: 3rem var(--margin) 2rem; }
  .footer-head { display: block; padding-bottom: 2rem; }
  .footer-logo { display: block; margin-bottom: 1.75rem; }

  /* the navigation is a list of links, tight enough to read as one block */
  .footer-nav {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    text-align: left;
  }

  .footer-nav a { display: block; padding: 0.3125rem 0; font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); }

  /* the three addresses run under each other, tightly */
  .footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem 0;
  }

  /* the hairlines are drawn with a scroll-triggered scaleX that never fires
     down here — borders instead, so they are simply present */
  .site-footer .line { display: none; }
  .footer-cols { border-top: 1px solid hsl(var(--hsl-alabaster) / 0.15); }
  /* the footer's top line (F-R361) as a border too; the library frames keep their
     rule of no line between modules */
  .site-footer:not(.mod-frame) { border-top: 1px solid hsl(var(--hsl-alabaster) / 0.15); }
  .footer-bottom { border-top: 1px solid hsl(var(--hsl-alabaster) / 0.15); }
  .footer-cols > .footer-col { position: static; width: auto; margin: 0; padding: 0; }
  .footer-col-label { margin-bottom: 0.375rem; }
  .footer-cols p { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); line-height: 1.5; }

  .footer-bottom { position: relative; display: block; margin-top: 0; padding-top: 1.25rem; }
  .footer-bottom > * { display: block; text-align: left !important; }
  .footer-bottom > * + * { margin-top: 0.625rem; }
  .footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .footer-bottom > .footer-end { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.625rem 1.5rem; }
  .footer-legal a { display: inline-block; margin: 0; }
  /* the borders that stand in for the lines run across the whole band (F-R365):
     the blocks reach past the margins, their content keeps it as padding */
  .footer-cols, .footer-bottom {
    margin-left: calc(-1 * var(--margin));
    margin-right: calc(-1 * var(--margin));
    padding-left: var(--margin);
    padding-right: var(--margin);
  }

  /* ---- 12. the menu ---- */
  .menu-overlay { overflow-y: auto; }
  .menu-inner { height: auto; min-height: 100%; padding: 5.5rem var(--margin) 3rem; }
  .menu-lang { left: auto; right: calc(var(--margin) - 0.6875rem + 2.5rem + 0.75rem - var(--sbw, 0px)); top: var(--margin); height: 2.5rem; }
  .menu-open .contact-card { display: none; }
  .menu-close { right: var(--margin); width: 3rem; height: 3rem; }

  .menu-nav a {
    flex-direction: row;
    justify-content: flex-start;
    font-size: var(--small-text-2xl);
    padding: 1.125rem 0;
    letter-spacing: var(--small-track-2xl);
  }

  .menu-nav a[data-sub]::before {
    content: "+";
    order: 2;
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    background: none;
    font-size: var(--small-text-xl);
    font-weight: var(--fw-regular);
    color: hsl(var(--hsl-alabaster) / 0.5);
  }

  .menu-nav a.is-open::before { content: "–"; color: var(--color-accent); }

  .menu-subs { padding: 0; }
  /* the open level needs no rule of its own: the entry above it and the next
     one below already draw two */
  .menu-sub { padding: 0.75rem 0 1.25rem; border-bottom: 0; }
  .menu-sub-label { display: none; }
  /* the level is one list under its entry — the main rows carry the rules.
     Moved inside .menu-nav on small, the sub links also inherited that row's
     hairline, so the current one drew a mint underline of its own. */
  .menu-sub a { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); padding: 0.625rem 0; border-bottom: 0; }
  .menu-sub a::after { content: none; }
  .menu-side { margin-top: 3rem; }
  .menu-feature { max-width: none; }
  .menu-meta { margin-top: 1.5rem; }
}

/* ---------- touch: no hover fills ----------
   Without a pointer the mint hover states latch after a tap and stay on, so
   they are switched off where hover is not available. */
@media (hover: none) {
  /* without a pointer the hover state stays on after a tap — an answer that
     was opened and closed again kept its mint ground, and the menu box stayed
     mint for as long as the overlay was open */
  .burger-box:hover { background: var(--chrome-field); }
  .burger-box:hover span { background: var(--chrome-mark); }
  .contact-card:hover .arrow-clip { background: var(--chrome-field); color: var(--chrome-mark); }
  /* the mark follows the same no-hover rule as the menu box on touch (F-R376) */
  .site-header-v4:hover { background: transparent; }
  .site-header-v4.is-compact:hover { background: var(--chrome-field); }
  .site-header-v4:hover .bar-logo { color: var(--chrome-mark); }
  .faq-row:hover { background: transparent; }
  .faq-row:hover .faq-question { color: inherit; }
  .faq-row:hover .faq-arrow { background: var(--color-box); }
  .faq-item.is-open .faq-row { background: var(--color-accent); }

  .faq-row::before,
  .card::before,
  .article-card-eq::before,
  .team-body::before,
  .logo-cell::before { display: none; }

  .card:hover .card-title-large,
  .article-card-eq:hover,
  .team-card:hover .team-role { color: inherit; }
}

/* a module linked from outside starts below the pinned boxes */
.mod-block, .sg-section { scroll-margin-top: 7rem; }

@media (max-width: 800px) {
  .mod-block, .sg-section { scroll-margin-top: 5.5rem; }
}

/* ---------- styleguide ---------- */

.sg-intro { padding-bottom: 5rem; }

.sg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  font-size: 0.8125rem;
  letter-spacing: var(--track-xs);
}

.sg-nav a {
  position: relative;
  padding-bottom: 0.25rem;
  color: var(--color-ink);
  background-image: linear-gradient(var(--color-ink), var(--color-ink));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size var(--arrow-swap), color 0.25s ease;
}

.sg-nav a:hover { color: var(--color-ink); background-size: 100% 1px; }

.sg-section {
  position: relative;
  padding: 5rem 0;
  border-top: 1px solid var(--color-line);
}

.sg-head {
  margin: 0 var(--margin) 3.5rem;
  width: var(--col5);
}

.sg-head h2 {
  margin-top: 1.25rem;
  font-size: var(--large-text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  font-feature-settings: "case" 1;
}

.sg-head .m-lead { margin-top: 1.25rem; font-size: var(--large-text-md); line-height: 1.6; }

.sg-body { margin: 0 var(--margin); }

.sg-family + .sg-family { margin-top: 3.5rem; }

.sg-family-name,
.sg-group-title {
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: var(--track-xs);
  color: var(--color-ink-mid);
}

.sg-swatches {
  /* one row: base colours, Valentino steps and the stage tones at one size */
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1rem;
}


.sg-sw-field {
  display: block;
  height: 7rem;
  border: 1px solid var(--color-line);
}

.sg-sw-name {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.sg-sw-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--color-ink-mid);
}

/* type specimens */
.sg-type {
  display: flex;
  align-items: baseline;
  gap: var(--gut);
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-line);
}

.sg-type:last-child { border-bottom: 1px solid var(--color-line); }

.sg-sample {
  flex: 1;
  min-width: 0;
  font-feature-settings: "case" 1;
}
.sg-token {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02rem;
  color: var(--color-ink);
}

.sg-meta {
  flex-shrink: 0;
  width: var(--col2);
  font-size: 0.75rem;
  letter-spacing: 0.04rem;
  color: var(--color-ink-mid);
}

/* components */
.sg-group + .sg-group { margin-top: 4rem; }

.sg-group-text {
  max-width: var(--col4);
  margin-bottom: 1.5rem;
}

/* the note between the two colour rows */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gut);
}

.sg-row.is-top { align-items: flex-start; }

.sg-field {
  display: inline-flex;
  align-items: center;
  padding: 1.5rem;
  background: var(--color-box);
}

.sg-field.is-ink { background: var(--color-ink); }

/* the CTA control is sized by its band on a page — here it sizes to its label.
   On a page the whole band is the hover target, so the specimen has to carry
   that state itself. */
.sg-field .cta-action { width: auto; padding: 1.25rem 1.5rem; gap: 2.5rem; }
.sg-field.is-ink:hover .cta-action { color: var(--color-ink); }
.sg-field.is-ink:hover .cta-action::before { transform: scaleX(1); }
.sg-field.is-ink:hover .cta-action .arrow-a { transform: translateX(100%); }
.sg-field.is-ink:hover .cta-action .arrow-b { transform: translateX(0); }
.sg-field.is-ink .text-link { color: var(--color-paper); }

.sg-mono {
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  color: var(--color-ink-mid);
}

.sg-inline {
  max-width: var(--col4);
  font-size: var(--large-text-md);
  line-height: 1.6;
}

.sg-inline a { color: inherit; }

/* A link inside running text needs to be recognisable at rest — the wipe-in
   underline works for standalone links, not for a word inside a sentence.
   Mail and phone on a team card are the same case: they sit in a block of
   plain lines and would otherwise be indistinguishable from them. */
.team-contact a .text-link::after,
.m-text-body a.text-link::after,
.m-benefits a.text-link::after,
.sg-inline a.text-link::after {
  background: var(--color-ink-quiet);
  transform: scaleX(1);
}

.team-contact a:hover .text-link::after,
.m-text-body a.text-link:hover::after,
.m-benefits a.text-link:hover::after,
.sg-inline a.text-link:hover::after { background: var(--color-ink); }

.sg-tabs { position: static; width: auto; max-width: var(--col4); }

/* grid demo — the two cases side by side */
.sg-grids {
  display: grid;
  grid-template-columns: 1fr 20.1875rem;
  gap: var(--step, 3rem);
  margin-bottom: 3rem;
}

.sg-grid-case .sg-family-name { margin-bottom: 1rem; }
/* the two cases keep the same rows, so their lines have to align */
.sg-tables { margin-bottom: 0; align-items: start; }
.sg-tables .sg-table { margin-top: 0; }
.sg-tables .sg-table > div { min-height: 3.75rem; align-items: baseline; }
.sg-family + .sg-family { margin-top: 4.5rem; }
.sg-grid.is-one { grid-template-columns: 1fr; }

/* grid demo */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--gut);
}

.sg-col {
  display: block;
  height: 9rem;
  background: hsl(var(--hsl-mint) / 0.45);
  border: 1px solid hsl(var(--hsl-valentino) / 0.08);
}

.sg-col i {
  display: block;
  padding: 0.5rem;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--color-ink-mid);
}

/* tables */
.sg-table { border-top: 1px solid var(--color-line); }

.sg-table > div {
  display: flex;
  gap: var(--gut);
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-line);
}

.sg-table dt {
  width: 42%;
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
}

.sg-table dd {
  font-size: 0.9375rem;
  color: var(--color-ink);
}
@media (max-width: 800px) {
  .sg-head, .sg-body { margin: 0 var(--margin); width: auto; }
  .sg-head { padding-top: 0.5rem; margin-bottom: 2.5rem; }
  .sg-section:first-of-type { padding-top: 2.5rem; }
  .sg-head h2 { font-size: var(--small-text-3xl); }
  .sg-section { padding: 3.5rem 0; }
  .sg-swatches { grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; }
  .sg-sw-field { height: 4.5rem; }  .sg-grids { display: block; }
  .sg-tables .sg-table + .sg-table { margin-top: 2.5rem; }
  .sg-grid-case + .sg-grid-case { margin-top: 2.5rem; }
  .sg-grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .sg-grid.is-one { grid-template-columns: 1fr; }
  .sg-col { height: 5rem; }
  /* the specimens are shown at their real size, which no phone can hold —
     they scroll sideways in their own row instead of breaking the words */
  .sg-type { display: block; overflow-x: auto; }
  .sg-sample { white-space: nowrap; }
  .sg-meta { width: auto; margin-top: 0.5rem; }
  .sg-body, .sg-family, .sg-types, .sg-group { max-width: 100%; overflow: hidden; }
  .sg-tabs { max-width: 100%; overflow-x: auto; }
  .sg-group-text { max-width: 100%; }
  .sg-table > div { display: block; }
  .sg-table dt { width: auto; }
  .sg-table dd { margin-top: 0.25rem; }
  .sg-nav { gap: 1rem; margin-top: 2rem; }
}

/* ---------- small, wider end (600-800) ----------
   The one-column layout also serves tablets now. There the margin and the
   type can grow without leaving the single column. */
@media (min-width: 600px) and (max-width: 800px) {
  :root { --margin: 2.5rem; }

  /* the boxes sit on the larger margin, so the first block has to clear more */
  main > .m-pageheader:first-child,
  main > .page-block:first-child .m-pageheader,
  .m-pageheader-split .m-pageheader-text { padding-top: 8rem; }
  .m-pageheader-split, main > .page-block:first-child .m-pageheader-split { padding-top: 0; }

  .m-pageheader h2,
.m-text-title h2,
.m-head-left h2,
.faq-head h2,
.m-cta h2,
.m-teaser-text h2,
.insights-title { font-size: var(--small-text-4xl); }

  .m-text-body h3 { font-size: var(--small-text-3xl); }
  .m-text-body .is-lead, .m-lead { font-size: var(--small-text-xl); }
  .m-text-body { font-size: var(--small-text-lg); }
  .menu-nav a { font-size: var(--small-text-3xl); }
  .m-pageheader-media img, .m-teaser-media img { height: 44vw; }
  .m-benefits, .m-team, .article-grid { grid-template-columns: 1fr 1fr; }
  .m-team { gap: 1rem; }
  .m-logowall { grid-template-columns: 1fr 1fr; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- CTA.Newsletter ----------
   The signup itself, not a link to it: a Valentino band like CTA.Default, with
   the field on the grid, so the step from reading to entering is one line. */

.m-newsletter {
  /* built like CTA.Default: the text top left, the one action bottom right */
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6rem;
  padding: 11rem var(--margin) 7.5rem;
  background: var(--color-ink);
  color: var(--color-paper);
}

.m-newsletter .eyebrow { color: hsl(var(--hsl-alabaster) / 0.55); }
.m-newsletter .m-lead { color: hsl(var(--hsl-alabaster) / 0.7); }

.m-newsletter-text {
  position: relative;
  width: var(--col4);
  flex-shrink: 0;
}

.m-newsletter-text h2 {
  font-size: var(--large-text-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-5xl);
}

.m-newsletter-text .m-lead { width: var(--col3); }

/* the form block is as wide as the action field of CTA.Default */
.m-newsletter-form {
  position: relative;
  flex-shrink: 0;
  width: var(--col3);
}

.nl-row {
  display: grid;
  grid-template-columns: 1fr 12rem;
  gap: 0.75rem;
  align-items: stretch;
}

.nl-input {
  width: 100%;
  min-height: var(--control-h-lg);
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--color-paper) 8%, var(--color-ink));
  border: 1px solid color-mix(in srgb, var(--color-paper) 25%, var(--color-ink));
  font-family: inherit;
  font-size: var(--large-text-md);
  line-height: 1.4;
  color: var(--color-paper);
}

.nl-input::placeholder { color: hsl(var(--hsl-alabaster) / 0.55); }
.nl-input:focus { outline: none; border-color: var(--color-paper); }

.nl-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--control-h-lg);
  padding: 0 1.5rem;
  overflow: hidden;
  background: var(--color-paper);
  border: 0;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  cursor: pointer;
}

.nl-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arrow-swap);
}

.nl-submit > * { position: relative; }
.nl-submit:hover::before { transform: scaleX(1); }
.nl-submit:hover { color: var(--color-ink); }

.nl-note {
  margin-top: 1rem;
  font-size: var(--large-text-xs);
  letter-spacing: var(--track-xs);
  line-height: 1.6;
  color: hsl(var(--hsl-alabaster) / 0.55);
}

.nl-note a { color: inherit; }

/* the confirmation replaces the row in place, so nothing jumps */
.nl-done {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  font-size: var(--large-text-md);
  line-height: 1.4;
}

.nl-done::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  background: var(--color-accent);
}

.m-newsletter.is-done .nl-row { display: none; }
.m-newsletter.is-done .nl-done { display: flex; }

@media (max-width: 800px) {
  .m-newsletter {
    display: block;
    padding: 3.5rem var(--margin);
  }

  .m-newsletter-text, .m-newsletter-form { width: auto; }
  .m-newsletter-text h2 { margin-top: 1.25rem; }
  .m-newsletter-text .m-lead { width: auto; }

  .m-newsletter-text h2 { font-size: var(--small-text-3xl); line-height: 1.3; letter-spacing: var(--small-track-3xl); }
  .m-newsletter-text .m-lead { max-width: 100%; margin-top: 1rem; font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); }
  .m-newsletter-form { padding-top: 2rem; }
  .nl-row { grid-template-columns: 1fr; }
  .nl-input, .nl-submit { font-size: var(--small-text-md);
  letter-spacing: var(--small-track-md); padding: 0 1rem; }
  .nl-note { font-size: var(--small-text-sm);
  letter-spacing: var(--small-track-sm); }
}

/* ---------- Header.Hero's photo in the library (F-R347, F-R348) ----------
   The growth needs the home page's scroll stage (statement after the hero);
   here the photo shows its grown state. */
#header-hero .media-grow { height: auto; }
#header-hero .media-grow-frame { position: static; width: 100%; aspect-ratio: 3 / 2; }
#header-hero .media-grow-frame img { height: 100%; }
@media (max-width: 800px) {
  #header-hero .media-grow-frame { aspect-ratio: 9 / 16; } /* the portrait crop (F-R363) */
}

/* ---------- line marks (F-R364) ----------
   The small squares are short lines: they squiggle and fall into order — flat,
   still, in the accent — while their host is hovered, open or current
   (line-cloud.js, lineMarks; the transform is set there). Colours follow the
   ground: Valentino → Clover on light grounds, Alabaster → Mint on Valentino,
   Valentino → Valentino on Mint. The squares go only once the script runs. */
.line-mark {
  --lm-idle: hsl(var(--hsl-valentino) / 0.45);
  --lm-on: var(--color-clover);
  display: block;
  flex-shrink: 0;
  width: 0.75rem;
  height: 1.5px;
  background: var(--lm-idle);
  transition: background-color 0.3s ease;
  pointer-events: none;
}
.line-mark.is-on { background: var(--lm-on); }
.menu-overlay .line-mark,
.m-cta .line-mark,
.site-footer .line-mark,
[data-ground="valentino"] .line-mark { --lm-idle: hsl(var(--hsl-alabaster) / 0.45); --lm-on: var(--color-accent); }
.menu-nav .line-mark { --lm-idle: hsl(var(--hsl-alabaster) / 0.35); }
[data-ground="mint"] .line-mark { --lm-idle: hsl(var(--hsl-valentino) / 0.45); --lm-on: var(--color-ink); }

/* the menu row's mark sits where the square sat: on the row's right edge; a
   current row without a level below carries it in front, like the old marker */
.menu-nav a > .line-mark { position: absolute; right: 0; top: 50%; margin-top: -0.75px; }
.menu-nav a > .line-mark.is-lead { right: auto; left: -1.25rem; }
/* a list bullet: on the first line's centre (the square's 0.5625rem + half its 0.375rem) */
.m-text-body ul li > .line-mark { --lm-idle: var(--color-ink); margin: calc(0.75rem - 0.75px) 0.875rem 0 0; }

html.has-line-marks .menu-nav a.is-active::before,
html.has-line-marks .menu-nav a[data-sub]::before,
html.has-line-marks .m-text-body ul li::before,
html.has-line-marks .m-head .eyebrow::before,
html.has-line-marks .m-pageheader .eyebrow::before,
html.has-line-marks .m-teaser-text .eyebrow::before,
html.has-line-marks .m-cta .eyebrow::before,
html.has-line-marks .m-newsletter .eyebrow::before,
html.has-line-marks .nl-done::before { content: none; }

/* the input specimen shows the field at its real height, on its real ground */
.sg-input { display: block; padding: 2rem; }
.sg-input .nl-row { display: grid; grid-template-columns: 1fr 12rem; gap: 0.75rem; align-items: stretch; }

@media (max-width: 800px) {
  .sg-input { padding: 1.25rem; }
  .sg-input .nl-row { grid-template-columns: 1fr; }
}

/* the spacing specimens: real modules, real tokens, shown at 35% so a 15rem
   inset fits on the page. The chips keep printing the true values (F-R387) */
.sg-stack {
  zoom: 0.35;
  width: 100vw;
  margin-left: calc(-1 * var(--margin));
  outline: 1px dashed hsl(var(--hsl-valentino) / 0.25);
}

.sg-stack.is-fields { zoom: 0.5; }
.sg-stack .sg-mod { position: relative; }
.sg-stack .m-text { padding-left: var(--margin); padding-right: var(--margin); }

/* the footer in the pair specimen is a stub: the real one would be five screens */
.sg-footer-stub {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6rem var(--margin);
  background: var(--color-ink);
  color: hsl(var(--hsl-alabaster) / 0.55);
  font-family: "DM Mono", monospace;
  font-size: var(--large-text-sm);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.sg-footer-stub .line { background: hsl(var(--hsl-alabaster) / 0.18); transform: none; }

@media (max-width: 800px) {
  .sg-stack { zoom: 0.5; width: auto; margin-left: 0; }
  .sg-stack.is-fields { zoom: 0.7; }
}

/* ---------- styleguide: the line system and the new component groups (F-R378) ---------- */
.sg-field.is-ink { color: var(--color-paper); }
.sg-field.is-ink .eyebrow { color: var(--color-paper); }
.sg-marks .eyebrow { display: flex; align-items: center; gap: 0.75rem; }
.sg-marks ul { list-style: none; display: grid; gap: 0.5rem; }
.sg-marks li { display: flex; align-items: center; gap: 0.875rem; }
/* a horizon and a stem, as Header.Text-Media sets its picture */
.sg-hairline { position: relative; width: 18rem; height: 6rem; padding: 0; }
.sg-hairline > .line-h { top: 3rem; }
.sg-hairline > .line-v { left: 6rem; top: 0; bottom: auto; height: 3rem; }
.sg-cards { margin: 0; grid-template-columns: repeat(2, minmax(0, 21.6875rem)); }
.sg-scroll { overflow-x: auto; }
.sg-matrix { border-collapse: collapse; min-width: 40rem; font-size: var(--large-text-sm); letter-spacing: var(--track-sm); line-height: 1.5; }
.sg-matrix th, .sg-matrix td { padding: 0.75rem 2rem 0.75rem 0; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.sg-matrix th { font-weight: var(--fw-regular); color: var(--color-ink-mid); }
.sg-reveal { position: relative; width: var(--col4); max-width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.sg-reveal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-replay { margin-top: 1.5rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
@media (max-width: 800px) {
  .sg-cards { grid-template-columns: 1fr; }
  .sg-matrix { min-width: 36rem; font-size: var(--small-text-sm); letter-spacing: var(--small-track-sm); }
  .sg-hairline { width: 100%; }
}

/* ---------- the module overview's own head and the Site.Header specimen (F-R379) ---------- */
.mod-intro { padding: 11rem var(--margin) 3.5rem; }
.mod-intro h1 {
  margin-top: 1.25rem;
  width: var(--col6);
  font-size: var(--large-text-5xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--track-5xl);
}
.mod-intro .m-lead { margin-top: 2rem; width: var(--col4); }
.mod-index {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
  font-size: var(--large-text-sm);
  letter-spacing: var(--track-sm);
}
.mod-index a { color: var(--color-ink-mid); transition: color 0.25s ease; }
.mod-index-group { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.mod-index-group b {
  font-family: "DM Mono", monospace;
  font-size: var(--large-text-xs);
  font-weight: 400;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}
.mod-index a:hover { color: var(--color-ink); }

/* the page chrome as a specimen: out of its fixed position, in the block's flow */
.mod-chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 7rem;
  padding: 1.5rem var(--margin);
  background: var(--color-bg);
}
.mod-chrome[data-ground="valentino"] { background: var(--color-ink); }
.mod-chrome .site-header-v4,
.mod-chrome .contact-card,
.mod-chrome .burger-box { position: static; top: auto; right: auto; left: auto; }
.mod-chrome .site-header-v4 { order: 1; }
.mod-chrome .contact-card { order: 2; margin-left: auto; }
.mod-chrome .burger-box { order: 3; }
.mod-chrome .site-header-line { display: none; }

@media (max-width: 800px) {
  .mod-intro { padding: 8rem var(--margin) 2.5rem; }
  .mod-intro h1 { width: auto; font-size: var(--small-text-4xl); letter-spacing: var(--small-track-4xl); }
  .mod-intro .m-lead { width: auto; }
  .mod-index { margin-top: 2rem; font-size: var(--small-text-md); letter-spacing: var(--small-track-md); }
  .mod-section { padding: 5.5rem var(--margin) 0; }
  .mod-section::before { top: 3.5rem; }
  .mod-section h2 { font-size: var(--small-text-3xl); letter-spacing: var(--small-track-3xl); }
  .mod-section .m-lead, .mod-desc, .mod-config span { width: auto; font-size: var(--small-text-md); letter-spacing: var(--small-track-md); }
  .mod-spacing { width: auto; font-size: 0.6875rem; }
  .mod-head { padding: 3rem var(--margin) 1rem; }
  .mod-head::before { top: 1.5rem; }
  .mod-name { font-size: var(--small-text-2xl); }
  .mod-config { display: block; padding: 1.5rem var(--margin) 0.75rem; }
  .mod-config span { display: block; margin-top: 0.25rem; }
  .mod-chrome { min-height: 5.5rem; gap: 1rem; padding: 1rem var(--margin); }
}