.wp-site-blocks{padding:0}.wp-site-blocks>*,.storylev-main,.entry-content{margin-block-start:0!important}.entry-content>*{max-width:none!important;margin-left:0!important;margin-right:0!important}.storylev-section{margin:0}.admin-bar .story-intro{top:var(--wp-admin--admin-bar--height,32px)}
.live-hero-shell .hero-copy>p:not(.eyebrow){font-size:15px;max-width:450px;width:90%;line-height:1.6}
@media(max-width:760px){.live-hero-shell .hero-copy>p:not(.eyebrow){display:block;position:absolute;top:19%;left:6%;right:6%;width:auto;max-width:none;text-align:left;font-size:12px;line-height:1.45;color:#626772}.live-hero-shell .scene-area{top:29%}.live-hero-shell .hero-copy h1 span{font-size:clamp(29px,7.8vw,48px)!important}.live-hero-shell .experience{min-height:800px}.live-hero-shell .experience-stage{min-height:800px}}
.storylev-form{display:grid;gap:22px}.storylev-form label{display:grid;gap:10px;font-size:13px}.storylev-form input,.storylev-form select,.storylev-form textarea{width:100%;font:inherit;font-size:16px;color:#171b24;background:transparent;padding:12px 0;border:0;border-bottom:1px solid #171b2450;border-radius:0}.storylev-form textarea{resize:vertical}.storylev-form .dark-button{justify-self:start}.storylev-form .form-note{font-size:12px;color:#626772}.storylev-trap{position:absolute;left:-9999px}.storylev-status{margin-bottom:24px;padding:20px;background:#315bff12;border:1px solid #315bff45;font-size:15px;line-height:1.5}.storylev-brochure{padding:35px 5%;background:#f7f5ef;color:#171b24}.storylev-brochure #brochure-main{max-width:1440px;margin:0 auto}.storylev-brochure .header-actions{display:none}.storylev-brochure img{max-width:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.story-intro,.intro-symbol{display:none!important}.js-motion .reveal{opacity:1!important;transform:none!important}}
@media(max-width:760px){.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){top:24%;bottom:auto;left:6%;right:6%;margin:0;max-width:none;width:88%}.live-hero-shell .experience-stage .scene-area{top:33%!important;bottom:24%!important}}
@media(min-width:761px) and (max-width:1050px){.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){display:block;position:absolute;top:25%;left:6%;right:6%;margin:0;width:88%;max-width:650px;font-size:14px;text-align:left}.live-hero-shell .experience-stage .scene-area{top:35%!important;bottom:24%!important}}
@media(min-width:550px) and (max-width:760px){.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){top:25%;}.live-hero-shell .experience-stage .scene-area{top:34%!important;bottom:26%!important}.live-hero-shell .scene-area .reel-card.film-preview{max-height:100%}}
.storylev-brochure.is-project-view .project-view{display:block}.storylev-brochure.is-project-view .overview,.storylev-brochure.is-project-view .detail-section,.storylev-brochure.is-project-view .compare,.storylev-brochure.is-project-view .common,.storylev-brochure.is-project-view .bottom-sections{display:none}

/* Keep the whole template part sticky; a sticky header inside a header-height wrapper cannot follow the page. */
.wp-site-blocks > .storylev-header-shell{position:sticky;top:0;z-index:100;overflow:visible}
.storylev-header-shell .site-header{position:relative}
html{scroll-padding-top:105px}
@media(max-width:650px){html{scroll-padding-top:92px}}

/* Founder experience: a quiet symbol row between the hero and selected work. */
.brand-experience{padding:28px 6% 30px;background:#f7f5ef;color:#171b24;border:0}
.brand-section-heading{justify-content:center;text-align:center}.brand-section-heading h2{font-size:12px;letter-spacing:.025em;font-weight:400;color:#626772}.brand-section-heading p:empty{display:none}
.brand-logo-grid{display:flex;justify-content:center;gap:72px;margin:18px auto 0;max-width:440px}
.brand-signature,.brand-signature:first-child{padding:8px 18px;min-height:78px;border:0!important;border-radius:0;background:transparent}
.brand-signature:hover{background:transparent}.brand-signature:hover .brand-symbol{opacity:.7}
.brand-symbol{display:block;position:relative;width:66px;height:66px;transition:opacity .25s}
.brand-signature .brand-symbol img,.brand-signature:first-child .brand-symbol img{display:block;width:66px;height:66px;max-width:none;max-height:none;object-fit:contain;filter:brightness(0);opacity:.85}
.brand-symbol-kra{width:45px;overflow:hidden}
.brand-signature:first-child .brand-symbol-kra img,.brand-signature .brand-symbol-kra img{width:524px;height:66px;max-width:none;object-fit:fill;filter:none;opacity:1}
@media(max-width:650px){.brand-experience{padding:24px 6% 25px}.brand-section-heading h2{font-size:11px}.brand-logo-grid{gap:48px;margin-top:12px}.brand-signature{min-height:70px;padding:6px 16px}.brand-symbol{transform:scale(.9)}}

.website-work{border-top:1px solid #171b2418}.website-work-heading{display:grid;grid-template-columns:1fr 3fr;gap:35px;margin-bottom:42px}.website-work-heading h2{font-size:clamp(34px,4vw,64px);max-width:850px}.website-work-heading>div>p{margin-top:20px;font-size:14px;color:#626772}.website-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.website-work-card{min-width:0}.website-work-card>a{display:block;border:1px solid #171b2420;border-radius:10px;overflow:hidden;background:#fff}.website-browser-bar{height:32px;background:#eceae4;display:flex;align-items:center;justify-content:center;position:relative;font-size:10px;color:#626772}.browser-lights{position:absolute;left:12px;display:flex;gap:4px}.browser-lights i{width:5px;height:5px;border-radius:50%;background:#a5a5a5}.website-screen{aspect-ratio:16/9;overflow:hidden}.website-screen img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.website-work-card>a:hover img{transform:scale(1.025)}.website-work-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-top:20px}.website-work-caption h3{font-size:19px;font-weight:500;letter-spacing:-.03em}.website-work-caption p{font-size:11px;color:#626772;margin-top:7px}.website-work-caption .text-link{font-size:11px;white-space:nowrap}.website-work-note{font-size:11px;color:#626772;margin-top:28px}
@media(max-width:760px){.website-work-heading{grid-template-columns:1fr;gap:18px;margin-bottom:28px}.website-work-grid{grid-template-columns:1fr;gap:36px}.website-work-heading h2{font-size:38px}.website-work-caption h3{font-size:18px}}

/* Responsive hero: keep heading and introduction in normal flow. */
@media(max-width:1100px){
.live-hero-shell .experience-stage .hero-copy{inset:24px 6% auto;width:88%;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.live-hero-shell .experience-stage .hero-copy>.eyebrow,.live-hero-shell .experience-stage .hero-copy h1,.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow),.live-hero-shell .experience-stage .hero-actions{position:static!important;inset:auto!important;width:100%;max-width:650px;margin:0!important;transform:none}
.live-hero-shell .experience-stage .hero-copy h1 span{font-size:clamp(29px,5vw,52px)!important;line-height:1.08}
.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){display:block;font-size:14px;line-height:1.6}
.live-hero-shell .experience-stage .hero-actions{display:flex;flex-wrap:wrap;width:auto;gap:18px}
.live-hero-shell .experience-stage .scene-area{top:45%!important;bottom:15%!important}
.live-hero-shell .experience-stage .stage-bottom{bottom:2%;display:block}
.live-hero-shell .experience-stage .chapter{display:none}
.live-hero-shell .experience-stage .scene-hint{bottom:12%}
.live-hero-shell .experience,.live-hero-shell .experience .experience-stage{height:820px;min-height:820px}
}
@media(max-width:480px){.live-hero-shell .experience-stage .hero-copy{gap:12px}.live-hero-shell .experience-stage .hero-copy h1 span{font-size:clamp(28px,8vw,38px)!important}.live-hero-shell .experience-stage .scene-area{top:43%!important}.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){font-size:13px}}

/* Compact mobile hero: content and artwork follow one another without viewport gaps. */
@media(max-width:760px){
.live-hero-shell .experience,.live-hero-shell .experience .experience-stage{height:auto;min-height:0}
.live-hero-shell .experience .experience-stage{padding:24px 6% 22px}
.live-hero-shell .experience-stage .hero-copy{position:relative;inset:auto!important;width:100%;height:auto}
.live-hero-shell .experience-stage .scene-area{position:relative;inset:auto!important;width:100%;height:clamp(300px,88vw,400px);margin:24px 0 0;animation:none}
.live-hero-shell .experience-stage .scene-hint{position:relative;inset:auto;margin:12px 0 0;text-align:right}
.live-hero-shell .experience-stage .stage-bottom{position:relative;inset:auto;margin:16px 0 0;width:100%}
.live-hero-shell .scene-selector{gap:7px}
.live-hero-shell .scene-selector strong{font-size:12px}
}

/* Consistent, compact homepage scale across desktop and mobile. */
body:has(.restored-hero) main .section{padding:64px 6%}
body:has(.restored-hero) main .section-heading{margin-bottom:28px}
body:has(.restored-hero) main .section-heading h2,body:has(.restored-hero) main .website-work-heading h2{font-size:clamp(32px,3.2vw,46px);line-height:1.08;margin-top:18px;margin-bottom:18px}
body:has(.restored-hero) .project-image{aspect-ratio:16/10;max-height:340px}
body:has(.restored-hero) .project:nth-child(2){margin-top:0}
body:has(.restored-hero) .project-caption{padding:14px 0}
body:has(.restored-hero) .projects{gap:28px}
body:has(.restored-hero) .manifesto h2{font-size:clamp(32px,3.7vw,54px);line-height:1.1}
body:has(.restored-hero) .manifesto-bottom{margin-top:26px}
body:has(.restored-hero) .service-row summary{font-size:24px;line-height:1.25;padding:17px 0}
body:has(.restored-hero) .service-row summary i{font-size:22px}
body:has(.restored-hero) .approach h2{font-size:clamp(32px,3.2vw,46px);line-height:1.1;margin:18px 0}
body:has(.restored-hero) .steps article{padding:16px 0}
body:has(.restored-hero) .plans-strip{padding:44px 6%;gap:24px}
body:has(.restored-hero) .plans-strip h2,body:has(.restored-hero) footer h2{font-size:clamp(32px,3.4vw,48px);line-height:1.08}
body:has(.restored-hero) footer{padding:48px 6% 22px}
body:has(.restored-hero) .footer-grid{margin:28px 0;padding-top:22px}
@media(min-width:1101px){.live-hero-shell .experience,.live-hero-shell .experience .experience-stage{height:clamp(580px,78svh,700px);min-height:580px}}
@media(min-width:761px) and (max-width:1100px){
.live-hero-shell .experience,.live-hero-shell .experience .experience-stage{height:620px;min-height:620px}
.live-hero-shell .experience-stage .hero-copy{position:absolute;inset:70px auto auto 5%;width:40%;gap:18px}
.live-hero-shell .experience-stage .hero-copy h1 span{font-size:clamp(32px,4.4vw,48px)!important}
.live-hero-shell .experience-stage .scene-area{inset:12% 1% 20% 43%!important}
.live-hero-shell .experience-stage .stage-bottom{bottom:4%}
.live-hero-shell .experience-stage .scene-hint{bottom:16%}
}
@media(max-width:760px){
body:has(.restored-hero) main .section{padding:38px 6%}
body:has(.restored-hero) main .section-heading h2,body:has(.restored-hero) main .website-work-heading h2,body:has(.restored-hero) .manifesto h2,body:has(.restored-hero) .approach h2{font-size:30px;line-height:1.12;margin-top:16px;margin-bottom:16px}
body:has(.restored-hero) .section-heading>p:last-child{font-size:13px;max-width:none}
body:has(.restored-hero) .project-image{aspect-ratio:16/10;max-height:245px}
body:has(.restored-hero) .projects{gap:22px}
body:has(.restored-hero) .website-work-grid{gap:24px}
body:has(.restored-hero) .website-work-caption{padding-top:12px;gap:10px}
body:has(.restored-hero) .website-work-caption h3{font-size:17px}
body:has(.restored-hero) .website-work-caption p{font-size:10px}
body:has(.restored-hero) .website-work-heading{gap:12px;margin-bottom:22px}
body:has(.restored-hero) .website-work-heading>div>p{font-size:13px;margin-top:12px}
body:has(.restored-hero) .manifesto>.eyebrow{margin-bottom:20px}
body:has(.restored-hero) .manifesto-bottom{gap:18px;margin-top:22px}
body:has(.restored-hero) .manifesto-bottom p{font-size:13px}
body:has(.restored-hero) .service-row summary{font-size:19px;padding:14px 0;min-height:48px}
body:has(.restored-hero) .approach{gap:22px}
body:has(.restored-hero) .steps article{padding:14px 0}
body:has(.restored-hero) .steps p{font-size:13px}
body:has(.restored-hero) .plans-strip{padding:36px 6%;gap:20px}
body:has(.restored-hero) .plans-strip h2,body:has(.restored-hero) footer h2{font-size:32px;line-height:1.1}
body:has(.restored-hero) footer{padding:36px 6% 22px}
body:has(.restored-hero) .footer-top{gap:20px}
body:has(.restored-hero) .footer-grid{gap:20px;margin:24px 0;padding-top:22px}
.live-hero-shell .experience-stage .scene-area{height:clamp(280px,80vw,340px);margin-top:18px}
}

/* Start the desktop introduction directly beneath the header. */
@media(min-width:1101px){
.live-hero-shell .experience-stage .hero-copy{inset:32px auto auto 5%;height:auto;justify-content:flex-start}
.live-hero-shell .experience-stage .hero-copy>.eyebrow{margin-bottom:22px}
.live-hero-shell .experience-stage .hero-copy h1 span{font-size:clamp(44px,5.2vw,86px)!important}
.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){margin-top:20px}
.live-hero-shell .experience-stage .hero-actions{margin-top:22px}
.live-hero-shell .experience,.live-hero-shell .experience .experience-stage{height:clamp(560px,70svh,650px);min-height:560px}
}

/* Gentle readability increase for supporting copy and small labels. */
.mini{font-size:12px}
main .eyebrow,.plans-strip>.eyebrow,footer .eyebrow{font-size:11px}
body:has(.restored-hero) main .section-heading>p:last-child,body:has(.restored-hero) main .website-work-heading>div>p,body:has(.restored-hero) .steps p{font-size:15px;line-height:1.6}
body:has(.restored-hero) .project-caption>span{font-size:12px;line-height:1.5}
body:has(.restored-hero) .section-foot p,body:has(.restored-hero) .website-work-note{font-size:12px;line-height:1.6}
body:has(.restored-hero) .website-work-caption p{font-size:12px;line-height:1.5}
body:has(.restored-hero) .website-work-caption .text-link{font-size:12px}
body:has(.restored-hero) .fine{font-size:11px;line-height:1.6}
.live-hero-shell .experience-stage .hero-copy>.eyebrow{font-size:9px}
.live-hero-shell .experience-stage .hero-actions .pill,.live-hero-shell .experience-stage .hero-actions .line-link{font-size:12px}
.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.6}
@media(max-width:760px){
.mini{font-size:10px}
body:has(.restored-hero) main .section-heading>p:last-child,body:has(.restored-hero) main .website-work-heading>div>p,body:has(.restored-hero) .steps p,body:has(.restored-hero) .manifesto-bottom p{font-size:14px;line-height:1.6}
body:has(.restored-hero) .project-caption>span,body:has(.restored-hero) .section-foot p,body:has(.restored-hero) .website-work-note{font-size:11px}
body:has(.restored-hero) .website-work-caption p{font-size:11px}
.live-hero-shell .experience-stage .hero-copy>p:not(.eyebrow){font-size:14px;line-height:1.6}
.live-hero-shell .experience-stage .hero-actions .pill,.live-hero-shell .experience-stage .hero-actions .line-link{font-size:11px}
.live-hero-shell .experience-stage .hero-copy>.eyebrow{font-size:8px}
}