@charset "utf-8";
/* =============================================================================
   GYM SERVICE LUXEMBOURG — Schirmer GmbH
   Single stylesheet, mobile-first, no framework, no external font requests.
   -----------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout helpers
   4.  Buttons, eyebrows, notes
   5.  Media & photo placeholders
   6.  Header (topbar, navbar, nav, dropdown, language, burger)
   7.  Breadcrumbs
   8.  Hero
   9.  Trust strip
   10. Cards & grids
   11. Split sections
   12. Checklists, steps, facts
   13. Prose, callouts, tables
   14. Gallery
   15. FAQ
   16. CTA panels & related services
   17. Service areas
   18. Contact info, form, map
   19. Footer
   20. Utilities, motion, print
============================================================================= */

/* ============================ 1. TOKENS =================================== */
:root {
  /* Luxembourg-inspired brand palette */
  --red: #d62030;
  --red-dark: #ae1523;
  --red-soft: #fdeef0;
  --blue: #00a1de;
  --blue-dark: #0086bb;
  --blue-soft: #e8f7fd;

  --ink: #0b0f17;
  --ink-2: #141b27;
  --steel: #26303f;
  --slate: #46516a;
  --muted: #67728a;
  --line: #e3e8f0;
  --line-strong: #cdd5e2;

  --bg: #ffffff;
  --bg-soft: #f5f8fb;
  --bg-softer: #fafbfd;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-xs: 0 1px 2px rgba(11, 15, 23, .06);
  --shadow-sm: 0 2px 6px rgba(11, 15, 23, .06), 0 1px 2px rgba(11, 15, 23, .04);
  --shadow: 0 10px 30px -12px rgba(11, 15, 23, .18), 0 2px 8px rgba(11, 15, 23, .05);
  --shadow-lg: 0 30px 60px -24px rgba(11, 15, 23, .32), 0 6px 18px rgba(11, 15, 23, .07);

  --wrap: 1400px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --section-y: clamp(2.6rem, 5.2vw, 4.2rem);   /* vertical breathing room between blocks */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0: clamp(1rem, .97rem + .14vw, 1.075rem);
  --step-1: clamp(1.13rem, 1.07rem + .28vw, 1.3rem);
  --step-2: clamp(1.32rem, 1.2rem + .5vw, 1.6rem);
  --step-3: clamp(1.55rem, 1.32rem + .95vw, 2.1rem);
  --step-4: clamp(1.85rem, 1.45rem + 1.7vw, 2.85rem);
  --step-5: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);

  --header-h: 68px;
  --topbar-h: 45px;
}

/* ============================ 2. RESET & BASE ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--steel);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: var(--red-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin: 0 0 .35em; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
/* `display` set on a component must not beat the hidden attribute — without
   this a fixed-position panel stays clickable while marked hidden. */
[hidden] { display: none !important; }
strong { color: var(--ink); font-weight: 700; }
/* dark surfaces: bold text has to stay legible */
.hero strong, .ctaPanel strong, .site-footer strong,
.section--dark strong, .strip__item strong { color: #fff; }
.site-footer .footer-about strong { color: #e6edf7; }
.footer-cta strong { color: var(--ink); }
address { font-style: normal; }
code { font-family: var(--font-mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--red); color: #fff; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ============================ 3. LAYOUT ================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--bg-softer), #fff); }
.section--dark { background: var(--ink); color: #c9d2e2; }
.section--dark h2, .section--dark h3, .section--dark strong { color: #fff; }
.section--edge { border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

/* gap under a section heading — 3 mm tighter than the original 3rem */
.section__head { max-width: 1040px; margin: 0 auto clamp(1.6rem, 3.2vw, 2.3rem); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__head--wide { max-width: none; }
.section__title {
  margin-bottom: .45em;
  /* `pretty` keeps the first line long and lets the following ones run shorter,
     instead of the evenly-stacked blocks that `balance` produces. */
  text-wrap: pretty;
}
.section__lead {
  font-size: var(--step-1); color: var(--slate); margin: 0;
  text-wrap: pretty;
}
.section--dark .section__lead { color: #9dabc4; }
.lead { font-size: var(--step-1); color: var(--slate); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 620px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .grid--3, .grid--5, .grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================ 4. BUTTONS ================================= */
.btn {
  --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .82em 1.4em; min-height: 48px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: 999px;
  font: inherit; font-weight: 700; font-size: var(--step--1); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn__icon { flex: none; transition: transform .18s ease; }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn--primary { box-shadow: 0 8px 20px -8px rgba(214, 32, 48, .65); }
.btn--primary:hover { --btn-bg: var(--red-dark); color: #fff; transform: translateY(-1px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--ink); --btn-fg: var(--ink); background: var(--bg-soft); }
.btn--ghost-light { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.14); color: #fff; }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--steel); color: #fff; }
.btn--blue { --btn-bg: var(--blue); --btn-fg: #fff; }
.btn--blue:hover { --btn-bg: var(--blue-dark); color: #fff; }
.btn--sm { min-height: 40px; padding: .55em 1.05em; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.btn-row--center { justify-content: center; margin-top: clamp(2rem, 4vw, 2.75rem); }
.btn-row--hero { margin-top: 1.9rem; }

.eyebrow {
  margin: 0 0 .85em; font-size: .78rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 55%, var(--blue));
}
.eyebrow--light { color: #ff8a95; }

/* The error code on the 404 page. It is decorative — the eyebrow underneath
   already says "Fehler 404" in words, so screen readers do not hear it twice. */
.hero__code {
  margin: 0 0 .1em; font-weight: 900; line-height: .82;
  font-size: clamp(4.2rem, 15vw, 8rem); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .38);
  text-shadow: 0 10px 40px rgba(214, 32, 48, .35);
}
@supports not (-webkit-text-stroke: 2px #fff) {
  .hero__code { color: rgba(255, 255, 255, .22); }
}
.section__head:not(.section__head--left) .eyebrow { justify-content: center; }

.note {
  margin: 1.75rem auto 0; max-width: 820px; text-align: center;
  font-size: var(--step--1); color: var(--muted);
}
/* a caption that should stay on one line gets the full content width */
.note--wide { max-width: none; }
.todo {
  display: inline-block; padding: .1em .55em; border-radius: 5px;
  background: repeating-linear-gradient(135deg, #fff6d8, #fff6d8 7px, #fdefc4 7px, #fdefc4 14px);
  border: 1px dashed #d8b34a; color: #7a5b09;
  font-size: .86em; font-weight: 700; letter-spacing: .01em;
}
.section--dark .todo, .ctaPanel .todo, .site-footer .todo {
  background: rgba(255, 214, 102, .12); border-color: rgba(255, 214, 102, .5); color: #ffd77a;
}

/* ============================ 5. MEDIA & PLACEHOLDERS ==================== */
.media { margin: 0; }
.media img { width: 100%; border-radius: var(--radius); }
.media__caption {
  margin-top: .7rem; font-size: var(--step--1); color: var(--muted);
  border-left: 3px solid var(--blue); padding-left: .7rem;
}
.media--16-9 { --r: 16 / 9; } .media--3-2 { --r: 3 / 2; } .media--4-3 { --r: 4 / 3; }
.media--1-1 { --r: 1 / 1; } .media--21-9 { --r: 21 / 9; } .media--5-4 { --r: 5 / 4; }
.media--4-5 { --r: 4 / 5; }

.ph {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: var(--ph-w) / var(--ph-h);
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, #f7f9fc 0%, #eef2f8 55%, #e7edf6 100%);
  border: 1.5px dashed var(--line-strong);
  color: var(--slate);
}
.ph__grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(0, 161, 222, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 161, 222, .09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.ph::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--red) 0 33%, #fff 33% 66%, var(--blue) 66%);
  opacity: .8;
}
.ph__body {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .38rem; text-align: center; padding: 1.4rem 1.5rem; max-width: 33ch;
}
.ph__icon {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: .25rem;
  border-radius: 50%; background: #fff; color: var(--red); box-shadow: var(--shadow-sm);
}
.ph__tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red);
}
.ph__note { font-size: var(--step--1); line-height: 1.45; color: var(--steel); font-weight: 600; }
.ph__meta { font-size: .72rem; color: var(--muted); }
.ph__meta code { background: rgba(255, 255, 255, .75); padding: .1em .4em; border-radius: 4px; }
@media (max-width: 480px) {
  .ph__icon { width: 40px; height: 40px; }
  .ph__note { font-size: .82rem; }
  .ph__meta { display: none; }
}

/* ============================ 6. HEADER ================================== */
.site-header {
  /* The negative offset lets the thin top bar scroll out of view while the
     main navigation bar stays pinned — no overflow clipping involved. */
  position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 100;
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.topbar {
  background: #070a10;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: .82rem;
  /* NB: no overflow:hidden here — it would clip the language dropdown. */
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--topbar-h);
}
.topbar__claim { display: flex; align-items: center; gap: .5rem; margin: 0; color: #9fb0c9; white-space: nowrap; }
.topbar__claim svg { color: var(--red); flex: none; }
.topbar__right { display: flex; align-items: center; gap: .25rem; }
.topbar__link {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem;
  color: #cdd8e8; text-decoration: none; border-radius: 6px; white-space: nowrap;
}
.topbar__link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.topbar__link svg { color: var(--blue); flex: none; }
.topbar__link--todo { color: #9fb0c9; }
@media (max-width: 1200px) { .topbar__claim { display: none; } .topbar__inner { justify-content: flex-end; } }
@media (max-width: 620px) {
  .topbar__link { padding: .3rem .45rem; }
  /* visually hidden, still announced — the link keeps an accessible name */
  .topbar__link span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

.navbar { position: relative; }
.navbar__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__logo { width: 52px; height: 52px; border-radius: 10px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-size: 1.12rem; font-weight: 900; color: #fff; letter-spacing: -.015em; text-transform: uppercase;
}
/* One box per letter, spread edge to edge, so "LUXEMBOURG" ends up exactly as
   wide as "GYM SERVICE" above it — .brand__text is a column flex container, so
   this line already spans the full width of the longer name. */
.brand__sub {
  display: flex; justify-content: space-between;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  color: var(--blue);
}
.brand__sub > span { display: block; }
@media (max-width: 380px) { .brand__logo { width: 44px; height: 44px; } .brand__name { font-size: 1rem; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__list > li { position: relative; margin: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .62rem .82rem; border-radius: 8px;
  color: #d6dfec; font-size: .95rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__link[aria-current] { color: #fff; }
.nav__link[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 20px; height: 3px; margin-left: -10px;
  border-radius: 2px; background: var(--red);
}
.nav__chev { transition: transform .2s ease; opacity: .75; }

/* Dropdown (native <details> → works without JavaScript) */
.nav__item-drop { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] .nav__chev { transform: rotate(180deg); }
.dropdown__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: min(620px, 78vw); padding: .85rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 60;
}
.dropdown__panel::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 3px 0 0 0;
}
.dropdown__list { display: grid; gap: .2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .dropdown__list { grid-template-columns: 1fr 1fr; } }
.dropdown__link {
  display: flex; gap: .7rem; padding: .7rem .75rem; border-radius: 10px;
  text-decoration: none; color: var(--steel);
}
.dropdown__link:hover { background: var(--bg-soft); color: var(--steel); }
.dropdown__icon {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 9px; background: var(--red-soft); color: var(--red);
}
.dropdown__link:hover .dropdown__icon { background: var(--red); color: #fff; }
.dropdown__title { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; }
.dropdown__text { display: block; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.dropdown__all { margin: .5rem 0 0; padding: .65rem .75rem 0; border-top: 1px solid var(--line); }
.dropdown__all a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .9rem; text-decoration: none;
}

/* Language switcher */
.lang { position: relative; flex: none; }
.lang > summary {
  display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .55rem;
  border-radius: 7px; cursor: pointer; list-style: none;
  color: #cdd8e8; font-size: .82rem; font-weight: 700;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lang[open] .lang__chev { transform: rotate(180deg); }
.lang__chev { transition: transform .2s ease; opacity: .7; }
.flag {
  width: 20px; height: 14px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); flex: none;
}
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 140;
  min-width: 208px; padding: .35rem; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.lang__opt {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem;
  border-radius: 8px; text-decoration: none; color: var(--steel); font-size: .92rem;
}
.lang__opt:hover { background: var(--bg-soft); color: var(--ink); }
.lang__opt.is-current { background: var(--red-soft); color: var(--red-dark); font-weight: 700; }
.lang__name { flex: 1; }
.lang__code { font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.lang > summary .lang__code { color: inherit; }
.lang__opt.is-current .lang__code { color: var(--red); }
.lang--mobile { display: none; }

/* keeps the burger (which becomes an X) clickable above the open nav panel */
.navbar__actions { display: flex; align-items: center; gap: .6rem; flex: none; position: relative; z-index: 96; }
.btn--nav { padding: .7em 1.15em; min-height: 44px; }

.burger {
  display: none; width: 46px; height: 46px; padding: 0; flex: none;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; cursor: pointer; color: #fff;
}
.burger__box { display: grid; place-items: center; width: 100%; height: 100%; }
.burger__bar, .burger__bar::before, .burger__bar::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.burger__bar::before, .burger__bar::after { content: ""; position: absolute; }
.burger__bar::before { transform: translateY(-6px); }
.burger__bar::after { transform: translateY(6px); }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after { transform: rotate(-45deg); }

.nav__foot { display: none; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(6, 9, 14, .55);
  backdrop-filter: blur(2px); border: 0;
}

/* --- mobile navigation --- */
@media (max-width: 1080px) {
  .burger { display: block; }
  .btn--nav { display: none; }
  .lang--mobile { display: block; }
  /* the drawer leaves the flow (position: fixed), so nothing is left to push
     the burger across — it has to claim the free space itself */
  .navbar__actions { margin-left: auto; }
  .nav {
    position: fixed; top: 0; right: 0; z-index: 95;
    width: min(400px, 88vw); height: 100dvh; margin: 0;
    padding: 1.15rem 1.15rem 2.5rem;
    background: var(--ink); border-left: 1px solid rgba(255, 255, 255, .1);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(102%); visibility: hidden;
    transition: transform .26s ease, visibility .26s;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav__list { display: block; padding-top: 4.6rem; }
  .nav__list > li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav__link { display: flex; justify-content: space-between; width: 100%; padding: .95rem .35rem; font-size: 1.05rem; border-radius: 0; }
  .nav__link[aria-current]::after { display: none; }
  .nav__link[aria-current] { color: var(--blue); }
  .nav__item-drop { position: static; }
  .dropdown__panel {
    position: static; transform: none; width: auto; padding: 0 0 .9rem;
    background: transparent; border: 0; box-shadow: none;
  }
  .dropdown__panel::before { display: none; }
  .dropdown__list { grid-template-columns: 1fr; }
  .dropdown__link { color: #c3cede; padding: .6rem .35rem; }
  .dropdown__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .dropdown__title { color: #eef3fa; }
  .dropdown__text { display: none; }
  .dropdown__icon { width: 32px; height: 32px; background: rgba(214, 32, 48, .18); }
  .dropdown__all { border-top-color: rgba(255, 255, 255, .1); padding-left: .35rem; }
  .dropdown__all a { color: var(--blue); }
  .nav__foot { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
  .nav__foot .btn { width: 100%; }
  .lang--mobile > summary { width: 100%; justify-content: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: .8rem; font-size: .95rem; }
  .lang--mobile .lang__menu { position: static; width: 100%; margin-top: .5rem; }
}
@media (min-width: 1081px) {
  .nav-scrim { display: none !important; }
}

/* ============================ 7. BREADCRUMBS ============================= */
/* A soft blue band, tinted from the brand blue, so the breadcrumb strip reads
   as its own layer instead of blending into the white page below it. */
.breadcrumbs { background: #cfe4f6; border-bottom: 1px solid #b0d1eb; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  list-style: none; margin: 0; padding: .7rem 0; font-size: .84rem;
}
.crumb { display: inline-flex; align-items: center; margin: 0; color: var(--muted); }
.crumb a { color: var(--slate); text-decoration: none; padding: .2rem .1rem; }
.crumb a:hover { color: var(--red); text-decoration: underline; }
.crumb span[aria-current] { color: var(--ink); font-weight: 700; }
.crumb__sep { transform: rotate(-90deg); opacity: .45; margin: 0 .25rem; }

/* ============================ 8. HERO ==================================== */
.hero { position: relative; background: var(--ink); color: #c9d4e4; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 78% 8%, rgba(0, 161, 222, .20), transparent 62%),
    radial-gradient(760px 500px at 12% 92%, rgba(214, 32, 48, .24), transparent 65%),
    linear-gradient(180deg, #0b0f17 0%, #10161f 62%, #0d131c 100%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 5%, transparent 72%);
}
.hero__inner {
  position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.75rem, 6.5vw, 5.25rem);
}
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: 1.12fr .88fr; align-items: center; }
}
@media (min-width: 1400px) {
  .hero__inner { grid-template-columns: 1.2fr .8fr; }
}
.hero--compact .hero__inner { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.hero__title { color: #fff; margin-bottom: .5em; font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); }
.hero__title em { font-style: normal; color: var(--blue); }
.hero__lead { font-size: var(--step-1); color: #a9b7cd; max-width: 60ch; }
.hero__facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.hero__facts li { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .96rem; color: #cbd6e6; }
.hero__facts svg { flex: none; margin-top: .2rem; color: var(--blue); }
.hero__contact {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.9rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__contact-item { display: flex; align-items: center; gap: .65rem; font-size: .95rem; }
.hero__contact-item > svg { color: var(--red); flex: none; }
.hero__contact-item a { font-size: 1.02rem; }
.hero__contact-item a { color: #fff; font-weight: 700; text-decoration: none; }
.hero__contact-item a:hover { color: var(--blue); text-decoration: underline; }
/* stacked on a phone, the 1.6rem gap between phone and e-mail reads as a break
   between two blocks — they belong together, so the rows move closer */
@media (max-width: 620px) {
  .hero__contact { gap: .9rem; margin-top: 1.6rem; padding-top: 1.3rem; }
}
.hero__media { position: relative; }
/* On a phone the hero picture lands underneath the text and pushes the whole
   page down before anything useful starts, so it is dropped there. The markup
   also serves a 1x1 pixel below this width (see figureImage → skipBelow), so
   the file is not downloaded either. Tablets and desktop keep it. */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .hero__media { display: none; }
  .hero__inner { grid-template-columns: 1fr; }
}
.hero__media .media img, .hero__media .ph {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__media .ph { background: linear-gradient(150deg, #eef2f8, #dde5f1); }
.hero__badge {
  position: absolute; left: clamp(-.5rem, -1vw, -1.25rem); bottom: -1.4rem;
  display: inline-flex; align-items: center; gap: .55rem; margin: 0;
  padding: .6rem .95rem; max-width: min(300px, 88%); line-height: 1.35;
  background: #fff; color: var(--ink); border-radius: 999px;
  font-size: .84rem; font-weight: 700; box-shadow: var(--shadow);
}
.hero__badge svg { color: var(--red); flex: none; }
@media (max-width: 620px) { .hero__badge { position: static; margin-top: 1rem; } }

/* ============================ 9. TRUST STRIP ============================= */
.strip { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.strip__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .strip__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .strip__list { grid-template-columns: repeat(4, 1fr); } }
.strip__item {
  display: flex; align-items: center; margin: 0;
  padding: 1.25rem clamp(.5rem, 1.6vw, 1.35rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .strip__item { border-bottom: 0; }
  .strip__item + .strip__item { border-left: 1px solid var(--line); }
  .strip__list > :nth-child(3) { border-left: 0; }
}
@media (min-width: 1000px) { .strip__list > :nth-child(3) { border-left: 1px solid var(--line); } }
.strip__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: #fff; color: var(--red); box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
}
.strip__text strong { display: block; font-size: .97rem; color: var(--ink); line-height: 1.3; }
.strip__text span { display: block; font-size: .84rem; color: var(--muted); }

/* ============================ 10. CARDS ================================== */
.card { margin: 0; display: flex; }
.card__inner {
  display: flex; flex-direction: column; width: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.85rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.card__inner::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--blue));
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.card--link .card__inner:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card--link .card__inner:hover::before { transform: scaleX(1); }
.card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.05rem;
  border-radius: 14px; background: var(--red-soft); color: var(--red);
  transition: background-color .2s ease, color .2s ease;
}
.card--link .card__inner:hover .card__icon { background: var(--red); color: #fff; }
.card__num {
  display: block; margin-bottom: .8rem; font-size: 1.5rem; font-weight: 900;
  color: var(--blue-dark); letter-spacing: -.03em;
}
.card__title { font-size: var(--step-1); margin-bottom: .5rem; }
/* icon variant: the icon and the heading share a line, like the related-service
   cards and the trust strip, instead of the heading sitting under the icon */
.card--icon .card__head {
  display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1rem);
  margin-bottom: .75rem;
}
.card--icon .card__icon { margin-bottom: 0; flex: none; }
.card--icon .card__title { margin-bottom: 0; min-width: 0; }
.card__text { color: var(--slate); font-size: .95rem; margin-bottom: 1rem; }
.card__list { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; color: var(--slate); }
.card__list li { position: relative; padding-left: 1.1rem; margin-bottom: .3rem; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue);
}
.card__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .9rem; color: var(--red-dark);
}
.card--link .card__inner:hover .card__cta svg { transform: translateX(3px); }
.card__cta svg { transition: transform .18s ease; }
.card--plain .card__inner { background: var(--bg-softer); box-shadow: none; }

/* ============================ 11. SPLIT ================================= */
.split { display: grid; gap: clamp(1.8rem, 4.5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__text { order: 2; }
}
.split__title { font-size: var(--step-3); text-wrap: pretty; }
.split__text > p { color: var(--slate); }
.split__media .media img, .split__media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

.ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; margin: 0; }
.ticks svg { flex: none; margin-top: .18em; color: var(--red); }
.ticks--sm { gap: .45rem; font-size: .92rem; }
.ticks--light svg { color: var(--blue); }
.ticks--2 { }
@media (min-width: 700px) { .ticks--2 { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; } }

/* ============================ 12. CHECKLIST / STEPS / FACTS ============== */
.clist {
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.section--soft .clist { background: #fff; }
.clist__title { display: flex; align-items: center; gap: .7rem; font-size: var(--step-1); margin-bottom: .7rem; }
.clist__icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 11px; background: var(--blue-soft); color: var(--blue-dark);
}
.clist__text { color: var(--slate); font-size: .93rem; margin-bottom: .9rem; }
.clist__items { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.clist__items li { position: relative; padding-left: 1.35rem; margin-bottom: .42rem; color: var(--slate); }
.clist__items li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--red); opacity: .8;
}

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .steps--cols-2 { grid-template-columns: repeat(2, 1fr); }
  /* three per row means fewer, wider cards — give them a little more room */
  .steps--cols-3 .step { padding: 1.7rem 1.6rem 1.55rem; }
}
.step {
  position: relative; margin: 0; padding: 1.5rem 1.35rem 1.35rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.step__num {
  position: absolute; top: -16px; left: 1.3rem;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: var(--ink); color: #fff;
  font-weight: 900; font-size: 1rem;
  box-shadow: 0 6px 14px -6px rgba(11, 15, 23, .6);
}
.step:nth-child(4n+1) .step__num { background: var(--red); }
.step:nth-child(4n+3) .step__num { background: var(--blue-dark); }
/* the accent follows the column, so a three-column grid needs its own rhythm */
.steps--cols-3 .step:nth-child(4n+1) .step__num,
.steps--cols-3 .step:nth-child(4n+3) .step__num { background: var(--ink); }
.steps--cols-3 .step:nth-child(3n+1) .step__num { background: var(--red); }
.steps--cols-3 .step:nth-child(3n+3) .step__num { background: var(--blue-dark); }
.step__title { font-size: 1.02rem; margin: .55rem 0 .45rem; }
.step__body p { font-size: .92rem; color: var(--slate); margin: 0; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact {
  margin: 0; padding: 1.4rem; text-align: center; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.fact__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto .8rem; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); }
.fact__label { display: block; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.fact__value { display: block; font-weight: 700; color: var(--ink); }

/* ============================ 13. PROSE ================================= */
.prose-wrap { display: grid; gap: clamp(1.6rem, 3.5vw, 2.75rem); }
@media (min-width: 980px) {
  /* The aside column is a fixed card; the text takes the rest. A slightly wider
     card and a tighter gap close the dead space that used to sit between the
     two, which also makes the whole block shorter. */
  .prose-wrap--aside { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); align-items: start; }
  .prose-wrap--aside { gap: clamp(1.6rem, 2.6vw, 2.25rem); }
  /* the grid column is the limit here, so the reading-width cap would only
     re-introduce the gap */
  .prose-wrap--aside .prose { max-width: none; }
}
.prose { max-width: 72ch; }
.prose--center { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; color: var(--slate); }
.prose > h2, .prose > h3 { font-size: var(--step-2); margin-top: 2.1em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose > h3, .prose > h4 { font-size: var(--step-1); margin-top: 1.7em; }
.prose p, .prose li { color: var(--slate); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul li::marker { color: var(--red); }
.prose ol li::marker { color: var(--blue-dark); font-weight: 700; }
.prose .media { margin: 1.9rem 0; }
.dl { margin: 1.4rem 0; }
.dl dt { font-weight: 700; color: var(--ink); margin-top: 1rem; }
.dl dd { margin: .2rem 0 0; color: var(--slate); }

.callout {
  margin: 1.7rem 0; padding: 1.1rem 1.25rem;
  background: var(--blue-soft); border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.callout p { margin: 0; color: var(--steel); font-size: .95rem; }
.callout--todo { background: #fff8e4; border-left-color: #e0b23c; }
.callout--todo strong { color: #7a5b09; letter-spacing: .04em; }

.prose__aside {
  padding: 1.4rem; border-radius: var(--radius);
  background: var(--bg-soft); border: 1px solid var(--line);
  position: sticky; top: calc(var(--header-h) + 1rem);
}
.prose__aside h3 { font-size: var(--step-1); }
.prose__aside .btn { width: 100%; margin-top: 1.1rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
.table caption { padding: 1rem 1.1rem 0; text-align: left; color: var(--muted); font-size: .86rem; }
.table th, .table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { background: var(--bg-soft); color: var(--ink); font-weight: 700; white-space: nowrap; }
.table tbody th { color: var(--ink); font-weight: 700; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }

/* ====================== 13b. CASES (before / after) ===================== */
/* Two documented jobs side by side. Each case is a horizontally scrolling,
   scroll-snapping track; the arrows are ordinary links to the neighbouring
   slide, so the block is fully usable without JavaScript. */
.cases { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.case {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
}
.case__head { padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--line); }
.case__title { margin: 0 0 .3rem; font-size: 1.12rem; line-height: 1.3; }
.case__meta { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.case__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.case__track::-webkit-scrollbar { display: none; }
.case__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-margin: 0; }

.case__media { position: relative; }
.case__media .media { margin: 0; }
.case__media .media img, .case__media .ph { border-radius: 0; box-shadow: none; }

.case__arrows {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 .55rem; pointer-events: none;
  /* The photo zoom (section 23) lifts a hovered .media to z-index 2, which
     would paint it over the arrows. The arrows have to stay above it. */
  z-index: 3;
}
.case__arrow {
  pointer-events: auto; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  box-shadow: var(--shadow-sm); text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.case__arrow:hover { background: #fff; transform: scale(1.06); }
.case__arrow--off { pointer-events: none; width: 40px; height: 40px; background: none; box-shadow: none; }

.case__cap { padding: .95rem 1.25rem 1.2rem; display: grid; gap: .3rem; }
.case__step {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red);
}
.case__phase { font-weight: 700; color: var(--ink); }
.case__text { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* ============================ 14. GALLERY =============================== */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.9rem, 2vw, 1.4rem); }
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
/* three pictures go straight from one column to three: the intermediate
   two-column step strands the third one on a row of its own (tablet portrait) */
@media (min-width: 620px) { .gallery--3 { grid-template-columns: repeat(3, 1fr); } }
.gallery__item { margin: 0; }
.gallery__item .media img, .gallery__item .ph {
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

/* ============================ 15. FAQ ================================== */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ink); font-size: 1rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--bg-softer); }
.faq__chev { flex: none; color: var(--red); transition: transform .2s ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { overflow: hidden; }
.faq__a-inner { padding: 0 1.25rem 1.25rem; }
.faq__a p { color: var(--slate); font-size: .96rem; }
.faq__a p + p { margin-top: .8rem; }

/* ============================ 16. CTA PANELS =========================== */
.ctaPanel { position: relative; background: var(--ink); color: #b9c5d8; overflow: hidden; }
.ctaPanel::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(720px 380px at 88% 10%, rgba(0, 161, 222, .22), transparent 60%),
    radial-gradient(620px 380px at 6% 92%, rgba(214, 32, 48, .25), transparent 62%);
}
.ctaPanel__inner {
  position: relative; display: grid; gap: clamp(1.6rem, 3.5vw, 3rem);
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem); align-items: center;
}
@media (min-width: 900px) { .ctaPanel__inner { grid-template-columns: 1.25fr .75fr; } }
.ctaPanel h2 { color: #fff; font-size: var(--step-3); }
.ctaPanel__text p { color: #a7b5cb; max-width: 62ch; }
.ctaPanel__actions .btn-row { margin-top: 0; }
.ctaPanel__contact { margin-top: 1.35rem; display: grid; gap: .5rem; font-size: .92rem; }
.ctaPanel__contact p { display: flex; align-items: center; gap: .5rem; margin: 0; }
.ctaPanel__contact svg { color: var(--blue); flex: none; }
.ctaPanel__contact span { color: #7f8ea6; }
.ctaPanel__contact a { color: #fff; font-weight: 700; text-decoration: none; }
.ctaPanel__contact a:hover { color: var(--blue); text-decoration: underline; }
.ctaPanel--light { background: var(--bg-soft); color: var(--slate); }
.ctaPanel--light::before { opacity: .07; }
.ctaPanel--light h2 { color: var(--ink); }
.ctaPanel--light .ctaPanel__text p { color: var(--slate); }
.ctaPanel--light .ctaPanel__contact a { color: var(--ink); }
.ctaPanel--light .ctaPanel__contact span { color: var(--muted); }

.rel-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 700px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.rel { margin: 0; }
.rel__inner {
  display: flex; align-items: center; gap: .85rem; height: 100%;
  padding: 1.05rem 1.15rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-xs);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rel__inner:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rel__icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: var(--bg-soft); color: var(--red);
}
.rel__inner:hover .rel__icon { background: var(--red); color: #fff; }
.rel__body { flex: 1; }
.rel__title { display: block; font-weight: 700; color: var(--ink); font-size: .98rem; }
.rel__text { display: block; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.rel__arrow { flex: none; color: var(--muted); transition: transform .18s ease, color .18s ease; }
.rel__inner:hover .rel__arrow { color: var(--red); transform: translateX(3px); }

/* ============================ 17. SERVICE AREAS ======================== */
.areas { align-items: start; }
.area {
  padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--red);
}
.area:nth-child(3n+2) { border-top-color: var(--blue); }
.area:nth-child(3n) { border-top-color: var(--ink); }
.area__title { display: flex; align-items: center; gap: .55rem; font-size: var(--step-1); margin-bottom: .5rem; }
.area__title svg { color: var(--red); flex: none; }
.area__text { font-size: .92rem; color: var(--slate); margin-bottom: .85rem; }
.area__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.area__list li {
  margin: 0; padding: .3rem .7rem; font-size: .84rem; color: var(--steel);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
}

/* ============================ 18. CONTACT / FORM / MAP ================= */
.cinfo { display: grid; gap: 1rem; }
@media (min-width: 620px) { .cinfo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cinfo { grid-template-columns: repeat(4, 1fr); } }
.cinfo__block {
  padding: 1.4rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cinfo__block h3 { display: flex; align-items: center; gap: .5rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.cinfo__block h3 svg { color: var(--red); }
.cinfo__block p, .cinfo__block address { font-size: .97rem; color: var(--ink); font-weight: 600; margin: 0; line-height: 1.55; }
.cinfo__block a { color: var(--ink); text-decoration: none; }
.cinfo__block a:hover { color: var(--red); text-decoration: underline; }
.cinfo__note { margin-top: .5rem !important; font-size: .84rem !important; font-weight: 400 !important; color: var(--muted) !important; }

.form-wrap { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .form-wrap { grid-template-columns: 380px minmax(0, 1fr); } }
.form-intro h2 { font-size: var(--step-3); }
.form-intro > p { color: var(--slate); }
.form-intro .media { margin-top: 1.6rem; }
.form-intro .media img, .form-intro .ph { border-radius: var(--radius); }
@media (min-width: 1000px) { .form-intro { position: sticky; top: calc(var(--header-h) + 1.25rem); } }

.form {
  padding: clamp(1.3rem, 3vw, 2.1rem);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.form__set { border: 0; margin: 0 0 1.6rem; padding: 0; }
.form__set > legend {
  padding: 0 0 .9rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}
.form__set--inner { margin: 1.1rem 0; padding: 1rem 1.1rem; background: var(--bg-soft); border-radius: var(--radius-sm); }
.form__sublegend { padding-bottom: .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--steel); }
.form__grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .38rem; }
.field:last-child { margin-bottom: 0; }
.field > label { font-size: .87rem; font-weight: 700; color: var(--ink); }
.req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 161, 222, .18);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field__hint { font-size: .82rem; color: var(--muted); }
.field--file input { padding: .6rem; background: var(--bg-soft); cursor: pointer; }
.checks, .radios { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 560px) { .checks { grid-template-columns: 1fr 1fr; } .radios { grid-auto-flow: column; grid-auto-columns: max-content; gap: 1.2rem; } }
.checks label, .radios label, .field--consent label {
  display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; color: var(--steel); cursor: pointer;
}
.checks input, .radios input, .field--consent input {
  width: 19px; height: 19px; margin: .12rem 0 0; flex: none; accent-color: var(--red);
}
.field--consent { margin-top: 1.2rem; padding: 1rem 1.1rem; background: var(--bg-soft); border-radius: var(--radius-sm); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.form__actions .btn { flex: none; }
.form__req { margin: 0; font-size: .82rem; color: var(--muted); }
.form__fallback { margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mapbox { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 900px) {
  /* The picture is exactly as tall as the panel beside it: the row stretches,
     the image fills it, and taking the <img> out of flow keeps its intrinsic
     height from driving the row instead of the panel. */
  .mapbox { grid-template-columns: .85fr 1.15fr; align-items: stretch; }
  .mapbox__media { display: flex; }
  .mapbox__media .media {
    position: relative; flex: 1; display: flex; flex-direction: column;
    min-height: 300px; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .mapbox__media .media picture { position: absolute; inset: 0; display: block; }
  .mapbox__media .media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 0; box-shadow: none;
  }
  .mapbox__media .ph { flex: 1; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}
.mapbox__panel { padding: clamp(1.3rem, 2.5vw, 1.9rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.mapbox__panel p { color: var(--slate); font-size: .95rem; }
.mapbox__addr { margin: 1.1rem 0; padding-left: .9rem; border-left: 3px solid var(--red); font-weight: 600; color: var(--ink); }
.mapbox__media .media img, .mapbox__media .ph { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ============================ 19. FOOTER =============================== */
.site-footer { background: var(--ink); color: #98a6bd; font-size: .94rem; }
/* The closing call to action sits on the same pale blue as the breadcrumb
   strip, so the page ends on a light band before the dark footer. */
.footer-cta {
  position: relative;
  background: #cfe4f6;
  border-top: 1px solid #b0d1eb;
}
.footer-cta__inner {
  position: relative; display: grid; gap: 1.2rem 2rem; align-items: center;
  padding-block: clamp(1.5rem, 2.6vw, 2rem);
}
/* Text column takes what it needs, the buttons only as much as they are wide —
   which pushes them to the right edge and lets the text run wider, so the whole
   band stays short. */
@media (min-width: 900px) {
  .footer-cta__inner { grid-template-columns: minmax(0, 1fr) auto; }
  /* only once the buttons have their own column — stacked under the text they
     stay left, aligned with it */
  .footer-cta .btn-row { justify-content: flex-end; }
}
/* the brand red is too light for small bold text on the pale blue band */
.footer-cta .eyebrow { color: var(--red-dark); }
.footer-cta__title { color: var(--ink); font-size: var(--step-2); margin-bottom: .3em; }
.footer-cta__text { margin: 0; color: var(--slate); max-width: 86ch; }
.footer-cta .btn-row { margin-top: 0; }

.footer-main__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 700px) { .footer-main__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .footer-main__inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-col { min-width: 0; }
.brand--footer { margin-bottom: 1.1rem; }
.brand--footer .brand__logo { width: 64px; height: 64px; }
.footer-about { color: #93a2ba; margin-bottom: 1.3rem; max-width: 42ch; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .6rem; margin: 0; }
.footer-contact svg { flex: none; margin-top: .15rem; color: var(--red); }
.footer-contact a { color: #dbe4f0; text-decoration: none; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-contact address { color: #93a2ba; font-size: .9rem; line-height: 1.5; }

.footer-title {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin-bottom: 1rem;
}
.footer-title--sp { margin-top: 1.9rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-list li { margin: 0; }
.footer-list a { color: #9fadc4; text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); }
.footer-area { color: #93a2ba; font-size: .92rem; margin-bottom: 1rem; }
.footer-tags { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.footer-tags li {
  margin: 0; padding: .22rem .6rem; font-size: .78rem; color: #b8c5d8;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px;
}
.footer-area-link a { display: inline-flex; align-items: center; gap: .4rem; color: var(--blue); font-weight: 700; text-decoration: none; font-size: .9rem; }
.footer-area-link a:hover { text-decoration: underline; }

.footer-lang { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-lang__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; padding-block: 1.1rem; }
.footer-lang__title { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #7f8ea6; margin: 0; font-weight: 800; }
.footer-lang__list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.footer-lang__list li { margin: 0; }
.footer-lang__list a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem;
  border-radius: 999px; color: #b8c5d8; text-decoration: none; font-size: .85rem;
  border: 1px solid rgba(255, 255, 255, .1);
}
.footer-lang__list a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.footer-lang__list a.is-current { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); background: #070a10; }
.footer-bottom__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  padding-block: 1.1rem; font-size: .82rem; color: #74839b;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #a8b6cc; text-decoration-color: rgba(168, 182, 204, .45); }
.footer-bottom a:hover { color: #fff; text-decoration-color: currentColor; }
/* the three legal links on one line, wrapping as a block */
.footer-bottom__legal {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .15rem .55rem; justify-content: flex-end;
}

.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--ink); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%; box-shadow: var(--shadow); text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.to-top svg { transform: rotate(180deg); }
.is-scrolled .to-top { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 620px) { .to-top { right: .75rem; bottom: .75rem; } }

/* ============================ 20. UTILITIES ============================ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .breadcrumbs, .to-top, .btn-row, .ctaPanel, .form { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .ph { border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ============================ 21. QUICK-CONTACT DIALOG ================== */
/* A native <dialog>: focus trapping, Esc-to-close and the backdrop come free. */
.qc {
  width: min(480px, calc(100vw - 2rem));
  max-height: min(90dvh, 720px);
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--steel);
  box-shadow: 0 40px 90px -30px rgba(6, 9, 14, .6), 0 10px 30px rgba(6, 9, 14, .18);
  overflow: hidden;
}
.qc::backdrop {
  background: rgba(6, 9, 14, .66);
  backdrop-filter: blur(3px);
  animation: qcFade .2s ease both;
}
.qc[open] { animation: qcIn .22s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes qcIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes qcFade { from { opacity: 0; } }

.qc__head {
  position: relative;
  display: flex; align-items: center; gap: .9rem;
  padding: 1.25rem 3.25rem 1.25rem 1.35rem;
  background: linear-gradient(120deg, #131b26 0%, #0b0f17 100%);
  overflow: hidden;
}
.qc__head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 88% 0%, rgba(0, 161, 222, .3), transparent 62%),
              radial-gradient(360px 220px at 4% 110%, rgba(214, 32, 48, .34), transparent 60%);
}
.qc__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--red) 0 34%, #fff 34% 67%, var(--blue) 67%);
}
.qc__head > * { position: relative; }
.qc__logo { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.qc__eyebrow {
  margin: 0 0 .18rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: #ff8a95;
}
.qc__title { margin: 0; font-size: 1.12rem; color: #fff; line-height: 1.25; }
.qc__close {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px; color: #fff; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.qc__close:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); }

.qc__body { padding: 1.35rem; }
.qc__text { margin: 0 0 1.1rem; font-size: .93rem; color: var(--slate); }
.qc__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.qc__opt {
  display: flex; align-items: center; gap: .85rem; min-width: 0;
  padding: .85rem .95rem;
  background: var(--bg-soft); border: 1.5px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.qc__opt:hover {
  background: #fff; border-color: var(--red); color: inherit;
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.qc__opt-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--red);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.qc__opt:hover .qc__opt-icon { background: var(--red); border-color: var(--red); color: #fff; }
.qc__opt--form .qc__opt-icon { color: var(--blue-dark); }
.qc__opt--form:hover { border-color: var(--blue); }
.qc__opt--form:hover .qc__opt-icon { background: var(--blue); border-color: var(--blue); }
.qc__opt-body { flex: 1; min-width: 0; }
.qc__opt-label { display: block; font-weight: 700; color: var(--ink); font-size: .97rem; }
.qc__opt-value {
  display: block; font-size: .85rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qc__opt-arrow { flex: none; color: var(--line-strong); transition: transform .16s ease, color .16s ease; }
/* there is no room to truncate on a phone — let the hint wrap onto two lines */
@media (max-width: 560px) {
  .qc__opt-value { white-space: normal; overflow: visible; text-overflow: clip; }
}
.qc__opt:hover .qc__opt-arrow { color: var(--red); transform: translateX(3px); }
.qc__opt--form:hover .qc__opt-arrow { color: var(--blue-dark); }
.qc__foot {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 1.15rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.qc__foot svg { flex: none; margin-top: .1rem; color: var(--blue); }

@media (max-width: 420px) {
  .qc__head { padding: 1.05rem 3rem 1.05rem 1.05rem; gap: .7rem; }
  .qc__logo { width: 38px; height: 38px; }
  .qc__title { font-size: 1rem; }
  .qc__body { padding: 1.05rem; }
  .qc__opt { padding: .75rem .8rem; gap: .7rem; }
  .qc__opt-icon { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .qc[open], .qc::backdrop { animation: none; }
}

/* ============================ 22. NUMBER SHAKE ========================== */
/* The number badge wobbles when its card is hovered or keyboard-focused.
   Purely decorative — disabled under prefers-reduced-motion (section 20). */
@keyframes numShake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12%      { transform: translate3d(-1px, -2px, 0) rotate(-8deg); }
  26%      { transform: translate3d(1px, 0, 0) rotate(7deg); }
  40%      { transform: translate3d(-1px, -1px, 0) rotate(-5deg); }
  54%      { transform: translate3d(1px, 0, 0) rotate(4deg); }
  70%      { transform: translate3d(0, -1px, 0) rotate(-2deg); }
  85%      { transform: translate3d(0, 0, 0) rotate(1deg); }
}

.step__num, .card__num {
  transform-origin: 50% 60%;
  will-change: transform;
}
.step:hover .step__num,
.step:focus-within .step__num,
.card--numbered .card__inner:hover .card__num,
.card--numbered .card__inner:focus-within .card__num {
  animation: numShake .62s cubic-bezier(.36, .07, .19, .97) both;
}

/* the step cards had no hover state of their own — give them the same
   subtle lift the other cards use, so the wobble has something to belong to */
.step {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.card--numbered .card__inner {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--numbered .card__inner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.card--numbered .card__inner:hover::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .step:hover .step__num,
  .card--numbered .card__inner:hover .card__num { animation: none; }
}


/* ==================== 22a. FULL-WIDTH BUTTONS (phone) =================== */
/* On a phone a row of buttons never fits side by side without going narrow and
   fiddly. Below 560px every call to action becomes a full-width block, stacked
   in reading order — one clear target per line. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .btn-row--center { align-items: stretch; }

  .qc__cb-form .btn, .qc__cb .btn { width: 100%; justify-content: center; }

  /* A full-width red button carries its drop shadow across the whole column,
     so the soft red glow that looks like depth on desktop reads as a smear of
     colour under the button on a phone. Flat is cleaner at this size. */
  .btn--primary { box-shadow: none; }

  /* The outline of a secondary button was drawn in the same hairline grey as
     the page's dividers. At full width, on a tinted band, that outline all but
     disappears — so on phones it is drawn in a darker, clearly visible grey. */
  .btn--ghost { --btn-bd: var(--muted); }
}

/* The service form's submit button spans the whole form up to tablet width —
   including a phone held sideways, which is wider than the 560px above. */
@media (max-width: 760px) {
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__actions .btn { flex: 1 1 auto; width: 100%; justify-content: center; }
  .form__req { text-align: center; }
}

/* ====================== 22b. TOUCH TARGETS (mobile) ===================== */
/* On a phone every interactive element has to be comfortably hittable. The
   WCAG 2.2 minimum is 24x24 CSS px; Apple and Google both recommend 44x44,
   which is what the whole site uses on touch screens. Sizes grow through
   padding, so nothing moves visually on the desktop layout. */
/* Width alone is the wrong test for a tablet in landscape: 1180px wide, still
   operated with a thumb. So the rule fires either below the desktop width or on
   any device without a hovering pointer. */
@media (max-width: 1200px), (hover: none) {
  .topbar__link { min-height: 44px; padding-inline: .7rem; }
  .lang > summary { min-height: 44px; padding-inline: .7rem; }
  .lang__opt { min-height: 44px; }

  /* footer link lists: the row, not just the word, is the target */
  .footer-list { gap: 0; }
  .footer-list a { display: block; padding-block: .62rem; }
  .footer-area-link a { display: inline-flex; min-height: 44px; align-items: center; }

  /* checkboxes and radios are finger-sized, and the whole label is clickable */
  .checks input, .radios input, .field--consent input { width: 24px; height: 24px; }
  .checks label, .radios label { min-height: 44px; align-items: center; }

  /* language switcher in the footer, and the "all services" link in the
     navigation drawer */
  .footer-lang__list a { min-height: 44px; }
  /* `display: block` used to push the arrow onto its own line, because the
     inline SVG became a block-level sibling of the text. Flex keeps label and
     arrow on one row while the whole row stays a 44px finger target. */
  .dropdown__all a {
    display: flex; align-items: center; gap: .4rem;
    padding-block: .62rem; min-height: 44px;   /* flex drops the block line box, so state the target height */
  }
  .footer-bottom__legal a,
  .footer-bottom__legal .cc__reopen { display: inline-flex; align-items: center; min-height: 44px; }

  /* small buttons and the case-slider arrows are hit with a finger too */
  .btn--sm { min-height: 44px; }
  .case__arrow, .case__arrow--off { width: 44px; height: 44px; }
}

/* the legal row wraps on a phone — a dot must never start a line */
@media (max-width: 900px) {
  .footer-bottom__legal span[aria-hidden] { display: none; }
  .footer-bottom__legal { gap: .1rem 1.1rem; justify-content: flex-start; }
}

/* ========================= 24. CONSENT (cookies) ======================== */
/* A slim bar at the bottom, not a full-screen wall. The three buttons carry
   the same weight — "accept all" gets no visual advantage over "necessary
   only", which is what the DSGVO's "freely given" actually requires. */
.cc__banner {
  position: fixed; z-index: 200; left: 50%; transform: translateX(-50%);
  bottom: clamp(.6rem, 2vw, 1.25rem); width: min(1080px, calc(100% - 1.6rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1.1rem, 2.6vw, 1.6rem);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -22px rgba(11, 15, 23, .55);
}
.cc__banner-body { flex: 1 1 min(420px, 100%); min-width: 0; }
.cc__title { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.3; }
.cc__text { margin: 0; font-size: .92rem; color: var(--slate); }
.cc__links { margin: .55rem 0 0; font-size: .85rem; }
.cc__links a { color: var(--red-dark); }
.cc__actions { display: flex; flex-wrap: wrap; gap: .6rem; flex: 0 1 auto; }
/* identical geometry for all three, so none of them reads as "the" answer */
.cc__actions .btn, .cc__panel-foot .btn { min-height: 46px; padding-inline: 1.3em; flex: 1 1 auto; }

.cc__backdrop {
  position: fixed; inset: 0; z-index: 205;
  background: rgba(8, 12, 19, .58); backdrop-filter: blur(2px);
}
.cc__panel {
  position: fixed; z-index: 210; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 1.6rem)); max-height: min(86dvh, 780px);
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(11, 15, 23, .7);
  overflow: hidden;
}
.cc__panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line);
}
.cc__panel-body { padding: 1.2rem 1.3rem; overflow-y: auto; display: grid; gap: 1rem; }
.cc__panel-foot {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding: 1rem 1.3rem; border-top: 1px solid var(--line); background: var(--bg-soft);
}
.cc__x {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--slate); cursor: pointer;
}
.cc__x:hover { border-color: var(--line-strong); color: var(--ink); }

.cc__cat { padding: .95rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cc__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc__cat-title { margin: 0; font-size: 1rem; }
.cc__cat-text { margin: .35rem 0 0; font-size: .88rem; color: var(--slate); }
.cc__lock { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cc__svc { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .84rem; color: var(--muted); }
.cc__svc--plain { list-style: none; padding-left: 0; color: var(--slate); }
.cc__svc code { font-size: .95em; }

/* switch — a real checkbox underneath, so keyboard and screen readers work */
.cc__switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.cc__switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc__track {
  width: 52px; height: 30px; border-radius: 999px; background: #cbd5e3;
  position: relative; transition: background .18s ease;
}
.cc__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 15, 23, .35);
  transition: transform .18s ease;
}
.cc__switch input:checked + .cc__track { background: var(--red); }
.cc__switch input:checked + .cc__track::after { transform: translateX(22px); }
.cc__switch input:focus-visible + .cc__track { outline: 3px solid var(--blue); outline-offset: 2px; }

.cc__empty { padding: .95rem 1.05rem; background: var(--bg-soft); border-radius: var(--radius-sm); }
.cc__empty h3 { margin: 0 0 .35rem; font-size: 1rem; }
.cc__empty p { margin: 0 0 .6rem; font-size: .9rem; color: var(--slate); }
.cc__empty-label { font-weight: 700; color: var(--ink); }
.cc__done { font-size: .85rem; font-weight: 700; color: var(--red-dark); }

/* the footer entry point — a button, because it opens a dialog */
.cc__reopen {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: #a8b6cc; text-decoration: underline; text-decoration-color: rgba(168, 182, 204, .45);
}
.cc__reopen:hover { color: #fff; text-decoration-color: currentColor; }

@media (max-width: 760px) {
  .cc__banner { flex-direction: column; align-items: stretch; }
  .cc__actions { flex-direction: column; }
  .cc__actions .btn, .cc__panel-foot .btn { width: 100%; justify-content: center; }
  .cc__panel-foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .cc__track, .cc__track::after { transition: none; }
}

/* ============================ 23. PHOTO ZOOM =========================== */
/* Every photo (and, until the photos arrive, every placeholder) grows a little
   on hover. Touch devices get the same effect on tap — main.js adds
   .is-zoomed on touchstart, because :hover is unreliable there.
   Disabled under prefers-reduced-motion (section 20). */
.media { position: relative; }
.media picture, .media img, .media .ph {
  transition: transform .38s cubic-bezier(.2, .7, .3, 1), box-shadow .38s ease;
  transform-origin: center;
  backface-visibility: hidden;      /* keeps text inside placeholders crisp */
}
.media:hover, .media.is-zoomed { z-index: 2; }
.media:hover img, .media.is-zoomed img,
.media:hover .ph, .media.is-zoomed .ph {
  transform: scale(1.035);
}
/* the hero and split images already carry a large shadow — deepen it slightly */
.hero__media .media:hover img, .hero__media .media.is-zoomed img,
.hero__media .media:hover .ph, .hero__media .media.is-zoomed .ph,
.split__media .media:hover img, .split__media .media.is-zoomed img,
.split__media .media:hover .ph, .split__media .media.is-zoomed .ph {
  box-shadow: var(--shadow-lg);
}
.gallery__item .media:hover img, .gallery__item .media.is-zoomed img,
.gallery__item .media:hover .ph, .gallery__item .media.is-zoomed .ph {
  box-shadow: var(--shadow);
}
.media:hover .media__caption, .media.is-zoomed .media__caption { color: var(--steel); }

@media (prefers-reduced-motion: reduce) {
  .media:hover img, .media.is-zoomed img,
  .media:hover .ph, .media.is-zoomed .ph { transform: none; }
}

/* --- trust strip: items that link to a page ---------------------------- */
.strip__inner {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  color: inherit; text-decoration: none;
}
.strip__item--link .strip__inner {
  border-radius: var(--radius);
  padding: .25rem;
  margin: -.25rem;
  transition: background-color .18s ease;
}
.strip__item--link:hover .strip__inner { background: rgba(255, 255, 255, .75); }
.strip__item--link:hover .strip__icon {
  background: var(--red); border-color: var(--red); color: #fff;
}
.strip__item--link:hover .strip__text strong { color: var(--red-dark); }
.strip__arrow {
  flex: none; margin-left: auto; color: var(--line-strong);
  transition: transform .18s ease, color .18s ease;
}
.strip__item--link:hover .strip__arrow { color: var(--red); transform: translateX(3px); }
.strip__icon { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }

/* --- hero media: same height as the text column, zoom clipped inside ----- */
/* The badge has to stay above the photo — the zoom raises the figure to z-index 2. */
.hero__badge { z-index: 3; }

@media (min-width: 940px) {
  .hero__inner { align-items: stretch; }
  .hero__text { align-self: center; }
  .hero__media { display: flex; }
  /* the figure itself now carries the frame, so the image can zoom INSIDE it
     instead of growing outwards over the text and the badge */
  .hero__media .media {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .hero__media .media picture { flex: 1; display: flex; }
  .hero__media .media img {
    flex: 1; width: 100%; height: 100%;
    object-fit: cover;              /* fills the column height, never distorts */
    border-radius: 0; box-shadow: none;
  }
  .hero__media .ph {
    flex: 1;
    aspect-ratio: auto;             /* height comes from the text column instead */
    border-radius: 0; box-shadow: none;
  }
}

/* --- centred call-to-action buttons: wider and a little taller ---------- */
.btn-row--center .btn {
  min-height: 52px;          /* wide, but not chunky */
  padding: .6em 2.6em;
  font-size: var(--step-0);
  letter-spacing: .005em;
  line-height: 1.3;
}
.btn-row--center .btn__icon { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .btn-row--center { flex-direction: column; }
  .btn-row--center .btn { width: 100%; padding-inline: 1.4em; }
}

/* --- split sections: wider text column, taller and narrower photo ------- */
/* The text gets more room, so list items stop wrapping onto a second line and
   the block becomes shorter. The photo fills the remaining height, which makes
   it more upright — and, like the hero, it zooms inside its own frame. */
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.24fr .76fr;
    align-items: stretch;
  }
  /* mirrored blocks put the media in the first column, so the ratio flips too */
  .split--reverse { grid-template-columns: .76fr 1.24fr; }
  .split__text { align-self: center; }
  .split__media { display: flex; flex-direction: column; justify-content: center; }
  .split__media .media {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-block: 15px;         /* ≈4 mm shorter at the top and at the bottom */
    min-height: 370px;
    max-height: 630px;          /* keeps very long text blocks from over-stretching it */
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .split__media .media picture { flex: 1; display: flex; }
  .split__media .media img {
    flex: 1; width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0; box-shadow: none;
  }
  .split__media .ph {
    flex: 1;
    aspect-ratio: auto;
    border-radius: 0; box-shadow: none;
  }
}

/* --- plain cards: a Luxembourg-flag border ------------------------------ */
/* Two backgrounds: the card fill clipped to the padding box, and a red →
   white → blue gradient clipped to the border box. The border itself is
   transparent, so the gradient shows through as the outline: red along the
   top, white across the middle, light blue along the bottom. */
.card--plain .card__inner {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg,
      var(--red) 0 27%,
      #d8e1ee 33% 67%,
      var(--blue) 73% 100%) border-box;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .22s ease, transform .22s ease;
}
.card--plain .card__inner::before { display: none; }   /* the old top hairline */
.card--plain .card__inner:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.section--soft .card--plain .card__inner,
.section--tint .card--plain .card__inner {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg,
      var(--red) 0 27%,
      #ccd7e6 33% 67%,
      var(--blue) 73% 100%) border-box;
}

/* --- hero photo: inset at the top, bottom aligned with the divider ------ */
/* The contact strip under the buttons is a constant 52 px tall (its top
   border is the visible line), so the photo can end exactly on that line
   instead of running past it. Scoped with :has() so hero sections without a
   contact strip — the legal pages and 404 — keep the full-height photo. */
@media (min-width: 940px) {
  .hero__inner:has(.hero__contact) {
    --hero-contact-h: 52px;
  }
  .hero__inner:has(.hero__contact) .hero__media .media {
    position: relative;
    margin-top: 15px;                          /* ≈4 mm lower at the top */
    margin-bottom: var(--hero-contact-h);      /* bottom edge = the divider line */
    min-height: 300px;
  }
  /* The photo must never make the hero row taller than the text column — that
     is what used to push its bottom edge past the divider line whenever the
     text happened to be short (DE, LB, EN all sat 13–49 px too low). Taking
     the <img> out of the flow removes its intrinsic height from the row
     calculation, so the row is measured from the text alone and the photo
     always ends exactly on the line. */
  .hero__inner:has(.hero__contact) .hero__media .media picture {
    position: absolute; inset: 0; display: block;
  }
  .hero__inner:has(.hero__contact) .hero__media .media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  /* keep the badge attached to the photo, not to the bottom of the column */
  .hero__inner:has(.hero__contact) .hero__badge {
    bottom: calc(var(--hero-contact-h) - 1.4rem);
  }
}

/* --- one section whose heading may use the full content width ----------- */
/* "How our service works" reads better as a single line; only on wide
   screens, where there is genuinely room for it. */
@media (min-width: 1360px) {
  .head--wide .section__head { max-width: none; }
  .head--wide .section__title { max-width: 1320px; margin-inline: auto; }
  .head--wide .section__lead { max-width: 1040px; margin-inline: auto; }
}

/* --- photo band: three horizontal frames between two blocks ------------- */
.photo-band { padding-top: clamp(1.5rem, 3vw, 2.1rem); }
.photo-band .gallery { gap: clamp(.8rem, 1.6vw, 1.2rem); }
.photo-band .media img, .photo-band .ph {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.hero + .photo-band { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }

/* --- active state in the services dropdown and in the footer ------------ */
/* The top navigation already marks the section; these two mark the exact page. */
.dropdown__link[aria-current] {
  background: var(--red-soft);
}
.dropdown__link[aria-current] .dropdown__icon { background: var(--red); color: #fff; }
.dropdown__link[aria-current] .dropdown__title { color: var(--red-dark); }
.dropdown__link[aria-current] .dropdown__title::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%;
  background: var(--red);
}
.dropdown__all a[aria-current] { color: var(--red-dark); text-decoration: underline; }

@media (max-width: 1080px) {
  .dropdown__link[aria-current] { background: rgba(214, 32, 48, .16); border-radius: 8px; }
  .dropdown__link[aria-current] .dropdown__title { color: #fff; }
  .dropdown__link[aria-current] .dropdown__icon { background: var(--red); color: #fff; }
}

.footer-list a[aria-current] {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}
.footer-list a[aria-current]::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-right: .45rem; border-radius: 50%;
  background: var(--red);
}

/* --- related grid: four cards when the home-page link is appended --------- */
@media (min-width: 1100px) {
  .rel-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .rel-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- related grid with five cards (service pages: 3 services + customers +
       the home link that every related block appends) ---------------------- */
@media (min-width: 1180px) {
  .rel-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .rel-grid--5 .rel__inner { padding: .95rem .85rem; gap: .6rem; }
  .rel-grid--5 .rel__text { font-size: .8rem; }
}
@media (min-width: 700px) and (max-width: 1179px) {
  .rel-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* --- hero with a photographic backdrop ---------------------------------- */
/* The photo sits UNDER the existing gradient layer. In .hero--photo that
   layer is made translucent so the picture shows through, and a horizontal
   scrim is added so the text side stays dark enough to read on. */
.hero__photo { position: absolute; inset: 0; overflow: hidden; }
/* <picture> is an inline box with automatic height, so `height: 100%` on the
   image below had nothing to resolve against and fell back to the photo's own
   aspect ratio. On a tall phone hero that covered only the top ~190px and left
   the rest flat dark. Making the picture fill the frame gives the image a
   definite height at every viewport. */
.hero__photo picture { position: absolute; inset: 0; display: block; }
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  /* a slight blur pushes the photo visually behind the text without hiding it;
     the scale keeps the blurred edges outside the frame */
  filter: grayscale(.25) contrast(.95) blur(2px);
  transform: scale(1.05);
}
.hero--photo .hero__bg {
  background:
    radial-gradient(900px 460px at 78% 8%, rgba(0, 161, 222, .16), transparent 62%),
    radial-gradient(760px 500px at 12% 92%, rgba(214, 32, 48, .20), transparent 65%),
    linear-gradient(180deg, rgba(11, 15, 23, .70) 0%, rgba(16, 22, 31, .65) 62%, rgba(13, 19, 28, .74) 100%);
}
/* extra darkening across the text column, fading out towards the photo */
.hero--photo .hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(8, 12, 19, .80) 0%,
    rgba(8, 12, 19, .70) 46%,
    rgba(8, 12, 19, .42) 72%,
    rgba(8, 12, 19, .32) 100%);
}
@media (max-width: 939px) {
  /* One column, so the scrim covers the whole width instead of just the left.
     It also has to be a single layer: stacked on top of the base gradient the
     two together reached ~93% black and swallowed the photo completely. One
     tuned layer keeps white text above 4.5:1 and still lets the machines show. */
  .hero--photo .hero__bg {
    background:
      radial-gradient(700px 380px at 80% 4%, rgba(0, 161, 222, .14), transparent 62%),
      radial-gradient(620px 420px at 8% 96%, rgba(214, 32, 48, .18), transparent 65%),
      linear-gradient(180deg, rgba(8, 12, 19, .74) 0%, rgba(8, 12, 19, .68) 55%, rgba(8, 12, 19, .74) 100%);
  }
  .hero--photo .hero__bg::before { display: none; }
  /* the crop is a tall, narrow slice of a wide photo — aim it at the equipment */
  .hero__photo img { object-position: 50% 34%; transform: scale(1.02); filter: grayscale(.2) contrast(.97) blur(1px); }
}

/* --- quick-contact: "call me back" option ------------------------------- */
/* A <details> styled to sit in the same row as the three link options, so the
   dialog keeps one visual rhythm whether the form is open or closed. */
.qc__cb { min-width: 0; }
.qc__cb > summary { list-style: none; cursor: pointer; }
.qc__cb > summary::-webkit-details-marker { display: none; }
.qc__opt--callback .qc__opt-icon { color: var(--blue-dark); }
.qc__cb[open] > summary,
.qc__cb > summary:hover { background: #fff; border-color: var(--blue); }
.qc__cb > summary:hover .qc__opt-icon,
.qc__cb[open] > summary .qc__opt-icon { background: var(--blue); border-color: var(--blue); color: #fff; }
.qc__opt-chev { transition: transform .18s ease, color .18s ease; }
.qc__cb > summary:hover .qc__opt-chev { color: var(--blue-dark); transform: none; }
.qc__cb[open] > summary .qc__opt-chev { transform: rotate(180deg); color: var(--blue-dark); }

.qc__form {
  margin-top: .55rem; padding: 1rem 1.05rem 1.15rem;
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--radius);
  display: grid; gap: .7rem;
}
.qc__form .field { margin: 0; }
.qc__form .field label { font-size: .88rem; }
.qc__form .field input[type="text"],
.qc__form .field input[type="tel"] { padding: .58rem .7rem; font-size: .95rem; }
.qc__form .field--consent { margin-top: .1rem; padding: .75rem .85rem; background: #fff; }
.qc__form .field--consent label { font-size: .84rem; }
.qc__submit { width: 100%; justify-content: center; margin-top: .2rem; }

/* =============== 25. NO RED GLOW ON DARK PANELS (phone) ================= */
/* Every dark panel carries two soft brand glows: blue at the top right, red at
   the bottom left. On a wide screen they sit in opposite corners and read as
   depth. On a phone the panel is narrow and tall, so the red one — 620px wide,
   anchored at 8%/96% — spreads across the whole lower half and the background
   visibly turns maroon behind the contact row under the buttons. Dropping just
   the red layer keeps the depth (the blue one is cooler and stays subtle at
   this width) and leaves the dark base gradient, which is what carries the text
   contrast, untouched. */
@media (max-width: 939px) {
  .hero__bg {
    background:
      radial-gradient(900px 460px at 78% 8%, rgba(0, 161, 222, .20), transparent 62%),
      linear-gradient(180deg, #0b0f17 0%, #10161f 62%, #0d131c 100%);
  }

  .hero--photo .hero__bg {
    background:
      radial-gradient(700px 380px at 80% 4%, rgba(0, 161, 222, .14), transparent 62%),
      linear-gradient(180deg, rgba(8, 12, 19, .76) 0%, rgba(8, 12, 19, .70) 55%, rgba(8, 12, 19, .78) 100%);
  }

  .ctaPanel::before {
    background: radial-gradient(720px 380px at 88% 10%, rgba(0, 161, 222, .22), transparent 60%);
  }
}

/* A hero without a photo (the AGB and Widerruf pages) has one child, so the
   two-column grid above would squeeze the text into the left 1.12fr and leave
   an empty column. `:has()` lets the row collapse to full width in that case. */
@media (min-width: 940px) {
  .hero__inner:not(:has(.hero__media)) { grid-template-columns: 1fr; }
}

/* ================= 26. PROCESS STEPS: TWO PER ROW (phone) ============== */
/* Eight steps stacked one per column turn the section into a very long scroll,
   and each card is mostly empty space. Two per row keeps the whole sequence
   within a couple of screens and makes the numbering readable as a grid.
   Padding, the number badge and the type all step down so two cards fit at
   360px without the German compounds breaking out of the card. */
@media (max-width: 759px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 1.15rem .65rem; }

  .step { padding: 1.15rem .8rem 1rem; }

  /* Centred over the card instead of tucked into the top-left corner: with two
     narrow columns the badges then line up as a pair down the middle of each
     row, which reads as a sequence rather than as eight loose corner marks. */
  .step__num {
    top: -13px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; border-radius: 9px; font-size: .86rem;
  }

  .step__title { font-size: .9rem; margin: .4rem 0 .35rem; hyphens: auto; }
  .step__body p { font-size: .8rem; line-height: 1.45; hyphens: auto; }
}

/* ============ 27. SLIDER INSIDE A SPLIT (inspection page) =============== */
/* The case slider on the installation page lives inside a bordered card that
   supplies its rounding and shadow. Dropped into a split column it has none of
   that, so the frame is restated here — and the rounding has to sit on the
   track, not on the photos, or the corners show through while scrolling. */
.split__slider {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); background: var(--bg-soft);
}
.split__slider .case__track { border-radius: inherit; }
/* the frame belongs to the slider, so each slide inside it stays flat —
   otherwise every photo would carry its own rounding and shadow and the
   corners would show through while the track scrolls */
.split__slider .case__media .media {
  margin: 0; border-radius: 0; box-shadow: none;
  min-height: 0; max-height: none;
}
.split__slider .case__media .media img,
.split__slider .case__media .ph { border-radius: 0; box-shadow: none; }

/* Desktop: the frame stretches to the height of the text beside it and the
   photo fills it completely — no strips of background above or below. The
   photos are upright and the column is only slightly narrower than that, so
   `cover` trims a little from the sides and nothing from the subject.

   The 6px gap that used to sit under the photo was the image's baseline
   descender: an <img> is inline-level, so the line box reserved room beneath
   it. `display: block` on the image removes it. */
@media (min-width: 900px) {
  .split__media .split__slider {
    flex: 1; display: flex; margin-block: 0; min-height: 370px;
  }
  .split__slider .case__track { flex: 1; align-items: stretch; }
  .split__slider .case__slide { display: flex; }
  .split__slider .case__media { flex: 1; display: flex; flex-direction: column; }
  .split__slider .case__media .media { flex: 1; margin: 0; }
  .split__slider .case__media .media img { width: 100%; height: 100%; object-fit: cover; }
}

/* The list item carried a 6px bottom margin from the site's generic list
   spacing, which showed as a strip of background under the photo. */
.split__slider .case__slide { margin: 0; }
.split__slider .case__media .media,
.split__slider .case__media picture { line-height: 0; }
.split__slider .case__media img { display: block; }
}
}

/* ============ 28. GALLERY TILE AS A LINK (home page) ==================== */
/* The photo and its caption are one target. The caption gains a chevron so the
   tile reads as clickable before anyone hovers it, and the caption underlines
   on hover while the photo keeps its own zoom effect. */
.gallery__link { display: block; text-decoration: none; color: inherit; }
/* --blue-dark (#0086bb) only reaches 4.1:1 on white — below the 4.5:1 floor for
   body-size text. This deeper shade of the same hue clears it at 5.5:1 and
   still reads as the brand blue. */
.gallery__item--link .media__caption {
  display: flex; align-items: baseline; gap: .4rem;
  color: #00719e; font-weight: 600;
}
.gallery__item--link .media__caption::after {
  content: "›"; font-size: 1.15em; line-height: 1; transition: transform .15s ease;
}
.gallery__link:hover .media__caption { text-decoration: underline; }
.gallery__link:hover .media__caption::after { transform: translateX(3px); }
.gallery__link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: var(--radius); }

/* section 23's photo zoom recolours the caption on hover; a linked tile keeps
   its link colour instead, so the affordance does not flicker to grey */
.gallery__item--link .media:hover .media__caption,
.gallery__item--link .media.is-zoomed .media__caption { color: #00719e; }

/* ============ 29. GALLERY CARDS SHARE ONE HEIGHT ======================= */
/* `.media` only ever applied its declared ratio to the placeholder box, so a
   real photo kept its own proportions. In a three-up gallery that made one
   card taller than its neighbours whenever the file was not exactly 3:2.
   Inside a gallery the declared ratio now governs the photo as well. */
.gallery .media img {
  aspect-ratio: var(--r);
  object-fit: cover;
  display: block;
}