@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');
:root{--paper:#EFE9DD;--ink:#16130F;--red:#A3202A;--line:rgba(22,19,15,.25);--f:'Archivo','Helvetica Neue',Arial,sans-serif;--pad:clamp(16px,3vw,40px)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--f);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.mo{overflow:hidden}a{color:inherit;text-decoration:none}img,video{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{padding:0 var(--pad)}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px;z-index:99}
.lbl,.meta span,dt,.tag,.row i,.menu a i{font:600 12px/1.2 var(--f);font-stretch:62%;letter-spacing:.14em;text-transform:uppercase}
.disp{font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:.84;letter-spacing:-.01em}
#site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);color:var(--paper);transition:background .3s,color .3s}
#site-header.solid{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}body.mo #site-header{background:none;color:var(--paper);border:0}
body:not([data-page=home]) #site-header{color:var(--ink)}body:not([data-page=home]).mo #site-header{color:var(--paper)}body[data-page=project] #site-header:not(.solid){color:var(--paper)}
.mark{font:900 26px/1 var(--f);font-stretch:62%;letter-spacing:.02em}.dnav{display:flex;gap:28px}.dnav a{font:600 14px var(--f);font-stretch:75%;text-transform:uppercase;letter-spacing:.1em;position:relative}
.dnav a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}.dnav a:hover::after{transform:scaleX(1)}
.mbtn{display:none;background:none;border:1px solid currentColor;color:inherit;font:700 12px var(--f);font-stretch:75%;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}.menu[hidden]{display:none}.menu.on{clip-path:inset(0)}
.menu a{display:block;font:900 clamp(56px,16vw,120px)/.95 var(--f);font-stretch:62%;text-transform:uppercase;opacity:0;transform:translateY(30px);transition:.5s var(--d,0ms)}.menu.on a{opacity:1;transform:none}.menu a:hover{color:var(--red)}
.menu a i{font-style:normal;vertical-align:top;margin-right:12px;color:var(--red)}.menu .menu-foot a{font:400 14px var(--f);opacity:1;transform:none;display:inline;text-transform:none}.menu-foot{margin-top:32px;font-size:14px}
@media(max-width:760px){.dnav{display:none}.mbtn{display:block}}
.hero{position:relative;height:100vh;min-height:560px;background:var(--ink);color:var(--paper);overflow:hidden;padding:0}#hero-media{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.85}.hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.65))}
.hero .in{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(24px,5vh,56px);display:grid;gap:22px}
#hero-h{font-size:clamp(36px,min(12.5vw,(100vh - 300px)/2.65),198px)}@media(max-height:620px){#hero-sub{display:none}#hero-h{font-size:clamp(36px,min(12.5vw,(100vh - 210px)/2.65),198px)}}#hero-h .ln{display:block;overflow:hidden;padding-top:.04em}#hero-h .ln span{display:block;animation:up .9s cubic-bezier(.2,.7,.1,1) both;animation-delay:var(--d)}.red{color:#D2323E}
@keyframes up{from{transform:translateY(105%)}}
.hrow{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}#hero-sub{max-width:46ch;font-size:18px}
.btn{display:inline-block;border:1.5px solid currentColor;padding:14px 22px;font:700 13px var(--f);font-stretch:75%;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.hlbl{position:absolute;z-index:2;top:74px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:12px}.scr{position:absolute;z-index:2;right:var(--pad);top:50%;writing-mode:vertical-rl}
section{padding:clamp(64px,10vw,140px) var(--pad)}.sh{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:clamp(28px,4vw,56px)}.sh h2{font-size:clamp(40px,7vw,96px)}
.grid{--rh:clamp(220px,27vw,380px);display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px) clamp(12px,2vw,28px);align-items:flex-start}.grid::after{content:"";flex-grow:1000000}
.card{display:block;min-width:0}
.frame{position:relative;overflow:hidden;background:#222}.frame>:not(.tag){transition:transform .8s cubic-bezier(.2,.7,.1,1)}.card:hover .frame>:not(.tag){transform:scale(1.045)}
.tag{position:absolute;top:10px;left:10px;background:var(--paper);color:var(--ink);padding:4px 6px;z-index:2}.tag:empty{display:none}
.meta{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding-top:10px;border-top:1px solid var(--line);margin-top:10px}.meta b{font:800 clamp(20px,2.4vw,30px)/1.05 var(--f);font-stretch:75%;text-transform:uppercase}.meta i{grid-row:1;grid-column:2;font:600 13px var(--f);font-style:normal;color:var(--red)}.card:hover b{color:var(--red)}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
.statement{background:var(--ink);color:var(--paper);padding-block:clamp(90px,14vw,200px)}.statement p{font-size:clamp(46px,10.5vw,170px)}.statement em{font-style:normal;color:#D2323E}.statement small{display:block;max-width:44ch;margin:48px 0 0 auto;font-size:18px;opacity:.8}
.row{border-top:1px solid var(--line)}.row:last-child{border-bottom:1px solid var(--line)}.row summary{display:grid;grid-template-columns:1fr 30px;align-items:center;gap:10px;padding:22px 0;cursor:pointer;list-style:none}.row summary::-webkit-details-marker{display:none}
.row i{font-style:normal;color:var(--red)}.row h3{font:900 clamp(30px,5.5vw,76px)/.95 var(--f);font-stretch:62%;text-transform:uppercase;transition:transform .35s}.row summary:hover h3{transform:translateX(12px)}
.pl{position:relative;width:18px;height:18px}.pl::before,.pl::after{content:"";position:absolute;background:currentColor;top:8px;left:0;right:0;height:2px;transition:transform .3s}.pl::after{transform:rotate(90deg)}details[open] .pl::after{transform:none}
.row p{padding:0 0 28px 70px;max-width:60ch}
.about{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,6vw,96px);align-items:start}.about .frame{aspect-ratio:3/4}.about h2{font-size:clamp(42px,7vw,110px);margin:14px 0 28px}.about p{max-width:52ch;margin-bottom:16px}.about p.lbl{margin:0}
.pts{list-style:none;padding:0;margin-top:28px}.pts li{border-top:1px solid var(--line);padding:12px 0;font-weight:600}
.marquee{overflow:hidden}.clients{list-style:none;padding:0;display:flex;flex-wrap:nowrap;width:max-content;animation:mq 60s linear infinite}.marquee:hover .clients{animation-play-state:paused}.clients li{flex:none;padding:28px 44px;white-space:nowrap;font:800 28px var(--f);font-stretch:70%;text-transform:uppercase}.clients li img{height:44px;width:auto;max-width:200px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}.clients li:hover img{filter:none;opacity:1}.clients .ghost{color:rgba(22,19,15,.3)}
@keyframes mq{to{transform:translateX(-50%)}}
.cta{background:var(--red);color:var(--paper);padding-block:clamp(80px,12vw,180px)}.cta h2{font-size:clamp(54px,14vw,240px);margin:18px 0 40px}.cta .btn:hover{background:var(--paper);color:var(--red);border-color:var(--paper)}.cta .links{display:flex;gap:16px 40px;flex-wrap:wrap;margin-top:36px;font-weight:600}.cta .links a{border-bottom:1.5px solid}
#site-footer{padding:22px var(--pad);font-size:14px;border-top:1px solid var(--line)}.fgrid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.fgrid nav{display:flex;gap:20px}
.ptop{padding-top:110px}.ptop h1{font-size:clamp(64px,15vw,240px)}.tools{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:36px 0;padding:14px 0;border-block:1px solid var(--line)}
.tools button{background:none;border:0;font:700 13px var(--f);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase;padding:6px 0;margin-right:16px;cursor:pointer;color:inherit;opacity:.5}.tools button[aria-pressed=true]{opacity:1;box-shadow:inset 0 -2px var(--red)}
.card[hidden]{display:none}.grid.list{display:block}.list .card{border-top:1px solid var(--line);margin:0!important;display:grid;grid-template-columns:1fr 160px;gap:16px;align-items:center}.list .frame{order:2;aspect-ratio:16/9!important}.list .meta{border:0;margin:0;padding:18px 0}
.phero{height:80vh;min-height:380px;background:#111}.pinfo{padding-top:36px}.pinfo h1{font:900 clamp(52px,12vw,190px)/.85 var(--f);font-stretch:62%;text-transform:uppercase;margin:12px 0 28px}
dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;border-top:1px solid var(--line);padding-top:16px}dd{font-weight:600;margin-top:4px;margin-left:0}.lead{max-width:56ch;font-size:22px;margin:36px 0}
.pgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;padding-block:40px}.pgal>*{aspect-ratio:4/3}
.next{display:block;background:var(--ink);color:var(--paper);padding:clamp(48px,8vw,110px) var(--pad)}.next b{display:block;font:900 clamp(44px,10vw,160px)/.9 var(--f);font-stretch:62%;text-transform:uppercase;margin-top:12px}.next:hover b{color:#D2323E}
@media(max-width:860px){.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;align-items:start}.card{width:auto;margin:0}.card.tall{width:auto;margin:0}.grid::after{display:none}.meta i{display:none}.about{grid-template-columns:1fr}.row summary{grid-template-columns:1fr 24px}.row p{padding-left:46px}.scr{display:none}.list .card{grid-template-columns:1fr 100px}}
@media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto}*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.menu a{opacity:1;transform:none}.rv{opacity:1;transform:none}}

[hidden]{display:none!important}.about.solo{grid-template-columns:1fr}.about.solo>div{max-width:760px}
.mark.logo{display:block;height:34px;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.frame .cover{position:absolute;top:0;left:0;transition:opacity .35s}.card.play .cover{opacity:0}
.row .xl{padding:0 0 28px 24px;margin:0;max-width:62ch;list-style:disc}.row .xl li{padding:5px 0;font-weight:500}@media(max-width:860px){.row .xl{padding-left:24px}}
.dark{background:var(--ink);color:var(--paper)}.dark .pts li{border-top-color:rgba(239,233,221,.25)}
.meta{grid-template-columns:minmax(0,1fr) auto}.meta b,.meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta b{font-size:clamp(18px,2vw,26px)}.meta span{font-weight:300;font-size:11px;letter-spacing:.1em;opacity:.85}
.meta{display:flex;align-items:baseline;gap:.55em;white-space:nowrap;overflow:hidden;font-size:var(--mf,20px);grid-template-columns:none}
.meta b,.meta span{font-size:1em;overflow:visible;text-overflow:clip}
.meta b{font:800 1em/1.15 var(--f);font-stretch:75%;text-transform:uppercase}
.meta span{font:300 1em/1.15 var(--f);font-stretch:75%;letter-spacing:.02em;text-transform:uppercase;opacity:.8}
.meta i{margin-left:auto;padding-left:.6em}
#clients-sec{padding-block:clamp(100px,13vw,190px)}#clients-sec .sh{margin-bottom:clamp(40px,6vw,80px)}

/* ===================== LIQUID GLASS =====================
   Rules: glass only where real content sits behind it (header, buttons over video, menu);
   it adapts to the surface beneath it (data-tone on the header); edges are lit from the
   top-left with hairline gradients, not flat borders; everything stays dark and legible.
   Tune --gb (blur) and --r (corner radius) here. */
:root{--gb:16px;--r:12px}
@media(max-width:860px){:root{--gb:10px}}
@keyframes none{}

/* ---- header: adapts to light / dark / red sections ---- */
#site-header.solid{-webkit-backdrop-filter:blur(var(--gb)) saturate(170%);backdrop-filter:blur(var(--gb)) saturate(170%);
 background:rgba(239,233,221,.72);border-bottom:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.6),0 10px 30px rgba(22,19,15,.08);transition:background .45s,color .45s,box-shadow .45s}
#site-header.solid[data-tone=dark]{background:rgba(20,17,14,.52);color:var(--paper);box-shadow:inset 0 -1px 0 rgba(255,255,255,.16),0 12px 34px rgba(0,0,0,.3)}
#site-header.solid[data-tone=red]{background:rgba(58,8,14,.42);color:var(--paper);box-shadow:inset 0 -1px 0 rgba(255,255,255,.22),0 12px 34px rgba(0,0,0,.25)}
body.mo #site-header.solid{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--paper)}

/* ---- video overlays: top and bottom scrims keep type and glass legible on any footage ---- */
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(rgba(0,0,0,.5),transparent);z-index:1;pointer-events:none}
.hero::after{background:linear-gradient(transparent 32%,rgba(0,0,0,.72))}

/* ---- buttons: dark-tinted glass, gradient hairline edge lit from the top-left ---- */
.btn,.mbtn{position:relative;border:0;border-radius:var(--r);color:inherit;
 -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(.92);backdrop-filter:blur(14px) saturate(170%) brightness(.92);
 background:radial-gradient(130px 70px at var(--mx,28%) var(--my,0%),rgba(255,255,255,.13),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.015)),rgba(14,12,10,.3);
 box-shadow:inset 0 -10px 16px -12px rgba(0,0,0,.45),0 10px 28px rgba(0,0,0,.2);
 transition:transform .3s cubic-bezier(.2,.7,.1,1),background .35s,box-shadow .35s}
.btn::before,.mbtn::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.14) 34%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.5));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .3s}
.hero .btn{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.btn:hover{transform:translateY(-1px);color:#fff;
 background:radial-gradient(150px 80px at var(--mx,28%) var(--my,0%),rgba(255,255,255,.2),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),rgba(163,32,42,.38);
 box-shadow:inset 0 -10px 16px -12px rgba(0,0,0,.4),0 16px 34px rgba(0,0,0,.26)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 3px 10px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2)}
.btn:focus-visible,.mbtn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.cta .btn{background:radial-gradient(130px 70px at var(--mx,28%) var(--my,0%),rgba(255,255,255,.22),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(255,255,255,.07);color:var(--paper)}
.cta .btn:hover{background:radial-gradient(150px 80px at var(--mx,28%) var(--my,0%),rgba(255,255,255,.36),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1)),rgba(255,255,255,.1);color:var(--paper)}

/* ---- full-screen menu: deep smoked glass, heavy blur so the page behind never competes ---- */
.menu{background:radial-gradient(60% 40% at 88% 6%,rgba(163,32,42,.3),transparent 62%),rgba(16,13,11,.84);-webkit-backdrop-filter:blur(34px) saturate(150%);backdrop-filter:blur(34px) saturate(150%)}

/* ---- photography: crisp, with only a faint lit edge ---- */
.frame{border-radius:var(--r)}
.frame::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22)}
.card .frame{transition:box-shadow .6s,transform .6s cubic-bezier(.2,.7,.1,1)}
.card:hover .frame{box-shadow:0 20px 44px rgba(22,19,15,.2);transform:translateY(-2px)}

/* ---- ambient light in the dark sections (gives the glass above it something to pick up) ---- */
.statement{background:radial-gradient(50% 70% at 88% 15%,rgba(163,32,42,.22),transparent 62%),var(--ink)}
#about{position:relative;overflow:hidden;background:radial-gradient(55% 60% at 92% 12%,rgba(163,32,42,.3),transparent 65%),radial-gradient(45% 50% at 4% 96%,rgba(255,255,255,.05),transparent 60%),var(--ink)}
#about-photo{border-radius:var(--r);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.4)}
.pts{padding:4px 22px;border-radius:calc(var(--r) + 4px);border:0;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2),0 20px 44px rgba(0,0,0,.25)}
.pts li:first-child{border-top:0}

/* ---- services: the open item lifts into a soft frosted panel ---- */
#services{background:radial-gradient(42% 50% at 94% 6%,rgba(163,32,42,.1),transparent 70%)}
.row{transition:background .4s,box-shadow .4s,margin .3s}
.row[open]{border-top-color:transparent;border-radius:calc(var(--r) + 4px);margin:8px 0;padding:0 22px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,0 14px 36px rgba(22,19,15,.08)}

/* ---- contact: red with directional light; the links rest on a smoked-glass strip ---- */
.cta{background:radial-gradient(55% 75% at 90% 4%,rgba(255,150,140,.2),transparent 60%),radial-gradient(55% 75% at 0% 100%,rgba(0,0,0,.3),transparent 62%),var(--red)}
.cta .links{display:flex;width:fit-content;max-width:100%;align-items:center;padding:14px 22px;border-radius:calc(var(--r) + 4px);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.4),0 16px 36px rgba(0,0,0,.16)}

/* ---- fallbacks ---- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 #site-header.solid{background:rgba(239,233,221,.97)}#site-header.solid[data-tone=dark]{background:rgba(20,17,14,.95)}#site-header.solid[data-tone=red]{background:rgba(110,16,26,.96)}
 .menu{background:rgba(16,13,11,.97)}.btn,.mbtn{background:rgba(14,12,10,.6)}.cta .btn{background:rgba(255,255,255,.16)}}
@media(prefers-reduced-transparency:reduce){
 #site-header.solid{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}#site-header.solid[data-tone=dark]{background:#141110}#site-header.solid[data-tone=red]{background:#6b1019}
 .menu{background:#100d0b;-webkit-backdrop-filter:none;backdrop-filter:none}.btn,.mbtn{background:rgba(14,12,10,.65);-webkit-backdrop-filter:none;backdrop-filter:none}.cta .btn{background:rgba(255,255,255,.18)}}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn:active,.card:hover .frame{transform:none}}