/* ============================================================
   facility - layout + components. Consumes var() ONLY: no raw
   hex, no raw font-family, no raw durations. Skin: brand.css.
   Reference: [YL] yllw.com (_brand/blueprints/yllw.md).
   Breakpoints 991 / 767 / 479 (desktop first, as the reference).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--sp-s)); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.5;
  font-variation-settings: "wght" 400, "wdth" 100;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
p, address, dd { font-family: var(--font-body); }
.display, .stat-num, .eyebrow, .tb-l, .tb-r { font-family: var(--font); }  /* big words and labels are <p> too: keep the heading font */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--pad-x); top: -100px; z-index: 2000; background: var(--accent); color: var(--accent-ink); padding: var(--btn-pad); }
.skip:focus { top: 8px; }

/* ---- type roles --------------------------------------------------- */
.h1, .h2, .h3, .card-h, .display, .stat-num, .fs-t, .foot-cta, .w {
  text-transform: uppercase; font-weight: 400;
}
.h1 { font-size: var(--h1); line-height: var(--lh-display); letter-spacing: -0.04rem; font-variation-settings: var(--fv-h1); }
.h2 { font-size: var(--h2); line-height: var(--lh-display); letter-spacing: var(--track-h2); font-variation-settings: var(--fv-h2); }
.h3 { font-size: var(--h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); font-variation-settings: var(--fv-h3); }
.h4 { font-size: var(--t-h4); line-height: 1.04; letter-spacing: -0.01rem; font-variation-settings: var(--fv-h4); }
.t-reg { font-size: var(--t-reg); line-height: var(--lh-reg); }
.t-large { font-size: var(--t-large); line-height: var(--lh-large); }
.t-tiny { font-size: var(--t-tiny); line-height: var(--lh-reg); }
/* muted = the parent's text colour at 65 %, so it stays readable when a hover flips the card to dark or accent */
.muted { color: color-mix(in srgb, currentColor 65%, transparent); }
.eyebrow { font-size: var(--t-reg); line-height: var(--lh-reg); }

/* placeholder value the client still has to confirm (preview only) */
.ph-txt { background: var(--accent-soft); color: var(--accent-ink); padding: 0 .2em; border-radius: var(--r-btn); }
.ph-chk { background: var(--stone-light); color: var(--ink); padding: 0 .2em; border-radius: var(--r-btn); box-shadow: inset 0 -2px 0 var(--accent); }
/* photo slot without a photo yet */
.ph { display: block; background: var(--placeholder); width: 100%; height: 100%; }

/* ---- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--btn-pad); border-radius: var(--r-btn);
  font-size: var(--t-body); line-height: 1; font-variation-settings: var(--fv-btn);
  background: var(--btn-bg); color: var(--btn-ink); white-space: nowrap; min-height: 40px;
  transition: border-radius var(--t-btn), background-color var(--t-btn), color var(--t-btn), box-shadow var(--t-btn);
}
.btn:hover { border-radius: var(--r-btn-hover); background: var(--accent-soft); color: var(--accent-ink); }
.btn--secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--secondary:hover { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--light { background: var(--on-dark); color: var(--ink); }
.btn--light:hover { background: var(--accent); color: var(--accent-ink); }
.btn--outline-light { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--on-dark); }
.btn--outline-light:hover { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--s { padding: var(--btn-pad-s); min-height: 32px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }

.alink {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 0;
  font-variation-settings: "wght" 500, "wdth" 86;
  transition: padding var(--t-link) var(--ease-link), color var(--t-btn) var(--ease-tab);
}
.alink svg { width: 20px; height: 20px; flex: none; }
.alink:hover { padding-left: .5rem; color: var(--stone-dark); }

/* nav label roll: the label and its copy (::after) stack in a 24px mask */
.roll { display: inline-block; height: 24px; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform var(--t-btn) var(--ease-link); }
.roll > span::after { content: attr(data-t); display: block; }
.roll:hover > span, .roll:focus-visible > span { transform: translateY(-24px); }

/* ---- layout primitives -------------------------------------------- */
.px { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sp-s { height: var(--sp-s); } .sp-m { height: var(--sp-m); } .sp-l { height: var(--sp-l); }
.sp-h { height: var(--sp-h); } .sp-xh { height: var(--sp-xh); }

/* hairline grid: 1px gaps over the line colour, square cells */
.hl { display: grid; gap: var(--hairline); padding: var(--hairline); background: var(--line); }
.hl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl > * { background: var(--bg); }

/* soft colour band: .tint = the soft brand tint (FAQ, footer) */
.tint { background: var(--tint); }
section.tint { padding-top: var(--sp-l); padding-bottom: var(--sp-l); }

/* section header strip */
.strip { border-top: var(--hairline) solid var(--line); padding: 12px var(--pad-x); text-align: center; }
.strip .h3 { font-size: var(--h3); }

/* ---- header -------------------------------------------------------- */
.site-head { position: fixed; inset: 0 0 auto; z-index: 999; background: var(--bg); }
.topbar {
  max-height: var(--top-h); overflow: hidden; background: var(--accent); color: var(--accent-ink);
  transition: max-height var(--t-top-coll) var(--ease-out);
}
.site-head.is-collapsed .topbar { max-height: 0; }
.topbar-in {
  height: var(--top-h); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--gap); align-items: center; white-space: nowrap;
  padding: 0 var(--pad-x); font-size: var(--t-top); line-height: 1; font-variation-settings: "wght" 475, "wdth" 90;
}
.tb-r { justify-self: end; }
.tb-r a:hover, .tick a:hover { text-decoration: underline; }
.tick { height: var(--top-h); overflow: hidden; justify-self: center; text-align: center; }
.tick ul { animation: tick var(--t-tick) var(--ease-io) infinite; }
.tick li { height: var(--top-h); display: flex; align-items: center; justify-content: center; }
.tick:hover ul { animation-play-state: paused; }
@keyframes tick {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(calc(var(--top-h) * -1)); }
  66%, 94%  { transform: translateY(calc(var(--top-h) * -2)); }
  100%      { transform: translateY(calc(var(--top-h) * -3)); }
}

.nav {
  height: var(--nav-h); padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  font-size: var(--t-body); line-height: 24px; font-variation-settings: var(--fv-nav);
}
.logo { display: flex; align-items: center; gap: 10px; height: 24px; flex: none; }
.logo svg, .logo img { height: 100%; width: auto; }
.logo-name { font-variation-settings: var(--fv-h1); text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; }
.nav-group { display: flex; align-items: center; gap: var(--gap); }
/* language switch: flag + language name, no frame, so the full word fits on phones too */
.lang { display: inline-flex; align-items: center; gap: 8px; flex: none; font-variation-settings: "wght" 550, "wdth" 82; }
.lang:hover .lang-long, .lang:hover .lang-short { text-decoration: underline; }
.lang svg { width: 24px; height: 16px; flex: none; border-radius: 2px; box-shadow: 0 0 0 var(--hairline) var(--line); }
.lang-short { display: none; }
.nav-tel { font-variation-settings: "wght" 550, "wdth" 82; }
.burger { display: none; width: 40px; height: var(--nav-h); align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: transform var(--t-btn) var(--ease-link), background-color var(--t-btn); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }

.menu {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--top-h) + var(--nav-h));
  background: var(--bg); overflow: auto; padding: var(--sp-s) 0 calc(var(--sp-m) + 64px); border-bottom: var(--hairline) solid var(--line);
}
.site-head.is-collapsed .menu { top: var(--nav-h); }
.menu-open .menu { display: block; }
.menu a.menu-row {
  display: flex; justify-content: space-between; align-items: center; padding: 8px var(--pad-x);
  border-top: var(--hairline) solid var(--line-input); font-size: var(--t-menu); line-height: 1.2; font-variation-settings: var(--fv-menu);
}
.menu a.menu-row svg { width: 24px; height: 24px; }
.menu .btns { padding: var(--sp-s) var(--pad-x) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

main { padding-top: calc(var(--top-h) + var(--nav-h)); }

/* ---- hero ---------------------------------------------------------- */
.hero { padding: 20vh var(--pad-x) 10vh; text-align: center; }
.hw { container-type: inline-size; max-width: 1440px; margin: 0 auto; }
.hw-in { display: flex; flex-direction: column; align-items: center; gap: 3.4cqw; }
.hw-line { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.w {
  font-size: var(--hero-size); line-height: var(--lh-hero); letter-spacing: var(--track-hero);
  font-variation-settings: var(--fv-hero); text-box: trim-both cap alphabetic; white-space: nowrap;
}
.mark { height: var(--mark-h); aspect-ratio: var(--mark-ratio); flex: none; }  /* sits on the baseline (lines align to the end), grows up past the cap height */
.mark svg { width: 100%; height: 100%; }
.mark svg, .foot-mark svg, .logo svg { fill: currentColor; }
.cyc { position: relative; height: 8.1cqw; width: 16cqw; overflow: hidden; flex: none; animation: cyc-w var(--t-cycle) var(--ease-word) infinite; }
.cyc > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: var(--t-cycle) step-end infinite; }
/* as on the reference: each photo swaps in the moment the box starts to resize, once per loop the box closes fully */
.cyc > :nth-child(1) { animation-name: cyc-1; }
.cyc > :nth-child(2) { animation-name: cyc-2; }
.cyc > :nth-child(3) { animation-name: cyc-3; }
.cyc > :nth-child(4) { animation-name: cyc-4; }
@keyframes cyc-1 { 0% { opacity: 1; } 10% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes cyc-2 { 0% { opacity: 0; } 10% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes cyc-3 { 0% { opacity: 0; } 43% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes cyc-4 { 0% { opacity: 0; } 77% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes cyc-w {
  0%, 10%   { width: 14.5cqw; }
  16%, 26%  { width: 19.5cqw; }
  32%, 43%  { width: 0; }
  60%, 77%  { width: 16.5cqw; }
  84%, 93%  { width: 7.5cqw; }
  100%      { width: 14.5cqw; }
}
.hw.is-off .cyc, .hw.is-off .cyc > * { animation-play-state: paused; }
.hero-lead { max-width: var(--measure); margin: 48px auto 0; font-size: var(--t-reg); line-height: var(--lh-reg); }
.hero .btns { justify-content: center; margin-top: var(--sp-s); }

/* ---- fullscreen slider ---------------------------------------------- */
.fs { position: relative; min-height: 100vh; overflow: hidden; background: var(--dark); color: var(--on-dark); }
.fs-bg, .fs-slide { position: absolute; inset: 0; }
.fs-slide { opacity: 0; transition: opacity var(--t-slide) var(--ease-io); }
.fs-slide.is-on { opacity: 1; }
.fs-slide img, .fs-slide .ph { width: 100%; height: 100%; object-fit: cover; opacity: var(--photo-dim); }
.fs-titles { position: absolute; inset: 0; }
.fs-t {
  position: absolute; left: 50%; top: 50%; margin: 0; cursor: pointer; white-space: pre; text-align: center;
  font-size: var(--slide-off); line-height: var(--lh-hero); letter-spacing: -0.02em;
  font-variation-settings: var(--fv-slide-off); opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%);
  transition: font-size var(--t-btn) ease, font-variation-settings var(--t-morph) var(--ease-morph),
              transform var(--t-slide) var(--ease-morph), opacity var(--t-btn) ease;
}
.fs-t.is-on { font-size: var(--slide-on); font-variation-settings: var(--fv-slide-on); opacity: 1; pointer-events: auto; cursor: default; }
.fs-t.is-prev { opacity: .6; pointer-events: auto; transform: translate(calc(-50vw + var(--pad-x)), -50%); text-align: left; }
.fs-t.is-next { opacity: .6; pointer-events: auto; transform: translate(calc(50vw - var(--pad-x) - 100%), -50%); text-align: right; }
.fs-t.is-prev:hover, .fs-t.is-next:hover { opacity: 1; }
.fs-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad-x) 32px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.fs-arrows { display: flex; gap: 12px; }
.fs-arrow {
  width: 40px; height: 40px; border-radius: var(--r-ui); display: grid; place-items: center; color: var(--on-dark);
  box-shadow: 0 0 0 1px var(--on-dark);
  transition: background-color var(--t-btn), color var(--t-btn);
}
.fs-arrow svg { width: 16px; height: 16px; }
.fs-arrow:hover { background: var(--on-dark); color: var(--ink); }
.fs-copy { position: relative; display: grid; }
.fs-text { grid-area: 1 / 1; display: grid; gap: 20px; opacity: 0; visibility: hidden; margin-left: -24px; transition: opacity var(--t-tick-out) var(--ease-out), visibility 0s linear var(--t-tick-out), margin 0s linear var(--t-tick-out); }
.fs-text.is-on { opacity: 1; visibility: visible; margin-left: 0; transition: margin var(--t-card) var(--ease-out) var(--t-tick-out), opacity var(--t-card) var(--ease-out) var(--t-tick-out); }
.fs-text p { font-size: var(--t-h4); line-height: var(--lh-large); max-width: 38ch; }

/* ---- centred statement block ---------------------------------------- */
.intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-s); padding: 0 var(--pad-x); }
.intro .h2 { max-width: 640px; }
.intro p { max-width: var(--measure); text-wrap: pretty; }

/* ---- process cards --------------------------------------------------- */
.steps .step { position: relative; min-height: 65vh; display: flex; flex-direction: column; color: var(--ink); overflow: hidden; }
.step-bg { position: absolute; inset: 0; background: var(--dark); opacity: 0; transition: opacity var(--t-card) var(--ease-out); }
.step-bg img, .step-bg .ph { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.step-top { position: relative; padding: var(--sp-s); display: grid; gap: var(--gap); justify-items: start; }
.step-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: var(--t-body); transition: background-color var(--t-card), color var(--t-card); }
.step .card-h { font-size: var(--card-h); line-height: 1; letter-spacing: -0.025rem; font-variation-settings: var(--fv-card); max-width: 17ch; }
.step-more { overflow: hidden; }
.step-more p { transform: translateY(-100%); opacity: 0; transition: transform var(--t-card) var(--ease-link), opacity var(--t-card) var(--ease-out); font-size: var(--t-body); }
.step-list { position: relative; margin-top: auto; }
.step-list li { border-top: var(--hairline) solid var(--line); padding: 8px 16px; font-size: var(--t-tiny); line-height: var(--lh-reg); }
.steps:not(:hover) .step:first-child, .steps .step:hover { color: var(--on-dark); }
.steps:not(:hover) .step:first-child .step-bg, .steps .step:hover .step-bg { opacity: 1; }
.steps:not(:hover) .step:first-child .step-num, .steps .step:hover .step-num { background: var(--soft); color: var(--ink); }
.steps:not(:hover) .step:first-child .step-more p, .steps .step:hover .step-more p { transform: none; opacity: 1; }
.steps:not(:hover) .step:first-child .step-list li, .steps .step:hover .step-list li { border-color: var(--line-on-dark); }
.linkrow { display: flex; justify-content: center; border-bottom: var(--hairline) solid var(--line); padding: 8px var(--pad-x); }
.linkrow .alink { padding-top: 8px; padding-bottom: 8px; }

/* ---- stats + wide image ---------------------------------------------- */
.stats .stat { container-type: inline-size; padding: 16px var(--pad-x); display: flex; flex-direction: column; justify-content: space-between; gap: 80px; min-height: 239px; }
.stat-num { font-size: 22cqw; line-height: .9; letter-spacing: -0.015em; font-variation-settings: var(--fv-stat); font-variant-numeric: tabular-nums; }
.wide { aspect-ratio: 2 / 1; overflow: hidden; }
.wide img, .wide .ph { width: 100%; height: 100%; object-fit: cover; }

/* ---- services accordion ---------------------------------------------- */
.sec-head { row-gap: 40px; }
.sec-head .eyebrow { grid-column: 1 / 5; }
.sec-head .sh-main { grid-column: 5 / 10; display: grid; gap: 40px; }
.sec-head.at7 .sh-main { grid-column: 7 / 12; }
.svc-list { margin-top: 48px; }
.svc:last-child { border-bottom: var(--hairline) solid var(--line); }
.svc { border-top: var(--hairline) solid var(--line); transition: background-color var(--t-btn), box-shadow var(--t-btn); }
/* open or hovered row: soft colour band, bled out to the page edge (shadow, clipped to the row height) */
.svc[open], .svc:has(> summary:hover) { background: var(--soft); box-shadow: 0 0 0 var(--pad-x) var(--soft); clip-path: inset(0 calc(var(--pad-x) * -1)); }
.svc .btn:not(.btn--secondary):not(:hover), .tint .btn:not(.btn--secondary):not(:hover) { background: var(--bg); }  /* the primary button stays visible on soft colour */
.tint .help:not(:hover) { background: var(--bg); }  /* white call card on the soft FAQ band */
.svc > summary { list-style: none; cursor: pointer; padding: 24px 0; align-items: center; }
.svc > summary::-webkit-details-marker { display: none; }
.svc-desc { grid-column: 1 / 5; font-size: var(--t-reg); line-height: var(--lh-reg); }
.svc .h3 { grid-column: 5 / 12; transition: padding var(--t-card) var(--ease-bar); }
.svc > summary:hover .h3 { padding-left: .5rem; }
.plus { grid-column: 12; justify-self: end; width: 24px; height: 24px; transition: transform var(--t-acc) var(--ease-io); }
.svc[open] .plus, .faq__item[open] .plus { transform: rotate(45deg); }
.svc-body { padding-bottom: var(--sp-m); row-gap: var(--sp-m); }
.svc-copy { grid-column: 5 / 11; display: grid; gap: 20px; justify-items: start; }
.svc-copy p { max-width: 480px; font-size: var(--t-reg); line-height: var(--lh-reg); }
.svc-tabs { grid-column: 1 / 5; align-self: start; }
.svc-tab { display: block; width: 100%; text-align: left; border-bottom: var(--hairline) solid var(--line); padding: 16px 0; opacity: .6; transition: opacity var(--t-tab) var(--ease-tab); }
.svc-tab:hover, .svc-tab.is-on { opacity: 1; }
.svc-tab strong { display: block; font-size: var(--t-h4); font-weight: 400; font-variation-settings: "wght" 500, "wdth" 100; }
.svc-tab span { display: none; margin-top: 6px; font-size: var(--t-body); line-height: var(--lh-reg); }
.svc-tab.is-on span { display: block; }
.svc-img { grid-column: 5 / 10; aspect-ratio: 1; max-width: 550px; overflow: hidden; }
.svc-img img, .svc-img .ph { width: 100%; height: 100%; object-fit: cover; }
details.svc::details-content, details.faq__item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size var(--t-acc) var(--ease-io), content-visibility var(--t-acc) allow-discrete;
}
details.svc[open]::details-content, details.faq__item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---- marquee ---------------------------------------------------------- */
.marquee { overflow: hidden; border-top: var(--hairline) solid var(--line); }
.marquee:last-child { border-bottom: var(--hairline) solid var(--line); }
.mq-track { display: flex; width: max-content; animation: mq var(--t-marquee) linear infinite; }
.marquee.rev .mq-track { animation-direction: reverse; }
.mq-cell { width: 24rem; padding: 48px 0; display: grid; place-items: center; }
.mq-cell img, .mq-cell .ph-logo { max-width: 200px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.ph-logo { width: 160px; height: 48px; background: var(--placeholder); display: grid; place-items: center; font-size: var(--t-tiny); }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- sticky stack (segments / cases) ---------------------------------- */
.stack { position: relative; }
/* the visible word is decorative (aria-hidden, drawn by ::before); a screen-reader h2 carries the heading */
.stack-word { position: sticky; top: 0; height: 0; z-index: 2; padding-top: 5vh; container-type: inline-size; pointer-events: none; mix-blend-mode: difference; }
.stack-word .display { color: var(--invert-ink); }
.stack-word .display::before { content: attr(data-word); }  /* text in a pseudo-element: contrast checkers cannot read blend modes */
.stack-pin { position: sticky; top: 0; height: 100vh; padding-top: calc(5vh + var(--display) * var(--lh-display)); z-index: 0; container-type: inline-size; }
.stack-word .display {
  display: block; text-align: center; font-size: var(--display); line-height: var(--lh-display);
  letter-spacing: var(--track-hero); font-variation-settings: var(--fv-display);
}
.stack-copy { grid-column: 6 / 9; display: grid; gap: var(--sp-s); justify-items: start; margin-top: var(--sp-m); }
.stack-cards { position: relative; z-index: 1; margin-top: -45vh; padding-bottom: var(--sp-l); display: grid; row-gap: 0; }
.stack-card:nth-child(n) { grid-row: auto; }
.stack-card:nth-child(4n+2) { margin-top: -30vh; }
.stack-card:nth-child(4n+3) { margin-top: 12vh; }
.stack-card:nth-child(4n+4) { margin-top: 4vh; }  /* never slides up into the card above it */
.stack-card { align-self: start; display: grid; gap: 12px; padding-bottom: 8px; background: var(--bg); }  /* start: a short card never stretches to its row partner */
.stack-card .img { aspect-ratio: 4 / 5; overflow: hidden; }
.stack-card img, .stack-card .ph { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-bar) var(--ease-bar); }
.stack-card:hover img { transform: scale(1.04); }
/* the whole card is the link; the button only shows that it is one */
.stack-card .cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px var(--gap); }
.stack-card .cap-t { display: grid; flex: 1 1 12rem; }  /* button wraps below the name on narrow cards */
.stack-card .cap-t span { opacity: .65; }
.stack-card .btn { flex: none; }
.stack-card:hover .btn { border-radius: var(--r-btn-hover); background: var(--accent-soft); color: var(--accent-ink); }
.stack-card .cap strong { font-weight: 400; font-size: var(--t-h4); line-height: var(--lh-large); font-variation-settings: "wght" 500, "wdth" 100; }
/* cards keep clear of the copy column (6-8): left cards end at 5, right cards start at 9 */
.stack-card:nth-child(4n+1) { grid-column: 1 / 6; }
.stack-card:nth-child(4n+2) { grid-column: 10 / 13; }
.stack-card:nth-child(4n+3) { grid-column: 2 / 6; }
.stack-card:nth-child(4n+4) { grid-column: 9 / 13; }

/* ---- photo + floating card ------------------------------------------- */
.cta-photo { position: relative; min-height: 80vh; display: grid; place-items: center; padding: var(--sp-l) var(--pad-x); }
.cta-photo > .bg { position: absolute; inset: 0; }
.cta-photo > .bg img, .cta-photo > .bg .ph { width: 100%; height: 100%; object-fit: cover; }
.cta-card {
  position: relative; width: 20%; min-width: 400px; padding: 32px; border-radius: var(--r-card); background: var(--bg);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7vh;
}
.cta-card p { max-width: 336px; }

/* ---- testimonials ----------------------------------------------------- */
.quotes { margin-top: var(--sp-m); }
.quote { border-top: var(--hairline) solid var(--line-soft); padding: 16px 0 32px; display: flex; gap: var(--gap); }
.quote-who { width: calc(33.333% - 1rem); flex: none; }
.quote-who strong { display: block; font-weight: 400; font-size: var(--t-reg); font-variation-settings: "wght" 500, "wdth" 100; }
.quote-who span { opacity: .65; }
.quote blockquote { margin: 0; font-size: 1.5rem; line-height: 1.3; max-width: 75ch; }

/* ---- FAQ -------------------------------------------------------------- */
.faq-l { grid-column: 1 / 6; display: grid; gap: var(--sp-s); align-content: start; justify-items: start; }
.faq-l p { max-width: 450px; font-size: var(--t-reg); line-height: var(--lh-reg); }
.faq-r { grid-column: 7 / 13; }
.faq__item { border-top: var(--hairline) solid var(--line-soft); }
.faq__item:last-of-type { border-bottom: var(--hairline) solid var(--line-soft); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: var(--gap);
  font-size: var(--t-h4); line-height: 1.04; letter-spacing: -0.01rem; font-variation-settings: var(--fv-h4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .plus { flex: none; }
.faq__item p { max-width: 50ch; padding-bottom: var(--sp-s); font-size: var(--t-body); line-height: var(--lh-reg); }
.help {
  margin-top: var(--sp-m); display: grid; gap: 80px; padding: 24px 24px 32px; border: var(--hairline) solid var(--line); border-radius: var(--r-card);
  transition: background-color var(--t-btn);
}
.help:hover { background: var(--accent); color: var(--accent-ink); }
.help:hover .muted { color: inherit; }  /* 65 % white on accent is too faint */
.help .t-large { font-variation-settings: var(--fv-large); line-height: 1.17; }
.help-go { display: flex; align-items: center; gap: 16px; font-size: var(--h3); line-height: 1; text-transform: uppercase; font-variation-settings: var(--fv-h3); }
.help-go svg { width: 40px; height: 40px; flex: none; }

/* ---- footer ------------------------------------------------------------ */
.foot-cta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--gap);
  border-top: var(--hairline) solid var(--line); padding: 32px var(--pad-x); background: var(--accent); color: var(--accent-ink);
  font-size: var(--bar); line-height: 1; letter-spacing: -0.005em; font-variation-settings: var(--fv-bar);
  transition: padding var(--t-bar) var(--ease-bar), background-color var(--t-btn) var(--ease-bar), color var(--t-btn);
}
.foot-cta svg { width: 1em; height: 1em; flex: none; }
.foot-cta:hover { background: var(--bg); color: var(--ink); padding-left: calc(var(--pad-x) + 2rem); }
.foot { position: relative; border-top: var(--hairline) solid var(--line); padding: 32px var(--pad-x) var(--sp-h); }
.foot-desc { grid-column: 1 / 6; display: grid; gap: var(--sp-s); align-content: start; font-size: var(--t-reg); line-height: var(--lh-reg); }
.foot-desc address { font-style: normal; }
.foot-col { font-size: var(--t-reg); line-height: 27px; font-variation-settings: var(--fv-footlink); }
.foot-col.c1 { grid-column: 8 / 10; } .foot-col.c2 { grid-column: 10 / 13; }
.foot-col a:hover { color: var(--stone-dark); }
.foot-col h2 { font-size: var(--t-body); line-height: 27px; font-variation-settings: "wght" 400, "wdth" 100; opacity: .65; margin-bottom: 4px; }
.foot-mark { display: flex; justify-content: center; margin-top: var(--sp-l); }
.foot-mark svg, .foot-mark img { height: var(--mark-h); width: auto; aspect-ratio: var(--mark-ratio); object-fit: contain; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--sp-s); border-top: var(--hairline) solid var(--line); padding: 16px var(--pad-x); font-size: var(--t-tiny); }
.foot-legal nav { display: flex; gap: var(--sp-s); }
.foot-legal a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.foot-legal a:hover { text-decoration: underline; }

/* mobile call bar (WEBSITE-STANDARD 5) */
.callbar { display: none; }

/* ---- subpages ---------------------------------------------------------- */
.page-head { padding: var(--sp-h) var(--pad-x) var(--sp-l); text-align: center; }
.page-head .h1 { max-width: 20ch; margin: 0 auto; text-wrap: balance; hyphens: auto; }
.split { row-gap: var(--sp-s); padding-bottom: var(--sp-l); }
.split-l { grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-s); align-items: flex-start; }
.split-r { grid-column: 7 / 12; }
.inset { padding: 0 var(--pad-x); }
.inset .img { aspect-ratio: 1392 / 810; overflow: hidden; }
.inset img, .inset .ph { width: 100%; height: 100%; object-fit: cover; }
.incl .cell { padding: var(--sp-s); display: grid; gap: var(--gap); align-content: start; min-height: 320px; }
.incl .card-h { font-size: var(--card-h); line-height: 1; letter-spacing: -0.025rem; font-variation-settings: var(--fv-card); }
.incl li { border-top: var(--hairline) solid var(--line); padding: 8px 0; font-size: var(--t-tiny); line-height: var(--lh-reg); }
.rows { display: grid; gap: var(--sp-l); }
.row { align-items: center; row-gap: var(--sp-s); }
.row .img { grid-column: 2 / 7; aspect-ratio: 1; overflow: hidden; }
.row .img img, .row .img .ph { width: 100%; height: 100%; object-fit: cover; }
.row .txt { grid-column: 8 / 12; display: grid; gap: var(--sp-s); justify-items: start; }
.row.flip .img { grid-column: 7 / 12; grid-row: 1; }
.row.flip .txt { grid-column: 2 / 6; grid-row: 1; }
.row .txt .h2 { font-size: var(--h3); }
.row .txt p { font-size: var(--t-body); line-height: var(--lh-reg); }

.contact-word { container-type: inline-size; padding: var(--sp-l) var(--pad-x) var(--sp-m); }
.contact-word .h1 { font-size: 22cqw; line-height: .85; text-align: center; letter-spacing: -0.02em; font-variation-settings: var(--fv-hero); text-box: trim-both cap alphabetic; }
.form-wrap { position: relative; padding: var(--sp-h) var(--pad-x); display: grid; place-items: center; }
.form-wrap > .bg { position: absolute; inset: 0; }
.form-wrap > .bg img, .form-wrap > .bg .ph { width: 100%; height: 100%; object-fit: cover; }
/* no scroll-linked motion: photos and cards move only with the page, drifting content reads as lag */
.wide, .form-wrap > .bg, .cta-photo > .bg { overflow: clip; }
.form-card { position: relative; width: 100%; max-width: 720px; background: var(--bg); border-radius: var(--r-card); padding: 32px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-s) var(--gap); }
.field { display: grid; gap: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-body); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); width: 100%; min-height: 44px; padding: 8px 12px; background: transparent;
  border: var(--hairline) solid var(--line-input); border-radius: var(--r-card); transition: background-color var(--t-btn);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--line-input); }
.check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-tiny); line-height: var(--lh-reg); }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.check a { text-decoration: underline; }
.hp { display: none; }
.facts { row-gap: var(--sp-m); }
.facts > div { grid-column: span 3; display: grid; gap: 8px; align-content: start; }
.facts dt, .facts h2 { font-size: var(--t-body); opacity: .65; font-variation-settings: "wght" 400, "wdth" 100; }
.facts p, .facts a { font-size: var(--t-large); line-height: var(--lh-large); font-variation-settings: var(--fv-large); }
.facts a:hover { color: var(--stone-dark); }

.legal { max-width: 48rem; margin: 0 auto; padding: var(--sp-h) var(--pad-x) var(--sp-l); }
.legal h1 { font-size: var(--h2); hyphens: auto; overflow-wrap: break-word; line-height: var(--lh-display); text-transform: uppercase; font-variation-settings: var(--fv-h2); margin-bottom: var(--sp-m); }
.legal h2 { font-size: var(--t-h4); font-variation-settings: "wght" 560, "wdth" 100; margin: 2em 0 .6em; }
.legal p, .legal li { font-size: var(--t-body); line-height: 1.6; margin-bottom: 1em; }
.legal a { text-decoration: underline; }

/* small desktop: the phone number stays in the topbar, the nav needs the room for the language button */
@media (max-width: 1199px) { .nav:has(.lang) .links-tel { display: none; } }

/* ======================================================================
   tablet <= 991
   ====================================================================== */
@media (max-width: 991px) {
  .nav-group.links { display: none; }
  .burger { display: inline-flex; }
  /* no topbar on phones and tablets: its collapse on scroll re-laid out the page and made scrolling lag */
  :root { --top-h: 0px; }
  .topbar { display: none; }
  .h1 { font-size: var(--h1-t); }
  .h2 { font-size: var(--h2-t); }
  .step .card-h, .incl .card-h { font-size: var(--card-h-t); }
  .hl-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-l { height: 40px; } .sp-xh { height: var(--sp-h); }
  .stack-word .display { font-size: var(--display-m); }
  .stack-pin { padding-top: calc(5vh + var(--display-m) * var(--lh-display)); }
}

/* ======================================================================
   mobile <= 767
   ====================================================================== */
@media (max-width: 767px) {
  :root { --pad-x: var(--pad-x-m); }
  .grid12 { display: flex; flex-direction: column; }
  .btn { padding: var(--btn-pad-m); }
  .btn--s { padding: var(--btn-pad-s); }
  .sp-l { height: var(--sp-l-m); } .sp-h { height: var(--sp-h-m); } .sp-xh { height: var(--sp-xh-m); }
  .h1 { font-size: var(--h1-m); line-height: .9; letter-spacing: -0.005em; }
  .h2 { font-size: var(--h2-m); line-height: .93; letter-spacing: -0.008em; }
  .legal h1 { font-size: min(var(--h2-m), 9.2vw); }  /* "Datenschutzerklärung" on one line */
  .h3, .strip .h3 { font-size: var(--h3-m); line-height: .96; }
  .nav .nav-cta, .nav .links-tel { display: none; }
  .nav { gap: 12px; } .nav .nav-group { gap: 4px; }
  .logo-name { font-size: 1.3rem; }
  .lang { gap: 6px; }

  .hero { padding: 23vh var(--pad-x) 10vh; }
  .hw-line { flex-wrap: wrap; row-gap: 16px; }
  .w { font-size: var(--hero-size-m); letter-spacing: -0.01em; }
  .hw-line { column-gap: 2cqw; }
  .mark { height: var(--mark-h-m); }
  .cyc { height: 11.3cqw; animation-name: cyc-w-m; }  /* cap height of the phone hero word */
  @keyframes cyc-w-m { 0%, 10% { width: 28cqw; } 16%, 26% { width: 38cqw; } 32%, 43% { width: 0; } 60%, 77% { width: 32cqw; } 84%, 93% { width: 15cqw; } 100% { width: 28cqw; } }
  .hero-lead { font-size: var(--t-body); margin-top: 32px; }

  .fs { min-height: 90vh; }
  /* phones: one fixed size, titles only slide and fade. A growing font is redrawn in steps there and looks choppy */
  .fs-t, .fs-t.is-on, .fs-t.is-prev, .fs-t.is-next {
    font-size: var(--slide-on-m); font-variation-settings: var(--fv-slide-on); white-space: normal; width: 20ch; text-align: center;
    transition: transform var(--t-slide) var(--ease-morph), opacity var(--t-slide) var(--ease-morph);
  }
  .fs-t.is-prev, .fs-t.is-next { opacity: 0; pointer-events: none; }
  .fs-t.is-prev { transform: translate(calc(-50% - 40vw), -50%); }
  .fs-t.is-next { transform: translate(calc(-50% + 40vw), -50%); }
  .fs-bar { grid-template-columns: 1fr; gap: var(--sp-s); text-align: center; justify-items: center; }
  .fs-arrows { order: 2; }
  .fs-text { justify-items: center; }
  .fs-text p { font-size: var(--t-body); }

  .intro { align-items: flex-start; text-align: left; }
  .page-head + .intro { align-items: center; text-align: center; }  /* under a centred page head (thanks page) */
  .faq-l { margin-bottom: var(--sp-m); }  /* the button must not touch the first question line */
  .hl-4, .hl-3 { grid-template-columns: 1fr; }
  .steps { background: none; padding: 0 var(--pad-x); gap: 32px; }
  .steps .step { min-height: 50vh; color: var(--on-dark); }
  .steps .step .step-bg { opacity: 1; }
  .steps .step .step-num { background: var(--soft); color: var(--ink); }
  .steps .step .step-more p { transform: none; opacity: 1; }
  .step .card-h, .incl .card-h { font-size: var(--card-h-m); }
  .step-list li { border-color: var(--line-on-dark); }

  .hl-4.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat { gap: 32px; min-height: 0; padding: 16px var(--pad-x) 12px; }
  .stat-num { font-size: var(--stat-m); }
  .wide { aspect-ratio: 1; }

  .svc > summary { display: flex; flex-direction: row; flex-wrap: wrap; padding: 16px 0; gap: 4px; }
  .svc-desc { width: 100%; }
  .svc .h3 { flex: 1; }
  .svc-body { gap: var(--sp-s); }

  .mq-cell { width: 17rem; padding: 40px 0; }

  .stack-word { position: static; height: auto; padding-top: 0; mix-blend-mode: normal; }  /* no cards pass under it on phones */
  .stack-word .display { color: var(--ink); }
  .stack-pin { position: static; height: auto; padding-top: 0; }
  .stack-word .display { text-align: left; padding: 0 var(--pad-x); }
  .stack-cards { margin-top: var(--sp-m); display: block; padding-bottom: 0; }
  .stack-card, .stack-card:nth-child(n) { width: 66.67%; margin: 0 0 4rem; }
  .stack-card:nth-child(even) { margin-left: auto; }

  .cta-card { width: 80%; min-width: 0; padding: 24px 20px; gap: 32px; }
  .quote { flex-direction: column; }
  .quote-who { width: auto; }
  .quote blockquote { font-size: var(--t-reg); }
  .help-go { font-size: var(--h3-m); }

  .foot-cta { font-size: max(var(--bar-m), 1.5rem); }
  .foot { padding-bottom: var(--sp-l-m); }
  .foot .grid12 { gap: var(--sp-s); }

  .form { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .row .img { aspect-ratio: 4 / 3; }

  /* fixed thumb bar: call + quote, always one tap away */
  .callbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
    padding: 8px var(--pad-x) calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: var(--hairline) solid var(--line);
  }
  .callbar .btn { min-height: 48px; padding-inline: 8px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}


/* ---- motion off -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cyc > :first-child { opacity: 1; }
  .mq-track { animation: none; }
}

/* ---- quote form in three steps (.qf). Without JS all steps show. ---- */
.qf { scroll-margin-top: calc(var(--nav-h) + var(--sp-s)); }
.qf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-s) var(--gap); }
.qf legend { padding: 0; width: 100%; margin-bottom: var(--sp-s); display: grid; gap: 8px; }  /* title and hint in one legend, which sits above the grid in every browser */
.qf-hint { font-size: var(--t-tiny); line-height: var(--lh-reg); color: var(--ink-muted); }
.qf-bar { grid-column: 1 / -1; display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: var(--t-tiny); }
.qf-bar li { border-top: 3px solid var(--line); padding-top: 8px; color: var(--ink-muted); transition: border-color var(--t-btn), color var(--t-btn); }
.qf-bar li.is-on, .qf-bar li.is-done { border-color: var(--accent); color: var(--ink); }
.qf-chips { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qf-chip { position: relative; display: flex; }
.qf-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qf-chip span { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: var(--hairline) solid var(--line-input); border-radius: var(--r-card); font-size: var(--t-tiny); line-height: var(--lh-reg); transition: background-color var(--t-btn), color var(--t-btn), border-color var(--t-btn); }
.qf-chip:hover span { background: var(--line-input); }
.qf-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qf-chip input:focus-visible + span { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.qf-nav { grid-column: 1 / -1; display: none; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.qf-step:last-of-type .qf-nav { display: flex; }
.qf-step:last-of-type .qf-nav [data-go] { display: none; }
.qf-safe { grid-column: 1 / -1; }
.qf.is-steps .qf-bar { display: grid; }
.qf.is-steps .qf-step { display: none; }
.qf.is-steps .qf-step.is-on { display: grid; }
.qf.is-steps .qf-nav, .qf.is-steps .qf-step:last-of-type .qf-nav [data-go] { display: flex; }
.qf.is-steps .qf-step:last-of-type .qf-nav [data-go] { display: inline-flex; }
/* below 390 px the full language word does not fit next to the logo: flag + code */
@media (max-width: 389px) { .lang-long { display: none; } .lang-short { display: inline; } }

@media (max-width: 359px) {
  .w { font-size: var(--hero-size-xs); }
  .mark { height: var(--mark-h-xs); }
  .cyc { height: 10.6cqw; }
  .nav { gap: 8px; } .burger { width: 36px; }
  .logo { gap: 8px; } .logo-name { font-size: 1.1rem; }
}
@media (max-width: 767px) {
  .qf fieldset, .qf-chips { grid-template-columns: 1fr; }
  .qf-nav .btn { flex: 1; }
}