
:root{
  --black:#050505; --soft:#111111; --charcoal:#292929;
  --mid:#666666; --light:#C8C8C5; --off:#F3F1EC; --acid:#C8FF20;
  --ink-line:rgba(5,5,5,.14);
  --gut:clamp(20px,5.2vw,96px);
  --gap:clamp(14px,1.8vw,30px);
  --pad:clamp(110px,15vw,240px);
  --e:cubic-bezier(.2,.7,.3,1);
}
@media(max-width:720px){:root{--pad:clamp(84px,13vw,150px)}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:var(--off);
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:400;font-size:16px;
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
::selection{background:var(--acid);color:var(--black)}

.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding-left:var(--gut);padding-right:var(--gut)}
.blk{padding-left:var(--gut);padding-right:var(--gut)}
@media(max-width:900px){.g{grid-template-columns:repeat(6,1fr)}}

.lbl{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.d1{font-size:clamp(2.6rem,6.3vw,7.5rem);font-weight:700;line-height:.94;letter-spacing:-.035em}
.d2{font-size:clamp(2.3rem,5.6vw,6rem);font-weight:600;line-height:.96;letter-spacing:-.03em}
.d3{font-size:clamp(1.8rem,3.4vw,3.4rem);font-weight:600;line-height:1;letter-spacing:-.025em}
.body{font-size:clamp(15px,1.15vw,18px);color:var(--light);max-width:52ch}
.tiny{font-size:13px;color:var(--mid);max-width:40ch;line-height:1.55}

.lk{display:inline-flex;align-items:baseline;gap:12px;font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding-bottom:9px;position:relative;color:inherit}
.lk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.3;transition:opacity .7s var(--e)}
.lk i{font-style:normal;display:inline-block;transition:transform .7s var(--e)}
.lk:hover::after{opacity:1}
.lk:hover i{transform:translate(4px,-4px)}

.light{background:var(--off);color:var(--black)}
.light .lbl{color:#8A867D}
.light .body{color:#4A473F}
.light .tiny{color:#6E6B63}

header{position:fixed;top:0;left:0;right:0;z-index:60;padding:0 var(--gut);
  transition:background .7s var(--e),border-color .7s var(--e);border-bottom:1px solid transparent}
header.stuck{background:rgba(5,5,5,.9);backdrop-filter:blur(16px);border-bottom-color:var(--charcoal)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);height:88px;color:var(--off)}
.brand{font-weight:700;font-size:18px;letter-spacing:.24em;margin-right:auto}
.nav .n{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--light);position:relative;padding:6px 0}
.nav .n::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--acid);transition:width .7s var(--e)}
.nav .n:hover::after{width:100%}
.burger{display:none;background:none;border:0;color:inherit;cursor:pointer;padding:10px}
.burger svg{width:24px;height:24px}
@media(max-width:1000px){.nav .n{display:none}.burger{display:block}}
#menu{position:fixed;inset:0;z-index:55;background:var(--black);display:none;
  flex-direction:column;justify-content:center;padding:0 var(--gut)}
#menu.on{display:flex}
#menu a{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:600;letter-spacing:-.03em;
  padding:10px 0;color:var(--off)}
#menu a:hover{color:var(--acid)}

.hero{min-height:100svh;display:grid;align-content:center;padding-top:150px;
  padding-bottom:clamp(60px,9vw,120px);position:relative;overflow:hidden}
.hero .copy{grid-column:1/9}
.hero .vis{grid-column:9/13;align-self:stretch;min-height:clamp(300px,48vh,640px)}
.hero h1{margin:36px 0 0}
@media(min-width:901px){.hero h1{white-space:nowrap}}
.hero .body{margin:38px 0 48px}
@media(max-width:900px){
  .hero{align-content:end;padding-top:120px}
  .hero .copy{grid-column:1/7;order:2}
  .hero .vis{grid-column:1/7;order:1;min-height:clamp(210px,32vh,320px);margin-bottom:46px}
}

.slot{position:relative;overflow:hidden;background:var(--soft)}
.slot .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:var(--soft)}
.slot .ph::before{content:"";position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(255,255,255,.016) 10px 20px)}
.slot .ph .km{width:46px;color:var(--charcoal);position:relative}
.slot .ph span{position:relative;font-size:9.5px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mid);text-align:center;line-height:2.1;padding:0 22px}
.light .slot,.light .slot .ph{background:#E7E4DD}
.light .slot .ph .km{color:#CFCBC1}
.light .slot .ph span{color:#8C887E}
.slot img{transition:transform 1.2s var(--e)}
.heroart{position:absolute;inset:0;width:100%;height:100%;display:block}
.slot:hover img{transform:scale(1.03)}

.sec{padding-top:var(--pad);padding-bottom:var(--pad)}

.intro .lbl{grid-column:1/13}
.intro h2{grid-column:1/10;margin:44px 0 0}
.intro p{grid-column:5/11;margin-top:clamp(40px,5vw,68px)}
@media(max-width:900px){.intro h2,.intro p{grid-column:1/7}}

.proof{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
.stat{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:baseline;
  padding:clamp(34px,4.6vw,70px) 0;border-top:1px solid var(--ink-line)}
.stat:last-child{border-bottom:1px solid var(--ink-line)}
.stat .n{grid-column:1/8;font-size:clamp(2.6rem,8.6vw,9rem);font-weight:700;
  line-height:.86;letter-spacing:-.045em}
.stat .t{grid-column:9/13;padding-bottom:.5em}
@media(max-width:900px){.stat{grid-template-columns:repeat(6,1fr)}
  .stat .n,.stat .t{grid-column:1/7}.stat .t{padding-bottom:0;margin-top:16px}}
.needs{display:inline-block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#A8A49A;border:1px solid var(--ink-line);padding:5px 9px;margin-top:12px}

.rows{margin-top:clamp(50px,7vw,110px)}
.row{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:center;padding:clamp(34px,4.4vw,66px) 0;border-top:1px solid var(--charcoal);
  transition:padding-left .8s var(--e)}
.row:last-child{border-bottom:1px solid var(--charcoal)}
.row .num{grid-column:1/2;font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--mid);
  white-space:nowrap}
.row h3{grid-column:3/8;transition:color .7s var(--e)}
.row .tiny{grid-column:9/12}
.row .ar{grid-column:12/13;text-align:right;font-size:17px;color:var(--mid);
  transition:color .7s var(--e),transform .7s var(--e)}
.row:hover{padding-left:clamp(8px,1.4vw,22px)}
.row:hover h3,.row:hover .ar{color:var(--acid)}
.row:hover .ar{transform:translate(5px,-5px)}
@media(max-width:900px){
  .row{grid-template-columns:repeat(6,1fr);align-items:start}
  .row .num{grid-column:1/6;margin-bottom:12px}
  .row h3{grid-column:1/6}
  .row .tiny{grid-column:1/7;margin-top:14px}
  .row .ar{grid-column:6/7;position:absolute;right:0;top:clamp(30px,4vw,60px)}
}
.peek{position:fixed;width:300px;height:380px;pointer-events:none;z-index:5;opacity:0;
  transform:translate(-50%,-50%) scale(.96);
  transition:opacity .6s var(--e),transform .9s var(--e)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:1000px){.peek{display:none}}

.feat .lbl{grid-column:1/13;margin-bottom:clamp(28px,3.4vw,48px)}
.feat .shot{grid-column:1/13;aspect-ratio:16/9}
.feat .cap{grid-column:1/7;margin-top:clamp(26px,3vw,44px)}
.feat .res{grid-column:9/13;margin-top:clamp(26px,3vw,44px);align-self:end}
.feat .cap h4{font-size:clamp(1.3rem,2vw,2rem);font-weight:600;letter-spacing:-.02em}
.feat .cap .tiny{margin-top:10px}
@media(max-width:900px){.feat .shot,.feat .cap,.feat .res{grid-column:1/7}
  .feat .res{margin-top:24px}}

.phil h2.a{grid-column:1/7}
.phil h2.b{grid-column:7/12;margin-top:clamp(30px,5vw,110px)}
.phil p{grid-column:7/12;margin-top:clamp(30px,3.6vw,56px)}
@media(max-width:900px){.phil h2.a,.phil h2.b,.phil p{grid-column:1/7}
  .phil h2.b{margin-top:4px}}

.proc{margin-top:clamp(50px,7vw,100px);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.proc div{border-top:1px solid var(--ink-line);padding-top:22px}
.proc .n{font-size:11px;font-weight:500;letter-spacing:.16em;color:#8A867D;margin-bottom:16px}
.proc h4{font-size:clamp(1.1rem,1.9vw,1.7rem);font-weight:600;letter-spacing:-.015em}
@media(max-width:760px){.proc{grid-template-columns:repeat(2,1fr);row-gap:38px}}

.break{position:relative;height:clamp(300px,52vh,620px);overflow:hidden;background:var(--soft)}
.break .bigk{position:absolute;left:-6vw;top:50%;width:min(74vw,900px);color:#1c1c1c;
  transform:translateY(-50%)}
.break .edge{position:absolute;right:var(--gut);bottom:clamp(26px,4vw,52px);text-align:right}

.why .lbl{grid-column:1/13}
.why h2{grid-column:1/9}
.cols{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(48px,7vw,100px)}
.cols div{padding:0 clamp(18px,2.6vw,44px);border-left:1px solid var(--charcoal)}
.cols div:first-child{padding-left:0;border-left:0}
.cols h4{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
@media(max-width:900px){.why h2{grid-column:1/7}}
@media(max-width:820px){.cols{grid-template-columns:1fr;gap:34px}
  .cols div,.cols div:first-child{padding:0 0 0 20px;border-left:1px solid var(--charcoal)}}

.sup .lbl{grid-column:1/13}
.sup h2{grid-column:1/7;margin:40px 0 0}
.sup .body{grid-column:1/6;margin-top:32px}
.sup .lk{grid-column:1/6;margin-top:38px;justify-self:start}
.soon{grid-column:1/6;margin-top:38px;justify-self:start;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8A867D;border-top:1px solid var(--ink-line);padding-top:14px}
.sup .shot{grid-column:8/13;grid-row:1/6;aspect-ratio:3/4}
@media(max-width:900px){
  .sup h2,.sup .body,.sup .lk,.sup .soon{grid-column:1/7}
  .sup .shot{grid-column:1/7;grid-row:auto;margin-top:46px;aspect-ratio:4/5}
}

.final{min-height:88svh;display:grid;align-content:center;padding-top:var(--pad);
  padding-bottom:var(--pad)}
.final .lbl{grid-column:1/13}
.final h2{grid-column:1/11;margin:44px 0 clamp(44px,6vw,84px)}
.final .lk{grid-column:1/6;justify-self:start}
@media(max-width:900px){.final h2,.final .lk{grid-column:1/7}}

footer{border-top:1px solid var(--charcoal);padding:clamp(60px,7vw,100px) var(--gut) 44px}
.fmark svg{width:100%;height:auto;display:block;color:var(--soft)}
.flinks{display:flex;gap:clamp(18px,3vw,48px);flex-wrap:wrap;margin-top:clamp(40px,5vw,70px);
  padding-top:30px;border-top:1px solid var(--charcoal)}
.flinks a{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--light)}
.flinks a:hover{color:var(--acid)}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;
  font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--mid)}

.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e)}
.mask.in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .rv{opacity:1;transform:none}.mask{clip-path:none}#loader{display:none}.peek{display:none}
}
#loader{position:fixed;inset:0;z-index:200;background:var(--black);display:flex;
  align-items:center;justify-content:center}
#loader svg{width:58px;color:var(--off)}
#loader path{opacity:0;transform:translateY(12px);animation:ki .7s var(--e) forwards}
#loader path:nth-child(2){animation-delay:.11s}
#loader path:nth-child(3){animation-delay:.22s}
@keyframes ki{to{opacity:1;transform:none}}
#loader.out{opacity:0;pointer-events:none;transition:opacity .6s var(--e)}

/* ── page hero (inner pages) ─────────────────────────── */
.phero{padding-top:clamp(150px,17vw,240px);padding-bottom:clamp(70px,9vw,140px)}
.phero .copy{grid-column:1/9}
.phero h1{margin:34px 0 0}
.phero .body{margin:34px 0 44px}
.phero .ctas{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;align-items:baseline}
@media(max-width:900px){.phero .copy{grid-column:1/7}}
.crumb{grid-column:1/13;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mid);margin-bottom:26px}
.crumb a:hover{color:var(--acid)}
.light .crumb{color:#8A867D}
.light .crumb a:hover{color:var(--black)}

/* ── numbered editorial list (service detail) ────────── */
.nlist{margin-top:clamp(46px,6vw,96px)}
.nrow{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:baseline;
  padding:clamp(26px,3.4vw,50px) 0;border-top:1px solid var(--charcoal)}
.nrow:last-child{border-bottom:1px solid var(--charcoal)}
.nrow .num{grid-column:1/2;font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--mid)}
.nrow h3{grid-column:3/8;font-size:clamp(1.25rem,2.1vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.06}
.nrow p{grid-column:9/13;font-size:13.5px;color:var(--mid);line-height:1.55;max-width:38ch}
.light .nrow{border-top-color:var(--ink-line)}
.light .nrow:last-child{border-bottom-color:var(--ink-line)}
.light .nrow .num,.light .nrow p{color:#6E6B63}
@media(max-width:900px){
  .nrow{grid-template-columns:repeat(6,1fr)}
  .nrow .num{grid-column:1/7;margin-bottom:10px}
  .nrow h3{grid-column:1/7}.nrow p{grid-column:1/7;margin-top:12px}
}

/* ── pricing: editorial plans, never cards ───────────── */
.plans{margin-top:clamp(50px,7vw,100px)}
.plan{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding:clamp(40px,5vw,80px) 0;border-top:1px solid var(--charcoal);align-items:start}
.plan:last-of-type{border-bottom:1px solid var(--charcoal)}
.plan .pname{grid-column:1/5}
.plan .pname h3{font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:600;letter-spacing:-.025em;line-height:1}
.plan .pfrom{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid);margin-bottom:14px}
.plan .pprice{font-size:clamp(1.9rem,3.6vw,3.4rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;margin-top:22px}
.plan .pnote{grid-column:5/8;font-size:14px;color:var(--light);line-height:1.6;max-width:34ch}
.plan .pinc{grid-column:8/13}
.plan .pinc li{list-style:none;font-size:13.5px;color:var(--light);padding:7px 0 7px 20px;
  position:relative;line-height:1.5}
.plan .pinc li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--mid)}
.light .plan{border-top-color:var(--ink-line)}
.light .plan:last-of-type{border-bottom-color:var(--ink-line)}
.light .plan .pfrom{color:#8A867D}
.light .plan .pnote,.light .plan .pinc li{color:#4A473F}
.light .plan .pinc li::before{background:#B4B0A6}
.tag{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--black);background:var(--acid);padding:4px 9px;margin-bottom:16px}
@media(max-width:900px){
  .plan{grid-template-columns:repeat(6,1fr)}
  .plan .pname,.plan .pnote,.plan .pinc{grid-column:1/7}
  .plan .pnote{margin-top:20px}.plan .pinc{margin-top:24px}
}

/* ── homepage pricing teaser (understated) ───────────── */
.inv .lbl{grid-column:1/13}
.inv h2{grid-column:1/9;margin:38px 0 clamp(40px,5vw,70px)}
.inv .line{grid-column:1/8;display:flex;justify-content:space-between;gap:24px;
  border-top:1px solid var(--charcoal);padding:22px 0;
  font-size:clamp(13px,1.35vw,17px);letter-spacing:.02em}
.inv .line:last-of-type{border-bottom:1px solid var(--charcoal)}
.inv .line span:last-child{color:var(--light);white-space:nowrap}
.inv .lk{grid-column:1/6;margin-top:clamp(34px,4vw,56px);justify-self:start}
@media(max-width:900px){.inv h2,.inv .line,.inv .lk{grid-column:1/7}}

/* ── 404 ─────────────────────────────────────────────── */
.nf{min-height:82svh;display:grid;align-content:center}
.nf .lbl{grid-column:1/13}
.nf h1{grid-column:1/10;margin:34px 0 34px}
.nf .body{grid-column:1/7}
.nf .lk{grid-column:1/6;margin-top:40px;justify-self:start}
@media(max-width:900px){.nf h1,.nf .body,.nf .lk{grid-column:1/7}}

/* ── contact ─────────────────────────────────────────── */
.cgrid{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  margin-top:clamp(50px,6vw,90px)}
.cgrid .blkc{grid-column:span 4;border-top:1px solid var(--charcoal);padding-top:24px}
.cgrid h4{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);margin-bottom:14px}
.cgrid a{font-size:clamp(15px,1.5vw,19px)}
.cgrid a:hover{color:var(--acid)}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(6,1fr)}
  .cgrid .blkc{grid-column:span 6}}

/* KORVIS enquiry form embed wrapper (contact page only) */
.hlform{margin-top:clamp(40px,5vw,68px);border:1px solid var(--ink-line);min-height:1022px}
.hlform iframe{display:block;border-radius:0}
@media(max-width:720px){.hlform{min-height:1180px}}
.light .hlform{border-color:var(--ink-line)}
