/* ==========================================================================
   Sarerom Nordic – design system
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
    --navy: #0e2350;
    --navy-2: #173170;
    --blue: #2b56a3;
    --blue-2: #1f4185;
    --blue-soft: #e6eefa;
    --sky: #9fd0ff;
    --sky-2: #5b9bf0;
    --ink: #0b1c3f;
    --muted: #5d6b80;
    --line: #e2e8f1;
    --soft: #f3f6fb;
    --white: #fff;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display: "Anton", "Impact", "Arial Narrow", sans-serif;
    --script: "Caveat", "Segoe Script", cursive;

    --r-xl: 32px;
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 10px;
    --shadow: 0 18px 50px -20px rgba(14, 35, 80, .28);
    --shadow-lg: 0 30px 80px -30px rgba(14, 35, 80, .45);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --container: 1280px;
    --gutter: clamp(18px, 4vw, 40px);
    --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
html:has(body:not(.page-home)) { scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--sky-2); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.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: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Icons */
.icon { width: 22px; height: 22px; flex: none; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 34px; height: 34px; }

/* Typography */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .98; font-size: clamp(2.3rem, 4.6vw, 4.1rem); color: var(--navy); }
.display em { font-style: normal; color: var(--blue); }
.display--md { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.display--sm { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.display--light { color: #fff; }
.display--light em { color: var(--sky); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-2); box-shadow: 0 0 0 4px rgba(159, 208, 255, .35); }
.eyebrow--sky { color: var(--sky); }
.script { font-family: var(--script); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1; display: inline-block; transform: rotate(-4deg); }
.script--sky { color: var(--sky); }
.script--blue { color: var(--blue); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); line-height: 1.65; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: .95rem; line-height: 1; transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s, border-color .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn--sm { padding: 11px 18px; font-size: .88rem; }
.btn--block { width: 100%; }
.btn--sky { background: var(--sky); color: var(--navy); box-shadow: 0 10px 30px -12px rgba(91, 155, 240, .9); }
.btn--sky:hover { background: #c2e2ff; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-2); box-shadow: 0 14px 30px -14px rgba(43, 86, 163, .8); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { border-color: rgba(255, 255, 255, .5); color: #fff; backdrop-filter: blur(6px); background: rgba(255, 255, 255, .06); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn--ghost-dark { border-color: rgba(14, 35, 80, .25); color: var(--navy); }
.btn--ghost-dark:hover { border-color: var(--navy); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }

.round-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; background: var(--sky); color: var(--navy); transition: transform .3s var(--ease), background-color .25s, color .25s, border-color .25s; flex: none; }
.round-btn:hover { transform: rotate(-12deg) scale(1.06); }
.round-btn--sm { width: 36px; height: 36px; }
.round-btn--sky { background: var(--sky); }
.round-btn--glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(8px); }
.round-btn--glass:hover { background: #fff; color: var(--navy); }
.round-btn--outline { background: transparent; border-color: var(--line); color: var(--navy); }
.round-btn--outline:hover { border-color: var(--navy); }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.chip--sky { background: var(--sky); color: var(--navy); }
.chip--glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(10px); text-transform: uppercase; letter-spacing: .1em; }

/* Marquee */
.marquee { overflow: hidden; display: flex; }
.marquee__track { display: flex; flex: none; gap: var(--gap, 48px); padding-right: var(--gap, 48px); animation: marquee var(--speed, 40s) linear infinite; min-width: max-content; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Top bar */
.topbar { background: var(--navy); color: rgba(255, 255, 255, .88); font-size: .8rem; font-weight: 600; padding: 9px 0; --speed: 45s; }
.topbar__item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.topbar__item .icon { color: var(--sky); }

/* Header – floating bar */
.site-header { position: sticky; top: 0; z-index: 90; padding: 12px 14px 0; pointer-events: none; transition: padding .35s var(--ease); }
.site-header.is-scrolled { padding-top: 8px; }
.site-header__inner { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 24px; height: var(--header-h); padding: 0 12px 0 clamp(18px, 2.2vw, 30px); background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px); border: 1px solid rgba(226, 232, 241, .9); border-radius: 26px; box-shadow: 0 12px 40px -28px rgba(14, 35, 80, .45); transition: height .35s var(--ease), box-shadow .35s, border-radius .35s, background-color .35s; }
.site-header.is-scrolled .site-header__inner { height: 70px; background: rgba(255, 255, 255, .94); box-shadow: 0 20px 50px -26px rgba(14, 35, 80, .5); }
/* Only the home page keeps a sticky header; sub-pages scroll it away so content gets the full viewport. */
body:not(.page-home) .site-header { position: relative; }
.has-mega-open .site-header__inner { border-radius: 26px 26px 26px 26px; background: #fff; }
.brand { flex: none; display: flex; align-items: center; }
.brand img { height: 56px; width: auto; transition: height .35s var(--ease), transform .35s var(--ease); }
.brand:hover img { transform: rotate(-2deg) scale(1.03); }
.site-header.is-scrolled .brand img { height: 46px; }
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: 2px; }
.main-nav__link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; font-weight: 600; font-size: .95rem; color: var(--navy); transition: color .25s, background-color .25s; }
.main-nav__link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--sky-2); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.main-nav__link:hover { color: var(--blue); }
.main-nav__link:hover::after, .main-nav__link.is-active::after, .has-dropdown.is-open > .main-nav__link::after { transform: scaleX(1); }
.main-nav__link.is-active { color: var(--blue); }
.main-nav__chev { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); transition: transform .35s var(--ease), background-color .25s; }
.has-dropdown.is-open .main-nav__chev { transform: rotate(180deg); background: var(--sky); }
.main-nav__mobile-extra { display: none; }

/* Mega menu */
.has-dropdown { position: static; }
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 10px); background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 40px 90px -40px rgba(14, 35, 80, .55); padding: 14px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.985); transform-origin: top center; transition: opacity .3s ease, transform .45s var(--ease), visibility .3s; }
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.has-dropdown.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
/* An active preview sets visibility: visible; keep it hidden (and unhoverable) while the menu is closed. */
.has-dropdown:not(.is-open) .mega-preview { visibility: hidden; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; }
.mega__col { min-width: 0; }
.mega__col--list { padding: 14px 6px 6px; }
.mega__label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 12px 10px; }
.mega__list { display: grid; gap: 4px; }
.mega__list li, .mega__popular li { opacity: 0; transform: translateX(-12px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--i) * 50ms + 80ms); }
.has-dropdown.is-open .mega__list li, .has-dropdown.is-open .mega__popular li { opacity: 1; transform: none; }
.mega__row { display: grid; grid-template-columns: 46px 1fr auto 18px; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 18px; color: var(--navy); transition: background-color .25s, color .25s; }
.mega__row-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); transition: background-color .25s, color .25s, transform .35s var(--ease); }
.mega__row-text { display: flex; flex-direction: column; min-width: 0; }
.mega__row-text strong { font-size: .98rem; line-height: 1.25; }
.mega__row-text small { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
.mega__row-count { min-width: 34px; text-align: center; padding: 4px 8px; border-radius: 999px; background: var(--soft); font-size: .74rem; font-weight: 800; color: var(--navy); transition: background-color .25s; }
.mega__row-arrow { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease); }
.mega__row.is-active { background: var(--navy); color: #fff; }
.mega__row.is-active .mega__row-icon { background: var(--sky); color: var(--navy); transform: rotate(-6deg); }
.mega__row.is-active small { color: rgba(255, 255, 255, .65); }
.mega__row.is-active .mega__row-count { background: rgba(255, 255, 255, .14); color: var(--sky); }
.mega__row.is-active .mega__row-arrow { opacity: 1; transform: none; color: var(--sky); }
.mega__all { display: flex; align-items: center; justify-content: space-between; margin: 12px 4px 0; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line); font-weight: 700; color: var(--blue); font-size: .9rem; transition: border-color .25s, background-color .25s; }
.mega__all small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sky); color: var(--navy); font-size: .72rem; }
.mega__all:hover { border-color: var(--blue); background: var(--blue-soft); }
.mega__col--preview { position: relative; min-height: 380px; }
.mega-preview { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .35s ease, transform .5s var(--ease), visibility .35s; }
.mega-preview.is-active { opacity: 1; visibility: visible; transform: none; }
.mega-preview__media { position: relative; flex: 1; min-height: 220px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; isolation: isolate; }
.mega-preview__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); transition: transform 1.2s var(--ease); }
.mega-preview.is-active .mega-preview__media img { transform: scale(1); }
.mega-preview__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 35, 80, 0) 35%, rgba(14, 35, 80, .88)); }
.mega-preview__count { position: absolute; top: 16px; left: 16px; }
.mega-preview__title { font-family: var(--display); text-transform: uppercase; color: #fff; font-size: 2.3rem; line-height: 1; }
.mega-preview__text { margin: 14px 4px 10px; font-size: .88rem; color: var(--muted); }
.mega-preview__subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 4px; }
.mega-preview__subs a { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: .76rem; font-weight: 600; color: var(--navy); transition: background-color .2s, border-color .2s, color .2s; }
.mega-preview__subs a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.mega__col--aside { display: flex; flex-direction: column; background: var(--soft); border-radius: 20px; padding: 18px 14px 14px; }
.mega__col--aside .mega__label { margin-left: 4px; }
.mega__popular { display: grid; gap: 6px; }
.mega-product { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 14px; background: transparent; text-align: left; transition: background-color .25s; }
.mega-product:hover { background: #fff; }
.mega-product__img { width: 52px; height: 52px; flex: none; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; }
.mega-product__img img { width: auto; height: auto; max-width: 40px; max-height: 40px; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s var(--ease); }
.mega-product:hover .mega-product__img img { transform: scale(1.12) rotate(-4deg); }
.mega-product__text { display: flex; flex-direction: column; min-width: 0; }
.mega-product__text strong { font-size: .82rem; color: var(--navy); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-product__text small { font-size: .74rem; font-weight: 700; color: var(--blue); }
.mega-b2b { margin-top: auto; background: var(--sky); border-radius: 16px; padding: 16px; color: var(--navy); }
.mega-b2b strong { display: block; font-size: .95rem; line-height: 1.25; }
.mega-b2b p { font-size: .8rem; margin: 6px 0 12px; color: rgba(14, 35, 80, .75); line-height: 1.4; }

/* Header actions */
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.header-phone { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; color: var(--navy); font-weight: 700; font-size: .88rem; transition: background-color .25s; }
.header-phone:hover { background: var(--soft); }
.header-phone__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); transition: background-color .25s, color .25s, transform .35s var(--ease); }
.header-phone:hover .header-phone__icon { background: var(--blue); color: #fff; transform: rotate(-12deg); }
.header-phone__text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.header-phone__text small { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--soft); border-radius: 999px; color: var(--muted); }
.lang-switch > .icon { margin: 0 4px 0 6px; }
.lang-switch__opt { padding: 7px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; color: var(--navy); transition: background-color .2s, color .2s; }
.lang-switch__opt:hover { background: #fff; }
.lang-switch__opt.is-current { background: var(--navy); color: #fff; box-shadow: 0 6px 14px -6px rgba(14, 35, 80, .6); }
.site-header__cta { padding: 13px 20px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero { --hero-bg: #d9e8fb; --hero-accent: #2b56a3; position: relative; z-index: 1; background-color: var(--hero-bg); transition: background-color 1s var(--ease); margin-top: calc(-1 * (var(--header-h) + 12px)); padding-top: calc(var(--header-h) + 12px); isolation: isolate; }
.hero__glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(60% 70% at 72% 45%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
        radial-gradient(rgba(14, 35, 80, .07) 1.2px, transparent 1.3px) 0 0 / 22px 22px; }
.hero__stage { position: relative; display: grid; min-height: clamp(560px, calc(100vh - 250px), 740px); overflow: hidden; }
.hero-slide { position: relative; grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 1s; }
.hero-slide.is-active { visibility: visible; z-index: 1; transition-delay: 0s; }
.hero-slide__inner { height: 100%; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 3vw, 50px); padding-block: 30px 20px; }
.hero-slide__content { max-width: 620px; color: var(--navy); }
.hero-slide__content > * { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .6s var(--ease); }
.hero-slide.is-active .hero-slide__content > * { opacity: 1; transform: none; transition-duration: .8s; }
.hero-slide.is-active .hero-slide__content > :nth-child(1) { transition-delay: .2s; }
.hero-slide.is-active .hero-slide__content > :nth-child(2) { transition-delay: .3s; }
.hero-slide.is-active .hero-slide__content > :nth-child(3) { transition-delay: .45s; }
.hero-slide.is-active .hero-slide__content > :nth-child(4) { transition-delay: .55s; }
.hero-slide.is-active .hero-slide__content > :nth-child(5) { transition-delay: .65s; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1.5px solid rgba(14, 35, 80, .75); border-radius: 999px; background: rgba(255, 255, 255, .35); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-slide__title { font-family: var(--font); font-weight: 800; font-size: clamp(2.7rem, 5.6vw, 5.4rem); line-height: .98; letter-spacing: -.045em; margin: 22px 0 18px; color: var(--navy); }
.hero-slide__title em { font-style: normal; color: var(--hero-accent); transition: color 1s var(--ease); }
.hero-slide__text { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.55; color: rgba(14, 35, 80, .82); max-width: 520px; margin-bottom: 28px; }
.hero-trust { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: .88rem; font-weight: 600; color: rgba(14, 35, 80, .8); }
.hero-trust .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--navy); color: #fff; }
.btn--lg { padding: 17px 28px; font-size: 1rem; }
.btn--line { border-color: var(--navy); color: var(--navy); background: rgba(255, 255, 255, .25); }
.btn--line:hover { background: var(--navy); color: #fff; }
.hero-slide__visual { position: relative; align-self: stretch; display: grid; place-items: center; }
.hero-slide__disc { position: absolute; width: min(78%, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 68%); transform: scale(.6); opacity: 0; transition: transform 1.2s var(--ease), opacity 1s; }
.hero-slide.is-active .hero-slide__disc { transform: scale(1); opacity: 1; }
.hero-slide__img { position: relative; width: 112%; max-width: none; height: auto; filter: drop-shadow(0 40px 50px rgba(14, 35, 80, .22)); opacity: 0; transform: translate3d(90px, 30px, 0) rotate(5deg) scale(.9); transition: opacity .5s ease, transform .5s ease; will-change: transform; }
.hero-slide.is-active .hero-slide__img { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(0) scale(1); transition: opacity .9s ease .15s, transform 1.1s var(--ease) .15s; }
.hero-slide.is-active .hero-slide__visual { animation: heroFloat 7s ease-in-out 1.3s infinite; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bob { 50% { transform: translateY(-8px); } }

.hero__controls { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 4px 34px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); color: var(--navy); font-weight: 700; font-size: .85rem; overflow: hidden; isolation: isolate; transition: background-color .3s, color .3s, transform .3s var(--ease); }
.hero-pill:hover { background: rgba(255, 255, 255, .8); transform: translateY(-2px); }
.hero-pill__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: background-color .3s, color .3s; }
.hero-pill__fill { position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .14); transform-origin: left; transform: scaleX(0); }
.hero-pill.is-active { background: var(--navy); color: #fff; }
.hero-pill.is-active .hero-pill__icon { background: var(--sky); color: var(--navy); }
.hero-pill.is-active .hero-pill__fill { animation: pillFill var(--slide-dur, 7s) linear forwards; }
[data-slider].is-paused .hero-pill.is-active .hero-pill__fill { animation-play-state: paused; }
@keyframes pillFill { to { transform: scaleX(1); } }
@keyframes progress { to { width: 100%; } }
.hero-pager { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px); }
.hero-pager__btn { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--navy); transition: background-color .25s, color .25s, transform .25s var(--ease); }
.hero-pager__btn:hover { background: #fff; }
.hero-pager__btn--next { background: var(--navy); color: #fff; }
.hero-pager__btn--next:hover { background: var(--navy-2); transform: translateX(2px); }
.hero-pager__count { min-width: 64px; text-align: center; font-size: .82rem; font-weight: 700; color: rgba(14, 35, 80, .55); font-variant-numeric: tabular-nums; }
.hero-pager__count b { color: var(--navy); font-size: 1rem; }

.hero { display: flow-root; }
.hero-features { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: -44px; padding: 10px; background: var(--navy); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(14, 35, 80, .6); }
.hero-features li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-weight: 600; font-size: .86rem; line-height: 1.3; color: rgba(255, 255, 255, .9); }
.hero-features li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.hero-features__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--sky); }
.hero-features__icon .icon { width: 20px; height: 20px; }
.hero + section { padding-top: clamp(100px, 10vw, 130px); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(70px, 9vw, 130px) 0; }
.section--tight-top { padding-top: clamp(50px, 6vw, 80px); }
.section--soft { background: var(--soft); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.section-head .display { max-width: 820px; }
.section-head__script { margin-bottom: 8px; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .lead { max-width: 760px; margin: 14px auto 0; }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cat-grid > .cat-card { grid-column: span 2; }
.cat-grid > .cat-card:nth-child(n + 4) { grid-column: span 3; min-height: 360px; }
.cat-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; border-radius: var(--r-xl); overflow: hidden; color: #fff; padding: 26px; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s; }
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cat-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.cat-card:hover > img { transform: scale(1.09); }
.cat-card__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 35, 80, 0) 30%, rgba(14, 35, 80, .92) 100%); transition: background .4s; }
.cat-card:hover .cat-card__shade { background: linear-gradient(180deg, rgba(31, 65, 133, .2) 0%, rgba(14, 35, 80, .95) 100%); }
.cat-card__count { position: absolute; top: 22px; left: 22px; }
.cat-card__name { display: block; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 2.1vw, 2.5rem); line-height: 1; margin-bottom: 10px; overflow-wrap: anywhere; hyphens: auto; }
.cat-card__text { display: block; font-size: .92rem; color: rgba(255, 255, 255, .8); padding-right: 54px; }
.cat-card__arrow { position: absolute; right: 22px; bottom: 26px; }
.cat-card:hover .cat-card__arrow { transform: rotate(45deg); }

/* Power / references */
.power { background: var(--navy); color: #fff; margin: 0 14px; border-radius: var(--r-xl); position: relative; overflow: hidden; isolation: isolate; }
.power::before, .power::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; }
.power::before { width: 520px; height: 520px; background: rgba(43, 86, 163, .55); top: -200px; right: -120px; }
.power::after { width: 380px; height: 380px; background: rgba(159, 208, 255, .14); bottom: -160px; left: -100px; }
.power__head { max-width: 900px; margin-bottom: 50px; }
.power__head .lead { color: rgba(255, 255, 255, .72); margin-top: 18px; }
.power--compact .power__head { margin-bottom: 36px; }
.logo-marquee { display: grid; gap: 16px; --gap: 16px; --speed: 50s; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-tile { width: 190px; height: 104px; flex: none; background: #fff; border-radius: 20px; display: grid; place-items: center; padding: 18px 26px; transition: transform .3s var(--ease); }
.logo-tile:hover { transform: translateY(-4px) scale(1.03); }
.logo-tile img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.logo-grid .logo-tile { width: auto; }
.power__note { margin: 22px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .55); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; border-top: 1px solid rgba(255, 255, 255, .14); }
.stat { padding: 34px 28px 30px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.stat:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.stat__value { display: block; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; color: var(--sky); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stat__label { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.certs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.certs__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-right: 8px; color: rgba(255, 255, 255, .85); }
.certs__title .icon { color: var(--sky); }
.cert { padding: 9px 16px; border: 1px solid rgba(159, 208, 255, .5); color: var(--sky); border-radius: 999px; font-weight: 700; font-size: .85rem; letter-spacing: .04em; }

/* Retail */
.retail__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.retail__media { position: relative; padding: 0 30px 40px 0; }
.retail__photo { border-radius: var(--r-xl); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.retail__badge { position: absolute; right: 0; bottom: 0; width: 230px; background: var(--sky); color: var(--navy); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); font-weight: 600; font-size: .9rem; line-height: 1.35; }
.retail__badge-num { display: block; font-family: var(--display); font-size: 3.6rem; line-height: 1; margin-bottom: 6px; }
.retail__mini { position: absolute; top: 30px; left: -24px; width: 130px; height: 130px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; padding: 18px; animation: bob 6s ease-in-out infinite; }
.retail__mini img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.retail__content .script { margin: 8px 0 18px; }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.benefit { padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.benefit:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit__icon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); margin-bottom: 16px; transition: background-color .3s, color .3s; }
.benefit:hover .benefit__icon { background: var(--sky); color: var(--navy); }
.benefit h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; }
.benefit p { color: var(--muted); font-size: .92rem; margin: 0; }
.steps { margin-top: clamp(50px, 6vw, 80px); background: var(--soft); border-radius: var(--r-xl); padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.steps__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; color: var(--navy); max-width: 180px; line-height: 1; }
.steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step__num { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--blue); }
.step strong { display: block; color: var(--navy); margin-bottom: 4px; }
.step p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Product cards */
.product-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.product-card__media { position: relative; aspect-ratio: 1; background: var(--soft); margin: 8px; border-radius: 18px; display: grid; place-items: center; padding: 26px; overflow: hidden; }
.product-card__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.07) rotate(-2deg); }
.product-card__media .chip { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: .68rem; padding: 6px 10px; }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 10px 18px 18px; }
.product-card__brand { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.product-card__title { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 6px; }
.product-card__desc { font-size: .85rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.product-card__pack { display: inline-flex; align-items: flex-start; gap: 6px; font-size: .76rem; color: var(--muted); line-height: 1.35; }
.product-card__pack .icon { margin-top: 1px; color: var(--blue); }

/* Carousel */
.carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0 40px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: 18px; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); width: max-content; }
.carousel__item { width: 290px; scroll-snap-align: start; scroll-margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.carousel-nav { display: flex; gap: 10px; }

/* Segments */
.segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.segment { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); min-height: 300px; overflow: hidden; isolation: isolate; transition: color .35s, border-color .35s, transform .35s var(--ease); }
.segment::before { content: ""; position: absolute; inset: 0; background: var(--navy); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.segment:hover { color: #fff; border-color: var(--navy); transform: translateY(-4px); }
.segment:hover::before { transform: none; }
.segment__num { position: absolute; top: 22px; right: 24px; font-family: var(--display); font-size: 1.1rem; color: var(--muted); }
.segment__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sky); color: var(--navy); margin-bottom: auto; }
.segment h3 { font-size: 1.25rem; margin: 40px 0 10px; color: inherit; }
.segment p { font-size: .92rem; color: var(--muted); margin: 0; transition: color .35s; }
.segment:hover p { color: rgba(255, 255, 255, .75); }
.segment__arrow { margin-top: 18px; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; transition: opacity .3s, transform .3s; }
.segment:hover .segment__arrow { opacity: 1; transform: translateX(6px); color: var(--sky); }

/* Heritage */
.heritage { position: relative; margin: 0 14px; border-radius: var(--r-xl); overflow: hidden; min-height: 680px; display: flex; align-items: center; isolation: isolate; }
.heritage__bg { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; z-index: -2; will-change: transform; }
.heritage__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 35, 80, .9) 10%, rgba(14, 35, 80, .35) 70%); }
.heritage__inner { padding-block: 80px; }
.heritage__card { max-width: 620px; color: rgba(255, 255, 255, .82); }
.heritage__card .display { margin-bottom: 24px; }
.heritage__stats { display: flex; gap: 40px; margin: 30px 0 34px; }
.heritage__stats strong { display: block; font-family: var(--display); font-weight: 400; font-size: 2.6rem; color: var(--sky); line-height: 1; }
.heritage__stats span { font-size: .88rem; }

/* Suppliers */
.suppliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.supplier { padding: 34px 30px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.supplier:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.supplier__logos { display: flex; align-items: center; gap: 22px; height: 76px; margin-bottom: 22px; }
.supplier__logos img { max-height: 100%; max-width: 160px; width: auto; object-fit: contain; }
.supplier h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 10px; }
.supplier p { color: var(--muted); font-size: .92rem; margin: 0; }

/* CTA band */
.cta-band-wrap { padding: 0 0 clamp(70px, 9vw, 120px); }
.cta-band { position: relative; background: var(--sky); border-radius: var(--r-xl); padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .35); z-index: -1; }
.cta-band__text { max-width: 640px; }
.cta-band__text p { color: rgba(14, 35, 80, .75); margin: 14px 0 0; font-size: 1.05rem; }
.cta-band__actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; margin-right: 140px; }
.cta-band__img { position: absolute; right: 30px; bottom: -30px; width: 170px; transform: rotate(10deg); filter: drop-shadow(0 20px 30px rgba(14, 35, 80, .3)); animation: bob 6s ease-in-out infinite; }

/* Footer */
.site-footer { position: relative; background: var(--navy); color: rgba(255, 255, 255, .75); margin: 0 14px 14px; border-radius: var(--r-xl); overflow: hidden; padding-top: clamp(50px, 6vw, 80px); isolation: isolate; }
.footer-news { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-news .display { margin: 10px 0 12px; }
.footer-news p { margin: 0; }
.inline-field { display: flex; gap: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); padding: 6px; border-radius: 999px; }
.inline-field input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0 18px; color: #fff; outline: none; }
.inline-field input::placeholder { color: rgba(255, 255, 255, .5); }
.inline-field:focus-within { border-color: var(--sky); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.check input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--blue); }
.check a { text-decoration: underline; }
.check--light { color: rgba(255, 255, 255, .6); margin-top: 14px; }
.check--light input { accent-color: var(--sky); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 36px; padding: 56px 0 46px; }
.footer-brand img { height: 74px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; max-width: 340px; }
.footer-title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer-links li + li { margin-top: 10px; }
.footer-links a, .footer-contact a { transition: color .2s; }
.footer-links a:hover, .footer-contact a:hover { color: var(--sky); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.footer-contact li + li { margin-top: 12px; }
.footer-contact .icon { color: var(--sky); margin-top: 3px; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.socials a:hover { background: var(--sky); color: var(--navy); border-color: var(--sky); transform: translateY(-3px); }
.socials .icon { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 22px 0 30px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; position: relative; z-index: 1; }
.footer-bottom p { margin: 0; }
.footer-bottom ul { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--sky); }
.footer-word { position: absolute; left: 50%; bottom: -.22em; transform: translateX(-50%); font-family: var(--display); font-size: clamp(6rem, 22vw, 20rem); line-height: 1; color: rgba(255, 255, 255, .035); pointer-events: none; z-index: -1; white-space: nowrap; }

/* Forms */
.input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(43, 86, 163, .14); }
textarea.input { resize: vertical; min-height: 110px; }
select.input { 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='%235d6b80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--compact { gap: 12px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.field--full { grid-column: 1 / -1; }
.form-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.form-foot p { margin: 0; max-width: 420px; }
.form-foot a { text-decoration: underline; }
.form-status { margin: 0; font-size: .9rem; font-weight: 600; min-height: 0; }
.form-status:empty { display: none; }
.form-status.is-ok { color: #2f7d12; }
.form-status.is-error { color: #c0322b; }
.site-footer .form-status.is-ok { color: var(--sky); margin-top: 10px; }
.site-footer .form-status.is-error { color: #ff9a8f; margin-top: 10px; }
.stack { display: grid; gap: 12px; }
.notice { padding: 14px 18px; border-radius: 14px; font-weight: 600; margin-bottom: 18px; }
.notice--ok { background: #eefbd9; color: #2f6b12; }
.notice--error { background: #fdecea; color: #a12d26; }

/* Modals */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 18px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(14, 35, 80, .6); backdrop-filter: blur(6px); animation: fade .3s ease; }
.modal__dialog { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 36px); overflow: auto; background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-lg); animation: pop .45s var(--ease); }
.modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--soft); display: grid; place-items: center; color: var(--navy); transition: transform .25s, background-color .25s; }
.modal__close:hover { transform: rotate(90deg); background: var(--sky); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.modal--newsletter .modal__dialog { max-width: 900px; padding: 0; display: grid; grid-template-columns: .9fr 1.1fr; }
.nl-visual { position: relative; min-height: 100%; overflow: hidden; }
.nl-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nl-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 35, 80, .1), rgba(14, 35, 80, .85)); }
.nl-visual__badge { position: absolute; left: 28px; bottom: 28px; z-index: 1; color: #fff; }
.nl-visual__big { display: block; font-family: var(--display); font-size: 6rem; line-height: .9; color: var(--sky); }
.nl-body { padding: clamp(26px, 4vw, 44px); }
.nl-body .display { margin-bottom: 12px; }
.nl-body > p { color: var(--muted); }
.perks { display: grid; gap: 8px; margin: 0 0 20px; }
.perks li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: .92rem; color: var(--navy); }
.perks .icon { color: var(--navy); background: var(--sky); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.nl-body .link-btn { display: block; margin: 12px auto 0; }
.quote-product { display: flex; gap: 16px; align-items: center; background: var(--soft); border-radius: var(--r-md); padding: 12px; margin-bottom: 20px; padding-right: 50px; }
.quote-product__img { width: 76px; height: 76px; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 8px; flex: none; }
.quote-product__img img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.quote-product .eyebrow { margin-bottom: 4px; }
.quote-product strong { display: block; color: var(--navy); line-height: 1.3; }
.quote-product small { color: var(--muted); }
.modal--quote .display { margin-bottom: 6px; }

/* Cookie notice */
.cookie-notice { position: fixed; left: 18px; bottom: 18px; z-index: 120; max-width: 420px; display: flex; gap: 16px; align-items: center; background: var(--navy); color: rgba(255, 255, 255, .8); padding: 16px 18px; border-radius: 20px; box-shadow: var(--shadow-lg); font-size: .84rem; line-height: 1.45; animation: pop .5s var(--ease); }
.cookie-notice p { margin: 0; }
.cookie-notice strong { color: #fff; }
.cookie-notice a { color: var(--sky); text-decoration: underline; }
.cookie-notice .btn--dark { background: var(--sky); color: var(--navy); }

/* Inner page hero */
.page-hero { padding: 14px 14px 0; }
.page-hero__frame { position: relative; min-height: 460px; border-radius: var(--r-xl); overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; background: var(--navy); }
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.page-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 35, 80, .92) 0%, rgba(14, 35, 80, .55) 60%, rgba(14, 35, 80, .3) 100%), linear-gradient(0deg, rgba(14, 35, 80, .6), transparent 50%); }
.page-hero__word { position: absolute; right: -.04em; bottom: -.2em; font-family: var(--display); font-size: clamp(5rem, 15vw, 14rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .2); z-index: -1; white-space: nowrap; pointer-events: none; }
.page-hero__inner { padding-block: 60px 56px; color: #fff; }
.page-hero__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .95; margin: 18px 0 14px; max-width: 900px; }
.page-hero__title em { font-style: normal; color: var(--sky); }
.page-hero__text { max-width: 640px; color: rgba(255, 255, 255, .8); font-size: 1.08rem; margin: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a:hover { color: var(--sky); }
.crumbs--dark ol { color: var(--muted); }
.crumbs--dark a:hover { color: var(--blue); }

/* Products overview */
.cat-rows { display: grid; gap: 16px; }
.cat-row { display: grid; grid-template-columns: 260px 1fr auto auto; gap: 30px; align-items: center; padding: 14px 26px 14px 14px; border-radius: var(--r-xl); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.cat-row:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); }
.cat-row__img { aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; }
.cat-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cat-row:hover .cat-row__img img { transform: scale(1.08); }
.cat-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cat-row__name { font-family: var(--display); text-transform: uppercase; font-size: 2.2rem; color: var(--navy); line-height: 1; margin-top: 6px; }
.cat-row__tag { font-weight: 700; color: var(--blue); }
.cat-row__text { color: var(--muted); font-size: .92rem; max-width: 640px; }
.cat-row__thumbs { display: flex; }
.cat-row__thumbs img { width: 74px; height: 74px; object-fit: contain; background: var(--soft); border: 3px solid #fff; border-radius: 50%; padding: 8px; margin-left: -18px; mix-blend-mode: multiply; }
.cat-row:hover .round-btn { transform: rotate(45deg); }
.volume { margin-top: 50px; background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: clamp(30px, 4vw, 50px); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.volume .display { color: #fff; }
.volume .lead { color: rgba(255, 255, 255, .75); margin: 12px 0 0; max-width: 720px; }

/* Category page */
.catalog__bar { display: grid; gap: 18px; margin-bottom: 30px; }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: .88rem; white-space: nowrap; color: var(--navy); transition: background-color .2s, border-color .2s, color .2s; }
.filter-chip small { font-size: .72rem; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 2px 7px; }
.filter-chip:hover { border-color: var(--navy); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-chip.is-active small { background: var(--sky); color: var(--navy); }
.catalog__tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search-field { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.search-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(43, 86, 163, .12); }
.search-field input { flex: 1; border: 0; padding: 13px 0; outline: none; background: transparent; min-width: 0; }
.select-field select { appearance: none; padding: 13px 44px 13px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; font-weight: 600; }
.catalog__count { font-size: .88rem; color: var(--muted); font-weight: 600; margin-left: auto; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.product-grid .product-card { animation: cardIn .5s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
.catalog__empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.soon { text-align: center; max-width: 620px; margin: 0 auto; padding: 50px 0; }
.soon__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--sky); color: var(--navy); margin-bottom: 22px; }
.soon .lead { margin: 14px 0 26px; }
.other-cats { margin-top: clamp(60px, 7vw, 100px); }
.other-cats .display { margin-bottom: 20px; }
.other-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini-cat { display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; color: var(--navy); transition: border-color .25s, background-color .25s; }
.mini-cat img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.mini-cat .icon { margin-left: auto; transition: transform .25s; }
.mini-cat:hover { background: var(--soft); border-color: var(--navy); }
.mini-cat:hover .icon { transform: rotate(45deg); }

/* About */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.story__media { position: sticky; top: 24px; }
.story__media img { border-radius: var(--r-xl); width: 100%; aspect-ratio: 1; object-fit: cover; }
.story__stamp { position: absolute; right: -14px; bottom: -14px; background: var(--sky); border-radius: 50%; width: 170px; height: 170px; display: grid; place-content: center; text-align: center; padding: 20px; color: var(--navy); box-shadow: var(--shadow); animation: spinIn 1.2s var(--ease) both; }
.story__stamp strong { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; }
.story__stamp span { font-size: .78rem; font-weight: 600; line-height: 1.3; }
@keyframes spinIn { from { transform: rotate(-30deg) scale(.6); opacity: 0; } }
.story__text .display { margin-bottom: 22px; }
.story__text p:not(.lead) { color: var(--muted); }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how__item { position: relative; background: #fff; border-radius: var(--r-lg); padding: 30px; }
.how__num { position: absolute; top: 24px; right: 26px; font-family: var(--display); font-size: 2.6rem; color: var(--blue-soft); line-height: 1; }
.how__item h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: 8px; }
.how__item p { color: var(--muted); margin: 0; font-size: .94rem; }
.values { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.values .display { margin-bottom: 20px; }
.values p:not(.lead) { color: var(--muted); }
.values__media img { border-radius: var(--r-xl); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Contact */
.contact { display: grid; grid-template-columns: 1.35fr .9fr; gap: 24px; align-items: start; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); }
.contact__form .display { margin-bottom: 24px; }
.contact-card { background: var(--navy); color: rgba(255, 255, 255, .8); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); position: relative; overflow: hidden; }
.contact-card::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(43, 86, 163, .5); filter: blur(60px); top: -80px; right: -80px; }
.contact-card .display { margin-bottom: 24px; position: relative; z-index: 1; }
.contact-list { display: grid; gap: 18px; position: relative; z-index: 1; }
.contact-list li { display: flex; gap: 14px; align-items: center; }
.contact-list__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: var(--sky); flex: none; }
.contact-list strong { display: block; color: #fff; }
.contact-list span { font-size: .88rem; }
.contact-list a:hover strong { color: var(--sky); }
.contact-card__note { display: flex; gap: 8px; align-items: center; margin: 26px 0 0; font-size: .88rem; color: var(--sky); position: relative; z-index: 1; }
.contact-segments { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 18px; }
.contact-segments div { background: #fff; padding: 16px 20px; }
.contact-segments strong { display: block; color: var(--navy); font-size: .95rem; }
.contact-segments span { color: var(--muted); font-size: .85rem; }

/* Legal */
.legal-head { padding: clamp(40px, 6vw, 70px) 0 0; }
.legal-head .display { margin-bottom: 24px; }
.legal-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.legal-tabs a { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: .88rem; }
.legal-tabs a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.prose { color: #2a3547; }
.prose h2 { font-size: 1.35rem; color: var(--navy); margin: 2em 0 .6em; }
.prose h3 { font-size: 1.08rem; color: var(--navy); margin: 1.6em 0 .5em; }
.prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.prose ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 1em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { display: inline-block; font-size: .85rem; color: var(--muted); background: var(--soft); padding: 6px 14px; border-radius: 999px; }
.table-wrap { overflow-x: auto; margin: 1em 0 1.6em; border: 1px solid var(--line); border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--soft); color: var(--navy); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.prose tr:last-child td { border-bottom: 0; }

/* Simple pages */
.simple-page { min-height: 60vh; display: flex; align-items: center; }
.simple-page .lead { margin: 16px 0 28px; }
.big-404 { font-family: var(--display); font-size: clamp(8rem, 24vw, 16rem); line-height: .9; color: transparent; -webkit-text-stroke: 3px var(--blue); margin-bottom: 10px; }

/* Reveal on scroll */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    .header-phone { padding: 0; }
    .header-phone__text { display: none; }
    .mega__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .mega__col--aside { display: none; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-grid > .cat-card, .cat-grid > .cat-card:nth-child(n + 4) { grid-column: span 1; min-height: 360px; }
    .cat-grid > .cat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cat-card { min-height: 360px; }
    .segments { grid-template-columns: repeat(2, 1fr); }
    .logo-grid { grid-template-columns: repeat(4, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .steps__title { max-width: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cat-row { grid-template-columns: 200px 1fr auto; }
    .cat-row__thumbs { display: none; }
}

@media (max-width: 1024px) {
    :root { --header-h: 68px; }
    .burger { display: block; }
    .site-header__cta { display: none; }
    .main-nav { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); background: #fff; padding: 100px 24px 30px; transform: translateX(100%); visibility: hidden; transition: transform .45s var(--ease), visibility .45s; overflow-y: auto; margin: 0; z-index: -1; }
    .nav-open .main-nav { transform: none; visibility: visible; box-shadow: var(--shadow-lg); }
    .site-header__actions { margin-left: auto; }
    .nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(14, 35, 80, .5); z-index: 80; }
    .site-header { z-index: 95; }
    .site-header__inner { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; height: 68px; padding-right: 8px; }
    .main-nav__link::after { display: none; }
    .main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
    .main-nav__link { font-size: 1.15rem; padding: 14px 16px; justify-content: space-between; width: 100%; }
    .mega { position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 4px 0 12px; opacity: 1; visibility: visible; display: none; border-radius: 0; }
    .has-dropdown.is-open .mega { display: block; transform: none; }
    .mega__inner { grid-template-columns: 1fr; }
    .mega__col--preview, .mega__col--aside, .mega__label { display: none; }
    .mega__col--list { padding: 0; }
    .header-phone { display: none; }
    .main-nav__mobile-extra { display: grid; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
    .main-nav__contact { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
    .retail__grid, .story, .values, .contact, .footer-news { grid-template-columns: 1fr; }
    .story__media { position: relative; top: 0; max-width: 520px; }
    .retail__media { max-width: 560px; }
    .suppliers, .how { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat, .stat:not(:nth-child(3n + 1)) { padding: 28px 20px 26px 0; border-left: 0; }
    .stat:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .14); }
    .modal--newsletter .modal__dialog { grid-template-columns: 1fr; max-width: 520px; }
    .nl-visual { min-height: 150px; }
    .nl-visual__big { font-size: 3.6rem; }
    .cta-band { grid-template-columns: 1fr; }
    .cta-band__actions { flex-direction: row; flex-wrap: wrap; margin-right: 0; }
    .cta-band__img { width: 120px; right: 16px; bottom: auto; top: 20px; opacity: .9; }
    .cta-band__text { padding-right: 110px; }
    .other-cats__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .hero-slide__inner { grid-template-columns: 1fr; align-content: start; padding-block: 34px 0; gap: 0; }
    .hero-slide__content { max-width: 680px; }
    .hero-slide__visual { margin-top: -10px; }
    .hero-slide__img { width: min(100%, 700px); }
    .hero-features { grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
    .hero-features li:nth-child(4) { border-left: 0; }
    .hero-features li:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 720px) {
    body { font-size: 15px; }
    .page-hero { padding: 8px 8px 0; }
    .hero { margin-top: calc(-1 * (var(--header-h) + 8px)); padding-top: calc(var(--header-h) + 8px); }
    .hero-slide__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); margin: 16px 0 14px; }
    .hero-slide__text { margin-bottom: 22px; }
    .hero-slide .btn-row .btn { flex: 1 1 auto; }
    .hero-trust { font-size: .8rem; }
    .hero__controls { gap: 10px; padding-bottom: 26px; }
    .hero-pills { flex-wrap: nowrap; gap: 6px; }
    .hero-pill { padding: 6px; }
    .hero-pill__label { display: none; }
    .hero-pill.is-active { padding-right: 14px; }
    .hero-pill.is-active .hero-pill__label { display: inline; }
    .hero-pager__count { display: none; }
    .hero-pager__btn { width: 38px; height: 38px; }
    .hero-features { grid-template-columns: 1fr 1fr; padding: 6px; }
    .hero-features li { padding: 10px 8px; font-size: .78rem; gap: 10px; }
    .hero-features li:nth-child(odd) { border-left: 0; }
    .hero-features li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
    .hero-features li:last-child { grid-column: 1 / -1; }
    .hero-features__icon { width: 36px; height: 36px; }
    .power, .heritage, .site-footer { margin-inline: 8px; }
    .site-footer { margin-bottom: 8px; }
    .hero-slide__inner { padding-top: 24px; }
    .cat-grid { grid-template-columns: 1fr; }
    .cat-grid > .cat-card, .cat-grid > .cat-card:nth-child(n + 4), .cat-grid > .cat-card:last-child:nth-child(odd) { grid-column: auto; }
    .cat-card { min-height: 300px; }
    .segments { grid-template-columns: 1fr; }
    .segment { min-height: 0; }
    .benefits { grid-template-columns: 1fr; }
    .steps__list { grid-template-columns: 1fr; }
    .logo-tile { width: 150px; height: 86px; padding: 14px 18px; }
    .logo-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat__label { font-size: .85rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .inline-field { flex-direction: column; border-radius: 22px; }
    .inline-field input { padding: 12px 14px; }
    .cat-row { grid-template-columns: 1fr; padding: 12px; gap: 16px; }
    .cat-row .round-btn { display: none; }
    .cat-row__body { padding: 0 8px 10px; }
    .retail__badge { width: 190px; padding: 16px; }
    .retail__mini { width: 96px; height: 96px; left: -6px; }
    .heritage { min-height: 0; }
    .heritage__stats { gap: 24px; }
    .carousel__item { width: 250px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-card__media { padding: 14px; margin: 6px; }
    .product-card__body { padding: 8px 12px 14px; }
    .product-card__desc { display: none; }
    .round-btn { width: 40px; height: 40px; }
    .cookie-notice { left: 8px; right: 8px; bottom: 8px; max-width: none; }
    .lang-switch .icon { display: none; }
    .brand img, .site-header.is-scrolled .brand img { height: 42px; }
    .site-header { padding: 8px 8px 0; }
    .cta-band__text { padding-right: 0; }
    .cta-band__img { display: none; }
    .catalog__count { margin-left: 0; }
    .catalog__bar { padding: 0; }
    .page-hero__frame { min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .marquee__track { animation: none !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Quick contact (side tab + drawer)
   ========================================================================== */
.qc-tab { position: fixed; right: 0; top: 50%; z-index: 110; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px 20px; border: 0; border-radius: 18px 0 0 18px; background: var(--blue); color: #fff; box-shadow: -10px 14px 40px -14px rgba(14, 35, 80, .55); transform: translate(0, -50%); transition: transform .45s var(--ease), background-color .25s, padding .3s var(--ease); }
.qc-tab:hover { background: var(--navy); padding-right: 16px; }
.qc-tab__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky); color: var(--navy); animation: qcPulse 2.8s ease-out infinite; }
.qc-tab__label { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@keyframes qcPulse { 0% { box-shadow: 0 0 0 0 rgba(159, 208, 255, .7); } 70%, 100% { box-shadow: 0 0 0 12px rgba(159, 208, 255, 0); } }
.qc-open .qc-tab, .has-mega-open .qc-tab, .nav-open .qc-tab { transform: translate(120%, -50%); }

.qc { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.qc.is-open { pointer-events: auto; }
.qc__backdrop { position: absolute; inset: 0; background: rgba(14, 35, 80, .55); backdrop-filter: blur(5px); opacity: 0; transition: opacity .4s ease; }
.qc.is-open .qc__backdrop { opacity: 1; }
.qc__panel { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(460px, calc(100% - 28px)); background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateX(calc(100% + 40px)) scale(.96); transform-origin: right center; transition: transform .6s cubic-bezier(.22, 1.2, .36, 1); }
.qc.is-open .qc__panel { transform: none; }
.qc__panel::before { content: ""; position: absolute; top: -90px; right: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--sky); opacity: .35; filter: blur(40px); pointer-events: none; }
.qc__head, .qc__panel .form-grid > *, .qc__direct { opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.qc.is-open .qc__head, .qc.is-open .qc__panel .form-grid > *, .qc.is-open .qc__direct { opacity: 1; transform: none; }
.qc.is-open .qc__head { transition-delay: .15s; }
.qc.is-open .qc__panel .form-grid > :nth-child(n) { transition-delay: .25s; }
.qc.is-open .qc__panel .form-grid > :nth-child(6) { transition-delay: .3s; }
.qc.is-open .qc__panel .form-grid > :nth-child(7) { transition-delay: .35s; }
.qc.is-open .qc__panel .form-grid > :nth-child(8) { transition-delay: .4s; }
.qc.is-open .qc__panel .form-grid > :nth-child(9) { transition-delay: .45s; }
.qc.is-open .qc__panel .form-grid > :nth-child(10) { transition-delay: .5s; }
.qc.is-open .qc__direct { transition-delay: .6s; }
.qc__head { position: relative; padding-right: 40px; margin-bottom: 20px; }
.qc__head .display { margin-bottom: 8px; }
.qc__head p { margin: 0; }
.qc__panel .form-grid { grid-template-columns: 1fr; }
.qc__panel .form-foot { flex-direction: column; align-items: stretch; }
.qc__panel .form-foot .btn { width: 100%; }
.qc__direct { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); font-size: .9rem; }
.qc__direct span { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.qc__direct a { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy); }
.qc__direct a .icon { color: var(--blue); }
.qc__direct a:hover { color: var(--blue); }

/* Footer credit */
.footer-credit { display: flex; justify-content: center; padding: 0 0 26px; position: relative; z-index: 1; }
.footer-credit a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: .82rem; color: rgba(255, 255, 255, .65); transition: border-color .25s, color .25s, background-color .25s; }
.footer-credit__icon { display: inline-grid; width: 22px; height: 22px; color: var(--sky); transition: transform .5s var(--ease); }
.footer-credit__icon svg { width: 100%; height: 100%; }
.footer-credit strong { color: #fff; font-weight: 700; }
.footer-credit a:hover { border-color: var(--sky); background: rgba(159, 208, 255, .08); }
.footer-credit a:hover .footer-credit__icon { transform: rotate(-14deg) scale(1.15); }

@media (max-width: 720px) {
    .qc-tab { padding: 12px 8px 14px; gap: 8px; border-radius: 14px 0 0 14px; }
    .qc-tab__icon { width: 28px; height: 28px; }
    .qc-tab__label { font-size: .7rem; }
    .qc__panel { top: auto; right: 8px; left: 8px; bottom: 8px; width: auto; max-height: calc(100% - 60px); transform: translateY(calc(100% + 40px)); }
}

/* Page dim while the mega menu is open (desktop) */
.has-mega-open::before { content: ""; position: fixed; inset: 0; z-index: 85; background: rgba(14, 35, 80, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .3s ease; pointer-events: none; }

/* ==========================================================================
   Product detail page
   ========================================================================== */
.pdp { padding: clamp(30px, 4vw, 50px) 0 clamp(60px, 7vw, 100px); }
.pdp .crumbs ol { margin-bottom: 26px; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.pdp__gallery { display: grid; gap: 14px; }
.pdp__media { position: relative; margin: 0; background: var(--soft); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.pdp__media--pack { aspect-ratio: 1; display: grid; place-items: center; padding: clamp(30px, 6vw, 70px); }
.pdp__media--pack::after { content: ""; position: absolute; left: 20%; top: 20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(159, 208, 255, .35); filter: blur(60px); z-index: -1; }
.pdp__media--pack img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__media--photo { aspect-ratio: 4 / 5; }
.pdp__media--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pdp__media--photo:hover img { transform: scale(1.03); }
.pdp__chip { position: absolute; top: 20px; left: 20px; z-index: 3; }
.pdp__brand { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
a.pdp__brand:hover { text-decoration: underline; }
.pdp__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .98; color: var(--navy); margin-bottom: 16px; }
.pdp__info .lead { margin-bottom: 24px; }
.facts { margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 18px; font-size: .92rem; }
.facts > div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; color: var(--navy); font-weight: 600; }
.facts a { color: var(--blue); }
.facts a:hover { text-decoration: underline; }
.facts--inline { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.facts--inline > div { grid-template-columns: 1fr; gap: 4px; }
.facts--inline > div + div { border-top: 0; border-left: 1px solid var(--line); }
.pdp__note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .85rem; color: var(--muted); }
.pdp__note .icon { color: var(--blue); }
.pdp__about { max-width: 860px; margin-top: clamp(50px, 6vw, 80px); }
.pdp__about .display { margin-bottom: 14px; }
.pdp__about p { color: #2a3547; }

/* FAQ */
.faq { margin-top: clamp(50px, 6vw, 80px); max-width: 960px; }
.faq__head { margin-bottom: 22px; }
.faq__list { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .25s, box-shadow .25s; }
.faq__item[open] { border-color: transparent; box-shadow: var(--shadow); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font-size: 1rem; color: var(--navy); line-height: 1.4; }
.faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); transition: background-color .25s, transform .35s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--navy); border-radius: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq__item[open] .faq__icon { background: var(--sky); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__item p { margin: 0; padding: 0 22px 20px; color: var(--muted); line-height: 1.65; }
.container--narrow .faq { margin-top: 0; }

/* Brand strip on category pages */
.brand-strip { margin-top: clamp(50px, 6vw, 80px); }
.brand-strip__list { display: flex; flex-wrap: wrap; gap: 12px; }
.brand-pill { display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .25s, transform .25s var(--ease); }
.brand-pill:hover { border-color: var(--navy); transform: translateY(-2px); }
.brand-pill img { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; background: var(--soft); padding: 8px; }
.brand-pill span { display: flex; flex-direction: column; line-height: 1.25; }
.brand-pill strong { color: var(--navy); }
.brand-pill small { color: var(--muted); font-size: .78rem; }

/* Brands */
.brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.brand-card { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.brand-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-4px); }
.brand-card__logo { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--soft); padding: 18px; }
.brand-card__logo img { max-height: 100%; width: auto; object-fit: contain; }
.brand-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-card__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1; color: var(--navy); margin-top: 6px; }
.brand-card__body small { color: var(--blue); font-weight: 600; }
.brand-card__text { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.brand-card__thumbs { grid-column: 1 / -1; display: flex; gap: 8px; }
.brand-card__thumbs img { width: 64px; height: 64px; object-fit: contain; background: var(--soft); border-radius: 14px; padding: 8px; mix-blend-mode: multiply; }
.brand-card__cta { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); font-size: .9rem; }
.brand-card:hover .brand-card__cta .icon { transform: translateX(4px); }
.brand-card__cta .icon { transition: transform .25s var(--ease); }
.brand-head { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: stretch; margin-bottom: 28px; }
.brand-head__logo { display: grid; place-items: center; border-radius: var(--r-lg); background: var(--soft); padding: 22px; }
.brand-head__logo img { max-height: 90px; width: auto; }
.filter-chips--static { flex-wrap: wrap; margin-bottom: 22px; }
.catalog__tools--solo { margin-bottom: 24px; }
.product-card__title a:hover { color: var(--blue); }

@media (max-width: 1180px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 1024px) {
    .pdp__grid, .brand-grid { grid-template-columns: 1fr; }
    .pdp__gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pdp__media--pack { grid-column: 1 / -1; max-height: 520px; aspect-ratio: auto; height: min(90vw, 520px); }
    .pdp__media--photo { border-radius: var(--r-lg); }
    .facts--inline { grid-template-columns: 1fr 1fr; }
    .facts--inline > div:nth-child(3) { border-left: 0; }
    .facts--inline > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
    .facts > div { grid-template-columns: 110px 1fr; }
    .brand-card { grid-template-columns: 1fr; }
    .brand-card__logo { aspect-ratio: auto; height: 110px; }
    .brand-head { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Consumer waiting list on product pages */
.waitlist { position: relative; margin-top: 28px; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(135deg, #eaf3ff 0%, #f6faff 100%); border: 1px solid rgba(91, 155, 240, .45); overflow: clip; isolation: isolate; }
.waitlist::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(159, 208, 255, .5); filter: blur(40px); z-index: -1; }
.waitlist__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.waitlist__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); animation: qcPulse 2s ease-out infinite; }
.waitlist__title { margin: 12px 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.25; }
.waitlist__text { margin: 0 0 16px; color: #3d4a5e; font-size: .92rem; }
.inline-field--light { background: #fff; border-color: var(--line); }
.inline-field--light input { color: var(--ink); }
.inline-field--light input::placeholder { color: var(--muted); }
.inline-field--light:focus-within { border-color: var(--navy); }
.waitlist .check { margin-top: 12px; }
.waitlist .form-status { margin-top: 10px; }
@media (max-width: 720px) {
    .waitlist { padding: 18px; }
    .waitlist .inline-field { flex-direction: column; border-radius: 18px; }
    .waitlist .inline-field input { padding: 12px 14px; }
}

/* Private label landing */
.pl { margin-bottom: clamp(50px, 6vw, 80px); }
.pl__areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pl-area { display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.pl-area:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.pl-area h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; }
.pl-area p { color: var(--muted); font-size: .92rem; margin: 0 0 18px; }
.pl-area__thumbs { display: flex; gap: 8px; margin-top: auto; }
.pl-area__thumbs img { width: 64px; height: 64px; object-fit: contain; background: var(--soft); border-radius: 14px; padding: 8px; mix-blend-mode: multiply; }
.pl-area__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--blue); font-size: .9rem; }
.pl__steps { margin-top: 24px; }
.pl__steps-list { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .pl__areas, .pl__steps-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .pl__areas, .pl__steps-list { grid-template-columns: 1fr; } }