@charset "UTF-8";
:root{color-scheme:dark;--bg:#000;--text:#f4f4f5;--muted:#909096;--line:#262628;--accent:#00b8ec;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:50px}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:8px}::selection{background:var(--accent);color:#000}.shell{max-width:1600px;margin:auto;padding:0 6%}.skip{position:fixed;top:-100px;left:20px;padding:14px;background:var(--accent);color:#000;z-index:10}.skip:focus{top:20px}header{height:150px;display:flex;align-items:center;justify-content:space-between}.logo{display:block;position:relative;width:150px;height:50px;overflow:hidden;flex-shrink:0}.logo img{position:absolute;max-width:none;width:476.4px;height:270.6px;left:-162px;top:-111.6px}.nav-link{font-size:.875rem;display:flex;gap:25px;align-items:center}.nav-link span{color:var(--accent);font-size:1.25rem}.nav-link:hover{color:var(--accent)}.hero{padding-top:85px}.eyebrow{display:flex;align-items:center;gap:13px;font-size:.75rem;font-weight:500;letter-spacing:.14em;color:#b0b0b7}.line{width:26px;height:2px;background:var(--accent)}h1{font-size:clamp(3.5rem,8.35vw,8.2rem);font-weight:500;letter-spacing:-.065em;line-height:1.07;margin:35px 0 42px}h1 span{color:var(--muted)}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:75px}.hero-bottom p{font-size:1.125rem;line-height:1.7;margin:0;color:#a3a3aa;letter-spacing:-.01em}.explore{display:flex;width:52px;height:52px;border:1px solid #434348;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;transition:color .2s,border-color .2s,transform .2s}.explore:hover{color:var(--accent);border-color:var(--accent);transform:translateY(4px)}.platforms{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:29px 0;color:#a3a3aa;font-size:1.0625rem;letter-spacing:-.02em}.studio{display:grid;grid-template-columns:1fr 3fr;gap:40px;padding:120px 0 125px}.section-label{font-size:.75rem;letter-spacing:.1em;color:var(--muted);padding-top:11px}.studio h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.12;font-weight:500;letter-spacing:-.05em;margin:0 0 32px}.studio h2 span{color:var(--muted)}.intro{font-size:1.125rem;color:#a3a3aa;line-height:1.8;max-width:630px;margin:0}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:65px}.principles article{border-top:1px solid var(--line);padding-top:22px}.number{font-size:.75rem;color:var(--accent)}h3{font-size:1rem;letter-spacing:-.015em;font-weight:500;margin:23px 0 12px}.principles p{font-size:1rem;line-height:1.7;color:var(--muted);margin:0}footer{display:flex;justify-content:space-between;gap:24px;padding:30px 0 36px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}footer a span{margin-left:14px;color:var(--text)}footer a:hover{color:var(--accent)}
@media(min-width:1600px){.hero{padding-top:110px}}
@media(max-width:760px){.shell{padding:0 7%}header{height:108px}.logo{transform:scale(.85);transform-origin:left center;width:150px}.nav-link{gap:12px}.hero{padding-top:68px}.eyebrow{font-size:.6875rem;letter-spacing:.09em}h1{font-size:clamp(2.65rem,9.1vw,4.3rem);letter-spacing:-.055em;margin:30px 0 32px}.hero-bottom{padding-bottom:50px;gap:20px}.hero-bottom p{font-size:1rem}.explore{width:44px;height:44px;flex-shrink:0}.platforms{flex-wrap:wrap;row-gap:25px;padding:25px 0}.platforms span{width:33.333%;font-size:.9375rem}.platforms span:nth-child(3n+2){text-align:center}.platforms span:nth-child(3n){text-align:right}.studio{grid-template-columns:1fr;padding:72px 0;gap:28px}.studio h2{font-size:2.75rem}.intro{font-size:1rem}.principles{grid-template-columns:1fr;gap:30px;margin-top:40px}.principles article{padding-top:18px}h3{margin:15px 0 8px}footer{flex-wrap:wrap;line-height:1.6;gap:16px}footer>span:nth-child(2){order:3;flex-basis:100%}footer a{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.explore{transition:none}}

/* Hero: quiet typography against a stationary optical field. */
.hero{padding-top:0}
.hero-stage{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(620px,calc(100svh - 230px),900px);padding:100px 0 150px}
.hero-copy{position:relative;z-index:1;max-width:960px}
.hero h1{font-size:clamp(4rem,8.2vw,7.5rem);font-weight:450;line-height:1.06;letter-spacing:-.045em;margin:0;max-width:960px}
.hero h1 span{display:block;color:var(--text)}
.hero-copy p{font-size:1.25rem;line-height:1.6;letter-spacing:-.012em;color:#a5a7ad;max-width:420px;margin:36px 0 0}
.hero-light{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 75%,transparent),linear-gradient(transparent,#000 14%,#000 75%,transparent);mask-composite:intersect}
.hero-light::before{content:"";position:absolute;width:108%;height:105%;left:25%;top:-28%;transform:rotate(-32deg);background:radial-gradient(ellipse at center,rgba(183,194,207,.085) 0%,rgba(154,169,185,.045) 25%,rgba(91,117,135,.018) 42%,transparent 65%);filter:blur(24px)}
.hero-light::after{content:"";position:absolute;width:72%;height:130%;left:42%;top:-24%;transform:rotate(26deg);border-radius:50%;background:radial-gradient(ellipse at 48% 50%,transparent 42%,rgba(153,171,184,.045) 48%,rgba(0,184,236,.018) 52%,transparent 61%);filter:blur(18px)}
.hero .explore{position:absolute;right:0;bottom:58px;width:44px;height:44px;border-color:#323438;font-size:1.25rem;color:#a5a7ad}
.hero .explore:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:760px){
  .hero{padding-top:0}
  .hero-stage{align-items:flex-start;min-height:calc(100svh - 108px);padding:clamp(88px,16svh,150px) 0 135px}
  .hero h1{font-size:clamp(2.65rem,10.6vw,5rem);line-height:1.1;letter-spacing:-.04em}
  .hero-copy p{font-size:1.0625rem;line-height:1.65;max-width:285px;margin-top:30px}
  .hero .explore{left:0;right:auto;bottom:52px}
  .hero-light::before{width:165%;left:0;top:-18%;opacity:.85}
  .hero-light::after{width:130%;left:10%;opacity:.7}
}

/* Studio and services share the existing editorial grid. */
.studio-detail{margin-top:24px}
.studio-location{margin:35px 0 0;color:#c0c2c6;font-size:.875rem;line-height:1.7}
.services{display:grid;grid-template-columns:1fr 3fr;gap:40px;border-top:1px solid var(--line);padding:100px 0 120px}
.services h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.12;font-weight:500;letter-spacing:-.05em;margin:0 0 60px}
.services h2 span{color:var(--muted)}
.service{display:grid;grid-template-columns:32px 1fr;gap:22px;border-top:1px solid var(--line);padding:34px 0 38px}
.service>.number{padding-top:8px}
.service h3{font-size:1.5rem;line-height:1.3;letter-spacing:-.03em;margin:0 0 15px;font-weight:500}
.service p{font-size:1.0625rem;line-height:1.8;color:#a3a3aa;max-width:580px;margin:0}
.service-note{display:block;font-size:.8125rem;line-height:1.6;color:#81858b;margin-top:20px}
.service:last-child{padding-bottom:0}
@media(max-width:760px){.services{grid-template-columns:1fr;padding:68px 0 72px;gap:28px}.services h2{font-size:2.75rem;margin-bottom:36px}.service{gap:12px;grid-template-columns:24px 1fr;padding:28px 0 30px}.service h3{font-size:1.25rem}.service p{font-size:1rem}.studio-location{margin-top:28px}}
header nav{display:flex;align-items:center;gap:32px}
.contact{display:grid;grid-template-columns:1fr 3fr;gap:40px;border-top:1px solid var(--line);padding:100px 0 120px}
.contact h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.12;font-weight:500;letter-spacing:-.05em;margin:0 0 28px}
.contact h2 span{color:var(--muted)}
.contact p{color:#a3a3aa;font-size:1.0625rem;line-height:1.8;margin:0 0 30px}
.contact-link{display:inline-flex;align-items:center;gap:30px;font-size:1.25rem;line-height:1.6;border-bottom:1px solid #45494d;padding-bottom:8px}
.contact-link span{color:var(--accent)}.contact-link:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:760px){header nav{gap:0}header nav .nav-link:not(:last-child){display:none}.contact{grid-template-columns:1fr;padding:68px 0 80px;gap:28px}.contact h2{font-size:2.5rem}.contact p{font-size:1rem}.contact-link{font-size:1.125rem;gap:22px}}

/* System typography, with room for the studio introduction. */
.hero h1{font-family:inherit;font-weight:400;font-size:clamp(4rem,7.8vw,7rem);letter-spacing:-.045em;line-height:1.08}
.hero-copy p{max-width:650px;font-size:1.125rem;line-height:1.75;margin-top:36px}
@media(max-width:760px){.hero h1{font-size:clamp(2.5rem,10.2vw,4.75rem);letter-spacing:-.04em}.hero-copy p{font-size:1rem;line-height:1.75;max-width:34rem;margin-top:28px}.hero-stage{padding-top:clamp(64px,12svh,110px);padding-bottom:150px}}

/* Keep section dividers consistent with services before the studio. */
.hero + .services{border-top:0}
.services + .studio{border-top:1px solid var(--line)}

/* Beliefs: a full-width editorial grid, distinct from the Craft list. */
.believe{border-top:1px solid var(--line);padding:100px 0 120px}
.believe>.section-label{font-weight:400;margin:0 0 64px;padding:0}
.belief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,8vw,130px);row-gap:72px}
.belief-grid article{padding-top:28px;border-top:1px solid var(--line)}
.belief-grid h3{font-size:clamp(1.75rem,2.55vw,2.5rem);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:0 0 24px;max-width:520px;text-wrap:balance}
.belief-grid p{font-size:1.0625rem;line-height:1.85;color:#a3a3aa;margin:0;max-width:540px}
@media(max-width:760px){.believe{padding:68px 0 76px}.believe>.section-label{margin-bottom:36px}.belief-grid{grid-template-columns:1fr;row-gap:40px}.belief-grid article{padding-top:24px}.belief-grid h3{font-size:1.875rem;margin-bottom:20px;max-width:24rem}.belief-grid p{font-size:1rem;line-height:1.8}}

/* About: story and staggered portrait introductions. */
.about{display:grid;grid-template-columns:1fr 3fr;gap:40px;border-top:1px solid var(--line);padding:110px 0 130px}
.about h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.12;font-weight:500;letter-spacing:-.05em;margin:0 0 36px}
.about h2 span{color:var(--muted)}
.about-story{max-width:650px}
.about-story p{color:#a3a3aa;font-size:1.0625rem;line-height:1.85;margin:0 0 24px}
.about-story p:last-child{margin-bottom:0}
.about-story strong{color:#dedfe2;font-weight:500}
.about-people{display:flex;align-items:flex-start;gap:clamp(32px,5vw,80px);margin-top:64px;max-width:850px}
.person{flex:1.12;min-width:0;margin:0}
.person-diana{flex:1;margin-top:96px}
.portrait{aspect-ratio:4/5;background:linear-gradient(145deg,#151719,#0a0b0c 75%);border:1px solid #202225;display:flex;align-items:flex-end;padding:28px;overflow:hidden}
.portrait>span{font-size:clamp(2.5rem,4vw,4rem);font-weight:300;letter-spacing:-.04em;line-height:1;color:#5c6167}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.person figcaption{padding-top:24px}
.person .person-name{font-size:1.375rem;line-height:1.4;font-weight:500;letter-spacing:-.025em;margin:0 0 8px}
.person figcaption p{font-size:.9375rem;line-height:1.7;color:#a3a3aa;margin:0}
.person figcaption p span{color:#81858b}
@media(max-width:760px){.about{grid-template-columns:1fr;padding:68px 0 80px;gap:28px}.about h2{font-size:2.75rem;margin-bottom:28px}.about-story p{font-size:1rem;line-height:1.8}.about-people{display:block;margin-top:44px}.person{max-width:360px}.person-diana{margin-top:48px;margin-left:auto;width:88%}.portrait{padding:24px}.portrait>span{font-size:3rem}.person figcaption{padding-top:20px}}

/* Optical motion: light carries the expression; the editorial layout stays still. */
.hero-light{z-index:0;mask-image:linear-gradient(transparent,#000 9%,#000 86%,transparent);mask-composite:add}
.hero-light::before,.hero-light::after{display:none}
.refraction{display:block;width:100%;height:100%;opacity:.82;mask-image:linear-gradient(90deg,transparent,#000 48%)}
.motion-toggle{position:absolute;left:0;bottom:64px;z-index:2;border:0;border-bottom:1px solid #34383c;background:transparent;color:#8d939a;font:inherit;font-size:.75rem;padding:8px 0;cursor:pointer;transition:color .3s,border-color .3s}
.motion-toggle:hover{color:#c8eaf3;border-color:var(--accent)}
.motion-toggle:focus-visible,.service:focus-visible{outline:1px solid var(--accent);outline-offset:7px}
.service{position:relative;isolation:isolate}
.service::before{content:"";position:absolute;top:-1px;left:0;width:72%;height:1px;background:linear-gradient(90deg,transparent,#b8e7f5,var(--accent),transparent);mask-image:linear-gradient(90deg,#000,transparent 25%);opacity:0;transform:translateX(22%);transition:opacity .5s,transform 1.1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.service:hover::before,.service:focus-visible::before{opacity:.8;transform:translateX(0)}
.service h3{transition:color .4s}.service:hover h3,.service:focus-visible h3{color:#d6f1f8}
.belief-grid article{position:relative;isolation:isolate}
.belief-grid article::before{content:"";position:absolute;inset:-24px -16px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 12%,rgba(107,181,204,.055),transparent 65%);opacity:0}
@media(prefers-reduced-motion:no-preference){
.reveal-ready h3,.about h2.reveal-ready,.about-story.reveal-ready{opacity:.35;transition:opacity 1.1s ease}
.revealed h3,.about h2.revealed,.about-story.revealed{opacity:1}
.belief-grid article.revealed::before{animation:belief-light 2.8s ease-out both}
}
@keyframes belief-light{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
.contact{position:relative;isolation:isolate;overflow:hidden}
.contact>div{position:relative;z-index:1}
.contact-light{position:absolute;right:-35px;top:10px;width:340px;height:230px;opacity:.45;pointer-events:none;mask-image:radial-gradient(ellipse,#000 20%,transparent 70%)}
.contact-link{position:relative;transition:color .35s,border-color .35s}
.contact-link::after,.nav-link::after{content:"";position:absolute;bottom:-1px;left:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--accent),#bfecfa,transparent);opacity:0;transform:scaleX(.4);transition:opacity .4s,transform .7s}
.contact-link:hover::after,.contact-link:focus-visible::after,.nav-link:hover::after,.nav-link:focus-visible::after{opacity:.8;transform:scaleX(1)}
.nav-link{position:relative;padding:8px 0;transition:color .3s}
.nav-link:hover{color:#d6f1f8}
@media(max-width:760px){.refraction{opacity:.65;mask-image:linear-gradient(transparent,#000 35%,#000 85%,transparent)}.motion-toggle{left:auto;right:0;bottom:54px}.contact-light{top:12px;right:-60px;width:260px;height:180px;opacity:.3}}
@media(prefers-reduced-motion:reduce){.service::before,.service h3,.contact-link,.contact-link::after,.nav-link,.nav-link::after,.motion-toggle{transition:none}.belief-grid article::before{animation:none}}

/* Blue currents and quiet, static light in Services. */
.particle-field{display:block;width:100%;height:100%;opacity:.75;mask-image:linear-gradient(90deg,#0006,#000 70%)}
.motion-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #282d32;border-radius:50%;bottom:58px;color:#9099a2}
.motion-toggle[hidden]{display:none}.motion-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.motion-toggle .play-icon{display:none}.motion-toggle[aria-pressed=true] .play-icon{display:block}.motion-toggle[aria-pressed=true] .pause-icon{display:none}
.services{position:relative;isolation:isolate}
.services::before,.services::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent,#000 14%,#000 75%,transparent)}
.services::before{background:radial-gradient(ellipse at 74% 35%,rgba(183,194,207,.065),rgba(154,169,185,.035) 25%,rgba(91,117,135,.015) 42%,transparent 65%);filter:blur(24px)}
.services::after{background:radial-gradient(ellipse at 78% 40%,transparent 30%,rgba(153,171,184,.035) 38%,rgba(0,184,236,.015) 42%,transparent 53%);filter:blur(18px)}
.belief-icon{display:block;width:30px;height:30px;margin:0 0 22px;color:#42b9dc;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
@media(max-width:760px){.particle-field{opacity:.57;mask-image:linear-gradient(180deg,#0008,#000)}.motion-toggle{bottom:52px}.belief-icon{width:27px;height:27px;margin-bottom:20px}}

.belief-icon{fill:currentColor;stroke:none}

/* Vector wordmark, retaining the original Digito blue. */
.logo{height:auto;overflow:visible}.logo img{position:static;display:block;width:100%;height:auto;max-width:100%}

/* Matched studio portraits fill the existing editorial frames. */
.portrait{padding:0}.portrait img{object-position:center center}