/* =========================================================
   TYMEL — Global GSE Solutions
   Light editorial design: cool greys, white cards, steel-blue accent
   ========================================================= */

/* Self-hosted fonts: Satoshi Variable for everything (ITF Free Font Licence), Jost Cyrillic as the fallback for Ukrainian and Russian (OFL) */
/* Satoshi Variable (Indian Type Foundry, Fontshare — ITF Free Font Licence): all Latin-script text */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/satoshi-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/satoshi-variable-italic.woff2) format('woff2');
}/* Jost normal 300 700 · cyrillic — fallback for Ukrainian and Russian, which Satoshi does not cover */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/jost-300-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@view-transition { navigation: auto; }

:root {
  /* Palette */
  --ink: #16191e;
  --ink-2: #2b3038;
  --grey-700: #4a5059;
  --grey-600: #5d646e;
  --grey-500: #878d96;
  --grey-300: #c9cdd3;
  --grey-200: #dfe2e6;
  --grey-150: #e7e9ec;
  --grey-100: #f1f2f4;
  --surface: #fbfbfc;
  --white: #ffffff;
  --accent: #8597ae;
  --accent-strong: #3e5470;
  --accent-tint: #e2e8ef;
  --danger: #b4372d;
  --ok: #2f7d55;

  /* Semantic */
  --bg: var(--grey-100);
  --bg-alt: var(--grey-150);
  --card: var(--surface);
  --text: var(--ink);
  --text-soft: var(--grey-600);
  --text-mute: #60666f;      /* small muted text: ≥ 4.5:1 on both background greys */
  --heading-mute: #7a8089;   /* large two-tone headings: ≥ 3:1 on both background greys */
  --ghost: #dde0e4;
  --line: rgba(22, 25, 30, .1);
  --line-strong: rgba(22, 25, 30, .2);

  /* Type */
  --font-display: var(--font-body);
  --font-body: "Satoshi", "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-body);   /* labels and captions: tracked capitals in Satoshi */

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.12rem + .55vw, 1.6rem);
  --fs-xl: clamp(1.55rem, 1.25rem + 1.3vw, 2.5rem);
  --fs-2xl: clamp(2.1rem, 1.35rem + 2.9vw, 4.1rem);
  --fs-3xl: clamp(2.5rem, 1.35rem + 4.5vw, 5.5rem);

  /* Space & layout */
  /* Content spans the whole window: the side margin grows with the screen (16 px on phones, 40 px at 1024 px)
     and reaches 100 px at 1440 px and wider, so text keeps the same distance from both edges on any monitor */
  --gutter: clamp(1rem, max(.5rem + 2.5vw, 14.42vw - 107.7px), 100px);
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --max: 100%;
  --radius: 12px;
  --radius-lg: 20px;
  --pill: 999px;
  --header-h: 76px;
  --shadow-card: 0 1px 2px rgba(22,25,30,.04), 0 12px 32px -18px rgba(22,25,30,.18);
  --shadow-float: 0 2px 6px rgba(22,25,30,.05), 0 30px 60px -28px rgba(22,25,30,.35);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; counter-reset: sec;
  transition: opacity .25s ease;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--white); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 200; padding: .75rem 1.25rem; background: var(--ink); color: var(--white); font-weight: 700; border-radius: var(--pill); transition: top var(--dur-fast); }
.skip-link:focus { top: 1rem; }

html.i18n-pending body { opacity: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
/* "dark" is kept as the class name for alternating bands; it is now a slightly deeper light grey */
.dark { --bg: var(--bg-alt); --card: var(--white); background: var(--bg); color: var(--text); }

.grid { display: grid; gap: var(--gutter); }
.split { display: grid; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.25fr 1fr; } }
.product > *, .split > *, .catalog-layout > * { min-width: 0; }

/* ---------- Typography ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--font-body); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); flex: none; }
.display { font-size: var(--fs-3xl); letter-spacing: -.04em; line-height: 1; }
/* Ukrainian and Russian headings fall back to Jost, which needs looser tracking than Satoshi */
:root:is([data-lang="uk"], [data-lang="ru"]) :is(h1, h2, h3, h4, .hero__title, .page-hero h1, .display, .statement, .stat__value, .brand-panel__name, .mobile-menu .m-link) { letter-spacing: -.01em; }
:root:is([data-lang="uk"], [data-lang="ru"]) .hero__title { font-size: clamp(2.1rem, .9rem + 2.9vw, 3.8rem); }
@media (min-width: 1200px) { :root:is([data-lang="uk"], [data-lang="ru"]) .hero__copy { max-width: 46rem; } }
.h2 { font-size: var(--fs-2xl); }
.h3 { font-size: var(--fs-xl); }
/* Two-tone note beside a section title (grey opening, bold dark rest), e.g. the TREPEL distribution line */
.section-note { padding-top: .6rem; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.h4 { font-size: var(--fs-lg); }
.lead { font-size: var(--fs-md); color: var(--text-soft); max-width: 60ch; line-height: 1.7; }
.mono { font-family: var(--font-mono); }
.hl { color: var(--text); }
.mute { color: var(--text-mute); }

/* Section header: "■ Label ———— 02" rule, heading left, copy right */
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head > .eyebrow { display: flex; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(1rem, 3vw, 2.5rem); }
.section-head > .eyebrow::after { counter-increment: sec; content: "0" counter(sec); margin-left: auto; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .section-head:not(.section-head--row) { grid-template-columns: 1.25fr 1fr; column-gap: clamp(2rem, 6vw, 7rem); }
  .section-head > .section-note { text-align: right; }   /* beside the title it closes on the right edge; stacked below on narrower screens it stays left */
  .section-head > .eyebrow { grid-column: 1 / -1; }
  .section-head > .lead { padding-top: .6rem; }
}
.section-head--row > div { display: contents; }
.section-head--row .eyebrow { display: flex; grid-column: 1 / -1; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(1rem, 3vw, 2.5rem); }
.section-head--row .eyebrow::after { counter-increment: sec; content: "0" counter(sec); margin-left: auto; font-weight: 500; }
.section-head--row > .link-arrow { justify-self: start; }
@media (min-width: 900px) { .section-head--row { grid-template-columns: 1fr auto; align-items: end; } .section-head--row > .link-arrow { justify-self: end; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--white);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 52px; padding: .875rem 1.75rem; background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: var(--pill);
  font-family: var(--font-body); font-weight: 500; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent-strong); border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: translateY(1px); }
.btn .arrow { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line-strong); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--white); border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: .625rem 1.25rem; font-size: .75rem; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; padding-block: .5rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur) var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); color: var(--ink); transition: transform var(--dur) var(--ease-out); }
/* The frosted background sits on a pseudo-layer: a backdrop-filter on the header itself would stop the
   dropdown panels (its children) from blurring the page behind them. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(241, 242, 244, .55); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; }
.site-header.is-solid::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .container { position: relative; height: 100%; display: flex; align-items: center; gap: 1.5rem; max-width: none; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; flex: none; }
.brand__logo { width: clamp(132px, 9vw + 40px, 172px); height: auto; }
/* Logo colours as in Tymel Logo/logo.png: two grey blades, the bottom blade and lettering in the text colour */
.brand__logo, .footer-brand svg { --logo-left: #5e5e5e; --logo-right: #373737; }
.nav { margin-left: auto; display: none; }
.nav ul { list-style: none; }
.nav > ul { display: flex; align-items: center; gap: .25rem; }   /* not positioned: the underline is placed against the header container */
/* Top items: soft rounded highlight on hover / while a dropdown is open */
.nav > ul > li { position: relative; display: flex; align-items: center; border-radius: 6px; transition: background-color .2s; }
.nav > ul > li:hover, .nav > ul > li.is-open { background-color: rgba(22, 25, 30, .06); }
/* Underline that slides between items without a dropdown (main.js → initNavCursor) */
.nav > ul > .nav-cursor { position: absolute; left: 0; top: var(--y, 0); width: var(--w, 0); height: 2px; background: var(--ink); border-radius: 2px; transform: translateX(var(--x, 0)); opacity: 0; pointer-events: none; transition: transform .25s ease, width .25s ease, opacity .2s ease; }
.nav > ul > .nav-cursor.is-on { opacity: 1; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .875rem; font-family: var(--font-body); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--text-mute); transition: color var(--dur-fast); }
.nav a:hover, .nav > ul > li > a[aria-current] { color: var(--ink); }
.nav > ul > li > a { white-space: nowrap; }
.nav > ul > li.has-sub > a { padding-right: .25rem; }
@media (max-width: 1499px) { .nav > ul > li > a { padding-inline: .6rem; letter-spacing: .1em; } .nav > ul > li.has-sub > a { padding-right: .2rem; } }
.nav > ul > li > a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
/* Dropdowns: the label is a link to the section page, the chevron button opens the panel (click, Enter/Space, touch);
   a mouse also opens it on hover. Escape or leaving the item closes it — see main.js → initSubnav. */
.subnav-toggle { display: inline-grid; place-items: center; width: 26px; height: 44px; margin-right: .35rem; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--text-mute); cursor: pointer; }
.subnav-toggle svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease-out); }
.subnav-toggle:hover, .has-sub.is-open > .subnav-toggle { color: var(--ink); }
.has-sub.is-open > .subnav-toggle svg { transform: rotate(180deg); }
/* Panels: plain white card with a hairline border and 8px corners, 1rem below the item, rising 10px into
   place; a simple list inside with roomy rows that turn light grey on hover */
.nav .subnav { position: absolute; left: 0; top: calc(100% + 1rem); z-index: 5; display: block; width: 16rem; padding: 0; background: rgba(241, 242, 244, .15); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px -18px rgba(22, 25, 30, .25); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.nav .has-sub.is-open > .subnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .nav .has-sub:hover > .subnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
/* invisible bridge over the gap between the menu item and the panel, so moving the mouse down keeps it open */
.nav .subnav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(1rem + 2px); }
.nav .subnav ul { display: grid; border-radius: 7px; overflow: hidden; }   /* hover fills follow the card's corners */
.nav .subnav a { display: flex; width: 100%; min-height: 0; padding: 1rem; border-radius: 0; font-family: var(--font-body); font-size: .875rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; color: var(--text); white-space: normal; transition: background-color .15s, color .15s; }
.nav .subnav a:hover, .nav .subnav a:focus-visible { background-color: rgba(22, 25, 30, .06); color: var(--ink); }
.nav .subnav a[aria-current] { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .nav .subnav, .nav > ul > .nav-cursor { transition: none; } }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 1200px) { .nav { display: block; } .header-actions { margin-left: .75rem; } .menu-toggle { display: none !important; } }

/* Language switcher */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; min-width: 44px; padding: 0 .9rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--pill); font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-fast); }
.lang-btn:hover { border-color: var(--ink); }
.lang-btn svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: .5rem; list-style: none; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur); }
.lang-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang-menu a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 0 .875rem; border-radius: 10px; text-decoration: none; font-size: .9375rem; }
.lang-menu a span { font-family: var(--font-mono); font-size: .75rem; color: var(--text-mute); text-transform: uppercase; }
.lang-menu a:hover, .lang-menu a[aria-current="true"] { background: var(--grey-100); }
.lang-menu a[aria-current="true"] span { color: var(--accent-strong); }

/* Mobile menu */
.menu-toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--ink); color: var(--white); border: 0; border-radius: 50%; cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out); grid-area: 1 / 1; }
.menu-toggle span:nth-child(1) { transform: translateY(-3.5px); }
.menu-toggle span:nth-child(2) { transform: translateY(3.5px); }
.menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; padding: calc(var(--header-h) + 2rem) var(--gutter) max(2rem, env(safe-area-inset-bottom)); background: var(--bg); color: var(--ink); overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease-in-out), visibility 0s linear .6s; }
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu-open { overflow: hidden; }
.menu-open .site-header { transform: none; }
.menu-open .site-header::before { opacity: 0; }
/* Mobile: a plain collapsible list — each section link plus a button that opens its sub-list (no mega menu) */
.m-nav { list-style: none; counter-reset: m; }
.m-nav > li { overflow: hidden; border-bottom: 1px solid var(--line); }
.m-row { display: flex; align-items: center; gap: .75rem; }
.mobile-menu .m-link { flex: 1; min-width: 0; counter-increment: m; display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; font-family: var(--font-display); font-size: clamp(1.6rem, 6.4vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; text-decoration: none; transform: translateY(105%); transition: transform .7s var(--ease-out); }
.mobile-menu .m-link::before { content: "0" counter(m); flex: none; font-family: var(--font-mono); font-size: .75rem; letter-spacing: 0; color: var(--accent-strong); }
.mobile-menu .m-link[aria-current] { color: var(--text-mute); }
.m-toggle { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; transform: translateY(105%); transition: transform .7s var(--ease-out), border-color var(--dur-fast); }
.m-toggle:hover { border-color: var(--ink); }
.m-toggle svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-open .mobile-menu .m-link, .menu-open .m-toggle { transform: none; }
.mobile-sub { display: grid; gap: 1rem; padding: 0 0 1.25rem 2.25rem; }
.mobile-sub[hidden] { display: none; }
.m-dept { display: grid; gap: .375rem; }
.m-dept__head { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }
.m-dept__subs { display: flex; flex-wrap: wrap; gap: .375rem .5rem; }
.m-dept__subs a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .95rem; font-size: .875rem; font-weight: 600; line-height: 1.25; color: var(--ink); text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--pill); }
.m-dept__subs a[aria-current], .m-dept__head[aria-current] { border-color: var(--ink); }
.menu-open .m-nav > li:nth-child(2) :is(.m-link, .m-toggle) { transition-delay: .05s; }
.menu-open .m-nav > li:nth-child(3) :is(.m-link, .m-toggle) { transition-delay: .1s; }
.menu-open .m-nav > li:nth-child(4) :is(.m-link, .m-toggle) { transition-delay: .15s; }
.menu-open .m-nav > li:nth-child(5) :is(.m-link, .m-toggle) { transition-delay: .2s; }
.mobile-menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .5rem; color: var(--text-soft); font-size: .9375rem; }
.mobile-menu__foot a:not(.btn) { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 1200px) { .mobile-menu { display: none; } }

/* ---------- Home hero: cut-out machine, ghost type, floating spec cards ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: var(--bg); color: var(--ink); overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 1.5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero__ghost { position: absolute; z-index: -1; right: -3vw; top: 52%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: clamp(9rem, 36vw, 36rem); line-height: .8; letter-spacing: -.06em; color: var(--ghost); white-space: nowrap; pointer-events: none; user-select: none; }
/* Decorative type is drawn by CSS so it is not read as low-contrast text */
.hero__ghost::before { content: attr(data-ghost); }
.hero__grid { width: 100%; }
.hero__copy { max-width: 40rem; }
.hero__kicker { font-family: var(--font-body); font-size: .75rem; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; color: var(--ink); }
.hero__title { margin-top: 1.5rem; font-size: clamp(2.5rem, 1.05rem + 3.9vw, 4.9rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
@media (min-width: 1200px) { .hero__title:first-child { margin-top: 0; } }
.hero__title .line { display: block; overflow: hidden; padding-block: .14em .24em; margin-block: -.14em -.24em; }   /* room for accents, descenders and ogonki (ó, p, y, j, ę) inside the reveal clip */
.hero__title .line > span { display: block; }
.hero__title .line:nth-child(2) { color: var(--heading-mute); font-weight: 400; }
.hero__sub { margin-top: 1.75rem; max-width: 44ch; font-size: var(--fs-md); color: var(--text-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
/* Parallax wallpaper — a port of the "ParallaxComponent" (Osmo) to this static site.
   Four layers in one 3:2 box (the photo's proportions) move down at different rates as the hero
   scrolls away (main.js → initParallax): 1 sky 70%, 2 plane 55%, 4 clouds 10%.
   So the far sky barely seems to move, while the foreground clouds pass over it.
   A veil in the page grey keeps the copy crisp on the left and under the header; .parallax__fade
   blends the bottom edge into the next section. */
.hero__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
/* Route globe wallpaper: the canvas takes the drag, so the copy's empty space lets pointers through */
.globe { position: absolute; inset: 0; touch-action: pan-y; }
.globe canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.globe[data-dragging] canvas { cursor: grabbing; }
.globe__tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 12px)); padding: .375rem .625rem; border-radius: 6px; background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 500; white-space: nowrap; pointer-events: none; }
.hero__sky:has(.globe)::after { z-index: 1; }
.hero:has(.globe) .hero__grid { pointer-events: none; }
.hero:has(.globe) .hero__copy { pointer-events: auto; }
.hero__sky::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(241,242,244,.7) 0, rgba(241,242,244,0) calc(var(--header-h) + 4rem)),
    linear-gradient(90deg, rgba(241,242,244,.92) 0%, rgba(241,242,244,.82) 30%, rgba(241,242,244,.35) 48%, rgba(241,242,244,0) 64%); }
.parallax { position: absolute; inset: 0; overflow: hidden; }
/* the layer box covers the hero like object-fit: cover, anchored at 72% / 38% of the photo */
.parallax__layers { --B: max(100vw, 150svh); position: absolute; width: var(--B); aspect-ratio: 3 / 2; left: calc(.72 * (100% - var(--B))); top: calc(.38 * (100% - var(--B) / 1.5)); container-type: inline-size; }
.parallax__layers > picture { display: contents; }
.parallax__layers [data-parallax-layer] { will-change: transform; }
.parallax__layer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.parallax__layer-frame { position: absolute; inset: 0; pointer-events: none; }   /* full-frame wrapper, so yPercent moves the plane as far as the other layers */
/* The plane is three nested layers, each with one job, so the motions add up without bending each other:
   .parallax__layer-frame — scroll parallax (GSAP) · .parallax__plane — flight path · img — slow spin */
.parallax__plane { position: absolute; left: 77.2%; top: 26.9%; width: 9.6%; }   /* 5.9% of the box ≈ 15 mm above its spot in the photo on a 1440 px screen */
.parallax__layer-plane { display: block; width: 100%; height: auto; }
/* Flight: glides very slowly along a parabola — down and to the right, then climbing up to the right — banking with the curve.
   Path: x = −150% → +100% of its width, y = 240·t·(1 − t) % of its height (lowest point mid-way), roll 6° → −6°.
   It fades in and out at the ends so the loop restarts unseen; at 60% of the cycle it passes its spot in the photo. */
.parallax__plane { animation: plane-flight 70s linear infinite, plane-fade 70s linear infinite; will-change: transform, opacity; }
/* Spin and size: during each flight (70s, same length as the flight loop) the plane turns 45° counter-clockwise while
   shrinking smoothly to 60% (rotate 0° → −45°, scale 1 → 0.6). It returns to level and full size exactly when the plane
   has faded out at the end of the flight — the reset is never seen. Both happen around the plane's centre, so the path is unchanged. */
.parallax__layer-plane { animation: plane-spin 70s linear infinite; will-change: transform; }
@keyframes plane-spin { from { transform: rotate(0deg) scale(1); } to { transform: rotate(-45deg) scale(.6); } }
@keyframes plane-flight {
  0%   { transform: translate(-150%, 0)     rotate(6deg); }
  10%  { transform: translate(-125%, 21.6%) rotate(4.8deg); }
  20%  { transform: translate(-100%, 38.4%) rotate(3.6deg); }
  30%  { transform: translate(-75%, 50.4%)  rotate(2.4deg); }
  40%  { transform: translate(-50%, 57.6%)  rotate(1.2deg); }
  50%  { transform: translate(-25%, 60%)    rotate(0deg); }
  60%  { transform: translate(0%, 57.6%)    rotate(-1.2deg); }
  70%  { transform: translate(25%, 50.4%)   rotate(-2.4deg); }
  80%  { transform: translate(50%, 38.4%)   rotate(-3.6deg); }
  90%  { transform: translate(75%, 21.6%)   rotate(-4.8deg); }
  100% { transform: translate(100%, 0)      rotate(-6deg); }
}
@keyframes plane-fade { 0% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .parallax__plane, .parallax__layer-plane { animation: none; } }
.parallax__fade { position: absolute; inset: auto 0 0; height: 26%; z-index: 3; pointer-events: none; background: linear-gradient(to top, var(--bg), rgba(241,242,244,0)); }

/* Phones, tablets and small laptops: the copy comes first and the wallpaper follows as an edge-to-edge band */
@media (max-width: 1199px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
  .hero__sky { --band: clamp(260px, 66vw, 480px); position: relative; inset: auto; z-index: 0; order: 2; height: var(--band); margin-top: clamp(1.5rem, 6vw, 3rem); }
  .hero__sky::after { background: linear-gradient(to bottom, var(--bg) 0, rgba(241,242,244,0) 22%); }
  .parallax__fade { height: 20%; }
  .parallax__layers { --B: max(100vw, calc(var(--band) * 1.5)); left: calc(.6 * (100% - var(--B))); top: calc(.45 * (100% - var(--B) / 1.5)); }
}
@media (min-width: 1200px) {
  .hero { padding-bottom: 7.5rem; }   /* keeps longer translations clear of the scroll cue */
}
.hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; display: none; transform: translateX(-50%); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 40px; margin: .75rem auto 0; background: linear-gradient(var(--ink), transparent); animation: scrollCue 2.2s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes scrollCue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 1000px) and (min-height: 760px) { .hero__scroll { display: block; } }

/* Kept for markup compatibility; the dashed line now reads as a quiet guide */
.taxiline { display: none; }

/* ---------- Inner page hero: headline row, then a rounded photo ---------- */
.page-hero { position: relative; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); padding-top: var(--header-h); overflow: hidden; }
.page-hero .container { order: 1; display: grid; gap: 1.25rem; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.page-hero .breadcrumb { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(.5rem, 2vw, 1.5rem); }
.page-hero h1 { font-size: clamp(2.35rem, 1.05rem + 3.7vw, 4.75rem); letter-spacing: -.045em; line-height: 1.02; max-width: 20ch; }
.page-hero h1 .tone-mute { color: var(--heading-mute); font-weight: 400; }   /* muted part, as in the home hero */
/* Aviation equipment page: heading sized and spaced exactly like the home hero title */
.page-hero h1[data-catalog-title] { font-size: clamp(2.5rem, 1.05rem + 3.9vw, 4.9rem); font-weight: 500; line-height: 1; }
:root:is([data-lang="uk"], [data-lang="ru"]) .page-hero h1[data-catalog-title] { font-size: clamp(2.1rem, .9rem + 2.9vw, 3.8rem); }
.page-hero .lead { color: var(--text-soft); }
.page-hero .hero__actions { margin-top: .5rem; }
@media (min-width: 1000px) {
  .page-hero .container { grid-template-columns: 1.7fr 1fr; column-gap: clamp(2rem, 5vw, 6rem); align-items: end; }
  .page-hero .breadcrumb { grid-column: 1 / -1; }
  .page-hero .lead { padding-bottom: .5rem; }
  .page-hero .hero__actions { grid-column: 1; }
}
.page-hero__media { order: 2; position: relative; margin: 0 var(--gutter); height: clamp(240px, 40vw, 600px); border-radius: var(--radius-lg); overflow: hidden; background: var(--grey-200); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.page-hero--compact .page-hero__media { height: clamp(180px, 24vw, 360px); }.page-top { background: var(--bg); padding: calc(var(--header-h) + 1.5rem) 0 0; }
.page-top .container > .breadcrumb { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; gap: .5rem; list-style: none; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; min-width: 0; }
/* One line always: earlier crumbs keep their size, the current page truncates (no reflow when JS fills it) */
.breadcrumb li { flex: none; }
.breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Phones: only the parent and the current page */
@media (max-width: 699px) {
  .breadcrumb { overflow: hidden; }
  .breadcrumb li:not(:nth-last-child(-n+2)) { display: none; }
  .breadcrumb li:nth-last-child(2)::before { content: none; }
}
.breadcrumb a { text-decoration: none; color: var(--text-soft); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.breadcrumb [aria-current] { color: var(--ink); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.25rem; background: var(--bg); -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; width: max-content; animation: marquee 62s linear infinite; }   /* ~4.8 s per logo: lengthen with the list */
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; font-family: var(--font-display); font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; color: var(--text-mute); }
.marquee__item::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
/* Partner logos: the width/height on each <img> already balance their visual size (wide logos lower, compact ones
   taller); slightly smaller on small screens */
.marquee__item--logo picture, .marquee__item--logo img { display: block; max-width: none; }
@media (max-width: 700px) { .marquee__item--logo img { zoom: .8; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Events coverflow (about page): square photos raked in 3D around the centre card, caption below ---------- */
.events { --cf-card: clamp(220px, 28vw, 360px); order: 2; position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cf__frame { position: relative; overflow: hidden; padding-block: 2.5rem; perspective: calc(var(--cf-card) * 3); touch-action: pan-y; cursor: grab; outline: none; }
.cf__frame:active { cursor: grabbing; }
.cf__frame:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--radius-lg); }
.cf__stage { position: relative; height: calc(var(--cf-card) * 3 / 4); transform-style: preserve-3d; user-select: none; }
.cf__card { position: absolute; left: 50%; top: 0; width: var(--cf-card); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--grey-200); box-shadow: 0 20px 40px -18px rgba(22,25,30,.45); will-change: transform; }
.cf__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cf__nav { position: absolute; top: 50%; z-index: 200; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(241,242,244,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; transform: translateY(-50%); transition: background-color .2s; }
.cf__nav:hover { background: var(--white); }
.cf__nav svg { width: 18px; height: 18px; }
.cf__nav--prev { left: var(--gutter); } .cf__nav--prev svg { transform: scaleX(-1); }
.cf__nav--next { right: var(--gutter); }
.cf__caption { display: flex; flex-direction: column; align-items: center; gap: .25rem; max-width: 36rem; margin: .5rem auto 0; padding-inline: var(--gutter); text-align: center; animation: cf-fade .3s var(--ease-out); }
.cf__caption h2 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.cf__caption time { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; color: var(--text-mute); }
.cf__caption p { font-size: .9375rem; color: var(--text-soft); }
@keyframes cf-fade { from { opacity: 0; } }
.marquee-caption { margin: 0; padding-block: .625rem; text-align: center; font-family: var(--font-body); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--heading-mute); }

/* ---------- Cards: shared look ---------- */
.pillars, .features, .brands { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }

/* Pillars (4 business lines) */
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 30vw, 420px); padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--card); color: var(--text); border-radius: var(--radius-lg); text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out); }
.pillar:hover { transform: translateY(-4px); }
.pillar__img { position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out); }
.pillar__img picture { display: block; height: 100%; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--img-x, 50%) 50%; }.pillar__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,25,30,.15), rgba(22,25,30,.82)); }
.pillar__num { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; color: var(--text-mute); transition: color var(--dur); }
.pillar__icon { width: 40px; height: 40px; margin-top: 2rem; color: var(--accent-strong); transition: color var(--dur); }
.pillar h3 { margin-top: auto; font-size: var(--fs-lg); padding-top: 2rem; transition: color var(--dur); }
.pillar p { margin-top: .75rem; color: var(--text-soft); font-size: .9375rem; transition: color var(--dur); }
.pillar__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-weight: 700; font-size: .875rem; }
.pillar__go svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) {
  .pillar:hover .pillar__img { opacity: 1; transform: scale(1); }
  .pillar:hover, .pillar:hover p, .pillar:hover .pillar__num, .pillar:hover .pillar__icon { color: var(--white); }
  .pillar:hover .pillar__go svg { transform: translateX(6px); }
}

/* ---------- Equipment card ---------- */
.eq-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.eq-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.eq-card__media { position: relative; aspect-ratio: 4 / 3; margin: .5rem .5rem 0; border-radius: 14px; background: radial-gradient(120% 90% at 50% 100%, #ffffff 0%, #eef0f2 55%, #e4e7ea 100%); overflow: hidden; }
.eq-card__media img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform .9s var(--ease-out); filter: drop-shadow(0 18px 18px rgba(22,25,30,.16)); }
.eq-card:hover .eq-card__media img { transform: scale(1.05); }
.eq-card__tags { position: absolute; left: .75rem; top: .75rem; display: flex; flex-wrap: wrap; gap: .375rem; z-index: 1; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 .7rem; border-radius: var(--pill); font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-tint); color: var(--accent-strong); }
.tag--new { background: var(--ink); color: var(--white); }
.tag--used { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag--electric { color: #00a1e0; font-weight: 700; }   /* blue from the TREPEL brochure */
.tag--sample { background: transparent; color: var(--text-soft); box-shadow: inset 0 0 0 1px currentColor; }
.eq-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.375rem 1.5rem; flex: 1; }
.eq-card__brand { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.eq-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.18; letter-spacing: -.02em; }
.eq-card__spec { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: .75rem; color: var(--text-soft); }
.eq-card__spec b { color: var(--text); font-weight: 500; }

/* ---------- Brands ---------- */
/* Photo on top on small screens, beside the text from 900px, so the text never covers the vehicle */
.brand-panel { --pad: clamp(1.75rem, 3vw, 2.75rem); position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: var(--pad); color: var(--white); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #f6f6f6 100px, var(--ink-2) 100px); }
.brand-panel__img { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) .5rem; aspect-ratio: 2 / 1; overflow: hidden; }
.brand-panel__img picture { display: block; height: 100%; }
.brand-panel__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .brand-panel { min-height: 460px; padding-right: 62%; background: linear-gradient(90deg, var(--ink-2) 50%, #f6f6f6 50%); }
  .brand-panel__img { position: absolute; top: 0; right: 0; bottom: 0; left: 40%; margin: 0; aspect-ratio: auto; z-index: -1; }
}
.brand-panel__name { font-family: var(--font-display); font-size: clamp(2.75rem, 2rem + 3.2vw, 5rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.brand-panel__origin { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.brand-panel p { color: rgba(255,255,255,.85); max-width: 46ch; }
.brand-panel ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.brand-panel li { padding: .375rem .875rem; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--pill); font-size: .8125rem; }

/* ---------- Stats (cards: dot · label · big number) ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); max-width: var(--max); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 1.5rem; min-height: clamp(200px, 20vw, 280px); padding: 3rem clamp(1.1rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem); background: radial-gradient(circle, var(--accent) 4px, transparent 4.5px) clamp(1.1rem, 2vw, 1.75rem) 1.6rem / 10px 10px no-repeat, var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.stat__value { margin-top: auto; font-family: var(--font-display); font-size: clamp(2.4rem, 1.65rem + 3.1vw, 4.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: .42em; margin-left: .2em; color: var(--text-mute); letter-spacing: 0; }
.stat__label { font-size: .9375rem; color: var(--text-soft); max-width: 26ch; }

/* ---------- Process: columns with accent bar and dashed guides ---------- */
.process { position: relative; }
.process__line { display: none; }
.process__list { display: grid; gap: 2rem; counter-reset: step; list-style: none; }
@media (min-width: 900px) { .process__list { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.process li { position: relative; counter-increment: step; padding: 0 0 2.5rem 1.25rem; background: linear-gradient(var(--line-strong) 50%, transparent 0) 0 0 / 1px 8px repeat-y; }
.process li::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 4.2rem; border-radius: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms + 200ms); }
.is-in .process li::before, .process li.is-in::before { transform: none; }
.process__num { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; color: var(--text-mute); }
.process__num::before { content: "0" counter(step) " · "; color: var(--accent-strong); }
.process h3 { margin-top: .5rem; font-size: var(--fs-lg); }
.process p { margin-top: 1.25rem; display: inline-block; padding: .875rem 1.1rem; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-card); color: var(--text-soft); font-size: .9375rem; }

/* ---------- Features ---------- */
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .features--3 { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.feature__icon { width: 36px; height: 36px; color: var(--accent-strong); }
.feature h3 { margin-top: 1.5rem; font-size: 1.1875rem; font-weight: 500; }
.feature p { margin-top: .625rem; color: var(--text-soft); font-size: .9375rem; }
.features--links .feature { display: block; color: inherit; text-decoration: none; border: 1px solid transparent; transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast); }
.features--links .feature:hover { transform: translateY(-3px); border-color: var(--line-strong); }

.checklist { list-style: none; display: grid; gap: .875rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; border-radius: 50%; }

/* Media frame */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--grey-200); }
.frame picture { width: 100%; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { width: 100%; aspect-ratio: 4 / 5; max-height: min(85vh, 760px); }   /* full-width layout: keep tall photos from growing with very wide screens */
.frame--wide { aspect-ratio: 16 / 10; }
.frame__caption { position: absolute; left: 1rem; bottom: 1rem; padding: .5rem .875rem; background: rgba(255,255,255,.85); color: var(--ink); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--pill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }


/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--bg); color: var(--text-soft); padding-top: clamp(1.25rem, 2.2vw, 1.5rem); overflow: hidden; border-top: 1px solid var(--line); }
.site-footer a { text-decoration: none; transition: color var(--dur-fast); }
.site-footer a:hover { color: var(--ink); }
.footer-grid { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-brand svg { width: 220px; height: auto; color: var(--ink); }
.footer-brand p { margin-top: 1.25rem; max-width: 34ch; font-size: .9375rem; }
.footer-col h3 { display: flex; align-items: center; gap: .625rem; font-family: var(--font-body); font-size: .9375rem; font-weight: 700; letter-spacing: 0; color: var(--ink); margin-bottom: .625rem; }
.footer-col h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.footer-col ul { list-style: none; display: grid; gap: 0; }
.footer-col li a { display: inline-flex; align-items: center; min-height: 28px; font-size: .9375rem; }
@media (pointer: coarse) { .footer-col li a { min-height: 36px; } }   /* keep comfortable tap targets on touch screens */
.footer-col address { font-style: normal; display: grid; gap: .5rem; font-size: .9375rem; }
.footer-mark { margin-top: clamp(1rem, 1.6vw, 1.25rem); color: var(--ghost); pointer-events: none; user-select: none; }
.footer-mark svg { display: block; width: auto; max-width: 100%; height: clamp(32px, 5.2vw, 75px); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-block: .75rem max(.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .8125rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ---------- Catalog ---------- */
.catalog-layout { display: grid; gap: 2rem; }
@media (min-width: 1100px) { .catalog-layout { grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; } }
.filters { display: grid; gap: 1.75rem; min-width: 0; }
.filters > * { min-width: 0; }
@media (min-width: 1100px) { .filters { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.5rem; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } }
.filter-group h2 { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 1099px) {
  .filters { gap: 1.25rem; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .25rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .chips::-webkit-scrollbar { display: none; }
}
.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); white-space: nowrap; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip[aria-pressed="true"] .chip__count { color: var(--grey-300); }
.chip__count { font-family: var(--font-mono); font-size: .75rem; color: var(--text-mute); }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 1.1rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }
.search-field input { width: 100%; min-height: 52px; padding: 0 1rem 0 2.9rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); font-size: 1rem; }
.search-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-tint); }
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-family: var(--font-mono); font-size: .8125rem; color: var(--text-soft); }
.eq-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.eq-grid .eq-card { animation: cardIn .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
.empty-state { padding: 4rem 1.5rem; text-align: center; background: var(--card); border-radius: var(--radius-lg); color: var(--text-soft); }
.empty-state h3 { font-size: var(--fs-lg); color: var(--text); margin-bottom: .75rem; }
.empty-state__label { margin-top: 1.75rem; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.empty-state__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 60ch; margin: .75rem auto 0; }
.empty-state__list li { padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--pill); font-size: .875rem; font-weight: 600; color: var(--text); }

/* Reserve room for script-rendered content so the footer doesn't jump when it arrives */
[data-product]:empty, [data-catalog] .eq-grid:empty { min-height: 100svh; }
[data-depts]:empty { min-height: 140px; }
@media (min-width: 1100px) { [data-depts]:empty { min-height: 160px; } }

/* Services: seven departments */
.svc-list { display: grid; gap: clamp(.75rem, 1.5vw, 1rem); }
.svc { display: grid; gap: 1.25rem 2.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
@media (min-width: 900px) { .svc { grid-template-columns: 7rem minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.svc:target { box-shadow: 0 0 0 2px var(--accent-strong), var(--shadow-card); }
.svc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 900px) { .svc__head { flex-direction: column; align-items: flex-start; gap: 1.5rem; } }
.svc__num { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-mute); }
.svc__icon { width: 40px; height: 40px; color: var(--accent-strong); }
.svc__kind { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); }
.svc > * { min-width: 0; }
.svc > .svc__products { grid-column: 1 / -1; margin-top: .75rem; }
.svc__body h3 { margin-top: .5rem; font-size: var(--fs-lg); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.svc__body p { margin-top: .75rem; color: var(--text-soft); max-width: 48ch; }
.svc__body .link-arrow { margin-top: 1.25rem; }
.svc__body .svc__for { font-size: .9375rem; }
.svc__for strong { display: block; margin-bottom: .2rem; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.svc__items { list-style: none; display: grid; }
.svc__items li { display: flex; gap: .75rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.svc__items li:first-child { border-top: 1px solid var(--line); }
.svc__items li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); transform: translateY(-2px); }

/* Aviation equipment departments */
.section--flush-top { padding-top: 0; }
.depts { display: grid; gap: .75rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 2rem; }
.dept { display: flex; flex-direction: column; gap: .75rem; min-height: 150px; padding: 1.25rem; background: var(--card); color: var(--text); border: 1px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: transform var(--dur) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.dept:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.dept__top { display: flex; justify-content: space-between; align-items: center; }
.dept__top svg { width: 30px; height: 30px; color: var(--accent-strong); transition: color var(--dur-fast); }
.dept__num { font-family: var(--font-mono); font-size: .75rem; color: var(--text-mute); }
.dept__name { margin-top: auto; font-family: var(--font-display); font-size: clamp(1rem, .82rem + .4vw, 1.15rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.dept__text { color: var(--text-soft); font-size: .9375rem; }
.dept__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .75rem; border-top: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: .75rem; color: var(--text-soft); }
.dept__meta .arrow { width: 16px; height: 16px; color: var(--accent-strong); transition: transform var(--dur) var(--ease-out); }
.dept:hover .dept__meta .arrow { transform: translateX(4px); }
.dept[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.dept[aria-pressed="true"] .dept__name { color: var(--white); }
.dept[aria-pressed="true"] .dept__top svg { color: var(--grey-300); }
.dept[aria-pressed="true"] .dept__num, .dept[aria-pressed="true"] .dept__meta { color: var(--grey-300); border-color: rgba(255, 255, 255, .25); }
.depts--links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin-bottom: 0; }
.depts--links .dept { min-height: 260px; --d: calc(var(--i, 0) * 70); }
.depts--links .dept__name { margin-top: 2.5rem; font-size: 1.125rem; }
.depts--links .dept__meta { margin-top: auto; }
@media (max-width: 1099px) {
  .depts:not(.depts--links) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .depts:not(.depts--links)::-webkit-scrollbar { display: none; }
  .depts:not(.depts--links) .dept { scroll-snap-align: start; min-height: 130px; }
}
.dept-intro { display: grid; gap: 1.5rem 3rem; margin-bottom: 2.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); animation: cardIn .6s var(--ease-out) both; }
.dept-intro[hidden], .dept-empty[hidden], .catalog-layout[hidden] { display: none; }
@media (min-width: 900px) { .dept-intro { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.dept-intro h2 { margin-top: .75rem; font-size: var(--fs-xl, 2rem); }
.dept-intro p { margin-top: .75rem; color: var(--text-soft); max-width: 52ch; }
.dept-intro__list h3 { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: .75rem; }
.dept-intro__list ul { list-style: none; display: grid; }
.dept-intro__list li { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.dept-intro__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); transform: translateY(-2px); }
/* Subcategory links inside a department intro (real links, so they work without JS and can be crawled) */
.sub-links li { padding: 0; }
.sub-links li::before { content: none; }
.sub-links a { display: flex; flex: 1; justify-content: space-between; align-items: center; gap: 1rem; min-height: 48px; padding: .5rem .75rem; margin-inline: -.75rem; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast); }
.sub-links a:hover { background: var(--accent-tint); }
.sub-links a[aria-current] { background: var(--ink); color: var(--white); }
.sub-links__n { flex: none; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; color: var(--text-soft); }
.sub-links a[aria-current] .sub-links__n { color: var(--grey-300); }
.section-foot { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1.5rem; }
.dept-empty .empty-state > svg { width: 44px; height: 44px; margin: 0 auto 1.25rem; color: var(--accent-strong); }
.dept-empty .empty-state > p:not(.actions) { max-width: 56ch; margin-inline: auto; }
.dept-empty .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; }

/* ---------- Product detail ---------- */
.product { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 1000px) { .product { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.product__gallery { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: radial-gradient(110% 90% at 50% 100%, #fff 0%, #eef0f2 55%, #e2e5e9 100%); overflow: hidden; }
@media (min-width: 1000px) { .product__gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.product__gallery img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 28px 26px rgba(22,25,30,.2)); }
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); opacity: .7; }
.product__info h1 { font-size: var(--fs-2xl); margin-top: 1rem; }
.product__info .lead { margin-top: 1.25rem; }
.product__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1.25rem; }
.spec-table { width: 100%; margin-top: 2rem; border-collapse: collapse; font-size: .9375rem; }
.spec-table caption { text-align: left; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); padding-bottom: .75rem; }
.spec-table th, .spec-table td { padding: .875rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { font-weight: 500; color: var(--text-soft); width: 45%; padding-right: 1rem; }
.spec-table td { font-family: var(--font-mono); font-size: .875rem; overflow-wrap: anywhere; }
.variants { overflow-x: auto; margin-top: 1rem; -webkit-overflow-scrolling: touch; }
.spec-table--variants { min-width: 520px; }
.spec-table--variants th, .spec-table--variants td { width: auto; padding-right: 1rem; white-space: nowrap; }
.spec-table--variants thead th { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.spec-table--variants tbody th { font-family: var(--font-mono); font-size: .875rem; color: var(--text); }
.product__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.product__note { margin-top: 1.5rem; font-size: .875rem; color: var(--text-soft); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field label, .field legend, .field-label { font-size: .875rem; font-weight: 700; }
.field .req { color: var(--danger); margin-left: .15em; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .75rem 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; font-size: 1rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d646e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.75rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-tint); }
.field .hint { font-size: .8125rem; color: var(--text-soft); }
.field .error { display: none; font-size: .8125rem; color: var(--danger); font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .error { display: block; }
/* File drop zone: an outlined box (the whole box is the file input's label), files listed underneath */
.field .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 2rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-align: center; font-weight: 400; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast); }
.field .dropzone:hover { background-color: var(--bg); }
.field .dropzone:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-tint); }
.field .dropzone.is-drag { border-color: var(--ink); background-color: var(--accent-tint); }
.field .dropzone input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dropzone__icon { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .35rem; border-radius: 8px; background: var(--bg); color: var(--text-soft); }
.dropzone__icon svg { width: 16px; height: 16px; }
.dropzone__title { font-size: .875rem; font-weight: 600; color: var(--ink); }
.dropzone__text, .dropzone__caption { font-size: .75rem; color: var(--text-soft); }
.dropzone__files { list-style: none; display: grid; gap: .5rem; }
.dropzone__files:empty { display: none; }
.dropzone__file { display: flex; align-items: center; gap: .75rem; padding: .375rem .375rem .375rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-size: .875rem; }
.dropzone__file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__file-size { flex: none; font-size: .8125rem; color: var(--text-mute); }
.dropzone__remove { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--text-mute); cursor: pointer; }
.dropzone__remove:hover { background: var(--bg); color: var(--ink); }
.dropzone__remove svg { width: 14px; height: 14px; }
.radio-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; border: 0; padding: 0; margin: 0; }
@media (min-width: 700px) { .radio-cards { grid-template-columns: repeat(3, 1fr); } }
.radio-cards legend { margin-bottom: .5rem; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); font-size: .875rem; font-weight: 600; transition: all var(--dur-fast); }
.radio-card input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.radio-card input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; color: var(--text-soft); }
.consent input { flex: none; width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--ink); }
.consent .error { display: none; margin-top: .25rem; font-size: .8125rem; color: var(--danger); font-weight: 600; }
.consent.has-error .error { display: block; }
.consent a { color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; padding: 1rem 1.25rem; border-radius: 14px; font-weight: 600; }
.form-status.is-ok { display: block; background: rgba(47,125,85,.1); color: var(--ok); }
.form-status.is-err { display: block; background: rgba(180,55,45,.08); color: var(--danger); }
.btn .spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.order-form { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }


/* ---------- Team ---------- */
.team { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }
@media (min-width: 760px) { .team { grid-template-columns: repeat(3, 1fr); } }
.person { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
/* Round photo slot: shows initials on a dashed ring until a photo file is added */
.avatar { position: relative; width: clamp(96px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--grey-100); box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar::before { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; color: var(--text-mute); background: radial-gradient(circle at 50% 35%, var(--white), var(--grey-150)); border: 1.5px dashed var(--grey-300); border-radius: 50%; opacity: 0; transition: opacity var(--dur); }
.avatar.is-empty::before { opacity: 1; }
.avatar.is-empty img { visibility: hidden; }
.person__name { margin-top: 1.75rem; font-size: var(--fs-lg); }
.person__role { margin-top: .35rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.person__contact { list-style: none; display: grid; gap: .25rem; width: 100%; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--line-strong); }
.person__contact a { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-fast); }
.person__contact a:hover { color: var(--accent-strong); }
.person__contact svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--grey-100); color: var(--ink); transition: background-color var(--dur-fast), color var(--dur-fast); }
.person__contact img { display: block; height: auto; max-width: 100%; transition: opacity var(--dur-fast); }
.person__contact a:hover img { opacity: .7; }
.person__contact a:hover svg { background: var(--ink); color: var(--white); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 64px; padding: 1.25rem 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--white) linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.faq details:not([open]) summary::after { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat; }
.faq summary:hover { color: var(--accent-strong); }
.faq .faq__body { padding: 0 0 1.5rem; color: var(--text-soft); max-width: 65ch; }
.faq details[open] .faq__body { animation: faqIn .5s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* Cut-out spotlight */
.spotlight { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: radial-gradient(110% 90% at 50% 100%, #fff 0%, #eef0f2 55%, #e2e5e9 100%); overflow: hidden; }
.spotlight img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 24px 22px rgba(22,25,30,.2)); }

/* Big statement */
.statement { font-family: var(--font-display); font-size: clamp(1.65rem, 1.1rem + 2.4vw, 3.3rem); font-weight: 400; line-height: 1.16; letter-spacing: -.035em; max-width: 24ch; color: var(--heading-mute); }
.statement em { font-style: normal; color: var(--ink); }

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; padding: .5rem 1rem; background: var(--white); border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em; }
.badge svg { width: 18px; height: 18px; color: var(--accent-strong); }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.container.prose { max-width: calc(72ch + 2 * var(--gutter)); margin-left: max(0px, calc((100% - var(--max)) / 2)); }
.prose h2 { font-size: var(--fs-lg); margin: 2.5rem 0 1rem; }
.prose p, .prose ul { margin-bottom: 1rem; color: var(--text-soft); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .45rem; padding-left: .25rem; }
.prose li::marker { color: var(--accent-strong); }
.prose ol.alpha { list-style: lower-alpha; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent-strong); }
.prose h2 { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* Informacje prawne page */
.legal-list { display: grid; max-width: 720px; border-top: 1px solid var(--line); }
.legal-list > div { display: grid; gap: .25rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .legal-list > div { grid-template-columns: 220px 1fr; } }
.legal-list dt { font-size: .875rem; color: var(--text-mute); }
.legal-list dd { color: var(--ink); font-weight: 500; }
.privacy-date { margin-top: 1rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }

/* ---------- Language hint ---------- */
.lang-hint { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 1rem; width: min(calc(100% - 2rem), 560px); padding: .625rem .625rem .625rem 1.25rem; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--shadow-float); transform: translate(-50%, 160%); transition: transform .6s var(--ease-out); }
.lang-hint.is-in { transform: translate(-50%, 0); }
.lang-hint p { flex: 1; font-size: .875rem; }
.lang-hint__close { flex: none; width: 44px; height: 44px; background: transparent; border: 0; color: var(--text-soft); font-size: 1.5rem; cursor: pointer; border-radius: 50%; }
.lang-hint__close:hover { color: var(--ink); background: var(--grey-100); }

/* Ghost mark */
.watermark { position: absolute; z-index: 0; color: var(--ghost); pointer-events: none; }
.watermark svg { width: 100%; height: auto; }

/* ---------- Motion ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translate3d(-32px, 0, 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="inner"] { opacity: 1; transform: none; }
.js [data-reveal="inner"] > *:not(.pillar__img):not(.brand-panel__img) { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-reveal="inner"].is-in > *:not(.pillar__img):not(.brand-panel__img) { opacity: 1; transform: none; }
/* Clip the children, not the frame: a fully clipped target never reports as intersecting */
.js [data-reveal="mask"] { opacity: 1; transform: none; background: transparent; }
.js [data-reveal="mask"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-in-out); }
.js [data-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }
.js [data-reveal="mask"] img { transform: scale(1.15); transition: transform 1.6s var(--ease-out); }
.js [data-reveal="mask"].is-in img { transform: none; }
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .08em .24em; margin: -.14em -.08em -.24em; }
.js [data-split] .w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1s var(--ease-out); transition-delay: calc(var(--wi, 0) * 45ms); }
.js [data-split].is-in .w > span { transform: none; }
[data-split] .w.is-mute { color: var(--heading-mute); font-weight: 400; }

/* Load sequence: headline, cut-out drives in, ghost type settles, cards float in */
.js .hero__title .line > span { transform: translate3d(0, 105%, 0); }
.js .fade-up { opacity: 0; transform: translate3d(0, 20px, 0); }
.js .hero__ghost { opacity: 0; transform: translate(8%, -50%); }
.js .hero__sky { opacity: 0; }
.js .page-hero__media { opacity: 0; transform: translate3d(0, 30px, 0); }
.is-loaded .hero__title .line > span { transform: none; transition: transform 1.2s var(--ease-out); }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: .2s; }
.is-loaded .fade-up { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(.45s + var(--d, 0) * 1ms); }
.is-loaded .hero__ghost { opacity: 1; transform: translate(0, -50%); transition: opacity 2s var(--ease-out), transform 2.4s var(--ease-out); }
.is-loaded .hero__sky { opacity: 1; transition: opacity 1.8s var(--ease-out); }

.is-loaded .page-hero__media { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .25s, transform 1.4s var(--ease-out) .25s; }
@media (min-width: 700px) {
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal="mask"] > *, .js [data-reveal="inner"] > *, .js [data-reveal], .js [data-split] .w > span, .js .hero__title .line > span, .js .fade-up, .js .hero__ghost, .js .page-hero__media, .js .hero__sky { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .hero__ghost { transform: translateY(-50%) !important; }
  .marquee__track { animation: none; }
  @view-transition { navigation: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-menu, .site-footer, .hero__scroll { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js [data-reveal="mask"] > * { clip-path: none !important; }
  body { background: #fff; color: #000; }
}