/* =========================================================
   ART METAL — Galerija kovanog gvožđa
   Token-driven, mobile-first stylesheet.
   ========================================================= */

/* ---------- Tokens --------------------------------------- */
:root{
  /* Forge palette */
  --soot:    #0E0D0B;
  --iron:    #1A1714;
  --filings: #34302A;
  --ash:     #9A9388;
  --anneal:  #ECE6DA;
  --ember:   #C0552B;  /* rare "heat" accent on light sections */

  /* Brand anchor red — replaces brass everywhere */
  --signal:      #C82A26;  /* sampled from logo's red — the brand anchor */
  --signal-hi:   #E54741;  /* lighter red for hover/highlights + small text legibility */
  --signal-deep: #8E1F1B;  /* deepened oxblood for large fills if signal feels too "alert" */

  /* Type */
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.5rem, 4.5vw, 2.5rem);
  /* Horizontal inset shared by the floating controls AND the mobile header.
     Overridden at >=768px below. Keeps logo/hamburger vertically aligned with
     the bottom-left assistant launcher + bottom-right back-to-top. */
  --float-edge: 1.4rem;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .25s;
  --t-mid:  .5s;
  --t-slow: .9s;
}

/* ---------- Reset / base --------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

html,body{
  margin:0; padding:0;
  background:var(--soot);
  color:var(--anneal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body{ min-height:100vh; min-height:100svh; }

img,picture,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6,p{ margin:0; }
em{ font-style:italic; }

::selection{ background:var(--signal); color:var(--soot); }

/* Focus */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

/* JS-off fallback: ensure animated elements are visible without JS */
.no-js [data-reveal],
.no-js [data-split]{ opacity:1 !important; transform:none !important; }
.no-js #preloader{ display:none !important; }

/* Container */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Skip link */
.skip-link{
  position:absolute; left:.5rem; top:.5rem;
  background:var(--signal); color:var(--soot);
  padding:.6rem 1rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  transform:translateY(-150%);
  z-index:1000;
  transition:transform var(--t-fast) var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* sr-only */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Ambient page-fixed layers (premium) ---------- */
.frame{
  position:fixed;
  inset: 12px;
  border: 1px solid rgba(154,147,136,.22);
  pointer-events:none;
  z-index: 70;
}
@media (min-width: 768px){
  .frame{ inset: 22px; }
}
@media (max-width: 374px){
  .frame{ inset: 8px; }
}

.vignette{
  position:fixed;
  inset: 0;
  pointer-events:none;
  z-index: 71;
  background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);
}

.grain{
  position:fixed;
  inset: 0;
  pointer-events:none;
  z-index: 72;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* Brushed-metal sheen — extends the grain with a subtle diagonal anisotropic
   highlight that catches "across" the page; very low opacity, never animated. */
.sheen{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:73;
  opacity:.025;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255,255,255,.0) 0px,
      rgba(255,255,255,.6) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 6px
    );
}

/* Scroll-progress — thin red line at top */
.scroll-progress{
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  z-index:76;
  background: rgba(255,255,255,.03);
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:0%;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(200,42,38,.55);
  transition: width .1s linear;
}

/* Custom cursor — fine-pointer only, hidden under reduced motion */
.cursor{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  /* Above every overlay (menu, assistant, modal). pointer-events:none means
     it cannot block input even when on top. */
  z-index: 11000;
  display:none;            /* JS reveals only on pointer:fine */
  will-change: transform;
  transition: opacity .2s var(--ease);
}
.cursor__ring{
  position:absolute;
  display:block;
  width:30px; height:30px;
  border: 1px solid var(--ash);
  border-radius: 50%;
  transition:
    width .25s var(--ease),
    height .25s var(--ease),
    border-color .25s var(--ease),
    background .25s var(--ease),
    opacity .2s var(--ease);
  will-change: transform;
}
.cursor[data-state="link"] .cursor__ring{
  width: 46px; height: 46px;
  border-color: var(--signal);
}
.cursor[data-state="image"] .cursor__ring{
  width: 88px; height: 88px;
  border-color: var(--signal);
  background: rgba(200,42,38,.08);
}
.cursor__label{
  position:absolute;
  font-family: var(--font-mono);
  font-size:.65rem;
  letter-spacing:.24em;
  text-transform: uppercase;
  color: var(--anneal);
  opacity:0;
  white-space: nowrap;
  transition: opacity .2s var(--ease);
  will-change: transform;
}
.cursor[data-state="image"] .cursor__label{ opacity: 1; }
/* Touch / coarse pointer: keep native cursor */
@media (pointer: coarse){
  .cursor{ display:none !important; }
}
/* Reduced motion: hide entirely (the OS cursor still works) */
@media (prefers-reduced-motion: reduce){
  .cursor{ display:none !important; }
}
/* When the cursor is on, hide the native cursor on interactive elements
   so the custom ring is the only marker. Keyboard focus-visible ring stays. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
  html, body, a, button, [role="button"], .media, .hero__bg{
    cursor: none;
  }
  /* …but real text inputs keep the native I-beam */
  input, textarea, select, [contenteditable]{
    cursor: auto;
  }

  /* While ANY overlay is open (assistant panel, model modal, mobile menu),
     suppress the custom ring and RESTORE the native cursor across the page
     so the user always has a visible pointer to click and type with. */
  body.assistant-open .cursor,
  body.modal-open .cursor,
  body.menu-open .cursor{
    display: none !important;
  }
  body.assistant-open,
  body.assistant-open *,
  body.modal-open,
  body.modal-open *,
  body.menu-open,
  body.menu-open *{
    cursor: auto;
  }
  body.assistant-open a,
  body.assistant-open button,
  body.assistant-open [role="button"],
  body.modal-open a,
  body.modal-open button,
  body.modal-open [role="button"],
  body.menu-open a,
  body.menu-open button,
  body.menu-open [role="button"]{
    cursor: pointer;
  }
  body.assistant-open input,
  body.assistant-open textarea,
  body.modal-open input,
  body.modal-open textarea{
    cursor: text;
  }
  /* Backdrop is click-to-close — hint it visually */
  body.modal-open .kat-modal__backdrop{ cursor: pointer; }
}

/* Forge sparks — tiny red embers (transient DOM nodes added by polish.js) */
.forge-spark{
  position: fixed;
  pointer-events: none;
  z-index: 88;
  background: var(--signal);
  border-radius: 50%;
  opacity: .9;
  box-shadow: 0 0 6px rgba(200,42,38,.7);
  transform: translate(-50%, -50%);
  animation: forgeSparkFly .85s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes forgeSparkFly{
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--fx, 0), var(--fy, 0)) scale(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .forge-spark{ display:none; }
}

/* ---------- Typography primitives ------------------------ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
  display:inline-flex; flex-wrap:wrap; align-items:center;
  gap:.55em;
}
.eyebrow span{ display:inline-block; }
.eyebrow .eyebrow__dot{ color:var(--signal); font-size:.85em; line-height:1; }
.eyebrow--dark{ color:#5b5448; }

.section-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem, 6.2vw, 4.25rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--anneal);
  max-width:18ch;
}
.section-title em{
  color:var(--signal);
  font-style:italic;
  font-weight:500;
}

/* Stamped code label (Space Mono) */
.code{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
}

/* Media placeholder */
.media{
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  border:1px solid #1f1b16;
  background:
    repeating-linear-gradient(135deg, #221e19 0 2px, transparent 2px 16px),
    radial-gradient(120% 80% at 30% 20%, #2a2319 0%, #14110d 60%, #0c0a07 100%);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  isolation:isolate;
}
.media::before{
  /* faint top edge highlight — like firelight off the bevel */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 35% at 50% 0%, rgba(200,42,38,.10) 0%, rgba(200,42,38,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 30%);
  pointer-events:none; z-index:1;
}
.media::after{
  /* deep vignette */
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none; z-index:1;
}
.media .code{
  position:absolute; top:14px; left:14px;
  z-index:2;
}
.media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 38%;
  position:absolute; inset:0; z-index:0;
  /* Match the unified hero treatment so all slots feel like one collection */
  filter: saturate(0.78) brightness(0.78) contrast(1.06);
  /* Blur-up fade — the forge-toned .media background acts as the placeholder */
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.media img.is-loaded{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .media img{ opacity: 1; transition: none; }
}

/* Buttons */
.btn{
  --pad-x: 1.5rem;
  --pad-y: .95rem;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid transparent;
  position:relative; overflow:hidden;
  transition:background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn--sm{ --pad-x:1.05rem; --pad-y:.65rem; font-size:.78rem; }
.btn--lg{ --pad-x:2rem; --pad-y:1.15rem; font-size:1rem; }

/* Filled red button — WHITE label for AA contrast on --signal red */
.btn--brass{ background:var(--signal); color:#fff; }
.btn--brass:hover{ background:var(--signal-hi); color:#fff; }
.btn--brass:active{ transform:translateY(1px); }

.btn--ghost{
  background:transparent; color:var(--anneal);
  border-color:rgba(236,230,218,.28);
}
.btn--ghost:hover{
  border-color:var(--signal); color:var(--signal-hi);
}

/* ---------- Preloader (logo + red --signal accent) -------- */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--soot);
  display:grid; place-items:center;
  pointer-events:none;
}
.preloader__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
}
.preloader__logo{
  display:block;
  height: clamp(72px, 14vw, 124px);
  width: auto;
  opacity: 0;
  transform: scale(.94);
  /* Anneal halo lifts the dark scrollwork off the soot background — neutral, no brass */
  filter: drop-shadow(0 0 22px rgba(236,230,218,.22));
}
.preloader__line{
  display:block;
  width: clamp(96px, 18vw, 168px);
  height: 1.5px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 14px rgba(200,42,38,.55);
}
.is-loaded .preloader{ display:none; }

/* ---------- Header --------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  padding-block:1.1rem;
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease),
              padding var(--t-mid) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(26,23,20,.82);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color:var(--filings);
  padding-block:.7rem;
}
.site-header.is-scrolled .header__scrim{ opacity:0; }
.header__scrim{
  position:absolute; inset:0; bottom:auto; height:160%;
  z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(14,13,11,.55) 0%, rgba(14,13,11,0) 100%);
  transition: opacity var(--t-mid) var(--ease);
}
/* Mobile-first: logo-left, hamburger-right via space-between.
   Horizontal inset matches the floating controls (.assistant / .back-to-top)
   so the navbar logo + hamburger sit on the same vertical lines as the
   bottom-left launcher and bottom-right back-to-top. */
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-left:  max(var(--float-edge), env(safe-area-inset-left));
  padding-right: max(var(--float-edge), env(safe-area-inset-right));
}

/* Socials (left) */
.header__socials{
  display:none;
  gap:.7rem;
  align-items:center;
}
.header__socials a{
  display:inline-flex;
  width:36px; height:36px;
  align-items:center; justify-content:center;
  color:var(--ash);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.header__socials svg{ width:18px; height:18px; }
.header__socials a:hover{ color:var(--signal); transform:translateY(-2px); }

/* Brand mark — real logo, used in navbar + footer */
.brand-mark{
  display:inline-flex; align-items:center;
  line-height:0;
  position:relative;
  padding-block:.3rem;
  transition: opacity var(--t-fast) var(--ease);
}
.brand-mark__img{
  display:block;
  height: clamp(32px, 4vw, 44px);
  width:auto;
  /* Neutral cream halo so the red --signal stays unique to the tick below */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4))
          drop-shadow(0 0 14px rgba(236,230,218,.18));
}
.brand-mark:hover{ opacity:.9; }
.brand-mark::after{
  /* Logo's signal red — small tick under the mark, only here */
  content:"";
  position:absolute; left:50%;
  bottom:-.05rem;
  width:18px; height:2px;
  background: var(--signal);
  transform: translateX(-50%);
  opacity:.85;
  pointer-events:none;
  transition: width var(--t-fast) var(--ease);
}
.brand-mark:hover::after{ width:28px; }

/* Right cluster: nav links + CTA + hamburger */
.header__right{
  display:flex;
  align-items:center;
  gap:1rem;
}

/* Desktop nav + dropdown */
.nav-desktop{ display:none; }
.nav-desktop > ul{
  display:flex; gap:2rem;
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.nav-desktop > ul > li{ position:relative; }
.nav-desktop a,
.nav-desktop__trigger{
  position:relative;
  padding:.55rem .1rem;
  color:var(--anneal);
  display:inline-flex; align-items:center; gap:.4rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.nav-desktop a::after,
.nav-desktop__trigger::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--signal);
  transform-origin:left; transform:scaleX(0);
  transition:transform var(--t-mid) var(--ease);
}
.nav-desktop a:hover,
.nav-desktop__trigger:hover,
.nav-desktop__has-drop:hover .nav-desktop__trigger{
  color:var(--signal-hi);
}
.nav-desktop a:hover::after,
.nav-desktop__trigger:hover::after,
.nav-desktop__has-drop:hover .nav-desktop__trigger::after{
  transform:scaleX(1);
}
.nav-desktop__caret{
  width:11px; height:11px;
  transition: transform var(--t-fast) var(--ease);
}
.nav-desktop__has-drop[data-open] .nav-desktop__caret,
.nav-desktop__has-drop:hover .nav-desktop__caret,
.nav-desktop__has-drop:focus-within .nav-desktop__caret{ transform: rotate(180deg); }

.nav-desktop__panel{
  position:absolute;
  top: 100%;
  left: -1.2rem;
  min-width: 17rem;
  background: var(--iron);
  border: 1px solid var(--filings);
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4);
  /* No external margin — close the gap so hover doesn't drop between trigger and panel.
     Inner padding-top creates visual breathing room while keeping a continuous hit area. */
  padding: 1.1rem .55rem .55rem;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.nav-desktop__panel::before{
  /* fine brass top hairline */
  content:""; position:absolute; top:0; left:1.2rem; right:1.2rem;
  height:1px; background:var(--signal); opacity:.7;
}
.nav-desktop__has-drop:hover .nav-desktop__panel,
.nav-desktop__has-drop:focus-within .nav-desktop__panel,
.nav-desktop__has-drop[data-open] .nav-desktop__panel{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.nav-desktop__panel ul{ display:flex; flex-direction:column; }
.nav-desktop__panel a{
  display:flex; align-items:center; gap:.8rem;
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--anneal);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-desktop__panel a::after{ display:none; }
.nav-desktop__panel a:hover{
  background: rgba(200,42,38,.08);
  color: var(--signal-hi);
}
.nav-desktop__panel-num{
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--signal);
}

/* Brass CTA in header */
.nav-cta{ display:none; }

/* Language switcher — SR / EN */
.lang-switcher{
  display:none;
  align-items:center;
  gap:.4rem;
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.lang-switcher__btn{
  background:none; border:0; cursor:pointer;
  color: var(--ash);
  padding: .3rem .15rem;
  transition: color var(--t-fast) var(--ease);
}
.lang-switcher__btn[aria-pressed="true"]{ color: var(--signal); }
.lang-switcher__btn:hover{ color: var(--signal-hi); }
.lang-switcher__sep{ color: var(--filings); opacity: .8; }

/* Mobile overlay: top row — logo (left) · lang switcher (right).
   The X close button is the navbar .menu-toggle (raised above overlay below). */
.menu-overlay__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}
.menu-overlay__top .lang-switcher{
  display:inline-flex;
  font-size:.78rem;
  letter-spacing:.24em;
}
.menu-overlay__brand{
  display:inline-flex; align-items:center;
  line-height:0;
}
.menu-overlay__brand img{
  display:block;
  height: clamp(28px, 7vw, 38px);
  width:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4))
          drop-shadow(0 0 14px rgba(236,230,218,.18));
}

.menu-toggle{
  width:44px; height:44px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px;
  border:1px solid rgba(236,230,218,.28);
  border-radius:2px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.menu-toggle:hover{ border-color:var(--signal); }
.menu-toggle__bar{
  display:block; width:18px; height:1.5px; background:var(--anneal);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  transform-origin:center;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }

/* ---------- Mobile overlay menu -------------------------- */
.menu-overlay{
  position:fixed; inset:0;
  z-index:80;
  background:var(--soot);
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(200,42,38,.07) 0%, transparent 60%),
    var(--soot);
  display:flex; flex-direction:column;
  /* Horizontal inset aligns with the navbar logo/hamburger AND the bottom
     floating controls. Safe-area aware on iOS. */
  padding:
    calc(1.4rem + 56px)
    max(var(--float-edge), env(safe-area-inset-right, 0px))
    calc(2rem + env(safe-area-inset-bottom, 0px))
    max(var(--float-edge), env(safe-area-inset-left, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.menu-overlay.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform var(--t-slow) var(--ease), visibility 0s linear 0s;
}
.menu-overlay__inner{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:100%;
  gap:2rem;
}
.menu-overlay__list{
  display:flex; flex-direction:column;
  gap:0;
  border-top:1px solid var(--filings);
}
.menu-overlay__list li{
  border-bottom:1px solid var(--filings);
  overflow:hidden;
}
.menu-overlay__list > li > a,
.menu-overlay__acc-trigger{
  display:flex; align-items:baseline; gap:1.1rem;
  width:100%;
  padding:1.1rem 0;
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 9vw, 3.2rem);
  font-weight:500; line-height:1;
  color:var(--anneal);
  background:none; border:0; cursor:pointer; text-align:left;
  transform:translateY(110%);
  transition: color var(--t-fast) var(--ease);
}
.menu-overlay.is-open .menu-overlay__list > li > a,
.menu-overlay.is-open .menu-overlay__acc-trigger{
  transform:translateY(0);
  transition: transform .8s var(--ease) calc(.15s + var(--i, 0) * .08s);
}
.menu-overlay__num{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  color:var(--signal);
  align-self:flex-start;
  margin-top:.55rem;
  flex-shrink:0;
}
.menu-overlay__txt{ flex:1; }
.menu-overlay__list > li > a:hover,
.menu-overlay__acc-trigger:hover{ color:var(--signal-hi); }
.menu-overlay__list > li > a:hover .menu-overlay__txt,
.menu-overlay__acc-trigger:hover .menu-overlay__txt{ font-style:italic; }

/* Mobile accordion */
.menu-overlay__caret{
  width:18px; height:18px;
  color:var(--ash);
  flex-shrink:0;
  align-self:center;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.menu-overlay__acc-trigger[aria-expanded="true"] .menu-overlay__caret{
  transform: rotate(180deg);
  color: var(--signal);
}
.menu-overlay__sub{
  list-style:none; margin:0; padding: 0 0 1.1rem 3.2rem;
  display:flex; flex-direction:column; gap:.3rem;
  font-family: var(--font-body);
}
.menu-overlay__sub[hidden]{ display:none; }
.menu-overlay__sub a{
  display:block;
  padding: .55rem 0;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--ash);
  transition: color var(--t-fast) var(--ease);
}
.menu-overlay__sub a:hover{ color: var(--signal); }

/* Prominent CTA button in mobile overlay */
.menu-overlay__cta{
  align-self:flex-start;
  margin-top:0;
}

.menu-overlay__foot{
  display:flex; flex-direction:column; gap:1.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--filings);
}

.menu-overlay__socials{
  display:flex; gap:1.2rem;
  align-items:center;
}
.menu-overlay__socials a{
  display:inline-flex;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  border:1px solid var(--filings);
  color:var(--anneal);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.menu-overlay__socials svg{ width:18px; height:18px; }
.menu-overlay__socials a:hover{
  color:var(--signal); border-color:var(--signal);
  transform:translateY(-2px);
}

.menu-overlay__meta{
  display:flex; flex-direction:column; gap:.5rem;
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.14em; color:var(--ash);
  text-transform:uppercase;
}
.menu-overlay__phone, .menu-overlay__mail{
  color:var(--anneal);
}
.menu-overlay__phone{ font-size:.92rem; }
.menu-overlay__addr{ color:var(--ash); line-height:1.4; }

body.menu-open{ overflow:hidden; }

/* When the overlay is open, raise the header so the X (menu-toggle) sits
   ABOVE the overlay scrim, and hide everything else in the navbar — the
   overlay carries its own logo/lang switcher at the top. */
body.menu-open .site-header{
  z-index: 90;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.menu-open .header__scrim{ opacity: 0; }
body.menu-open .nav-desktop,
body.menu-open .brand-mark,
body.menu-open .header__socials,
body.menu-open .header__right .lang-switcher,
body.menu-open .header__right .nav-cta{
  visibility: hidden;
  pointer-events: none;
}
/* X tints red to signal "close" */
body.menu-open .menu-toggle{
  border-color: rgba(200,42,38,.45);
}
body.menu-open .menu-toggle__bar{ background: var(--signal); }

/* ---------- Hero (3-slide full-bleed carousel) ----------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:var(--soot);
  color:var(--anneal);
}
.hero:focus{ outline:none; }

/* --- Slide stage --- */
.hero__stage{
  position:absolute; inset:0;
  z-index:0;
}
.hero__slide{
  position:absolute; inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.hero__slide[data-active]{
  opacity:1;
  visibility:visible;
}
.hero__bg{
  position:absolute; inset:0;
  background-color:#14110d;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-image:
    repeating-linear-gradient(135deg, rgba(34,30,25,.55) 0 2px, transparent 2px 16px),
    radial-gradient(120% 80% at 30% 20%, #2a2319 0%, #14110d 60%, #0c0a07 100%);
  will-change: transform, clip-path;
  transform-origin:center;
  /* Unify the slides: tone down saturation, normalize contrast (no warm sepia) */
  filter: saturate(0.78) brightness(0.78) contrast(1.06);
}

/* Strong dark scrim — left + bottom, lighter middle */
.hero__scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    /* left wash for wordmark */
    linear-gradient(90deg, rgba(14,13,11,.78) 0%, rgba(14,13,11,.4) 28%, rgba(14,13,11,0) 60%),
    /* bottom-right shadow for copy + controls */
    linear-gradient(180deg, rgba(14,13,11,.45) 0%, rgba(14,13,11,0) 22%, rgba(14,13,11,.55) 72%, rgba(14,13,11,.94) 100%);
}

/* Hero-local soft vignette */
.hero__vignette{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(110% 80% at 50% 50%, transparent 45%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
  opacity:.85;
}

/* Brass arc overlay */
.hero__arc{
  position:absolute;
  z-index:2;
  pointer-events:none;
  display:none;
  width:120vmin;
  height:120vmin;
  right:-30vmin;
  top:50%;
  transform:translateY(-50%);
  opacity:.55;
}
.hero__arc circle{
  fill:none;
  stroke:var(--signal);
  stroke-width:1;
  opacity:.45;
  vector-effect:non-scaling-stroke;
}

/* --- Counter (top-right, absolute) --- */
.hero__counter{
  position:absolute;
  z-index:4;
  top: 5.5rem;
  right: var(--gutter);
  display:flex;
  align-items:center;
  gap:.85rem;
  color:var(--signal);
  width: min(18rem, 60vw);
}
.hero__counter-num{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 3.6vw, 2.4rem);
  line-height: 1;
  color: var(--signal);
  display:inline-block;
  min-width: 1.6em;
  overflow:hidden;
}
.hero__counter-divider{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.22em;
  color: rgba(200,42,38,.7);
}
.hero__counter-sep{ opacity:.55; }
.hero__counter-total{ font-weight:700; opacity:.85; }
.hero__counter-bar{
  position:relative;
  flex:1;
  height:1px;
  background: rgba(200,42,38,.22);
  overflow:hidden;
  min-width: 3rem;
}
.hero__counter-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:var(--signal);
}

/* --- Provenance vertical label (desktop only) --- */
.hero__provenance{
  position:absolute;
  z-index:4;
  right: 1.4rem;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: .6;
  white-space: nowrap;
  pointer-events:none;
  display:none;
}
.hero__provenance::before{
  content:"";
  display:inline-block;
  inline-size: 1.4em;
  block-size: 1px;
  margin-inline-end: .9em;
  background: var(--signal);
  opacity:.7;
  vertical-align: middle;
}

/* --- Main composition: wordmark + copies as one contiguous block --- */
.hero__layout{
  position:relative;
  z-index:3;
  min-height: 100vh;
  min-height: 100svh;
  /* Mobile-first: flex column, vertically centered — one block, no empty gap */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.3rem;
  padding-top: 7rem;
  padding-bottom: 6.5rem;
}

/* Wordmark — page h1 */
.hero__wordmark{
  margin:0;
  display:flex; flex-direction:column;
  align-items:flex-start;
  line-height:.82;
  user-select:none;
  text-transform:uppercase;
  font-family:var(--font-display);
  letter-spacing:-.03em;
  color:var(--anneal);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hero__wordmark-art{
  font-size: clamp(2.6rem, 14vw, 7.4rem);
  font-weight:300;
  display:block;
}
.hero__wordmark-metal{
  font-size: clamp(2.6rem, 14vw, 7.4rem);
  font-weight:700;
  display:block;
  margin-top: -0.04em;
}

/* Copies block — single cohesive unit, tightened spacing.
   Grid-stacked: all copies share one grid cell, so swapping active
   state does not change container height. */
.hero__copies{
  position:relative;
  width:100%;
  display: grid;
  grid-template-areas: "stack";
  /* Wide enough for body sentences to read on single lines, no wider */
  max-width: clamp(20rem, 38vw, 32rem);
}
.hero__copy{
  grid-area: stack;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.hero__copy[data-active]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.hero__tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--signal);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  margin: 0 0 .5rem;
  line-height:1.2;
}
.hero__heading{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--anneal);
  font-size: clamp(2rem, 5.2vw, 3.3rem);
  line-height: 1.02;
  letter-spacing:-.018em;
  margin: 0 0 1.1rem;
}
.hero__body{
  font-size: clamp(.95rem, 1.5vw, 1.04rem);
  line-height:1.55;
  color:var(--anneal);
  opacity:.92;
}
.hero__body p{ margin:0; }
/* Lines flow as one tight block — no paragraph gaps */
.hero__body p + p{ margin-top: 0; }

/* --- Controls (bottom-right, absolute) --- */
.hero__controls{
  position:absolute;
  z-index:4;
  right: var(--gutter);
  bottom: 2.4rem;
  display:flex;
  gap:.65rem;
  align-items:center;
}
.hero__nav{
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(236,230,218,.28);
  color:var(--anneal);
  background: rgba(14,13,11,.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.hero__nav:hover{
  border-color:var(--signal);
  color:var(--signal);
}
.hero__nav:active{ transform:scale(.96); }
.hero__nav svg{ width:18px; height:18px; }
.hero__nav:disabled{ opacity:.4; cursor:not-allowed; }

.hero__dots{
  display:flex; align-items:center; gap:.55rem;
  margin-left:.6rem;
}
.hero__dots button{
  position:relative;
  display:block;
  width:22px; height:14px;
  background: transparent;
  border:0; padding:0;
  cursor:pointer;
}
.hero__dots .hero__dot-bar{
  position:absolute;
  left:0; top: 50%;
  transform: translateY(-50%);
  width:22px; height:1.5px;
  background: rgba(236,230,218,.28);
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.hero__dots button:hover .hero__dot-bar{ background: var(--anneal); }
.hero__dots button[aria-current="true"] .hero__dot-bar{
  background: var(--signal);
  width:36px;
}
.hero__dots .hero__dot-spark{ display:none; }  /* unused — signal red lives under the logo only */

/* Reveal default state (JS-on) — not applied inside .hero */
.js [data-reveal]{ opacity:0; transform: translateY(24px); }
.js [data-split]{ opacity:1; }

/* Reveal default state (JS-on) — not applied inside .hero */
.js [data-reveal]{ opacity:0; transform: translateY(24px); }
.js [data-split]{ opacity:1; }

/* ---------- Outline-Bodoni marquee divider --------------- */
.marquee-divider{
  position:relative;
  background: var(--soot);
  border-block: 1px solid var(--filings);
  padding-block: clamp(1.6rem, 4vw, 2.8rem);
  overflow:hidden;
  isolation: isolate;
}
.marquee-divider::before,
.marquee-divider::after{
  /* fade the edges so the loop seam doesn't pop */
  content:""; position:absolute; top:0; bottom:0;
  width: clamp(40px, 8vw, 120px);
  z-index:1;
  pointer-events:none;
}
.marquee-divider::before{ left:0; background: linear-gradient(90deg, var(--soot), transparent); }
.marquee-divider::after { right:0; background: linear-gradient(-90deg, var(--soot), transparent); }
.marquee-divider__track{
  display:flex;
  align-items:center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  width: max-content;
  white-space: nowrap;
  animation: marqueeDivider 42s linear infinite;
  will-change: transform;
}
.marquee-divider__item{
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.9rem, 5.5vw, 4.2rem);
  letter-spacing: -.012em;
  text-transform: uppercase;
  line-height: 1;
  /* Outline only — chisel-sharp */
  color: transparent;
  -webkit-text-stroke: 1px var(--anneal);
  opacity: .85;
}
.marquee-divider__sep{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.5vw, 4.2rem);
  color: var(--signal);
  line-height: 1;
  opacity: .85;
}
@keyframes marqueeDivider{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-divider__track{ animation: none; }
}

/* ---------- Trust strip ---------------------------------- */
.trust{
  background:var(--iron);
  border-block:1px solid var(--filings);
  overflow:hidden;
  padding-block:1.1rem;
}
.trust__track{
  display:flex; gap:0;
  width:max-content;
  animation: marquee 38s linear infinite;
}
.trust__list{
  display:flex; align-items:center; gap:2.4rem;
  padding-right:2.4rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
  white-space:nowrap;
}
.trust__list li{ position:relative; }
.trust__list li + li::before{
  content:"·";
  position:absolute; left:-1.4rem; top:50%;
  transform: translateY(-50%);
  color:var(--signal);
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Manifest ------------------------------------- */
.manifest{
  padding-block: clamp(4rem, 10vw, 8rem);
  border-bottom:1px solid var(--filings);
}
.manifest__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  align-items:start;
}
.manifest__left{
  display:flex; flex-direction:column; gap:1.3rem;
}
.manifest__years{
  display:flex; align-items:baseline; gap:.8rem;
}
.manifest__count{
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(4rem, 12vw, 7.5rem);
  line-height:.9;
  color:var(--signal);
}
.manifest__years-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
  max-width:7rem;
}
.manifest__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem, 4vw, 2.65rem);
  line-height:1.18;
  letter-spacing:-.005em;
  color:var(--anneal);
  max-width:32ch;
}
.manifest__title em{ color:var(--signal); font-style:italic; }
.manifest__sub{
  margin-top:1.4rem;
  color:var(--ash);
  font-size:1rem;
  max-width:32rem;
}

/* ---------- Categories ----------------------------------- */
.cats{
  padding-block: clamp(4rem, 10vw, 8rem);
}
.cats__head{
  display:flex; flex-direction:column; gap:1.2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.cats__viewport{
  position:relative;
  padding-inline: var(--gutter);
}
.cats__track{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.cat{ position:relative; }
.cat__inner{
  display:block;
  background:var(--iron);
  border:1px solid var(--filings);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  height:100%;
}
.cat__inner:hover{ border-color:var(--signal); }
.cat__inner:hover .media{ transform:scale(1.02); }
.cat__inner:hover .cat__glow{ opacity:1; }
.cat__inner:hover .cat__link{ color:var(--signal-hi); }
.cat__inner:hover .cat__link span{ transform: translateX(6px); }

.cat__media{ aspect-ratio: 4/5; }
.cat__glow{
  position:absolute; inset:0;
  z-index:1;
  background: radial-gradient(60% 50% at 50% 100%, rgba(192,85,43,.32) 0%, rgba(192,85,43,0) 70%);
  opacity:0; transition: opacity var(--t-mid) var(--ease);
  pointer-events:none;
}

.cat__body{
  padding:1.4rem 1.4rem 1.6rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.cat__num{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--signal);
}
.cat__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height:1.1;
  color:var(--anneal);
}
.cat__desc{
  color:var(--ash);
  font-size:.95rem;
  line-height:1.55;
  max-width:32ch;
}
.cat__link{
  margin-top:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
  display:inline-flex; gap:.5em; align-items:center;
  transition: color var(--t-fast) var(--ease);
}
.cat__link span{
  display:inline-block;
  transition: transform var(--t-fast) var(--ease);
}

/* ---------- Featured grid -------------------------------- */
.featured{
  padding-block: clamp(4rem, 10vw, 8rem);
  background:
    linear-gradient(180deg, transparent 0%, rgba(26,23,20,.4) 50%, transparent 100%),
    var(--soot);
}
.featured__head{
  display:flex; flex-direction:column; gap:1.2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.featured__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.featured__item{ display:flex; flex-direction:column; gap:.9rem; }
.featured__item .media{ aspect-ratio:4/5; }
.featured__meta{ display:flex; flex-direction:column; gap:.25rem; }
.featured__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.2rem;
  color:var(--anneal);
}
.featured__spec{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ash);
}

/* ---------- Process -------------------------------------- */
.process{
  padding-block: clamp(4rem, 10vw, 8rem);
  border-top:1px solid var(--filings);
  background:var(--iron);
}
.process__head{
  display:flex; flex-direction:column; gap:1.2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.process__list{
  display:flex; flex-direction:column;
}
.step{
  position:relative;
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:start;
  gap: 1.4rem;
  padding-block: 1.6rem;
  border-top:1px solid var(--filings);
}
.step:last-child{ border-bottom:1px solid var(--filings); }
.step__num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height:1;
  color:var(--signal);
}
.step__body{ display:flex; flex-direction:column; gap:.35rem; }
.step__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  color:var(--anneal);
}
.step__desc{
  color:var(--ash);
  font-size:1rem;
  max-width:42ch;
}
.step__rule{ display:none; }

/* ---------- Why ------------------------------------------ */
.why{
  padding-block: clamp(4rem, 10vw, 8rem);
}
.why__head{
  display:flex; flex-direction:column; gap:1.2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.why__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}
.why__item{
  display:flex; flex-direction:column; gap:.6rem;
  padding: 1.8rem 1.6rem 2rem;
  background: var(--iron);
  border:1px solid var(--filings);
  position:relative;
  transition: border-color var(--t-fast) var(--ease);
}
.why__item:hover{ border-color: var(--signal); }
.why__item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--signal);
  transform-origin:left; transform:scaleX(0);
  transition: transform var(--t-mid) var(--ease);
}
.why__item:hover::before{ transform:scaleX(1); }
.why__num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size: 1.8rem;
  color:var(--signal);
  line-height:1;
}
.why__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  color:var(--anneal);
}
.why__desc{
  color:var(--ash);
  font-size:1rem;
  max-width:34ch;
}

/* ---------- CTA band ------------------------------------- */
.cta-band{
  padding-block: clamp(4.5rem, 12vw, 9rem);
  background:var(--anneal);
  color:var(--soot);
  position:relative; overflow:hidden;
}
.cta-band::before{
  /* paper-fiber texture */
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 2px, transparent 2px 16px);
  pointer-events:none;
}
.cta-band__inner{
  display:flex; flex-direction:column; gap:1.4rem;
  position:relative;
}
.cta-band__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(2.3rem, 7vw, 4.8rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--soot);
  max-width:22ch;
}
.cta-band__title em{ color:var(--ember); font-style:italic; }
.cta-band__sub{
  color:#3a3530;
  max-width: 38rem;
  font-size: 1.05rem;
}
.cta-band__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem;
  margin-top:.6rem;
}
.cta-band__actions .btn--brass{
  background:var(--soot); color:var(--anneal);
  border-color:var(--soot);
}
.cta-band__actions .btn--brass:hover{
  background:var(--ember); border-color:var(--ember); color:var(--anneal);
}
.cta-band__phone{
  display:inline-flex; flex-direction:column; gap:.15rem;
  line-height:1.1;
}
.cta-band__phone-label{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: #6b6258;
}
.cta-band__phone-num{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.6rem;
  color:var(--soot);
  transition: color var(--t-fast) var(--ease);
}
.cta-band__phone:hover .cta-band__phone-num{ color:var(--ember); }

/* ---------- Footer --------------------------------------- */
.site-footer{
  background:var(--soot);
  color:var(--anneal);
  border-top:1px solid var(--filings);
  padding-top: clamp(3.5rem, 8vw, 6rem);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.brand-mark--footer .brand-mark__img{
  height: clamp(48px, 5vw, 64px);
}
.brand-mark--footer::after{ left:0; transform: translateX(0); width:24px; }
.brand-mark--footer:hover::after{ width:38px; }
.footer__tag{
  margin-top:.9rem;
  color:var(--ash);
  font-size:.92rem;
  max-width:28rem;
}
.footer__heading{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:1.1rem;
}
.footer__col ul{ display:flex; flex-direction:column; gap:.55rem; font-size:.95rem; color:var(--anneal); }
.footer__col ul a{ opacity:.85; transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.footer__col ul a:hover{ color:var(--signal-hi); opacity:1; }
.footer__addr{
  font-style:normal;
  display:flex; flex-direction:column; gap:.55rem;
  font-size:.95rem;
}
.footer__addr a{ transition: color var(--t-fast) var(--ease); }
.footer__addr a:hover{ color:var(--signal-hi); }
.footer__hours{ color:var(--ash); font-size:.95rem; }
.footer__maps{
  display:inline-block;
  margin-top:1rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
}
.footer__maps:hover{ color:var(--signal-hi); }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; align-items:center;
  padding-block: 1.4rem;
  border-top:1px solid var(--filings);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ash);
}
.footer__copy{ max-width:36rem; }

.to-top{
  display:inline-flex; align-items:center; gap:.7rem;
  color:var(--signal);
  transition: color var(--t-fast) var(--ease);
}
.to-top:hover{ color:var(--signal-hi); }
.to-top__line{
  display:inline-block; width:30px; height:1px; background:var(--signal);
  position:relative;
  transition: transform var(--t-fast) var(--ease);
}
.to-top__line::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid var(--signal); border-right:1px solid var(--signal);
  transform: rotate(-45deg);
}
.to-top:hover .to-top__line{ transform: translateY(-3px); }

/* =========================================================
   Responsive — tablet
   ========================================================= */
@media (min-width: 768px){
  .nav-desktop ul{ gap:1.9rem; }

  .manifest__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 3rem;
  }

  .cats__track{
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
  }

  .featured__grid{
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
  }
  .featured__item--xl{ grid-column: span 2; }
  .featured__item--xl .media{ aspect-ratio: 16/10; }

  .step{
    grid-template-columns: minmax(140px, .25fr) 1fr;
    gap: 2.4rem;
    padding-block: 2.2rem;
  }

  .why__grid{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
  }

  .footer__grid{
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}

/* =========================================================
   Responsive — desktop
   ========================================================= */
@media (min-width: 1024px){
  .site-header{ padding-block:1.4rem; }
  .site-header.is-scrolled{ padding-block:.85rem; }

  /* Desktop header: 3-column grid — NAV left · LOGO center · CLUSTER right */
  .header__inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: unset;
    gap: 1.5rem;
  }
  .nav-desktop{ display:block; justify-self:start; }
  .brand-mark{ justify-self:center; }
  .header__right{
    justify-self:end;
    gap: 1.3rem;
  }
  .header__socials{ display:flex; }
  .lang-switcher{ display:inline-flex; }
  .nav-cta{ display:inline-flex; }
  .menu-toggle{ display:none; }

  /* Hero on desktop: brass arc visible, layout becomes 2-col via .hero__layout */
  .hero__arc{ display:block; }
  .hero__provenance{ display:block; }

  .hero__layout{
    display: grid;
    flex-direction: unset;       /* reset mobile flex */
    justify-content: unset;
    grid-template-columns: 45% 55%;
    grid-template-rows: 1fr;
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    padding-top: 10rem;
    padding-bottom: 7rem;
    padding-inline: clamp(2rem, 6vw, 4.5rem);
  }
  .hero__wordmark{ align-self: center; }
  .hero__copies{
    align-self: center;
    max-width: clamp(22rem, 30vw, 32rem);
  }

  .hero__counter{
    top: 6rem;
    right: clamp(3rem, 8vw, 5.5rem);
    width: 18rem;
  }
  .hero__controls{
    right: clamp(3rem, 8vw, 5.5rem);
    bottom: 3rem;
  }

  .manifest__grid{
    grid-template-columns: 1fr 1.8fr;
    gap: 4rem;
  }

  /* Horizontal scroll track — desktop only */
  .cats{
    padding-bottom: 0; /* JS will manage pinned scroll length */
  }
  .cats__viewport{
    padding-inline: 0;
    overflow:hidden;
  }
  .cats__track{
    display:flex;
    grid-template-columns: none;
    gap: 2.2rem;
    padding-inline: var(--gutter);
    width:max-content;
    will-change: transform;
  }
  .cat{
    width: clamp(360px, 38vw, 520px);
    flex-shrink:0;
  }
  .cat__inner{
    display:flex; flex-direction:column;
    height: 78vh;
    max-height: 760px;
  }
  .cat__media{
    flex: 1 1 auto;
    aspect-ratio: auto;
  }
  .cat__body{
    flex: 0 0 auto;
    padding: 1.6rem 1.8rem 1.8rem;
  }

  .featured__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .featured__item--xl{ grid-column: span 2; grid-row: span 2; }
  .featured__item--xl .media{ aspect-ratio: 4/5; }

  .step{
    grid-template-columns: 200px 1fr 1fr;
    gap: 3rem;
    align-items:center;
  }
  .step__rule{
    display:block; height:1px; background:var(--filings);
    align-self:center;
  }

  .why__grid{ gap: 2rem; }
  .why__item{ padding: 2.2rem 2rem 2.4rem; }

  .footer__grid{
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

/* =========================================================
   Reveal — final states (driven by GSAP)
   ========================================================= */
.js [data-reveal].is-in{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* =========================================================
   proizvodi.html — Products collection page
   ========================================================= */

/* Active nav state on the trigger button — small red tick under */
.nav-desktop__trigger[aria-current="page"]::after,
.nav-desktop a[aria-current="page"]::after{
  transform: scaleX(1) !important;
  background: var(--signal);
}

/* ---------- Section 1 — Intro band ----------------------- */
.products-intro{
  position: relative;
  padding-block: clamp(7rem, 16vh, 11rem) clamp(3.5rem, 9vh, 7rem);
  border-bottom: 1px solid var(--filings);
  overflow: hidden;
  isolation: isolate;
  color: var(--anneal);
}

/* Full-bleed background image + dark scrim. The image is visible but the text
   and ring read AA. Bottom edge fades to soot so it joins the first category
   block seamlessly. */
.products-intro__bg{
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.products-intro__bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* Lighter grade — gate photo reads clearly */
  filter: saturate(0.82) brightness(0.92) contrast(1.04);
  transform: scale(1.06);
  transform-origin: center 40%;
  will-change: transform;
  animation: productsHeroKenBurns 28s ease-in-out infinite alternate;
}
.products-intro__bg::after{
  content:"";
  position: absolute; inset: 0;
  background:
    /* Local scrim under the text column so copy stays AA */
    radial-gradient(58% 65% at 22% 55%, rgba(14,13,11,.72) 0%, rgba(14,13,11,0) 75%),
    /* Smaller scrim under the ring so its hairlines read */
    radial-gradient(38% 50% at 80% 45%, rgba(14,13,11,.42) 0%, rgba(14,13,11,0) 75%),
    /* Bottom blend into the first category block */
    linear-gradient(180deg,
      rgba(14,13,11,.30) 0%,
      rgba(14,13,11,.42) 55%,
      rgba(14,13,11,.88) 92%,
      var(--soot) 100%),
    /* Global wash — much lighter so the image breathes */
    rgba(14,13,11,.30);
  pointer-events: none;
}
@keyframes productsHeroKenBurns{
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -2%, 0); }
}
@media (prefers-reduced-motion: reduce){
  .products-intro__bg img{ animation: none; transform: scale(1.04); }
}

.products-intro__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.products-intro__head{
  display: flex; flex-direction: column;
  gap: 1.6rem;
  max-width: 38rem;
}
.products-intro__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  color: var(--anneal);
  margin: 0;
  max-width: 16ch;
}
.products-intro__title em{ color: var(--signal); font-style: italic; }
.products-intro__lead{
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.55;
  color: #c9c2b6; /* bumped from --ash for AA over the darkened photo */
  max-width: 36ch;
}

/* Rotating ring emblem (replaces the reference's neon badge) */
.products-intro__ring{
  position: relative;
  display: none;             /* mobile-first hidden; revealed on desktop */
  width: clamp(280px, 32vw, 460px);
  aspect-ratio: 1 / 1;
  justify-self: end;
}
.ring-svg{
  width: 100%; height: 100%;
  animation: ringSpin 60s linear infinite;
  will-change: transform;
}
@keyframes ringSpin{
  to { transform: rotate(360deg); }
}
.ring-svg__base,
.ring-svg__inner{
  fill: none;
  stroke: var(--filings);
  stroke-width: 1;
}
.ring-svg__inner{ opacity: .55; }
.ring-svg__dash{
  fill: none;
  stroke: var(--signal);
  stroke-width: 1;
  stroke-dasharray: 4 14;
  opacity: .55;
}
.ring-svg__text{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  fill: var(--ash);
  opacity: .85;
}
.ring-svg__core{
  fill: var(--signal);
  opacity: .8;
}
@media (prefers-reduced-motion: reduce){
  .ring-svg{ animation: none; }
}

/* Scroll cue at bottom */
.products-intro__cue{
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center;
  gap: .85rem;
  margin: clamp(2rem, 5vh, 4rem) var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color var(--t-fast) var(--ease);
}
.products-intro__cue:hover{ color: var(--signal-hi); }
.products-intro__cue-line{
  display: block;
  width: clamp(60px, 12vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal) 30%, var(--signal) 70%, transparent);
}
.products-intro__cue-arrow{
  width: 14px; height: 14px;
  color: var(--signal);
  animation: cueBob 2.4s ease-in-out infinite;
}
@keyframes cueBob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce){
  .products-intro__cue-arrow{ animation: none; }
}

/* ---------- Section 2 — Category blocks ------------------ */
.category-blocks{
  position: relative;
}
.category-block{
  position: relative;
  padding-block: clamp(4rem, 10vh, 8rem);
  overflow-x: clip;             /* contain giant letter overflow */
  isolation: isolate;
}
.category-block + .category-block{
  padding-top: clamp(2rem, 6vh, 5rem);
}
.category-block__inner{
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas:
    "visual"
    "meta";
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* Visual area: image + letter + outline word */
.category-block__visual{
  grid-area: visual;
  position: relative;
  width: 100%;
  min-height: clamp(280px, 50vh, 540px);
}

.category-block__media{
  position: relative;
  z-index: 2;
  width: 100%;
}
.category-block__media .media{
  aspect-ratio: 16 / 10;
  border: 1px solid var(--filings);
  background:
    repeating-linear-gradient(135deg, rgba(34,30,25,.4) 0 2px, transparent 2px 16px),
    radial-gradient(120% 80% at 30% 20%, #2a2319 0%, #14110d 60%, #0c0a07 100%);
}

/* Giant initial letter — metallic gradient text + faint red edge-light.
   Mobile-first: sits BEHIND the image at lower opacity (less overlap).
   Desktop: overlaps the image edge and parallaxes. */
.category-block__letter{
  position: absolute;
  z-index: 1;                       /* mobile: behind image */
  top: 50%;
  right: -4vw;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(11rem, 28vw, 20rem);
  line-height: .78;
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
  /* Metallic / glass gradient */
  background: linear-gradient(160deg,
    var(--anneal) 0%,
    rgba(236,230,218,.55) 22%,
    var(--iron) 60%,
    rgba(52,48,42,.85) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Faint red edge-light + soft glow */
  text-shadow:
    0 0 28px rgba(200,42,38,.10),
    1px 0 0 rgba(200,42,38,.06),
    -1px 0 0 rgba(236,230,218,.04);
  opacity: .35;                     /* mobile: quieter */
  will-change: transform;
}
.category-block--reverse .category-block__letter{
  right: auto;
  left: -4vw;
}

/* Outline word "KOLEKCIJA" behind title + red dots */
.category-block__outline{
  position: absolute;
  z-index: 1;
  bottom: -1.5rem;
  left: 0;
  right: 0;
  display: none;          /* hidden on mobile per spec */
  align-items: baseline;
  gap: .8rem;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}
.category-block--reverse .category-block__outline{
  justify-content: flex-end;
}
.category-block__outline-word{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(4rem, 9vw, 10rem);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--filings);
  opacity: .55;
  line-height: 1;
}
.category-block__outline-dots{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: .12em;
  color: var(--signal);
  opacity: .75;
  line-height: 1;
}

/* Meta row: number + title + desc + link */
.category-block__meta{
  grid-area: meta;
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.category-block__head{
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}
.category-block__num{
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .22em;
  color: var(--signal-hi);   /* small text uses signal-hi for AA legibility */
  flex-shrink: 0;
  padding-top: .5em;
}
.category-block__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--anneal);
  margin: 0;
  max-width: 14ch;
}
.category-block__body{
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 38rem;
}
.category-block__desc{
  font-family: var(--font-body);
  font-size: clamp(.97rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--ash);
  margin: 0;
}
.category-block__link{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--signal-hi);
  align-self: flex-start;
  padding-block: .4rem;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.category-block__link::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--signal);
  transform-origin: left;
  transform: scaleX(.18);
  transition: transform var(--t-mid) var(--ease);
}
.category-block__link:hover{ color: var(--signal-hi); }
.category-block__link:hover::after{ transform: scaleX(1); }
.category-block__link-arrow{
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.category-block__link:hover .category-block__link-arrow{
  transform: translateX(6px);
}

/* =========================================================
   Tablet / Desktop overrides — proizvodi.html
   ========================================================= */
@media (min-width: 768px){
  .products-intro__grid{
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
  }
  .products-intro__ring{ display: block; }

  .category-block__inner{
    grid-template-rows: auto auto;
  }
  .category-block__visual{
    min-height: clamp(360px, 58vh, 620px);
  }
  .category-block__media{
    width: 72%;
  }
  .category-block--reverse .category-block__media{
    margin-left: auto;
  }
  .category-block__outline{ display: flex; }

  /* Tablet+: letter overlaps image (z:3), brighter, much bigger */
  .category-block__letter{
    z-index: 3;
    font-size: clamp(16rem, 36vw, 44rem);
    right: -8vw;
    opacity: .62;
  }
  .category-block--reverse .category-block__letter{
    right: auto;
    left: -8vw;
  }

  .category-block__meta{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .category-block__head{ flex-direction: column; gap: .6rem; align-items: flex-start; }
  .category-block__num{ padding-top: 0; }
}

@media (min-width: 1024px){
  .category-block{
    padding-block: clamp(6rem, 12vh, 10rem);
  }
  .category-block__media{
    width: 66%;
  }
  .category-block__letter{
    font-size: clamp(20rem, 40vw, 52rem);
  }
}

/* =========================================================
   Floating controls — AI assistant + back-to-top
   ========================================================= */

/* Shared floating offset, safe-area aware */
:root{
  --float-bottom: 1.4rem;
  --float-edge: 1.4rem;
}
@media (min-width: 768px){
  :root{
    --float-bottom: 1.8rem;
    --float-edge: 1.8rem;
  }
}

/* --- AI Assistant — bottom-LEFT ---- */
.assistant{
  position: fixed;
  left: calc(var(--float-edge) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  font-family: var(--font-body);
}

.assistant__launcher{
  position:relative;
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .8rem 1.1rem .8rem .85rem;
  background: var(--iron);
  color: var(--anneal);
  border: 1px solid var(--filings);
  border-radius: 999px;
  box-shadow:
    0 14px 40px -14px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(200,42,38,.12);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.assistant__launcher:hover{
  border-color: var(--signal);
  color: var(--signal-hi);
  transform: translateY(-2px);
}
.assistant__launcher-icon{
  width: 20px; height: 20px;
  color: var(--signal);
  flex-shrink:0;
}
.assistant__launcher-label{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform: uppercase;
}
.assistant__launcher-pulse{
  position:absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(200,42,38,.55);
  animation: assistantPulse 2.4s var(--ease) infinite;
}
@keyframes assistantPulse{
  0%   { box-shadow: 0 0 0 0 rgba(200,42,38,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(200,42,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,42,38,0); }
}
.assistant[data-open] .assistant__launcher-pulse{ animation:none; opacity:0; }

/* Hide the launcher label on tight screens to save space next to back-to-top */
@media (max-width: 374px){
  .assistant__launcher-label{ display:none; }
  .assistant__launcher{ padding: .75rem; }
}

/* Chat panel — slides up from above the launcher */
.assistant__panel{
  position: absolute;
  left: 0;
  bottom: calc(100% + .8rem);
  width: min(360px, calc(100vw - var(--float-edge) * 2));
  height: min(520px, calc(100svh - var(--float-bottom) * 2 - 4rem));
  display: flex;
  flex-direction: column;
  background: var(--iron);
  border: 1px solid var(--filings);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease),
    visibility 0s linear .25s;
}
.assistant[data-open] .assistant__panel{
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear 0s;
}

.assistant__head{
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  padding: 1rem 1rem .8rem;
  border-bottom: 1px solid var(--filings);
  position: relative;
}
.assistant__head::before{
  content:""; position:absolute; top:0; left:1rem; right:1rem;
  height:1px; background:var(--signal); opacity:.55;
}
.assistant__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--anneal);
}
.assistant__sub{
  font-family: var(--font-mono);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top:.25rem;
}
.assistant__close{
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ash);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.assistant__close:hover{ color: var(--anneal); border-color: var(--filings); }
.assistant__close svg{ width: 16px; height: 16px; }

.assistant__log{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  display: flex; flex-direction: column;
  gap: .7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--filings) transparent;
}
.assistant__log::-webkit-scrollbar{ width:6px; }
.assistant__log::-webkit-scrollbar-thumb{ background: var(--filings); border-radius: 3px; }

.assistant__msg{
  display: flex;
}
.assistant__msg--user{ justify-content: flex-end; }
.assistant__msg--assistant{ justify-content: flex-start; }
.assistant__bubble{
  max-width: 80%;
  padding: .7rem .85rem;
  font-size: .92rem;
  line-height: 1.45;
  border: 1px solid var(--filings);
  border-radius: 12px;
}
.assistant__msg--user .assistant__bubble{
  background: rgba(200,42,38,.12);
  border-color: rgba(200,42,38,.3);
  color: var(--anneal);
  border-bottom-right-radius: 4px;
}
.assistant__msg--assistant .assistant__bubble{
  background: rgba(255,255,255,.02);
  color: var(--anneal);
  border-bottom-left-radius: 4px;
}
.assistant__msg--typing .assistant__bubble{
  display: inline-flex; gap: 4px;
  padding: .85rem 1rem;
}
.assistant__msg--typing .assistant__bubble span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ash);
  animation: assistantTypingDot 1.2s var(--ease) infinite;
}
.assistant__msg--typing .assistant__bubble span:nth-child(2){ animation-delay: .15s; }
.assistant__msg--typing .assistant__bubble span:nth-child(3){ animation-delay: .3s; }
@keyframes assistantTypingDot{
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Default-question chips — shown in the empty/greeting state only */
.assistant__chips{
  display: flex; flex-wrap: wrap;
  gap: .45rem;
  margin-top: .35rem;
  align-self: flex-start;
  max-width: 100%;
}
.assistant__chip{
  display: inline-flex;
  align-items: center;
  padding: .45rem .8rem;
  background: transparent;
  border: 1px solid var(--signal);
  color: var(--signal);
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.assistant__chip:hover{
  background: var(--signal);
  color: var(--soot);
}
.assistant__chip:active{ transform: scale(.97); }

.assistant__form{
  display: flex; gap: .5rem;
  padding: .7rem .8rem .9rem;
  border-top: 1px solid var(--filings);
}
.assistant__form input{
  flex: 1;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--filings);
  color: var(--anneal);
  border-radius: 8px;
  padding: .65rem .85rem;
  font: inherit;
  font-size: .95rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.assistant__form input::placeholder{ color: var(--ash); opacity: .8; }
.assistant__form input:focus{
  border-color: var(--signal);
  background: rgba(200,42,38,.04);
  outline: none;
}
.assistant__send{
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--signal);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.assistant__send:hover{ background: var(--signal-hi); }
.assistant__send svg{ width: 18px; height: 18px; }

/* Mobile: bottom-sheet panel (nearly full height, edge-to-edge bottom) */
@media (max-width: 599px){
  .assistant__panel{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 85svh;
    border-radius: 18px 18px 0 0;
    transform: translateY(20px);
  }
  .assistant[data-open] .assistant__panel{ transform: translateY(0); }
}

/* --- Back-to-top — bottom-RIGHT, aligned with the assistant ---- */
.back-to-top{
  position: fixed;
  right: calc(var(--float-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 84;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--iron);
  color: var(--signal);
  border: 1px solid var(--filings);
  border-radius: 999px;
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.7);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover{
  border-color: var(--signal);
  color: var(--signal-hi);
  transform: translateY(-3px);
}
.back-to-top svg{ width: 18px; height: 18px; }

/* =========================================================
   Reduced motion
   ========================================================= */
/* =========================================================
   kategorija.html — single-category detail page
   ========================================================= */

/* --- SECTION A — Category hero --------------------------- */
.kat-hero{
  position: relative;
  min-height: 78svh;
  padding-block: clamp(7rem, 16vh, 12rem) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--anneal);
  border-bottom: 1px solid var(--filings);
  display: flex; flex-direction: column;
}
.kat-hero__bg{
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.kat-hero__bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.82) brightness(0.92) contrast(1.04);
  transform: scale(1.06);
  transform-origin: center 40%;
  will-change: transform;
  animation: productsHeroKenBurns 28s ease-in-out infinite alternate;
}
.kat-hero__bg::after{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 60% at 22% 60%, rgba(14,13,11,.72) 0%, rgba(14,13,11,0) 75%),
    linear-gradient(180deg,
      rgba(14,13,11,.32) 0%,
      rgba(14,13,11,.45) 55%,
      rgba(14,13,11,.92) 92%,
      var(--soot) 100%),
    rgba(14,13,11,.30);
  pointer-events: none;
}
/* Giant translucent initial letter — same DNA as proizvodi.html blocks */
.kat-hero__letter{
  position: absolute;
  top: 50%; right: -4%;
  transform: translateY(-50%);
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(16rem, 40vw, 38rem);
  line-height: .85;
  color: transparent;
  background:
    linear-gradient(180deg,
      rgba(236,230,218,.18) 0%,
      rgba(236,230,218,.06) 55%,
      rgba(200,42,38,.08) 100%);
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 60px rgba(14,13,11,.25);
}
.kat-hero__inner{
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 1.4rem;
  margin-top: auto;
  max-width: 46rem;
}
.kat-bc{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
}
.kat-bc ol{
  display: flex; flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.kat-bc a{
  color: var(--ash);
  transition: color var(--t-fast) var(--ease);
}
.kat-bc a:hover{ color: var(--signal-hi); }
.kat-bc li[aria-hidden="true"]{ color: var(--filings); }
.kat-bc [aria-current="page"]{ color: var(--anneal); }

.kat-hero__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: var(--anneal);
  margin: 0;
}
.kat-hero__sub{
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c9c2b6;
  max-width: 42ch;
}

.kat-hero__cue{
  position: relative; z-index: 1;
  align-self: flex-start;
  display: inline-flex; align-items: center;
  gap: .85rem;
  margin: clamp(2rem, 5vh, 3.5rem) var(--gutter) 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color var(--t-fast) var(--ease);
}
.kat-hero__cue:hover{ color: var(--signal-hi); }
.kat-hero__cue-line{
  display: block;
  width: clamp(60px, 12vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal) 30%, var(--signal) 70%, transparent);
}
.kat-hero__cue-arrow{
  width: 14px; height: 14px;
  color: var(--signal);
  animation: cueBob 2.4s ease-in-out infinite;
}

/* --- SECTION B — O kategoriji ---------------------------- */
.kat-about{
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 9rem);
  border-bottom: 1px solid var(--filings);
  overflow: hidden;
}
.kat-about__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.kat-about__copy{
  display: flex; flex-direction: column;
  gap: 1.4rem;
  max-width: 42rem;
}
.kat-about__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--anneal);
  margin: 0;
  max-width: 22ch;
}
.kat-about__p{
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.62;
  color: #b8b0a4;
}

/* Spec chips — Space Mono, red outline */
.kat-chips{
  display: flex; flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.kat-chip{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal-hi);
  padding: .45rem .85rem;
  border: 1px solid rgba(200,42,38,.4);
  border-radius: 999px;
  background: rgba(200,42,38,.04);
}

.kat-about__visual{
  position: relative;
  border: 1px solid var(--filings);
  overflow: hidden;
  isolation: isolate;
}
.kat-about__visual .media{
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #1c1814 0%, #0e0d0b 100%);
  overflow: hidden;
}
.kat-about__visual .media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.kat-about__visual .media img.is-loaded{ opacity: 1; }

/* --- SECTION C — Modeli grid (catalog) ------------------- */
.kat-models{
  position: relative;
  padding-block: clamp(4.5rem, 11vh, 9rem);
  border-bottom: 1px solid var(--filings);
  overflow-x: clip;
}
.kat-models__head{
  display: flex; flex-direction: column;
  gap: 1.1rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.kat-models__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.014em;
  color: var(--anneal);
  margin: 0;
}
.kat-models__intro{
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.6;
  color: #b8b0a4;
  max-width: 52ch;
}

.kat-models__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
@media (min-width: 600px){
  .kat-models__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px){
  .kat-models__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card — whole card is one button (kat-card__open). */
.kat-card{
  position: relative;
  display: flex;
  opacity: 0;
  transform: translateY(14px);
  animation: katCardIn .6s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.kat-card__open{
  width: 100%;
  display: flex; flex-direction: column;
  gap: .6rem;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.kat-card__open:focus-visible{ outline: none; }
.kat-card__open:focus-visible .kat-card__figure{
  border-color: var(--signal);
  box-shadow: 0 0 0 2px rgba(200,42,38,.35);
}
@keyframes katCardIn{
  to { opacity: 1; transform: translateY(0); }
}
.kat-card__figure{
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1c1814 0%, #0e0d0b 100%);
  border: 1px solid var(--filings);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Whole card reacts when the CTA is hovered/focused — image still scales,
   border still highlights, glow still appears. */
.kat-card:hover .kat-card__figure,
.kat-card:focus-within .kat-card__figure{
  border-color: var(--signal);
  transform: translateY(-2px);
}
.kat-card:hover .kat-card__figure img,
.kat-card:focus-within .kat-card__figure img{
  transform: scale(1.06);
  filter: saturate(1.02) brightness(1.02);
}
.kat-card:hover .kat-card__glow,
.kat-card:focus-within .kat-card__glow{ opacity: 1; }
.kat-card__figure img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s var(--ease),
              transform .8s var(--ease),
              filter var(--t-fast) var(--ease);
  filter: saturate(.9) brightness(.96);
}
.kat-card__figure img.is-loaded{ opacity: 1; }
.kat-card__figure:hover{
  border-color: var(--signal);
  transform: translateY(-2px);
}
.kat-card__figure:hover img{
  transform: scale(1.06);
  filter: saturate(1.02) brightness(1.02);
}

/* Red heat glow on hover */
.kat-card__glow{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(80% 70% at 50% 100%, rgba(200,42,38,.35) 0%, rgba(200,42,38,0) 60%);
  mix-blend-mode: screen;
  transition: opacity var(--t-fast) var(--ease);
}
.kat-card__figure:hover .kat-card__glow{ opacity: 1; }

/* Stamped catalog code */
.kat-card__stamp{
  position: absolute;
  left: .7rem; bottom: .7rem;
  display: inline-flex; flex-direction: column;
  gap: .05rem;
  padding: .4rem .55rem;
  background: rgba(14,13,11,.7);
  border: 1px solid var(--filings);
  font-family: var(--font-mono);
  color: var(--anneal);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.kat-card__stamp-label{
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
}
.kat-card__stamp-code{
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--anneal);
}

/* "Detalji →" meta strip beneath the figure (visual only — whole card is the button) */
.kat-card__cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: .55rem .15rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  border-bottom: 1px solid var(--filings);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.kat-card__cta-arrow{
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.kat-card__open:hover .kat-card__cta,
.kat-card__open:focus-visible .kat-card__cta{
  color: var(--signal-hi);
  border-bottom-color: var(--signal);
}
.kat-card__open:hover .kat-card__cta-arrow,
.kat-card__open:focus-visible .kat-card__cta-arrow{ transform: translateX(4px); }

.kat-models__more{
  display: flex; justify-content: center;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.kat-models__more-btn{
  position: relative;
  min-width: 14rem;
}
.kat-models__more-count{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ash);
  margin-left: .2rem;
}
.kat-models__empty{
  text-align: center;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2rem 0;
}

/* --- SECTION D — Ostale kategorije ----------------------- */
.kat-related{
  position: relative;
  padding-block: clamp(4rem, 10vh, 8rem);
  border-bottom: 1px solid var(--filings);
}
.kat-related__head{
  display: flex; flex-direction: column;
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.kat-related__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.014em;
  color: var(--anneal);
  margin: 0;
  max-width: 18ch;
}
.kat-related__list{
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--filings);
}
.kat-related__item{
  border-bottom: 1px solid var(--filings);
}
.kat-related__link{
  position: relative;
  display: flex; align-items: baseline;
  gap: 1.2rem;
  padding: 1.4rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  line-height: 1.02;
  color: var(--anneal);
  transition: color var(--t-fast) var(--ease),
              padding-left var(--t-fast) var(--ease);
}
.kat-related__link::before{
  /* red sweep underline */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}
.kat-related__num{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--signal);
  align-self: center;
  flex-shrink: 0;
}
.kat-related__name{ flex: 1; }
.kat-related__arrow{
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--ash);
  align-self: center;
  transition: color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.kat-related__link:hover{
  color: var(--signal-hi);
  padding-left: .8rem;
}
.kat-related__link:hover::before{ transform: scaleX(1); }
.kat-related__link:hover .kat-related__arrow{
  color: var(--signal);
  transform: translateX(6px);
}

/* --- SECTION E — Quote ----------------------------------- */
.kat-quote{
  position: relative;
  padding-block: clamp(5rem, 14vh, 10rem);
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(200,42,38,.05) 0%, transparent 65%),
    var(--soot);
  overflow: hidden;
}
.kat-quote__text{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -.008em;
  color: var(--anneal);
  max-width: 28ch;
  margin: 0 auto;
  text-align: center;
}
.kat-quote__sig{
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
  text-align: center;
  margin-top: 1.6rem;
}

/* Desktop layout for kategorija */
@media (min-width: 768px){
  .kat-about__grid{
    grid-template-columns: 1.05fr 1fr;
  }
  /* Alternate visual on the LEFT for visual rhythm — uncomment per-page if needed.
     .kat-about--reverse .kat-about__grid > .kat-about__copy { order: 2; }
     .kat-about--reverse .kat-about__grid > .kat-about__visual { order: 1; }
  */
}
@media (min-width: 1024px){
  .kat-hero{ min-height: 80vh; min-height: 80svh; }
  .kat-hero__inner{ max-width: 52rem; }
}

/* =========================================================
   kategorija — quick-view modal
   ========================================================= */
body.modal-open{ overflow: hidden; }

.kat-modal{
  position: fixed; inset: 0;
  z-index: 9500;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease),
              visibility 0s linear .35s;
}
.kat-modal[data-open]{
  visibility: visible;
  opacity: 1;
  transition: opacity .35s var(--ease),
              visibility 0s linear 0s;
}

.kat-modal__backdrop{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,42,38,.06) 0%, transparent 60%),
    rgba(14,13,11,.86);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  cursor: pointer;
}

.kat-modal__panel{
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  padding:
    calc(2rem + env(safe-area-inset-top, 0px))
    max(var(--float-edge), env(safe-area-inset-right, 0px))
    calc(2rem + env(safe-area-inset-bottom, 0px))
    max(var(--float-edge), env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(14px);
  transition: transform .35s var(--ease);
}
.kat-modal[data-open] .kat-modal__panel{ transform: translateY(0); }

.kat-modal__close{
  position: absolute;
  top: calc(1.2rem + env(safe-area-inset-top, 0px));
  right: max(var(--float-edge), env(safe-area-inset-right, 0px));
  z-index: 3;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26,23,20,.8);
  color: var(--anneal);
  border: 1px solid var(--filings);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.kat-modal__close:hover,
.kat-modal__close:focus-visible{
  color: var(--signal-hi);
  border-color: var(--signal);
  transform: scale(1.05);
  outline: none;
}
.kat-modal__close svg{ width: 18px; height: 18px; }

/* MODEL-level prev/next (cycle through the group) */
.kat-modal__model-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: none;            /* shown on tablet+; mobile uses swipe */
  align-items: center; justify-content: center;
  background: rgba(26,23,20,.75);
  color: var(--anneal);
  border: 1px solid var(--filings);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.kat-modal__model-nav--prev{ left: max(var(--float-edge), env(safe-area-inset-left, 0px)); }
.kat-modal__model-nav--next{ right: max(var(--float-edge), env(safe-area-inset-right, 0px)); }
.kat-modal__model-nav:hover,
.kat-modal__model-nav:focus-visible{
  color: var(--signal-hi);
  border-color: var(--signal);
  background: rgba(26,23,20,.95);
  outline: none;
}
.kat-modal__model-nav:hover{ transform: translateY(-50%) scale(1.05); }
.kat-modal__model-nav svg{ width: 22px; height: 22px; }
@media (min-width: 900px){
  .kat-modal__model-nav{ display: inline-flex; }
}

/* Grid: image left, info right on desktop */
.kat-modal__grid{
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  width: 100%;
  max-width: 1180px;
}
@media (min-width: 900px){
  .kat-modal__grid{
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    align-items: center;
  }
}

/* Image stage */
.kat-modal__gallery{
  position: relative;
  display: flex; flex-direction: column;
  gap: 1rem;
}
.kat-modal__stage{
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #1c1814 0%, #0e0d0b 100%);
  border: 1px solid var(--filings);
  overflow: hidden;
  isolation: isolate;
}
.kat-modal__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .35s var(--ease),
              transform .55s var(--ease);
}
.kat-modal__img.is-loaded{ opacity: 1; transform: scale(1); }
/* Crossfade on model change */
.kat-modal__stage.is-changing .kat-modal__img{
  opacity: 0;
  transform: scale(1.02);
  transition-duration: .15s;
}

/* Gallery controls (image-level prev/next + dots) */
.kat-modal__gallery-controls{
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
}
.kat-modal__gallery-arrow{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ash);
  border: 1px solid var(--filings);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.kat-modal__gallery-arrow:hover,
.kat-modal__gallery-arrow:focus-visible{
  color: var(--signal-hi);
  border-color: var(--signal);
  outline: none;
}
.kat-modal__gallery-arrow svg{ width: 16px; height: 16px; }

.kat-modal__dots{
  display: flex; gap: .55rem;
  list-style: none;
  margin: 0; padding: 0;
}
.kat-modal__dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--filings);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.kat-modal__dot[aria-selected="true"]{
  background: var(--signal);
  transform: scale(1.2);
}

/* Info column */
.kat-modal__info{
  display: flex; flex-direction: column;
  gap: 1rem;
  color: var(--anneal);
}
.kat-modal__cat{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--signal-hi);
}
.kat-modal__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin: 0;
  display: flex; flex-direction: column;
  gap: .25rem;
}
.kat-modal__title-label{
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 400;
}
.kat-modal__title-code{
  display: block;
}
.kat-modal__chips{
  display: flex; flex-wrap: wrap;
  gap: .5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.kat-modal__chips .kat-chip{ /* reuse the kat-chip styling */ }

.kat-modal__note{
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.55;
  color: #b8b0a4;
  max-width: 36ch;
}
.kat-modal__counter{
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}
.kat-modal__actions{
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin-top: .6rem;
}
.kat-modal__cta{
  min-width: 14rem;
}

/* Mobile tweaks — full-bleed image, full-sheet panel */
@media (max-width: 599px){
  .kat-modal__panel{
    padding-top: calc(1.2rem + env(safe-area-inset-top, 0px));
  }
  .kat-modal__close{
    top: calc(.8rem + env(safe-area-inset-top, 0px));
  }
  .kat-modal__stage{
    aspect-ratio: 1 / 1;
  }
  .kat-modal__title{ font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .kat-modal__cta{ min-width: 0; width: 100%; }
}

/* =========================================================
   Reduced motion — final pass
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__scroll-line::after{ animation:none; opacity:.4; }
  .trust__track{ animation:none; transform:none; }
  .preloader{ display:none !important; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .js [data-split]{ opacity:1 !important; }
  .hero__title .split__inner{ transform:none !important; }
  .kat-hero__cue-arrow{ animation:none !important; }
  .kat-card{ animation:none !important; opacity:1 !important; transform:none !important; }
  .kat-modal,
  .kat-modal__panel,
  .kat-modal__img{ transition: none !important; }
}