/* Sarah Somsavath — a curious, considered design studio. */
:root{--paper:#faf8f2;--ink:#33283f;--soft:#6d6574;--lilac:#d5c4f4;--butter:#f4e796;--pink:#f0cec2;--mint:#dfe9da;--rule:#33283f24;--ease:cubic-bezier(.2,.75,.25,1);--serif:'Gambetta',Georgia,serif;--sans:'Switzer',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body,p,h1,h2,h3,figure{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,a{touch-action:manipulation}
::selection{background:var(--lilac);color:var(--ink)}
:focus-visible{outline:3px solid #76509f;outline-offset:5px}
[hidden]{display:none!important}
body.lock{overflow:hidden}
.preloader{position:fixed;inset:0;z-index:300;background:#33283f;color:#faf8f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.intro-corner{position:absolute;top:35px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#d5c4f4}
.intro-corner-left{left:40px}.intro-corner-right{right:40px}
.intro-orbit{position:absolute;width:min(68vw,790px);aspect-ratio:1;border:1px solid #d5c4f420;border-radius:50%;pointer-events:none}
.intro-orbit::after{content:'';position:absolute;inset:30px;border:1px solid #d5c4f414;border-radius:50%}
.sig{position:relative;display:flex;align-items:center;flex-direction:column;gap:23px;text-align:center}
.sig-flower{font-family:Georgia,serif;font-size:48px;color:#d5c4f4;line-height:1}
.sig-name{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(39px,8vw,108px);color:#faf8f2;line-height:1.3;white-space:nowrap;padding:0 .25em;clip-path:inset(0 100% 0 -3%)}
.sig .tag{font-family:var(--sans);font-size:10px;letter-spacing:.23em;text-transform:uppercase;color:#d5c4f4}
.intro-line{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#d5c4f4;transform:scaleX(0);transform-origin:left}
.intro-skip{position:absolute;bottom:30px;right:40px;background:none;color:#faf8f2;border:1px solid #faf8f24d;border-radius:30px;padding:11px 17px;font-size:11px}
.intro-skip:hover{background:#d5c4f4;color:#33283f}
.intro-replay{font-size:10px;border:0;border-bottom:1px solid var(--rule);background:none;padding:6px 0;white-space:nowrap}
.cursor-aura{position:fixed;top:0;left:0;z-index:250;pointer-events:none;opacity:0;transform:translate(-100px,-100px);will-change:transform}
.cursor-aura.visible{opacity:1}
.cursor-shape{width:30px;height:30px;display:grid;place-items:center;border:1px solid #9573b8;border-radius:50%;background:#d5c4f42b;transform:translate(-50%,-50%);transition:width .22s var(--ease),height .22s var(--ease),background .22s,border-color .22s;box-shadow:0 1px 8px #33283f08}
.cursor-flower{font-family:Georgia,serif;font-size:13px;color:#79579b;line-height:1;transition:transform .35s}
.cursor-label{display:none;color:#faf8f2;font:500 12px var(--sans);white-space:nowrap}
.cursor-aura.link .cursor-shape{width:43px;height:43px;background:#d5c4f44d}
.cursor-aura.link .cursor-flower{transform:rotate(90deg)}
.cursor-aura.project .cursor-shape{width:72px;height:72px;border-color:#33283f;background:#33283f}
.cursor-aura.project .cursor-flower{display:none}.cursor-aura.project .cursor-label{display:block}
.cursor-aura.pressed .cursor-shape{scale:.88}
.motion-off .cursor-aura,.motion-off .preloader{display:none!important}
@media(hover:none),(pointer:coarse){.cursor-aura{display:none!important}}
@media(prefers-reduced-motion:reduce){.cursor-aura,.preloader{display:none!important}}
@media(max-width:700px){.intro-corner{top:25px;font-size:8px}.intro-corner-left{left:20px}.intro-corner-right{right:20px}.intro-skip{right:20px;bottom:24px}.sig{gap:22px}.sig .tag{font-size:8px;letter-spacing:.13em}.intro-orbit{width:95vw}.sig-flower{font-size:37px}.intro-replay{font-size:9px}}
.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
h2{font-size:clamp(38px,4.7vw,66px);font-weight:500;letter-spacing:-.055em;line-height:1.05}
h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.055em}
.skip-link{position:fixed;top:12px;left:12px;background:var(--ink);color:white;z-index:200;padding:12px 20px;border-radius:8px;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.site-header{height:92px;width:min(1440px,calc(100% - 80px));margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:50;border-bottom:1px solid var(--rule)}
.wordmark{display:inline-flex;align-items:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:41px;letter-spacing:-3px;line-height:1}
.wordmark-flower{font-family:Georgia,serif;font-style:normal;font-size:30px;letter-spacing:0;color:#80639e;margin-left:5px;transition:transform .6s var(--ease)}
.wordmark:hover .wordmark-flower{transform:rotate(90deg)}
.desktop-nav{display:flex;gap:36px;margin-left:55px;font-size:13px;font-weight:500}
.desktop-nav a{position:relative;padding:12px 0}
.desktop-nav a::after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.desktop-nav a:hover::after,.desktop-nav a.nav-active::after{transform:scaleX(1)}
.nav-contact{font-size:13px;display:flex;align-items:center;gap:26px;border:1px solid var(--rule);border-radius:30px;padding:12px 19px;transition:background .2s}
.nav-contact:hover{background:var(--lilac)}
.menu-toggle,.mobile-nav{display:none}
.hero{overflow:hidden;position:relative}
.hero-copy{position:relative;text-align:center;padding:60px 20px 0;z-index:2}
.hello{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px}
.hello img{border-radius:50%;object-fit:cover;object-position:center 30%;width:32px;height:32px}
.hero h1{font-size:clamp(58px,7.3vw,108px);line-height:1.01;letter-spacing:-.06em;font-weight:500;margin:24px auto 22px;position:relative;width:fit-content}
.hero h1 em{font-family:var(--serif);font-weight:400;position:relative;display:inline-block;z-index:0;letter-spacing:-.045em}
.hero h1 em::before{content:'';background:var(--lilac);height:87%;position:absolute;left:-10px;right:-12px;top:13%;z-index:-1;transform:rotate(-3deg);border-radius:48% 48% 40% 43%/55% 50% 45% 45%}
.hero-spark{position:absolute;right:-70px;top:0;width:41px;height:41px;color:#9a7bb8;transform:rotate(12deg)}
.hero-description{font-size:15px;line-height:1.65;color:var(--soft)}
.hero h1{margin-bottom:14px}
.hero-roles{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:0 0 20px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;padding:15px 23px;border-radius:50px;font-size:13px;transition:background .25s,transform .25s}
.button-dark{background:var(--ink);color:var(--paper)}
.button:hover{transform:translateY(-3px);background:#574565;color:#fff}
.hero .button{margin-top:25px}
.hero-gallery{height:355px;max-width:1300px;margin:8px auto 0;position:relative;isolation:isolate}
.gallery-orbit{position:absolute;bottom:-245px;left:50%;transform:translateX(-50%);width:1050px;height:535px;border-radius:50%;background:var(--lilac);z-index:-1;opacity:.57;background-image:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);background-size:28px 28px}
.float-card{position:absolute;background:#fffdf8;border:1px solid #33283f18;padding:8px 8px 0;box-shadow:0 16px 30px -17px #3b2d4255;border-radius:10px;transform:translate3d(0,var(--parallax-y,0px),0) rotate(var(--rotation));transition:box-shadow .3s}
.float-card:hover{box-shadow:0 21px 30px -15px #3b2d4288}
.float-image{overflow:hidden;border-radius:5px}
.float-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.float-card:hover img{transform:scale(1.035)}
.float-card>span{display:block;font-size:9px;font-weight:500;padding:10px 2px 11px;letter-spacing:.01em}
.float-brand{width:177px;left:10%;top:14px;--rotation:-12deg;z-index:3}
.float-brand .float-image{height:219px}
.float-brand img{object-position:50% 12%}
.float-digital{width:299px;left:28%;top:97px;--rotation:5deg;z-index:4}
.float-digital .float-image{height:187px}
.float-research{width:276px;right:18%;top:71px;--rotation:-7deg;z-index:2}
.float-research .float-image{height:180px;background:#fff;display:flex;align-items:center}
.float-research img{object-fit:contain}
.float-object{width:148px;right:6%;top:25px;--rotation:11deg;z-index:4}
.float-object .float-image{height:200px}
.studio-note{position:absolute;top:31px;left:37%;font-family:var(--serif);font-size:17px;font-style:italic;transform:rotate(-7deg);color:#786785}
.studio-note svg{position:absolute;width:60px;height:40px;left:-44px;top:18px;transform:rotate(22deg)}
.good-sticker{position:absolute;bottom:21px;right:12%;z-index:5;background:var(--butter);height:104px;width:104px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border-radius:50%;border:1px dashed #8d794e;font-size:10px;line-height:1.3;transform:rotate(14deg);box-shadow:0 3px 0 4px var(--butter)}
.good-sticker b{font-size:14px;font-weight:500}
.good-sticker>span{font-size:30px;line-height:1.1;margin-top:4px}
.hero-bottom{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:21px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.035em;background:var(--paper);position:relative;z-index:6}
.hero-bottom a span{margin-left:22px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#66856b;margin:0 7px 1px 0}
.work-section{padding-top:105px;padding-bottom:100px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px}
.section-heading .eyebrow{margin-bottom:23px}
.section-heading>p{font-size:13px;line-height:1.7;color:var(--soft);padding-bottom:5px}
.work-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:38px 0 32px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{font-size:11px;padding:10px 17px;background:transparent;border:1px solid var(--rule);border-radius:30px;transition:background .2s}
.filter:hover{background:#eee7f5}
.filter.active{background:var(--ink);border-color:var(--ink);color:white}
.filter span{margin-left:7px;font-size:9px;opacity:.7}
.work-count{font-size:10px;color:var(--soft)}
.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px 28px;align-items:start}
.project-card{min-width:0}
.project-card:nth-child(even){margin-top:0}
.featured-grid.is-filtered .project-card{margin-top:0}
.project-visual{height:clamp(285px,31vw,420px);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;isolation:isolate}
.project-type{font-size:9px;font-weight:500;letter-spacing:.1em;position:absolute;left:25px;top:24px;z-index:2}
.visual-caption{position:absolute;bottom:25px;left:25px;font-family:var(--serif);font-size:17px;font-style:italic;z-index:2}
.visual-vermeer{background:#e3e7dc}
.vermeer-art{width:93%;padding:10px;background:#fff;border-radius:5px;box-shadow:0 20px 30px -20px #25351c66;transform:translateY(var(--image-y,0px)) rotate(-5deg)}
.visual-vermeer img{width:100%;height:auto}
.view-circle{width:39px;height:39px;background:#fff9;backdrop-filter:blur(8px);display:grid;place-items:center;position:absolute;bottom:18px;right:18px;border-radius:50%;font-size:23px;transition:background .25s,transform .25s;z-index:3}
a:hover .view-circle{background:var(--ink);color:white;transform:rotate(45deg)}
.visual-moji{background:#73bbd1}
.moji-art{width:106%;max-width:none;height:auto;transform:translateY(var(--image-y,0px)) rotate(4deg)}
.visual-buttercup{background:#ead6c4}
.poster-composition{height:77%;width:90%;position:relative;transform:translateY(var(--image-y,0px))}
.poster-composition img{position:absolute;height:100%;width:auto;box-shadow:0 12px 20px -12px #27130970}
.poster-back{right:13%;top:0;transform:rotate(10deg)}
.poster-front{left:12%;top:6%;transform:rotate(-9deg)}
.visual-noah{background:#d7c8ec}
.noah-art{width:87%;transform:translateY(var(--image-y,0px)) rotate(-5deg);box-shadow:0 15px 25px -12px #49325955}
.noah-art img{width:100%;height:auto}
.wip-label{position:absolute;right:19px;top:18px;background:#fff8;border-radius:30px;padding:5px 10px;font-size:9px;z-index:2}
.project-info{display:flex;justify-content:space-between;align-items:flex-start;margin-top:20px}
.project-info h3{font-size:22px;font-weight:500;letter-spacing:-.035em}
.project-info p{font-size:12px;margin-top:5px;color:var(--soft)}
.project-index{font-family:var(--serif);font-size:18px;font-style:italic;color:#887e8f}
.project-detail{font-size:12px;line-height:1.7;margin-top:13px;max-width:49ch;color:var(--soft)}
.more-heading{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:28px;margin:65px 0 28px}
.featured-grid[hidden]+.more-heading{margin-top:25px;border-top:0;padding-top:0}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 24px}
.small-project{min-width:0}
.small-image{height:240px;border-radius:9px;overflow:hidden;background:#eeece7;position:relative;padding:18px;display:flex;align-items:center;justify-content:center}
.small-image img{width:100%;height:100%;object-fit:contain;transition:transform .65s var(--ease);mix-blend-mode:multiply}
.small-project a:hover img{transform:scale(1.055) rotate(-2deg)}
.small-image .object-thumb{width:auto;max-width:100%;height:100%}
.tone-lilac{background:#e8e1f0}.tone-butter{background:#f0eacc}.tone-pink{background:#eddfdb}
.small-info{padding-top:14px}
.small-info h3{font-size:17px;font-weight:500;letter-spacing:-.025em}
.small-info>span{font-size:11px;color:var(--soft);display:block;margin-top:3px}
.approach-section{background:var(--ink);color:var(--paper);padding:95px 0}
.approach-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:8%}
.approach-intro{position:sticky;top:80px;align-self:start}
.approach-intro .eyebrow{color:#cab6dd;margin-bottom:27px}
.approach-intro h2{font-size:clamp(39px,4.5vw,62px)}
.approach-intro h2 em{color:var(--lilac)}
.approach-intro>p:not(.eyebrow){font-size:13px;line-height:1.8;margin-top:25px;color:#c8bece}
.thinking-flower{font-family:Georgia,serif;color:var(--butter);font-size:112px;line-height:1;margin-top:40px;transform:rotate(var(--flower-turn,0deg));width:100px}
.approach-item{border-top:1px solid #ffffff2b;padding:29px 0 36px;display:flex;gap:22px}
.approach-item>span{font-family:var(--serif);font-style:italic;color:#c9b3e1;font-size:15px;margin-top:2px}
.approach-item h3{font-size:22px;font-weight:400;letter-spacing:-.035em;line-height:1.25}
.approach-item p{color:#c8bece;font-size:13px;line-height:1.8;margin-top:14px}
.skill-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.skill-tags span{font-size:9px;padding:5px 9px;border:1px solid #ffffff33;border-radius:20px}
.about-preview{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center;padding-block:115px}
.portrait-composition{position:relative;max-width:370px;margin:0 auto;width:90%;padding:20px 12px}
.portrait{position:relative;width:100%;height:390px;object-fit:cover;object-position:center 35%;border-radius:46% 46% 6px 6px;transform:rotate(-5deg)}
.portrait-shape{position:absolute;inset:28px -10px 15px 20px;background:var(--lilac);border-radius:46% 46% 6px 6px;transform:rotate(6deg)}
.portrait-note{position:absolute;bottom:0;right:-34px;padding:14px 21px;background:var(--butter);font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.2;transform:rotate(7deg);box-shadow:0 2px 9px #33283f12}
.portrait-star{position:absolute;top:22px;left:-25px;font-size:80px;color:var(--ink);line-height:1}
.about-copy .eyebrow{margin-bottom:27px}
.about-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--soft);margin-top:20px;max-width:40ch}
.text-link{display:inline-flex;gap:30px;align-items:center;font-size:13px;font-weight:500;padding-bottom:7px;border-bottom:1px solid var(--ink);margin-top:26px}
.text-link:hover{color:#8059a4}
.about-facts{display:flex;gap:17px;flex-wrap:wrap;font-size:10px;border-top:1px solid var(--rule);margin-top:30px;padding-top:17px;color:var(--soft)}
.contact-section{background:var(--lilac);padding:42px 0 45px}
.contact-top{display:flex;justify-content:space-between;align-items:center;gap:15px}
.contact-top>span:last-child{font-size:10px}
.contact-section h2{font-size:clamp(66px,10vw,142px);letter-spacing:-.06em;line-height:1.02;margin:52px 0 50px;position:relative}
.contact-section h2 em{font-weight:400}
.contact-section h2>span{position:absolute;right:5%;top:18%;font-family:Arial,sans-serif;font-weight:300}
.contact-bottom{padding-top:23px;border-top:1px solid #33283f33;display:flex;justify-content:space-between;align-items:center;gap:20px}
.email-link{font-size:20px;letter-spacing:-.025em}
.email-link span{margin-left:18px}
.contact-bottom>div{display:flex;gap:30px;font-size:12px}
.contact-bottom a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer{padding-block:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:var(--soft)}
.site-footer .wordmark{color:var(--ink);font-size:32px}
.site-footer .wordmark-flower{font-size:22px}
.motion-toggle{font-size:10px;background:none;border:1px solid var(--rule);padding:7px 10px;border-radius:20px;white-space:nowrap}
.back-top{width:30px;height:30px;display:grid;place-items:center;font-size:20px;border:1px solid var(--rule);border-radius:50%}
/* Content is visible without JavaScript. Reveals are opt-in progressive enhancement. */
.reveal-ready{opacity:0;transform:translateY(20px)}
.reveal-ready.revealed{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
.motion-off{scroll-behavior:auto}
.motion-off *, .motion-off *::before, .motion-off *::after{animation:none!important;transition:none!important}
.motion-off .reveal-ready{opacity:1;transform:none}
.motion-off [data-parallax]{--parallax-y:0px!important}
.motion-off [data-image-drift]{--image-y:0px!important}
.motion-off .thinking-flower{--flower-turn:0deg!important}
/* About page */
.about-hero{padding-block:76px 90px}
.about-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:10%;align-items:center}
.about-hero .eyebrow{margin-bottom:25px}
.about-hero h1{font-size:clamp(63px,7.8vw,106px);line-height:1;letter-spacing:-.065em;font-weight:500}
.about-hero h1 em{font-family:var(--serif);font-weight:400}
.about-hero .intro{font-size:20px;line-height:1.55;max-width:32ch;margin-top:25px;color:var(--soft)}
.about-hero .portrait-composition{width:100%;margin:0}
.about-story{padding:65px 0 90px;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1.15fr;gap:11%}
.about-story h2{font-size:clamp(35px,4vw,54px)}
.bio-copy p{font-size:16px;line-height:1.85;color:var(--soft)}
.bio-copy p+p{margin-top:22px}
.background-section{padding:76px 0;background:#eeeadf}
.background-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.background-grid h2{font-size:40px;margin-bottom:32px}
.background-item{border-top:1px solid var(--rule);padding:17px 0}
.background-item h3{font-size:18px;font-weight:500}
.background-item p{font-size:13px;line-height:1.7;color:var(--soft);margin-top:5px}
.personal-note{display:flex;align-items:center;gap:24px;padding:35px 0;margin-top:36px;border-top:1px solid var(--rule)}
.personal-note img{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--butter)}
.personal-note p{font-family:var(--serif);font-style:italic;font-size:23px}
@media(min-width:1500px){.hero-gallery{margin-top:30px;height:385px}.float-brand{left:8%;width:190px}.float-digital{left:27%;width:320px}.float-research{right:18%;width:300px}.float-object{width:162px}.hero-copy{padding-top:75px}}
@media(max-width:1000px){
 .wrap{width:calc(100% - 64px)}.site-header{width:calc(100% - 48px)}
 .hero-gallery{height:325px}.float-brand{left:5%;width:153px}.float-brand .float-image{height:190px}.float-digital{left:24%;width:252px}.float-digital .float-image{height:159px}.float-research{right:13%;width:240px}.float-research .float-image{height:155px}.float-object{right:3%;width:125px}.float-object .float-image{height:166px}.good-sticker{right:7%;bottom:30px;width:85px;height:85px}.studio-note{left:35%}
 .project-info h3{font-size:20px}.small-image{height:200px}.project-type{left:18px;font-size:8px}.visual-caption{font-size:14px;left:18px;bottom:23px;max-width:75%}.approach-layout{gap:7%}.approach-item{gap:14px}.approach-item h3{font-size:20px}.portrait{height:340px}.about-preview{gap:8%}.site-footer>span:nth-of-type(2){display:none}
}
@media(max-width:700px){
 html{scroll-padding-top:24px}.wrap{width:calc(100% - 40px)}.site-header{width:calc(100% - 40px);height:76px}.wordmark{font-size:37px}.wordmark-flower{font-size:27px}
 .desktop-nav,.nav-contact{display:none}.menu-toggle{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--rule);border-radius:50%}.menu-toggle span{display:block;width:17px;height:1px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
 .mobile-nav{position:absolute;top:76px;left:-20px;right:-20px;background:var(--paper);padding:22px 25px 28px;border-bottom:1px solid var(--rule);box-shadow:0 18px 24px #33283f15;flex-direction:column;gap:10px}.mobile-nav.open{display:flex}.mobile-nav a{font-size:22px;padding:10px;font-family:var(--serif)}
 .hero-copy{padding-top:40px}.hello{font-size:10px;gap:7px}.hello img{width:26px;height:26px}
 .hero h1{font-size:clamp(43px,8.7vw,62px);margin-top:23px;letter-spacing:-.065em}.hero-spark{right:-20px;top:-15px;width:23px;height:23px}
 .hero-description{font-size:12px;max-width:330px;margin:auto}.hero-description br{display:none}.hero .button{margin-top:22px;font-size:12px;padding:13px 21px}
 .hero-gallery{height:280px;margin-top:22px;width:100%}.gallery-orbit{height:350px;width:650px;bottom:-177px}.float-brand{left:-10px;top:27px;width:115px;--rotation:-13deg}.float-brand .float-image{height:151px}.float-card>span{font-size:7px;padding:8px 1px}.float-card{padding:5px 5px 0;border-radius:7px}
 .float-digital{left:24%;top:85px;width:183px;--rotation:6deg}.float-digital .float-image{height:120px}.float-research{display:none}.float-object{right:-3px;top:29px;width:100px;--rotation:11deg}.float-object .float-image{height:144px}.good-sticker{width:63px;height:63px;right:7%;bottom:16px;font-size:7px}.good-sticker b{font-size:10px}.good-sticker>span{font-size:19px}.studio-note{top:16px;left:31%;font-size:13px}.studio-note svg{left:-26px;top:17px;width:41px;height:28px}
 .hero-bottom{padding-block:16px;font-size:8px;gap:10px}.hero-bottom>span:nth-child(2){display:none}.hero-bottom a span{margin-left:5px}.status-dot{width:5px;height:5px;margin-right:5px}
 .work-section{padding-top:62px;padding-bottom:65px}.section-heading{display:block}.section-heading .eyebrow{margin-bottom:20px}.section-heading>p{margin-top:20px;font-size:12px}.section-heading>p br{display:none}h2{font-size:39px}
 .work-toolbar{margin:26px 0 26px;display:block}.filters{gap:6px}.filter{font-size:10px;padding:8px 11px}.work-count{display:block;margin-top:14px;font-size:9px}
 .featured-grid{grid-template-columns:1fr;gap:33px}.project-card:nth-child(even){margin-top:0}.project-visual{height:300px}.project-type{font-size:8px;left:20px;top:21px}.project-info{margin-top:16px}.project-info h3{font-size:23px}.project-detail{margin-top:10px}.visual-caption{font-size:15px;left:20px}
 .more-heading{margin-top:42px}.more-grid{grid-template-columns:1fr 1fr;gap:27px 14px}.small-image{height:166px;padding:10px}.small-info h3{font-size:14px;line-height:1.3}.small-info>span{font-size:10px}.small-image .view-circle{width:27px;height:27px;font-size:18px;bottom:9px;right:9px}
 .approach-section{padding:62px 0 25px}.approach-layout{grid-template-columns:1fr;gap:36px}.approach-intro{position:relative;top:auto}.approach-intro h2{font-size:43px}.approach-intro>p:not(.eyebrow){font-size:13px}.thinking-flower{position:absolute;right:12px;bottom:-5px;font-size:70px;width:60px;margin:0}.approach-item{padding:24px 0 30px;gap:19px}.approach-item h3{font-size:23px;max-width:20ch}.approach-item p{font-size:13px}
 .about-preview{grid-template-columns:1fr;gap:52px;padding-block:67px}.portrait-composition{max-width:285px}.portrait{height:325px}.portrait-note{right:-7px;font-size:16px}.portrait-star{font-size:63px;left:-14px}.about-copy h2{font-size:57px}.about-copy>p:not(.eyebrow){font-size:14px;max-width:none}
 .contact-section{padding:30px 0}.contact-top .eyebrow{font-size:9px}.contact-top>span:last-child{font-size:8px}.contact-section h2{font-size:clamp(49px,10.7vw,74px);margin:40px 0}.contact-section h2>span{font-size:58px;right:0;top:0}.contact-bottom{display:block;padding-top:20px}.email-link{font-size:19px}.contact-bottom>div{margin-top:22px;font-size:12px}
 .site-footer{gap:15px;flex-wrap:wrap;padding-block:24px}.site-footer .wordmark{font-size:31px}.site-footer>span{font-size:9px}.motion-toggle{font-size:9px;padding:7px 9px}.back-top{display:none}
 .about-hero{padding-block:48px 66px}.about-hero-grid{grid-template-columns:1fr;gap:50px}.about-hero h1{font-size:65px}.about-hero .intro{font-size:18px}.about-hero .portrait-composition{margin:auto;width:90%}.about-story{padding-block:45px 55px;grid-template-columns:1fr;gap:30px}.about-story h2{font-size:39px}.bio-copy p{font-size:14px}.background-section{padding:48px 0}.background-grid{grid-template-columns:1fr;gap:40px}.background-grid h2{font-size:36px}.personal-note p{font-size:20px}
}
@media(max-width:370px){.hero h1{font-size:41px}.hero-spark{right:-12px;width:18px}.hello{font-size:9px}.float-digital{left:23%;width:163px}.float-object{width:87px}.float-brand{width:104px}.project-visual{height:265px}.small-image{height:145px}.contact-section h2{font-size:46px}.contact-section h2>span{font-size:40px}.site-footer .wordmark{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-ready{opacity:1;transform:none}[data-parallax]{--parallax-y:0px!important}[data-image-drift]{--image-y:0px!important}.thinking-flower{--flower-turn:0deg!important}}