/* ============================================================
   FILM IN KYRGYZSTAN — FOLLOW THE LINE
   Single-file production guide. Design system below.
   ============================================================ */
:root{
  --black:#050505;
  --ink:#0b0b0b;
  --ink-2:#111111;
  --white:#F5F5F2;
  --red:#E31B23;
  --grey-1:rgba(245,245,242,.62);
  --grey-2:rgba(245,245,242,.38);
  --line:rgba(245,245,242,.14);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,5vw,88px);
  --maxw:1560px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}

/* ---------- grain + vignette ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ---------- typography ---------- */
.kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--grey-2);font-family:var(--mono);
}
.kicker b{color:var(--red);font-weight:500}
.h-xxl{
  font-size:clamp(2.6rem,9.5vw,10.5rem);line-height:.86;letter-spacing:-.045em;
  font-weight:700;text-transform:uppercase;margin:0;
}
.h-xl{
  font-size:clamp(2.1rem,6.2vw,6rem);line-height:.92;letter-spacing:-.04em;
  font-weight:700;text-transform:uppercase;margin:0;
}
.h-l{
  font-size:clamp(1.6rem,3.4vw,3.2rem);line-height:1.02;letter-spacing:-.03em;
  font-weight:600;text-transform:uppercase;margin:0;
}
.h-m{font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.2;letter-spacing:-.02em;font-weight:600;margin:0}
.serif{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.01em}
.serif em{font-style:italic}
.lead{font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.6;color:var(--grey-1);max-width:62ch;margin:0}
.small{font-size:13px;line-height:1.6;color:var(--grey-2)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.red{color:var(--red)}

/* ---------- header ---------- */
header.top{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad);
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
header.top.solid{background:rgba(5,5,5,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.brand .bdot{width:7px;height:7px;border-radius:50%;background:var(--red)}
.brand span{opacity:.55}
.top-right{display:flex;align-items:center;gap:clamp(10px,2vw,24px)}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang button{padding:6px 8px;color:var(--grey-2);transition:color .25s}
.lang button.on{color:var(--white)}
.lang button:hover{color:var(--red)}
.lang i{color:var(--grey-2);opacity:.4;font-style:normal}
.cta-top{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:10px 16px;border-radius:100px;
  transition:border-color .3s,background .3s,color .3s;white-space:nowrap;
}
.cta-top:hover{border-color:var(--red);background:var(--red);color:#fff}
.menu-btn{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- REC ---------- */
.rec{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;color:var(--grey-1);cursor:crosshair;transition:border-color .3s,color .3s;
  border:1px solid var(--line);border-radius:100px;padding:9px 14px;white-space:nowrap;
}
.rec .rdot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.rec.cut .rdot{animation:none;opacity:.3;border-radius:1px}
.rec.cut{color:var(--grey-2)}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:850;transition:width .12s linear}

/* ---------- side rail ---------- */
.rail{
  position:fixed;z-index:780;left:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
}
.rail a{
  display:flex;align-items:center;gap:8px;color:var(--grey-2);opacity:.45;
  padding:2.5px 0;transition:opacity .3s,color .3s;
}
.rail a .tick{width:0;height:1px;background:var(--red);transition:width .35s var(--ease)}
.rail a .rlabel{opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;white-space:nowrap}
.rail:hover a{opacity:.7}
.rail a:hover,.rail a.active{opacity:1;color:var(--white)}
.rail a.active .tick{width:14px}
.rail a:hover .rlabel,.rail a.active .rlabel{opacity:1;transform:none}
.rail a.active{color:var(--red)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}

/* ---------- section head ---------- */
.sec{padding:clamp(90px,13vh,170px) 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(28px,4vw,56px);flex-wrap:wrap}
.sec-head .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red)}
.sec-head .nm{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey-2);text-transform:uppercase}
.sec-head .rule{flex:1;height:1px;background:var(--line);min-width:40px}

/* ---------- dotted thread ---------- */
.thread{display:block;width:100%;height:clamp(90px,14vw,190px);overflow:visible}
.thread path{
  fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:7 9;stroke-linecap:round;
  stroke-dashoffset:0;
}
.thread .draw{
  --len:2000;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
}
.thread.in .draw{animation:tdraw 1.5s var(--ease) forwards,tdots .01s 1.5s forwards}
@keyframes tdraw{to{stroke-dashoffset:0}}
@keyframes tdots{to{stroke-dasharray:7 9;stroke-dashoffset:0}}
.thread .dot{fill:var(--red);opacity:0;transition:opacity .4s .9s}
.thread.in .dot{opacity:1}

/* ============================================================
   HERO
   ============================================================ */
.hero{height:100svh;min-height:600px;position:relative;overflow:hidden;background:#000}
.hero .frames{position:absolute;inset:0}
.hero .frames img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(1) contrast(1.15) brightness(.72);
  transition:opacity 1.5s ease,transform 7s linear;transform:scale(1.06);
}
.hero .frames img.on{opacity:1;transform:scale(1.13)}
.hero .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 40%,rgba(0,0,0,.15),rgba(0,0,0,.82) 78%),
    linear-gradient(180deg,rgba(5,5,5,.9),rgba(5,5,5,.25) 30%,rgba(5,5,5,.35) 60%,rgba(5,5,5,.96));
}
.hero .blackout{position:absolute;inset:0;background:#000;z-index:5;animation:blackout 1.1s 2.2s var(--ease) forwards}
@keyframes blackout{to{opacity:0;visibility:hidden}}
.hero-svg{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none}
.hero-svg .hpath{
  fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:2200;stroke-dashoffset:2200;
  animation:hdraw 2.3s .5s var(--ease) forwards,hdots .01s 2.8s forwards;
}
@keyframes hdraw{to{stroke-dashoffset:0}}
@keyframes hdots{to{stroke-dasharray:6 9;stroke-dashoffset:0}}
.hero-svg .seed{fill:var(--red);transform-box:fill-box;transform-origin:center;transform:scale(0);animation:seed .7s .15s var(--ease) forwards}
@keyframes seed{60%{transform:scale(1.9)}100%{transform:scale(1)}}
.hero-inner{
  position:relative;z-index:7;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(28px,5vh,64px);max-width:var(--maxw);margin:0 auto;
}
.hero-title{margin:0 0 clamp(14px,2vh,26px)}
.hero-title .hw span{display:inline-block;opacity:0;transform:translateY(.42em) rotate(2deg);animation:letter .85s var(--ease) forwards}
@keyframes letter{to{opacity:1;transform:none}}
.hero-sub{
  max-width:46ch;font-size:clamp(1rem,2.1vw,1.9rem);line-height:1.15;letter-spacing:-.02em;font-weight:500;
  text-transform:uppercase;opacity:0;animation:fadeUp 1s 2.55s var(--ease) forwards;
}
.hero-sub .serif{text-transform:none;color:var(--grey-1);display:block;margin-top:10px;font-size:.92em}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(26px,5vh,60px);padding-top:18px;border-top:1px solid var(--line);
  opacity:0;animation:fadeUp 1s 3.1s var(--ease) forwards;
}
.turn{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.turn .arrow{
  width:26px;height:26px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;
  color:var(--red);animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero-meta{display:flex;gap:clamp(14px,3vw,44px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--grey-2);text-transform:uppercase;flex-wrap:wrap}
.hero-meta b{display:block;color:var(--white);font-size:15px;letter-spacing:-.01em;font-family:var(--sans);font-weight:600;margin-bottom:3px}

/* ============================================================
   01 DISCOVER
   ============================================================ */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,90px);align-items:end}
.intro-quote{font-size:clamp(1.5rem,3.6vw,3.4rem);line-height:1.1;margin:0}
.intro-quote .red{font-style:italic}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pill{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:8px 14px;color:var(--grey-1);
}
.pill.hot{border-color:var(--red);color:var(--red)}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.fact{padding:26px 22px 26px 0;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact .fv{font-size:clamp(1.7rem,3.6vw,3.2rem);font-weight:700;letter-spacing:-.045em;line-height:1;margin-bottom:8px}
.fact .fv i{color:var(--red);font-style:normal}
.fact .fl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);line-height:1.5}

/* ---------- why here cards ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.why article{background:var(--black);padding:clamp(22px,2.4vw,38px);min-height:290px;display:flex;flex-direction:column;justify-content:space-between;transition:background .45s}
.why article:hover{background:var(--ink-2)}
.why .wn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);margin-bottom:auto}
.why h3{margin:26px 0 10px;font-size:clamp(1.15rem,1.7vw,1.6rem);letter-spacing:-.025em;font-weight:600;text-transform:uppercase;line-height:1.05}
.why p{margin:0;color:var(--grey-1);font-size:14.5px;line-height:1.6}

/* ============================================================
   COST DASHBOARD
   ============================================================ */
.cost{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(30px,5vw,64px)}
.cost-row{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,4vw,60px);align-items:end;padding:clamp(20px,3vw,38px) 0;position:relative}
.cost-row + .cost-row{border-top:1px solid var(--line)}
.cost-row .cl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);margin-bottom:14px}
.cost-row.kg .cl{color:var(--red)}
.cost-num{font-size:clamp(2.6rem,10vw,8.5rem);line-height:.82;font-weight:700;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.cost-row.kg .cost-num{color:var(--red)}
.cost-bar{height:3px;background:rgba(245,245,242,.1);margin-top:22px;position:relative;overflow:hidden}
.cost-bar i{position:absolute;inset:0 100% 0 0;background:var(--white);transition:right 1.6s var(--ease)}
.cost-row.kg .cost-bar i{background:var(--red)}
.cost-note{max-width:34ch;color:var(--grey-2);font-size:13px;line-height:1.6;text-align:right}
.cost-delta{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.cost-delta .dl{width:clamp(40px,8vw,120px);height:1px;background:var(--red);position:relative}
.cost-delta .dl::after{content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.cost-split{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.cost-split span span{color:var(--grey-1)}
.cmp{width:100%;border-collapse:collapse;margin-top:clamp(34px,4.4vw,60px);font-variant-numeric:tabular-nums}
.cmp caption{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);padding-bottom:12px}
.cmp thead th{text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:500;padding:0 0 10px 14px;border-bottom:1px solid var(--line);vertical-align:bottom}
.cmp thead th:first-child{text-align:left;padding-left:0}
.cmp tbody th{text-align:left;font-weight:600;font-size:14px;color:var(--white);padding:7px 14px 7px 0;border-bottom:1px solid var(--line);width:44%}
.cmp tbody th .cost-bar{margin-top:5px;height:2px}
.cmp td{text-align:right;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--grey-1);padding:7px 0 7px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.cmp tr.kg th,.cmp tr.kg td{color:var(--red)}
.cmp tr.kg .cost-bar i{background:var(--red)}
.cost-inc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);margin-top:clamp(8px,1.4vw,18px)}
.cost-inc h3{margin:0 0 12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:500}
.cost-inc ul{margin:0;padding:0;list-style:none;color:var(--grey-1);font-size:14px;line-height:1.55}
.cost-inc li{padding:5px 0;border-bottom:1px solid var(--line)}
.cost-inc .team{columns:2;column-gap:clamp(16px,2vw,28px)}
.cost-inc .team li{break-inside:avoid}
.cost-inc .kit b{color:var(--white);font-weight:600;margin-right:6px}
.cost-foot{margin-top:clamp(18px,2.4vw,28px);max-width:80ch}
@media (max-width:640px){
  .cost-inc{grid-template-columns:1fr}
  .cmp tbody th{font-size:14px;width:auto}
  .cmp td{font-size:11.5px;padding-left:8px;letter-spacing:0}
  .cmp thead th{padding-left:8px;font-size:9px;letter-spacing:.08em}
}

/* ============================================================
   MAP
   ============================================================ */
.map-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,3vw,52px);align-items:stretch}
.map-stage{position:relative;border:1px solid var(--line);background:linear-gradient(160deg,#070707,#0d0d0d);padding:clamp(14px,2.4vw,34px);overflow:hidden}
.map-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(245,245,242,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,245,242,.035) 1px,transparent 1px);
  background-size:56px 56px;
}
.map-svg{width:100%;height:auto;display:block;position:relative;overflow:visible}
.map-svg .border{fill:rgba(245,245,242,.028);stroke:rgba(245,245,242,.5);stroke-width:2;stroke-dasharray:7 8;stroke-linejoin:round}
.map-svg .lake{fill:rgba(227,27,35,.07);stroke:rgba(227,27,35,.4);stroke-width:1.2;stroke-dasharray:4 5}
.pin{cursor:pointer}
.pin .halo{fill:var(--red);opacity:.16;transform-box:fill-box;transform-origin:center;animation:halo 2.8s ease-out infinite}
.pin:nth-of-type(2n) .halo{animation-delay:.6s}
.pin:nth-of-type(3n) .halo{animation-delay:1.2s}
@keyframes halo{0%{transform:scale(.5);opacity:.32}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.pin .core{fill:var(--red);transition:r .3s var(--ease)}
.pin .plabel{
  fill:rgba(245,245,242,.75);font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  transition:fill .3s;pointer-events:none;
}
.pin:hover .core,.pin.on .core{r:9}
.pin:hover .plabel,.pin.on .plabel{fill:var(--white)}
.pin.on .core{filter:drop-shadow(0 0 10px rgba(227,27,35,.9))}
.map-panel{border:1px solid var(--line);display:flex;flex-direction:column;min-height:420px}
.map-photo{position:relative;flex:1;overflow:hidden;background:#0a0a0a;min-height:240px}
.map-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:grayscale(1) contrast(1.08);transition:opacity .7s var(--ease),transform 9s linear,filter .7s;transform:scale(1.04);
}
.map-photo img.on{opacity:1;transform:scale(1.11);filter:grayscale(.25) contrast(1.05)}
.map-info{padding:clamp(16px,2vw,26px);border-top:1px solid var(--line)}
.map-info .mi-name{font-size:clamp(1.3rem,2.2vw,2rem);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1;margin:0 0 10px}
.map-info .mi-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.map-info .mi-tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;color:var(--grey-2)}
.map-info p{margin:0;color:var(--grey-1);font-size:14px;line-height:1.6}
.map-info .mi-meta{display:flex;gap:22px;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey-2);text-transform:uppercase;flex-wrap:wrap}
.map-info .mi-meta b{color:var(--red);font-weight:500}
.map-svg .tape{}
@media(max-width:900px){
  .map-svg .plabel{font-size:34px;letter-spacing:.08em}
  .map-svg .border{stroke-width:3}
}
.map-hint{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--grey-2);text-transform:uppercase;margin-top:14px;display:flex;gap:8px;align-items:center}

/* ============================================================
   BUILD YOUR LOCATION
   ============================================================ */
.build-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:end;margin-bottom:36px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:11px 18px;color:var(--grey-1);
  transition:border-color .3s,color .3s,background .3s,transform .3s;
}
.chip:hover{border-color:rgba(245,245,242,.45);color:var(--white)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip .cx{opacity:.5;margin-left:7px}
.board{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px;
}
.board .cell{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0a0a0a;opacity:0;transform:scale(.96);animation:cellIn .7s var(--ease) forwards}
@keyframes cellIn{to{opacity:1;transform:none}}
.board .cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s,transform 1.2s var(--ease)}
.board .cell:hover img{filter:grayscale(0);transform:scale(1.06)}
.board .cell .ctag{
  position:absolute;z-index:2;left:10px;bottom:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(5,5,5,.7);backdrop-filter:blur(6px);padding:5px 8px;color:var(--white);
}
.board-empty{
  grid-column:1/-1;border:1px dashed var(--line);padding:clamp(30px,6vw,70px);text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);
}
.board-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px}

/* ---------- link arrow ---------- */
.alink{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  border-bottom:1px solid var(--line);padding-bottom:8px;transition:color .3s,border-color .3s;
}
.alink .ar{transition:transform .35s var(--ease);color:var(--red)}
.alink:hover{color:var(--red);border-color:var(--red)}
.alink:hover .ar{transform:translateX(6px)}
.btn{
  display:inline-flex;align-items:center;gap:14px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding:18px 30px;border-radius:100px;transition:transform .35s var(--ease),box-shadow .35s,background .3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(227,27,35,.32)}
.btn.ghost{background:transparent;border:1px solid var(--white);color:var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--black);box-shadow:none}
.btn.inv{background:var(--white);color:var(--red)}

/* ============================================================
   CAST
   ============================================================ */
.scroller{display:flex;gap:12px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--red) transparent}
.scroller::-webkit-scrollbar{height:2px}
.scroller::-webkit-scrollbar-track{background:var(--line)}
.scroller::-webkit-scrollbar-thumb{background:var(--red)}
.cast-card{
  flex:0 0 clamp(210px,22vw,290px);scroll-snap-align:start;position:relative;
  aspect-ratio:3/4;overflow:hidden;background:#0a0a0a;border:1px solid var(--line);
}
.cast-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .6s,transform 1.4s var(--ease)}
.cast-card:hover img{filter:grayscale(0) brightness(1);transform:scale(1.07)}
.cast-card .cc-top{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.cast-card .cc-top .n{color:var(--red)}
.cast-card .cc-bot{
  position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 12px;
  background:linear-gradient(transparent,rgba(5,5,5,.92));
}
.cast-card .cc-bot .t{font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.cast-card .cc-bot .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--grey-2);margin-top:4px}

/* ---------- crew ---------- */
.crew{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.crew .cr{background:var(--black);padding:clamp(18px,2vw,28px);display:flex;justify-content:space-between;gap:16px;transition:background .4s}
.crew .cr:hover{background:var(--ink-2)}
.crew .cr .cn{font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:15px}
.crew .cr .cd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey-2);margin-top:5px;text-transform:uppercase}
.crew .cr .cq{font-family:var(--mono);font-size:12px;color:var(--red);white-space:nowrap}

/* ============================================================
   EQUIPMENT
   ============================================================ */
.eq{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.eq .col{background:var(--black);padding:clamp(20px,2.2vw,32px)}
.eq .col h4{margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;font-weight:500}
.eq ul{list-style:none;margin:0;padding:0}
.eq li{
  display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(245,245,242,.07);
  font-size:14px;letter-spacing:-.005em;color:var(--grey-1);transition:color .3s,padding-left .3s;
}
.eq li:hover{color:var(--white);padding-left:6px}
.eq li .tag{font-family:var(--mono);font-size:10px;color:var(--grey-2);letter-spacing:.1em;white-space:nowrap;align-self:center}
.eq li:last-child{border-bottom:0}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;position:relative}
.marq-track{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marq-item{
  display:inline-flex;align-items:center;gap:22px;padding:0 22px;
  font-size:clamp(1.1rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.025em;text-transform:uppercase;
  color:var(--grey-2);cursor:pointer;transition:color .3s;white-space:nowrap;
}
.marq-item:hover,.marq-item.on{color:var(--white)}
.marq-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.5}
.extra-panel{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px,3vw,44px);align-items:center;
  border:1px solid var(--line);border-top:0;padding:clamp(20px,3vw,40px);background:var(--ink);
}
.extra-panel .ep-photo{aspect-ratio:16/10;overflow:hidden;background:#0a0a0a}
.extra-panel .ep-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.extra-panel h3{margin:0 0 12px;font-size:clamp(1.4rem,3vw,2.6rem);text-transform:uppercase;letter-spacing:-.035em;font-weight:700;line-height:1}
.extra-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.extra-list b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;font-weight:400;border:1px solid var(--line);padding:6px 10px;color:var(--grey-1)}

/* ============================================================
   RED BREAK
   ============================================================ */
.red-break{background:var(--red);color:#fff;min-height:100svh;display:flex;align-items:center;padding-block:clamp(80px,12vh,140px);position:relative;overflow:hidden}
.red-break::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 50%,transparent,rgba(0,0,0,.22));
}
.red-break .wrap{position:relative;z-index:2;width:100%}
.rb-q{font-family:var(--serif);font-size:clamp(1.3rem,3vw,2.4rem);font-style:italic;opacity:.86;margin:0 0 clamp(18px,3vw,36px)}
.rb-h{font-size:clamp(3rem,13vw,13rem);line-height:.82;letter-spacing:-.055em;font-weight:800;text-transform:uppercase;margin:0}
.rb-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-top:clamp(28px,5vw,60px);border-top:1px solid rgba(255,255,255,.28);padding-top:24px}
.rb-foot p{margin:0;max-width:44ch;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.5;opacity:.92}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.who{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,70px);align-items:end}
.who-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0a0a}
.who-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.who-photo .tagline{
  position:absolute;z-index:2;left:0;bottom:0;background:var(--red);color:#fff;padding:10px 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.bts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.bts img,.bts .ph{aspect-ratio:1;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.bts img:hover{filter:grayscale(0)}

/* ============================================================
   PIPELINE
   ============================================================ */
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pipe .step{background:var(--black);padding:clamp(20px,2.2vw,34px);min-height:200px;display:flex;flex-direction:column;position:relative;transition:background .4s}
.pipe .step:hover{background:var(--ink-2)}
.pipe .step .sn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);margin-bottom:auto}
.pipe .step h4{margin:24px 0 8px;font-size:clamp(1.05rem,1.5vw,1.4rem);text-transform:uppercase;letter-spacing:-.025em;font-weight:600}
.pipe .step p{margin:0;font-size:13.5px;line-height:1.55;color:var(--grey-1)}
.pipe .step::after{
  content:"";position:absolute;right:-1px;top:50%;width:0;height:1px;background:var(--red);
  transition:width .5s var(--ease);
}
.pipe.in .step::after{width:2px}

/* ---------- offers ---------- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.offer{background:var(--black);padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;gap:16px;transition:background .45s}
.offer:hover{background:var(--ink-2)}
.offer .on{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red)}
.offer h4{margin:0;font-size:clamp(1.2rem,2vw,1.8rem);text-transform:uppercase;letter-spacing:-.03em;font-weight:700;line-height:1}
.offer p{margin:0;color:var(--grey-1);font-size:14.5px;line-height:1.6;flex:1}
.offer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.offer li{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--grey-2);text-transform:uppercase;display:flex;gap:9px}
.offer li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);margin-top:6px;flex:0 0 auto}

/* ============================================================
   CASES
   ============================================================ */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,22px)}
.case{position:relative;border:1px solid var(--line);overflow:hidden;background:#080808;transition:border-color .45s}
.case:hover{border-color:rgba(245,245,242,.34)}
.case .cph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a}
.case .cph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.8);transition:filter .7s,transform 1.5s var(--ease)}
.case:hover .cph img{filter:grayscale(0) brightness(.95);transform:scale(1.06)}
.case .play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.case .play i{
  width:64px;height:64px;border:1px solid rgba(245,245,242,.6);border-radius:50%;display:grid;place-items:center;
  backdrop-filter:blur(3px);transition:background .4s,border-color .4s,transform .4s var(--ease);color:var(--white);
}
.case:hover .play i{background:var(--red);border-color:var(--red);transform:scale(1.08)}
.case .cmeta{padding:clamp(16px,2vw,26px);display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.case .cmeta h4{margin:0 0 6px;font-size:clamp(1.1rem,1.8vw,1.6rem);text-transform:uppercase;letter-spacing:-.03em;font-weight:700}
.case .cmeta .cs{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--grey-2);text-transform:uppercase}
.case .cstats{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--grey-2);text-transform:uppercase}
.case .cstats b{color:var(--red);font-weight:500}
.case .tape{
  position:absolute;z-index:3;top:14px;left:14px;background:var(--red);color:#fff;padding:5px 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{
  width:100%;display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding:clamp(20px,2.4vw,32px) 0;text-align:left;
}
.qa .qn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);flex:0 0 auto}
.qa .qt{flex:1;font-size:clamp(1rem,1.9vw,1.6rem);text-transform:uppercase;letter-spacing:-.025em;font-weight:600;transition:color .3s,transform .4s var(--ease)}
.qa button:hover .qt{color:var(--red);transform:translateX(4px)}
.qa .qi{flex:0 0 auto;width:22px;height:22px;position:relative}
.qa .qi::before,.qa .qi::after{content:"";position:absolute;background:var(--white);left:50%;top:50%;transition:transform .4s var(--ease),background .3s}
.qa .qi::before{width:15px;height:1px;transform:translate(-50%,-50%)}
.qa .qi::after{width:1px;height:15px;transform:translate(-50%,-50%)}
.qa.open .qi::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa.open .qi::before{background:var(--red)}
.qa .ans{overflow:hidden;height:0;transition:height .5s var(--ease)}
.qa .ans-in{padding:0 0 clamp(22px,2.4vw,34px) 0;max-width:74ch;color:var(--grey-1);font-size:15px;line-height:1.68}
@media(min-width:900px){.qa .ans-in{padding-left:calc(11px + 3vw + 30px)}}

/* ============================================================
   FINAL
   ============================================================ */
.final{min-height:100svh;display:flex;align-items:center;text-align:center;padding-block:clamp(80px,12vh,140px);position:relative;overflow:hidden}
.final .fadeline{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);
  background:repeating-linear-gradient(var(--red) 0 6px,transparent 6px 14px);opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 55%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 55%,transparent 92%);}
.final .wrap{position:relative;z-index:2}
.final h2{font-size:clamp(1.9rem,6.4vw,6.4rem);line-height:.95;letter-spacing:-.045em;font-weight:700;text-transform:uppercase;margin:0 auto;max-width:16ch}
.final .fq{font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,4rem);font-style:italic;color:var(--red);margin:clamp(28px,5vw,60px) 0 clamp(24px,4vw,44px);line-height:1.05}
.final p{max-width:52ch;margin:clamp(20px,3vw,34px) auto 0;color:var(--grey-1);font-size:clamp(.95rem,1.3vw,1.15rem)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--white);
  font-family:var(--sans);font-size:16px;padding:11px 0;transition:border-color .3s;
}
.field select option{background:var(--ink);color:var(--white)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--red)}
.field textarea{resize:vertical;min-height:92px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.contact-side dl{margin:0;display:grid;gap:22px}
.contact-side dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);margin-bottom:5px}
.contact-side dd{margin:0;font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:-.02em}
.contact-side dd a:hover{color:var(--red)}

footer{border-top:1px solid var(--line);padding:34px 0;margin-top:clamp(60px,8vw,120px)}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.foot-row a:hover{color:var(--red)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:9500;background:rgba(3,3,3,.96);backdrop-filter:blur(10px);display:none;flex-direction:column}
.lb.on{display:flex}
.lb-bar{display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.lb-bar button{color:var(--grey-2);transition:color .3s}
.lb-bar button:hover{color:var(--red)}
.lb-body{flex:1;overflow:auto;padding:clamp(14px,2.4vw,32px) var(--pad)}
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.lb-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.lb-grid img:hover{filter:none}

/* ---------- broken image fallback ---------- */
.ph{position:relative;width:100%;height:100%;min-height:110px;background:linear-gradient(135deg,#101010,#1c1c1c 45%,#0b0b0b);position:relative}
.ph::after{
  content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(245,245,242,.28);text-transform:uppercase;text-align:center;padding:10px;
}
img.broken{visibility:hidden}

/* ---------- rail clearance + absolute fallbacks ---------- */
@media(min-width:1181px){
  .wrap{padding-left:calc(var(--pad) + 124px)}
  .hero-inner{padding-left:calc(var(--pad) + 124px)}
  .lb .lb-bar,.lb .lb-body{padding-left:var(--pad)}
}
.hero .frames .ph,.map-photo .ph{position:absolute;inset:0}
.rail.on-red a{color:rgba(255,255,255,.75);opacity:.8}
.rail.on-red a.active{color:#fff;opacity:1}
.rail.on-red a .tick{background:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .rail{display:none}
  .eq{grid-template-columns:repeat(2,1fr)}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .intro-grid,.map-wrap,.build-head,.who,.contact,.extra-panel{grid-template-columns:1fr}
  .why,.offers,.cases,.crew{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact{border-right:0;padding-right:0;border-bottom:1px solid var(--line)}
  .fact:nth-child(odd){padding-right:18px}
  .cost-row{grid-template-columns:1fr}
  .cost-note{text-align:left}
  .rec{top:auto;bottom:16px;right:16px}
  .cta-top{display:none}
  .who-photo{aspect-ratio:3/2}
}
@media(max-width:620px){
  .h-xl{font-size:clamp(1.4rem,7.2vw,2.4rem)}
  .h-xxl{font-size:clamp(1.7rem,9vw,3rem)}
  .h-l{font-size:clamp(1.15rem,5.4vw,1.8rem)}
  .h-xl,.h-xxl,.h-l,.bigq h2{overflow-wrap:anywhere}

  .board{grid-template-columns:repeat(2,1fr)}
  .eq{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .fact{padding-right:0}
  .grid2{grid-template-columns:1fr}
  .hero-meta{gap:16px}
  .brand span{display:none}
  .cost-num{font-size:clamp(3.2rem,17vw,5rem)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero .blackout{display:none}
  .hero-svg .hpath{stroke-dasharray:6 9;stroke-dashoffset:0}
  .thread .draw{stroke-dasharray:7 9;stroke-dashoffset:0}
}

/* ============================================================
   CONTENT BLOCKS — v2
   ============================================================ */
.qlist{display:grid;gap:0;border-top:1px solid var(--line);margin-top:clamp(26px,4vw,48px)}
.qlist li{
  list-style:none;display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);
  padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.05rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.025em;font-weight:500;
  color:var(--grey-1);transition:color .35s,padding-left .35s;
}
.qlist li:hover{color:var(--white);padding-left:8px}
.qlist li i{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red);font-style:normal;flex:0 0 auto}

.tex-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3vw,34px)}
.tex-strip b{
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:10px 16px;border-radius:100px;color:var(--grey-1);
}

.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trust article{background:var(--black);padding:clamp(22px,2.6vw,40px);transition:background .45s}
.trust article:hover{background:var(--ink-2)}
.trust .tn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red)}
.trust h3{margin:18px 0 14px;font-size:clamp(1.15rem,2vw,1.7rem);text-transform:uppercase;letter-spacing:-.03em;font-weight:700;line-height:1}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.trust li{color:var(--grey-1);font-size:14.5px;line-height:1.5;display:flex;gap:10px}
.trust li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);margin-top:8px;flex:0 0 auto}

.svc{display:grid;grid-template-columns:repeat(2,1fr) ;gap:0 clamp(20px,4vw,70px);border-top:1px solid var(--line)}
.svc div{
  display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  font-size:clamp(.95rem,1.5vw,1.2rem);letter-spacing:-.015em;color:var(--grey-1);transition:color .3s,padding-left .3s;
}
.svc div:hover{color:var(--white);padding-left:6px}
.svc i{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--red);font-style:normal;flex:0 0 auto}

.dept{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,44px)}
.dept b{
  background:var(--black);flex:1 1 190px;padding:clamp(18px,2vw,30px);font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);
  text-transform:uppercase;letter-spacing:-.02em;transition:background .4s,color .3s;
}
.dept b:hover{background:var(--ink-2);color:var(--red)}

.map-list{max-height:190px;overflow:auto;margin-top:14px;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--red) transparent}
.map-list::-webkit-scrollbar{width:2px}
.map-list::-webkit-scrollbar-thumb{background:var(--red)}
.map-list button{
  display:flex;width:100%;justify-content:space-between;gap:12px;text-align:left;padding:7px 0;
  border-bottom:1px solid rgba(245,245,242,.07);font-size:13.5px;color:var(--grey-1);transition:color .25s,padding-left .25s;
}
.map-list button:hover,.map-list button.on{color:var(--red);padding-left:5px}
.map-list button span{font-family:var(--mono);font-size:9.5px;color:var(--grey-2);letter-spacing:.12em;align-self:center}

.case-tpl{border:1px solid var(--line);padding:clamp(24px,4vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.case-tpl ol{margin:0;padding:0;list-style:none;counter-reset:c}
.case-tpl li{
  counter-increment:c;display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:-.02em;color:var(--grey-1);
}
.case-tpl li::before{content:"0" counter(c);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--red);padding-top:5px}
.case-tpl li:last-child{border-bottom:0}
.films-stats{display:flex;flex-wrap:wrap;gap:14px clamp(28px,5vw,80px);margin-top:clamp(26px,3.4vw,44px)}
.films-stats div{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2)}
.films-stats b{font-family:var(--sans,inherit);font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.05em;color:var(--white);line-height:1}
.films-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(22px,3vw,36px)}
.films-grid article{background:var(--black);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:10px;transition:background .45s}
.films-grid article:hover{background:var(--ink-2)}
.films-grid .fm{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.films-grid h3{margin:4px 0 0;font-size:clamp(1rem,1.3vw,1.2rem);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.films-grid p{margin:0;color:var(--grey-1);font-size:13.5px;line-height:1.55}
.films-grid .fc{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey-2)}
@media (max-width:1000px){.films-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.films-grid{grid-template-columns:1fr}}
.soon{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-2);border:1px solid var(--line);border-radius:100px;padding:8px 14px;
}
.soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.8s steps(1,end) infinite}

.cast-card .cc-bot .t{font-family:var(--mono);font-size:10px;letter-spacing:.16em}
.hero-meta b{font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .trust,.svc,.case-tpl{grid-template-columns:1fr}
  .dept b{flex:1 1 100%}
}
.pipe.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:1180px){.pipe.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pipe.six{grid-template-columns:1fr}}
.marq-track.rev{animation-direction:reverse;animation-duration:54s}
.marq-item{cursor:default}
.lb-grid figure{margin:0;position:relative}
.lb-grid figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.lb-grid figure:hover img{filter:none}
.lb-grid figcaption{
  position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(5,5,5,.72);backdrop-filter:blur(6px);padding:5px 8px;color:var(--white);
}
.map-panel{min-height:520px}
.mi-meta{margin-top:0 !important}


/* ============================================================
   REVISION PASS — v3
   ============================================================ */

/* ---- italic → Courier New everywhere ---- */
:root{--serif:'Courier New',Courier,ui-monospace,monospace}
.serif,.serif em,.rb-q,.final .fq,.intro-quote,.intro-quote .red{font-style:normal !important}
.serif{letter-spacing:-.01em}
.h-xl.serif,.h-xxl.serif{font-size:clamp(1.4rem,3.4vw,3rem);line-height:1.18;letter-spacing:-.02em}
.h-l.serif{font-size:clamp(1.25rem,2.6vw,2.2rem);line-height:1.25}
.rb-q{font-size:clamp(1rem,2vw,1.6rem);letter-spacing:.01em}
.final .fq{font-size:clamp(1.3rem,3.4vw,3rem);letter-spacing:-.01em}

/* ============================================================
   ROUTE — the red dotted line through the first half
   ============================================================ */
#routeWrap,#routeTop{position:absolute;left:0;width:100%;pointer-events:none}
#routeWrap{z-index:0}
#routeTop{z-index:700}
#routeWrap svg,#routeTop svg{width:100%;height:100%;display:block;overflow:visible}
#routeTop{overflow:hidden}
#routeFg{fill:none;stroke:var(--red);stroke-width:1.7;stroke-dasharray:7 9;stroke-linecap:round}
#routeGhost{fill:none;stroke:rgba(227,27,35,.07);stroke-width:1.2;stroke-dasharray:4 12}
#routeArrow{pointer-events:none;cursor:pointer;transition:opacity .6s}
#routeArrow.at{pointer-events:auto}
#routeArrow:focus,#routeArrow:focus-visible,#routeArrow *:focus{outline:none}
#routeArrow.at:focus-visible .ring{opacity:1;stroke-width:2}
#routeArrow.hide{opacity:0;pointer-events:none}
#routeArrow.gone{opacity:0 !important;pointer-events:none}
#routeArrow .ahit{fill:transparent}
#routeArrow .head{fill:var(--red)}
#routeArrow .ring{fill:none;stroke:var(--red);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .4s}
#routeArrow.at .ring{opacity:.9}
#routeArrow .ring2{fill:none;stroke:var(--red);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
#routeArrow.at .ring2{animation:arrPulse 2.2s ease-out infinite}
@keyframes arrPulse{0%{transform:scale(.7);opacity:.55}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}
#routeArrow:hover .head{filter:drop-shadow(0 0 8px rgba(227,27,35,.9))}
.route-tip{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);opacity:0;transition:opacity .4s;white-space:nowrap;
}
#routeArrow:hover + .route-tip{opacity:1}

/* ---- hero map seed ---- */
.hero-map{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:11vh;z-index:6;pointer-events:none}
.hero-map svg{width:clamp(180px,23vw,320px);height:auto;overflow:visible}
.hero-map .mp{
  fill:none;stroke:rgba(245,245,242,.5);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:mapDraw 2s .35s cubic-bezier(.62,.02,.28,1) forwards,
            mapDots .01s 2.35s forwards,
            mapOut 1.1s 3.3s ease forwards;
}
@keyframes mapDraw{to{stroke-dashoffset:0}}
@keyframes mapDots{to{stroke-dasharray:.012 .014}}
@keyframes mapOut{to{opacity:0}}
.hero-map .mc{
  fill:var(--red);transform-box:fill-box;transform-origin:center;transform:scale(0);
  animation:seed .55s 2.4s var(--ease) forwards;
}
.hero-map .mch{
  fill:none;stroke:var(--red);stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:seedRing 2.2s 2.7s ease-out infinite;
}
@keyframes seedRing{0%{transform:scale(.6);opacity:.6}70%{transform:scale(3);opacity:0}100%{opacity:0}}

/* ============================================================
   01 — questions as passing thoughts
   ============================================================ */
.thoughts{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,52px)}
.thought{
  font-size:clamp(1rem,1.55vw,1.35rem);line-height:1.25;letter-spacing:-.015em;color:var(--grey-2);
  opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease),color .4s;
  display:flex;align-items:baseline;gap:14px;max-width:52ch;
}
.thought::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.55;flex:0 0 auto}
.thought.in{opacity:1;transform:none}
.thought:nth-child(even){margin-left:clamp(0px,6vw,90px)}
.thought:hover{color:var(--white)}
.stopline{
  font-size:clamp(1.15rem,2.4vw,2.1rem);line-height:1.2;letter-spacing:-.025em;font-weight:500;
  max-width:34ch;margin:clamp(34px,5vw,64px) 0 0;display:flex;align-items:flex-start;gap:16px;
}
.stopline .sa{color:var(--red);flex:0 0 auto;animation:bob 2.2s ease-in-out infinite;display:inline-block}
@media(min-width:761px){.turn .arrow,.stopline .sa{display:none}}

/* ============================================================
   02 — problem rotator
   ============================================================ */
.prob{
  border:1px solid var(--line);background:var(--ink);position:relative;overflow:hidden;
  min-height:clamp(240px,30vw,360px);display:grid;place-items:center;padding:clamp(24px,4vw,56px);
}
.prob-item{
  position:absolute;inset:0;display:grid;place-items:center;gap:22px;padding:clamp(24px,4vw,56px);
  opacity:0;transform:translateY(22px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);
  text-align:center;
}
.prob-item.on{opacity:1;transform:none}
.prob-item svg{width:clamp(70px,9vw,120px);height:auto;stroke:var(--red);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prob-item h3{margin:0;font-size:clamp(1.5rem,4.4vw,3.4rem);text-transform:uppercase;letter-spacing:-.04em;font-weight:700;line-height:1}
.prob-item p{margin:0;color:var(--grey-1);font-size:15px;line-height:1.6;max-width:40ch}
.prob-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.prob-dots button{width:22px;height:2px;background:rgba(245,245,242,.22);transition:background .4s,width .4s;cursor:pointer}
.prob-dots button.on{background:var(--red);width:36px}
.solution{
  margin-top:clamp(28px,4vw,52px);opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.solution.in{opacity:1;transform:none}
.solution p{margin:0;font-size:clamp(1.05rem,1.7vw,1.45rem);color:var(--grey-1);max-width:56ch;line-height:1.45}
.solution b{display:block;margin-top:14px;font-size:clamp(1.6rem,4.2vw,3.2rem);letter-spacing:-.04em;
  text-transform:uppercase;font-weight:700;color:var(--white)}
.solution b i{color:var(--red);font-style:normal}

/* ============================================================
   05 — bigger scout CTA
   ============================================================ */
.scout{
  margin-top:clamp(30px,4vw,54px);display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,44px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(24px,3vw,40px);
}
.scout h2,.scout h3{margin:0 0 10px;font-size:clamp(1.4rem,3vw,2.4rem);text-transform:uppercase;letter-spacing:-.035em;font-weight:700;line-height:1.05}
.scout p{margin:0;color:var(--grey-1);font-size:15px;max-width:44ch}
.btn.lg{padding:22px 38px;font-size:13px;letter-spacing:.2em}

/* ============================================================
   06 — casting coverflow
   ============================================================ */
.cf-wrap{position:relative;margin-top:clamp(24px,3vw,44px)}
.cf{position:relative;height:clamp(330px,42vw,560px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cf-item{
  position:absolute;left:50%;top:50%;width:clamp(195px,20.8vw,312px);aspect-ratio:3/4;
  border:1px solid var(--line);background:#0a0a0a;overflow:hidden;cursor:pointer;
  transform:translate(-50%,-50%);transform-origin:center;
  transition:transform .65s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
  will-change:transform;
}
.cf-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.cf-item .cn{
  position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--white);
  text-shadow:0 1px 8px rgba(0,0,0,.9);opacity:0;transition:opacity .5s;
}
.cf-item.c0 .cn{opacity:1}
.cf-item.c0{filter:none;opacity:1;z-index:6;border-color:rgba(245,245,242,.35)}
.cf-item:hover img{filter:grayscale(0) contrast(1.02)}
.cf-item.c0:hover{border-color:var(--red)}
.cf-item.c1{filter:brightness(.62);opacity:.95;z-index:5}
.cf-item.c2{filter:brightness(.34);opacity:.7;z-index:4}
.cf-item.cx{opacity:0;z-index:1;pointer-events:none}
.cf-side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:8;
  width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--grey-1);background:rgba(5,5,5,.55);backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease);
}
.cf-side:hover{border-color:var(--red);color:#fff;background:var(--red)}
.cf-side.prev{left:clamp(2px,1.5vw,26px)}
.cf-side.next{right:clamp(2px,1.5vw,26px)}
.cf-side.prev:hover{transform:translateY(-50%) translateX(-3px)}
.cf-side.next:hover{transform:translateY(-50%) translateX(3px)}
.cf-count{display:block;text-align:center;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--grey-2)}

/* ============================================================
   07 — equipment departments as links
   ============================================================ */
.dept a{
  background:var(--black);flex:1 1 190px;padding:clamp(18px,2vw,30px);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.3rem);text-transform:uppercase;letter-spacing:-.02em;
  transition:background .4s,color .3s;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.dept a:hover{background:var(--ink-2);color:var(--red)}
.dept a::after{content:"↗";font-family:var(--mono);font-size:12px;color:var(--grey-2);transition:color .3s,transform .3s}
.dept a:hover::after{color:var(--red);transform:translate(2px,-2px)}

/* ============================================================
   08 → 09 — big question + red reveal
   ============================================================ */
.bigq{
  text-align:center;padding:clamp(70px,12vh,150px) 0 clamp(50px,8vh,110px);
}
.bigq h2{
  margin:0 auto;max-width:22ch;font-size:clamp(1.8rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.04em;
  font-weight:700;text-transform:uppercase;
}
.bigq .down{
  margin-top:clamp(26px,4vw,48px);display:inline-flex;width:52px;height:52px;border:1px solid var(--red);
  border-radius:50%;align-items:center;justify-content:center;color:var(--red);font-size:20px;
  animation:bob 2.2s ease-in-out infinite;
}
.red-break{--ox:50%;clip-path:circle(0% at var(--ox) 0%);transition:clip-path .45s ease-in}
.red-break.open{clip-path:circle(160% at var(--ox) 0%);transition:clip-path 1.6s cubic-bezier(.5,0,.2,1)}
.rb-h span{display:inline-block;opacity:0;transform:translateY(.5em);}
.red-break.open .rb-h span{animation:letter .8s var(--ease) forwards}

/* ============================================================
   14 — process as a route
   ============================================================ */
.proute{position:relative;margin-top:clamp(24px,3vw,44px)}
.proute svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.proute svg path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.proute.go svg path{animation:pdraw .6s var(--d) var(--ease) forwards,pdots .01s calc(var(--d) + .6s) forwards}
@keyframes pdraw{to{stroke-dashoffset:0}}
@keyframes pdots{to{stroke-dasharray:5 8;stroke-dashoffset:0}}
.proute svg .ph{fill:var(--red);opacity:0}
.proute.go svg .ph{animation:phin .3s var(--d) ease forwards}
@keyframes phin{to{opacity:1}}
.prow{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,26px);align-items:start;position:relative;z-index:1}
.pstep{
  background:var(--black);border:1px solid var(--line);padding:clamp(14px,1.4vw,22px);
  opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s;
}
.proute.go .pstep{opacity:1;transform:none}
.pstep:hover{border-color:rgba(245,245,242,.55);background:var(--ink-2)}
.pstep.up{margin-top:0}
.pstep.dn{margin-top:clamp(90px,13vw,190px)}
.pstep .pn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red)}
.pstep h4{margin:14px 0 8px;font-size:clamp(.95rem,1.15vw,1.15rem);text-transform:uppercase;letter-spacing:-.02em;font-weight:600;line-height:1.1}
.pstep p{margin:0;font-size:12.5px;line-height:1.5;color:var(--grey-1)}

/* ============================================================
   17 — mission video backdrop
   ============================================================ */
.fvideo{position:absolute;inset:0;overflow:hidden;z-index:0;
  background:#050505 center/cover no-repeat}
.fvideo video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover;pointer-events:none;
}
.fvideo iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none;
}
.fvideo::after{content:"";position:absolute;inset:0;background:rgba(5,5,5,.78)}
.final .wrap{position:relative;z-index:2}
.final .fadeline{z-index:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1180px){
  .prow{grid-template-columns:repeat(3,1fr);gap:14px}
  .pstep.dn{margin-top:clamp(50px,8vw,110px)}
}
@media(max-width:760px){
  .rec{display:none}
  .cf-side{width:40px;height:40px}
  .prow{grid-template-columns:1fr;gap:12px}
  .pstep.dn,.pstep.up{margin-top:0;margin-left:0}
  .proute svg{display:none}
  #routeWrap,#routeTop{display:none}
  .thought:nth-child(even){margin-left:0}
  .cf-item{width:clamp(140px,44vw,200px)}
}
@media(prefers-reduced-motion:reduce){
  .prob-item.on{opacity:1}
  .red-break{clip-path:none}
  .rb-h span{opacity:1;transform:none}
}

body{position:relative}

/* ============================================================
   SEO VERSION ADDITIONS (10.2026)
   Visually hidden text, crawlable links, inner pages.
   ============================================================ */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-title .hw{display:inline}

/* language switch as links on inner pages */
.lang a{padding:6px 8px;color:var(--grey-2);transition:color .25s}
.lang a.on{color:var(--white)}
.lang a:hover{color:var(--red)}

/* map panel link + list of regions under the map */
.mi-link{margin-top:16px;font-size:10px;letter-spacing:.16em}
.map-regions{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-top:clamp(18px,2vw,28px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);
}
.map-regions a{color:var(--grey-1);transition:color .3s}
.map-regions a:hover{color:var(--red)}
.map-regions a i{font-style:normal;color:var(--red);margin-right:6px}
.map-regions .all{color:var(--white);border-bottom:1px solid var(--line);padding-bottom:4px}

/* lightbox link */
.lb-actions{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.lb-link{color:var(--grey-1);transition:color .3s}
.lb-link:hover{color:var(--red)}
.lb-link:empty{display:none}

/* footer navigation */
.foot-nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px 30px;margin-bottom:34px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);
}
.foot-nav b{display:block;color:var(--red);font-weight:500;margin-bottom:10px}
.foot-nav a{display:block;padding:3px 0;color:var(--grey-1);transition:color .3s}
.foot-nav a:hover{color:var(--red)}

/* ---------- inner pages ---------- */
.page .sec:first-of-type{padding-top:clamp(120px,18vh,200px)}
.crumbs{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(22px,3vw,36px);padding:0;list-style:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);
}
.crumbs li+li::before{content:"/";color:var(--red);margin-right:8px}
.crumbs a:hover{color:var(--red)}
.page-lead{margin-top:clamp(20px,2.4vw,32px)}
.page-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:clamp(22px,3vw,36px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);
}
.page-meta b{color:var(--red);font-weight:500}
.updated{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);margin-top:clamp(28px,4vw,48px)}

.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(26px,3vw,44px) clamp(14px,1.6vw,24px)}
.loc-card{margin:0;scroll-margin-top:90px}
.loc-card .ph-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0a0a}
.loc-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s,transform 1.2s var(--ease)}
.loc-card:hover img{filter:grayscale(0);transform:scale(1.05)}
.loc-card .ln{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#fff;background:rgba(5,5,5,.6);padding:4px 7px}
.loc-card .lt{display:block;margin:16px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.loc-card h2,.loc-card h3{margin:0 0 10px;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.15;letter-spacing:-.02em;font-weight:600;text-transform:uppercase}
.loc-card p{margin:0;color:var(--grey-1);font-size:14.5px;line-height:1.62;max-width:52ch}
.loc-card h3 a:hover{color:var(--red)}

.region-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:clamp(14px,1.6vw,24px)}
.region-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);transition:border-color .4s}
.region-card:hover{border-color:var(--red)}
.region-card .ph-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0a0a}
.region-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s,transform 1.2s var(--ease)}
.region-card:hover img{filter:grayscale(0);transform:scale(1.05)}
.region-card .rc-in{padding:clamp(16px,2vw,24px)}
.region-card .rc-n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--red)}
.region-card h2{margin:8px 0 10px;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.035em;font-weight:700;text-transform:uppercase}
.region-card h2 a::after{content:"";position:absolute;inset:0}
.region-card p{margin:0;color:var(--grey-1);font-size:14px;line-height:1.6}
.region-card .rc-list{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);line-height:1.9}

.type-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(22px,3vw,40px)}
.type-index h3{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:500}
.type-index ul{margin:0;padding:0;list-style:none}
.type-index li{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.type-index li a:hover{color:var(--red)}
.type-index li span{color:var(--grey-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}

.region-nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.region-nav a{color:var(--grey-1);transition:color .3s}
.region-nav a i{font-style:normal;color:var(--red);margin-right:6px}
.region-nav a:hover,.region-nav a[aria-current]{color:var(--white)}
.region-nav a[aria-current]{border-bottom:1px solid var(--red);padding-bottom:4px}

.page-404{min-height:100svh;display:flex;align-items:center}
.qa .qh{margin:0;font:inherit}

/* ---------- article pages (crew, films) ---------- */
.article .art-sec{margin-bottom:clamp(44px,6vw,80px)}
.article .art-sec h2{margin-bottom:clamp(16px,2vw,26px);max-width:24ch}
.art-body p{margin:0 0 1em;color:var(--grey-1);font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.65;max-width:70ch}
.art-body p:last-child{margin-bottom:0}
.faq-static .qa-static{display:flex;align-items:baseline;gap:clamp(11px,3vw,30px);padding:clamp(18px,2.4vw,28px) 0 10px}
.faq-static .ans-static{padding:0 0 clamp(22px,2.4vw,34px)}
.faq-static .ans-in{max-width:74ch;color:var(--grey-1);font-size:15px;line-height:1.68}
@media(min-width:900px){.faq-static .ans-in{padding-left:calc(11px + 3vw + 30px)}}
.film-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;margin-top:clamp(18px,2vw,28px)}
.film-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:500;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.film-table td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--grey-1)}
.film-table td:first-child{color:var(--white);font-weight:600}
.film-table a{color:var(--white);border-bottom:1px solid var(--line)}
.film-table a:hover{color:var(--red);border-color:var(--red)}
.film-table .src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){
  .film-table thead{display:none}
  .film-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .film-table td{display:block;border:0;padding:3px 0}
  .film-table td::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);margin-bottom:2px}
}
.dist-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:clamp(18px,2vw,28px)}
.dist-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:500;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.dist-table td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);color:var(--grey-1)}
.dist-table td:first-child{color:var(--white)}
.dist-table td:nth-child(n+2){font-family:var(--mono);font-size:12px;letter-spacing:.06em;white-space:nowrap}
.dist-note{margin-top:12px}

.shot-list{margin:0;padding:0;list-style:none;max-width:78ch}
.shot-list li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--grey-1);font-size:14.5px;line-height:1.55}
.shot-list li b{color:var(--white);font-weight:600}
.case-tpl .alink{margin-top:6px}

/* ---------- rail: all section titles visible (10.2026) ---------- */
.rail a{color:var(--white);opacity:.85;padding:3px 9px 3px 7px;margin-left:-7px;border-radius:2px;transition:opacity .3s,color .3s,background .25s}
.rail a .rlabel{opacity:1;transform:none}
.rail a span:first-child{color:var(--grey-2)}
.rail:hover a{opacity:.85}
.rail a.active{color:var(--red);opacity:1}
.rail a.active span:first-child{color:var(--red)}
.rail a:hover{background:var(--white);color:var(--black);opacity:1}
.rail a:hover span:first-child{color:var(--black)}
.rail a.active:hover{color:var(--red)}
.rail a.active:hover span:first-child{color:var(--red)}
.rail.on-red a{color:#fff;opacity:.85}
.rail.on-red a span:first-child{color:rgba(255,255,255,.6)}
.rail.on-red a.active{color:#fff;opacity:1}
.rail.on-red a:hover{background:#fff;color:var(--black)}
.rail.on-red a:hover span:first-child{color:var(--black)}

/* ---------- back to the main page (inner pages) ---------- */
.back-fix{position:fixed;top:84px;left:0;right:0;z-index:790;pointer-events:none}
.back-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;pointer-events:auto;
  letter-spacing:.18em;text-transform:uppercase;color:var(--white);border:1px solid rgba(245,245,242,.24);padding:10px 16px;border-radius:100px;
  background:rgba(5,5,5,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .3s,background .3s,color .3s}
@media (max-width:760px){.back-fix{top:72px}}
.back-link .ar{color:var(--red);transition:transform .35s var(--ease)}
.back-link:hover{border-color:var(--white);background:var(--white);color:var(--black)}
.back-link:hover .ar{transform:translateX(-4px)}
.back-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px;padding-top:clamp(10px,2vw,30px)}

/* ---------- comparison pages ---------- */
.cmp.static .cost-bar i{transition:none}
.cmp.static thead th:nth-child(n+2){white-space:nowrap}
.cmp-links{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.look{scroll-margin-top:140px}
.look-intro{color:var(--grey-1);font-size:clamp(15px,1.2vw,17px);line-height:1.65;max-width:72ch;margin:0 0 clamp(18px,2vw,26px)}
.look-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.look-grid .ph-wrap{display:block}
.look-miss{margin-top:18px;max-width:72ch}
@media (max-width:640px){.cmp .hide-s{display:none}.cmp.static thead th:nth-child(n+2){white-space:normal}.cmp.static tbody th{width:38%}}
.src-list{margin:0;padding-left:1.4em;color:var(--grey-1);font-size:14px;line-height:1.7}
.src-list a{color:var(--white);border-bottom:1px solid var(--line)}
.src-list a:hover{color:var(--red);border-color:var(--red)}

/* ---------- comparison cards ---------- */
.cmp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0;padding:1px 0 0 1px}
.cmp-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--black);border:1px solid var(--line);margin:-1px 0 0 -1px;padding:clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px) 44px;transition:background .4s}
.cmp-card:hover{background:var(--ink-2)}
.cmp-card .cc-top{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.cmp-card .cc-t{font-weight:600;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.3;letter-spacing:-.01em;color:var(--white)}
.cmp-card .cc-sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey-2)}
.cmp-card .ar{position:absolute;right:18px;bottom:16px;color:var(--red);transition:transform .35s var(--ease)}
.cmp-card:hover .ar{transform:translateX(4px)}
.cmp-cards.big .cmp-card{padding-top:0}
.cmp-card .cc-ph{display:block;margin:0 calc(-1 * clamp(16px,1.8vw,24px)) 10px;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a}
.cmp-card .cc-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s,transform 1.2s var(--ease)}
.cmp-card:hover .cc-ph img{filter:grayscale(0);transform:scale(1.04)}
.home-cmp{margin-top:clamp(30px,4vw,52px)}
.home-cmp .cc-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);margin-bottom:14px}
.home-guides{margin-top:clamp(26px,3vw,40px)}
.src-by{list-style:none;padding-left:0}.src-by li{padding:8px 0;border-bottom:1px solid var(--line)}.src-by b{color:var(--white);font-weight:600}
.pull{margin:0 0 clamp(18px,2vw,26px);padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);border-left:2px solid var(--red);background:rgba(245,245,242,.03);max-width:80ch}
.pull p{margin:0;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.55;color:var(--white)}
.pull footer{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey-2)}
.pull footer a{color:var(--grey-1);border-bottom:1px solid var(--line)}
.loc-src{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--grey-2);border-bottom:1px solid var(--line)}.loc-src:hover{color:var(--red);border-color:var(--red)}
.video-wrap{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.press-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;margin-top:16px}.press-img img{width:100%;height:auto;border:1px solid var(--line)}

/* ---------- viewfinder (hover on REC) ---------- */
.rec:hover{border-color:var(--red);color:var(--white)}
.vf{position:fixed;inset:0;z-index:850;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.55) 100%)}
body.vf-on .vf{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
body.vf-on .vf::before{content:"";position:absolute;inset:0;animation:vfFocus .7s var(--ease) both}
@keyframes vfFocus{0%{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}100%{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
.vf-c{position:absolute;width:56px;height:56px;border:0 solid rgba(245,245,242,.9)}
.vf-c.tl{top:86px;left:22px;border-top-width:2px;border-left-width:2px}
.vf-c.tr{top:86px;right:22px;border-top-width:2px;border-right-width:2px}
.vf-c.bl{bottom:22px;left:22px;border-bottom-width:2px;border-left-width:2px}
.vf-c.br{bottom:22px;right:22px;border-bottom-width:2px;border-right-width:2px}
.vf-g{position:absolute;background:rgba(245,245,242,.16)}
.vf-g.v1,.vf-g.v2{top:86px;bottom:22px;width:1px}.vf-g.v1{left:33.333%}.vf-g.v2{left:66.666%}
.vf-g.h1,.vf-g.h2{left:22px;right:22px;height:1px}.vf-g.h1{top:calc(86px + (100% - 108px) / 3)}.vf-g.h2{top:calc(86px + (100% - 108px) * 2 / 3)}
.vf-scope{position:absolute;left:50%;top:calc(50% + 32px);width:min(86vw,calc((100vh - 200px) * 2.39));aspect-ratio:2.39/1;transform:translate(-50%,-50%);
  border:1px dashed rgba(245,245,242,.28)}
.vf-x{position:absolute;left:50%;top:calc(50% + 32px);width:28px;height:28px;transform:translate(-50%,-50%)}
.vf-x::before,.vf-x::after{content:"";position:absolute;background:rgba(245,245,242,.85)}
.vf-x::before{left:0;right:0;top:50%;height:1px}.vf-x::after{top:0;bottom:0;left:50%;width:1px}
.vf-t{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#f5f5f2;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
.vf-t.tl{top:98px;left:94px;display:flex;align-items:center;gap:8px}
.vf-t.tr{top:98px;right:94px}.vf-t.bl{bottom:34px;left:94px}.vf-t.br{bottom:34px;right:94px;display:flex;align-items:center;gap:8px}
.vf-dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1s steps(1,end) infinite}
.vf-bat{display:inline-block;width:22px;height:10px;border:1px solid #f5f5f2;position:relative;padding:1px}
.vf-bat::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:4px;background:#f5f5f2}
.vf-bat i{display:block;height:100%;width:87%;background:#f5f5f2}
@media (prefers-reduced-motion:reduce){body.vf-on .vf::before{animation:none}.vf-dot{animation:none}}
@media (max-width:900px){.vf{display:none}}

/* ---------- camera-mode handwritten notes ---------- */
/* Caveat (OFL, Impallari Type), self-hosted; loaded only when a note is shown (notes are display:none until REC is hovered) */
@font-face{font-family:"FIK Hand";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/caveat-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"FIK Hand";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/caveat-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.vf-defs{position:absolute;width:0;height:0;overflow:hidden}
.sec,.red-break{position:relative}
.vf-note{display:none;position:absolute;z-index:840;pointer-events:none;max-width:min(460px,40vw);
  font-family:"FIK Hand","Ink Free","Segoe Print","Bradley Hand",cursive;font-weight:700;
  font-size:clamp(30px,2.9vw,46px);line-height:1;color:#e2231a;
  transform:rotate(var(--rot,0deg));filter:url(#vfBrush)}
.vf-note.ink-dark{color:#141414}
.vf-note span{display:block}
body.vf-on .vf-note{display:block}
.vf-mark{display:block;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.vf-mark.arrow{width:110px;height:64px;margin:6px 0 0 30%}
.vf-mark.arrow.left{transform:scaleX(-1);margin:6px 0 0 -18%}
.vf-mark.underline{width:100%;height:14px;margin-top:4px}
.vf-mark.circle{position:absolute;left:-7%;top:-28%;width:114%;height:156%}
@media (max-width:900px){body.vf-on .vf-note{display:none}}

/* ============================================================
   variant B: the page as the path of a project (18.10.2026)
   ============================================================ */
.anchor{display:block;position:relative;top:-80px;height:0;visibility:hidden}
.topnav{display:flex;gap:clamp(14px,1.8vw,28px);margin-left:auto;margin-right:clamp(10px,2vw,24px)}
.topnav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-1);transition:color .25s}
.topnav a:hover{color:var(--white)}
@media (max-width:1100px){.topnav{display:none}}
.intro-lead{font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.65;color:var(--grey-1);max-width:78ch;margin:0 0 clamp(40px,5vw,80px);
  padding:clamp(16px,1.8vw,24px) 0 clamp(16px,1.8vw,24px) clamp(16px,1.6vw,22px);border-left:2px solid var(--red)}
.bridge{margin-top:clamp(26px,3vw,44px);color:var(--white);max-width:66ch}
/* scene 1: what Kyrgyzstan can play */
.looks-home{margin-top:clamp(36px,4.4vw,64px)}
.looks-home .cc-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2);margin-bottom:14px}
.looks-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px)}
.look-h{display:flex;flex-direction:column;gap:8px}
.look-h .ph-wrap{display:block;overflow:hidden;aspect-ratio:3/4;background:var(--ink-2)}
.look-h img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .8s var(--ease)}
.look-h:hover img{filter:none;transform:scale(1.04)}
.look-h b{font-size:clamp(.9rem,1.05vw,1.05rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.look-h .lh-to{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2)}
@media (max-width:1000px){.looks-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.looks-grid{grid-template-columns:repeat(2,1fr)}}
/* scene 2: tabs */
.tabs{display:flex;gap:0;border:1px solid var(--line);width:max-content;max-width:100%;margin-bottom:clamp(22px,2.6vw,36px);flex-wrap:wrap}
.tabs button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;color:var(--grey-1);transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--red);color:#fff}
.tabs button:not([aria-selected="true"]):hover{color:var(--white);background:var(--ink-2)}
.pane[hidden]{display:none}
#paneBoard .build-head{margin-bottom:clamp(18px,2vw,28px)}
/* scene 3: calculator */
.calc{margin:clamp(26px,3vw,44px) 0;border:1px solid var(--line);background:var(--ink-2)}
.calc-in{padding:clamp(18px,2.2vw,32px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.calc-k{color:var(--red);font-size:11px;letter-spacing:.2em}
.calc-q{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:clamp(1rem,1.4vw,1.3rem)}
.calc-q select{font:inherit;color:var(--white);background:var(--black);border:1px solid var(--line);padding:8px 12px;border-radius:0}
.calc-q input[type=range]{width:min(260px,60vw);accent-color:var(--red)}
.calc-q b{font-family:var(--mono);min-width:2ch;text-align:right}
.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.calc-out>div{background:var(--black);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.calc-out .mono{font-size:10.5px;letter-spacing:.16em;color:var(--grey-2)}
.calc-out b{font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:-.02em;font-weight:700}
.calc-save b{color:var(--red)}
.calc-add{align-self:flex-start;background:none;border:0;cursor:pointer;padding:0;color:var(--white)}
.calc-add.done::after{content:" ✓";color:var(--red)}
.cmp-all{margin-top:14px}
@media (max-width:620px){.calc-out{grid-template-columns:1fr}}
/* scene 4 / 5 sub-blocks */
.org-sub h3{font-size:clamp(1.15rem,2vw,1.7rem);text-transform:uppercase;letter-spacing:-.03em;font-weight:700;line-height:1.05;margin:0 0 14px}
.org-sub{margin-bottom:clamp(22px,2.6vw,36px)}
.paper{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.paper article{background:var(--black);padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column;gap:12px;transition:background .45s}
.paper article:hover{background:var(--ink-2)}
.paper .mono{color:var(--red);font-size:11px;letter-spacing:.18em}
.paper h3{margin:0;font-size:clamp(1.1rem,1.8vw,1.5rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.paper p{margin:0;color:var(--grey-1);font-size:15px;line-height:1.6}
.paper .alink{margin-top:auto}
@media (max-width:760px){.paper{grid-template-columns:1fr}}
/* how we work */
.trust.fmt,.trust.three{grid-template-columns:repeat(3,1fr)}
.trust p{margin:0;color:var(--grey-1);font-size:14.5px;line-height:1.55}
@media (max-width:900px){.trust.fmt,.trust.three{grid-template-columns:1fr}}
.prow.four{grid-template-columns:repeat(4,1fr)}
/* contact: brief collected on the page */
.brief{border:1px dashed var(--red);padding:14px 16px;margin-bottom:22px;display:flex;flex-direction:column;gap:10px}
.brief .mono{color:var(--red);font-size:10.5px;letter-spacing:.18em}
.brief-items{display:flex;flex-wrap:wrap;gap:8px}
.bchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 6px 6px 12px;font-size:13px}
.bchip button{width:22px;height:22px;line-height:20px;text-align:center;color:var(--grey-1)}
.bchip button:hover{color:var(--red)}
@media (max-width:1180px){.prow.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.prow.four{grid-template-columns:1fr}}
.brief[hidden]{display:none}

/* ---------- first screen = mission (18.10.2026) ---------- */
.hero-kicker{color:var(--red);font-size:11px;letter-spacing:.22em;margin-bottom:clamp(12px,1.6vh,20px);opacity:0;animation:fadeUp .9s 1.8s var(--ease) forwards}
.mission-title{margin:0 0 clamp(14px,2vh,24px)}
.mission-title .hm{display:block;font-size:clamp(1.9rem,5vw,5.2rem);line-height:.95;letter-spacing:-.045em;font-weight:700;text-transform:uppercase;max-width:17ch;
  opacity:0;animation:fadeUp 1s 2s var(--ease) forwards}
.mission-title .hm em{font-style:normal;color:var(--red)}
.mission-sub{text-transform:none;font-size:clamp(1rem,1.4vw,1.3rem);line-height:1.45;max-width:62ch;font-weight:400;letter-spacing:0;color:var(--white)}
.mission-sub .serif{font-size:.95em;margin-top:8px}
.hero-badges{display:grid;grid-template-columns:repeat(3,minmax(0,230px));gap:10px}
.hb{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;border:1px solid rgba(245,245,242,.18);background:rgba(8,8,8,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;transition:border-color .3s,background .3s,transform .3s}
.hb::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--red);transform:scaleX(.2);transform-origin:left;transition:transform .45s var(--ease)}
.hb:hover{border-color:rgba(227,27,35,.7);background:rgba(24,8,8,.62);transform:translateY(-2px)}
.hb:hover::before{transform:scaleX(1)}
.hb i{font-style:normal;color:var(--red);font-size:10px;letter-spacing:.2em}
.hb b{font-size:clamp(1rem,1.3vw,1.25rem);text-transform:uppercase;letter-spacing:-.01em;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.hb span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-1);line-height:1.5}
@media (max-width:900px){.hero-badges{grid-template-columns:repeat(3,1fr);width:100%}}
@media (max-width:760px){
  .mission-hero{height:auto;min-height:100svh}
  .mission-hero .hero-inner{padding-top:110px}
}
@media (max-width:620px){
  .hero-badges{grid-template-columns:1fr}
  .hb{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:10px 12px}
}
.mission-hero .hero-foot{align-items:center;margin-top:clamp(20px,3.4vh,40px)}
.mission-hero .turn{max-width:270px;line-height:1.6}
.mission-hero .hero-badges{grid-template-columns:repeat(3,minmax(0,210px))}
@media (max-width:900px){.mission-hero .hero-badges{grid-template-columns:repeat(3,1fr)}.mission-hero .turn{max-width:none}}
@media (max-width:620px){.mission-hero .hero-badges{grid-template-columns:1fr}}
/* mission video as the first-screen backdrop: fades in over the still frames once it plays */
.hero .hero-video{background:none;z-index:1}
.hero .hero-video::after{background:rgba(5,5,5,.22)}
.hero .hero-video video{opacity:0;transition:opacity 1.4s ease}
.hero .hero-video video.on{opacity:1}
.hero .hero-video iframe{opacity:.9}
.hero .veil{z-index:2}

/* ---------- first screen: country first, then the arrow, then the text (20.10.2026) ----------
   0.3-1.8 s outline draws on black; 1.85 s red dot; 2.2 s the route arrow leaves the dot (JS, 1.6 s);
   2.6 s the black curtain lifts; 2.9-3.8 s kicker, headline, subtitle and the first stop appear;
   the dotted outline and the dot stay on screen as the start of the route */
.mission-hero .hero-map{justify-content:flex-end;align-items:flex-start;padding:calc(18vh + 40px) max(var(--pad),4vw) 0 0}
.mission-hero .hero-map .mp{animation:mapDraw 1.5s .3s cubic-bezier(.62,.02,.28,1) forwards,mapDots .01s 1.8s forwards}  /* the dotted outline stays on screen */
.mission-hero .hero-map .mc{animation:seed .5s 1.85s var(--ease) forwards}
.mission-hero .hero-map .mch{animation:seedRing 2.2s 2.1s ease-out infinite}
.mission-hero .blackout{animation:blackout 1.1s 2.6s var(--ease) forwards}
.mission-hero .hero-kicker{animation-delay:2.9s}
.mission-hero .mission-title .hm{animation-delay:3s}
.mission-hero .hero-sub{animation-delay:3.4s}
.mission-hero .hero-foot{animation-delay:3.8s}
@media (max-width:760px){
  .mission-hero .hero-map{justify-content:center;padding:84px 0 0}
  .mission-hero .hero-inner{padding-top:205px}  /* 84 px top + about 95 px outline (180 px wide) + gap */
}