@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/Lexend-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/Lexend-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/PlusJakartaSans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/PlusJakartaSans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* Weiße Elfen Duisburg - design B "Revier klar": editorial, bold type, square shapes, coal + linen + dusky-pink accent around the logo crimson */

:root {
  --crimson: #A21036;
  --crimson-dark: #850D2C;
  --coal: #17181C;
  --grey: #4A4D55;
  --mist: #ECE7DF;
  --line: #E1E4EA;
  --line-strong: #C9CDD4;
  --accent: #9A5463;       /* "Altrosa" (owner choice F, 2026-10-02; was Rhine blue) */
  --accent-light: #E8BFC8;
  --white: #FFFFFF;
  --paper: #F6F3EE;      /* page background: "Leinen" (owner choice B, 2026-10-02) */
  --card: #FDFCFA;       /* cards, forms, panels: one step lighter than the page */
  --error: #B3261E;
  --font-head: "Plus Jakarta Sans", Arial, sans-serif;
  --font-body: Lexend, Arial, sans-serif;
  --r: 4px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --space: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--grey); font: 400 1.0625rem/1.75 var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--crimson); text-underline-offset: 3px; }
a:hover { color: var(--crimson-dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); color: var(--coal); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; overflow-wrap: break-word; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0 0 1em; }
strong { color: var(--coal); }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.main { counter-reset: sec; }
.main:focus { outline: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--coal); color: #fff; padding: 10px 16px; z-index: 300; }
.skip:focus { left: 8px; color: #fff; }
.icon { width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.draft-flag { background: #F3E3E7; color: #5A2733; padding: 2px 6px; font-size: .82rem; }
.fine { font-size: .9rem; margin-top: 28px; opacity: .85; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), 1400px); }
.s { padding-block: var(--space); position: relative; }
.s--mist { background: var(--mist); }
.s--tight { padding-block: clamp(40px, 5vw, 64px); }
.measure { max-width: 720px; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--coal); font-weight: 300; }
.label { display: inline-block; font: 700 .98rem/1.1 var(--font-head); letter-spacing: .01em; text-transform: none; color: var(--crimson); margin-bottom: 18px; padding-bottom: 8px; border-bottom: 3px solid var(--accent); }

/* section heads with running numbers: "01 - Unsere Leistungen" */
.s-head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 56px); }
.kicker { display: flex; align-items: center; gap: 14px; font: 700 .98rem/1.1 var(--font-head); letter-spacing: .01em; text-transform: none; color: var(--crimson); margin-bottom: 18px; }
.kicker-no::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); color: var(--coal); }
.kicker-no { display: inline-flex; align-items: center; gap: 14px; }
.kicker-no::after { content: ""; width: 36px; height: 2px; background: var(--accent); }
.s-intro { font-size: 1.15rem; }
.u-line { position: relative; padding-bottom: 18px; }
.u-line::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--accent); }

/* Buttons: square, bold, fill animation */
.b { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 14px 26px; border: 2px solid var(--coal); border-radius: var(--r);
  font: 700 1.02rem/1.2 var(--font-head); text-decoration: none; color: var(--coal); background: transparent; cursor: pointer; transition: color .3s, border-color .3s; }
.b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--coal); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6,.1,.2,1); }
.b:hover { color: #fff; }
.b:hover::before { transform: scaleX(1); }
.b .icon { transition: transform .3s; }
.b:hover .icon { transform: translateX(4px); }
.b--solid { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.b--solid::before { background: var(--coal); }
.b--solid:hover { border-color: var(--coal); }
.b--light { border-color: #fff; color: #fff; }
.b--light::before { background: #fff; }
.b--light:hover { color: var(--crimson); }
.b--sm { min-height: 44px; padding: 8px 18px; font-size: .95rem; }
.b-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem var(--font-head); color: var(--crimson); text-decoration: none; }
.arrow-link .icon { transition: transform .3s; }
a:hover .arrow-link .icon, .arrow-link:hover .icon { transform: translateX(6px); }
.arrow-link--light { color: #fff; margin-top: 14px; }
.bigphone { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; font: 800 clamp(1.8rem, 3.2vw, 2.6rem)/1.05 var(--font-head); letter-spacing: -.02em; color: var(--crimson); }
.bigphone span { font: 600 .95rem/1.1 var(--font-body); letter-spacing: .01em; text-transform: none; color: var(--grey); }
.bigphone--light, .bigphone--light span { color: #fff; }
.bigphone--dark { color: var(--coal); margin: 12px 0 8px; }
.bigphone:hover { color: var(--crimson-dark); }
.bigphone--light:hover { color: #FFD5DD; }

/* Media + placeholders: square corners, dusky-pink hairlines */
.ph, .media { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); }
.ph { background: var(--mist) repeating-linear-gradient(-45deg, transparent 0 22px, rgba(154,84,99,.18) 22px 23px); display: grid; place-items: center; text-align: center; color: var(--coal); border: 1px solid var(--line); }
.ph span { font: 600 .88rem/1.4 var(--font-body); padding: 10px 14px; background: #fff; border-left: 3px solid var(--accent); max-width: 82%; text-align: left; }
.ph small { display: block; font-weight: 400; opacity: .7; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .credit { position: absolute; right: 0; bottom: 0; background: rgba(23,24,28,.7); color: #fff; font-size: .72rem; padding: 3px 8px; }
.media .credit a { color: #fff; }
.r-4x3 { aspect-ratio: 4 / 3; } .r-3x2 { aspect-ratio: 3 / 2; } .r-16x9 { aspect-ratio: 16 / 9; } .r-21x9 { aspect-ratio: 21 / 9; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.hdr.is-scrolled { box-shadow: 0 10px 30px rgba(23,24,28,.08); }
.hdr__row { display: flex; align-items: center; gap: 28px; min-height: 88px; transition: min-height .3s; }
.hdr.is-scrolled .hdr__row { min-height: 70px; }
.logo { flex: none; }
.logo img { height: 58px; width: auto; transition: height .3s; }
.hdr.is-scrolled .logo img { height: 48px; }
.hdr__nav { margin-inline: auto; }
.hdr__nav > ul { list-style: none; display: flex; gap: 4px; }
.hdr__nav > ul > li > a, .dd__btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px; font: 700 1rem/1 var(--font-head); color: var(--coal); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; }
.hdr__nav > ul > li > a::after, .dd__btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--accent); transform: scaleX(0); transition: transform .3s; }
.hdr__nav > ul > li > a:hover::after, .hdr__nav a[aria-current]::after, .dd__btn:hover::after, .dd.is-open .dd__btn::after { transform: scaleX(1); }
.hdr__nav a[aria-current] { color: var(--crimson); }
.dd { position: relative; }
.dd__btn .icon { width: 1em; height: 1em; transition: transform .3s; }
.dd.is-open .dd__btn .icon { transform: rotate(180deg); }
.dd__panel { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); width: 640px; display: none; grid-template-columns: 1.3fr 1fr; gap: 0; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--crimson); box-shadow: 0 24px 60px rgba(23,24,28,.14); }
.dd.is-open .dd__panel { display: grid; animation: b-drop .25s ease-out; }
/* Hover is handled by JS with a short close delay (site.js, class .is-hover); CSS keeps keyboard focus working */
.dd.is-hover .dd__panel { display: grid; }
.dd.is-hover .dd__btn::after { transform: scaleX(1); }
.dd.is-hover .dd__btn .icon { transform: rotate(180deg); }
/* invisible bridge over the 14 px gap between "Leistungen" and the panel, so a slow mouse never leaves the menu */
.dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.dd__panel ul { list-style: none; padding: 16px; }
.dd__panel li a { display: block; padding: 9px 12px; color: var(--coal); text-decoration: none; font-weight: 500; border-left: 3px solid transparent; transition: border-color .2s, background .2s, padding .2s; }
.dd__panel li a:hover { border-left-color: var(--accent); background: var(--mist); padding-left: 18px; }
.dd__aside { background: var(--mist); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.dd__aside strong { font: 800 1.15rem var(--font-head); }
.dd__aside p { margin: 0 0 8px; font-size: .95rem; }
.dd__aside a { font: 800 1.3rem var(--font-head); color: var(--crimson); text-decoration: none; }
@keyframes b-drop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hdr__call { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--coal); }
.hdr__call-ico { width: 46px; height: 46px; display: grid; place-items: center; background: var(--crimson); color: #fff; border-radius: 50%; transition: transform .3s; }
.hdr__call:hover .hdr__call-ico { transform: rotate(-12deg) scale(1.06); }
.hdr__call-txt { display: flex; flex-direction: column; font: 800 1.15rem/1.15 var(--font-head); }
.hdr__call-txt small { font: 400 .8rem/1.2 var(--font-body); color: var(--grey); }
.burger { display: none; margin-left: auto; align-items: center; gap: 10px; background: var(--coal); color: #fff; border: 0; border-radius: var(--r); padding: 0 16px; min-height: 48px; font: 700 1rem var(--font-head); cursor: pointer; }
.burger__lines { width: 20px; height: 2px; background: currentColor; position: relative; transition: background .2s; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .3s; }
.burger__lines::before { top: -6px; } .burger__lines::after { top: 6px; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-6px) rotate(-45deg); }
.menu-full { position: fixed; inset: 0; z-index: 55; background: var(--crimson); color: #fff; padding-top: 110px; overflow: auto; }
.menu-full .wrap { display: flex; flex-direction: column; gap: 28px; padding-bottom: 110px; }
.menu-full__main { list-style: none; }
.menu-full__main a { display: block; padding: 10px 0; font: 800 clamp(1.7rem, 7vw, 2.4rem)/1.15 var(--font-head); color: #fff; text-decoration: none; letter-spacing: -.02em; border-bottom: 1px solid rgba(255,255,255,.18); }
.menu-full__main a[aria-current] { color: #FFD5DD; }
.menu-full__sub { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.menu-full__sub a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 1rem; }
.menu-open { overflow: hidden; }
@media (max-width: 1099px) {
  .hdr__nav, .hdr__call-txt { display: none; }
  .hdr__call { margin-left: auto; }
  .burger { display: inline-flex; margin-left: 0; }
}

/* Hero - home: big typography + wide banner + badge */
.hero-b--home { padding-top: clamp(40px, 7vw, 96px); }
.hero-b__top { max-width: 1100px; }
.display { font-size: clamp(2.5rem, 6.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.03em; max-width: 15ch; font-kerning: normal; }
.w { display: inline-block; }
.hero-b__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-top: 28px; }
.facts { list-style: none; border-top: 2px solid var(--coal); }
.facts li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--coal); font-weight: 500; }
.facts-no { font: 800 .9rem var(--font-head); color: var(--accent); }
.hero-b__media { margin-top: clamp(40px, 6vw, 72px); position: relative; }
.hero-b__media .wrap { position: relative; }
.parallax { overflow: hidden; border-radius: var(--r); }
.parallax > figure > img:first-child, .parallax > figure.ph { transform: translateY(var(--py, 0)) scale(1.06); transition: transform .1s linear; }
.badge { position: absolute; right: clamp(24px, 6vw, 90px); top: -84px; width: 200px; height: 200px; border-radius: 50%; background: var(--crimson); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px; transform: rotate(-8deg); box-shadow: 0 18px 40px rgba(162,16,54,.35); }
.badge::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.5); }
.badge strong { color: #fff; font: 800 3rem/1 var(--font-head); letter-spacing: -.04em; font-kerning: none; }
.badge em { font: 700 1rem/1.1 var(--font-head); font-style: normal; margin-top: 2px; }
.badge span { font-size: .72rem; line-height: 1.3; margin-top: 8px; max-width: 130px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.4); }

/* Hero - subpages: text panel + image to the viewport edge */
.hero-b--split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(620px, 78vh); }
.hero-b__text { background: var(--mist); display: flex; align-items: center; }
.hero-b__inner { padding: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 64px) clamp(48px, 7vw, 96px) var(--edge); max-width: calc(var(--wrap) / 2 + var(--edge)); }
.hero-b__img { position: relative; }
.hero-b__img > figure { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; border: 0; }
.hero-b--plain .hero-b__text { background: var(--mist); }
.hero-b--plain .hero-b__inner { max-width: calc(860px + var(--edge)); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 22px; font-size: .9rem; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--accent); font-weight: 700; }
.crumbs a { color: var(--grey); }
.crumbs [aria-current] { color: var(--coal); font-weight: 600; }

/* Grids (always full rows) */
.g4, .g2 { display: grid; gap: clamp(20px, 3vw, 36px); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1099px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .g4, .g2 { grid-template-columns: 1fr; } }

/* Bento services: 3 cols (big = 2), tablet 2 cols (big + last = 2), phone 1 */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 2px solid var(--line); }
.tile-b { background: var(--card); display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: background .3s; }
.tile-b--big { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2px; background: var(--line); }
.tile-b--big > .tile-b__body { background: var(--card); }
.tile-b--big:hover > .tile-b__body { background: #FCFCFD; }
.tile-b--big > figure { border-radius: 0; border: 0; aspect-ratio: auto; min-height: 100%; }
.tile-b__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; position: relative; }
.tile-b__no { font: 800 .9rem var(--font-head); color: var(--accent); margin-bottom: 14px; }
.tile-b h3 { font-size: 1.35rem; }
.tile-b--big h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tile-b p { font-size: 1rem; margin-bottom: 20px; }
.tile-b .arrow-link { margin-top: auto; }
.tile-b::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.6,.1,.2,1); }
.tile-b:hover::after { transform: scaleX(1); }
.tile-b:hover { background: #FCFCFD; }
.tile-b > figure { overflow: hidden; }
.tile-b > figure > img:first-child { transition: transform .6s; }
.tile-b--big:hover > figure > img:first-child { transform: scale(1.04); }
.tile-b--accent { background: var(--coal); }
.tile-b--accent h3, .tile-b--accent p, .tile-b--accent .arrow-link { color: #fff; }
.tile-b--accent:hover { background: #22232A; }
@media (max-width: 1099px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile-b--end { grid-column: span 2; } }
@media (max-width: 639px) { .bento { grid-template-columns: 1fr; } .tile-b--big, .tile-b--end { grid-column: auto; } .tile-b--big { grid-template-columns: 1fr; } .tile-b--big > figure { aspect-ratio: 3 / 2; } }

/* Two-column head + content */
.cols-2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.cols-2 .s-head { position: sticky; top: 120px; margin-bottom: 0; }
.cols-2--form { grid-template-columns: 1fr 1.6fr; }
@media (max-width: 899px) { .cols-2, .cols-2--form { grid-template-columns: 1fr; } .cols-2 .s-head { position: static; } }

/* Tick list */
.ticks { list-style: none; border-top: 2px solid var(--coal); }
.ticks li { display: flex; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--coal); transition: padding .3s, background .3s; }
.ticks li:hover { padding-left: 12px; background: rgba(154,84,99,.07); }
.tick { flex: none; width: 14px; height: 14px; margin-top: 8px; background: var(--accent); transform: rotate(45deg); }

/* Numbered audience */
.numbered { list-style: none; }
.numbered li { border-top: 3px solid var(--coal); padding-top: 20px; transition: border-color .3s; }
.numbered li:hover { border-color: var(--crimson); }
.big-no { display: block; font: 800 3rem/1 var(--font-head); color: var(--accent); margin-bottom: 14px; letter-spacing: -.04em; }
.numbered p { font-size: 1rem; margin: 0; }

/* Coal band: care-insurance figures */
.s--coal { background: var(--coal); color: #C9CBD2; }
.s--coal h2, .s--coal h3, .s--coal strong { color: #fff; }
.s--coal .kicker { color: #FFB8C8; }
.s--coal .kicker-no::before { color: #fff; }
.costs-b { margin-bottom: 40px; }
.figures { border-top: 1px solid rgba(255,255,255,.18); }
.figures.g4, .figures.g2 { gap: 0; }
.figure { padding: 32px 28px 8px 0; display: flex; flex-direction: column; }
.figure + .figure { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.18); }
.figure-who { font: 700 .95rem var(--font-head); letter-spacing: .01em; text-transform: none; color: var(--accent); margin-bottom: 14px; }
.figure-num { font: 800 clamp(2.4rem, 4vw, 3.4rem)/1 var(--font-head); color: #fff; letter-spacing: -.03em; }
.figure-unit { font-size: .95rem; margin: 6px 0 18px; }
.figure h3 { font-size: 1.1rem; margin-bottom: .4em; }
.figure p { font-size: .95rem; }
.figure-law { margin-top: auto; font-size: .85rem; color: #9A9DA6; }
@media (max-width: 1099px) { .figures.g4 .figure:nth-child(3) { padding-left: 0; border-left: 0; } .figures.g4 .figure:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); } }
@media (max-width: 639px) { .figure, .figure + .figure { padding: 28px 0 8px; border-left: 0; } .figure + .figure { border-top: 1px solid rgba(255,255,255,.18); } }

/* Timeline steps */
.timeline { --tg: clamp(24px, 4vw, 56px); list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tg); position: relative; }
.timeline::before { content: ""; position: absolute; left: 32px; right: calc((100% - 2 * var(--tg)) / 3 - 32px); top: 31px; height: 2px; background: var(--line-strong); }
.timeline::after { content: ""; position: absolute; left: 32px; right: calc((100% - 2 * var(--tg)) / 3 - 32px); top: 31px; height: 2px; background: var(--crimson); transform: scaleX(var(--tl, 0)); transform-origin: left; transition: transform 1.4s cubic-bezier(.3,.1,.2,1); }
.timeline li { position: relative; z-index: 1; }
.tl-dot { width: 64px; height: 64px; border-radius: 50%; background: var(--card); border: 3px solid var(--accent); display: grid; place-items: center; font: 800 1.5rem var(--font-head); color: var(--coal); margin-bottom: 22px; transition: background .3s, color .3s, transform .3s; }
.timeline li:hover .tl-dot { background: var(--crimson); border-color: var(--crimson); color: #fff; transform: scale(1.08); }
.s--mist .tl-dot { background: var(--mist); }
.timeline p { margin: 0; }
@media (max-width: 899px) {
  .timeline { grid-template-columns: 1fr; gap: 28px; }
  .timeline::before, .timeline::after { left: 31px; right: auto; top: 32px; bottom: 64px; width: 2px; height: auto; transform: scaleY(var(--tl, 0)); transform-origin: top; }
  .timeline li { padding-left: 88px; min-height: 64px; }
  .tl-dot { position: absolute; left: 0; top: 0; }
}

/* Bleed text + image */
.bleed { display: grid; grid-template-columns: 1fr 1fr; padding: 0; min-height: 520px; }
.bleed__text { display: flex; align-items: center; }
.bleed__inner { padding: var(--space) clamp(24px, 5vw, 80px) var(--space) var(--edge); max-width: calc(var(--wrap) / 2 + var(--edge)); }
.bleed__img { position: relative; min-height: 360px; }
.bleed__img > figure { position: absolute; inset: 0; border-radius: 0; border: 0; aspect-ratio: auto; }
.bleed--left .bleed__img { order: -1; }
.bleed--left .bleed__inner { padding: var(--space) var(--edge) var(--space) clamp(24px, 5vw, 80px); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.tags li { padding: 8px 14px; border: 2px solid var(--coal); font: 700 .92rem var(--font-head); color: var(--coal); transition: background .2s, color .2s; }
.tags li:hover { background: var(--coal); color: #fff; }

/* Note */
.note-b { display: flex; gap: 20px; background: var(--card); border-left: 6px solid var(--accent); padding: 28px 32px; max-width: 920px; box-shadow: 0 1px 0 var(--line); }
.s--mist .note-b { background: var(--card); }
.note-b h2 { font-size: 1.35rem; margin-bottom: .3em; }
.note-b p:last-child { margin: 0; }
.note-b__icon { width: 30px; height: 30px; color: var(--accent); }

/* District index */
.index { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 5vw, 64px); border-top: 2px solid var(--coal); }
.index a { display: flex; align-items: center; gap: 18px; padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--coal); transition: padding .3s, color .3s; }
.index-no { font: 800 .85rem var(--font-head); color: var(--accent); }
.index-name { font: 800 clamp(1.15rem, 2vw, 1.5rem)/1.2 var(--font-head); letter-spacing: -.01em; flex: 1; overflow-wrap: anywhere; }
.index .icon { color: var(--crimson); transition: transform .3s; }
.index a:hover { padding-left: 14px; color: var(--crimson); }
.index a:hover .icon { transform: translateX(6px); }
.area-b__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.area-b__grid .index { grid-template-columns: 1fr; }
.area-b__map { margin-top: 36px; }
@media (max-width: 899px) { .area-b__grid { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .index { grid-template-columns: 1fr; } }

/* FAQ */
.faq-b__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-b__side { position: sticky; top: 120px; }
.acc { border-top: 2px solid var(--coal); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font: 700 1.12rem/1.4 var(--font-head); color: var(--coal); transition: color .2s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--crimson); }
.acc-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--coal); position: relative; transition: background .3s, border-color .3s, transform .3s; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--coal); transform: translate(-50%, -50%); transition: transform .3s, background .3s; }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc details[open] .acc-icon { background: var(--crimson); border-color: var(--crimson); transform: rotate(180deg); }
.acc details[open] .acc-icon::before, .acc details[open] .acc-icon::after { background: #fff; }
.acc details[open] .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-a { padding: 0 60px 22px 0; overflow: hidden; }
.acc-a p:last-child { margin: 0; }
@media (max-width: 899px) { .faq-b__grid { grid-template-columns: 1fr; } .faq-b__side { position: static; } .acc-a { padding-right: 0; } }

/* Related links */
.links-b { list-style: none; }
.links-b a { display: flex; flex-direction: column; height: 100%; padding-top: 22px; border-top: 3px solid var(--coal); text-decoration: none; color: inherit; transition: border-color .3s; }
.links-b a:hover { border-color: var(--crimson); }
.links-b h3 { transition: color .2s; }
.links-b a:hover h3 { color: var(--crimson); }
.links-b p { font-size: 1rem; }
.links-b .arrow-link { margin-top: auto; }

/* CTA */
.cta-b { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); background: var(--paper); position: relative; overflow: hidden; }
.cta-b::before { content: ""; position: absolute; right: -8vw; top: -40%; width: 38vw; height: 38vw; border: 60px solid rgba(154,84,99,.12); border-radius: 50%; pointer-events: none; }
.cta-b__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; position: relative; }
.cta-b__h { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -.035em; }
.cta-b__actions { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
@media (max-width: 899px) { .cta-b__grid { grid-template-columns: 1fr; } }

/* Contact */
.contact-b__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-b__info .s-head { margin-bottom: 16px; }
.clist { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.clist a { display: inline-flex; gap: 12px; align-items: flex-start; color: var(--coal); text-decoration: none; font-weight: 500; }
.clist a:hover { color: var(--crimson); }
.clist .icon { margin-top: 5px; color: var(--crimson); }
.contact-b__form .form { border-top: 6px solid var(--crimson); }
@media (max-width: 899px) { .contact-b__grid { grid-template-columns: 1fr; } }

/* Forms (markup from wed-forms.php) */
.form { background: var(--card); border: 1px solid var(--line); padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 20px; grid-template-columns: 1fr 1fr; box-shadow: 0 20px 50px rgba(23,24,28,.06); }
.form > * { min-width: 0; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font: 700 .98rem var(--font-head); color: var(--coal); margin-bottom: 8px; }
.form .hint { font-size: .88rem; margin: 6px 0 0; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea { width: 100%; font: inherit; padding: 13px 14px; border: 2px solid var(--line-strong); border-radius: var(--r); background: #fff; color: var(--coal); min-height: 54px; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--coal); box-shadow: 4px 4px 0 var(--accent); }
.form input[type=file] { width: 100%; font: inherit; font-size: .95rem; padding: 14px; border: 2px dashed var(--line-strong); background: var(--mist); }
.form textarea { min-height: 150px; resize: vertical; }
.form [aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: .92rem; margin: 6px 0 0; font-weight: 600; }
.form-alert { grid-column: 1 / -1; padding: 14px 16px; font-weight: 600; border-left: 6px solid; }
.form-alert--error { background: #FCEBEA; color: #7A1712; border-color: var(--error); }
.form-alert--ok { background: #EAF4EE; color: #1F4A3C; border-color: #2F7A58; }
.form-alert ul { margin: 6px 0 0 18px; font-weight: 400; }
.form label.consent { display: flex; gap: 12px; align-items: flex-start; font: 400 .95rem/1.6 var(--font-body); color: var(--grey); }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--crimson); flex: none; }
.form .btn { display: inline-flex; align-items: center; min-height: 56px; padding: 14px 30px; border: 2px solid var(--crimson); border-radius: var(--r); background: var(--crimson); color: #fff; font: 700 1.05rem var(--font-head); cursor: pointer; transition: background .3s, border-color .3s; }
.form .btn:hover { background: var(--coal); border-color: var(--coal); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.req { color: var(--crimson); }

/* Legal */
.prose-b h2 { font-size: 1.5rem; margin-top: 1.8em; }
.prose-b h3 { margin-top: 1.4em; }
.prose-b ul { padding-left: 22px; margin-bottom: 1em; }
.prose-b li { margin-bottom: .4em; }

/* Footer - crimson */
.ftr { background: var(--crimson); color: rgba(255,255,255,.88); padding-top: clamp(56px, 7vw, 88px); }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.25); }
.ftr__claim { font: 800 clamp(2rem, 4.4vw, 3.4rem)/1.05 var(--font-head); color: #fff; letter-spacing: -.03em; margin: 0; }
.ftr__cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 36px; padding-block: 48px; }
.ftr__cols > * { min-width: 0; }
.ftr__h { color: #fff; font-size: 1.05rem; letter-spacing: .01em; text-transform: none; margin-bottom: 1em; }
.ftr ul { list-style: none; display: grid; gap: 10px; }
.ftr .logo img { height: 60px; margin-bottom: 20px; }
.ftr .clist a { color: #fff; }
.ftr .clist .icon { color: #FFD5DD; }
.ftr__bottom { background: var(--crimson-dark); margin-inline: calc(-1 * var(--gutter)); padding: 18px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .92rem; }
.ftr .wrap { position: relative; }
.ftr__legal { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; }
.ftr .linklike { color: #fff; }
.ftr__bottom { width: 100vw; margin-left: calc(50% - 50vw); padding-inline: var(--edge); }
.map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.18) repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.07) 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.07) 27px 28px); border: 1px solid rgba(255,255,255,.3); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; gap: 4px; }
.map-consent p { margin: 0; color: #fff; font-size: .92rem; }
.map-consent .map-note { color: rgba(255,255,255,.85); font-size: .8rem; line-height: 1.45; margin: 4px 0 10px; }
.map-consent .map-note a { text-decoration: underline; }
.map-pin { width: 30px; height: 30px; color: #FFD5DD; }
.map-always { display: flex; gap: 8px; align-items: center; font-size: .82rem; margin-top: 8px; cursor: pointer; color: rgba(255,255,255,.9); }
.map-always input { accent-color: var(--accent); }
@media (max-width: 1099px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) {
  .ftr__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ftr__cols > div:first-child, .ftr__cols > div:last-child { grid-column: 1 / -1; }
  .map { aspect-ratio: auto; min-height: 250px; }
  .map-consent { position: relative; inset: auto; min-height: 250px; }
  .ftr__bottom { flex-direction: column; }
}

/* Mobile call bar */
.callbar-b { display: none; }
@media (max-width: 639px) {
  body { padding-bottom: 64px; }
  .callbar-b { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--coal); padding-bottom: env(safe-area-inset-bottom); }
  .callbar-b a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; color: #fff; text-decoration: none; font: 700 1.05rem var(--font-head); }
  .callbar-b a:first-child { background: var(--crimson); }
}

/* Consent dialog (consent.js) - floating card */
.cc { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 200; display: none; max-width: 460px; }
.cc.is-open { display: block; animation: b-up .4s ease-out; }
@keyframes b-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cc:focus { outline: none; }
.cc-inner { background: #fff; color: var(--grey); border: 2px solid var(--coal); box-shadow: 10px 10px 0 var(--accent); padding: 24px; max-height: 80vh; overflow: auto; }
.cc h2, .cc .cc-title { font-size: 1.3rem; }
.cc .cc-title { font-family: var(--font-head); font-weight: 800; color: var(--coal); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; }
.cc p { font-size: .95rem; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cc-actions .btn { min-height: 50px; border: 2px solid var(--coal); border-radius: var(--r); font: 700 .98rem var(--font-head); cursor: pointer; }
.cc-btn { background: var(--coal); color: #fff; }
.cc-btn:hover { background: var(--crimson); border-color: var(--crimson); }
.cc-link { background: #fff; color: var(--coal); grid-column: 1 / -1; }
.cc-actions [data-act="save"] { grid-column: 1 / -1; }
.cc-cats { display: grid; gap: 10px; margin: 16px 0; }
.cc-cat { border: 1px solid var(--line); padding: 14px; }
.cc-cat p { margin: 8px 0; font-size: .92rem; }
.cc-cat summary { cursor: pointer; font-weight: 600; color: var(--crimson); font-size: .92rem; }
.cc-svc { margin: 10px 0 0; font-size: .88rem; }
.cc-svc dt { font-weight: 700; color: var(--coal); }
.cc-svc dd { margin: 2px 0 0; }
.cc-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-track { width: 46px; height: 26px; background: var(--line-strong); position: relative; flex: none; transition: background .2s; }
.cc-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; transition: transform .2s; }
.cc-switch input:checked + .cc-track { background: var(--crimson); }
.cc-switch input:checked + .cc-track::after { transform: translateX(20px); }
.cc-switch input:disabled + .cc-track { opacity: .6; }
.cc-switch input:focus-visible + .cc-track { outline: 3px solid var(--accent); outline-offset: 2px; }
.cc-cat-title { font-weight: 700; color: var(--coal); }
.cc-cat-title small { font-weight: 400; }
@media (max-width: 639px) { .cc { left: 0; right: 0; bottom: 0; max-width: none; } .cc-inner { box-shadow: 0 -10px 30px rgba(0,0,0,.2); border-width: 2px 0 0; max-height: 85vh; } }

/* ---------- Responsive layout ---------- */
@media (max-width: 899px) {
  .hero-b__row { grid-template-columns: 1fr; }
  .hero-b--split { grid-template-columns: 1fr; min-height: 0; }
  .hero-b__inner { padding: 44px var(--gutter); max-width: none; }
  .hero-b__img { min-height: 0; }
  .hero-b__img > figure { position: static; aspect-ratio: 16 / 9; }
  .bleed { grid-template-columns: 1fr; }
  .bleed__inner, .bleed--left .bleed__inner { padding: 56px var(--gutter) 40px; max-width: none; }
  .bleed__img, .bleed--left .bleed__img { order: 2; min-height: 0; }
  .bleed__img > figure { position: static; aspect-ratio: 4 / 3; }
  .badge { width: 160px; height: 160px; top: -60px; right: 20px; padding: 18px; }
  .badge strong { font-size: 2.3rem; }
  .badge em { font-size: .85rem; }
  .badge span { font-size: .64rem; max-width: 110px; }
}
@media (max-width: 639px) {
  .display { font-size: clamp(2.2rem, 10vw, 3rem); }
  .b-row .b { width: 100%; }
  .r-21x9 { aspect-ratio: 4 / 3; }
  .badge { position: relative; top: auto; right: auto; margin: -64px 16px 0 auto; }
  .form { grid-template-columns: 1fr; }
  .hdr__row { min-height: 72px; }
  .logo img { height: 50px; }
  h1 { hyphens: auto; }
  h2 { font-size: 1.75rem; }
  .s { padding-block: 64px; }
}

/* ======================= Motion (design B) - off for prefers-reduced-motion ======================= */
@media (prefers-reduced-motion: no-preference) {
  .js .w { opacity: 0; transform: translateY(.45em) rotate(2deg); animation: b-word .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
  .js .hero-b .lead, .js .hero-b .b-row, .js .hero-b .facts, .js .hero-b .label, .js .crumbs { animation: b-fade .8s .35s cubic-bezier(.2,.8,.2,1) both; }
  .js .facts li { animation: b-slide .6s cubic-bezier(.2,.8,.2,1) both; }
  .js .facts li:nth-child(1) { animation-delay: .5s; } .js .facts li:nth-child(2) { animation-delay: .62s; } .js .facts li:nth-child(3) { animation-delay: .74s; }
  .js .hero-b__media .parallax, .js .hero-b__img > figure { animation: b-reveal-img 1.1s .25s cubic-bezier(.7,0,.2,1) both; }
  .js .badge { animation: b-badge .9s 1s cubic-bezier(.3,1.5,.5,1) both, b-wobble 7s 2s ease-in-out infinite; }
  /* scroll reveals */
  .js .rv { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
  .js .rv-wipe { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
  .js .rv-img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .rv-wipe.in { clip-path: inset(0 0 0 0); transform: none; }
  .js .rv-img.in { clip-path: inset(0 0 0 0); }
  .js .u-line::after, .js .label { transition: width .8s .3s; }
  .js .u-line:not(.in)::after { width: 0; }
  .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: b-shimmer 5s ease-in-out infinite; pointer-events: none; }
  .cta-b::before { animation: b-spin 40s linear infinite; }
}
@keyframes b-word { to { opacity: 1; transform: none; } }
@keyframes b-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes b-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes b-reveal-img { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes b-badge { from { opacity: 0; transform: rotate(-40deg) scale(.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes b-wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 5deg; } }
@keyframes b-shimmer { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes b-spin { to { transform: rotate(360deg); } }

.progress-b { position: fixed; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--crimson), var(--accent)); transform-origin: left; transform: scaleX(0); z-index: 120; pointer-events: none; }
.up-b { position: fixed; right: 22px; bottom: 24px; z-index: 45; width: 52px; height: 52px; border: 2px solid var(--coal); background: #fff; color: var(--coal); display: grid; place-items: center; cursor: pointer; border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--accent); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s, color .2s; }
.up-b.on { opacity: 1; transform: none; pointer-events: auto; }
.up-b:hover { background: var(--coal); color: #fff; }
.up-b .icon { transform: rotate(180deg); }
@media (max-width: 639px) { .up-b { bottom: 76px; right: 12px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .progress-b { display: none; } }


/* ---------- Polish round 1 ---------- */
h1, h2, .display, .ftr__claim, .cta-b__h, .bigphone, .figure-num, .big-no, .index-name { font-kerning: none; }
.ftr strong, .map-consent strong { color: #fff; }
.s-head .kicker:empty { display: none; }

/* district ribbon under the home banner */
.ribbon { margin-top: clamp(28px, 4vw, 48px); border-block: 2px solid var(--coal); overflow: hidden; background: var(--paper); }
.ribbon__track { display: flex; width: max-content; align-items: center; gap: 28px; padding: 16px 0; }
.ribbon__track span { font: 800 clamp(1.1rem, 2vw, 1.6rem)/1 var(--font-head); color: var(--coal); letter-spacing: -.01em; white-space: nowrap; }
.ribbon__track i { width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); flex: none; }
@media (prefers-reduced-motion: no-preference) { .ribbon__track { animation: b-marquee 45s linear infinite; } .ribbon:hover .ribbon__track { animation-play-state: paused; } }
@keyframes b-marquee { to { transform: translateX(-50%); } }

/* contact reassurance tags */
.tags--soft { margin-top: 28px; }
.tags--soft li { border-color: var(--line-strong); color: var(--grey); font-weight: 600; }
.tags--soft li::before { content: "✓"; color: var(--crimson); margin-right: 8px; }

/* bento: arrow circle + phone compact rows */
.tile-b .arrow-link { gap: 10px; }
.tile-b__body { gap: 0; }
@media (max-width: 639px) {
  .bento { gap: 1px; }
  .tile-b:not(.tile-b--big) .tile-b__body { display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; align-items: start; padding: 18px; }
  .tile-b:not(.tile-b--big) .tile-b__no { grid-row: span 2; margin: 3px 0 0; }
  .tile-b:not(.tile-b--big) h3 { font-size: 1.15rem; margin-bottom: 4px; }
  .tile-b:not(.tile-b--big) p { font-size: .95rem; margin: 0; grid-column: 2; }
  .tile-b:not(.tile-b--big) .arrow-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 0; margin: 0; }
  .tile-b:not(.tile-b--big) .arrow-link .icon { width: 22px; height: 22px; }
  .ftr ul { gap: 12px; }
  .ftr a { font-size: 1rem; }
}

/* hero home: right column sits at the headline's baseline, not floating */
.hero-b__row { align-items: start; }
@media (min-width: 900px) { .hero-b--home .facts { margin-top: 6px; } }

/* subpage hero: subtle accent corner mark on the image side */
.hero-b__img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 8px; background: var(--accent); z-index: 2; }
@media (max-width: 899px) { .hero-b__img::after { display: none; } }

/* focus ring visible on dark and crimson areas */
.s--coal :focus-visible, .ftr :focus-visible, .menu-full :focus-visible { outline-color: #fff; }

.punct { margin-left: -.12em; }

@media (min-width: 900px) { .contact-b__info { position: sticky; top: 120px; } }

/* subpage hero: long German compounds must fit the half-width column */
.hero-b--split h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); hyphens: auto; -webkit-hyphens: auto; }
.hero-b--split .hero-b__inner { min-width: 0; }

/* never allow sideways scrolling (animated elements start off-screen) */
html, body { overflow-x: clip; }

/* accent on dark areas: light blue for readable contrast */
.s--coal .figure-who, .s--coal .kicker-no::after { color: var(--accent-light); }
.s--coal .kicker-no::after { background: var(--accent-light); }
.map-always input { accent-color: var(--accent-light); }

/* owner rule 2026-09-30: no uppercase anywhere */
*, *::before, *::after { text-transform: none !important; }

/* Logo overlay on photos (owner wish 2026-10-02): CSS only, the image files stay unchanged */
.media .img-logo { position: absolute; top: clamp(8px, 2.2%, 18px); right: clamp(8px, 2.2%, 18px); width: clamp(56px, 12%, 110px); height: auto; object-fit: contain;
  z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.28)); transform: none !important; }
.tile-b .media .img-logo, .bento .media .img-logo { width: clamp(44px, 14%, 72px); }
.media.has-logo img:first-child { display: block; }
/* home banner: the 131 € badge moves to the bottom right so the logo has the top right corner */
.hero-b--home .badge { top: auto; bottom: -70px; }
@media (max-width: 639px) { .hero-b--home .badge { bottom: auto; margin: -64px 16px 0 auto; } }
/* smaller 131 € badge (owner wish 2026-10-02) */
.badge { width: 150px; height: 150px; padding: 18px; }
.hero-b--home .badge { bottom: -52px; }
.badge strong { font-size: 2.2rem; }
.badge em { font-size: .85rem; }
.badge span { font-size: .62rem; max-width: 104px; margin-top: 6px; padding-top: 6px; }
@media (max-width: 899px) { .badge { width: 124px; height: 124px; padding: 14px; } .badge strong { font-size: 1.8rem; } .badge em { font-size: .75rem; } .badge span { font-size: .56rem; max-width: 90px; } }
@media (max-width: 639px) { .hero-b--home .badge { margin: -50px 14px 0 auto; } }
/* bento grid lines as borders (no grey gaps visible while tiles fade in) */
.bento { gap: 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.bento > .tile-b { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tile-b--big { column-gap: 0; background: var(--card); }
.tile-b--big > figure { border-right: 1px solid var(--line); }
@media (max-width: 639px) { .tile-b--big > figure { border-right: 0; border-bottom: 1px solid var(--line); } }
/* small accent text on the darker linen sections: one shade deeper for WCAG contrast (>= 4.5:1) */
.s--mist .index-no, .s--mist .facts-no, .s--mist .tile-b__no, .s--mist .big-no, .s--mist .figure-who { color: #8E4A59; }

/* ======================= QA 2026-10-05 (layout + mobile) ======================= */
/* long single words in hero headlines (e.g. "Datenschutzerklärung") wrap/hyphenate instead of running off the screen */
.hero-b h1 .w { max-width: 100%; }
/* photo credits readable (min. 12px) */
.media .credit { font-size: .75rem; line-height: 1.4; }
@media (max-width: 899px) {
  .badge { width: 132px; height: 132px; }
  .badge span { font-size: .6875rem; max-width: 100px; }
}
@media (max-width: 639px) {
  /* tight sections stay tighter than normal sections on phones too (was 64px like .s) */
  .s--tight { padding-block: 40px; }
  .hero-b--plain h1 { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
  /* tap targets >= 44px in the footer and contact lists */
  .ftr ul { gap: 0; }
  .ftr ul a, .clist a, .ftr__legal a, .ftr .linklike { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr .arrow-link--light { min-height: 44px; }
  .ftr .bigphone--light { min-height: 44px; justify-content: center; }
  .map-always { min-height: 44px; }
  .map-always input { width: 22px; height: 22px; flex: none; }
  .media .credit a { display: inline-block; padding-block: 4px; }
  /* the space reserved for the call bar continues the footer colour instead of showing a light strip */
  body { padding-bottom: 0; }
  .ftr__bottom { padding-bottom: calc(18px + 64px + env(safe-area-inset-bottom)); }
}

/* ======================= QA 2026-10-06 (manual checklist) ======================= */
/* home hero: full-width photo with dark overlay, text on the left */
.hero-b--cover { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(560px, 82vh, 780px); padding: clamp(56px, 8vw, 104px) 0; background: var(--coal); overflow: hidden; }
.hero-b__bg { position: absolute; inset: 0; z-index: -1; }
.hero-b__bg > figure { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.hero-b__bg img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-b__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,24,28,.9) 0%, rgba(23,24,28,.78) 38%, rgba(23,24,28,.35) 64%, rgba(23,24,28,.05) 100%); }
.hero-b__bg .img-logo { display: none; }
.hero-b__content { position: relative; z-index: 1; }
.hero-b__content > * { max-width: 620px; }
.hero-b--cover h1, .hero-b--cover .lead, .hero-b--cover .facts li { color: #fff; }
.hero-b--cover .lead { color: rgba(255,255,255,.88); }
.hero-b--cover .label { color: #FFD5DD; border-bottom-color: var(--accent-light); }
.hero-b--cover .facts { margin-top: 32px; border-top: 0; }
.hero-b--cover .facts li { border-bottom: 0; padding: 6px 0; }
.hero-b--cover .facts-no { color: #FFB8C6; }
.hero-b--home .display { font-size: clamp(2.3rem, 4.4vw, 4rem); max-width: 14ch; }
.hero-b--cover .badge { position: absolute; top: auto; left: auto; right: clamp(16px, 4vw, 64px); bottom: clamp(16px, 4vw, 48px); margin: 0; z-index: 2; }
.ribbon--home { margin-top: 0; }
@media (max-width: 899px) {
  .hero-b__bg img:first-child { object-position: 72% 40%; }
  .hero-b__bg::after { background: linear-gradient(180deg, rgba(23,24,28,.82) 0%, rgba(23,24,28,.74) 60%, rgba(23,24,28,.6) 100%); }
  .hero-b--cover { min-height: 0; padding-bottom: 150px; }
  .hero-b--cover .badge { right: 14px; bottom: 14px; }
}
/* My Store Locator (two-click embed). The locator app cuts its info card between ~610 and ~1040 px width,
   so the map is full container width on large screens and uses the app's phone layout (600 px, centred) below. */
.map--locator { aspect-ratio: auto; height: 640px; background: var(--coal); }
.map--locator iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 650px) and (max-width: 1119px) { .map--locator iframe { left: 50%; width: 600px; transform: translateX(-50%); } }
@media (max-width: 1119px) { .map--locator { height: 680px; } }
.map--locator .map-consent { position: absolute; inset: 0; min-height: 0; }
/* premium panel: map + contact bar */
.locpanel { position: relative; box-shadow: 0 40px 80px -30px rgba(23,24,28,.45); border-top: 6px solid var(--crimson); }
.locpanel__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; background: var(--coal); color: #fff; }
.locpanel__bar li { display: flex; gap: 14px; align-items: center; padding: 22px 26px; border-left: 1px solid rgba(255,255,255,.12); min-width: 0; }
.locpanel__bar li:first-child { border-left: 0; }
.locpanel__bar .icon { width: 22px; height: 22px; color: #FFB8C6; flex: none; }
.locpanel__bar small { display: block; font-size: .78rem; letter-spacing: .02em; color: rgba(255,255,255,.65); margin-bottom: 2px; }
.locpanel__bar span { font-weight: 600; overflow-wrap: anywhere; }
.locpanel__bar a { color: #fff; text-decoration: none; }
.locpanel__bar a:hover { text-decoration: underline; }
.locpanel__cta { justify-content: flex-end; }
.locpanel__cta .b { white-space: nowrap; }
@media (max-width: 1099px) { .locpanel__bar { grid-template-columns: 1fr 1fr; } .locpanel__bar li:nth-child(3) { border-left: 0; } .locpanel__bar li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); } }
@media (max-width: 639px) { .locpanel__bar { grid-template-columns: 1fr; } .locpanel__bar li { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 16px 18px; } .locpanel__bar li:first-child { border-top: 0; } .locpanel__cta { justify-content: stretch; } .locpanel__cta .b { width: 100%; } }
/* home: Einsatzgebiet + location */
.area-b__locator { margin-top: clamp(48px, 7vw, 88px); }
.loc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin: 0 0 26px; }
.loc-head .kicker { margin-bottom: 10px; }
.loc-head__h { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.loc-head__addr { display: flex; gap: 14px; align-items: center; margin: 0; padding: 14px 22px 14px 16px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--crimson); border-radius: var(--r); font: 700 1.02rem/1.4 var(--font-head); color: var(--coal); }
.loc-head__addr .icon { width: 26px; height: 26px; color: var(--crimson); flex: none; }
@media (max-width: 639px) { .loc-head { flex-direction: column; align-items: stretch; } }
/* Kontakt: head on top, full-width panel underneath */
.locator-b__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.locator-b__head .s-head { margin-bottom: 0; }
@media (max-width: 899px) { .locator-b__head { grid-template-columns: 1fr; } }
/* footer: small map in the Anfahrt column (same size as before), locator scaled to fit */
.map--mini iframe { right: auto; bottom: auto; }

/* QA review 06.10. (duisburg-qa) */
.map--locator .map-consent { background: linear-gradient(rgba(23,24,28,.9), rgba(23,24,28,.9)), url(../images/home-map-1200.webp) center / cover no-repeat; }
.map--locator .map-note a { color: #FFD5DD; }
@media (min-width: 1100px) and (max-width: 1279px) { .locpanel__bar { grid-template-columns: 1fr 1fr; } .locpanel__bar li:nth-child(3) { border-left: 0; } .locpanel__bar li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); } }
@media (min-width: 1280px) { .locpanel__bar { grid-template-columns: auto auto auto 1fr; } .locpanel__bar span { overflow-wrap: normal; white-space: nowrap; } }

/* SEO 06.10.2026: opening hours in contact lists, district links row in the footer */
.clist__hours { display: inline-flex; gap: 12px; align-items: flex-start; font-weight: 500; color: var(--coal); }
.clist__hours .icon { margin-top: 5px; color: var(--crimson); }
.ftr .clist__hours { color: #fff; } .ftr .clist__hours .icon { color: #FFD5DD; }
.ftr__areas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 0 0 32px; font-size: .95rem; }
.ftr__areas-h { font-weight: 700; color: #fff; margin-right: 6px; }
.ftr__areas a { color: rgba(255,255,255,.9); }
@media (max-width: 639px) { .ftr__areas { flex-direction: column; align-items: flex-start; gap: 0; } .ftr__areas a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ======================= Speed Index (06.10.2026): first screen without JS-dependent reveals ======================= */
.cc--static { display: none; }
.wed-cc .cc--static { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-b .w { animation: none; opacity: 1; transform: none; }
  .js .hero-b .lead, .js .hero-b .b-row, .js .hero-b .facts, .js .hero-b .label, .js .crumbs, .js .facts li,
  .js .hero-b__media .parallax, .js .hero-b__img > figure { animation: none; }
  .js .hero-b .badge { animation: none; }
}

/* ======================= Einblicke (06.10.2026): video + client photos, homepage between Kosten and Einsatzgebiet ======================= */
.moments-b__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.moments-b__text .s-head { margin-bottom: 28px; }
.moments-b__points { margin-bottom: 32px; }
.moments-b__video { margin: 0; position: relative; isolation: isolate; }
.moments-b__video::before { content: ""; position: absolute; z-index: -1; right: -14px; bottom: 34px; width: 46%; height: 62%; background: var(--accent-light); border-radius: calc(var(--r) * 3); }
.moments-b__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--r) * 3); background: var(--coal); box-shadow: 0 32px 64px -32px rgba(23,24,28,.55); }
.moments-b__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--coal); }
.moments-b__cap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; margin-top: 14px; font-size: .9rem; }
.moments-b__tag { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--coal); font-weight: 500; }
.moments-b__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.moments-b__script { flex: 1 1 220px; }
.moments-b__script summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--crimson); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.moments-b__script[open] { flex-basis: 100%; padding: 16px 20px 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.moments-b__script p { margin: 8px 0 0; font-size: .95rem; }
.moments-b__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(48px, 7vw, 88px); }
.moments-b__card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r) * 2); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.moments-b__card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(23,24,28,.45); }
.moments-b__card .media { aspect-ratio: 1 / 1; border-radius: 0; }
.moments-b__card .media img { object-position: center 30%; transition: transform .6s ease; }
.moments-b__card:hover .media img { transform: scale(1.04); }
.moments-b__body { padding: 22px 24px 26px; border-top: 4px solid var(--accent); }
.moments-b__body h3 { margin-bottom: 8px; }
.moments-b__body p { margin: 0; font-size: 1rem; }
@media (max-width: 899px) {
  .moments-b__top { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .moments-b__video::before { right: -10px; }
  .moments-b__grid { grid-template-columns: 1fr; }
  .moments-b__card .media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .moments-b__card, .moments-b__card .media img { transition: none; } .moments-b__card:hover, .moments-b__card:hover .media img { transform: none; } }
.menu-full__h { margin: 22px 0 8px; font: 700 .9rem var(--font-head); color: rgba(255,255,255,.65); }
/* video facade: poster + play button, video element only after click */
.vfac { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--coal); cursor: pointer; display: block; }
.vfac img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.vfac:hover img { transform: scale(1.03); opacity: .92; }
.vfac__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--crimson); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(162,16,54,.25), 0 18px 40px -12px rgba(0,0,0,.6); transition: transform .25s, box-shadow .25s; }
.vfac__play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.vfac:hover .vfac__play, .vfac:focus-visible .vfac__play { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(162,16,54,.22), 0 18px 40px -12px rgba(0,0,0,.6); }
@media (max-width: 639px) { .vfac__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .vfac__play svg { width: 26px; height: 26px; } }
/* job cards (Karriere) */
.jobs-b__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jobs-b__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px 28px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--crimson); border-radius: var(--r); box-shadow: 0 20px 44px -30px rgba(23,24,28,.35); transition: transform .3s, box-shadow .3s; }
.jobs-b__card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -30px rgba(23,24,28,.45); }
.jobs-b__no { font: 800 .9rem var(--font-head); color: var(--accent); }
.jobs-b__card h3 { margin: 0; font-size: 1.3rem; }
.jobs-b__card p { margin: 0; flex: 1; }
.jobs-b__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jobs-b__tags li { padding: 4px 12px; border-radius: 999px; background: var(--mist); color: var(--coal); font: 600 .85rem/1.4 var(--font-head); }
.jobs-b__card .arrow-link { align-self: flex-start; }
@media (max-width: 899px) { .jobs-b__list { grid-template-columns: 1fr; } }

/* ---------- Sticky header v2 (Sajjad 07.10.2026): on scroll the bar turns into a floating glass pill with a crimson
   reading-progress line and stays visible while scrolling. The header keeps a fixed
   height in the page flow, so nothing jumps. ---------- */
.hdr { --hh: 88px; height: var(--hh); display: flex; align-items: center; top: 0; transition: transform .5s cubic-bezier(.2,.75,.2,1), background-color .35s, border-color .35s, backdrop-filter .35s; will-change: transform; }
.hdr__row { position: relative; width: min(100% - 2 * var(--gutter), var(--wrap)); height: var(--hh); min-height: 0; padding-inline: 0; border: 1px solid transparent; border-radius: 0;
  transition: height .4s cubic-bezier(.2,.75,.2,1), padding .4s cubic-bezier(.2,.75,.2,1), background-color .35s, border-color .35s, border-radius .4s, box-shadow .4s; }
.hdr__row::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--crimson), var(--accent)); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .35s; }
.hdr.is-scrolled { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.hdr.is-scrolled .hdr__row { height: 68px; min-height: 0; padding-inline: 22px 12px; border-radius: 20px; border-color: rgba(23,24,28,.07);
  background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 50px -24px rgba(23,24,28,.38), 0 4px 14px -8px rgba(162,16,54,.18); }
.hdr.is-scrolled .hdr__row::after { opacity: 1; }
.hdr.is-scrolled .logo img { height: 46px; }
.hdr.is-scrolled .hdr__call-ico { width: 42px; height: 42px; box-shadow: 0 8px 18px -8px rgba(162,16,54,.7); }
.progress-b { display: none; }   /* the reading progress now lives in the header pill */
/* WordPress wraps the header in a template-part div of the same height, so "sticky" never had room to stick */
.wp-block-template-part:has(> .hdr) { display: contents; }
.menu-open .hdr.is-scrolled .hdr__row { background: var(--card); box-shadow: none; }
@media (max-width: 1099px) {
  .hdr { --hh: 76px; }
  .hdr.is-scrolled .hdr__row { height: 62px; padding-inline: 14px 8px; border-radius: 16px; }
  .hdr.is-scrolled .logo img { height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .hdr, .hdr__row, .hdr__row::after { transition: none; } }
@media print { .hdr { position: static; } }