/* 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%}
img, video{-webkit-user-drag:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}   /* media protection: no dragging out, no long-press "Save image" on phones (see main.js) */
[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}
/* no blue (or grey) flash when tapping buttons and links on phones, and no focus ring after a mouse click or tap;
   the ginger ring above still shows for keyboard (Tab) users, who need it to see where they are */
html{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
.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(--ginger)}
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(--ginger); border-color:var(--ginger); color:#fff}
/* 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(46px,9vw,138px); line-height:1.06; letter-spacing:-.035em; margin:0; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--ginger); text-transform:uppercase}
.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)}

/* 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(--ginger); border-color:var(--ginger)}
.filters button[aria-pressed="true"]{background:var(--ginger); color:#fff; border-color:var(--ginger)}
.filters button .n{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}

/* ---------- work stacks: one pile of covers per category; hover fans the pile open ---------- */
main{overflow-x:clip}   /* tilted and thrown stack cards never cause sideways scrolling (clipped at the screen edge, not the section) */
.stacks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(48px,5vw,72px) clamp(20px,2.4vw,36px); padding-top:40px}
.stacks[hidden]{display:none}
.stack{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:20px; min-width:0; padding-inline:7%}   /* a little smaller than the column */
.stack .pile{position:relative; z-index:1; aspect-ratio:4/3; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; cursor:grab; transition:transform .45s cubic-bezier(.2,.7,.1,1)}
/* hovered or being swiped: the pile grows and comes in front of the other categories, so thrown cards fly over them */
.stack:hover .pile, .stack.lift .pile{transform:scale(1.1); z-index:10}
.stack .pile:active{cursor:grabbing}
.stack .sheet{position:absolute; inset:0; border-radius:18px; overflow:hidden; background:var(--sheet);
  box-shadow:0 12px 30px -12px rgba(50,50,50,.28); transition:transform .7s cubic-bezier(.2,.7,.1,1), opacity .5s}
.stack .sheet img, .stack .sheet video{-webkit-user-drag:none; pointer-events:none}
.stack .s1, .stack .s2{will-change:transform}
.stack .sheet.drag{transition:none}                                   /* follows the finger exactly */
.stack .sheet.fly{z-index:5; opacity:1; transition:transform .34s cubic-bezier(.25,.6,.35,1)}  /* thrown off the pile, stays on top until it's gone */
/* the stacks keep their motion even when the computer asks for reduced motion (like the egg and the seal) */
@media (prefers-reduced-motion:reduce){
  .stack .sheet{transition:transform .7s cubic-bezier(.2,.7,.1,1), opacity .5s!important}
  .stack .sheet.drag{transition:none!important}
  .stack .sheet.fly{transition:transform .34s cubic-bezier(.25,.6,.35,1)!important}
  .stack .s2{transition-delay:.1s!important} .stack .s3, .stack .s4{transition-delay:.2s!important}
  .stack .sheet.drag, .stack .sheet.fly{transition-delay:0s!important}
  .stack .view{transition:.3s!important}
  .stack .pile{transition:transform .45s cubic-bezier(.2,.7,.1,1)!important}
}
.stack .sheet img, .stack .sheet video, .stack .sheet canvas{width:100%; height:100%; object-fit:cover; display:block}
.stack .sheet.blank{background:#E2E2D6; border:1px solid var(--rule)}
.stack .s1{z-index:3}
.stack .s2{z-index:2; transform:translateY(-8.5%) scale(.93)}   /* a neat deck: the cards behind sit straight, centred, peeking out above */
.stack .s3{z-index:1; transform:translateY(-17%) scale(.86)}
.stack .s4{z-index:0; opacity:0; transform:translateY(-17%) scale(.86)}   /* further down the pile, out of sight */
.stack:hover .s1, .stack:focus-visible .s1, .stack.spread .s1{transform:translateY(-8px)}   /* hover: the deck spreads a little further, still in line */
.stack:hover .s2, .stack:focus-visible .s2, .stack.spread .s2{transform:translateY(-13.5%) scale(.93)}
.stack:hover .s3, .stack:focus-visible .s3, .stack.spread .s3{transform:translateY(-26%) scale(.86)}
/* phones have no hover: the deck opens like this when the stack scrolls into the middle of the screen (.spread, set in main.js) */
/* the deck always moves as a ripple from the front card: the ones behind follow a beat later */
.stack .s2{transition-delay:.1s} .stack .s3, .stack .s4{transition-delay:.2s}
.stack .sheet.drag, .stack .sheet.fly{transition-delay:0s}
.stack .view{position:absolute; z-index:4; 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}
.stack:hover .view, .stack:focus-visible .view{opacity:1; transform:none}
.stack .cap{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.stack h3{font:400 clamp(22px,2.2vw,28px)/1.1 var(--display); letter-spacing:-.02em; margin:0}
.stack .cap .label{white-space:nowrap; letter-spacing:.08em}
.stack .cap{flex-wrap:wrap; row-gap:4px}
.stack .now{flex-basis:100%; margin:0; display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted)}
.stack .now b{font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stack .now > span{font-variant-numeric:tabular-nums; white-space:nowrap}
.cat-back{display:inline-block; margin-bottom:22px; font:600 14px/1 var(--body); color:var(--ink); text-decoration:none;
  border:1.5px solid var(--ink); border-radius:999px; padding:10px 16px; transition:background .2s, color .2s}
.cat-back:hover{background:var(--ginger); border-color:var(--ginger); color:#fff}
@media (max-width:900px){ .stacks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .stacks{grid-template-columns:minmax(0,1fr); gap:44px} }

/* 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(28px,6.4vw,104px); line-height:1.24; letter-spacing:-.035em; margin:16px 0 36px; text-wrap:balance}
.contact h2 em{font-style:normal; color:var(--ginger); text-transform:uppercase}
.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}
/* next / previous project: counter with arrows in the bar, big side arrows on computers, sideways swipe on phones */
.p-pager{display:flex; align-items:center; gap:2px; font:600 13px/1 var(--body); color:var(--muted)}
.p-pager button{width:36px; height:36px; display:grid; place-items:center; padding:0 0 3px; border-radius:50%; border:1.5px solid var(--rule); background:none; color:var(--ink); font:400 22px/1 var(--body); cursor:pointer; transition:border-color .2s, background .2s, color .2s}
.p-pager button:hover{border-color:var(--ginger); background:var(--ginger); color:#fff}
.pg-count{min-width:48px; text-align:center; font-variant-numeric:tabular-nums}
.p-edge{position:fixed; top:50%; z-index:3; width:54px; height:54px; margin-top:-27px; display:grid; place-items:center; padding:0 0 5px; border:0; border-radius:50%;
  background:rgba(50,50,50,.78); color:#EBEBDF; font:300 32px/1 var(--body); cursor:pointer; box-shadow:0 8px 24px rgba(50,50,50,.18); transition:background .2s, transform .25s}
.p-edge:hover{background:#E9631A; transform:scale(1.08)}
.p-edge.pg-prev{left:max(16px, env(safe-area-inset-left, 0px))} .p-edge.pg-next{right:max(16px, env(safe-area-inset-right, 0px))}
.overlay #p-body{touch-action:pan-y pinch-zoom}
.overlay.single .p-pager, .overlay.single .p-edge{display:none}
@media (hover:none){ .p-edge{display:none} }
.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); text-transform:uppercase}
  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:#E9631A}
header.top nav.links a.cta{color:#EBEBDF; border-color:#EBEBDF}
header.top nav.links a.cta:hover{background:#E9631A; border-color:#E9631A; color:#fff}
header.top .menu-btn{color:#EBEBDF}
/* language switch (EN | SQ): logo on the left, then the menu (or the phone menu button) and the switch on the right */
header.top .logo{margin-right:auto}
nav.links{order:1} .lang{order:2} .menu-btn{order:3}
/* a little toggle: the light knob sits behind the chosen language; tap a side, or drag / swipe the knob across */
.lang{position:relative; display:flex; align-items:center; gap:2px; padding:3px; border:1.5px solid rgba(235,235,223,.28); border-radius:999px; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab}
.lang:active{cursor:grabbing}
.lang-knob{position:absolute; top:3px; bottom:3px; left:3px; width:34px; border-radius:999px; background:#EBEBDF; pointer-events:none;
  transition:transform .35s cubic-bezier(.3,1.35,.5,1)}   /* a small overshoot, like a real switch */
html[lang="sq"] .lang-knob{transform:translateX(36px)}
.lang button{position:relative; z-index:1; width:34px; padding:6px 0; text-align:center; font:600 12px/1 var(--body); letter-spacing:.06em; color:rgba(235,235,223,.6); background:none; border:0; border-radius:999px; cursor:inherit; transition:color .2s}
.lang button:hover{color:#E9631A}
html:not([lang="sq"]) .lang [data-lang="en"], html[lang="sq"] .lang [data-lang="sq"]{color:#323232}
/* only the chosen language shows (both are in the page, side by side) */
html[lang="sq"] [data-l="en"], html:not([lang="sq"]) [data-l="sq"]{display:none!important}
.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}
/* each pill acts like its subject on hover (tap on phones): 3D & CGI tilts in 3D after the pointer, Motion jiggles,
   Packaging opens like a box, Branding unfolds a brand kit, Archviz builds a little city */
.hero .chip{position:relative; display:inline-block; cursor:default; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  transition:transform .4s cubic-bezier(.2,.7,.1,1), background .2s, color .2s, border-color .2s, box-shadow .35s cubic-bezier(.2,.7,.1,1)}
/* 3D & CGI: its face lifts off the page and tilts toward the pointer, casting a soft shadow on the ground below it
   (the chip itself stays flat so the shadow stays on the ground; the face is a span added in main.js) */
.hero .chip[data-fx="tilt"]{padding:0; background:none; border-color:transparent}
.hero .chip[data-fx="tilt"]{perspective:300px}
.hero .chip .tilt-3d{display:block; position:relative; z-index:1; transform-style:preserve-3d}   /* eased frame by frame in main.js */
.hero .chip .tilt-layer{position:absolute; inset:0; border-radius:999px; background:#262624; border:1px solid #5a5a54; opacity:0; transition:opacity .15s}
.hero .chip.fx-tilt .tilt-layer{opacity:1}
.hero .chip .tilt-face{display:block; position:relative; padding:6px 12px; border-radius:999px; background:rgba(235,235,223,.06);
  border:1px solid rgba(235,235,223,.18); transition:background .2s, border-color .2s}
.hero .chip.fx-tilt .tilt-face{background:#E9631A; border-color:#F59A62; color:#fff}
.hero .chip.fx-tilt .tilt-layer{background:#B5480F; border-color:#93390A}   /* the thickness, in a deeper orange */
.hero .chip[data-fx="tilt"]::after{content:""; position:absolute; left:6%; right:6%; bottom:-11px; height:12px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); opacity:0; transform:translateX(var(--sx, 0px)) scale(.55, .6);
  transition:opacity .25s, transform .2s ease-out}
.hero .chip.fx-tilt::after{opacity:1; transform:translateX(var(--sx, 0px)) scale(1.08, 1)}
/* Packaging: the pill turns into an orange box (its corners square off smoothly, a darker side face appears) with its two
   lid flaps lying closed on top; then the left flap swings open on its hinge, then the right one, each with a bounce.
   (The pill's rounding starts at exactly half its height, so the corners square off evenly instead of snapping at the end.
   The flaps are spans added in main.js.) */
.hero .chip[data-fx="box"]{border-radius:18.5px; transition:transform .5s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s, border-color .3s,
  border-radius .35s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.3,1.6,.5,1)}
.hero .chip.fx-box{background:#E9631A; border-color:#C4500F; color:#fff; border-radius:3px; box-shadow:4px 4px 0 #A6420B; transform:translateY(-3px)}
.hero .chip .pkg{position:absolute; inset:0; pointer-events:none}
.hero .chip .flap{position:absolute; bottom:calc(100% - 1px); width:calc(50% + 1px); height:6px; border-radius:1px;
  background:#F2813F; border:1px solid #C4500F; opacity:0; transform:rotate(0deg);
  transition:transform .35s cubic-bezier(.5,0,.75,0), opacity .15s .3s}   /* closing: swing shut, then fade */
.hero .chip .flap.l{left:-1px; transform-origin:0 100%; --a:-118deg; --d:300ms}
.hero .chip .flap.r{right:-1px; transform-origin:100% 100%; --a:118deg; --d:400ms}
.hero .chip.fx-box .flap{opacity:1; transform:rotate(var(--a));
  transition:opacity .15s .15s, transform .65s cubic-bezier(.3,1.55,.5,1) var(--d)}   /* opening: appear closed on the box, then swing open */
/* Motion: the pill leans forward and shoots ahead with speed lines streaking out behind it, then eases back, on a loop */
.hero .chip[data-fx="jiggle"]::before{content:""; position:absolute; right:calc(100% + 2px); top:50%; width:20px; height:13px; margin-top:-6.5px; pointer-events:none;
  background:linear-gradient(90deg, transparent, #E9631A) 0 0 / 100% 2px no-repeat, linear-gradient(90deg, transparent, rgba(235,235,223,.85)) 6px 5.5px / 14px 2px no-repeat,
    linear-gradient(90deg, transparent, #E9631A) 2px 11px / 18px 2px no-repeat;
  opacity:0; transform-origin:100% 50%; transform:scaleX(0)}
.hero .chip.fx-jiggle{animation:chipDash .7s cubic-bezier(.5,0,.3,1) infinite}
.hero .chip.fx-jiggle::before{animation:chipLines .7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes chipDash{0%{transform:translateX(0) skewX(0)} 45%{transform:translateX(12px) skewX(-14deg)} 70%{transform:translateX(9px) skewX(6deg)} 100%{transform:translateX(0) skewX(0)}}
@keyframes chipLines{0%{opacity:0; transform:scaleX(0)} 40%{opacity:1; transform:scaleX(1.25)} 75%{opacity:.5; transform:scaleX(.7)} 100%{opacity:0; transform:scaleX(0)}}
/* Branding: the pill unfolds like a little brand kit: it turns brand orange, four Pantone-style swatch cards (azure, orange,
   cream, charcoal, each with a cream label strip) fan out above it one after another, then a ® mark stamps onto its corner
   (the cards are spans added in main.js) */
.hero .chip .kit{position:absolute; left:50%; bottom:100%; width:0; height:0; z-index:-1; pointer-events:none}
.hero .chip .sw{position:absolute; left:-8px; bottom:-14px; width:16px; height:22px; border-radius:2px; background:var(--c);
  box-shadow:inset 0 -7px 0 #F4F4EC, 0 0 0 1px rgba(235,235,223,.35), 0 3px 6px rgba(0,0,0,.35); transform-origin:50% 120%;
  transform:translate(0, 6px) rotate(0) scale(.3); opacity:0;
  transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 60ms), opacity .15s calc(var(--i) * 60ms)}
.hero .chip.fx-brand .sw{opacity:1; transform:translate(var(--x), -26px) rotate(var(--r)) scale(1)}
.hero .chip[data-fx="brand"]::after{content:"®"; position:absolute; top:-7px; right:-6px; width:16px; height:16px; border-radius:50%; pointer-events:none;
  background:#EBEBDF; color:#323232; font:700 10px/16px var(--body); text-align:center; opacity:0; transform:scale(0) rotate(-90deg);
  transition:opacity .15s, transform .4s cubic-bezier(.3,1.6,.5,1)}
.hero .chip.fx-brand::after{transition-delay:.42s}   /* the ® stamps on last, after the swatches */
.hero .chip.fx-brand{background:#E9631A; border-color:#E9631A; color:#fff; transform:translateY(-2px)}
.hero .chip.fx-brand::after{opacity:1; transform:none}
/* Archviz: a small city pops out of the pill as if from a little globe hidden behind it (no globe is drawn): six buildings fan out
   from one centre point below the pill top, slide out along their own lean one after another (bouncy), and each one is tilted toward
   you in perspective so its top is wider than its base (a fish-eye, slightly 3D look); then their windows switch on, lit orange.
   .bld = the lean + slide (made in main.js), .bf inside it = the visible tilted building */
.hero .chip .skyline{position:absolute; left:-14px; right:-14px; bottom:100%; height:90px; overflow:hidden; pointer-events:none}   /* clipped at the pill top edge: anything below it is "inside the pill" */
.hero .chip .bld{position:absolute; left:50%; bottom:-8px; width:var(--w); height:calc(var(--h) + 8px); margin-left:calc(var(--w) / -2);   /* 8px hidden below the edge, so the bounce never lifts the base out */
  transform-origin:50% calc(100% + 24px);   /* the centre of the unseen globe, 32px below the pill top */
  transform:rotate(var(--a)) translateY(calc(130% + 14px));   /* sunk down inside the pill, out of sight */
  transition:transform .45s cubic-bezier(.5,0,.75,0) calc((5 - var(--i)) * 35ms)}   /* leaving: back down into the pill, last one first */
.hero .chip .bf{position:absolute; inset:0; border-radius:1.5px 1.5px 0 0;
  background:linear-gradient(90deg, #B7CDE7 0 66%, #8FA9C9 66% 100%);   /* lit front and a shaded side */
  transform-origin:50% 100%; transform:perspective(60px) rotateX(-24deg)}   /* top leans toward you, so it reads wider */
.hero .chip .bf::after{content:""; position:absolute; left:18%; right:40%; top:4px; bottom:11px; opacity:0;
  background:repeating-linear-gradient(180deg, #E9631A 0 2px, transparent 2px 5px);
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px); mask:repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
  transition:opacity .25s calc(var(--i) * 70ms)}
.hero .chip .bf.ant::before{content:""; position:absolute; left:34%; bottom:100%; width:1.5px; height:7px; background:#B7CDE7}
.hero .chip.fx-extrude{transform:translateY(-2px)}
.hero .chip.fx-extrude .bld{transform:rotate(var(--a)) translateY(0); transition:transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 60ms)}   /* rising up out of the pill, one after another */
.hero .chip.fx-extrude .bf::after{opacity:1; transition-delay:calc(380ms + var(--i) * 70ms)}
@media (prefers-reduced-motion:reduce){
  .hero .chip.fx-jiggle{animation:chipDash .7s cubic-bezier(.5,0,.3,1) infinite!important}
  .hero .chip.fx-jiggle::before{animation:chipLines .7s cubic-bezier(.5,0,.3,1) infinite!important}
  .hero .chip[data-fx="brand"]::after{transition:opacity .15s, transform .4s cubic-bezier(.3,1.6,.5,1)!important} .hero .chip.fx-brand::after{transition-delay:.42s!important}
  .hero .chip .sw{transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 60ms), opacity .15s calc(var(--i) * 60ms)!important}
  .hero .chip .bld{transition:transform .45s cubic-bezier(.5,0,.75,0) calc((5 - var(--i)) * 35ms)!important}
  .hero .chip.fx-extrude .bld{transition:transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 60ms)!important}
  .hero .chip .bf::after{transition:opacity .25s calc(var(--i) * 70ms)!important}
  .hero .chip.fx-extrude .bf::after{transition-delay:calc(380ms + var(--i) * 70ms)!important}
}
@media (prefers-reduced-motion:reduce){
  .hero .chip .tilt-layer{transition:opacity .15s!important}
  .hero .chip[data-fx="tilt"]::after{transition:opacity .25s, transform .2s ease-out!important}
  .hero .chip[data-fx="box"]{transition:transform .5s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s, border-color .3s, border-radius .35s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.3,1.6,.5,1)!important}
  .hero .chip .flap{transition:transform .35s cubic-bezier(.5,0,.75,0), opacity .15s .3s!important}
  .hero .chip.fx-box .flap{transition:opacity .15s .15s, transform .65s cubic-bezier(.3,1.55,.5,1) var(--d)!important}
}
@media (prefers-reduced-motion:reduce){ .hero .chip{transition:transform .4s cubic-bezier(.2,.7,.1,1), background .2s, color .2s, border-color .2s, box-shadow .35s!important}
  }
.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 draws itself as a wireframe in the middle of the screen, glides into its place in the hero
   and renders solid while everything else rises in, staggered (choreographed in main.js; plays even with reduce motion) ---------- */
#intro{position:fixed; inset:0; z-index:100; pointer-events:none; animation:introSafety 0s linear 4s forwards}   /* safety net: never blocks the site */
#intro .bg{position:absolute; inset:0; background:#323232}
#intro .wire{position:absolute; left:50%; top:50%; width:min(34vw,170px); aspect-ratio:470/580; transform:translate(-50%,-50%); will-change:transform}
#intro .wire svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
#intro .mesh path, #intro .outline{fill:none; stroke:#A9C2E0; vector-effect:non-scaling-stroke; stroke-linecap:round}
#intro .mesh path{stroke-width:1.2; opacity:.8}
#intro .outline{stroke-width:2}
@keyframes introSafety{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){ #intro{animation:introSafety 0s linear 4s forwards!important} }

/* ---------- 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}
/* 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}
/* the shell shatters into jagged pieces that fly out and fall (built and thrown in main.js) */
#ptr .ptr-shard{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
@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}
}

/* ---------- 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)}
/* the cover simply fades away to show the loop (no crack, by request) */
.card.hatch .shell{z-index:1; transition:opacity .45s ease}
.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}
.card.hatch.hatched .shell{opacity:0}
.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 pinch-zoom}
.compare:has(.cmp-range:focus-visible) .cmp-handle::after{outline:2px solid #fff; outline-offset:3px}

/* ---------- project page swipe: dims the homepage while it drifts away ---------- */
#swipe-shade{position:fixed; inset:0; z-index:19; background:rgba(50,50,50,.45); pointer-events:none; opacity:0; visibility:hidden}
.overlay, .reel-ov{box-shadow:-24px 0 60px rgba(50,50,50,.18)}

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

@media (prefers-reduced-motion:reduce){
  .card.hatch .shell{transition:opacity .45s ease!important}
  .card.hatch .hatch-in canvas, .card.hatch .hatch-in video{transition:transform 1.2s cubic-bezier(.2,.7,.1,1)!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 label > 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(--ginger); color:var(--ginger)}
.cform .ptype input:checked + span{background:var(--ginger); border-color:var(--ginger); color:#fff}
.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); text-transform:uppercase}
.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} }

/* ---------- full screen for project images, videos and before/after sliders ---------- */
.gallery .g{position:relative}
.fs-tools{position:absolute; top:12px; right:12px; z-index:4; display:flex; gap:8px}
.fs-tools button{width:40px; height:40px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:rgba(50,50,50,.72); color:#EBEBDF; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, transform .2s}
.fs-tools button:hover{background:#E9631A; transform:scale(1.06)}
.fs-tools svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fs-tools .fs-rot{display:none}
.gallery .g.is-full .fs-rot{display:grid}
.gallery .g.real img{cursor:zoom-in}
/* in full screen: the piece fills the screen on charcoal, whole (never cropped), in either orientation */
.gallery .g.is-full{position:fixed; inset:0; z-index:60; width:100% !important; height:100% !important; max-width:none; margin:0;
  aspect-ratio:auto !important; border-radius:0; background:#1E1E1E; display:flex; align-items:center; justify-content:center}
.gallery .g.is-full img, .gallery .g.is-full video{width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; border-radius:0; background:none; cursor:default}
.gallery .g.compare.is-full .cmp-before, .gallery .g.compare.is-full .cmp-after{inset:0}
.gallery .g.is-full figcaption{position:absolute; left:max(16px, env(safe-area-inset-left, 0px)); bottom:max(16px, env(safe-area-inset-bottom, 0px)); color:rgba(235,235,223,.8)}
.gallery .g.is-full .fs-tools{top:max(14px, env(safe-area-inset-top, 0px)); right:max(14px, env(safe-area-inset-right, 0px))}
.gallery .g.is-full .cmp-label{top:max(14px, env(safe-area-inset-top, 0px))}
/* sliders already use the top-right (label) and bottom-right (speaker) corners, so their buttons sit bottom-left */
.gallery .g.compare .fs-tools{top:auto; right:auto; bottom:14px; left:14px}
.gallery .g.compare.is-full .fs-tools{top:auto; right:auto; bottom:max(14px, env(safe-area-inset-bottom, 0px)); left:max(14px, env(safe-area-inset-left, 0px))}
/* zoom inside full screen (pinch, wheel / trackpad, double-tap): the media layers scale, the frame and slider divider stay put */
.gallery .g.is-full{touch-action:none; overflow:hidden}
.gallery .g.is-full img, .gallery .g.is-full video, .gallery .g.is-full canvas{transform-origin:50% 50%; will-change:transform}
.gallery .g.is-full.zoomed{cursor:grab}
.gallery .g.is-full.zoomed:active{cursor:grabbing}
.gallery .g.compare.zoomed .cmp-range{pointer-events:none}   /* zoomed in: drag to look around; the divider is still dragged by its handle */
@media (prefers-reduced-motion:reduce){ .lang-knob{transition:transform .35s cubic-bezier(.3,1.35,.5,1)!important} }   /* the switch keeps its slide */
/* every highlight is the brand orange: hover states for the buttons and links that had none */
.btn.ghost{transition:background .2s, border-color .2s, color .2s}
.btn.ghost:hover{background:var(--ginger); border-color:var(--ginger); color:#fff}
footer .top-link{transition:color .2s, border-color .2s}
footer .top-link:hover{color:var(--ginger); border-bottom-color:var(--ginger)}
.overlay .x, .reel-ov .x{transition:background .2s, border-color .2s, color .2s}
.overlay .x:hover, .reel-ov .x:hover{background:var(--ginger); border-color:var(--ginger); color:#fff}
/* the egg's other surprise: one of the studio's programs hatches as an app-style badge (tap it to pop it away) */
.tool-pop{position:absolute; z-index:8; width:0; height:0; pointer-events:none; -webkit-user-select:none; user-select:none}
.tool-pop .tool{position:absolute; left:-34px; top:-34px; width:68px; height:68px; padding:0; display:grid; place-items:center; border:0; background:none;
  cursor:pointer; pointer-events:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)); -webkit-tap-highlight-color:transparent}
.tool-pop .tool img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none}
/* the Substance 3D apps, drawn in the same rounded-square app style as the Adobe icons */
.tool-pop .tile{width:100%; height:100%; display:grid; place-items:center; border-radius:21%; background:var(--bg); color:var(--fg);
  font:600 30px/1 var(--display); letter-spacing:-.03em}
.tool-pop .face{display:block; width:100%; height:100%; transform-origin:50% 100%}   /* squashes against the ground it lands on */
.tool-pop .spark{position:absolute; left:0; top:0; width:9px; height:9px; border-radius:50%; background:#E9631A; pointer-events:none}
.tool-pop .spark:nth-of-type(3n){background:#EBEBDF} .tool-pop .spark:nth-of-type(3n+1){background:#A9C2E0}
/* the same layout in both languages, whatever the length of the words:
   the category buttons always sit on their own row under "Selected work", and on phones every small section label
   sits under its heading (the hero and contact headings have fixed line breaks in index.html) */
.work .shead{flex-direction:column; align-items:flex-start}
@media (max-width:640px){ .shead{flex-direction:column; align-items:flex-start; gap:10px} }
.overlay{overscroll-behavior:contain}   /* trackpad swipes on a project page never trigger the browser's back / forward */
.hero h1 .ln, .hero h1 em{display:inline-block}   /* so each headline line can rise in on its own during the intro */
/* every hero pill turns brand orange while its animation plays (Branding, Packaging and 3D & CGI set theirs above) */
.hero .chip.fx-jiggle, .hero .chip.fx-extrude{background:#E9631A; border-color:#E9631A; color:#fff}
.p-edge{transition:background .2s, transform .25s, opacity .2s}
.overlay.carding .p-edge, .overlay.carding .fs-tools{opacity:0; pointer-events:none}   /* while the page shrinks into a card */