@font-face{font-family:Tinos;src:url('assets/tinos.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'DM Sans';src:url('assets/dm-sans.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--bg:#fff;--ink:#080808;--muted:#454545;--art-opacity:.64;--angle:0deg;color-scheme:light}
:root[data-theme=dark]{--bg:#0b0b0b;--ink:#f2f2f2;--muted:#c3c3c3;--art-opacity:.76;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .35s,color .35s}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--focus-neutral,#606060);outline-offset:5px}.skip{position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-150%);padding:12px;background:var(--bg)}.skip:focus{transform:none}
.header{position:fixed;z-index:40;inset:30px 4.45% auto;display:flex;justify-content:space-between;align-items:flex-start}.brand img{display:block;width:30px;height:56px}.brand img{filter:invert(1)}:root[data-theme=dark] .brand img{filter:none}.pill{height:56px;padding:4px;display:flex;align-items:center;gap:10px;color:#f5f5f5;background:#141414;border-radius:100px}.pill button{border:0;color:inherit;background:transparent}.theme{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#242424!important}.theme:hover{background:#383838!important}.theme img{transition:transform .5s}.theme[aria-pressed=true] img{transform:rotate(-35deg)}.book{padding:14px 12px;border-radius:50px;font-size:16px;white-space:nowrap}.book:hover{background:#292929}.divider{width:1px;height:28px;background:#404040}.menu-toggle{height:48px;padding:0 17px;display:flex;align-items:center;gap:12px;font-size:16px}.hamburger{position:relative;display:block;width:23px;height:18px}.hamburger i{position:absolute;left:0;top:5px;width:23px;height:1px;background:#f5f5f5;transition:transform .3s}.hamburger i+i{top:12px}.menu-toggle[aria-expanded=true] i{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] i+i{transform:translateY(-3.5px) rotate(-45deg)}.menu{position:absolute;right:0;top:65px;width:280px;background:#141414;color:#f5f5f5;border-radius:24px;padding:14px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .3s,visibility .3s}.menu.open{visibility:visible;opacity:1;transform:none}.menu a{display:block;padding:13px 16px;border-radius:12px}.menu a:hover{background:#252525}
.hero{position:relative;height:clamp(900px,91vw,1200px);min-height:100svh;isolation:isolate;overflow:hidden}.art-window{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;mask-image:linear-gradient(#000 65%,transparent 99%)}.orbit-stage{position:absolute;width:2048px;height:2048px;left:50%;top:52%;transform:translate(-50%,-50%) scale(var(--orbit-scale,.92));opacity:var(--art-opacity)}.orbit{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;will-change:transform}.hero-copy{position:relative;text-align:center;top:30%;margin:0 auto;max-width:880px;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:22px}.eyebrow{font-size:16px;margin:0}h1{font-family:'Times New Roman',Times,Tinos,serif;font-size:clamp(64px,6.12vw,98px);font-weight:400;letter-spacing:-.035em;line-height:.92;margin:0;text-wrap:balance;-webkit-text-stroke:.2px currentColor}.intro{font-size:22px;line-height:1.4;margin:0;max-width:730px}.cta{margin-top:2px;min-width:278px;min-height:64px;display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 32px;background:var(--ink);color:var(--bg);border-radius:100px;font-size:20px;transition:transform .25s,box-shadow .25s}.cta:hover{transform:translateY(-3px);box-shadow:0 8px 22px #00000016}.cta img{width:22px;height:22px;transition:transform .25s}.cta:hover img{transform:translate(2px,-2px)}:root[data-theme=dark] .cta img{filter:invert(1)}.work-link{font-size:16px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding-top:8px}
.promise{position:relative;min-height:610px;padding:70px 24px 120px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--bg)}.overline{font-size:13px;letter-spacing:.12em;margin:0 0 32px}.promise h2{font-family:'Times New Roman',Times,Tinos,serif;font-size:clamp(64px,6.67vw,106px);font-weight:400;line-height:1;letter-spacing:-.035em;margin:0;-webkit-text-stroke:.2px currentColor}.statement{display:flex;align-items:center;justify-content:center;gap:8px;min-height:104px;will-change:transform,opacity}.promise-badge{--glow:30,116,163;display:inline-grid;place-items:center;flex:0 0 auto;width:80px;height:80px;border-radius:50%;background:#fff;border:1px solid #efefef;box-shadow:10px 10px 22px rgba(var(--glow),.25);letter-spacing:0;-webkit-text-stroke:0}.promise-badge>span{display:block;font:46px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.promise-badge.diamond>span{transform:rotate(14.72deg)}.promise-badge.trophy{--glow:154,119,63}.promise-badge.trophy>span{transform:rotate(-11.92deg)}.promise-badge.money{--glow:88,88,88}:root[data-theme=dark] .promise-badge{background:#101010;border-color:#242424;box-shadow:8px 8px 24px rgba(var(--glow),.18)}.statement{gap:18px}.motion-toggle{position:fixed;z-index:20;bottom:18px;right:22px;min-height:44px;padding:10px 15px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:30px;background:var(--bg);color:var(--muted);font-size:12px;opacity:.8}.motion-toggle:hover{opacity:1}
@media(min-width:1700px){.orbit-stage{--orbit-scale:1.15}.hero{height:1250px}.hero-copy{top:32%}}
@media(max-width:800px){.header{inset:18px 24px auto}.hero{height:1020px;min-height:0}.orbit-stage{--orbit-scale:.62;top:46%}.hero-copy{top:30%;max-width:560px;gap:20px}h1{font-size:64px}.intro{font-size:18px}.desktop-break{display:none}.promise{min-height:520px;padding:45px 20px 100px}.promise h2{font-size:70px}.statement{min-height:82px}.promise-badge{width:64px;height:64px}.promise-badge>span{font-size:37px}}
@media(max-width:520px){.header{inset:18px 20px auto;align-items:center}.brand img{width:24px;height:44px}.pill{gap:4px;height:52px}.theme{width:44px;height:44px}.menu-label{display:none}.book{font-size:14px;padding:12px 10px}.menu-toggle{padding:0 14px;height:44px}.divider{height:24px}.menu{width:250px;top:60px}.hero{height:920px}.orbit-stage{--orbit-scale:.56;top:43%}.hero-copy{top:30%;gap:18px;padding:0 22px}h1{font-size:clamp(39px,10.9vw,52px);line-height:.96;letter-spacing:-.035em}.eyebrow{font-size:13px}.intro{font-size:16px;line-height:1.45;max-width:380px}.cta{font-size:16px;min-width:230px;min-height:54px;padding:14px 26px}.cta img{width:18px;height:18px}.work-link{font-size:15px}.promise{min-height:430px;padding:34px 16px 95px}.overline{font-size:11px;margin-bottom:20px}.promise h2{font-size:clamp(46px,12vw,60px)}.statement{min-height:68px;gap:3px}.statement{gap:10px}.promise-badge{width:48px;height:48px}.promise-badge>span{font-size:28px}.motion-toggle{font-size:11px;bottom:12px;right:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.orbit,.statement{will-change:auto}}

.work-card{position:absolute;width:114px;height:auto;object-fit:contain;border-radius:13px}

/* Open up the desktop orbit: larger cards and a wider clear centre. */
@media(min-width:901px){.orbit-stage{--orbit-scale:1.08}}
@media(min-width:1440px){.orbit-stage{--orbit-scale:1.3}}
@media(min-width:1920px){.orbit-stage{--orbit-scale:1.5}.hero-copy{transform:scale(1.15);transform-origin:center center}}
@media(min-width:2560px){.orbit-stage{--orbit-scale:1.725}.hero-copy{transform:scale(1.5)}}
/* Centre the complete mobile text block in the orbit's clear centre. */
@media(max-width:800px){.hero-copy{top:46%;transform:translateY(-50%)}}
@media(max-width:520px){.hero-copy{top:43%}}

/* One scroll chapter: introduction, settling label, then three statements. */
.promise{height:180svh;min-height:1000px;padding:0;display:block}
.promise-sticky{position:sticky;top:0;height:100svh;min-height:540px;display:grid;place-items:center;overflow:hidden}
.promise-stage{position:relative;width:min(680px,100%);height:350px;padding:0 20px}
.overline{position:absolute;top:50%;left:0;width:100%;margin:0;font-size:26px;line-height:1.2;letter-spacing:.015em;transform:translateY(-50%);will-change:transform}
.overline span{display:inline-block;will-change:filter,opacity}
.promise h2{position:absolute;left:0;right:0;top:76px;font-size:clamp(52px,4.8vw,72px);line-height:1}
.statement{min-height:86px;gap:14px;opacity:0}
.promise-badge{width:64px;height:64px}.promise-badge>span{font-size:37px}
@media(max-width:520px){.promise{height:175svh;min-height:900px}.promise-stage{height:290px}.overline{font-size:20px}.promise h2{top:70px;font-size:clamp(40px,10.6vw,52px)}.statement{min-height:66px;gap:10px}.promise-badge{width:46px;height:46px}.promise-badge>span{font-size:27px}}
@media(prefers-reduced-motion:reduce){.promise{height:auto;min-height:540px}.promise-sticky{position:relative;min-height:540px;height:auto}.overline{transform:translateY(-130px) scale(.5)}.overline span{opacity:1!important;filter:none!important}.statement{opacity:1!important;transform:none!important}}

/* The reel enters naturally; no extra pinned scrolling or hover dependency. */
.showreel{padding:clamp(24px,5vw,72px) 0 0;background:var(--bg);overflow:hidden}
.showreel-media{width:100%;aspect-ratio:16/9;overflow:hidden;transform-origin:center center;will-change:transform,clip-path}
.showreel-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:800px){.showreel{padding:16px 0 48px}.showreel-media{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.showreel-media{transform:none!important;clip-path:none!important;will-change:auto}}
/* Shared section system. */
:root{--surface:#f6f6f6;--line:#dedede;--field:#f6f6f6}
:root[data-theme=dark]{--surface:#141414;--line:#292929;--field:#151515}
[hidden]{display:none!important}.wrap{width:min(1344px,calc(100% - 96px));margin-inline:auto}.section{padding-block:96px}h2,h3,.serif{font-family:'Times New Roman',Times,Tinos,serif;font-weight:400;letter-spacing:-.035em}h2{font-size:clamp(42px,4.5vw,66px);line-height:1.02;margin:0}h3{font-size:36px;line-height:1.04;margin:0}p{line-height:1.5}.kicker{font-size:13px;letter-spacing:.15em;margin:0 0 24px}.meta{font-size:14px;color:var(--muted);margin:16px 0 0}.section-title{text-align:center;margin-bottom:40px}.section-title .kicker{margin-bottom:16px}.action{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:14px 24px;border-radius:100px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:16px;line-height:1.3;transition:background .25s,color .25s,transform .25s;text-align:center}.action.solid,.action:hover,.action:focus-visible{background:var(--ink);color:var(--bg)}.button-arrow{width:22px;height:22px;flex-shrink:0;filter:invert(1)}:root[data-theme=dark] .button-arrow{filter:none}.action.solid .button-arrow,.action:hover .button-arrow,.action:focus-visible .button-arrow{filter:none}:root[data-theme=dark] .action.solid .button-arrow,:root[data-theme=dark] .action:hover .button-arrow,:root[data-theme=dark] .action:focus-visible .button-arrow{filter:invert(1)}.text-link{text-decoration:underline;text-underline-offset:4px;background:none;border:0;color:inherit;font:inherit;cursor:pointer}.text-button{font:inherit;border:0;background:none;color:inherit;padding:0}.actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Full-viewport film, with one selected source for each device. */
.showreel{padding:0}.showreel-media{height:100svh;min-height:480px;aspect-ratio:auto;position:relative}.showreel-media>img,.showreel-video{width:100%;height:100%;object-fit:cover;object-position:center}.showreel-video{position:absolute;inset:0}.video-toggle{position:absolute;right:24px;bottom:24px;border:1px solid #ffffff70;background:#111a;color:white;border-radius:30px;min-height:44px;padding:10px 18px}
/* Seamless, opposing project rows; readable on focus and touch. */
.portfolio{overflow:hidden}.portfolio-row+.portfolio-row{margin-top:20px}.marquee{overflow:hidden}.marquee-track{display:flex;gap:20px;width:max-content;animation:marquee 65s linear infinite}.marquee-set{display:flex;gap:20px;flex:none}.marquee-track.reverse{animation-direction:reverse}.project-card{position:relative;width:clamp(200px,17vw,300px);height:clamp(245px,20vw,350px);padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--surface);color:#fff;flex:none;text-align:left}.project-card>img{width:100%;height:100%;object-fit:cover;transition:transform .55s}.project-caption{position:absolute;inset:auto 0 0;padding:30px 20px 18px;background:linear-gradient(transparent,#000b);transform:translateY(15px);opacity:0;transition:opacity .25s,transform .25s;display:grid;gap:5px}.project-caption strong{font:30px/1.1 'Times New Roman',serif}.project-caption>span{font-size:13px}.project-card:hover .project-caption,.project-card:focus-visible .project-caption{opacity:1;transform:none}.project-card:hover>img{transform:scale(1.04)}.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.marquee.interacting .marquee-track{animation-play-state:paused}.motion-paused .marquee-track{animation-play-state:paused}.motion-paused .reveal{opacity:1;transform:none}@keyframes marquee{to{transform:translateX(calc(-50% - 10px))}}
/* Services remain fully visible on desktop and become compact accordions on phones. */
.services{padding-top:30px}.services-heading{display:grid;grid-template-columns:1.6fr 1fr;gap:72px;align-items:end;margin:0 24px 40px}.services-heading h2{font-size:clamp(52px,6.3vw,96px);line-height:.94}.services-intro .serif{font-size:32px;line-height:1.1;margin:0 0 24px}.services-intro .action{width:100%}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-card{background:var(--surface);border-radius:18px;padding:30px;display:flex;flex-direction:column;min-width:0}.service-number{font-size:14px;margin-bottom:12px}.service-summary{padding:0;border:0;background:none;color:inherit;text-align:left;width:100%;font:inherit;cursor:default}.service-art{width:100%;height:260px;object-fit:contain;display:block;margin-bottom:28px}.service-heading{display:block}.service-heading h3{font-size:clamp(30px,2.65vw,42px);margin:0 0 16px}.price{font-size:17px;line-height:1.5;display:block}.service-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease;flex:1}.service-body>div{min-height:0;overflow:hidden;display:flex;flex-direction:column}.service-body ul{list-style:none;padding:20px 0 0;margin:20px 0 24px;border-top:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.5;flex:1}.service-body .action{width:100%;margin-top:auto;font-size:15px;padding-inline:15px}.chevron{display:none}.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.support-card{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--surface)}.support-card .service-body>div{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px}.support-card p{font-size:16px;color:var(--muted);margin:20px 0}.support-card .action{margin:20px 0 0}.addons{padding:36px 24px 0}.addons h3{font-size:30px;margin-bottom:24px}.addon-row{mask-image:var(--slider-edge-mask)}.addon-row .marquee-track{animation-duration:40s}.chip{border:1px solid var(--line);border-radius:100px;background:none;color:inherit;padding:12px 24px;min-height:46px;font-size:14px;white-space:nowrap}.chip:hover,.chip:focus-visible{border-color:var(--ink);background:var(--surface)}
.reach{text-align:center;padding-top:32px}.reach h2{font-size:clamp(34px,3.5vw,52px)}.reach>img{display:block;max-width:700px;width:75%;height:200px;object-fit:contain;margin:22px auto}.reach>p{max-width:520px;margin:0 auto;color:var(--muted);font-size:18px}.reviews{background:var(--surface)}.google-badge{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--bg);border-radius:100px;padding:10px 18px;font-size:14px;margin-bottom:36px;min-height:44px}.google-badge img{object-fit:contain}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.review-card{margin:0;background:var(--bg);padding:28px;border-radius:18px;display:flex;flex-direction:column;min-height:250px}.review-card blockquote{font:32px/1.16 'Times New Roman',Times,serif;letter-spacing:-.015em;margin:0 0 36px;flex:1}.review-card figcaption{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted)}.review-card figcaption img{border-radius:50%;object-fit:cover}.review-card small{display:block;font-size:12px;margin-top:4px}.reviews-link{display:block;width:max-content;max-width:100%;margin:32px auto 0;font-size:14px}
.faq{display:grid;grid-template-columns:1fr 2fr;gap:64px}.faq-list details{border-top:1px solid var(--line);padding-block:26px}.faq-list details:last-of-type{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.faq-list summary{font:26px/1.2 'Times New Roman',Times,serif;letter-spacing:-.025em;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px}.faq-symbol{width:12px;height:12px;position:relative;flex:none}.faq-symbol:before,.faq-symbol:after{content:'';position:absolute;width:12px;height:1px;top:5px;background:var(--muted)}.faq-symbol:after{transform:rotate(90deg);transition:transform .25s}details[open] .faq-symbol:after{transform:rotate(0)}.faq-list details p{max-width:620px;margin:18px 32px 4px 0;color:var(--muted);font-size:17px;line-height:1.6}.faq-contact{margin-top:36px;font-size:16px;color:var(--muted)}.faq-contact button{display:inline-flex;align-items:center;gap:8px}.faq-contact .button-arrow{width:16px;height:16px}
.team{padding-bottom:32px;overflow:hidden}.team-intro{text-align:center}.team-intro>p{margin:0 0 16px;color:var(--muted)}.team-intro h2{margin-bottom:28px}.team-scene{position:relative;margin-top:40px;height:540px;isolation:isolate}.employee-window{position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.employee-track{animation-duration:100s;gap:0}.employee-track .marquee-set{gap:0}.employee-track img{width:170px;height:410px;object-fit:contain;object-position:bottom}.employee-track{animation-name:team-marquee}@keyframes team-marquee{to{transform:translateX(-50%)}}.founders{position:absolute;height:480px;width:min(680px,65vw);object-fit:contain;object-position:bottom;left:50%;bottom:0;transform:translateX(-50%);z-index:2}.team-scene:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,var(--bg));z-index:3;pointer-events:none}.footer{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px;font-size:13px}.footer>div{display:flex;gap:24px;align-items:center}.footer-brand img{width:175px;height:40px;object-fit:contain}.footer-brand img{filter:invert(1)}:root[data-theme=dark] .footer-brand img{filter:none}
/* Dialogs use the same close geometry and accessible native focus management. */
dialog{border:1px solid var(--line);border-radius:24px;padding:40px;width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;background:var(--bg);color:var(--ink);box-shadow:0 20px 80px #0004;overscroll-behavior:contain}dialog::backdrop{background:#0007;backdrop-filter:blur(8px)}dialog[open]{animation:dialog-in .25s ease-out}dialog h2{font-size:48px;padding-right:38px}dialog h3{font-size:30px}dialog p{color:var(--muted)}.dialog-close{position:absolute;right:20px;top:22px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--ink)}.dialog-close:hover{background:var(--surface)}.x-icon{position:relative;width:22px;height:22px;display:block}.x-icon:before,.x-icon:after{content:'';position:absolute;left:0;top:10px;width:22px;height:1px;background:currentColor;transform:rotate(45deg)}.x-icon:after{transform:rotate(-45deg)}.contact-lead{margin:22px 0}.contact-tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:4px;gap:4px;margin:24px 0}.contact-tabs button{width:50%;border:0;border-radius:100px;min-height:46px;background:none;color:var(--muted);padding:8px;font-size:15px}.contact-tabs [aria-selected=true]{background:var(--bg);color:var(--ink);box-shadow:0 2px 8px #0000000a}form{display:grid;gap:20px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}form label{display:grid;gap:8px;min-width:0;font-size:15px}input,select,textarea{font:16px/1.5 'DM Sans',sans-serif;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:9px;width:100%;padding:11px 14px;min-height:46px}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:2px}[aria-invalid=true]{border-color:#b64040}.field-error{font-size:13px;color:#c24444}.field-error:empty{display:none}.service-guidance{margin:0;font-size:15px}.package-scope{padding:20px;background:var(--surface);border-radius:12px}.package-scope ul{padding-left:20px;line-height:1.6;color:var(--muted)}.package-scope p{font-size:14px}.form-status:empty{display:none}.form-status{margin:0;padding:14px;background:var(--surface);border-radius:10px;font-size:15px}#call-panel .action{width:100%;margin:16px 0}#call-panel h3{margin-top:32px}.project-dialog{width:min(1000px,calc(100% - 32px));padding:0;overflow-x:hidden}.project-dialog .dialog-close{position:sticky;float:right;margin:12px;top:12px;background:var(--bg);z-index:2}.project-full{display:block;width:100%;height:auto;max-height:75dvh;object-fit:contain;background:var(--surface);margin-top:-68px}.project-description{padding:28px}.project-description .kicker{margin-bottom:12px}.project-description h2{font-size:42px}.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}.js-motion .reveal:not(.is-visible){opacity:0;transform:translateY(22px)}@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}body:has(dialog[open]){overflow:hidden}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.services-heading{margin-inline:0;gap:32px;grid-template-columns:1.3fr 1fr}.services-heading h2{font-size:60px}.service-card{padding:22px}.service-art{height:200px}.service-heading h3{font-size:30px}.support-card .service-body>div{display:flex}.review-card{padding:24px}.review-card blockquote{font-size:28px}.faq{gap:36px}.footer{flex-wrap:wrap}.footer-brand{order:-1;width:100%;text-align:center}}
@media(max-width:700px){.section{padding-block:64px}.wrap{width:calc(100% - 40px)}h2{font-size:42px}.kicker{font-size:12px;margin-bottom:20px}.portfolio-row+.portfolio-row{margin-top:12px}.portfolio-row .marquee-track,.portfolio-row .marquee-set{gap:12px}.portfolio-row .marquee-track{animation-name:mobile-marquee}.project-card{width:170px;height:205px;border-radius:10px}.project-caption{padding:24px 14px 14px}.project-caption strong{font-size:25px}.services{padding-top:0}.services-heading{display:block;margin-bottom:24px}.services-heading h2{font-size:48px;line-height:.98}.services-intro{margin-top:28px}.services-intro .serif{font-size:30px}.services-intro .action{max-width:440px}.service-grid,.support-grid{grid-template-columns:1fr;gap:14px}.service-card{padding:20px;display:block}.service-number{display:none}.service-summary{display:flex;align-items:center;gap:14px;cursor:pointer;min-height:110px}.service-art{width:115px;height:110px;object-fit:contain;margin:0;flex:none}.service-heading{flex:1;min-width:0}.service-heading h3{font-size:28px;line-height:1.02;margin-bottom:10px}.price{font-size:14px}.chevron{display:block;width:9px;height:9px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);flex:none;margin:0 4px;transition:transform .3s}.service-summary[aria-expanded=true] .chevron{transform:rotate(225deg)}.service-body.collapsed{grid-template-rows:0fr}.service-body ul{margin-top:16px;font-size:15px}.service-body .action{min-height:48px}.support-card{padding:20px}.support-card .service-summary{min-height:74px}.support-card .service-body>div{display:flex;gap:0}.support-card .action{margin:0}.support-card p{font-size:15px;margin-top:8px}.addons{padding:32px 0 0}.addons h3{font-size:28px}.addons .meta{font-size:12px;line-height:1.5}.reach h2{font-size:34px}.reach>img{width:100%;height:140px;margin:16px auto}.reach>p{font-size:16px;max-width:340px}.review-grid{grid-template-columns:1fr;gap:14px}.review-card{min-height:210px}.review-card blockquote{font-size:29px}.google-badge{margin-bottom:28px}.section-title{margin-bottom:28px}.reviews h2{font-size:38px}.faq{display:block}.faq-list{margin-top:32px}.faq-list summary{font-size:24px}.faq-list details p{font-size:16px;margin-right:0}.team-intro h2{font-size:42px}.team-intro>p{font-size:15px}.actions{gap:12px}.actions .action{font-size:14px;padding-inline:20px;min-height:48px}.team-scene{height:390px;margin-top:36px}.employee-track img{height:250px;width:105px}.founders{height:320px;width:370px;max-width:98vw}.team-scene:after{inset:55% 0 0}.footer{justify-content:center;font-size:12px;gap:24px;margin-top:0}.footer>div{justify-content:center;flex-wrap:wrap}.team{padding-bottom:30px}dialog{padding:28px 22px;max-height:calc(100dvh - 24px);width:calc(100% - 24px);border-radius:20px}dialog h2{font-size:36px;padding-right:24px}.dialog-close{right:10px;top:16px}.field-row{grid-template-columns:1fr;gap:20px}.contact-tabs button{font-size:14px}.contact-lead{font-size:15px}.service-guidance{font-size:14px}.project-description{padding:24px}.project-description h2{font-size:36px}.showreel{padding:0}.showreel-media{height:100svh;min-height:0}.motion-toggle{font-size:11px;min-height:40px;padding:8px 12px}@keyframes mobile-marquee{to{transform:translateX(calc(-50% - 6px))}}}
@media(max-width:360px){.service-art{width:90px;height:100px}.service-summary{gap:12px}.service-heading h3{font-size:25px}.service-card{padding:16px}.services-heading h2{font-size:42px}.action{font-size:14px;padding-inline:18px}.team-intro h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important}.portfolio-row,.addon-row{overflow-x:auto;mask-image:none}.marquee-track>.marquee-set[aria-hidden=true]{display:none}.js-motion .reveal:not(.is-visible){opacity:1;transform:none}.reveal{transition:none}dialog[open]{animation:none}}
.employee-track img{object-fit:cover}.footer-brand img{filter:none}:root[data-theme=dark] .footer-brand img{filter:invert(1)}
@media(max-width:700px){.service-art{transform:scale(1.2)}}
.founders{object-fit:cover}@media(max-width:700px){.team .actions .action{padding-inline:12px;gap:8px}}

/* A pinned statement, covered by the next full-screen film. */
.opening-chapter{position:relative;isolation:isolate;background:var(--bg)}
.opening-chapter .promise{position:sticky;top:0;height:100svh;min-height:0;z-index:0}
.opening-chapter .promise-sticky{position:relative;height:100svh;min-height:0}
.opening-chapter .promise-stage{will-change:transform}
.opening-chapter .overline{left:50%;top:50%;width:max-content;display:flex;align-items:center;white-space:nowrap;transform-origin:center;line-height:1.3}
.opening-chapter .overline span{flex:none;overflow:hidden;white-space:nowrap}
.opening-chapter .showreel{position:relative;z-index:1;margin-top:170svh;box-shadow:0 -24px 64px #00000012}
.opening-chapter .showreel-media{min-height:0}
.opening-chapter .showreel-media>img,.opening-chapter .showreel-video{will-change:transform}
.motion-paused .opening-chapter .promise{position:relative}
.motion-paused .opening-chapter .showreel{margin-top:0}
@media(prefers-reduced-motion:reduce){.opening-chapter .promise{position:relative}.opening-chapter .showreel{margin-top:0}.opening-chapter .promise-stage,.opening-chapter .showreel-media>img,.opening-chapter .showreel-video{transform:none!important;will-change:auto}}

/* Larger, closely set statement lockup matching the approved comparison. */
.opening-chapter .promise-stage{width:min(880px,100%);height:430px}
.opening-chapter .overline{font-size:32px;letter-spacing:.055em}
.opening-chapter .promise h2{top:86px;font-size:clamp(72px,7vw,104px)}
.opening-chapter .statement{min-height:114px;gap:3px}
.opening-chapter .promise-badge{width:80px;height:80px;flex:none}
.opening-chapter .promise-badge>span{font-size:46px}
@media(max-width:520px){
 .opening-chapter .promise-stage{height:340px;padding-inline:16px}
 .opening-chapter .overline{font-size:26px}
 .opening-chapter .promise h2{top:80px;font-size:clamp(46px,15.4vw,80px)}
 .opening-chapter .statement{min-height:18vw;gap:0}
 .opening-chapter .promise-badge{width:14vw;height:14vw}
 .opening-chapter .promise-badge>span{font-size:8.2vw}
}
@media(max-height:600px) and (min-width:521px){.opening-chapter .promise-stage{transform-origin:center}.opening-chapter .promise h2{font-size:72px}.opening-chapter .statement{min-height:88px}}

/* Quiet outward waves suggest the spread of the studio's work. */
.reach{position:relative;isolation:isolate;overflow:hidden}
.reach-ripples{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse at 50% 52%,#000 20%,transparent 73%)}
.reach-ripples i{position:absolute;left:50%;top:52%;width:min(78vw,780px);aspect-ratio:1;border-radius:50%;border:1px solid currentColor;background:currentColor;opacity:0;animation:reach-wave 10s linear infinite;animation-play-state:paused;will-change:transform,opacity}
.reach.is-visible .reach-ripples i{animation-play-state:running}
.reach-ripples i:nth-child(2){animation-delay:-2.5s}.reach-ripples i:nth-child(3){animation-delay:-5s}.reach-ripples i:nth-child(4){animation-delay:-7.5s}
@keyframes reach-wave{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}18%{opacity:.045}70%{opacity:.022}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
:root[data-theme=dark] .reach-ripples{color:#dce5f0}
.motion-paused .reach-ripples i{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.reach-ripples{display:none}}

/* Keep the lettering clear: hollow waves live outside the central lockup. */
.reach-ripples{mask-image:radial-gradient(ellipse at 50% 52%,transparent 0 43%,#000 57%,#000 67%,transparent 88%)}
.reach-ripples i{width:min(110vw,1100px);background:none;border:1px solid currentColor}
@keyframes reach-wave{0%{transform:translate(-50%,-50%) scale(.68);opacity:0}20%{opacity:.12}65%{opacity:.065}100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}

/* Eight evenly staggered waves, with more readable outer edges. */
.reach-ripples i{border-width:1.5px}
.reach-ripples i:nth-child(1){animation-delay:-0s}
.reach-ripples i:nth-child(2){animation-delay:-1.25s}
.reach-ripples i:nth-child(3){animation-delay:-2.5s}
.reach-ripples i:nth-child(4){animation-delay:-3.75s}
.reach-ripples i:nth-child(5){animation-delay:-5s}
.reach-ripples i:nth-child(6){animation-delay:-6.25s}
.reach-ripples i:nth-child(7){animation-delay:-7.5s}
.reach-ripples i:nth-child(8){animation-delay:-8.75s}
@keyframes reach-wave{0%{transform:translate(-50%,-50%) scale(.68);opacity:0}20%{opacity:.22}65%{opacity:.12}100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}

/* Consistent, quieter arrows and a separate fade for the back team row. */
.action .button-arrow,.cta img{width:18px;height:18px;flex:0 0 18px}
.employee-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 16%,color-mix(in srgb,var(--bg) 35%,transparent) 43%,var(--bg) 80%);z-index:1}
@media(max-width:700px){.action .button-arrow,.cta img{width:16px;height:16px;flex-basis:16px}}

.employee-window:after{bottom:auto;height:410px}
@media(max-width:700px){.employee-window:after{height:250px}}

/* Small, light arrows throughout all CTA and inline-link treatments. */
.button-arrow,.action .button-arrow,.faq-contact .button-arrow,.cta img{width:16px;height:16px;flex:0 0 16px;object-fit:contain}
@media(max-width:700px){.button-arrow,.action .button-arrow,.faq-contact .button-arrow,.cta img{width:14px;height:14px;flex-basis:14px}}

/* More breathing room throughout the content after the showreel. */
.section{padding-block:144px}
.team{padding-bottom:48px}
@media(max-width:700px){.section{padding-block:96px}.team{padding-bottom:40px}}

/* Let the reach waves dissolve inside a larger, full-width stage. */
.reach.section.wrap{width:100%;max-width:none;margin-inline:0;padding:208px 24px}
.reach-ripples{mask-image:radial-gradient(ellipse at 50% 52%,transparent 0 43%,#000 57%,#000 67%,transparent 88%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
@media(max-width:700px){.reach.section.wrap{padding:152px 20px}.reach-ripples{mask-image:radial-gradient(ellipse at 50% 52%,transparent 0 43%,#000 57%,#000 67%,transparent 88%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}}

/* A coherent interaction language: quiet lift, small arrow movement, clear focus. */
.action,.chip,.google-badge,.book,.menu a,.service-card,.support-card,.dialog-close{transition:background-color .25s,color .25s,border-color .25s,box-shadow .3s,transform .3s}
.button-arrow{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.service-art{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.text-link,.work-link,.footer a{text-underline-offset:5px;transition:opacity .2s,text-decoration-color .2s}
.faq-list summary{border-radius:8px;transition:color .2s,background-color .2s}
.contact-tabs button{transition:background-color .25s,color .25s,box-shadow .25s}
.action:focus-visible .button-arrow,.text-link:focus-visible .button-arrow{transform:translate(2px,-2px)}
.project-card:focus-visible>img{transform:scale(1.04)}
@media(hover:hover) and (pointer:fine){
 .action:hover{transform:translateY(-2px);box-shadow:0 5px 18px #00000010}
 .action:hover .button-arrow,.text-link:hover .button-arrow{transform:translate(2px,-2px)}
 .service-card:hover .service-art{transform:translateY(-5px) scale(1.025)}
 .chip:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
 .google-badge:hover{border-color:var(--muted);transform:translateY(-2px)}
 .work-link:hover,.text-link:hover,.footer a:hover{text-decoration:underline;text-decoration-thickness:1px;opacity:.72}
 .faq-list summary:hover{background:var(--surface)}
 .dialog-close:hover{transform:rotate(90deg)}
 .contact-tabs button[aria-selected=false]:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
}
.action:active,.cta:active,.chip:active{transform:scale(.98)}
input,select,textarea{transition:border-color .2s,background-color .2s,box-shadow .2s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
button:disabled{cursor:default;opacity:.6}
.marquee:not(.ambient-visible) .marquee-track,.employee-window:not(.ambient-visible) .employee-track,.reach:not(.ambient-visible) .reach-ripples i{animation-play-state:paused}
#contact-dialog.booking-view{width:min(1100px,calc(100% - 32px))}
#calendar-embed{min-height:500px;width:100%;overflow:hidden;border-radius:14px}
#calendar-embed.ready{min-height:0}
#calendar-embed iframe{width:100%;border:0}
#calendar-status{padding:28px 16px;text-align:center;color:var(--muted)}
#call-panel .calendar-fallback{font-size:13px;text-align:center;margin:20px 0 0}
#call-panel .calendar-fallback a{display:inline-block;min-height:32px;padding-block:6px}
#contact-dialog.booking-view .contact-lead{max-width:620px}
@media(max-width:700px){#contact-dialog.booking-view{padding:24px 16px;width:calc(100% - 20px);max-height:calc(100dvh - 20px)}#calendar-embed{min-height:500px}#contact-dialog.booking-view h2{font-size:34px}#contact-dialog.booking-view .contact-tabs{margin-block:20px}}
@media(prefers-reduced-motion:reduce){.action,.chip,.google-badge,.book,.menu a,.service-art,.button-arrow,.dialog-close,.contact-tabs button,.project-card>img,.project-caption{transition:none!important;transform:none!important}}

.contact-tabs [aria-selected=true]{background:var(--ink);color:var(--bg);box-shadow:none}
.calendar-slow #calendar-embed{min-height:280px}
.calendar-failed #calendar-embed{display:none}

/* Service cards reveal their invitation on desktop without moving neighbours. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
 .service-card,.support-card{position:relative;isolation:isolate;overflow:hidden}
 .service-card::before,.support-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,transparent 10%,rgba(0,0,0,.055) 100%);opacity:0;transition:opacity .4s ease}
 :root[data-theme=dark] .service-card::before,:root[data-theme=dark] .support-card::before{background:linear-gradient(135deg,transparent 5%,rgba(255,255,255,.12) 100%)}
 .service-card:hover::before,.service-card:focus-within::before,.support-card:hover::before,.support-card:focus-within::before{opacity:1}
 .service-card .service-body .action,.support-card .service-body .action{opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .3s ease,background-color .25s,color .25s}
 .service-card:hover .service-body .action,.service-card:focus-within .service-body .action,.support-card:hover .service-body .action,.support-card:focus-within .service-body .action{opacity:1;pointer-events:auto;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.service-card::before,.support-card::before,.service-card .service-body .action,.support-card .service-body .action{transition:none!important}}

/* Compact desktop cards: the reveal borrows room from the artwork, not card height. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
 .service-card .service-body>div{overflow:visible}
 .service-card .service-body ul{margin-bottom:0}
 .service-card .service-body .action,.support-card .service-body .action{position:absolute;bottom:24px;left:30px;width:calc(100% - 60px);margin:0}
 .service-heading,.service-card .service-body ul,.support-card .service-body p{transition:transform .35s ease}
 .service-card:is(:hover,:focus-within) .service-heading,.service-card:is(:hover,:focus-within) .service-body ul{transform:translateY(-64px)}
 .service-card:is(:hover,:focus-within) .service-art{transform:translateY(-28px) scale(.96)}
 .support-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:190px;padding:44px 28px}
 .support-card .service-body>div{display:block;overflow:visible}
 .support-card .service-body p{margin:0}
 .support-card:is(:hover,:focus-within) .service-heading,.support-card:is(:hover,:focus-within) .service-body p{transform:translateY(-28px)}
 .support-card .service-body .action{min-height:42px;padding-block:9px;bottom:18px}
}
@media(prefers-reduced-motion:reduce){.service-heading,.service-card .service-body ul,.support-card .service-body p{transition:none!important}}

/* Quiet feedback for social proof, matching the service-card surfaces. */
.review-card{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.review-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg,transparent,rgba(0,0,0,.045));opacity:0;transition:opacity .35s ease}
:root[data-theme=dark] .review-card::before{background:linear-gradient(135deg,transparent,rgba(255,255,255,.09))}
.review-card figcaption img{transition:transform .35s ease}
.reviews-link{text-decoration:underline;transition:opacity .25s,text-decoration-color .25s;text-underline-offset:5px}
@media(hover:hover) and (pointer:fine){
 .review-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0000000a}
 .review-card:hover::before{opacity:1}
 .review-card:hover figcaption img{transform:scale(1.06)}
 .reviews-link:hover{opacity:.7;text-decoration:underline}
}
.review-card:focus-within::before{opacity:1}
.reviews-link:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.review-card,.review-card::before,.review-card figcaption img,.reviews-link{transition:none!important}.review-card:hover,.review-card:hover figcaption img{transform:none}}
/* The cleaned founders export includes wider transparent side margins. */
.founders{object-fit:contain;width:min(840px,85vw);height:540px;max-width:none}
@media(max-width:760px){.founders{width:540px;max-width:none;height:390px}}

/* Prepared team correction: retain complete portraits and keep fades below faces. */
.employee-window{mask-image:none;padding-top:18px}
.employee-track img{object-fit:contain;object-position:center bottom}
/* Keep the portrait fade outside the horizontally scrolling window. */
.employee-window:after{content:none}
.team-scene:before{content:"";position:absolute;inset:18px 0 auto;height:410px;background:linear-gradient(to bottom,transparent 38%,color-mix(in srgb,var(--bg) 25%,transparent) 61%,var(--bg) 100%);z-index:1;pointer-events:none}
@media(max-width:700px){.employee-window{padding-top:14px}.team-scene:before{top:14px;height:250px}}

/* Keep moving galleries aligned with the content on large displays. */
.team-scene,.portfolio-row{width:min(100%,1920px);margin-inline:auto}
.employee-window,.portfolio-row{mask-image:var(--slider-edge-mask)}
.employee-track img[src$="team-clean-04.webp"]{width:235px;flex-shrink:0}
@media(max-width:700px){
 .team-scene,.portfolio-row{width:100%}
 .employee-window,.portfolio-row{mask-image:var(--slider-edge-mask)}
 .employee-track img[src$="team-clean-04.webp"]{width:145px}
}

.all-work{display:flex;justify-content:center;margin:48px 20px 0}.all-work .action{min-width:200px}

/* Neutral interaction surfaces retain the artwork's own brand colours. */
:root{--hover-neutral:#ececec;--hover-border:#bcbcbc;--solid-hover:#292929;--focus-neutral:#606060}
:root[data-theme=dark]{--hover-neutral:#252525;--hover-border:#606060;--solid-hover:#d9d9d9;--focus-neutral:#bdbdbd}
@media(hover:hover) and (pointer:fine){
 .cta:hover,.action.solid:hover{background:var(--solid-hover);border-color:var(--solid-hover)}
 .action.outline:hover,.chip:hover{background:var(--hover-neutral);color:var(--ink);border-color:var(--hover-border)}
 .google-badge:hover,.dialog-close:hover,.faq-list summary:hover{background:var(--hover-neutral);border-color:var(--hover-border)}
 .contact-tabs button[aria-selected=false]:hover{background:var(--hover-neutral)}
}

/* Longer, eased edge fades let moving content disappear gradually. */
:root{--slider-edge-width:clamp(40px,6vw,112px);--slider-edge-mask:linear-gradient(90deg,transparent,rgba(0,0,0,.1) calc(var(--slider-edge-width)*.2),rgba(0,0,0,.35) calc(var(--slider-edge-width)*.4),rgba(0,0,0,.65) calc(var(--slider-edge-width)*.6),rgba(0,0,0,.9) calc(var(--slider-edge-width)*.8),#000 var(--slider-edge-width),#000 calc(100% - var(--slider-edge-width)),rgba(0,0,0,.9) calc(100% - var(--slider-edge-width)*.8),rgba(0,0,0,.65) calc(100% - var(--slider-edge-width)*.6),rgba(0,0,0,.35) calc(100% - var(--slider-edge-width)*.4),rgba(0,0,0,.1) calc(100% - var(--slider-edge-width)*.2),transparent)}
.employee-window,.portfolio-row,.addon-row{-webkit-mask-image:var(--slider-edge-mask);mask-image:var(--slider-edge-mask)}
.faq-surface,.faq{background:var(--bg)}

/* Team composition from the approved desktop and mobile Figma layouts. */
.team{padding-block:64px;overflow:hidden}
.team-intro>p{font-size:18px;line-height:1.45;margin-bottom:12px}
.team-intro h2{font-size:64px;line-height:.88;letter-spacing:-.03em;max-width:996px;margin:0 auto 24px}
.team .actions{gap:20px}
.team .actions .action{font-size:16px;line-height:1.45;padding:14px 24px;min-height:54px;gap:12px}
.team-scene{height:530px;margin-top:28px;width:100%;max-width:1920px;overflow:hidden}
.employee-window{padding-top:20px;inset:0;mask-image:linear-gradient(to right,transparent,#000 3.34%,#000 80.625%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 3.34%,#000 80.625%,transparent)}
.employee-track{gap:0;animation-duration:100s}
.employee-track .marquee-set{gap:0;align-items:flex-end}
.team-person{position:relative;display:block;flex:0 0 170px;width:170px;height:410px;margin-right:-30px}
.team-person-amir{flex-basis:167px;width:167px;overflow:hidden}
.team-person-afzal{flex-basis:157px;width:157px}
.employee-track .team-person img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;max-width:none}
.employee-track .team-person-amir img{position:absolute;left:-35.89%;width:131.05%;object-fit:fill}
.team-scene:before{inset:27px 0 auto;height:401px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:1}
.founders{position:absolute;left:calc(50% + 10px);top:124px;bottom:auto;width:554px;height:608px;max-width:none;overflow:hidden;transform:translateX(-50%);z-index:2}
.founders img{position:absolute;left:0;top:-1.22%;width:100%;height:102.44%;object-fit:fill;max-width:none}
.team-scene:after{inset:222px 0 0;background:linear-gradient(to bottom,transparent,var(--bg));z-index:3}
.site-footer{width:min(1248px,calc(100% - 96px));margin:28px auto 0;padding-top:24px;flex-wrap:nowrap;font-size:14px}
.site-footer>.footer-social-links{width:300px;font-size:16px;gap:28px}
.site-footer>.footer-legal{width:304px;justify-content:flex-end}
.site-footer .footer-brand{order:0;width:186px;flex:none}
.site-footer .footer-brand img{width:170px;height:28px}
@media(min-width:701px) and (max-width:1100px){
 .team-intro h2{font-size:56px}
 .site-footer{width:calc(100% - 48px)}
 .site-footer>.footer-social-links,.site-footer>.footer-legal{width:auto}
}
@media(max-width:700px){
 .team{padding-top:48px;padding-bottom:32px}
 .team-intro{width:calc(100% - 48px)}
 .team-intro>p{font-size:clamp(15px,4.09vw,18px);white-space:nowrap}
 .team-intro h2{font-size:clamp(34px,9.773vw,43px);line-height:1;letter-spacing:-.03em;max-width:392px;margin-bottom:24px}
 .team .actions{gap:12px}
 .team .actions .action{padding:14px clamp(10px,5.45vw - 0px,24px);font-size:clamp(13px,3.636vw,16px);gap:12px;min-height:52px}
 .team .actions .button-arrow{width:24px;height:24px;flex:none}
 .team-scene{--team-width:100vw;width:var(--team-width);height:var(--team-width);margin-top:calc(var(--team-width)*-.090909)}
 .employee-window{padding-top:calc(var(--team-width)*.115909);mask-image:linear-gradient(to right,transparent,#000 13.636%,#000 86.364%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 13.636%,#000 86.364%,transparent)}
 .team-person{flex-basis:calc(var(--team-width)*.263305);width:calc(var(--team-width)*.263305);height:calc(var(--team-width)*.635027);margin-right:calc(var(--team-width)*-.069182)}
 .team-person-amir{flex-basis:calc(var(--team-width)*.258657);width:calc(var(--team-width)*.258657)}
 .team-person-afzal{flex-basis:calc(var(--team-width)*.243168);width:calc(var(--team-width)*.243168)}
 .team-scene:before{top:calc(var(--team-width)*.325);height:calc(var(--team-width)*.425);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bg) 25%,transparent) 48%,var(--bg))}
 .founders{left:calc(50% + var(--team-width)*.005682);top:calc(var(--team-width)*.352273);width:calc(var(--team-width)*.743182);height:calc(var(--team-width)*.815909);max-width:none}
 .team-scene:after{inset:calc(var(--team-width)*.5) 0 0}
 .site-footer{display:flex;flex-direction:column;width:calc(100% - 48px);margin-top:20px;padding-top:20px;gap:12px;font-size:14px}
 .site-footer .footer-brand{order:-1;width:170px;height:28px}
 .site-footer>.footer-social-links,.site-footer>.footer-legal{width:auto;justify-content:center;gap:24px;min-height:44px;font-size:14px}
}
.team .actions .button-arrow{width:24px;height:24px;flex:0 0 24px}
.team .action.outline .button-arrow{filter:none}
.team .action.outline:hover .button-arrow,.team .action.outline:focus-visible .button-arrow{filter:invert(1)}
:root[data-theme=dark] .team .action.outline .button-arrow{filter:invert(1)}
:root[data-theme=dark] .team .action.outline:hover .button-arrow,:root[data-theme=dark] .team .action.outline:focus-visible .button-arrow{filter:none}
@media(max-width:700px){.team .actions{flex-wrap:nowrap}.team .actions .action{padding-inline:clamp(8px,4.2vw,24px)}}

/* Wider, distinct selected-work rows with quiet editorial captions. */
.portfolio-row .marquee-track,.portfolio-row .marquee-set{gap:24px}
.portfolio-row .marquee-track{animation-duration:90s}
.portfolio-row+.portfolio-row{margin-top:32px}
.portfolio-row .project-card{display:flex;flex-direction:column;width:clamp(300px,29vw,460px);height:auto;background:transparent;border-radius:0;overflow:visible;color:var(--ink);text-decoration:none}
.portfolio-row .project-card>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;transition:transform .55s cubic-bezier(.2,.7,.3,1),filter .35s}
.portfolio-row .project-caption{position:static;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 3px 2px;background:none;opacity:1;transform:none;transition:color .3s}
.portfolio-row .project-caption strong{font-family:Tinos,'Times New Roman',serif;font-size:24px;line-height:1.2;font-weight:400}
.portfolio-row .project-caption>span{font-size:12px;white-space:nowrap;color:var(--muted)}
.portfolio-row .project-card:hover>img,.portfolio-row .project-card:focus-visible>img{transform:scale(.985);filter:brightness(1.025)}
.portfolio-row .project-card:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:16px}
@media(max-width:700px){
 .portfolio-row .marquee-track,.portfolio-row .marquee-set{gap:16px}
 .portfolio-row+.portfolio-row{margin-top:24px}
 .portfolio-row .project-card{width:clamp(240px,78vw,340px)}
 .portfolio-row .project-card>img{border-radius:12px}
 .portfolio-row .project-caption{padding-top:12px;gap:10px}
 .portfolio-row .project-caption strong{font-size:22px}
 .portfolio-row .project-caption>span{font-size:11px}
}

.portfolio-row .project-caption strong{min-width:0;flex:1;overflow-wrap:break-word}

/* Give each brand line its own readable place below the name. */
.portfolio-row .project-caption{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;align-items:start}
.portfolio-row .project-caption>span{font-size:13px;line-height:1.45;white-space:normal}
@media(max-width:700px){.portfolio-row .project-caption>span{font-size:12px}}

/* The floating navigation remains visible and reverses with the page theme. */
:root{--nav-bg:rgb(20 20 20 / .8);--nav-ink:#f5f5f5;--nav-control:#242424;--nav-hover:#383838;--nav-link-hover:#292929;--nav-divider:#404040}
:root[data-theme=dark]{--nav-bg:rgb(242 242 242 / .8);--nav-ink:#141414;--nav-control:#e2e2e2;--nav-hover:#d2d2d2;--nav-link-hover:#dedede;--nav-divider:#c4c4c4}
.header{pointer-events:none}
.header>.brand,.header>.pill,.header>.menu{pointer-events:auto}
.pill,.menu{background:var(--nav-bg);color:var(--nav-ink);box-shadow:0 2px 14px #0000000a;transition:background-color .25s,color .25s}
.theme{background:var(--nav-control)!important}
.theme:hover,.theme:focus-visible{background:var(--nav-hover)!important}
.book:hover,.menu a:hover,.menu a:focus-visible{background:var(--nav-link-hover)}
.divider{background:var(--nav-divider)}
.hamburger i{background:currentColor}
:root[data-theme=dark] .theme img{filter:invert(1)}

/* Updated mobile Figma team composition and compact social footer. */
.site-footer>.footer-mobile-row{display:none}
@media(max-width:700px){
 .employee-track .team-person img[src$="/97ea4.webp"]{position:absolute;width:87.33%;height:94.11%;left:6.33%;top:2.93%;object-fit:fill}
 .employee-track .team-person-amir img{left:-36.73%;top:.49%;width:130.41%;height:99.51%}
 .employee-track .team-person img[src$="/cf28d.webp"]{position:absolute;width:92.7%;left:3.65%;object-fit:fill}
 .employee-track .team-person img[src$="/b1704.webp"]{position:absolute;width:92.8%;left:3.6%;top:1.08%;object-fit:fill}
 .employee-track .team-person img[src$="/62647.webp"]{position:absolute;width:92.8%;left:3.6%;top:-.76%;object-fit:fill}
 .employee-track .team-person img[src$="/f5111.webp"]{position:absolute;width:96.09%;height:103.55%;left:1.96%;top:-1.22%;object-fit:fill}
 .employee-track .team-person img[src$="/8e5ca.webp"]{position:absolute;width:90.83%;height:97.88%;left:4.58%;top:2.2%;object-fit:fill}
 .team .site-footer{padding-top:0;margin-top:20px;gap:24px}
 .site-footer>.footer-social-links,.site-footer>.footer-legal{display:none}
 .site-footer>.footer-mobile-row{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4.545vw,20px);width:auto;max-width:100%;min-height:44px;font-size:clamp(12px,3.182vw,14px);white-space:nowrap}
 .footer-mobile-row .text-button{font-size:inherit}
 .footer-social-icon{display:flex;align-items:center;justify-content:center;position:relative;flex:none;width:34px;height:44px;border-radius:10px}
 .footer-social-icon:before{content:"";position:absolute;inset:-2px -5px}
 .footer-social-icon-instagram:after{content:"";position:absolute;width:34px;height:33px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));border-radius:10px;z-index:-1}
 .footer-social-icon-instagram{isolation:isolate}
 .footer-social-icon-instagram img{transform:rotate(-90deg) scaleY(-1)}
 .footer-social-icon:hover,.footer-social-icon:focus-visible{background:color-mix(in srgb,var(--ink) 8%,var(--bg))}
 :root[data-theme=dark] .footer-social-icon img{filter:invert(1)}
}
/* A quiet contact row, separated from the navigation with one fine rule. */
.nav-socials{display:flex;justify-content:space-evenly;gap:12px;border-top:1px solid var(--nav-divider);margin:8px 8px 0;padding-top:10px}
.menu .nav-social{display:flex;align-items:center;justify-content:center;width:48px;min-height:44px;padding:0;border-radius:12px;transition:background-color .2s,transform .2s}
.menu .nav-social:hover{background:var(--nav-link-hover);transform:translateY(-2px)}
.nav-social img{width:20px;height:20px;object-fit:contain;filter:invert(1)}
.nav-social-instagram img{transform:rotate(-90deg) scaleY(-1)}
.nav-social-email img{width:44px;height:44px}
:root[data-theme=dark] .nav-social img{filter:none}
.footer-whatsapp{display:inline-flex;align-items:center;gap:8px;min-height:44px}
:root[data-theme=dark] .footer-whatsapp img{filter:invert(1)}
.site-footer>.footer-social-links{width:auto;gap:22px}
.reel-controls{position:absolute;z-index:2;right:24px;bottom:24px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.reel-controls .video-toggle,.watch-film{position:static;border:1px solid #ffffff70;background:#111c;color:white;border-radius:30px;min-height:44px;padding:10px 18px;font-size:14px;transition:background-color .2s,transform .2s}
.reel-controls button:hover{background:#333e;transform:translateY(-2px)}
.reel-controls button:focus-visible{outline-color:white}
.film-open{overflow:hidden}
.film-viewer{padding:56px 0 0;width:min(1200px,calc(100vw - 32px));max-width:1200px;border:1px solid #ffffff35;border-radius:18px;background:#090909;color:white;overflow:hidden;max-height:calc(100dvh - 32px)}
.film-viewer::backdrop{background:#000c;backdrop-filter:blur(8px)}
.film-viewer video{display:block;width:100%;max-height:calc(100dvh - 100px);aspect-ratio:16/9;object-fit:contain;background:#090909}
.film-close{position:absolute;top:6px;right:12px;min-height:44px;border:0;background:transparent;color:#fff;padding:10px 12px;border-radius:10px}
.film-close:hover{background:#333}
.film-status{padding:12px 20px;margin:0}
@media(max-width:700px){
 .reel-controls{right:16px;left:16px;bottom:20px;gap:8px}
 .reel-controls .video-toggle,.watch-film{font-size:12px;padding-inline:14px}
 .footer-mobile-row{display:grid;grid-template-columns:44px 44px 44px;justify-content:center;gap:14px 20px;width:100%;max-width:100%}
 .footer-mobile-row>.footer-social-icon{grid-row:1;width:44px}
 .footer-mobile-row>span{grid-row:2;grid-column:1/3;text-align:left}
 .footer-mobile-row>.text-button{grid-row:2;grid-column:3;text-align:right}
 .footer-social-icon-whatsapp{background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
 .film-viewer{width:calc(100vw - 20px);border-radius:12px}
}
.showreel{position:relative}
.work-page .reel-controls .video-toggle{position:static;bottom:auto;right:auto}
@media(max-width:700px){
 .showreel .showreel-media{height:100svh;min-height:0;aspect-ratio:auto}
 .showreel .showreel-media>img,.showreel .showreel-media>video{object-fit:cover}
 .opening-chapter .showreel-media>img,.opening-chapter .showreel-media>video{transform:none!important}
 .showreel .reel-controls{position:absolute;inset:auto 16px max(20px,env(safe-area-inset-bottom));justify-content:center;padding:0;background:transparent}
}
@media(max-width:700px){
 .site-footer>.footer-mobile-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,320px);gap:14px 20px}
 .footer-mobile-row>.footer-social-icon{justify-self:center}
}
/* The decorative team row must never intercept the enquiry buttons. */
.team-intro{position:relative;z-index:5}
@media(max-width:700px){.motion-toggle.footer-visible{position:relative;inset:auto;display:block;width:max-content;margin:0 auto 16px}}
/* Pausing motion keeps the reader at the same place in the page. */
@media(prefers-reduced-motion:no-preference){
 .motion-paused .opening-chapter .promise{position:sticky}
 .motion-paused .opening-chapter .showreel{margin-top:170svh}
}
.nav-socials{border-top-color:color-mix(in srgb,var(--nav-ink) 20%,transparent)}
/* Open the complete film in an immersive, screen-filling player. */
.film-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0}
.film-viewer video{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain}
.film-viewer .dialog-close{z-index:1;background:#111c;border:1px solid #ffffff70;color:white}
.showreel-media[role=button]{cursor:pointer}
.showreel-media[role=button]:focus-visible{outline:2px solid white;outline-offset:-6px}
.intent-cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .18s ease,visibility .18s;will-change:transform}
.intent-cursor>span{display:flex;align-items:center;justify-content:center;width:94px;height:94px;padding:14px;border-radius:50%;transform:translate(-50%,-50%) scale(.85);border:1px solid #ffffff70;background:#f2f2f2ed;color:#242424;font:500 13px/1.2 'DM Sans',sans-serif;letter-spacing:-.015em;text-align:center;white-space:nowrap;box-shadow:0 3px 16px #0000000c;backdrop-filter:blur(8px);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
:root[data-theme=dark] .intent-cursor>span{background:#303030ed;color:#f5f5f5;border-color:#ffffff35}
.intent-cursor.visible{visibility:visible;opacity:1}
.intent-cursor.visible>span{transform:translate(-50%,-50%) scale(1)}
@media(hover:hover) and (pointer:fine) and (min-width:701px){
 .intent-cursor-active .showreel-media[role=button],.intent-cursor-active .showreel-media[role=button] *,
 .intent-cursor-active a.project-card,.intent-cursor-active a.project-card *,
 .intent-cursor-active a.work-tile,.intent-cursor-active a.work-tile *{cursor:none!important}
}
@media(hover:none),(pointer:coarse),(max-width:700px){.intent-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.intent-cursor,.intent-cursor>span{transition:none}}

.film-viewer .film-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 20px;border-radius:12px;background:#171717ed;color:#fff;max-width:calc(100% - 48px);text-align:center;z-index:2}
.film-controls button:disabled{opacity:.5;cursor:wait}
@media(max-width:700px){.hero-copy{top:calc(46% + 32px)}.orbit-stage{top:calc(46% + 32px)}}
@media(max-width:520px){.hero-copy{top:calc(43% + 32px)}.orbit-stage{top:calc(43% + 32px)}}

/* Keep the team CTA arrows subordinate to the label on desktop, too. */
@media(min-width:701px){.team .actions .button-arrow{width:18px;height:18px;flex:0 0 18px}}

/* Neutral outline hover keeps arrows the same colour as the label. */
@media(hover:hover) and (pointer:fine){
 .action.outline:hover .button-arrow{filter:invert(1)}
 :root[data-theme=dark] .action.outline:hover .button-arrow{filter:none}
 .team .action.outline:hover .button-arrow{filter:none}
 :root[data-theme=dark] .team .action.outline:hover .button-arrow{filter:invert(1)}
}

/* Equal side columns centre the logo independently of the footer link widths. */
@media(min-width:701px){
 .site-footer{display:grid;grid-template-columns:minmax(0,1fr) 186px minmax(0,1fr);align-items:center;gap:24px}
 .site-footer>.footer-social-links{width:auto;justify-self:start;flex-wrap:wrap}
 .site-footer>.footer-legal{width:auto;justify-self:end;flex-wrap:wrap}
 .site-footer .footer-brand{order:0;justify-self:center;display:flex;justify-content:center;align-items:center;width:186px;text-align:center}
}
@media(min-width:701px) and (max-width:1000px){
 .site-footer{gap:16px}
 .site-footer>.footer-social-links{font-size:14px;gap:12px}
 .site-footer>.footer-legal{font-size:13px;gap:12px}
}

/* Give FAQ interaction a soft, spacious surface without shifting the text. */
.faq-list details{padding-block:14px}
.faq-list summary{position:relative;isolation:isolate;min-height:68px;padding:12px 14px;border-radius:12px;background:transparent!important}
.faq-list summary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));opacity:0;transform:scale(.99);transition:opacity .22s ease,transform .3s ease}
@media(hover:hover) and (pointer:fine){.faq-list summary:hover::before{opacity:1;transform:scale(1)}}
.faq-list summary:focus-visible{outline:2px solid var(--focus-neutral,#606060);outline-offset:4px}
.faq-list summary:focus-visible::before{opacity:1;transform:scale(1)}
@media(max-width:700px){.service-card .service-art[src*="content-new"]{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.faq-list summary::before{transition:none}}

/* Keep native loading chrome covered until a preview frame reaches the screen. */
.showreel-media>.showreel-video{opacity:1;pointer-events:none}
.showreel-media.preview-ready>.showreel-video{opacity:1}
.showreel-media>img{position:relative;z-index:1;pointer-events:none}
.showreel-video::-webkit-media-controls,.showreel-video::-webkit-media-controls-start-playback-button{display:none!important}
.film-viewer>video{opacity:0}
.film-viewer.film-frame-ready>video{opacity:1}
/* A compact central lockup leaves the animated outer rings clear. */
.reach h2{font-size:clamp(28px,3vw,44px);max-width:620px;margin-inline:auto}
.reach>img{width:64%;max-width:580px;height:auto;margin:24px auto}
.reach>p{max-width:440px;font-size:17px}
@media(max-width:700px){
 .reach h2{font-size:clamp(23px,6.2vw,32px);max-width:82%;line-height:1.08}
 .reach>img{width:78%;height:auto;margin:22px auto}
 .reach>p{max-width:76%;font-size:clamp(13px,3.5vw,16px);line-height:1.5}
}

.delivery-picture{display:contents}