/* ======================================================================
   Benaris v2 — motion.css
   Everything the homepage prototype (benaris-home-v2-prototype.html) does
   with motion, ported onto the design-system tokens in styles.css, plus the
   shared glass "pill" header used on every page (brief 6.6) and the card
   tilt / hover-photo behaviour for catalog pages (6.4). Loaded after
   styles.css on every page. Hooks are toggled by js/common.js (all pages)
   and js/motion.js (index.html only). No JS → nothing is hidden; under
   prefers-reduced-motion everything is static and visible.
   ====================================================================== */

:root {
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --nav-h: 72px;
  --gutter: clamp(16px, 5vw, 72px);
}

/* ---------------------------------------------------------------------
   Base helpers
   --------------------------------------------------------------------- */
html:not(.js) .reveal { opacity: 1; transform: none; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--color-accent); color: var(--color-on-accent); padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-small); }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: var(--container-max); width: 100%; margin: 0 auto; }
.arr { display: inline-block; transition: transform .35s var(--ease-out); }
.btn:hover .arr, a:hover > .arr { transform: translateX(4px); }
.btn-pill { border-radius: var(--radius-pill); }

/* ---------------------------------------------------------------------
   Header — glass pill (6.6), fixed on every page
   --------------------------------------------------------------------- */
.nav-sentinel { position: absolute; top: 60px; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; justify-content: center;
  padding: 14px var(--gutter);
  transition: transform .5s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-120%); }
.nav-shell {
  width: 100%; max-width: var(--container-max);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: max-width .45s var(--ease-out), background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.site-header.is-scrolled .nav-shell {
  max-width: 960px;
  background: rgba(14, 26, 51, .58);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(201, 162, 39, .25);
  box-shadow: 0 10px 40px -20px rgba(201, 162, 39, .45);
}
body { padding-top: var(--nav-h); }
html[data-page="home"] body { padding-top: 0; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; transition: opacity .4s ease; }
.brand .bi { width: 34px; height: 34px; }
.brand .bw { width: 110px; height: auto; }
.js .brand { opacity: 0; }
.js .brand.show { opacity: 1; }

.nav__links { display: flex; gap: 28px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.nav__links a { position: relative; padding: 6px 0; color: var(--color-ink-soft); text-decoration: none; transition: color .3s; }
.nav__links a:not(.lang-switch)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .4s var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--color-ink); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--color-ink); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--color-ink-soft); border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); padding: 6px 12px; text-decoration: none; }
.lang-switch:hover { color: var(--color-accent); border-color: var(--color-accent); }
.nav__burger { display: none; }

/* 981–1180px: five menu items + the longer "Desks & storage / Stalai ir laikymas" label
   must stay on one line — tighter gaps and type before the burger takes over at 980px. */
@media (max-width: 1180px) {
  .nav__links { gap: 18px; font-size: .76rem; letter-spacing: .04em; white-space: nowrap; }
  .nav-shell { gap: 16px; }
  .brand .bw { width: 96px; }
}

@media (max-width: 980px) {
  .nav__links {
    position: absolute; top: calc(100% + 4px); left: var(--gutter); right: var(--gutter);
    display: none; flex-direction: column; align-items: flex-start; gap: 18px;
    padding: 22px 24px; border-radius: 16px;
    background: rgba(14, 26, 51, .86);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(201, 162, 39, .25);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
    text-transform: none; letter-spacing: .02em; font-size: 1rem;
  }
  .nav__links.is-open { display: flex; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 40px; height: 40px; border: 1px solid var(--color-line-strong); border-radius: 50%;
    background: transparent; cursor: pointer; padding: 0;
  }
  .nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--color-ink); border-radius: 2px; }
  .nav__burger:hover { border-color: var(--color-accent); }
  .brand .bw { width: 96px; }
}

/* ---------------------------------------------------------------------
   Sections (homepage) — one screen each, snap proximity
   --------------------------------------------------------------------- */
.section {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(72px, 10vh, 120px) var(--gutter);
}
/* Scroll snapping removed on 01.11.2026 (client feedback: blocks "pulled" themselves
   into place while scrolling and made the header hide). Sections remain full-screen,
   but the page scrolls freely on every width. */
.eyebrow-gold { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); }
h2.big { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); font-weight: 500; line-height: 1.08; }
.side-note { margin: 0; color: var(--color-ink-soft); max-width: 44ch; }

/* Gold dust on every homepage block (01.11.2026): same canvas as the hero, under the
   text (.wrap / .trip-head / .foot-grid are lifted above it), over the triptych photos. */
.section-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#how .wrap, #spaces .wrap, #why .wrap, #entries .trip-head, #entries .trip .txt { position: relative; z-index: 3; }
.footer-quote { position: relative; overflow: hidden; }
.footer-quote .foot-grid, .footer-quote .copy { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .section-dust { display: none; } }

/* ---------------------------------------------------------------------
   6A.1 Intro overlay
   --------------------------------------------------------------------- */
#intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--color-bg);
  display: grid; place-items: center; overflow: hidden;
  transition: opacity .9s var(--ease-out);
}
#intro.done { opacity: 0; pointer-events: none; }
#intro[hidden] { display: none; }
html:not(.js) #intro, html.intro-seen #intro { display: none; }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-logo {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 3vh, 28px);
  transform: scale(.18); opacity: 0; filter: blur(10px); transform-origin: center;
  will-change: transform, filter, opacity;
}
.intro-logo .ico { width: clamp(120px, 32vh, 300px); position: relative; }
.intro-logo .ico img { width: 100%; height: auto; }
.intro-logo .ico::after {
  content: ''; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.45), rgba(201,162,39,0) 62%);
  opacity: 0; transition: opacity .7s var(--ease-out);
}
.intro-logo .word { width: clamp(180px, 42vh, 420px); opacity: 0; letter-spacing: .3em; transform: translateY(10px); position: relative; }
.intro-logo .word img { width: 100%; height: auto; }
.intro-logo .word::before { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.sweep {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(224,189,82,.55) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 120% 0;
  mix-blend-mode: screen;
  -webkit-mask: url(../images/benaris-icon.png) center / contain no-repeat; mask: url(../images/benaris-icon.png) center / contain no-repeat;
}
#intro.p1 .intro-logo { animation: dolly 1.5s var(--ease-out) forwards; }
#intro.p1 .intro-logo .word { animation: wordin 1.1s .45s var(--ease-out) forwards; }
#intro.p2 .intro-logo .ico::after { opacity: 1; }
#intro.p2 .sweep { animation: sweepOnce 1s ease-out forwards; }
#intro.p2 .intro-logo .word { animation: wordin 1.1s var(--ease-out) forwards; }
#intro.p2 .intro-logo .word img { animation: glow .9s .15s ease forwards; }
#intro.p2 .intro-logo .word::before { transform: scaleX(1); }
/* p3: drop the dolly animation (an animation with fill:forwards would beat the inline FLIP transform),
   pin the finished state, then let the inline transform/opacity from motion.js transition to the header slot. */
#intro.p3 .intro-logo { animation: none; transform: scale(1); opacity: 1; filter: none; transition: transform .9s var(--ease-out), opacity .6s .4s; transform-origin: top left; }
#intro.p3 .intro-logo .ico::after, #intro.p3 .intro-logo .word::before { opacity: 0; transition: opacity .3s; }
@keyframes dolly { to { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes wordin { to { opacity: 1; letter-spacing: 0; transform: none; } }
@keyframes sweepOnce { to { background-position: -20% 0; } }
@keyframes glow { 0% { filter: brightness(1); } 40% { filter: brightness(1.8) sepia(.6) saturate(3); } 100% { filter: brightness(1); } }
.skip-intro {
  position: absolute; right: 24px; bottom: 24px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; color: var(--color-ink-faint);
  background: none; border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: .6em 1.1em; cursor: pointer;
}
.skip-intro:hover { color: var(--color-ink); border-color: var(--color-line-strong); }
@media (max-width: 640px) {
  .intro-logo .ico { width: clamp(100px, 24vh, 220px); }
  .intro-logo .word { width: clamp(160px, 34vh, 300px); }
}

/* ---------------------------------------------------------------------
   6A.2 Hero
   --------------------------------------------------------------------- */
#hero { padding-top: 110px; overflow: hidden; }
/* 2px in from the left edge on purpose: Chrome drops images that cover the entire
   viewport from LCP candidates; the strip sits under the 96% navy left gradient anyway. */
.hero-bg { position: absolute; inset: 0 0 0 2px; z-index: 0; overflow: hidden; }
/* The clipping box (.hero-bg) never moves. The mouse-parallax translates only
   .hero-bg__move, which bleeds 24px past the box on every side, so no edge of the
   photo can ever be exposed and no compositor seam (white hairline) can flicker
   at the screen edges while the cursor moves. */
.hero-bg__move { position: absolute; inset: -24px; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: kb 26s ease-in-out infinite alternate; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* starts at scale(1) so the first painted frame does not exceed the viewport (keeps the photo an LCP candidate) */
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.10) translate(-1.5%, 1%); } }
/* The darkening gradients sit on the section itself, not inside .hero-bg: their
   edges then coincide with the viewport, so there is no anti-aliased interior edge
   where the raw photo could show through as a flickering light hairline on
   fractional device-pixel ratios (Windows 125 % / 150 % scaling). */
#hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,26,51,.96) 0%, rgba(14,26,51,.82) 38%, rgba(14,26,51,.35) 70%, rgba(14,26,51,.55) 100%),
    linear-gradient(180deg, rgba(14,26,51,.7), transparent 30%, transparent 70%, rgba(14,26,51,.95));
}
.hero-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 48px; align-items: end; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.hero-title { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.2rem); letter-spacing: -.01em; font-style: normal; font-weight: 500; line-height: 1.08; margin: 0; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; }
.js .hero-title .line > span { transform: translateY(110%); opacity: 0; }
.js .rv .hero-title .line > span { animation: up .9s var(--ease-out) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
.hero-sub { font-size: 1.1rem; color: var(--color-ink-soft); max-width: 54ch; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.js .hero-sub, .js .hero-cta, .js .index, .js .facts { opacity: 0; }
.js .hero-sub, .js .hero-cta { transform: translateY(16px); }
.js .index { transform: translateY(20px); }
.js .rv .hero-sub { animation: fadeUp .9s .35s var(--ease-out) forwards; }
.js .rv .hero-cta { animation: fadeUp .9s .5s var(--ease-out) forwards; }
.js .rv .index { animation: fadeUp 1s .7s var(--ease-out) forwards; }
.js .rv .facts { animation: fadeUp 1s 1s var(--ease-out) forwards; }
@keyframes up { to { transform: none; opacity: 1; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.index { display: flex; flex-direction: column; border-top: 1px solid rgba(201,162,39,.35); }
.index a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 500; line-height: 1.1;
  color: var(--color-ink); text-decoration: none;
  transition: padding-left .4s var(--ease-out), color .3s;
}
.index a .n { font-family: var(--font-mono); font-size: .75rem; color: var(--color-accent); letter-spacing: .1em; }
.index a .arr { font-family: var(--font-body); font-size: 1rem; color: var(--color-ink-faint); transition: transform .4s var(--ease-out), color .3s; }
.index a:hover, .index a:focus-visible { padding-left: 10px; color: var(--color-accent-hover); }
.index a:hover .arr, .index a:focus-visible .arr { transform: translateX(6px); color: var(--color-accent); }
.index small { display: block; font-family: var(--font-body); font-size: .8rem; color: var(--color-ink-soft); letter-spacing: .02em; }
.facts {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 32px;
  margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-soft);
}
.facts span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); margin-right: 12px; vertical-align: middle; }
.facts .scroll-hint { margin-left: auto; color: var(--color-ink-faint); animation: bob 2.2s ease-in-out infinite; text-decoration: none; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------------------------------------------------------------------
   6A.3 Triptych
   --------------------------------------------------------------------- */
#entries { padding: 0; display: flex; flex-direction: column; }
.trip-head { padding: 72px var(--gutter) 28px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.trip-head h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); font-weight: 500; }
.trip { display: flex; flex: 1; min-height: 70vh; border-top: 1px solid var(--color-line); }
.panel {
  position: relative; flex: 1; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px 34px; border-right: 1px solid var(--color-line);
  color: inherit; text-decoration: none;
  transition: flex .7s var(--ease-out);
}
.panel:last-child { border-right: 0; }
.js .panel { opacity: 0; transform: translateY(30px); }
.js .in .panel { animation: fadeUp .9s var(--ease-out) forwards; }
.in .panel:nth-child(2) { animation-delay: .12s; }
.in .panel:nth-child(3) { animation-delay: .24s; }
.panel img, .panel .plan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .7s; }
.panel img { filter: brightness(.55) saturate(.85); }
.panel::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,26,51,.2), rgba(14,26,51,.35) 45%, rgba(14,26,51,.95)); }
/* highlight = the same gold halo + sweep as the intro logo, the photo itself is not brightened */
.panel::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 35%, rgba(224,189,82,.32) 50%, transparent 65%) 120% 0 / 260% 100% no-repeat,
    radial-gradient(70% 55% at 50% 58%, rgba(201,162,39,.42), rgba(201,162,39,0) 70%);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.55), inset 0 0 90px -30px rgba(201,162,39,.55);
  mix-blend-mode: screen; opacity: 0; transition: opacity .7s var(--ease-out);
}
.panel:hover::before, .panel.on::before { opacity: 1; animation: panelSweep 1.1s ease-out forwards; }
@keyframes panelSweep { to { background-position: -20% 0, 0 0; } }
.panel .txt { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 10px; transition: transform .6s var(--ease-out); }
.panel .num { font-family: var(--font-mono); font-size: .72rem; color: var(--color-accent); letter-spacing: .16em; }
.panel h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 500; }
.panel p { margin: 0; color: var(--color-ink-soft); max-width: 34ch; font-size: .95rem; }
.panel .go { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--color-accent); display: inline-flex; gap: 8px; align-items: center; }
.panel .go i { display: inline-block; width: 0; height: 1px; background: var(--color-accent); transition: width .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .trip:hover .panel { flex: .8; }
  .trip:hover .panel:hover { flex: 1.7; }
}
.panel.on { flex: 1.7; }
.panel.on img, .panel:hover img { transform: scale(1.04); }
.panel.on .txt, .panel:hover .txt { transform: translateY(-8px); }
.panel.on .go i, .panel:hover .go i { width: 38px; }
.plan { background: radial-gradient(ellipse at 50% 70%, #17294D, #0A1428 70%); }
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan path, .plan rect, .plan circle { fill: none; stroke: var(--color-accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: .85; }
.in .plan path, .in .plan rect, .in .plan circle { animation: draw 2.4s .5s ease-out forwards; }
.plan circle { fill: rgba(201,162,39,0); transition: fill .6s; }
.panel:hover .plan circle, .panel.on .plan circle { fill: rgba(201,162,39,.55); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------------
   6A.4 How we work
   --------------------------------------------------------------------- */
.steps-head { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; margin-bottom: 64px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: linear-gradient(90deg, var(--color-accent), rgba(201,162,39,.25)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); }
.in .steps::before { transform: scaleX(1); }
html:not(.js) .steps::before { transform: none; }
.step { display: flex; flex-direction: column; gap: 14px; padding-top: 34px; position: relative; }
.js .step { opacity: 0; transform: translateY(24px); }
.step::before { content: ''; position: absolute; top: 5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-accent); box-shadow: 0 0 0 0 rgba(201,162,39,.5); transition: box-shadow .6s, background .4s; }
.js .in .step { animation: fadeUp .8s var(--ease-out) forwards; }
.in .step:nth-child(1) { animation-delay: .3s; } .in .step:nth-child(2) { animation-delay: .6s; }
.in .step:nth-child(3) { animation-delay: .9s; } .in .step:nth-child(4) { animation-delay: 1.2s; }
.step:hover::before { background: var(--color-accent); box-shadow: 0 0 0 8px rgba(201,162,39,.15); }
.step .num { font-family: var(--font-mono); font-size: .72rem; color: var(--color-accent); letter-spacing: .16em; }
.step h3 { font-size: 1.5rem; font-weight: 500; }
.step p { margin: 0; color: var(--color-ink-soft); font-size: .95rem; }
.steps-cta { margin-top: 56px; }

/* ---------------------------------------------------------------------
   6A.5 Spaces
   --------------------------------------------------------------------- */
.spaces-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--color-line); transform-style: preserve-3d; text-decoration: none; color: inherit;
  transition: transform .5s var(--ease-out), border-color .4s;
}
.js .tile { opacity: 0; transform: translateY(24px) scale(.96); }
.js .in .tile { animation: fadeUp .8s var(--ease-out) forwards; }
.in .tile:nth-child(2) { animation-delay: .1s; } .in .tile:nth-child(3) { animation-delay: .2s; } .in .tile:nth-child(4) { animation-delay: .3s; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform .9s var(--ease-out); }
.tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,15,30,.95)); z-index: 1; }
.tile::after { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(224,189,82,.34), transparent 58%); box-shadow: inset 0 0 0 1px rgba(201,162,39,.55), inset 0 0 70px -24px rgba(201,162,39,.55); opacity: 0; transition: opacity .5s var(--ease-out); mix-blend-mode: screen; }
.tile:hover, .tile:focus-visible { border-color: rgba(201,162,39,.6); }
.tile:hover::after, .tile.on::after { opacity: 1; }
.tile:hover img, .tile.on img { transform: scale(1.06); }
.tile .txt { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.tile h3 { font-size: 1.45rem; font-weight: 500; }
.tile small { color: var(--color-ink-soft); font-size: .8rem; }
.tile .go { font-size: .8rem; color: var(--color-accent); font-weight: 600; letter-spacing: .04em; margin-top: 6px; }

/* ---------------------------------------------------------------------
   6A.6 Why Benaris + footer with the request form
   --------------------------------------------------------------------- */
#why { background: linear-gradient(180deg, var(--color-bg), var(--color-surface-alt)); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.why { padding: 30px 26px; border: 1px solid var(--color-line); border-radius: 10px; background: rgba(23,41,77,.45); display: flex; flex-direction: column; gap: 12px; transition: border-color .4s; }
.js .why { opacity: 0; transform: translateY(24px); }
.js .in .why { animation: fadeUp .8s var(--ease-out) forwards; }
.in .why:nth-child(2) { animation-delay: .1s; } .in .why:nth-child(3) { animation-delay: .2s; } .in .why:nth-child(4) { animation-delay: .3s; }
.why:hover { border-color: rgba(201,162,39,.5); }
.why .ic { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-accent); display: grid; place-items: center; font-family: var(--font-mono); font-size: .7rem; color: var(--color-accent); }
.why h3 { font-size: 1.4rem; font-weight: 500; }
.why p { margin: 0; color: var(--color-ink-soft); font-size: .92rem; }

.footer-quote { background: var(--color-surface-alt); padding: 96px var(--gutter) 48px; }
.foot-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; max-width: var(--container-max); margin: 0 auto; }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quote-form label { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-soft); }
.quote-form label.full { grid-column: 1 / -1; }
.quote-form input, .quote-form textarea { background: var(--color-bg); border: 1px solid var(--color-line-strong); border-radius: 5px; color: var(--color-ink); padding: 12px 14px; font: inherit; font-size: .95rem; }
.quote-form input:focus, .quote-form textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(201,162,39,.25); }
.quote-form textarea { min-height: 110px; resize: vertical; }
.quote-form .actions { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: .9rem; }
.cols h3 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 14px; font-weight: 500; }
.cols a { display: block; color: var(--color-ink-soft); padding: 4px 0; text-decoration: none; }
.cols a:hover { color: var(--color-ink); }
.copy { max-width: var(--container-max); margin: 64px auto 0; padding-top: 22px; border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--color-ink-soft); }
.quote-form .hint { color: var(--color-ink-soft); font-size: .85rem; }
.quote-form .hint a { color: var(--color-ink); }
/* deferred below-the-fold photos (src assigned by motion.js after the intro) */
img.deferred { visibility: hidden; }
.copy a { color: inherit; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .index { max-width: 520px; }
  .trip { flex-direction: column; }
  .panel { min-height: 62vh; flex: none !important; }
  .steps { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps, .tiles, .why-grid, .quote-form { grid-template-columns: 1fr; }
  .quote-form label.full { grid-column: auto; }
  .panel { padding: 28px 22px; }
  .cols { grid-template-columns: 1fr 1fr; }
  #hero { padding-top: 96px; }
  .facts .scroll-hint { display: none; }
}

/* ---------------------------------------------------------------------
   6.4 Card tilt + gold glare (catalog / similar products) and hover photo
   --------------------------------------------------------------------- */
[data-tilt] {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 500ms var(--ease-out), border-color var(--transition), box-shadow var(--transition);
}
[data-tilt].is-tilting { transition: transform 90ms linear, border-color var(--transition), box-shadow var(--transition); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(6px); will-change: transform; }
[data-tilt]::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(224,189,82,.25), transparent 55%); mix-blend-mode: screen; opacity: 0; transition: opacity 150ms ease; pointer-events: none; }
[data-tilt].is-tilting::after { opacity: 1; }
.product-card__image--photo { position: relative; }
.product-card__image--photo .product-card__tag { z-index: 2; }
.product-card__image--photo img.is-primary { position: relative; z-index: 1; transition: clip-path 450ms var(--ease-out); }
.product-card__image--photo img.is-alt { position: absolute; inset: 0; z-index: 0; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__image--photo.has-alt img.is-primary { clip-path: inset(0 0 0 100%); }
}

/* Layout reservation for JS-rendered blocks (catalog / product) */
.filter-bar { min-height: 90px; }
.catalog-grid { min-height: 70vh; align-content: start; }
.gallery__thumbs { min-height: 72px; }
.similar-grid { min-height: 240px; align-content: start; }
#pdpEyebrow { min-height: 1.6em; }
#pdpTitle { min-height: 2.2em; }
#pdpMeta { min-height: 1.6em; }
.spec-wrap { min-height: 176px; margin-bottom: var(--space-7); }
#pdpDescription { min-height: 120px; }
.crumbs { color: var(--color-ink-soft); }
.crumbs a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line-strong); }
.crumbs a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
@media (max-width: 980px) {
  #pdpTitle { min-height: 3.3em; } #pdpMeta { min-height: 3.2em; } .spec-wrap { min-height: 280px; } #pdpDescription { min-height: 220px; } .gallery__thumbs { min-height: 84px; }
}
@media (max-width: 640px) { .filter-bar { min-height: 142px; } .catalog-grid { min-height: 120vh; } }

/* ---------------------------------------------------------------------
   Reduced motion — static, everything visible
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  .js .brand { opacity: 1; }
  .site-header, .nav-shell, .nav__links a::after, .index a, .panel, .panel img, .tile, .tile img { transition: none !important; }
  .site-header.is-hidden { transform: none; }
  .js .hero-title .line > span, .js .hero-sub, .js .hero-cta, .js .index, .js .facts,
  .js .panel, .js .step, .js .tile, .js .why { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-bg img { animation: none !important; transform: none !important; }
  .facts .scroll-hint { animation: none; }
  .steps::before { transform: none !important; transition: none !important; }
  .plan path, .plan rect, .plan circle { stroke-dashoffset: 0 !important; animation: none !important; }
  .panel::before { animation: none !important; transition: none !important; }
  [data-tilt], [data-tilt].is-tilting { transform: none !important; transition: none !important; }
  [data-tilt]::after, .tile::after { display: none; }
  .product-card:hover .product-card__image--photo.has-alt img.is-primary { clip-path: none; }
}