/* HuStra · light editorial, amplified: white + deep blue grounds, yellow highlight, layered photos, smooth motion. */

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #ebedf0;
  --blue: #1f3fd6;
  --blue-2: #1731b0;
  --blue-deep: #101f6b;
  --blue-deeper: #0b1650;
  --blue-tint: #e9edff;
  --blue-line: rgba(255, 255, 255, 0.14);
  --blue-text: #c9d2ff;
  --yellow: #ffcc1f;
  --yellow-2: #f2bc00;
  --yellow-ink: #1a1400;
  --ink: #0b0d10;
  --ink-2: #5b616b;
  --ink-3: #666c76;
  --line: #e6e8eb;
  --line-2: #d5d9de;
  --white: #ffffff;

  --font: 'Geist', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --hdr-h: 72px;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --r-xl: 24px;
  --r-l: 16px;
  --r-m: 12px;
  --r-pill: 999px;
  --shadow: 0 30px 70px -30px rgba(11, 13, 16, 0.3);
  --shadow-sm: 0 12px 32px -16px rgba(11, 13, 16, 0.24);
  --shadow-blue: 0 14px 30px -14px rgba(31, 63, 214, 0.55);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; font-variant-numeric: tabular-nums; caret-color: var(--blue); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--yellow); color: var(--yellow-ink); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p a:not(.btn), dd a:not(.btn), .copy a:not(.btn) { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease); }
p a:not(.btn):hover, dd a:not(.btn):hover, .copy a:not(.btn):hover { color: var(--blue); text-decoration-color: var(--blue); }
/* on the deep-blue ground a blue hover would vanish: links in copy turn yellow there */
.section--blue p a:not(.btn):hover, .section--blue dd a:not(.btn):hover { color: var(--yellow); text-decoration-color: var(--yellow); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.section--blue :focus-visible { outline-color: var(--yellow); }
h1, h2, h3, p, dl, dd, ul, ol, figure, table, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--white); padding: 8px 14px; z-index: 100; border-radius: var(--r-pill); }
.skip:focus { top: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main { padding-top: var(--hdr-h); }

/* type */
.display { font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
.display--xl { font-size: clamp(2.6rem, 0.9rem + 4vw, 4.9rem); }
.display--l { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.02; }
.display--m { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; }
.lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); max-width: 52ch; letter-spacing: -0.005em; }
.section--blue .lead { color: var(--blue-text); }
.copy { max-width: 60ch; }
.copy p + p { margin-top: 1em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.section--blue .eyebrow { color: var(--blue-text); }

/* the yellow marker drawn under key words */
.mark { position: relative; display: inline-block; isolation: isolate; }
.mark svg { position: absolute; left: -1%; bottom: -0.1em; width: 102%; height: 0.22em; overflow: visible; pointer-events: none; z-index: -1; }
.mark svg path { stroke: var(--yellow); stroke-width: 5; fill: none; stroke-linecap: round; }
/* the marker is revealed left to right by animating the clip (robust across browsers, unlike dashoffset + pathLength) */
.has-gsap .mark svg { clip-path: inset(-40% 100% -40% 0); will-change: clip-path; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); font-weight: 500; font-size: 1rem; line-height: 1; letter-spacing: -0.005em; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease); }
.btn i { font-size: 0.85em; transition: transform 0.4s var(--ease); }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }
.btn:hover i.fa-arrow-down { transform: translateY(3px); }
.btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-blue); }
.btn--primary:hover { background: var(--blue-2); }
.btn--yellow { background: var(--yellow); color: var(--yellow-ink); }
.btn--yellow:hover { background: var(--yellow-2); }
.btn--quiet { background: var(--bg-2); color: var(--ink); }
.btn--quiet:hover { background: var(--bg-3); }
.btn--line { border-color: var(--line-2); color: var(--ink); background: var(--white); }
.btn--line:hover { border-color: var(--ink); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn--sm { padding: 10px 16px; font-size: 0.9375rem; }
.btn.is-magnetic { will-change: transform; }


/* ---------- header (fixed; the content scrolls under it) ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.hdr.is-scrolled, .hdr.is-open { border-bottom-color: var(--line); background: rgba(255, 255, 255, 0.9); }
.hdr__progress { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--yellow); transform-origin: left center; transform: scaleX(0); }
.hdr__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); min-height: var(--hdr-h); display: flex; align-items: center; gap: 16px; }
.hdr__logo { display: block; margin-right: auto; flex: 0 0 auto; }
.hdr__logo img { width: 92px; height: auto; }
.nav { display: flex; align-items: center; gap: 8px; }
.nav__list { display: flex; gap: 0; }
.nav__item { position: relative; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 11px; font-weight: 500; font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; transition: color 0.25s var(--ease); }
.nav__link:hover, .nav__link:focus-visible, .nav__item--has-sub.is-open > .nav__link, .nav__item.is-active > .nav__link { color: var(--ink); }
/* a yellow underline under the label: it grows in from the left on hover and leaves to the right; the current page keeps it */
.nav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s var(--ease); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__item--has-sub.is-open > .nav__link::after, .nav__item.is-active > .nav__link::after { transform: scaleX(1); transform-origin: left center; }
.nav__caret { font-size: 0.6em; transition: transform 0.35s var(--ease); }
.nav__item--has-sub:hover .nav__caret, .nav__item--has-sub.is-open .nav__caret { transform: rotate(180deg); }
.nav__sub { position: absolute; left: 0; top: calc(100% + 8px); width: 26rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 8px; display: none; z-index: 60; }
.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub, .nav__item--has-sub.is-open .nav__sub { display: block; }
/* invisible bridge over the 8px gap so the cursor can travel from the link into the menu */
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__sublist a { display: grid; grid-template-columns: 2.2rem 1fr; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 10px; font-weight: 500; font-size: 0.9375rem; line-height: 1.25; }
.nav__sublist a:hover { background: var(--bg-2); }
.nav__sublist small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }
.nav__num { color: var(--ink-3); font-weight: 500; font-size: 0.85rem; }
.nav__suball { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 11px 12px; border-top: 1px solid var(--line); font-weight: 500; font-size: 0.9375rem; color: var(--blue); }
.nav__suball i { font-size: 0.8em; transition: transform 0.4s var(--ease); }
.nav__suball:hover i { transform: translateX(3px); }
.nav__extra { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 500; font-size: 0.9375rem; color: var(--ink); padding: 10px 12px; border-radius: var(--r-pill); transition: color 0.25s var(--ease); }
.nav__phone:hover { color: var(--blue); }
.nav__phone i { color: var(--blue); font-size: 0.9em; }
.nav__cta { white-space: nowrap; }
.hdr__cta { display: none; white-space: nowrap; }
.hdr__cta i { color: var(--yellow); }
/* the menu's quote button carries the invoice icon only in the phone panel, like the call bar */
.nav__ctaicon { display: none; }
.hdr__burger { display: none; align-items: center; gap: 10px; background: var(--bg-2); border: 0; color: var(--ink); font: 500 0.9375rem var(--font); padding: 10px 12px 10px 14px; border-radius: var(--r-pill); cursor: pointer; }
.hdr__burger-icon { position: relative; width: 18px; height: 14px; display: inline-block; }
.hdr__burger-icon i { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); }
.hdr__burger-icon i:nth-child(1) { top: 0; }
.hdr__burger-icon i:nth-child(2) { top: 6px; }
.hdr__burger-icon i:nth-child(3) { top: 12px; }
.hdr.is-open .hdr__burger-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr.is-open .hdr__burger-icon i:nth-child(2) { opacity: 0; }
.hdr.is-open .hdr__burger-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero: statement + layered photo stack ---------- */
.hero { padding-top: clamp(40px, 5vw, 72px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__copy { container-type: inline-size; }
/* hero kicker: dot, spaced-out brand name, a short yellow rule that draws in, then the founding year */
.hero__eyebrow { flex-wrap: wrap; gap: 10px 14px; font-size: 0.875rem; color: var(--ink-2); margin-bottom: clamp(22px, 2.4vw, 32px); }
.hero__eyebrow::before { width: 10px; height: 10px; box-shadow: 0 0 0 4px rgba(255, 204, 31, 0.28); }
.hero__brand { font-weight: 700; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); }
.hero__rule { width: 36px; height: 2px; background: var(--yellow); border-radius: 1px; transform-origin: left center; }
.hero__since { font-weight: 500; }
/* two lines, never three: the title shrinks with its column instead of wrapping */
.hero__title { font-size: min(clamp(2.6rem, 0.9rem + 4vw, 4.9rem), 12.4cqi); }
.hero__title .l { display: block; overflow: hidden; white-space: nowrap; padding: 0 0.1em 0.14em 0; margin-bottom: -0.14em; }
.hero__title .l > span { display: inline-block; }
.hero__lead { margin-top: 24px; max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hero__stack { position: relative; aspect-ratio: 5 / 4; }
.hero__card { position: absolute; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.hero__card picture { display: block; width: 100%; height: 100%; }
.hero__card img { width: 100%; height: 100%; object-fit: cover; }
.hero__card--main { inset: 0 0 8% 10%; }
.hero__card--small { left: -4%; bottom: 0; width: 44%; aspect-ratio: 4 / 3; border: 6px solid var(--white); border-radius: 20px; box-shadow: var(--shadow); }
.float { position: absolute; display: inline-flex; align-items: center; gap: 10px; background: var(--white); border-radius: var(--r-pill); padding: 10px 16px 10px 12px; font-weight: 500; font-size: 0.9375rem; box-shadow: var(--shadow-sm); white-space: nowrap; }
.float i { color: var(--blue); }
.float::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

/* marquee band under the hero */
.band { margin-top: clamp(40px, 6vw, 80px); padding: 30px 0 36px; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band__label { text-align: center; font-size: 0.875rem; color: var(--ink-3); font-weight: 500; margin-bottom: 20px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 70s linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee + .marquee { margin-top: 12px; }
.marquee__item { flex: 0 0 auto; width: 168px; height: 84px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; padding: 14px; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.marquee__item:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
/* logos are opaque PNGs with white backgrounds: multiply hides them on the white tile */
.marquee__item img { max-width: 72%; max-height: 62%; width: auto; height: auto; mix-blend-mode: multiply; filter: grayscale(1); transition: filter 0.3s var(--ease); }
.marquee__item:hover img { filter: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.no-gsap .marquee { mask-image: none; -webkit-mask-image: none; }
.no-gsap .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
.no-gsap .marquee__track > .marquee__item:nth-child(n+15) { display: none; }

/* ---------- sections ---------- */
.section { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.section--grey { background: var(--bg-2); }
.section--blue { background: var(--blue-deep); color: var(--white); }
/* the living layer behind the photographs may reach past the window's edge on narrow desktops: cut it there (clip, where supported, keeps the section from becoming a scroll box) */
.section--blue { overflow-x: hidden; overflow-x: clip; }
.section--blue .display { color: var(--white); }
.section__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section__head .lead { max-width: 44ch; }
.section__head .section__action { justify-self: end; }
.section__head .section__action--top { align-self: start; }
.section__head--even { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.section__head--center { align-items: center; }

/* ---------- explorer: pinned frame with counter + numbered rows ---------- */
.types__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
/* the heading, frame and counter share the left column, which stays in view while the rows scroll (main.js) */
.types__head { margin-bottom: clamp(24px, 3vw, 36px); }
.types__head .lead { margin-top: 18px; max-width: 46ch; }
.types__media { position: relative; container-type: inline-size; }
/* explicit height (4:3 of the column), not aspect-ratio: WebKit collapses an aspect-ratio box whose children are all absolute */
.types__frame { position: relative; height: 75cqi; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.types__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); }
.types__frame img.is-active { opacity: 1; transform: none; }
.no-gsap .types__frame img { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.types__frame figcaption { position: absolute; left: 20px; bottom: 20px; background: var(--white); font-size: 0.875rem; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill); }
.types__meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; margin-top: 20px; }
.types__counter { font-weight: 600; font-size: 2.25rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.types__counter small { font-size: 1rem; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.types__rail { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.types__rail i { display: block; height: 100%; width: 11.11%; background: var(--yellow); border-radius: 3px; transition: width 0.5s var(--ease); }
.types__hint { font-size: 0.9375rem; color: var(--ink-3); }
.types__list { border-top: 1px solid var(--line); }
.type { border-bottom: 1px solid var(--line); }
.type__link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 26px 0; color: var(--ink-2); text-decoration: none; transition: color 0.4s var(--ease); }
.type__body { display: block; min-width: 0; }
.type__num { justify-self: start; min-width: 2.5rem; text-align: center; font-weight: 600; font-size: 0.9375rem; line-height: 1; color: var(--ink-3); letter-spacing: 0.02em; }
.type__name { display: block; font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-2); transition: color 0.4s var(--ease); }
.type__short { display: block; margin-top: 8px; max-width: 48ch; font-size: 1rem; color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pill { font-size: 0.8125rem; font-weight: 500; padding: 5px 10px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.type.is-active .pill { background: var(--blue-tint); color: var(--blue-2); }
.type__go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
.type.is-active .type__name, .type__link:hover .type__name { color: var(--ink); }
.type__num { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 9px; margin-top: 0.2em; border-radius: var(--r-pill); background: var(--bg-2); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.type.is-active .type__num { background: var(--yellow); color: var(--yellow-ink); }
.type__link:hover .type__num { color: var(--blue); }
.type.is-active .type__link:hover .type__num { color: var(--yellow-ink); }
.type.is-active .type__go, .type__link:hover .type__go { background: var(--blue); border-color: var(--blue); color: var(--white); }
.type__link:hover .type__go { transform: translateX(3px); }
.type__thumb { display: none; }
.no-gsap .types__media { display: none; }
.no-gsap .type__thumb { display: block; grid-column: 2 / -1; width: 100%; max-width: 600px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); margin-top: 14px; }
.no-gsap .types__grid { grid-template-columns: 1fr; }

/* ---------- about, on deep blue: flow of three + layered photos + stats ---------- */
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.about__copy .lead { margin-top: 22px; max-width: 42ch; }
.flow { position: relative; margin-top: clamp(28px, 3vw, 40px); padding-left: 64px; display: grid; gap: 22px; }
/* the yellow thread runs through the three numbers and ends in an arrowhead; GSAP reveals it top-down via clip-path */
.flow__line { position: absolute; left: 21px; top: 14px; width: 2px; height: calc(100% - 22px); background: var(--yellow); border-radius: 1px; pointer-events: none; }
.flow__line::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 11px; height: 11px; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); border-radius: 1px; transform: translateX(-50%) rotate(45deg); }
.has-gsap .flow__line { clip-path: inset(0px -14px 100% -14px); will-change: clip-path; }
.flow__item { position: relative; }
.flow__num { position: absolute; left: -64px; top: -2px; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--blue-deep); }
.flow__item h3 { font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.015em; margin-bottom: 4px; }
.flow__item p { color: var(--blue-text); font-size: 1rem; max-width: 44ch; }
.about__action { margin-top: clamp(28px, 3vw, 40px); }
.about__visual { position: relative; aspect-ratio: 5 / 4; }
.about__photo { position: absolute; overflow: hidden; border-radius: var(--r-xl); background: var(--blue-deeper); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__photo--a { inset: 0 8% 14% 0; }
.about__photo--a img { height: 120%; margin-top: -10%; }
.about__photo--b { right: -3%; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border: 6px solid var(--blue-deep); border-radius: 20px; }
/* ISO badge sits inside the top-right corner of the main photo (photo A ends at right: 8%), no parallax */
.float--c { top: 20px; right: calc(8% + 20px); color: var(--ink); z-index: 1; }
.float--c img { width: 26px; height: auto; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--blue-line); }
.stat b { display: block; font-weight: 600; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); letter-spacing: -0.035em; line-height: 1; }
.stat b small { font-size: 0.4em; font-weight: 500; letter-spacing: 0; color: var(--yellow); margin-left: 8px; vertical-align: 0.15em; }
.stat > span { display: block; margin-top: 10px; font-size: 0.9375rem; color: var(--blue-text); max-width: 26ch; }

/* ---------- PRI-KONT: photos + copy ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.feature__media { display: grid; gap: 16px; }
.feature__media figure { overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.feature__media figure img { width: 100%; height: 100%; object-fit: cover; }
.feature__media > figure:first-child { aspect-ratio: 6 / 5; }
.feature__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature__pair figure { aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.feature__copy { display: grid; gap: 24px; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.figure { background: var(--bg-2); border-radius: var(--r-l); padding: 18px 20px; }
/* homepage PRI-KONT: the volume as one large figure, the loads as yellow gauges against the 2 500 kg maximum */
.pkspec { margin-top: clamp(4px, 1vw, 8px); }
.pkspec__vol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.pkspec__vol b { font-weight: 600; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pkspec__vol b small { margin-left: 4px; font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.pkspec__vol > span { font-size: 0.9375rem; color: var(--ink-2); }
.loads { display: grid; gap: 18px; margin-top: 22px; }
.loads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px 16px; }
.loads__label { font-size: 0.9375rem; color: var(--ink-2); }
.loads__value { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.loads__bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--bg-3); }
.loads__bar i { display: block; height: 100%; border-radius: 3px; background: var(--yellow); transform: scaleX(var(--v, 1)); transform-origin: left center; }
.figure b { display: block; font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
.figure b small { font-size: 0.5em; font-weight: 500; margin-left: 4px; color: var(--ink-2); letter-spacing: 0; }
.figure > span { display: block; margin-top: 8px; font-size: 0.9375rem; color: var(--ink-2); }
.feature__action .btn { width: 100%; justify-content: center; }

/* ---------- equipment lists with checks ---------- */
.equip { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.equip h3 { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; margin-bottom: 16px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checks li::first-letter { text-transform: uppercase; }
.checks i { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 2px; }

/* ---------- gallery showcase: one big frame, thumbs strip, autoplay rail ---------- */
.show { display: grid; gap: 18px; }
.show__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.show__stage.is-dragging { cursor: grabbing; }
.show__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.show__img.is-active { opacity: 1; }
.no-gsap .show__img { transition: opacity 0.5s var(--ease); }
.show__tag { position: absolute; left: 22px; top: 22px; background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 9px; box-shadow: var(--shadow-sm); overflow: hidden; }
.show__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.show__tag > span { display: inline-block; }
.show__bar { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 6fr) auto; gap: 24px; align-items: center; }
.show__meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.show__counter { font-weight: 600; font-size: 2rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; }
.show__counter > span { display: inline-block; min-width: 2ch; }
.show__counter small { font-size: 1rem; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.show__rail { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.show__rail i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: 3px; transform-origin: left center; }
.show__caption { font-size: 1.0625rem; color: var(--ink-2); overflow: hidden; }
.show__caption > span { display: inline-block; }
.show__nav { display: flex; gap: 8px; }
.show__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
.show__btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.show__btn:active { transform: scale(0.94); }
.show__strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 2px 10px; margin: -6px -2px 0; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.show__strip::-webkit-scrollbar { display: none; }
.show__strip li { flex: 0 0 auto; scroll-snap-align: start; }
.show__thumb { position: relative; display: block; width: 148px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-m); border: 0; padding: 0; background: var(--bg-2); cursor: pointer; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.3s var(--ease), transform 0.5s var(--ease); }
.show__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.show__thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 0.75rem; font-weight: 500; color: var(--white); background: linear-gradient(180deg, transparent, rgba(11, 13, 16, 0.7)); opacity: 0; transition: opacity 0.3s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.show__thumb:hover img, .show__thumb.is-active img { opacity: 1; }
.show__thumb:hover span, .show__thumb.is-active span { opacity: 1; }
.show__thumb.is-active { box-shadow: 0 0 0 2px var(--yellow); }
.show__thumb:hover img { transform: scale(1.05); }

/* ---------- contact on deep blue: compact channels + the form card ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact__side .lead { margin-top: 22px; }
.quick { display: grid; gap: 6px; margin-top: 32px; }
.quick a { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; margin-left: -10px; border-radius: var(--r-l); color: var(--white); transition: background-color 0.3s var(--ease); }
.quick a:hover { background: rgba(255, 255, 255, 0.06); }
.quick i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--blue-line); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.quick a:hover i { background: var(--yellow); color: var(--yellow-ink); }
.quick span { display: block; font-weight: 500; font-size: 1.0625rem; }
.quick small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--blue-text); margin-bottom: 1px; }
.team { grid-column: 1 / -1; margin-top: clamp(16px, 2vw, 32px); padding-top: 28px; border-top: 1px solid var(--blue-line); }
.team__title { font-size: 0.875rem; font-weight: 500; color: var(--blue-text); margin-bottom: 16px; }
.team__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; }
.team__list li { display: grid; gap: 8px; font-size: 0.9375rem; min-width: 0; }
.team__who { display: flex; flex-direction: column; min-width: 0; }
.team__who strong { font-weight: 600; }
.team__who small { color: var(--blue-text); font-size: 0.8125rem; }
.team__links { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.team__links a { color: var(--white); font-variant-numeric: tabular-nums; }
.team__links a:hover { color: var(--yellow); }
.team__links a i { color: var(--yellow); font-size: 0.85em; }
.form { background: var(--white); color: var(--ink); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55); display: grid; gap: 22px; }
.form__head h3 { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.form__head p { color: var(--ink-2); margin-top: 4px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field > span { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.field > span b { color: var(--blue); font-weight: 600; }
.field input, .field textarea, .field select, .field .select__btn { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg-2); border: 1px solid transparent; border-radius: var(--r-m); padding: 13px 14px; outline: 0; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.field textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field textarea:hover, .field select:hover { background: var(--bg-3); }
.field input:focus, .field textarea:focus, .field select:focus, .field .select__btn:focus, .select.is-open .select__btn { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #d12c2c; background: #fff5f5; }
/* a wrong field: red frame and a mark by its label, never a line of text under it (the grid would shift); the toast says why */
.field.is-invalid > span { color: #b42020; }
.field.is-invalid > span::after { content: "\f06a"; font: var(--fa-font-solid); margin-left: 6px; font-size: 0.85em; }
.field.is-shake input, .field.is-shake textarea { animation: field-shake 0.42s var(--ease); }
@keyframes field-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.select { position: relative; display: block; }
.field > .select { font-size: 1rem; font-weight: 400; color: var(--ink); }
.select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select > i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--ink-3); pointer-events: none; transition: transform 0.3s var(--ease), color 0.25s var(--ease); }
/* JS-enhanced select: the native one stays in the form, the listbox is what people see (iOS ignores option styling) */
.select.is-custom select { display: none; }
.select .select__btn { display: block; text-align: left; cursor: pointer; padding-right: 40px; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) { .field .select__btn:hover { background: var(--bg-3); } }
.select__value { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.select.is-open > i { transform: translateY(-50%) rotate(180deg); color: var(--blue); }
.select__list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 48px -18px rgba(11, 13, 16, 0.3), 0 2px 8px -2px rgba(11, 13, 16, 0.08); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: 50% 0; transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0s linear 0.14s; }
.select.is-up .select__list { top: auto; bottom: calc(100% + 8px); transform: translateY(6px) scale(0.98); transform-origin: 50% 100%; }
.select.is-open .select__list { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease-out, transform 0.3s var(--ease), visibility 0s; }
.select__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 0.9375rem; line-height: 1.35; color: var(--ink); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.select__opt--empty { margin-bottom: 7px; }
.select__opt--empty::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -4px; height: 1px; background: var(--line); }
.select__opt.is-active { background: var(--bg-2); }
.select__opt[aria-selected="true"] { color: var(--blue); font-weight: 500; }
.select__opt i { flex: 0 0 auto; font-size: 0.75rem; color: var(--blue); opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease-out, transform 0.3s var(--ease); }
.select__opt[aria-selected="true"] i { opacity: 1; transform: none; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.form__note { font-size: 0.8125rem; color: var(--ink-3); }
.form__foot--wide .btn { width: 100%; justify-content: center; }
.form__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-2); }
.form.is-sending .form__more .btn { opacity: 1; pointer-events: auto; }
.form__status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-m); font-size: 0.9375rem; font-weight: 500; background: var(--bg-2); }
.form__status[hidden] { display: none; }
.form__status.is-ok { background: var(--blue-tint); color: var(--blue-2); }
.form__status.is-error { background: #fff1f1; color: #b42020; }
.form__status i { font-size: 0.9em; }
.form.is-sending .btn { opacity: 0.6; pointer-events: none; }
.form.is-sending .btn.is-busy { opacity: 1; }
.btn.is-busy { justify-content: center; cursor: progress; }
.btn__spin { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
.form__done { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 32px 0; }
.form__done i { width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.form__done h3 { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.form__done p { color: var(--ink-2); max-width: 36ch; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--white); }
.foot__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) 40px; display: grid; gap: 28px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); }
/* tablets: the brand takes its own row, the three link columns get the width (the phone number and street stay on one line) */
@media (max-width: 1100px) and (min-width: 821px) {
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; }
  .foot__about { margin-top: 0; max-width: 60ch; }
}
.reach__main .reach__txt { white-space: nowrap; }
.foot__logo { width: 92px; height: auto; }
.foot__about { margin-top: 18px; max-width: 34ch; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.foot__contact { display: flex; flex-direction: column; align-items: flex-start; }
.foot__iso { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
/* the hairline sits halfway: the row's 28 px gap before it, 20 px + the 8 px icon gap after it */
.foot__iso::before { content: ""; width: 1px; height: 16px; margin-right: 20px; background: var(--line-2); }
/* below this width the certificate wraps onto its own line, where a divider would hang loose */
@media (max-width: 680px) { .foot__iso::before { display: none; } }
.foot__col h2 { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); margin-bottom: 14px; }
.foot__col ul { display: grid; gap: 8px; font-size: 0.9375rem; font-weight: 500; }
.foot__col a { transition: color 0.25s var(--ease); }
.foot__col a:hover { color: var(--blue); }
.foot__col i { color: var(--blue); width: 18px; font-size: 0.85em; }
/* footer contacts: three open rows, no box: an outlined disc, what it is and the value (the phone larger);
   on hover the disc fills blue, the value turns blue and the navigation arrow steps on */
.reach { display: grid; gap: 18px; }
.foot__col .reach a { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); }
.foot__col .reach__ico { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--blue); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.foot__col .reach__ico i { width: auto; color: inherit; font-size: 0.9rem; transform: translateY(0.11em); }
.foot__col .reach a:hover .reach__ico { background: var(--blue); border-color: var(--blue); color: var(--white); }
.reach__txt { display: grid; min-width: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; transition: color 0.3s var(--ease); }
.foot__col .reach a:hover .reach__txt { color: var(--blue); }
.reach__main .reach__txt { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.reach__txt small { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.foot__col .reach__txt small i { width: auto; color: var(--ink-3); font-size: 0.85em; transition: transform 0.4s var(--ease), color 0.3s var(--ease); }
.foot__col .reach a:hover .reach__txt small i { color: var(--blue); transform: translateX(3px); }
/* company IDs, a hairline, then the ISO certificate, on one centred line with the same spacing throughout */
.foot__legal { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 28px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 0.875rem; color: var(--ink-2); }
.foot__ids { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.foot__ids > div { display: flex; gap: 8px; }
.foot__ids dt { color: var(--ink-3); }
.foot__copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; font-size: 0.8125rem; color: var(--ink-3); text-align: center; }
.foot__made { display: inline-flex; align-items: center; gap: 6px; }
.foot__made a { font-weight: 500; color: var(--ink-2); transition: color 0.25s var(--ease); }
.foot__made a:hover { color: var(--blue); }
.foot__heart { color: var(--blue); font-size: 0.9em; animation: heartbeat 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat { 0%, 28%, 56%, 100% { transform: scale(1); } 14% { transform: scale(1.28); } 42% { transform: scale(1.16); } }
.callbar { display: none; }

/* ---------- motion start states (GSAP only) ---------- */
.has-gsap [data-reveal], .has-gsap [data-reveal-group] > * { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .nav__phone { display: none; }
}
@media (max-width: 1100px) {
  .show__thumb { width: 128px; }
}
@media (max-width: 1024px) {
  .hdr__in { gap: 10px; }
  .hdr__burger { display: inline-flex; }
  .hdr__cta { display: inline-flex; }
  /* the header's backdrop-filter makes it the containing block, so the panel is positioned from the header itself */
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; height: calc(100svh - var(--hdr-h)); height: calc(100dvh - var(--hdr-h)); background: var(--white); border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 8px var(--gutter) 24px; overflow: auto; }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; color: var(--ink); }
  /* the panel's rows mark the current page in blue instead of the underline */
  .nav__link::after { content: none; }
  .nav__item.is-active > .nav__link { color: var(--blue); }
  .nav__caret { font-size: 0.7em; }
  /* in the panel the submenu follows its toggle only (hover and focus stick after a tap); main.js slides its height open and shut */
  .nav__sub, .nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { position: static; display: block; width: auto; height: 0; overflow: hidden; visibility: hidden; border: 0; box-shadow: none; padding: 0 0 0 8px; transition: height 0.45s var(--ease), visibility 0s linear 0.45s; }
  .nav__item--has-sub.is-open .nav__sub { visibility: visible; transition: height 0.45s var(--ease), visibility 0s; }
  .nav__sub::before { content: none; }
  .nav__sublist { padding-top: 4px; }
  .nav__suball { margin-bottom: 8px; }
  .nav__item--has-sub:hover .nav__caret { transform: none; }
  .nav__item--has-sub.is-open .nav__caret { transform: rotate(180deg); }
  .nav__sublist a { padding: 10px 8px; font-size: 1rem; }
  .nav__extra { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 0; }
  .nav__phone { display: inline-flex; justify-content: center; font-size: 1.0625rem; background: var(--bg-2); padding: 14px; }
  .nav__cta { justify-content: center; padding: 14px; font-size: 1.0625rem; }
  .nav__cta .nav__ctaicon { display: inline-block; color: var(--yellow); }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 960px) {
  .section__head, .types__grid, .feature, .contact, .about, .hero__grid { grid-template-columns: 1fr; }
  .hero__grid { gap: 40px; }
  .hero__stack { aspect-ratio: 4 / 3; }
  .hero__card--main { inset: 0; }
  .hero__card--small { display: none; }
  .types__media { display: none; }
  .type__thumb { display: block; grid-column: 2 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); margin-top: 14px; }
  .type__link { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .about { gap: 40px; }
  .about__visual { aspect-ratio: 4 / 3; }
  .about__photo--a { inset: 0; }
  .about__photo--b { display: none; }
  .float--c { top: 16px; right: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .show__stage { aspect-ratio: 4 / 3; }
  .show__bar { grid-template-columns: 1fr auto; }
  .show__caption { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 820px) {
  :root { --hdr-h: 64px; }
  .hdr__burger-label { display: none; }
  .hdr__burger { padding: 11px 12px; }
  .hero { padding-top: 32px; }
  .hero__actions .btn--primary { width: 100%; justify-content: center; }
  .equip { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .team__list { grid-template-columns: 1fr 1fr; }
  .form__foot .btn { width: 100%; justify-content: center; }
  .foot--bar .foot__in { padding-bottom: 104px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .callbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; padding: 6px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow); }
  .callbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 14px; border-radius: var(--r-pill); font-weight: 500; font-size: 0.9375rem; white-space: nowrap; }
  .callbar__call { background: var(--bg-2); color: var(--ink); }
  .callbar__call i { color: var(--blue); }
  .callbar__cta { background: var(--blue); color: var(--white); }
  .callbar__cta i { color: var(--yellow); }
}
@media (max-width: 480px) {
  .hero__rule { display: none; }
  .hero__since { flex-basis: 100%; }
  .foot__copy { flex-direction: column; gap: 6px; }
  .foot__grid { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .team__list { grid-template-columns: 1fr; }
  .show__thumb { width: 108px; }
  .marquee__item { width: 132px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .foot__heart { animation: none; }
  .marquee__track { animation: none; }
  .btn, .btn i, .type__link, .type__name, .type__go, .show__thumb, .show__thumb img, .nav__caret, .types__rail i, .pill { transition: none; }
  .has-gsap .mark svg { clip-path: none; }
  .has-gsap .flow__line { clip-path: none; }
  .select__list, .select.is-up .select__list { transform: none; }
}

/* ---------- why list (on blue) ---------- */
.why { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.why li { display: grid; grid-template-columns: 12px 1fr; gap: 2px 14px; align-items: start; }
.why li::before { content: ""; grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); margin-top: 0.45em; }
.why b, .why span { grid-column: 2; }
.why b { display: block; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.why span { display: block; font-size: 0.9375rem; color: var(--blue-text); max-width: 46ch; }

/* ---------- steps: five numbered stops on a drawn line (on blue) ---------- */
.steps { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--blue-line); }
.steps__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: 8px; }
.steps__line { position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / calc(100% - 32px) 100%; border-radius: 1px; pointer-events: none; }
.steps__line i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.125rem; line-height: 1; color: var(--yellow); }
.has-gsap .steps__line { clip-path: inset(-14px 100% -14px 0); will-change: clip-path; }
.step { position: relative; padding-top: 64px; }
.step__num { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--blue-deep); }
.step__num::before, .step__num::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--yellow); opacity: 0; pointer-events: none; }
.has-gsap .step__num { background: var(--blue-deep); color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow), 0 0 0 8px var(--blue-deep); transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.has-gsap .step.is-hit .step__num { background: var(--yellow); color: var(--yellow-ink); animation: step-pop 0.6s var(--ease); }
.has-gsap .step.is-hit .step__num::before { animation: step-ring 1.2s cubic-bezier(0.2, 0.6, 0.3, 1); }
.has-gsap .step.is-hit .step__num::after { animation: step-ring 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) 0.3s; }
@keyframes step-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes step-ring { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(2); opacity: 0; } }
.step h3 { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; margin-bottom: 6px; }
.step p { color: var(--blue-text); font-size: 0.9375rem; max-width: 26ch; }

/* ---------- custom work: three linked photographs ---------- */
.custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.custom__item a { display: block; position: relative; }
.custom__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.custom__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.custom__item a:hover .custom__photo img { transform: scale(1.04); }
.custom__pill { position: absolute; left: 18px; top: 18px; background: var(--white); color: var(--ink); font-size: 0.8125rem; font-weight: 500; padding: 7px 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; }
.custom__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.custom__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink); }
.custom__title i { font-size: 0.8em; color: var(--blue); transition: transform 0.4s var(--ease); flex: 0 0 auto; }
.custom__item a:hover .custom__title i { transform: translateX(3px); }
.custom__action { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 56px); }
.custom__action--head { margin-top: 24px; }
.equip > div { display: flex; flex-direction: column; }
/* list heading with a short "show all" link on the right */
.equip__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.equip__head h3 { margin-bottom: 0; line-height: 1.25; }
.equip__more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color 0.25s var(--ease); }
.equip__go { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); font-size: 0.75rem; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease); }
/* Font Awesome glyphs sit ~0.11em high in their box; as a flex item the arrow needs the nudge to be optically centred */
.equip__go i { transform: translateY(0.11em); }
.equip__more:hover { color: var(--blue); }
.equip__more:hover .equip__go { background: var(--blue); border-color: var(--blue); color: var(--white); transform: translateX(2px); }
.about--home .about__copy .lead { margin-top: 0; }
.show__caption a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
.show__caption a:hover { color: var(--blue); text-decoration-color: var(--blue); }
@media (max-width: 960px) {
  .steps__list { grid-template-columns: 1fr; gap: 18px; padding-left: 64px; }
  /* the line runs on past the last step, so the truck at its end never hides behind the last disc */
  .steps__list { padding-bottom: 40px; }
  .steps__line { left: 21px; right: auto; top: 14px; bottom: 0; width: 2px; height: auto; }
  .steps__line { background-size: 100% calc(100% - 26px); }
  .steps__line i { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%); }
  .has-gsap .steps__line { clip-path: inset(0 -14px 100% -14px); }
  .step { padding-top: 0; }
  .step__num { left: -64px; top: -2px; }
  .step p { max-width: 44ch; }
  .custom { grid-template-columns: 1fr; }
}

/* ---------- page hero (subpages share the homepage hero grammar) ---------- */
.hero--page { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(56px, 7vw, 96px); }
/* the hero carries the gap itself, so a white section right after it must not add its own */
.hero--page + .section:not(.section--grey):not(.section--blue) { padding-top: 0; }
/* where the next section is white too, a hairline marks the change (O nás) */
.hero--page + .section--ruled::before { content: ""; display: block; width: calc(min(100%, var(--wrap)) - 2 * var(--gutter)); margin: 0 auto clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.hero--page .hero__title { font-size: clamp(2.4rem, 0.9rem + 3.6vw, 4.4rem); }
.hero--page .hero__title .mark svg { z-index: -1; }
.hero--text .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--text .hero__copy { max-width: 60rem; }
/* text-only hero with a living visual on the right (inc/parts/hero-fx.php) */
.hero--fx .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.hero__fx { --gx: 50%; --gy: 50%; position: relative; isolation: isolate; min-height: 360px; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.hfx__mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(11, 13, 16, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 13, 16, 0.07) 1px, transparent 1px); background-size: 28px 28px; background-position: center; -webkit-mask-image: radial-gradient(250px 210px at var(--gx) var(--gy), #000, transparent); mask-image: radial-gradient(250px 210px at var(--gx) var(--gy), #000, transparent); }
.hfx__glow { position: absolute; left: var(--gx); top: var(--gy); width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 204, 31, 0.38), rgba(255, 204, 31, 0.1) 42%, rgba(255, 204, 31, 0) 68%); animation: cta-breathe 6s ease-in-out infinite; }
.hero__fx::after { content: ""; position: absolute; right: 4%; top: 6%; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 63, 214, 0.16), rgba(31, 63, 214, 0) 70%); z-index: -1; }
.hfx__orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hfx__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed var(--line-2); }
.hfx__ring--a { width: 230px; height: 230px; margin: -115px 0 0 -115px; animation: hfx-spin 40s linear infinite; }
.hfx__ring--b { width: 350px; height: 350px; margin: -175px 0 0 -175px; border-color: rgba(31, 63, 214, 0.2); animation: hfx-spin 70s linear infinite reverse; }
.hfx__ring i { position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 204, 31, 0.22); }
.hfx__ring--b i { top: auto; bottom: -6px; background: var(--blue); box-shadow: 0 0 0 5px var(--blue-tint); }
.hfx__badge { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; margin: -62px 0 0 -62px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-size: 2.6rem; box-shadow: 0 24px 50px -18px rgba(242, 188, 0, 0.75), 0 0 0 10px rgba(255, 255, 255, 0.85); }
.hfx__badge::before, .hfx__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--yellow); opacity: 0; animation: step-ring 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.hfx__badge::after { animation-delay: 1.4s; }
/* only the truck "drives" */
.hfx__badge .fa-truck { animation: cta-bob 0.4s ease-in-out infinite alternate; }
/* homepage: the same living layer behind the photo stack, with wider orbits that show around the photographs */
.hero__stack { isolation: isolate; }
.hero__card { z-index: 1; }
/* badges on the photos (ISO 9001 on O nás) stay above them */
.hero__stack .float { z-index: 2; }
.hero__fx--stack { --gx: 24%; --gy: 82%; position: absolute; inset: -22% -14% -24% -14%; z-index: 0; min-height: 0; -webkit-mask-image: radial-gradient(farthest-side, #000 72%, transparent); mask-image: radial-gradient(farthest-side, #000 72%, transparent); }
.hero__fx--stack .hfx__orbit { left: 54%; top: 46%; }
.hero__fx--stack .hfx__ring--a { width: 470px; height: 470px; margin: -235px 0 0 -235px; }
.hero__fx--stack .hfx__ring--b { width: 580px; height: 580px; margin: -290px 0 0 -290px; }
.hero__fx--stack .hfx__glow { width: 520px; height: 520px; margin: -260px 0 0 -260px; background: radial-gradient(circle, rgba(255, 204, 31, 0.5), rgba(255, 204, 31, 0.14) 42%, rgba(255, 204, 31, 0) 68%); }
.hero__fx--stack::after { right: -4%; top: 2%; width: 360px; height: 360px; }
/* behind photographs the grid shows at rest as well, and the orbits are drawn a little stronger */
.hero__fx--stack .hfx__mesh { background-image: linear-gradient(rgba(11, 13, 16, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 13, 16, 0.09) 1px, transparent 1px); -webkit-mask-image: radial-gradient(farthest-side, #000 30%, transparent 85%), radial-gradient(260px 220px at var(--gx) var(--gy), #000, transparent); mask-image: radial-gradient(farthest-side, #000 30%, transparent 85%), radial-gradient(260px 220px at var(--gx) var(--gy), #000, transparent); }
.hero__fx--stack .hfx__ring--a { border: 1.5px dashed rgba(11, 13, 16, 0.26); }
.hero__fx--stack .hfx__ring--b { border: 1.5px dashed rgba(31, 63, 214, 0.42); }
.hero__fx--stack .hfx__ring i { width: 12px; height: 12px; margin-left: -6px; }
/* Prečo HuStra: the same layer behind the hall photographs, drawn for the deep-blue ground */
.about__visual { isolation: isolate; }
.about__photo { z-index: 1; }
.about__visual .float { z-index: 2; }
.hero__fx--onblue .hfx__orbit { left: 46%; top: 44%; }
.hero__fx--onblue .hfx__mesh { background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); }
.hero__fx--onblue .hfx__ring--a { border-color: rgba(255, 255, 255, 0.3); }
.hero__fx--onblue .hfx__ring--b { border-color: rgba(255, 204, 31, 0.45); }
.hero__fx--onblue .hfx__ring--b i { background: var(--white); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16); }
.hero__fx--onblue .hfx__glow { background: radial-gradient(circle, rgba(255, 204, 31, 0.34), rgba(255, 204, 31, 0.1) 42%, rgba(255, 204, 31, 0) 68%); }
.hero__fx--onblue::after { background: radial-gradient(circle, rgba(120, 146, 255, 0.4), rgba(120, 146, 255, 0) 70%); }
@keyframes hfx-spin { to { transform: rotate(360deg); } }
.hero__eyebrow--page { margin-bottom: 18px; }
.hero__num { font-variant-numeric: tabular-nums; color: var(--ink-3); margin-left: 4px; }
.hero--page .hero__stack { aspect-ratio: 5 / 4; }
.hero--page .hero__card img { width: 100%; height: 100%; object-fit: cover; }
.hero--page .hero__card picture { display: block; width: 100%; height: 100%; }
.float--hero { left: 20px; top: 20px; }
.crumbs { margin-bottom: 20px; font-size: 0.875rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--ink-2); transition: color 0.25s var(--ease); }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* two-column split: head on the left, content list on the right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.split__head .lead { margin-top: 22px; }
.split--sticky .split__head { position: sticky; top: calc(var(--hdr-h) + 24px); }
.split--sticky .split__head.is-pinned { position: relative; top: auto; }
.split__photo { margin-top: clamp(24px, 3vw, 40px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }
.section--tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }

/* numbered variant rows */
.vars { border-top: 1px solid var(--line-2); }
.var { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.var__num { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 9px; margin-top: 0.1em; border-radius: var(--r-pill); background: var(--white); font-weight: 600; font-size: 0.9375rem; color: var(--ink-3); letter-spacing: 0.02em; justify-self: start; }
.var h3 { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; }
.var p { margin-top: 6px; color: var(--ink-2); max-width: 56ch; }

/* definition rows (construction, specification) */
.specs { border-top: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.specs__row dt { font-weight: 600; letter-spacing: -0.01em; }
.specs__row dd { color: var(--ink-2); }
.specs--table .specs__row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.specs--table dd { font-weight: 600; color: var(--ink); font-size: 1.25rem; letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.checks--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.figures--stack { grid-template-columns: 1fr; margin-top: clamp(24px, 3vw, 40px); }

/* family cards (nadstavby overview) */
/* ---------- product types: a grid of equal cards; name, text and footer sit on the same lines whatever their length ---------- */
.ptypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ptype__link { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease); }
.ptype__link:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.ptype__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.ptype__photo picture { display: block; height: 100%; }
.ptype__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), opacity 0.6s var(--ease); }
.ptype__link:hover .ptype__photo img { transform: scale(1.04); }
/* on hover another realisation of the type fades in; main.js loads it on the first hover */
.ptype__alt { position: absolute; inset: 0; opacity: 0; }
.ptype__link:hover .ptype__alt.is-ready { opacity: 1; }
.ptype__count { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--white); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ptype__count i { color: var(--blue); }
.ptype__body { display: flex; flex-direction: column; min-width: 0; padding: 10px 22px 20px; }
.ptype__kicker { display: none; }
/* the name has room for two lines and sits on the lower one, so every card's text starts at the same height */
.ptype__name { display: flex; align-items: flex-end; min-height: 2.3em; font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }
.ptype__name span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ptype__short { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 4.65em; margin: 10px 0 18px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ptype__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.ptype__vars { flex: 1 1 auto; display: grid; min-width: 0; min-height: 2.75em; align-content: center; line-height: 1.375; }
.ptype__vars small { font-size: 0.8125rem; color: var(--ink-3); }
.ptype__vars span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.875rem; font-weight: 500; }
.ptype__go { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); font-size: 0.85rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
/* Font Awesome glyphs sit ~0.11em high in their box; as a flex item the arrow needs the nudge to be optically centred */
.ptype__go i { transform: translateY(0.11em); }
.ptype__link:hover .ptype__go { background: var(--blue); border-color: var(--blue); color: var(--white); transform: translateX(3px); }
@media (max-width: 1100px) {
  .ptypes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: a compact row per type (photo, count, name, variants), every row the same height */
@media (max-width: 640px) {
  .ptypes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ptype__link { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; gap: 14px; padding: 10px 14px 10px 10px; border-radius: var(--r-l); }
  .ptype__photo { aspect-ratio: auto; height: 96px; border-radius: 10px; }
  .ptype__count, .ptype__short, .ptype__vars span { display: none; }
  .ptype__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 12px; padding: 0; }
  .ptype__kicker { display: block; grid-column: 1; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .ptype__name { grid-column: 1; min-height: 0; margin: 2px 0 3px; font-size: 1.0625rem; line-height: 1.2; }
  .ptype__foot { display: contents; }
  .ptype__vars { grid-column: 1; min-height: 0; }
  .ptype__go { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 32px; height: 32px; font-size: 0.75rem; }
}

/* realizácie cards */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.rcard__link { display: block; }
.rcard__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); background: var(--bg-2); box-shadow: var(--shadow-sm); }
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.rcard__link:hover .rcard__photo img { transform: scale(1.04); }
.rcard__count { position: absolute; right: 12px; top: 12px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 0.8125rem; font-weight: 500; padding: 5px 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; }
.rcard__body { display: grid; gap: 4px; padding: 14px 4px 0; }
.rcard__type { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; }
.rcard__type::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.rcard__title { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.3; transition: color 0.3s var(--ease); }
.rcard__link:hover .rcard__title { color: var(--blue); }
.rcard__vehicle { font-size: 0.875rem; color: var(--ink-2); }
.rcard__vehicle i { color: var(--ink-3); font-size: 0.85em; margin-right: 2px; }
.rcard__foot { display: contents; }
.rcard__vehicle:empty, .rcard__more, .rcard__go { display: none; }
/* boxed cards (Referencie): a white box with the type, a two-line title and the footer always on the same lines */
.rgrid--boxed .rcard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease); }
.rgrid--boxed .rcard__link:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.rgrid--boxed .rcard__photo { border-radius: 0; box-shadow: none; }
.rgrid--boxed .rcard__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; }
.rgrid--boxed .rcard__type { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rgrid--boxed .rcard__type::before { display: inline-block; margin: 0 8px 1px 0; vertical-align: middle; }
.rgrid--boxed .rcard__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.6em; font-size: 1.1875rem; letter-spacing: -0.015em; }
.rgrid--boxed .rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.rgrid--boxed .rcard__vehicle { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* without a known vehicle the footer still says something */
.rgrid--boxed .rcard__vehicle:empty { display: none; }
.rgrid--boxed .rcard__vehicle:empty + .rcard__more { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); transition: color 0.3s var(--ease); }
.rgrid--boxed .rcard__link:hover .rcard__more { color: var(--ink); }
.rgrid--boxed .rcard__go { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: 0.8rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease); }
/* Font Awesome glyphs sit ~0.11em high in their box; as a flex item the arrow needs the nudge to be optically centred */
.rgrid--boxed .rcard__go i { transform: translateY(0.11em); }
.rgrid--boxed .rcard__link:hover .rcard__go { background: var(--ink); color: var(--white); transform: translateX(2px); }

/* photo mosaic with lightbox */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.mosaic li:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic__item { display: block; height: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); background: var(--bg-2); box-shadow: var(--shadow-sm); cursor: zoom-in; }
.mosaic li:first-child .mosaic__item { aspect-ratio: auto; }
.mosaic__item picture, .mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
.mosaic__item:hover img { transform: scale(1.04); }

/* PRI-KONT uses */
.uses { display: grid; gap: clamp(32px, 4vw, 56px); }
.use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.use:nth-child(even) .use__photo { order: 2; }
.use__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow); }
.use__photo img { width: 100%; height: 100%; object-fit: cover; }
.use__num { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--yellow); color: var(--yellow-ink); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; }
.use__body h3 { margin-top: 14px; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; }
.use__body > p { margin-top: 12px; color: var(--ink-2); max-width: 48ch; }
.use__specs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.use__specs div { background: var(--white); border-radius: var(--r-m); padding: 10px 14px; }
.use__specs dt { font-size: 0.8125rem; color: var(--ink-3); }
.use__specs dd { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.swatches li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }
.swatches i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }
.swatches b { font-weight: 500; color: var(--ink); }

/* FAQ */
/* FAQ in a grey panel: the heading on the left, each question a white card on the right */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: var(--bg-2); }
.faq__list { display: grid; gap: 10px; }
.faq__item { border: 1px solid transparent; border-radius: var(--r-l); background: var(--white); transition: border-color 0.3s var(--ease); }
.faq__item:hover, .faq__item[open] { border-color: var(--line); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 22px; cursor: pointer; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; transition: color 0.3s var(--ease); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blue); }
.faq__item summary i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--ink); transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.faq__panel { overflow: hidden; }
.faq__panel p { padding: 0 66px 22px 22px; color: var(--ink-2); max-width: 66ch; }

/* CTA band (blue) */
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.cta__copy { padding-right: clamp(32px, 5vw, 96px); }
.cta__copy .lead { margin-top: 22px; }
/* right column: a vertical divider, the two buttons stacked */
.cta__side { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 320px; padding-left: clamp(32px, 5vw, 96px); border-left: 1px solid var(--blue-line); }
.cta__side .btn { justify-content: center; padding: 17px 26px; font-size: 1.0625rem; }
.cta__side .btn--yellow { position: relative; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(255, 204, 31, 0.6); }
.cta__side .btn--yellow::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); transition: left 0.8s var(--ease); pointer-events: none; }
.cta__side .btn--yellow:hover::after { left: 130%; }
.cta__side .btn--ghost { background: rgba(255, 255, 255, 0.04); }
/* ambient layer: blueprint grid around the pointer (or the buttons) and a breathing yellow glow */
.cta__fx { --gx: 60%; --gy: 50%; position: absolute; top: -72px; bottom: -72px; left: 1px; right: -40px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(farthest-side, #000 45%, transparent); mask-image: radial-gradient(farthest-side, #000 45%, transparent); }
.cta__mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 28px 28px; background-position: center; -webkit-mask-image: radial-gradient(260px 210px at var(--gx) var(--gy), #000, transparent); mask-image: radial-gradient(260px 210px at var(--gx) var(--gy), #000, transparent); }
.cta__glow { position: absolute; left: var(--gx); top: var(--gy); width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 204, 31, 0.26), rgba(255, 204, 31, 0.08) 40%, rgba(255, 204, 31, 0) 68%); animation: cta-breathe 6s ease-in-out infinite; }
.cta__fx::after { content: ""; position: absolute; right: -40px; top: 0; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(70, 98, 255, 0.5), rgba(70, 98, 255, 0) 70%); }
@keyframes cta-breathe { 50% { transform: scale(1.18); opacity: 0.7; } }
/* the homepage's truck motif: a dashed road drawn in, then running under the truck */
.cta__route { position: relative; display: block; height: 20px; margin-bottom: 10px; }
.cta__route::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 204, 31, 0.18); }
.cta__road { position: absolute; left: 0; right: 30px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--yellow) 0 8px, transparent 8px 14px); }
.cta__route i { position: absolute; right: 0; top: 50%; margin-top: -0.5em; font-size: 1.125rem; line-height: 1; color: var(--yellow); }
.cta__side.is-driving .cta__road { animation: cta-road 0.7s linear infinite; }
.cta__side.is-driving .cta__route i { animation: cta-bob 0.35s ease-in-out infinite alternate; }
@keyframes cta-road { to { background-position: -14px 0; } }
@keyframes cta-bob { to { transform: translateY(-1.5px); } }

/* previous / next family */
/* Font Awesome glyphs sit ~0.11em high in their box; as a flex item the icon needs the nudge to be optically centred */

/* lightbox */
.lb { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(11, 13, 16, 0.94); color: var(--white); display: none; grid-template-rows: 1fr auto; overflow: hidden; }
.lb[open] { display: grid; }
.lb::backdrop { background: transparent; }
.lb__stage { display: flex; align-items: center; justify-content: center; padding: clamp(56px, 6vw, 72px) clamp(16px, 5vw, 80px) 12px; min-height: 0; touch-action: pan-y; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); user-select: none; }
.lb__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 8px clamp(16px, 5vw, 80px) clamp(20px, 3vw, 32px); }
.lb__counter { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lb__counter small { font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-left: 6px; letter-spacing: 0; }
.lb__caption { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); }
.lb__nav { display: flex; gap: 8px; }
.lb__btn, .lb__close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease); }
.lb__btn:hover, .lb__close:hover { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.lb__btn:active { transform: scale(0.94); }
.lb__close { position: absolute; right: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 24px); }
.lb :focus-visible { outline-color: var(--yellow); }

@media (max-width: 960px) {
  .split, .faq, .cta__grid { grid-template-columns: 1fr; }
  .cta__copy { padding-right: 0; }
  .cta__side { min-width: 0; margin-top: 32px; padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--blue-line); }
  .cta__fx { top: 1px; bottom: -48px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); }
  .split--sticky .split__head { position: static; }
  .split__photo { display: none; }
  .use, .use:nth-child(even) .use__photo { grid-template-columns: 1fr; order: 0; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic li:first-child { grid-column: span 2; grid-row: span 1; }
  .mosaic li:first-child .mosaic__item { aspect-ratio: 16 / 9; }
  .checks--cols { grid-template-columns: 1fr; }
  .hero--page .hero__stack { aspect-ratio: 4 / 3; }
  .hero--fx .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__fx { display: none; }
  /* homepage hero on phones and tablets: the photo steps in from the edges so the living layer has room around it
     (explicit height, not aspect-ratio: WebKit collapses an aspect-ratio box whose children are all absolute) */
  .hero:not(.hero--page) .hero__stack { --w: calc(100vw - 2 * var(--gutter)); aspect-ratio: auto; height: calc(var(--w) * 0.86); }
  .hero:not(.hero--page) .hero__card--main { inset: 10% 7% 12% 7%; }
  .hero .hero__fx--stack { --gx: 20%; --gy: 86%; display: block; inset: -4% -6% -6% -6%; -webkit-mask-image: radial-gradient(farthest-side, #000 76%, transparent); mask-image: radial-gradient(farthest-side, #000 76%, transparent); }
  .hero .hero__fx--stack .hfx__orbit { left: 50%; top: 50%; }
  .hero .hero__fx--stack .hfx__ring--a { --d: calc(var(--w) * 0.84); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); }
  .hero .hero__fx--stack .hfx__ring--b { --d: calc(var(--w) * 1.02); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); }
}
@media (max-width: 640px) {
  .rgrid { grid-template-columns: 1fr; }
  .lb__bar { grid-template-columns: auto 1fr; }
  .lb__caption { grid-column: 1 / -1; order: 3; }
  .lb__nav { justify-self: end; }
}

/* ---------- utilities ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.meta li { display: grid; gap: 2px; font-weight: 500; }
.meta small { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.meta a { color: var(--blue); }
.mosaic--one { grid-template-columns: 1fr; }
.mosaic--one li:first-child { grid-column: auto; grid-row: auto; }
.mosaic--one .mosaic__item { aspect-ratio: 4 / 3; max-height: 70vh; }

/* ---------- realizácie: filter sidebar, results with "load more", bottom sheet on phones ---------- */
.works { scroll-margin-top: calc(var(--hdr-h) + 16px); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 3vw, 48px); align-items: start; }
.works__side { align-self: stretch; }
.works__panel { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: 18px; max-height: calc(100vh - var(--hdr-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 16px; background: var(--white); border-radius: var(--r-xl); }
/* ScrollSmoother transforms the page, so sticky can't work there; main.js pins the panel instead */
.works--pin .works__panel { position: relative; top: auto; }
.works__body { display: grid; gap: 18px; }
.works__sheethead, .works__foot { display: none; }
html:not(.has-js) .works__foot { display: block; }
html:not(.has-js) .works__foot .btn { width: 100%; justify-content: center; }

.works__search { position: relative; display: block; }
.works__search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 0.875rem; color: var(--ink-3); pointer-events: none; }
.works__search input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg-2); border: 1px solid transparent; border-radius: var(--r-m); padding: 12px 42px 12px 38px; outline: 0; -webkit-appearance: none; appearance: none; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.works__search input::placeholder { color: var(--ink-3); }
.works__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.works__search input:hover { background: var(--bg-3); }
.works__search input:focus { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.works__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-3); color: var(--ink-2); font-size: 0.75rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.works__clear:hover { background: var(--ink); color: var(--white); }

.works__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.works__legend { padding: 0 0 0 4px; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
.works__types { position: relative; display: grid; gap: 2px; }
.works__ind { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 0; border-radius: var(--r-m); background: var(--ink); opacity: 0; pointer-events: none; }
.works--ind .works__ind { opacity: 1; }
.works__type, .works__chip { position: relative; display: flex; align-items: center; cursor: pointer; font-weight: 500; color: var(--ink-2); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: color 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease); }
/* the real inputs stay focusable and keep native keyboard behaviour; the label is what people see */
.works__type input, .works__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.works__type:has(input:focus-visible), .works__chip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.works__type { z-index: 1; gap: 10px; padding: 7px 8px 7px 12px; border-radius: var(--r-m); font-size: 0.9375rem; line-height: 1.35; }
.works__type span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* a long type list in two columns keeps the panel within the screen */
.works__types--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 4px; }
.works__types--two .works__type { gap: 6px; padding: 7px 6px 7px 10px; font-size: 0.875rem; }
.works__types--two .works__type b { min-width: 20px; padding: 2px 5px; }
.works__type b, .works__chip b { flex: 0 0 auto; min-width: 24px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-3); font-size: 0.75rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.works__type.is-on, .works__type.is-on:hover { background: var(--ink); color: var(--white); }
.works--ind .works__type.is-on, .works--ind .works__type.is-on:hover { background: transparent; }
.works__type.is-on b, .works__chip.is-on b { background: var(--yellow); color: var(--yellow-ink); }
.works__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.works__chip { gap: 6px; padding: 4px 5px 4px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.8125rem; line-height: 1.35; }
.works__chip b { min-width: 0; padding: 1px 6px; }
.works__chip.is-on, .works__chip.is-on:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.works__type.is-empty, .works__chip.is-empty { opacity: 0.4; pointer-events: none; }
@media (hover: hover) {
  .works__type:hover { background: var(--bg-2); color: var(--ink); }
  .works__chip:hover { border-color: var(--ink); color: var(--ink); }
}

.works__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; min-height: 40px; margin-bottom: 20px; }
.works__open { display: none; }
.works__badge { min-width: 20px; padding: 2px 6px; border-radius: var(--r-pill); background: var(--yellow); color: var(--yellow-ink); font-size: 0.75rem; font-weight: 600; text-align: center; }
.works__status { font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; }
.works__status b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.works__applied { order: -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.works__applied:empty { display: none; }
.works__pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color 0.25s var(--ease); -webkit-tap-highlight-color: transparent; }
.works__pill i { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); font-size: 0.625rem; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.works__pill:hover { border-color: var(--ink); }
.works__pill:hover i { background: var(--ink); color: var(--white); }
.works__pill--clear { padding: 5px 8px; border-color: transparent; background: transparent; color: var(--blue); }
.works__pill--clear:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; }

.rgrid--works { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.rgrid--works .rcard__link { height: 100%; padding: 8px 8px 16px; border-radius: var(--r-l); background: var(--white); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.rgrid--works .rcard__photo { border-radius: 11px; box-shadow: none; }
.rgrid--works .rcard__body { padding: 12px 8px 0; }
@media (hover: hover) { .rgrid--works .rcard__link:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.bgrid.bgrid--works { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.bcard--skel .bcard__link { border-color: var(--line); }
.bcard--skel .skel { background: var(--bg-2); }
.bcard--skel .bcard__photo { aspect-ratio: 4 / 3; }
.bcard--skel .bcard__body { gap: 0; }
.skel--btitle { width: 92%; height: 17px; margin: 3.4px 0; }
.skel--type + .skel--btitle { margin-top: 11.4px; }
.skel--chips { width: 68%; height: 28px; margin-top: 8px; border-radius: var(--r-pill); }
.bcard--skel .bcard__foot { margin-top: 8px; }
.skel--price { width: 46%; height: 22px; margin: 6px 0; }
.works__range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--ink-3); }
.works__range input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg-2); border: 1px solid transparent; border-radius: var(--r-m); padding: 10px 12px; outline: 0; -moz-appearance: textfield; appearance: textfield; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.works__range input::-webkit-outer-spin-button, .works__range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.works__range input::placeholder { color: var(--ink-3); }
.works__range input:hover { background: var(--bg-3); }
.works__range input:focus { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.works__chip--available > span::before, .works__chip--reserved > span::before, .works__chip--sold > span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: #2e8b3d; vertical-align: middle; }
.works__chip--reserved > span::before { background: var(--yellow); }
.works__chip--sold > span::before { background: var(--ink-3); }
.field.works__sort { display: flex; align-items: center; gap: 10px; }
.works__sort > span:first-child { font-weight: 400; color: var(--ink-3); }
/* a hairline between the count and the sort */
.works__status + .works__sort::before { content: ""; align-self: center; width: 1px; height: 22px; margin-right: 4px; background: var(--line-2); }
.works__sort .select { min-width: 160px; }
.works__sort .select select, .works__sort .select .select__btn { padding: 8px 36px 8px 14px; font-size: 0.875rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); }
.works__sort .select > i { right: 14px; }
.works__sort .select__list { left: auto; right: 0; min-width: 200px; }
/* skeleton cards hold the place of the cards being fetched */
.rcard--skel .rcard__link { pointer-events: none; }
.skel { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--bg-2); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { to { transform: translateX(100%); } }
.rcard--skel .rcard__photo { border-radius: 11px; }
/* bars sit in line boxes as tall as the card's text lines, so a skeleton is as tall as the card replacing it */
.rcard--skel .rcard__body { gap: 4px; }
.skel--type { width: 42%; height: 10px; margin: 5px 0; }
.skel--title { width: 90%; height: 15px; margin: 3.5px 0; }
.skel--short { width: 62%; }
.skel--meta { width: 48%; height: 11px; margin: 5.5px 0; }
/* article skeleton (on the grey list background): meta, two title lines, three excerpt lines */
.acard--skel .acard__photo { box-shadow: none; }
.acard--skel .skel { background: var(--bg-3); }
.acard--skel .acard__body { gap: 0; }
.skel--am { width: 46%; height: 10px; margin: 5px 0; }
.skel--at { width: 94%; height: 16px; margin: 3.7px 0; }
.skel--am + .skel--at { margin-top: 9.7px; }
.skel--ax { width: 100%; height: 11px; margin: 6px 0; }
.skel--at + .skel--ax { margin-top: 12px; }
.acard--skel .skel--short { width: 60%; }
.more[aria-busy="true"] .more__btn { pointer-events: none; color: var(--ink-3); }
.more__btn .fa-spinner { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.more__error { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 16px 20px; border-radius: var(--r-l); background: #fff1f1; color: #b42020; font-size: 0.9375rem; }
.more__error button { font: inherit; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 14px; cursor: pointer; }

.works__empty { display: grid; justify-items: center; gap: 16px; padding: clamp(40px, 6vw, 72px) 24px; border-radius: var(--r-xl); background: var(--white); text-align: center; color: var(--ink-2); }
.works__empty b { color: var(--ink); font-weight: 600; }
.works__empty small { font-size: 0.875rem; }
.works__empty small a { font-weight: 500; color: var(--blue); }
.works__emptyicon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-2); color: var(--ink-3); font-size: 1.1rem; }
.more { display: grid; justify-items: center; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.more__progress { display: grid; justify-items: center; gap: 10px; font-size: 0.875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.more__rail { width: 200px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.more__rail i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width 0.6s var(--ease); }

/* phones: the same form slides up in a <dialog> (top layer, so the transformed page can't trap it) */
.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh; max-height: 88dvh; margin: 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: var(--white); color: var(--ink); box-shadow: 0 -24px 60px -20px rgba(11, 13, 16, 0.35); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(11, 13, 16, 0.45); }
.sheet[open]::backdrop { animation: sheet-fade 0.3s ease-out; }
@keyframes sheet-fade { from { opacity: 0; } }
html.sheet-open { overflow: hidden; }
.sheet .works__panel { position: static; flex: 1 1 auto; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-radius: 0; }
.sheet .works__sheethead { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 12px 12px 20px; border-bottom: 1px solid var(--line); touch-action: none; cursor: grab; }
.sheet .works__sheethead::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-2); }
.works__sheettitle { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.works__close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sheet .works__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 20px 24px; align-content: start; }
.sheet .works__foot { display: block; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet .works__foot .btn { width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .works { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .has-js .works__side { display: none; }
  html:not(.has-js) .works__side { margin-bottom: 24px; }
  html:not(.has-js) .works__panel { position: static; max-height: none; }
  .has-js .works__open { display: inline-flex; }
  .works__bar { justify-content: space-between; }
  .works__applied { order: 3; flex-basis: 100%; }
  .field.works__sort { order: 4; flex-basis: 100%; }
  .works__status + .works__sort::before { display: none; }
  .works__sort .select { flex: 1 1 auto; }
  .more .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .rgrid--works { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rgrid--works .rcard__link { padding: 6px 6px 12px; border-radius: 14px; }
  .rgrid--works .rcard__photo { border-radius: 9px; }
  .rgrid--works .rcard__count { right: 8px; top: 8px; padding: 3px 8px; font-size: 0.75rem; }
  .rgrid--works .rcard__body { padding: 10px 4px 0; }
  .rgrid--works .rcard__title { font-size: 0.9375rem; }
  .rgrid--works .rcard__vehicle, .rcard--skel .skel--meta { display: none; }
}

/* ---------- inquiry wizard ---------- */
.wiz { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.wiz__side { position: sticky; top: calc(var(--hdr-h) + 24px); }
.wiz__steps { display: grid; gap: 4px; }
.wiz__stepitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-left: -12px; border-radius: var(--r-m); font-weight: 500; color: var(--ink-3); transition: color 0.3s var(--ease), background-color 0.3s var(--ease); }
.wiz__stepnum { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.wiz__stepitem.is-active { color: var(--ink); }
.wiz__stepitem.is-active .wiz__stepnum { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.wiz__stepitem.is-done { color: var(--ink-2); }
.wiz__stepitem.is-done .wiz__stepnum { background: var(--ink); border-color: var(--ink); color: var(--white); }
.wiz__rail { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin: 20px 0 24px; }
.wiz__rail i { display: block; height: 100%; width: 25%; background: var(--yellow); border-radius: 3px; transition: width 0.5s var(--ease); }
.wiz__help { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.6; }
.wiz__help a { color: var(--ink); font-weight: 500; }
.wiz__form { box-shadow: var(--shadow-sm); }
.wiz__step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 22px; }
.wiz__legend { display: contents; }
.wiz__legend + * { margin-top: 0; }
.wiz__legendnum { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-2); font-weight: 600; font-size: 0.8125rem; color: var(--ink-3); letter-spacing: 0.02em; justify-self: start; }
.wiz__legend h2 { font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.02em; margin-top: 10px; }
.wiz__legend p { color: var(--ink-2); margin-top: 4px; }
.has-js .wiz__step:not(.is-current) { display: none; }
.has-js .wiz__step + .wiz__step { padding-top: 0; }
.no-js .wiz__step + .wiz__step, html:not(.has-js) .wiz__step + .wiz__step { padding-top: 28px; margin-top: 8px; border-top: 1px solid var(--line); }
.wiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wiz__foot .form__note { flex: 1 1 auto; }
.wiz__foot [data-wiz-next], .wiz__foot [data-wiz-submit] { margin-left: auto; }
html:not(.has-js) [data-wiz-next], html:not(.has-js) [data-wiz-prev] { display: none; }
.wiz__summary { background: var(--bg-2); border-radius: var(--r-l); padding: 18px 20px; }
.wiz__summary h3 { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; }
.wiz__sumlist { display: grid; gap: 6px; font-size: 0.9375rem; }
.wiz__sumlist > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.wiz__sumlist dt { color: var(--ink-3); }
.wiz__sumlist dd { font-weight: 500; overflow-wrap: anywhere; }
.field__hint { font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.choice__item { position: relative; display: block; cursor: pointer; }
.choice__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__card { position: relative; display: grid; gap: 8px; padding: 8px 8px 12px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--white); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); height: 100%; }
.choice__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--bg-2); }
.choice__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--blue-tint); color: var(--blue); font-size: 1.6rem; }
.choice__name { font-weight: 500; font-size: 0.9rem; line-height: 1.25; padding: 0 4px; }
.choice__card > i { position: absolute; right: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-size: 0.6rem; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.choice__item:hover .choice__card { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.choice__item input:checked + .choice__card { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.choice__item input:checked + .choice__card > i { opacity: 1; transform: none; }
.choice__item input:focus-visible + .choice__card { outline: 2px solid var(--blue); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid transparent; font-weight: 500; font-size: 0.9375rem; color: var(--ink-2); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.chip:hover span { background: var(--bg-3); }
.chip input:checked + span { background: var(--ink); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.drop { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--r-m); background: var(--bg-2); cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.drop:hover, .drop.is-over { border-color: var(--blue); background: var(--blue-tint); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop i { color: var(--blue); font-size: 1.1rem; }
.drop span { font-size: 0.9375rem; color: var(--ink-2); }
.drop b { font-weight: 500; color: var(--ink); }
.drop__list { display: grid; gap: 6px; margin-top: 8px; }
.drop__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); font-size: 0.875rem; }
.drop__list li.is-bad { border-color: #e4b4b4; color: #b42020; }
.drop__list button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font: inherit; padding: 2px 6px; }
.drop__list button:hover { color: #b42020; }
/* what follows an inquiry: a grey panel (heading left, three steps joined by yellow connectors right), so the page doesn't end white on white */
.next { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: var(--bg-2); }
.next__help { margin-top: 18px; font-size: 0.9375rem; color: var(--ink-2); }
.next__help a { font-weight: 600; color: var(--ink); }
.after { --gap: clamp(16px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.after li { position: relative; display: grid; gap: 8px; align-content: start; }
/* a yellow connector from each disc to the next one, 8 px clear of both */
.after li:not(:last-child)::after { content: ""; position: absolute; left: 52px; right: calc(8px - var(--gap)); top: 21px; height: 2px; border-radius: 1px; background: var(--yellow); }
/* after the last step the line runs on to a check disc: the inquiry is done */
.after li:last-child::after { content: ""; position: absolute; left: 52px; right: 34px; top: 21px; height: 2px; border-radius: 1px; background: var(--yellow); }
.after__done { position: absolute; right: 0; top: 9px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-size: 0.7rem; }
.after__num { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; }
.after h3 { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; }
.after p { color: var(--ink-2); font-size: 0.9375rem; max-width: 36ch; }
.form__done h2 { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }

@media (max-width: 960px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz__side { position: static; display: grid; grid-template-columns: 1fr; }
  .wiz__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .wiz__stepitem { flex-direction: column; align-items: flex-start; gap: 6px; margin-left: 0; padding: 0; font-size: 0.8125rem; }
  .wiz__rail { margin: 14px 0 10px; }
  .wiz__help { display: none; }
  .next { grid-template-columns: minmax(0, 1fr); }
  /* stacked: the discs on the left, the line runs down between them */
  .after { --gap: 22px; grid-template-columns: minmax(0, 1fr); padding-left: 64px; }
  .after li:not(:last-child)::after { left: -43px; right: auto; top: 50px; bottom: calc(6px - var(--gap)); width: 2px; height: auto; }
  .after { padding-bottom: 42px; }
  .after li:last-child::after { left: -43px; right: auto; top: 50px; bottom: -8px; width: 2px; height: auto; }
  .after__done { left: -55px; right: auto; top: auto; bottom: -42px; }
  .after__num { position: absolute; left: -64px; top: -2px; margin: 0; }
  .meta { gap: 10px 24px; }
}
@media (max-width: 820px) {
  /* phones: the forward action first, then back, then the note, all full width */
  .wiz__foot { gap: 10px; }
  .wiz__foot .btn { width: 100%; justify-content: center; margin-left: 0; }
  .wiz__foot [data-wiz-next], .wiz__foot [data-wiz-submit] { order: 1; }
  .wiz__foot [data-wiz-prev] { order: 2; }
  .wiz__foot .form__note { order: 3; margin-top: 4px; }
}
.wiz__legend h2:focus { outline: none; }
@media (max-width: 640px) {
  .choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiz__sumlist > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- about page ---------- */
.copy--big { max-width: 62ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.copy--big p + p { margin-top: 1.1em; }
.copy__quote { font-weight: 600; color: var(--ink); font-size: 1.25rem; letter-spacing: -0.015em; padding-left: 20px; border-left: 3px solid var(--yellow); }
/* company figures (O nás): four quiet grey cards, an outlined icon top right, the figure with its unit and one line of text */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(56px, 7vw, 96px); }
.num { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-xl); background: var(--bg-2); }
.num__icon { align-self: flex-end; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: clamp(28px, 3vw, 40px); border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-2); font-size: 0.875rem; }
.num__icon i { transform: translateY(0.11em); }
.num b { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.num b small { font-size: max(0.32em, 0.9375rem); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.num__text { margin-top: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1100px) {
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .nums { grid-template-columns: minmax(0, 1fr); }
}
.mosaic--wide li:first-child { grid-column: span 2; grid-row: span 2; }
.cert { position: relative; justify-self: center; width: min(100%, 420px); }
.cert__scan { display: block; overflow: hidden; border-radius: var(--r-l); box-shadow: var(--shadow); background: var(--white); cursor: zoom-in; transform: rotate(-1.5deg); transition: transform 0.6s var(--ease); }
.cert:hover .cert__scan { transform: rotate(0deg) scale(1.02); }
.float--cert { right: -12px; bottom: 24px; }

/* ---------- references ---------- */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.logos--wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.logos__item { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.4s var(--ease); }
.logos__item img { max-width: 70%; max-height: 56%; width: auto; height: auto; mix-blend-mode: multiply; filter: grayscale(1); transition: filter 0.3s var(--ease); }
.logos__item span { position: absolute; left: 12px; bottom: 10px; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); opacity: 0; transition: opacity 0.3s var(--ease); }
.logos__item:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.logos__item:hover img { filter: none; }
.logos__item:hover span { opacity: 1; }
.logos__iso { margin-top: clamp(24px, 3vw, 40px); display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--ink-2); }
.logos__iso a { color: var(--blue); }

/* ---------- contact page ---------- */
/* contact cards: one per person, the department as a pill, phone and e-mail pinned to the bottom so cards line up */
/* three to a row, filled from the left */
.ccards { --cols: 3; --gap: clamp(16px, 2vw, 24px); display: flex; flex-wrap: wrap; gap: var(--gap); }
.ccards > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
/* person cards share the figure cards' look: soft grey, no border, outlined discs; on a grey section they turn white */
.ccard { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-xl); background: var(--bg-2); }
.section--grey .ccard { background: var(--white); }
.ccard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ccard__avatar { flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.02em; }
.ccard__avatar--icon { font-size: 1.1rem; color: var(--ink-2); }
.ccard__avatar--icon i { transform: translateY(0.11em); }
.ccard__dept { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.ccard__dept i { color: var(--ink-3); font-size: 0.85em; }
.ccard__who strong { display: block; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.25; }
.ccard__who small { display: block; margin-top: 3px; font-size: 0.9375rem; color: var(--ink-3); }
.ccard__links { display: grid; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.ccard__links a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.25s var(--ease); }
.ccard__links span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__links i { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.ccard__links a:hover { color: var(--blue); }
.ccard__links a:hover i { background: var(--blue); border-color: var(--blue); color: var(--white); }
.place { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.place__addr { margin-top: 22px; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); }
.place__addr strong { color: var(--ink); font-weight: 600; }
.quick--light a { color: var(--ink); }
.quick--light a:hover { background: var(--bg-2); }
.quick--light i { background: var(--bg-2); border-color: var(--line); color: var(--blue); }
.quick--light a:hover i { background: var(--blue); color: var(--white); }
.quick--light small { color: var(--ink-3); }
.place__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 24px; font-size: 0.9375rem; color: var(--ink-2); }
.place__legal > div { display: flex; gap: 8px; }
.place__legal dt { color: var(--ink-3); }
.place__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn.is-done { background: var(--yellow); color: var(--yellow-ink); }
.map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.85); }
.map__pill { position: absolute; left: 18px; bottom: 18px; background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: 500; padding: 9px 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); }
.map__pill i { color: var(--blue); }

/* ---------- bazár ---------- */
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.bcard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease); }
.bcard__link:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.bcard__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.bcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.bcard__link:hover .bcard__photo img { transform: scale(1.04); }
.bcard.is-sold .bcard__photo img { filter: grayscale(1); opacity: 0.8; }
.bcard__avail { position: absolute; left: 14px; top: 14px; font-size: 0.8125rem; font-weight: 500; padding: 6px 11px; border-radius: var(--r-pill); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.bcard__avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e8b3d; }
.bcard__avail--reserved::before { background: var(--yellow); }
.bcard__avail--sold::before { background: var(--ink-3); }
.demo { position: absolute; right: 14px; top: 14px; font-size: 0.75rem; font-weight: 500; padding: 5px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); letter-spacing: 0.01em; }
.demo--inline { position: static; margin-left: 10px; }
/* fixed layout: type on one line, title always two lines, one row of key figures, price pinned to the bottom */
.bcard__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px 18px; }
.bcard__type { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
.bcard__type::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.bcard__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.5em; font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.25; }
.bcard__params { display: flex; gap: 6px; overflow: hidden; }
.bcard__params span { flex: 0 0 auto; white-space: nowrap; font-size: 0.8125rem; padding: 4px 9px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-2); }
.bcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.bcard__go { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: 0.8rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease); }
.bcard__link:hover .bcard__go { background: var(--ink); color: var(--white); transform: translateX(2px); }
/* Font Awesome glyphs sit ~0.11em high in their box (inline text corrects it with vertical-align); as a flex item it needs the nudge to be optically centred */
.bcard__go i { transform: translateY(0.11em); }
.bcard__price { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 1.375rem; line-height: 34px; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.bcard__price small { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
/* in flow, not absolute: WebKit collapses an aspect-ratio box whose children are all absolutely positioned */
.bcard__nophoto { position: relative; isolation: isolate; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
.bcard__nophoto::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(11, 13, 16, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 13, 16, 0.06) 1px, transparent 1px); background-size: 24px 24px; background-position: center; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.bcard__nophoto i { width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }

/* ---------- bazár listing: the facts and the one action on the left, the gallery on the right ---------- */
.hero--listing { padding-bottom: clamp(40px, 4vw, 56px); }
/* the orbit spills into the hero's padding rather than making the short title hero taller */
.hero--listing .hero__fx { min-height: 0; margin: calc(-1 * clamp(28px, 4vw, 48px)) 0 calc(-1 * clamp(40px, 4vw, 56px)); }
.listing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.listing__info { container-type: inline-size; display: grid; gap: clamp(40px, 4.5vw, 56px); }
/* the gallery stays in view while the facts scroll; under ScrollSmoother it is pinned by ScrollTrigger instead (.is-pinned) */
.listing__media { position: sticky; top: calc(var(--hdr-h) + 24px); }
.listing__media.is-pinned { position: relative; top: auto; }

.deal { display: grid; gap: 18px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-xl); background: var(--bg-2); }
.deal__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.deal__state { position: static; background: var(--white); }
.deal__date { font-size: 0.875rem; color: var(--ink-3); }
.deal__price { margin-top: 4px; font-weight: 600; font-size: min(3rem, 10.5cqi); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.deal__price small { margin-left: 10px; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.deal.is-sold .deal__price { color: var(--ink-3); }
.deal__cta { width: 100%; justify-content: center; padding-top: 17px; padding-bottom: 17px; font-size: 1.0625rem; }

.facts__title { margin-bottom: clamp(18px, 2vw, 24px); }
.facts__figs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
/* a label that wraps keeps the numbers on one line */
.facts__figs > div { display: flex; flex-direction: column; justify-content: space-between; padding: 18px 16px 20px; border-left: 1px solid var(--line); }
.facts__figs > div:first-child { padding-left: 0; border-left: 0; }
.facts__figs dt { margin-bottom: 8px; font-size: 0.875rem; color: var(--ink-2); }
.facts__figs dd { font-weight: 600; font-size: min(1.875rem, 5.6cqi); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts__figs small { margin-left: 4px; font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.facts__rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.facts__rows dt { color: var(--ink-3); }
.facts__rows dd { font-weight: 500; }
.facts__sub { margin: 30px 0 14px; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.facts__kit { display: flex; flex-wrap: wrap; gap: 8px; }
.facts__kit li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: var(--r-pill); background: var(--bg-2); font-size: 0.9375rem; font-weight: 500; }
.facts__kit i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem; }
.facts__text { max-width: 60ch; color: var(--ink-2); }

/* gallery: a scroll-snap track (native swipe), the controls float on the photo, thumbnails below */
.gal { display: grid; gap: 12px; }
.gal__stage { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: var(--shadow); }
.gal__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; user-select: none; -webkit-user-select: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.gal__track.is-dragging .gal__link { cursor: grabbing; }
.gal__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gal__link { display: block; cursor: zoom-in; -webkit-user-drag: none; }
.gal__link picture { display: block; }
.gal__link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; -webkit-user-drag: none; }
.gal__slide--tall img { object-fit: contain; }
.gal__count { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--white); color: var(--ink-3); font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm); pointer-events: none; }
.gal__count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.gal__count span { color: var(--ink); margin-right: -4px; }
.gal__nav { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; }
.gal__btn { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.gal__btn:hover:not(:disabled) { background: var(--blue); color: var(--white); }
.gal__btn:active:not(:disabled) { transform: scale(0.94); }
.gal__btn:disabled { opacity: 0.5; cursor: default; }
.gal__zoom { position: absolute; right: 18px; top: 18px; }
/* six thumbnails across the width, more of them scroll */
.gal__thumbs { --per: 6; --gap: 10px; position: relative; display: flex; gap: var(--gap); overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: -4px -2px 0; }
.gal__thumbs::-webkit-scrollbar { display: none; }
.gal__thumbs li { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); }
.gal__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 0; border-radius: var(--r-m); background: var(--bg-2); cursor: pointer; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.3s var(--ease); }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.gal__thumb:hover img, .gal__thumb.is-active img { opacity: 1; }
.gal__thumb:hover img { transform: scale(1.05); }
.gal__thumb.is-active { box-shadow: 0 0 0 2px var(--yellow); }
.gal__empty { position: relative; aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); text-align: center; }
.gal__empty::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(11, 13, 16, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 13, 16, 0.06) 1px, transparent 1px); background-size: 28px 28px; background-position: center; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.gal__emptyicon { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--white); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: var(--shadow-sm); }
.gal__empty p { position: relative; max-width: 30ch; font-size: 0.9375rem; color: var(--ink-2); }
.gal__empty b { display: block; margin-bottom: 4px; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); }

/* the listing the inquiry is about, on the blue ground */
.vref { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; max-width: 30rem; margin-top: 28px; padding: 10px 16px 10px 10px; border: 1px solid var(--blue-line); border-radius: var(--r-l); background: rgba(255, 255, 255, 0.06); }
.vref__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--blue-deeper); color: var(--blue-text); display: flex; align-items: center; justify-content: center; }
.vref__photo img { width: 100%; height: 100%; object-fit: cover; }
.vref__body { min-width: 0; }
.vref__body > small { display: block; font-size: 0.8125rem; color: var(--blue-text); }
.vref__body b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 2px 0 4px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.vref__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.vref__price small { font-size: 0.8125rem; font-weight: 500; color: var(--blue-text); }

@media (max-width: 960px) {
  .listing { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .listing__media { position: static; order: -1; }
}
@media (max-width: 820px) {
  .callbar--deal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); }
  .callbar--deal.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; }
  .callbar__deal { min-width: 0; padding: 0 6px 0 14px; line-height: 1.25; }
  .callbar__deal b, .callbar__deal small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .callbar__deal b { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .callbar__deal small { font-size: 0.75rem; color: var(--ink-3); }
  .callbar--deal .callbar__cta { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .gal__stage { border-radius: var(--r-l); }
  .gal__count { left: 12px; bottom: 12px; padding: 7px 12px; }
  .gal__nav { right: 12px; bottom: 12px; }
  .gal__zoom { right: 12px; top: 12px; }
  .gal__btn { width: 40px; height: 40px; }
  .gal__thumbs { --per: 5; --gap: 8px; }
  .gal__thumb { border-radius: 10px; }
  .gal__empty { border-radius: var(--r-l); }
  .vref { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .facts__rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 640px) {
  .faq { padding: 22px 16px 16px; border-radius: var(--r-l); gap: 20px; }
  .faq__head { padding: 0 6px; }
  .faq__list { gap: 8px; }
  .faq__item { border-radius: var(--r-m); }
  .faq__item summary { padding: 16px 14px 16px 16px; font-size: 1.0625rem; line-height: 1.35; }
  .faq__panel p { padding: 0 16px 18px; }
}
.emptystate { display: grid; justify-items: center; text-align: center; gap: 12px; padding: clamp(40px, 6vw, 80px) 0; }
.emptystate i { width: 64px; height: 64px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 8px; }
.emptystate h3 { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.emptystate p { color: var(--ink-2); max-width: 44ch; }
.emptystate .btn { margin-top: 8px; }

/* ---------- články ---------- */
.alead__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(16px, 2vw, 24px); transition: box-shadow 0.5s var(--ease), border-color 0.4s var(--ease); }
.alead__link:hover { box-shadow: var(--shadow); border-color: transparent; }
.alead__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-l); background: var(--bg-2); }
.alead__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.alead__link:hover .alead__photo img { transform: scale(1.04); }
/* the text column is as tall as the photo, "Čítať článok" sits in its bottom right corner whatever the texts above */
.alead__body { display: flex; flex-direction: column; gap: 14px; }
.alead__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.alead__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; color: var(--ink-2); }
.alead__more { margin-top: auto; align-self: flex-end; padding-top: 8px; font-weight: 500; color: var(--blue); }
.alead__more i { font-size: 0.85em; margin-left: 4px; transition: transform 0.4s var(--ease); }
.alead__link:hover .alead__more i { transform: translateX(3px); }
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(16px, 2vw, 28px); }
.acard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.acard__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-l); background: var(--bg-2); box-shadow: var(--shadow-sm); }
.acard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.acard__link:hover .acard__photo img { transform: scale(1.04); }
.acard__body { display: grid; gap: 6px; padding: 16px 4px 0; align-content: start; }
.acard__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
/* every card is the same height: the title always takes 2 lines, the excerpt 3, longer texts end with "…" */
.acard__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.6em; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; transition: color 0.3s var(--ease); }
.acard__link:hover .acard__title { color: var(--blue); }
.acard__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 4.65em; line-height: 1.55; color: var(--ink-2); font-size: 0.9375rem; }
.hero--article { padding-bottom: clamp(32px, 4vw, 48px); }
/* the article's title and lead span the content width, like the cover photo under them */
.hero--article .hero__copy, .hero--article .hero__lead { max-width: none; }
.hero--article .hero__eyebrow--page a { color: var(--ink); font-weight: 500; }
.article__cover figure { overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow); aspect-ratio: 21 / 9; background: var(--bg-2); }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; }
.article__body h2 { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); letter-spacing: -0.02em; color: var(--ink); margin: 1.6em 0 0.5em; line-height: 1.15; }
.article__body h2 + p { margin-top: 0; }
.article__body .checks { margin: 1em 0; color: var(--ink); font-size: 1.0625rem; }
.article__side { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: 16px; }
.article__side.is-pinned { position: relative; top: auto; }
.article__box { background: var(--bg-2); border-radius: var(--r-l); padding: 20px; }
.article__box .eyebrow { margin-bottom: 12px; }
.share { display: flex; gap: 8px; }
.share__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.share__btn:hover, .share__btn.is-done { background: var(--blue); border-color: var(--blue); color: var(--white); }
.article__product { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.article__product img { width: 88px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.article__product strong { display: block; font-weight: 600; letter-spacing: -0.01em; }
.article__product small { display: block; font-size: 0.8125rem; color: var(--ink-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article__box--product .btn { width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .bgrid, .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccards { --cols: 2; }
  .place, .alead__link, .article__grid { grid-template-columns: 1fr; }
  .article__side { position: static; }
  .mosaic--wide li:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .bgrid, .agrid { grid-template-columns: 1fr; }
  .ccards { --cols: 1; }
  /* phones: initials beside the department and the name, so a card is a few lines tall */
  .ccard { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; }
  .ccard__top { display: contents; }
  .ccard__avatar { grid-column: 1; grid-row: 1 / 3; width: 48px; height: 48px; font-size: 1rem; }
  .ccard__dept { grid-column: 2; grid-row: 1; justify-self: start; padding: 3px 10px; font-size: 0.75rem; }
  .ccard__who { grid-column: 2; grid-row: 2; }
  .ccard__who strong { font-size: 1.125rem; }
  .ccard__who small { margin-top: 1px; font-size: 0.875rem; }
  .ccard__links { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; }
  .cert { width: 100%; }
}

/* ---------- 404: a large ghost 404, a dashed road the truck drives along up to the barrier at its end, the text centred under it ---------- */
.nf { padding-bottom: clamp(72px, 9vw, 128px); }
.nf__in { display: grid; justify-items: center; text-align: center; }
.nf__vis { position: relative; width: min(100%, 640px); height: clamp(200px, 26vw, 300px); margin-bottom: clamp(20px, 3vw, 36px); }
.nf__code { position: absolute; inset: 0 0 auto; display: flex; justify-content: center; gap: 0.02em; font-weight: 700; font-size: clamp(8rem, 4rem + 14vw, 15rem); line-height: 1; letter-spacing: -0.06em; color: var(--bg-2); -webkit-text-stroke: 1px var(--line-2); font-variant-numeric: tabular-nums; user-select: none; }
.nf__code span { display: inline-block; }
/* the road is centred under the digits; the barrier stands at its end and the truck stops just before it */
.nf__road { position: absolute; left: 10%; right: 10%; bottom: 14%; height: 44px; }
.nf__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--yellow) 0 14px, transparent 14px 24px); transform-origin: left center; }
.nf__truck { position: absolute; right: 88px; bottom: 8px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-size: 1.6rem; box-shadow: 0 18px 36px -16px rgba(242, 188, 0, 0.8), 0 0 0 8px rgba(255, 255, 255, 0.9); }
.nf__end { position: absolute; right: 0; bottom: 3px; color: var(--ink); font-size: 2.6rem; line-height: 1; transform-origin: 50% 100%; }
.nf__title { max-width: 16ch; font-size: clamp(2.4rem, 0.9rem + 3.6vw, 4.4rem); }
.nf__lead { max-width: 52ch; margin-top: 22px; }
.nf__lead a { color: var(--ink); font-weight: 500; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@media (max-width: 820px) {
  .nf__actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
  .nf__actions .btn { width: 100%; justify-content: center; }
  .nf__road { left: 5%; right: 5%; }
  .nf__truck { width: 54px; height: 54px; font-size: 1.35rem; right: 72px; }
  .nf__end { font-size: 2.2rem; }
}

/* ---------- toasts: the notice after a form is sent or refused; top right under the header, clear of the form's buttons and the call bar ---------- */
.toasts { position: fixed; right: 24px; top: calc(var(--hdr-h) + 16px); z-index: 70; display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 14px; align-items: start; padding: 16px 12px 18px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); color: var(--ink); box-shadow: var(--shadow); pointer-events: auto; opacity: 0; transform: translateY(-14px) scale(0.98); transition: opacity 0.35s var(--ease), transform 0.55s var(--ease); }
.toast.is-in { opacity: 1; transform: none; }
.toast__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.toast--error .toast__icon { background: #fdeaea; color: #b42020; }
.toast__body { min-width: 0; padding-top: 1px; }
.toast__title { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.toast__text { margin-top: 3px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.toast__close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.toast__close:hover { background: var(--bg-2); color: var(--ink); }
.toast__time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow); transform-origin: left center; animation: toast-time var(--life, 6s) linear forwards; }
.toast--error .toast__time { background: #d12c2c; }
.toast.is-paused .toast__time { animation-play-state: paused; }
@keyframes toast-time { to { transform: scaleX(0); } }
@media (max-width: 820px) {
  .toasts { left: 12px; right: 12px; top: calc(var(--hdr-h) + 10px); width: auto; }
}

/* ---------- phones: every action button takes the full width of its column (the toolbar's Filtre button stays compact) ---------- */
/* footer links get a finger-sized target on phones and on any touch screen */
@media (max-width: 820px), (pointer: coarse) {
  .foot__col ul:not(.reach) { gap: 0; }
  .foot__col ul:not(.reach) a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }
}
@media (max-width: 820px) {
  /* construction terms are too long for a side column on a phone: the term sits above its description */
  .specs:not(.specs--table) .specs__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .specs__row dt, .specs__row dd { overflow-wrap: anywhere; }
  .hero:not(.hero--page) .hero__actions { display: none; }
  /* homepage on phones: the call bar (rendered there only) offers the quote, the header keeps only the logo and the menu */
  .home .hdr__cta { display: none; }
  /* Čo vyrábame on phones: name, text and photo per type, without the variant pills */
  .type .pills { display: none; }
  /* company logos two to a row on phones, like the chassis makes */
  .logos--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos__iso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  /* article kicker: date, type and the demo pill wrap as whole pieces, the yellow dot stays on the first line */
  .hero--article .hero__eyebrow--page { flex-wrap: wrap; row-gap: 6px; }
  .hero--article .hero__eyebrow--page > * { white-space: nowrap; }
  /* article titles are long sentences: a step smaller than a page statement */
  .hero--article .hero__title { font-size: clamp(1.875rem, 1.1rem + 3.4vw, 2.75rem); line-height: 1.04; }
  .hero__actions .btn, .section__action .btn, .about__action .btn, .custom__action .btn, .feature__action .btn, .place__actions .btn,
  .form__more .btn, .emptystate .btn, .works__empty .btn, .more__btn, .cta__side .btn { width: 100%; justify-content: center; }
  .section__head .section__action { justify-self: stretch; }
  .form__more { justify-content: center; text-align: center; }
}

/* ---------- reduced motion for components defined above (kept last so it wins over their own animation rules) ---------- */
@media (prefers-reduced-motion: reduce) {
  .skel::after, .more__btn .fa-spinner { animation: none; }
  .cta__glow, .cta__side.is-driving .cta__road, .cta__side.is-driving .cta__route i { animation: none; }
  .cta__side .btn--yellow::after { display: none; }
  .hfx__glow, .hfx__ring, .hfx__badge .fa-truck, .hfx__badge::before, .hfx__badge::after { animation: none; }
  .toast { transform: none; transition: opacity 0.2s linear; }
  .toast__time { display: none; }
  .field.is-shake input, .field.is-shake textarea { animation: none; }
}

/* ---------- CMS: footer legal links, cookie bar, article lists from the editor ---------- */
.foot__links { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.foot__links a, .foot__linkbtn { color: var(--ink-2); transition: color 0.25s var(--ease); }
.foot__links a:hover, .foot__linkbtn:hover { color: var(--blue); }
.foot__linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
.cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 440px; display: grid; gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--blue-deep); color: var(--white); box-shadow: 0 24px 60px -24px rgba(11, 22, 80, 0.7); opacity: 0; transform: translateY(16px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.cookiebar.is-in { opacity: 1; transform: none; }
.cookiebar[hidden] { display: none; }
.cookiebar__text { display: flex; gap: 12px; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--blue-text); }
.cookiebar__text > i { color: var(--yellow); margin-top: 4px; }
.cookiebar__text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cookiebar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 820px) { body.home .cookiebar, body.page-bazar-detail .cookiebar { bottom: 92px; } }
.article__body ul:not(.checks) { list-style: none; padding: 0; margin: 0 0 1.4em; }
.article__body ul:not(.checks) li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.article__body ul:not(.checks) li::first-letter { text-transform: uppercase; }
.article__body ul:not(.checks) li::before { content: "\f00c"; font: var(--fa-font-solid); width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 2px; }
.cookiebar .btn--ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); color: var(--white); }
.cookiebar .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--white); color: var(--white); }
.cookiebar .btn { font-family: inherit; }
.cookiebar__text a:not(.btn):hover, .cookiebar__text a:not(.btn):focus-visible { color: var(--yellow); text-decoration-color: var(--yellow); }