/* ============================================================
   REMETAL d.o.o. — Reparature
   Design system: "Cold → Arc → Restored"
   Author: Apis Development (apisdevelopment.com)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces — shop-floor graphite with a cool cast */
  --bg:        #0A0C0F;
  --bg-2:      #0F131A;
  --bg-3:      #151A22;
  --bg-4:      #1B222B;
  --line:      #232A34;
  --line-2:    #2F3843;

  /* ink */
  --txt:       #E7EBF0;
  --txt-dim:   #97A1AE;   /* 7.48:1 on --bg   */
  --txt-mute:  #7A838F;   /* 4.85:1 on --bg-2 — lifted from #66707D, which measured 3.70:1 */
  --txt-faint: #66707D;   /* the old value, kept for non-text hairlines only */

  /* dual accent — the whole motion language runs on these two */
  --cold:      #5E86AD;   /* worn / cold / "before" */
  --cold-soft: rgba(94,134,173,.16);
  --arc:       #FF9A2E;   /* arc + molten spray / "after" */
  --arc-hot:   #FFD9A0;   /* white-hot core */
  --arc-soft:  rgba(255,154,46,.14);
  --arc-line:  rgba(255,154,46,.34);
  --ok:        #48C08A;

  /* inverted "technical sheet" section */
  --sheet:     #E8ECF1;
  --sheet-2:   #DDE3EA;
  --sheet-ink: #0F141A;
  --sheet-dim: #55606D;
  --sheet-line:#C2CBD5;

  /* type */
  --f-disp: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* rhythm — one scale, used everywhere. Nothing arbitrary. */
  --pad:  clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 11vw, 150px);
  --maxw: 1320px;
  --r:    2px;   /* machined, not rounded */
  --r-lg: 4px;

  --s-1: 8px;    /* label → value            */
  --s-2: 14px;   /* eyebrow → heading        */
  --s-3: 20px;   /* heading → lead           */
  --s-4: 28px;   /* block → block            */
  --s-5: clamp(30px, 4vw, 44px);   /* head → grid   */
  --s-6: clamp(40px, 6vw, 64px);   /* group → group */

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
  --t-fast: .22s var(--e-out);
  --t:      .45s var(--e-out);
  --t-slow: .9s var(--e-out);

  --hdr-h: 74px;
  --dock:  clamp(16px, 3vw, 28px);   /* fixed dock baseline (assistant + back-to-top) */
  --dock-size: 56px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-locked, body.is-locked{ overflow:hidden; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--arc); color:#0A0C0F; }

:focus-visible{
  outline:2px solid var(--arc);
  outline-offset:3px;
}

/* scrollbar */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--line-2); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--arc); }
}

/* ---------- 3. TYPE SCALE ---------- */
/* Hierarchy is carried by the WIDTH axis: the wider the type, the more structural.
   Machined parts are measured across — so is this typography. */
/* .t-display and .t-h1 are the same rank — the display face. The width axis
   (wdth 118 vs 115 vs 108) is what separates the levels, so the point sizes can
   stay modest without the hierarchy collapsing. */
.t-display, .t-h1{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2.05rem, 4.4vw, 3.85rem);
  line-height:.98;
  letter-spacing:-.028em;
  text-transform:uppercase;
  text-wrap:balance;
}
.t-h2{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 115,"wght" 780;
  font-size:clamp(1.55rem, 3.1vw, 2.65rem);
  line-height:1.06;
  letter-spacing:-.022em;
  text-transform:uppercase;
  text-wrap:balance;
}
.t-h3{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(1.04rem, 1.62vw, 1.32rem);
  line-height:1.18;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.t-h4{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:1.02rem;
  line-height:1.24;
  letter-spacing:.002em;
}
.t-lead{
  font-size:clamp(1.02rem, 1.55vw, 1.22rem);
  line-height:1.66;
  color:var(--txt-dim);
  font-variation-settings:"wdth" 100,"wght" 380;
  max-width:60ch;
  text-wrap:pretty;
}
.t-body{ color:var(--txt-dim); font-size:.985rem; text-wrap:pretty; }
.t-mono{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:500;
}
.hot{ color:var(--arc); }
.cold{ color:var(--cold); }

/* eyebrow — every section is labelled like a drawing sheet */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--arc); font-weight:500;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--arc); flex:none;
}
.eyebrow--sheet{ color:#8A5A12; }
.eyebrow--sheet::before{ background:#8A5A12; }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sec{ position:relative; padding-block:var(--sec-y); }
.sec--tight{ padding-block:clamp(48px,7vw,92px); }
.sec__head{ max-width:74ch; margin-bottom:var(--s-5); }
.sec__head .t-h2{ margin-top:var(--s-2); }
.sec__head .t-lead{ margin-top:var(--s-3); }
.sec__head .btn-row{ margin-top:var(--s-4); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

.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;
}

/* technical grid backdrop */
.grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.sec > .wrap{ position:relative; z-index:1; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:12px; padding:15px 26px; border:1px solid var(--line-2);
  font-family:var(--f-mono); font-size:.73rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--txt); background:transparent; border-radius:var(--r);
  overflow:hidden; isolation:isolate; transition:color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  will-change:transform;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--arc); transform:translateY(101%);
  transition:transform .42s var(--e-out);
}
.btn:hover{ color:#0A0C0F; border-color:var(--arc); }
.btn:hover::after{ transform:translateY(0); }
.btn__ico{ width:15px; height:15px; flex:none; transition:transform var(--t-fast); }
.btn:hover .btn__ico{ transform:translate(3px,-3px); }

.btn--fill{ background:var(--arc); color:#0A0C0F; border-color:var(--arc); }
.btn--fill::after{ background:var(--txt); }
.btn--fill:hover{ color:#0A0C0F; border-color:var(--txt); }

.btn--ghost{ border-color:var(--line-2); color:var(--txt-dim); }
.btn--ghost:hover{ color:#0A0C0F; }

.btn--sm{ padding:11px 18px; font-size:.67rem; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ---------- 6. HEADER ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--hdr-h);
  display:flex; align-items:center;
  background:rgba(10,12,15,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--e-out), border-color .4s var(--e-out), height .4s var(--e-out);
}
.hdr.is-stuck{
  background:rgba(10,12,15,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  height:64px;
}
.hdr.is-hidden{ transform:translateY(-100%); transition:transform .4s var(--e-io); }
.hdr__in{ display:flex; align-items:center; gap:24px; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.hdr__logo{ display:flex; align-items:center; flex:none; }
.hdr__logo img{ height:26px; width:auto; transition:height .4s var(--e-out); }
.hdr.is-stuck .hdr__logo img{ height:22px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; flex:none; }
.nav__link{
  position:relative; padding:9px 14px; white-space:nowrap;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-dim); font-weight:500; transition:color var(--t-fast);
}
.nav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:var(--arc); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--e-out);
}
.nav__link:hover{ color:var(--txt); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--arc); }

.hdr__cta{ flex:none; }
.hdr__phone{
  display:flex; align-items:center; gap:9px; padding:9px 14px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--txt);
  border:1px solid var(--line-2); border-radius:var(--r); transition:border-color var(--t-fast), color var(--t-fast);
}
.hdr__phone:hover{ border-color:var(--arc); color:var(--arc); }
.hdr__phone svg{ width:13px; height:13px; }

.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--arc),var(--arc-hot));
  box-shadow:0 0 12px var(--arc-line);
}

/* burger */
.burger{ display:none; width:44px; height:44px; margin-left:auto; position:relative; flex:none; }
.burger span{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--txt);
  transition:transform .35s var(--e-out), opacity .2s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:27px; }
.burger.is-open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* mobile drawer */
.mnav{
  position:fixed; inset:0; z-index:890; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hdr-h) + 24px) var(--pad) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--e-io);
  visibility:hidden;
}
.mnav.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.mnav__list{ display:flex; flex-direction:column; gap:4px; }
.mnav__link{
  display:flex; align-items:baseline; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-disp); font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.5rem,7vw,2.2rem); text-transform:uppercase; line-height:1;
  opacity:0; transform:translateY(24px);
}
.mnav.is-open .mnav__link{ animation:mnavIn .6s var(--e-out) forwards; }
.mnav__link span{ font-family:var(--f-mono); font-size:.6rem; color:var(--arc); letter-spacing:.1em; }
.mnav__foot{ margin-top:36px; display:grid; gap:12px; }
@keyframes mnavIn{ to{ opacity:1; transform:none; } }

/* ---------- 7. PRELOADER ---------- */
.pre{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .5s ease, visibility .5s;
}
.pre.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre__logo{ width:min(280px,58vw); opacity:.9; }
.pre__bar{ width:min(280px,58vw); height:2px; background:var(--line); position:relative; overflow:hidden; }
.pre__bar i{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--arc),var(--arc-hot)); transition:right .25s linear; }
.pre__num{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; color:var(--txt-mute); }

/* ---------- 8. HERO ---------- */
/* The hero IS the slider. There is no second carousel section on the page —
   the three workshop photographs cycle as this section's background and every
   piece of hero furniture (headline, canvas, meta strip, thumbnails) sits on
   top of them. See js/slider.js. */
.hero{
  position:relative; display:flex; align-items:center; overflow:hidden;
  height:100vh; height:100svh; min-height:640px;
  padding-top:calc(var(--hdr-h) + 24px); padding-bottom:56px;
  background:var(--bg); isolation:isolate; touch-action:pan-y;
}

/* ---- layer 1: the photographs ---- */
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__ph{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; visibility:hidden;
  /* the photographs are backdrop, not subject — pushed down so a large white
     headline and body copy can live on top of them. brightness lifted from the
     spec's .42 to .52: at .42 the image read as texture rather than as a
     photograph, and the left-hand scrim (not the filter) is what actually
     protects the text column. Measured contrast still clears 4.5:1 — qa.py
     samples the lightest real pixel behind the paragraph on every slide. */
  filter:grayscale(.35) brightness(.52) contrast(1.08);
  transform:scale(1.06); transform-origin:54% 46%;
  transition:opacity .9s var(--e-out), visibility 0s linear .9s;
}
.hero__ph.is-on{
  opacity:1; visibility:visible;
  transition:opacity .9s var(--e-out), visibility 0s linear 0s;
  animation:heroKen 7900ms linear forwards;
}
@keyframes heroKen{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.hero.is-paused .hero__ph.is-on{ animation-play-state:paused; }

/* ---- layer 2: side scrim — opaque behind the text column, open on the right ---- */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* opaque behind the text column, open on the right so the workshop is still
     readable as a workshop. Right-hand stops eased off the spec's .55/.72 to
     match the lifted image brightness. */
  background:linear-gradient(100deg,
    rgba(10,12,15,.94) 0%, rgba(10,12,15,.86) 38%,
    rgba(10,12,15,.44) 68%, rgba(10,12,15,.62) 100%);
}
/* ---- layer 3: floor, so the meta strip has something to stand on ---- */
.hero__floor{
  position:absolute; inset:auto 0 0 0; height:46%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,12,15,.92) 0%, rgba(10,12,15,.5) 46%, transparent 100%);
}
.hero__glow{
  position:absolute; z-index:1; pointer-events:none;
  width:min(1100px,120vw); aspect-ratio:1; right:-18%; top:-22%;
  background:radial-gradient(circle, rgba(255,154,46,.09) 0%, rgba(255,154,46,.03) 34%, transparent 66%);
  filter:blur(10px);
}
/* ---- layer 4: the technical grid used across the rest of the site ---- */
.hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 100% at 34% 44%, #000 12%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 100% at 34% 44%, #000 12%, transparent 80%);
}
.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:"txt inst" "meta inst";
  gap:clamp(20px,4vw,44px) clamp(28px,5vw,64px); align-items:center; width:100%;
}
.hero__col{ grid-area:txt; }
.hero__inst{ grid-area:inst; display:grid; gap:var(--s-2); align-content:center; }
.hero__meta{ grid-area:meta; }
.hero__h1{ margin-top:var(--s-3); }
.hero__lead{ margin-top:var(--s-3); }

/* word-mask reveal */
.reveal-line{ display:block; overflow:hidden; }
.js .reveal-line > span{ transform:translateY(105%); }
.reveal-line > span{ display:block; transition:transform 1s var(--e-out); }
.is-lit .reveal-line > span{ transform:translateY(0); }
.reveal-line:nth-child(2) > span{ transition-delay:.09s; }
.reveal-line:nth-child(3) > span{ transition-delay:.18s; }
.reveal-line:nth-child(4) > span{ transition-delay:.27s; }

.hero__meta{
  margin-top:clamp(34px,5vw,52px); padding-top:22px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.hero__meta div{ display:grid; gap:5px; }
.hero__meta dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-mute); }
.hero__meta dd{ margin:0; font-family:var(--f-disp); font-variation-settings:"wdth" 108,"wght" 700; font-size:1.02rem; letter-spacing:-.01em; }

/* the signature: live restoration instrument */
/* Solid backing: the panel now sits over a photograph, and the canvas draws
   thin 1px strokes that would dissolve into the image without it. The rgba
   fill alone is enough — backdrop-filter only adds polish where supported. */
.instrument{
  position:relative; aspect-ratio:1/1; width:100%; max-width:500px; margin-inline:auto;
  border:1px solid var(--line-2);
  background:
    radial-gradient(circle at 50% 50%, rgba(21,26,34,.55), rgba(10,12,15,.3) 70%),
    rgba(15,19,26,.82);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  border-radius:var(--r-lg);
}
.instrument canvas{ width:100%; height:100%; display:block; }
.instrument__corner{ position:absolute; width:14px; height:14px; border:1px solid var(--arc-line); }
.instrument__corner:nth-child(1){ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.instrument__corner:nth-child(2){ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.instrument__corner:nth-child(3){ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.instrument__corner:nth-child(4){ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.instrument__hud{
  position:absolute; left:16px; right:16px; bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
}
.instrument__phase{ color:var(--arc); display:flex; align-items:center; gap:8px; }
.instrument__phase i{ width:6px; height:6px; background:var(--arc); border-radius:50%; animation:blip 1.4s infinite; }
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.instrument__dim{ color:var(--txt-dim); }
.instrument__tag{
  position:absolute; top:14px; left:16px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-mute);
}

/* centred, so it can never collide with the fixed dock in either bottom corner */
.scroll-cue{
  position:absolute; z-index:3; left:50%; translate:-50% 0; bottom:30px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-mute);
}
.scroll-cue i{ display:block; width:1px; height:38px; background:linear-gradient(var(--arc),transparent); animation:cue 2.2s var(--e-io) infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); } 45%{ transform:scaleY(1); } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- 9. TICKER ---------- */
.ticker{
  border-block:1px solid var(--line); background:var(--bg-2);
  overflow:hidden; padding-block:15px;
}
.ticker__track{ display:flex; width:max-content; gap:0; animation:slide 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  display:inline-flex; align-items:center; gap:22px; padding-inline:22px;
  font-family:var(--f-disp); font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(.95rem,1.6vw,1.25rem); text-transform:uppercase; letter-spacing:.01em;
  color:var(--txt-mute); white-space:nowrap;
}
.ticker__item b{ color:var(--txt); font-weight:inherit; }
.ticker__item::after{ content:""; width:5px; height:5px; background:var(--arc); flex:none; transform:rotate(45deg); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 10. STATEMENT / STATS ---------- */
.stmt{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,5vw,72px); align-items:start; }
.stmt__big{
  font-family:var(--f-disp); font-variation-settings:"wdth" 106,"wght" 600;
  font-size:clamp(1.28rem,2.5vw,1.86rem); line-height:1.32; letter-spacing:-.015em; color:var(--txt);
}
.stmt__big em{ font-style:normal; color:var(--arc); }
.stmt__body{ margin-top:22px; display:grid; gap:16px; }

.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg); padding:24px 20px; position:relative; overflow:hidden; }
.stat::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:var(--arc); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--e-out);
}
.stat.is-in::before{ transform:scaleX(1); }
.stat__num{
  font-family:var(--f-disp); font-variation-settings:"wdth" 120,"wght" 800;
  font-size:clamp(2rem,4.4vw,2.9rem); line-height:1; letter-spacing:-.03em;
}
.stat__num sup{ font-size:.42em; vertical-align:super; color:var(--arc); }
.stat__lbl{ margin-top:10px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-mute); line-height:1.5; }

/* ---------- 11. SERVICE CARDS ---------- */
.svcs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1180px){ .svcs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .svcs{ grid-template-columns:minmax(0,1fr); } }
.svc{
  position:relative; background:var(--bg); padding:30px 26px 26px; text-align:left;
  display:flex; flex-direction:column; gap:18px; min-height:298px; width:100%;
  transition:background .4s var(--e-out); overflow:hidden; isolation:isolate;
}
.svc::before{
  content:""; position:absolute; z-index:-1; width:340px; height:340px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); translate:-50% -50%;
  background:radial-gradient(circle, rgba(255,154,46,.13), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.svc:hover::before, .svc:focus-visible::before{ opacity:1; }
.svc:hover{ background:var(--bg-2); }
.svc--cta{ background:var(--bg-2); }
.svc--cta:hover{ background:var(--bg-3); }
.svc--cta .svc__more{ color:var(--arc); }
.svc h3{ margin:0; }
.svc__no{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; color:var(--txt-mute); }
.svc__fig{ height:76px; display:flex; align-items:center; }
.svc__fig svg{ height:100%; width:auto; overflow:visible; }
.svc__fig .ln{ fill:none; stroke:var(--txt-dim); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s; }
.svc__fig .ac{ fill:none; stroke:var(--arc); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200); transition:stroke-dashoffset 1.1s var(--e-out); }
.svc:hover .svc__fig .ln{ stroke:var(--txt); }
.svc.is-in .svc__fig .ac{ stroke-dashoffset:0; }
.svc__ttl{ margin-top:auto; }
.svc__txt{ font-size:.9rem; color:var(--txt-dim); line-height:1.58; }
.svc__more{
  margin-top:4px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--arc);
}
.svc__more svg{ width:12px; height:12px; transition:transform var(--t-fast); }
.svc:hover .svc__more svg{ transform:translateX(4px); }

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:950; display:grid; grid-template-columns:1fr min(660px,100%);
  visibility:hidden; pointer-events:none;
}
.drawer.is-open{ visibility:visible; pointer-events:auto; }
.drawer__scrim{ background:rgba(5,7,10,.72); opacity:0; transition:opacity .45s var(--e-out); backdrop-filter:blur(3px); }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{
  background:var(--bg-2); border-left:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .55s var(--e-io);
  padding:clamp(24px,4vw,44px);
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__close{
  position:sticky; top:0; margin-left:auto; display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-dim);
  padding:8px 0; transition:color var(--t-fast); z-index:2;
}
.drawer__close:hover{ color:var(--arc); }
.drawer__body h3{ margin:26px 0 12px; }
.drawer__body p{ color:var(--txt-dim); margin-bottom:14px; font-size:.95rem; }
.drawer__body ul{ display:grid; gap:9px; margin-bottom:18px; }
.drawer__body li{ display:flex; gap:12px; color:var(--txt-dim); font-size:.92rem; line-height:1.55; }
.drawer__body li::before{ content:""; flex:none; width:5px; height:5px; margin-top:9px; background:var(--arc); transform:rotate(45deg); }
.drawer__spec{ border:1px solid var(--line); background:var(--bg-3); margin:20px 0 26px; }
.drawer__spec div{ padding:14px 17px; border-bottom:1px solid var(--line); }
.drawer__spec div:last-child{ border-bottom:0; }
.drawer__spec dt{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute); }
.drawer__spec dd{ margin:7px 0 0; font-size:.92rem; }

/* ---------- 12. PROCESS — inverted technical sheet ---------- */
.sheet{ background:var(--sheet); color:var(--sheet-ink); position:relative; overflow:hidden; }
.sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(15,20,26,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,20,26,.055) 1px, transparent 1px);
  background-size:28px 28px;
}
.sheet::after{
  content:""; position:absolute; inset:18px; border:1px solid var(--sheet-line); pointer-events:none;
}
.sheet .t-lead{ color:var(--sheet-dim); }
.sheet .rule{ background:var(--sheet-line); }
.sheet__stamp{
  position:absolute; right:34px; top:34px; z-index:2;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sheet-dim);
  border:1px solid var(--sheet-line); padding:9px 13px; line-height:1.7; text-align:right;
}

.steps{ position:relative; display:grid; gap:0; }
.steps__line{ position:absolute; left:29px; top:20px; bottom:34px; width:1px; background:var(--sheet-line); }
.steps__line i{ position:absolute; inset:0 0 auto 0; height:0; background:#B4531A; transition:height .18s linear; }
.step{
  position:relative; display:grid; grid-template-columns:60px minmax(0,1fr); gap:clamp(14px,3vw,34px);
  padding:26px 0; border-bottom:1px solid var(--sheet-line);
  opacity:.42; transition:opacity .5s var(--e-out);
}
.step.is-in{ opacity:1; }
.step:last-child{ border-bottom:0; }
.step__no{
  position:relative; z-index:1; width:60px; height:60px; flex:none;
  display:grid; place-items:center; background:var(--sheet); border:1px solid var(--sheet-line);
  font-family:var(--f-mono); font-size:.86rem; font-weight:600; color:var(--sheet-ink);
  transition:border-color .4s, background .4s, color .4s;
}
.step.is-in .step__no{ border-color:#B4531A; color:#B4531A; }
.step__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(10px,3vw,34px); align-items:start; }
.step__ttl{ font-family:var(--f-disp); font-variation-settings:"wdth" 112,"wght" 760; font-size:clamp(1.1rem,2.3vw,1.55rem); text-transform:uppercase; letter-spacing:-.015em; line-height:1.06; }
.step__txt{ color:var(--sheet-dim); font-size:.94rem; line-height:1.6; }
.step__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.step__tags span{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; color:var(--sheet-dim); border:1px solid var(--sheet-line); padding:4px 9px; }

/* ---------- 13. MATRIX ---------- */
.matrix-wrap{ border:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.matrix{ width:100%; min-width:720px; border-collapse:collapse; font-size:.88rem; }
.matrix th, .matrix td{ padding:14px 12px; text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.matrix th:last-child, .matrix td:last-child{ border-right:0; }
.matrix tbody tr:last-child td{ border-bottom:0; }
.matrix thead th{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-mute); font-weight:500; background:var(--bg-2); position:sticky; top:0;
}
.matrix tbody th{
  text-align:left; font-family:var(--f-disp); font-variation-settings:"wdth" 104,"wght" 660;
  font-size:.92rem; white-space:nowrap; background:var(--bg-2);
}
.matrix tbody tr{ transition:background var(--t-fast); }
.matrix tbody tr:hover{ background:var(--bg-2); }
.matrix .yes{ color:var(--arc); font-family:var(--f-mono); font-weight:600; }
.matrix .no{ color:var(--txt-mute); opacity:.4; }
.matrix-note{ margin-top:14px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:var(--txt-mute); }

/* ---------- 14. PARTS GRID ---------- */
/* 12 items: 4 / 3 / 2 columns all divide evenly */
.parts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1180px){ .parts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .parts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* the home page teaser holds 8 items, so it must skip the 3-column step
   (8 / 3 would leave a hollow cell in the last row) */
@media (max-width:1180px){ .parts--home{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.part{
  position:relative; background:var(--bg); padding:22px 20px; min-height:132px;
  display:flex; flex-direction:column; justify-content:space-between; gap:16px; overflow:hidden;
}
.part__i{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; color:var(--txt-mute); }
.part__n{ font-family:var(--f-disp); font-variation-settings:"wdth" 106,"wght" 680; font-size:1rem; line-height:1.18; letter-spacing:-.008em; }
.part::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--arc); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--e-out);
}
.part:hover::after{ transform:scaleX(1); }
.part:hover .part__n{ color:var(--arc); }
.part .part__n{ transition:color var(--t-fast); }

/* ---------- 15. WHY / COMPARE ---------- */
.why{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1080px){ .why{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .why{ grid-template-columns:minmax(0,1fr); } }
.why__i{ background:var(--bg); padding:28px 24px; display:grid; gap:14px; align-content:start; }
.why__k{ font-family:var(--f-disp); font-variation-settings:"wdth" 120,"wght" 800; font-size:1.9rem; line-height:1; color:var(--arc); letter-spacing:-.03em; }
.why__t{ font-family:var(--f-disp); font-variation-settings:"wdth" 106,"wght" 700; font-size:1.02rem; }
.why__d{ font-size:.9rem; color:var(--txt-dim); line-height:1.58; }

/* explicit column count, not auto-fit: two cards must resolve to 2 or 1 columns
   and never leave a hollow track showing the --line background through */
.compare{ margin-top:clamp(34px,5vw,56px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:760px){ .compare{ grid-template-columns:minmax(0,1fr); } }
.compare__c{ background:var(--bg); padding:28px 26px; }
.compare__c--hot{ background:var(--bg-2); position:relative; }
.compare__c--hot::before{ content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--arc); }
.compare__h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.compare__lbl{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute); }
.compare__c--hot .compare__lbl{ color:var(--arc); }
.compare__l{ display:grid; gap:12px; }
.compare__l li{ display:flex; gap:12px; font-size:.92rem; color:var(--txt-dim); line-height:1.5; }
.compare__l li svg{ width:15px; height:15px; flex:none; margin-top:3px; }

/* ---------- 16. CONTACT ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.contact__info{ background:var(--bg-2); padding:clamp(26px,4vw,40px); display:grid; gap:26px; align-content:start; }
.contact__form{ background:var(--bg); padding:clamp(26px,4vw,40px); }
.cblock dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--arc); margin-bottom:10px; }
.cblock dd{ margin:0 0 5px; font-size:.98rem; }
.cblock dd a{ transition:color var(--t-fast); }
.cblock dd a:hover{ color:var(--arc); }
.cblock dd small{ display:inline-block; min-width:132px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-mute); }

.field{ display:grid; gap:8px; margin-bottom:18px; }
.field label{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute); }
.field input, .field textarea, .field select{
  width:100%; padding:13px 15px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); font-size:.95rem; transition:border-color var(--t-fast), background var(--t-fast);
}
.field textarea{ resize:vertical; min-height:118px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--arc); background:var(--bg-3); }
.field.has-err input, .field.has-err textarea{ border-color:#E0523F; }
.field__err{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; color:#E0523F; display:none; }
.field.has-err .field__err{ display:block; }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.form__note{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.08em; color:var(--txt-mute); line-height:1.7; margin-top:14px; }
.form__msg{ margin-top:16px; padding:13px 15px; border:1px solid var(--line); font-size:.88rem; display:none; }
.form__msg.is-ok{ display:block; border-color:var(--ok); color:var(--ok); }
.form__msg.is-bad{ display:block; border-color:#E0523F; color:#E0523F; }

.map{ margin-top:clamp(34px,5vw,56px); border:1px solid var(--line); height:clamp(260px,42vw,400px); filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg); }
.map iframe{ width:100%; height:100%; border:0; }

/* ---------- 17. FOOTER ---------- */
/* bottom padding clears the fixed dock, so the last footer row is always
   readable and its links are always clickable at the very end of the page */
.ftr{
  border-top:1px solid var(--line); background:var(--bg-2);
  padding-block:clamp(44px,6vw,72px) calc(var(--dock) + var(--dock-size) + 16px);
}
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,4vw,44px); }
.ftr__logo{ height:30px; width:auto; margin-bottom:20px; }
.ftr__ttl{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-mute); margin-bottom:16px; }
.ftr__l{ display:grid; gap:9px; }
.ftr__l a, .ftr__l span{ font-size:.9rem; color:var(--txt-dim); transition:color var(--t-fast); }
.ftr__l a:hover{ color:var(--arc); }
.ftr__bot{
  margin-top:clamp(30px,4vw,52px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-mute);
}
.ftr__bot a:hover{ color:var(--arc); }

/* ---------- 18. FIXED DOCK (assistant + back-to-top, same baseline) ---------- */
.dock-btn{
  position:fixed; bottom:var(--dock); z-index:930;
  width:var(--dock-size); height:var(--dock-size);
  display:grid; place-items:center;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r);
  transition:transform .4s var(--e-out), opacity .4s var(--e-out), border-color var(--t-fast), background var(--t-fast);
}
.dock-btn:hover{ border-color:var(--arc); background:var(--bg-4); }
.dock-btn svg{ width:20px; height:20px; }

/* back to top — right.
   visibility (not just opacity) so it is genuinely out of the a11y tree and
   out of any "stuck invisible element" audit while it is parked. */
.totop{ right:var(--dock); opacity:0; visibility:hidden; transform:translateY(18px) scale(.9); pointer-events:none;
  transition:transform .4s var(--e-out), opacity .4s var(--e-out), visibility .4s, border-color var(--t-fast), background var(--t-fast); }
.totop.is-on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.totop svg{ transition:transform var(--t-fast); }
.totop:hover svg{ transform:translateY(-3px); color:var(--arc); }
.totop__ring{ position:absolute; inset:-1px; pointer-events:none; }
.totop__ring circle{ fill:none; stroke:var(--arc); stroke-width:1.5; opacity:.9;
  transform:rotate(-90deg); transform-origin:50% 50%; }

/* assistant launcher — left, same baseline */
.asi-launch{ left:var(--dock); width:auto; padding-inline:0; }
.asi-launch__in{ display:flex; align-items:center; height:100%; }
.asi-launch__ico{ width:var(--dock-size); height:var(--dock-size); display:grid; place-items:center; flex:none; position:relative; }
.asi-launch__ico::after{
  content:""; position:absolute; top:11px; right:11px; width:7px; height:7px; border-radius:50%;
  background:var(--arc); box-shadow:0 0 0 2px var(--bg-3); animation:blip 2s infinite;
}
.asi-launch__lbl{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt);
  transition:max-width .5s var(--e-out), padding .5s var(--e-out);
}
.asi-launch:hover .asi-launch__lbl, .asi-launch.is-teased .asi-launch__lbl{ max-width:190px; padding-right:20px; }
.asi-launch.is-hidden{ opacity:0; visibility:hidden; transform:translateY(18px) scale(.9); pointer-events:none; }

/* assistant panel */
.asi{
  position:fixed; left:var(--dock); bottom:calc(var(--dock) + var(--dock-size) + 12px); z-index:935;
  width:min(384px, calc(100vw - 2*var(--dock)));
  height:min(560px, calc(100svh - var(--dock)*2 - var(--dock-size) - 24px));
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  transform-origin:0 100%; transform:translateY(14px) scale(.96); opacity:0; visibility:hidden;
  transition:transform .42s var(--e-out), opacity .32s, visibility .32s;
}
.asi.is-open{ transform:none; opacity:1; visibility:visible; }
.asi__hd{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--bg-3); flex:none; }
.asi__av{ width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid var(--arc-line); border-radius:var(--r); background:var(--arc-soft); }
.asi__av svg{ width:17px; height:17px; color:var(--arc); }
.asi__id{ display:grid; gap:2px; min-width:0; }
.asi__name{ font-family:var(--f-disp); font-variation-settings:"wdth" 106,"wght" 700; font-size:.88rem; letter-spacing:-.005em; }
.asi__stat{ font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ok); display:flex; align-items:center; gap:6px; }
.asi__stat i{ width:5px; height:5px; border-radius:50%; background:var(--ok); }
.asi__x{ margin-left:auto; width:30px; height:30px; display:grid; place-items:center; color:var(--txt-mute); transition:color var(--t-fast); flex:none; }
.asi__x:hover{ color:var(--arc); }
.asi__body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain; }
.asi__row{ display:flex; gap:9px; max-width:100%; animation:msgIn .42s var(--e-out) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(9px); } }
.asi__row--me{ justify-content:flex-end; }
.asi__bub{
  padding:11px 14px; border-radius:var(--r-lg); font-size:.885rem; line-height:1.55; max-width:88%;
  background:var(--bg-3); border:1px solid var(--line); color:var(--txt-dim);
}
.asi__bub strong{ color:var(--txt); font-weight:600; }
.asi__bub a{ color:var(--arc); text-decoration:underline; text-underline-offset:2px; }
.asi__bub ul{ display:grid; gap:6px; margin:9px 0 3px; }
.asi__bub li{ display:flex; gap:9px; }
.asi__bub li::before{ content:""; flex:none; width:4px; height:4px; margin-top:8px; background:var(--arc); transform:rotate(45deg); }
.asi__row--me .asi__bub{ background:var(--arc-soft); border-color:var(--arc-line); color:var(--txt); }
.asi__typing{ display:flex; gap:4px; padding:14px; }
.asi__typing i{ width:5px; height:5px; border-radius:50%; background:var(--txt-mute); animation:dot 1.2s infinite; }
.asi__typing i:nth-child(2){ animation-delay:.16s; }
.asi__typing i:nth-child(3){ animation-delay:.32s; }
@keyframes dot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.asi__chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; flex:none; }
.asi__chip{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 11px; border:1px solid var(--line-2); border-radius:var(--r); color:var(--txt-dim);
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.asi__chip:hover{ border-color:var(--arc); color:var(--arc); background:var(--arc-soft); }
.asi__in{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:var(--bg-3); flex:none; }
.asi__in input{ flex:1; min-width:0; padding:11px 13px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); font-size:.88rem; }
.asi__in input:focus{ outline:none; border-color:var(--arc); }
.asi__send{ width:42px; flex:none; display:grid; place-items:center; border:1px solid var(--arc); background:var(--arc); color:#0A0C0F; border-radius:var(--r); transition:filter var(--t-fast); }
.asi__send:hover{ filter:brightness(1.12); }
.asi__send svg{ width:16px; height:16px; }
.asi__foot{ padding:0 14px 11px; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-mute); text-align:center; background:var(--bg-3); flex:none; }

/* ---------- 19. SCROLL REVEALS ---------- */
.js [data-rise]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); }
.js [data-rise].is-in{ opacity:1; transform:none; }
.js .svc__fig .ac{ stroke-dashoffset:var(--len,200); }
html:not(.js) .svc__fig .ac{ stroke-dashoffset:0; }
[data-rise-d="1"]{ transition-delay:.08s; }
[data-rise-d="2"]{ transition-delay:.16s; }
[data-rise-d="3"]{ transition-delay:.24s; }
[data-rise-d="4"]{ transition-delay:.32s; }
[data-rise-d="5"]{ transition-delay:.4s; }
[data-rise-d="6"]{ transition-delay:.48s; }

/* ---------- 20. RESPONSIVE ---------- */
/* Seven nav items plus a phone block plus a CTA is a lot of horizontal
   furniture. The order of surrender, measured rather than guessed:
   1300px the phone goes, 1240px the link boxes tighten, 1180px the whole
   desktop nav hands over to the burger. Links never wrap. */
@media (max-width:1300px){
  .hdr__phone{ display:none; }
}
@media (max-width:1240px){
  .hdr__in{ gap:16px; }
  .nav__link{ padding:9px 9px; letter-spacing:.1em; }
  .nav__link::after{ left:9px; right:9px; }
}
@media (max-width:1080px){
  .stmt{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
}
/* The hero holds its two columns further down than the rest of the page. It has
   to: stacking them turns the section into roughly 1200px of content, and the
   hero is supposed to be exactly one viewport tall wherever it can be. */
@media (max-width:1080px){
  .instrument{ max-width:380px; }
  .hero__in{ gap:clamp(16px,2.6vw,30px) clamp(20px,3.2vw,40px); }
}
@media (max-width:900px){
  .instrument{ max-width:320px; }
  .hero__meta{ margin-top:var(--s-4); gap:12px; }
  /* the left column is ~340px here; without this the eyebrow and the three
     meta values each wrap onto a second line and the block looks broken */
  .hero .eyebrow{ font-size:.62rem; letter-spacing:.14em; gap:8px; }
  .hero .eyebrow::before{ width:16px; }
  .hero__meta dt{ font-size:.55rem; letter-spacing:.14em; }
  .hero__meta dd{ font-size:.9rem; white-space:nowrap; }
}
@media (max-width:1180px){
  .nav, .hdr__cta{ display:none; }
  .burger{ display:block; }
}
@media (max-width:860px){
  .step__grid{ grid-template-columns:1fr; gap:12px; }
  .steps__line{ left:22px; }
  .step{ grid-template-columns:46px minmax(0,1fr); }
  .step__no{ width:46px; height:46px; font-size:.76rem; }
  .sheet__stamp{ display:none; }
  .drawer{ grid-template-columns:0 1fr; }
}
/* Below 760px the hero stops pretending to fit one screen and grows instead.
   On a 390x844 phone the headline, paragraph, two CTAs, canvas, thumbnail
   strip and meta row cannot coexist in 844px without shrinking everything to
   unreadable, so the section is allowed to run past the fold.
   (The spec named 900px here; 768x1024 still fits two columns comfortably and
   the verification asserts one viewport at that size, so the switch sits just
   below 768 instead.) */
@media (max-width:760px){
  .hero{ height:auto; min-height:100svh; padding-bottom:72px; }
  .hero__in{ grid-template-columns:1fr; grid-template-areas:"txt" "inst" "meta"; gap:34px; }
  .instrument{ max-width:440px; }
  .hero__scrim{
    background:linear-gradient(170deg,
      rgba(10,12,15,.9) 0%, rgba(10,12,15,.82) 34%,
      rgba(10,12,15,.72) 66%, rgba(10,12,15,.88) 100%);
  }
}
@media (max-width:640px){
  :root{ --dock-size:50px; }
  .hero__meta{ grid-template-columns:1fr; gap:14px; }
  .hero__meta div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); padding-bottom:10px; }
  .scroll-cue{ display:none; }
  .stats{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr; }
  .svc{ min-height:0; }
  .asi{ height:min(72svh, calc(100svh - var(--dock)*2 - var(--dock-size) - 20px)); }
  .asi-launch__lbl{ display:none; }
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal-line > span{ transform:none; }
  .js [data-rise]{ opacity:1; transform:none; }
  .ticker__track{ animation:none; }
  .step{ opacity:1; }
}

/* ---------- 22. PRINT ---------- */
@media print{
  .hdr,.mnav,.pre,.dock-btn,.asi,.drawer,.scroll-cue,.ticker,.map{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ---------- 23. SUBPAGE: USLUGE ---------- */
.subhero{
  position:relative; padding-top:calc(var(--hdr-h) + clamp(48px,8vw,92px));
  padding-bottom:clamp(40px,6vw,72px); overflow:hidden;
}
.subhero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(900px,110vw); aspect-ratio:1; right:-14%; top:-40%;
  background:radial-gradient(circle, rgba(255,154,46,.12) 0%, transparent 62%);
}
.crumb{
  display:flex; align-items:center; gap:9px; margin-bottom:26px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--txt-mute);
}
.crumb a{ transition:color var(--t-fast); }
.crumb a:hover{ color:var(--arc); }

.doc{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
/* without this the single-column layout below 900px sizes its track to the
   index's max-content width and drags the whole page into horizontal overflow */
.doc > *{ min-width:0; }
.doc__idx{ position:sticky; top:96px; display:grid; gap:2px; min-width:0; }
.doc__idx-t{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-mute); margin-bottom:12px; }
.doc__idx a{
  display:flex; gap:11px; align-items:baseline; padding:8px 0 8px 12px; border-left:1px solid var(--line);
  font-size:.88rem; color:var(--txt-dim); transition:color var(--t-fast), border-color var(--t-fast);
}
.doc__idx a b{ font-family:var(--f-mono); font-size:.6rem; color:var(--txt-mute); font-weight:500; }
.doc__idx a:hover, .doc__idx a.is-active{ color:var(--arc); border-left-color:var(--arc); }
.doc__idx a.is-active b{ color:var(--arc); }

.proc{ padding-block:clamp(40px,6vw,72px); border-top:1px solid var(--line); scroll-margin-top:90px; }
.proc:first-child{ border-top:0; padding-top:0; }
.proc__no{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; color:var(--arc); }
.proc__t{ margin:14px 0 18px; }
.proc__lead{ color:var(--txt-dim); font-size:1.02rem; line-height:1.68; max-width:62ch; }
.proc__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(22px,4vw,48px); margin-top:30px; align-items:start; }
.proc__body h3{ margin:22px 0 10px; }
.proc__body p{ color:var(--txt-dim); margin-bottom:14px; font-size:.96rem; line-height:1.68; }
.proc__body ul{ display:grid; gap:9px; margin-bottom:16px; }
.proc__body li{ display:flex; gap:12px; color:var(--txt-dim); font-size:.94rem; line-height:1.58; }
.proc__body li::before{ content:""; flex:none; width:5px; height:5px; margin-top:9px; background:var(--arc); transform:rotate(45deg); }
.proc__aside{ border:1px solid var(--line); background:var(--bg-2); }
.proc__aside dl{ margin:0; }
.proc__aside div{ padding:15px 18px; border-bottom:1px solid var(--line); }
.proc__aside div:last-child{ border-bottom:0; }
.proc__aside dt{ font-family:var(--f-mono); font-size:.57rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute); }
.proc__aside dd{ margin:7px 0 0; font-size:.92rem; line-height:1.5; }

.cta-band{ border-top:1px solid var(--line); background:var(--bg-2); }
.cta-band__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding-block:clamp(44px,6vw,72px); }
.cta-band__t{ max-width:36ch; }

@media (max-width:900px){
  .doc{ grid-template-columns:1fr; }
  .doc__idx{ position:static; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:0;
    padding-bottom:10px; border-bottom:1px solid var(--line); }
  .doc__idx a{ border-left:0; border-bottom:2px solid transparent; padding:8px 14px 8px 0; white-space:nowrap; }
  .doc__idx a.is-active{ border-left-color:transparent; }
  .doc__idx-t{ display:none; }
  .proc__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   24. PHOTOGRAPHY — shared treatment
   Three photographs exist and only three. They are always cropped with
   object-fit:cover inside a box that owns its own aspect — never stretched,
   never letterboxed. Rest state is desaturated so a photo reads as part of the
   graphite system rather than pasted on top of it.
   ============================================================ */
.ph{ position:relative; overflow:hidden; background:var(--bg-2); }
.ph > img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,12,15,.58) 0%, rgba(10,12,15,.16) 38%,
                                     rgba(10,12,15,.66) 76%, rgba(10,12,15,.93) 100%);
}
/* the same technical grid used on the dark sections, over the photograph */
.ph__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ---- 24a. hero thumbnail strip — this IS the slider navigation ----
   Not decoration and not a link to another section: three buttons that jump to
   their slide, show which one is live, and carry the dwell progress. There is
   no separate dot indicator anywhere on the site. */
.hero-strip{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  height:clamp(78px, 9vw, 112px);
}
.hero-strip__c{
  position:relative; display:block; overflow:hidden; background:var(--bg-2);
  min-width:0; padding:0; border:0; cursor:pointer;
}
.hero-strip__c img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.55);
  transition:filter .5s var(--e-out), transform .8s var(--e-out);
}
.hero-strip__c:hover img{ filter:grayscale(.45) brightness(.8); }
.hero-strip__c.is-on img{ filter:grayscale(0) brightness(1); }

.hero-strip__c::after{  /* legibility bed for the label */
  content:""; position:absolute; inset:auto 0 0 0; height:66%; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, rgba(6,8,11,.9));
}
.hero-strip__c::before{  /* active marker along the top edge */
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:3; background:var(--arc);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--e-out);
}
.hero-strip__c.is-on::before{ transform:scaleX(1); }
.hero-strip__c:hover::before{ transform:scaleX(1); opacity:.45; }
.hero-strip__c.is-on:hover::before{ opacity:1; }

/* dwell progress along the bottom edge — doubles as the slide-position readout */
.hero-strip__bar{
  position:absolute; inset:auto 0 0 0; height:2px; z-index:3; pointer-events:none;
  background:rgba(255,255,255,.16);
  /* visibility as well as opacity: only the live slide has a dwell bar, and an
     inactive one should be genuinely absent rather than merely transparent */
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--e-out), visibility .3s;
}
.hero-strip__c.is-on .hero-strip__bar{ visibility:visible; }
.hero-strip__bar::after{
  content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--arc);
  box-shadow:0 0 10px var(--arc-line);
}
.hero-strip__c.is-on .hero-strip__bar{ opacity:1; }
.hero-strip__c.is-on .hero-strip__bar::after{ animation:heroBar 7000ms linear forwards; }
.hero.is-paused .hero-strip__c.is-on .hero-strip__bar::after{ animation-play-state:paused; }
@keyframes heroBar{ from{ width:0; } to{ width:100%; } }

.hero-strip__l{
  position:absolute; left:10px; bottom:8px; z-index:2;
  font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); font-weight:500;
  text-shadow:0 1px 6px rgba(6,8,11,.9); transition:color var(--t-fast);
}
.hero-strip__c.is-on .hero-strip__l, .hero-strip__c:hover .hero-strip__l{ color:#fff; }

@media (max-width:640px){
  .hero-strip{ height:clamp(64px, 18vw, 86px); }
  .hero-strip__l{ left:8px; bottom:6px; font-size:.5rem; letter-spacing:.12em; }
}

/* ---- 24b. hero arrows — created by JS on fine-pointer devices only ---- */
.hero__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:4;
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(10,12,15,.35); color:var(--txt);
  opacity:0; visibility:hidden;
  transition:opacity .15s linear, visibility .15s linear,
             border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.hero__nav svg{ width:18px; height:18px; }
.hero__nav--prev{ left:var(--pad); }
.hero__nav--next{ right:var(--pad); }
.hero.is-pointing .hero__nav{ opacity:1; visibility:visible; }
.hero__nav:hover{ border-color:var(--arc); color:var(--arc); background:rgba(10,12,15,.6); }
/* a keyboard user must always be able to see where focus is */
.hero__nav:focus-visible{ opacity:1; visibility:visible; }

/* ============================================================
   26. INNER PAGE BANNER
   ============================================================ */
/* min-height, not height: the banner is always at least clamp(300px,42vh,440px)
   tall, but long headings on a 360px screen grow it instead of overflowing
   upward into the fixed header. padding-top reserves the header's own space. */
.banner{
  position:relative; width:100%; overflow:hidden;
  min-height:clamp(300px, 42vh, 440px);
  padding-top:calc(var(--hdr-h) + 12px);
  display:flex; align-items:flex-end;
  background:var(--bg-2); border-bottom:1px solid var(--line);
}
.banner__ph{ position:absolute; inset:-26px 0; z-index:0; will-change:transform; }
.banner__ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* held at .55 so inner pages read quieter than the home slider */
  filter:grayscale(.55) contrast(1.06) brightness(.7);
}
.banner__in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(26px,4vw,40px); }
.banner__crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:#C3CBD5; margin-bottom:var(--s-2);
  text-shadow:0 1px 8px rgba(6,8,11,.9);
}
.banner__crumb a{ color:#C3CBD5; transition:color var(--t-fast); }
.banner__crumb a:hover{ color:var(--arc); }
.banner__crumb [aria-current]{ color:var(--arc); }
.banner__h1{ text-shadow:0 2px 18px rgba(6,8,11,.6); }
.banner__lead{
  margin-top:var(--s-3); max-width:52ch; color:#DCE2EA;
  font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.64; text-wrap:pretty;
  text-shadow:0 1px 10px rgba(6,8,11,.75);
}
@media (max-width:640px){
  .banner{ padding-top:calc(var(--hdr-h) + 22px); padding-bottom:6px; }
  .banner__lead{ font-size:.98rem; margin-top:var(--s-2); }
}
/* banner content never depends on JS to become visible */
.banner__in > *{ animation:bannerIn .75s var(--e-out) both; }
.banner__in > *:nth-child(2){ animation-delay:.07s; }
.banner__in > *:nth-child(3){ animation-delay:.14s; }
@keyframes bannerIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* full-width photo band used once on o-nama and once on proces */
.band{
  position:relative; width:100%; height:clamp(240px,34vw,420px); overflow:hidden;
  border-block:1px solid var(--line);
}
.band img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.62) contrast(1.06) brightness(.72); }
.band__cap{
  position:absolute; left:0; right:0; bottom:clamp(18px,3vw,30px); z-index:2;
}
.band__cap p{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; max-width:68ch; line-height:1.9; text-shadow:0 1px 10px rgba(6,8,11,.9);
}

/* ============================================================
   27. INNER PAGE BLOCKS (prose, definition rows, note callout)
   ============================================================ */
.prose{ max-width:70ch; display:grid; gap:var(--s-3); }
.prose p{ color:var(--txt-dim); font-size:.985rem; line-height:1.72; text-wrap:pretty; }
.prose h3{ margin-top:var(--s-2); }
.prose ul{ display:grid; gap:10px; }
.prose li{ display:flex; gap:12px; color:var(--txt-dim); font-size:.95rem; line-height:1.6; }
.prose li::before{ content:""; flex:none; width:5px; height:5px; margin-top:9px; background:var(--arc); transform:rotate(45deg); }
.prose strong{ color:var(--txt); font-weight:600; }

.split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s-6); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:var(--s-5); } }

.facts{ border:1px solid var(--line); background:var(--bg-2); }
.facts div{ padding:15px 18px; border-bottom:1px solid var(--line); }
.facts div:last-child{ border-bottom:0; }
.facts dt{ font-family:var(--f-mono); font-size:.57rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-mute); }
.facts dd{ margin:7px 0 0; font-size:.93rem; line-height:1.5; }

.note{
  border:1px solid var(--line); border-left:2px solid var(--arc); background:var(--bg-2);
  padding:var(--s-4); margin-top:var(--s-5);
}
.note__t{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--arc); margin-bottom:var(--s-2); }
.note p{ color:var(--txt-dim); font-size:.95rem; line-height:1.68; text-wrap:pretty; }

/* two-, three- and four-up hairline grids. Column counts are explicit at every
   breakpoint and always divide the item count — a hollow cell would show the
   --line background through and read as a rendering bug. */
.tiles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.tiles--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tiles--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tiles--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tile{ background:var(--bg); padding:26px 24px; display:grid; gap:12px; align-content:start; }
.tile__k{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--arc); }
.tile__t{ font-family:var(--f-disp); font-variation-settings:"wdth" 106,"wght" 700; font-size:1.02rem; line-height:1.24; }
.tile__d{ font-size:.9rem; color:var(--txt-dim); line-height:1.6; text-wrap:pretty; }
@media (max-width:1080px){ .tiles--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){  .tiles--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px){  .tiles--3{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){  .tiles--2, .tiles--4{ grid-template-columns:minmax(0,1fr); } }

/* page-to-page continuation link at the end of every inner page */
.next{ border-top:1px solid var(--line); background:var(--bg-2); }
.next__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding-block:clamp(38px,5vw,60px); }
.next__t{ max-width:40ch; }

/* home page teaser: section that ends in a link to its full page */
.teaser__more{ margin-top:var(--s-5); }

/* 404 */
.err{ min-height:70svh; display:flex; align-items:center; padding-top:calc(var(--hdr-h) + var(--s-6)); padding-bottom:var(--s-6); }
.err__code{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.24em; color:var(--arc); }

/* ============================================================
   28. DESIGN PASS — hover, focus, tap targets, rhythm fixes
   ============================================================ */
/* one visible focus ring, on everything focusable, everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--arc); outline-offset:3px; border-radius:var(--r);
}
/* Form fields set outline:none on :focus so a mouse click does not draw a ring —
   but that rule out-specifies the generic :focus-visible one above, which left
   keyboard users with only a border colour change. Restore the ring here, at
   matching specificity, for keyboard focus only. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible,
.asi__in input:focus-visible{
  outline:2px solid var(--arc); outline-offset:1px; border-color:var(--arc);
}
.svc:focus-visible, .part:focus-visible, .hero-strip__c:focus-visible{ outline-offset:-2px; }

/* everything clickable looks clickable */
.part{ transition:background var(--t-fast); }
.part:hover, .part:focus-visible{ background:var(--bg-2); }
.why__i{ transition:background var(--t-fast); position:relative; }
.why__i::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--arc);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--e-out);
}
a.why__i:hover{ background:var(--bg-2); }
a.why__i:hover::after{ transform:scaleX(1); }
a.tile:hover{ background:var(--bg-2); }
a.tile .tile__t{ transition:color var(--t-fast); }
a.tile:hover .tile__t{ color:var(--arc); }
.ftr__l a{ width:fit-content; }
.crumb a, .banner__crumb a{ text-underline-offset:3px; }
.matrix tbody th{ transition:color var(--t-fast); }
.matrix tbody tr:hover th{ color:var(--arc); }

/* mobile tap targets */
@media (hover:none){
  .nav__link, .ftr__l a, .cblock dd a, .doc__idx a{ min-height:44px; display:flex; align-items:center; }
  .crumb a{ padding-block:6px; }
}

/* Typographic wrapping.
   Authored <br> in a heading is a composition decision made for a wide column.
   Below 700px the column is narrower than the shortest authored line, so the
   break stops helping and starts producing three-line headings that end on one
   word. Drop the authored breaks there and let text-wrap:balance re-fit. */
@media (max-width:700px){
  .t-display br, .t-h1 br, .t-h2 br, .banner__h1 br, .next__t br{ display:none; }
}
/* everything that reads as a heading gets balanced, not just h1–h3 */
.stmt__big, .step__ttl, .tile__t, .why__t, .part__n, .compare__lbl, .asi__name{ text-wrap:balance; }

/* Below ~560px the display face (wdth 118 / wght 800, uppercase) is roughly
   1.2em wide per character, so a 350px column holds about nine characters per
   line. That is narrower than the shortest word pair we refuse to break, and
   the pair then overflows the page. The page headings step down to match the
   column; the hero .t-display keeps its size, since its lines are authored
   short and it carries the first impression.
   Both clamps meet the base scale exactly at 560px, so there is no jump. */
@media (max-width:560px){
  .t-h1{ font-size:clamp(1.5rem, 6.2vw, 2.05rem); }
  .t-h2{ font-size:clamp(1.2rem, 5.1vw, 1.55rem); }
}

/* Bullet lists.
   These were flex containers with a ::before diamond. That works only while
   the item is a single text run — the moment an item contains inline markup
   ("<strong>Metalizacija prahom</strong> — tanji slojevi…") the <strong> and
   the text after it become two separate flex items and the line splits into
   two ragged columns. Absolute-positioned marker instead, so the item is a
   normal text block that wraps as one. */
.proc__body li, .drawer__body li, .prose li, .asi__bub li{
  display:block; position:relative; padding-left:17px; gap:0;
}
.proc__body li::before, .drawer__body li::before, .prose li::before, .asi__bub li::before{
  position:absolute; left:0; top:.62em; margin-top:0;
}
.asi__bub li{ padding-left:15px; }
.asi__bub li::before{ top:.58em; }

/* rhythm normalisation for blocks that had one-off margins */
.stmt__body{ margin-top:var(--s-3); gap:var(--s-2); }
.stmt__big{ margin-top:var(--s-3); }
.compare{ margin-top:var(--s-5); }
.map{ margin-top:var(--s-5); }
.matrix-note{ margin-top:var(--s-2); }
.btn-row{ margin-top:var(--s-4); }
.hero__meta{ margin-top:var(--s-5); }

/* the sheet section's inverted palette needs its own muted ink */
.sheet .banner__crumb{ color:var(--sheet-dim); }

/* ============================================================
   29. REDUCED MOTION — additions for the new modules
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  /* hero slider: no autoplay, no Ken Burns, no cross-fade — slide 1 stands
     still, while arrows, thumbnails and swipe stay fully functional */
  .hero__ph.is-on{ animation:none; transform:none; }
  .hero__ph{ transform:none; }
  .hero-strip__c.is-on .hero-strip__bar::after{ animation:none; width:100%; }
  .banner__in > *{ animation:none; opacity:1; transform:none; }
  .banner__ph{ transform:none !important; }
  .hero-strip__c img{ transition:none; }
}