:root{
  --black:#0b0a09; --white:#fff; --grey:#8d8b86; --soft:#f2f1ee; --accent:#e5530f;
  --display:'Inter Tight',Helvetica,Arial,sans-serif; --body:'DM Sans',sans-serif;
  --gut:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
section{position:relative}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--gut);font:500 15px var(--body);color:#fff;transition:color .3s}
header.light{color:#0b0a09}
header::before{content:'';position:absolute;inset:0 0 -34px;background:linear-gradient(#0b0a09 10%,transparent);z-index:-1;pointer-events:none;opacity:.0;transition:.3s}
header.light::before{background:linear-gradient(#fff 15%,transparent);opacity:1}
.brand{font-weight:500;text-decoration:none}
header nav{display:flex;gap:20px}
header nav a{text-decoration:none}
header nav sup{font-size:10px;margin-left:2px}
.pill{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none;transition:.3s}
header.light .pill{background:rgba(0,0,0,.06)}
.pill i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;color:#0b0a09;font:900 15px var(--display);font-style:normal;letter-spacing:-.06em}
header.light .pill i{background:#0b0a09;color:#fff}
@media(max-width:760px){header nav{display:none}header{grid-template-columns:1fr auto}}

/* ---------- 3D tiles ---------- */
.tile{--s:100px;position:absolute;width:var(--s);height:var(--s);border-radius:24%;background:linear-gradient(150deg,#fff 0%,#f1f1f1 45%,#d6d6d6 100%);
  box-shadow:inset 0 calc(var(--s)*-.05) calc(var(--s)*.09) rgba(0,0,0,.22),inset 0 calc(var(--s)*.035) calc(var(--s)*.05) #fff,0 calc(var(--s)*.22) calc(var(--s)*.4) rgba(0,0,0,.55);
  display:grid;place-items:center;color:#0b0a09;transition:transform .25s ease-out;will-change:transform;animation:bob 7s ease-in-out infinite}
.tile.in-line{position:relative;display:inline-grid;vertical-align:middle;animation:none}
.tile .g{font:900 calc(var(--s)*.46)/1 var(--display);letter-spacing:-.07em}
.tile svg{width:56%;height:56%}
@keyframes bob{50%{translate:0 -8px}}
@media(prefers-reduced-motion:reduce){.tile{animation:none}}

/* ---------- hero ---------- */
.hero{min-height:max(100svh,780px);padding:96px var(--gut) 0;overflow:hidden;display:flex;flex-direction:column}
.hero h1{font:400 clamp(38px,5vw,84px)/1.02 var(--display);letter-spacing:-.055em;max-width:14em}
.hero h1 span{color:#8a8884}
.cta-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:34px}
.cta{display:inline-flex;align-items:center;gap:16px;background:var(--accent);color:#fff;padding:9px 26px 9px 9px;border-radius:12px;font:400 clamp(19px,1.7vw,24px) var(--display);letter-spacing:-.03em;text-decoration:none;transition:.2s}
.cta:hover{filter:brightness(1.1);transform:translateY(-2px)}
.cta .av{width:48px;height:48px;border-radius:9px;background:#fff;color:#0b0a09;display:grid;place-items:center;font:900 24px var(--display);letter-spacing:-.07em}
.link{font:500 18px var(--body);border-bottom:2px solid currentColor;text-decoration:none;padding-bottom:2px}
.sub{margin-top:20px;color:#8f8d88;font-size:18px}
.hero .t-main{--s:clamp(190px,28vw,420px);right:5vw;top:9vh;rotate:8deg}
.hero .t-wp{--s:clamp(60px,5.6vw,84px);left:4.5vw;bottom:36vh;rotate:-6deg;animation-delay:-2s}
.hero .t-woo{--s:clamp(54px,5vw,76px);left:34vw;bottom:41vh;rotate:5deg;animation-delay:-4s}
.hero .t-el{--s:clamp(54px,5vw,74px);right:5vw;bottom:34vh;rotate:-4deg;animation-delay:-1s}
.hero .t-ai{--s:clamp(48px,4.4vw,66px);left:62vw;bottom:44vh;rotate:10deg;animation-delay:-3s}
.nameplate{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1vw;font:900 clamp(56px,13.4vw,260px)/.78 var(--display);letter-spacing:-.055em;white-space:nowrap;translate:0 9%;will-change:transform,opacity}
.nameplate .card{flex:0 0 clamp(110px,14vw,240px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin-bottom:1.5vw;background:#1b3a2c;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.nameplate .card img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero .t-main,.hero .t-wp,.hero .t-woo,.hero .t-el,.hero .t-ai{z-index:1}
.hero h1,.cta-row,.sub{position:relative;z-index:2}

/* ---------- work (white) : stage + pinned caption, som referencen ---------- */
.work{background:#fff;color:#0b0a09;padding:0 var(--gut)}
.stage{position:sticky;top:0;height:100svh;display:grid;align-content:center}
.stage h2{font:700 clamp(46px,11.6vw,230px)/.9 var(--display);letter-spacing:-.04em;display:flex;align-items:center;gap:.12em;white-space:nowrap}
.stage h2 .w{display:inline-block;overflow:hidden;padding:.05em 0 .22em;margin:-.05em 0 -.22em}
.stage h2 .w>span{display:block;translate:0 105%;transition:translate 1.1s cubic-bezier(.16,1,.3,1)}
.stage h2 .w:last-child>span{transition-delay:.08s}
.stage h2 .tile{--s:.95em;font-size:inherit;scale:0;transition:scale .9s cubic-bezier(.16,1,.3,1) .2s}
.stage h2 .tile .g{font-size:calc(var(--s)*.46)}
.stage.in h2 .w>span{translate:0 0}
.stage.in h2 .tile{scale:1}
.cases{list-style:none;position:relative;margin-top:-14svh;padding-bottom:clamp(4rem,12svh,8rem);display:grid;row-gap:clamp(5rem,20svh,13rem)}
.cases li{position:relative;width:var(--a-w,56%);margin-left:var(--a-x,0)}
.cases li:nth-child(2n){width:var(--b-w,32%);margin-left:var(--b-x,68%)}
.poster{display:block;position:relative;aspect-ratio:4/3;border-radius:clamp(.75rem,1.4vw,1.25rem);overflow:hidden;container-type:inline-size;padding:4.4cqw;text-decoration:none;translate:0 calc(var(--p,0)*1px);rotate:calc(var(--v,0)*1.2deg);will-change:translate}
.poster>*{transition:scale .9s cubic-bezier(.16,1,.3,1)}
.cases li.is-hovered .poster>.shot{scale:1.04}
.poster .ptitle{font:800 8.6cqw/.95 var(--display);letter-spacing:-.05em;max-width:62%}
.poster .psub{font:400 2.7cqw/1.3 var(--body);margin-top:1.6cqw;opacity:.75;max-width:60%}
.poster .by{position:absolute;right:4.4cqw;top:4.4cqw;text-align:right;font-size:1.9cqw;line-height:1.3;opacity:.8}
.poster .shot{position:absolute;left:4.4cqw;bottom:0;height:58%;width:calc(100% - 8.8cqw);border-radius:1.6cqw 1.6cqw 0 0;object-fit:cover;object-position:top;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 3cqw 7cqw rgba(0,0,0,.28)}
.cursor-tag{position:absolute;left:var(--tag-x,50%);top:var(--tag-y,50%);z-index:2;display:flex;align-items:center;gap:.5em;padding:.7em 1.1em;border-radius:999px;background:var(--accent);color:#fff;font:500 15px/1 var(--body);white-space:nowrap;pointer-events:none;translate:.9rem 1.1rem;scale:.6;opacity:0;transform-origin:0 0;transition:scale .45s cubic-bezier(.16,1,.3,1),opacity .25s,left .18s ease-out,top .18s ease-out}
.is-hovered>.cursor-tag{scale:1;opacity:1}
.work .more{position:relative;display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap;color:#8d8b86;padding-bottom:6vh}
.work .more a{color:#0b0a09;font:500 18px var(--body);border-bottom:2px solid #0b0a09;text-decoration:none;padding-bottom:2px}
.work__caption{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:var(--a-w,60%) 1fr;padding:113px var(--gut) 36px;margin-inline:calc(var(--gut)*-1);background:linear-gradient(to top,#fff 58%,transparent);pointer-events:none;opacity:0;translate:0 24px;transition:opacity .4s,translate .6s cubic-bezier(.16,1,.3,1)}
.work__caption.is-on{opacity:1;translate:0 0}
.work__caption-name{font:700 clamp(2.4rem,4.4vw,5.5rem)/.95 var(--display);letter-spacing:-.045em}
.work__caption-desc{color:#8d8b86;font-size:clamp(16px,1.3vw,20px);max-width:34rem;margin-top:12px;line-height:1.4}
.work__caption-side{display:grid;align-content:end;justify-items:end;text-align:right;gap:12px;font-size:15px}
.work__caption-side a{pointer-events:auto;font-size:17px;border-bottom:1.5px solid #0b0a09;padding-bottom:2px;text-decoration:none;color:#0b0a09}
@media(max-width:900px){
  .stage{position:static;height:auto;padding:14vh 0 6vh}
  .stage h2{font-size:12vw}
  .cases{margin-top:0}
  .cases li,.cases li:nth-child(2n){width:100%;margin-left:0}
  .cases li:nth-child(2n){width:72%;margin-left:28%}
  .poster .ptitle,.poster .psub{max-width:100%}.poster .by{display:none}
  .work__caption{grid-template-columns:1fr;gap:10px}.work__caption-side{justify-items:start;text-align:left}
}
@media(prefers-reduced-motion:reduce){.poster{translate:none;rotate:none}.stage h2 .w>span{translate:0 0}.stage h2 .tile{scale:1}}

/* ---------- dark sections ---------- */
.dark{background:var(--black);padding:16vh var(--gut) 14vh}
.bighead{font:900 clamp(44px,10vw,190px)/1 var(--display);letter-spacing:-.055em;display:flex;align-items:center;gap:.14em;white-space:nowrap}
.bighead .tile{--s:.98em;font-size:inherit}
.bighead .tile .g{font-size:calc(var(--s)*.46)}
.statement{font:400 clamp(30px,4.6vw,76px)/1.08 var(--display);letter-spacing:-.05em;max-width:15em;margin:10vh 0 12vh}
.statement span{opacity:.2;transition:opacity .25s}
.statement span.on{opacity:1}
.steps{list-style:none;border-top:1px solid #2a2927;margin-bottom:10vh}
.steps li{display:grid;grid-template-columns:90px 1fr 1.1fr;gap:20px 40px;padding:34px 0;border-bottom:1px solid #2a2927;align-items:start}
.steps .n{color:var(--accent);font:500 16px var(--body);padding-top:.7em}
.steps h3{font:600 clamp(28px,3.6vw,56px)/1 var(--display);letter-spacing:-.05em}
.steps p{color:#a3a19b;font-size:18px;max-width:34em}
@media(max-width:800px){.steps li{grid-template-columns:1fr}}
.ai-photo{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.ai-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.ai-photo p{font:400 clamp(20px,2vw,30px)/1.3 var(--display);letter-spacing:-.03em;color:#cfcdc7}
@media(max-width:800px){.ai-photo{grid-template-columns:1fr}}

/* ---------- about (white) ---------- */
.about{background:#fff;color:#0b0a09;padding:16vh var(--gut) 10vh}
.about .bighead .tile{--s:.98em}
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:60px;margin-top:9vh;align-items:start}
.about-grid .portrait{width:100%;aspect-ratio:4/5;border-radius:22px;background:linear-gradient(160deg,#1c1b19,#0b0a09);position:relative;overflow:hidden}
.about-grid .portrait::after{content:"Nhat.";position:absolute;left:24px;bottom:18px;font:900 clamp(60px,9vw,150px)/1 var(--display);letter-spacing:-.07em;color:#fff}
.about p{font:400 clamp(22px,2.3vw,34px)/1.22 var(--display);letter-spacing:-.04em;margin-bottom:22px;max-width:24em}
.about p.sm{font:400 18px/1.55 var(--body);letter-spacing:0;color:#5b5a56;max-width:34em}
.facts{margin-top:40px;border-top:1px solid #dcdad5}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #dcdad5}
.facts dt{color:#8d8b86;font-size:15px}
.facts dd{font-weight:500}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- working together ---------- */
.together{background:#fff;color:#0b0a09;padding:6vh var(--gut) 14vh}
.together h2,.price h2{font:900 clamp(40px,7vw,130px)/.98 var(--display);letter-spacing:-.055em;margin-bottom:7vh}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cards article{background:var(--soft);border-radius:20px;padding:26px 24px 34px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.cards h3{font:700 clamp(24px,2.2vw,34px)/1 var(--display);letter-spacing:-.045em}
.cards p{color:#6b6a65;font-size:16px;margin-top:40px}
@media(max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

/* ---------- services ---------- */
.price{background:#fff;color:#0b0a09;padding:0 var(--gut) 16vh}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pk article{border:1.5px solid #0b0a09;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px;min-height:380px}
.pk .n{font:500 15px var(--body);color:#8d8b86}
.pk h3{font:800 clamp(34px,3.6vw,56px)/.95 var(--display);letter-spacing:-.06em}
.pk p{color:#5b5a56;font-size:17px}
.pk ul{list-style:none;margin-top:auto;font-size:16px;border-top:1px solid #dcdad5}
.pk li{padding:9px 0;border-bottom:1px solid #dcdad5}
.pk .from{font:500 17px var(--body);display:flex;justify-content:space-between;align-items:center}
.pk .from b{font-weight:500;border-bottom:1.5px solid #0b0a09}
.pk-note{margin-top:22px;color:#8d8b86}
.pk-note a{color:#0b0a09}
@media(max-width:900px){.pk{grid-template-columns:1fr}.pk article{min-height:0}}

/* ---------- contact ---------- */
.contact{background:var(--black);padding:16vh var(--gut) 0}
.contact .bighead{font-size:clamp(44px,12vw,230px);margin-bottom:6vh}
.contact .row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end;padding-bottom:10vh}
.contact p{font:400 clamp(20px,2vw,30px)/1.25 var(--display);letter-spacing:-.03em;color:#cfcdc7;max-width:24em}
.contact .mail{display:block;margin-top:18px;color:#8d8b86;font-size:18px}
.contact .mail a{color:#fff}
footer{border-top:1px solid #2a2927;margin:0 calc(var(--gut)*-1);padding:22px var(--gut) 26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#8d8b86;font-size:15px}
footer nav{display:flex;gap:20px}
footer a{text-decoration:none;color:#fff}

/* reveal */
.rv{opacity:0;translate:0 30px;transition:opacity .8s,translate .8s}
.rv.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;translate:none}.statement span{opacity:1}html{scroll-behavior:auto}}

/* ---------- avatar-flise, logo-fliser og 3D-hover ---------- */
.tile{cursor:pointer}
.tile:hover{filter:brightness(1.05)}
.tile .logo{width:62%;height:62%;border-radius:22%;object-fit:contain}
.tile.avatar{background:linear-gradient(150deg,#fff,#c9c9c9);padding:0;text-decoration:none}
.tile.avatar img{position:absolute;inset:3.5%;width:93%;height:93%;border-radius:20%;object-fit:cover;scale:1.08;translate:calc(var(--rx,0)*-10px) calc(var(--ry,0)*-10px);transition:translate .25s ease-out;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.tile.avatar::after{content:'';position:absolute;inset:3.5%;border-radius:20%;background:linear-gradient(125deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 66%,rgba(255,255,255,.18) 100%);pointer-events:none}
.tile-tag{position:absolute;left:50%;bottom:7%;translate:-50% 8px;z-index:3;background:var(--accent);color:#fff;font:500 clamp(13px,1.3vw,17px)/1 var(--body);padding:.7em 1.1em;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .25s,translate .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.tile.avatar:hover .tile-tag,.tile.avatar:focus-visible .tile-tag{opacity:1;translate:-50% 0}
@media(hover:none){.tile-tag{opacity:1;translate:-50% 0}}
.cta .av,.pill i{overflow:hidden;padding:0}
.cta .av img,.pill i img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.stage h2 .tile:hover{scale:1.06}

/* hero: ni logo-fliser i bånd under teksten */
.hero .t-wp{--s:clamp(56px,5.6vw,84px);left:3vw;bottom:34vh;rotate:-6deg;animation-delay:-1s}
.hero .t-woo{--s:clamp(46px,4.4vw,66px);left:13vw;bottom:44vh;rotate:5deg;animation-delay:-2.5s}
.hero .t-cb{--s:clamp(52px,5vw,76px);left:22vw;bottom:33vh;rotate:-4deg;animation-delay:-4s}
.hero .t-fig{--s:clamp(44px,4.2vw,62px);left:32vw;bottom:43vh;rotate:7deg;animation-delay:-1.7s}
.hero .t-cl{--s:clamp(60px,6vw,90px);left:41vw;bottom:34vh;rotate:-7deg;animation-delay:-3.2s}
.hero .t-gpt{--s:clamp(46px,4.6vw,68px);left:52vw;bottom:44vh;rotate:4deg;animation-delay:-5s}
.hero .t-rm{--s:clamp(52px,5vw,76px);left:61vw;bottom:32vh;rotate:-5deg;animation-delay:-2s}
.hero .t-cf{--s:clamp(44px,4.2vw,62px);left:73vw;bottom:30vh;rotate:6deg;animation-delay:-4.4s}
.hero .t-el{--s:clamp(54px,5.4vw,80px);right:3vw;bottom:33vh;rotate:-4deg;animation-delay:-3.7s}
.hero .tile{z-index:1}
.hero .t-main{z-index:2}
@media(max-width:900px){
  .hero .t-fig,.hero .t-woo,.hero .t-gpt,.hero .t-cf{display:none}
  .hero .t-main{--s:40vw;top:auto;bottom:40vh;right:6vw}
  .hero .t-wp{left:5vw;bottom:36vh}.hero .t-cb{left:5vw;bottom:25vh}.hero .t-cl{left:44vw;bottom:25vh}.hero .t-rm{left:68vw;bottom:25vh}.hero .t-el{right:6vw;bottom:30vh}
}

/* flydende fliser i mørke sektioner */
#ai,.contact{overflow:hidden}
.t-a1{--s:clamp(70px,9vw,140px);right:9vw;top:9vh;rotate:8deg}
.t-a2{--s:clamp(50px,6vw,90px);right:24vw;top:27vh;rotate:-6deg;animation-delay:-2s}
.t-a3{--s:clamp(44px,5vw,76px);right:5vw;top:36vh;rotate:5deg;animation-delay:-4s}
.t-c1{--s:clamp(60px,8vw,120px);right:8vw;top:12vh;rotate:-6deg}
.t-c2{--s:clamp(48px,6vw,90px);right:22vw;top:30vh;rotate:6deg;animation-delay:-3s}
.t-c3{--s:clamp(44px,5vw,76px);right:6vw;top:36vh;rotate:-4deg;animation-delay:-5s}
@media(max-width:900px){.t-a2,.t-a3,.t-c2,.t-c3{display:none}.t-a1,.t-c1{--s:22vw;top:6vh;right:5vw}}

/* 3D-hover på plakater og kort */
.poster{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.poster::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .3s}
.cases li.is-hovered .poster::after{opacity:1}
.cases li.is-hovered .poster{box-shadow:0 40px 70px -30px rgba(0,0,0,.45)}
.tilt3d{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.tilt3d::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(229,83,15,.12),transparent 55%);opacity:0;transition:opacity .3s}
.tilt3d:hover{box-shadow:0 30px 60px -25px rgba(0,0,0,.35)}
.tilt3d:hover::after{opacity:1}

/* portfolio-siden */
.stage-sub{font:400 clamp(16px,1.4vw,20px) var(--body);color:#8d8b86;margin-top:2vh}
.stage--big h2{font-size:clamp(56px,16vw,300px)}