:root{
  --bg:#071016;
  --panel:#0a161e;
  --panel-2:#0f202b;
  --ink:#edf2ef;
  --muted:#8ca1a8;
  --line:rgba(237,242,239,.12);
  --line-strong:rgba(237,242,239,.26);
  --pad:clamp(18px,2vw,34px);
  --rail:58px;
  --header:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:Manrope,Helvetica,Arial,sans-serif;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:#6f8cff;color:#071016}

/* persistent shell */
.shell-grid{position:fixed;inset:0;z-index:1;pointer-events:none;margin-left:var(--rail);top:var(--header);background-image:repeating-linear-gradient(to right,transparent 0,transparent calc((100% / 12) - 1px),var(--line) calc((100% / 12) - 1px),var(--line) calc(100% / 12));opacity:.55}
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header);z-index:50;display:grid;grid-template-columns:var(--rail) 1fr;border-bottom:1px solid var(--line);background:rgba(7,16,22,.84);backdrop-filter:blur(16px)}
.header-index{display:grid;place-items:center;border-right:1px solid var(--line);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.header-main{display:grid;grid-template-columns:2fr 5fr 2fr;align-items:center;padding:0 var(--pad);gap:20px}
.wordmark{font-size:15px;letter-spacing:.18em;font-weight:650}
.nav{justify-self:center;display:flex;gap:26px;font-size:12px;color:#c9d5d5}
.nav a{position:relative;padding:20px 0}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:14px;height:1px;background:var(--ink);transition:right .35s var(--ease)}
.nav a:hover:after,.nav a.active:after{right:0}
.header-meta{justify-self:end;display:flex;gap:16px;align-items:center;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;background:#6f8cff;box-shadow:0 0 18px rgba(111,140,255,.0)}

.side-rail{position:fixed;left:0;top:var(--header);bottom:0;width:var(--rail);z-index:40;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 0;background:rgba(7,16,22,.94)}
.rail-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.14em;color:var(--muted)}
.rail-progress{width:1px;height:160px;background:var(--line);position:relative}
.rail-progress span{position:absolute;left:0;top:0;width:1px;height:0;background:var(--ink);transition:height .18s linear}
.rail-count{font-size:9px;letter-spacing:.08em;color:var(--muted)}

.page{position:relative;z-index:2;margin-left:var(--rail);padding-top:var(--header)}
.scene{min-height:100svh;position:relative;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr;padding:var(--pad);gap:0}
.scene[data-tone="paper"]{background:#dce6e3;color:#071016;--line:rgba(7,16,22,.15);--muted:#52676b}
.scene[data-tone="steel"]{background:#0b1b24}
.kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.micro{font-size:10px;line-height:1.5;color:var(--muted)}
.copy{font-size:clamp(15px,1.3vw,20px);line-height:1.45;max-width:34ch}
.copy-lg{font-size:clamp(24px,2.25vw,39px);line-height:1.12;letter-spacing:-.035em;max-width:21ch}
.small-link{display:inline-flex;align-items:center;gap:12px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding-bottom:8px;border-bottom:1px solid var(--line-strong);transition:gap .3s var(--ease),border-color .3s ease}
.small-link:hover{gap:20px;border-color:currentColor}

/* home opener */
.opener{align-items:stretch}
.opener-copy{grid-column:1/4;display:flex;flex-direction:column;justify-content:space-between;padding:10px 24px 10px 0}
.opener-copy h1{margin:0;font-size:clamp(31px,3.2vw,55px);line-height:1.02;letter-spacing:-.045em;font-weight:470;max-width:10ch}
.opener-copy .copy{font-size:13px;max-width:28ch}
.opener-stage{grid-column:4/11;position:relative;overflow:hidden;border-left:1px solid var(--line);border-right:1px solid var(--line);background:#0a171f}
.opener-stage img{transform:scale(1.06);filter:saturate(.78) contrast(1.04);transition:transform 1.2s var(--ease),filter .5s ease}
.opener-stage:hover img{filter:saturate(1) contrast(1.02)}
.viewfinder{position:absolute;inset:18px;border:1px solid rgba(255,255,255,.24);pointer-events:none}
.viewfinder:before,.viewfinder:after{content:"";position:absolute;background:rgba(255,255,255,.45)}
.viewfinder:before{width:28px;height:1px;left:50%;top:-1px;transform:translateX(-50%)}
.viewfinder:after{height:28px;width:1px;top:50%;left:-1px;transform:translateY(-50%)}
.stage-code{position:absolute;left:22px;bottom:18px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.68);mix-blend-mode:difference}
.opener-data{grid-column:11/13;display:flex;flex-direction:column;justify-content:space-between;padding:10px 0 10px 22px}
.data-list{display:grid;gap:12px;font-size:10px;color:var(--muted)}
.data-list div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:9px}
.scroll-cue{display:flex;align-items:center;gap:10px;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em}
.scroll-cue i{display:block;width:34px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.scroll-cue i:after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:sweep 2s var(--ease) infinite}
@keyframes sweep{to{transform:translateX(100%)}}

/* project scenes */
.project-scene{align-items:stretch}
.project-meta{grid-column:1/3;display:flex;flex-direction:column;justify-content:space-between;padding-right:22px}
.project-title{font-size:clamp(24px,2.4vw,38px);letter-spacing:-.04em;font-weight:460;margin:8px 0 0}
.project-title small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-weight:500}
.project-media{grid-column:3/10;position:relative;overflow:hidden;background:#0c1b24}
.project-media img{transform:scale(1.055);transition:transform 1.25s var(--ease),filter .6s ease;filter:saturate(.84)}
.project-scene.in-view .project-media img{transform:scale(1)}
.project-scene:hover .project-media img{filter:saturate(1)}
.project-details{grid-column:10/13;display:flex;flex-direction:column;justify-content:space-between;padding-left:24px}
.project-details .copy{font-size:13px}
.project-number{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.project-media .mask{position:absolute;inset:0;background:var(--bg);transform:translateY(0);z-index:2;transition:transform 1.05s var(--ease)}
.project-scene.in-view .project-media .mask{transform:translateY(-101%)}
.project-scene:nth-of-type(even) .project-meta{grid-column:1/4}
.project-scene:nth-of-type(even) .project-media{grid-column:4/12}
.project-scene:nth-of-type(even) .project-details{grid-column:12/13;padding-left:12px}

/* filmstrip interlude */
.filmstrip{grid-template-rows:auto 1fr auto;padding-top:30px;padding-bottom:30px;overflow:hidden}
.filmstrip-head{grid-column:1/13;display:flex;justify-content:space-between;align-items:center}
.strip-track{grid-column:1/13;display:flex;align-items:center;gap:12px;overflow:hidden;margin:22px calc(var(--pad) * -1);padding:0 var(--pad)}
.strip-frame{flex:0 0 clamp(220px,25vw,440px);height:55vh;overflow:hidden;position:relative;opacity:.45;transition:opacity .35s ease,transform .45s var(--ease)}
.strip-frame:nth-child(even){height:42vh}
.strip-frame:hover{opacity:1;transform:translateY(-8px)}
.strip-frame img{filter:saturate(.65);transition:filter .4s ease,transform .8s var(--ease)}
.strip-frame:hover img{filter:saturate(1);transform:scale(1.025)}
.strip-caption{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:white;text-shadow:0 1px 12px #000}
.filmstrip-foot{grid-column:1/13;display:flex;justify-content:space-between;align-items:end}
.filmstrip-foot .copy-lg{max-width:16ch}

/* capabilities matrix */
.matrix{align-items:stretch}
.matrix-intro{grid-column:1/4;display:flex;flex-direction:column;justify-content:space-between;padding-right:22px}
.matrix-board{grid-column:4/13;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.matrix-cell{position:relative;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.matrix-cell:before{content:"";position:absolute;inset:100% 0 0;background:#6f8cff;transition:inset .5s var(--ease);z-index:-1}
.matrix-cell:hover{color:#071016}
.matrix-cell:hover:before{inset:0}
.matrix-cell:hover .micro,.matrix-cell:hover .kicker{color:#24363a}
.matrix-cell h3{font-size:clamp(19px,1.8vw,29px);font-weight:450;letter-spacing:-.03em;margin:0}
.matrix-cell em{font-size:9px;font-style:normal;color:var(--muted)}

/* process timeline */
.timeline-scene{grid-template-rows:auto 1fr auto;align-items:stretch}
.timeline-head{grid-column:1/13;display:flex;justify-content:space-between}
.timeline-main{grid-column:1/13;display:grid;grid-template-columns:2fr 6fr 4fr;align-items:center;min-height:65vh}
.timeline-nodes{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:0;border-right:1px solid var(--line)}
.timeline-node{padding:18px 20px 18px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);cursor:pointer;display:flex;justify-content:space-between;transition:color .25s ease,padding .3s var(--ease)}
.timeline-node:first-child{border-top:1px solid var(--line)}
.timeline-node.active,.timeline-node:hover{color:var(--ink);padding-left:10px}
.timeline-visual{height:62vh;margin:0 28px;overflow:hidden;position:relative}
.timeline-visual img{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .55s ease,transform .75s var(--ease)}
.timeline-visual img.active{opacity:1;transform:scale(1)}
.timeline-copy{padding-left:12px}
.timeline-copy article{display:none}
.timeline-copy article.active{display:block;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.timeline-axis{grid-column:1/13;height:1px;background:var(--line);position:relative}
.timeline-axis span{position:absolute;left:0;top:0;height:1px;background:var(--ink);width:33.333%;transition:transform .55s var(--ease)}

/* studio / quote */
.studio-scene{align-items:stretch}
.studio-quote{grid-column:1/7;display:flex;flex-direction:column;justify-content:space-between;padding-right:32px}
.studio-quote blockquote{font-size:clamp(27px,3vw,49px);line-height:1.08;letter-spacing:-.045em;margin:0;max-width:15ch;font-weight:430}
.studio-image{grid-column:7/11;overflow:hidden;position:relative}
.studio-image img{filter:grayscale(1);transition:filter .5s ease,transform 1s var(--ease)}
.studio-image:hover img{filter:grayscale(0);transform:scale(1.025)}
.studio-data{grid-column:11/13;display:flex;flex-direction:column;justify-content:space-between;padding-left:22px}

/* closing */
.closing{min-height:86svh;align-items:end}
.closing-title{grid-column:1/7;padding-bottom:20px}
.closing-title h2{font-size:clamp(34px,4vw,68px);line-height:1;letter-spacing:-.05em;font-weight:440;margin:0 0 24px;max-width:11ch}
.closing-side{grid-column:9/13;padding-bottom:26px}
.contact-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid currentColor;border-bottom:1px solid var(--line-strong);padding:15px 0;font-size:12px;transition:padding .3s var(--ease)}
.contact-line:hover{padding-left:12px;padding-right:12px}
.footer-row{position:absolute;left:var(--pad);right:var(--pad);bottom:16px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:var(--muted)}

/* pages */
.page-intro{min-height:55svh;align-items:end}
.page-intro .intro-copy{grid-column:1/6;padding-bottom:34px}
.page-intro h1{font-size:clamp(36px,4vw,70px);font-weight:440;letter-spacing:-.05em;line-height:.98;margin:8px 0 0;max-width:10ch}
.page-intro .intro-meta{grid-column:9/13;padding-bottom:36px}
.work-index{min-height:100svh;padding-top:0;padding-bottom:0}
.work-list{grid-column:1/6;align-self:stretch;border-right:1px solid var(--line)}
.work-item{height:20%;min-height:120px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:42px 1fr auto;align-items:center;padding-right:22px;cursor:pointer;transition:background .3s ease,padding .35s var(--ease)}
.work-item:hover,.work-item.active{background:#0d202a;padding-left:10px}
.work-item .num{font-size:9px;color:var(--muted)}
.work-item strong{font-size:clamp(18px,1.8vw,28px);font-weight:450;letter-spacing:-.03em}
.work-item span:last-child{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.work-preview{grid-column:6/13;align-self:stretch;position:relative;overflow:hidden}
.work-preview img{position:absolute;inset:var(--pad);width:calc(100% - (var(--pad) * 2));height:calc(100% - (var(--pad) * 2));opacity:0;transform:scale(1.02);transition:opacity .45s ease,transform .65s var(--ease)}
.work-preview img.active{opacity:1;transform:scale(1)}
.preview-meta{position:absolute;left:calc(var(--pad) * 1.5);right:calc(var(--pad) * 1.5);bottom:calc(var(--pad) * 1.5);display:flex;justify-content:space-between;font-size:9px;color:white;z-index:4}

.service-page-grid{min-height:100svh;align-items:stretch}
.service-left{grid-column:1/5;padding-right:28px;display:flex;flex-direction:column;justify-content:space-between}
.service-stack{grid-column:5/13;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.service-row{flex:1;border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px 1fr 1fr;align-items:center;padding:0 22px;min-height:100px;transition:background .35s,color .35s;cursor:default}
.service-row:hover{background:#dce6e3;color:#071016}
.service-row:hover .micro{color:#52676b}
.service-row h2{font-size:clamp(18px,2vw,30px);font-weight:450;letter-spacing:-.03em;margin:0}

.about-grid{min-height:100svh;align-items:stretch}
.about-copy{grid-column:1/6;display:flex;flex-direction:column;justify-content:space-between;padding-right:30px}
.about-copy h1{font-size:clamp(32px,3.6vw,62px);font-weight:430;letter-spacing:-.05em;line-height:1;margin:0;max-width:10ch}
.about-image{grid-column:6/10;overflow:hidden;min-height:70vh}
.about-image img{filter:grayscale(1);transition:filter .5s ease}
.about-image:hover img{filter:none}
.about-stats{grid-column:10/13;padding-left:22px;display:flex;flex-direction:column;justify-content:space-between}
.stat{padding:16px 0;border-top:1px solid var(--line)}
.stat b{font-size:28px;font-weight:430;display:block;margin-bottom:6px}

.contact-grid{min-height:calc(100svh - var(--header));align-items:stretch}
.contact-pitch{grid-column:1/6;display:flex;flex-direction:column;justify-content:space-between;padding-right:28px}
.contact-pitch h1{font-size:clamp(34px,4vw,66px);font-weight:430;line-height:.98;letter-spacing:-.05em;margin:0;max-width:10ch}
.contact-form{grid-column:6/13;border-left:1px solid var(--line);display:flex;flex-direction:column;padding-left:28px}
.field{border-bottom:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:120px 1fr;align-items:center}
.field label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.field input,.field textarea{background:transparent;border:0;outline:0;color:var(--ink);font-size:17px;width:100%;resize:none}
.field textarea{min-height:110px;padding-top:8px}
.interests{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:transparent;padding:8px 12px;font-size:10px;cursor:pointer;border-radius:999px;transition:background .25s,color .25s}
.chip.active,.chip:hover{background:var(--ink);color:var(--bg)}
.submit{margin-top:auto;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);padding:22px 0;display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.submit:hover{padding-left:10px;padding-right:10px}

/* case study */
.case-cover{min-height:100svh;align-items:stretch}
.case-meta{grid-column:1/4;display:flex;flex-direction:column;justify-content:space-between;padding-right:26px}
.case-meta h1{font-size:clamp(30px,3.6vw,60px);font-weight:430;line-height:1;letter-spacing:-.05em;margin:10px 0 0}
.case-hero{grid-column:4/13;overflow:hidden;position:relative}
.case-hero img{filter:saturate(.82)}
.case-text{min-height:65svh;align-items:center}
.case-text .copy-lg{grid-column:2/7}
.case-text .copy{grid-column:9/12}
.case-image-full{padding:0;display:block;min-height:100svh}
.case-image-full img{height:100svh;object-fit:cover}
.case-pair{align-items:center}
.case-pair figure{margin:0;overflow:hidden;height:70vh}
.case-pair figure:first-child{grid-column:1/7}
.case-pair figure:last-child{grid-column:8/13;height:54vh}

/* reveal + cursor */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.cursor{position:fixed;left:0;top:0;width:36px;height:36px;border:1px solid rgba(255,255,255,.42);border-radius:50%;pointer-events:none;z-index:100;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border-color .25s;mix-blend-mode:difference}
.cursor:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor.big{width:62px;height:62px;background:rgba(255,255,255,.08);border-color:#fff}

@media (max-width:900px){
  :root{--rail:0px;--header:58px;--pad:18px}
  .shell-grid{margin-left:0;background-image:repeating-linear-gradient(to right,transparent 0,transparent calc((100% / 4) - 1px),var(--line) calc((100% / 4) - 1px),var(--line) calc(100% / 4))}
  .site-header{grid-template-columns:1fr}
  .header-index,.side-rail{display:none}
  .header-main{grid-template-columns:1fr auto;padding:0 18px}
  .nav{display:none}
  .header-meta span:not(.dot){display:none}
  .page{margin-left:0}
  .scene{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px;min-height:auto}
  .opener{min-height:100svh;grid-template-rows:auto 54vh auto;gap:18px}
  .opener-copy{grid-column:1/5;grid-row:1;padding:0;gap:24px}
  .opener-copy h1{font-size:38px}
  .opener-stage{grid-column:1/5;grid-row:2;border:1px solid var(--line)}
  .opener-data{grid-column:1/5;grid-row:3;padding:0;flex-direction:row;gap:20px}
  .data-list{width:55%}
  .project-scene{min-height:100svh;grid-template-rows:auto 60vh auto;gap:18px}
  .project-meta,.project-scene:nth-of-type(even) .project-meta{grid-column:1/5;grid-row:1;padding:0;display:grid;grid-template-columns:1fr auto}
  .project-media,.project-scene:nth-of-type(even) .project-media{grid-column:1/5;grid-row:2}
  .project-details,.project-scene:nth-of-type(even) .project-details{grid-column:1/5;grid-row:3;padding:0;display:grid;grid-template-columns:1fr auto;gap:20px}
  .matrix{min-height:auto;gap:24px}
  .matrix-intro{grid-column:1/5;padding:0;gap:30px}
  .matrix-board{grid-column:1/5;grid-template-columns:1fr;border-left:0}
  .matrix-cell{min-height:170px}
  .filmstrip{min-height:auto}
  .filmstrip-head,.strip-track,.filmstrip-foot{grid-column:1/5}
  .strip-frame{flex-basis:76vw;height:56vh}
  .timeline-head,.timeline-main,.timeline-axis{grid-column:1/5}
  .timeline-main{grid-template-columns:1fr;gap:18px;padding:26px 0}
  .timeline-nodes{border-right:0;flex-direction:row;overflow:auto}
  .timeline-node{min-width:130px;border-top:1px solid var(--line);padding:12px 8px}
  .timeline-visual{height:50vh;margin:0}
  .timeline-copy{padding:0}
  .studio-quote{grid-column:1/5;gap:40px;padding:0 0 18px}
  .studio-image{grid-column:1/4;height:55vh}
  .studio-data{grid-column:4/5;padding-left:12px}
  .closing{min-height:72svh}
  .closing-title{grid-column:1/5}
  .closing-side{grid-column:1/5}
  .page-intro .intro-copy{grid-column:1/5}
  .page-intro .intro-meta{grid-column:1/5;padding-bottom:0}
  .work-index{min-height:auto;padding:0}
  .work-list{grid-column:1/5;border-right:0}
  .work-item{height:auto;min-height:96px;padding:0 18px}
  .work-preview{display:none}
  .service-left{grid-column:1/5;padding:0 0 28px;gap:34px}
  .service-stack{grid-column:1/5;border-left:0}
  .service-row{grid-template-columns:42px 1fr;min-height:130px;padding:18px 0}
  .service-row .micro{grid-column:2}
  .about-copy{grid-column:1/5;padding:0;gap:36px}
  .about-image{grid-column:1/4;min-height:58vh;margin-top:30px}
  .about-stats{grid-column:4/5;padding-left:12px;margin-top:30px}
  .contact-pitch{grid-column:1/5;padding:0;gap:40px}
  .contact-form{grid-column:1/5;border-left:0;padding:40px 0 0}
  .field{grid-template-columns:90px 1fr}
  .case-meta{grid-column:1/5;padding:0 0 20px;gap:30px}
  .case-hero{grid-column:1/5;height:62vh}
  .case-text .copy-lg{grid-column:1/5}
  .case-text .copy{grid-column:1/5;margin-top:30px}
  .case-pair figure:first-child{grid-column:1/5;height:58vh}
  .case-pair figure:last-child{grid-column:2/5;height:46vh;margin-top:18px}
  .cursor{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* NIVOR brand layer — structure intentionally inherits the original grid system */
.header-index,.kicker,.micro,.project-number,.stage-code,.rail-label,.rail-count,.header-meta,.strip-caption,.preview-meta,.data-list span,.work-item .num,.work-item span:last-child,.field label,.footer-row{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.wordmark{font-weight:600;letter-spacing:.26em}
.project-title,.page-intro h1,.about-copy h1,.contact-pitch h1,.case-meta h1,.closing-title h2,.studio-quote blockquote,.copy-lg{font-weight:400}
.opener-stage img,.project-media img,.work-preview img,.case-hero img,.case-image-full img,.case-pair img{filter:saturate(.62) contrast(1.08) brightness(.92)}
.opener-stage:hover img,.project-media:hover img{filter:saturate(.86) contrast(1.05) brightness(.98)}
.matrix-cell em{color:#6f8cff}
.scene[data-tone="paper"] .small-link{border-color:rgba(7,16,22,.3)}

/* ──────────────────────────────────────────────────────────────
   NIVOR V2 — flat chromatic dark system
   No gradients, no decorative sequence numbers, no arrow UI.
   ────────────────────────────────────────────────────────────── */
:root{
  --bg:#080a12;
  --panel:#0e1220;
  --panel-2:#121827;
  --ink:#f4f6fb;
  --muted:#9ba6b8;
  --line:rgba(244,246,251,.13);
  --line-strong:rgba(244,246,251,.26);
  --blue:#6f8cff;
  --mint:#56d6b0;
  --yellow:#f0d46a;
  --violet:#a27bf5;
  --cyan:#58c7e8;
  --rose:#f2769f;
}
html,body{background:var(--bg)}
::selection{background:var(--yellow);color:#090b12}

/* SVG icon language */
.svg-icon{width:18px;height:18px;display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.brand-symbol{width:19px;height:19px;color:var(--yellow)}
.header-index .brand-symbol{width:17px;height:17px}

/* shell: retain the 12-col grid, simplify the chrome */
.site-header{background:#080a12;border-color:var(--line);backdrop-filter:none}
.header-index{color:var(--yellow)}
.nav a:after{display:none}
.nav a{transition:color .2s ease}
.nav a:hover{color:var(--cyan)}
.nav a.active{color:var(--yellow)}
.dot{background:var(--mint);box-shadow:none}
.side-rail{background:#080a12;justify-content:space-between}
.rail-icon{color:var(--violet);padding-bottom:2px}
.rail-icon .svg-icon{width:17px;height:17px}
.rail-progress,.rail-count{display:none!important}

/* all pages stay dark; color comes from flat surfaces, never gradients */
.scene[data-tone="paper"]{background:#171225;color:var(--ink);--line:rgba(244,246,251,.14);--muted:#b6accd}
.scene[data-tone="steel"]{background:#0c1930}
.filmstrip{background:#0c1930}
.timeline-scene{background:#0b101c}
.studio-scene{background:#171225}
.closing{background:#0b1718}

/* links become compact icon actions instead of underlined arrows */
.small-link{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;width:max-content;padding:10px 12px;border:0;background:var(--blue);color:#090b12;font-size:10px;font-weight:650;transition:background .2s ease,color .2s ease}
.small-link:hover{gap:14px;background:var(--yellow);color:#090b12}
.small-link .svg-icon{width:15px;height:15px}
.scene[data-tone="paper"] .small-link{border:0;background:var(--yellow);color:#090b12}
.scene[data-tone="paper"] .small-link:hover{background:var(--cyan)}

/* opener */
.opener-stage{background:#0e1420;border-color:var(--line)}
.opener-stage img,.project-media img,.work-preview img,.case-hero img,.case-image-full img,.case-pair img{filter:saturate(.92) contrast(1.04) brightness(.94)}
.opener-stage:hover img,.project-media:hover img{filter:saturate(1.08) contrast(1.03) brightness(.98)}
.viewfinder{border-color:rgba(244,246,251,.3)}
.viewfinder:before,.viewfinder:after{display:none}
.stage-code{background:#0b0d14;color:#eef2f9;mix-blend-mode:normal;padding:7px 9px}
.scroll-cue{gap:8px;color:var(--cyan)}
.scroll-cue i{display:none}
.scroll-cue .svg-icon{width:16px;height:16px}

/* project labels are icons + semantic copy, never counters */
.project-number{display:inline-flex;align-items:center;gap:9px;color:var(--cyan);font-family:"DM Mono",ui-monospace,monospace}
.project-number .svg-icon{width:19px;height:19px}
.project-scene:nth-of-type(2) .project-number{color:var(--blue)}
.project-scene:nth-of-type(3) .project-number{color:var(--rose)}
.project-media .mask{background:#080a12}

/* image archive: full color, solid captions */
.strip-frame{opacity:1}
.strip-frame img{filter:saturate(.92);transition:transform .6s var(--ease)}
.strip-frame:hover img{filter:saturate(1.05);transform:scale(1.02)}
.strip-caption{left:10px;right:auto;bottom:10px;gap:6px;text-shadow:none;color:#080a12;font-weight:650}
.strip-caption span{background:var(--yellow);padding:6px 8px}
.strip-caption span:last-child{background:var(--cyan)}
.strip-frame:nth-child(2) .strip-caption span:first-child{background:var(--mint)}
.strip-frame:nth-child(2) .strip-caption span:last-child{background:var(--violet)}
.strip-frame:nth-child(3) .strip-caption span:first-child{background:var(--rose)}
.strip-frame:nth-child(3) .strip-caption span:last-child{background:var(--yellow)}
.strip-frame:nth-child(4) .strip-caption span:first-child{background:var(--blue)}
.strip-frame:nth-child(4) .strip-caption span:last-child{background:var(--mint)}
.strip-frame:nth-child(5) .strip-caption span:first-child{background:var(--cyan)}
.strip-frame:nth-child(5) .strip-caption span:last-child{background:var(--rose)}

/* system matrix: persistent category color, solid fills only */
.matrix-board{border-color:var(--line)}
.matrix-cell{isolation:isolate;transition:color .22s ease,background .22s ease}
.matrix-cell:before{display:none}
.matrix-cell em{width:40px;height:40px;display:grid;place-items:center;background:var(--blue);color:#080a12}
.matrix-cell em .svg-icon{width:19px;height:19px}
.matrix-cell:nth-child(2) em{background:var(--mint)}
.matrix-cell:nth-child(3) em{background:var(--yellow)}
.matrix-cell:nth-child(4) em{background:var(--violet)}
.matrix-cell:nth-child(5) em{background:var(--cyan)}
.matrix-cell:nth-child(6) em{background:var(--rose)}
.matrix-cell:nth-child(1):hover{background:var(--blue);color:#080a12}
.matrix-cell:nth-child(2):hover{background:var(--mint);color:#080a12}
.matrix-cell:nth-child(3):hover{background:var(--yellow);color:#080a12}
.matrix-cell:nth-child(4):hover{background:var(--violet);color:#080a12}
.matrix-cell:nth-child(5):hover{background:var(--cyan);color:#080a12}
.matrix-cell:nth-child(6):hover{background:var(--rose);color:#080a12}
.matrix-cell:hover em{background:#080a12;color:var(--ink)}
.matrix-cell:hover .micro{color:#151922}

/* process: icons replace progress-number decoration */
.timeline-node{align-items:center}
.timeline-node small{width:36px;height:36px;display:grid;place-items:center;background:#151b2b;color:var(--blue)}
.timeline-node:nth-child(2) small{color:var(--mint)}
.timeline-node:nth-child(3) small{color:var(--yellow)}
.timeline-node small .svg-icon{width:17px;height:17px}
.timeline-node.active:nth-child(1) small,.timeline-node:nth-child(1):hover small{background:var(--blue);color:#080a12}
.timeline-node.active:nth-child(2) small,.timeline-node:nth-child(2):hover small{background:var(--mint);color:#080a12}
.timeline-node.active:nth-child(3) small,.timeline-node:nth-child(3):hover small{background:var(--yellow);color:#080a12}
.timeline-axis{display:none}
.timeline-copy .kicker{display:inline-flex;align-items:center;gap:9px;color:var(--cyan)}
.timeline-copy .kicker .svg-icon{width:16px;height:16px}

/* studio imagery remains chromatic */
.studio-image img,.about-image img{filter:saturate(.92) contrast(1.03);transition:transform .65s var(--ease)}
.studio-image:hover img,.about-image:hover img{filter:saturate(1.05) contrast(1.02);transform:scale(1.02)}

/* collection index */
.work-item{grid-template-columns:50px 1fr auto}
.work-item .num{width:34px;height:34px;display:grid;place-items:center;background:var(--blue);color:#080a12}
.work-item .num .svg-icon{width:17px;height:17px}
.work-item:nth-child(2) .num{background:var(--mint)}
.work-item:nth-child(3) .num{background:var(--yellow)}
.work-item:nth-child(4) .num{background:var(--violet)}
.work-item:nth-child(5) .num{background:var(--cyan)}
.work-item:hover,.work-item.active{background:#111727;padding-left:10px}
.work-item.active{box-shadow:inset 4px 0 0 var(--blue)}
.work-item:nth-child(2).active{box-shadow:inset 4px 0 0 var(--mint)}
.work-item:nth-child(3).active{box-shadow:inset 4px 0 0 var(--yellow)}
.work-item:nth-child(4).active{box-shadow:inset 4px 0 0 var(--violet)}
.work-item:nth-child(5).active{box-shadow:inset 4px 0 0 var(--cyan)}
.preview-meta span{background:#080a12;padding:6px 8px;color:#eef2f9}
.preview-meta span:last-child{background:var(--yellow);color:#080a12}

/* systems rows */
.service-row{grid-template-columns:70px 1fr 1fr;transition:background .2s ease,color .2s ease}
.service-row>span:first-child{width:38px;height:38px;display:grid;place-items:center;background:var(--blue);color:#080a12}
.service-row:nth-child(2)>span:first-child{background:var(--mint)}
.service-row:nth-child(3)>span:first-child{background:var(--yellow)}
.service-row:nth-child(4)>span:first-child{background:var(--violet)}
.service-row:nth-child(5)>span:first-child{background:var(--cyan)}
.service-row>span:first-child .svg-icon{width:18px;height:18px}
.service-row:nth-child(1):hover{background:var(--blue);color:#080a12}
.service-row:nth-child(2):hover{background:var(--mint);color:#080a12}
.service-row:nth-child(3):hover{background:var(--yellow);color:#080a12}
.service-row:nth-child(4):hover{background:var(--violet);color:#080a12}
.service-row:nth-child(5):hover{background:var(--cyan);color:#080a12}
.service-row:hover .micro{color:#171a21}

/* studio steps */
.stat b{width:40px;height:40px;display:grid;place-items:center;background:#11192c;color:var(--yellow);margin-bottom:10px}
.stat:nth-of-type(2) b{color:var(--mint)}
.stat:nth-of-type(3) b{color:var(--violet)}
.stat b .svg-icon{width:18px;height:18px}

/* contact */
.chip{border-color:var(--line-strong);border-radius:0}
.chip:nth-child(1):hover,.chip:nth-child(1).active{background:var(--blue);color:#080a12;border-color:var(--blue)}
.chip:nth-child(2):hover,.chip:nth-child(2).active{background:var(--mint);color:#080a12;border-color:var(--mint)}
.chip:nth-child(3):hover,.chip:nth-child(3).active{background:var(--yellow);color:#080a12;border-color:var(--yellow)}
.chip:nth-child(4):hover,.chip:nth-child(4).active{background:var(--violet);color:#080a12;border-color:var(--violet)}
.chip:nth-child(5):hover,.chip:nth-child(5).active{background:var(--cyan);color:#080a12;border-color:var(--cyan)}
.submit{background:var(--blue);color:#080a12;border:0;margin-top:22px;padding:18px 20px}
.submit:hover{background:var(--mint);padding:18px 20px}
.submit .svg-icon{width:18px;height:18px}

/* no arrow decoration in closing links */
.contact-line{border-top:1px solid var(--line-strong);border-bottom:0;padding:16px 0;transition:color .2s ease,background .2s ease}
.contact-line:hover{padding-left:0;padding-right:0;color:var(--yellow)}
.contact-line .svg-icon{width:16px;height:16px}

/* substantial site footer */
.site-footer{position:relative;z-index:3;margin-left:var(--rail);background:#090b13;color:var(--ink);border-top:1px solid var(--line)}
.footer-spectrum{height:7px;display:grid;grid-template-columns:repeat(5,1fr)}
.footer-spectrum i:nth-child(1){background:var(--blue)}
.footer-spectrum i:nth-child(2){background:var(--mint)}
.footer-spectrum i:nth-child(3){background:var(--yellow)}
.footer-spectrum i:nth-child(4){background:var(--violet)}
.footer-spectrum i:nth-child(5){background:var(--rose)}
.footer-grid{display:grid;grid-template-columns:5fr 2fr 2fr 3fr;min-height:330px}
.footer-brand,.footer-column,.footer-contact{padding:34px var(--pad);border-right:1px solid var(--line)}
.footer-contact{border-right:0}
.footer-mark{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:650;letter-spacing:.2em}
.footer-mark .brand-symbol{width:22px;height:22px}
.footer-brand p{font-size:clamp(22px,2.1vw,36px);line-height:1.1;letter-spacing:-.035em;max-width:19ch;margin:54px 0 60px}
.footer-note,.footer-label,.footer-bottom{font-family:"DM Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:var(--muted)}
.footer-column{display:flex;flex-direction:column;gap:12px}
.footer-label{display:block;margin-bottom:20px;color:var(--cyan)}
.footer-column a{width:max-content;font-size:13px;transition:color .2s ease}
.footer-column a:hover{color:var(--yellow)}
.footer-contact{display:flex;flex-direction:column;gap:18px}
.footer-contact>a,.footer-contact>div{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.45}
.footer-contact .svg-icon{width:17px;height:17px;color:var(--mint);margin-top:1px}
.footer-bottom{min-height:54px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 var(--pad);border-top:1px solid var(--line)}
.footer-bottom span:nth-child(2){text-align:center}
.footer-bottom span:last-child{text-align:right}

/* brand layer overrides from V1 */
.matrix-cell em{color:#080a12}
.scene[data-tone="paper"] .small-link{border-color:transparent}

@media (max-width:900px){
  .site-footer{margin-left:0}
  .footer-grid{grid-template-columns:1fr 1fr;min-height:auto}
  .footer-brand{grid-column:1/3;border-right:0;border-bottom:1px solid var(--line)}
  .footer-brand p{margin:34px 0 42px}
  .footer-column{border-bottom:1px solid var(--line)}
  .footer-contact{grid-column:1/3;border-top:0}
  .footer-bottom{grid-template-columns:1fr;gap:8px;padding:18px;min-height:auto}
  .footer-bottom span:nth-child(2),.footer-bottom span:last-child{text-align:left}
  .service-row{grid-template-columns:50px 1fr}
  .service-row>span:first-child{grid-row:1/3}
  .small-link{padding:9px 10px}
}