@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#151a18;--ink:#f0eee5;--gold:#ddc58d;--muted:#a8afa6;--line:#ffffff20}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--gold);outline-offset:7px}::selection{background:var(--gold);color:var(--bg)}.skip{position:fixed;top:-100px;background:var(--gold);color:var(--bg);z-index:30;padding:15px}.skip:focus{top:10px}.navigation{height:108px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;background:#151a18ed;border-bottom:1px solid var(--line);backdrop-filter:blur(18px);transition:height .3s}.scrolled .navigation{height:78px}.brand{display:flex;gap:13px;align-items:center}.brand img{object-fit:contain}.brand>span{position:relative;font:700 11px/1.4 Manrope,sans-serif;letter-spacing:.13em}.brand-dot{position:absolute;top:-3px;right:-14px;font-size:9px;color:var(--gold)}nav{display:flex;align-items:center;gap:36px;font-size:12px}nav a:hover,.text-link:hover{color:var(--gold)}.nav-contact{border:1px solid #ddc58d66;border-radius:30px;padding:11px 22px}.nav-contact span{margin-left:25px;color:var(--gold)}.hero,.section{padding:42px 7% 0}.hero-top,.hero-bottom{display:flex;justify-content:space-between}.eyebrow,.location,.hero-bottom,.coordinate,.atelier-number{font-size:9px;letter-spacing:.17em;font-weight:600}.eyebrow{color:var(--gold)}.location{color:var(--muted)}.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;min-height:620px;gap:3%}h1,h2,h3,p{margin-top:0}h1{font:500 clamp(52px,5.5vw,88px)/1.08 Manrope,sans-serif;letter-spacing:-.065em;margin-bottom:30px}em{font-family:Georgia,serif;font-weight:400;color:var(--gold)}.hero-copy>p{max-width:370px;color:var(--muted);font-size:15px;line-height:1.9}.round-link{display:flex;align-items:center;gap:15px;margin-top:30px;font-size:11px}.arrow-circle{display:grid;place-items:center;border:1px solid #ddc58d66;border-radius:50%;width:45px;height:45px;font-size:22px;color:var(--gold);transition:transform .3s}.round-link:hover .arrow-circle{transform:rotate(45deg);background:var(--gold);color:var(--bg)}.atelier{height:510px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse,#ddc58d0b,transparent 67%);perspective:800px}.hero-logo{width:58%;height:auto;z-index:2;filter:drop-shadow(0 25px 30px #0005);transform:rotate(-10deg);animation:float 8s ease-in-out infinite}.orbit{position:absolute;width:90%;aspect-ratio:1;border:1px solid #ddc58d25;border-radius:50%;transform:rotate(-30deg) scaleY(.68)}.orbit-two{transform:rotate(55deg) scaleY(.8);width:78%;border-style:dashed;opacity:.5}.coordinate{position:absolute;top:12px;left:20px;color:#7e887c;font-size:8px}.floating-label{position:absolute;z-index:3;border:1px solid #ffffff22;background:#232a25;box-shadow:0 15px 35px #0003;border-radius:5px;font-size:10px;padding:13px 18px}.label-design{right:-5px;top:100px;transform:rotate(7deg)}.label-design span{font-size:22px;color:var(--gold);margin-left:16px}.label-code{bottom:105px;left:-10px;transform:rotate(-6deg)}.label-code b{color:var(--gold);margin-right:15px;font-size:17px}.swatches{position:absolute;bottom:35px;right:15px;display:flex;align-items:center}.swatches i{height:25px;width:25px;border-radius:50%;background:var(--gold);border:3px solid var(--bg);margin-left:-5px}.swatches i:nth-child(2){background:#75846e}.swatches i:nth-child(3){background:var(--ink)}.swatches span{font-size:9px;margin-left:10px;color:var(--muted)}.atelier-number{position:absolute;bottom:35px;left:20px;color:var(--muted)}.hero-bottom{padding:30px 0;border-top:1px solid var(--line);color:#879184;font-size:8px}.ticker{overflow:hidden;background:var(--gold);color:var(--bg);padding:19px 0;transform:rotate(-1.5deg);margin:38px 0 12px}.ticker div{white-space:nowrap;font:600 17px Manrope,sans-serif;letter-spacing:.08em;animation:marquee 35s linear infinite;width:max-content}.ticker span{padding:0 45px;font-size:23px}.section{padding-top:110px;padding-bottom:30px}.section-heading{display:grid;grid-template-columns:1fr 2fr 1.1fr;gap:30px;align-items:start;margin-bottom:70px}h2{font:500 clamp(36px,4vw,60px)/1.14 Manrope,sans-serif;letter-spacing:-.05em}.section-heading p{color:var(--muted);font-size:13px;padding-top:10px}.service{display:grid;grid-template-columns:.25fr 1.4fr 1.3fr;gap:45px;border-top:1px solid var(--line);padding:60px 0;align-items:center}.service-number{align-self:start;color:var(--gold);font:12px Manrope}.service h3{font:500 36px/1.15 Manrope,sans-serif;letter-spacing:-.045em;position:relative}.service h3>span{font-size:26px;color:var(--gold);position:absolute;right:5px;top:0}.service p{color:var(--muted);max-width:400px;font-size:13px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.tags span{font-size:9px;border:1px solid var(--line);padding:5px 11px;border-radius:20px;color:#c1c7bc}.code-art{background:#202722;border:1px solid #ffffff15;border-radius:8px;transform:rotate(2deg);padding:17px 22px;transition:transform .5s}.service:hover .code-art{transform:rotate(0)}.window-bar{display:flex;gap:5px;align-items:center;font-size:8px;color:#8c978a}.window-bar i{height:5px;width:5px;border-radius:50%;background:#6a7666}.window-bar span{margin-left:auto}pre{font-size:clamp(9px,1vw,13px);line-height:2;color:#a7b0a2;padding:12px 0}pre span{color:var(--gold)}pre b{color:var(--ink);font-weight:400}.code-preview{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:15px;font:18px/1.3 Georgia}.code-preview b{background:var(--gold);color:var(--bg);border-radius:50%;padding:9px 13px;font:18px sans-serif}.design-art{background:var(--gold);color:#232a24;padding:25px 30px;transform:rotate(-2deg);transition:transform .5s}.service:hover .design-art{transform:rotate(0)}.design-art>span{font-size:8px;letter-spacing:.18em}.design-art>b{display:flex;align-items:center;justify-content:space-between;font:110px/1.5 Georgia;letter-spacing:-.1em}.design-art>b span{font:85px Georgia}.design-art>div{border-top:1px solid #232a2440;padding-top:12px;font:italic 13px Georgia}.design-art>div span{float:right;font:7px sans-serif;letter-spacing:.1em}.text-link{display:inline-block;border-bottom:1px solid var(--gold);padding:9px 0;font-size:12px}.photo-art{min-height:290px;background:radial-gradient(ellipse at 50% 50%,#596552,#252f29 65%);position:relative;display:grid;place-items:center;overflow:hidden}.photo-art img{transition:transform .6s}.photo-art:hover img{transform:scale(1.1)}.viewfinder{position:absolute;inset:28px;border:1px solid #ddc58d55}.viewfinder:before,.viewfinder:after{content:'';position:absolute;background:#ddc58d33;left:50%;top:0;height:100%;width:1px}.viewfinder:after{transform:rotate(90deg)}.photo-art>span{position:absolute;bottom:14px;left:28px;right:28px;font-size:8px;letter-spacing:.14em}.photo-art b{float:right}.cms-section{background:#e6e3d8;color:var(--bg);margin-top:55px;padding-bottom:100px}.cms-section>.eyebrow{color:#626c5c}.cms-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;margin-top:55px}.cms-grid em{color:#7f714b}.cms-grid>div>p{color:#5d665a;font-size:14px}.cms-grid .large-copy{font-size:23px;line-height:1.5;color:var(--bg)}.steps{margin-top:40px}.steps>div{border-top:1px solid #151a1825;padding:17px 0 10px 40px;position:relative}.steps span{position:absolute;left:0;top:20px;font-size:10px;color:#7f714b}.steps h4{margin:0 0 5px;font-size:14px}.steps p{font-size:12px;color:#5d665a}.about{display:grid;grid-template-columns:.6fr 2fr 1fr;gap:6%;padding-bottom:110px}.about p{color:var(--muted);font-size:14px;max-width:480px}.signature{font:italic 27px Georgia;color:var(--gold);display:block;margin-top:30px}.year-art{align-self:center;font:500 110px/.9 Manrope;letter-spacing:-.08em;color:#69755f}.year-art>span{display:block;font:7px/1.8 Manrope;letter-spacing:.1em;margin-top:20px}.contact{text-align:center;border-top:1px solid var(--line);background:radial-gradient(ellipse at bottom,#ddc58d0d,transparent 65%);padding-bottom:100px}.contact h2{margin:35px 0}.contact-link{display:inline-flex;align-items:center;gap:50px;border-bottom:1px solid var(--gold);padding:15px 0;color:var(--gold);font-size:20px}.contact-link span{font-size:32px;transition:transform .3s}.contact-link:hover span{transform:translate(5px,-5px)}.email{display:block;color:var(--muted);font-size:12px;margin-top:24px}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);padding:28px 5.5%;color:var(--muted);font-size:9px}footer .brand>span{font-size:8px}.reveal{transition:opacity .8s,translate .8s}.reveal.pending{opacity:0;translate:0 25px}@keyframes float{50%{transform:translateY(-14px) rotate(-5deg)}}@keyframes marquee{to{transform:translateX(-25%)}}@media(min-width:1600px){.hero,.section{padding-left:max(7%,calc((100vw - 1400px)/2));padding-right:max(7%,calc((100vw - 1400px)/2))}}@media(max-width:800px){.navigation{height:85px;padding:0 6%}nav{gap:18px}nav>a:not(.nav-contact){display:none}.nav-contact{padding:9px 14px}.hero{padding:28px 6% 0}.hero-top .location{display:none}.hero-grid{grid-template-columns:1fr;gap:10px;min-height:auto;padding-top:48px}h1{font-size:clamp(48px,10vw,76px)}.hero-copy>p{font-size:14px}.atelier{height:390px;max-width:460px;width:100%;margin:20px auto}.hero-logo{width:52%}.label-design{right:0;top:65px}.label-code{left:0;bottom:80px}.hero-bottom span:first-child{display:none}.hero-bottom{justify-content:flex-end}.section{padding:75px 6% 20px}.section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:35px}.section-heading h2{margin:0}.section-heading p{max-width:300px}.service{grid-template-columns:25px 1fr;gap:15px;padding:35px 0}.service>div:last-child,.service>.photo-art{grid-column:2;margin-top:20px}.service h3{font-size:32px}.service p{max-width:none}.code-art pre{font-size:12px}.design-art>b{font-size:100px}.cms-section{padding-bottom:65px}.cms-grid{grid-template-columns:1fr;gap:15px;margin-top:30px}.cms-grid h2{font-size:43px}.about{grid-template-columns:1fr;gap:25px;padding-bottom:65px}.year-art{display:none}.contact{padding-bottom:75px}.contact h2{font-size:39px}.contact-link{font-size:17px;gap:30px}footer{flex-wrap:wrap;padding:25px 6%;gap:20px}footer .brand{width:100%}.hero-top .eyebrow{font-size:8px}.ticker{margin-top:15px}.floating-label{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;translate:none}}
/* The page composition follows the scroll position, in both directions. */
.navigation .brand>span{white-space:nowrap}.brand-dot{right:-14px}
.hero{--hero-scroll:0;overflow:clip}.hero-copy{position:relative;z-index:4}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .hero-logo{animation:none;transform:translate3d(0,calc(var(--hero-scroll)*-100px),0) rotate(calc(-10deg + var(--hero-scroll)*28deg)) scale(calc(1 - var(--hero-scroll)*.18));will-change:transform}
.scroll-motion .orbit-one{transform:rotate(calc(-30deg + var(--hero-scroll)*95deg)) scaleY(.68)}
.scroll-motion .orbit-two{transform:rotate(calc(55deg - var(--hero-scroll)*120deg)) scaleY(.8)}
.scroll-motion .label-design{transform:translate3d(calc(var(--hero-scroll)*35px),calc(var(--hero-scroll)*-65px),0) rotate(calc(7deg + var(--hero-scroll)*12deg))}
.scroll-motion .label-code{transform:translate3d(calc(var(--hero-scroll)*-25px),calc(var(--hero-scroll)*35px),0) rotate(calc(-6deg - var(--hero-scroll)*8deg))}
.scroll-motion .hero-copy h1{transform:translate3d(0,calc(var(--hero-scroll)*-35px),0)}
.scroll-motion .service{--entrance:1;--travel:.5}
.scroll-motion .service>div:nth-child(2){opacity:calc(.25 + var(--entrance)*.75);transform:translate3d(0,calc((1 - var(--entrance))*65px),0)}
.scroll-motion .code-art{transform:perspective(900px) translate3d(0,calc((.5 - var(--travel))*70px),0) rotateY(calc((.5 - var(--travel))*14deg)) rotate(calc((.5 - var(--travel))*8deg));transition:none}
.scroll-motion .design-art{transform:translate3d(0,calc((.5 - var(--travel))*90px),0) rotate(calc((var(--travel) - .5)*12deg));transition:none}
.scroll-motion .photo-art img{transform:scale(calc(1 + var(--travel)*.22)) rotate(calc((var(--travel) - .5)*8deg));transition:none}
.scroll-motion .cms-grid>h2{transform:translate3d(0,calc((.5 - var(--travel,.5))*65px),0)}
.scroll-motion .year-art{transform:translate3d(0,calc((.5 - var(--travel,.5))*110px),0)}
.scroll-motion .contact h2 em{display:inline-block;transform:translate3d(calc((1 - var(--entrance,1))*-45px),0,0)}
}
@media(max-width:800px){.navigation .brand>span{font-size:9px;letter-spacing:.06em}.navigation .brand{gap:8px}.navigation .brand img{width:32px;height:34px}.navigation .brand-dot{display:none}.nav-contact span{margin-left:8px}.service{overflow:clip}.hero{overflow:clip}}
@media(prefers-reduced-motion:reduce){.scroll-motion .reveal.pending{opacity:1;translate:none}}
/* A clean typographic accent, matching the main headings. */
h1 em,h2 em{font-family:'Caveat',cursive;font-style:normal;font-weight:500;letter-spacing:-.025em}
/* Floating navigation, inspired by the reference and adapted to this studio. */
.navigation{top:24px;margin:24px 4% 0;padding:10px 12px 10px 20px;height:78px;border:0;border-radius:8px 44px 44px 8px;background:#f0eee5;color:#202720;box-shadow:0 12px 40px #0002;overflow:visible}.scrolled .navigation{height:70px;top:14px}.navigation .brand{gap:12px}.navigation .brand img{width:64px;height:66px;margin-left:-39px;filter:drop-shadow(0 4px 6px #0003)}.navigation .brand>span{font-size:10px;letter-spacing:.06em}.navigation nav{gap:28px;font-size:12px}.navigation nav>a:hover,.services-toggle:hover{color:#796137}.navigation .nav-contact{background:var(--gold);color:#202720;border:0;padding:16px 25px;border-radius:30px;font-weight:700}.navigation .nav-contact span{color:inherit;margin-left:15px}.nav-services{position:relative}.services-toggle,.menu-toggle{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:12px 0}.services-toggle span{margin-left:7px}.services-menu{position:absolute;top:calc(100% + 18px);left:-25px;width:320px;padding:12px;background:#f0eee5;border-radius:12px;box-shadow:0 20px 45px #0004;border:1px solid #20272015}.services-menu a{display:block;padding:14px;border-radius:7px;font-weight:600}.services-menu a:hover{background:#ddc58d44}.services-menu small{display:block;color:#646e61;font-size:10px;font-weight:400;margin-top:4px}.menu-toggle{display:none}.hero{padding-top:55px}.navigation button:focus-visible{outline:2px solid #796137;outline-offset:5px}
@media(max-width:1000px){.navigation nav{gap:17px}.navigation .brand>span{font-size:9px}.navigation .nav-contact{padding:14px 18px}}
@media(max-width:800px){.navigation{margin:18px 6% 0;top:18px;height:66px;padding:9px 18px 9px 14px;border-radius:8px 36px 36px 8px}.scrolled .navigation{height:62px;top:12px}.navigation .brand img{width:51px;height:54px;margin-left:-28px}.navigation .brand>span{font-size:10px}.menu-toggle{display:flex;gap:12px;align-items:center;font-size:12px}.navigation nav{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;max-height:calc(100svh - 120px);overflow:auto;background:#f0eee5;border-radius:16px;padding:18px;align-items:stretch;flex-direction:column;gap:4px;box-shadow:0 20px 40px #0004}.navigation.menu-open nav{display:flex}.navigation nav>a:not(.nav-contact){display:block;padding:12px}.navigation .nav-contact{text-align:center;margin-top:8px}.nav-services{padding:0 12px}.services-toggle{width:100%;text-align:left}.services-toggle span{float:right}.services-menu{position:static;width:auto;box-shadow:none;border:0;padding:0 0 8px;background:transparent}.services-menu a{padding:12px}.hero{padding-top:35px}}
/* Cut the leading edge around the logo rather than placing it over a rectangle. */
.navigation{background:transparent;backdrop-filter:none;box-shadow:none;isolation:isolate;border-radius:0}
.navigation::before{content:'';position:absolute;inset:0;z-index:-1;background:#f0eee5;clip-path:polygon(30px 0,calc(100% - 39px) 0,100% 0,100% 100%,30px 100%,65px 50%);border-radius:0 44px 44px 0;filter:none}
.navigation .brand{gap:24px}.navigation .brand img{position:relative;width:82px;height:84px;margin-left:-43px;filter:drop-shadow(0 5px 8px #0003)}
.navigation .brand>span{margin-left:4px}
@media(max-width:800px){.navigation::before{clip-path:polygon(25px 0,100% 0,100% 100%,25px 100%,54px 50%);border-radius:0 36px 36px 0}.navigation .brand{gap:18px}.navigation .brand img{width:68px;height:70px;margin-left:-34px}.navigation .brand>span{margin-left:3px}}
/* Follow the shield silhouette with a clear gap along its right edge. */
.navigation::before{clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%,28px 94%,39px 82%,45px 64%,52px 30%,51px 20%,46px 12%,35px 6%);border-radius:0 44px 44px 0}
.navigation .brand{gap:29px}
@media(max-width:800px){.navigation::before{clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,23px 94%,32px 82%,38px 64%,44px 30%,43px 20%,39px 12%,29px 6%);border-radius:0 36px 36px 0}.navigation .brand{gap:22px}}
/* Subtract the actual logo silhouette from the navigation background. */
.navigation::before{clip-path:none;border-radius:0 44px 44px 0;}
.navigation .brand img{width:62px;height:64px;margin-left:-33px;filter:none}.navigation .brand{gap:29px}
@media(max-width:800px){.navigation::before{clip-path:none;border-radius:0 36px 36px 0;}.navigation .brand img{width:52px;height:54px;margin-left:-27px}.navigation .brand{gap:24px}}
/* Fill the silhouette cutout more closely while retaining a narrow gap. */
.navigation .brand img{width:72px;height:74px;margin-left:-38px}.navigation .brand{gap:24px}
@media(max-width:800px){.navigation .brand img{width:62px;height:64px;margin-left:-32px}.navigation .brand{gap:19px}}
/* Let the logo project above and below the bar; open the cutout at the left. */
.navigation::before{}
.navigation .brand img{width:92px;height:94px;margin-left:-48px;max-width:none}.navigation .brand{gap:25px}
@media(max-width:800px){.navigation::before{}.navigation .brand img{width:78px;height:80px;margin-left:-40px}.navigation .brand{gap:20px}}
/* Compact the header and its logo cutout together. */
.navigation{height:66px;padding:8px 10px 8px 17px}.scrolled .navigation{height:60px}.navigation::before{}.navigation .brand img{width:78px;height:80px;margin-left:-41px}.navigation .brand{gap:21px}.navigation .nav-contact{padding:12px 22px}
@media(max-width:800px){.navigation{height:56px;padding:7px 15px 7px 12px}.scrolled .navigation{height:53px}.navigation::before{}.navigation .brand img{width:66px;height:68px;margin-left:-35px}.navigation .brand{gap:17px}}
/* More breathing room between the logo and the navigation surface. */
.navigation::before{}
@media(max-width:800px){.navigation::before{}}
/* Keep the entire navigation, including its projecting logo, inside the page. */
.navigation{width:86%;max-width:1400px;margin:40px auto 0;top:28px;padding-left:0}.scrolled .navigation{top:18px}.navigation .brand{position:relative;height:100%;gap:0;padding-left:93px}.navigation .brand img{position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:78px;height:80px;margin:0}.navigation .brand>span{margin:0}.navigation::before{}
@media(max-width:1000px) and (min-width:801px){.navigation{width:90%}.navigation nav{gap:14px}.navigation .brand{padding-left:85px}}
@media(max-width:800px){.navigation{width:88%;margin:30px auto 0;top:24px;padding-left:0;padding-right:15px}.scrolled .navigation{top:20px}.navigation .brand{padding-left:84px}.navigation .brand img{left:0;width:66px;height:68px;margin:0}.navigation::before{}.navigation .brand>span{font-size:9px;letter-spacing:.015em}.menu-toggle{font-size:11px;gap:10px}.navigation nav{left:0;right:0}}
@media(max-width:370px){.navigation .brand{padding-left:77px}.navigation .brand>span{font-size:8px}.menu-toggle{font-size:0}.menu-toggle span{font-size:18px}}
/* Mobile navigation becomes a full-screen editorial menu. */
@media(max-width:800px){
body.mobile-menu-open{overflow:hidden}
body.mobile-menu-open::after{content:'';position:fixed;inset:0;background:#f8f7f2;z-index:19;animation:menu-surface-in .3s ease both}
.navigation.menu-open{position:fixed;top:24px;left:6%;margin:0;z-index:21}
.navigation.menu-open::before{background:#eae7de}
.navigation .menu-toggle{min-width:44px;min-height:44px;justify-content:center}
.navigation.menu-open .menu-toggle{font-size:0}
.navigation.menu-open .menu-toggle span{font-size:0}
.navigation.menu-open .menu-toggle span::after{content:'×';font:30px/1 Manrope,sans-serif}
.navigation.menu-open nav{display:flex;position:fixed;inset:104px 0 0;max-height:none;overflow-y:auto;overscroll-behavior:contain;background:transparent;border-radius:0;box-shadow:none;padding:48px 8% 65px;gap:18px;isolation:isolate;align-items:stretch}
.navigation.menu-open nav::before{content:'';position:fixed;z-index:-1;width:115vw;height:115vw;right:-48vw;top:25vh;background:url('/assets/home/mark-logo.svg') center/contain no-repeat;opacity:.035;pointer-events:none;transform:rotate(-15deg)}
.navigation.menu-open nav>a:not(.nav-contact),.navigation.menu-open .services-toggle{padding:0;font:700 clamp(28px,8vw,42px)/1.35 Manrope,sans-serif;letter-spacing:-.035em;color:#202720}
.navigation.menu-open .nav-services{padding:0}
.navigation.menu-open .services-toggle{display:flex;align-items:center;justify-content:space-between;width:100%}
.navigation.menu-open .services-toggle span{display:grid;place-items:center;background:var(--gold);color:#202720;border-radius:50%;width:30px;height:30px;font:22px/1 sans-serif;float:none;margin:0}
.navigation.menu-open .services-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.navigation.menu-open .services-menu{padding:16px 0 8px 15px;background:none;border:none}
.navigation.menu-open .services-menu a{font:600 clamp(17px,4.7vw,24px)/1.45 Manrope,sans-serif;letter-spacing:-.025em;padding:9px 0;color:#202720}
.navigation.menu-open .services-menu small{display:none}
.navigation.menu-open nav .nav-contact{background:transparent;border:0;border-radius:0;color:#202720;font:700 clamp(28px,8vw,42px)/1.35 Manrope,sans-serif;letter-spacing:-.035em;text-align:left;padding:0;margin:0}
.navigation.menu-open nav .nav-contact span{display:none}
.navigation.menu-open nav a:hover,.navigation.menu-open nav a:focus-visible{color:#92743a;background:none}
.navigation.menu-open nav>a,.navigation.menu-open .nav-services{animation:menu-link-in .45s both}
.navigation.menu-open .nav-services{animation-delay:.05s}.navigation.menu-open nav>a:nth-of-type(2){animation-delay:.1s}.navigation.menu-open nav>a:nth-of-type(3){animation-delay:.15s}.navigation.menu-open nav>a:nth-of-type(4){animation-delay:.2s}
}
@keyframes menu-surface-in{from{opacity:0}to{opacity:1}}@keyframes menu-link-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){
.navigation.menu-open nav::before{content:none}
.navigation.menu-open .services-menu[hidden]{display:block}
.navigation.menu-open .services-toggle span{display:none}
.navigation.menu-open .services-toggle{cursor:default;opacity:1;-webkit-text-fill-color:#202720}
}
/* Desktop mega menu expands the navigation surface itself. */
@media(min-width:801px){
.navigation{--nav-row:66px;--dropdown-height:0px;transition:height .3s}
.scrolled .navigation{--nav-row:60px}
.navigation::before{height:calc(100% + var(--dropdown-height));bottom:auto;transition:height .48s cubic-bezier(.22,1,.36,1),border-radius .35s;}
.navigation.services-open{--dropdown-height:185px}
.navigation.services-open::before{border-radius:0 34px 28px 28px}
.navigation .nav-services{position:static}
.navigation .services-menu,.navigation .services-menu[hidden]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:absolute;top:100%;left:0;right:0;width:auto;height:185px;padding:30px 38px 35px 60px;border:0;border-radius:0;background:transparent;box-shadow:none;visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .2s,transform .3s,visibility 0s .3s;pointer-events:none}
.navigation .services-menu::before{content:'';position:absolute;top:7px;left:30px;right:25px;height:1px;background:#20272018}
.navigation.services-open .services-menu{visibility:visible;opacity:1;transform:translateY(0);transition:opacity .3s .12s,transform .4s .08s,visibility 0s;pointer-events:auto}
.navigation .services-menu a{align-self:center;position:relative;padding:15px 22px 15px 0;font:700 clamp(13px,1.3vw,18px)/1.4 Manrope,sans-serif;letter-spacing:-.025em}
.navigation .services-menu a::after{content:'';display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#202720;font:14px sans-serif;margin-left:9px}
.navigation .services-menu small{font:400 11px/1.6 'DM Sans',sans-serif;letter-spacing:0;margin-top:9px;max-width:240px}
.navigation .services-menu a:hover{background:transparent;color:#92743a}
.navigation .services-toggle[aria-expanded="true"]{color:#92743a}
.navigation .services-toggle span{display:inline-block;transition:transform .3s}
.navigation .services-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
}
@media(prefers-reduced-motion:reduce){.navigation::before,.navigation .services-menu{transition:none!important}}
/* Tighten the gap slightly around the unchanged logo. */
.navigation::before{}
@media(min-width:801px){.navigation::before{}}
@media(max-width:800px){.navigation::before{}}
@media(min-width:801px){
.navigation.services-open::before{border-bottom-left-radius:28px;border-bottom-right-radius:28px}
.navigation .services-menu,.navigation .services-menu[hidden]{grid-template-columns:repeat(3,minmax(0,250px));justify-content:end;gap:28px;padding:30px 32px 35px 90px}
.navigation .services-menu a{padding-right:0;text-align:left}
.navigation .services-menu small{max-width:230px}
}
@media(min-width:801px){
/* Start the surface at the actual visible edge so its lower radius survives masking. */
.navigation::before{left:32px;right:0;width:auto;}
.navigation.services-open{--dropdown-height:160px}
.navigation.services-open::before{border-radius:0 34px 28px 28px}
.navigation .services-menu,.navigation .services-menu[hidden]{height:160px;grid-template-columns:repeat(3,minmax(0,260px));gap:32px;padding:28px 32px 30px 95px;align-items:center}
.navigation .services-menu a{display:grid;grid-template-columns:minmax(0,1fr) 23px;column-gap:12px;row-gap:9px;align-content:start;align-items:center;padding:10px 0;align-self:center;font-size:15px;line-height:1.4;letter-spacing:-.025em}
.navigation .services-menu a::after{grid-column:2;grid-row:1;margin:0;width:23px;height:23px;font-size:13px}
.navigation .services-menu small{grid-column:1 / -1;grid-row:2;margin:0;max-width:none;font-size:11px;line-height:1.6;min-height:36px}
}
@media(min-width:801px) and (max-width:1100px){.navigation .services-menu,.navigation .services-menu[hidden]{gap:24px;padding-left:65px}.navigation .services-menu a{font-size:13px}}
.navigation .services-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1.4}
.navigation .services-toggle span{display:block;margin:0;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;font-size:0;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.navigation .services-toggle[aria-expanded="true"] span{transform:translateY(2px) rotate(225deg)}
.navigation .services-toggle:focus,.navigation .services-toggle:focus-visible{outline:none}
.navigation .services-toggle:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media(max-width:800px){.navigation.menu-open .services-toggle{justify-content:space-between}.navigation.menu-open .services-toggle span{display:none}}
/* Hero photography composition, cut from the original logo silhouette. */
.hero{position:relative;isolation:isolate;overflow:clip;padding-top:65px;padding-bottom:65px;background:radial-gradient(ellipse at 85% 0,#ddc58d16,transparent 60%);border-radius:0 0 38px 38px;margin-bottom:50px}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(#ddc58d25 1px,transparent 1px),linear-gradient(90deg,#ddc58d25 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(transparent,#000,transparent)}
.hero-grid{grid-template-columns:1fr 1.05fr;gap:5%;min-height:650px;align-items:center}.hero-copy{padding:35px 0}.hero h1{font-size:clamp(48px,5vw,77px)}.hero-copy>p{max-width:420px}.hero-bottom{margin-top:15px}
.shield-composition{position:relative;width:115%;aspect-ratio:1;align-self:center;transform:translateY(calc(var(--hero-scroll,0)*-35px));min-width:0}
.shield-frame,.shield-frame-inner,.shield-photo{position:absolute;-webkit-mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat}
.shield-frame{inset:0;background:var(--gold);transform:rotate(12deg)}.shield-frame-inner{inset:7px;background:#1b231d}
.shield-photo{width:49%;aspect-ratio:416.5/423.2;background:#394535;overflow:hidden}.shield-photo-one{top:9%;left:5%;transform:rotate(-10deg)}.shield-photo-two{top:15%;right:1%;transform:rotate(15deg);background:#716345}.shield-photo-three{bottom:0;left:30%;width:53%;transform:rotate(3deg);background:#2d3d34}
.shield-photo>img{width:100%;height:100%;object-fit:cover;display:block}.photo-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25% 12%;background:radial-gradient(ellipse at top,#ffffff0c,transparent)}.photo-placeholder>span{font-size:8px;letter-spacing:.12em;color:#e4d3ad}.photo-placeholder strong{font:500 clamp(18px,2.3vw,34px)/1.1 Manrope,sans-serif;letter-spacing:-.05em;margin:12px 0}.photo-placeholder small{font-size:8px;line-height:1.5;color:#e6e3d8aa;max-width:140px}.photo-placeholder img{width:60px;height:60px;margin-bottom:12px}
@media(max-width:800px){.hero{padding-top:35px;padding-bottom:20px;border-radius:0 0 25px 25px;margin-bottom:15px}.hero-grid{grid-template-columns:1fr;gap:0;padding-top:25px;min-height:0}.hero h1{font-size:clamp(45px,10vw,72px)}.hero-copy{padding:12px 0 25px}.shield-composition{width:110%;margin:10px 0 35px -5%;max-width:600px;justify-self:center}.photo-placeholder strong{font-size:clamp(19px,5vw,30px)}.hero-bottom{margin-top:0}.photo-placeholder small{font-size:7px}.photo-placeholder img{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.shield-composition{transform:none}}
/* One continuous hero surface from the page top to its rounded lower edge. */
body{background:#f3f1e9;overflow-x:clip}
.hero{overflow:visible;background:transparent;border-radius:0;margin-bottom:0;padding-bottom:65px}
.hero::before{top:-240px;bottom:0;opacity:1;border-radius:0 0 38px 38px;background-color:#202720;background-image:radial-gradient(ellipse at 85% 0,#ddc58d18,transparent 65%),linear-gradient(#ddc58d07 1px,transparent 1px),linear-gradient(90deg,#ddc58d07 1px,transparent 1px);background-size:auto,65px 65px,65px 65px;mask-image:none}
.shield-composition{z-index:1}.hero-bottom{position:relative}
.expertise{color:#202720;padding-top:120px;--muted:#626c60;--line:#20272026;--gold:#8c713a}
.expertise .section-heading .eyebrow,.expertise .service-number{color:#8c713a}.expertise .tags span{color:#626c60}.expertise .code-art{color:#f0eee5;--gold:#ddc58d;--ink:#f0eee5;--line:#ffffff20}.expertise .design-art{background:#ddc58d}.expertise .photo-art{color:#f0eee5}
.about,.contact,footer{background-color:#151a18}.cms-section{margin-top:35px}.about{padding-top:90px}
@media(max-width:800px){.hero{padding-bottom:25px}.hero::before{top:-180px;border-radius:0 0 26px 26px}.expertise{padding-top:75px}.shield-composition{margin-bottom:15px}}
/* Contain the mobile composition within the viewport. */
html{width:100%;overflow-x:clip}body,main{width:100%;min-width:0}.hero{width:100%;max-width:100%}.hero-grid>*{min-width:0}
@media(max-width:800px){.hero-grid{grid-template-columns:minmax(0,1fr)}.shield-composition{width:100%;max-width:100%;margin-left:0;margin-right:0}.hero::before{left:0;right:0;width:100%}.hero-bottom{flex-wrap:wrap}.hero-bottom>span{max-width:100%}}
/* Personal, photographic direction: fewer objects, stronger hierarchy. */
.hero-grid{min-height:660px;gap:6%;grid-template-columns:1.05fr 1fr}.hero-copy>p{font-size:16px;line-height:1.9;max-width:410px}.hero h1{line-height:1.13}.hero::before{background-size:auto,95px 95px,95px 95px;background-color:#202720}.shield-composition{width:100%;aspect-ratio:.94;max-width:580px;justify-self:end;transform:translateY(calc(var(--hero-scroll,0)*-35px))}.shield-frame{inset:0;transform:rotate(8deg);background:linear-gradient(135deg,#ead8a9,#a68c51 70%,#e7d5a5)}.shield-frame-inner{inset:2px;background:#202720}.portrait-shield{position:absolute;inset:18px 20px 25px 18px;mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;-webkit-mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;transform:rotate(8deg);overflow:hidden;background:#344b4d}.portrait-shield img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:rotate(-8deg) scale(1.35);filter:saturate(.72)}.maker-note{position:absolute;bottom:10%;left:-8%;z-index:3;padding:20px 26px;background:#f3f1e9;color:#202720;border-radius:3px;box-shadow:0 18px 45px #0003;transform:rotate(-4deg);border-left:3px solid #ddc58d}.maker-note>span{display:block;font-size:7px;letter-spacing:.15em;color:#80704d}.maker-note strong{display:block;font:600 22px/1.5 Manrope,sans-serif;letter-spacing:-.04em;margin:3px 0}.maker-note small{font-size:10px;color:#697160}.craft-seal{position:absolute;right:-3%;top:9%;border:1px solid #ddc58d88;border-radius:50%;width:105px;height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#202720;color:#ddc58d;transform:rotate(12deg);box-shadow:0 8px 30px #0002}.craft-seal span{font-size:7px;letter-spacing:.12em}.craft-seal b{font:37px/1.3 Georgia}.expertise{padding-top:110px;padding-bottom:60px}.section-heading{margin-bottom:55px}.service{padding:65px 0}.service h3{font-size:clamp(30px,3vw,42px)}.service p{line-height:1.9}.code-art,.design-art,.photo-art{box-shadow:0 20px 45px #2027200c;border-radius:8px}.cms-section{margin-top:0;border-radius:32px 32px 0 0;padding-top:85px}.about{grid-template-columns:.5fr 1.4fr 1fr;gap:5%;padding-bottom:90px}.about-portrait{margin:0;align-self:center;position:relative}.about-portrait img{display:block;width:100%;height:380px;object-fit:cover;object-position:center;border-radius:120px 120px 8px 8px;filter:saturate(.65)}.about-portrait figcaption{font:italic 18px/1.4 Caveat,cursive;color:#ddc58d;text-align:center;margin-top:15px}.contact{padding-top:90px;padding-bottom:110px}.contact-link{transition:gap .3s}.contact-link:hover{gap:65px}.steps>div{padding-top:23px;padding-bottom:18px}
@media(max-width:800px){.hero-grid{min-height:0;grid-template-columns:minmax(0,1fr);gap:15px}.hero-copy>p{font-size:14px}.hero h1{font-size:clamp(44px,10vw,72px)}.shield-composition{width:88%;max-width:460px;margin:15px auto 40px;justify-self:center}.maker-note{left:-7%;bottom:5%;padding:14px 18px}.maker-note strong{font-size:19px}.maker-note small{font-size:9px}.craft-seal{width:80px;height:80px;right:-6%;top:5%}.craft-seal b{font-size:27px}.craft-seal span{font-size:6px}.hero{padding-bottom:20px}.about{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:65px}.about-portrait{max-width:400px;width:100%;justify-self:center}.about-portrait img{height:350px}.service{padding:35px 0}.cms-section{border-radius:24px 24px 0 0;padding-top:65px}.expertise{padding-top:75px;padding-bottom:35px}}
@media(prefers-reduced-motion:reduce){.shield-composition{transform:none}}
/* One shield-shaped signature combines the former card and seal. */
.maker-note{width:235px;aspect-ratio:416.5/423.2;bottom:3%;left:-9%;padding:30px 24px 38px;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;transform:rotate(-7deg);background:#f3f1e9;-webkit-mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat}
.maker-note>span{font-size:8px;letter-spacing:.13em}.maker-note .maker-symbol{font:38px/1 Georgia,serif;color:#9b8047;font-weight:400}.maker-note strong{font-size:21px;line-height:1.2;margin:0;white-space:nowrap;letter-spacing:-.05em}.maker-note small{font-size:10px;line-height:1.5}.maker-note .maker-since{margin-top:4px;font-size:7px;color:#80704d}
@media(max-width:800px){.maker-note{width:185px;left:-7%;bottom:0;padding:23px 19px 30px;gap:5px}.maker-note strong{font-size:17px}.maker-note .maker-symbol{font-size:29px}.maker-note>span{font-size:6px}.maker-note small{font-size:8px}.maker-note .maker-since{font-size:6px;margin-top:2px}}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .shield-composition{--shield-travel:.5;transform:translate3d(0,calc((.5 - var(--shield-travel))*65px),0)}
.scroll-motion .portrait-shield{transform:rotate(calc(8deg + (var(--shield-travel) - .5)*9deg))}
.scroll-motion .shield-frame{transform:rotate(calc(8deg + (var(--shield-travel) - .5)*15deg))}
.scroll-motion .portrait-shield img{transform:rotate(calc(-8deg - (var(--shield-travel) - .5)*9deg)) scale(calc(1.35 + var(--shield-travel)*.08)) translateY(calc((var(--shield-travel) - .5)*-12px))}
.scroll-motion .maker-note{transform:translate3d(0,calc((.5 - var(--shield-travel))*-70px),0) rotate(calc(-7deg + (var(--shield-travel) - .5)*-12deg))}
.portrait-shield.reveal,.shield-frame.reveal,.maker-note.reveal{transition:opacity 1.1s ease,translate 1.1s cubic-bezier(.22,1,.36,1)}
.portrait-shield.reveal{transition-delay:.12s}.maker-note.reveal{transition-delay:.3s}
.portrait-shield.reveal.pending,.shield-frame.reveal.pending{opacity:0;translate:0 35px}.maker-note.reveal.pending{opacity:0;translate:0 22px}
@media(max-width:800px){.scroll-motion .shield-composition{transform:translate3d(0,calc((.5 - var(--shield-travel))*35px),0)}.scroll-motion .maker-note{transform:translate3d(0,calc((.5 - var(--shield-travel))*-40px),0) rotate(calc(-7deg + (var(--shield-travel) - .5)*-8deg))}}
}
/* Lift the subject within the shield without moving its frame. */
.portrait-shield img{object-position:50% 76%}
/* Move the image itself: object-position cannot shift a height-fitted photo. */
.portrait-shield img{position:relative;top:-38px}
@media(max-width:800px){.portrait-shield img{top:-26px}}
/* First impression: a drawn contour, a photographic reveal, then the signature. */
.shield-draw{display:none}
@media(prefers-reduced-motion:no-preference){
.shield-ready .shield-draw{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(8deg);pointer-events:none;z-index:2}
.shield-draw path{fill:none;stroke:#e6d2a0;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.shield-ready .portrait-shield{clip-path:inset(0 0 100% 0);opacity:1}
.shield-ready .shield-frame{clip-path:inset(0 0 100% 0)}
.shield-ready .maker-note{opacity:0;translate:-35px 55px;scale:.78;rotate:-15deg}
.shield-enter .shield-draw path{animation:shield-outline 1.35s cubic-bezier(.65,0,.2,1) both}
.shield-enter .shield-draw{animation:contour-handoff .4s 1.65s both}
.shield-enter .portrait-shield{animation:shield-unveil 1.3s .4s cubic-bezier(.76,0,.24,1) both}
.shield-enter .shield-frame{animation:shield-unveil 1.2s .6s cubic-bezier(.76,0,.24,1) both}
.shield-enter .maker-note{animation:signature-arrival 1s 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes shield-outline{to{stroke-dashoffset:0}}
@keyframes shield-unveil{to{clip-path:inset(0 0 0 0)}}
@keyframes signature-arrival{0%{opacity:0;translate:-35px 55px;scale:.78;rotate:-15deg}30%{opacity:1}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes contour-handoff{to{opacity:0}}
}
@media(prefers-reduced-motion:no-preference){
.shield-ready .portrait-shield{clip-path:circle(0% at 50% 48%);scale:1.055}
.shield-enter .portrait-shield{animation:portrait-open 1.5s .35s cubic-bezier(.22,1,.36,1) both}
@keyframes portrait-open{0%{clip-path:circle(0% at 50% 48%);scale:1.055}100%{clip-path:circle(75% at 50% 48%);scale:1}}
}
/* Finish drawing first, then settle the photograph gently into its shield. */
@media(prefers-reduced-motion:no-preference){
.shield-ready .portrait-shield{clip-path:none;opacity:0;scale:.94;rotate:-9deg;translate:0 14px;transform-origin:50% 55%}
.shield-enter .portrait-shield{animation:portrait-settle 1.25s 1.6s cubic-bezier(.16,1,.3,1) both}
.shield-enter .shield-frame{animation:shield-unveil .65s 1.4s cubic-bezier(.22,1,.36,1) both}
.shield-enter .shield-draw{animation:contour-handoff .4s 2s both}
.shield-enter .maker-note{animation:signature-arrival 1s 2.6s cubic-bezier(.16,1,.3,1) both}
@keyframes portrait-settle{0%{opacity:0;scale:.94;rotate:-9deg;translate:0 14px}25%{opacity:1}100%{opacity:1;scale:1;rotate:0deg;translate:0 0}}
}
@media(prefers-reduced-motion:no-preference){.shield-enter .maker-note{animation:signature-arrival 1.25s 1.6s cubic-bezier(.16,1,.3,1) both}}
.contact-panel[hidden]{display:none}.contact-panel{position:absolute;top:100%;left:32px;right:0;display:grid;grid-template-columns:.85fr 1.5fr;gap:60px;padding:35px 40px 30px;color:#202720;border-top:1px solid #20272018;animation:menu-link-in .4s both}.contact-intro .eyebrow{color:#8c713a;font-size:8px}.contact-intro h2{font-size:32px;margin:12px 0 15px}.contact-intro p{font-size:12px;max-width:260px;color:#626c60}.contact-intro>a{font-size:11px}.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-panel label{display:block;font-size:11px;font-weight:600;margin-bottom:14px}.contact-panel input,.contact-panel textarea{display:block;width:100%;border:0;border-bottom:1px solid #20272035;border-radius:0;background:#ffffff60;padding:11px 12px;margin-top:6px;font:12px/1.5 'DM Sans',sans-serif;color:#202720;resize:vertical}.contact-panel input:focus,.contact-panel textarea:focus{outline:2px solid #a68c51;outline-offset:2px}.contact-submit{display:flex;justify-content:space-between;align-items:center;gap:20px}.contact-submit small{font-size:9px;color:#626c60;max-width:210px}.contact-submit button{border:0;border-radius:25px;background:#ddc58d;color:#202720;padding:13px 20px;font:600 11px 'DM Sans',sans-serif;cursor:pointer}.contact-submit button:disabled{opacity:.6;cursor:wait}.contact-honey{position:absolute;left:-10000px}.form-status{font-size:11px;margin:10px 0 0;min-height:18px}
@media(min-width:801px){.navigation.contact-open{--dropdown-height:370px}.navigation.contact-open::before{border-radius:0 34px 28px 28px}.contact-open .contact-panel{height:370px;overflow-y:auto}}
@media(max-width:800px){.navigation.contact-open nav{display:none}.contact-panel{position:fixed;inset:104px 0 0;overflow:auto;display:block;padding:30px 8% 50px;border:0}.contact-intro h2{font-size:34px}.contact-intro p{max-width:100%}.contact-intro{margin-bottom:25px}.contact-fields{grid-template-columns:1fr;gap:0}.contact-submit{align-items:start;flex-direction:column;gap:14px}.contact-submit small{max-width:none}.contact-submit button{width:100%;padding:16px}.contact-panel textarea{min-height:100px}}
/* Readable typography throughout the site, including supporting information. */
body{font-size:17px}.hero-copy>p{font-size:18px}.round-link{font-size:15px}.eyebrow{font-size:12px;letter-spacing:.1em}.hero-bottom{font-size:11px;letter-spacing:.1em;color:#bdc4b6}.section-heading p,.service p,.about p,.cms-grid>div>p{font-size:17px;line-height:1.85}.section-heading p{padding-top:0}.service p{max-width:470px}.about p{max-width:560px;color:#bdc4b6}.tags span{font-size:13px;padding:6px 13px}.service-number{font-size:14px}.steps h4{font-size:18px}.steps p{font-size:16px;line-height:1.7}.steps span{font-size:13px}.cms-grid .large-copy{font-size:25px}.cms-section>.eyebrow{color:#535e4e}.signature{font-size:31px}.text-link,.email{font-size:16px}.contact>.eyebrow{font-size:12px}footer{font-size:13px}footer .brand>span{font-size:11px}.window-bar{font-size:11px}.code-art pre{font-size:14px}.design-art>span{font-size:11px}.design-art>div{font-size:17px}.design-art>div span{font-size:10px}.photo-art>span{font-size:11px}.maker-note{width:255px;padding:30px 22px 38px;gap:9px}.maker-note>span{font-size:12px;letter-spacing:.09em}.maker-note strong{font-size:23px}.maker-note small{font-size:14px;line-height:1.45;color:#525e4c}.maker-note .maker-symbol{font-size:34px}.navigation nav{font-size:15px}.navigation .brand>span{font-size:12px}.contact-panel label{font-size:14px}.contact-panel input,.contact-panel textarea{font-size:16px;padding:12px 14px}.contact-intro .eyebrow{font-size:11px}.contact-intro p{font-size:16px;max-width:330px}.contact-intro>a{font-size:14px}.contact-submit small{font-size:12px;max-width:260px}.contact-submit button{font-size:14px}.form-status{font-size:14px}.contact-intro h2{font-size:36px}
@media(min-width:801px){.navigation .services-menu a{font-size:17px}.navigation .services-menu small{font-size:14px;line-height:1.6;min-height:45px}.navigation.services-open{--dropdown-height:180px}.navigation .services-menu,.navigation .services-menu[hidden]{height:180px}.navigation.contact-open{--dropdown-height:460px}.contact-open .contact-panel{height:460px}.contact-panel{gap:40px;padding:30px 35px}.navigation{max-width:1500px}.navigation nav{gap:23px}}
@media(min-width:801px) and (max-width:1100px){.navigation nav{font-size:13px;gap:14px}.navigation .brand>span{font-size:10px}.navigation .nav-contact{padding:12px 16px}.navigation .services-menu a{font-size:15px}.navigation .services-menu small{font-size:13px}.contact-panel{grid-template-columns:.8fr 1.5fr;gap:24px}}
@media(max-width:800px){.hero-copy>p,.section-heading p,.service p,.about p,.cms-grid>div>p{font-size:16px}.round-link{font-size:14px}.eyebrow{font-size:11px}.hero-bottom{font-size:10px}.tags span{font-size:12px}.steps h4{font-size:17px}.steps p{font-size:15px}.cms-grid .large-copy{font-size:22px}.maker-note{width:205px;gap:6px;padding:25px 17px 30px}.maker-note strong{font-size:19px}.maker-note>span{font-size:10px}.maker-note small{font-size:12px}.maker-note .maker-symbol{font-size:28px}.navigation .brand>span{font-size:11px}.menu-toggle{font-size:13px}.contact-submit small{font-size:12px}.contact-submit button{font-size:15px}.contact-intro p{font-size:16px}.contact-intro>a{font-size:14px}footer{font-size:12px}.design-art>div span{float:none;display:block;margin-top:8px}.contact-panel{padding:28px 8% 45px}}
@media(max-width:370px){.navigation .brand>span{font-size:10px}.menu-toggle{font-size:0}.maker-note{width:185px}.maker-note strong{font-size:17px}.maker-note small{font-size:11px}}
@media(min-width:801px){.navigation.contact-open{--dropdown-height:var(--contact-height,350px)}.contact-open .contact-panel{height:auto;max-height:calc(100dvh - 150px);overflow-y:auto;align-items:start;padding-bottom:25px}.contact-panel .form-status:empty{min-height:0;margin:0}}
.about-portrait img{height:auto;aspect-ratio:416.5/423.2;border-radius:0;object-fit:cover;object-position:50% 60%;-webkit-mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat}
.milo-showcase{aspect-ratio:1.6;min-height:300px;background:#303b2d;isolation:isolate}
.milo-showcase::after{content:'';position:absolute;inset:0;background:linear-gradient(#151a1825,#151a1855 75%,#151a1899);z-index:0;pointer-events:none}
.milo-showcase img.milo-background{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;transform:scale(1.02);max-width:none;z-index:-1}
.milo-logo-layers{position:relative;z-index:1;width:76%;display:flex;flex-direction:column;align-items:center;gap:20px;padding-bottom:15px}
.milo-showcase .milo-logo-layers img{height:auto;object-fit:contain;filter:drop-shadow(0 2px 6px #0003)}
.milo-showcase img.milo-top{width:100%}.milo-showcase img.milo-bottom{width:74%}
.milo-showcase .milo-visit{z-index:1;bottom:20px;left:25px;right:25px;font-size:11px;letter-spacing:.1em}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .milo-showcase img.milo-background{transform:translate3d(0,calc((var(--travel,.5) - .5)*-65px),0) scale(1.04)}
.scroll-motion .milo-showcase img.milo-top{transform:translate3d(0,calc((.5 - var(--travel,.5))*-45px),0)}
.scroll-motion .milo-showcase img.milo-bottom{transform:translate3d(0,calc((.5 - var(--travel,.5))*45px),0)}
}
@media(max-width:800px){.milo-showcase{min-height:250px;aspect-ratio:1.4}.milo-logo-layers{gap:16px;width:80%}.milo-showcase .milo-visit{font-size:10px;left:20px;right:20px}}
.milo-logo-layers{gap:13px;padding:20px 0 35px}.milo-showcase .milo-logo-layers img.milo-symbol{width:90px;height:90px;object-fit:contain}.milo-showcase img.milo-top{width:85%}.milo-showcase img.milo-bottom{width:63%}
@media(prefers-reduced-motion:no-preference){.scroll-motion .milo-showcase img.milo-symbol{transform:translate3d(0,calc((.5 - var(--travel,.5))*-25px),0)}}
@media(max-width:800px){.milo-logo-layers{gap:11px}.milo-showcase .milo-logo-layers img.milo-symbol{width:70px;height:70px}}
.milo-showcase .milo-logo-layers img.milo-symbol{width:125px;height:125px}.milo-showcase img.milo-top{width:68%}.milo-showcase img.milo-bottom{width:50%}
@media(max-width:800px){.milo-showcase .milo-logo-layers img.milo-symbol{width:95px;height:95px}.milo-showcase img.milo-top{width:68%}.milo-showcase img.milo-bottom{width:50%}}
/* Match the supplied Foto Milo lockup proportions at every screen size. */
.milo-logo-layers{width:min(65%,300px);gap:0;padding:24px 0 48px}
.milo-showcase .milo-logo-layers img.milo-symbol{width:79%;height:auto;aspect-ratio:1;margin-bottom:11%}
.milo-showcase .milo-logo-layers img.milo-top{width:100%;height:auto;margin-bottom:4%}
.milo-showcase .milo-logo-layers img.milo-bottom{width:72%;height:auto}
.milo-showcase{min-height:380px}
@media(max-width:800px){.milo-logo-layers{width:min(65%,260px);gap:0;padding:25px 0 45px}.milo-showcase{min-height:340px}.milo-showcase .milo-logo-layers img.milo-symbol{width:79%;height:auto}.milo-showcase .milo-logo-layers img.milo-top{width:100%}.milo-showcase .milo-logo-layers img.milo-bottom{width:72%}}
/* Fit the complete lockup comfortably inside the image, above the visit link. */
.milo-logo-layers{width:min(44%,210px);padding:15px 0 40px;gap:0}
@media(max-width:800px){.milo-logo-layers{width:min(46%,175px);padding:15px 0 40px;gap:0}}
/* Contrast follows the section passing under the navigation. */
.navigation{transition:height .3s,color .45s ease}.navigation::before{transition:height .48s cubic-bezier(.22,1,.36,1),border-radius .35s,background-color .45s ease}.navigation a,.navigation button,.contact-panel{transition:color .4s ease}
.navigation.on-light{color:#f0eee5}.navigation.on-light::before{background-color:#202720}
.navigation.on-light nav>a:hover,.navigation.on-light .services-toggle:hover,.navigation.on-light .services-toggle[aria-expanded="true"]{color:#ddc58d}
.navigation.on-light .services-menu a,.navigation.on-light .contact-panel{color:#f0eee5}.navigation.on-light .services-menu small,.navigation.on-light .contact-intro p,.navigation.on-light .contact-submit small{color:#c0c7b9}.navigation.on-light .services-menu::before{background:#ffffff24}.navigation.on-light .contact-panel{border-top-color:#ffffff24}.navigation.on-light .contact-intro .eyebrow{color:#ddc58d}.navigation.on-light .contact-panel input,.navigation.on-light .contact-panel textarea{background:#ffffff0c;color:#f0eee5;border-bottom-color:#ffffff44}.navigation.on-light .contact-panel input::placeholder,.navigation.on-light .contact-panel textarea::placeholder{color:#bac2b3}.navigation.on-light .nav-contact{color:#202720}
@media(max-width:800px){.navigation.on-light.menu-open{color:#202720}.navigation.on-light.menu-open::before{background:#eae7de}.navigation.on-light.menu-open .contact-panel,.navigation.on-light.menu-open .services-menu a{color:#202720}.navigation.on-light.menu-open .contact-intro p,.navigation.on-light.menu-open .contact-submit small{color:#626c60}.navigation.on-light.menu-open .contact-panel input,.navigation.on-light.menu-open .contact-panel textarea{color:#202720;background:#ffffff60;border-bottom-color:#20272035}.navigation.on-light.menu-open .contact-panel input::placeholder,.navigation.on-light.menu-open .contact-panel textarea::placeholder{color:#626c60}}
@media(min-width:801px){
.navigation nav{align-items:center}
.navigation nav>a:not(.nav-contact),.navigation .services-toggle{font-family:'DM Sans',sans-serif;font-size:inherit;font-weight:400;line-height:24px;padding:10px 0;margin:0;min-height:44px;display:inline-flex;align-items:center}
.navigation .nav-services{display:flex;align-items:center;align-self:center}
.navigation .services-toggle{gap:9px}
}
/* Animate each painted color once, rather than inheriting an already animating color. */
.navigation{color:#202720}
.navigation .brand,.navigation nav>a:not(.nav-contact),.navigation .services-toggle{color:#202720;transition:color .5s cubic-bezier(.4,0,.2,1)}
.navigation.on-light .brand,.navigation.on-light nav>a:not(.nav-contact),.navigation.on-light .services-toggle{color:#f0eee5}
.navigation::before{transition:height .48s cubic-bezier(.22,1,.36,1),border-radius .35s,background-color .5s cubic-bezier(.4,0,.2,1)}
.navigation .services-toggle span{transition:transform .3s,border-color .5s cubic-bezier(.4,0,.2,1)}
.navigation .services-toggle[aria-expanded="true"],.navigation nav>a:not(.nav-contact):hover{color:#92743a}
.navigation.on-light .services-toggle[aria-expanded="true"],.navigation.on-light nav>a:not(.nav-contact):hover{color:#ddc58d}
@media(max-width:800px){.navigation.on-light.menu-open .brand,.navigation.on-light.menu-open nav>a:not(.nav-contact),.navigation.on-light.menu-open .services-toggle{color:#202720}}
/* Frosted navigation: filter on the masked surface keeps the shield cutout clear. */
.navigation::before{background-color:rgba(240,238,229,.86);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
.navigation.on-light::before{background-color:rgba(32,39,32,.86)}
@media(max-width:800px){.navigation.menu-open::before,.navigation.on-light.menu-open::before{background-color:rgba(234,231,222,.88)}}
@media(min-width:801px){
.navigation{padding-top:8px;padding-bottom:8px;padding-right:8px}
.navigation .nav-contact{height:calc(var(--nav-row) - 16px);display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;border-radius:999px;white-space:nowrap}
.navigation::before{border-top-right-radius:calc(var(--nav-row)/2);border-bottom-right-radius:calc(var(--nav-row)/2)}
.navigation.services-open::before,.navigation.contact-open::before{border-top-right-radius:calc(var(--nav-row)/2);border-bottom-right-radius:28px}
}
/* Prevent intrinsic SVG and code widths from stretching mobile grid columns. */
@media(max-width:800px){
.service{grid-template-columns:25px minmax(0,1fr);overflow:visible}
.service>*{min-width:0;max-width:100%}
.service .code-art,.service .design-art,.service .photo-art{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.code-art{padding:16px}.code-art pre{font-size:clamp(10px,3vw,14px);white-space:pre-wrap;overflow-wrap:anywhere}.window-bar{font-size:10px;gap:4px}.window-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service .milo-showcase{display:grid;place-items:center;aspect-ratio:auto;min-height:320px;overflow:hidden}
.milo-showcase .milo-logo-layers{width:min(60%,175px);max-width:calc(100% - 50px);justify-self:center;align-self:center;min-width:0;box-sizing:border-box;padding:15px 0 45px}
.milo-showcase .milo-logo-layers img{max-width:100%;min-width:0}
.scroll-motion .code-art{transform:translate3d(0,calc((.5 - var(--travel,.5))*25px),0)}
.scroll-motion .design-art{transform:translate3d(0,calc((.5 - var(--travel,.5))*25px),0)}
}
.about-year-column{display:flex;flex-direction:column;gap:50px;min-width:0}.about-year-column .year-art{display:block;align-self:flex-start;font-size:clamp(80px,8vw,125px);color:#a6b297;line-height:.88;letter-spacing:-.08em}.about-year-column .year-art>span{font-size:11px;line-height:1.6;letter-spacing:.07em;color:#aeb8a4;margin-top:22px}
@media(max-width:800px){.about-year-column{flex-direction:row;align-items:center;justify-content:space-between;gap:25px}.about-year-column>.eyebrow{max-width:160px}.about-year-column .year-art{display:block;font-size:70px;flex-shrink:0}.about-year-column .year-art>span{font-size:9px;margin-top:13px}}
@media(max-width:800px){
.navigation .menu-toggle,.navigation.menu-open .menu-toggle{display:flex;align-items:center;justify-content:center;width:46px;height:44px;min-width:46px;padding:10px;gap:0;font-size:0;border-radius:50%}
.navigation .menu-toggle .menu-lines,.navigation.menu-open .menu-toggle .menu-lines{display:block;position:relative;width:25px;height:20px;font-size:0}
.navigation .menu-toggle .menu-lines::after,.navigation.menu-open .menu-toggle .menu-lines::after{content:none}
.menu-lines i{display:block;position:absolute;left:0;width:25px;height:2px;border-radius:2px;background:currentColor;transform-origin:center;transition:transform .45s cubic-bezier(.65,0,.2,1),opacity .2s,width .3s;}
.menu-lines i:nth-child(1){top:1px}.menu-lines i:nth-child(2){top:9px;width:19px;left:6px}.menu-lines i:nth-child(3){top:17px}
.navigation .menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navigation .menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(2){opacity:0;transform:translateX(5px) scaleX(.3)}
.navigation .menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media(max-width:800px){
.navigation .menu-toggle .menu-lines,.navigation.menu-open .menu-toggle .menu-lines{width:20px;height:16px}
.menu-lines i{width:20px;height:1.5px}
.menu-lines i:nth-child(1){top:1px}.menu-lines i:nth-child(2){top:7px;width:15px;left:5px}.menu-lines i:nth-child(3){top:13px}
.navigation .menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navigation .menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
.navigation nav>a.nav-contact,.navigation.on-light nav>a.nav-contact{color:#202720;transition:background-color .25s,color .25s}
.navigation nav>a.nav-contact:hover,.navigation.on-light nav>a.nav-contact:hover,.navigation nav>a.nav-contact:focus-visible,.navigation.on-light nav>a.nav-contact:focus-visible{color:#202720;background-color:#ecd7a2}
.navigation nav>a.nav-contact span{color:inherit}
@media(max-width:800px){.navigation.menu-open nav>a.nav-contact:hover,.navigation.on-light.menu-open nav>a.nav-contact:hover{background:transparent;color:#92743a}}
.signature{font-family:Manrope,'DM Sans',sans-serif;font-style:normal;font-weight:500;font-size:24px;letter-spacing:-.035em}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .about-portrait{transform:translate3d(0,calc((.5 - var(--travel,.5))*65px),0) rotate(calc((var(--travel,.5) - .5)*5deg));transform-origin:center}
.about-portrait.reveal{transition:opacity 1.2s ease,translate 1.2s cubic-bezier(.22,1,.36,1);transition-delay:.15s}
.about-portrait.reveal.pending{opacity:0;translate:0 40px}
@media(max-width:800px){.scroll-motion .about-portrait{transform:translate3d(0,calc((.5 - var(--travel,.5))*35px),0) rotate(calc((var(--travel,.5) - .5)*3deg))}}
}
/* A signature ending, with oversized typography grounded in the studio palette. */
.studio-footer{display:block;position:relative;isolation:isolate;padding:65px 7% 25px;background:#1e271f;color:#e9ecdf;border-top:1px solid #ddc58d33;overflow:hidden;font-size:15px}
.studio-footer::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 15% 80%,#9eaf7c14,transparent 65%)}
.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:38px;border-bottom:1px solid #ffffff20}.footer-identity{display:flex;align-items:center;gap:24px}.footer-identity img{width:76px;height:78px}.footer-identity>span{font:400 22px/1.5 Manrope,sans-serif;letter-spacing:-.025em}.footer-identity strong{font-weight:500;color:#ddc58d}.footer-up{width:62px;height:62px;border:1px solid #ddc58d77;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#ddc58d;transition:background .3s,color .3s,transform .3s}.footer-up:hover{background:#ddc58d;color:#202720;transform:translateY(-5px)}
.footer-body{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:45px;padding:40px 0 55px}.footer-body p{font-size:17px;line-height:1.7}.footer-body p>span{display:block;font-size:13px;margin-top:15px;color:#b6c1ae}.footer-body nav{display:flex;align-items:flex-start;flex-direction:column;gap:9px;font-size:15px}.footer-connect{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.footer-connect>span{font-size:11px;letter-spacing:.1em;color:#ddc58d}.footer-connect>a{font-size:14px}.footer-connect>a:last-child{color:#b6c1ae;font-size:13px}.footer-body a:hover,.footer-bottom a:hover{color:#ddc58d}
.footer-wordmark{display:block;padding-bottom:32px}.footer-wordmark>span{display:block;font:600 clamp(65px,12.6vw,195px)/.86 Manrope,sans-serif;letter-spacing:-.075em;color:#cbd4bc}.footer-wordmark>span:first-child{color:#ddc58d;font-size:clamp(60px,9vw,140px);margin-bottom:15px}.footer-wordmark>span:last-child{white-space:nowrap}.footer-star{display:inline-block;font-size:.5em;vertical-align:middle;margin-left:.12em;color:#ddc58d;transition:transform .6s}.footer-wordmark:hover .footer-star{transform:rotate(90deg)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ffffff20;padding-top:22px;color:#b6c1ae;font-size:12px}.footer-bottom>span:nth-child(2){font-size:10px;letter-spacing:.12em}
@media(min-width:1600px){.studio-footer{padding-left:max(7%,calc((100vw - 1400px)/2));padding-right:max(7%,calc((100vw - 1400px)/2))}.footer-wordmark>span{font-size:175px}.footer-wordmark>span:first-child{font-size:125px}}
@media(max-width:800px){.studio-footer{padding:40px 6% 25px}.footer-identity{gap:14px}.footer-identity img{width:50px;height:52px}.footer-identity>span{font-size:16px}.footer-up{width:44px;height:44px;font-size:24px;flex-shrink:0}.footer-top{padding-bottom:28px}.footer-body{grid-template-columns:1fr 1fr;gap:25px;padding:30px 0 40px}.footer-body>p{grid-column:1/-1;font-size:18px;margin-bottom:0}.footer-connect{gap:12px;overflow-wrap:anywhere}.footer-connect>a{font-size:13px}.footer-connect>span{font-size:10px}.footer-body nav{gap:12px;font-size:14px}.footer-wordmark>span{font-size:12.1vw}.footer-wordmark>span:first-child{font-size:19vw;margin-bottom:12px}.footer-wordmark{padding-bottom:28px}.footer-bottom{flex-wrap:wrap;gap:15px;font-size:11px}.footer-bottom>span:nth-child(2){display:none}}
.studio-footer{background:#191a19;color:#f0eee5}.studio-footer::before{content:none}.footer-body p>span,.footer-connect>a:last-child,.footer-bottom{color:#b9bcb6}.footer-body{padding-bottom:40px}
/* Shared column edges and baseline rhythm for the complete footer. */
.footer-body,.footer-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;align-items:start}
.footer-body{padding:36px 0;row-gap:0}.footer-body>p{margin:0;font-size:16px;line-height:28px}.footer-body p>span{margin-top:12px;font-size:14px;line-height:28px}
.footer-body nav{padding:0;margin:0;gap:12px;align-items:flex-start;font-size:16px;line-height:28px}.footer-body nav a{display:block;line-height:28px}
.footer-connect{gap:12px;margin:0;padding:0}.footer-connect>span,.footer-connect>a,.footer-connect>a:last-child{display:block;line-height:28px;margin:0}.footer-connect>span{font-size:12px}.footer-connect>a{font-size:16px}.footer-connect>a:last-child{font-size:14px}
.footer-bottom{padding-top:22px;font-size:12px;line-height:24px}.footer-bottom>span:nth-child(2){font-size:11px;line-height:24px}.footer-bottom>a{justify-self:start;line-height:24px}
@media(max-width:800px){.footer-body{grid-template-columns:1fr;gap:28px;padding:28px 0}.footer-body>p{grid-column:auto}.footer-body nav{font-size:16px}.footer-connect>a{font-size:15px}.footer-bottom{grid-template-columns:1fr;gap:10px}.footer-bottom>span:nth-child(2){display:none}.footer-bottom>a{justify-self:start}}
/* Matching headings and rows: the structure, not just the column widths, aligns. */
.studio-footer .footer-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding:36px 0 40px;align-items:start}
.footer-column{min-width:0}.footer-column h3{font:600 12px/20px 'DM Sans',sans-serif;letter-spacing:.1em;color:#ddc58d;margin:0 0 20px}
.studio-footer .footer-rows,.studio-footer nav.footer-rows{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:0;font:400 16px/28px 'DM Sans',sans-serif;color:#e1e1da}
.studio-footer .footer-rows>a,.studio-footer .footer-rows>span{display:block;margin:0;padding:0;font:inherit;line-height:28px;overflow-wrap:anywhere}
.studio-footer .footer-rows>a:hover{color:#ddc58d}
@media(max-width:800px){.studio-footer .footer-body{grid-template-columns:1fr;gap:32px;padding:30px 0}.footer-column h3{margin-bottom:14px}.studio-footer .footer-rows,.studio-footer nav.footer-rows{gap:8px;font-size:15px}}
@media(min-width:801px){.footer-column:last-child{text-align:right}.studio-footer .footer-column:last-child .footer-rows{align-items:flex-end}.footer-bottom>a{justify-self:end;text-align:right}}
@media(min-width:801px){
.studio-footer .footer-body,.studio-footer .footer-bottom{grid-template-columns:1fr auto 1fr;column-gap:clamp(40px,6vw,100px)}
.footer-column:nth-child(2){justify-self:center;width:max-content;max-width:100%}
.footer-bottom>span:nth-child(2){justify-self:center;text-align:center}
.footer-column:last-child{justify-self:end}
}
.reviews-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:9%;background:#e9e6dc;color:#202720;padding-top:100px;padding-bottom:120px;align-items:start}.reviews-intro{position:sticky;top:140px}.reviews-intro .eyebrow{color:#846c3c}.reviews-intro h2{margin:25px 0}.reviews-intro em{color:#846c3c}.reviews-intro>p{font-size:17px;line-height:1.8;max-width:310px;color:#596451}.reviews-note{display:block;font-size:13px;color:#646d5e;max-width:290px}.reviews-stack{position:relative;min-width:0;padding-bottom:35px}.review-sheet{position:sticky;top:calc(130px + var(--sheet)*16px);background:#faf8f0;border:1px solid #20272012;border-radius:3px;padding:30px 35px;margin-bottom:200px;box-shadow:0 14px 32px #20272015;transform:rotate(calc((var(--sheet) - 1)*2deg));transform-origin:50% 15%;will-change:transform}.review-sheet:last-child{margin-bottom:0}.review-paper-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.1em;color:#847044}.review-paper-top>span:last-child{font-size:25px}.review-quote{display:block;font:80px/.9 Georgia,serif;color:#c6b37f;margin-top:25px}.review-sheet h3{font:500 clamp(22px,2.1vw,30px)/1.35 Manrope,sans-serif;letter-spacing:-.035em;margin:0 0 20px}.review-sheet>p{font-size:16px;line-height:1.8;color:#626b5c}.review-author{display:flex;gap:14px;align-items:center;padding-top:22px;margin-top:25px;border-top:1px solid #20272020}.review-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid #b7a270;color:#847044;font-size:13px;flex-shrink:0}.review-author strong{display:block;font-size:15px;font-weight:600}.review-author div>span{display:block;font-size:12px;color:#626b5c;margin-top:3px}
@media(max-width:800px){.reviews-section{grid-template-columns:minmax(0,1fr);gap:35px;padding-top:65px;padding-bottom:80px}.reviews-intro{position:static}.reviews-intro h2{margin:20px 0}.reviews-intro>p{max-width:none;font-size:16px}.reviews-note{max-width:none}.reviews-stack{padding:0 5px 20px}.review-sheet{top:calc(105px + var(--sheet)*12px);padding:24px;margin-bottom:140px}.review-sheet h3{font-size:24px}.review-sheet>p{font-size:15px}.review-author div>span{font-size:11px}.review-paper-top{font-size:9px}}
@media(prefers-reduced-motion:reduce){.reviews-intro,.review-sheet{position:static}.review-sheet{transform:none;margin-bottom:25px;will-change:auto}}
.review-sheet blockquote>p{font:500 clamp(18px,1.8vw,25px)/1.6 Manrope,sans-serif;letter-spacing:-.025em;color:#303a2c;overflow-wrap:anywhere}.review-sheet{max-height:calc(100svh - 200px);overflow:auto}
@media(max-width:800px){.review-sheet blockquote>p{font-size:18px}.review-sheet{max-height:calc(100svh - 170px)}}
/* One size and one motion system for the three discipline illustrations. */
.service .code-art,.service .design-art,.service .milo-showcase{width:100%;height:clamp(340px,27vw,420px);min-height:0;aspect-ratio:auto;border-radius:10px;box-shadow:0 16px 35px #20272012;align-self:center;box-sizing:border-box;transform:none;transition:box-shadow .3s ease}
.service .code-art{display:flex;flex-direction:column;padding:25px}.service .code-art pre{flex:1;display:flex;flex-direction:column;justify-content:center;white-space:pre-wrap;display:block;padding:15px 0;margin:auto 0;font-size:14px;line-height:1.9}.service .code-preview{margin-top:auto;flex-shrink:0}.service .design-art{display:flex;flex-direction:column;padding:25px 30px}.service .design-art>b{flex:1;display:flex;align-items:center;line-height:1;font-size:110px}.service .design-art>div{flex-shrink:0}.service .milo-showcase{display:grid;place-items:center;overflow:hidden}
.scroll-motion .service .code-art,.scroll-motion .service .design-art,.scroll-motion .service .milo-showcase{transform:translate3d(0,calc((.5 - var(--travel,.5))*40px),0)}
.service:hover .code-art,.service:hover .design-art{box-shadow:0 16px 35px #20272012}
.service .milo-showcase:hover,.service .milo-showcase:focus-visible{box-shadow:0 20px 45px #20272028}
.service .code-art.reveal,.service .design-art.reveal,.service .milo-showcase.reveal{transition:opacity .9s ease,translate .9s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.service .code-art.reveal.pending,.service .design-art.reveal.pending,.service .milo-showcase.reveal.pending{opacity:0;translate:0 25px}
.service .milo-showcase .milo-logo-layers img{transition:none}.service .milo-showcase .milo-logo-layers{width:min(44%,195px);padding:15px 0 40px}
@media(max-width:800px){.service .code-art,.service .design-art,.service .milo-showcase{height:340px;min-height:0;max-width:100%}.service .code-art{padding:20px}.service .code-art pre{font-size:clamp(10px,3vw,14px)}.service .design-art{padding:22px}.service .design-art>b{font-size:100px}.service .milo-showcase .milo-logo-layers{width:min(58%,175px)}.scroll-motion .service .code-art,.scroll-motion .service .design-art,.scroll-motion .service .milo-showcase{transform:translate3d(0,calc((.5 - var(--travel,.5))*24px),0)}}
@media(prefers-reduced-motion:reduce){.scroll-motion .service .code-art,.scroll-motion .service .design-art,.scroll-motion .service .milo-showcase{transform:none}.service .reveal.pending{opacity:1;translate:none}}
.cms-showcase{margin-top:80px;min-width:0}.cms-demo-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:25px}.cms-demo-heading .eyebrow{color:#77633d}.cms-demo-heading h3{font:500 29px/1.3 Manrope,sans-serif;letter-spacing:-.035em;margin:12px 0 0}.cms-demo-tabs{display:flex;border:1px solid #20272025;background:#ffffff40;border-radius:30px;padding:5px;gap:4px}.cms-demo-tabs button{font:500 14px 'DM Sans',sans-serif;padding:10px 20px;border:0;border-radius:24px;background:none;color:#515d4b;cursor:pointer;transition:background .25s,color .25s}.cms-demo-tabs button[aria-selected="true"]{background:#202720;color:#f0eee5}.cms-demo-tabs button:focus-visible{outline:2px solid #8c713a;outline-offset:3px}.cms-demo-browser{border:1px solid #20272025;border-radius:14px;overflow:hidden;box-shadow:0 28px 60px #20272015;background:#f4f5f7}.cms-demo-chrome{height:46px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#eaece9;border-bottom:1px solid #20272015;color:#687061;font-size:11px}.cms-demo-chrome>span:first-child{letter-spacing:4px;color:#adb2a8}.cms-demo-screen{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:450px}.cms-demo-sidebar{background:#fff;border-right:1px solid #20272010;display:flex;flex-direction:column;padding:25px 16px;gap:7px;font-size:12px}.cms-demo-sidebar>img{align-self:center}.cms-demo-sidebar>strong{font-size:17px;text-align:center;margin-bottom:15px}.cms-demo-sidebar>strong>span{font-weight:400;color:#92998b}.cms-demo-sidebar small{font-size:9px;letter-spacing:.1em;color:#92998b;margin:17px 10px 4px}.cms-demo-sidebar>span{padding:9px 10px;border-radius:7px;color:#61695c}.cms-demo-sidebar>.demo-nav-active{background:#f1ead7;color:#574b2e}.cms-demo-content{padding:32px;min-width:0}.demo-breadcrumb{font-size:11px;color:#849080;margin-bottom:16px}.demo-title-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.demo-title-row h4{font:700 27px/1.3 Manrope,sans-serif;letter-spacing:-.04em;margin:0;color:#141922}.demo-button{background:#171b22;color:#fff;border-radius:20px;padding:10px 16px;font-size:11px;white-space:nowrap}.demo-pane>p{font-size:13px;color:#7b8593;margin:10px 0 23px}.demo-status-tabs{display:flex;gap:22px;font-size:12px;padding-bottom:14px;border-bottom:1px solid #dddfe4}.demo-status-tabs>b{color:#947437}.demo-search{border:1px solid #e0e3e7;border-radius:8px;background:white;color:#8b929a;padding:11px 15px;font-size:12px;margin:15px 0}.demo-table{border:1px solid #e0e3e7;border-radius:10px;background:#fff;overflow:hidden}.demo-table>div{display:grid;grid-template-columns:minmax(0,1fr) 85px 45px;gap:15px;padding:14px 20px;align-items:center;border-bottom:1px solid #edf0f3;font-size:12px}.demo-table>div:last-child{border:0}.demo-table .demo-table-head{background:#fafbfc;font-size:10px;color:#9299a2}.demo-table strong{font-weight:600}.demo-table small{display:block;font-size:11px;color:#8c949e;font-weight:400;margin-top:4px}.demo-pill{display:inline-block;width:max-content;font-size:10px;background:#eaf3e8;color:#507346;border-radius:20px;padding:4px 10px}.demo-editor{background:white;padding:20px;border:1px solid #e1e3e8;border-radius:10px}.demo-editor h5{font-size:14px;margin:0 0 17px}.demo-editor>span{font-size:11px;display:block;margin:12px 0 6px}.demo-input,.demo-textarea{border:1px solid #dfe3e9;border-radius:7px;font-size:13px;padding:12px;color:#444b54}.demo-editor-tools{border:1px solid #dfe3e9;border-bottom:0;border-radius:7px 7px 0 0;font-size:12px;padding:7px 12px;background:#fafbfc}.demo-textarea{border-radius:0 0 7px 7px;min-height:100px;line-height:1.6}.demo-editor-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:17px}.demo-review-row{display:flex;align-items:center;gap:15px;background:#fff;padding:20px;border:1px solid #e0e3e7;border-radius:10px;margin-top:15px;font-size:13px}.demo-review-row>div:nth-child(2){flex:1}.demo-review-row p{font-size:12px;color:#9299a2;margin:5px 0 0}.demo-avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#f1ead7;color:#847044}.demo-draft{background:#f0f1f4;color:#7c8390}.cms-demo-caption{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:23px}.cms-demo-caption p{font-size:15px;margin:0;color:#4e5947}.cms-demo-caption>span{font-size:11px;color:#78816e}.demo-pane:not([hidden]){animation:demo-screen-enter .4s ease both}@keyframes demo-screen-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:800px){.cms-showcase{margin-top:55px}.cms-demo-heading{flex-direction:column;align-items:flex-start;gap:20px}.cms-demo-heading h3{font-size:25px}.cms-demo-tabs{width:100%;justify-content:space-between}.cms-demo-tabs button{font-size:13px;padding:10px 15px;flex:1}.cms-demo-chrome{font-size:9px;padding:0 12px;height:37px}.cms-demo-sidebar{display:none}.cms-demo-screen{grid-template-columns:minmax(0,1fr);min-height:440px}.cms-demo-content{padding:20px 14px}.demo-title-row h4{font-size:21px}.demo-title-row>.demo-button{font-size:9px;padding:8px 10px}.demo-table>div{grid-template-columns:minmax(0,1fr) 60px 20px;padding:12px;gap:8px}.demo-table small{font-size:10px}.demo-pane>p{font-size:12px}.demo-review-row{padding:13px;gap:10px;flex-wrap:wrap}.cms-demo-caption{flex-direction:column;align-items:flex-start;gap:10px}.cms-demo-caption p{font-size:14px}.cms-demo-caption>span{font-size:11px}.demo-editor{padding:14px}.demo-editor-bottom{gap:8px}.demo-editor-bottom .demo-button{font-size:10px;padding:10px}.demo-textarea{font-size:12px}}
.cms-real-showcase .cms-demo-screen{display:block;min-height:0;background:#f4f5f7;aspect-ratio:1800/946;overflow:hidden}.cms-screenshot-pane{width:100%;height:100%}.cms-screenshot-pane picture{display:block;width:100%;height:100%}.cms-screenshot-pane img{display:block;width:100%;height:100%;object-fit:contain;object-position:top}.cms-real-showcase .cms-demo-tabs{flex-shrink:0}
@media(max-width:800px){.cms-real-showcase .cms-demo-screen{aspect-ratio:1260/2256;min-height:0}.cms-real-showcase .cms-demo-tabs{flex-wrap:wrap;border-radius:16px;gap:5px}.cms-real-showcase .cms-demo-tabs button{padding:10px;font-size:12px;white-space:nowrap}.cms-screenshot-pane img{object-fit:contain}}
@media(prefers-reduced-motion:no-preference){
.cms-real-showcase{perspective:1400px;--cms-entry:1}
.scroll-motion .cms-real-showcase .cms-demo-browser{transform-origin:50% 65%;transform:translate3d(0,calc((1 - var(--cms-entry))*40px),0) rotateX(calc((1 - var(--cms-entry))*9deg)) scale(calc(.96 + var(--cms-entry)*.04));box-shadow:0 calc(15px + var(--cms-entry)*15px) 65px #2027201c;will-change:transform}
@media(max-width:800px){.scroll-motion .cms-real-showcase .cms-demo-browser{transform:translate3d(0,calc((1 - var(--cms-entry))*22px),0) rotateX(calc((1 - var(--cms-entry))*4deg)) scale(calc(.98 + var(--cms-entry)*.02))}}
}
.nav-magnet{display:none}
@media(min-width:801px){
.navigation{--contact-width:185px;--magnet-duration:.7s}
.navigation::before{transition:left var(--magnet-duration) cubic-bezier(.34,1.35,.42,1),height .48s cubic-bezier(.22,1,.36,1),border-radius .5s,background-color .5s;}
.navigation .brand,.navigation nav>a:not(.nav-contact),.navigation .nav-services{transition:opacity .25s,translate var(--magnet-duration) cubic-bezier(.34,1.35,.42,1),color .5s}
.navigation .nav-magnet{display:grid;place-items:center;position:absolute;right:calc(var(--contact-width) + 12px);top:50%;width:36px;height:40px;padding:0;transform:translateY(-50%);border:0;background:none;color:inherit;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s;z-index:2;font:28px/1 Manrope,sans-serif}
.navigation.nav-collapsed{pointer-events:none}
.navigation.nav-collapsed::before{left:calc(100% - var(--contact-width) - 58px);border-radius:calc(var(--nav-row)/2);pointer-events:auto}
.navigation.nav-collapsed .brand,.navigation.nav-collapsed nav>a:not(.nav-contact),.navigation.nav-collapsed .nav-services{opacity:0;translate:70px 0;pointer-events:none;visibility:hidden;transition:opacity .2s,translate .6s,visibility 0s .25s}
.navigation.nav-collapsed .nav-contact{pointer-events:auto}
.navigation.nav-collapsed .nav-magnet{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s .2s,visibility 0s}
.navigation.nav-collapsed nav{pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.navigation{--magnet-duration:0s}.navigation .brand,.navigation .nav-services,.navigation nav>a,.navigation .nav-magnet{transition:none!important}}
@media(min-width:801px){.navigation.nav-collapsed .brand{opacity:1;translate:0 0;visibility:visible;pointer-events:auto}.navigation.nav-collapsed .brand>span{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}.navigation .brand>span{transition:opacity .3s,visibility 0s}.navigation.nav-collapsed .brand{pointer-events:none}.navigation.nav-collapsed .brand img{pointer-events:auto}}
@media(max-width:800px){
.navigation::before{transition:left .7s cubic-bezier(.34,1.35,.42,1),height .4s,border-radius .4s,background-color .5s}
.navigation .brand>span{transition:opacity .25s,translate .65s cubic-bezier(.34,1.35,.42,1),visibility 0s}
.navigation.nav-collapsed{pointer-events:none}
.navigation.nav-collapsed::before{left:calc(100% - 60px);border-radius:999px;pointer-events:auto}
.navigation.nav-collapsed .brand{pointer-events:none}
.navigation.nav-collapsed .brand img{pointer-events:auto}
.navigation.nav-collapsed .brand>span{opacity:0;translate:30px 0;visibility:hidden;transition:opacity .2s,translate .6s,visibility 0s .2s}
.navigation.nav-collapsed .menu-toggle{pointer-events:auto}
.navigation .menu-toggle{position:relative;z-index:2}
}
@media(max-width:800px){.navigation.nav-collapsed::before{left:calc(100% - 69px);right:7px}}
/* Restrained magnetic motion: a long deceleration and a very small settle. */
@media(prefers-reduced-motion:no-preference){
.navigation{--nav-magnet-ease:cubic-bezier(.2,.85,.25,1);--nav-magnet-settle:linear(0,0.19 10%,0.5 25%,0.79 42%,0.96 60%,1.012 78%,1.004 90%,1)}
.navigation::before{transition:left .85s var(--nav-magnet-settle),height .48s cubic-bezier(.22,1,.36,1),border-radius .6s var(--nav-magnet-ease),background-color .5s cubic-bezier(.4,0,.2,1)}
.navigation .brand,.navigation nav>a:not(.nav-contact),.navigation .nav-services{transition:opacity .3s .18s ease,translate .75s var(--nav-magnet-ease),color .5s,visibility 0s}
.navigation.nav-collapsed nav>a:not(.nav-contact),.navigation.nav-collapsed .nav-services{transition:opacity .16s ease,translate .65s var(--nav-magnet-ease),visibility 0s .18s;translate:24px 0}
.navigation .brand>span{transition:opacity .3s .2s ease,translate .75s var(--nav-magnet-ease),visibility 0s}
.navigation.nav-collapsed .brand>span{transition:opacity .15s,translate .65s var(--nav-magnet-ease),visibility 0s .18s;translate:18px 0}
.navigation .nav-magnet{transition:opacity .22s,visibility 0s .22s}
.navigation.nav-collapsed .nav-magnet{transition:opacity .3s .35s,visibility 0s}
}
/* Jelly spring: a clear elastic overshoot, applied only to the surface. */
@media(prefers-reduced-motion:no-preference){
.navigation{--nav-jelly:linear(0,0.12 7%,0.47 18%,0.82 29%,1.07 42%,1.12 50%,1.025 64%,.965 75%,.992 88%,1)}
.navigation::before{transform-origin:right center;transition:left .95s var(--nav-jelly),height .48s cubic-bezier(.22,1,.36,1),border-radius .5s,background-color .5s}
.navigation.jelly-closing::before{animation:nav-jelly-close .95s both}
.navigation.jelly-opening::before{animation:nav-jelly-open .95s both}
@keyframes nav-jelly-close{0%{scale:1 1}35%{scale:1 1.04}52%{scale:1 1.13}68%{scale:1 .94}82%{scale:1 1.04}100%{scale:1 1}}
@keyframes nav-jelly-open{0%{scale:1 1}30%{scale:1 .92}48%{scale:1 1.09}67%{scale:1 .95}83%{scale:1 1.025}100%{scale:1 1}}
}
@media(prefers-reduced-motion:no-preference){.navigation::before{transition:left .65s var(--nav-jelly),height .4s cubic-bezier(.22,1,.36,1),border-radius .35s,background-color .5s}.navigation.jelly-closing::before,.navigation.jelly-opening::before{animation-duration:.65s}.navigation.nav-collapsed .nav-magnet{transition:opacity .2s .22s,visibility 0s}.navigation .brand,.navigation nav>a:not(.nav-contact),.navigation .nav-services{transition-duration:.22s,.5s,.5s,0s;transition-delay:.12s,0s,0s,0s}}
.navigation-backdrop{position:fixed;inset:0;z-index:19;background:rgba(8,12,9,.52);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s .35s}
body.navigation-panel-open .navigation-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s ease,visibility 0s}
@media(max-width:800px){body.navigation-panel-open .navigation-backdrop{opacity:0;visibility:hidden;pointer-events:none}}
/* A softened leading edge on the navigation surface. */
@media(min-width:801px){.navigation::before{border-top-left-radius:9px;border-bottom-left-radius:9px}.navigation.services-open::before,.navigation.contact-open::before{border-top-left-radius:9px;border-bottom-left-radius:28px}.navigation.nav-collapsed::before{border-radius:calc(var(--nav-row)/2)}}
@media(max-width:800px){.navigation::before{border-top-left-radius:8px;border-bottom-left-radius:8px}.navigation.nav-collapsed::before{border-radius:999px}}
.service .design-art.drafting-table{position:relative;display:block;padding:0;overflow:hidden;background:#c4b184;background-image:repeating-linear-gradient(100deg,transparent 0 3px,#ffffff05 3px 4px);color:#555a48}
.draft-heading{position:absolute;top:20px;left:25px;font:600 10px/1.4 'DM Sans',sans-serif;letter-spacing:.13em;z-index:3}.draft-paper{position:absolute;inset:48px 35px 45px 25px;background:#f2eedf;transform:rotate(-3deg);box-shadow:0 10px 20px #40351e25;display:grid;place-items:center}.draft-paper::before{content:'';position:absolute;top:-10px;left:40%;width:65px;height:23px;background:#e2d5af99;transform:rotate(6deg)}.draft-lines{position:absolute;inset:0;width:100%;height:100%;color:#767f6a;opacity:.55}.draft-main-logo{width:35%;height:65%;object-fit:contain;position:relative;filter:drop-shadow(0 7px 7px #2223)}.draft-note{position:absolute;font:18px/1.2 Caveat,cursive;color:#6b735e}.note-one{right:5%;top:24%;transform:rotate(7deg)}.note-two{left:6%;bottom:13%;transform:rotate(-5deg)}.draft-pencil{position:absolute;right:20px;top:24%;width:8px;height:57%;background:linear-gradient(90deg,#3d4538 0 30%,#65705a 30% 65%,#31392c 65%);border-radius:3px 3px 0 0;transform:rotate(14deg);box-shadow:3px 3px 4px #0002}.draft-pencil::after{content:'';position:absolute;top:100%;width:8px;height:22px;background:linear-gradient(#c7ac78 0 70%,#31392c 70%);clip-path:polygon(0 0,100% 0,50% 100%)}.draft-footer{position:absolute;left:25px;right:25px;bottom:16px;font-size:9px;letter-spacing:.08em}.draft-footer b{float:right;font-size:18px;line-height:1}
@media(max-width:800px){.draft-heading{font-size:9px;left:18px}.draft-paper{inset:45px 28px 42px 18px}.draft-note{font-size:15px}.note-one{right:3%;top:19%}.note-two{left:5%;bottom:11%}.draft-main-logo{width:40%}.draft-pencil{right:13px;width:7px}.draft-footer{left:18px;right:18px;font-size:8px}}
.service .design-art.pencil-study{padding:0;background:#efeee7;overflow:hidden}.pencil-study>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.pencil-study .sketch-palette{position:absolute;right:25px;bottom:22px;display:flex;gap:10px;align-items:center;transform:rotate(-8deg);padding:10px 12px;background:#f4f0e59c;border-radius:4px;box-shadow:0 3px 10px #26262612;backdrop-filter:blur(3px)}.sketch-palette>span{display:block;width:25px;height:25px;border-radius:50%;background:var(--swatch);border:1px solid #26262620;box-shadow:inset 0 1px 2px #ffffff30}
@media(max-width:800px){.pencil-study .sketch-palette{right:15px;bottom:16px;gap:8px;padding:8px 10px}.sketch-palette>span{width:20px;height:20px}}
.pencil-study .sketch-palette{right:22px;bottom:24px;padding:0;background:none;border-radius:0;box-shadow:none;backdrop-filter:none;transform:none;width:125px;height:48px;display:block;pointer-events:none;overflow:visible}
.sketch-palette>span{position:absolute;top:4px;left:40px;width:38px;height:38px;border:2px solid #f3f1e9;box-shadow:0 5px 12px #26262625}
.sketch-palette>span:nth-child(1){transform:translateX(-40px)}.sketch-palette>span:nth-child(3){transform:translateX(40px)}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .sketch-palette>span{opacity:var(--entrance,1);will-change:transform}
.scroll-motion .sketch-palette>span:nth-child(1){transform:translate3d(calc(-15px - var(--travel,.5)*55px),calc((.5 - var(--travel,.5))*-65px),0) rotate(calc(var(--travel,.5)*-35deg))}
.scroll-motion .sketch-palette>span:nth-child(2){transform:translate3d(0,calc((.5 - var(--travel,.5))*25px),0) scale(calc(.85 + var(--travel,.5)*.25))}
.scroll-motion .sketch-palette>span:nth-child(3){transform:translate3d(calc(15px + var(--travel,.5)*55px),calc((.5 - var(--travel,.5))*65px),0) rotate(calc(var(--travel,.5)*35deg))}
}
@media(max-width:800px){.pencil-study .sketch-palette{right:22px;bottom:20px;width:105px;height:36px;padding:0}.sketch-palette>span{width:29px;height:29px;left:35px}}
.code-art pre.scroll-code .code-character{color:inherit;opacity:0;position:relative}.code-art pre.scroll-code .code-character.typed{opacity:1}.code-art pre.scroll-code .typing-cursor::after{content:'';position:absolute;right:-2px;top:0;width:2px;height:1.1em;background:#e6cc83;animation:code-caret .8s steps(1) infinite}@keyframes code-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.code-art pre.scroll-code .code-character{opacity:1}.typing-cursor::after{display:none}}
@media(min-width:801px){.navigation .services-menu::before{left:65px;right:25px}.contact-panel{border-top:0}.contact-panel::before{content:'';position:absolute;top:0;left:33px;right:25px;height:1px;background:#20272018}.navigation.on-light .contact-panel::before{background:#ffffff24}}
.cms-demo-heading #cms-demo-description{font-size:15px;line-height:1.7;color:#4e5947;max-width:640px;margin:13px 0 0}
@media(max-width:800px){.cms-demo-heading #cms-demo-description{font-size:14px}}
@media(min-width:801px){.navigation .services-menu::before{left:95px;right:25px}.contact-panel::before{left:63px;right:25px}}
@media(prefers-reduced-motion:no-preference){.scroll-motion .milo-showcase img.milo-top,.scroll-motion .milo-showcase img.milo-bottom{transform:translate3d(0,calc((.5 - var(--travel,.5))*-18px),0)}}
.milo-showcase .milo-logo-layers img.milo-top{margin-bottom:7%}
/* A scroll-drawn process line with the original shield silhouette as markers. */
.steps{position:relative;--steps-progress:1;margin-top:45px}
.steps::before,.steps::after{content:'';position:absolute;left:22px;top:25px;bottom:40px;width:3px;border-radius:3px;background:#20272015}
.steps::after{background:#a2874d;transform:scaleY(var(--steps-progress));transform-origin:top;z-index:1}
.steps>div{position:relative;z-index:2;border:0;padding:12px 0 48px 78px;min-height:160px}
.steps>div:last-child{padding-bottom:0}
.steps>div>span{top:4px;left:0;width:47px;height:49px;display:grid;place-items:center;font:600 14px/1 Manrope,sans-serif;color:#69705f;background:#d2d2c5;mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;-webkit-mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;transition:background .4s,color .4s,scale .5s}
.steps>div.step-reached>span{background:#a2874d;color:#fff;scale:1.06}
.steps h4{font-size:22px;line-height:1.4;margin-bottom:12px}.steps p{font-size:16px;line-height:1.8;margin-bottom:0}
@media(prefers-reduced-motion:no-preference){.scroll-motion .steps>div h4,.scroll-motion .steps>div p{opacity:calc(.35 + var(--step-entry,1)*.65);transform:translateY(calc((1 - var(--step-entry,1))*15px))}}
@media(max-width:800px){.steps>div{padding-left:65px;min-height:165px;padding-bottom:36px}.steps h4{font-size:20px}.steps>div>span{width:42px;height:44px;font-size:13px}.steps::before,.steps::after{left:19px}.steps p{font-size:15px}}
.steps .steps-complete{position:absolute;top:auto;left:6px;bottom:24px;width:35px;height:35px;border-radius:50%;background:#e6e3d8;z-index:3;display:grid;place-items:center;opacity:0;scale:.7;transition:opacity .2s,scale .5s cubic-bezier(.34,1.56,.64,1)}.steps-complete svg{width:32px;height:32px}.steps-complete path{fill:none;stroke:#a2874d;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s .1s ease}.steps.is-complete .steps-complete{opacity:1;scale:1}.steps.is-complete .steps-complete path{stroke-dashoffset:0}
@media(max-width:800px){.steps .steps-complete{left:3px}}
.difference{background:#f3f1e9;color:#202720;padding-bottom:100px}.difference>.eyebrow{color:#8c713a}.difference>h2{margin:22px 0 45px}.difference>h2 em{color:#8c713a}.difference-table{max-width:1100px;border:1px solid #20272020;border-radius:18px;overflow:hidden}.difference-head,.difference-row{display:grid;grid-template-columns:minmax(0,1fr) 32%}.difference-head>p{padding:30px 35px;font-size:18px;line-height:1.6;color:#626c60;margin:0}.difference-head>div{background:#202720;color:#f0eee5;display:flex;justify-content:center;align-items:center;gap:15px;padding:25px}.difference-head strong{font:600 17px/1.4 Manrope,sans-serif;max-width:120px}.difference-row>div:first-child{padding:24px 35px;border-top:1px solid #20272018}.difference-row h3{font:600 21px/1.4 Manrope,sans-serif;letter-spacing:-.025em;margin:0 0 6px}.difference-row p{font-size:15px;color:#626c60;margin:0;line-height:1.6}.difference-check{background:#202720;display:grid;place-items:center;border-top:1px solid #ffffff17}.difference-check svg{width:40px;height:40px;background:#ddc58d;mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;-webkit-mask:url('/assets/home/logo-silhouette.svg') center/contain no-repeat;padding:5px}.difference-check path{fill:none;stroke:#202720;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.difference-row.awaiting .difference-check path{stroke-dashoffset:1}.difference-check svg{transition:scale .5s cubic-bezier(.34,1.56,.64,1)}.difference-row.awaiting .difference-check svg{scale:.8}.difference-check path{transition:stroke-dashoffset .6s .12s ease}
@media(max-width:800px){.difference{padding-bottom:65px}.difference-head,.difference-row{grid-template-columns:minmax(0,1fr) 85px}.difference-head>p{padding:20px;font-size:16px}.difference-head>div{padding:15px}.difference-head strong{display:none}.difference-head img{width:42px;height:44px}.difference-row>div:first-child{padding:20px}.difference-row h3{font-size:17px}.difference-row p{font-size:14px}.difference-check svg{width:34px;height:36px}}
/* Rounded slanted leading edge, matching the supplied markup. */
@media(min-width:801px){.navigation:not(.nav-collapsed)::before{}}
@media(max-width:800px){.navigation:not(.nav-collapsed)::before{}}
.difference-table{max-width:1300px}.difference-head,.difference-row{grid-template-columns:minmax(0,1fr) 25% 20%}.difference-head>.difference-other-title{background:#f9f7f1;color:#73796c;font:500 17px/1.5 Manrope,sans-serif;text-align:center;border-left:1px solid #20272018;padding:25px 12px}.difference-other{display:grid;place-items:center;text-align:center;border-top:1px solid #20272018;border-left:1px solid #20272018;background:#f9f7f1;padding:15px;color:#73796c;font-size:13px;line-height:1.5}
@media(max-width:800px){.difference-head,.difference-row{grid-template-columns:minmax(0,1fr) 65px 85px}.difference-head>.difference-other-title{font-size:12px;padding:15px 7px}.difference-head>div{padding:12px 8px}.difference-head img{width:36px;height:38px}.difference-other{font-size:10px;padding:10px 5px}.difference-row>div:first-child{padding:18px 12px}.difference-row h3{font-size:15px}.difference-row p{font-size:12px}.difference-head>p{font-size:14px;padding:18px 12px}.difference-check svg{width:29px;height:31px}}
.difference-table{width:100%;max-width:none}.difference-head,.difference-row{grid-template-columns:minmax(0,1fr) 30%}
@media(max-width:800px){.difference-head,.difference-row{grid-template-columns:minmax(0,1fr) 85px}.difference-head>p{padding:20px;font-size:16px}.difference-row>div:first-child{padding:20px}.difference-row h3{font-size:17px}.difference-row p{font-size:14px}}
.difference-head strong{max-width:none;white-space:nowrap}
@media(min-width:801px){.navigation:not(.nav-collapsed)::before{}}
@media(max-width:800px){.navigation:not(.nav-collapsed)::before{}}
/* Restore the original shield geometry; keep the expanded surface inset. */
@media(min-width:801px){
.navigation:not(.nav-collapsed)::before{left:32px;}
.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{left:55px;border-bottom-left-radius:28px}
.navigation .services-menu::before{left:80px}.contact-panel::before{left:48px}
}
@media(max-width:800px){.navigation:not(.nav-collapsed)::before{}}
/* Restore the navigation shape from before the corner experiments. */
@media(min-width:801px){
.navigation:not(.nav-collapsed)::before,.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{left:32px;right:0;width:auto;border-top-left-radius:0;border-bottom-left-radius:0}
.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{border-bottom-left-radius:28px}
.navigation .services-menu::before{left:95px}.contact-panel::before{left:63px}
}
@media(max-width:800px){.navigation:not(.nav-collapsed)::before{border-top-left-radius:0;border-bottom-left-radius:0;}}
/* Round the intersections of the original shield mask, without redrawing it. */
@media(min-width:801px){.navigation:not(.nav-collapsed)::before,.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{}}
@media(min-width:801px){.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{}}
@media(min-width:801px){.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{}}

/* Single continuous mask for every panel height. No layered seams or state swaps. */
@media(min-width:801px){
.navigation::before,.navigation:not(.nav-collapsed)::before,.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{left:32px;right:0;width:auto;--surface-mask:url('/assets/home/nav-surface-desktop.svg');-webkit-mask-image:var(--surface-mask);mask-image:var(--surface-mask);-webkit-mask-size:2000px 1600px;mask-size:2000px 1600px;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;border-top-left-radius:0;border-bottom-left-radius:28px}
.scrolled .navigation::before{--surface-mask:url('/assets/home/nav-surface-desktop-compact.svg')}
.navigation.nav-collapsed::before{left:calc(100% - var(--contact-width) - 58px);border-radius:calc(var(--nav-row)/2);-webkit-mask-image:none;mask-image:none}
}
@media(max-width:800px){
.navigation::before,.navigation:not(.nav-collapsed)::before{left:0;right:0;width:auto;--surface-mask:url('/assets/home/nav-surface-mobile.svg');-webkit-mask-image:var(--surface-mask);mask-image:var(--surface-mask);-webkit-mask-size:2000px 1600px;mask-size:2000px 1600px;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;border-top-left-radius:0;border-bottom-left-radius:0}
.scrolled .navigation::before{--surface-mask:url('/assets/home/nav-surface-mobile-compact.svg')}
.navigation.nav-collapsed::before{left:calc(100% - 69px);right:7px;border-radius:999px;-webkit-mask-image:none;mask-image:none}
}
/* Keep the notch anchored to the logo throughout the magnetic contraction. */
@media(min-width:801px){
.navigation::before{--surface-left:32px}
.navigation.nav-collapsed::before{--surface-left:calc(var(--nav-surface-width,1200px) - var(--contact-width) - 58px);left:var(--surface-left);-webkit-mask-image:var(--surface-mask);mask-image:var(--surface-mask)}
.navigation::before,.navigation:not(.nav-collapsed)::before,.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{-webkit-mask-position:calc(32px - var(--surface-left)) 0;mask-position:calc(32px - var(--surface-left)) 0}
}
@media(max-width:800px){
.navigation::before{--surface-left:0px}
.navigation.nav-collapsed::before{--surface-left:calc(var(--nav-surface-width,350px) - 69px);left:var(--surface-left);-webkit-mask-image:var(--surface-mask);mask-image:var(--surface-mask)}
.navigation::before,.navigation:not(.nav-collapsed)::before{-webkit-mask-position:calc(0px - var(--surface-left)) 0;mask-position:calc(0px - var(--surface-left)) 0}
}
@media(prefers-reduced-motion:no-preference){.navigation::before{transition:left .65s var(--nav-jelly),mask-position .65s var(--nav-jelly),-webkit-mask-position .65s var(--nav-jelly),height .4s cubic-bezier(.22,1,.36,1),border-radius .35s,background-color .5s}}
/* Unified navigation layer: logo and links share one uninterrupted surface. */
@media(min-width:801px){
.navigation{height:80px;--nav-row:80px;padding:10px}.scrolled .navigation{height:74px;--nav-row:74px}
.navigation::before,.navigation:not(.nav-collapsed)::before,.navigation.services-open:not(.nav-collapsed)::before,.navigation.contact-open:not(.nav-collapsed)::before{left:0;right:0;width:auto;-webkit-mask:none;mask:none;border-radius:40px}
.navigation.services-open::before,.navigation.contact-open::before{border-radius:38px 38px 28px 28px}
.navigation .brand{padding-left:76px;height:100%}.navigation .brand img{left:6px;width:58px;height:60px;margin:0}.navigation .brand>span{margin:0}
.navigation .nav-contact{height:calc(var(--nav-row) - 20px)}
.navigation.nav-collapsed::before{left:calc(100% - var(--contact-width) - 64px);right:0;border-radius:40px;-webkit-mask:none;mask:none}
.navigation .nav-magnet{right:calc(var(--contact-width) + 15px)}
.navigation.nav-collapsed .brand::before{content:'';position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:74px;height:74px;border-radius:50%;background:rgba(32,39,32,.88);z-index:-1;backdrop-filter:blur(18px)}
.navigation .services-menu::before{left:25px;right:25px}.contact-panel{left:0}.contact-panel::before{left:25px;right:25px}
}
@media(max-width:800px){
.navigation{height:68px;padding:10px 12px;--nav-row:68px}.scrolled .navigation{height:64px;--nav-row:64px}
.navigation::before,.navigation:not(.nav-collapsed)::before{left:0;right:0;-webkit-mask:none;mask:none;border-radius:36px}
.navigation .brand{padding-left:60px}.navigation .brand img{left:0;width:48px;height:50px;margin:0}
.navigation.nav-collapsed::before{left:calc(100% - 70px);right:5px;border-radius:36px;-webkit-mask:none;mask:none}
.navigation.nav-collapsed .brand::before{content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;background:rgba(32,39,32,.88);z-index:-1;backdrop-filter:blur(18px)}
}
.navigation.nav-collapsed .brand::before{content:none}
@media(min-width:801px){
.navigation nav>a:not(.nav-contact),.navigation nav .services-toggle{font:400 15px/24px 'DM Sans',sans-serif;letter-spacing:normal;font-style:normal;text-transform:none;font-kerning:normal;-webkit-font-smoothing:antialiased;vertical-align:middle;padding:10px 0;margin:0;border:0;min-height:44px;box-sizing:border-box}
.navigation .nav-services{font:400 15px/24px 'DM Sans',sans-serif;align-self:center}
}
@media(min-width:801px) and (max-width:1100px){.navigation nav>a:not(.nav-contact),.navigation nav .services-toggle,.navigation .nav-services{font-size:13px}}
.navigation nav>a.nav-contact,.navigation.on-light nav>a.nav-contact{background-color:#e6cc83;color:#202720}
.navigation nav>a.nav-contact:hover,.navigation.on-light nav>a.nav-contact:hover,.navigation nav>a.nav-contact:focus-visible,.navigation.on-light nav>a.nav-contact:focus-visible{background-color:#f0d994;color:#202720}
@media(max-width:800px){.navigation.menu-open nav>a.nav-contact,.navigation.on-light.menu-open nav>a.nav-contact{background:transparent}.navigation.menu-open nav>a.nav-contact:hover,.navigation.on-light.menu-open nav>a.nav-contact:hover{background:transparent;color:#92743a}}
.service .design-art.logo-portfolio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1px;padding:0;background:#20272020;overflow:hidden}.portfolio-logo-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;background:#ebe7dc}.portfolio-logo-slot:nth-child(2),.portfolio-logo-slot:nth-child(3){background:#f7f4eb}.logo-slot-number{position:absolute;left:16px;top:12px;font-size:10px;letter-spacing:.12em;color:#8b8065}.logo-slot-mark{font:300 35px/1 Manrope,sans-serif;color:#b6aa8a}.logo-slot-label{font-size:11px;line-height:1.5;color:#7a7d6f;text-align:center;max-width:150px;padding:0 10px}
@media(max-width:800px){.logo-slot-label{font-size:10px;max-width:140px}.logo-slot-number{left:12px;top:10px}.logo-slot-mark{font-size:28px}}
.portfolio-logo-slot{padding:18px}.portfolio-logo-slot>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}.logo-client-verderbleek>img{max-width:78%;max-height:95%}.logo-client-shannon>img,.logo-client-dertyn>img{max-width:85%;max-height:95%}.logo-client-byiloon>img{max-width:95%;max-height:90%}
@media(max-width:800px){.portfolio-logo-slot{padding:13px}.logo-client-verderbleek>img{max-width:90%}.logo-client-shannon>img,.logo-client-dertyn>img{max-width:95%}}
/* Free-standing portfolio marks, without tiles or an enclosing card. */
.service .design-art.logo-portfolio{background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 0;gap:30px 35px;overflow:visible}
.service:hover .design-art.logo-portfolio{box-shadow:none}
.logo-portfolio .portfolio-logo-slot,.logo-portfolio .portfolio-logo-slot:nth-child(n){background:transparent;border:0;box-shadow:none;padding:5px 12px;position:relative}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .service .design-art.logo-portfolio{transform:none}
.logo-portfolio .portfolio-logo-slot{transition:opacity .8s ease,translate .9s cubic-bezier(.22,1,.36,1)}
.logo-portfolio .portfolio-logo-slot.logo-waiting{opacity:0;translate:0 28px}
.logo-portfolio .portfolio-logo-slot:nth-child(2){transition-delay:.1s}.logo-portfolio .portfolio-logo-slot:nth-child(3){transition-delay:.16s}.logo-portfolio .portfolio-logo-slot:nth-child(4){transition-delay:.24s}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(1){transform:translateY(calc((.5 - var(--travel,.5))*-45px))}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(2){transform:translateY(calc((.5 - var(--travel,.5))*40px))}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(3){transform:translateY(calc((.5 - var(--travel,.5))*-30px))}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(4){transform:translateY(calc((.5 - var(--travel,.5))*50px))}
}
@media(max-width:800px){.service .design-art.logo-portfolio{gap:28px 20px;padding:10px 0}.logo-portfolio .portfolio-logo-slot{padding:5px}}
/* Four individual identity boards, framed rather than joined as a table. */
.service .design-art.logo-portfolio{gap:20px;padding:8px 3px;height:clamp(390px,32vw,490px);overflow:visible}
.logo-portfolio .portfolio-logo-slot,.logo-portfolio .portfolio-logo-slot:nth-child(n){padding:24px 20px 30px;border:1px solid #20272012;border-radius:14px;background:#fbf8ef;box-shadow:0 10px 23px #2027200b,inset 0 1px 0 #ffffffcc;isolation:isolate}
.logo-portfolio .logo-client-verderbleek{background:radial-gradient(ellipse at 50% 35%,#f7edcc,#e9e1cb)}
.logo-portfolio .logo-client-shannon{background:radial-gradient(ellipse at 50% 30%,#ffffff,#e9eff2)}
.logo-portfolio .logo-client-dertyn{background:radial-gradient(ellipse at 50% 35%,#fff,#ede7f4)}
.logo-portfolio .logo-client-byiloon{background:radial-gradient(ellipse at 50% 35%,#fff9fc,#f3e6eb)}
.portfolio-logo-slot::before{content:'';position:absolute;inset:8px;border:1px solid #ffffff99;border-radius:9px;pointer-events:none;z-index:-1}
.portfolio-logo-slot::after{position:absolute;bottom:11px;left:15px;right:15px;text-align:center;font:500 8px/1.4 'DM Sans',sans-serif;letter-spacing:.13em;color:#777365;pointer-events:none}
.logo-client-verderbleek::after{content:'VAN DER BLEEK'}.logo-client-shannon::after{content:'SHANNON HENDRIKS'}.logo-client-dertyn::after{content:'DERTYN'}.logo-client-byiloon::after{content:'BY ILOON'}
.logo-portfolio .portfolio-logo-slot>img{filter:drop-shadow(0 4px 4px #20272010)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.logo-portfolio .portfolio-logo-slot{transition:opacity .8s ease,translate .5s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}.logo-portfolio .portfolio-logo-slot:hover{translate:0 -5px;border-color:#b7a16a66;box-shadow:0 18px 32px #20272016,inset 0 1px 0 #fff}}
@media(max-width:800px){.service .design-art.logo-portfolio{height:390px;gap:16px;padding:5px 2px}.logo-portfolio .portfolio-logo-slot,.logo-portfolio .portfolio-logo-slot:nth-child(n){padding:17px 12px 28px;border-radius:12px}.portfolio-logo-slot::after{font-size:7px;letter-spacing:.08em;left:8px;right:8px}.portfolio-logo-slot::before{inset:6px}}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){transform:translate3d(0,calc((.5 - var(--logo-progress,.5))*65px),0);will-change:transform;transition:opacity .8s ease,translate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(even){transform:translate3d(0,calc((.5 - var(--logo-progress,.5))*95px),0)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.logo-portfolio .portfolio-logo-slot:nth-child(n):hover{translate:0 -7px;border-color:#b7a16a88;box-shadow:0 20px 36px #20272022;transition-delay:0s}}
/* Quiet, aligned identity cards: let the artwork do the talking. */
.logo-portfolio .portfolio-logo-slot::after,.logo-portfolio .portfolio-logo-slot::before{content:none}
.logo-portfolio .portfolio-logo-slot:nth-child(n){padding:22px;border-radius:12px;border:1px solid #20272014;background:#faf8f1;box-shadow:0 5px 15px #20272006;translate:0 0}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){transform:none;will-change:auto}
.logo-portfolio .portfolio-logo-slot>img{filter:none}
@media(hover:hover){.logo-portfolio .portfolio-logo-slot:nth-child(n):hover{translate:0 0;box-shadow:0 8px 20px #2027200c;border-color:#b7a16a55}}
@media(prefers-reduced-motion:no-preference){.logo-portfolio .portfolio-logo-slot:nth-child(n){transition:opacity .8s ease,translate .8s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;transition-delay:0s}.logo-portfolio .portfolio-logo-slot.logo-waiting{opacity:0;translate:0 20px}}
@media(max-width:800px){.logo-portfolio .portfolio-logo-slot:nth-child(n){padding:16px}}
.logo-portfolio{perspective:1400px;--portfolio-entry:1}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){transform-origin:50% 65%;transform:translate3d(0,calc((1 - var(--portfolio-entry))*40px),0) rotateX(calc((1 - var(--portfolio-entry))*9deg)) scale(calc(.96 + var(--portfolio-entry)*.04));box-shadow:0 calc(5px + var(--portfolio-entry)*10px) 35px #20272012;will-change:transform}
@media(max-width:800px){.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){transform:translate3d(0,calc((1 - var(--portfolio-entry))*22px),0) rotateX(calc((1 - var(--portfolio-entry))*4deg)) scale(calc(.98 + var(--portfolio-entry)*.02))}}
}
/* Fan the four identity cards out from a compact, overlapping arrangement. */
@media(prefers-reduced-motion:no-preference){
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){--fan-x:1;--fan-y:1;--fan-turn:-8deg;opacity:clamp(0,calc(var(--portfolio-entry)*2),1);translate:0 0;transform-origin:center;transform:translate3d(calc((1 - var(--portfolio-entry))*var(--fan-x)*24%),calc((1 - var(--portfolio-entry))*var(--fan-y)*20%),0) rotate(calc((1 - var(--portfolio-entry))*var(--fan-turn))) scale(calc(.86 + var(--portfolio-entry)*.14));transition:box-shadow .3s,border-color .3s;will-change:transform,opacity;box-shadow:0 12px 28px #20272012}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(2){--fan-x:-1;--fan-y:1;--fan-turn:7deg}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(3){--fan-x:1;--fan-y:-1;--fan-turn:5deg}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(4){--fan-x:-1;--fan-y:-1;--fan-turn:-6deg}
.scroll-motion .logo-portfolio .portfolio-logo-slot.logo-waiting{translate:0 0}
@media(max-width:800px){.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){transform:translate3d(calc((1 - var(--portfolio-entry))*var(--fan-x)*17%),calc((1 - var(--portfolio-entry))*var(--fan-y)*16%),0) rotate(calc((1 - var(--portfolio-entry))*var(--fan-turn))) scale(calc(.9 + var(--portfolio-entry)*.1))}}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n){transition:translate .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .4s,background-color .4s}
.logo-portfolio .portfolio-logo-slot>img{transition:scale .5s cubic-bezier(.22,1,.36,1)}
.scroll-motion .logo-portfolio .portfolio-logo-slot:nth-child(n):hover{translate:0 -7px;border-color:#c8ac6555;background-color:#fffdf7;box-shadow:0 20px 35px #20272018,0 0 0 1px #e6cc8320;z-index:2}
.logo-portfolio .portfolio-logo-slot:hover>img{scale:1.035}
}
.service{grid-template-columns:1.4fr 1.3fr}
@media(max-width:800px){.service{grid-template-columns:minmax(0,1fr)}.service>div:last-child,.service>.photo-art{grid-column:1}}
.expertise{padding-top:45px}.expertise>.service:first-child{border-top:0;padding-top:25px}
@media(max-width:800px){.expertise{padding-top:30px}.expertise>.service:first-child{padding-top:15px}}
.web-projects{padding:15px 0 65px}.project-display{position:relative;background:#e8e4d9;border-radius:18px;padding:45px 18% 55px 35px;isolation:isolate;overflow:hidden}.project-desktop{border:1px solid #20272020;border-radius:11px;overflow:hidden;box-shadow:0 20px 35px #20272020;background:#f0eee5}.project-browser-bar{display:flex;align-items:center;gap:5px;padding:11px 14px;background:#faf8f0}.project-browser-bar i{width:5px;height:5px;background:#b1b5a8;border-radius:50%}.project-browser-bar span{font-size:9px;letter-spacing:.1em;color:#707965;margin-left:12px}.project-desktop>img{display:block;width:100%;height:auto}.project-phone{position:absolute;right:4%;bottom:25px;width:18%;padding:6px;border:1px solid #ffffff55;background:#232624;border-radius:24px;box-shadow:0 20px 30px #0003}.project-phone-screen{height:clamp(200px,28vw,430px);overflow:hidden;border-radius:18px;background:#eeeae1}.project-phone-screen>img{display:block;width:100%;height:auto;max-width:none;will-change:transform}.project-phone-camera{position:absolute;top:10px;left:50%;translate:-50% 0;background:#232624;width:30%;height:9px;border-radius:10px;z-index:2}.project-caption{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:20px}.project-caption h3{font:600 25px Manrope,sans-serif;letter-spacing:-.04em;margin:0}.project-caption>span{font-size:13px;color:#626c60}.project-next{border-top:1px solid #20272020;margin-top:30px;padding-top:20px;color:#747c6c}.project-next>span{font-size:10px;letter-spacing:.1em}.project-next>p{font-size:14px;margin:7px 0 0}
@media(max-width:800px){.web-projects{padding:10px 0 40px}.project-display{padding:28px 18% 45px 15px;border-radius:12px}.project-phone{right:3%;width:24%;padding:4px;border-radius:14px;bottom:20px}.project-phone-screen{height:180px;border-radius:10px}.project-phone-camera{top:7px;height:5px}.project-browser-bar{padding:8px}.project-browser-bar span{font-size:7px;margin-left:4px}.project-desktop{border-radius:6px}.project-caption h3{font-size:22px}.project-caption>span{font-size:11px}.project-display{min-height:260px}}
.web-project+.web-project{margin-top:55px}.web-project:nth-child(2) .project-display{background:#e4ded2}
@media(max-width:800px){.web-project+.web-project{margin-top:35px}}
/* Refined device frame: separate hardware details from the scrolling viewport. */
.project-phone{padding:22px 6px 17px;background:#202321;border:1px solid #71756e;border-radius:28px;box-shadow:0 18px 32px #20272025,0 3px 6px #0002,inset 0 0 0 1px #ffffff14}
.project-phone-screen{height:auto;aspect-ratio:9/18.5;border-radius:17px;isolation:isolate;position:relative}
.project-phone-camera{top:8px;width:22%;height:5px;border-radius:5px;background:#090b0a;box-shadow:0 0 0 1px #ffffff08}
.project-phone::after{content:'';position:absolute;bottom:6px;left:35%;width:30%;height:3px;background:#c4c7bf;border-radius:3px;opacity:.7}
.project-phone::before{content:'';position:absolute;left:-3px;top:23%;width:2px;height:12%;border-radius:2px;background:#656b61}
@media(max-width:800px){.project-phone{padding:13px 3px 10px;border-radius:17px}.project-phone-screen{height:auto;aspect-ratio:9/18.5;border-radius:11px}.project-phone-camera{top:5px;height:3px;width:22%}.project-phone::after{bottom:4px;height:2px}.project-phone::before{left:-2px;width:1px}}
/* iPhone-inspired titanium shell and a separate status area. */
.project-phone{padding:29px 5px 15px;border:2px solid #a4a39b;border-radius:32px;background:#111311;box-shadow:0 20px 40px #10180f35,0 3px 6px #0003,inset 0 0 0 1px #e1dfd055;overflow:visible}
.project-phone-screen{border-radius:0 0 23px 23px;aspect-ratio:9/18.4;background:#f1eee5}
.project-phone-camera{top:8px;left:50%;width:29%;height:10px;background:#000;border-radius:10px;box-shadow:inset -5px 0 0 #0a100f;z-index:4}
.project-phone-status{position:absolute;top:5px;left:7px;right:7px;height:21px;display:flex;justify-content:space-between;align-items:center;padding:0 9px;color:#fff;font:600 7px/1 system-ui,sans-serif;letter-spacing:-.02em}
.phone-status-icons{display:flex;align-items:center;gap:4px;font-size:6px}.phone-status-icons i{display:block;width:11px;height:6px;border:1px solid #fff9;border-radius:2px;background:linear-gradient(90deg,#fff 80%,transparent 80%)}
.project-phone::after{bottom:5px;left:34%;width:32%;height:3px;background:#f4f4ee;opacity:.9}
.project-phone::before{left:-4px;top:22%;width:2px;height:10%;background:#8a8b82;border-radius:2px;box-shadow:0 29px 0 #8a8b82}
.project-phone-status::after{content:'';position:absolute;right:-11px;top:70px;width:2px;height:30px;background:#8a8b82;border-radius:2px}
@media(max-width:800px){.project-phone{padding:20px 3px 10px;border-width:1.5px;border-radius:21px}.project-phone-screen{border-radius:0 0 15px 15px}.project-phone-camera{top:5px;width:29%;height:7px}.project-phone-status{top:3px;height:14px;left:3px;right:3px;padding:0 4px;font-size:5px}.phone-status-icons{gap:2px;font-size:4px}.phone-status-icons i{width:7px;height:4px}.project-phone::after{bottom:4px;height:2px}.project-phone::before{left:-3px;width:1.5px;box-shadow:0 18px 0 #8a8b82}.project-phone-status::after{right:-7px;top:40px;height:20px;width:1.5px}}
.project-phone{width:22%;aspect-ratio:984.2822/1924.761644;padding:0;border:0;border-radius:0;background:none;box-shadow:none;bottom:10px;right:2%}
.project-device-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.project-phone .project-phone-screen{position:absolute;left:10.8%;right:11.5%;top:10.2%;bottom:9%;height:auto;aspect-ratio:auto;border-radius:0 0 14px 14px;background:#fff;z-index:1}
.project-phone::before,.project-phone::after{content:none}
@media(max-width:800px){.project-phone{width:29%;padding:0;border:0;border-radius:0;right:1%;bottom:10px}.project-phone .project-phone-screen{border-radius:0 0 8px 8px}}
/* Transparent replacement frame sits above the full screen, not behind it. */
.project-phone{aspect-ratio:984.2822/1843.253426}
.project-device-frame{z-index:3}
.project-phone .project-phone-screen{left:10.3%;right:11.2%;top:4.8%;bottom:4.2%;border-radius:14% / 6.8%;z-index:1;overflow:hidden;background:#fff}
@media(max-width:800px){.project-phone{aspect-ratio:984.2822/1843.253426}.project-phone .project-phone-screen{border-radius:14% / 6.8%}}
/* A dedicated iPhone status area, separate from the scrolling website. */
.web-project .project-phone{--phone-status-color:#746f67}
.web-project:nth-child(2) .project-phone{--phone-status-color:#4c382b}
.project-phone::before{content:'';position:absolute;left:10.3%;right:11.2%;top:4.8%;width:auto;height:8%;background:var(--phone-status-color);border-radius:25px 25px 0 0;box-shadow:none;z-index:1}
.project-phone .project-phone-screen{top:10.5%;bottom:4.2%;border-radius:0 0 14% 14% / 0 0 6.8% 6.8%}
@media(max-width:800px){.project-phone::before{left:10.3%;top:4.8%;width:auto;height:8%;border-radius:15px 15px 0 0;box-shadow:none}.project-phone .project-phone-screen{top:10.5%;border-radius:0 0 14% 14% / 0 0 6.8% 6.8%}}
.project-phone .project-phone-screen{top:12%}
.project-phone::before{height:9%}
@media(max-width:800px){.project-phone .project-phone-screen{top:12%}.project-phone::before{height:9%}}
.project-phone .project-phone-screen{top:11.25%}
@media(max-width:800px){.project-phone .project-phone-screen{top:11.25%}}
/* The visible digits match the battery outline's height and vertical position.
   JavaScript compensates for system font metrics; the right edge stays fixed. */
.project-phone .project-clock{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:4;color:#fff;pointer-events:none;overflow:visible}
.project-phone .project-live-time{fill:currentColor;opacity:.9;font:600 32.5px system-ui,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.541355px;font-variant-numeric:tabular-nums}
.project-phone.phone-status-dark .project-clock{color:#000}
.project-caption>div>span{display:block;font-size:13px;color:#626c60;margin-top:7px}.project-visit{font-size:15px;color:#65532f;display:inline-flex;gap:14px;align-items:center;border-bottom:1px solid #a2874d66;padding:8px 0;transition:color .2s}.project-visit:hover{color:#202720}.project-visit span{transition:transform .25s}.project-visit:hover span{transform:translate(2px,-2px)}
@media(max-width:800px){.project-caption{align-items:flex-start;flex-wrap:wrap;gap:12px}.project-caption>div>span{font-size:11px}.project-visit{font-size:13px}}
.more-projects{display:flex;justify-content:center;margin-top:38px}.more-projects-button{display:inline-flex;align-items:center;gap:28px;background:#e6cc83;color:#202720;border:0;border-radius:30px;padding:16px 26px;font:600 15px/1.4 'DM Sans',sans-serif}.more-projects-button:disabled{opacity:1;cursor:default}.more-projects-button>span{font-size:20px}
@media(max-width:800px){.more-projects{margin-top:28px}.more-projects-button{font-size:14px;padding:14px 23px}}
.service .design-art.logo-portfolio{height:auto;grid-template-rows:none;grid-auto-rows:auto}.logo-portfolio .portfolio-logo-slot{aspect-ratio:1.3}.logo-portfolio .portfolio-logo-slot.logo-last-odd{grid-column:1/-1;width:calc(50% - 10px);justify-self:center;--fan-x:0;--fan-y:-1;--fan-turn:6deg}
@media(max-width:800px){.service .design-art.logo-portfolio{height:auto}.logo-portfolio .portfolio-logo-slot.logo-last-odd{width:calc(50% - 8px)}}
@media(prefers-reduced-motion:no-preference){
.scroll-motion .logo-portfolio .portfolio-logo-slot.logo-last-odd{transform-origin:center;transform:translate3d(0,calc((1 - var(--portfolio-entry))*-155%),0) rotate(calc((1 - var(--portfolio-entry))*9deg)) scale(calc(.86 + var(--portfolio-entry)*.14));z-index:1}
@media(max-width:800px){.scroll-motion .logo-portfolio .portfolio-logo-slot.logo-last-odd{transform:translate3d(0,calc((1 - var(--portfolio-entry))*-155%),0) rotate(calc((1 - var(--portfolio-entry))*9deg)) scale(calc(.9 + var(--portfolio-entry)*.1))}}
}
.cms-grid{margin-top:0;align-items:start}.cms-title-group>.eyebrow{display:block;color:#535e4e;margin-bottom:22px}.cms-title-group>h2{margin:0}.cms-grid>.cms-title-group+div{padding-top:40px}
@media(prefers-reduced-motion:no-preference){.scroll-motion .cms-title-group{transform:translate3d(0,calc((.5 - var(--travel,.5))*65px),0)}}
@media(max-width:800px){.cms-title-group>.eyebrow{margin-bottom:20px}.cms-grid>.cms-title-group+div{padding-top:15px}.cms-title-group>h2{font-size:43px}}
.about-copy>.eyebrow{display:block;margin-bottom:22px}.about-year-column{align-self:center;align-items:center;justify-content:center;gap:0}.about-year-column .year-art{align-self:center;text-align:center;display:block;width:max-content;max-width:100%}.about-year-column .year-art>span{text-align:center;letter-spacing:.04em}
@media(max-width:800px){.about-year-column{justify-content:center;align-items:center;order:2;width:100%}.about-copy{order:0}.about-portrait{order:1}.about-year-column .year-art{font-size:85px}.about-copy>.eyebrow{margin-bottom:20px}}
/* Paper lift: separate soft shadows beneath the two lower corners. */
.review-sheet{overflow:visible;max-height:none;padding:0;box-shadow:0 1px 2px #29261c12,0 3px 5px #29261c08;isolation:isolate}
.review-paper-content{position:relative;max-height:calc(100svh - 200px);overflow:auto;padding:30px 35px;border-radius:inherit;background:#faf8f0}
.review-sheet::before,.review-sheet::after{content:'';position:absolute;bottom:12px;width:43%;height:18px;z-index:-1;pointer-events:none;background:#30291e14;box-shadow:0 11px 14px #30291e38;transition:transform .4s ease,box-shadow .4s ease}
.review-sheet::before{left:15px;transform:skewY(-4deg) rotate(-3deg)}.review-sheet::after{right:15px;transform:skewY(4deg) rotate(3deg)}
@media(hover:hover){.review-sheet:hover::before{transform:skewY(-2deg) rotate(-2deg);box-shadow:0 7px 12px #30291e2b}.review-sheet:hover::after{transform:skewY(2deg) rotate(2deg);box-shadow:0 7px 12px #30291e2b}}
@media(max-width:800px){.review-paper-content{padding:24px;max-height:calc(100svh - 170px)}.review-sheet::before,.review-sheet::after{width:40%;bottom:10px;box-shadow:0 9px 12px #30291e30}}

/* CMS collections: keep image sizing and the stack effect independent of item count. */
.logo-portfolio .portfolio-logo-slot>img{max-width:var(--logo-scale,85%);max-height:95%}
.logo-portfolio .portfolio-logo-slot:nth-child(2n){--fan-x:-1}
.logo-portfolio .portfolio-logo-slot.logo-last-odd{--fan-x:0}

/* Contact form: warm paper fields with clear interaction states. */
.contact-panel #contact-form{min-width:0}
.contact-panel .contact-fields{gap:20px}
.contact-panel label{font-size:13px;line-height:1.5;font-weight:600;margin-bottom:18px}
.navigation .contact-panel input,.navigation .contact-panel textarea{border:1px solid #20272024;border-radius:12px;background:#faf8f0b8;padding:14px 16px;margin-top:8px;font:400 16px/1.5 'DM Sans',sans-serif;color:#202720;box-shadow:0 2px 4px #20272003;transition:border-color .2s,background-color .2s,box-shadow .2s}
.navigation .contact-panel input::placeholder,.navigation .contact-panel textarea::placeholder{color:#73786e;opacity:1}
.navigation .contact-panel textarea{min-height:128px;resize:vertical}
.navigation .contact-panel input:hover,.navigation .contact-panel textarea:hover{border-color:#20272050}
.navigation .contact-panel input:focus,.navigation .contact-panel textarea:focus{outline:0;border-color:#92783e;background:#fffdf6;box-shadow:0 0 0 3px #a68c5129}
.contact-panel .contact-submit{gap:24px;margin-top:4px}
.contact-panel .contact-submit small{font-size:12px;line-height:1.65}
.contact-panel .contact-submit button{padding:15px 24px;border:1px solid #20272012;box-shadow:0 3px 8px #2027200a;transition:background .2s,box-shadow .2s,transform .2s}
.contact-panel .contact-submit button:hover:not(:disabled){background:#e8d29c;box-shadow:0 5px 12px #20272014;transform:translateY(-1px)}
.contact-panel .contact-submit button:focus-visible{outline:2px solid #92783e;outline-offset:4px}
.navigation.on-light .contact-panel input,.navigation.on-light .contact-panel textarea{background:#ffffff0c;border-color:#ffffff30;color:#f0eee5}
.navigation.on-light .contact-panel input::placeholder,.navigation.on-light .contact-panel textarea::placeholder{color:#bac2b3}
.navigation.on-light .contact-panel input:focus,.navigation.on-light .contact-panel textarea:focus{background:#ffffff14;border-color:#ddc58d;box-shadow:0 0 0 3px #ddc58d24}
@media(max-width:800px){
 .contact-panel .contact-fields{gap:0}
 .contact-panel label{margin-bottom:18px}
 .contact-panel .contact-submit{gap:16px}
 .navigation.on-light.menu-open .contact-panel input,.navigation.on-light.menu-open .contact-panel textarea{background:#faf8f0b8;border-color:#20272024;color:#202720}
 .navigation.on-light.menu-open .contact-panel input::placeholder,.navigation.on-light.menu-open .contact-panel textarea::placeholder{color:#73786e}
 .navigation.on-light.menu-open .contact-panel input:focus,.navigation.on-light.menu-open .contact-panel textarea:focus{background:#fffdf6;border-color:#92783e;box-shadow:0 0 0 3px #a68c5129}
}
@media(prefers-reduced-motion:reduce){.navigation .contact-panel input,.navigation .contact-panel textarea,.contact-panel .contact-submit button{transition:none}.contact-panel .contact-submit button:hover:not(:disabled){transform:none}}

@media(min-width:801px){
/* Expertise cards: layered paper and custom line icons. */
.navigation .services-menu a{--card-paper:#f5f2e9;--card-edge:#d5cfbf;isolation:isolate;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:10px 14px;position:relative;padding:20px;border:1px solid #20272018;border-radius:10px;background:var(--card-paper);box-shadow:none;color:#202720;transition:transform .25s,box-shadow .25s}
.navigation .services-menu a::before{content:'';position:absolute;inset:6px 4px -6px;z-index:-1;border:1px solid var(--card-edge);border-radius:inherit;background:var(--card-paper);transform:rotate(-1.5deg);transition:transform .25s}
.navigation .services-menu a:nth-child(2)::before{transform:rotate(1.5deg)}
.navigation .services-menu .service-menu-icon{grid-column:1;grid-row:1 / 3;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ad925149;border-radius:9px;background:#e7d7ab;color:#635226;box-shadow:inset 0 1px 0 #fff8}
.service-menu-icon svg{width:25px;height:25px}
.navigation .services-menu .service-menu-title{grid-column:2;grid-row:1;align-self:end;font-size:15px;line-height:1.4}
.navigation .services-menu a::after{content:'';grid-column:3;grid-row:1;align-self:start;display:grid;place-items:center;width:24px;height:24px;margin:0;border-radius:50%;background:transparent;color:#8c713a;font-size:18px}
.navigation .services-menu small{grid-column:2 / 4;grid-row:2;min-height:0;margin:0;font-size:13px;line-height:1.6;color:#646e61}
.navigation .services-menu a:focus-visible{outline:2px solid #92743a;outline-offset:5px}
@media(min-width:801px){
 .navigation.services-open{--dropdown-height:166px}
 .navigation .services-menu,.navigation .services-menu[hidden]{height:166px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:24px 28px 28px}
 .navigation .services-menu a{height:100%;align-content:center}
}
@media(hover:hover){.navigation .services-menu a:hover{background:var(--card-paper);color:#202720;transform:translateY(-2px);box-shadow:0 4px 10px #2027200c}.navigation .services-menu a:hover::before{transform:rotate(0) translateY(3px)}}
.navigation.on-light .services-menu a{--card-paper:#30382e;--card-edge:#68705b;border-color:#ffffff20;color:#f0eee5}
.navigation.on-light .services-menu small{color:#c0c7b9}
@media(max-width:800px){
 .navigation.menu-open .services-menu{padding:12px 0 16px;display:grid;gap:16px}
 .navigation.menu-open .services-menu a{padding:16px;gap:6px 12px}
 .navigation.menu-open .services-menu small{display:block;font-size:12px}
 .navigation.menu-open .services-menu .service-menu-title{font-size:15px}
 .navigation.on-light.menu-open .services-menu a{--card-paper:#f5f2e9;--card-edge:#d5cfbf;color:#202720}
 .navigation.on-light.menu-open .services-menu small{color:#646e61}
}
@media(prefers-reduced-motion:reduce){.navigation .services-menu a,.navigation .services-menu a::before{transition:none}}

/* Keep the expertise menu compact and precisely aligned. */
.navigation .services-menu a::before{display:none}
.navigation .services-menu a{row-gap:5px}
.navigation .services-menu .service-menu-icon{align-self:center}
.navigation.on-light .services-menu a{--card-paper:#ffffff05;border-color:#ffffff18}
.navigation .services-menu a:hover{border-color:#a68c5160}

}

@media(max-width:800px){
 .navigation .services-menu .service-menu-icon{display:none}
}

.project-authorship{display:block;margin-bottom:7px;font:500 10px/1.5 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#bdc4b6}

/* Process study: a schematic structure beside a finished project. */
 .process-preview{display:block;position:relative;margin:48px 25px 0 0;padding:0 0 0 0;max-width:560px;color:#353c31}
 .process-window{height:30px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #353c311c}
 .process-window i{width:5px;height:5px;border-radius:50%;background:#9c997f}
 .process-window span{margin-left:auto;font:600 8px/1.4 Manrope,sans-serif;letter-spacing:.12em}
 .process-wireframe{width:79%;border:1px solid #a19b8660;border-radius:8px;background:#eeeade;overflow:hidden}
 .wire-layout{padding:18px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
 .wire-nav{grid-column:1 / -1;height:12px;border-bottom:1px solid #a19b8640}
 .wire-copy{grid-column:span 3;display:flex;flex-direction:column;gap:7px;padding:14px 0}
 .wire-copy b{width:85%;height:8px;background:#b5b09b80;border-radius:2px}
 .wire-copy b:nth-child(2){width:65%;margin-bottom:8px}
 .wire-copy span{height:3px;background:#b5b09b60;width:95%}
 .wire-copy span:nth-of-type(2){width:75%}
 .wire-copy i{width:40%;height:14px;border:1px solid #a19b8660;border-radius:8px;margin-top:6px}
 .wire-image{grid-column:span 3;border:1px solid #a19b8650;background:#b5b09b10}
 .wire-image svg{width:100%;height:100%;stroke:#a19b8640;fill:none}
 .wire-tile{grid-column:span 2;height:32px;border:1px solid #a19b8640;border-radius:2px}
 .process-result{position:relative;width:85%;margin:-45px 0 0 auto;border:1px solid #353c3130;border-radius:8px;overflow:hidden;background:#faf8f0;box-shadow:0 12px 25px #353c3114}
 .process-result img{display:block;width:100%;height:auto;aspect-ratio:1.65;object-fit:cover;object-position:top}
 .process-preview figcaption{margin:20px 0 0;font:500 16px/1.6 'DM Sans',sans-serif;color:#5c6455}
 .process-preview figcaption>span{color:#92783e;margin-right:7px}
 .process-preview figcaption small{display:block;margin:6px 0 0 20px;font-size:14px;color:#626b59}

.event-wireframe{display:block;width:100%;height:auto;color:#a19b86;background:#eeeade}
@media(max-width:800px){
 .process-preview{width:100%;max-width:560px;margin:30px auto 0;padding:0}
 .process-wireframe{width:85%}
 .process-result{width:88%;margin-top:-30px}
 .process-window{height:28px;padding:0 10px;gap:5px}
 .process-window span{font-size:8px;letter-spacing:.08em}
 .process-preview figcaption{font-size:15px;line-height:1.5;margin-top:18px}
 .process-preview figcaption small{font-size:12px;margin-left:0}
}

/* Completed process: a green seal with a gently expanding ring. */
.steps .steps-complete{background:#487354;border:1px solid #3e6548;box-shadow:0 3px 8px #314d3824}
.steps-complete svg{width:23px;height:23px}
.steps-complete path{stroke:#fffdf6;stroke-width:2.7}
.steps .steps-complete::after{content:'';position:absolute;inset:-5px;border:1px solid #48735455;border-radius:50%;opacity:0;pointer-events:none}
.steps.is-complete .steps-complete::after{animation:steps-success-ring .9s ease-out .1s both}
@keyframes steps-success-ring{0%{opacity:0;transform:scale(.8)}35%{opacity:1}100%{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.steps .steps-complete,.steps-complete path{transition:none}.steps.is-complete .steps-complete::after{animation:none}}

.footer-identity .footer-drawing{display:block;width:90px;height:92px;flex-shrink:0;overflow:visible}
.footer-identity .footer-drawing{width:76px;height:78px}
@media(max-width:800px){.footer-identity .footer-drawing{width:50px;height:52px}}

/* Opening study: the maker's mark draws itself behind the introduction. */
.hero .hero-blueprint{position:absolute;left:4%;top:20px;width:min(60vw,850px);height:auto;transform:rotate(-13deg);opacity:.16;pointer-events:none;z-index:0}
.hero-grid,.hero-bottom{position:relative;z-index:1}
.hero-blueprint>g path,.hero-blueprint>g circle,.hero-blueprint>path,.hero-blueprint>polygon{stroke-dasharray:1;stroke-dashoffset:1;animation:hero-blueprint-draw 1.8s cubic-bezier(.22,.61,.36,1) var(--draw-delay,.2s) both}
@keyframes hero-blueprint-draw{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@media(max-width:800px){.hero .hero-blueprint{width:90%;left:0;top:35px;opacity:.1}}
@media(prefers-reduced-motion:reduce){.hero-blueprint>g path,.hero-blueprint>g circle,.hero-blueprint>path,.hero-blueprint>polygon{animation:none;stroke-dashoffset:0}}

.hero .hero-blueprint{width:clamp(130px,15vw,220px);left:49%;top:40%;transform:translate(-50%,-50%) rotate(-13deg);opacity:.2}
@media(max-width:800px){.hero .hero-blueprint{width:120px;left:auto;right:5%;top:42%;transform:rotate(-13deg);opacity:.12}}

.hero .hero-blueprint{opacity:.38}
@media(max-width:800px){.hero .hero-blueprint{opacity:.25}}

/* Simple topic labels, styled as quiet rounded chips. */
.service .tags{gap:9px;margin-top:26px}
.service .tags>span{display:inline-block;padding:7px 15px;border:1px solid #56634f22;border-radius:999px;background:#56634f08;box-shadow:none;color:#56614f;font-size:13px;font-weight:400;line-height:1.5}
@media(max-width:800px){.service .tags{gap:7px}.service .tags>span{padding:6px 12px;font-size:12px}}

.service .tags>span{display:inline-flex;align-items:center;gap:8px}
.service .tags>span>svg{width:16px;height:16px;flex-shrink:0;color:#947b43}
@media(max-width:800px){.service .tags>span{gap:7px}.service .tags>span>svg{width:15px;height:15px}}

.service .tags>span{font-size:14px}
@media(max-width:800px){.service .tags>span{font-size:13px}}

/* Vector arrows retain their shape and inherit the surrounding text colour on mobile. */
.arrow-up-right{display:inline-block;width:1em;height:1em;vertical-align:-.1em;flex-shrink:0}
.navigation .services-menu a::after{border-radius:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E") center/contain no-repeat}

/* Give the mobile portrait room to extend beyond the right edge. */
@media(max-width:800px){
 .hero{overflow:visible}
 .hero .shield-composition{width:120%;max-width:none;justify-self:start;margin:0 0 45px 12%}
 .hero .maker-note{left:-5%;bottom:0}
}

/* Mobile portfolio: a complete desktop preview behind the main phone. */
@media(max-width:800px){
 .web-project .project-display{display:flow-root;padding:24px 5% 20px;margin-left:0;min-height:0;border-radius:16px;background:#e8e4d9}
 .web-project .project-desktop{position:absolute;top:24px;left:5%;width:90%;max-width:none;margin:0;border-radius:7px;box-shadow:0 10px 22px #20272018}
 .web-project .project-phone{position:relative;width:52%;right:auto;bottom:auto;margin:70px 0 0 auto;z-index:2}
}

/* Keep the background sketch clear of the enlarged mobile portrait. */
@media(max-width:800px){.hero .hero-blueprint{top:calc(42% - 160px);opacity:.65}}

.arrow-down-right{transform:rotate(90deg)}

/* Read the introduction, meet the maker, then continue to the work. */
@media(max-width:800px){
 .hero-grid .hero-copy{display:contents}
 .hero-grid .hero-copy>h1{order:0}
 .hero-grid .hero-copy>p{order:1}
 .hero .shield-composition{order:2;margin-bottom:10px}
 .hero-grid .hero-copy>.round-link{order:3;margin:5px 0 30px;position:relative;z-index:4}
}

@media(max-width:800px){
 html.mobile-overlay-open,html.mobile-overlay-open body{background:#f8f7f2;overscroll-behavior:none}
 html.mobile-overlay-open{overflow:hidden}
 html.mobile-overlay-open main,html.mobile-overlay-open footer{visibility:hidden}
 body.mobile-menu-open::after{inset:-100px 0;min-height:calc(100dvh + 200px)}
}

.site-symbol{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}
.maker-symbol .site-symbol{display:block}

/* Website in cijfers: centered on the light page surface. */
.site-numbers.section{--ink:#202720;--muted:#60675e;--gold:#8a6c32;--line:#20272026;background:#f3f1e9;color:var(--ink);padding-top:56px;padding-bottom:72px}
.site-numbers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:center;gap:40px;max-width:1320px;margin:0 auto;border-top:1px solid var(--line);padding-top:56px;text-align:center}
.site-number{min-width:0}
.site-number p{color:var(--muted);margin:0;font-size:15px;line-height:1.6}
.site-number strong{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:16px 0 20px;color:var(--ink);font:800 clamp(52px,6.3vw,96px)/1.15 Manrope,sans-serif;letter-spacing:-.055em;white-space:nowrap}
.site-number strong>span{font-variant-numeric:tabular-nums}
.site-number small{color:var(--gold);font-size:.43em;letter-spacing:-.03em}
.review-stars{display:inline-block;position:relative;color:#757c70;font-size:20px;line-height:1.3;letter-spacing:3px;white-space:nowrap;margin-top:18px}.review-stars-fill{position:absolute;left:0;top:0;overflow:hidden;color:#8a6c32}
@media(max-width:600px){.site-numbers.section{padding-top:24px;padding-bottom:40px}.site-numbers-grid{grid-template-columns:1fr;gap:24px;padding-top:32px}.site-number{padding-bottom:24px;border-bottom:1px solid var(--line)}.site-number strong{font-size:64px;margin:10px 0 12px}.site-number:last-child{border-bottom:0;padding-bottom:0}}

/* Code-editor illustration, with window chrome and a separate file tab. */
.service .code-art{padding:0;overflow:hidden;background:#101315;border:1px solid #ffffff18;border-radius:14px;box-shadow:0 20px 45px #0002;color:#e3e7ec}
.code-art .window-bar{position:relative;flex-shrink:0;min-height:44px;padding:0 18px;gap:17px;background:#1c2024;border-bottom:1px solid #ffffff0a;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#92999f}
.code-art .editor-window-controls{display:flex;gap:7px;flex-shrink:0}
.code-art .window-bar i{width:9px;height:9px;background:#ff5f57}.code-art .window-bar i:nth-child(2){background:#febc2e}.code-art .window-bar i:nth-child(3){background:#28c840}
.code-art .window-bar>span{margin-left:0}.code-art .window-bar .editor-window-menu{margin-left:auto;font-size:20px;letter-spacing:1px}.code-art .editor-window-label{color:#68717a}
.editor-tabbar{display:flex;flex-shrink:0;background:#171b1e;border-bottom:1px solid #ffffff09;padding-left:12px}
.editor-tab{display:flex;align-items:center;gap:9px;max-width:100%;padding:10px 14px;border-top:1px solid var(--gold);background:#101315;font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c7cdd1}
.editor-file-icon{color:#e6a36d}.editor-unsaved{width:5px;height:5px;border:1px solid #89939b;border-radius:50%;margin-left:14px}
.editor-code-area{display:flex;align-items:center;flex:1;min-height:0;padding:14px 18px 14px 0;overflow:hidden}
.editor-line-numbers{flex:0 0 43px;align-self:center;text-align:right;padding-right:14px;color:#4d5963;border-right:1px solid #ffffff08;font:12px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;user-select:none}
.service .code-art pre{flex:1;min-width:0;margin:0;padding:0 0 0 16px;font:12px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:visible;color:#8bbcf0}
.code-art pre code{font:inherit}.code-art pre .syntax-tag{color:#e8a36c}.code-art pre .syntax-property{color:#8bbcf0}.code-art pre .syntax-value{color:#8ed5a6;font-weight:400}
.editor-statusbar{display:flex;justify-content:space-between;gap:12px;flex-shrink:0;padding:5px 18px;border-top:1px solid #ffffff09;background:#171b1e;font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#77838c}.editor-statusbar>span{display:flex;align-items:center;gap:12px}.editor-status-dot{width:5px;height:5px;border-radius:50%;background:#8ed5a6}
.service .code-art .code-preview{padding:16px 20px;margin:0;background:#1b2220;border-top:1px solid #ffffff12;font-size:18px}.code-art .code-preview>b{display:grid;place-items:center;width:40px;height:40px;padding:9px;flex-shrink:0}
@media(max-width:600px){.code-art .window-bar{padding:0 14px;gap:12px}.code-art .editor-window-label{display:none}.service .code-art pre{font-size:11px;padding-left:11px}.editor-line-numbers{flex-basis:33px;padding-right:10px;font-size:11px}.editor-code-area{padding-right:10px}.service .code-art .code-preview{padding:14px 18px;font-size:17px}}

/* Start the hero illustrations when visible, and reserve their own mobile space. */
.hero-blueprint.blueprint-ready>g path,.hero-blueprint.blueprint-ready>g circle,.hero-blueprint.blueprint-ready>path,.hero-blueprint.blueprint-ready>polygon{animation-play-state:paused}
.hero-blueprint.blueprint-enter>g path,.hero-blueprint.blueprint-enter>g circle,.hero-blueprint.blueprint-enter>path,.hero-blueprint.blueprint-enter>polygon{animation-play-state:running}
@media(max-width:800px){
 .hero-grid>.hero-copy{order:0}
 .hero .hero-grid>.hero-blueprint{position:relative;order:1;inset:auto;display:block;width:120px;height:120px;justify-self:end;margin:26px 4% 24px 0;transform:rotate(-13deg);opacity:.65}
 .hero .hero-grid>.shield-composition{order:2;margin-top:26px}
}


/* Fixed geometry: logos are paired; each printed design fills one column. */
.graphic-stage{position:relative;width:100%;min-width:0;max-width:100%;overflow:visible;overflow-anchor:none;scroll-margin-top:100px}
#graphic-design{min-width:0}
.graphic-panel{position:relative;min-width:0;width:calc(100% + var(--graphic-bleed,0px));max-width:none}
.graphic-gallery{width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:20px 0;direction:ltr;-webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000);mask-image:linear-gradient(to right,transparent,#000 64px,#000)}
.graphic-gallery::-webkit-scrollbar{display:none}
.graphic-track{display:flex;box-sizing:content-box;width:100%;height:clamp(440px,calc(100svh - 240px),600px);gap:20px;will-change:transform}
.graphic-track::after{content:none}
.graphic-column{flex:0 0 calc((100% - var(--graphic-bleed,0px) - 20px)/2);min-width:0;height:100%}
.graphic-logo-column{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}
.graphic-print-column{display:flex}.graphic-print-column>.graphic-card{width:100%;height:100%}
.graphic-end-space{flex:0 0 max(0px,calc(var(--graphic-bleed,0px) - 20px))}
.graphic-card{--card-entry:1;--card-turn:-8deg;--card-rise:24px;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin:0;padding:20px;background:#faf8f1;border:1px solid #20272014;border-radius:14px;box-shadow:0 10px 25px #20272009;transform-origin:85% 65%;opacity:calc(.25 + var(--card-entry)*.75);transform:translate3d(calc((1 - var(--card-entry))*44px),calc((1 - var(--card-entry))*var(--card-rise)),0) rotate(calc((1 - var(--card-entry))*var(--card-turn))) scale(calc(.9 + var(--card-entry)*.1));will-change:transform,opacity}
.graphic-card:nth-child(even){--card-turn:7deg;--card-rise:-24px}
.graphic-artwork{display:flex;align-items:center;justify-content:center;min-height:0;flex:1}
.graphic-artwork>img{display:block;object-fit:contain;width:var(--logo-scale,85%);height:100%;max-width:100%;max-height:100%;min-height:0}
.graphic-card figcaption{flex-shrink:0;margin-top:12px;text-align:center;font-size:11px;color:#646b5d;line-height:1.5}
.graphic-scroll-hint{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#73785f;margin-top:0;padding-right:var(--graphic-bleed,0px)}
.graphic-stage.is-horizontal .graphic-gallery{overflow-x:clip}
.graphic-stage.is-horizontal #graphic-design{position:sticky;top:var(--graphic-sticky-top,85px);border-top:0;min-height:var(--graphic-min-height,calc(100svh - 100px));margin:0;padding-top:25px;padding-bottom:25px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:6%;align-items:center}
@media(max-width:800px){
 .graphic-panel{width:100vw;margin-left:calc(50% - 50vw);max-width:none;flex-shrink:0}
 .graphic-gallery{-webkit-mask-image:none;mask-image:none;padding:20px 0}
 .graphic-track{height:500px;gap:20px}
 .graphic-column{flex-basis:85vw}.graphic-end-space{flex-basis:max(0px,calc(7vw - 20px))}
 .graphic-logo-column{position:relative;display:flex;flex-basis:85vw}
 .graphic-logo-column:has(>.graphic-card:nth-child(2)){flex-basis:calc(170vw + 20px)}
 .graphic-logo-column>.graphic-card{flex:0 0 85vw;height:100%}
 .graphic-card{padding:18px;transform-origin:90% 75%}
 .graphic-stage.is-horizontal #graphic-design{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:16px;width:100%;height:auto;max-height:none;padding-top:25px;padding-bottom:25px}
 .graphic-stage.is-horizontal #graphic-design>div:first-child{flex-shrink:0}
 .graphic-stage.is-horizontal #graphic-design h3{font-size:30px;margin-bottom:12px}.graphic-stage.is-horizontal #graphic-design h3 br{display:none}
 .graphic-stage.is-horizontal #graphic-design p{font-size:14px;line-height:1.6;margin-bottom:12px}.graphic-stage.is-horizontal #graphic-design .tags{margin-top:8px}
 .graphic-scroll-hint{font-size:10px;padding:0 7vw}
}
@media(prefers-reduced-motion:reduce){.graphic-card{opacity:1;transform:none;will-change:auto}.graphic-track{will-change:auto}}

/* Paper-like arrival: restrained depth, staggered cards and a soft landing. */
.graphic-card{isolation:isolate;transform-origin:75% 50%;backface-visibility:hidden;opacity:calc(.82 + var(--card-entry)*.18);transform:perspective(1200px) translate3d(calc((1 - var(--card-entry))*56px),calc((1 - var(--card-entry))*var(--card-rise)*.55),0) rotateY(calc((1 - var(--card-entry))*-10deg)) rotateZ(calc((1 - var(--card-entry))*var(--card-turn)*.4)) scale(calc(.975 + var(--card-entry)*.025));box-shadow:0 5px 14px #2027200a}
.graphic-card::before{content:'';position:absolute;inset:10px 12px 2px;border-radius:inherit;z-index:-1;box-shadow:0 17px 24px #20272025;opacity:calc((1 - var(--card-entry))*.7);pointer-events:none}
.graphic-logo-column>.graphic-card:nth-child(2){transform-origin:70% 35%}
.graphic-print-column>.graphic-card{--card-turn:-5deg;--card-rise:16px;transform-origin:85% 50%}
@media(max-width:800px){.graphic-card{transform-origin:80% 50%}}
@media(prefers-reduced-motion:reduce){.graphic-card{opacity:1;transform:none}.graphic-card::before{opacity:0}}

/* A little personality inside the expanded mobile bar; the jelly shell stays intact. */
.nav-identity-line{display:none}.menu-label{display:none}
@media(max-width:800px){
 .navigation .brand{gap:11px;min-width:0}
 .navigation .brand>.nav-identity{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;line-height:1.2}
 .nav-identity-name{display:block;font-size:12px;font-weight:700;letter-spacing:.025em;white-space:nowrap}
 .navigation .nav-identity-line{display:block;font:500 11px/1.25 'DM Sans',sans-serif;letter-spacing:0;color:#6c735f;opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .25s ease}
 .navigation.on-light .nav-identity-line{color:#d3c398}
 .navigation .nav-identity-line.is-changing{opacity:0;transform:translateY(-5px)}
 .navigation:not(.nav-collapsed) .menu-toggle,.navigation.menu-open .menu-toggle{width:78px;min-width:78px;gap:10px;padding:10px 5px;transition:width .65s var(--nav-jelly),min-width .65s var(--nav-jelly)}
 .navigation .menu-toggle .menu-label{display:block;width:34px;font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.015em;opacity:1;transition:opacity .18s ease,width .45s var(--nav-jelly);white-space:nowrap}
 .navigation .menu-toggle .menu-label::after{content:none}
 .navigation.nav-collapsed:not(.menu-open) .menu-toggle .menu-label{width:0;opacity:0;overflow:hidden;pointer-events:none}
 .navigation.nav-collapsed:not(.menu-open) .menu-toggle{gap:0}
 .navigation.menu-open .nav-identity-line{color:#6c735f}
}
@media(max-width:360px){.navigation .brand{gap:8px}.nav-identity-name{font-size:11px}.navigation .nav-identity-line{font-size:10px}.navigation:not(.nav-collapsed) .menu-toggle{width:70px;min-width:70px;gap:7px}}
@media(prefers-reduced-motion:reduce){.navigation .nav-identity-line{transition:none}}
@media(max-width:800px){.navigation.menu-open .menu-toggle .menu-label{font:500 11px/1 'DM Sans',sans-serif}.navigation.menu-open .menu-toggle .menu-label::after{content:none}}



/* CMS scale is measured against the full artwork area, without hidden padding. */
.graphic-card{padding:0}
.graphic-artwork{position:relative;overflow:hidden;border-radius:13px 13px 0 0}
.graphic-artwork>img{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--logo-scale,85%);height:var(--logo-scale,85%);object-fit:contain;max-width:100%;max-height:100%}
.graphic-card figcaption{margin:0;padding:12px 18px 16px}

/* A quiet paper lift, independent of the scroll-driven card transform. */
@media(hover:hover) and (pointer:fine){
 .graphic-card:not(.graphic-placeholder){transition:translate .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease,border-color .3s ease,background-color .3s ease}
 .graphic-card:not(.graphic-placeholder) .graphic-artwork>img{transition:scale .55s cubic-bezier(.22,1,.36,1)}
 .graphic-card:not(.graphic-placeholder) figcaption{transition:color .3s ease}
 .graphic-card:not(.graphic-placeholder):hover{translate:0 -6px;background:#fffdf7;border-color:#b29a6066;box-shadow:0 16px 28px -10px #40351e30,0 5px 10px #40351e0c;z-index:2}
 .graphic-card:not(.graphic-placeholder):hover .graphic-artwork>img{scale:1.025}
 .graphic-card:not(.graphic-placeholder):hover figcaption{color:#806719}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
 .graphic-card:not(.graphic-placeholder):hover{translate:none}
 .graphic-card:not(.graphic-placeholder):hover .graphic-artwork>img{scale:1}
}

.more-designs{display:flex;justify-content:center;margin:38px 0 60px}
@media(max-width:800px){.more-designs{margin:28px 0 35px}}

/* Slow pools of warm light behind the hero, with the existing grid visible. */
body .hero::after{
 content:'';position:absolute;inset:-240px 0 0;z-index:-1;pointer-events:none;
 border-radius:0 0 38px 38px;
 background-image:radial-gradient(ellipse at center,rgba(221,197,141,.19) 0%,rgba(221,197,141,.07) 28%,transparent 65%),radial-gradient(ellipse at center,rgba(151,170,106,.12) 0%,transparent 62%);
 background-size:85% 115%,75% 100%;background-position:120% 10%,-65% 95%;background-repeat:no-repeat;
 animation:hero-warm-glow 24s ease-in-out infinite alternate;
}
@keyframes hero-warm-glow{
 0%{background-position:120% 10%,-65% 95%;opacity:.75}
 50%{background-position:65% 65%,10% 30%;opacity:1}
 100%{background-position:0% 20%,100% 85%;opacity:.85}
}
@media(max-width:800px){
 body .hero::after{top:-180px;border-radius:0 0 26px 26px;background-size:130% 90%,110% 85%}
 body.portfolio-page .portfolio-hero::after{top:-240px}
}
@media(prefers-reduced-motion:reduce){body .hero::after{animation:none;background-position:85% 20%,0% 80%;opacity:.85}}

/* Preserve the original portrait colours; sharp responsive sources handle detail. */
.portrait-shield img,.about-portrait img{filter:none}

/* Clip photo and rim together, so every point keeps the same border width. */
.shield-frame{background:none}
.shield-frame .portrait-shield{inset:0;transform:none;-webkit-mask:none;mask:none}
.shield-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:url('/assets/home/portrait-shield-rim.svg') center/contain no-repeat}
@media(prefers-reduced-motion:no-preference){
 .scroll-motion .shield-frame{transform:rotate(calc(8deg + (var(--shield-travel) - .5)*9deg))}
 .scroll-motion .shield-frame .portrait-shield{transform:none}
}

@font-face{font-family:'Nothing You Could Do';src:url('/assets/fonts/nothing-you-could-do/NothingYouCouldDo.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Only the personal name gets the handwritten treatment. */
.review-author>div{min-width:0}
.review-author strong{font-family:'Nothing You Could Do',cursive;font-weight:400;font-size:25px;line-height:1.4;letter-spacing:0;overflow-wrap:anywhere}
@media(max-width:800px){.review-author strong{font-size:23px}}

/* Fine paper grain stays behind the text and preserves the lifted corners. */
.review-paper-content{background-color:#faf8f0;background-image:url('/assets/home/paper-grain.svg'),linear-gradient(115deg,#ffffff38,transparent 55%,#bcae8c0a);background-size:180px 180px,100% 100%}
.review-paper-top{gap:16px}
.review-paper-top>.review-stars{margin-top:0;font-size:20px;line-height:1.3;letter-spacing:2px;flex-shrink:0}
@media(max-width:800px){.review-paper-top{gap:10px}.review-paper-top>.review-stars{font-size:17px;letter-spacing:1px}}

/* Warm yellow stars with an occasional light sweep across the filled rating. */
.review-stars-fill{color:#e5ae21;text-shadow:0 1px 2px #b17c0920}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .review-stars-fill{background-image:linear-gradient(110deg,#e2a51b 0%,#f2c745 36%,#fff4bd 46%,#fffdf0 50%,#f2c745 58%,#e2a51b 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
}
@media(prefers-reduced-motion:no-preference){
 .review-stars-fill{animation:review-stars-shine 7s ease-in-out infinite}
 .review-stars::after{content:'';position:absolute;right:9%;top:-.1em;width:.6em;height:.6em;background:#fff9df;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);pointer-events:none;opacity:0;animation:review-stars-twinkle 7s ease-in-out infinite}
 @keyframes review-stars-shine{0%,74%{background-position:100% 0}94%,100%{background-position:0% 0}}
 @keyframes review-stars-twinkle{0%,82%,96%,100%{opacity:0;transform:scale(.4) rotate(-15deg)}88%{opacity:1;transform:scale(1.05) rotate(10deg)}}
}

/* Individual split-flap numerals, arranged as 20 / 02 in the narrow desktop column. */
.retro-year{width:min(100%,190px);margin:0}
.retro-year-digits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.retro-digit{position:relative;display:block;aspect-ratio:.75;perspective:450px;container-type:inline-size;--flip-top:-90deg;--flip-bottom:0deg;filter:drop-shadow(0 3px 2px #0005)}
.digit-half{position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden;background:#eee7d5 url('/assets/home/paper-grain.svg');color:#344132;border:1px solid #b8ac9060}
.digit-top{top:0;border-radius:5px 5px 0 0;background-color:#e3dccb}
.digit-bottom{bottom:0;border-radius:0 0 5px 5px;background-color:#f4eddb}
.digit-half>span{position:absolute;left:0;top:0;width:100%;height:200%;display:flex;align-items:center;justify-content:center;font:700 clamp(35px,5vw,80px)/1 'Arial Narrow','Helvetica Neue',sans-serif;font-size:90cqw;letter-spacing:-.065em;padding-right:.065em;font-variant-numeric:lining-nums tabular-nums}
.digit-bottom>span{top:-100%}
.digit-flap-top{z-index:3;transform-origin:center bottom;transform:rotateX(var(--flip-top))}
.digit-flap-bottom{z-index:4;transform-origin:center top;transform:rotateX(var(--flip-bottom))}
.retro-digit::after{content:'';position:absolute;top:calc(50% - 1px);left:0;right:0;height:2px;background:#292d25cc;box-shadow:0 1px 1px #fff5;z-index:5;pointer-events:none}
.retro-digit::before{content:'';position:absolute;left:-2px;right:-2px;top:calc(50% - 4px);height:8px;border-inline:3px solid #8f8b78;z-index:6;pointer-events:none}
.retro-year figcaption{font:10px/1.7 'DM Sans',sans-serif;letter-spacing:.06em;text-align:center;text-transform:uppercase;color:#aeb8a4;margin-top:22px}
@media(max-width:800px){.retro-year{width:min(100%,340px);margin-top:12px}.retro-year-digits{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.retro-year figcaption{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.digit-flap-top{transform:rotateX(-90deg)}.digit-flap-bottom{transform:none}}
/* Contact confirmation: a signed delivery card. */
.contact-panel #contact-form.is-sent> :not(.contact-confirmation){display:none}
.contact-confirmation[hidden]{display:none}
.contact-panel .contact-confirmation{position:relative;isolation:isolate;overflow:hidden;padding:34px clamp(24px,4vw,48px);border:1px solid #c4a45a;border-radius:24px;background:linear-gradient(125deg,#f5e5ab 0%,#ecd184 60%,#e3bf68 100%);color:#302b1d;box-shadow:0 18px 45px #15211818}
.contact-confirmation-icon{display:block;width:64px;height:64px;margin-bottom:22px;color:#66501f}
.contact-confirmation-icon svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1.6}
.contact-confirmation-icon path{stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.contact-confirmation-eyebrow{display:block;color:#66501f;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.contact-panel .contact-confirmation h3{font:500 clamp(28px,3vw,42px)/1.15 Manrope,sans-serif;letter-spacing:-.05em;margin:0 0 16px;color:#302b1d;outline:none}
.contact-panel .contact-confirmation-copy{font-size:14px;line-height:1.8;color:#594d32;max-width:360px;margin:0 0 24px}
.contact-confirmation-signature{display:block;font-family:'Nothing You Could Do',cursive;font-weight:400;font-size:30px;line-height:1.4;letter-spacing:0;color:#594d32}
.contact-panel .contact-confirmation-again{display:flex;align-items:center;gap:24px;border:0;border-bottom:1px solid #66501f55;border-radius:0;padding:8px 0;margin-top:25px;background:transparent;color:#66501f;font:500 12px/1.5 'DM Sans',sans-serif;cursor:pointer}
.contact-confirmation-again:focus-visible{outline:2px solid #66501f;outline-offset:5px}
@media(prefers-reduced-motion:no-preference){
 .contact-confirmation{animation:contact-arrive .55s cubic-bezier(.2,.8,.2,1) both}
 .contact-confirmation-icon circle{transform-origin:center;animation:contact-seal .6s .1s both}
 .contact-confirmation-icon path{stroke-dasharray:40;animation:contact-check .55s .35s both}
 @keyframes contact-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
 @keyframes contact-seal{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
 @keyframes contact-check{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
}

/* Inline contact notices share the warm yellow confirmation palette. */
.contact-panel .form-status.contact-notice{display:flex;align-items:flex-start;gap:16px;margin:22px 0 0;padding:21px 23px;border:1px solid #c4a45a80;border-radius:16px;background:linear-gradient(125deg,#f5e5ab,#ecd184);color:#302b1d;text-align:left}
.contact-notice-icon{display:block;flex:0 0 34px;width:34px;height:34px;color:#66501f}
.contact-notice-icon svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-notice-content{display:block;min-width:0}
.contact-panel .contact-notice-content strong{display:block;font:600 18px/1.35 Manrope,sans-serif;letter-spacing:-.035em;color:#302b1d;margin:0 0 6px}
.contact-panel .contact-notice-content>span{display:block;font:400 13px/1.7 'DM Sans',sans-serif;color:#594d32;overflow-wrap:anywhere}
@media(max-width:500px){.contact-panel .form-status.contact-notice{padding:18px;gap:12px}}
@media(prefers-reduced-motion:no-preference){.contact-notice{animation:contact-arrive .3s ease-out both}}

/* Emmen as a fine architectural signature, framed by a quiet horizon. */
.studio-footer{padding-bottom:32px}
.footer-skyline{width:min(920px,100%);margin:44px auto 0;pointer-events:none;text-align:center}
.footer-skyline-horizon{overflow:hidden}
.footer-skyline-art{display:block;width:100%;height:auto;opacity:.8}
.footer-skyline-caption{display:block;margin-top:14px;padding-left:.34em;font:500 9px/1.5 'DM Sans',sans-serif;letter-spacing:.34em;color:#b8a374}
@media(max-width:800px){.studio-footer{padding-bottom:28px}.footer-skyline{margin-top:34px}.footer-skyline-art{width:180%;max-width:none;margin-left:-40%}}

/* Replay the contour on entry; reveal the caption after the trace finishes. */
@media(prefers-reduced-motion:no-preference){
 .footer-skyline.draw-ready .footer-skyline-caption{opacity:0}
 .footer-skyline.draw-ready.is-drawn .footer-skyline-caption{animation:skyline-details .5s 3.2s forwards}
 .footer-skyline.draw-ready .st2{stroke-dasharray:1;stroke-dashoffset:1}
 .footer-skyline.draw-ready #Laag_3,.footer-skyline.draw-ready .st0{opacity:0}
 .footer-skyline.draw-ready.is-drawn .st2{animation:skyline-trace 3.2s cubic-bezier(.3,.1,.3,1) forwards}
 .footer-skyline.draw-ready.is-drawn #Laag_3,.footer-skyline.draw-ready.is-drawn .st0{animation:skyline-details .6s 2.6s forwards}
 @keyframes skyline-trace{to{stroke-dashoffset:0}}
 @keyframes skyline-details{to{opacity:1}}
}

/* Project introductions share their full story with the portfolio page. */
.project-caption>div{min-width:0;flex:1}.home-project-details>.project-excerpt{max-width:none;margin:0;color:var(--muted);font-size:14px;line-height:1.85}.project-read-more{display:inline-block;color:inherit;font-weight:600;border-bottom:1px solid currentColor;white-space:nowrap;line-height:1.5;transition:color .2s}.project-read-more:hover{color:#65532f}.project-caption>.project-visit{flex-shrink:0;align-self:flex-start}
@media(max-width:800px){.project-caption>div{flex-basis:100%}.home-project-details>.project-excerpt{font-size:13px}}

.home-project-details{margin-top:20px}

.project-excerpt-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.project-excerpt .project-read-more{margin-top:4px}
@media(max-width:800px){.project-excerpt-text{-webkit-line-clamp:3;line-clamp:3}}

/* Shared feedback for the gold calls to action. */
.more-projects-button,.navigation:not(.menu-open) nav>a.nav-contact{transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,translate .25s ease}
.more-projects-button>span,.navigation:not(.menu-open) nav>a.nav-contact>span{display:inline-flex;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.more-projects-button:focus-visible,.navigation:not(.menu-open) nav>a.nav-contact:focus-visible{outline:2px solid #8a6c32;outline-offset:5px;background:#f1d995;color:#202720;box-shadow:0 6px 18px #65532f26}
@media(hover:hover) and (pointer:fine){
 .more-projects-button:hover,.navigation:not(.menu-open) nav>a.nav-contact:hover{background:#f1d995;color:#202720;translate:0 -3px;box-shadow:0 9px 22px -7px #65532f55}
 .more-projects-button:hover>span,.navigation:not(.menu-open) nav>a.nav-contact:hover>span{transform:translate(3px,-3px)}
}
.more-projects-button:active,.navigation:not(.menu-open) nav>a.nav-contact:active{translate:0 0;box-shadow:0 2px 8px #65532f22}
@media(prefers-reduced-motion:reduce){
 .more-projects-button,.more-projects-button>span,.navigation:not(.menu-open) nav>a.nav-contact,.navigation:not(.menu-open) nav>a.nav-contact>span{transition:none;translate:none;transform:none}
 .more-projects-button:hover>span,.navigation:not(.menu-open) nav>a.nav-contact:hover>span{transform:none}
}

/* One sliding pill connects the CMS demo tabs. */
.cms-demo-tabs{position:relative;isolation:isolate}
.cms-demo-tabs::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:0;top:0;width:var(--tab-width,0px);height:var(--tab-height,0px);transform:translate(var(--tab-x,0px),var(--tab-y,0px));border-radius:24px;background:#202720;box-shadow:0 3px 9px #20272018;opacity:0}
.cms-demo-tabs.has-sliding-selection::before{opacity:1;transition:transform .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1),height .4s ease}
.cms-demo-tabs.has-sliding-selection button[aria-selected="true"]{background:transparent}
.cms-demo-tabs button{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){.cms-demo-tabs button:not([aria-selected="true"]):hover{background:#2027200c;color:#202720;box-shadow:inset 0 0 0 1px #20272012}}
.cms-demo-tabs button:active{box-shadow:inset 0 0 0 1px #8a754750}
@media(prefers-reduced-motion:reduce){.cms-demo-tabs.has-sliding-selection::before,.cms-demo-tabs button{transition:none}.demo-pane:not([hidden]){animation:none}}

/* A celebratory spin for the comparison shields. */
.difference-check{perspective:450px}
.difference-check svg{transform-origin:center;transition:background-color .3s ease,scale .35s cubic-bezier(.22,1,.36,1),filter .3s ease}
@media(hover:hover) and (pointer:fine){
 .difference-check:hover svg{background:#83b58b;scale:1.28;filter:drop-shadow(0 3px 5px #0002)}
 .difference-check:hover path{stroke:#183d28}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .difference-check:hover svg{animation:comparison-shield-spin .85s cubic-bezier(.22,1,.36,1) both}
 .difference-check:hover path{animation:comparison-check-draw .45s ease .5s both}
}
@keyframes comparison-shield-spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes comparison-check-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.difference-check svg{transition:none}.difference-check:hover svg{scale:1}}

/* Quiet emphasis for each headline figure, without shifting the layout. */
.site-number strong{position:relative;transform-origin:center;transition:transform .35s cubic-bezier(.22,1,.36,1),color .3s ease}
.site-number strong::after{content:"";position:absolute;bottom:-10px;left:50%;width:56px;height:2px;border-radius:2px;background:var(--gold);opacity:0;transform:translateX(-50%) scaleX(0);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
@media(hover:hover) and (pointer:fine){
 .site-number:hover strong{color:var(--gold);transform:translateY(-5px) scale(1.035)}
 .site-number:hover strong::after{opacity:1;transform:translateX(-50%) scaleX(1)}
}
@media(prefers-reduced-motion:reduce){.site-number strong,.site-number strong::after{transition:none}.site-number:hover strong{transform:none}}

/* Outline first, then a rising pencil impression dissolves into the photograph. */
.portrait-filter-defs{position:absolute;pointer-events:none;overflow:hidden}
.portrait-shield .portrait-sketch{position:absolute;left:0;pointer-events:none;opacity:0;filter:url('#portrait-pencil')}
@media(prefers-reduced-motion:no-preference){
 .shield-ready .portrait-shield{clip-path:none;opacity:1;scale:1;rotate:0deg;translate:0 0;background:transparent}
 .shield-enter .portrait-shield{animation:none}
 .shield-ready .portrait-real{opacity:0}
 .shield-ready .portrait-sketch{opacity:0;translate:0 32px}
 .shield-enter .portrait-sketch{animation:portrait-pencil-arrive 1.25s 1.45s cubic-bezier(.22,1,.36,1) both,portrait-pencil-dissolve 1.3s 2.9s ease-in-out forwards}
 .shield-enter .portrait-real{animation:portrait-photo-develop 1.3s 2.9s ease-in-out both}
 .shield-enter .shield-frame{animation:shield-unveil .45s 1.35s ease-out both}
 .shield-enter .shield-draw{animation:contour-handoff .4s 1.8s both}
 .shield-enter .maker-note{animation:signature-arrival 1.25s 2.6s cubic-bezier(.16,1,.3,1) both}
}
@keyframes portrait-pencil-arrive{from{opacity:0;translate:0 32px;filter:url('#portrait-pencil') blur(12px)}to{opacity:1;translate:0 0;filter:url('#portrait-pencil') blur(0)}}
@keyframes portrait-pencil-dissolve{from{opacity:1}to{opacity:0}}
@keyframes portrait-photo-develop{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.portrait-shield .portrait-sketch{display:none}}