/* =========================================================
 * Touch Yazılım — v11
 * Editorial · Brutalist · Cream/Ink · Vermilion + Electric Blue
 * ========================================================= */

:root{
  --cream: #ede5d6;
  --cream-2: #e0d6c2;
  --paper: #f4ede0;
  --ink: #0c0e1a;
  --ink-2: #54566a;
  --line: rgba(12,14,26,.14);
  --line-2: rgba(12,14,26,.28);
  --vermilion: #ff3a1f;
  --blue: #1a2bff;
  --lime: #d8ff3c;
  --plum: #4a1c5a;

  --f-ed: "Fraunces", "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --f-grot: "Inter", "Geist", -apple-system, system-ui, sans-serif;

  --maxw: 1640px;
  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.7,.0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --col-gap: 24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-grot);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html{scroll-behavior:auto}
body{cursor:none}
@media (hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,canvas{display:block;max-width:100%}
ul{list-style:none}
::selection{background:var(--ink);color:var(--cream)}

.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ============= FX layers ============= */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9000;mix-blend-mode:multiply;opacity:.18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.scan{
  position:fixed;inset:0;pointer-events:none;z-index:8990;mix-blend-mode:multiply;opacity:.05;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,1) 0 1px, transparent 1px 4px);
}

/* progress strip on top */
.prg{position:fixed;top:0;left:0;height:2px;background:var(--vermilion);width:0;z-index:9100;mix-blend-mode:multiply}

/* grid overlay (key=g) for editorial feel */
.grid-ovl{
  position:fixed;inset:0;z-index:9050;pointer-events:none;opacity:0;transition:opacity .3s;
  background-image:linear-gradient(to right, rgba(12,14,26,.16) 1px, transparent 1px);
  background-size:calc(100%/12) 100%;
}
.grid-ovl.is-on{opacity:1}

/* ============= Custom cursor ============= */
.cur, .cur-r{position:fixed;top:0;left:0;pointer-events:none;z-index:9500;mix-blend-mode:multiply;will-change:transform}
.cur{
  width:8px;height:8px;border-radius:999px;background:var(--ink);
  transform:translate3d(-100px,-100px,0);
}
.cur-r{
  width:46px;height:46px;border-radius:999px;border:1px solid var(--ink);
  display:grid;place-items:center;
  font:500 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  transform:translate3d(-100px,-100px,0);
  transition:width .35s var(--ease-out), height .35s var(--ease-out), background-color .35s, color .35s;
}
.cur-r .lbl{opacity:0;transition:opacity .25s}
.cur-r.h{width:80px;height:80px;background:var(--ink);color:var(--cream);mix-blend-mode:normal}
.cur-r.l{width:120px;height:120px;background:var(--vermilion);color:var(--cream);border-color:var(--vermilion);mix-blend-mode:normal}
.cur-r.l .lbl{opacity:1}
.cur-r.drag{width:130px;height:130px;background:var(--blue);color:var(--cream);border-color:var(--blue);mix-blend-mode:normal}
.cur-r.drag .lbl{opacity:1}

/* ============= Three.js mount ============= */
.stage{
  position:fixed;inset:0;pointer-events:none;z-index:0;
}
.stage canvas{width:100%;height:100%;display:block}

/* ============= Preloader ============= */
.boot{
  position:fixed;inset:0;z-index:10000;background:var(--cream);
  display:grid;grid-template-rows:auto 1fr auto;padding:24px var(--pad);
}
.boot__top{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.boot__big{
  align-self:center;
  font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(80px,22vw,360px);line-height:.85;letter-spacing:-.04em;
  display:flex;align-items:baseline;gap:.04em;
}
.boot__big sup{
  font-family:var(--f-mono);font-style:normal;font-weight:500;
  font-size:14px;letter-spacing:.1em;color:var(--vermilion);
  align-self:flex-start;margin-top:2.5em;
}
.boot__bar{height:1px;background:var(--line-2);position:relative;margin-bottom:6px}
.boot__bar i{position:absolute;inset:0;background:var(--vermilion);width:0%;transform-origin:left}
.boot__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.boot__foot .pct{font-family:var(--f-ed);font-style:italic;font-size:48px;line-height:1;letter-spacing:-.02em}

/* ============= NAV — floating pill ============= */
.nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9300;
  display:flex;align-items:center;gap:6px;
  padding:8px 8px 8px 18px;
  background:rgba(244,237,224,.7);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 10px 40px -20px rgba(12,14,26,.3);
}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--f-ed);font-style:italic;font-size:18px;letter-spacing:-.02em;padding-right:14px;border-right:1px solid var(--line)}
.nav__brand .dot{width:9px;height:9px;border-radius:999px;background:var(--vermilion);box-shadow:0 0 0 3px rgba(255,58,31,.18)}
.nav__menu{display:flex;align-items:center;gap:0}
.nav__menu a{
  position:relative;padding:10px 16px;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;transition:.3s var(--ease);
}
.nav__menu a:hover{background:var(--ink);color:var(--cream)}
.nav__menu a.is-active{background:var(--vermilion);color:var(--cream)}
.nav__cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--cream);
  font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  transition:.4s var(--ease);
}
.nav__cta:hover{background:var(--vermilion)}
.nav__cta b{width:6px;height:6px;border-radius:999px;background:var(--vermilion);box-shadow:0 0 8px var(--vermilion)}
.nav__cta:hover b{background:var(--cream);box-shadow:none}
.nav__burger{display:none;padding:10px 14px;border-radius:999px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--cream)}

@media (max-width:980px){
  .nav__menu, .nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .nav{padding:8px 8px 8px 16px}
}

.mobnav{position:fixed;inset:0;z-index:9400;background:var(--ink);color:var(--cream);transform:translateY(-101%);transition:transform .8s var(--ease);padding:90px var(--pad) 30px;display:flex;flex-direction:column}
.mobnav.is-open{transform:translateY(0)}
.mobnav a{font-family:var(--f-ed);font-style:italic;font-size:clamp(36px,10vw,72px);line-height:1.05;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font-weight:300;letter-spacing:-.02em}
.mobnav__close{position:absolute;top:18px;right:var(--pad);background:var(--vermilion);color:var(--cream);padding:10px 18px;border-radius:999px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.mobnav__meta{margin-top:auto;display:flex;justify-content:space-between;gap:14px;font:500 10px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}

/* ============= Common ============= */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
.section{position:relative;padding:120px 0;z-index:2}

.kicker{display:inline-flex;align-items:center;gap:12px;font:500 11px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.18em;text-transform:uppercase}
.kicker::before{content:"";width:24px;height:1px;background:var(--vermilion)}
.kicker.acc{color:var(--vermilion)}

.eyebrow{font:500 10px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

.h-display{font-family:var(--f-ed);font-weight:300;font-size:clamp(64px,14vw,260px);line-height:.85;letter-spacing:-.04em}
.h-display .it{font-style:italic}
.h-display .out{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.h-display .ac{color:var(--vermilion);font-style:italic}
.h-display .bl{color:var(--blue);font-style:italic}

.h-section{font-family:var(--f-ed);font-weight:300;font-size:clamp(40px,7vw,120px);line-height:.92;letter-spacing:-.03em}
.h-section .it{font-style:italic}
.h-section .ac{font-style:italic;color:var(--vermilion)}
.h-section .bl{font-style:italic;color:var(--blue)}

.lead{font-family:var(--f-grot);font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--ink-2);max-width:60ch}

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pill .dt{width:5px;height:5px;border-radius:999px;background:var(--vermilion)}
.pill.b .dt{background:var(--blue)}
.pill.l .dt{background:var(--lime)}

.split-l{display:block;overflow:hidden}
.split-l > span{display:inline-block;will-change:transform}

.mag{display:inline-block;will-change:transform;transition:transform .5s var(--ease-out)}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 26px 18px 28px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease);
}
.btn::after{content:"";position:absolute;inset:0;background:var(--vermilion);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover::after{transform:translateY(0)}
.btn .ar{width:24px;height:24px;border-radius:999px;background:var(--cream);color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--ease)}
.btn:hover .ar{transform:rotate(-45deg)}
.btn--gh{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--gh::after{background:var(--ink)}
.btn--gh:hover{color:var(--cream)}
.btn--gh .ar{background:var(--ink);color:var(--cream)}
.btn--gh:hover .ar{background:var(--cream);color:var(--ink)}

/* ============= Vertical sticky label (left rail) ============= */
.rail{
  position:fixed;left:18px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;
  z-index:50;font:500 10px/1 var(--f-mono);letter-spacing:.4em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:14px;pointer-events:none;mix-blend-mode:multiply;
}
.rail::before{content:"";width:60px;height:1px;background:var(--ink)}
@media (max-width:980px){.rail{display:none}}

/* ============= HERO ============= */
.hero{
  position:relative;min-height:100vh;padding:120px var(--pad) 60px;
  display:grid;grid-template-rows:auto 1fr auto;gap:40px;
}
.hero__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;align-items:start;
  font:500 11px/1.5 var(--f-mono);color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;
}
.hero__top b{color:var(--ink);font-weight:500}
.hero__top .em{color:var(--vermilion);font-family:var(--f-ed);font-style:italic;font-size:14px;text-transform:none;letter-spacing:0}
.hero__title{
  font-family:var(--f-ed);font-weight:300;
  font-size:clamp(72px,15.5vw,300px);line-height:.84;letter-spacing:-.05em;
  position:relative;
}
.hero__title .row{display:block;overflow:hidden}
.hero__title .row > span{display:inline-block}
.hero__title .it{font-style:italic}
.hero__title .out{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.hero__title .ac{color:var(--vermilion);font-style:italic}
.hero__title .bl{color:var(--blue);font-style:italic}
.hero__title sup{
  font-family:var(--f-mono);font-style:normal;font-weight:500;
  font-size:13px;letter-spacing:.1em;color:var(--vermilion);text-transform:uppercase;
  vertical-align:top;display:inline-block;margin-left:.2em;line-height:1;
}
.hero__title .stripe{
  display:inline-block;background:var(--vermilion);color:var(--cream);
  font-style:italic;padding:0 .25em;border-radius:.05em;
}

.hero__foot{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;
  border-top:1px solid var(--line-2);padding-top:24px;align-items:end;
}
.hero__foot .lh{display:flex;align-items:center;gap:14px;font:500 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hero__foot .lh .live{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.hero__foot .lh .live::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--vermilion);box-shadow:0 0 0 3px rgba(255,58,31,.2);animation:pulse 1.6s var(--ease) infinite}
.hero__foot .stat .v{font-family:var(--f-ed);font-style:italic;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.02em;font-weight:300}
.hero__foot .stat .v sup{font-family:var(--f-mono);font-style:normal;font-size:11px;color:var(--vermilion);letter-spacing:.1em;vertical-align:top}
.hero__foot .stat .l{font:500 10px/1.4 var(--f-mono);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;margin-top:8px}

@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

/* hero stage holds three.js canvas via fixed .stage */

/* ============= Vertical marquee ============= */
.vmark{
  position:relative;height:auto;background:var(--ink);color:var(--cream);overflow:hidden;
  padding:32px 0;
}
.vmark__t{
  display:flex;gap:80px;white-space:nowrap;font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(50px,9vw,160px);line-height:.9;letter-spacing:-.03em;will-change:transform;
}
.vmark__t span{display:inline-flex;align-items:center;gap:48px}
.vmark__t .out{-webkit-text-stroke:1px var(--cream);color:transparent;font-style:normal}
.vmark__t .dt{width:.3em;height:.3em;border-radius:999px;background:var(--vermilion);display:inline-block;vertical-align:middle}

/* ============= MANIFESTO — column stack ============= */
.manifesto{
  display:grid;grid-template-columns:1fr 4fr;gap:80px;position:relative;
}
.manifesto__sticky{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:18px}
.manifesto__sticky .num{
  font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(80px,9vw,160px);line-height:.85;letter-spacing:-.04em;color:var(--vermilion);
}
.manifesto__sticky .num sup{font-family:var(--f-mono);font-style:normal;font-size:13px;letter-spacing:.12em;color:var(--ink-2);vertical-align:top;display:inline-block;margin-top:2.4em}
.manifesto__txt p{
  font-family:var(--f-ed);font-weight:300;font-style:italic;
  font-size:clamp(28px,3.4vw,56px);line-height:1.12;letter-spacing:-.02em;color:var(--ink);
}
.manifesto__txt p + p{margin-top:30px;color:var(--ink-2)}
.manifesto__txt .hi{font-style:italic;color:var(--vermilion);background:linear-gradient(transparent 60%, rgba(255,58,31,.18) 60%)}
.manifesto__txt .bl{font-style:italic;color:var(--blue)}
@media (max-width:980px){
  .manifesto{grid-template-columns:1fr;gap:30px}
  .manifesto__sticky{position:relative;top:0}
}

/* ============= CARD DECK — sticky stack with rotation ============= */
.deck{
  position:relative;padding:60px 0 0;
}
.deck__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:0 var(--pad) 40px;border-bottom:1px solid var(--line-2)}
.deck__items{position:relative;padding:0 var(--pad)}
.deck__card{
  position:sticky;top:90px;
  display:grid;grid-template-columns:120px 1.2fr 1fr 80px;gap:30px;align-items:stretch;
  background:var(--cream);border:1px solid var(--line-2);border-radius:24px;
  padding:32px;margin-bottom:18px;
  transform-origin:center top;
  box-shadow:0 1px 0 0 var(--cream);
}
.deck__card:nth-child(odd){background:var(--paper)}
.deck__card .n{
  font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(80px,9vw,140px);line-height:.85;letter-spacing:-.03em;color:var(--vermilion);
  align-self:start;
}
.deck__card .info h3{
  font-family:var(--f-ed);font-weight:300;font-size:clamp(34px,4.4vw,72px);line-height:.95;letter-spacing:-.025em;
}
.deck__card .info h3 .it{font-style:italic;color:var(--vermilion)}
.deck__card .info p{margin-top:14px;color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:46ch}
.deck__card .info .chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.deck__card .vis{
  position:relative;border-radius:18px;overflow:hidden;background:var(--ink);min-height:280px;
}
.deck__card .vis canvas{position:absolute;inset:0;width:100%;height:100%}
.deck__card .vis .lbl{
  position:absolute;left:18px;bottom:16px;color:rgba(255,255,255,.85);
  font:500 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.deck__card .vis .lbl::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--vermilion)}
.deck__card .vis .big{
  position:absolute;left:0;right:0;bottom:50%;transform:translateY(50%);
  text-align:center;color:rgba(255,255,255,.92);
  font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(26px,3vw,48px);line-height:.9;letter-spacing:-.02em;mix-blend-mode:overlay;
}
.deck__card .more{
  display:flex;justify-content:flex-end;align-items:start;
}
.deck__card .more a{
  width:64px;height:64px;border-radius:999px;border:1px solid var(--line-2);
  display:grid;place-items:center;transition:.4s var(--ease);
}
.deck__card .more a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:rotate(-45deg)}
@media (max-width:980px){
  .deck__card{grid-template-columns:1fr;padding:24px}
  .deck__card{position:relative;top:0}
}

/* ============= MAGAZINE SPREAD — editorial */
.spread{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;
  padding:60px 0;
}
.spread .num-vh{
  grid-column:1/3;
  font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(110px,14vw,220px);line-height:.82;letter-spacing:-.04em;color:var(--vermilion);
}
.spread .num-vh sup{font-family:var(--f-mono);font-style:normal;font-size:13px;letter-spacing:.12em;color:var(--ink-2);vertical-align:top;display:inline-block;margin-top:1.8em}
.spread .body{grid-column:3/9}
.spread .body h2{
  font-family:var(--f-ed);font-weight:300;font-size:clamp(36px,5vw,86px);line-height:.95;letter-spacing:-.03em;
}
.spread .body h2 .it{font-style:italic}
.spread .body h2 .ac{font-style:italic;color:var(--vermilion)}
.spread .body p{margin-top:24px;color:var(--ink-2);font-size:17px;line-height:1.6}
.spread .body p + p{margin-top:14px}
.spread .meta{
  grid-column:9/13;display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--line-2);padding-top:14px;
  font:500 11px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.spread .meta b{color:var(--ink);font-weight:500;font-size:12px}
.spread .meta .v{color:var(--vermilion);font-family:var(--f-ed);font-style:italic;font-size:15px;text-transform:none;letter-spacing:0}
@media (max-width:980px){
  .spread{grid-template-columns:1fr;gap:14px}
  .spread .num-vh, .spread .body, .spread .meta{grid-column:1/-1}
}

/* ============= SERVICES NUMBERED LIST ============= */
.svcs{border-top:1px solid var(--line-2)}
.svcs__row{
  display:grid;grid-template-columns:80px 1.5fr 2fr 80px;gap:24px;align-items:center;
  padding:32px 0;border-bottom:1px solid var(--line-2);position:relative;cursor:pointer;
  transition:padding .4s var(--ease);
}
.svcs__row::before{
  content:"";position:absolute;left:-100vw;right:-100vw;top:0;bottom:0;background:var(--ink);
  transform:translateY(-101%);transition:transform .55s var(--ease);z-index:-1;
}
.svcs__row:hover{color:var(--cream);padding-left:24px}
.svcs__row:hover::before{transform:translateY(0)}
.svcs__row:hover .n, .svcs__row:hover .d, .svcs__row:hover .ar{color:var(--cream)}
.svcs__row:hover .ar{background:var(--vermilion);border-color:var(--vermilion);transform:rotate(-45deg)}
.svcs__row .n{font-family:var(--f-ed);font-style:italic;font-weight:300;font-size:32px;line-height:1;color:var(--vermilion)}
.svcs__row .t{font-family:var(--f-ed);font-weight:300;font-size:clamp(28px,3.6vw,56px);line-height:.98;letter-spacing:-.025em}
.svcs__row .t .it{font-style:italic;color:var(--vermilion)}
.svcs__row:hover .t .it{color:var(--lime)}
.svcs__row .d{color:var(--ink-2);font-size:15px;line-height:1.55;max-width:50ch;transition:color .3s}
.svcs__row .ar{
  width:54px;height:54px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;justify-self:end;transition:.5s var(--ease);
}

/* ============= SECTOR BENTO ============= */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.bcard{
  grid-column:span 4;background:var(--paper);border:1px solid var(--line-2);border-radius:22px;
  padding:28px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  position:relative;overflow:hidden;transition:.55s var(--ease);
}
.bcard.s6{grid-column:span 6}.bcard.s8{grid-column:span 8}.bcard.s12{grid-column:span 12;min-height:200px}
.bcard::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.bcard:hover{color:var(--cream);border-color:var(--ink)}
.bcard:hover::before{transform:translateY(0)}
.bcard:hover .ic, .bcard:hover .d{color:rgba(255,255,255,.7)}
.bcard:hover .t .it{color:var(--lime)}
.bcard:hover .ar{background:var(--vermilion);border-color:var(--vermilion);transform:rotate(-45deg)}
.bcard .ic{font:500 11px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;transition:color .3s}
.bcard .ic::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--vermilion)}
.bcard .t{font-family:var(--f-ed);font-weight:300;font-size:clamp(26px,2.8vw,40px);line-height:.98;letter-spacing:-.025em}
.bcard .t .it{font-style:italic;color:var(--vermilion);transition:color .3s}
.bcard .d{color:var(--ink-2);font-size:14.5px;line-height:1.55;transition:color .3s}
.bcard .ar{align-self:flex-end;width:46px;height:46px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;transition:.5s var(--ease)}
@media (max-width:980px){.bcard, .bcard.s6, .bcard.s8{grid-column:span 12}}

/* ============= VAULT — drag horizontal scroller (works) ============= */
.vault{position:relative;padding:80px 0}
.vault__head{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.vault__rail{
  position:relative;cursor:grab;user-select:none;
  display:flex;gap:18px;padding:0 var(--pad) 30px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.vault__rail::-webkit-scrollbar{display:none}
.vault__rail.dragging{cursor:grabbing}
.vault__card{
  flex:0 0 min(540px, 84vw);scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--ink);color:var(--cream);
  border-radius:22px;overflow:hidden;
}
.vault__card .vis{position:relative;aspect-ratio:5/6;overflow:hidden}
.vault__card canvas{position:absolute;inset:0;width:100%;height:100%}
.vault__card .vis .num{position:absolute;top:18px;left:20px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.vault__card .vis .big{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-family:var(--f-ed);font-style:italic;font-weight:300;font-size:clamp(34px,4vw,64px);line-height:.9;letter-spacing:-.02em;mix-blend-mode:overlay;color:rgba(255,255,255,.95)}
.vault__card .meta{padding:22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;border-top:1px solid rgba(255,255,255,.18)}
.vault__card .meta .t{font-family:var(--f-ed);font-weight:300;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.vault__card .meta .t .it{font-style:italic;color:var(--vermilion)}
.vault__card .meta .s{font:500 10px/1.4 var(--f-mono);color:rgba(255,255,255,.6);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}

/* ============= STATS ============= */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;border-top:1px solid var(--line-2);padding-top:30px;
}
.stats .s{padding:8px 0}
.stats .s .v{
  font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:clamp(54px,7vw,120px);line-height:.9;letter-spacing:-.03em;color:var(--ink);
}
.stats .s .v sup{font-family:var(--f-mono);font-style:normal;font-size:13px;letter-spacing:.1em;color:var(--vermilion);vertical-align:top;display:inline-block;margin-top:1.4em}
.stats .s .l{font:500 11px/1.4 var(--f-mono);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;margin-top:14px;max-width:24ch}
@media (max-width:980px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============= TICKER HORIZONTAL ============= */
.ticker{
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--paper);overflow:hidden;padding:24px 0;
}
.ticker__t{display:inline-flex;white-space:nowrap;will-change:transform;font-family:var(--f-ed);font-style:italic;font-weight:300;font-size:clamp(28px,3.6vw,56px);line-height:1;letter-spacing:-.02em;gap:48px;padding-right:48px}
.ticker__t span{display:inline-flex;align-items:center;gap:24px}
.ticker__t .dt{width:.4em;height:.4em;border-radius:999px;background:var(--vermilion);display:inline-block;vertical-align:middle}
.ticker__t .out{-webkit-text-stroke:1px var(--ink);color:transparent;font-style:normal}

/* ============= QUOTE BLOCK ============= */
.quote{
  font-family:var(--f-ed);font-weight:300;font-style:italic;
  font-size:clamp(36px,5.5vw,90px);line-height:1.05;letter-spacing:-.025em;
}
.quote .ac{color:var(--vermilion)}
.quote .out{-webkit-text-stroke:1.4px var(--ink);color:transparent;font-style:italic}

/* ============= CTA BLOCK ============= */
.cta{
  position:relative;padding:140px var(--pad);overflow:hidden;
  background:var(--ink);color:var(--cream);
}
.cta::before{
  content:"touch";position:absolute;left:-3vw;bottom:-12vh;font-family:var(--f-ed);font-style:italic;font-weight:300;
  font-size:50vw;line-height:.8;color:rgba(255,255,255,.04);pointer-events:none;
}
.cta__inner{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.cta h2{font-family:var(--f-ed);font-weight:300;font-size:clamp(56px,11vw,200px);line-height:.88;letter-spacing:-.04em}
.cta h2 .it{font-style:italic;color:var(--vermilion)}
.cta h2 .out{-webkit-text-stroke:1.4px var(--cream);color:transparent}
.cta__right{display:flex;flex-direction:column;gap:12px;font-family:var(--f-ed);font-weight:300;font-size:clamp(22px,2vw,32px);line-height:1.2;letter-spacing:-.02em}
.cta__right a{display:inline-flex;justify-content:space-between;gap:14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18);transition:padding .4s var(--ease)}
.cta__right a:hover{padding-left:18px;color:var(--vermilion)}
.cta__right a .ar{font-style:italic}
@media (max-width:980px){.cta__inner{grid-template-columns:1fr}}

/* ============= TECH FAMILY ============= */
.fam{
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:30px var(--pad);
}
.fam .lab{font:500 11px/1.4 var(--f-mono);color:var(--ink-2);letter-spacing:.18em;text-transform:uppercase}
.fam .row{display:flex;flex-wrap:wrap;gap:36px;align-items:center;font-family:var(--f-ed);font-style:italic;font-weight:300;font-size:clamp(20px,2vw,28px);color:var(--ink)}
.fam .row .dt{color:var(--vermilion)}
@media (max-width:680px){.fam{grid-template-columns:1fr;gap:14px}}

/* ============= FOOTER ============= */
.footer{background:var(--cream);color:var(--ink);padding:80px var(--pad) 26px;border-top:1px solid var(--line-2);position:relative;overflow:hidden}
.footer__big{
  font-family:var(--f-ed);font-weight:300;font-size:clamp(120px,28vw,540px);line-height:.78;letter-spacing:-.05em;
  position:relative;
}
.footer__big .it{font-style:italic;color:var(--vermilion)}
.footer__big::after{
  content:"";position:absolute;right:.05em;top:.3em;width:.18em;height:.18em;border-radius:999px;background:var(--blue);
}
.footer__big sup{
  font-family:var(--f-mono);font-style:normal;font-weight:500;
  font-size:14px;letter-spacing:.1em;color:var(--ink-2);
  vertical-align:top;display:inline-block;margin-top:2em;text-transform:uppercase;
}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:60px;padding-top:30px;border-top:1px solid var(--line-2)}
.footer__cols h4{font:500 11px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.footer__cols ul li{margin-bottom:8px}
.footer__cols a{color:var(--ink);font-size:14.5px;display:inline-flex;align-items:center;gap:6px;transition:color .25s,padding .3s var(--ease)}
.footer__cols a:hover{color:var(--vermilion);padding-left:6px}
.footer__bot{margin-top:60px;padding-top:18px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:980px){.footer__cols{grid-template-columns:repeat(2,1fr)}}

/* ============= INNER PAGE — page head ============= */
.phead{
  padding:160px var(--pad) 60px;border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:end;position:relative;overflow:hidden;
}
.phead .crumb{font:500 11px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.18em;text-transform:uppercase;display:flex;gap:10px;align-items:center;margin-bottom:30px}
.phead .crumb .sep{opacity:.5}
.phead h1{margin-top:14px}
.phead .meta{display:flex;flex-direction:column;gap:14px;font:500 11px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border-left:1px solid var(--line-2);padding-left:30px}
.phead .meta b{color:var(--ink);font-weight:500;font-size:12px}
.phead .meta .v{color:var(--vermilion);font-family:var(--f-ed);font-style:italic;font-size:18px;text-transform:none;letter-spacing:0;margin-top:2px}
@media (max-width:980px){.phead{grid-template-columns:1fr}.phead .meta{border-left:0;padding-left:0;border-top:1px solid var(--line-2);padding-top:14px}}

/* ============= TWOCOL ============= */
.twocol{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start}
.twocol h2{font-family:var(--f-ed);font-weight:300;font-size:clamp(40px,5.4vw,90px);line-height:.95;letter-spacing:-.03em}
.twocol h2 .it{font-style:italic;color:var(--vermilion)}
.twocol .body p{font-size:17px;line-height:1.65;color:var(--ink-2);margin-bottom:18px}
.twocol .body p b{color:var(--ink);font-weight:500}
@media (max-width:980px){.twocol{grid-template-columns:1fr;gap:30px}}

/* ============= VALUES ============= */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line-2);padding-top:40px}
.value{padding:14px 0;border-top:1px solid transparent}
.value .n{font:500 11px/1 var(--f-mono);color:var(--vermilion);letter-spacing:.14em}
.value h3{font-family:var(--f-ed);font-weight:300;font-size:clamp(28px,3.4vw,46px);line-height:.98;letter-spacing:-.02em;margin-top:14px}
.value h3 .it{font-style:italic}
.value p{color:var(--ink-2);margin-top:12px;line-height:1.6}
@media (max-width:980px){.values{grid-template-columns:1fr}}

/* ============= CONTACT ============= */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.contact h2{font-family:var(--f-ed);font-weight:300;font-size:clamp(50px,7.5vw,140px);line-height:.92;letter-spacing:-.035em}
.contact h2 .it{font-style:italic;color:var(--vermilion)}
.ways{margin-top:40px;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.way{display:grid;grid-template-columns:160px 1fr 30px;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-2);align-items:center;position:relative;overflow:hidden;transition:padding .35s var(--ease)}
.way::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.way:hover{color:var(--cream);padding-left:18px}
.way:hover::before{transform:scaleX(1)}
.way:hover .l{color:rgba(255,255,255,.7)}
.way .l{font:500 11px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.way .v{font-family:var(--f-ed);font-weight:300;font-size:clamp(22px,2vw,32px);line-height:1.1;letter-spacing:-.02em}
.way .v .it{font-style:italic;color:var(--vermilion)}
.way:hover .v .it{color:var(--lime)}
.way .ar{justify-self:end;font-family:var(--f-ed);font-style:italic;font-size:24px;color:inherit}

.form{
  display:flex;flex-direction:column;gap:18px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:22px;padding:30px;
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:flex;flex-direction:column;gap:8px;font:500 10px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.12em;text-transform:uppercase}
.form input, .form textarea, .form select{
  background:var(--cream);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 16px;font-family:var(--f-grot);font-size:15px;color:var(--ink);
  transition:border-color .3s, box-shadow .3s;
}
.form input:focus, .form textarea:focus, .form select:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(12,14,26,.08);
}
.form textarea{min-height:120px;resize:vertical}
.form .chips{display:flex;flex-wrap:wrap;gap:8px}
.form .chip{padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;font:500 10px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.3s var(--ease);background:var(--cream)}
.form .chip:hover{border-color:var(--ink);color:var(--ink)}
.form .chip input{display:none}
.form .chip.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.form button[type=submit]{align-self:flex-start;margin-top:8px}
@media (max-width:680px){.form .row{grid-template-columns:1fr}}
@media (max-width:980px){.contact{grid-template-columns:1fr}}

.map{border:1px solid var(--line-2);border-radius:22px;overflow:hidden;height:420px;background:var(--paper);margin-top:60px}
.map iframe{width:100%;height:100%;border:0;filter:contrast(1.05) saturate(.5) sepia(.15)}

/* ============= reduced motion ============= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .stage, .grain, .scan{display:none}
  body{cursor:auto}
  .cur, .cur-r{display:none}
}