/* SevenPees · minimal system
   Layout: one quiet column on #f4f4f4, generous air, small type; burgundy and the logo star are the only accents. */
@font-face{font-family:"Glacial";src:url("fonts/glacial-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Glacial";src:url("fonts/glacial-Bold.woff") format("woff");font-weight:700;font-display:swap}
:root{
  --bg:#f4f4f4;--ink:#171414;--mute:#7b7473;--line:rgba(23,20,20,.1);--burg:#660d0a;--burg-soft:#8a2a25;--on-burg:#f4f4f4;--tile:#e9e7e6;
  --font:"Glacial","Readex Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1280px;--star:url("star.svg");--g:clamp(18px,4vw,48px);--ease:cubic-bezier(.22,1,.36,1);--r:18px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
[dir=rtl] body{font-size:15.5px;line-height:1.85}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--burg);color:var(--on-burg)}
:focus-visible{outline:1.5px solid var(--burg);outline-offset:4px;border-radius:4px}
.wrap{max-width:calc(var(--max) + 2*var(--g));margin-inline:auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:16px;top:-80px;z-index:120;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:99px;font-size:13px}
.skip:focus{top:16px}

/* type */
h1,h2,h3{font-weight:400;margin:0;letter-spacing:-.02em;text-wrap:balance}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0}
.h1{font-size:clamp(31.2px,4.96vw,70.4px);line-height:1.02}
.h2{font-size:clamp(23px,2.72vw,38.4px);line-height:1.08}
.h3{font-size:clamp(16.4px,1.36vw,19.2px);line-height:1.2}
[dir=rtl] .h1{line-height:1.25}[dir=rtl] .h2{line-height:1.3}
.lede{font-size:clamp(16px,1vw,16.2px);color:var(--mute);max-width:46ch;margin:0;text-wrap:pretty}
.label{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
[dir=rtl] .label{letter-spacing:0;font-size:13px}
.label .star{flex:none}
@media (max-width:560px){.hero .label{white-space:nowrap;font-size:min(11px,2.5vw);letter-spacing:.08em;gap:8px;line-height:1}.hero .label .star{width:11px;height:11px}[dir=rtl] .hero .label{font-size:min(13px,3.2vw)}}
.burg{color:var(--burg)}
.muted{color:var(--mute)}
.prose{max-width:60ch}
.prose p{margin:0 0 1.2em;color:#3d3838}
.prose h3{font-size:15.3px;font-weight:700;margin:2.2em 0 .5em;letter-spacing:0}
.prose h3:first-child{margin-top:0}

/* star */
.star{width:10px;height:10px;flex:none;color:var(--burg)}
.star path{fill:currentColor}
.spin{animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* header */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);inset-inline:0;z-index:50;transition:transform .5s var(--ease),background .4s}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.hdr.solid{background:rgba(244,244,244,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.hdr.hide{transform:translateY(-100%)}
.brand{display:block;width:124px;color:var(--burg)}
.brand svg{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:30px;font-size:13.5px}
.nav a{position:relative;color:#3d3838;transition:color .3s;display:inline-flex;align-items:center}
.nav .roll{display:inline-block;overflow:hidden;line-height:1.3;vertical-align:top}
.nav .roll>span{display:inline-block;position:relative;transition:transform .5s var(--ease)}
.nav .roll>span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--burg)}
.nav a:hover .roll>span{transform:translateY(-100%)}
.nav .nst{position:absolute;width:9px;height:9px;inset-inline-start:50%;top:-13px;margin-inline-start:-4.5px;color:var(--burg);opacity:0;transform:scale(0) rotate(-180deg);transition:transform .55s var(--ease),opacity .3s}
.nav a:hover .nst{opacity:1;transform:scale(1) rotate(0)}
.nav a:hover,.nav a[aria-current=page]{color:var(--burg)}
.nav a[aria-current=page]::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:1px;background:currentColor}
.hdr-end{display:flex;align-items:center;gap:10px}
.lang{font-size:12.5px;padding:8px 12px;border-radius:99px;border:1px solid var(--line);transition:border-color .3s}
.lang:hover{border-color:var(--ink)}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;place-items:center;position:relative}
.menu-btn span{position:absolute;width:16px;height:1.5px;background:var(--bg);left:13px;transition:transform .4s var(--ease)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:23px}
.menu-open .menu-btn span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:6px;padding-top:80px;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.menu-open .menu{opacity:1;visibility:visible;transition:opacity .4s}
.menu a.m{font-size:clamp(29.5px,8vw,44.8px);line-height:1.15;letter-spacing:-.02em;display:flex;align-items:center;gap:14px;transform:translateY(24px);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.menu-open .menu a.m{transform:none;opacity:1}
.menu-open .menu a.m:nth-child(2){transition-delay:.05s}.menu-open .menu a.m:nth-child(3){transition-delay:.1s}.menu-open .menu a.m:nth-child(4){transition-delay:.15s}.menu-open .menu a.m:nth-child(5){transition-delay:.2s}
.menu .foot-note{margin-top:36px;font-size:13px;color:var(--mute);display:grid;gap:4px}
@media (max-width:880px){.nav{display:none}.menu-btn{display:grid}.hdr .btn-sm{display:none}}

/* buttons */
.btn{--h:48px;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding:0 22px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:14px;border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--burg);transform:scale(0);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:scale(1.05)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
[dir=rtl] .btn .ar{transform:scaleX(-1)}
[dir=rtl] .btn:hover .ar{transform:scaleX(-1) translateX(3px)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{color:var(--bg);box-shadow:none}
.btn.burg{background:var(--burg)}
.btn.burg::before{background:var(--ink)}
.btn.light{background:var(--bg);color:var(--ink)}
.btn.light::before{background:var(--ink)}
.btn.light:hover{color:var(--bg)}
.btn-sm{--h:38px;padding:0 16px;font-size:13px}
.ctas{display:flex;flex-wrap:wrap;gap:10px}

/* sections */
.sec{padding-block:clamp(90px,12vw,170px)}
.sec-s{padding-block:clamp(56px,7vw,100px)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.head .lede{max-width:38ch}
.rule{border-top:1px solid var(--line)}

/* hero */
.hero{padding-top:clamp(150px,19vw,230px);padding-bottom:clamp(48px,6vw,80px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero .lede{margin-inline:auto;text-align:center}
.hero .ctas{justify-content:center}
.hero.start{text-align:start;align-items:flex-start}
.hero.start .lede{margin-inline:0;text-align:start}
.hero.start .ctas{justify-content:flex-start}
.crumbs{font-size:12px;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--burg)}
.clocks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:12px;color:var(--mute);margin-top:10px}
.clocks span{display:inline-flex;gap:8px}
.clocks time{color:var(--ink);font-variant-numeric:tabular-nums}

/* media */
.media{border-radius:var(--r);overflow:hidden;background:var(--tile);position:relative}
.media img{width:100%;height:100%;object-fit:cover}
.show{aspect-ratio:16/8.5;transform-origin:50% 0;will-change:transform}
@media (max-width:700px){.show{aspect-ratio:4/5}}
.cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--mute)}

/* reveal system (only active when JS has run) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0s) + var(--ld,0s))}
.js .rv.in{opacity:1;transform:none}
.js .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .w>i{display:inline-block;font-style:normal;transform:translateY(105%) rotateX(-65deg);transform-origin:50% 100%;opacity:0;transition:transform 1.2s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--d,0s) + var(--ld,0s))}
.js .in .w>i{transform:none;opacity:1}
.js .w{perspective:600px}
.js .clip{clip-path:inset(12% 6% 12% 6% round var(--r));transition:clip-path 1.4s var(--ease)}
.js .clip img{transform:scale(1.15);transition:transform 1.8s var(--ease)}
.js .clip.in{clip-path:inset(0 0 0 0 round var(--r))}
.js .clip.in img{transform:none}
.js .clip::after{content:"";position:absolute;inset:0;z-index:3;background:var(--burg);transform-origin:50% 0;transition:transform 1.05s cubic-bezier(.76,0,.24,1) .1s;pointer-events:none}
.js .clip.in::after{transform:scaleY(0)}
.js .clip{position:relative}
.burst{position:fixed;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;color:var(--burg);pointer-events:none;z-index:400}
.burst svg{width:100%;height:100%;display:block}
.skew{will-change:transform}
.fillw .fw{opacity:1}
.js .fillw .fw{opacity:.14;transition:opacity .3s}

/* statement */
.statement{font-size:clamp(19.7px,2.4vw,33.6px);line-height:1.25;letter-spacing:-.015em;max-width:24ch;margin:0}
[dir=rtl] .statement{line-height:1.6;letter-spacing:0}

/* work rail */
.rail{position:relative}
.rail-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rail-track{display:flex;gap:clamp(16px,2vw,28px);will-change:transform;padding-inline:max(var(--g),calc((100vw - var(--max))/2))}
.card{flex:none;width:clamp(260px,30vw,420px);display:block}
.card .media{aspect-ratio:4/5}
.card .media img{transition:transform 1.2s var(--ease)}
.card:hover .media img{transform:scale(1.04)}
.card .t{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:15px}
.card .t span:last-child{color:var(--mute);font-size:12px;white-space:nowrap}
.card p{margin:2px 0 0;color:var(--mute);font-size:13px}
.card.end .media{display:grid;place-items:center;background:var(--burg);color:var(--on-burg)}
.card.end .media div{display:grid;justify-items:center;gap:16px;font-size:19.8px}
.card.end .star{width:46px;height:46px;color:var(--on-burg)}
@media (max-width:880px){
  .rail{height:auto!important}
  .rail-sticky{position:static;height:auto;overflow:visible}
  .rail-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;scroll-padding-inline:var(--g)}
  .rail-track::-webkit-scrollbar{display:none}
  .card{width:78vw;scroll-snap-align:start}
}
.grid-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px) clamp(16px,2vw,28px)}
.grid-cards .card{width:auto}
.grid-cards .card .media{aspect-ratio:5/4}
@media (max-width:640px){.grid-cards{grid-template-columns:minmax(0,1fr)}}

/* services list */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px;gap:24px;align-items:center;padding-block:26px;transition:color .35s,padding .5s var(--ease)}
.svc h3{font-size:clamp(16.4px,1.6vw,22.4px);letter-spacing:-.015em}
.svc p{margin:0;font-size:13.5px;color:var(--mute)}
.svc .ic{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;transition:background .35s,color .35s,transform .5s var(--ease)}
.svc a:hover{color:var(--burg);padding-inline-start:12px}
.svc a:hover .ic{background:var(--burg);color:var(--on-burg);border-color:var(--burg);transform:rotate(-45deg)}
[dir=rtl] .svc .ic{transform:scaleX(-1)}
[dir=rtl] .svc a:hover .ic{transform:scaleX(-1) rotate(-45deg)}
@media (max-width:700px){.svc a{grid-template-columns:minmax(0,1fr) 28px;gap:6px 16px;padding-block:20px}.svc p{grid-row:2;grid-column:1}}
.peek{position:fixed;left:0;top:0;width:220px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .35s,transform .5s var(--ease)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.peek img.on{opacity:1}
@media (hover:none){.peek{display:none}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{border-top:1px solid var(--line);padding-top:20px;min-width:0}
.stat b{display:block;font-weight:400;font-size:clamp(32.8px,3.68vw,51.2px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--burg)}
.stat p{margin:12px 0 0;font-size:13px;color:var(--mute);max-width:24ch}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}

/* markets */
.markets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mk{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mk h3{font-size:19.8px}
.mk small{font-size:11.5px;color:var(--mute);letter-spacing:.06em}
.mk p{margin:6px 0 0;font-size:13.5px;color:var(--mute)}
.mk time{font-size:12px;color:var(--burg);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px}
@media (max-width:900px){.markets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.markets{grid-template-columns:minmax(0,1fr)}}

/* quote */
.quote{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.quote .star{width:28px;height:28px}
.quote blockquote{margin:0;font-size:clamp(21.3px,2.72vw,38.4px);line-height:1.15;letter-spacing:-.02em;max-width:18ch}

/* marquee */
.mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-t{display:flex;width:max-content;gap:56px;animation:mq 50s linear infinite;font-size:clamp(16px,1.6vw,20.8px);color:#4a4444}
.mq-t span{display:inline-flex;align-items:center;gap:56px;white-space:nowrap}
.mq-t span::after{content:"";width:9px;height:9px;background:var(--burg);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
[dir=rtl] .mq-t{animation-name:mqr}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mqr{to{transform:translateX(50%)}}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:22px;font-size:14.8px;transition:color .3s}
.faq summary:hover{color:var(--burg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:12px;height:12px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;inset:50% 0 auto;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding-bottom:24px;color:var(--mute);max-width:64ch;font-size:14.5px}
.faq .a p{margin:0}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.split .stick{position:sticky;top:110px;display:grid;gap:14px}
@media (max-width:880px){.split{grid-template-columns:minmax(0,1fr)}.split .stick{position:static}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.gal .media{grid-column:span 6;aspect-ratio:4/3}
.gal .t{aspect-ratio:4/5;grid-column:span 4}
.gal .w8{grid-column:span 8;aspect-ratio:16/10}
.gal .w12{grid-column:span 12;aspect-ratio:21/9}
@media (max-width:700px){.gal .media{grid-column:span 12!important;aspect-ratio:4/3!important}.gal .t{aspect-ratio:4/5!important}}

/* deliverables */
.del{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.del div{border-top:1px solid var(--line);padding-block:20px 26px;min-width:0}
.del h3{font-size:15.5px;font-weight:700;letter-spacing:0;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.del p{margin:0;font-size:13.5px;color:var(--mute)}
@media (max-width:900px){.del{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.del{grid-template-columns:minmax(0,1fr)}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.steps div{border-top:1px solid var(--line);padding-top:20px}
.steps small{font-size:11.5px;color:var(--mute)}
.steps h3{font-size:19.8px;margin:8px 0}
.steps p{margin:0;font-size:13.5px;color:var(--mute)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:8px 0 0;width:100%;text-align:start}
.facts div{border-top:1px solid var(--line);padding-top:14px;min-width:0}
.facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
[dir=rtl] .facts dt{letter-spacing:0;font-size:12.5px}
.facts dd{margin:4px 0 0;font-size:14px}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* sites list */
.sites{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sites li{border-bottom:1px solid var(--line)}
.sites a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:18px;align-items:center;padding-block:20px;transition:color .3s}
.sites a:hover{color:var(--burg)}
.sites b{font-weight:400;font-size:clamp(16px,1.44vw,19.2px)}
.sites span{font-size:13px;color:var(--mute)}
.sites em{font-style:normal;font-size:12.5px;direction:ltr}
@media (max-width:640px){.sites a{grid-template-columns:minmax(0,1fr) auto}.sites span{display:none}}

/* contact */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
.form .full{grid-column:1/-1}
.field{display:grid;gap:6px;min-width:0}
.field label,.field .lab{font-size:12px;color:var(--mute)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;width:100%;-webkit-appearance:none;appearance:none}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--burg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0}
.chips span{display:inline-block;padding:8px 14px;border-radius:99px;border:1px solid var(--line);font-size:13px;color:var(--ink);transition:.3s}
.chips input:checked+span{background:var(--burg);border-color:var(--burg);color:var(--on-burg)}
.chips input:focus-visible+span{outline:1.5px solid var(--burg);outline-offset:2px}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}
.contact-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:clamp(16.4px,1.76vw,22.4px);letter-spacing:-.01em}
.contact-line span{direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere;min-width:0}
.copy{font-size:11.5px;border:1px solid var(--line);background:none;border-radius:99px;padding:5px 11px;cursor:pointer;color:var(--mute)}
.copy:hover{color:var(--burg);border-color:var(--burg)}
.ltr{direction:ltr;unicode-bidi:isolate}

/* footer */
.cta-panel{background:var(--burg);color:var(--on-burg);border-radius:clamp(18px,2.4vw,28px);padding:clamp(40px,7vw,96px) clamp(24px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;position:relative;overflow:hidden}
.cta-panel .label{color:rgba(244,244,244,.7)}
.cta-panel h2{font-size:clamp(27.9px,4vw,57.6px);line-height:1.05;margin-top:18px;max-width:14ch}
[dir=rtl] .cta-panel h2{line-height:1.35}
.cta-panel .big-star{position:absolute;inset-inline-end:-6%;top:-18%;width:clamp(220px,32vw,460px);height:auto;color:rgba(244,244,244,.08);pointer-events:none}
.cta-panel .ctas{position:relative}
@media (max-width:760px){.cta-panel{grid-template-columns:minmax(0,1fr)}}
.foot{padding-block:clamp(48px,6vw,80px) 28px;font-size:13.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
.foot-grid h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;font-weight:400}
[dir=rtl] .foot-grid h2{letter-spacing:0;font-size:12.5px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-grid a{color:#3d3838;transition:color .3s}
.foot-grid a:hover{color:var(--burg)}
.foot-grid .brand{width:150px;margin-bottom:16px}
.foot-grid p{margin:0;color:var(--mute);max-width:30ch}
.legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
@media (max-width:820px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;will-change:transform;width:16px;height:16px;margin:-8px 0 0 -8px;color:var(--burg);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s}
.cur svg{width:100%;height:100%}
.cur.hov{width:30px;height:30px;margin:-15px 0 0 -15px}
.cur.hide{width:0;height:0;margin:0;opacity:0!important}
.cur-l{position:fixed;left:0;top:0;z-index:199;pointer-events:none;background:var(--burg);color:var(--on-burg);font-size:12px;padding:7px 13px;border-radius:99px;opacity:0;transition:opacity .25s;white-space:nowrap;will-change:transform}
.cur-l.on{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.cur-l{display:none}}
@media (hover:hover) and (pointer:fine){.has-cur,.has-cur a,.has-cur button,.has-cur summary,.has-cur label{cursor:none}}

/* loader */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;animation:ldout .7s var(--ease) 2.35s forwards}
.loader svg{width:min(62vw,420px);height:auto;color:var(--burg);overflow:visible}
.loader .lw,.loader .ls{clip-path:inset(0 100% 0 0);animation:ldwipe 1s var(--ease) 1.25s forwards}
.loader .ls{animation-delay:1.45s}
.loader .lstar{transform-box:fill-box;transform-origin:center;animation:ldstar 1.9s var(--ease) forwards}
@keyframes ldstar{0%{transform:translate(-275px,74px) scale(3.4) rotate(0)}55%{transform:translate(-275px,74px) scale(3.4) rotate(540deg)}100%{transform:translate(0,0) scale(1) rotate(900deg)}}
@keyframes ldwipe{to{clip-path:inset(0 0 0 0)}}
@keyframes ldout{to{opacity:0;visibility:hidden}}
.no-loader .loader{display:none}
.ld .hero{--ld:2.25s}
.curtain{position:fixed;inset:0;z-index:250;pointer-events:none;visibility:hidden}
.cu-iris{position:absolute;inset:0;background:var(--burg);clip-path:circle(0 at var(--cx,50%) var(--cy,50%))}
.cu-mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;color:var(--on-burg);opacity:0}
.cu-mid .star{width:28px;height:28px;color:var(--on-burg);animation:spin 1.6s linear infinite}
.cu-t{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.75;max-width:80vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[dir=rtl] .cu-t{letter-spacing:0;font-size:13px}
.leaving .curtain{visibility:visible;pointer-events:auto}
.leaving .cu-iris{clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%));transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.leaving .cu-mid{opacity:1;transition:opacity .35s .3s}
.leaving .cu-t{animation:cuT .6s var(--ease) .32s both}
@keyframes cuT{from{transform:translateY(8px);opacity:0}}
.arriving .curtain,.arrived .curtain{visibility:visible}
.arriving .cu-iris{clip-path:circle(150vmax at var(--ax,50%) var(--ay,50%))}
.arriving .cu-mid{opacity:1}
.arrived .cu-iris{clip-path:circle(0 at var(--ax,50%) var(--ay,50%));transition:clip-path 1s cubic-bezier(.76,0,.24,1)}
.arrived .cu-mid{opacity:0;transform:scale(.6);transition:opacity .35s,transform .6s var(--ease)}
.arrived.settled .curtain{visibility:hidden}
.arrived .hero{--ld:.45s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader,.curtain{display:none!important}
  .js .clip::after{display:none}
  .js .rv,.js .w>i,.js .clip,.js .clip img{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .fillw .fw{opacity:1}
}

/* progress */
.progress{position:fixed;top:0;inset-inline:0;height:2px;background:var(--burg);transform:scaleX(0);transform-origin:0 50%;z-index:70;pointer-events:none}
[dir=rtl] .progress{transform-origin:100% 50%}
/* featured badge */
.feat{position:relative}
.badge{position:absolute;inset-inline-end:calc(var(--g) + 22px);bottom:62px;width:118px;height:118px;border-radius:50%;background:var(--bg);display:grid;place-items:center;pointer-events:none;box-shadow:0 10px 30px rgba(23,20,20,.12)}
.badge-ring{position:absolute;inset:0;width:100%;height:100%}
.badge-ring text{font-family:var(--font);font-size:9.6px;letter-spacing:2.1px;fill:var(--ink)}
[dir=rtl] .badge-ring text{letter-spacing:0;font-size:10.5px}
.badge-star{width:26px;height:26px;color:var(--burg);animation:spin 6s linear infinite}
@media (max-width:700px){.badge{width:88px;height:88px;bottom:54px;inset-inline-end:calc(var(--g) + 12px)}.badge-star{width:20px;height:20px}}
/* logo marquee */
.logos{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos-t{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;animation:mq 45s linear infinite;padding-inline-end:clamp(48px,6vw,96px)}
[dir=rtl] .logos-t{animation-name:mqr}
.logos:hover .logos-t{animation-play-state:paused}
.logos li{flex:none;display:flex;align-items:center;height:64px}
.logos img{height:var(--h,40px);width:auto;opacity:.5;transition:opacity .35s,transform .5s var(--ease)}
.logos li:hover img{opacity:1;transform:scale(1.06)}
@media (max-width:700px){.logos img{height:calc(var(--h,40px)*.75)}.logos li{height:52px}}
/* drawn rules */
.js .stat,.js .mk,.js .del>div,.js .steps>div{border-top-color:transparent;position:relative}
.js .stat::before,.js .mk::before,.js .del>div::before,.js .steps>div::before{content:"";position:absolute;inset-inline:0;top:-1px;height:1px;background:rgba(23,20,20,.16);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease);transition-delay:var(--d,0s)}
[dir=rtl] .js .stat::before,[dir=rtl] .js .mk::before,[dir=rtl] .js .del>div::before,[dir=rtl] .js .steps>div::before{transform-origin:100% 50%}
.js .stat.in::before,.js .mk.in::before,.js .del>div.in::before,.js .steps>div.in::before{transform:scaleX(1)}
/* faq open */
.faq details[open] .a{animation:fadeup .6s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* card tilt */
.card .media{transition:transform .6s var(--ease)}
.quote blockquote .w{padding-bottom:.12em}

/* markets v2 */
.markets{position:relative}
.route{position:absolute;top:-1px;inset-inline:0;height:1px;background:var(--burg);transform:scaleX(var(--rp,0));transform-origin:0 50%;z-index:2;pointer-events:none}
[dir=rtl] .route{transform-origin:100% 50%}
.mk{position:relative;transition:transform .6s var(--ease)}
.mk .pin{position:absolute;top:-5px;inset-inline-start:0;width:9px;height:9px;z-index:3}
.mk .pin i{position:absolute;inset:0;border-radius:50%;background:var(--burg);transform:scale(0);transition:transform .6s cubic-bezier(.34,1.8,.5,1)}
.mk .pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--burg);opacity:0}
.mk.lit .pin i{transform:scale(1)}
.mk.lit .pin::after{animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.6);opacity:0}}
.mk-n{position:absolute;top:20px;inset-inline-end:0;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.mk h3{transition:color .4s}
.mk-st{position:absolute;bottom:2px;inset-inline-end:0;width:14px;height:14px;color:var(--burg);opacity:0;transform:scale(0) rotate(-120deg);transition:transform .7s var(--ease),opacity .4s}
.mk:hover{transform:translateY(-6px)}
.mk:hover h3{color:var(--burg)}
.mk:hover .mk-st{opacity:1;transform:scale(1) rotate(0)}
.mk time{gap:0}
.mk time::before{margin-inline-end:8px;content:"";width:5px;height:5px;border-radius:50%;background:var(--burg);animation:blink 2s steps(1) infinite}
.mk time b{font-weight:inherit;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
@media (max-width:900px){.route{display:none}.js .mk.in .pin i{transform:scale(1);transition-delay:calc(var(--d,0s) + .5s)}.js .mk.in .pin::after{animation:ping 2.4s var(--ease) 1s infinite}}
/* faq v2 */
.faq summary{justify-content:flex-start}
.faq .qn{flex:none;width:38px;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.06em;transition:color .4s}
.faq .qt{flex:1;transition:transform .5s var(--ease)}
.faq summary:hover .qt{transform:translateX(8px)}
[dir=rtl] .faq summary:hover .qt{transform:translateX(-8px)}
.faq details{position:relative}
.faq details::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--burg);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
[dir=rtl] .faq details::after{transform-origin:100% 50%}
.faq details:hover::after,.faq details[open]::after{transform:scaleX(1)}
.faq details[open] .qn,.faq details[open] summary{color:var(--burg)}
.faq summary i{transition:transform .6s var(--ease)}
.faq details[open] summary i{transform:rotate(180deg)}
.faq .a{overflow:hidden;padding-inline-start:58px}
@media (max-width:600px){.faq summary{gap:12px}.faq .qn{width:24px}.faq .a{padding-inline-start:36px}}
.js .faq>details.rv{transform:translateX(-36px)}
[dir=rtl] .js .faq>details.rv{transform:translateX(36px)}
.js .faq>details.rv.in{transform:none}
/* newsletter */
.nl{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 48px;align-items:center;padding:28px 30px;border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden}
.nl h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 8px;font-weight:400}
[dir=rtl] .nl h2{letter-spacing:0;font-size:12.5px}
.nl p{margin:0;color:var(--ink);font-size:15px;max-width:40ch}
.nl-f{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);position:relative}
.nl-f::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--burg);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
[dir=rtl] .nl-f::after{transform-origin:100% 50%}
.nl-f:focus-within::after{transform:scaleX(1)}
.nl-f input{flex:1;min-width:0;font:inherit;font-size:16px;border:0;background:transparent;padding:14px 0;color:var(--ink);outline:0}
.nl-f input::placeholder{color:var(--mute)}
.nl-f button{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:var(--ink);color:var(--bg);height:40px;padding:0 18px;border-radius:99px;font:inherit;font-size:13px;cursor:pointer;transition:background .35s}
.nl-f button:hover{background:var(--burg)}
.nl-f button .star{width:12px;height:12px;transition:transform .7s var(--ease)}
.nl-f button:hover .star{transform:rotate(180deg)}
.nl.done .nl-f{pointer-events:none}
.nl.done .nl-f button .star{animation:spin 1s linear}
.nl-msg{grid-column:1/-1;margin:0;font-size:13px;color:var(--burg)}
@media (max-width:760px){.nl{grid-template-columns:minmax(0,1fr);padding:22px 20px}}
@media (prefers-reduced-motion:reduce){.mk .pin::after,.mk time::before,.mk time b{animation:none!important}}

/* brief form */
.field label i,.field .lab i{font-style:normal;color:var(--burg)}
.field .err{display:none;font-size:11.5px;color:var(--burg)}
.field.bad .err{display:block;animation:fadeup .4s var(--ease)}
.field.bad input,.field.bad select,.field.bad textarea{border-bottom-color:var(--burg)}
#f-svc.bad .chips span{border-color:rgba(102,13,10,.45)}
.field.more{opacity:0;transform:translateY(-8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.field.more.open{opacity:1;transform:none}
.field select:invalid{color:var(--mute)}
.form button.btn[disabled]{opacity:.6;pointer-events:none}
.form.sending .btn .ar{animation:spin 1s linear infinite;display:inline-block}
.form-msg{margin:0;font-size:14px;min-height:1px}
.form-msg.ok{color:var(--burg);animation:fadeup .5s var(--ease)}
.form-msg.no{color:var(--burg)}
/* ===== work page ===== */
.wk{scroll-margin-top:120px}
#festive{overflow-x:clip}
@media (max-width:880px){.wk-nav{top:72px}.ev .rail-sticky{padding-top:0}}
.ev .rail-sticky{padding-top:150px;justify-content:flex-start}
@media (max-height:760px) and (min-width:881px){.ev-i .media{height:48vh}}
.wk-n{font-weight:400;color:var(--burg);margin-inline-end:2px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.wk-nav{position:sticky;top:86px;z-index:30;display:flex;justify-content:center;padding-inline:var(--g);pointer-events:none;transition:top .5s var(--ease)}
.hh .wk-nav{top:14px}
.wk-nav-in{pointer-events:auto;display:flex;gap:2px;padding:5px;border-radius:99px;background:rgba(244,244,244,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;max-width:100%;box-shadow:0 10px 30px -18px rgba(0,0,0,.25)}
.wk-nav-in::-webkit-scrollbar{display:none}
.wk-nav a{flex:none;font-size:12.5px;padding:8px 14px;border-radius:99px;color:#3d3838;transition:background .4s var(--ease),color .4s}
.wk-nav a:hover{color:var(--burg)}
.wk-nav a.on{background:var(--burg);color:var(--on-burg)}
/* events rail */
.ev .rail-track{align-items:flex-start}
.ev-i{flex:none;margin:0}
.ev-i .media{height:min(56vh,500px);aspect-ratio:3/2}
.ev-i.t .media{aspect-ratio:4/5}
.ev-i img{transform:scale(1.18);will-change:transform}
.ev-i figcaption,.vd figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13.5px}
.ev-i figcaption span:last-child,.vd figcaption span:last-child{color:var(--mute);font-size:12px;white-space:nowrap}
.ev-prog{margin-top:26px}
.ev-prog i{display:block;height:1px;background:var(--line);position:relative;overflow:hidden}
.ev-prog i::after{content:"";position:absolute;inset:0;background:var(--burg);transform:scaleX(var(--p,0));transform-origin:0 50%}
[dir=rtl] .ev-prog i::after{transform-origin:100% 50%}
@media (max-width:880px){.ev-i .media{height:auto;width:80vw}.ev-i.t .media{width:58vw}.ev-i{scroll-snap-align:start}.ev-i img{transform:none}.ev-prog{display:none}}
/* photography masonry */
.ph-grid{columns:3;column-gap:clamp(10px,1.4vw,18px)}
.ph-i{break-inside:avoid;margin:0 0 clamp(10px,1.4vw,18px);position:relative;display:block}
.ph-i .media img{height:auto;display:block}
.ph-i figcaption,.br-i figcaption{position:absolute;inset:auto 0 0 0;padding:16px 16px 14px;color:#fff;font-size:12.5px;display:flex;justify-content:space-between;gap:10px;background:linear-gradient(transparent,rgba(10,8,8,.6));border-radius:0 0 var(--r) var(--r);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.ph-i:hover figcaption,.br-i:hover figcaption{opacity:1;transform:none}
.js .clip.in.ph-i img,.js .clip.in.br-i img{transition:transform 1.4s var(--ease)}
.js .clip.in.ph-i:hover img,.js .clip.in.br-i:hover img{transform:scale(1.06)}
@media (max-width:700px){.ph-grid{columns:2}}
@media (hover:none){.ph-i figcaption,.br-i figcaption{opacity:1;transform:none;font-size:11px;padding:12px 10px 9px}}
/* videography */
.vd-row{max-width:1240px;margin-inline:auto;flex-wrap:wrap;row-gap:clamp(28px,3vw,44px);display:flex;gap:clamp(10px,1.4vw,18px);align-items:center}
.vd{flex:1 1 calc(20% - 18px);min-width:0;margin:0;transition:flex-grow .8s var(--ease),opacity .5s}
.vd .media{aspect-ratio:9/16;cursor:pointer;outline:1px solid var(--line);outline-offset:-1px}
.vd.s .media{aspect-ratio:1/1}
.vd video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1s var(--ease)}
.vd-play{position:absolute;inset-inline-start:14px;bottom:16px;width:38px;height:38px;border-radius:50%;background:rgba(244,244,244,.92);display:grid;place-items:center;color:var(--burg);transition:opacity .4s,transform .6s var(--ease)}
.vd-play .star{width:15px;height:15px;animation:spin 8s linear infinite}
.vd.playing .vd-play{opacity:0;transform:scale(.3) rotate(120deg)}
.vd-bar{position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--burg);transform:scaleX(var(--vp,0));transform-origin:0 50%}
[dir=rtl] .vd-bar{transform-origin:100% 50%}
@media (hover:hover) and (min-width:881px){.vd-row:hover .vd{opacity:.5}.vd-row .vd:hover{flex-grow:1.7;opacity:1}.vd:hover video{transform:scale(1)}}
@media (max-width:880px){.vd-row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--g)*-1);padding-inline:var(--g);align-items:flex-start}.vd-row::-webkit-scrollbar{display:none}.vd{flex:0 0 60vw;scroll-snap-align:start}.vd.s{flex-basis:80vw}}
/* branding bento */
.br-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(10px,1.4vw,18px)}
.br-i{margin:0;position:relative}
.br-i .media{aspect-ratio:1/1;height:100%}
.b-big{grid-column:span 2;grid-row:span 2}
.b-big .media{aspect-ratio:auto}
.b-wide{grid-column:span 2}
.b-wide .media{aspect-ratio:auto}
@media (max-width:760px){.br-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.b-big .media{aspect-ratio:1/1}.b-wide .media{aspect-ratio:2/1}}
/* websites stage */
.stage{position:relative;perspective:1800px;margin-top:6px}
.stage-3d{position:relative;height:clamp(300px,44vw,600px);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease)}
.site-s{--dir:1;position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;transform-style:preserve-3d;visibility:hidden;opacity:0}
.site-s.on{visibility:visible;opacity:1}
.site-s.out{visibility:visible;animation:turnOut .55s cubic-bezier(.55,0,.75,.2) forwards}
.site-s.in{animation:turnIn .9s var(--ease)}
@keyframes turnOut{to{transform:rotateY(calc(-90deg * var(--dir))) scale(.9);opacity:0}}
@keyframes turnIn{from{transform:rotateY(calc(90deg * var(--dir))) scale(.9);opacity:0}}
.laptop{width:min(74%,820px);position:relative;touch-action:pan-y;cursor:grab}
.lid{background:#1c1a1a;border-radius:16px 16px 3px 3px;padding:1.8% 1.8% 2.6%;box-shadow:0 40px 70px -40px rgba(0,0,0,.55)}
.scr{aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#000}
.scr img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.base{height:clamp(8px,1.2vw,15px);margin:0 -6.5%;background:linear-gradient(#e2dfdf,#a8a3a3);border-radius:0 0 18px 18px;position:relative}
.base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:45%;margin-left:-8%;background:#8f8a8a;border-radius:0 0 8px 8px}
.phone{position:absolute;bottom:-3%;inset-inline-end:max(2%,calc(50% - 480px));width:clamp(112px,16vw,220px);aspect-ratio:9/19.5;background:#121010;border-radius:clamp(20px,2.6vw,34px);padding:clamp(5px,.6vw,8px);box-shadow:0 30px 60px -24px rgba(0,0,0,.6),inset 0 0 0 1px #2c2828;transform:translateZ(70px)}
.ph-scr{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;border-radius:clamp(15px,2vw,27px);scrollbar-width:none;overscroll-behavior:contain;background:#000;cursor:grab;outline:0}
.ph-scr::-webkit-scrollbar{display:none}
.ph-scr img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.notch{position:absolute;top:clamp(9px,1vw,14px);left:50%;width:30%;height:clamp(9px,1vw,15px);margin-left:-15%;background:#121010;border-radius:10px;pointer-events:none}
.phone::after{content:"↕";position:absolute;inset-inline-start:-42px;top:44%;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--mute);animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{50%{transform:translateY(-8px)}}
.stage-ui{display:flex;justify-content:center;align-items:center;gap:clamp(14px,3vw,34px);margin-top:clamp(36px,5vw,56px)}
.st-arr{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:14.4px;color:var(--ink);transition:background .35s,color .35s,border-color .35s,transform .5s var(--ease)}
.st-arr:hover{background:var(--burg);border-color:var(--burg);color:var(--on-burg);transform:scale(1.06)}
[dir=rtl] .st-arr span{display:inline-block;transform:scaleX(-1)}
.st-info{display:grid;justify-items:center;gap:3px;min-width:min(240px,50vw);text-align:center}
.st-info>*{transition:opacity .35s,transform .5s var(--ease)}
.st-info.sw>*{opacity:0;transform:translateY(8px)}
.st-name{font-weight:400;font-size:clamp(16px,1.44vw,17.6px)}
.st-meta{font-size:12px;color:var(--mute)}
.st-url{font-size:12.5px;color:var(--burg);direction:ltr}
.st-dots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:20px}
.st-dots button{font:inherit;font-size:12px;border:1px solid var(--line);background:none;border-radius:99px;padding:6px 12px;cursor:pointer;color:var(--mute);transition:background .35s,color .35s,border-color .35s}
.st-dots button:hover{color:var(--burg)}
.st-dots button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:700px){.stage-3d{height:auto;aspect-ratio:1/0.82}.laptop{width:86%;margin-inline-end:12%}.phone{width:28vw;bottom:-6%;inset-inline-end:1%}.phone::after{display:none}}
/* festive decks */
.decks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.deck{margin:0;--fan:0;--fx:0}
.deck.in{--fan:3;--fx:6}
.deck:hover{--fan:5.5;--fx:12}
.deck-s{display:block;position:relative;width:100%;aspect-ratio:4/5;border:0;padding:0;background:none;cursor:pointer}
.dc{--k:0;--s:1;position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:var(--tile);box-shadow:0 18px 40px -24px rgba(0,0,0,.5);z-index:calc(10 - var(--k));transform:translateX(calc(var(--k) * var(--s) * var(--fx) * 1px)) rotate(calc(var(--k) * var(--s) * var(--fan) * 1deg));transform-origin:50% 100%;transition:transform .9s var(--ease),opacity .5s,filter .6s}
.dc img{width:100%;height:100%;object-fit:cover}
.dc.back{filter:brightness(.9)}
.dc.fly{transform:translate(-55%,-6%) rotate(-16deg)!important;opacity:0;transition:transform .5s cubic-bezier(.55,0,.75,.2),opacity .45s}
[dir=rtl] .dc.fly{transform:translate(55%,-6%) rotate(16deg)!important}
.deck figcaption{margin-top:22px;display:grid;gap:3px}
.deck b{font-weight:400;font-size:15px}
.deck span{font-size:12.5px;color:var(--mute)}
.deck small{font-size:11px;color:var(--burg);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.deck small em{font-style:normal}
@media (max-width:900px){.decks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.decks{grid-template-columns:minmax(0,1fr);padding-inline:6%}}
@media (prefers-reduced-motion:reduce){.site-s.out,.site-s.in{animation:none}.phone::after{animation:none}}
.media picture{display:block;width:100%;height:100%}
.gal img[src*="backstage-selfie"]{object-position:50% 72%}
.hero:has(~ .feat){padding-top:clamp(112px,12.5vw,160px)}
.hero .h1 .w{transition:transform .9s var(--ease)}
.rail:not(.ev) .card{transform-origin:50% 50%;will-change:transform;transition:opacity .2s linear}
.rail:not(.ev) .rail-track{transform-style:preserve-3d}
/* ===== phone motion ===== */
.hero{position:relative}
.hero-star{position:absolute;inset-inline-end:clamp(4px,4vw,64px);top:clamp(96px,11vw,150px);width:clamp(56px,7vw,104px);height:auto;color:var(--burg);opacity:.16;pointer-events:none;z-index:-1;will-change:transform}
@media (max-width:880px){
  .rail:not(.ev) .rail-track{flex-direction:column;overflow:visible;gap:22px;padding-bottom:0;scroll-snap-type:none}
  .rail:not(.ev) .card{--i:0;position:sticky;top:calc(80px + var(--i) * 14px);width:100%;background:var(--bg);padding-bottom:10px;transform-origin:50% 0;will-change:transform,filter;opacity:1!important}
  .rail:not(.ev) .card .media{aspect-ratio:1/1.05}
  .rail:not(.ev) .head .label{display:none}
  .svc a{transition:color .5s,padding .6s var(--ease),background .5s}
  .svc a.focus{color:var(--burg);padding-inline-start:10px}
  .svc a.focus .ic{background:var(--burg);color:var(--on-burg);border-color:var(--burg);transform:rotate(-45deg)}
  .svc-th{grid-column:1/-1;height:0;overflow:hidden;border-radius:12px;transition:height .7s var(--ease),margin .7s var(--ease)}
  .svc-th img{width:100%;height:150px;object-fit:cover;display:block;transform:scale(1.12);transition:transform 1.2s var(--ease)}
  .svc a.focus .svc-th{height:150px;margin-top:4px}
  .svc a.focus .svc-th img{transform:none}
}
/* ===== client questionnaire ===== */
.q-wrap{max-width:920px}
.q-bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;position:sticky;top:76px;z-index:20}
.q-bar i{display:block;height:100%;background:var(--burg);transform:scaleX(var(--qp,.05));transform-origin:0 50%;transition:transform .8s var(--ease)}
[dir=rtl] .q-bar i{transform-origin:100% 50%}
.q-steps{list-style:none;margin:16px 0 clamp(40px,6vw,70px);padding:0;display:flex;flex-wrap:wrap;gap:6px}
.q-steps li{font-size:11.5px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:var(--mute);transition:background .4s,color .4s,border-color .4s}
.q-steps li.done{color:var(--burg);border-color:rgba(102,13,10,.35)}
.q-steps li.on{background:var(--burg);color:var(--on-burg);border-color:var(--burg)}
.q-step{animation:qIn .7s var(--ease)}
.q-step.back{animation:qInB .7s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateX(40px)}}
@keyframes qInB{from{opacity:0;transform:translateX(-40px)}}
[dir=rtl] .q-step{animation-name:qInB}[dir=rtl] .q-step.back{animation-name:qIn}
.q-head{margin-bottom:clamp(28px,4vw,44px);display:grid;gap:12px}
.q-head .lede{margin:0;max-width:52ch}
.q-num{font-variant-numeric:tabular-nums}
.q-f{border:0;padding:0;margin:0;min-width:0}
.q-f legend{padding:0;margin-bottom:10px}
.chips.big span{padding:12px 18px;font-size:14px}
.q-other{margin-top:10px}
.q-nav{display:flex;align-items:center;gap:12px;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--line)}
.q-sp{flex:1}
.q-done{text-align:center;display:grid;justify-items:center;gap:18px;padding-block:40px;animation:qIn .8s var(--ease)}
.q-done-star{width:64px;height:64px;color:var(--burg);animation:spin 6s linear infinite}
.q-done .lede{max-width:46ch;margin:0 auto}
@media (max-width:880px){.q-bar{top:70px}}
.q-wrap [hidden]{display:none!important}
@media (max-width:700px){.hero-star{top:auto;bottom:6px;width:46px;inset-inline-end:6px}}
@media (max-width:520px){.clocks{gap:8px 14px;font-size:11px}.clocks span{gap:5px}}
.vd-ctl{position:absolute;inset-inline-end:12px;bottom:14px;display:flex;gap:6px;z-index:2;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ease)}
.vd:hover .vd-ctl,.vd.playing .vd-ctl,.vd:focus-within .vd-ctl{opacity:1;transform:none}
@media (hover:none){.vd-ctl{opacity:1;transform:none}}
.vd-ctl button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(18,16,16,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .4s var(--ease)}
.vd-ctl button:hover{background:var(--burg);transform:scale(1.08)}
.vd-ctl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vd-snd svg path:first-child{fill:currentColor;stroke:none}
.vd-snd .on{display:none}.vd-snd[aria-pressed=true] .on{display:block}.vd-snd[aria-pressed=true] .off{display:none}
.vd-snd[aria-pressed=true]{background:var(--burg)}
.vd video:fullscreen{object-fit:contain;background:#000}
@media (max-width:880px){.vd-row{flex-wrap:nowrap}}
.br-grid{--bg:16px;gap:var(--bg);grid-auto-rows:calc((min(100vw - 2 * var(--g), var(--max)) - 3 * var(--bg)) / 4)}
.br-i .media{aspect-ratio:auto!important;height:100%}
@media (max-width:760px){.br-grid{grid-auto-rows:calc((100vw - 2 * var(--g) - var(--bg)) / 2)}}
.br-i img[src*="okaii-hotel-resort-branding"]{object-position:50% 0}.br-i img[src*="okaii-hotel-resort-logo-mockup"]{object-position:50% 60%}
.br-i img[src*="safqa-social-profile"]{object-position:50% 0}
.br-i img[src*="safqa-app-qatar-skyline"]{object-position:82% 50%}
/* social content */
.soc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(28px,5vw,80px);align-items:start}
.soc-intro{position:sticky;top:150px;display:grid;gap:14px}
.soc-logo{width:84px;height:84px;border-radius:50%;object-fit:cover}
.soc-intro h3{font-size:clamp(16.4px,1.6vw,20.8px)}
.soc-intro p{margin:0;color:var(--mute);font-size:14.5px;max-width:42ch}
.soc-tags{display:flex;flex-wrap:wrap;gap:6px}
.soc-tags span{font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:99px}
.soc-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.soc-i{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;display:block;background:var(--tile)}
.soc-i img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.soc-i:hover img{transform:scale(1.07)}
.js .soc-feed .soc-i.rv{transform:translateY(30px) scale(.96)}
.js .soc-feed .soc-i.rv.in{transform:none}
.soc-feed .soc-i:nth-child(3n+2){transition-delay:.08s}.soc-feed .soc-i:nth-child(3n){transition-delay:.16s}
.soc-play{position:absolute;top:10px;inset-inline-end:10px;width:30px;height:30px;border-radius:50%;background:rgba(18,16,16,.5);color:#fff;font-size:10px;display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:880px){.soc{grid-template-columns:minmax(0,1fr)}.soc-intro{position:static}.soc-feed{gap:4px}}
/* founder */
.fd-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.fd-ph{margin:0;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#0d0d0d}
.fd-ph img{width:100%;height:100%;object-fit:cover}
.fd-txt{display:grid;gap:28px}
.fd-q{margin:0;font-size:clamp(16.4px,1.76vw,24px);line-height:1.4;letter-spacing:-.01em}
.fd-sig{display:grid;gap:2px}
.fd-sig b{font-weight:400;font-size:16.2px;color:var(--burg)}
.fd-sig span{font-size:12.5px;color:var(--mute)}
@media (max-width:880px){.fd-grid{grid-template-columns:minmax(0,1fr)}.fd-ph{max-width:420px}}
.gal img[src*="team-mercedes-thoum-launch"]{object-position:50% 60%}
.founder{padding-top:clamp(40px,5vw,70px)}
.fd-grid{grid-template-columns:minmax(0,.55fr) minmax(0,1.2fr);align-items:stretch}
.fd-ph{aspect-ratio:auto;height:100%;min-height:0}
.fd-ph img{object-position:50% 30%}
.fd-txt{align-content:center;padding-block:4px}
@media (max-width:880px){.fd-grid{grid-template-columns:minmax(0,1fr)}.fd-ph{aspect-ratio:4/5;height:auto;max-width:360px}}
.gal img[src*="adl-front-event"]{object-position:50% 45%}
/* who we are + image */
.who .split{align-items:start}
.wa-l{display:grid;gap:22px}
.wa-img{position:relative;display:block}
.wa-img .media{aspect-ratio:4/5}
.wa-img .media img{object-position:50% 50%}
.wa-img .badge{inset-inline-end:-30px;bottom:36px;width:104px;height:104px}
.wa-cap{margin:0;font-size:11.5px;color:var(--mute);letter-spacing:.04em}
@media (max-width:880px){.wa-img .badge{inset-inline-end:12px;bottom:14px;width:80px;height:80px}}
.who .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.who .wa-l{position:static;grid-template-rows:auto 1fr auto}
.who .wa-img .media{aspect-ratio:auto;height:100%;min-height:320px}
@media (max-width:880px){.who .split{grid-template-columns:minmax(0,1fr)}.who .wa-img .media{aspect-ratio:4/5;height:auto}}
.who .wa-l{grid-template-rows:auto 1fr}
.wa-img .wa-cap{position:absolute;inset-inline-start:0;bottom:0;padding:40px 20px 16px;width:100%;color:rgba(255,255,255,.85);background:linear-gradient(transparent,rgba(0,0,0,.55));border-radius:0 0 var(--r) var(--r);pointer-events:none;z-index:2;box-sizing:border-box;padding-inline-end:140px}
@media (max-width:880px){.wa-img .wa-cap{padding-inline-end:100px}}

/* ===== awe pack ===== */
/* first-visit intro: logo + count to 100, then the screen lifts */
.loader{animation:ldup 1s cubic-bezier(.76,0,.24,1) 2.05s forwards}
.loader .ld-n{position:absolute;bottom:clamp(28px,6vh,56px);inset-inline-end:clamp(20px,5vw,64px);font-size:clamp(40px,7vw,96px);line-height:1;color:var(--burg);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.loader .ld-n b{font-weight:400}
.loader .ld-bar{position:absolute;bottom:0;inset-inline:0;height:2px;background:var(--burg);transform:scaleX(0);transform-origin:0 50%;animation:ldbar 1.9s cubic-bezier(.6,0,.2,1) forwards}
[dir=rtl] .loader .ld-bar{transform-origin:100% 50%}
@keyframes ldbar{to{transform:scaleX(1)}}
@keyframes ldup{to{transform:translateY(-100%);visibility:hidden}}
.ld .hero{--ld:2.35s}
.loader .lw,.loader .ls{animation-duration:.8s;animation-delay:.95s}.loader .ls{animation-delay:1.1s}

/* star reveal: an event opens through the SevenPees star */
.starrev{position:relative;margin-top:-20px}.js .starrev{height:260vh}
.sr-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.js .sr-pin::before{content:"";position:absolute;inset:0;background:#140403;opacity:var(--dk,0)}
.sr-media{position:absolute;inset:0}.js .sr-media{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-21 -21 42 42'%3E%3Cpath d='M1.4 -0.3 L0.7 -20.6 L-9.1 -18.5 L-1.4 0.3ZM1.1 0.9 L16.6 -12.3 L8.8 -18.6 L-1.1 -0.9ZM-0.0 1.4 L19.9 5.3 L20.1 -4.7 L0.0 -1.4ZM-1.1 0.9 L8.3 18.9 L16.2 12.8 L1.1 -0.9ZM-1.4 -0.3 L-9.6 18.2 L0.1 20.6 L1.4 0.3ZM-0.6 -1.3 L-20.2 3.9 L-16.0 12.9 L0.6 1.3ZM0.6 -1.3 L-15.7 -13.4 L-20.1 -4.5 L-0.6 1.3Z'/%3E%3C/svg%3E") center/calc(var(--s,6) * 1vmax) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-21 -21 42 42'%3E%3Cpath d='M1.4 -0.3 L0.7 -20.6 L-9.1 -18.5 L-1.4 0.3ZM1.1 0.9 L16.6 -12.3 L8.8 -18.6 L-1.1 -0.9ZM-0.0 1.4 L19.9 5.3 L20.1 -4.7 L0.0 -1.4ZM-1.1 0.9 L8.3 18.9 L16.2 12.8 L1.1 -0.9ZM-1.4 -0.3 L-9.6 18.2 L0.1 20.6 L1.4 0.3ZM-0.6 -1.3 L-20.2 3.9 L-16.0 12.9 L0.6 1.3ZM0.6 -1.3 L-15.7 -13.4 L-20.1 -4.5 L-0.6 1.3Z'/%3E%3C/svg%3E") center/calc(var(--s,6) * 1vmax) no-repeat;transform:rotate(calc(var(--r,0) * 1deg))}
.sr-media img{width:100%;height:100%;object-fit:cover;transform:rotate(calc(var(--r,0) * -1deg)) scale(var(--z,1.35))}
.js .sr-media.full{-webkit-mask:none;mask:none;opacity:var(--f,0);transform:none}
.sr-media.full img{transform:scale(var(--z,1.35))}
.sr-pin::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(20,4,3,.55));pointer-events:none}
.sr-t{position:relative;z-index:2;margin:0;color:#fff;text-align:center;font-size:clamp(28px,4.4vw,62px);line-height:1.05;letter-spacing:-.03em;align-self:end;padding-bottom:clamp(48px,10vh,110px)}
.sr-t span{display:block}.js .sr-t span{opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 40px))}
.js .sr-t span+span{opacity:var(--t2,0);transform:translateY(calc((1 - var(--t2,0)) * 40px))}
.sr-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);opacity:calc(1 - var(--f,0) * 3)}
@media (max-width:700px){.js .starrev{height:210vh}}
.sr-pin::after{opacity:1}.js .sr-pin::after{opacity:var(--f,0)}

/* headline lines rise from behind a line, sharpening as they land */
.js .w>i{filter:blur(6px);transition:transform 1.2s var(--ease),opacity .9s var(--ease),filter 1s var(--ease)}
.js .in .w>i{filter:blur(0)}

/* where we work: routes drawn between the markets */
.rmap{position:absolute;left:0;top:-86px;width:100%;height:90px;overflow:visible;pointer-events:none;z-index:2}
.rmap path{fill:none;stroke:var(--burg);stroke-width:1.2;stroke-linecap:round}
.rmap .ghost{stroke:var(--line);stroke-dasharray:2 5}
.rmap circle{fill:var(--burg)}
.markets.has-map{margin-top:86px;position:relative}
.has-map .route{display:none}
@media (max-width:900px){.rmap{display:none}.markets.has-map{margin-top:0}}
html.sm{scroll-behavior:auto}

/* hover: image drifts toward the cursor with a slow zoom */
.drift{transition:scale .9s var(--ease),translate .9s var(--ease);will-change:translate}
.drift.on{scale:1.07}

@media (prefers-reduced-motion:reduce){.starrev{height:auto}.sr-pin{position:relative;height:70vh}.sr-media{-webkit-mask:none!important;mask:none!important}.sr-t span{opacity:1!important;transform:none!important}.loader{display:none!important}}

/* who we are without image: label left, text wide */
.who .split{grid-template-columns:minmax(0,3fr) minmax(0,7fr);align-items:start}
@media (max-width:880px){.who .split{grid-template-columns:minmax(0,1fr)}}

/* visiting-from strip at the very top */
.geo-bar{height:28px;display:flex;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.geo-bar[hidden]{display:none}
.geo-bar .wrap{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.geo-bar .star{width:9px;height:9px;color:var(--burg);animation:spin 6s linear infinite}
.geo-bar b{font-weight:400;color:var(--burg)}
[dir=rtl] .geo-bar{letter-spacing:0;font-size:12.5px;text-transform:none}
.has-geo .geo-bar{animation:geoIn .8s var(--ease) both}
@keyframes geoIn{from{opacity:0;transform:translateY(-100%)}}

/* cookie notice */
.consent{position:fixed;z-index:120;bottom:16px;inset-inline-start:16px;max-width:min(420px,calc(100vw - 32px));background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.08);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.consent.on{opacity:1;transform:none}
.consent[hidden]{display:none}
.consent p{margin:0;font-size:13px;color:var(--mute);line-height:1.5}
.consent div{display:flex;gap:8px;justify-content:flex-end}
.cookie-set{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.8}.cookie-set:hover{opacity:1}
.consent{max-width:min(330px,calc(100vw - 32px));padding:10px 10px 10px 16px;border-radius:99px;display:flex;align-items:center;gap:10px;bottom:14px;inset-inline-start:14px}
[dir=rtl] .consent{padding:10px 16px 10px 10px}
.consent p{font-size:11.5px;line-height:1.35;flex:1}
.consent div{gap:6px;flex-shrink:0}
.consent .btn-sm{padding:6px 12px;font-size:11.5px}

/* footer socials */
.socials{display:flex;gap:10px;align-items:center}
.socials a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--burg);color:#fff;transition:transform .4s var(--ease),opacity .3s}
.socials a:hover{transform:translateY(-3px) rotate(-6deg)}
.socials svg{width:22px;height:22px}