/* ATD Heavy Machinery Spares, public site design system */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    /* brand */
    --orange-500: #e05a2a;
    --orange-600: #c84b1e;
    --orange-700: #a83d16;
    --graphite-950: #0c0e11;
    --graphite-900: #111418;
    --graphite-850: #161a1f;
    --graphite-800: #1c2127;
    --graphite-700: #2a3038;
    --steel-400: #9aa0a8;
    --steel-300: #c3c7cc;

    /* dark-only palette */
    --bg: #000000;
    --surface: #0c0c0c;
    --surface-2: #141414;
    --surface-3: #1c1c1c;
    --line: #262626;
    --line-strong: #3a3a3a;
    --text: #f7f7f7;
    --text-2: #cfcfcf;
    --text-3: #9a9a9a;
    --accent: #ff6a33;
    --accent-hover: #ff8557;
    --accent-text: #ff8a5c;
    --on-accent: #111316;
    --focus: #79aefc;
    --success: #6fd39b;
    --success-bg: #12291c;
    --danger: #ff8a80;
    --danger-bg: #2d1615;
    --image-well: #eceae6;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 14px 34px -14px rgb(0 0 0 / .7);
    --shadow-3: 0 24px 60px -20px rgb(0 0 0 / .8);

    /* scale */
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
    --fs-2xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
    --fs-3xl: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
    --fs-display: clamp(2.375rem, 1.55rem + 3.2vw, 4rem);

    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
    --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;
    --section-y: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --container: 1240px;
    --gutter: clamp(1rem, .5rem + 2.2vw, 2rem);
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: dark;
}

/* ---------- 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); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
.nav-section { scroll-margin-top: calc(var(--header-h) + 1rem); }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--canvas, var(--bg));
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
/* Skip content-visibility on catalog cards — it delayed image paint in Firefox and
   left empty grey boxes while Chrome DevTools looked “idle”. Below-fold only. */
@media (min-width: 900px) {
    @supports (content-visibility: auto) {
        .part-card:nth-child(n+9),
        .tile:nth-child(n+7),
        .system:nth-child(n+5),
        .category-card:nth-child(n+7) {
            content-visibility: auto;
            contain-intrinsic-size: 360px;
        }
    }
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
main:focus { outline: none; }
.icon { flex-shrink: 0; }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }
.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: var(--s-4); top: -100px; z-index: 100;
    background: var(--accent); color: var(--on-accent); padding: var(--s-3) var(--s-4);
    font-weight: 650; border-radius: var(--radius); text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-text); margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.eyebrow--light { color: #f3a27f; }
/* Small labels that sit beside a section or page title. */
.hero .eyebrow,
.section-head .eyebrow,
.feature-band .eyebrow,
.about__copy .eyebrow,
.process__copy .eyebrow,
.cta-band .eyebrow,
.page-hero .eyebrow,
.part-info > .eyebrow { display: none; }
.page-title, .section-title, .hero__title, .part-info__title, .cta-band__title, .error-page__code {
    font-stretch: 82%;
    font-weight: 720;
    letter-spacing: -.012em;
    line-height: 1.05;
    text-wrap: balance;
}
.page-title { font-size: var(--fs-3xl); }
.page-title--sm { font-size: var(--fs-2xl); }
.section-title { font-size: var(--fs-2xl); }
.section-title--sm { font-size: var(--fs-xl); font-stretch: 88%; }
.section-title--light { color: #fff; }
.page-lead, .section-lead { color: var(--text-2); max-width: 62ch; }
.page-lead { font-size: var(--fs-md); margin-top: var(--s-4); }
.section-lead { margin-top: var(--s-2); }

/* ---------- Buttons & links ---------- */
.btn {
    --btn-h: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--btn-h); padding: 0 1.15rem;
    border: 1px solid transparent; border-radius: var(--radius);
    font-weight: 650; font-size: var(--fs-sm); letter-spacing: .01em; line-height: 1.1;
    text-decoration: none; white-space: nowrap;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .14); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--dark { background: var(--text); color: var(--bg); }
.btn--dark:hover { background: var(--text-2); }
.btn--outline { border-color: var(--line-strong); color: var(--text); background: var(--surface); }
.btn--outline:hover { border-color: var(--text); }
.btn--ghost-light { border-color: rgb(255 255 255 / .35); color: #fff; background: rgb(255 255 255 / .04); }
.btn--ghost-light:hover { border-color: #fff; background: rgb(255 255 255 / .1); }
.btn--whatsapp { background: #25d366; color: #fff; }
.btn--whatsapp:hover { background: #1ebe5d; color: #fff; }
.btn--lg { --btn-h: 52px; padding: 0 1.5rem; font-size: var(--fs-base); }
.btn--sm { --btn-h: 38px; padding: 0 .9rem; }
.btn--xs { --btn-h: 32px; padding: 0 .7rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; }
.btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
    display: inline-flex; align-items: center; gap: .65rem;
    min-height: 44px; padding: .3rem .85rem .3rem .95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    font-weight: 650; font-size: var(--fs-sm); color: var(--text); text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.link-arrow .icon { color: var(--accent); transition: transform .2s var(--ease), color .18s var(--ease); }
.link-arrow:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow: var(--shadow-2); }
.link-arrow:hover .icon { color: var(--accent); transform: translateX(3px); }
.link-arrow:active { transform: translateY(1px); }
.link-arrow--sm {
    min-height: 0; margin-top: var(--s-2); padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; font-size: var(--fs-xs);
}
.link-arrow--sm:hover { background: none; box-shadow: none; color: var(--accent-text); }
.link-arrow--cta {
    min-height: 56px; margin-top: var(--s-2); padding: .4rem .5rem .4rem .45rem;
    gap: .85rem; max-width: 100%;
}
.link-arrow__icon {
    display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.link-arrow__icon .icon { color: inherit; }
.link-arrow__label { min-width: 0; }
.link-arrow--cta .icon:last-child {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: .15rem;
    border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent);
}
.link-arrow--cta:hover { transform: translateY(-1px); }
.link-arrow--cta:hover .icon:last-child { background: var(--accent); color: var(--on-accent); }
.link-arrow--cta:active { transform: translateY(0); }

.icon-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: inherit;
    transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: var(--line); }

.chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 36px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 550;
    text-decoration: none; transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip--lg { min-height: 42px; }
.chip__count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip.is-active .chip__count { color: inherit; opacity: .75; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag { display: inline-flex; align-items: center; padding: .2rem .5rem; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.tag--accent { background: var(--accent); color: var(--on-accent); }

/* ---------- Topbar & header ---------- */
.topbar { display: none; background: var(--bg); color: var(--text-2); font-size: var(--fs-xs); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 36px; }
.topbar__list { display: flex; gap: var(--s-6); }
.topbar__list a, .topbar__note { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.topbar__list a:hover { color: var(--accent); }
.topbar .icon { color: var(--accent); }
@media (min-width: 900px) { .topbar { display: block; } }

/* ---------- Media skeletons (cold CDN / slow images) ---------- */
.media-frame {
    position: relative; display: grid; place-items: center;
    width: 100%; height: 100%; min-width: 0; min-height: 0;
}
.media-frame > picture { display: contents; }
.media-frame img {
    grid-area: 1 / 1;
    width: 100%; height: 100%; min-width: 0; min-height: 0;
    object-fit: contain;
    transition: opacity .28s var(--ease);
}
.media-frame.is-pending img { opacity: 0; }
.part-card__media .media-frame,
.tile__media .media-frame,
.category-card__media .media-frame,
.system__media .media-frame { width: 100%; height: 100%; }
.media-frame.is-pending::before {
    content: "";
    grid-area: 1 / 1;
    align-self: stretch; justify-self: stretch;
    border-radius: inherit;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--text) 4%, transparent) 0%,
            color-mix(in srgb, var(--text) 12%, transparent) 45%,
            color-mix(in srgb, var(--text) 4%, transparent) 90%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.1s ease-in-out infinite;
}
@keyframes skel-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .media-frame.is-pending::before { animation: none; opacity: .55; }
}

/* ---------- Splash ---------- */
.splash { display: none; pointer-events: none; }
.show-splash .splash {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    pointer-events: auto;
    background:
        radial-gradient(36% 28% at 50% 44%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 68%),
        #050505;
    animation: splash-auto .45s 1.6s forwards;
    transition: opacity .4s var(--ease), visibility .4s;
}
.splash__inner { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 28px; transition: transform .55s var(--ease); }
.splash__logo {
    display: block; width: clamp(196px, 42vw, 320px); height: auto;
    background: transparent;
    animation: splash-logo .8s var(--ease) both;
}
.splash__bar {
    position: relative; width: 180px; height: 3px; overflow: hidden; border-radius: 3px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    animation: splash-fade .4s .3s both;
}
.splash__bar span {
    position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #ffd9c7));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: splash-progress 2.2s cubic-bezier(.3, .7, .3, 1) .3s both;
}
.splash.is-complete .splash__bar span { animation: splash-finish .28s var(--ease) both; }
.splash.is-leaving { opacity: 0; visibility: hidden; }
.splash.is-leaving .splash__inner { transform: scale(1.06); }
@keyframes splash-logo { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes splash-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-progress { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@keyframes splash-finish { from { transform: scaleX(.85); } to { transform: scaleX(1); } }
@keyframes splash-auto { to { opacity: 0; visibility: hidden; } }

/* View Transitions hid document requests in Chrome Network and broke some Firefox
   navigations — keep a simple top progress bar instead. */
.nav-progress {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 2px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #ffd9c7));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
    transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none;
}
.is-navigating .nav-progress { opacity: 1; animation: nav-progress .55s cubic-bezier(.16, .84, .32, 1) both; }
@keyframes nav-progress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

.js #main { animation: page-arrive .32s var(--ease) both; }
@keyframes page-arrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .js #main { animation: none; }
    .splash__logo { animation: none; }
}

.site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    color: var(--text);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.site-header.is-stuck {
    background: color-mix(in srgb, var(--bg) 76%, transparent);
    border-bottom-color: color-mix(in srgb, var(--text) 12%, transparent);
    box-shadow: 0 18px 40px -28px rgb(0 0 0 / .9);
}
.site-header__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(.5rem, 2vw, 1.75rem);
    height: var(--header-h); min-width: 0;
}
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.site-header .brand {
    position: relative;
    margin-left: 0;
    padding-right: 1.15rem;
}
.site-header .brand::after {
    content: "";
    position: absolute; right: 0; top: 50%;
    width: 1px; height: 22px;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--text) 16%, transparent);
}
.brand__logo, .splash__logo, .drawer__logo {
    display: block;
    background: transparent;
    mix-blend-mode: normal;
    object-fit: contain;
}
.brand__logo { height: 48px; width: auto; max-width: 210px; }
.site-header .brand__logo {
    height: clamp(40px, 10vw, 44px);
    max-width: min(200px, 56vw);
    object-position: left center;
    transition: opacity .2s var(--ease);
}
.site-header .brand:hover .brand__logo { opacity: .86; }
.site-header__actions { display: flex; align-items: center; gap: .1rem; flex: none; margin-left: auto; }
.site-header__actions .icon-btn {
    width: 42px; height: 42px; border-radius: 999px;
}
.site-header__actions .icon-btn:hover {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: var(--text);
}
@media (min-width: 760px) {
    .site-header .brand__logo { height: 46px; max-width: 210px; }
    .site-header__actions { gap: .3rem; }
}

.primary-nav { position: relative; display: none; }
/* Shared active underline — transform-only (translate + scaleX) for 60fps slides. */
.primary-nav__indicator {
    position: absolute; left: 0; bottom: 0; width: 1px; height: 2.5px;
    border-radius: 2px 2px 0 0;
    background: var(--accent);
    opacity: 0; pointer-events: none; z-index: 0;
    transform: translate3d(0, 0, 0) scaleX(0);
    transform-origin: 0 50%;
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .15s var(--ease);
}
.primary-nav__indicator.is-ready { opacity: 1; }
.primary-nav__indicator.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .primary-nav__indicator { transition: none; }
}
.primary-nav.has-indicator .primary-nav__link[aria-current="page"]::after { display: none; }
.primary-nav__list { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-1); }
.primary-nav__item { position: relative; display: flex; align-items: center; }
.primary-nav__link {
    position: relative; display: inline-flex; align-items: center; height: var(--header-h);
    padding: 0 .85rem; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em;
    color: var(--text-2); text-decoration: none; border-radius: 999px; white-space: nowrap;
    transition: color .18s var(--ease);
}
.primary-nav__link::before {
    content: ""; position: absolute; left: .15rem; right: .15rem; top: 50%; height: 36px;
    transform: translateY(-50%); border-radius: 999px; background: transparent; z-index: -1;
    transition: background-color .18s var(--ease);
}
.primary-nav__link:hover, .has-mega:hover .primary-nav__link, .primary-nav__link:focus-visible { color: var(--text); }
.primary-nav__link:hover::before, .has-mega:hover .primary-nav__link::before, .primary-nav__link:focus-visible::before {
    background: color-mix(in srgb, var(--text) 9%, transparent);
}
.primary-nav__link[aria-current="page"] { color: var(--text); }
.primary-nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 0; height: 2.5px;
    border-radius: 2px 2px 0 0; background: var(--accent);
}
.has-mega .primary-nav__link { padding-right: .2rem; }
.has-mega .primary-nav__link::before { right: 0; }
.primary-nav__toggle {
    display: inline-grid; place-items: center; width: 30px; height: 32px; margin-right: .15rem;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2);
}
.primary-nav__toggle:hover, .primary-nav__toggle[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.primary-nav__toggle .icon { transition: transform .2s var(--ease); }
.primary-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.menu-btn { margin-left: .1rem; }
@media (min-width: 1100px) {
    /* Logo stays on the left. Sections sit between the center and the search control. */
    .site-header__bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        max-width: none; width: 100%; margin-inline: 0;
        column-gap: clamp(1.25rem, 2.4vw, 2.25rem);
        padding-left: clamp(1.25rem, 3vw, 3.25rem);
        padding-right: clamp(1.25rem, 3vw, 3.25rem);
    }
    .site-header .brand {
        margin-left: 0;
        padding-right: 1.4rem;
    }
    .site-header .brand::after { height: 26px; }
    .site-header .brand__logo { height: 52px; max-width: 230px; }
    .primary-nav {
        display: block; min-width: 0; justify-self: end;
        margin-left: 0;
        margin-right: clamp(1rem, 2.2vw, 2.25rem);
    }
    .primary-nav__list { flex-wrap: nowrap; gap: .5rem; }
    .primary-nav__link { padding-inline: clamp(.68rem, .3rem + .5vw, .95rem); }
    .site-header__actions {
        justify-self: end; margin-left: 0; gap: .35rem;
    }
    .menu-btn { display: none; }
}
@media (min-width: 1280px) {
    .primary-nav__link { padding-inline: .95rem; }
    .site-header .brand__logo { height: 54px; max-width: 240px; }
}

.mega {
    --mega-bg: #ffffff;
    --mega-head: #fafafa;
    --mega-line: #eeeae6;
    --mega-tint: color-mix(in srgb, var(--accent) 9%, transparent);
    position: absolute; left: auto; right: 0; top: 100%; z-index: 30; width: min(296px, calc(100vw - 1.5rem));
    padding-top: 10px;
    animation: mega-in .18s var(--ease);
}
[data-theme="dark"] .mega {
    --mega-bg: #161616;
    --mega-head: #1d1d1d;
    --mega-line: #2c2c2c;
    --mega-tint: color-mix(in srgb, var(--accent) 14%, transparent);
}
@keyframes mega-in { from { transform: translateY(-6px); } to { transform: none; } }
.mega__panel {
    position: relative; display: flex; flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 24px);
    background: var(--mega-bg); color: var(--text);
    border: 1px solid var(--mega-line); border-top: 3px solid var(--accent); border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / .06), 0 22px 48px -18px rgb(0 0 0 / .35);
}
[data-theme="dark"] .mega__panel { box-shadow: 0 22px 52px -16px rgb(0 0 0 / .8); }
.mega__panel::before {
    content: ""; position: absolute; top: -9px; left: auto; right: 22px; width: 12px; height: 12px;
    background: var(--accent); transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.mega__head {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px 8px; background: var(--mega-head); border-bottom: 1px solid var(--mega-line);
    border-radius: 5px 5px 0 0;
}
.mega__eyebrow { font-size: .6875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.mega__total { font-size: .6875rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }

.mega__list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 6px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.mega__list::-webkit-scrollbar { width: 6px; }
.mega__list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
.mega__list > li + li { margin-top: 2px; }

.mega__row {
    position: relative; display: flex; align-items: center; gap: 4px;
    border-radius: 7px; transition: background-color .15s var(--ease);
}
.mega__row::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
    background: var(--accent); transform: scaleY(0); transition: transform .18s var(--ease);
}
.mega__row:hover, .mega__row:focus-within, .mega__row.is-open { background: var(--mega-tint); }
.mega__row:hover::before, .mega__row:focus-within::before, .mega__row.is-open::before { transform: scaleY(1); }
.mega__cat {
    display: grid; gap: 1px; flex: 1; min-width: 0; min-height: 48px; align-content: center;
    padding: 6px 8px 6px 14px; color: var(--text); text-decoration: none;
}
.mega__name { font-size: .875rem; font-weight: 700; line-height: 1.25; letter-spacing: .005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s var(--ease); }
.mega__meta { font-size: .71875rem; font-weight: 500; line-height: 1.3; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mega__row:hover .mega__name, .mega__row.is-open .mega__name, .mega__cat:focus-visible .mega__name { color: var(--accent-text); }
.mega__arrow {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: 8px;
    border: 0; border-radius: 50%; cursor: pointer;
    color: var(--text-3); background: color-mix(in srgb, var(--text) 6%, transparent);
    transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.mega__row:hover .mega__arrow { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mega__arrow[aria-expanded="true"] { background: var(--accent) !important; color: var(--on-accent) !important; transform: translateX(2px); }

.mega__fly { position: absolute; top: -3px; left: auto; right: 100%; width: min(276px, 42vw); padding-right: 8px; animation: fly-in .16s var(--ease); }
@keyframes fly-in { from { transform: translateX(6px); } to { transform: none; } }
.mega__fly-inner {
    background: var(--mega-bg); color: var(--text);
    border: 1px solid var(--mega-line); border-top: 3px solid var(--accent); border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / .06), 0 22px 48px -18px rgb(0 0 0 / .35);
}
[data-theme="dark"] .mega__fly-inner { box-shadow: 0 22px 52px -16px rgb(0 0 0 / .8); }
.mega__fly-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 14px 8px; background: var(--mega-head); border-bottom: 1px solid var(--mega-line); border-radius: 5px 5px 0 0;
}
.mega__fly-title { font-size: .6875rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega__fly-all { flex: none; font-size: .6875rem; font-weight: 700; color: var(--text-2); text-decoration: none; }
.mega__fly-all:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.mega__subs { margin: 0; padding: 6px; }
.mega__subs li + li { margin-top: 2px; }
.mega__subs a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 38px; padding: 0 10px 0 12px; border-radius: 6px; border-left: 2px solid transparent;
    font-size: .8125rem; font-weight: 600; color: var(--text); text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.mega__sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega__sub-count {
    flex: none; min-width: 28px; padding: 1px 7px; border-radius: 999px; text-align: center;
    font-size: .6875rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums;
    color: var(--text-3); background: color-mix(in srgb, var(--text) 6%, transparent);
}
.mega__subs a:hover, .mega__subs a:focus-visible { background: var(--mega-tint); color: var(--accent-text); border-left-color: var(--accent); }
.mega__subs a:hover .mega__sub-count, .mega__subs a:focus-visible .mega__sub-count { background: var(--accent); color: var(--on-accent); }

.mega__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px; border-top: 1px solid var(--mega-line); background: var(--mega-head); border-radius: 0 0 7px 7px;
}
.mega__all, .mega__search {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 6px;
    font-size: .75rem; font-weight: 700; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.mega__all { background: var(--accent); color: var(--on-accent); }
.mega__all:hover { background: var(--accent-hover); color: var(--on-accent); }
.mega__all .icon { transition: transform .15s var(--ease); }
.mega__all:hover .icon { transform: translateX(2px); }
.mega__search { color: var(--text-2); }
.mega__search:hover { background: var(--mega-tint); color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .mega, .mega__fly { animation: none; } }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer__backdrop {
    position: absolute; inset: 0;
    background: rgb(0 0 0 / .68);
    backdrop-filter: blur(10px);
    animation: fade .22s var(--ease);
}
.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
    display: flex; flex-direction: column; color: var(--text);
    background:
        radial-gradient(120% 42% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 58%),
        #070707;
    border-left: 1px solid #222;
    box-shadow: -24px 0 70px rgb(0 0 0 / .55);
    animation: slide-in .28s var(--ease);
}
@media (max-width: 520px) { .drawer__panel { width: 100%; border-left: 0; } }
@keyframes slide-in { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) var(--s-4);
    border-bottom: 1px solid #1c1c1c;
}
.drawer__mark { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.drawer__logo { height: 42px; width: auto; max-width: 196px; object-position: left center; }
.drawer__close {
    width: 42px; height: 42px; border-radius: 999px; flex: none;
    background: #111; border-color: #2a2a2a;
}
.drawer__close:hover { background: #1a1a1a; border-color: #3a3a3a; color: var(--text); }
.drawer__body {
    flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-4) var(--s-8);
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.drawer .search-box {
    background: #101010; border-color: #2a2a2a; border-radius: 14px; box-shadow: none;
}
.drawer__kicker {
    margin: var(--s-5) 0 var(--s-2); padding: 0 .35rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__row {
    display: flex; align-items: center; gap: .25rem;
    padding-right: .2rem; border-radius: 14px;
}
.drawer__link {
    display: flex; align-items: center; flex: 1; min-width: 0; min-height: 52px;
    padding: 0 .85rem; border-radius: 14px;
    font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none;
}
.drawer__link:hover { background: #141414; }
.drawer__link[aria-current="page"] { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.drawer__arrow {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
    border: 1px solid #2c2c2c; border-radius: 999px; background: #111; color: var(--text-2); cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.drawer__arrow:hover, .drawer__nav > li.is-open .drawer__arrow {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.drawer__arrow .icon { transition: transform .22s var(--ease); }
.drawer__nav > li.is-open .drawer__arrow .icon { transform: rotate(180deg); }
.drawer__nav > li.is-open .drawer__row { background: #121212; }
.drawer__tree {
    margin: .15rem 0 .35rem; padding: .35rem;
    background: #101010; border: 1px solid #242424; border-radius: 16px;
    animation: drawer-tree .22s var(--ease);
}
.drawer__tree[hidden] { display: none; }
@keyframes drawer-tree { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.drawer__tree-label {
    padding: .55rem .7rem .4rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.drawer__tree .drawer__brand {
    display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 46px;
    padding: .35rem .55rem .35rem .7rem; border-radius: 12px;
    font-weight: 650; text-decoration: none; list-style: none; cursor: pointer;
}
.drawer__brand::-webkit-details-marker { display: none; }
.drawer__brand:hover, .drawer__details[open] > .drawer__brand { background: #181818; }
.drawer__brand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__chev { flex: none; color: var(--text-3); transition: transform .2s var(--ease); }
.drawer__details[open] > .drawer__brand .drawer__chev { transform: rotate(180deg); color: var(--accent-text); }
.drawer__subs { margin: .1rem 0 .35rem .7rem; padding: 0 0 .2rem .7rem; border-left: 1px solid #2a2a2a; }
.drawer__sub {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 40px; padding: 0 .45rem; border-radius: 8px;
    color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 550;
}
.drawer__sub:hover { background: #181818; color: var(--text); }
.drawer__sub--all { color: var(--accent-text); font-weight: 650; }
.drawer__foot {
    padding: var(--s-4) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
    border-top: 1px solid #1c1c1c;
    background: linear-gradient(180deg, rgb(7 7 7 / .2), #070707 28%);
}
.drawer__contact { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .65rem; }
.drawer__chip {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; border: 1px solid #2a2a2a; border-radius: 12px;
    background: #111; color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 650;
}
.drawer__chip:hover { border-color: #3a3a3a; background: #171717; }
.drawer__chip--whatsapp { border-color: #1ebe5d; background: #25d366; color: #fff; }
.drawer__chip--whatsapp:hover { border-color: #1aaf52; background: #1ebe5d; color: #fff; }
.drawer__contact:has(.drawer__chip:only-child) { grid-template-columns: 1fr; }
body.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__backdrop, .drawer__tree { animation: none; } }

/* ---------- Search ---------- */
.search-box {
    position: relative; display: flex; align-items: center; gap: var(--s-2);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 4px 4px 4px var(--s-3); box-shadow: var(--shadow-1);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-box:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px rgb(224 90 42 / .22); }
.search-box__icon { color: var(--text-3); display: grid; }
.search-box__input {
    flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: none;
    font-size: var(--fs-base); color: var(--text);
}
.search-box__input::placeholder { color: var(--text-3); }
.search-box__input::-webkit-search-cancel-button { cursor: pointer; }
.search-box__submit { --btn-h: 44px; }
.search-box__submit-icon { display: none; }
.search-box--lg .search-box__input { height: 50px; font-size: var(--fs-md); }
.search-box--lg .search-box__submit { --btn-h: 50px; padding: 0 1.4rem; }
.search-box--compact .search-box__submit-label { display: none; }
.search-box--compact .search-box__submit-icon { display: block; }
.search-box--compact .search-box__submit { padding: 0 .8rem; }
@media (max-width: 479px) {
    .search-box__submit-label { display: none; }
    .search-box__submit-icon { display: block; }
    .search-box__submit { padding: 0 .85rem; }
}
.search-box__panel {
    position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-3); overflow: hidden; color: var(--text); text-align: left;
}
.search-box__list { max-height: min(60vh, 440px); overflow-y: auto; padding: var(--s-1) 0; }
.search-option {
    display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-3); text-decoration: none; cursor: pointer;
}
.search-option[aria-selected="true"], .search-option:hover { background: var(--surface-2); }
.search-option__img { width: 48px; height: 40px; object-fit: contain; background: var(--image-well); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.search-option__title { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.search-option__meta { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.search-option__type { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); padding: .15rem .4rem; border-radius: var(--radius-sm); }
.search-option mark { background: rgb(224 90 42 / .22); color: inherit; border-radius: 2px; }
.search-box__empty, .search-box__loading { padding: var(--s-4); font-size: var(--fs-sm); color: var(--text-2); }
.search-box__all { display: block; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); font-weight: 650; font-size: var(--fs-sm); text-decoration: none; background: var(--surface-2); }
.search-box__all:hover { color: var(--accent-text); }

.search-dialog {
    width: min(720px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); margin: 8vh auto auto; padding: 0;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-3); overflow: visible;
}
.search-dialog::backdrop { background: rgb(8 10 12 / .6); }
.search-dialog[open] { animation: drop .18s var(--ease); }
.search-dialog__inner { padding: var(--s-4) var(--s-5) var(--s-5); }
.search-dialog__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.search-dialog__head .icon-btn:hover { background: var(--surface-2); border-color: var(--line); }
.search-dialog__title { font-weight: 700; font-stretch: 88%; font-size: var(--fs-lg); }
.search-dialog__hint { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-3); }

/* ---------- Hero (full-bleed slides) ---------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    /* Locked to the small viewport so the photo does not zoom when the browser toolbar hides. */
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    background: #111;
    display: flex; align-items: flex-end;
}
.slide__img { object-position: 70% center; }
.hero__stage, .hero__shade { position: absolute; inset: 0; }
.hero__shade {
    z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .55) 38%, rgb(0 0 0 / .18) 68%, rgb(0 0 0 / .28) 100%),
        linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 28%, rgb(0 0 0 / .55) 100%);
}
.slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity .7s var(--ease); }
.slide.is-active { opacity: 1; }
.slide__img { width: 100%; height: 100%; object-fit: cover; }
.slide__caption {
    position: absolute; right: var(--gutter); bottom: clamp(7.5rem, 6rem + 4vw, 10rem); z-index: 4;
    max-width: min(420px, 70vw); padding: var(--s-4) var(--s-5);
    background: rgb(0 0 0 / .55); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
    display: grid; gap: 2px;
}
.slide__title { font-weight: 700; font-stretch: 85%; font-size: var(--fs-lg); line-height: 1.2; }
.slide__text { font-size: var(--fs-sm); color: #e7e7e7; }
.hero__content {
    position: relative; z-index: 2; text-align: left;
    padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(7rem, 5.5rem + 4vw, 9.5rem);
    max-width: min(760px, 100%);
    margin-right: auto; margin-left: 0;
}
.hero__title { font-size: var(--fs-display); text-transform: uppercase; font-stretch: 76%; max-width: 14ch; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-md); color: #f0f0f0; max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-8); }
.hero__actions .btn, .page-hero__actions .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (min-width: 1100px) {
    .hero__content {
        max-width: min(760px, 100%);
        padding-left: clamp(1.25rem, 3vw, 3.25rem);
        padding-right: clamp(1.25rem, 3vw, 3.25rem);
    }
}
@media (max-width: 980px) { .slide__caption { display: none; } }
@media (max-width: 520px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }
}
@media (max-height: 560px) {
    .hero { height: auto; min-height: 0; align-items: center; }
    .slide__caption, .slider-controls { display: none; }
    .hero__content { padding-block: 1.15rem 1.35rem; }
    .hero__title { font-size: clamp(1.45rem, 5.4vh, 2.2rem); max-width: 18ch; }
    .hero__lead {
        margin-top: .55rem; font-size: .92rem; max-width: 46ch;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    }
    .hero__actions { margin-top: .8rem; }
    .hero__actions .btn { --btn-h: 42px; padding-inline: .95rem; font-size: .875rem; }
    .finder { margin-top: 1.25rem; }
}
.slider-controls {
    position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(4.5rem, 3.5rem + 2vw, 6rem);
    display: flex; align-items: center; gap: var(--s-2);
}
.slider-btn {
    display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .4); color: #fff;
    backdrop-filter: blur(6px);
}
.slider-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slider-dots { display: flex; gap: 2px; }
.slider-dot { width: 32px; height: 42px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.slider-dot::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .45); transition: background-color .2s var(--ease), width .2s var(--ease); }
.slider-dot.is-active::before { background: var(--accent); width: 28px; }
.slider-pause__play { display: none; }
[data-slider].is-paused .slider-pause__pause { display: none; }
[data-slider].is-paused .slider-pause__play { display: block; }
@media (max-width: 767px) {
    .slide__caption { display: none; }
    .slider-controls { left: var(--gutter); right: auto; }
}

/* ---------- Finder (overlapping hero) ---------- */
.finder { position: relative; z-index: 5; margin-top: calc(clamp(3.5rem, 2.5rem + 2vw, 5rem) * -1); }
.finder__card {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3); padding: var(--s-5);
    border-top: 4px solid var(--accent);
}
.finder__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.finder__title { font-size: var(--fs-lg); font-weight: 700; font-stretch: 88%; }
.finder__meta { font-size: var(--fs-sm); color: var(--text-3); }
.finder__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.finder__links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 768px) { .finder__card { padding: var(--s-6) var(--s-8); } }

/* ---------- Stats ---------- */
.stats { padding-block: var(--s-10) var(--s-4); }
.stats__list { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats__item {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; justify-items: start; gap: var(--s-1);
    padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stats__item::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent));
    transform: scaleX(.35); transform-origin: left; transition: transform .45s var(--ease);
}
.stats__item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow-2); }
.stats__item:hover::after { transform: scaleX(1); }
.stats__icon {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-2); border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--orange-600)); color: #fff;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.stats__value { font-size: var(--fs-3xl); font-weight: 720; font-stretch: 78%; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.stats__label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 550; }
.js [data-count-up] { display: inline-block; opacity: 0; animation: count-guard 0s 2.5s forwards; }
.js [data-count-up].is-set { opacity: 1; animation: none; }
.js [data-count-up].is-done { animation: count-pop .45s var(--ease); }
@keyframes count-guard { to { opacity: 1; } }
@keyframes count-pop { 40% { transform: scale(1.08); } }
@media (min-width: 900px) {
    .stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
    .stats__item { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-4); row-gap: 2px; align-items: center; padding: var(--s-6); }
    .stats__icon { grid-row: 1 / 3; width: 56px; height: 56px; margin: 0; border-radius: 14px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--first { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section--alt {
    background-color: var(--surface-2); border-block: 1px solid var(--line);
    background-image: radial-gradient(color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1.5px);
    background-size: 22px 22px;
}
.section-title { position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

/* ---------- Tiles (categories / sections) ---------- */
.tile {
    position: relative; display: flex; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.tile:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.tile__media { display: grid; place-items: center; background: var(--image-well); overflow: hidden; }
.tile__img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.tile__body { display: grid; align-content: center; gap: 2px; padding: var(--s-4) var(--s-5); min-width: 0; }
.tile__title { font-weight: 700; font-stretch: 88%; font-size: var(--fs-lg); line-height: 1.2; }
.tile__meta { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.tile__text { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); }
.tile__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-4); font-weight: 650; font-size: var(--fs-sm); color: inherit; text-decoration: none; }
.tile__cta .icon, .tile__arrow { color: var(--accent); transition: transform .2s var(--ease); }
.tile:hover .tile__cta .icon, .tile:hover .tile__arrow { transform: translateX(3px); }
.tile__arrow { margin: auto var(--s-4) auto 0; }

.tile--row { align-items: stretch; }
.tile--row .tile__media { width: 38%; max-width: 180px; aspect-ratio: 4 / 3; padding: var(--s-2); flex-shrink: 0; border-right: 1px solid var(--line); }
.tile--row .tile__body { flex: 1; }
.tile--lead { flex-direction: column; }
.tile--lead .tile__media { aspect-ratio: 16 / 9; padding: var(--s-6); border-bottom: 1px solid var(--line); }
.tile--lead .tile__title { font-size: var(--fs-2xl); font-stretch: 80%; }
.tile--lead .tile__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-5) var(--s-6) var(--s-6); }
.tile--lead .tile__cta { margin-top: auto; padding-top: var(--s-5); }
.tile--lead { position: relative; }
.tile__cover { position: absolute; inset: 0; z-index: 1; }
.tile--lead .tile__title a, .tile__tag, .tile--lead .tile__cta { position: relative; z-index: 2; }
.tile--lead .tile__title a { color: inherit; text-decoration: none; }
.tile__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.tile__tag { padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.tile__tag:hover { color: var(--accent-text); border-color: var(--accent); }
.bento { display: grid; gap: var(--s-4); }
@media (min-width: 768px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento__lead { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .bento { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(132px, auto); }
    .bento__lead { grid-column: 1; grid-row: span 3; }
    .bento .tile--row { flex-direction: column; }
    .bento .tile--row .tile__media { width: 100%; max-width: none; aspect-ratio: 16 / 7; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-3); }
    .bento .tile--row .tile__arrow { position: absolute; right: 0; bottom: var(--s-4); }
}
.tile--section { flex-direction: column; }
.tile--section .tile__media { aspect-ratio: 4 / 3; padding: var(--s-4); border-bottom: 1px solid var(--line); }
.tile--section .tile__body { padding-right: var(--s-10); }
.tile--section .tile__arrow { position: absolute; right: 0; bottom: var(--s-5); }
.section-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.section-actions { display: flex; justify-content: center; margin-top: var(--s-6); }
.section-actions .btn { min-width: min(100%, 22rem); }

/* ---------- Systems ---------- */
.systems { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.system { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-5); scroll-margin-top: calc(var(--header-h) + 1.5rem); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.system:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.system:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.system { position: relative; overflow: hidden; box-shadow: var(--shadow-1); }
.system::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.system:hover::before { transform: scaleY(1); }
.system__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); margin-bottom: var(--s-2); border-bottom: 2px solid var(--accent); }
.system__title { font-weight: 700; font-stretch: 88%; font-size: var(--fs-lg); line-height: 1.2; }
.system__links a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-inline: calc(var(--s-2) * -1); padding: .45rem var(--s-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; border-bottom: 1px dashed var(--line); transition: background-color .15s var(--ease), color .15s var(--ease); }
.system__place { display: grid; min-width: 0; }
.system__section { color: var(--text-3); font-size: var(--fs-xs); }
.system__links li:last-child a { border-bottom: 0; }
.system__links a:hover { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---------- Part cards ---------- */
.parts-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.parts-grid.parts-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) {
    .parts-grid.parts-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.parts-grid--row { grid-template-columns: 1fr; }
.parts-grid--showcase { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-6); }
.part-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.part-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.part-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-5); background: var(--image-well); border-bottom: 0; overflow: hidden; }
.part-card__img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.part-card__badge { position: absolute; z-index: 1; top: var(--s-3); left: var(--s-3); }
.part-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-5); }
.part-card__trail { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.part-card__title { font-size: var(--fs-base); font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.part-card__title a { text-decoration: none; }
.part-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.part-card__title a:hover { color: var(--accent-text); }
.part-card__summary { font-size: var(--fs-sm); color: var(--text-2); }
.part-card__actions { position: relative; z-index: 1; display: flex; flex-flow: row nowrap; align-items: stretch; gap: .4rem; margin-top: auto; padding-top: var(--s-3); }
.part-card__actions .link-arrow,
.part-card__actions .part-card__quote {
    flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    min-height: 34px; padding-inline: .5rem; font-size: var(--fs-xs); gap: .3rem;
}
.part-card__actions .part-card__quote { flex-grow: 1.35; }
.part-card__actions .link-arrow { box-shadow: none; background: transparent; }
.part-card__quote { border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); background: transparent; color: var(--accent-text); }
.part-card__quote:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.part-card__quote:active { background: var(--accent-hover); border-color: var(--accent-hover); }
.refs { display: grid; gap: .35rem; font-size: var(--fs-xs); }
.refs div { display: flex; gap: var(--s-2); min-width: 0; align-items: baseline; }
.refs dt { color: var(--text-3); flex-shrink: 0; min-width: 4.6rem; font-weight: 600; letter-spacing: .02em; }
.refs dd { color: var(--text); font-weight: 650; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.part-card .refs dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.placeholder { display: grid; justify-items: center; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-sm); }

@media (min-width: 640px) {
    .part-card--row { flex-direction: row; }
    .part-card--row .part-card__media { width: 220px; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--line); }
    .part-card--row .part-card__body { padding: var(--s-5); }
}
.part-card--showcase .part-card__media { aspect-ratio: 16 / 10; padding: 0; }
.part-card--showcase .part-card__img { object-fit: contain; }
.part-card--showcase .part-card__title { font-size: var(--fs-xl); font-stretch: 88%; font-weight: 700; }
.part-card--showcase .part-card__body { padding: var(--s-5) var(--s-6) var(--s-6); }

/* ---------- Toolbar & pagination ---------- */
.toolbar { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); scroll-margin-top: calc(var(--header-h) + 1rem); }
[data-listing-results].is-loading { opacity: .45; pointer-events: none; transition: opacity .15s var(--ease); }
.toolbar__form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.toolbar__search { position: relative; flex: 1 1 260px; display: flex; align-items: center; min-width: 0; }
.toolbar__search .icon { position: absolute; left: .8rem; color: var(--text-3); pointer-events: none; }
.toolbar__search .input { padding-left: 2.4rem; }
.toolbar__sort { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.toolbar__sort-btn { display: none; }
.js .toolbar__apply { display: none; }
.js .toolbar__search + .toolbar__sort + .toolbar__apply { display: none; }
.toolbar__panel { display: grid; gap: var(--s-2); margin-top: calc(var(--s-2) * -1); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .7); }
.toolbar__panel[hidden] { display: none; }
.toolbar__panel-label { margin: var(--s-2) 0 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.toolbar__panel-label:first-child { margin-top: 0; }
.toolbar__choices, .toolbar__filters { display: grid; gap: 2px; }
.toolbar__choice, .toolbar__filter {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    width: 100%; min-height: 44px; padding: .55rem .75rem;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--text);
    font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.toolbar__choice .icon { opacity: 0; color: var(--accent); }
.toolbar__choice.is-active, .toolbar__filter.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.toolbar__choice.is-active .icon { opacity: 1; }
.toolbar__filter span { display: grid; min-width: 0; }
.toolbar__filter small { color: var(--text-3); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.toolbar__filter em { font-style: normal; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 650; }
.toolbar__filter.is-active em { color: var(--accent-text); }
.toolbar__filter-toggle {
    display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px;
    margin-top: var(--s-2); padding: .55rem .75rem;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--text-3);
    font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    text-align: left; cursor: pointer;
}
.toolbar__filter-toggle span:first-child { margin-right: auto; }
.toolbar__filter-toggle .icon { flex: none; color: var(--text-2); transition: transform .2s var(--ease); }
.toolbar__filter-toggle[aria-expanded="true"] { color: var(--text); }
.toolbar__filter-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--accent-text); }
.toolbar__filters[hidden] { display: none; }
.toolbar__sort-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 759px) {
    .toolbar__form { flex-wrap: nowrap; gap: var(--s-2); }
    .toolbar__search { flex: 1 1 auto; }
    .toolbar__search .input { min-height: 44px; }
    .toolbar__sort { flex: 0 0 auto; }
    .toolbar__sort label, .toolbar__sort .select { display: none; }
    .toolbar__sort-btn {
        display: inline-flex; align-items: center; gap: .4rem;
        height: 44px; max-width: 42vw; padding: 0 .7rem 0 .85rem;
        border: 1px solid var(--line-strong); border-radius: var(--radius);
        background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 650;
    }
    .toolbar__sort-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .toolbar.is-open .toolbar__sort-btn { border-color: var(--accent); }
    .toolbar.is-open .toolbar__sort-btn .icon { transform: rotate(180deg); }
    .toolbar__sort-btn .icon { transition: transform .2s var(--ease); flex: none; }
    .toolbar__chips { display: none; }
}
@media (min-width: 760px) {
    .toolbar__panel { display: none; }
}
.input {
    width: 100%; min-height: 44px; padding: .6rem .85rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:hover { border-color: var(--text-3); }
.input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgb(224 90 42 / .22); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.select { width: auto; padding-right: 2.2rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
.textarea { min-height: 150px; resize: vertical; }
.mono-input { font-family: var(--font-mono); font-size: var(--fs-sm); }

.pagination {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-5);
    border-top: 1px solid var(--line); text-align: center;
}
.pagination__summary { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.pagination__list {
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    gap: 8px; margin: 0; padding: 0; max-width: 100%; list-style: none;
}
.pagination__edge { flex: none; }
.pagination__pages { min-width: 0; }
.pagination__pages ol {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 8px; margin: 0; padding: 0; list-style: none;
}
.pagination__btn {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .7rem;
    border: 1px solid transparent; border-radius: 10px; background: var(--surface);
    font-weight: 650; font-size: var(--fs-sm); text-decoration: none; font-variant-numeric: tabular-nums;
    transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
a.pagination__btn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--soft)); color: var(--text); }
.pagination__btn:active { transform: scale(.96); }
.pagination__btn.is-current { background: var(--accent); color: var(--on-accent); }
.pagination__btn.is-disabled { opacity: .38; }
.pagination__gap { display: inline-grid; place-items: center; min-width: 28px; height: 44px; color: var(--text-3); }
@media (max-width: 759px) {
    .pagination { gap: .7rem; margin-top: var(--s-6); padding-top: var(--s-4); }
    .pagination__summary {
        font-size: .7rem; font-weight: 700; letter-spacing: .14em;
        text-transform: uppercase; color: var(--text-3);
    }
    .pagination__list {
        gap: 6px; width: 100%; padding: 6px;
        background: color-mix(in srgb, var(--surface-3) 92%, black);
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
    }
    .pagination__pages ol {
        flex-wrap: nowrap; justify-content: safe center; gap: 4px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        scrollbar-width: none; padding: 1px 0;
    }
    .pagination__pages ol::-webkit-scrollbar { display: none; }
    .pagination__pages li { flex: none; scroll-snap-align: center; }
    .pagination__btn {
        width: clamp(30px, 8.4vw, 36px); min-width: clamp(30px, 8.4vw, 36px); height: 38px;
        padding: 0; border-radius: 11px; touch-action: manipulation;
    }
    .pagination__edge .pagination__btn { background: transparent; }
    .pagination__btn.is-current {
        background: var(--accent); color: var(--on-accent);
        box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 90%, black);
    }
    .pagination__gap { min-width: 18px; height: 38px; }
}

.empty-state {
    display: grid; justify-items: center; gap: var(--s-3); text-align: center;
    padding: var(--s-12) var(--s-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface);
    color: var(--text-2);
}
.empty-state .icon { color: var(--text-3); }
.empty-state h2, .empty-state h3 { color: var(--text); font-size: var(--fs-lg); font-weight: 700; font-stretch: 90%; }
.empty-state p { max-width: 54ch; }
.empty-state--left { justify-items: start; text-align: left; }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--s-6) clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.page-hero::before {
    --grid-line: color-mix(in srgb, var(--text) 5%, transparent);
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        radial-gradient(ellipse 60% 80% at 92% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, 36px 36px, 36px 36px;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
    mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.page-hero--banner { background: var(--bg); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-hero--banner::before { display: none; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-focus, center 40%); }
.page-hero__bg-img { filter: var(--photo-filter, none); }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--banner-veil); }
@media (min-width: 1024px) {
    .page-hero__bg { left: var(--banner-photo-start, 28%); }
    .page-hero__bg::after { background: var(--banner-veil-wide); }
    .page-hero--compact.page-hero--banner { padding-block: var(--s-8) var(--s-12); }
}
.page-hero--banner .logo-panel, .page-hero--banner .search-box:not(:focus-within) { box-shadow: var(--shadow-3); }
.page-hero--compact { padding-bottom: var(--s-8); }
.page-hero--compact .search-box { margin-top: var(--s-6); max-width: 760px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin-top: var(--s-6); align-items: center; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.page-hero__media { display: grid; place-items: center; background: var(--image-well); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); aspect-ratio: 4 / 3; }
.page-hero__img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
@media (min-width: 1024px) {
    .page-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-12); }
    .page-hero__grid--media { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); }
.facts strong { color: var(--text); font-size: var(--fs-lg); font-weight: 720; font-stretch: 85%; margin-right: .2rem; font-variant-numeric: tabular-nums; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--text-3); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.breadcrumbs a { color: var(--text-2); text-decoration: none; padding: .35rem 0; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

/* ---------- Category cards (catalog landing) ---------- */
.category-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.category-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.category-card__cover { position: absolute; inset: 0; z-index: 1; }
.category-card__title a, .category-card__sections, .category-card__links a, .category-card .link-arrow { position: relative; z-index: 2; }
.category-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.category-card:hover .category-card__title a { color: var(--accent-text); }
.category-card__media { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--s-5); background: var(--image-well); border-bottom: 1px solid var(--line); overflow: hidden; min-width: 0; min-height: 0; }
.category-card__img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.category-card__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-5); }
.category-card__title { font-size: var(--fs-xl); font-weight: 720; font-stretch: 84%; line-height: 1.15; }
.category-card__title a { text-decoration: none; }
.category-card__meta { font-size: var(--fs-sm); color: var(--text-3); }
.category-card__text { font-size: var(--fs-sm); color: var(--text-2); }
.category-card__sections { margin-top: var(--s-1); }
.category-card__sections summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 34px; padding: 0 .1rem; list-style: none; cursor: pointer;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.category-card__sections summary::-webkit-details-marker { display: none; }
.category-card__sections summary .icon { color: var(--accent); transition: transform .2s var(--ease); }
.category-card__sections[open] summary { color: var(--text); }
.category-card__sections[open] summary .icon { transform: rotate(180deg); }
.category-card__links { display: grid; margin: 0 0 var(--s-3); border-top: 1px solid var(--line); }
.category-card__links a { display: block; padding: .32rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.3; text-decoration: none; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-card__links a:hover { color: var(--text); }
.category-card .link-arrow { margin-top: auto; }

/* ---------- Part detail ---------- */
.part-page { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--s-5) var(--section-y); overflow-anchor: none; }
.part-layout { display: grid; gap: var(--s-8); margin-top: var(--s-5); }
@media (min-width: 1024px) { .part-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); align-items: start; } }
.part-gallery { position: relative; overflow-anchor: none; }
.part-gallery__main {
    position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1;
    width: 100%; padding: var(--s-8); background: var(--image-well); border: 1px solid var(--line); border-radius: var(--radius-lg); cursor: zoom-in; overflow: hidden;
}
.part-gallery__main--empty { cursor: default; }
.part-gallery__img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.part-gallery__zoom {
    position: absolute; right: var(--s-3); bottom: var(--s-3); display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .6rem; border-radius: var(--radius); background: rgb(17 20 24 / .82); color: #fff; font-size: var(--fs-xs); font-weight: 600;
}
.part-info__title { font-size: var(--fs-3xl); font-stretch: 80%; }
.ref-panel { position: relative; display: grid; gap: 0; margin-top: var(--s-6); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface-2); }
.ref-panel__list { display: grid; }
.ref-panel__row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); align-items: baseline; }
.ref-panel__row:last-of-type { border-bottom: 0; }
.ref-panel dt { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ref-panel dd { font-size: var(--fs-md); font-weight: 650; overflow-wrap: anywhere; }
.ref-panel__copy { justify-self: start; margin: 0 var(--s-4) var(--s-3); }
.part-info__desc { margin-top: var(--s-6); color: var(--text-2); font-size: var(--fs-md); max-width: 62ch; }
.spec-table { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.spec-table div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.spec-table dt { color: var(--text-3); font-weight: 600; }
.spec-table dd { font-weight: 550; overflow-wrap: anywhere; }
.spec-table a { color: var(--text); }
.spec-table a:hover { color: var(--accent-text); }
.part-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.part-cta__note { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-3); }
.part-cta__note .icon { margin-top: 2px; }
@media (max-width: 479px) { .part-cta .btn { width: 100%; } .ref-panel__row, .spec-table div { grid-template-columns: 1fr; gap: 2px; } }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: var(--s-8); border: 0; background: rgb(8 10 12 / .94); }
.lightbox[open] { display: grid; place-items: center; animation: fade .2s var(--ease); }
.lightbox::backdrop { background: transparent; }
.lightbox__img { max-width: min(1200px, 100%); max-height: calc(100vh - 6rem); width: auto; object-fit: contain; background: #fff; border-radius: var(--radius); }
.lightbox__close { position: fixed; top: var(--s-4); right: var(--s-4); color: #fff; background: rgb(255 255 255 / .08); }

/* ---------- Feature band / about / services / logos ---------- */
.feature-band, .cta-band {
    --band-bg: linear-gradient(135deg, #fff7f2 0%, #fdeee6 100%);
    --band-text: var(--text);
    --band-muted: var(--text-2);
    --band-eyebrow: var(--accent-text);
    --band-ghost-line: var(--line-strong);
    --band-ghost-hover: color-mix(in srgb, var(--accent) 10%, transparent);
}
[data-theme="dark"] .feature-band, [data-theme="dark"] .cta-band {
    --band-bg: #000000;
    --band-text: #ffffff;
    --band-muted: var(--steel-300);
    --band-eyebrow: #f3a27f;
    --band-ghost-line: rgb(255 255 255 / .35);
    --band-ghost-hover: rgb(255 255 255 / .1);
}
.feature-band .eyebrow--light, .cta-band .eyebrow--light { color: var(--band-eyebrow); }
.feature-band .section-title--light { color: var(--band-text); }
.cta-band .btn--ghost-light { border-color: var(--band-ghost-line); color: var(--band-text); background: transparent; }
.cta-band .btn--ghost-light:hover { border-color: var(--accent); background: var(--band-ghost-hover); color: var(--band-text); }

.feature-band { background: var(--band-bg); color: var(--band-text); padding-block: var(--section-y); border-block: 4px solid var(--accent); }
.feature-band__inner { display: grid; gap: var(--s-8); align-items: center; }
.feature-band__media { border-radius: var(--radius-lg); overflow: hidden; background: #fff; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.feature-band__img { width: 100%; height: 100%; object-fit: cover; }
.feature-band__text { margin-top: var(--s-4); color: var(--band-muted); font-size: var(--fs-md); max-width: 54ch; }
.feature-band__actions { margin-top: var(--s-8); }
@media (min-width: 1024px) { .feature-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); } }

.about__inner { display: grid; gap: var(--s-8); align-items: center; }
.about__text { margin: var(--s-5) 0 var(--s-6); font-size: var(--fs-md); color: var(--text-2); max-width: 64ch; }
.about__media {
    border-radius: var(--radius-lg); overflow: hidden; background: var(--image-well); border: 1px solid var(--line); aspect-ratio: 16 / 10; display: grid; place-items: center;
    box-shadow: 18px 18px 0 -2px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-2);
}
.about__img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1024px) { .about__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-16); } }

.services { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.service { position: relative; display: flex; flex-direction: column; padding: var(--s-6); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.service::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.service:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: var(--shadow-3); }
.service:hover::after { transform: scaleX(1); }
.service__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.service__title { font-size: var(--fs-lg); font-weight: 700; font-stretch: 88%; }
.service__text { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.service--media { padding: 0; overflow: hidden; }
.service__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--graphite-900); }
.service__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(12 14 17 / .55)); }
.service__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.service--media:hover .service__img { transform: scale(1.07); }
.service--media .service__body { padding: var(--s-6); }

/* ---------- Process ---------- */
.process__inner { display: grid; gap: var(--s-10); align-items: center; }
.process__visual { position: relative; isolation: isolate; }
.process__img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.steps { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.step {
    position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start;
    padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.step:not(:last-child)::after {
    content: ""; position: absolute; left: calc(var(--s-5) + 22px); top: calc(100% + 1px); width: 2px; height: calc(var(--s-4) - 2px);
    background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}
.step:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow-2); }
.step__icon {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-text);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.step:hover .step__icon { background: var(--accent); color: var(--on-accent); }
.step__title { font-size: var(--fs-md); font-weight: 700; font-stretch: 88%; line-height: 1.3; }
.step__text { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); }
@media (min-width: 768px) {
    .process__visual::before {
        content: ""; position: absolute; z-index: -1; inset: 22px -16px -16px 22px; border-radius: var(--radius-lg);
        background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 30%, transparent) 0 2px, transparent 2px 11px);
    }
}
@media (min-width: 1024px) { .process__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-16); } }

.logo-slider { min-width: 0; }
.logo-slider__viewport {
    overflow: hidden; min-width: 0; touch-action: pan-y; cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-slider.is-static .logo-slider__viewport { cursor: auto; -webkit-mask-image: none; mask-image: none; }
.logo-slider.is-dragging .logo-slider__viewport { cursor: grabbing; }
.logos { display: flex; gap: var(--s-3); margin: 0; will-change: transform; user-select: none; }
.logos__item {
    flex: 0 0 auto; min-width: 0; height: 104px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-3) var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.logos__item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow-1); }
.logo-slider--compact .logos__item { height: 84px; }
.logos__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; transition: transform .25s var(--ease); }
.logos__item:hover .logos__img { transform: scale(1.05); }
.logo-panel { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.logo-panel__title { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }

/* ---------- CTA band ---------- */
.cta-band { --band-solid: #fff3ec; position: relative; isolation: isolate; overflow: hidden; background: var(--band-solid); color: var(--band-text); border-top: 4px solid var(--accent); }
[data-theme="dark"] .cta-band { --band-solid: #000000; }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-band__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cta-band__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--band-solid) 86%, transparent), color-mix(in srgb, var(--band-solid) 94%, transparent));
}
.cta-band__inner { display: grid; padding-block: clamp(3rem, 2.25rem + 4vw, 6rem); align-items: center; }
.cta-band__title { font-size: var(--fs-2xl); }
.cta-band__text { margin-top: var(--s-3); color: var(--band-muted); max-width: 52ch; font-size: var(--fs-md); }
.cta-band__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--s-3);
    margin-top: var(--s-8);
}
.cta-band__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}
@media (max-width: 479px) {
    .cta-band__actions { gap: .5rem; }
    .cta-band__actions .btn {
        --btn-h: 44px;
        padding-inline: .7rem;
        font-size: var(--fs-sm);
        letter-spacing: 0;
    }
}
@media (min-width: 1024px) {
    .cta-band__inner { grid-template-columns: minmax(0, 600px); }
    .cta-band__bg { left: 40%; }
    .cta-band__bg::after { background: linear-gradient(90deg, var(--band-solid) 0%, color-mix(in srgb, var(--band-solid) 60%, transparent) 30%, transparent 70%); }
    .cta-band__actions .btn { flex: 0 1 auto; }
}

/* ---------- Forms & contact ---------- */
.contact-layout { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-12); align-items: start; } }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.form__note { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-5); }
.form__grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__grid { grid-template-columns: 1fr 1fr; } .field--full, .field--captcha { grid-column: 1 / -1; } }
.field--captcha .input { max-width: 12rem; }
.field { display: grid; gap: var(--s-2); align-content: start; }
.field__label { font-size: var(--fs-sm); font-weight: 650; }
.field__optional { font-weight: 450; color: var(--text-3); }
.field__hint { font-size: var(--fs-xs); color: var(--text-3); }
.field__error { font-size: var(--fs-sm); color: var(--danger); font-weight: 550; }
.req { color: var(--danger); }
.form__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-6);
    width: 100%;
}
.form__cancel,
.form__submit {
    flex: 0 1 auto;
    min-width: 0;
}
.form__cancel { justify-self: start; }
.form__submit { margin-inline-start: auto; }
@media (max-width: 479px) {
    .form__actions { gap: var(--s-2); }
    .form__cancel,
    .form__submit {
        flex: 1 1 0;
        padding-inline: 0.85rem;
        text-align: center;
    }
}
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius); margin-bottom: var(--s-5); border: 1px solid; }
.alert[hidden] { display: none; }
.alert p, .alert ul { margin-top: 2px; font-size: var(--fs-sm); }
.alert ul { padding-left: 1.1rem; }
.alert--success { background: var(--success-bg); border-color: var(--success); color: var(--text); }
.alert--success .icon { color: var(--success); }
.alert--error { background: var(--danger-bg); border-color: var(--danger); color: var(--text); }
.alert--error .icon { color: var(--danger); }

/* ---------- Form thank-you / success ---------- */
.form-success {
    --fs-pad: clamp(1.15rem, 0.9rem + 1.2vw, 1.85rem);
    --fs-badge: clamp(3.25rem, 2.7rem + 1.6vw, 4.25rem);
    scroll-margin-top: calc(var(--header-h) + 1.25rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.9rem, 0.7rem + 1vw, 1.35rem);
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--s-5);
    padding: var(--fs-pad);
    border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--success) 18%, transparent), transparent 55%),
        var(--success-bg);
    color: var(--text);
    box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--success) 55%, transparent);
    overflow: hidden;
    outline: none;
}
.form-success[hidden] { display: none; }
.form-success__badge {
    position: relative;
    width: var(--fs-badge);
    height: var(--fs-badge);
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.form-success__badge::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 16%, transparent);
    transform: scale(.72);
    opacity: 0;
}
.form-success__ring,
.form-success__tick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.form-success__ring circle,
.form-success__tick path {
    fill: none;
    stroke: var(--success);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.form-success__ring circle {
    stroke-width: 2.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transform-origin: center;
    transform: rotate(-90deg);
}
.form-success__tick path {
    stroke-width: 3.25;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.form-success__copy { min-width: 0; }
.form-success__eyebrow {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--success);
}
.form-success__title {
    margin: .2rem 0 0;
    font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
    font-weight: 750;
    font-stretch: 88%;
    line-height: 1.15;
    text-wrap: balance;
}
.form-success__text {
    margin: .45rem 0 0;
    max-width: 46ch;
    font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1.02rem);
    line-height: 1.55;
    color: var(--text-2);
    overflow-wrap: anywhere;
}
.form[hidden] { display: none; }

/* Entrance + draw when JS adds is-in */
.form-success.is-in {
    animation: form-success-in .55s cubic-bezier(.2, .8, .2, 1) both;
}
.form-success.is-in .form-success__badge::before {
    animation: form-success-glow .7s .12s var(--ease) both;
}
.form-success.is-in .form-success__ring circle {
    animation: form-success-draw .55s .08s cubic-bezier(.4, 0, .2, 1) forwards;
}
.form-success.is-in .form-success__tick path {
    animation: form-success-draw .38s .42s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes form-success-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}
@keyframes form-success-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes form-success-glow {
    0% { opacity: 0; transform: scale(.72); }
    55% { opacity: 1; transform: scale(1.08); }
    100% { opacity: .85; transform: scale(1); }
}
@media (max-width: 519px) {
    .form-success {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding-block: clamp(1.25rem, 1rem + 2vw, 1.75rem);
    }
    .form-success__text { max-width: 34ch; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .form-success.is-in,
    .form-success.is-in .form-success__badge::before,
    .form-success.is-in .form-success__ring circle,
    .form-success.is-in .form-success__tick path {
        animation: none;
    }
    .form-success__ring circle,
    .form-success__tick path { stroke-dashoffset: 0; }
    .form-success__badge::before { opacity: .85; transform: none; }
}
.context-card { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4); margin-bottom: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.context-card__media { width: 88px; height: 72px; flex-shrink: 0; display: grid; place-items: center; background: var(--image-well); border-radius: var(--radius-sm); overflow: hidden; }
.context-card__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.context-card__label { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.context-card__title { font-weight: 700; line-height: 1.3; }
.context-card__title a { text-decoration: none; }
.context-card__refs { font-size: var(--fs-sm); color: var(--text-2); }
.contact-aside { display: grid; gap: var(--s-4); }
.contact-card { padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.contact-card--muted { background: var(--surface-2); }
.contact-card__title { font-size: var(--fs-lg); font-weight: 700; font-stretch: 88%; margin-bottom: var(--s-4); }
.contact-card .btn { margin-top: var(--s-5); }
.contact-list { display: grid; gap: var(--s-4); }
.contact-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact-list .icon { color: var(--accent-text); margin-top: 3px; }
.contact-list a { text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact-list a:hover { text-decoration: underline; }
.contact-list__label { display: block; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.contact-list__line { display: block; }
.checklist { display: grid; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.checklist li { display: flex; gap: var(--s-2); align-items: flex-start; }
.checklist .icon { color: var(--success); margin-top: 2px; }

/* ---------- Search results ---------- */
.search-pages { margin-bottom: var(--s-8); }
.search-pages__title { font-size: var(--fs-sm); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }

/* ---------- Errors ---------- */
.error-page { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.error-page__inner { max-width: 760px; }
.error-page__code { font-size: clamp(4rem, 3rem + 6vw, 8rem); color: var(--accent); line-height: .9; margin-bottom: var(--s-4); }
.error-page .search-box { margin-top: var(--s-8); }
.error-page__chips { margin-top: var(--s-5); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* ---------- Footer ---------- */
.site-footer {
    --footer-bg: #f7f5f3;
    --footer-text: #3d3d3d;
    --footer-strong: #111111;
    --footer-muted: #5e5e5e;
    --footer-heading: var(--orange-700);
    --footer-line: #e6e0db;
    background: var(--footer-bg); color: var(--footer-text); font-size: var(--fs-sm); border-top: 4px solid var(--accent);
}
[data-theme="dark"] .site-footer {
    --footer-bg: #000000;
    --footer-text: #c8c8c8;
    --footer-strong: #ffffff;
    --footer-muted: var(--steel-400);
    --footer-heading: var(--accent);
    --footer-line: rgb(255 255 255 / .08);
}
.site-footer__grid { display: grid; gap: var(--s-8) var(--s-6); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .site-footer__brand { grid-column: auto; padding-right: var(--s-8); }
}
.brand--footer { text-decoration: none; }
.brand--footer .brand__logo { height: 54px; max-width: 240px; }
.site-footer__about {
    margin: var(--s-4) 0 var(--s-5); max-width: 42ch; padding-left: .85rem;
    border-left: 2px solid var(--accent); font-size: .95rem; line-height: 1.5; color: var(--footer-muted);
}
.site-footer__heading { color: var(--footer-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .75rem; padding-inline: .15rem; }
.site-footer__col {
    align-self: start; padding: 1rem .9rem .85rem; border-radius: 16px;
    background: color-mix(in srgb, var(--footer-strong) 4%, var(--footer-bg));
    border: 1px solid var(--footer-line);
}
.site-footer__col ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-footer__col li a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 .95rem;
    border-radius: 999px; background: color-mix(in srgb, var(--footer-strong) 7%, var(--footer-bg));
    border: 1px solid var(--footer-line); font-size: .84rem; font-weight: 650; color: var(--footer-strong);
    text-decoration: none; transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.site-footer__col li a:hover,
.site-footer__col li a:active { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, var(--footer-bg)); }
.site-footer a:hover { color: var(--accent-text); }
.contact-list--footer { gap: .55rem; }
.contact-list--footer .contact-list__item {
    align-items: center; margin: 0; border-radius: 14px;
    background: color-mix(in srgb, var(--footer-strong) 5%, var(--footer-bg));
    border: 1px solid var(--footer-line);
}
.contact-list--footer .contact-list__item:not(:has(a)) { gap: .8rem; padding: .75rem 1rem; }
.contact-list--footer a {
    display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 56px; padding: .7rem 1rem;
    font-size: .92rem; line-height: 1.35; font-weight: 650; color: var(--footer-strong); text-decoration: none;
}
.contact-list--footer a:hover { color: var(--accent-text); text-decoration: none; }
.contact-list--footer .icon {
    flex: none; width: 36px; height: 36px; margin-top: 0; padding: 8px; box-sizing: border-box;
    border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--footer-bg));
}
.contact-list__item--wa { border-color: color-mix(in srgb, #25d366 42%, var(--footer-line)); background: color-mix(in srgb, #25d366 12%, var(--footer-bg)); }
.contact-list__item--wa .icon { color: #fff; background: #25d366; }
.contact-list__item--wa a:hover { color: var(--footer-strong); }
@media (max-width: 759px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: .85rem; padding-block: 1.5rem 1rem; }
    .site-footer__about { margin: .8rem 0 1rem; max-width: none; font-size: .9rem; }
    .contact-list--footer a { min-height: 52px; padding: .65rem .85rem; font-size: .86rem; }
    .contact-list--footer .icon { width: 34px; height: 34px; }
    .site-footer__col { padding: .85rem .7rem .7rem; }
    .site-footer__col li a { min-height: 36px; padding: 0 .85rem; font-size: .8rem; }
}
.site-footer__bottom { border-top: 1px solid var(--footer-line); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); font-size: var(--fs-xs); color: var(--footer-muted); }
.site-footer__copy { margin: 0; line-height: 1.5; letter-spacing: .02em; }
.site-footer__bottom a { color: var(--footer-text); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 .9rem; border-radius: 999px; text-decoration: none;
    background: color-mix(in srgb, var(--footer-strong) 6%, var(--footer-bg));
    border: 1px solid var(--footer-line);
    font-size: .75rem; font-weight: 650; letter-spacing: .01em; color: var(--footer-text);
}
.site-footer__legal a:hover,
.site-footer__legal a:active {
    border-color: var(--accent); color: var(--footer-strong);
    background: color-mix(in srgb, var(--accent) 14%, var(--footer-bg));
}
@media (max-width: 759px) {
    .site-footer__bottom-inner {
        flex-direction: column; align-items: stretch; gap: 0;
        padding-top: 1.15rem;
        padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
    }
    .site-footer__copy {
        text-align: center; text-wrap: balance;
        font-size: .75rem; letter-spacing: .035em; color: var(--footer-muted);
    }
    .site-footer__bottom nav {
        margin-top: .9rem; padding-top: .9rem;
        border-top: 1px solid var(--footer-line);
    }
    .site-footer__legal { justify-content: center; }
    .site-footer__legal a { min-height: 40px; }
}
.legal { max-width: 72ch; }
.legal h2 { margin: var(--s-8) 0 var(--s-3); font-size: var(--fs-xl); font-stretch: 88%; }
.legal p, .legal li { color: var(--text-2); }
.legal ul { margin: var(--s-3) 0 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.legal a { color: var(--accent-text); }
.legal__meta { margin-top: var(--s-3); color: var(--text-3); font-size: var(--fs-sm); }
.legal__related { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.legal__related a { font-weight: 650; text-decoration: none; }
.form__legal { margin: var(--s-4) 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.form__legal a { color: var(--accent-text); }

/* ---------- Premium surfaces: borderless cards, studio image wells ---------- */
:root {
    --canvas: #000000;
    --card: #131313;
    --card-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 18px 40px -20px rgb(0 0 0 / .95);
    --card-shadow-hover: 0 30px 60px -26px rgb(0 0 0 / 1), 0 18px 46px -24px color-mix(in srgb, var(--accent) 45%, transparent);
    --well: #eceae6;
    --soft: #1a1a1a;
    --panel: #131313;
    --section-y: clamp(3rem, 2rem + 3.2vw, 5rem);

    --photo-tint: 0 0 0;
    --photo-veil: linear-gradient(180deg, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .62) 12%, rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .62) 88%, rgb(0 0 0 / .9) 100%);
    --photo-veil-side: var(--photo-veil);
    --photo-filter: none;
    --banner-photo-start: 28%;
    --banner-veil: linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, transparent), color-mix(in srgb, var(--bg) 93%, transparent));
    --banner-veil-wide:
        linear-gradient(90deg, var(--bg) 0%, var(--bg) 6%, color-mix(in srgb, var(--bg) 72%, transparent) 28%, color-mix(in srgb, var(--bg) 12%, transparent) 58%, transparent 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--bg) 30%, transparent), transparent 35%);
}

.tile, .part-card, .category-card, .system, .service, .step, .stats__item, .finder__card,
.form, .contact-card, .context-card, .logo-panel, .logos__item {
    border: 0; background: var(--card); box-shadow: var(--card-shadow);
}
.logos__item { background: #fff; }
.logo-panel { background: var(--panel); }
.tile:hover, .part-card:hover, .category-card:hover, .system:hover, .service:hover, .step:hover, .stats__item:hover, .logos__item:hover {
    border-color: transparent; box-shadow: var(--card-shadow-hover);
}
.empty-state { border: 0; background: var(--soft); }
.section--alt, .page-hero, .part-page { border: 0; }
.feature-band { border-block: 0; }
.cta-band { border-top: 0; }
.site-footer { border-top: 0; }
.site-footer__bottom { border-top-color: transparent; background: color-mix(in srgb, var(--footer-strong) 4%, transparent); }
.site-header { box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); }

.tile__media, .part-card__media, .category-card__media, .page-hero__media, .about__media,
.part-gallery__main, .context-card__media, .search-option__img, .brand-pick__media {
    border: 0; background: var(--well); isolation: isolate; min-width: 0; min-height: 0;
}
.lightbox__img { background: var(--well); }

.chip, .pagination__btn, .tile__tag, .search-option__type { border-color: transparent; background: var(--soft); }
.chip:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 14%, var(--soft)); }
a.pagination__btn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--soft)); color: var(--text); }
.chip.is-active, .pagination__btn.is-current { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 85%, black); }
.tile__tag { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.search-box { border-color: transparent; box-shadow: var(--card-shadow); }
.search-box:focus-within { border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), var(--card-shadow); }
.step__icon { border: 0; }
.ref-panel { border: 0; border-radius: var(--radius-lg); background: var(--soft); }
.category-card__links, .category-card__links a, .system__links a, .spec-table, .spec-table div, .ref-panel__row, .pagination { border-color: color-mix(in srgb, var(--text) 7%, transparent); }
.system__links a { border-bottom-style: solid; }

.stats { padding-block: var(--s-8) 0; }
.section-head { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* bento: no empty cells, lead image fills its column */
.tile--lead .tile__media, .tile--row .tile__media { border: 0; }
@media (min-width: 768px) {
    .bento > .tile--row:last-child:nth-child(even) { grid-column: span 2; flex-direction: row; }
    .bento > .tile--row:last-child:nth-child(even) .tile__media { width: 48%; max-width: none; aspect-ratio: auto; min-height: 150px; }
    .bento > .tile--row:last-child:nth-child(even) .tile__arrow { position: static; }
}
@media (min-width: 1024px) {
    .bento__lead .tile__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
    .bento__lead .tile__body { flex: 0 0 auto; }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .parts-grid, .parts-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
    .parts-grid, .parts-grid--home, .parts-grid--row, .parts-grid--showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-3);
    }
    .part-card--row { flex-direction: column; }
    .part-card--row .part-card__media { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
    .part-card__actions .btn { min-width: 0; white-space: nowrap; text-align: center; line-height: 1.1; }
}
@media (min-width: 1100px) { .parts-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }

/* system cards with photo headers */
.system { padding: 0; }
.system__head {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 0;
    aspect-ratio: 16 / 9; margin: 0; padding: var(--s-4) var(--s-5); border: 0; background: var(--graphite-900); color: #fff;
    text-decoration: none; cursor: pointer;
}
.system__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.system__head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 14 17 / 0) 25%, rgb(12 14 17 / .85)); }
.system:hover .system__img { transform: scale(1.07); }
.system__title { margin-right: auto; text-align: left; color: #fff; font-size: var(--fs-xl); }
.system__sections { border-top: 1px solid color-mix(in srgb, #fff 8%, transparent); }
.system__sections summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 34px; padding: 0 var(--s-4); list-style: none; cursor: pointer;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.system__sections summary::-webkit-details-marker { display: none; }
.system__sections summary .icon { color: var(--accent); transition: transform .2s var(--ease); }
.system__sections[open] summary { color: var(--text); }
.system__sections[open] summary .icon { transform: rotate(180deg); }
.system .system__links { padding: 0 var(--s-4) var(--s-2); }
.system__links a { padding: .28rem 0; font-size: var(--fs-xs); line-height: 1.25; gap: var(--s-2); }
.system__place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system__section { font-size: .65rem; line-height: 1.2; }
.logo-slider__viewport { padding-block: 18px; margin-block: -18px; }
.section--brands { background: var(--soft); }
.cta-band .btn--ghost-light { border-color: transparent; background: color-mix(in srgb, var(--band-text) 8%, transparent); }
.cta-band .btn--ghost-light:hover { border-color: transparent; background: color-mix(in srgb, var(--band-text) 14%, transparent); }
.btn--outline { border-color: transparent; background: var(--soft); }
.btn--outline:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 14%, var(--soft)); color: var(--text); }
.part-card__quote.btn--outline {
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
    background: transparent;
    color: var(--accent-text);
}
.part-card__quote.btn--outline:hover,
.part-card__quote.btn--outline:focus-visible {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}
.part-card__quote.btn--outline:active { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---------- Full-section photography ---------- */
.photo-section { position: relative; isolation: isolate; overflow: hidden; background-image: none; overflow-anchor: none; }
.photo-section > .section-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.photo-section > .section-photo .section-photo__img {
    width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focus, center);
}
.photo-section > .section-photo::after { content: ""; position: absolute; inset: 0; }
.photo-section:not(.photo-section--dark):not(.photo-section--ink) > .section-photo::after { background: var(--photo-veil); }
.photo-section:not(.photo-section--dark):not(.photo-section--ink) .section-photo__img { filter: var(--photo-filter); }
.about.photo-section:not(.photo-section--dark):not(.photo-section--ink) > .section-photo::after { background: var(--photo-veil-side); }
.photo-section > .container,
.photo-section > .feature-band__inner { position: relative; z-index: 1; }
.finder.photo-section { margin-top: 0; z-index: 1; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.stats.photo-section { padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem); }
.photo-section:not(.photo-section--dark) .section-lead,
.photo-section:not(.photo-section--dark) .about__text { color: var(--text); }

.photo-section--dark { color: #fff; }
.photo-section--dark > .section-photo::after,
[data-theme="dark"] .photo-section--dark > .section-photo::after {
    background:
        linear-gradient(90deg, rgb(7 8 10 / .72) 0%, rgb(7 8 10 / .48) 48%, rgb(7 8 10 / .34) 100%),
        linear-gradient(180deg, rgb(7 8 10 / .35), transparent 30%, rgb(7 8 10 / .4));
}
.photo-section--dark .section-title,
.photo-section--dark .cta-band__title,
.photo-section--dark .feature-band__text,
.photo-section--dark .cta-band__text { color: #fff; }
.photo-section--dark .eyebrow,
.photo-section--dark .eyebrow--light { color: #ffb08a; }
.photo-section--dark .cta-band,
.cta-band.photo-section--dark { --band-text: #fff; --band-muted: rgb(255 255 255 / .86); background: #0c0e11; }

/* Dark photographs keep a dark veil and light headings. Cards stay solid. */
.photo-section--ink > .section-photo::after,
[data-theme="dark"] .photo-section--ink > .section-photo::after {
    background: linear-gradient(180deg, rgb(8 10 12 / .86) 0%, rgb(8 10 12 / .72) 18%, rgb(8 10 12 / .66) 52%, rgb(8 10 12 / .74) 100%);
}
.photo-section--ink .section-title,
.photo-section--ink .section-title--sm,
.photo-section--ink .link-arrow { color: #fff; }
.photo-section.photo-section--ink .section-lead { color: #f7f7f7; }
.photo-section--ink .eyebrow { color: #ffb08a; }
.photo-section--ink .tile,
.photo-section--ink .part-card,
.photo-section--ink .system,
.photo-section--ink .service:not(.service--media),
.photo-section--ink .step,
.photo-section--ink .stats__item,
.photo-section--ink .finder__card,
.photo-section--ink .logos__item { color: var(--text); }
.photo-section--ink .process__copy .section-title,
.photo-section--ink .process__copy .eyebrow { color: #fff; }
.photo-section--ink .process__copy .eyebrow { color: #ffb08a; }
@media (max-width: 767px) {
    .photo-section--dark > .section-photo::after,
    [data-theme="dark"] .photo-section--dark > .section-photo::after {
        background: linear-gradient(180deg, rgb(7 8 10 / .78) 0%, rgb(7 8 10 / .6) 58%, rgb(7 8 10 / .46) 100%);
    }
}

/* ---------- Immersive photography ---------- */
.feature-band.feature-band--photo {
    --band-text: #ffffff;
    --band-muted: rgb(255 255 255 / .84);
    --band-eyebrow: #ffb08a;
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--graphite-950); padding-block: clamp(5rem, 3rem + 9vw, 10.5rem);
}
.feature-band__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.feature-band__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.feature-band--photo:hover .feature-band__bg-img { transform: scale(1); }
.feature-band__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgb(7 8 10 / .92) 0%, rgb(7 8 10 / .72) 38%, rgb(7 8 10 / .18) 75%, rgb(7 8 10 / .05) 100%),
        linear-gradient(0deg, rgb(7 8 10 / .55), transparent 45%);
}
.feature-band--photo .section-title { font-size: var(--fs-3xl); }
.feature-band--photo .feature-band__text { font-size: var(--fs-md); }
@media (min-width: 1024px) { .feature-band--photo .feature-band__inner { grid-template-columns: minmax(0, 640px); } }

.service.service--media {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(380px, 32vw, 470px); padding: 0; overflow: hidden; background: var(--graphite-950); color: #fff;
}
.service--media .service__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
.service--media .service__media::after {
    background: linear-gradient(180deg, rgb(7 8 10 / 0) 22%, rgb(7 8 10 / .55) 52%, rgb(7 8 10 / .94) 100%);
}
.service--media .service__img { transition: transform 1s var(--ease); }
.service--media:hover .service__img { transform: scale(1.08); }
.service--media .service__body { flex: 0 0 auto; padding: var(--s-6); }
.service--media .service__title { color: #fff; font-size: var(--fs-xl); }
.service--media .service__text { color: rgb(255 255 255 / .84); }
@media (min-width: 1100px) { .service--media .service__text { min-height: calc(1.6em * 6); } }
.service--media::after { height: 4px; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transition: opacity .45s var(--ease); }
.js .reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; }
}
@media print {
    .topbar, .site-header, .site-footer, .cta-band, .drawer, .search-dialog, .part-cta, .toolbar { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ---------- Managed backgrounds (Admin → Appearance) ---------- */
.section-photo--soft::after,
.page-hero__bg--soft::after { opacity: .7; }
.photo-section > .section-photo--strong .section-photo__img,
.page-hero__bg--strong .page-hero__bg-img { opacity: .55; }
.photo-section--ink:has(> .section-photo--strong),
.photo-section--dark:has(> .section-photo--strong) { background-color: #07080a; }
/* Without a photograph the light headings still need a dark ground. */
.photo-section--ink:not(:has(> .section-photo)),
.photo-section--dark:not(:has(> .section-photo)) { background-color: #14181d; }

.photo-section--ink .page-title,
.photo-section--ink .error-page__code + .page-title { color: #fff; }
.photo-section.photo-section--ink .page-lead { color: #f2f2f2; }
.error-page.photo-section--ink .chip { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .22); color: #fff; }
.error-page.photo-section--ink .chip:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .4); }
.error-page.photo-section--ink .btn--outline { background: rgb(255 255 255 / .1); color: #fff; }
.error-page.photo-section--ink .btn--outline:hover { background: rgb(255 255 255 / .18); color: #fff; }
.contact-section.photo-section { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.page-hero--catalog.page-hero--banner .page-hero__media { box-shadow: var(--shadow-3); }

/* ---------- Homepage part filter (all viewports) ---------- */
.finder__quick { display: none; }
.finder__card { --finder-pad: var(--s-5, 1.25rem); }
.finder__filter {
    display: grid;
    gap: var(--s-5);
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}
.finder__filter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.finder__filter-title {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 700; font-stretch: 88%; font-size: var(--fs-md, 1.05rem);
}
.finder__filter-title .icon { color: var(--accent-text); }
.finder__filter-clear {
    border: 0; background: none; padding: .35rem .5rem; margin-right: -.5rem;
    font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); cursor: pointer;
}
.finder__filter-clear[hidden] { display: none; }

.finder__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.finder__step-label {
    display: flex; align-items: center; gap: var(--s-2);
    padding: 0; margin-bottom: var(--s-3);
    font-size: var(--fs-sm); font-weight: 650; color: var(--text);
}
.finder__step-num {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    font-size: .72rem; font-weight: 700;
}
.finder__optional { font-weight: 450; color: var(--text-3); }
.finder__hint {
    font-size: var(--fs-sm); color: var(--text-3);
    padding: var(--s-3) var(--s-4);
    border: 1px dashed var(--line); border-radius: var(--radius);
}

/* Brand cards: horizontal snap strip on phones (edge-bleed). */
.finder__brands {
    display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--s-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--finder-pad, 1rem) * -1);
    padding: 2px var(--finder-pad, 1rem) var(--s-2);
    scroll-padding-inline: var(--finder-pad, 1rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--finder-pad, 1rem), #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--finder-pad, 1rem), #000 calc(100% - 28px), transparent);
}
.finder__brands::-webkit-scrollbar { display: none; }
.brand-pick {
    position: relative; display: grid; gap: 2px; scroll-snap-align: start;
    padding: var(--s-2) var(--s-2) var(--s-3);
    border-radius: var(--radius-lg);
    background: var(--surface-2); border: 1.5px solid var(--line);
    cursor: pointer;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.brand-pick:active { transform: scale(.97); }
.brand-pick__input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.brand-pick__media {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 4 / 3; margin-bottom: var(--s-2);
    border-radius: calc(var(--radius-lg) - 4px);
    background: var(--well); overflow: hidden; isolation: isolate;
}
.brand-pick__img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.brand-pick__check {
    position: absolute; top: 6px; right: 6px;
    display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    opacity: 0; transform: scale(.6);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.brand-pick__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; padding-inline: 2px; }
.brand-pick__count { font-size: var(--fs-xs); color: var(--text-3); padding-inline: 2px; }
.brand-pick:has(:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.brand-pick:has(:checked) .brand-pick__check { opacity: 1; transform: none; }
.brand-pick:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.finder__sections {
    display: flex; flex-direction: column; gap: 6px;
    padding: 6px; border-radius: 16px;
    background: #101010; border: 1px solid #242424;
}
.finder__filter.is-enhanced .finder__sections { display: none; }
.finder__filter.is-enhanced .finder__sections.is-active { display: flex; animation: finder-in .25s var(--ease); }
.finder__filter:not(.is-enhanced) .finder__hint { display: none; }
.section-pick { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.section-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.section-pick__face {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 48px;
    padding: .5rem .7rem .5rem .55rem; border-radius: 12px;
    background: #161616; border: 1px solid #2a2a2a;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.section-pick__mark {
    display: grid; place-items: center; width: 20px; height: 20px; flex: none;
    border-radius: 50%; border: 1.5px solid #3a3a3a; color: transparent; background: transparent;
}
.section-pick__mark .icon { opacity: 0; }
.section-pick__copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
.section-pick__parent {
    font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.section-pick__name { font-size: var(--fs-sm); font-weight: 650; line-height: 1.25; }
.section-pick:hover .section-pick__face { border-color: #3a3a3a; background: #1b1b1b; }
.section-pick:has(:checked) .section-pick__face {
    background: color-mix(in srgb, var(--accent) 14%, #161616);
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.section-pick:has(:checked) .section-pick__mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.section-pick:has(:checked) .section-pick__mark .icon { opacity: 1; }
.section-pick:has(:checked) .section-pick__name { color: #fff; }
.section-pick:has(:focus-visible) .section-pick__face { outline: 3px solid var(--focus); outline-offset: 2px; }

.finder__filter-go {
    width: 100%; justify-content: center; min-height: 52px;
    font-size: var(--fs-base, 1rem);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: opacity .2s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease), background-color .18s var(--ease);
}
.finder__filter-go[aria-disabled="true"] {
    background: var(--soft); border-color: transparent; color: var(--text-2); box-shadow: none;
}
.finder__filter-go[aria-disabled="true"] .icon { opacity: .5; }

/* Desktop: same stepped flow, gallery-style brand grid. */
@media (min-width: 768px) {
    .finder__card { --finder-pad: var(--s-8, 2rem); }
    .finder__filter { gap: var(--s-6); margin-top: var(--s-6); padding-top: var(--s-6); }
    .finder__filter-title { font-size: var(--fs-lg); }
    .finder__step-label { margin-bottom: var(--s-4); font-size: var(--fs-base); }
    .finder__step-num { width: 26px; height: 26px; font-size: .78rem; }
    .finder__hint { padding: var(--s-4) var(--s-5); }

    .finder__brands {
        display: grid;
        grid-auto-flow: unset;
        grid-auto-columns: unset;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-4);
        overflow: visible;
        overscroll-behavior: auto;
        scroll-snap-type: none;
        margin-inline: 0;
        padding: 0;
        scroll-padding-inline: 0;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .brand-pick {
        scroll-snap-align: unset;
        padding: var(--s-3);
        gap: var(--s-1);
    }
    .brand-pick:hover {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
        background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -18px rgb(0 0 0 / .55);
    }
    .brand-pick:active { transform: translateY(0); }
    .brand-pick__media { aspect-ratio: 16 / 10; margin-bottom: var(--s-3); }
    .brand-pick__img { padding: 10px; }
    .brand-pick__check { top: 8px; right: 8px; width: 24px; height: 24px; }
    .brand-pick__name { font-size: var(--fs-base); }
    .brand-pick:has(:checked) {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 16px 32px -16px color-mix(in srgb, var(--accent) 55%, transparent);
    }

    .finder__filter.is-enhanced .finder__sections.is-active,
    .finder__filter:not(.is-enhanced) .finder__sections {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    }
    .finder__sections .section-pick:first-child { grid-column: 1 / -1; }
    .finder__filter-go {
        width: auto; min-width: min(100%, 20rem); justify-self: start;
        padding-inline: 1.75rem;
    }
}
@media (min-width: 1100px) {
    .finder__brands { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
    .brand-pick__name { font-size: var(--fs-sm); }
}
@keyframes finder-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    .finder__sections.is-active { animation: none; }
    .brand-pick, .brand-pick__check { transition: none; }
    .brand-pick:hover { transform: none; }
}
.finder__brands.is-nudged { animation: finder-nudge .4s var(--ease); }
@keyframes finder-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .finder__brands.is-nudged { animation: none; } }

/* ---------- Catalog cards pop on hover ----------
   translate/scale are separate from transform, which the scroll reveal owns. */
@media (hover: hover) and (pointer: fine) {
    .bento .tile, .js .bento .tile.reveal,
    .systems .system,
    .parts-grid--home .part-card, .js .parts-grid--home .part-card.reveal {
        transition: opacity .6s var(--ease), transform .6s var(--ease), translate .28s var(--ease), scale .28s var(--ease), box-shadow .28s var(--ease);
    }
    .bento .tile:hover, .systems .system:hover, .parts-grid--home .part-card:hover {
        translate: 0 -8px; z-index: 2;
        box-shadow: 0 0 0 2px var(--accent), var(--card-shadow-hover);
    }
    .bento .tile:hover .tile__title { color: var(--accent-text); }
}
@media (prefers-reduced-motion: reduce) {
    .bento .tile:hover, .systems .system:hover, .parts-grid--home .part-card:hover { translate: none; scale: none; }
}

/* ---------- Phones: two cards per row ---------- */
@media (max-width: 767px) {
    .bento, .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .bento__lead { grid-column: 1 / -1; }
    .bento__lead .tile__media { aspect-ratio: 16 / 9; padding: var(--s-4); }
    .bento__lead .tile__body { padding: var(--s-4); }
    .bento__lead .tile__title { font-size: var(--fs-xl); }
    .bento__lead .tile__text { display: none; }
    .bento__lead .tile__tags { margin-top: var(--s-3); }
    .bento__lead .tile__cta { padding-top: var(--s-3); margin-top: var(--s-2); }
    .bento .tile--row { flex-direction: column; }
    .bento .tile--row .tile__media { width: 100%; max-width: none; aspect-ratio: 4 / 3; padding: var(--s-2); border-right: 0; }
    .bento .tile--row .tile__body { padding: var(--s-3) var(--s-3) var(--s-4); }
    .bento .tile--row .tile__arrow { display: none; }
    .bento > .tile--row:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; }
    .bento > .tile--row:last-child:nth-child(even) .tile__media { width: 42%; aspect-ratio: 4 / 3; }
    .bento > .tile--row:last-child:nth-child(even) .tile__body { padding: var(--s-3) var(--s-4); }

    .category-grid { align-items: stretch; }
    .category-card { height: 100%; }
    .category-card__media { aspect-ratio: 4 / 3; padding: var(--s-2); }
    .category-card__body { padding: var(--s-3) var(--s-3) var(--s-4); gap: var(--s-1); }
    .category-card__title { font-size: var(--fs-md); }
    .category-card__meta { font-size: var(--fs-xs); }
    .category-card__text { display: none; }
    .category-card__sections { margin-top: auto; }
    .category-card .link-arrow { font-size: var(--fs-xs); padding-top: var(--s-2); }
}

@media (max-width: 639px) {
    .section-grid, .systems, .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .parts-grid, .parts-grid--home, .parts-grid--row, .parts-grid--showcase,
    .parts-grid.parts-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

    .tile--section .tile__media { padding: var(--s-2); }
    .tile--section .tile__body { padding: var(--s-3) var(--s-3) var(--s-4); }
    .tile--section .tile__title { font-size: var(--fs-base); }
    .tile--section .tile__meta { font-size: var(--fs-xs); }
    .tile--section .tile__arrow { display: none; }

    .system__head { aspect-ratio: 4 / 3; padding: var(--s-3); flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s-1); }
    .system__title { font-size: var(--fs-base); }
    .system__sections summary { min-height: 32px; padding: 0 var(--s-3); }
    .system .system__links { padding: 0 var(--s-3) var(--s-2); }
    .system__links a { margin-inline: 0; padding: .22rem 0; border-radius: 0; }

    .part-card__media { padding: var(--s-2); }
    .part-card__body { padding: var(--s-3); gap: var(--s-1); }
    .part-card__trail { font-size: .65rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
    .part-card__title { font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
    .part-card__summary { display: none; }
    .part-card .refs div { display: grid; gap: 0; }
    .part-card .refs dt { min-width: 0; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
    .part-card .refs dd { font-size: var(--fs-xs); -webkit-line-clamp: 1; line-clamp: 1; }
    .part-card__actions { flex-wrap: nowrap; gap: .3rem; }
    .part-card__actions .link-arrow,
    .part-card__actions .btn { font-size: .68rem; padding-inline: .35rem; min-height: 32px; }

    .service--media .service__body { padding: var(--s-3) var(--s-3) var(--s-4); }
    .service:not(.service--media) { padding: var(--s-4); }
    .service__title { font-size: var(--fs-base); }
    .service__text { font-size: var(--fs-xs); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
}

/* Links inside solid cards keep card colours on dark photo sections. */
.photo-section--ink .part-card .link-arrow,
.photo-section--ink .tile .link-arrow,
.photo-section--ink .category-card .link-arrow { color: var(--text); }
.photo-section--ink .part-card .link-arrow:hover,
.photo-section--ink .tile .link-arrow:hover,
.photo-section--ink .category-card .link-arrow:hover { color: var(--accent-text); }

@media (max-width: 767px) {
    .category-card .link-arrow { display: none; }
}
@media (max-width: 639px) {
    .systems > .system:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .systems > .system:last-child:nth-child(odd) .system__head { aspect-ratio: 16 / 7; }
}

/* ---------- Scroll gauge ---------- */
.to-top {
    position: fixed; z-index: 45;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: 58px; height: 58px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden; color: var(--text);
    background:
        radial-gradient(circle at 32% 26%, rgb(255 255 255 / .1), transparent 46%),
        radial-gradient(circle at 50% 62%, #171717, #050505 74%);
    box-shadow:
        0 18px 40px -18px rgb(0 0 0 / .9),
        inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent),
        inset 0 1px 0 rgb(255 255 255 / .08);
    opacity: 0; transform: translate3d(16px, 20px, 0) scale(.84);
    pointer-events: none;
    transition: opacity .4s var(--ease), transform .55s cubic-bezier(.16, 1.25, .32, 1), box-shadow .25s var(--ease);
}
.to-top.is-in { opacity: 1; transform: none; pointer-events: auto; }
.to-top.is-in:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 44px -16px rgb(0 0 0 / .9),
        0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
        inset 0 1px 0 rgb(255 255 255 / .1);
}
.to-top.is-in:active { transform: translateY(-1px) scale(.97); }
.to-top__mark { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.to-top__ticks, .to-top__track, .to-top__glow, .to-top__arc, .to-top__reveal { fill: none; }
.to-top__ticks { stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1.35; stroke-dasharray: 1.1 6.7; }
.to-top__ticks--lit { stroke: var(--accent); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 75%, transparent)); }
.to-top__track, .to-top__glow, .to-top__arc, .to-top__reveal { stroke-linecap: round; transform-origin: 32px 32px; transform: rotate(90deg); }
.to-top__track { stroke: color-mix(in srgb, var(--text) 14%, transparent); stroke-width: 2.2; }
.to-top__glow, .to-top__arc { stroke-dasharray: 183.783; stroke-dashoffset: 183.783; }
.to-top__glow { stroke: color-mix(in srgb, var(--accent) 62%, transparent); stroke-width: 5.5; opacity: .42; filter: blur(1.4px); }
.to-top__arc { stroke: url("#to-top-heat"); stroke-width: 2.15; }
.to-top__reveal { stroke: #fff; stroke-width: 5; stroke-dasharray: 166.504; stroke-dashoffset: 166.504; }
.to-top__head {
    opacity: 0; transform-origin: 32px 32px; transform: rotate(calc(var(--p, 0) * 360deg));
    transition: opacity .22s var(--ease);
}
.to-top.is-live .to-top__head { opacity: 1; }
.to-top__tip { fill: #fff7f3; filter: drop-shadow(0 0 3px var(--accent)); }
.to-top.is-complete .to-top__glow { opacity: .28; }
.to-top.is-complete .to-top__arc,
.to-top.is-complete .to-top__glow,
.to-top.is-complete .to-top__reveal { stroke-linecap: butt; }
.to-top.is-complete .to-top__arc { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); }
.to-top__line-fill {
    fill: none; stroke: url("#to-top-heat"); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 480; stroke-dashoffset: 480;
    filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--accent) 65%, transparent));
}
.to-top.is-complete .to-top__line-fill { stroke-linecap: butt; }
.to-top__gear {
    fill: none; stroke: color-mix(in srgb, var(--text) 88%, transparent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    transform-box: fill-box; transform-origin: center;
    transform: rotate(calc(var(--p, 0) * 72deg));
    transition: transform .35s var(--ease);
}
.to-top:hover .to-top__gear { transform: rotate(calc(var(--p, 0) * 72deg + 16deg)); }
@media (prefers-reduced-motion: reduce) {
    .to-top, .to-top__gear, .to-top__head { transition: none; }
    .to-top__gear, .to-top:hover .to-top__gear { transform: none; }
}