/* BEST-TRANS: one stylesheet, mobile first.
   Layout follows the owner's reference (a classic company site): section headings, flat white cards on a
   soft band, a facts box over a photo band, dark footer. Since 2026-09-28 the template signals are toned
   down: headings in normal case, plain line icons without filled circles, no floating card shadows.
   Colour: deep green from the logo in the role of the reference's navy. Gold appears only in the logo;
   no accent bars, no pill buttons (the owner reads both as template decoration).
   Type: Roboto Condensed for headings, DM Sans for text. Motion is feedback only. */

:root {
  --paper: #f3f1ec;
  --paper-deep: #e8e5de;
  --white: #fff;
  --ink: #121613;
  --ink-soft: #2c312d;
  --muted: #5a5e58;
  --line: rgb(18 22 19 / .12);
  --line-strong: rgb(18 22 19 / .24);
  --green: #123a28;
  --green-deep: #0c2a1c;
  --soft: #f1f4f1;
  --error: #a3321f;

  --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Roboto Condensed', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --content: 1320px;  /* one column for the header, hero and every section */
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 6vw, 88px);
  --gap: 20px;
  --radius: 8px;
  --radius-sm: 6px;
  --header-h: 72px;
}
@media (min-width: 921px) { :root { --header-h: 84px; } }
@media (min-width: 1920px) { :root { --header-h: 96px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--white); font-weight: 500; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 6px; border: 1px solid transparent;
  background: var(--ink); color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--accent { background: var(--green); color: var(--white); }
.hero .btn--accent, .cta .btn--accent { background: var(--white); color: var(--green); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
/* The focus ring takes the ground colour's opposite, not the white label colour of a green button. */
.btn--accent:focus-visible { outline-color: var(--green); }
.hero .btn--accent:focus-visible, .cta .btn--accent:focus-visible { outline-color: var(--white); }
@media (hover: hover) {
  .btn:hover { background: var(--ink-soft); }
  .btn--accent:hover { background: var(--green-deep); }
  .hero .btn--accent:hover, .cta .btn--accent:hover { background: var(--soft); }
  .btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
}

/* Links read as links: underlined, the line darkens on hover. */
.text-link, .facts a, .nav-extra a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .2s ease;
}
@media (hover: hover) { .text-link:hover, .facts a:hover, .nav-extra a:hover { text-decoration-color: currentColor; } }

.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; }

/* ---------- Header: white bar; logo left, menu, phone and one button right ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgb(255 255 255 / .96); color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgb(12 42 28 / .35); }
/* The header and the hero share a wide frame, so the hero text starts under the logo at the left of the screen. */
.site-header .wrap, .hero .wrap { width: min(100% - 2 * clamp(20px, 4vw, 72px), 1760px); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { margin-right: auto; display: block; }
.brand-logo { display: block; height: 48px; aspect-ratio: 480 / 372; }
.brand-logo img { width: 100%; height: 100%; }
@media (min-width: 1100px) { .brand-logo { height: 56px; } }
.header-tools { display: flex; align-items: center; gap: 4px; }
.header-cta { display: none; }
@media (min-width: 1100px) {
  .header-cta { display: flex; align-items: center; gap: 24px; padding-left: 28px; border-left: 1px solid var(--line); }
  .header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--green); white-space: nowrap; }
  .header-phone svg { flex: none; }
  .header-cta .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
}

.menu-toggle { position: relative; }
.menu-toggle span {
  position: absolute; left: 12px; width: 20px; height: 2px; background: currentColor;
  transition: transform .25s ease;
}
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.nav-link { font-weight: 500; color: #3f4a43; }
.nav-link[aria-current], .nav-link.is-current { color: var(--green-deep); font-weight: 600; }
@media (max-width: 1099px) {
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0; display: flex; flex-direction: column;
    padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--white);
    overflow-y: auto; visibility: hidden; opacity: 0;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity .2s ease; }
  .nav-links { display: flex; flex-direction: column; }
  .nav-link { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 20px; }
  .nav-extra { margin-top: 32px; display: grid; gap: 6px; color: var(--muted); }
  .nav-extra a { color: var(--green); font-weight: 600; }
  html.menu-open { overflow: hidden; }
  .is-resizing .site-nav { transition: none; }
}
@media (min-width: 1100px) {
  .header-tools, .nav-extra { display: none; }
  .nav-links { display: flex; gap: 4px; }
  .site-nav { margin-right: 4px; }
  .nav-link { padding: 10px 14px; border-radius: 6px; font-size: 15.5px; transition: color .2s ease, background-color .2s ease; }
  .nav-link:hover { color: var(--green-deep); background: var(--soft); }
  .nav-link[aria-current] { background: var(--soft); }
}

/* ---------- Hero (home): photo with a green tint, one text block aligned to the page column ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--green-deep); color: var(--white); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 60% 50%; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / 0) 75%);
}
.hero-grid { display: grid; align-items: center; min-height: max(560px, calc(100svh - var(--header-h))); padding-block: 56px; }
.hero-main { max-width: 720px; }
/* One typeface in the hero: a bold title, one sentence, a button and the phone number. */
.hero h1 { font-family: var(--font); font-weight: 700; letter-spacing: -.02em; font-size: clamp(36px, 4vw, 60px); line-height: 1.1; }
.hero-lead { max-width: 34em; margin-top: 18px; font-size: 18px; line-height: 1.55; color: rgb(255 255 255 / .9); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.hero-actions .btn { min-height: 52px; padding: 0 28px; }
.hero-tel { font-weight: 600; font-size: 17px; color: var(--white); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgb(255 255 255 / .5); transition: text-decoration-color .2s ease; }
@media (hover: hover) { .hero-tel:hover { text-decoration-color: var(--white); } }
@media (max-width: 920px) { .hero-media::after { background: rgb(0 0 0 / .55); } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); background: var(--white); }
.section--soft { background: var(--soft); }
.title {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: var(--green);
}
.lead { color: var(--muted); max-width: 56ch; }
/* Every section head: title on the left, an optional lead beside it on wide screens. */
.head-split { display: grid; gap: 16px; margin-bottom: 36px; }
@media (min-width: 921px) { .head-split { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; gap: 48px; } }

/* A plain line icon in the brand green, no filled circle behind it. */
.icon-mark { display: grid; place-items: center; flex: none; color: var(--green); }
.icon-mark svg { width: 28px; height: 28px; }

/* Who we are: photo and a list with round icons. */
/* About: two plain paragraphs beside a pair of photos, the smaller one overlapping the corner. */
.about-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 921px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; } }
.about-copy { display: grid; gap: 18px; justify-items: start; }
.about-copy > p { max-width: 58ch; color: var(--muted); }
.about-copy .about-lead { margin-top: 8px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink); }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; color: var(--muted); }
.about-actions .text-link { font-weight: 600; color: var(--green); }
.about-collage { position: relative; padding: 0 0 56px 56px; }
.about-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.about-inset {
  position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  border: 6px solid var(--white);
}
.about-collage picture, .about-collage img { width: 100%; height: 100%; }
.about-collage img { object-fit: cover; }
@media (max-width: 560px) { .about-collage { padding: 0 0 40px 28px; } }

/* Why us: three white cards on the soft band. */
.why-grid { display: grid; gap: var(--gap); }
@media (min-width: 721px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-card { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 28px 24px; border-radius: var(--radius); background: var(--white); }
.why-card .icon-mark { margin-bottom: 6px; }
.why-card h3 { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--green); }
.why-card p { color: var(--muted); font-size: 15px; }

/* Services: horizontal cards, text and photo; the second one dark. */
.svc-grid { display: grid; gap: 24px; }
@media (min-width: 921px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
}
@media (min-width: 560px) { .svc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.svc-short { display: none; }  /* the short sentence is for the phone tiles */
.svc-body { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 28px; }
.svc h3 { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--green); }
.svc h3 a::after { content: ''; position: absolute; inset: 0; }
.svc p { color: var(--muted); font-size: 15px; }
.svc-media { min-height: 200px; }
.svc-media picture, .svc-media img { width: 100%; height: 100%; }
.svc-media img { object-fit: cover; }
.svc--dark { background: var(--green); border-color: var(--green); }
.svc--dark h3, .svc--dark p { color: var(--white); }
.svc--dark p { opacity: .82; }
.svc:has(a:focus-visible) { outline: 2px solid var(--green); outline-offset: 4px; }
.svc a:focus-visible { outline: none; }
.svc-grid--single { grid-template-columns: 1fr; }
@media (min-width: 921px) { .svc-grid--single .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .svc-grid--single .svc-media { min-height: 280px; } }

/* Facts box over a photo band with a call to action. */
.cta { position: relative; isolation: isolate; padding-bottom: clamp(56px, 6vw, 88px); color: var(--white); background: var(--green); }
.cta-media { position: absolute; inset: 0; z-index: -1; }
.cta-media picture, .cta-media img { width: 100%; height: 100%; }
.cta-media img { object-fit: cover; }
.cta-media::after { content: ''; position: absolute; inset: 0; background: rgb(12 35 24 / .82); }
.stats {
  position: relative; top: -48px; margin-bottom: -48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--radius); background: var(--green-deep); box-shadow: 0 16px 40px -20px rgb(12 35 24 / .6);
}
.stats > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; padding: 22px 12px; text-align: center; }
.stats > div + div { border-left: 1px solid rgb(255 255 255 / .12); }
.stats > div:nth-child(3) { border-left: 0; border-top: 1px solid rgb(255 255 255 / .12); }
.stats > div:nth-child(4) { border-top: 1px solid rgb(255 255 255 / .12); }
.stats dd { font-family: var(--font-head); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1; }
.stats dt { font-size: 13px; color: rgb(255 255 255 / .75); }
@media (min-width: 721px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { border-left: 1px solid rgb(255 255 255 / .12); border-top: 0; }
  .stats > div:nth-child(4) { border-top: 0; }
}
.cta-copy { display: grid; justify-items: center; gap: 14px; max-width: 40rem; margin: clamp(48px, 6vw, 80px) auto 0; text-align: center; }
.cta-copy h2 { font-family: var(--font-head); font-size: clamp(28px, 3vw, 40px); font-weight: 700; }
.cta-copy p { color: rgb(255 255 255 / .82); }
.cta-tel { font-weight: 600; color: var(--white); white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / .5); transition: text-decoration-color .2s ease; }
@media (hover: hover) { .cta-tel:hover { text-decoration-color: var(--white); } }
.cta-copy .btn { margin-top: 8px; }

/* ---------- Facts (definition rows) ---------- */
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 500; }
.facts--num dd { font-variant-numeric: tabular-nums; text-align: right; }
.facts--num > div { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------- Location ---------- */
/* Desktop: heading, text and details in the left column, the map filling the right one. Phones: head, map, details. */
.location-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .location-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); grid-template-areas: "map head" "map info";
    grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 32px; align-items: start;
  }
  .location-head { grid-area: head; }
  .location-info { grid-area: info; }
  .map { grid-area: map; }
}
.location-head .lead { margin-top: 18px; }
.map { margin: 0; }
.map figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.route-map { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #e6ebe7; font-family: var(--font); }
.map-pl { fill: var(--white); stroke: rgb(18 22 19 / .3); stroke-width: 1.2; stroke-linejoin: round; }
.map-road { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.map-road--de { stroke: #a3a198; stroke-width: 2.4; }
.map-road--local { stroke-width: 1.8; }
.map-shield rect { fill: #c8102e; }
.map-shield text { fill: var(--white); font-size: 15px; font-weight: 700; }
.map-city { fill: var(--white); stroke: var(--green); stroke-width: 2; }
.route-map text { fill: var(--ink); }
.map-name { font-size: 22px; font-weight: 600; }
.route-map .map-km { font-size: 19px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.map-home { fill: var(--green); }
.map-home-ring { fill: none; stroke: var(--green); stroke-width: 2; opacity: .35; }
.map-here { font-size: 25px; font-weight: 700; }
.route-map .map-country { fill: rgb(18 22 19 / .3); font-size: 17px; font-weight: 600; letter-spacing: .3em; }
.map-arrow { fill: none; stroke: var(--green); stroke-width: 1.8; }
.map-scale path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.route-map .map-scale text { font-size: 18px; fill: var(--muted); }
@media (max-width: 720px) {
  .map { margin-inline: calc(var(--gutter) * -1); }
  .route-map { border-radius: 0; }
  .map figcaption { padding-inline: var(--gutter); }
  .map-name { font-size: 30px; }
  .route-map .map-km { font-size: 26px; }
  .map-here { font-size: 32px; }
  .map-shield, .route-map .map-country, .route-map .map-scale { display: none; }
  .map-city { stroke-width: 3; }
  .map-road { stroke-width: 5; }
}
.location-info { display: grid; gap: 28px; align-content: start; }
.location-addr { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 500; }
.location-lists { display: grid; gap: 24px; }
.location-lists h3 { margin-bottom: 8px; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--green); }
.location-info .btn { justify-self: start; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } }
.contact-copy .lead { margin-top: 20px; }
.contact-list { display: grid; gap: 20px; margin-top: 28px; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-list .icon-mark { margin-top: 4px; }
.contact-list .icon-mark svg { width: 24px; height: 24px; }
.contact-list li > span:last-child { display: grid; justify-items: start; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.contact-list small { font-size: 13px; color: var(--muted); }
.contact-list a { font-weight: 600; color: var(--green); }
.contact-list .text-link { font-weight: 500; color: var(--ink); }
/* The form lives in <details class="form-box">: always open on desktops, closed behind the summary on phones. */
.form-box { scroll-margin-top: 12px; }
.form-open { display: none; }
.form { display: grid; gap: 14px; padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
@media (min-width: 600px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .form-title, .form-note, .field--full, .form-status, .form-end, .form noscript { grid-column: 1 / -1; }
}
.form-title { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--green); }
.form-title:focus { outline: none; }
.form-note { margin-top: -8px; font-size: 13px; color: var(--muted); }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 13.5px; font-weight: 600; }
.field label i { font-style: normal; font-weight: 400; color: var(--muted); }
.field-hint { margin-top: -2px; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--white); font-size: 16px; appearance: none; -webkit-appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 120px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23123a28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgb(18 58 40 / .15); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: 13px; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.form-end p { max-width: 30ch; font-size: 13px; color: var(--muted); }
@media (max-width: 599px) { .form-end .btn { width: 100%; } }
.form-status { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-sm); background: var(--soft); font-size: 15px; }
.form-status[hidden] { display: none; }
.form-status textarea { width: 100%; min-height: 120px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--white); }
.form-status .btn { justify-self: start; }
.form-status:focus { outline: none; }

/* ---------- Service pages ---------- */
.page-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(340px, 46vh, 480px); color: var(--white); background: var(--green); }
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media picture, .page-hero-media img { width: 100%; height: 100%; }
.page-hero-media img { object-fit: cover; }
.page-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 42 28 / .8) 0%, rgb(12 42 28 / .4) 60%, rgb(12 42 28 / .15) 100%); }
.page-hero-inner { padding-block: 72px 56px; }
.page-hero h1 { font-family: var(--font-head); font-size: clamp(40px, 5vw, 72px); font-weight: 700; line-height: 1; }
.page-hero p { max-width: 48ch; margin-top: 14px; color: rgb(255 255 255 / .85); }
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 921px) { .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; } }
.faq-grid .lead { margin-top: 20px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border-radius: var(--radius-sm); background: var(--soft); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px;
  font-weight: 600; color: var(--green); cursor: pointer; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; flex: none; width: 18px; height: 18px; }
.faq-list summary i::before, .faq-list summary i::after {
  content: ''; position: absolute; left: 2px; top: 8px; width: 14px; height: 2px; background: var(--green); transition: transform .25s ease;
}
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0deg); }
.faq-list details p { padding: 0 20px 18px; color: var(--muted); font-size: 15px; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}
.not-found { min-height: 60svh; }
.not-found h1 { font-family: var(--font-head); font-size: clamp(30px, 3vw, 44px); color: var(--green); }
.page-lead { margin-top: 12px; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--green-deep); color: rgb(255 255 255 / .72); padding: 56px 0 calc(24px + env(safe-area-inset-bottom)); font-size: 15px; }
.footer a { transition: color .2s ease; }
@media (hover: hover) { .footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; } }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; } }
.footer-id { display: grid; gap: 16px; align-content: start; }
.footer-brand img { width: 96px; height: auto; }
.footer-id p { max-width: 30ch; }
.footer-col { display: grid; gap: 8px; align-content: start; justify-items: start; }
.footer-title { margin-bottom: 6px; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--white); }
.footer-col a, .footer-col p { color: var(--white); }
.footer-col a[aria-current] { font-weight: 700; }
.footer-line { display: inline-flex; align-items: center; gap: 10px; }
.footer-line svg { flex: none; opacity: .7; }
.footer-note { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 13px; color: rgb(255 255 255 / .55); }
.footer-note p { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .3); }
.to-top {
  position: absolute; right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 6px; background: rgb(255 255 255 / .1); color: var(--white);
}
@media (max-width: 720px) { .to-top { position: static; margin: 20px var(--gutter) 0 auto; } }

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

/* ---------- Reference extras: feature icons ("Na miejscu"), step cards ---------- */
.features { padding-block: clamp(48px, 5vw, 72px); }
.features-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 921px) { .features-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; } }
.feature-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
@media (min-width: 721px) { .feature-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.feature-icons li { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 13px; color: var(--muted); }
.feature-icons svg { color: var(--green); }
.step-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step-card {
  display: grid; justify-items: start; align-content: start; gap: 10px; padding: 28px 24px;
  border-radius: var(--radius); background: var(--soft);
}
.step-card .icon-mark { margin-bottom: 6px; }
.step-card h3 { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--green); }
.step-card p { color: var(--muted); font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ===== Phone layout (up to 720 px) ===== */
@media (max-width: 720px) {
  /* Phone layout (max-width: 720px). Loaded after site.css, so it only has to override.
     One column, 20 px gutters, 16 px text at 1.6, 28 px section titles and 60 px between sections.
     Every section follows the same order: title, short lead, then content stacked one item per row. */

  :root {
    --gutter: 20px;
    --section: 56px;
    --header-h: 64px;
    --hero-h: max(540px, calc(100svh - var(--header-h)));
  }

  body { line-height: 1.6; }

  /* ---------- Header and menu ---------- */
  .brand-logo { height: 44px; }
  .header-inner { gap: 12px; }
  .header-tools { margin-right: -10px; }
  .nav-link { display: flex; align-items: center; min-height: 56px; padding: 0; font-size: 19px; }
  .nav-extra { margin-top: 28px; gap: 4px; font-size: 16px; }
  .nav-extra a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Shared type and rhythm ---------- */
  .title { font-size: 28px; line-height: 1.15; }
  .lead { font-size: 16px; line-height: 1.6; }
  .head-split { gap: 12px; margin-bottom: 28px; }
  .btn { min-height: 52px; padding: 0 24px; font-size: 16px; }

  /* ---------- Hero: full screen, text centred, button 15% above the bottom edge ---------- */
  .hero-media img { object-position: 50% 40%; }
  .hero-media::after {
    background: linear-gradient(180deg, rgb(0 0 0 / .28) 0%, rgb(0 0 0 / .38) 38%, rgb(0 0 0 / .72) 100%);
  }
  .hero-grid {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: var(--hero-h); padding-block: 40px calc(var(--hero-h) * .15);
  }
  .hero-main { display: flex; flex-direction: column; align-items: center; max-width: none; text-align: center; }
  .hero h1 { max-width: 12em; font-size: clamp(31px, 8.8vw, 38px); line-height: 1.12; }
  .hero-lead { max-width: 24em; margin-top: 16px; font-size: 17px; line-height: 1.6; }
  .hero-actions { flex-direction: column-reverse; align-items: center; gap: 20px; width: 100%; margin-top: 20px; }
  .hero-actions .btn { width: min(100%, 320px); min-height: 56px; font-size: 17px; }
  .hero-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; }

  /* ---------- O nas: text and the phone number. On phones the services sit right above, so the
     "Zobacz usługi" button would point back up, and the photo would repeat the Magazynowanie tile. ---------- */
  .about-copy { gap: 16px; }
  .about-copy .about-lead { margin-top: 4px; font-size: 18px; line-height: 1.6; }
  .about-copy > p { color: var(--muted); }
  .about-actions { margin-top: 0; }
  .about-actions .btn, .about-collage { display: none; }
  .about-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Why us and "Co podać": compact rows (icon, title, sentence) instead of tall cards ---------- */
  .why-grid, .step-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .why-card, .step-card { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 16px; padding: 0; border-radius: 0; background: none; }
  .why-card .icon-mark, .step-card .icon-mark { grid-row: span 2; margin: 0; }
  .why-card h3, .step-card h3 { font-size: 19px; line-height: 1.3; }
  .why-card p, .step-card p { grid-column: 2; font-size: 16px; line-height: 1.55; }

  /* ---------- Facts band: the four numbers in a 2 x 2 and one button. The heading and sentence are
     left out: the contact section follows shortly and the phone number is in the header. ---------- */
  .cta { padding-block: 32px; }
  .stats { top: 0; margin-bottom: 0; }
  .stats > div { gap: 6px; padding: 20px 12px; }
  .stats dd { font-size: 28px; }
  .stats dt { font-size: 14px; line-height: 1.35; }
  .cta-copy { margin-top: 16px; }
  .cta-copy h2, .cta-copy p { display: none; }
  .cta-copy .btn { width: 100%; margin-top: 0; }

  /* ---------- Services: two tiles side by side on the home page (photo, name, short sentence) and a row
     with a thumbnail on a service page. Both white; the whole card is the link. ---------- */
  .svc-grid { gap: 12px; }
  .page-home .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc, .svc--dark { grid-template-columns: minmax(0, 1fr); align-content: start; background: var(--white); border-color: var(--line); }
  .svc-media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .svc-body { align-content: start; gap: 4px; padding: 12px 14px 16px; }
  .svc h3, .svc--dark h3 { font-size: clamp(17px, 4.8vw, 20px); color: var(--green); }
  .svc-text { display: none; }
  .svc-short { display: block; }
  .svc p, .svc--dark p { font-size: 15px; line-height: 1.45; color: var(--muted); opacity: 1; }
  .svc-grid--single .svc { grid-template-columns: 112px minmax(0, 1fr); }
  .svc-grid--single .svc-media { aspect-ratio: auto; min-height: 112px; }
  .svc-grid--single .svc-body { align-content: center; padding: 14px 16px; }

  /* ---------- Location: full width map, then address and distance rows ---------- */
  .location-grid { gap: 28px; }
  .map figcaption { margin-top: 10px; line-height: 1.5; }
  .location-info { gap: 8px; }
  .location-info .btn { justify-self: stretch; }
  .facts > div { gap: 12px; padding: 14px 0; }
  /* The road distances to Świecko, Poznań and Berlin are labelled on the map right above. */
  .location-far { display: none; }

  /* ---------- Contact: phone and e-mail rows, then the "Napisz zapytanie" button that opens the form in place.
     On the home page the address is left out: the location section right above shows it. ---------- */
  .contact-grid { gap: 24px; }
  .page-home .contact-addr { display: none; }
  .form-open { display: flex; width: 100%; min-height: 56px; list-style: none; cursor: pointer; }
  .form-open::-webkit-details-marker { display: none; }
  .form-box[open] > .form-open { display: none; }
  .contact-copy .lead { margin-top: 14px; }
  .contact-list { gap: 18px; margin-top: 24px; }
  .contact-list li > span:last-child { gap: 0; }
  .contact-list small { font-size: 14px; }
  .contact-list a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
  .contact-list .text-link { font-size: 16px; }
  .form, .form[class] { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .form-title { font-size: 21px; }
  .form-note { margin-top: -10px; font-size: 14px; }
  .field label { font-size: 15px; }
  .field-hint { font-size: 14px; line-height: 1.45; }
  .field input, .field select { min-height: 48px; }
  .field textarea { min-height: 140px; }
  .form-end { display: grid; gap: 14px; }
  .form-end p { max-width: none; font-size: 14px; line-height: 1.5; }
  .form-end .btn { width: 100%; }

  /* ---------- Service pages ---------- */
  .page-hero { min-height: min(62svh, 520px); }
  .page-hero-media::after { background: linear-gradient(180deg, rgb(12 42 28 / .35) 0%, rgb(12 42 28 / .82) 100%); }
  .page-hero-inner { padding-block: 56px 40px; }
  .page-hero h1 { font-size: 42px; line-height: 1.05; }
  .page-hero p { margin-top: 14px; font-size: 17px; line-height: 1.6; }
  .faq-grid { gap: 28px; }
  .faq-grid .lead { margin-top: 14px; }
  .faq-grid .lead .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-list { gap: 12px; }
  .faq-list summary { min-height: 60px; gap: 16px; padding: 16px 18px; line-height: 1.4; }
  .faq-list details p { padding: 0 18px 20px; font-size: 16px; line-height: 1.6; }

  /* ---------- Footer: one column, links as full height rows ---------- */
  .footer { padding-top: 40px; font-size: 16px; }
  .footer-grid, .footer-grid[class] { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-brand img { width: 88px; }
  .footer-col { gap: 0; }
  .footer-title { margin-bottom: 8px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-note { margin-top: 32px; font-size: 13px; line-height: 1.6; }
  .footer-note p { flex-direction: column; gap: 6px; }

  /* Two neighbouring sections on the same background share one gap instead of two. */
  .section--soft + .section--soft,
  .section:not(.section--soft) + .section:not(.section--soft) { padding-top: 0; }

  /* Map labels large enough to read at phone width (the map is 1000 units wide, shown at about 390 px). */
  .map-name { font-size: 36px; }
  .route-map .map-km { font-size: 30px; }
  .map-here { font-size: 38px; }
  .route-map text { paint-order: stroke; stroke: var(--white); stroke-width: 7px; stroke-linejoin: round; }
}

/* ---------- Scroll reveal: a light fade and rise, once; skipped for reduced motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.23, 1, .32, 1), transform .7s cubic-bezier(.23, 1, .32, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* Contact form: hidden trap field for bots, and the send result under the form. */
.form-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form-status.is-ok { background: #e7f1ea; color: var(--green-deep); }
.form-status.is-error { background: #fbeaea; color: #8a1f1f; }

/* ---------- Cookie bar: a white card that slides up from the bottom ---------- */
.cookie-bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  width: min(100% - 32px, 1080px); padding: 22px 24px; border-radius: var(--radius);
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgb(12 42 28 / .45);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0;
  transition: transform .55s cubic-bezier(.23, 1, .32, 1), opacity .35s ease;
}
.cookie-bar.is-open { transform: translate(-50%, 0); opacity: 1; }
.cookie-bar[hidden] { display: none; }
.cookie-inner { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .cookie-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
.cookie-text h2 { font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--green); }
.cookie-text p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.cookie-text .text-link { font-weight: 600; color: var(--green); white-space: nowrap; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { min-height: 46px; padding: 0 20px; font-size: 15px; flex: 1 1 auto; }
.btn--outline { background: var(--white); color: var(--green); border-color: var(--green); }
@media (hover: hover) { .btn--outline:hover { background: var(--soft); } }
@media (max-width: 720px) {
  .cookie-bar { bottom: 0; width: 100%; border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .cookie-actions { flex-direction: column-reverse; }
  .cookie-actions .btn { width: 100%; min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar { transition: none; } }
.footer-cookies { padding: 0; font: inherit; color: var(--white); text-align: left; cursor: pointer; }
@media (hover: hover) { .footer-cookies:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- Privacy policy page ---------- */
.policy { background: var(--white); }
.policy-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .policy-grid { grid-template-columns: minmax(0, 20rem) minmax(0, 46rem); gap: 72px; align-items: start; } .policy-aside { position: sticky; top: calc(var(--header-h) + 32px); } }
.policy-date { margin-top: 10px; color: var(--muted); font-size: 15px; }
.policy-toc { margin: 24px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; list-style: decimal; }
.policy-toc a { color: var(--green); }
@media (hover: hover) { .policy-toc a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 999px) { .policy-toc { display: none; } }
.policy-section { padding-top: 8px; scroll-margin-top: calc(var(--header-h) + 24px); }
.policy-section + .policy-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.policy-section h2 { font-family: var(--font); font-size: 20px; font-weight: 700; color: var(--green); }
.policy-section p, .policy-section ul { margin-top: 12px; color: var(--ink-soft); line-height: 1.7; }
.policy-section ul { padding-left: 20px; display: grid; gap: 10px; list-style: disc; }
.policy-section a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.policy-section code { font-size: .92em; padding: 1px 6px; border-radius: 4px; background: var(--soft); }

/* ---------- Audit fixes (2026-09-24) ---------- */
/* One highlighted menu item: while a section of the home page is current, "Strona główna" steps back. */
.nav-links:has(.is-current) .nav-link[aria-current="page"] { background: none; font-weight: 500; color: #3f4a43; }

/* Touch screens (tablets and phones): every link and button is at least 44 px tall. */
@media (pointer: coarse) {
  .footer-col a, .footer-cookies, .contact-list a, .location-info .text-link, .hero-tel, .about-actions .text-link, .faq-note a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* Tablets: the hero title breaks into two lines, and the "why" cards stack with the icon beside the text. */
.hero h1 { max-width: 13em; }
@media (min-width: 721px) and (max-width: 1099px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .why-card .icon-mark { grid-row: span 2; margin-bottom: 0; }
}

/* Map labels get a halo in the ground colour, so roads never cut through the text. */
.route-map text { paint-order: stroke; stroke: var(--white); stroke-width: 5px; stroke-linejoin: round; }
.route-map .map-country, .route-map .map-scale text { stroke: none; }

/* Legal line in the footer (art. 206 KSH). */
.footer-note .footer-legal { display: block; max-width: 120ch; line-height: 1.6; }
.map figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Services and the feature row share one light green band; the map sits on white. */
.services + .features { padding-top: 0; }
.location .route-map { background: #e6ebe7; }

/* ---------- Phone tidy-up (2026-09-24, revised 2026-09-28): shorter page, no repeated facts ---------- */
@media (max-width: 720px) {
  /* Home page order on phones: hero, services, about, why, facts band, location, contact.
     Service pages keep the source order. */
  .page-home { display: flex; flex-direction: column; }
  .page-home > .hero { order: 0; }
  .page-home > .services { order: 1; }
  .page-home > .about { order: 2; }
  .page-home > .why { order: 3; }
  .page-home > .cta { order: 4; }
  .page-home > .location { order: 5; }
  .page-home > .contact { order: 6; }
  /* The feature icon row says what the "why" rows and the facts band already say. */
  .page-home > .features { display: none; }
  /* Hero: the phone crop is the facade with the logo, kept to the right so the logo stays visible above the text. */
  .hero-media img { object-position: 100% 0%; }
  /* Facts band: the photo behind shows through a little more. */
  .cta-media::after { background: rgb(12 35 24 / .7); }
  /* Footer: the company column repeats the legal line below it, the contact column the contact section
     above it; the page links sit in two columns. */
  .footer-col--firm, .footer-col--contact { display: none; }
  nav.footer-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  nav.footer-col .footer-title { grid-column: 1 / -1; }
}