@font-face{font-family:Inter Tight;font-style:normal;font-weight:400;font-display:swap;src:url("./assets/inter-tight-0-2SXYEBFY.ttf") format("truetype")}@font-face{font-family:Inter Tight;font-style:normal;font-weight:500;font-display:swap;src:url("./assets/inter-tight-1-K76RZAKP.ttf") format("truetype")}@font-face{font-family:Inter Tight;font-style:normal;font-weight:600;font-display:swap;src:url("./assets/inter-tight-2-6H4O3PEG.ttf") format("truetype")}@font-face{font-family:Inter Tight;font-style:normal;font-weight:700;font-display:swap;src:url("./assets/inter-tight-3-KJM76OWN.ttf") format("truetype")}@font-face{font-family:Inter Tight;font-style:normal;font-weight:800;font-display:swap;src:url("./assets/inter-tight-4-WXP2IFT7.ttf") format("truetype")}:root{font-family:Inter Tight,Arial,sans-serif;color:#191919;background:#fafaf8;font-synthesis:none}*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #1669da;outline-offset:6px}p{line-height:1.5}h1,h2,h3,p{margin:0}h1,h2{font-weight:600;letter-spacing:-.065em;line-height:.97}h3{font-weight:500;letter-spacing:-.04em}svg{flex-shrink:0}.orange{color:#ee6a24}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.14em;font-weight:500;line-height:1.6}.section-pad{padding-left:5.5%;padding-right:5.5%}.nav{height:104px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:relative;z-index:5}.wordmark{font-size:32px;font-weight:700;letter-spacing:-2px}.wordmark span{font-size:10px;vertical-align:top;display:inline-block;margin:5px 0 0 4px;letter-spacing:0}.nav nav{display:flex;align-items:center;gap:40px;font-size:13px}.on-dark{color:#fff}.pill{border:1px solid #222;background:#202020;color:#fff;padding:15px 20px;border-radius:100px;display:inline-flex;align-items:center;gap:24px;font-size:13px;line-height:1.15;transition:.25s;width:fit-content}.pill.light{background:#fff;color:#222;border-color:#fff}.pill:hover,.pill:focus-visible{background-color:#123e79;color:#fff;border-color:#a7caff;background-image:linear-gradient(#9abdea30 1px,transparent 1px),linear-gradient(90deg,#9abdea30 1px,transparent 1px);background-size:9px 9px}.pill svg{transition:transform .25s}.pill:hover svg{transform:translate(2px,-2px)}.menu-toggle{display:none}.hero{margin:8px;border-radius:0 0 34px 34px;min-height:760px;height:calc(100svh - 16px);max-height:1050px;position:relative;overflow:hidden;background:#1a1917;color:#fff;display:flex;flex-direction:column}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-body{position:relative;display:flex;align-items:flex-end;justify-content:space-between;flex:1;padding:45px 5% 48px;gap:50px}.hero h1{font-size:clamp(100px,12.4vw,190px);line-height:.86;letter-spacing:-.065em;margin:24px 0 8px;font-weight:600}.hero-summary{width:215px;margin:0 0 5px}.hero-summary p{font-size:15px;line-height:1.5;margin-bottom:26px}.hero-bottom{position:relative;margin:0 5%;border-top:1px solid #ffffff55;padding:24px 0;display:flex;gap:54px;font-size:12px}.hero-location{margin-left:auto;color:#fffb;font-size:10px}.blueprint{position:relative;display:inline-block;isolation:isolate}.blueprint-layer{position:absolute;inset:-8px;padding:8px;color:transparent;-webkit-text-stroke:1px #c0dcff;background-color:#113f7e;background-image:linear-gradient(#9abdea30 1px,transparent 1px),linear-gradient(90deg,#9abdea30 1px,transparent 1px);background-size:18px 18px;clip-path:circle(0px at var(--x,50%) var(--y,50%));pointer-events:none;transition:clip-path .28s ease;box-shadow:inset 0 0 0 1px #bcd9ff;z-index:1}.blueprint:hover>.blueprint-layer{clip-path:circle(145px at var(--x,50%) var(--y,50%))}.pill .blueprint-layer{background:none;-webkit-text-stroke:0;color:#fff;box-shadow:none}.logos-section{padding:75px 0 0}.carousel-label{padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;color:#777}.icon-button{border:1px solid #ddd;background:transparent;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.logo-window{overflow:hidden;margin-top:28px}.logo-track{display:flex;width:max-content;animation:marquee 42s linear infinite}.logo-window:hover .logo-track,.logo-window.paused .logo-track{animation-play-state:paused}.logo-set{display:flex;align-items:center;gap:95px;padding-right:95px}.logo-item{width:125px;height:80px;display:flex;align-items:center;justify-content:center;gap:8px;filter:grayscale(1);opacity:.72}.logo-item img{max-width:125px;max-height:57px;object-fit:contain}.logo-item.invert img{filter:invert(1)}.logo-item.discovery img{width:124px;max-height:75px}.logo-item.symbol img{width:26px;height:38px}.logo-note{font-size:10px;color:#777;text-align:center;margin:28px 6% 0;line-height:1.6}.intro{padding-top:180px;padding-bottom:150px}.intro-layout{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:10%}.intro h2{font-size:clamp(48px,6.2vw,100px)}.intro-layout p{font-size:20px;max-width:270px;line-height:1.5}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.text-link{font-size:14px;display:inline-flex;gap:12px;align-items:center}.text-link:hover{color:#e86420}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px 28px}.project-image{aspect-ratio:1.4;overflow:hidden;position:relative;border-radius:6px;background:#e8e7e4}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .65s}.project:hover img{transform:scale(1.035)}.project-open{position:absolute;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;opacity:0;transform:translateY(12px);transition:.3s}.project:hover .project-open,.project:focus-visible .project-open{opacity:1;transform:none}.project-caption{display:flex;align-items:center;gap:16px;margin-top:23px}.project-caption h3{font-size:24px}.project-caption>span{margin-left:auto;color:#777;font-size:11px}.project-caption>svg{margin-left:10px}.offers{display:grid;grid-template-columns:1fr 1fr;margin-top:160px;margin-bottom:160px}.offers>a{border-top:1px solid #d7d7d1;padding:40px 0 0;position:relative}.offers>a:first-child{margin-right:45px}.offers>a:last-child{margin-left:45px}.offers h2{display:block;font-size:clamp(36px,3.9vw,64px);margin:32px 0 20px}.offers p{color:#777;font-size:15px}.offers>a>svg{position:absolute;right:0;bottom:0}.studio-tease{padding-top:120px;padding-bottom:140px;background:#eeeee9}.studio-tease h2{font-size:clamp(42px,5vw,80px);line-height:1.04;margin:35px 0 45px}footer{padding:90px 5.5% 26px}.footer-cta{display:flex;align-items:center;justify-content:space-between;margin:40px 0 90px;font-size:clamp(70px,11.5vw,180px);font-weight:600;line-height:.9;letter-spacing:-.065em}.footer-cta>svg{width:12vw;height:12vw}.footer-bottom{border-top:1px solid #d7d7d1;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:11px;color:#777}.footer-bottom .wordmark{color:#222}.footer-bottom a{display:flex;align-items:center;gap:6px}.inner-page{padding-top:100px;padding-bottom:100px}.inner-page h1{font-size:clamp(70px,11vw,170px);margin-top:30px}.page-intro{display:flex;justify-content:flex-end;margin:30px 0 85px;font-size:18px}.filters{display:flex;gap:12px;margin-bottom:35px}.filters button,.choice{border:1px solid #d5d5ce;background:transparent;border-radius:30px;padding:11px 20px;font-size:13px}.filters button.active,.choice.selected{background:#202020;color:#fff;border-color:#202020}.more-work{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:150px}.more-work h2{font-size:48px}.more-work>div>a{display:flex;justify-content:space-between;border-bottom:1px solid #d7d7d1;padding:20px 0}.case-page{padding-top:55px}.case-page>.eyebrow{margin:70px 0 25px}.case-page h1{font-size:clamp(60px,9vw,145px)}.case-image{width:100%;margin:60px 0 80px;max-height:850px;object-fit:cover;border-radius:8px}.case-description{display:grid;grid-template-columns:1fr 1fr;gap:12%;margin-bottom:100px}.case-description h2{font-size:54px}.case-description p{font-size:20px;margin-bottom:32px}.case-description .eyebrow{font-size:11px}.next-project{display:flex;justify-content:space-between;padding:30px 0;border-top:1px solid #ccc;font-size:25px}.studio-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;margin:120px 0}.studio-intro h2,.process h2{font-size:50px}.studio-intro p{font-size:21px;line-height:1.5}.studio-profile{padding:70px;background:#eeeee9}.studio-profile h2{font-size:60px;margin:24px 0 30px}.studio-profile>p{max-width:650px;font-size:23px}.experience{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid #ccc;padding-top:40px;margin-top:65px;gap:25px}.experience small{color:#666}.process{display:grid;grid-template-columns:1fr 1fr;gap:10%;margin-top:140px}.process h2{margin-top:30px}details{border-bottom:1px solid #ccc;padding:25px 0}summary{display:flex;align-items:center;gap:25px;list-style:none;font-size:27px;cursor:pointer}summary::-webkit-details-marker{display:none}summary span:first-child{font-size:12px;color:#888}summary span:last-child{margin-left:auto}details p{padding:25px 0 5px 40px;color:#666}.start-page{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding-bottom:130px}.start-page>div>p:not(.eyebrow){margin:40px 0 25px;font-size:20px}form{padding-top:30px}fieldset{padding:0;margin:0 0 40px;border:0}legend{margin-bottom:20px;font-size:14px}.choice{margin:0 8px 10px 0}label{display:block;font-size:14px;margin-bottom:30px}input,textarea{display:block;width:100%;border:none;border-bottom:1px solid #bbb;background:transparent;padding:15px 0;outline-offset:3px!important;border-radius:0;resize:vertical}input::placeholder,textarea::placeholder{color:#999}form>.pill{margin-top:10px}.email-ready{padding:25px;background:#eeeee9}.email-ready p{margin:10px 0 20px;font-size:14px}@keyframes marquee{to{transform:translate(-50%)}}@media(max-width:800px){.nav{height:85px;padding:0 6%}.nav nav{gap:22px}.hero{min-height:720px;max-height:900px}.hero h1{font-size:15vw}.hero-body{gap:20px;padding-top:50px}.hero-summary{width:180px}.hero-bottom{gap:25px}.hero-location{display:none}.intro{padding-top:110px;padding-bottom:100px}.intro-layout{gap:40px}.intro-layout p{font-size:16px;max-width:220px}.project-caption{flex-wrap:wrap;gap:8px}.project-caption h3{font-size:21px}.project-caption>span{margin-left:0}.project-caption>svg{margin-left:auto}.offers{margin-top:100px;margin-bottom:100px}.offers>a:first-child{margin-right:20px}.offers>a:last-child{margin-left:20px}.offers p{max-width:80%}.footer-bottom{flex-wrap:wrap}.studio-profile{padding:40px}.experience{grid-template-columns:1fr}.start-page{gap:7%}.inner-page{padding-top:70px}}@media(max-width:560px){.section-pad{padding-left:7%;padding-right:7%}.hero{margin:6px;min-height:780px;height:calc(100svh - 12px);border-radius:0 0 25px 25px;max-height:920px}.hero-art{object-position:58% center;opacity:.7}.nav{height:80px}.wordmark{font-size:29px}.menu-toggle{display:block;background:none;border:0;padding:8px}.nav nav{display:none;position:absolute;top:74px;left:0;right:0;padding:28px;background:#202020;color:#fff;align-items:flex-start;gap:26px;border-radius:12px}.nav nav.is-open{display:flex;flex-direction:column}.hero-body{padding:40px 7% 28px;display:block}.hero h1{font-size:25vw;line-height:.9;margin-top:25px}.hero .eyebrow{font-size:9px}.hero-summary{width:100%;margin-top:38px;display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-summary p{font-size:12px;margin:0}.hero-summary .pill{font-size:11px;padding:14px;gap:9px}.hero-bottom{gap:0;justify-content:space-between;padding:20px 0;font-size:10px;margin:0 7%}.logos-section{padding-top:50px}.logo-set{gap:55px;padding-right:55px}.logo-item{width:105px}.logo-item img{max-width:105px;max-height:48px}.logo-note{font-size:9px;margin-top:18px}.intro{padding-top:100px;padding-bottom:90px}.intro-layout{display:block;margin-top:25px}.intro h2{font-size:13.5vw}.intro-layout p{font-size:17px;max-width:280px;margin:36px 0 0 12%}.project-grid{grid-template-columns:1fr;gap:45px}.project-caption{margin-top:16px}.project-caption>span{margin-left:auto;font-size:10px}.section-heading .eyebrow{font-size:9px}.text-link{font-size:12px}.offers{grid-template-columns:1fr;gap:55px;margin:90px 0}.offers>a:first-child,.offers>a:last-child{margin:0;padding-top:28px}.offers h2{font-size:43px;margin-top:25px}.studio-tease{padding-top:75px;padding-bottom:80px}.studio-tease h2{font-size:39px}.footer-cta{font-size:19vw;margin:35px 0 60px}.footer-cta>svg{width:45px;height:45px}.footer-bottom{font-size:10px;gap:23px}.footer-bottom>span:nth-child(2){width:65%;text-align:right}.footer-bottom>span:last-child{margin-left:auto}footer{padding-top:65px}.inner-page{padding-top:65px;padding-bottom:50px}.inner-page h1{font-size:22vw}.page-intro{margin:35px 0 55px;font-size:16px}.more-work{grid-template-columns:1fr;margin-top:90px;gap:35px}.more-work h2{font-size:38px}.more-work a{font-size:14px}.case-page h1{font-size:16vw}.case-page>.eyebrow{margin-top:40px}.case-image{margin:40px 0;min-height:270px;object-fit:contain}.case-description,.studio-intro,.process,.start-page{grid-template-columns:1fr;gap:35px}.case-description h2{font-size:39px}.case-description p{font-size:17px}.studio-intro{margin:70px 0}.studio-intro h2,.process h2{font-size:39px}.studio-intro p{font-size:18px}.studio-profile{padding:35px 25px;margin:0 -4%}.studio-profile h2{font-size:42px}.studio-profile>p{font-size:18px}.experience{margin-top:40px}.process{margin-top:80px}.start-page form{padding-top:25px}.blueprint:hover>.blueprint-layer{clip-path:circle(85px at var(--x,50%) var(--y,50%))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.logo-window{overflow:auto}.logo-set[aria-hidden=true]{display:none}}@media(min-width:801px){.hero{max-height:880px}.hero h1{font-weight:700;font-size:clamp(100px,13.3vw,190px)}}.logo-item img[src$="rmb.svg"]{filter:brightness(0)}@media(max-width:560px){.hero .eyebrow{color:#fff;text-shadow:0 1px 5px #000}.hero h1{font-weight:700}}@media(min-width:801px){.hero{height:62vw;min-height:620px;max-height:880px}.hero-body{padding-top:20px}.hero h1{margin-top:18px}.intro h2{font-size:7vw;font-weight:700}.intro-layout{gap:7%}}.project-image.contain{background:#f0eeff}.project-image.contain img{object-fit:contain}.project-image.top img{object-position:top}.project:focus-visible,.website-card:focus-visible{outline:2px solid #cd511e;outline-offset:8px}.website-collection{margin:170px 0 70px}.collection-heading{margin-bottom:65px}.collection-heading h2{font-size:clamp(38px,5vw,76px);line-height:1.05;letter-spacing:-.05em;margin:25px 0}.website-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 30px}.website-card{display:block}.website-preview{overflow:hidden;border:1px solid #deded8;border-radius:7px;background:#eeede9}.browser-bar{height:30px;display:flex;align-items:center;gap:5px;padding:0 12px}.browser-bar i{width:5px;height:5px;background:#bcbcb5;border-radius:50%}.browser-bar span{margin:auto;font-size:9px;color:#666;letter-spacing:.03em;padding-right:24px}.website-preview img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;object-position:top;transition:transform .5s}.website-card:hover .website-preview img{transform:scale(1.025)}.website-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:23px}.website-heading h3{font-size:25px;letter-spacing:-.035em;margin:0}.website-card>p{color:#62625d;font-size:16px;line-height:1.6;max-width:480px;margin:14px 0 20px}.website-url{display:flex;align-items:center;gap:10px;font-size:12px;overflow-wrap:anywhere}.website-credit{display:block;font-size:11px;color:#666;margin-bottom:12px}.case-page .case-image{height:auto;max-height:none;object-fit:contain}.case-page .case-image.case-crop{height:650px;object-fit:cover;object-position:top}.case-story{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:55px;padding:60px 0 100px;border-top:1px solid #d8d8d2}.case-story h2{font-size:30px;letter-spacing:-.035em;line-height:1.15;margin:25px 0 20px}.case-story p{font-size:17px;line-height:1.7;color:#62625d}.case-gallery{display:grid;gap:65px}.case-gallery figure{margin:0}.case-gallery img{display:block;width:100%;height:auto}.case-gallery figcaption{display:flex;justify-content:space-between;gap:20px;color:#666;font-size:13px;padding-top:17px}.case-gallery figcaption span{display:flex;align-items:center;gap:7px;white-space:nowrap}.case-document{margin-bottom:70px}.case-page h1{overflow-wrap:anywhere}@media(max-width:560px){.website-collection{margin-top:100px}.collection-heading{margin-bottom:40px}.website-grid{grid-template-columns:1fr;gap:45px}.website-heading h3{font-size:23px}.website-card>p{font-size:15px}.case-story{grid-template-columns:1fr;gap:35px;padding:40px 0 65px}.case-gallery{gap:40px}.case-gallery figcaption{font-size:11px;flex-wrap:wrap}.case-page .case-image.case-crop{height:330px}.case-page .case-image{min-height:0}.website-url{font-size:11px}}.website-preview img{aspect-ratio:1.4;object-fit:contain}:root{background:#fff}.hero{background:#fff;color:#191919;height:auto;min-height:870px;max-height:none;border-radius:0;margin:0}.hero-art{inset:110px 1% auto auto;width:54%;height:620px;object-fit:contain;opacity:1;pointer-events:none}.hero-body{display:block;padding-top:35px;padding-bottom:45px;flex:none}.hero h1{font-size:clamp(100px,12vw,175px);line-height:.87}.hero-summary{width:auto;margin-top:35px}.hero-summary p{font-size:16px;margin-bottom:22px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-actions .pill:last-child{background:#fff;color:#193e59;border-color:#193e5960}.hero-actions .pill:last-child:hover{background:#193e59;color:#fff}.hero-bottom{margin-top:auto;border-color:#193e5926;color:#193e59}.hero-location{color:#506472}.hero .eyebrow{color:#ee6a24;text-shadow:none}.studio-tease{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4%;padding-top:100px;padding-bottom:100px;background:#fff;overflow:hidden;border-top:1px solid #193e591a}.studio-tease h2{font-size:clamp(38px,4.7vw,72px)}.jacaranda{margin:0;min-width:0;color:#193e59}.tree-stage{aspect-ratio:1;position:relative;overflow:hidden}.tree-still,.tree-growth{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}.tree-still{opacity:0}.tree-growth{display:block;pointer-events:none}.jacaranda figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #193e5926;font-size:11px}.tree-replay{display:flex;gap:8px;align-items:center;white-space:nowrap;border:0;background:none;padding:10px 0;color:#193e59;font-size:11px}.tree-replay:hover{text-decoration:underline}.studio-hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:3%}.studio-hero h1{font-size:clamp(65px,9.3vw,150px)}.studio-monogram{margin:0;min-width:0}.studio-monogram img{display:block;width:115%;height:auto;margin-left:-5%;max-width:none}.studio-monogram figcaption{font-size:10px;color:#536a7b;letter-spacing:.08em;text-transform:uppercase;text-align:right;margin-top:-10px}.studio-hero{overflow:hidden}.visual-footer{position:relative;isolation:isolate;overflow:hidden;background:#fff;color:#193e59;padding-top:90px}.footer-art{position:relative;display:block;width:112.36%;max-width:none;height:auto;margin:0 -6.18%;object-fit:contain;order:2;mask-image:linear-gradient(transparent,#000 25%);pointer-events:none}.visual-footer{display:flex;flex-direction:column}.visual-footer>.eyebrow{order:0}.visual-footer .footer-cta{order:1;margin-bottom:-40px;z-index:1;min-height:0}.visual-footer .footer-bottom{order:3;border-color:#193e5930;color:#536a7b;background:#fff;margin-top:0;padding-top:26px;z-index:1}.visual-footer .wordmark{color:#193e59}.visual-footer .footer-cta>svg{width:10vw;height:10vw}.visual-footer:after{display:none}@media(min-width:1600px){.hero-art{height:700px}.hero{min-height:930px}}@media(max-width:1000px)and (min-width:561px){.hero{min-height:820px}.hero-art{top:150px;width:53%;height:480px}.hero-summary{margin-top:40px}.hero h1{font-size:14vw}.studio-tease{gap:2%}}@media(max-width:800px){.studio-tease,.studio-hero{grid-template-columns:1fr}.jacaranda{width:100%;max-width:550px;margin:35px auto 0}.studio-monogram{width:100%;max-width:550px;margin:20px auto 0}.studio-monogram img{width:100%;margin:0}.studio-monogram figcaption{text-align:left}.studio-tease{padding-top:75px;padding-bottom:70px}}@media(max-width:560px){.hero{height:auto;min-height:0;max-height:none;margin:0;overflow:hidden}.hero .nav{order:0}.hero-body{order:1;padding:32px 7% 0;display:block}.hero h1{font-size:25vw;margin-top:24px}.hero-summary{margin-top:30px;width:100%;display:block}.hero-summary p{font-size:14px;margin-bottom:24px}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-summary .pill{width:100%;justify-content:space-between;min-height:48px;padding:15px 12px;font-size:12px;gap:6px}.hero-art{position:relative;order:2;inset:auto;display:block;width:85%;height:auto;margin:25px auto 10px;object-fit:contain;opacity:1}.hero-bottom{order:3;margin:0 7%;padding:22px 0}.hero .eyebrow{color:#ee6a24;text-shadow:none}.hero .nav nav.is-open{color:#fff}.studio-tease h2{font-size:39px}.jacaranda figcaption{font-size:10px;gap:10px}.tree-replay{font-size:10px}.studio-hero h1{font-size:19vw}.visual-footer{padding-top:65px}.visual-footer .footer-cta{font-size:18vw;margin:35px 0 0}.visual-footer .footer-cta>svg{width:42px;height:42px}.footer-art{width:150%;margin:0 -25%;max-width:none}.visual-footer .footer-bottom{font-size:10px;padding-top:24px}.footer-bottom>span:nth-child(2){max-width:61%}}@media(prefers-reduced-motion:reduce){.tree-still{opacity:1!important}.tree-growth,.tree-replay{display:none}}.hero-picture{display:contents}.scroll-reveal{opacity:0;translate:0 32px;transition:opacity .85s cubic-bezier(.2,.65,.3,1),translate .95s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}.scroll-reveal.is-revealed,.scroll-reveal:focus-within{opacity:1;translate:0 0}.hero-body>div:first-child{animation:hero-arrive .9s both}.hero-summary{animation:hero-arrive 1s .12s both}@keyframes hero-arrive{0%{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}.nav nav>a:not(.pill),.text-link,.website-url{position:relative}.nav nav>a:not(.pill):after,.text-link:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav nav>a:hover:after,.nav nav>a:focus-visible:after,.text-link:hover:after,.text-link:focus-visible:after{transform:scaleX(1)}.pill{transition:background-color .25s,color .25s,border-color .25s,transform .25s}.pill:active{transform:scale(.97)}.project-caption>svg,.website-heading>svg,.offers>a>svg,.footer-cta>svg,.text-link>svg,.tree-replay>svg{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}.project:focus-visible .project-open{opacity:1;transform:none}.process summary span:last-child{transition:transform .3s}.process details[open] summary span:last-child{transform:rotate(45deg)}.process details[open] p{animation:hero-arrive .35s both}.filters button,.choice{transition:background-color .25s,color .25s,transform .2s}.filters button:active,.choice:active{transform:scale(.95)}.studio-alchemist img{width:100%;margin:0;transition:transform .8s cubic-bezier(.2,.65,.3,1);transform-origin:50% 65%}.studio-alchemist figcaption{margin-top:12px;text-align:center}.studio-alchemist{padding:0 3%}.visual-footer>.eyebrow{color:#ae491e}.visual-footer .footer-cta>svg{color:#e66b29}.visual-footer .footer-cta:hover>svg{color:#7653a1}.footer-bottom a:hover{color:#b24922}@media(hover:hover)and (pointer:fine){.pill:hover{transform:translateY(-3px)}.project:hover .project-caption>svg,.website-card:hover .website-heading>svg,.offers>a:hover>svg,.text-link:hover>svg,.tree-replay:hover>svg{transform:translate(4px,-4px)}.footer-cta:hover>svg{transform:translate(8px,-8px) rotate(5deg)}.studio-alchemist:hover img{transform:translateY(-6px) rotate(-1deg)}.project:hover .project-open{transform:rotate(7deg)}.offers>a:hover h2{color:#193e59}}@media(max-width:560px){.hero{min-height:760px;min-height:max(760px,100svh);isolation:isolate}.hero-picture{display:block;position:absolute;inset:70px 0 45px;z-index:-2;overflow:hidden}.hero .hero-art{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:center right;opacity:.7;mask-image:linear-gradient(90deg,transparent 5%,#0003 38%,#000 84%)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#fff 3%,#fffffff2 19%,#fff0 50%,#fff9)}.hero-body{padding-top:32px;padding-bottom:36px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:70px}.hero h1{font-size:24vw;line-height:.9;max-width:100%;text-shadow:0 1px 14px #fffc}.hero-summary{margin-top:0;flex:0}.hero-summary p{font-size:14px;max-width:230px;text-shadow:0 1px 10px white}.hero-actions{width:100%}.hero-bottom{margin-top:auto}.studio-alchemist{padding:0 8%;max-width:440px}.studio-alchemist img{width:100%}.scroll-reveal{translate:0 22px}}@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1!important;translate:none!important;transition:none!important}.hero-body>div:first-child,.hero-summary,.process details[open] p{animation:none!important}.pill,.studio-alchemist img,.project img,.footer-cta>svg{transform:none!important}}@media(max-width:560px){.hero-body{align-items:stretch}.hero-body>div:first-child{width:100%}}.studio-profile{display:grid;grid-template-columns:1.25fr .8fr;gap:20px 6%;align-items:center;background:#f5f6f4;padding:60px}.profile-copy{min-width:0}.profile-copy h2{font-size:clamp(38px,4.3vw,64px)}.profile-copy>p{max-width:600px;font-size:21px;line-height:1.6}.profile-portrait{margin:0;max-width:360px;width:100%;justify-self:end;mix-blend-mode:multiply}.profile-portrait img{display:block;width:100%;height:auto}.studio-profile .experience{grid-column:1/-1;margin-top:20px;width:100%}@media(max-width:800px){.studio-profile{padding:35px;gap:35px;grid-template-columns:1fr}.profile-portrait{justify-self:center;max-width:320px;grid-row:2}.profile-copy>p{font-size:18px}.studio-profile .experience{margin-top:0}.profile-copy h2{font-size:42px}}@media(max-width:560px){.studio-profile{padding:35px 25px}.profile-portrait{max-width:275px}.profile-copy h2{font-size:39px}}.carousel-label{justify-content:flex-end}.studio-profile{position:relative;isolation:isolate;overflow:hidden;max-width:1280px;margin-inline:auto;grid-template-columns:minmax(0,600px) minmax(240px,320px);justify-content:center;column-gap:48px;padding:64px;background:#f2f4ee;border:1px solid #193e5933;box-shadow:inset 0 0 0 7px #f2f4ee,inset 0 0 0 8px #193e5920}.studio-profile:before{content:"";position:absolute;inset:17px;border:1px solid #193e591c;pointer-events:none;z-index:-1}.studio-profile:after{content:"CLDESC South Africa";position:absolute;left:34px;top:32px;color:#193e5966;font-size:8px;letter-spacing:.28em;pointer-events:none}.profile-copy,.studio-profile .experience{position:relative;z-index:1}.profile-copy h2{font-size:clamp(38px,3.5vw,55px)}.profile-copy>p{font-size:20px;max-width:580px}.profile-portrait{justify-self:start;max-width:320px;position:relative;z-index:1}.note-engraving{position:absolute;right:20px;top:22px;width:460px;height:460px;stroke:#193e59;stroke-width:.55;opacity:.12;z-index:0;pointer-events:none}.studio-profile .experience{border-color:#193e5926;padding-top:30px;margin-top:28px}.studio-profile .experience h3{font-size:16px}@media(max-width:1000px)and (min-width:801px){.studio-profile{padding:48px 40px;column-gap:28px;grid-template-columns:minmax(0,1fr) 260px}.profile-copy>p{font-size:18px}.note-engraving{right:-25px;width:400px;height:400px}}@media(max-width:800px){.studio-profile{grid-template-columns:1fr;padding:55px 35px 40px;gap:30px;max-width:620px}.profile-portrait{justify-self:center;max-width:300px;grid-row:2}.note-engraving{top:320px;right:50%;transform:translate(50%);width:420px;height:420px;opacity:.09}.profile-copy>p{font-size:18px}.studio-profile .experience{margin-top:0}.studio-profile:after{left:35px;top:30px}}@media(max-width:560px){.studio-profile{margin-inline:-4%;padding:55px 28px 35px}.profile-copy h2{font-size:37px}.profile-portrait{max-width:265px}.note-engraving{top:370px;width:360px;height:360px}.studio-profile:before{inset:12px}.studio-profile:after{left:28px;top:28px;font-size:7px}}:root{color-scheme:light dark}@media(prefers-color-scheme:dark){:root{background:#10171e;color:#edf1f3}.hero,.studio-tease,.visual-footer,.visual-footer .footer-bottom{background:#10171e;color:#edf1f3}.hero-art,.studio-alchemist img,.profile-portrait img,.tree-stage{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}.footer-art{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) saturate(.85)}.hero-bottom,.jacaranda figcaption,.studio-tease,.footer-bottom,.offers>a,.experience,details,.next-project,.case-story,.more-work>div>a{border-color:#b5c9d333}.hero-bottom,.hero-location,.jacaranda,.tree-replay,.studio-monogram figcaption,.visual-footer .wordmark,.visual-footer .footer-bottom{color:#b9d2e2}.orange,.hero .eyebrow,.visual-footer>.eyebrow{color:#ff995e}.pill,.filters button.active,.choice.selected{background:#edf1f3;color:#10171e;border-color:#edf1f3}.hero-actions .pill:last-child,.filters button,.choice{background:transparent;color:#edf1f3;border-color:#8094a1}.pill:hover,.pill:focus-visible,.hero-actions .pill:last-child:hover{background-color:#214d74;color:#fff;border-color:#b9d2e2}.project-open{background:#182c3c;color:#fff}.project-caption>span,.offers p,.website-card>p,.website-credit,.case-story p,.case-gallery figcaption,.experience small,details p,summary span:first-child{color:#aab9c4}.website-preview,.browser-bar,.email-ready{background:#1b2833;border-color:#41525e}.browser-bar span{color:#b9c7d0}input,textarea{color:#edf1f3;border-color:#7b8c98}input::placeholder,textarea::placeholder{color:#9aaab7}.studio-profile{background:#18252b;border-color:#a4c4c74d;box-shadow:inset 0 0 0 7px #18252b,inset 0 0 0 8px #a4c4c738}.studio-profile:before{border-color:#a4c4c72e}.studio-profile:after{color:#b5d3cf}.note-engraving{stroke:#b5d3cf;opacity:.16}.studio-profile .experience{border-color:#b5d3cf33}.logo-item{filter:grayscale(1) invert(1);opacity:.85}.icon-button{border-color:#6c7b87}.offers>a:hover h2{color:#b9d2e2}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#8cbfff}@media(max-width:560px){.hero:after{background:linear-gradient(0deg,#10171e 3%,#10171ef2 19%,#10171e00 50%,#10171e99)}.hero h1,.hero-summary p{text-shadow:0 1px 14px #10171e}.nav nav.is-open{background:#20303d;color:#edf1f3}}}@media(prefers-color-scheme:dark){.profile-portrait{mix-blend-mode:screen}}

/* ==========================================================================
   CLDESC refinement layer — v2
   Additive overrides only. Same layout, type and palette; tighter craft.
   Motion tokens follow a fast / base / slow / hero scale with one
   emphasised curve for entrances and a snappier curve for exits.
   ========================================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --t-fast:160ms;
  --t-base:280ms;
  --t-slow:560ms;
  --t-hero:900ms;
  --ink:#191919;
  --navy:#193e59;
  --accent:#ee6a24;
  --hair:#193e591f;
  --hair-strong:#193e5940;
  --radius-media:10px;
}
@media(prefers-color-scheme:dark){:root{--ink:#edf1f3;--navy:#b9d2e2;--hair:#b5c9d326;--hair-strong:#b5c9d34d}}

/* ---------- Type: optical tightening, kinder wrapping ---------- */
html{text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
body{font-feature-settings:"ss01" 0,"cv11" 1,"calt" 1;font-variant-numeric:tabular-nums}
h1,h2{letter-spacing:-.058em;text-wrap:balance}
.hero h1{letter-spacing:-.062em}
h3{text-wrap:balance}
p{text-wrap:pretty;hanging-punctuation:first}
.eyebrow{font-variant-numeric:tabular-nums;letter-spacing:.16em}
::selection{background:var(--navy);color:#fff}
@media(prefers-color-scheme:dark){::selection{background:#ff995e;color:#10171e}}

/* ---------- Illustrations sit on the page, not on a white card ---------- */
@media(prefers-color-scheme:light){
  .hero-art,.tree-stage,.studio-alchemist img,.footer-art{mix-blend-mode:multiply}
}

/* ---------- Page transition between routes ---------- */
#root>div{animation:page-in var(--t-slow) var(--ease-out) backwards}
@keyframes page-in{from{opacity:0}to{opacity:1}}

/* ---------- Focus: a calm, consistent ring ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline-width:2px;outline-offset:5px;border-radius:4px;transition:outline-offset var(--t-fast) var(--ease-out)}
.pill:focus-visible{border-radius:100px}

/* ---------- Navigation ---------- */
.nav nav>a:not(.pill){padding:6px 0;transition:opacity var(--t-fast) var(--ease-std)}
.nav nav:hover>a:not(.pill):not(:hover){opacity:.45}
.nav nav>a:not(.pill):after{transition:transform var(--t-base) var(--ease-out);transform-origin:right}
.nav nav>a:hover:after,.nav nav>a:focus-visible:after{transform-origin:left}
.nav nav>a[aria-current=page]:not(.pill):after{transform:scaleX(1)}
.wordmark{transition:opacity var(--t-fast) var(--ease-std)}
.wordmark:hover{opacity:.7}
.wordmark span{transition:transform var(--t-slow) var(--ease-out)}
.wordmark:hover span{transform:rotate(180deg)}

/* Floating header that returns when scrolling back up */
.float-nav{position:fixed;z-index:50;top:14px;left:50%;display:flex;align-items:center;gap:28px;height:56px;padding:0 8px 0 24px;
  border-radius:100px;background:#ffffffc7;border:1px solid var(--hair);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 1px 0 #ffffff inset,0 12px 32px -18px #193e5940;
  transform:translate(-50%,calc(-100% - 24px));opacity:0;pointer-events:none;
  transition:transform var(--t-slow) var(--ease-out),opacity var(--t-base) var(--ease-std)}
.float-nav.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.float-nav .wordmark{font-size:22px;letter-spacing:-1.4px;color:var(--ink)}
.float-nav .wordmark span{font-size:8px;margin:3px 0 0 3px}
.float-nav nav{display:flex;align-items:center;gap:26px;font-size:13px;color:var(--ink)}
.float-nav nav>a:not(.pill){position:relative;padding:6px 0;transition:opacity var(--t-fast) var(--ease-std)}
.float-nav nav:hover>a:not(.pill):not(:hover){opacity:.45}
.float-nav nav>a[aria-current=page]:not(.pill):after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.float-nav .pill{padding:11px 16px;gap:16px;font-size:12.5px}
@media(prefers-color-scheme:dark){.float-nav{background:#10171ec2;box-shadow:0 1px 0 #ffffff12 inset,0 14px 34px -18px #000c}}
@media(max-width:560px){.float-nav{display:none}}

/* Mobile menu: arrive, don't appear */
@media(max-width:560px){
  .nav nav.is-open{animation:menu-in var(--t-base) var(--ease-out) both;box-shadow:0 24px 48px -24px #0006}
  .nav nav.is-open>a{animation:menu-item var(--t-slow) var(--ease-out) both}
  .nav nav.is-open>a:nth-child(2){animation-delay:50ms}
  .nav nav.is-open>a:nth-child(3){animation-delay:100ms}
  .menu-toggle{border-radius:50%;transition:transform var(--t-fast) var(--ease-std)}
  .menu-toggle:active{transform:scale(.9)}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes menu-item{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Pills: tactile, with an arrow that travels through ---------- */
.pill{letter-spacing:-.005em;
  transition:background-color var(--t-base) var(--ease-std),color var(--t-base) var(--ease-std),border-color var(--t-base) var(--ease-std),transform var(--t-base) var(--ease-out)}
.pill:active{transform:scale(.97);transition-duration:90ms}
.pill:hover svg,.pill:focus-visible svg{animation:arrow-through .5s var(--ease-out) both}
.pill svg,.text-link>svg,.website-url>svg{transition:none}
@keyframes arrow-through{
  0%{transform:translate(0,0);opacity:1}
  40%{transform:translate(9px,-9px);opacity:0}
  41%{transform:translate(-9px,9px);opacity:0}
  100%{transform:translate(0,0);opacity:1}
}
@media(hover:hover)and (pointer:fine){.pill:hover{transform:translateY(-2px)}}

/* ---------- Blueprint reveal: softer lens ---------- */
.blueprint-layer{transition:clip-path .5s var(--ease-out)}

/* ---------- Hero: one composed entrance ---------- */
.hero-body>div:first-child{animation:hero-rise var(--t-hero) var(--ease-out) both}
.hero-summary{animation:hero-arrive var(--t-hero) var(--ease-out) .14s both}
.hero-art{animation:art-in 1.4s var(--ease-out) .05s both}
@keyframes hero-rise{from{opacity:0;translate:0 18px;clip-path:inset(0 0 40% 0)}to{opacity:1;translate:0 0;clip-path:inset(-20% -20% -20% -20%)}}
@keyframes hero-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes art-in{from{opacity:0;scale:1.035}to{opacity:1;scale:1}}
@media(max-width:560px){.hero-art{animation-name:art-in-m}}
@keyframes art-in-m{from{opacity:0}to{opacity:.7}}

/* Discipline line: numbered, drawn in */
.hero-bottom{counter-reset:disc;border-top-color:transparent;font-variant-numeric:tabular-nums}
.hero-bottom:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--hair-strong);transform-origin:left;animation:line-draw 1.1s var(--ease-out) .35s both}
.hero-bottom>span:not(.hero-location){counter-increment:disc;display:inline-flex;align-items:baseline;gap:8px;animation:hero-arrive var(--t-slow) var(--ease-out) both}
.hero-bottom>span:not(.hero-location):before{content:counter(disc,decimal-leading-zero);font-size:9px;letter-spacing:.08em;opacity:.55}
.hero-bottom>span:nth-child(1){animation-delay:.45s}
.hero-bottom>span:nth-child(2){animation-delay:.51s}
.hero-bottom>span:nth-child(3){animation-delay:.57s}
.hero-bottom>span:nth-child(4){animation-delay:.63s}
.hero-location{animation:hero-arrive var(--t-slow) var(--ease-out) .7s both}
@keyframes line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Logo strip: fade at the edges, wake on hover ---------- */
.logo-window{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logo-item{transition:filter var(--t-base) var(--ease-std),opacity var(--t-base) var(--ease-std)}
.logo-window:hover .logo-item{opacity:.4}
.logo-window .logo-item:hover{opacity:1;filter:grayscale(0)}
@media(prefers-color-scheme:dark){.logo-window .logo-item:hover{filter:grayscale(1) invert(1)}}
.icon-button{transition:background-color var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std),transform var(--t-fast) var(--ease-std)}
.icon-button:hover{border-color:var(--ink)}
.icon-button:active{transform:scale(.92)}

/* ---------- Scroll reveal: shorter travel, one calm curve ---------- */
.scroll-reveal{translate:0 18px;transition:opacity .8s var(--ease-out),translate .9s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
@media(max-width:560px){.scroll-reveal{translate:0 14px}}

/* Media in project cards opens like a shutter as it scrolls in */
.project-image,.website-preview{border-radius:var(--radius-media);transform:translateZ(0)}
.project.scroll-reveal .project-image{clip-path:inset(6% 4% 0 4% round var(--radius-media));transition:clip-path 1.1s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.project.scroll-reveal .project-image img{scale:1.08;transition:scale 1.4s var(--ease-out),transform .9s var(--ease-out),opacity .7s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.project.scroll-reveal.is-revealed .project-image{clip-path:inset(0 0 0 0 round var(--radius-media))}
.project.scroll-reveal.is-revealed .project-image img{scale:1}

/* Images fade in once decoded instead of popping */
.js-polish .project-image img,.js-polish .website-preview img,.js-polish .case-gallery img,.js-polish .case-image{opacity:0;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out),scale 1.4s var(--ease-out)}
.js-polish img.is-loaded{opacity:1!important}

/* ---------- Project cards ---------- */
.project{display:block}
.project-image img{transition:transform .9s var(--ease-out)}
.project:hover img{transform:scale(1.03)}
.project-image:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #193e590d;pointer-events:none}
.project-image{container-type:size}
.project-open{width:64px;height:64px;left:0;top:0;right:auto;bottom:auto;margin:-32px 0 0 -32px;
  translate:var(--cx,calc(100cqw - 64px)) var(--cy,calc(100cqh - 64px));
  transform:scale(.4);opacity:0;color:#191919;background:#fffffff0;
  box-shadow:0 10px 30px -12px #0006;
  transition:opacity var(--t-base) var(--ease-std),transform var(--t-slow) var(--ease-out)}
.project:hover .project-open,.project:focus-visible .project-open{opacity:1;transform:scale(1)}
@media(hover:hover)and (pointer:fine){.project:hover .project-open{transform:scale(1)}}
.project-caption h3{transition:color var(--t-base) var(--ease-std)}
.project-caption>span{font-size:11.5px;letter-spacing:.01em}
.project-caption>svg{transition:transform var(--t-base) var(--ease-out),opacity var(--t-base)}
.project-grid:hover .project:not(:hover) .project-caption{opacity:.55}
.project-caption{transition:opacity var(--t-base) var(--ease-std)}
@media(prefers-color-scheme:dark){.project-open{background:#edf1f3;color:#10171e}.project-image:after{box-shadow:inset 0 0 0 1px #ffffff12}}
@media(hover:none){.project-grid:hover .project:not(:hover) .project-caption{opacity:1}}

/* ---------- Filters ---------- */
.filters button,.choice{transition:background-color var(--t-base) var(--ease-std),color var(--t-base) var(--ease-std),border-color var(--t-base) var(--ease-std),transform var(--t-fast) var(--ease-std)}
.filters button:not(.active):hover,.choice:not(.selected):hover{border-color:var(--ink)}
.project-grid{animation:grid-in var(--t-slow) var(--ease-out) both}
@keyframes grid-in{from{opacity:.001}to{opacity:1}}

/* ---------- Offers: a rule that draws across on hover ---------- */
.offers>a{transition:color var(--t-base) var(--ease-std)}
.offers>a:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.offers>a:hover:before,.offers>a:focus-visible:before{transform:scaleX(1)}
.offers h2{transition:color var(--t-base) var(--ease-std),translate var(--t-slow) var(--ease-out)}
@media(hover:hover)and (pointer:fine){.offers>a:hover h2{translate:6px 0}}
.offers>a>svg{transition:transform var(--t-slow) var(--ease-out)!important}

/* ---------- Text links & website cards ---------- */
.text-link:after{transition:transform var(--t-base) var(--ease-out);transform-origin:right}
.text-link:hover:after,.text-link:focus-visible:after{transform-origin:left}
.text-link:hover>svg,.website-card:hover .website-url>svg{animation:arrow-through .5s var(--ease-out) both}
.case-page>.text-link:first-child{gap:10px}
.case-page>.text-link:first-child:before{content:"\2190";display:inline-block;transition:transform var(--t-base) var(--ease-out)}
.case-page>.text-link:first-child:hover:before{transform:translateX(-4px)}
.website-preview{transition:border-color var(--t-base) var(--ease-std),box-shadow var(--t-slow) var(--ease-out)}
.website-card:hover .website-preview{border-color:#c9c9c1;box-shadow:0 22px 44px -30px #193e5966}
.website-preview img{transition:transform .9s var(--ease-out)}
.browser-bar i{transition:background-color var(--t-base) var(--ease-std)}
.website-card:hover .browser-bar i:nth-child(1){background:#ff5f57}
.website-card:hover .browser-bar i:nth-child(2){background:#febc2e}
.website-card:hover .browser-bar i:nth-child(3){background:#28c840}
.website-heading>svg{transition:transform var(--t-slow) var(--ease-out)!important}
@media(prefers-color-scheme:dark){.website-card:hover .website-preview{border-color:#5b6d79}}

/* ---------- Case study ---------- */
.case-image{border-radius:var(--radius-media)}
.case-gallery img{border-radius:var(--radius-media);transition:transform .9s var(--ease-out),opacity .7s var(--ease-out)}
.case-gallery a{display:block;overflow:hidden;border-radius:var(--radius-media)}
@media(hover:hover)and (pointer:fine){.case-gallery a:hover img{transform:scale(1.012)}}
.case-gallery figcaption span{transition:opacity var(--t-base)}
.case-gallery figure:not(:hover) figcaption span{opacity:.6}
.next-project{position:relative;align-items:center;font-size:clamp(25px,3.2vw,44px);letter-spacing:-.04em;font-weight:500;padding:36px 0;transition:color var(--t-base) var(--ease-std)}
.next-project:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
.next-project:hover:before{transform:scaleX(1)}
.next-project>svg{transition:transform var(--t-slow) var(--ease-out)}
.next-project:hover>svg{transform:translateX(10px)}
.case-story section h2{transition:none}

/* ---------- Studio: process accordion opens smoothly ---------- */
details{interpolate-size:allow-keywords}
details::details-content{height:0;overflow:clip;transition:height var(--t-slow) var(--ease-out),content-visibility var(--t-slow) allow-discrete}
details[open]::details-content{height:auto}
summary{transition:padding-left var(--t-base) var(--ease-out),color var(--t-base) var(--ease-std)}
@media(hover:hover)and (pointer:fine){.process summary:hover{padding-left:6px}}
.process summary span:last-child{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--hair-strong);border-radius:50%;font-size:20px;font-weight:300;line-height:1;transition:transform var(--t-slow) var(--ease-out),background-color var(--t-base),color var(--t-base),border-color var(--t-base)}
.process details[open] summary span:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(prefers-color-scheme:dark){.process details[open] summary span:last-child{color:#10171e}}
.studio-alchemist img{transition:transform 1.1s var(--ease-out)}
.profile-portrait img{transition:transform 1.1s var(--ease-out)}
@media(hover:hover)and (pointer:fine){.studio-profile:hover .profile-portrait img{transform:scale(1.015)}}
.note-engraving{transform-origin:center;animation:slow-turn 90s linear infinite}
@keyframes slow-turn{to{rotate:360deg}}
@media(max-width:800px){.note-engraving{animation:none}}

/* ---------- Form: underline that draws on focus ---------- */
input,textarea{background-image:linear-gradient(var(--navy),var(--navy));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size var(--t-slow) var(--ease-out),border-color var(--t-base) var(--ease-std)}
input:focus,textarea:focus{outline:none;background-size:100% 2px;border-bottom-color:transparent}
input:focus-visible,textarea:focus-visible{outline:none!important}
label{transition:color var(--t-base) var(--ease-std)}
label:focus-within{color:var(--navy)}
input:user-invalid,textarea:user-invalid{border-bottom-color:#c8442b}
.email-ready{border-radius:var(--radius-media);animation:hero-arrive var(--t-slow) var(--ease-out) both}
@media(prefers-color-scheme:dark){input,textarea{background-image:linear-gradient(#b9d2e2,#b9d2e2)}}

/* ---------- Jacaranda caption & footer ---------- */
.tree-replay svg{transition:transform var(--t-slow) var(--ease-out)!important}
.tree-replay:hover svg{transform:rotate(-180deg)!important}
.tree-replay{text-underline-offset:4px}
.footer-cta>svg{transition:transform .8s var(--ease-out),color var(--t-base) var(--ease-std)!important}
.footer-bottom a{transition:color var(--t-fast) var(--ease-std)}
.footer-bottom a svg{transition:transform var(--t-base) var(--ease-out)}
.footer-bottom a:hover svg{transform:translate(2px,-2px)}

/* ---------- Reduced motion: everything still lands, nothing moves ---------- */
@media(prefers-reduced-motion:reduce){
  #root>div,.hero-art,.hero-bottom:before,.hero-bottom>span,.hero-location,.project-grid,.email-ready,.note-engraving,.nav nav.is-open,.nav nav.is-open>a{animation:none!important}
  .pill:hover svg,.text-link:hover>svg,.website-card:hover .website-url>svg,.pill:focus-visible svg{animation:none!important}
  .project.scroll-reveal .project-image{clip-path:none!important}
  .project.scroll-reveal .project-image img{scale:1!important}
  .js-polish img{opacity:1!important}
  .float-nav{transition:none!important}
  details::details-content{transition:none!important}
}

/* Website frames match the 16:9 captures — no empty band under each screenshot */
.website-preview img{aspect-ratio:1265/712;object-fit:cover;object-position:top}
.float-nav{gap:34px}

/* Mobile menu: larger targets, the call to action reads as a button */
@media(max-width:560px){
  .nav nav{left:12px;right:12px;top:76px;padding:30px 26px 26px;border-radius:18px;gap:22px}
  .nav nav.is-open>a:not(.pill){font-size:26px;letter-spacing:-.03em;font-weight:500}
  .nav nav.is-open>.pill{margin-top:10px;width:100%;justify-content:space-between;background:#fff;color:#191919;border-color:#fff;padding:16px 20px;font-size:14px}
  .nav nav.is-open>a[aria-current=page]:not(.pill){opacity:.55}
}
@media(max-width:560px)and (prefers-color-scheme:dark){.nav nav.is-open>.pill{background:#edf1f3;color:#10171e}}

/* Dark mode: the inverted illustrations blend with whatever sits behind them,
   so anything that forms its own layer carries the page colour as that backdrop */
@media(prefers-color-scheme:dark){#root>div,.studio-monogram,.jacaranda{background:#10171e}}

/* Dark mode portrait: shown true to the original ink on a soft paper card */
@media(prefers-color-scheme:dark){
  .profile-portrait{mix-blend-mode:normal;background:#efefed;border-radius:18px;padding:28px 18px 0;overflow:hidden;
    box-shadow:0 0 0 1px #ffffff14,0 30px 60px -30px #000c}
  .profile-portrait img{filter:none;mix-blend-mode:multiply}
}