/* ==========================================================================
   Otto Alenciks — portfolio v2 "Style Engine"
   One content set, five design systems. Tokens swap on :root[data-style].
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage.woff2)format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces.woff2)format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Anton;src:url(assets/fonts/anton.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-400-latin.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-400-ext.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-500-latin.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-500-ext.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-700-latin.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-700-ext.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-800-latin.woff2)format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope-800-ext.woff2)format("woff2");font-weight:800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/plexmono-400-latin.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/plexmono-400-ext.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   1. THE FIVE DESIGN SYSTEMS
   ========================================================================== */

:root{
  --body:Manrope,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4vw,72px);
  --maxw:1520px;
  --swap:.55s var(--ease);
}

/* 01 VOLTAGE — electric, loud, agency energy */
:root[data-style="voltage"]{
  --bg:#0b0b0c; --bg2:#141416; --panel:#17171a;
  --fg:#f4f4f2; --dim:#9a9a9c; --line:#2a2a2e;
  --accent:#e9ff3d; --on-accent:#0b0b0c;
  --display:"Bricolage Grotesque",var(--body); --disp-w:800; --disp-track:-.035em; --disp-lh:.86;
  --disp-case:uppercase; --disp-italic:normal;
  --r:2px; --border:1px; --grain:.05;
  --style-name:"Voltage";
}
/* 02 EDITORIAL — bone paper, serif, calm authority */
:root[data-style="editorial"]{
  --bg:#f3f0e8; --bg2:#eae6db; --panel:#ffffff;
  --fg:#16150f; --dim:#5f5c50; --line:#d6d1c2;
  --accent:#1b3a2f; --on-accent:#f3f0e8;
  --display:Fraunces,Georgia,serif; --disp-w:500; --disp-track:-.02em; --disp-lh:.95;
  --disp-case:none; --disp-italic:normal;
  --r:3px; --border:1px; --grain:.03;
  --style-name:"Editorial";
}
/* 03 NOIR — cinematic dark, cold light, photography first */
:root[data-style="noir"]{
  --bg:#07090c; --bg2:#0d1116; --panel:#11161c;
  --fg:#e8eef5; --dim:#7d8895; --line:#1e262f;
  --accent:#5ad1ff; --on-accent:#05080b;
  --display:Fraunces,Georgia,serif; --disp-w:300; --disp-track:-.012em; --disp-lh:1;
  --disp-case:none; --disp-italic:italic;
  --r:0px; --border:1px; --grain:.07;
  --style-name:"Noir";
}
/* 04 BRUTAL — hard blocks, cobalt, poster type */
:root[data-style="brutal"]{
  --bg:#f2f2ef; --bg2:#e4e4df; --panel:#ffffff;
  --fg:#101012; --dim:#55555c; --line:#101012;
  --accent:#2340ff; --on-accent:#ffffff;
  --display:Anton,Impact,sans-serif; --disp-w:400; --disp-track:.005em; --disp-lh:.9;
  --disp-case:uppercase; --disp-italic:normal;
  --r:0px; --border:2px; --grain:0;
  --style-name:"Brutal";
}
/* 05 TERRA — warm clay, workshop, material */
:root[data-style="terra"]{
  --bg:#f6f0e4; --bg2:#ece3d2; --panel:#fffaf0;
  --fg:#2b1d12; --dim:#6e5945; --line:#ddd0b9;
  --accent:#c2573a; --on-accent:#fff8ee;
  --display:"Bricolage Grotesque",var(--body); --disp-w:600; --disp-track:-.025em; --disp-lh:.94;
  --disp-case:none; --disp-italic:normal;
  --r:14px; --border:1px; --grain:.06;
  --style-name:"Terra";
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 clamp(15px,1.02vw,17px)/1.62 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color var(--swap),color var(--swap);
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--on-accent)}

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

.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.disp{
  font-family:var(--display);font-weight:var(--disp-w);font-style:var(--disp-italic);
  letter-spacing:var(--disp-track);line-height:var(--disp-lh);text-transform:var(--disp-case);
  transition:font-weight var(--swap),letter-spacing var(--swap);
}
.h1{font-size:clamp(2.5rem,5.1vw,5rem)}
.h2{font-size:clamp(1.8rem,3.5vw,3.4rem)}
.h3{font-size:clamp(1.3rem,2vw,2rem)}


/* ==========================================================================
   3. HEADER + STYLE RAIL
   ========================================================================== */

.hdr{
  position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  padding:14px var(--gut);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-bottom:var(--border) solid transparent;
  transition:background-color var(--swap),border-color .3s;
}
.hdr.stuck{border-bottom-color:var(--line)}
.mark{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:400}
.mark b{font-weight:400;color:var(--accent)}
.hdr nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.hdr nav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--dim);transition:color .25s}
.hdr nav a:hover{color:var(--fg)}
.hdr .cta{
  color:var(--on-accent);background:var(--accent);
  padding:9px 16px;border-radius:var(--r);
  transition:background-color var(--swap),color var(--swap),transform .25s;
}
.hdr .cta:hover{color:var(--on-accent);transform:translateY(-2px)}

/* style rail */
.rail{
  position:fixed;z-index:55;right:max(12px,calc((100vw - var(--maxw))/2 + 12px));
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.rail-lbl{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);writing-mode:vertical-rl;margin-bottom:6px}
.rail button{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:5px 2px 5px 10px;border-radius:var(--r);
  transition:color .25s,transform .25s;
}
.rail button i{
  width:22px;height:2px;background:currentColor;display:block;
  transition:width .3s var(--ease),background-color .25s;
}
.rail button:hover{color:var(--fg);transform:translateX(-3px)}
.rail button[aria-pressed="true"]{color:var(--fg)}
.rail button[aria-pressed="true"] i{width:40px;background:var(--accent);height:3px}
.rail .auto{margin-top:12px;color:var(--dim);font-size:.56rem;padding-left:10px}
.rail .auto[aria-pressed="true"]{color:var(--accent)}

/* ==========================================================================
   4. HERO
   ========================================================================== */

.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:clamp(100px,11vh,132px) 0 clamp(52px,7vh,84px);
  overflow:hidden;
}
.hero-grid{
  display:grid;gap:clamp(30px,5vw,70px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;
}
.hero-copy{position:relative;z-index:2;max-width:46ch}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(18px,2.4vw,30px)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}

.hero h1{margin-bottom:clamp(18px,2.2vw,26px)}
.hero h1 .sw{
  display:inline-block;color:var(--accent);
  transition:color var(--swap);
}
.hero-lead{font-size:clamp(.98rem,1.1vw,1.1rem);color:var(--dim);max-width:44ch;margin-bottom:clamp(24px,3vw,38px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 24px;border-radius:var(--r);
  border:var(--border) solid var(--fg);
  transition:background-color .3s,color .3s,transform .3s var(--ease),border-color var(--swap);
}
.btn-1{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-1:hover{transform:translateY(-3px)}
.btn-2:hover{background:var(--fg);color:var(--bg);transform:translateY(-3px)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* floating work cards */
.hero-stage{position:relative;height:clamp(340px,40vw,510px);margin-right:clamp(0px,4vw,74px)}
.card{
  position:absolute;overflow:hidden;border-radius:var(--r);
  border:var(--border) solid var(--line);
  background:var(--panel);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.65);
  transition:border-color var(--swap),box-shadow .4s,transform .5s var(--ease);
  will-change:transform;
}
.card img{width:100%;height:100%;object-fit:cover;object-position:center top}
.card figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:16px 14px 9px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.c1{width:57%;aspect-ratio:16/11;left:0;top:6%;z-index:3;rotate:-1.2deg}
.c2{width:38%;aspect-ratio:3/4;right:0;top:0;z-index:2;rotate:2deg}
.c3{width:34%;aspect-ratio:1;right:3%;bottom:0;z-index:4;rotate:-2.4deg}
.c4{width:32%;aspect-ratio:4/5;left:4%;bottom:1%;z-index:5;rotate:1.6deg}
.float{animation:float 9s ease-in-out infinite}
.c2.float{animation-duration:11s;animation-delay:-3s}
.c3.float{animation-duration:10s;animation-delay:-6s}
.c4.float{animation-duration:12s;animation-delay:-1.5s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

.scroll-cue{
  position:absolute;left:var(--gut);bottom:26px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.scroll-cue span{display:block;width:44px;height:1px;background:var(--dim);position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--accent);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ==========================================================================
   5. TICKER
   ========================================================================== */

.ticker{
  border-block:var(--border) solid var(--line);
  background:var(--bg2);overflow:hidden;padding:16px 0;
  transition:background-color var(--swap),border-color var(--swap);
}
.ticker-track{display:flex;width:max-content;animation:roll 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  font-family:var(--display);font-weight:var(--disp-w);text-transform:var(--disp-case);
  font-size:clamp(1.1rem,2.2vw,1.9rem);letter-spacing:var(--disp-track);
  padding-inline:clamp(18px,2.4vw,34px);white-space:nowrap;
}
.ticker-track span:nth-child(2n){color:var(--accent)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

section{position:relative}
.band{padding-block:clamp(72px,11vh,150px)}
.band-alt{background:var(--bg2);transition:background-color var(--swap)}

.sec-head{display:grid;gap:clamp(14px,2vw,22px);margin-bottom:clamp(38px,5vw,74px);max-width:62ch}
.sec-head .idx{display:flex;align-items:center;gap:12px}
.sec-head .idx::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.sec-head p{color:var(--dim);font-size:clamp(.98rem,1.1vw,1.1rem)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}

/* ---------- capabilities ---------- */
.caps{display:grid;gap:0;border-top:var(--border) solid var(--line)}
.cap{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr) auto;
  gap:clamp(16px,3vw,46px);align-items:center;
  padding:clamp(20px,2.6vw,34px) 0;
  border-bottom:var(--border) solid var(--line);
  transition:border-color var(--swap),padding-left .4s var(--ease);
}
.cap:hover{padding-left:14px}
.cap .n{font-family:var(--mono);font-size:.66rem;color:var(--accent);letter-spacing:.1em}
.cap h3{font-size:clamp(1.15rem,2.1vw,2.1rem)}
.cap p{color:var(--dim);font-size:.95rem}
.cap .thumb{
  width:clamp(64px,7vw,104px);aspect-ratio:1;object-fit:cover;border-radius:var(--r);
  filter:grayscale(1) contrast(1.06);opacity:.62;
  transition:filter .45s,opacity .45s,transform .45s var(--ease);
}
.cap:hover .thumb{filter:none;opacity:1;transform:scale(1.05)}

/* ---------- work ---------- */
.case{
  display:grid;gap:clamp(24px,4vw,58px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:start;
  padding-block:clamp(40px,6vw,90px);
  border-top:var(--border) solid var(--line);
}
.case:first-of-type{border-top:0}
.case-meta{position:sticky;top:110px;display:grid;gap:16px;align-content:start}
.case-meta .tag{
  display:inline-flex;align-self:start;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:var(--border) solid var(--line);border-radius:var(--r);color:var(--dim);
}
.case-meta .tag.live{color:var(--accent);border-color:var(--accent)}
.case-meta p{color:var(--dim)}
.case-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:4px}
.lnk{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .3s,color .3s;
}
.lnk:hover{border-bottom-color:var(--accent);color:var(--accent)}
.lnk svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2}
.facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.facts span{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;background:var(--bg2);border-radius:var(--r);color:var(--dim);
}

.case-media{display:grid;gap:clamp(10px,1.4vw,18px)}
.shot{position:relative;overflow:hidden;border-radius:var(--r);border:var(--border) solid var(--line);background:var(--panel)}
.shot{display:block}
.shot img{display:block;width:100%;height:auto;transition:transform .8s var(--ease)}
/* equal-height rows: figures stretch, images crop instead of leaving blank panel */
.m-2 .shot,.m-3 .shot{height:100%}
.m-2 .shot img,.m-3 .shot img{height:100%;object-fit:cover;object-position:center top}
.shot:hover img{transform:scale(1.035)}
.shot .cap-lbl{
  position:absolute;left:10px;bottom:10px;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  padding:5px 9px;border-radius:var(--r);
}
.m-2{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
.m-3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:inherit}
.browser{border-radius:var(--r);overflow:hidden;border:var(--border) solid var(--line);background:var(--panel)}
.browser .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:var(--border) solid var(--line)}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.browser .bar span{font-family:var(--mono);font-size:.56rem;color:var(--dim);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser img{width:100%}

/* ---------- fabrication chain ---------- */
.chain{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(4,minmax(0,1fr))}
.step{
  position:relative;display:grid;gap:12px;align-content:start;
  padding:clamp(14px,1.6vw,22px);
  border:var(--border) solid var(--line);border-radius:var(--r);
  background:var(--panel);
  transition:transform .5s var(--ease),border-color .4s,background-color var(--swap);
}
.step:hover{transform:translateY(-6px);border-color:var(--accent)}
.step .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--accent)}
.step h3{font-size:clamp(.98rem,1.3vw,1.28rem)}
.step p{font-size:.86rem;color:var(--dim)}
.step .f{
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  background:var(--bg2);display:grid;place-items:center;
}
.step .f img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.step:hover .f img{transform:scale(1.06)}
.step .f.contain img{object-fit:contain;padding:8%;background:#fff}
.chain-note{margin-top:clamp(18px,2vw,28px);color:var(--dim);font-size:.9rem;max-width:66ch}

/* ---------- motion ---------- */
.reels{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(3,minmax(0,1fr))}
.reel{overflow:hidden;border-radius:var(--r);border:var(--border) solid var(--line);background:#000}
.reel video{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.reel figcaption{
  padding:10px 12px;background:var(--panel);
  border-top:var(--border) solid var(--line);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}

/* ---------- style range ---------- */
.range{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(5,minmax(0,1fr))}
.range a{
  position:relative;display:grid;gap:10px;text-decoration:none;
  padding:14px;border:var(--border) solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;
  transition:transform .45s var(--ease),border-color .35s,background-color var(--swap);
}
.range a:hover{transform:translateY(-6px);border-color:var(--accent)}
.range .sw{height:52px;border-radius:var(--r);display:flex;overflow:hidden}
.range .sw i{flex:1}
.range .ltr{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--accent)}
.range .nm{font-size:.9rem;font-weight:700;line-height:1.25}
.range .go{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---------- about ---------- */
.about{display:grid;gap:clamp(26px,4vw,64px);grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.about-stat{display:grid;gap:4px;padding-block:14px;border-bottom:var(--border) solid var(--line)}
.about-stat b{font-family:var(--display);font-weight:var(--disp-w);font-size:clamp(1.6rem,3vw,2.6rem);line-height:1}
.about-stat span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.about-copy p+p{margin-top:1.1em}
.about-copy p{font-size:clamp(1rem,1.2vw,1.16rem)}

/* ---------- contact ---------- */
.contact{text-align:center;display:grid;gap:clamp(18px,2.4vw,30px);justify-items:center}
.contact .mail{
  font-family:var(--display);font-weight:var(--disp-w);letter-spacing:var(--disp-track);
  font-size:clamp(1.15rem,3.2vw,2.6rem);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:4px;word-break:break-word;
  transition:color .3s}
.contact .mail:hover{color:var(--accent)}

footer{
  border-top:var(--border) solid var(--line);
  padding:26px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
}
footer .mono{font-size:.6rem}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* reserve the right gutter for the fixed style rail so it never overlaps content */
@media (min-width:1181px){
  .shell{padding-right:max(var(--gut),118px)}
  .hero-stage{margin-right:0}
  /* the closing section is centred copy — keep it optically centred in the viewport */
  #kontakti{padding-right:var(--gut)}
}
@media (max-width:1180px){
  .rail{display:none}
  .range{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{height:clamp(320px,74vw,460px);order:-1}
  .hero-copy{max-width:none}
  .case{grid-template-columns:1fr}
  .case-meta{position:static}
  .about{grid-template-columns:1fr}
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}
  .cap p{grid-column:2/-1;font-size:.88rem}
}
@media (max-width:720px){
  .hdr nav a:not(.cta){display:none}
  .reels{grid-template-columns:1fr}
  .range{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-3{grid-template-columns:1fr 1fr}
  .scroll-cue{display:none}
}
@media (max-width:440px){
  .chain{grid-template-columns:1fr}
  .cap{grid-template-columns:auto minmax(0,1fr)}
  .cap .thumb{display:none}
}

/* ---------- style picker for small screens ---------- */
.rail-mobile{display:none;gap:8px;overflow-x:auto;padding:10px var(--gut);border-bottom:var(--border) solid var(--line);
  position:fixed;top:57px;left:0;right:0;z-index:49;background:var(--bg);
  scrollbar-width:none}
.rail-mobile::-webkit-scrollbar{display:none}
.rail-mobile button{
  flex:0 0 auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border:var(--border) solid var(--line);border-radius:var(--r);color:var(--dim);white-space:nowrap}
.rail-mobile button[aria-pressed="true"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
@media (max-width:1180px){
  .rail-mobile{display:flex}
  .hero{padding-top:clamp(150px,20vh,210px)}
}

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */

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

/* no-JS fallback: everything visible */
.no-js [data-reveal]{opacity:1;transform:none}