/* Layout: parchment page, 12-column grid, work shown as large soft-cornered plates; the egg mark is the only flourish. */
:root{
  --parchment:#EBEBDF; --sheet:#F4F4EC; --ink:#323232; --muted:#6B6B63; --rule:#D3D3C6;
  --azure:#A9C2E0; --ginger:#E9631A; --on-accent:#FFFFFF;
  color-scheme:light;
  --display:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --body:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gutR:max(16px, env(safe-area-inset-right, 0px));
}

*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--parchment); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ginger); outline-offset:3px; border-radius:4px}
.wrap{max-width:1360px; margin:0 auto; padding-left:calc(var(--gut) + 2vw); padding-right:calc(var(--gutR) + 2vw)}
.label{font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.egg .shell{fill:var(--azure)}
.word path{fill:var(--ink)}

/* header */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--parchment)}
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:9; background:color-mix(in srgb, var(--parchment) 90%, transparent); backdrop-filter:blur(12px)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:18px}
.logo{display:block; height:30px; text-decoration:none}
.logo svg{height:100%; width:auto; display:block}
nav.links{display:flex; gap:clamp(16px,3vw,36px); align-items:center}
nav.links a{text-decoration:none; font-size:15px; font-weight:500; color:var(--muted); transition:color .2s}
nav.links a:hover{color:var(--ink)}
nav.links a.cta{color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; padding:7px 16px}
nav.links a.cta:hover{background:var(--ink); color:var(--parchment)}
/* phone menu: just the three-line icon (44px tap area), turning into an X when open */
.menu-btn{display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; padding:0;
  color:var(--ink); background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent}
.menu-btn i{position:relative; width:24px; height:16px; display:block;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat; transition:background-size .2s}
.menu-btn i::before,.menu-btn i::after{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; transition:transform .25s, top .25s}
.menu-btn i::before{top:0}.menu-btn i::after{top:14px}
header.top.open .menu-btn i{background-size:0 2px}
header.top.open .menu-btn i::before{top:7px; transform:rotate(45deg)}
header.top.open .menu-btn i::after{top:7px; transform:rotate(-45deg)}
@keyframes drop{from{opacity:.0001; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* hero */
.hero{padding-block:clamp(48px,8vw,112px) clamp(48px,7vw,96px)}
.hero-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end}
.hero h1{grid-column:1 / span 9; font-family:var(--display); font-weight:400; font-size:clamp(56px,11vw,168px); line-height:.92; letter-spacing:-.035em; margin:0; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--ginger)}
.hero .mark{grid-column:10 / span 3; justify-self:end; width:min(100%, 220px)}
.hero .mark svg{width:100%; height:auto; display:block}
.hero .mark .wob{position:relative; transform-origin:50% 92%; animation:rock 3.2s ease-in-out 1.6s infinite, knock 5s ease-out 2.6s infinite}
@keyframes rock{0%,37.5%,100%{transform:rotate(0)}7.5%{transform:rotate(-7deg)}15%{transform:rotate(5deg)}22.5%{transform:rotate(-3deg)}30%{transform:rotate(1deg)}}
/* every 5 s something knocks twice from inside: a quick bulge, a little hop, settle. Its own 5 s beat against the
   3.2 s wobble, so the two drift: sometimes the knock lands mid-wobble, sometimes in the still gap */
@keyframes knock{0%,7.8%,9%,15.6%,100%{scale:1; translate:0 0}
  1.8%{scale:1.045 .965; translate:0 0} 3.6%{scale:.975 1.04; translate:0 -4px} 5.4%{scale:1.01 .995; translate:0 0}
  10.2%{scale:1.03 .975; translate:0 0} 12%{scale:.985 1.025; translate:0 -2px} 13.8%{scale:1.005 1; translate:0 0}}
.hero .sub{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; margin-top:clamp(32px,5vw,64px); padding-top:24px; border-top:1px solid var(--rule)}
.hero .sub p{grid-column:1 / span 6; margin:0; font-size:clamp(17px,1.6vw,21px); line-height:1.45; max-width:44ch}
.hero .sub .disc{grid-column:8 / span 5; display:flex; flex-wrap:wrap; gap:8px; align-content:start; justify-content:flex-end}
.chip{font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; background:var(--sheet); border:1px solid var(--rule)}
.anim{animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.anim{animation-delay:.7s}.anim.d2{animation-delay:.78s}.anim.d3{animation-delay:.86s}
@keyframes rise{from{transform:translateY(16px); opacity:.0001}to{transform:none; opacity:1}}

/* section heads */
section{scroll-margin-top:80px}
.shead{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:16px; margin-bottom:32px}
.shead h2{font-family:var(--display); font-weight:400; font-size:clamp(32px,4vw,52px); line-height:1; margin:0; letter-spacing:-.02em}

/* filters */
.filters{display:flex; flex-wrap:wrap; gap:6px}
.filters button{font:500 14px/1 var(--body); color:var(--muted); background:transparent; border:1.5px solid var(--rule); border-radius:999px; padding:9px 15px; cursor:pointer; transition:.2s}
.filters button:hover{color:var(--ink); border-color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--parchment); border-color:var(--ink)}
.filters button span{font-size:11px; margin-left:6px; opacity:.6; font-variant-numeric:tabular-nums}

/* grid */
.work{padding-block:16px 112px}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.4vw,36px) clamp(14px,1.8vw,24px)}
.card{grid-column:span 4; text-decoration:none; display:flex; flex-direction:column; gap:14px; min-width:0}
.card.w6{grid-column:span 6}.card.w8{grid-column:span 8}.card.w4{grid-column:span 4}.card.w3{grid-column:span 3}
.card.w3.row-start{grid-column:1 / span 3}.card.w4.row-start{grid-column:1 / span 4}
.grid{align-items:start}
.cat-head{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-top:1px solid var(--rule); padding-top:18px; margin-top:clamp(16px,3vw,40px)}
.cat-head:first-child{margin-top:0}
.cat-head h3{font:400 clamp(24px,2.6vw,34px)/1.1 var(--display); letter-spacing:-.02em; margin:0}
.cat-head[hidden]{display:none}
.card .plate{aspect-ratio:4/3; max-width:100%; border-radius:18px; overflow:hidden; position:relative; background:var(--sheet)}
.card.w8 .plate, .card.w6 .plate{aspect-ratio:16/10}
.grid.filtered .card{grid-column:span 4}.grid.filtered .card .plate{aspect-ratio:4/3}
.card canvas{width:100%; height:100%; display:block; transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.card:hover canvas{transform:scale(1.04)}
.card .cap{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.card h3{font:500 18px/1.25 var(--display); margin:0; letter-spacing:-.005em}
.card .cap .label{white-space:nowrap; letter-spacing:.08em}
.card .view{position:absolute; right:14px; bottom:14px; font-size:13px; font-weight:600; background:var(--parchment); color:var(--ink); border-radius:999px; padding:7px 13px; opacity:0; transform:translateY(6px); transition:.3s}
.card:hover .view, .card:focus-visible .view{opacity:1; transform:none}

/* about */
.about{padding-block:clamp(64px,8vw,112px); background:var(--azure); color:#323232}
.about .label{color:#4A5566}
.about .shead h2{color:#323232}
.about .cols{display:grid; grid-template-columns:repeat(12,1fr); gap:24px}
.about .big{grid-column:1 / span 7; font-family:var(--display); font-weight:300; font-size:clamp(28px,3.4vw,46px); line-height:1.12; letter-spacing:-.02em; margin:0; text-wrap:balance}
.about .side{grid-column:9 / span 4; display:flex; flex-direction:column; gap:16px; min-width:0}
.about .side p{margin:0; max-width:52ch; color:#2E3742}
.services{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:64px}
.svc{background:rgba(255,255,255,.42); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.svc h3{font-family:var(--display); font-weight:500; font-size:21px; margin:0}
.svc p{margin:0; color:#2E3742; font-size:15px}
.svc ul{list-style:none; padding:0; margin:auto 0 0; padding-top:8px; display:flex; flex-wrap:wrap; gap:6px}
.svc li{font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(50,50,50,.08)}

/* process */
.process{padding-block:clamp(64px,8vw,112px)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; list-style:none; padding:0; margin:0; counter-reset:s}
.steps li{display:flex; flex-direction:column; gap:10px; border-top:1.5px solid var(--ink); padding-top:18px; min-width:0}
.steps li::before{counter-increment:s; content:"0" counter(s); font:500 14px/1 var(--display); color:var(--ginger)}
.steps h3{font-family:var(--display); font-weight:500; font-size:22px; margin:0}
.steps p{margin:0; color:var(--muted); font-size:15px; max-width:34ch}

/* contact */
.contact{padding-block:clamp(56px,7vw,96px); background:var(--ink); color:var(--parchment)}
.contact .label{color:color-mix(in srgb, var(--parchment) 60%, transparent)}
.contact h2{font-family:var(--display); font-weight:400; font-size:clamp(44px,8.5vw,128px); line-height:.95; letter-spacing:-.035em; margin:16px 0 36px; text-wrap:balance}
.contact h2 em{font-style:normal; color:var(--ginger)}
.contact .row{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end}
.contact .mailbox{grid-column:1 / span 7; display:flex; flex-direction:column; gap:14px; min-width:0}
.contact .mail{font-family:var(--display); font-size:clamp(22px,3vw,38px); margin:0; word-break:break-word; user-select:all}
.contact .btns{display:flex; gap:10px; flex-wrap:wrap}
.btn{font:600 14px/1 var(--body); border:1.5px solid var(--ginger); background:var(--ginger); color:var(--on-accent); border-radius:999px; padding:13px 20px; cursor:pointer; text-decoration:none}
.btn.ghost{background:transparent; border-color:currentColor; color:inherit}
.contact .info{grid-column:9 / span 4; display:flex; flex-direction:column; gap:14px; min-width:0}
.contact .socials{display:flex; gap:12px; flex-wrap:wrap}
.contact .socials a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-10px 0 0 -10px;
  color:var(--parchment); text-decoration:none; transition:color .2s ease, transform .25s cubic-bezier(.3,1.6,.5,1)}
.contact .socials a svg{width:24px; height:24px; fill:currentColor; display:block}
.contact .socials a:hover, .contact .socials a:focus-visible{color:var(--ginger); transform:translateY(-3px)}
footer{background:var(--ink); color:var(--parchment)}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-block:32px 40px; border-top:1px solid color-mix(in srgb, var(--parchment) 15%, transparent)}
footer .label{color:color-mix(in srgb, var(--parchment) 55%, transparent)}
footer .seal{width:clamp(104px,11vw,136px); height:auto; display:block; flex:none}
.seal .ring{transform-box:view-box; transform-origin:50% 50%; animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
footer .wrap{flex-wrap:nowrap}
footer .foot-r{min-width:0; display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right}
footer .top-link{font-size:15px; font-weight:500; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--parchment) 35%, transparent)}

/* project overlay */
.overlay{position:fixed; inset:0; z-index:20; background:var(--parchment); overflow-y:auto; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.overlay .bar{position:sticky; top:0; background:var(--parchment); z-index:2}
.overlay .bar .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:16px; gap:16px}
.overlay .x{font:600 14px/1 var(--body); background:none; border:1.5px solid var(--ink); color:var(--ink); border-radius:999px; padding:10px 16px; cursor:pointer}
.p-head{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding-block:40px 32px}
.p-head .label{grid-column:1 / -1; color:var(--ginger)}
.p-head h2{grid-column:1 / span 7; font-family:var(--display); font-weight:400; font-size:clamp(38px,5.4vw,80px); line-height:.98; letter-spacing:-.03em; margin:0; text-wrap:balance}
.p-head .desc{grid-column:8 / span 5; color:var(--muted); margin:0; align-self:end; max-width:52ch; font-size:17px}
.specs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border-block:1px solid var(--rule); padding-block:18px; margin-bottom:28px}
.specs div{display:flex; flex-direction:column; gap:4px; min-width:0}
.specs b{font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; padding-bottom:56px}
.gallery .g{grid-column:span 12; aspect-ratio:16/8; max-width:100%; background:var(--sheet); border-radius:18px; overflow:hidden}
.gallery .g.half{grid-column:span 6; aspect-ratio:4/5}
.gallery canvas{width:100%; height:100%; display:block}
/* more projects: previous / next in this category, then the other categories */
.p-nav{padding:8px 0 72px; display:grid; gap:36px}
.p-steps{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.p-steps.one{grid-template-columns:1fr}
.p-step{display:flex; flex-direction:column; gap:8px; padding:26px 0; text-decoration:none; color:var(--ink); min-width:0}
.p-step b{font:500 clamp(22px,2.6vw,34px)/1.15 var(--display); transition:color .2s}
.p-step:hover b, .p-step:focus-visible b{color:var(--ginger)}
.p-step.next{text-align:right; align-items:flex-end}
.p-steps:not(.one) .p-step.next{border-left:1px solid var(--rule); padding-left:24px}
.p-steps:not(.one) .p-step.prev{padding-right:24px}
.p-cats{display:flex; flex-direction:column; gap:14px}
.p-cats > div{display:flex; flex-wrap:wrap; gap:10px}
.p-cats .btn.ghost{color:var(--ink); border-color:var(--ink); transition:background .2s, color .2s, border-color .2s}
.p-cats .btn.ghost:hover, .p-cats .btn.ghost:focus-visible{background:var(--ginger); border-color:var(--ginger); color:#fff}
@media (max-width:640px){
  .p-steps{grid-template-columns:1fr}
  .p-steps:not(.one) .p-step.next{border-left:0; border-top:1px solid var(--rule); padding-left:0}
  .p-steps:not(.one) .p-step.prev{padding-right:0}
}

@media (max-width:900px){
  .card, .card.w3, .card.w4, .card.w6, .card.w8, .grid.filtered .card{grid-column:span 6}
  .card.tall.w3{grid-column:span 4}
  .card.tall.row-start{grid-column:1 / span 6}.card.tall.w3.row-start{grid-column:1 / span 4}
  .hero h1{grid-column:1 / -1}.hero .mark{grid-column:1 / -1; justify-self:start; width:120px; order:-1}
  .hero .sub p,.hero .sub .disc{grid-column:1 / -1; justify-content:flex-start}
  .about .big,.about .side{grid-column:1 / -1}
  .services,.steps{grid-template-columns:repeat(2,1fr)}
  .contact .mailbox,.contact .info{grid-column:1 / -1}
  .p-head h2,.p-head .desc{grid-column:1 / -1}
  .specs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .menu-btn{display:inline-flex}
  nav.links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--parchment); border-bottom:1px solid var(--rule); box-shadow:0 18px 30px -20px rgba(0,0,0,.25); padding-block:4px 20px; padding-left:calc(var(--gut) + 2vw); padding-right:calc(var(--gutR) + 2vw)}
  header.top.open nav.links{display:flex; animation:drop .25s ease-out both}
  nav.links a{font-family:var(--display); font-size:24px; color:var(--ink); padding-block:14px; border-bottom:1px solid var(--rule)}
  nav.links a.cta{border:0; border-radius:0; padding:14px 0 0; color:var(--ginger)}
  nav.links a.cta:hover{background:none; color:var(--ginger)}
  .logo{height:26px}
  .card, .card.w3, .card.w4, .card.w6, .card.w8, .grid.filtered .card{grid-column:1 / -1}
  .card.tall, .card.tall.w3{grid-column:span 6}
  .card.tall.row-start, .card.tall.w3.row-start{grid-column:1 / span 6}
  .card.tall .cap{flex-direction:column; gap:2px}
  .services,.steps{grid-template-columns:1fr}
  .gallery .g.half{grid-column:1 / -1}
}
/* charcoal top band: header + hero, matching the contact/footer */
body::before{background:#323232}
header.top{background:#323232; backdrop-filter:none}
header.top .word path{fill:#EBEBDF}
header.top nav.links a{color:rgba(235,235,223,.7)}
header.top nav.links a:hover{color:#EBEBDF}
header.top nav.links a.cta{color:#EBEBDF; border-color:#EBEBDF}
header.top nav.links a.cta:hover{background:#EBEBDF; color:#323232}
header.top .menu-btn{color:#EBEBDF}
.hero{background:#323232; color:#EBEBDF}
.hero .sub{border-top-color:rgba(235,235,223,.16)}
.hero .sub p{color:rgba(235,235,223,.85)}
.hero .chip{background:rgba(235,235,223,.06); border-color:rgba(235,235,223,.18); color:#EBEBDF}
.work{padding-top:clamp(56px,7vw,96px)}
@media (max-width:600px){
  header.top nav.links{background:#323232; border-bottom-color:rgba(235,235,223,.16)}
  header.top nav.links a{color:#EBEBDF; border-bottom-color:rgba(235,235,223,.16)}
  header.top nav.links a.cta, header.top nav.links a.cta:hover{color:#E9631A; background:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} html{scroll-behavior:auto}}

/* real images and videos */
.card .plate img, .card .plate video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.card:hover .plate img, .card:hover .plate video{transform:scale(1.04)}
.card .plate img.fit{object-fit:contain; position:relative; z-index:1}   /* tall covers shown whole... */
.card .cover-fill{position:absolute; inset:-8%; background:center/cover no-repeat; filter:blur(22px); pointer-events:none}
.card .view, .card .play{z-index:2}   /* ...over a blurred copy of themselves */
.card .cover-fill[hidden]{display:none}
.gallery figure{margin:0}
.gallery .g.real{aspect-ratio:auto; background:none; display:flex; flex-direction:column; gap:8px}
.gallery .g.real img, .gallery .g.real video{width:auto; max-width:100%; max-height:85vh; height:auto; margin-inline:auto; display:block; border-radius:18px; background:var(--sheet)}
.gallery .g.embed{aspect-ratio:16/9; background:#000}
.gallery .g.embed iframe{width:100%; height:100%; border:0; display:block}
.contact .place{margin:0}
.gallery .g.embed.half{aspect-ratio:16/9}
.card .play{position:absolute; left:14px; bottom:14px; width:44px; height:44px; border-radius:50%; background:#E9631A; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .3s}
.card .play svg{width:18px; height:18px; fill:#fff; margin-left:2px}
.card:hover .play{transform:scale(1.08)}
/* Keep the two signature animations (egg wobble, rotating copyright seal) even when "reduce motion" is on */
@media (prefers-reduced-motion:reduce){
  .hero .mark .wob{animation:rock 3.2s ease-in-out 1.6s infinite, knock 5s ease-out 2.6s infinite!important}
  .seal .ring{animation:spin 40s linear infinite!important}
}

/* ---------- intro: the egg cracks open, then the site appears ---------- */
#intro{position:fixed; inset:0; z-index:100; display:grid; place-items:center; pointer-events:none;
  animation:introOut .1s linear .9s forwards}
#intro .shell-wrap{position:relative; width:min(30vw,128px); aspect-ratio:470/580; transform-origin:50% 90%;
  animation:introWobble 1s ease-in-out 0s forwards}
#intro .half{position:absolute; inset:0}
#intro .whole{animation:hideWhole 0s linear .3s forwards}
@keyframes hideWhole{to{visibility:hidden}}
#intro .half svg{width:100%; height:100%; display:block; overflow:visible}
#intro .top{clip-path:polygon(0 0,100% 0,100% 53%,84% 47%,68% 56%,52% 46%,36% 56%,20% 47%,0 54%);
  animation:crackTop .5s cubic-bezier(.45,0,.55,1) .3s forwards}
#intro .bot{clip-path:polygon(0 54%,20% 47%,36% 56%,52% 46%,68% 56%,84% 47%,100% 53%,100% 100%,0 100%);
  animation:crackBot .5s cubic-bezier(.45,0,.55,1) .3s forwards}
@keyframes introWobble{0%{transform:rotate(0)}12%{transform:rotate(-8deg)}30%{transform:rotate(6deg)}55%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes crackTop{0%{transform:none}100%{transform:translate(-18%,-70%) rotate(-24deg); opacity:0}}
@keyframes crackBot{0%{transform:none}100%{transform:translate(10%,55%) rotate(14deg); opacity:0}}
@keyframes introOut{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  #intro{animation:introOut .1s linear .9s forwards!important}
  #intro .curtain{animation:introHole .38s cubic-bezier(.6,0,.9,.45) .62s forwards!important}
  #intro .yolk{animation:yolkFall .7s linear .3s forwards!important}
  #intro .splash i{animation:dropSplash .37s cubic-bezier(.2,.7,.35,1) .61s forwards!important}
  #intro .shell-wrap{animation:introWobble 1s ease-in-out 0s forwards!important}
  #intro .whole{animation:hideWhole 0s linear .3s forwards!important}
  #intro .top{animation:crackTop .5s cubic-bezier(.45,0,.55,1) .3s forwards!important}
  #intro .bot{animation:crackBot .5s cubic-bezier(.45,0,.55,1) .3s forwards!important}
}

/* yolk drops out of the cracked egg (seen from above) and splashes open the page like liquid */
@property --hole{syntax:"<length>"; inherits:false; initial-value:0px}
#intro .curtain{position:absolute; inset:0; background:#323232;
  -webkit-mask:radial-gradient(circle at 50% 50%, #0000 var(--hole), #000 calc(var(--hole) + .5px));
          mask:radial-gradient(circle at 50% 50%, #0000 var(--hole), #000 calc(var(--hole) + .5px));
  animation:introHole .38s cubic-bezier(.6,0,.9,.45) .62s forwards}
@keyframes introHole{to{--hole:150vmax}}
#intro .shell-wrap{z-index:2}
#intro .goo-defs{position:absolute; width:0; height:0}
/* the "goo" filter melts the yolk and its droplets together so they read as one liquid */
#intro .splash{position:absolute; left:50%; top:50%; z-index:3; width:320px; height:320px;
  transform:translate(-50%,-50%); filter:url(#goo)}
#intro .splash > *{position:absolute; left:50%; top:50%; border-radius:50%}
/* top-down: the yolk pops toward you, drops away (shrinks) onto the page, then spreads into a wobbling puddle.
   Size is animated (not scaled) so the small highlight dot stays small. Flat colours only, no shading. */
#intro .yolk{width:42px; height:42px; opacity:0; transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='138 253 470 470'%3E%3Cpath fill='%23FFDEBA' transform='rotate(-90 373 385)' d='M392 485C403 478 409 459 409 434C409 415 406 397 399 376C394 363 392 358 385 352C376 343 367 341 360 347C353 352 353 358 357 373C362 395 364 416 362 446L361 468L363 473C369 486 382 492 392 485ZM363 317C368 313 370 309 370 302C369 288 356 276 348 279C344 280 340 285 339 290C337 296 338 307 341 311C345 319 356 322 363 317Z'/%3E%3C/svg%3E") center/contain no-repeat #EC6E22;   /* flat yolk; highlight is the Voja egg's "i", lying on its side */
  animation:yolkFall .7s linear .3s forwards}
@keyframes yolkFall{
  0%{opacity:0; width:18px; height:18px; animation-timing-function:ease-out}
  5%{opacity:1}
  12%{opacity:1; width:50px; height:50px; animation-timing-function:cubic-bezier(.5,0,1,1)}
  43%{opacity:1; width:30px; height:30px; border-radius:50%; animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  53%{opacity:1; width:45px; height:40px; border-radius:58% 42% 55% 45% / 46% 56% 44% 54%; animation-timing-function:ease-in-out}
  65%{opacity:1; width:56px; height:58px; border-radius:44% 56% 47% 53% / 57% 43% 58% 42%; animation-timing-function:ease-in-out}
  78%{opacity:1; width:50px; height:49px; border-radius:53% 47% 58% 42% / 45% 55% 46% 54%; animation-timing-function:ease-in-out}
  88%{opacity:1; width:53px; height:51px; border-radius:49% 51% 52% 48% / 52% 48% 51% 49%}
  100%{opacity:1; width:0px; height:0px; border-radius:50%}}
/* droplets are flung out of the puddle's edge on liquid strands, snap off into separate pieces, then soak into the page */
#intro .splash i{width:var(--s,18px); height:var(--s,18px); background:#EC6E22; opacity:0;
  transform:translate(-50%,-50%); animation:dropSplash .37s cubic-bezier(.2,.7,.35,1) .61s forwards}
#intro .splash i:nth-child(2){--dx:-43px; --dy:-10px; --s:15px}
#intro .splash i:nth-child(5){--dx:32px;  --dy:-32px; --s:14px}
#intro .splash i:nth-child(7){--dx:24px;  --dy:38px;  --s:16px}
#intro .splash i:nth-child(9){--dx:-32px; --dy:32px;  --s:13px}
#intro .splash i:nth-child(3), #intro .splash i:nth-child(4), #intro .splash i:nth-child(6), #intro .splash i:nth-child(8){display:none}
@keyframes dropSplash{
  0%{opacity:1; transform:translate(calc(-50% + var(--dx)*.3),calc(-50% + var(--dy)*.3)) scale(.6)}
  40%{opacity:1; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1)}
  65%{opacity:1; transform:translate(calc(-50% + var(--dx)*1.28),calc(-50% + var(--dy)*1.28)) scale(.95)}
  85%{opacity:1; transform:translate(calc(-50% + var(--dx)*1.36),calc(-50% + var(--dy)*1.36)) scale(.9)}
  100%{opacity:1; transform:translate(calc(-50% + var(--dx)*1.38),calc(-50% + var(--dy)*1.38)) scale(0)}}

/* ---------- pull-to-refresh egg (phones): pull down to crack it, release to reload ---------- */
html, body{overscroll-behavior-y:none}
#ptr{position:fixed; left:50%; top:env(safe-area-inset-top,0px); z-index:50; pointer-events:none;
  transform:translate(-50%,-64px)}
#ptr.release{transition:transform .35s cubic-bezier(.2,.9,.3,1.15)}
#ptr .ptr-egg{position:relative; width:40px; aspect-ratio:470/580; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
#ptr .ptr-part{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
#ptr .ptr-top, #ptr .ptr-bot{visibility:hidden}
#ptr .ptr-top{clip-path:polygon(0 0,100% 0,100% 53%,84% 47%,68% 56%,52% 46%,36% 56%,20% 47%,0 54%)}
#ptr .ptr-bot{clip-path:polygon(0 54%,20% 47%,36% 56%,52% 46%,68% 56%,84% 47%,100% 53%,100% 100%,0 100%)}
/* crack: a filled shape drawn by JS (crackShape) - full width at the start, tapering to a point at the growing tip */
#ptr .ptr-crack .crack-line{fill:#323232}
#ptr.ready .ptr-egg{animation:ptrShake .18s linear infinite}
@keyframes ptrShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
#ptr.cracked .ptr-egg{animation:none}
#ptr.cracked .ptr-whole, #ptr.cracked .ptr-crack{visibility:hidden}
#ptr.cracked .ptr-top, #ptr.cracked .ptr-bot{visibility:visible}
#ptr.cracked .ptr-top{animation:ptrTop .38s cubic-bezier(.45,0,.55,1) forwards}
#ptr.cracked .ptr-bot{animation:ptrBot .38s cubic-bezier(.45,0,.55,1) forwards}
@keyframes ptrTop{to{transform:translate(-30%,-80%) rotate(-28deg)}}
@keyframes ptrBot{to{transform:translate(20%,70%) rotate(18deg)}}
@media (prefers-reduced-motion:reduce){
  #ptr.release{transition:transform .35s cubic-bezier(.2,.9,.3,1.15)!important}
  #ptr.ready .ptr-egg{animation:ptrShake .18s linear infinite!important}
  #ptr.cracked .ptr-egg{animation:none!important}
  #ptr.cracked .ptr-top{animation:ptrTop .38s cubic-bezier(.45,0,.55,1) forwards!important}
  #ptr.cracked .ptr-bot{animation:ptrBot .38s cubic-bezier(.45,0,.55,1) forwards!important}
}

/* ---------- the egg that watches you + the hidden yolk (tap the egg 5 times) ---------- */
.hero .mark{pointer-events:auto}
.hero .mark .watch{will-change:transform; cursor:pointer; -webkit-tap-highlight-color:transparent}
.hero .mark .tap{position:relative}
.hero .mark .h-part{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.hero .mark .h-top, .hero .mark .h-bot{visibility:hidden}
.hero .mark .h-top{clip-path:polygon(0 0,100% 0,100% 53%,84% 47%,68% 56%,52% 46%,36% 56%,20% 47%,0 54%); transform-origin:12% 52%}
.hero .mark .h-bot{clip-path:polygon(0 54%,20% 47%,36% 56%,52% 46%,68% 56%,84% 47%,100% 53%,100% 100%,0 100%)}
.hero .mark .h-crack .crack-line{fill:#323232}
.hero .mark.open .egg, .hero .mark.open .h-crack{visibility:hidden}
.hero .mark.open .h-top, .hero .mark.open .h-bot{visibility:visible}
.hero .mark.open .wob{animation-play-state:paused}
.yolk-splat{position:absolute; z-index:8; width:240px; height:240px; pointer-events:none}
.yolk-splat .goo{position:absolute; inset:0; filter:url(#goo2)}
.yolk-splat .goo > *{position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%)}
.yolk-splat .ylabel{position:absolute; left:50%; top:50%; width:80px; height:48px; transform:translate(-50%,-50%); opacity:0; pointer-events:none; overflow:visible}
.yolk-splat .ylabel text{font:600 10.5px/1 var(--display); letter-spacing:.02em; fill:#FFF1DE}
.yolk-splat .puddle{width:24px; height:24px; pointer-events:auto; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='138 253 470 470'%3E%3Cpath fill='%23FFDEBA' transform='rotate(-90 373 385)' d='M392 485C403 478 409 459 409 434C409 415 406 397 399 376C394 363 392 358 385 352C376 343 367 341 360 347C353 352 353 358 357 373C362 395 364 416 362 446L361 468L363 473C369 486 382 492 392 485ZM363 317C368 313 370 309 370 302C369 288 356 276 348 279C344 280 340 285 339 290C337 296 338 307 341 311C345 319 356 322 363 317Z'/%3E%3C/svg%3E") 9% 46%/34% auto no-repeat #EC6E22}   /* flat yolk; highlight is the Voja egg's "i", lying on its side */
.yolk-splat i{width:var(--s,12px); height:var(--s,12px); background:#EC6E22; opacity:0}

/* ---------- projects that hatch ---------- */
.card.hatch .hatch-in, .card.hatch .shell{position:absolute; inset:0}
.card.hatch .hatch-in canvas, .card.hatch .hatch-in video{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.1); transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.card.hatch.hatched .hatch-in canvas, .card.hatch.hatched .hatch-in video{transform:scale(1)}
.card.hatch .shell{z-index:1; transition:transform .5s cubic-bezier(.6,0,.3,1)}
.card.hatch .shell canvas, .card.hatch .shell img, .card.hatch .shell video{width:100%; height:100%; object-fit:cover; display:block}
.card.hatch:hover .shell canvas, .card.hatch:hover .shell img, .card.hatch:hover .shell video{transform:none}
/* the top half overlaps the bottom by a hair so no thin seam shows on the closed card */
.card.hatch .s-top{clip-path:polygon(0 0,100% 0,100% 53.4%,88% 47.4%,75% 56.4%,62% 46.4%,50% 55.4%,38% 45.4%,25% 56.4%,12% 46.4%,0 52.4%)}
.card.hatch .s-bot{clip-path:polygon(0 52%,12% 46%,25% 56%,38% 45%,50% 55%,62% 46%,75% 56%,88% 47%,100% 53%,100% 100%,0 100%)}
.card.hatch.hatched .s-top{transform:translateY(-102%)}
.card.hatch.hatched .s-bot{transform:translateY(102%)}
/* the crack draws across first, then the halves part, each carrying its side of the line;
   on the way back the halves close first and the crack heals after */
.card-crack{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.card-crack polyline{fill:none; stroke:#E9631A; stroke-width:5; vector-effect:non-scaling-stroke; stroke-linejoin:round;
  stroke-dasharray:3000; stroke-dashoffset:3000; transition:stroke-dashoffset .2s ease-in .5s}
.card.hatch.hatched .card-crack polyline{stroke-dashoffset:0; transition:stroke-dashoffset .18s ease-out}
.card.hatch.hatched .shell{transition-delay:.18s}
.card.hatch .play, .card.hatch .view{z-index:3}

/* ---------- before / after slider ---------- */
.gallery .g.compare{position:relative; grid-column:span 12; aspect-ratio:16/9; max-width:100%; overflow:hidden; border-radius:18px; background:var(--sheet)}
.compare .cmp-before, .compare .cmp-after{position:absolute; inset:0}
.compare canvas, .compare img, .compare video{width:100%; height:100%; object-fit:cover; display:block}
.compare .cmp-after{clip-path:inset(0 0 0 var(--pos))}
.compare canvas.clay{filter:grayscale(1) contrast(.92) brightness(1.08)}
.compare .cmp-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff; pointer-events:none}
.compare .cmp-handle::after{content:"\2039\00a0\203A"; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%);
  border-radius:50%; background:#E9631A; color:#fff; font:600 18px/42px var(--body); text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.2)}
.compare .cmp-label{position:absolute; top:14px; z-index:1; font:600 11px/1 var(--body); letter-spacing:.1em; text-transform:uppercase;
  color:#EBEBDF; background:rgba(50,50,50,.72); padding:7px 10px; border-radius:999px; pointer-events:none}
.compare .cmp-label.l{left:14px} .compare .cmp-label.r{right:14px}
.compare .cmp-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y}
.compare:has(.cmp-range:focus-visible) .cmp-handle::after{outline:2px solid #fff; outline-offset:3px}

/* ---------- shell-crack page transition ---------- */
#crackfx{position:fixed; inset:0; width:100%; height:100%; z-index:30; pointer-events:none; opacity:0}
#crackfx polyline{fill:none; visibility:hidden; stroke:#E9631A; stroke-width:3; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-dasharray:4000; stroke-dashoffset:4000}
#crackfx .rim{stroke-dasharray:none; stroke-dashoffset:0}

/* ---------- scroll depth: keep the drifting hero layers inside the hero ---------- */
.hero{position:relative; overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .card.hatch .shell{transition:transform .5s cubic-bezier(.6,0,.3,1)!important}
  .card.hatch.hatched .shell{transition-delay:.18s!important}
  .card.hatch .hatch-in canvas, .card.hatch .hatch-in video{transition:transform 1.2s cubic-bezier(.2,.7,.1,1)!important}
  .card-crack polyline{transition:stroke-dashoffset .2s ease-in .5s!important}
  .card.hatch.hatched .card-crack polyline{transition:stroke-dashoffset .18s ease-out!important}
}

/* ---------- showreel ---------- */
.reel{padding-top:clamp(8px,2vw,24px); padding-bottom:clamp(40px,6vw,88px); scroll-margin-top:72px}
.reel-win{position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden; cursor:pointer; isolation:isolate}
.reel-media{position:absolute; inset:0; will-change:transform}
.reel-media iframe{position:absolute; top:50%; left:50%; width:100%; height:100%; border:0; pointer-events:none; transform:translate(-50%,-50%) scale(1.22)}
.reel-media video, .reel-poster, .reel-poster img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.reel-poster{transition:opacity .8s ease}
.reel-poster.gone{opacity:0}
.reel-play{position:absolute; left:20px; bottom:20px; z-index:2; display:inline-flex; align-items:center; gap:8px; margin:0;
  padding:10px 16px 10px 12px; border:0; border-radius:999px; background:var(--ginger); color:#fff; cursor:pointer;
  font:600 13px/1 var(--body); letter-spacing:.02em; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transform:translateY(12px); opacity:0; transition:transform .4s cubic-bezier(.3,1.4,.5,1), opacity .3s ease}
.reel-play svg{width:14px; height:14px; fill:currentColor; display:block}
.reel-win.open .reel-play{transform:none; opacity:1}
.reel-win.open:hover .reel-play{transform:translateY(-2px)}
.reel-win.open:active .reel-play{transform:scale(.96)}
.reel-cap{display:flex; justify-content:space-between; gap:16px; margin-top:14px}
.reel-ov{position:fixed; inset:0; z-index:20; background:var(--ink); display:flex; align-items:center; justify-content:center;
  padding:72px calc(var(--gutR) + 2vw) 32px calc(var(--gut) + 2vw)}
.reel-ov .x{position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:calc(var(--gutR) + 2vw); font:600 14px/1 var(--body); background:none;
  border:1.5px solid var(--parchment); color:var(--parchment); border-radius:999px; padding:10px 16px; cursor:pointer}
.reel-frame{width:min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000}
.reel-frame iframe{width:100%; height:100%; border:0; display:block}
@media (max-width:640px){ .reel-play{left:12px; bottom:12px; padding:8px 13px 8px 10px; font-size:12px} .reel-play svg{width:12px; height:12px} }
@media (prefers-reduced-motion:reduce){
  .reel-play{transition:transform .4s cubic-bezier(.3,1.4,.5,1), opacity .3s ease!important}
  .reel-poster{transition:opacity .8s ease!important}
}

/* service cards lean toward the mouse (js); the leaning card sits above its neighbours */
.services{position:relative}
.svc{position:relative; will-change:transform}
.svc.leaning{z-index:2}

/* the egg and the yolk are toys, not text: never select or highlight them (or nearby text) when tapped */
.hero .mark, .yolk-splat, .yolk-splat *{-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none}

/* synced wireframe / render video slider */
.compare.videos video{width:100%; height:100%; object-fit:cover; display:block; background:#1b1b1b}
.compare .cmp-sound{position:absolute; right:14px; bottom:14px; z-index:3; width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(50,50,50,.72); color:#EBEBDF; cursor:pointer; transition:background .2s, transform .2s}
.compare .cmp-sound svg{width:22px; height:22px; fill:currentColor}
.compare .cmp-sound:hover{transform:scale(1.06)}
.compare .cmp-sound[aria-pressed="true"]{background:var(--ginger); color:#fff}

/* ---------- contact form ---------- */
.contact .row{align-items:start}
.cform{grid-column:1 / span 7; display:flex; flex-direction:column; gap:22px; min-width:0}
.cform .f2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.cform label{display:flex; flex-direction:column; gap:8px; min-width:0}
.cform input[type=text],.cform input[type=email],.cform textarea{font:500 16px/1.5 var(--body); color:var(--parchment); background:transparent; border:0; border-bottom:1.5px solid color-mix(in srgb, var(--parchment) 35%, transparent); border-radius:0; padding:8px 0 10px; outline:none; transition:border-color .25s; width:100%; box-sizing:border-box}
.cform textarea{resize:vertical; min-height:120px}
.cform input:focus,.cform textarea:focus{border-color:var(--ginger)}
.cform .bad input,.cform .bad textarea,.cform input.bad,.cform textarea.bad{border-color:#F08A5D}
.cform .ptype{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.cform .ptype legend{padding:0; margin-bottom:10px}
.cform .ptype label{flex-direction:row; cursor:pointer}
.cform .ptype input{position:absolute; opacity:0; width:1px; height:1px}
.cform .ptype span{font:600 13px/1 var(--body); padding:10px 15px; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--parchment) 35%, transparent); transition:background .2s, border-color .2s, color .2s}
.cform .ptype label:hover span{border-color:var(--parchment)}
.cform .ptype input:checked + span{background:var(--azure); border-color:var(--azure); color:var(--ink)}
.cform .ptype input:focus-visible + span{outline:2px solid var(--ginger); outline-offset:2px}
.cform .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.cform .fend{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.cform .btn[disabled]{opacity:.6; cursor:wait}
.cform .fstatus{margin:0; font-size:14px; color:color-mix(in srgb, var(--parchment) 80%, transparent)}
.cform .fstatus.err{color:#F08A5D}
.cform.sent{align-items:flex-start}
.cform .done{display:flex; flex-direction:column; gap:10px; padding:28px; border-radius:22px; background:color-mix(in srgb, var(--parchment) 8%, transparent)}
.cform .done h3{font-family:var(--display); font-weight:400; font-size:clamp(26px,3vw,36px); margin:0; line-height:1.1}
.cform .done h3 em{font-style:normal; color:var(--ginger)}
.cform .done p{margin:0; color:color-mix(in srgb, var(--parchment) 75%, transparent)}
.contact .info{gap:12px}
.contact .info .mailbox{gap:12px; margin-bottom:22px}
.contact .info .mail{font-size:clamp(20px,2vw,26px)}
.contact .info .btn{padding:11px 16px; font-size:13px}
@media (max-width:900px){ .cform{grid-column:1 / -1} .contact .info{margin-top:28px} }
@media (max-width:600px){ .cform .f2{grid-template-columns:1fr} }
/* ---------- about portrait ---------- */
.about .portrait{grid-column:1 / span 4; grid-row:1 / span 2; margin:0; display:flex; flex-direction:column; gap:12px; align-self:start}
.about .cols{row-gap:36px}
.about .cols .big{grid-column:6 / -1; grid-row:1; align-self:end}
.about .cols .side{grid-column:6 / -1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-content:start}
.about .portrait img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; border-radius:22px; background:#323232; transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.about .portrait:hover img{transform:rotate(-1.5deg) scale(1.015)}
.about .portrait figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--display); font-size:18px}
@media (max-width:900px){ .about .portrait,.about .cols .big,.about .cols .side{grid-column:1 / -1; grid-row:auto} .about .portrait{max-width:420px} .about .cols .side{grid-template-columns:1fr} .about .cols{row-gap:24px} }