:root{--bg:#f7f8fa;--ink:#18191d;--muted:#69717f;--blue:#1465ef;--line:#dfe4ec;--display:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;--body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--ink);font:16px var(--body);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}::selection{background:#c8ddff}.skip{position:fixed;top:-70px;left:20px;padding:12px;background:white;z-index:100}.skip:focus{top:10px}.reading-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,#71c1ff,#1465ef,#936cf3);transform:scaleX(0);transform-origin:left;z-index:100}
header{height:78px;max-width:1212px;margin:auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:10px;z-index:10;border-radius:24px;transition:background .4s,box-shadow .4s,backdrop-filter .4s}body.scrolled header{background:#ffffffc7;backdrop-filter:blur(22px) saturate(160%);box-shadow:0 6px 32px #1d32450b;border:1px solid #ffffffb3}.brand{font:800 34px var(--display);letter-spacing:-3px}.brand span{color:var(--blue)}nav{display:flex;gap:34px;font-size:14px;color:#525660}nav a{position:relative}nav a:after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform .35s var(--ease)}nav a:hover:after,nav a.current:after{transform:scaleX(1)}.nav-contact{font-size:14px;background:white;border:1px solid var(--line);border-radius:24px;padding:11px 20px;transition:background .25s,transform .25s}.nav-contact:hover{background:#eaf1ff;transform:translateY(-2px)}
.hero{max-width:1320px;margin:auto;padding:94px 54px 26px;text-align:center;position:relative}.hero:before{content:'';position:absolute;inset:50px 10% 0;background:radial-gradient(ellipse,#edf2ff8a,transparent 65%);pointer-events:none;z-index:-1}.eyebrow{font-size:12px;font-weight:650;letter-spacing:2px;display:flex;gap:11px;justify-content:center;align-items:center}.tiny-symbol{font-size:20px;font-weight:400;letter-spacing:0;color:var(--blue)}h1{font:750 clamp(54px,7vw,98px)/1.08 var(--display);letter-spacing:-5.5px;margin:30px 0 25px}.blue-word,.gradient-text{background:var(--title-gradient);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:none}.hero-description{font-size:19px;line-height:1.65;color:var(--muted);margin:0}.hero-actions{display:flex;justify-content:center;align-items:center;gap:30px;margin:32px 0}.button{display:inline-flex;align-items:center;justify-content:center;padding:16px 26px;border-radius:28px;font-size:14px;font-weight:550;border:0;transition:transform .3s var(--ease),box-shadow .3s,background .3s}.primary{background:var(--blue);color:#fff;box-shadow:0 7px 22px #1465ef29}.button:hover{transform:translateY(-4px);box-shadow:0 14px 35px #1465ef35}.button:active{transform:scale(.97)}.text-link{font-size:14px}.plus{display:inline-block;margin-left:7px;color:var(--blue);font-size:19px;transition:transform .35s}.text-link:hover .plus{transform:rotate(90deg)}.platforms{display:flex;gap:15px;align-items:center;justify-content:center;font-size:13px;color:#717680;margin:36px 0 65px}.platforms i{width:3px;height:3px;border-radius:50%;background:#aeb3bb}.platform-divider{margin:0 5px;color:#c5c9d0}.hero-foot{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:11px;letter-spacing:1.3px;color:#7e8490;border-top:1px solid var(--line);padding-top:20px}.scroll-cue{letter-spacing:0;display:flex;align-items:center;gap:13px;font-size:12px}.scroll-track{height:28px;width:15px;border:1px solid #b0b8c6;border-radius:12px;position:relative}.scroll-track i{position:absolute;top:6px;left:6px;width:1px;height:6px;background:var(--blue);animation:scroll-cue 1.7s ease infinite}
.section{max-width:1320px;padding:110px 54px;margin:auto}.eyebrow.left{justify-content:flex-start;font-size:11px;color:#737b89;letter-spacing:1.7px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}.section h2{font:650 clamp(34px,4vw,52px)/1.16 var(--display);letter-spacing:-2px;margin:24px 0 0}.section-heading>p{font-size:16px;color:var(--muted);line-height:1.7;margin:0 0 4px}.project-filters{display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap}.filter{padding:11px 18px;border:1px solid transparent;border-radius:24px;color:#6a7180;background:transparent;font-size:14px;transition:.3s var(--ease)}.filter span{font-size:11px;margin-left:5px;opacity:.6}.filter.active{color:#fff;background:#1b1e25}.filter:hover:not(.active){background:#e9ecf1;transform:translateY(-2px)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 28px}.project-card{min-width:0;display:block;text-align:left;color:inherit;border:0;background:none;padding:0;transition:opacity .4s,transform .4s}.project-card[hidden]{display:none}.project-main{grid-column:1/-1}.project-art{border-radius:25px;overflow:hidden;position:relative;height:350px;transition:transform .65s var(--ease),box-shadow .6s;transform-style:preserve-3d}.project-card:hover .project-art{box-shadow:0 28px 65px #26314b20}.project-label{position:absolute;left:27px;top:25px;font-size:11px;letter-spacing:1.8px;color:#56637b}.momento-art{background:#e4ebf8;height:440px;display:flex;align-items:center;justify-content:center}.moment-interface{margin:50px 0 0 -270px;width:400px}.interface-kicker{font-size:11px;letter-spacing:1.6px;color:#5c6f8d}.moment-interface h3{font:650 36px var(--display);letter-spacing:-1.6px;margin:13px 0 20px}.session-ui{position:absolute;left:54%;top:110px;width:300px;background:#fff;border-radius:22px;padding:26px;transform:translateY(var(--parallax,0px)) rotate(5deg);box-shadow:0 15px 50px #5f769327}.session-ui>span{font-size:13px;color:#778297}.session-ui>strong{font-size:56px;display:block;font-weight:500;letter-spacing:-3px;margin:15px 0}.session-ui>strong span{color:#b4c5e4}.session-track{height:4px;background:#edf1f7;border-radius:5px;overflow:hidden}.session-track i{display:block;height:100%;width:40%;background:var(--blue);transform-origin:left}.session-meta{display:flex;justify-content:space-between;font-size:11px;margin-top:13px;color:#7d8796}.activity-row{padding:16px 0;border-top:1px solid #cdd8e9;display:flex;justify-content:space-between;width:235px;font-size:13px;color:#64748c}.art-note{position:absolute;bottom:24px;right:28px;font-size:12px;color:#6f7f98}.project-info{display:flex;justify-content:space-between;align-items:center;padding:22px 0 13px}.project-info h3{font-size:24px;letter-spacing:-.7px;font-weight:600;margin:0 0 5px}.project-info p{font-size:14px;color:var(--muted);margin:0}.project-open{border:1px solid #d5dbe5;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#687181;transition:.4s}.project-card:hover .project-open{background:var(--blue);border-color:var(--blue);color:white;transform:rotate(90deg)}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{font-size:12px;border:1px solid #dde2e9;border-radius:7px;padding:6px 9px;color:#737c8b}.forma-art{background:#eae8f0;display:flex;align-items:center;justify-content:center}.forma-interface{width:90%;margin-top:35px;background:#fdfcfe;border-radius:12px;box-shadow:0 14px 35px #504e681c;overflow:hidden;transform:translateY(var(--parallax,0px)) rotate(-3deg)}.window-dots{display:flex;gap:5px}.window-dots i{width:8px;height:8px;border-radius:50%;background:#d9dde3}.forma-toolbar{display:flex;align-items:center;gap:45px;background:#f6f4f9;border-bottom:1px solid #e9e5ee;padding:11px;font-size:11px;color:#91869d}.forma-content{display:flex;min-height:200px}.forma-sidebar{width:30%;background:#f7f5fa;display:flex;flex-direction:column;gap:13px;padding:18px 13px;font-size:11px;color:#9b91a4}.forma-sidebar b{font-size:22px;color:#706278;letter-spacing:-1px;margin-bottom:5px}.forma-sidebar .selected{color:#695875}.forma-note{padding:24px 18px}.forma-note>span{font-size:10px;letter-spacing:1px;color:#9f91a8}.forma-note h3{font-size:23px;letter-spacing:-1px;margin:12px 0;color:#3c3246}.forma-note p{font-size:12px;line-height:1.6;color:#96869e}.color-samples{display:flex;gap:6px;margin-top:13px}.color-samples i{width:16px;height:16px;border-radius:50%;background:#ae9abb}.color-samples i:nth-child(2){background:#dfcee9}.color-samples i:nth-child(3){background:#ecdfef}.color-samples i:nth-child(4){background:#514057}.ritmo-art{background:#e9efeb;display:flex;justify-content:center;align-items:center}.ritmo-interface{background:#172721;border:1px solid #31463b;border-radius:25px;padding:20px 25px;text-align:center;box-shadow:0 15px 30px #263c3320;margin-top:35px;width:240px;transform:translateY(var(--parallax,0px)) rotate(4deg)}.ritmo-top{font-size:11px;letter-spacing:2px;color:#d5e4d8}.activity-ring{margin:14px auto 10px;border-radius:50%;width:146px;height:146px;background:conic-gradient(#a8eec0 0deg var(--ring-angle,274deg),#365344 var(--ring-angle,274deg));padding:8px;transform:rotate(-25deg)}.activity-ring>div{background:#172721;border-radius:50%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(25deg)}.activity-ring span{font-size:11px;color:#b2c7b8}.activity-ring strong{font-size:29px;font-weight:500;letter-spacing:-1px;color:white;margin:3px}.activity-ring small{font-size:11px;color:#809e8d}.ritmo-stats{display:flex;gap:15px;justify-content:center;color:#7e9d8b;font-size:10px}.ritmo-stats strong{color:#e0f1e4;font-size:12px}
.tool-dock{display:flex;gap:22px;width:max-content;max-width:100%;padding:18px 25px;margin:60px auto 65px;border:1px solid #fff;border-radius:28px;background:#ffffffa1;box-shadow:0 15px 55px #8192ab1d,inset 0 0 0 1px #e4e9f4}.dock-item{position:relative;width:66px;height:66px;display:grid;place-items:center;transition:transform .4s var(--ease);transform-origin:50% 100%}.dock-item img{object-fit:contain;max-width:100%;height:62px}.dock-item .dock-label{position:absolute;bottom:-48px;background:#1e2533;color:white;font-size:12px;padding:7px 12px;border-radius:9px;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s;white-space:nowrap}.dock-item:hover,.dock-item:focus-visible{transform:translateY(-12px) scale(1.25)}.dock-item:hover .dock-label,.dock-item:focus-visible .dock-label{opacity:1;transform:translateY(0)}.dock-item:has(+ .dock-item:hover),.dock-item:hover+.dock-item{transform:translateY(-4px) scale(1.08)}.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:45px}.tool{padding:35px 25px;border-right:1px solid var(--line);transition:background .3s;scroll-margin-top:120px}.tool:first-child{padding-left:0}.tool:last-child{border:0}.tool:hover{background:#edf2f966}.tool-icon{display:block;object-fit:contain;transition:transform .5s var(--ease)}.tool:hover .tool-icon{transform:translateY(-5px) rotate(-4deg)}.tool h3{font-size:20px;letter-spacing:-.5px;font-weight:600;margin:22px 0 12px}.tool p{font-size:14px;color:var(--muted);line-height:1.65;min-height:47px}.tool>span{font-size:11px;letter-spacing:1.3px;color:#7d8798;display:block;margin-top:24px}.design-manifesto{min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 24px;position:relative;overflow:hidden}.design-manifesto:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#e0eaff99,transparent 55%);z-index:-1}.manifesto-text{font:650 clamp(54px,7.5vw,110px)/1.13 var(--display);letter-spacing:-5px;margin:0}.manifesto-text>span{color:#cad1dd;transition:color .45s;text-shadow:0 0 0 transparent}.manifesto-text>span.lit{color:var(--ink)}.manifesto-text>.manifesto-blue.lit{color:var(--blue)}.manifesto-note{font-size:16px;color:#7e8a9b;margin-top:36px}.about{padding-top:40px;padding-bottom:100px}.about-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:start}.about h2{font-size:38px;line-height:1.3}.about h2>span{color:#7a838f}.about-description{padding-top:14px}.about-description>p{font-size:16px;line-height:1.8;color:#69727f}.signature{margin-top:29px;font-size:14px;font-weight:550}.signature span{display:block;font-size:12px;color:#7d8796;font-weight:400;margin-top:8px}footer{max-width:1212px;margin:auto;border-top:1px solid var(--line);padding:30px 0;display:flex;align-items:center;justify-content:space-between}footer>span,footer>a:last-child{font-size:12px;color:#7b8390}footer .brand{font-size:28px}
dialog{border:1px solid #e1e5ec;padding:52px;max-width:680px;width:calc(100% - 32px);border-radius:26px;color:var(--ink);box-shadow:0 40px 120px #0003}dialog[open]{animation:dialog-in .4s var(--ease)}dialog::backdrop{background:#10182680;backdrop-filter:blur(12px)}dialog h2{font:650 49px var(--display);letter-spacing:-2px;margin:22px 0 12px}.dialog-close{position:absolute;right:20px;top:16px;width:36px;height:36px;border:0;background:#edf0f5;border-radius:50%;font-size:23px;color:#677184;transition:transform .3s}.dialog-close:hover{transform:rotate(90deg)}.dialog-intro{font-size:19px;color:#667183;line-height:1.5}.dialog-columns{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:30px 0}.dialog-columns h3{font-size:15px}.dialog-columns p{font-size:14px;line-height:1.8;color:#667183}.dialog-detail{border-top:1px solid var(--line);padding-top:21px;margin-bottom:22px}.dialog-detail>span{font-size:11px;letter-spacing:1.5px;color:#788393}.dialog-detail p{font-size:14px}.motion-ready .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--reveal-delay,0ms)}.motion-ready .reveal.visible{opacity:1;transform:translateY(0)}.hero .eyebrow,.hero h1,.hero-description,.hero-actions,.platforms,.hero-foot{animation:enter 1s var(--ease) both}.hero h1{animation-delay:.12s}.hero-description{animation-delay:.23s}.hero-actions{animation-delay:.34s}.platforms{animation-delay:.45s}.hero-foot{animation-delay:.5s}@keyframes enter{from{opacity:0;transform:translateY(25px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes color-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes scroll-cue{0%{transform:translateY(0);opacity:0}40%{opacity:1}100%{transform:translateY(9px);opacity:0}}@keyframes dialog-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:1000px){header{margin:0 25px}.hero{padding-top:78px}h1{font-size:80px}.platform-cards{gap:18px}.platform-card{padding:23px;min-height:305px}.platform-card h3{font-size:33px}.platform-card p{font-size:13px}.native-detail{font-size:10px}.tool{padding:28px 16px}.about-grid{gap:35px}.section-heading>p{font-size:14px}footer{margin:0 54px}.session-ui{left:56%;width:250px}.moment-interface{margin-left:-200px}}
@media(max-width:700px){header{height:67px;margin:0 12px;padding:0 16px;top:8px;border-radius:20px}nav{gap:18px;font-size:12px}.nav-contact{display:none}.brand{font-size:30px}.hero{padding:62px 22px 25px}h1{letter-spacing:-3px;font-size:clamp(45px,10vw,64px);line-height:1.11;margin:29px 0 23px}.eyebrow{font-size:10px;letter-spacing:1.5px}.hero-description{font-size:16px}.hero-actions{gap:23px;margin:28px 0}.button{padding:14px 19px;font-size:13px}.text-link{font-size:13px}.platforms{gap:10px;font-size:12px;margin-bottom:45px}.hero-foot>span:first-child{display:none}.hero-foot{justify-content:center}.ecosystem{height:auto}.ecosystem-sticky{position:relative;min-height:auto;height:auto;max-height:none;padding:60px 22px 40px;overflow:visible}.ecosystem-heading .eyebrow{font-size:9px}.ecosystem-heading h2{font-size:35px;letter-spacing:-1.5px}.ecosystem-heading p{font-size:14px}.platform-cards{flex-direction:column;margin-top:35px;gap:15px;perspective:none}.platform-card{width:100%;padding:22px 24px;min-height:215px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto auto}.platform-card-top{grid-column:1/-1;font-size:10px;margin-bottom:24px}.platform-glyph{grid-column:2;grid-row:2/5;width:64px;height:64px;margin:0 0 0 10px;align-self:center}.platform-card h3{font-size:31px;margin:0 0 8px}.platform-card p{font-size:14px;margin:0 0 15px}.native-detail{font-size:11px}.native-caption{gap:15px;margin-top:27px;font-size:12px;align-items:flex-start}.native-dots{margin-top:5px}.caption-index{font-size:10px;white-space:nowrap}.ecosystem-orbit{width:100%;height:450px;top:45%}.section{padding:70px 22px}.section-heading{display:block;margin-bottom:28px}.section h2{font-size:36px;letter-spacing:-1.7px}.section-heading>p{margin-top:22px;font-size:14px}.project-grid{grid-template-columns:1fr;gap:35px}.project-main{grid-column:auto}.project-art{height:330px}.momento-art{height:395px;justify-content:flex-start;align-items:flex-start}.moment-interface{margin:65px 20px;width:100%}.moment-interface h3{font-size:29px}.interface-kicker{font-size:9px;letter-spacing:1px}.session-ui{top:200px;left:auto;right:20px;width:195px;padding:17px;transform:rotate(4deg)}.session-ui>strong{font-size:38px;margin:8px 0}.session-ui>span{font-size:12px}.session-meta{font-size:9px}.activity-row{width:115px;font-size:11px;flex-direction:column;gap:8px;margin-top:32px}.art-note{display:none}.project-label{left:21px;top:22px}.project-filters{gap:4px}.filter{font-size:13px;padding:10px 13px}.tools-grid{grid-template-columns:1fr 1fr;margin-top:30px}.tool-dock{gap:14px;padding:16px 18px;margin:40px auto 50px;border-radius:24px}.dock-item{height:48px;width:48px}.dock-item img{height:48px;width:48px}.dock-item .dock-label{display:none}.tool{padding:25px 15px!important}.tool:nth-child(2){border-right:0}.tool:nth-child(-n+2){border-bottom:1px solid var(--line)}.tool-icon{width:52px;height:52px}.tool h3{font-size:17px}.tool p{font-size:13px;min-height:45px}.tool>span{font-size:9px;letter-spacing:1px}.design-manifesto{min-height:420px;padding:60px 22px}.manifesto-text{font-size:56px;letter-spacing:-2.7px}.manifesto-note{font-size:14px;margin-top:25px}.about{padding-top:20px}.about-grid{display:block}.about h2{font-size:31px}.about-description{padding-top:15px}.about-description>p{font-size:15px}footer{margin:0 22px;padding:23px 0;flex-wrap:wrap;gap:20px}footer>span{font-size:11px}footer>a:last-child{width:100%;text-align:right}dialog{padding:40px 25px;max-height:85svh}dialog h2{font-size:39px}.dialog-columns{grid-template-columns:1fr;gap:4px}}
@media(hover:none){.platform-card:before{display:none}.dock-item:hover{transform:none}.project-art{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;will-change:auto!important}.motion-ready .reveal{opacity:1;transform:none}.ecosystem{height:auto}.ecosystem-sticky{position:relative;min-height:auto;height:auto;max-height:none;padding-top:80px;padding-bottom:80px}.platform-card{transform:none!important}.project-art{transform:none!important}.manifesto-text>span{color:var(--ink)}.manifesto-text>.manifesto-blue{color:var(--blue)}}
footer{flex-wrap:wrap}.asset-credit{width:100%;font-size:10px!important;opacity:.75;text-align:right;margin-top:10px}.asset-credit a{text-decoration:underline;text-underline-offset:3px}.tool-icon[src*="figma"],.dock-item img[src*="figma"]{padding:4px 11px}
footer>a:not(.brand){font-size:12px;color:#7b8390}@media(max-width:700px){.ecosystem{overflow:clip}}
/* Scroll choreography: app icons settle into a quiet glass dock. */
.assembly-section{height:calc(100svh + 700px);position:relative;--app-size:88px;--app-gap:24px}
.toolkit-sticky{position:sticky;top:0;height:100svh;min-height:760px;padding:115px 54px 60px;max-width:1320px;margin:auto;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.assembly-section .section-heading{flex-shrink:0;margin:0}.assembly-section h2{font:650 clamp(34px,4vw,52px)/1.16 var(--display);letter-spacing:-2px;margin:24px 0 0}
.tool-assembly{position:relative;height:240px;min-height:240px;margin:27px 0 15px;isolation:isolate}
.assembly-icons{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:var(--app-gap);align-items:center;z-index:1}
.assembly-flight{will-change:transform,opacity;transform-origin:50% 50%}
.assembly-section .dock-item{border:0;background:none;padding:0;width:var(--app-size);height:var(--app-size);display:grid;place-items:center;position:relative;transform-origin:50% 100%;transition:transform .4s var(--ease)}
.dock-app{width:var(--app-size);height:var(--app-size);display:grid;place-items:center}.dock-app>img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;padding:0!important}.swift-app>img{width:88.8%}
.git-app-tile{width:80.5%;height:80.5%;border-radius:24%;display:grid;place-items:center;background:linear-gradient(145deg,#fffcfa,#e9e7e5);border:1px solid #ffffffd9;box-shadow:0 3px 8px #2230471a,inset 0 1px 1px #fff}.git-app-tile img{width:66%;height:66%;object-fit:contain}
.assembly-dock{position:absolute;top:50%;left:50%;width:calc(var(--app-size)*5 + var(--app-gap)*4 + 40px);height:calc(var(--app-size) + 28px);transform:translate(-50%,-50%);border:1px solid #fff;border-radius:30px;background:linear-gradient(160deg,#fffdfdba,#f1f4faad);box-shadow:0 18px 45px #52658514,inset 0 0 0 1px #dce3ef7d;backdrop-filter:blur(18px)}
.assembly-section .dock-label{position:absolute;bottom:-38px;background:#202633;color:#fff;font-size:12px;font-weight:400;padding:7px 11px;border-radius:9px;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s;white-space:nowrap;pointer-events:none}
.assembly-section .dock-item:hover,.assembly-section .dock-item:focus-visible{transform:translateY(-9px) scale(1.15)}.assembly-section .dock-item:hover .dock-label,.assembly-section .dock-item:focus-visible .dock-label{opacity:1;transform:none}.assembly-section .dock-item:active{transform:translateY(-4px) scale(1.05)}
.assembly-details{margin:0;min-height:190px;flex-shrink:0}.assembly-details .tool{padding-top:22px;padding-bottom:25px;transition:background .3s,color .3s}.assembly-details .tool h3{margin-top:0}.assembly-details .tool.active h3{color:var(--blue)}.assembly-details .tool.active{background:#eaf1fc6b}
@media(max-width:1000px){.toolkit-sticky{padding:110px 54px 55px}.assembly-details .tool>span{font-size:9px;letter-spacing:1px}.tool-assembly{margin-top:24px;height:220px;min-height:220px}}
@media(max-width:700px){.assembly-section{height:calc(100svh + 400px);--app-size:clamp(44px,14vw,56px);--app-gap:12px}.toolkit-sticky{padding:95px 22px 35px;min-height:720px}.assembly-section .section-heading>p{margin-top:17px;font-size:14px}.assembly-section h2{font-size:36px;letter-spacing:-1.7px;margin-top:21px}.tool-assembly{height:180px;min-height:180px;margin:6px 0 12px}.assembly-dock{height:calc(var(--app-size) + 24px);border-radius:23px}.assembly-section .dock-label{font-size:10px;bottom:-32px}.assembly-details{min-height:230px}.assembly-details .tool{padding:16px 12px!important}.assembly-details .tool:nth-child(odd){padding-left:0!important}.assembly-details .tool h3{font-size:16px;margin:0 0 8px}.assembly-details .tool p{font-size:12px;min-height:39px;margin:0}.assembly-details .tool>span{font-size:8px;letter-spacing:.8px;margin-top:13px}.assembly-section .dock-item:hover{transform:none}}
@media(max-height:760px) and (min-width:701px){.toolkit-sticky{padding-top:100px;padding-bottom:45px;min-height:680px}.tool-assembly{height:170px;min-height:170px;margin:22px 0}.assembly-details .tool{padding-top:18px;padding-bottom:18px}.assembly-details .tool>span{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.assembly-section{height:auto}.toolkit-sticky{position:relative;height:auto;min-height:auto;padding-top:100px;padding-bottom:70px}.assembly-flight{transform:none!important;opacity:1!important;will-change:auto}.assembly-dock{opacity:1!important;transform:translate(-50%,-50%)!important}.assembly-details{opacity:1!important}.assembly-section .dock-item:hover,.assembly-section .dock-item:focus-visible{transform:none}}

/* Foreground and background planes converge into the dock. */
.assembly-flight{transform-style:preserve-3d;backface-visibility:hidden}
.assembly-flight[data-flight="0"],.assembly-flight[data-flight="2"]{z-index:2}
.assembly-section .dock-app{filter:drop-shadow(0 var(--flight-shadow-y,3px) var(--flight-shadow-blur,4px) rgb(33 54 88 / var(--flight-shadow-alpha,.07)))}
@media(prefers-reduced-motion:reduce){.assembly-section .dock-app{filter:none}}

/* The flight area reaches the viewport edges without section clipping. */
.assembly-section .toolkit-sticky{overflow:visible}
.assembly-section .dock-app{will-change:transform;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.assembly-section .dock-app{transform:none!important;will-change:auto}}

/* A full-size stage: one thought, one composition, one phase at a time. */
.method{position:relative;background:linear-gradient(180deg,#fff,#fbfcff 55%,#fff);margin-top:40px}
.method.method-ready{height:calc(100svh + 1450px)}
.method-sticky{position:relative;max-width:1320px;margin:auto;padding:105px 54px 40px;display:flex;flex-direction:column;justify-content:center}
.method-ready .method-sticky{position:sticky;top:0;height:100svh;min-height:680px}
.method-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.method-header h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.method-header>p{font-size:11px;letter-spacing:1.2px;color:#8994a6;margin:0}
.method-stage{position:relative;margin:12px 0 22px;flex-shrink:0}
.method-panel{position:relative;height:515px;--phase:.5;margin:50px 0}
.method-ready .method-stage{height:515px}
.method-ready .method-panel{position:absolute;inset:0;margin:0;height:auto;opacity:0;transform:translateY(55px) scale(.97);pointer-events:none;visibility:hidden;transition:opacity .5s ease,transform .8s var(--ease),visibility 0s linear .5s}
.method-ready .method-panel.is-before{transform:translateY(-55px) scale(1.03)}
.method-ready .method-panel.is-active{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.method-number,.method-tags{display:none}
.method-copy h3{position:absolute;top:0;left:0;right:0;margin:0;text-align:center;font:700 clamp(86px,8.6vw,112px)/1.06 var(--display);letter-spacing:-6px;color:#1e2531;transform:translateY(calc((.5 - var(--phase))*-8px));transition:filter .6s}
#method-design .method-copy h3{padding-bottom:.2em;background:linear-gradient(120deg,#2467ea,#6695fb 55%,#5953c8);background-clip:text;-webkit-background-clip:text;color:transparent}
.method-copy>p{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);margin:0;text-align:center;font-size:14px;line-height:1.7;color:#697485}
.method-scene{position:absolute;left:50%;top:128px;width:min(900px,100%);height:310px;isolation:isolate;perspective:1000px;transform-style:preserve-3d;transform:translateX(-50%) perspective(1200px) rotateX(var(--look-y,0deg)) rotateY(var(--look-x,0deg));transition:transform .6s var(--ease)}
.method-scene:before{content:'';position:absolute;inset:-50px 10%;background:radial-gradient(ellipse,#dce8ff96,transparent 65%);z-index:-2;pointer-events:none}
.method-scene:after{content:'';position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:280px;height:25px;border-radius:50%;background:#607fa623;filter:blur(19px);z-index:-1;pointer-events:none}
.research-ring{position:absolute;left:50%;top:50%;width:480px;height:220px;border:1px solid #d6e3f7;border-radius:50%;transform:translate(-50%,-50%) perspective(900px) rotateX(35deg) rotateZ(calc(-15deg + var(--phase)*10deg));opacity:.8}
.research-ring.inner{width:300px;height:220px;border-color:#dce6f5;transform:translate(-50%,-50%) perspective(900px) rotateY(38deg) rotateZ(calc(28deg - var(--phase)*12deg))}
.research-core{position:absolute;left:50%;top:50%;width:144px;height:144px;display:grid;place-items:center;border-radius:36%;background:linear-gradient(145deg,#fff,#ebf2ff 70%,#dce8fb);border:1px solid #fff;box-shadow:0 28px 50px #3e649424,inset 0 0 0 1px #dee8f7,inset -6px -8px 13px #bacfeb30,inset 5px 7px 10px #fff;transform:translate(-50%,-50%) perspective(1000px) rotateY(calc(-18deg + var(--phase)*27deg)) rotateX(9deg) rotateZ(-7deg)}
.research-core:before{content:'';position:absolute;inset:6px;border-radius:inherit;border:1px solid #ffffffc9;pointer-events:none}
.research-core svg{height:74px;width:74px;color:#5180ca;filter:drop-shadow(0 2px 1px #ffffff)}
.research-note{position:absolute;padding:20px 24px;background:linear-gradient(145deg,#fff,#fafcff);border:1px solid #fff;border-radius:20px;box-shadow:0 20px 45px #526e941a,inset 0 0 0 1px #e3eaf5;will-change:transform}
.research-note>span{display:block;font-size:8px;letter-spacing:1.4px;color:#8a99ae;margin-bottom:10px}
.research-note strong{font-size:15px;font-weight:550;white-space:nowrap}
.note-one{left:8%;top:23px;transform:perspective(1000px) translateY(calc((.5 - var(--phase))*35px)) rotateY(14deg) rotateZ(-10deg)}
.note-two{right:4%;top:72px;transform:perspective(1000px) translateY(calc((var(--phase) - .5)*30px)) rotateY(-12deg) rotateZ(7deg)}
.note-three{left:14%;bottom:15px;transform:perspective(1000px) translateY(calc((.5 - var(--phase))*25px)) rotateX(12deg) rotateZ(-3deg)}
.design-spec{position:absolute;left:50%;top:12px;width:216px;height:248px;padding:23px;border-radius:25px;border:1px solid #fff;background:linear-gradient(145deg,#fff,#fafcff);box-shadow:7px 9px 0 -2px #e8effb,10px 12px 0 -2px #d9e3f4,0 30px 55px #405b8a25;transform:translateX(-50%) perspective(1000px) rotateY(calc(-18deg + var(--phase)*22deg)) rotateX(8deg) rotateZ(-7deg);z-index:2}
.design-spec>span,.design-palette>span,.design-component>span{display:block;font-size:8px;letter-spacing:1.2px;color:#8b9bb2}
.design-spec>strong{font:650 105px/1.08 var(--display);letter-spacing:-7px;color:#243956;display:block;margin:11px 0}
.design-spec>div{font-size:11px;line-height:1.7;color:#8a99af}
.design-palette{position:absolute;left:11%;top:34px;padding:22px;border:1px solid #fff;border-radius:22px;background:linear-gradient(140deg,#fff,#f7faff);box-shadow:0 22px 45px #4d70941c,inset 0 0 0 1px #e4ebf6;transform:perspective(1000px) translateY(calc((.5 - var(--phase))*28px)) rotateY(16deg) rotateZ(-11deg);z-index:1}
.design-palette>div{display:flex;gap:10px;margin-top:17px}.design-palette i{height:33px;width:33px;border-radius:50%;background:#1465ef;box-shadow:inset 0 0 0 1px #10285012}.design-palette i:nth-child(2){background:#bdd5fb}.design-palette i:nth-child(3){background:#f1f5fc}.design-palette i:nth-child(4){background:#1c2d49}
.design-component{position:absolute;right:7%;bottom:23px;width:260px;padding:22px;border:1px solid #a5c5f5;border-radius:22px;background:linear-gradient(145deg,#fff,#f9fbff);box-shadow:0 24px 50px #4168a524;transform:perspective(1000px) translateY(calc((var(--phase) - .5)*32px)) rotateY(-10deg) rotateZ(7deg);z-index:3}
.design-component>div{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin-top:17px;color:white;background:linear-gradient(145deg,#2c77f3,#145de2);border-radius:13px;box-shadow:0 7px 15px #1465ef24;font-size:14px}.design-component b{font-size:22px;font-weight:400;line-height:1}
.design-handle{position:absolute;width:8px;height:8px;background:white;border:1px solid #4483ef;right:-4px;bottom:-4px}
.design-cursor{position:absolute;width:30px;height:38px;right:5%;bottom:0;filter:drop-shadow(0 4px 3px #243c6b25);transform:translate(calc((.5 - var(--phase))*28px),calc((.5 - var(--phase))*18px));z-index:4}
.native-orbit{position:absolute;left:50%;top:48%;width:520px;height:200px;border:1px solid #dbe5f5;border-radius:50%;transform:translate(-50%,-50%) perspective(900px) rotateX(30deg) rotateZ(-17deg)}
.native-core{position:absolute;left:50%;top:48%;width:165px;height:165px;z-index:3;transform:translate(-50%,-50%) rotateY(calc(-20deg + var(--phase)*32deg)) rotateZ(-9deg);backface-visibility:visible;will-change:transform}
.native-core img{display:block;width:100%;height:100%;object-fit:contain;clip-path:inset(4.7% round 22%);filter:none}
.native-core:before{content:'';position:absolute;left:10%;right:10%;bottom:-12px;height:24px;background:radial-gradient(ellipse,#425e8933,transparent 70%);filter:blur(10px);z-index:-1;pointer-events:none}
.swift-app>img{clip-path:inset(4.7% round 22%)}
.native-platform{position:absolute;display:flex;align-items:center;gap:14px;padding:18px 23px;border:1px solid #fff;border-radius:21px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 20px 45px #425e891a,inset 0 0 0 1px #e1eaf7;color:#617690;font-size:14px}
.native-platform svg{height:30px;width:30px;color:#5d84bb}.native-ios{left:12%;top:25px;transform:perspective(1000px) translateY(calc((.5 - var(--phase))*22px)) rotateZ(-8deg) rotateY(12deg)}.native-mac{right:7%;top:91px;transform:perspective(1000px) translateY(calc((var(--phase) - .5)*27px)) rotateZ(8deg) rotateY(-14deg)}.native-watch{left:18%;bottom:17px;transform:perspective(1000px) translateY(calc((.5 - var(--phase))*30px)) rotateZ(-4deg)}
.native-scene-note{display:none}
@media(min-width:701px) and (max-width:1000px){.method-sticky{padding-left:40px;padding-right:40px}.method-copy h3{font-size:88px;letter-spacing:-5px}.research-note{padding:17px 19px}.research-note strong{font-size:13px}.note-one{left:0}.note-two{right:0}.note-three{left:4%}.design-palette{left:1%;padding:18px}.design-component{right:0;width:235px;padding:18px}.design-cursor{right:-1%}.native-ios{left:2%}.native-mac{right:1%}.native-watch{left:8%}}
@media(max-width:700px){
 .method{margin-top:35px}.method.method-ready{height:calc(100svh + 1050px)}.method-sticky{padding:95px 22px 35px}.method-ready .method-sticky{min-height:720px}
 .method-header>p{font-size:8px;letter-spacing:.7px}.method-header .eyebrow{font-size:9px;letter-spacing:1.3px}
 .method-panel{height:470px}.method-ready .method-stage{height:470px;margin:27px 0 25px}
 .method-copy h3{font-size:clamp(44px,15vw,62px);letter-spacing:-3px;line-height:1.13}
 .method-copy>p{font-size:12px;line-height:1.8;max-width:325px;bottom:0}
 .method-scene{top:94px;height:245px;max-width:360px;transform:translateX(-50%)}.method-scene:before{inset:-20px -10px}.method-scene:after{width:145px;height:20px;bottom:15px;filter:blur(15px)}
 .research-ring{width:290px;height:160px}.research-ring.inner{width:195px;height:170px}.research-core{height:95px;width:95px;border-radius:35%;box-shadow:0 19px 32px #4264921f,inset 0 0 0 1px #dee8f7,inset -5px -5px 9px #bacfeb30}.research-core svg{height:51px;width:51px}
 .research-note{padding:13px 15px;border-radius:15px}.research-note>span{font-size:6px;letter-spacing:.8px;margin-bottom:7px}.research-note strong{font-size:10px}.note-one{left:0;top:10px}.note-two{right:0;top:74px}.note-three{left:3%;bottom:7px}
 .design-spec{top:10px;width:142px;height:183px;padding:16px;border-radius:18px;box-shadow:5px 7px 0 -2px #e8effb,8px 10px 0 -2px #d9e3f4,0 21px 35px #405b8a25}.design-spec>span,.design-palette>span,.design-component>span{font-size:6px;letter-spacing:.6px}.design-spec>strong{font-size:67px;letter-spacing:-4px;margin:10px 0 8px}.design-spec>div{font-size:8px;line-height:1.65}
 .design-palette{left:0;top:30px;padding:13px;border-radius:15px}.design-palette>div{gap:6px;margin-top:12px}.design-palette i{height:22px;width:22px}.design-component{right:0;bottom:14px;width:172px;padding:14px;border-radius:16px}.design-component>div{font-size:10px;padding:10px 12px;margin-top:12px;border-radius:10px}.design-component b{font-size:17px}.design-cursor{width:22px;height:28px;right:-1px;bottom:-3px}
 .native-orbit{width:300px;height:145px}.native-core{width:112px;height:112px}.native-platform{padding:12px 15px;gap:9px;border-radius:15px;font-size:10px}.native-platform svg{height:23px;width:23px}.native-ios{left:0;top:17px}.native-mac{right:0;top:89px}.native-watch{left:5%;bottom:9px}
}
@media(max-width:700px) and (max-height:730px){.method-sticky{padding-top:95px;padding-bottom:28px}.method-ready .method-sticky{min-height:620px}.method-panel{height:430px}.method-ready .method-stage{height:430px;margin-top:22px;margin-bottom:20px}.method-copy h3{font-size:52px}.method-scene{top:84px;height:225px}.method-copy>p{font-size:11px;line-height:1.75}.research-note strong{font-size:9px}.research-note{padding:12px}.design-spec{height:174px}.design-component{bottom:8px}}
@media(min-width:701px) and (max-height:700px){.method-sticky{padding-top:100px;padding-bottom:30px}.method-ready .method-sticky{min-height:620px}.method-panel{height:470px}.method-ready .method-stage{height:470px;margin-top:10px;margin-bottom:18px}.method-copy h3{font-size:94px}.method-scene{top:101px;height:260px}.design-spec{height:225px}.design-spec>strong{font-size:89px}.method-copy>p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.method.method-ready{height:auto}.method-ready .method-sticky{position:relative;height:auto;min-height:0;padding-top:100px;padding-bottom:70px}.method-ready .method-stage{height:auto}.method-ready .method-panel{position:relative;height:515px;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin:40px 0 65px}.method-copy h3{transform:none}.method-scene{transform:translateX(-50%)}.method-scene *{will-change:auto!important}.research-note,.design-palette,.design-component,.design-cursor,.native-platform{transform:none!important}.research-ring,.research-ring.inner,.research-core,.native-orbit,.native-core{transform:translate(-50%,-50%)!important}.design-spec{transform:translateX(-50%)!important}}

/* Parts move independently through depth when the scroll changes phase. */
.method-ready .method-panel{transform:none;transition:none}
.method-ready .method-panel.is-before{transform:none}
.method-ready .method-panel.is-exiting{opacity:1;visibility:visible;pointer-events:none;transform:none}
.design-depth-layer{position:absolute;left:50%;top:22px;width:216px;height:248px;border:1px solid #fff;border-radius:25px;background:linear-gradient(145deg,#f8fbff,#dfe9f8);box-shadow:0 16px 30px #3f5c8615;transform:translateX(-50%) perspective(1000px) rotateY(calc(-18deg + var(--phase)*22deg)) rotateX(8deg) rotateZ(-7deg);z-index:0}
.design-depth-layer.depth-two{top:32px;background:linear-gradient(145deg,#edf4ff,#d5e1f3);z-index:-1}
.design-spec{box-shadow:0 30px 55px #405b8a25}
@media(max-width:700px){.design-depth-layer{width:142px;height:183px;border-radius:18px;top:18px}.design-depth-layer.depth-two{top:26px}}
@media(max-width:700px) and (max-height:730px){.design-depth-layer{height:174px}}
@media(min-width:701px) and (max-height:700px){.design-depth-layer{height:225px}}
@media(prefers-reduced-motion:reduce){.method-ready .method-panel{height:515px}.design-depth-layer{transform:translateX(-50%)!important}}

/* Five tools share one dock; compact screens show the selected tool. */
.assembly-details{grid-template-columns:repeat(5,minmax(0,1fr))}
.assembly-details .tool{padding-left:20px;padding-right:20px}
.assembly-details .tool h3{font-size:19px}
.assembly-details .tool p{font-size:13px}
.assembly-details .tool>span{font-size:8px;letter-spacing:.7px}
.assembly-details .tool:last-child{border-right:0}
@media(max-width:700px){
 .assembly-section{--app-size:clamp(42px,12vw,50px);--app-gap:10px}
 .assembly-dock{width:calc(var(--app-size)*5 + var(--app-gap)*4 + 32px)}
 .assembly-details{display:block;min-height:140px;text-align:center}
 .assembly-details .tool{display:none;border:0!important;padding:20px 18px!important;border-radius:18px}
 .assembly-details .tool.active{display:block}
 .assembly-details .tool.active:nth-child(odd){padding-left:18px!important}
 .assembly-details .tool h3{font-size:19px}
 .assembly-details .tool p{min-height:0;font-size:13px}
 .assembly-details .tool>span{font-size:8px;margin-top:14px}
}
@media(max-width:700px) and (max-height:730px){.toolkit-sticky{min-height:620px;padding-bottom:25px}.tool-assembly{height:145px;min-height:145px}.assembly-details{min-height:125px}}

/* Introduce the person before exploring the work. */
.about{padding-top:85px;padding-bottom:85px}
@media(max-width:700px){.about{padding-top:65px;padding-bottom:65px}nav{gap:15px}}


/* A quiet opening, led by type and a clear personal identity. */
.hero{min-height:calc(100svh - 78px);padding:60px 54px 30px;display:flex;flex-direction:column;justify-content:center;text-align:center;--hero-scroll:0}
.hero:before{inset:12% 15% 12%;background:radial-gradient(ellipse at 50% 60%,#e5edff65,transparent 65%);pointer-events:none}
.hero-intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 50px}
.hero .eyebrow{font-size:10px;font-weight:550;letter-spacing:2.6px;color:#89909c}
.hero h1{font-size:clamp(60px,7.4vw,100px);font-weight:650;line-height:1.08;letter-spacing:-5px;margin:28px 0 27px;transform:translateY(calc(var(--hero-scroll)*-18px))}
.hero h1 .blue-word{display:inline-block;padding-bottom:.16em;margin-bottom:-.16em;background:linear-gradient(110deg,#337ae9,#5689ee 60%,#647cdc);background-clip:text;-webkit-background-clip:text;color:transparent;animation:none}
.hero-description{font-size:17px;line-height:1.8;color:#7a818e;letter-spacing:-.15px}
.hero-actions{justify-content:center;gap:29px;margin:30px 0 0}
.hero .primary{font-size:13px;font-weight:500;padding:15px 24px;gap:20px;box-shadow:0 6px 18px #1465ef1c}
.hero .primary>span{font-size:19px;line-height:1;transition:transform .3s}.hero .primary:hover>span{transform:translate(2px,-2px)}
.hero .text-link{font-size:13px;color:#66707e}.hero .plus{font-size:17px;margin-left:9px}
.hero-foot{width:100%;margin-top:15px;padding-top:22px;font-size:9px;font-weight:500;letter-spacing:1.5px;color:#a0a7b4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:left;border-color:#e5e8ef}
.hero-foot>span:last-child{text-align:right}.hero-foot .scroll-cue{font-size:11px;color:#959eac;letter-spacing:0;gap:10px}.hero-foot .scroll-track{height:24px;width:14px;border-color:#c5cbd5}.hero-foot .scroll-track i{left:5px;background:#839bbf}
@media(max-width:1000px) and (min-width:701px){.hero h1{font-size:75px;letter-spacing:-4px}}
@media(max-width:700px){.hero{min-height:calc(100svh - 67px);padding:40px 22px 24px}.hero-intro{padding:20px 0 45px}.hero .eyebrow{font-size:8px;letter-spacing:1.8px}.hero h1{font-size:clamp(38px,11.7vw,58px);letter-spacing:-2.5px;line-height:1.13;margin:26px 0 24px}.hero-description{font-size:13px;line-height:1.9}.hero-actions{gap:23px;margin-top:28px}.hero .primary{font-size:12px;padding:14px 18px;gap:14px}.hero .text-link{font-size:12px}.hero-foot{display:flex;justify-content:center;margin-top:0;padding-top:20px}.hero-foot>span:first-child,.hero-foot>span:last-child{display:none}.hero-foot .scroll-cue{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero h1{transform:none}}
.hero .eyebrow,.hero h1,.hero-description,.hero-actions,.hero-foot{animation-name:hero-reveal;animation-duration:.75s}
@keyframes hero-reveal{from{opacity:0}to{opacity:1}}

/* Playful details stay outside the reading area. */
.hero{isolation:isolate;overflow:hidden;--play-x:0;--play-y:0;--play-turn:0deg}
.hero-intro{position:relative;z-index:2}
.hero .eyebrow{color:#858d9c}
.hero h1{font-weight:650}
.hero h1 .blue-word{background-image:linear-gradient(110deg,#287bf3 5%,#6978e8 65%,#a47edb);background-size:160% 100%;animation:color-shift 9s ease-in-out infinite}
.hero-playground{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-play-piece{position:absolute;display:block;transition:translate .7s var(--ease),rotate .9s var(--ease);translate:calc(var(--play-x)*var(--piece-travel,18px)) calc(var(--play-y)*var(--piece-travel,18px));rotate:var(--play-turn)}
.play-star{left:12%;top:25%;font-size:66px;line-height:1;color:#f0b682;--piece-travel:25px;transform:rotate(-16deg)}
.play-code{right:10%;top:28%;font:400 46px var(--display);letter-spacing:-6px;color:#8babef;--piece-travel:-20px;transform:rotate(13deg)}
.play-spark{right:16%;bottom:24%;font-size:36px;color:#a4a0dc;--piece-travel:34px;transform:rotate(12deg)}
.play-orbit{left:17%;bottom:23%;width:29px;height:29px;border:6px solid #acd5c9;border-radius:50%;--piece-travel:-28px;transform:rotate(-12deg)}
.hero-play-button{display:flex;align-items:center;gap:7px;margin-top:25px;padding:7px 10px;border:0;background:transparent;color:#9aa4b5;font-size:10px;transition:color .3s,transform .3s;border-radius:20px}
.hero-play-button>span{font-size:18px;color:#8a9ed0;transition:rotate .5s}.hero-play-button:hover{color:#5279b8;transform:translateY(-2px)}.hero-play-button:hover>span{rotate:90deg}.hero-play-button:active{transform:scale(.96)}
.hero-intro{padding-bottom:25px}
@media(max-width:1000px) and (min-width:701px){.play-star{left:7%;font-size:49px}.play-code{right:6%;font-size:37px}.play-spark{right:10%}.play-orbit{left:10%}}
@media(max-width:700px){.hero{padding-top:45px}.hero h1{font-size:clamp(46px,14vw,62px);line-height:1.06;letter-spacing:-2.9px}.hero-intro{padding-bottom:24px}.hero-description{font-size:13px}.play-star{left:7%;top:15%;font-size:30px}.play-code{right:7%;top:17%;font-size:23px;letter-spacing:-3px}.play-spark{right:8%;bottom:22%;font-size:23px}.play-orbit{left:10%;bottom:23%;width:18px;height:18px;border-width:4px}.hero-play-button{font-size:9px;margin-top:22px}.hero-play-button>span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hero-play-piece{translate:none;rotate:none;transition:none}.hero h1 .blue-word{animation:none}}


/* A typographic opening with tangible design and code details. */
.hero{max-width:none;background:radial-gradient(ellipse at 50% 54%,#e9edff88 0,transparent 58%);padding-top:30px;padding-bottom:24px}
.hero-intro{padding:12px 0 20px}
.hero .eyebrow{flex-direction:column;gap:12px;color:#5b6473;font-size:10px;letter-spacing:2.2px}
.hero-role{font-size:9px;letter-spacing:1.7px;color:#8c95a5}
.hero h1{font-size:clamp(90px,10.5vw,148px);line-height:.98;letter-spacing:-8px;font-weight:750;margin:32px 0 28px}
.hero h1 .blue-word{padding-bottom:.16em;background-image:linear-gradient(115deg,#1264ee 12%,#6777ed 60%,#a97bdb);background-size:180% 100%}
.hero-description{font-size:17px;color:#626c7d;line-height:1.65}
.hero-platform-line{display:inline-block;margin-top:9px;font-size:12px;letter-spacing:1.3px;color:#8993a3}
.hero-actions{margin-top:24px}
.hero-play-button{margin-top:15px;color:#7b8aa3;font-size:10px}
.hero-foot{max-width:1172px;margin:8px auto 0}
.play-star{left:13%;top:27%;width:78px;height:78px;color:#ed995a;filter:drop-shadow(0 9px 8px #da894d20)}
.play-star svg,.play-spark svg{display:block;width:100%;height:100%}
.play-code{right:12%;top:25%;width:85px;height:85px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#edf2ff);border:1px solid #fff;box-shadow:0 18px 32px #375b9f16,inset 0 0 0 1px #e3e9f7;color:#4680e6;font-size:30px;font-weight:650;letter-spacing:-3px;transform:rotate(12deg)}
.play-spark{right:16%;bottom:20%;width:64px;height:72px;color:#6088ef;filter:drop-shadow(0 8px 6px #4e72b42c);transform:rotate(-7deg)}
.play-orbit{left:16%;bottom:21%;width:51px;height:51px;border:0;background:conic-gradient(#568af1,#9382df,#e9a2b6,#f1c58a,#95cabb,#568af1);box-shadow:0 8px 20px #6d8baa14;transform:rotate(-15deg)}
.play-orbit:after{content:'';position:absolute;inset:12px;border-radius:50%;background:#f7f8fa}
@media(min-width:701px) and (max-width:1000px){.hero h1{font-size:112px;letter-spacing:-6px}.play-star{left:7%;width:58px;height:58px}.play-code{right:6%;width:64px;height:64px;border-radius:19px;font-size:24px}.play-orbit{left:10%}.play-spark{right:10%}}
@media(max-width:700px){.hero{padding:34px 22px 22px}.hero-intro{padding:10px 0 22px}.hero .eyebrow{font-size:8px;letter-spacing:1.5px;gap:9px}.hero-role{font-size:7px;letter-spacing:1.2px}.hero h1{font-size:clamp(66px,18vw,100px);letter-spacing:-4.4px;line-height:1.02;margin:32px 0 24px}.hero-description{font-size:12px}.hero-platform-line{font-size:10px;margin-top:9px}.hero-actions{margin-top:24px;gap:20px}.hero-play-button{margin-top:18px;font-size:9px}.play-star{left:7%;top:13%;width:33px;height:33px}.play-code{right:7%;top:13%;width:38px;height:38px;border-radius:12px;font-size:15px;letter-spacing:-1.5px}.play-spark{right:7%;bottom:18%;width:32px;height:36px}.play-orbit{left:8%;bottom:18%;width:26px;height:26px}.play-orbit:after{inset:6px}.hero-foot{margin-top:0}}
@media(min-width:701px) and (max-height:750px){.hero h1{font-size:clamp(90px,10vw,128px);margin-top:24px;margin-bottom:22px}.hero .eyebrow{gap:8px}.hero-intro{padding-top:0;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.hero h1 .blue-word{animation:none}}

.hero-play-piece{translate:calc(var(--play-x)*var(--piece-travel,18px)) calc(var(--play-y)*var(--piece-travel,18px) - var(--hero-scroll)*65px);scale:calc(1 - var(--hero-scroll)*.12);opacity:calc(1 - var(--hero-scroll)*.7)}
.hero h1{animation:hero-title-arrive 1s cubic-bezier(.22,1,.36,1) both}
@keyframes hero-title-arrive{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hero-play-piece{translate:none;scale:1;opacity:1}.hero h1{animation:none}}

@media(max-width:700px){.hero h1 .blue-word{font-size:.88em;white-space:nowrap;letter-spacing:-3.5px}}

/* Die-cut tool stickers frame the hero without crossing the headline. */
.hero-sticker{display:grid;place-items:center;filter:drop-shadow(0 2px 1px #233a6020) drop-shadow(0 12px 14px #233a6016);--piece-travel:32px}
.hero-sticker .sticker-art{display:block;overflow:visible;object-fit:contain;transition:filter .4s}
.sticker-figma{left:8%;top:51%;transform:rotate(-13deg);--piece-travel:-26px}
.sticker-figma img{width:47px;height:71px;filter:drop-shadow(4px 0 0 white) drop-shadow(-4px 0 0 white) drop-shadow(0 4px 0 white) drop-shadow(0 -4px 0 white)}
.sticker-swift{right:7%;top:51%;transform:rotate(14deg)}
.sticker-swift svg{width:81px;height:81px}
@media(min-width:701px) and (max-width:1000px){.sticker-figma{left:4%;top:53%}.sticker-swift{right:3%;top:53%}.sticker-figma img{width:35px;height:53px}.sticker-swift svg{width:60px;height:60px}}
@media(max-width:700px){.play-star{top:9%;left:9%}.play-code{top:9%;right:9%}.sticker-figma{left:9%;top:21%;transform:rotate(-13deg)}.sticker-figma img{width:23px;height:35px;filter:drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -2px 0 white)}.sticker-swift{right:8%;top:21%;transform:rotate(13deg)}.sticker-swift svg{width:43px;height:43px}.hero-sticker{filter:drop-shadow(0 2px 1px #233a6018) drop-shadow(0 7px 8px #233a6018)}}

/* Padded SVG canvases preserve the complete sticker edge and shadow. */
.sticker-figma .sticker-art{width:59px;height:84px;filter:none}
.play-star{width:81px;height:81px;transform:rotate(-18deg);filter:drop-shadow(0 2px 1px #53351920) drop-shadow(0 12px 12px #53351912)}
.play-code{border:5px solid white;background:#ecf2ff;box-shadow:0 2px 2px #233a6010,0 13px 22px #233a6015;border-radius:23px}
.play-orbit{width:68px;height:68px;background:none;box-shadow:none;border:0;filter:drop-shadow(0 2px 1px #233a6018) drop-shadow(0 10px 12px #233a6016);transform:rotate(-12deg)}
.play-orbit:after{display:none}.play-orbit svg{display:block;width:100%;height:100%;overflow:visible}
.play-spark{width:100px;height:90px;right:13%;bottom:18%;transform:rotate(-5deg);filter:drop-shadow(0 2px 1px #233a6018) drop-shadow(0 10px 12px #233a6016)}
@media(min-width:701px) and (max-width:1000px){.play-star{width:60px;height:60px}.play-orbit{width:54px;height:54px}.play-spark{width:80px;height:73px;right:7%}.sticker-figma .sticker-art{width:47px;height:66px}}
@media(max-width:700px){.play-star{width:37px;height:37px}.play-code{border-width:3px;border-radius:12px}.play-orbit{width:35px;height:35px}.play-spark{width:60px;height:55px;right:5%;bottom:17%}.sticker-figma .sticker-art{width:32px;height:46px;filter:none}.sticker-figma{left:8%;top:20%}.sticker-swift{top:20%}}

/* Consistent vector outlines; no raster dilation of brand artwork. */
.hero-play-piece svg{overflow:visible}
.sticker-swift svg{width:88px;height:88px}
@media(min-width:701px) and (max-width:1000px){.sticker-swift svg{width:65px;height:65px}}
@media(max-width:700px){.sticker-swift svg{width:43px;height:43px}.sticker-figma,.sticker-swift{top:40px}.play-star,.play-code{display:none}.hero h1{font-size:clamp(52px,18vw,100px)}.hero-actions{gap:16px}.hero .primary{white-space:nowrap}.hero .text-link{white-space:nowrap}header{padding-left:18px;padding-right:18px}nav{gap:12px;font-size:11px;white-space:nowrap}.brand{flex-shrink:0}.method{overflow-x:clip}}
@media(max-width:360px){nav{gap:10px;font-size:10px}.hero-actions{gap:14px}.hero .primary{padding:13px 16px;font-size:11px;gap:10px}.hero .text-link{font-size:11px}.hero .plus{margin-left:4px}}

/* Keep the collaboration name tag proportional to its pointer. */
.play-spark{width:112px;height:85px;transform:rotate(-5deg)}
@media(min-width:701px) and (max-width:1000px){.play-spark{width:94px;height:71px}}
@media(max-width:700px){.play-spark{width:76px;height:58px}}

/* Xcode joins the hero as an app-shaped sticker. */
.play-code.sticker-xcode{background:none;border:0;box-shadow:none;border-radius:0;width:91px;height:91px;filter:drop-shadow(0 2px 1px #233a6018) drop-shadow(0 12px 14px #233a6016)}
.sticker-xcode img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -2px 0 white)}
@media(min-width:701px) and (max-width:1000px){.play-code.sticker-xcode{width:69px;height:69px}}
@media(max-width:700px){.play-code.sticker-xcode{display:grid;width:38px;height:38px;top:7px;right:9%}.sticker-xcode img{filter:drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white)}}

/* The hero stickers are decorative, with no pointer or keyboard actions. */
.hero-play-piece{border:0;background:none;padding:0;margin:0;pointer-events:none;cursor:default;user-select:none;-webkit-user-select:none}
.hero-play-piece img,.hero-play-piece svg{pointer-events:none;-webkit-user-drag:none}
@media(max-width:700px){
 .sticker-figma{left:5%;top:32px}
 .sticker-figma .sticker-art{width:54px;height:76px}
 .sticker-swift{right:5%;top:42px}
 .sticker-swift svg{width:65px;height:65px}
 .play-code.sticker-xcode{width:62px;height:62px;top:0;right:25%}
 .play-orbit{width:52px;height:52px;left:6%;bottom:17%}
 .play-spark{width:100px;height:76px;right:5%;bottom:13%}
}
@media(max-width:360px){
 .sticker-figma{left:3%}.sticker-figma .sticker-art{width:50px;height:71px}
 .sticker-swift{right:3%}.sticker-swift svg{width:58px;height:58px}
 .play-code.sticker-xcode{width:56px;height:56px;right:24%}
 .play-orbit{width:46px;height:46px;bottom:15%}
 .play-spark{width:92px;height:70px;bottom:11%}
}

/* One entrance sequence; transform stays free for pointer and scroll motion. */
.hero .eyebrow{animation:hero-enter-soft .8s .08s both cubic-bezier(.22,1,.36,1)}
.hero h1{animation:hero-enter-title 1.05s .18s both cubic-bezier(.22,1,.36,1)}
.hero-description{animation:hero-enter-soft .85s .36s both cubic-bezier(.22,1,.36,1)}
.hero-actions{animation:hero-enter-soft .85s .46s both cubic-bezier(.22,1,.36,1)}
.hero-foot{animation:hero-enter-soft .9s .65s both cubic-bezier(.22,1,.36,1)}
@keyframes hero-enter-soft{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes hero-enter-title{from{opacity:0;translate:0 30px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.hero .eyebrow,.hero h1,.hero-description,.hero-actions,.hero-foot{animation:none}}

@media(max-width:700px){.play-star{display:block;width:50px;height:50px;left:25%;top:0}}
@media(max-width:360px){.play-star{width:46px;height:46px;left:25%}}

/* Soft distant details create a second plane behind the primary stickers. */
.background-sticker{z-index:-1;opacity:1;filter:drop-shadow(0 7px 10px #536b8c12)}
.background-sticker :is(svg,img){display:block;width:100%;height:100%;filter:none}
.sticker-symbols{left:26%;top:10%;width:52px;height:52px;transform:rotate(-12deg)}
.sticker-simulator{right:28%;bottom:12%;width:66px;height:66px;transform:rotate(10deg)}
@media(max-width:700px){.sticker-symbols{left:44%;top:9px;width:38px;height:38px}.sticker-simulator{left:42%;right:auto;bottom:13%;width:52px;height:52px}.background-sticker{opacity:1}.background-sticker :is(svg,img){filter:none}}

.background-sticker img{object-fit:contain}

/* Offset the distant icons along the outer sides of the composition. */
.sticker-symbols{left:3%;top:18%}
.sticker-simulator{right:3%;bottom:23%}
@media(max-width:700px){.sticker-symbols{left:3%;top:34%;width:34px;height:34px}.sticker-simulator{left:auto;right:3%;bottom:34%;width:42px;height:42px}}

/* Looser, asymmetrical spacing across the hero. */
.play-star{left:15%;top:22%}
.play-code.sticker-xcode{right:9%;top:18%}
.sticker-figma{left:6%;top:52%}
.sticker-swift{right:5%;top:48%}
.play-orbit{left:20%;bottom:16%}
.play-spark{right:17%;bottom:13%}
.sticker-symbols{left:3%;top:14%}
.sticker-simulator{right:2%;bottom:25%}
@media(max-width:700px){
 .play-star{left:27%;top:3px}
 .play-code.sticker-xcode{right:17%;top:0}
 .sticker-figma{left:4%;top:43px}
 .sticker-swift{right:3%;top:53px}
 .play-orbit{left:7%;bottom:17%}
 .play-spark{right:5%;bottom:11%}
 .sticker-symbols{left:2%;top:32%}
 .sticker-simulator{right:2%;top:auto;bottom:35%}
}

/* Alternate foreground and background details along a loose diagonal. */
.play-star{left:8%;top:21%}
.play-code.sticker-xcode{right:16%;top:13%}
.sticker-figma{left:15%;top:57%}
.sticker-swift{right:4%;top:46%}
.play-orbit{left:6%;bottom:13%}
.play-spark{right:22%;bottom:12%}
.sticker-symbols{left:26%;top:8%}
.sticker-simulator{right:5%;bottom:20%}
@media(max-width:700px){
 .play-star{left:8%;top:5px}
 .play-code.sticker-xcode{right:11%;top:0}
 .sticker-figma{left:4%;top:80px}
 .sticker-swift{right:3%;top:79px}
 .play-orbit{left:7%;bottom:15%}
 .play-spark{right:6%;bottom:12%}
 .sticker-symbols{left:43%;top:16px}
 .sticker-simulator{right:3%;top:auto;bottom:35%}
}

/* Paired positions mirror each other around the central typography. */
.play-star{left:11%;top:24%;bottom:auto}
.play-code.sticker-xcode{right:11%;top:24%;bottom:auto}
.sticker-figma{left:7%;top:50%;bottom:auto}
.sticker-swift{right:7%;top:50%;bottom:auto}
.play-orbit{left:16%;top:auto;bottom:15%}
.play-spark{right:16%;top:auto;bottom:15%}
.sticker-symbols{left:26%;top:10%;bottom:auto}
.sticker-simulator{left:auto;right:26%;top:10%;bottom:auto}
@media(max-width:700px){
 .play-star{left:12%;top:0;bottom:auto}
 .play-code.sticker-xcode{right:12%;top:0;bottom:auto}
 .sticker-figma{left:4%;top:76px;bottom:auto}
 .sticker-swift{right:4%;top:76px;bottom:auto}
 .play-orbit{left:8%;top:auto;bottom:14%}
 .play-spark{right:8%;top:auto;bottom:14%}
 .sticker-symbols{left:34%;top:25px;bottom:auto}
 .sticker-simulator{left:auto;right:34%;top:25px;bottom:auto}
}

.background-sticker :is(svg,img){filter:none}
@media(max-width:700px){.background-sticker :is(svg,img){filter:none}}

/* Mobile stickers frame the content at several heights. */
@media(max-width:700px){
 .hero{min-height:max(740px,calc(100svh - 67px))}
 .play-star{left:10%;top:7%;bottom:auto}
 .play-code.sticker-xcode{right:10%;top:8%;bottom:auto}
 .sticker-symbols{left:5%;top:27%;bottom:auto}
 .sticker-simulator{left:auto;right:5%;top:27%;bottom:auto}
 .sticker-figma{left:8%;top:auto;bottom:21%}
 .sticker-swift{right:8%;top:auto;bottom:21%}
 .play-orbit{left:25%;top:auto;bottom:9%}
 .play-spark{right:18%;top:auto;bottom:8%}
}

/* Subtle mobile depth of field; foreground stickers stay sharp. */
@media(max-width:700px){
 .sticker-symbols img{filter:blur(.8px)}
 .sticker-simulator img{filter:blur(1.2px)}
 .play-code.sticker-xcode img{filter:blur(.35px)}
 .play-orbit svg{filter:blur(.25px)}
}

/* One product, from an initial sketch to a native experience. */
.evolution-scene{height:310px;display:flex;align-items:center;justify-content:center}
.evolution-grid{position:absolute;inset:-12px 7%;background-image:linear-gradient(#7098cb0b 1px,transparent 1px),linear-gradient(90deg,#7098cb0b 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.evolution-phone{position:relative;width:190px;height:300px;border:5px solid #24282e;border-radius:33px;background:#f7f8fa;box-shadow:0 24px 45px #263b5824,inset 0 0 0 1px #fff8;transform:rotate(-3deg);overflow:hidden}
.evolution-island{position:absolute;top:8px;left:50%;translate:-50% 0;width:57px;height:13px;background:#24282e;border-radius:12px;z-index:2}
.evolution-screen{padding:35px 14px 12px;font-family:var(--display);text-align:left}
.evolution-greeting{font-size:6px;letter-spacing:1.1px;color:#8b929f;display:block;margin-bottom:5px}
.evolution-screen>strong{font-size:18px;letter-spacing:-.7px}
.evolution-card{margin:14px 0 11px;padding:13px 8px;background:white;border-radius:15px;text-align:center;box-shadow:0 5px 14px #18335806}
.evolution-card>span{font-size:6px;color:#929aa9;letter-spacing:.4px}
.evolution-ring{width:84px;height:84px;border:4px solid #3478f6;border-right-color:#e8eef8;border-radius:50%;display:grid;place-items:center;margin:10px auto}
.evolution-ring b{font-size:24px;font-weight:550;letter-spacing:-1px}
.evolution-button{background:#3478f6;color:white;border-radius:10px;padding:10px;font-size:8px;display:flex;justify-content:space-between}
.evolution-tabs{display:flex;justify-content:space-around;margin-top:12px;color:#8d97a6;font-size:14px}.evolution-tabs i{font-style:normal}.evolution-tabs i:first-child{color:#3478f6}
.evolution-label{position:absolute;left:8%;top:30px;color:#8d98a9;font-size:9px;letter-spacing:2px}
.evolution-aside{position:absolute;right:5%;bottom:25px;max-width:150px;font-size:22px;line-height:1.2;letter-spacing:-.6px;color:#6b7b91;text-align:left}
.evolution-detail{position:absolute;padding:15px 20px;border:1px solid #dce4f0;background:#ffffffc9;border-radius:14px;text-align:left;box-shadow:0 10px 25px #2b528009;backdrop-filter:blur(12px)}
.evolution-detail span{display:block;font-size:7px;letter-spacing:1.6px;color:#8793a4;margin-bottom:8px}.evolution-detail b{font-size:13px;font-weight:550}.detail-a{left:15%;top:110px;transform:rotate(-6deg)}.detail-b{right:12%;top:85px;transform:rotate(5deg)}
.evolution-sketch .evolution-phone{border:2px solid #8794a5;border-radius:25px;background:#fff;box-shadow:none;transform:rotate(-7deg);filter:grayscale(1)}
.evolution-sketch .evolution-island{background:transparent;border:1px solid #8794a5}
.evolution-sketch .evolution-card,.evolution-sketch .evolution-button{background:transparent;color:#7b8898;border:1px dashed #9aa6b5;border-radius:5px;box-shadow:none}
.evolution-sketch .evolution-ring{border:2px dashed #8591a1}.evolution-sketch .evolution-detail{border-style:dashed;box-shadow:none;background:transparent}
.evolution-canvas .evolution-phone{border:1px solid #7e72ff;border-radius:21px;transform:rotate(0);box-shadow:0 0 0 5px #8c7aff0a,0 20px 40px #23395d12;overflow:visible}
.evolution-canvas .evolution-island{display:none}.evolution-canvas .evolution-screen{padding-top:30px}.evolution-canvas .evolution-button{outline:1px solid #8b6dff;outline-offset:5px}
.evolution-canvas .evolution-phone:after{content:'';position:absolute;inset:-5px;border:1px dashed #8b6dff;pointer-events:none}
.evolution-live .evolution-grid{opacity:.25}.evolution-live .evolution-ring{animation:evolution-breathe 4s ease-in-out infinite}.evolution-live .evolution-detail{border-color:#e5ebf3}.evolution-live .evolution-aside{color:#3478f6}
@keyframes evolution-breathe{50%{box-shadow:0 0 0 6px #3478f60b}}
@media(max-width:700px){
 .method.method-ready{height:calc(100svh + 800px)}
 .evolution-scene{height:260px;top:100px;max-width:100%}
 .evolution-phone{width:158px;height:256px;border-width:4px;border-radius:27px}
 .evolution-screen{padding:30px 11px 9px}.evolution-screen>strong{font-size:16px}.evolution-card{margin:10px 0;padding:9px 5px}.evolution-ring{width:66px;height:66px;margin:8px auto}.evolution-ring b{font-size:20px}.evolution-button{padding:9px;font-size:7px}.evolution-tabs{margin-top:8px}
 .evolution-label{left:0;top:4px;font-size:6px;letter-spacing:1px;width:65px;line-height:1.7}
 .evolution-aside{right:0;bottom:0;font-size:12px;max-width:75px}
 .evolution-detail{padding:10px 9px;border-radius:9px;max-width:85px}.evolution-detail span{font-size:5px;letter-spacing:.8px;margin-bottom:5px}.evolution-detail b{font-size:8px}.detail-a{left:-5px;top:85px}.detail-b{right:-5px;top:45px}
 .method-copy h3{font-size:clamp(42px,12vw,58px);letter-spacing:-2.6px}
}
@media(prefers-reduced-motion:reduce){.evolution-live .evolution-ring{animation:none}}

/* Give the product transformation a larger, clearer stage. */
@media(min-width:701px){
 .method-ready .method-stage{height:610px}
 .method-panel{height:610px}
 .method-ready .method-sticky{min-height:800px}
 .evolution-scene{top:135px;height:390px}
 .evolution-phone{zoom:1.3}
 .evolution-label{left:4%;top:28px;font-size:10px}
 .detail-a{left:8%;top:145px}
 .detail-b{right:6%;top:95px}
 .evolution-aside{right:3%;bottom:30px;font-size:25px;max-width:170px}
}
@media(max-width:700px){
 .method-ready .method-stage{height:575px}
 .method-panel{height:575px}
 .method-ready .method-sticky{min-height:800px;padding-top:85px}
 .evolution-scene{top:105px;height:355px}
 .evolution-phone{zoom:1.35}
 .evolution-label{top:0;left:0}
 .detail-a{left:-5px;top:135px}
 .detail-b{right:-5px;top:85px}
 .evolution-aside{bottom:0;right:0}
 .method-copy>p{bottom:0}
}
@media(prefers-reduced-motion:reduce){
 .method-ready .method-panel{height:610px}
}

/* A wide design surface replaces the miniature device. */
.evolution-phone{zoom:1!important;width:470px;height:285px;border:1px solid #dfe5ee;border-radius:22px;background:#f7f9fc;transform:rotate(-2deg);box-shadow:0 28px 70px #25447018;overflow:hidden}
.evolution-island{display:none}
.evolution-screen{position:relative;height:100%;padding:30px 28px;text-align:left;box-sizing:border-box}
.evolution-greeting{font-size:9px;letter-spacing:1.6px;margin-bottom:8px}
.evolution-screen>strong{font-size:32px;letter-spacing:-1.3px}
.evolution-card{position:absolute;right:24px;top:24px;width:190px;height:230px;margin:0;padding:18px 10px;box-sizing:border-box;border-radius:18px}
.evolution-card>span{font-size:8px}.evolution-ring{width:115px;height:115px;margin:18px auto;border-width:5px}.evolution-ring b{font-size:33px}
.evolution-button{position:absolute;left:28px;bottom:65px;width:170px;padding:14px;box-sizing:border-box;font-size:10px;border-radius:12px}
.evolution-tabs{position:absolute;bottom:24px;left:28px;width:170px;margin:0;font-size:19px}
.evolution-sketch .evolution-phone{border:1px dashed #8b98aa;border-radius:8px;transform:rotate(-3deg);background:#fff}
.evolution-sketch .evolution-screen{font-family:Georgia,serif}
.evolution-sketch .evolution-card{border:1px dashed #a5afbd;border-radius:6px}
.evolution-canvas .evolution-phone{border-radius:12px;transform:rotate(0);border-color:#8b6dff}
.evolution-canvas .evolution-screen{padding:30px 28px}
.evolution-live .evolution-phone{transform:rotate(1deg);background:linear-gradient(130deg,#f3f7ff,#fafbfe);border-color:#fff;box-shadow:0 30px 70px #3058a325}
.evolution-label{left:0;top:8px}
.detail-a{left:0;top:155px;z-index:3;transform:rotate(-6deg) translateZ(40px)}
.detail-b{right:0;top:65px;z-index:3;transform:rotate(5deg) translateZ(50px)}
.evolution-aside{right:0;bottom:0;font-size:19px;max-width:160px}
@media(min-width:701px){.evolution-scene{width:min(850px,100%);height:355px;top:155px}.method-ready .method-stage{height:600px}}
@media(max-width:700px){
 .method-ready .method-sticky{min-height:720px}
 .method-ready .method-stage,.method-panel{height:505px}
 .evolution-scene{top:115px;height:285px;width:100%;max-width:380px}
 .evolution-phone{width:calc(100% - 12px);height:230px;border-radius:16px}
 .evolution-screen,.evolution-canvas .evolution-screen{padding:24px 18px}
 .evolution-greeting{font-size:6px;letter-spacing:1px}.evolution-screen>strong{font-size:23px;letter-spacing:-1px}
 .evolution-card{top:17px;right:15px;width:44%;height:194px;padding:14px 4px;border-radius:13px}
 .evolution-card>span{font-size:6px;letter-spacing:0}.evolution-ring{width:76px;height:76px;margin:16px auto;border-width:4px}.evolution-ring b{font-size:24px}
 .evolution-button{left:18px;bottom:62px;width:43%;padding:11px 8px;font-size:8px}
 .evolution-tabs{left:18px;bottom:25px;width:43%;font-size:17px}
 .evolution-label{left:6px;top:0;width:auto;font-size:7px}
 .evolution-detail{max-width:90px;padding:8px 10px}.detail-a{left:0;top:auto;bottom:0}.detail-b{right:0;top:-6px}
 .evolution-aside{right:4px;bottom:0;font-size:12px;max-width:110px}
}

/* Editorial compositions: intention, visual language, implementation. */
.abstract-scene{top:140px;height:320px;max-width:760px}
.abstract-halo{position:absolute;inset:-30px 15%;background:radial-gradient(ellipse,#c5d9ff66,transparent 70%)}
.abstract-tile{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:28px;background:linear-gradient(145deg,#fff,#eef3fa);box-shadow:0 22px 60px #31517c17,inset 0 1px #fff;color:#25354e;font-size:25px;letter-spacing:-.8px;font-weight:550;width:210px;height:150px;transform-style:preserve-3d}
.tile-one{left:7%;top:75px;transform:rotate(-12deg) translateZ(-50px)}
.tile-two{left:50%;top:20px;margin-left:-105px;transform:rotate(3deg) translateZ(60px);z-index:2}
.tile-three{right:5%;top:120px;transform:rotate(12deg) translateZ(5px)}
.abstract-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:9px;letter-spacing:2.5px;color:#8b96a7}
.abstract-design .tile-one{font-size:80px;background:#fff;color:#24334a}
.abstract-design .tile-two{background:#3478f6;color:#fff;font-size:90px;box-shadow:0 25px 65px #3478f633}
.abstract-design .tile-three{background:#e7e1ff;color:#8060da;font-size:80px}
.abstract-code .tile-one{font-family:monospace;font-size:65px;color:#647da2}
.abstract-code .tile-two{background:#252c3a;color:#fff;font-size:35px;font-weight:600}
.abstract-code .tile-three{background:linear-gradient(135deg,#ffb076,#f7774b);color:#fff;font-size:95px}
@media(max-width:700px){
 .abstract-scene{top:125px;height:260px;width:100%;max-width:380px}
 .abstract-tile{width:135px;height:110px;border-radius:21px;font-size:17px}
 .tile-one{left:0;top:60px}.tile-two{margin-left:-67px;top:15px}.tile-three{right:0;top:110px}
 .abstract-design .tile-one,.abstract-design .tile-three{font-size:56px}.abstract-design .tile-two{font-size:65px}
 .abstract-code .tile-one{font-size:43px}.abstract-code .tile-two{font-size:25px}.abstract-code .tile-three{font-size:65px}
 .abstract-caption{font-size:7px;letter-spacing:1.5px}
}

/* Scroll-driven deck fold; the original spread remains the resting pose. */
.abstract-tile{backface-visibility:hidden;will-change:translate,rotate,scale;filter:blur(calc(var(--deck-fold,0)*1.2px))}
.abstract-scene{perspective:1100px}
@media(prefers-reduced-motion:reduce){.abstract-tile{will-change:auto;filter:none}}

/* A soft material dissolve replaces the deck rotation. */
.abstract-scene:after{content:'';position:absolute;inset:15px 2% 20px;width:auto;height:auto;border-radius:50%;transform:none;background:radial-gradient(ellipse at 50% 45%,#fff9,transparent 65%);filter:blur(18px);opacity:var(--transition-light,0);z-index:4;pointer-events:none}
.abstract-tile{filter:none;backface-visibility:visible}

/* Horizontal card relay, clipped softly at the edges of its stage. */
.abstract-scene{overflow:clip;overflow-clip-margin:30px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.abstract-scene:after{display:none}
@media(prefers-reduced-motion:reduce){.abstract-scene{mask-image:none;overflow:visible}}

/* A staggered half-turn exchanges each card's face at the edge-on point. */
.abstract-scene{overflow:visible;mask-image:none;perspective:1100px;transform-style:preserve-3d}
.abstract-tile{backface-visibility:hidden;transform-origin:50% 50%;will-change:rotate;transition:none}
.abstract-scene:before{display:none}
@media(prefers-reduced-motion:reduce){.abstract-tile{will-change:auto}}

/* Mirror the side cards around the central card. */
.abstract-scene .tile-one{left:calc(50% - 315px);right:auto;top:95px;margin-left:0;transform:rotate(-10deg) translateZ(-25px)}
.abstract-scene .tile-two{left:50%;right:auto;top:30px;margin-left:-105px;transform:rotate(0deg) translateZ(60px)}
.abstract-scene .tile-three{left:calc(50% + 105px);right:auto;top:95px;margin-left:0;transform:rotate(10deg) translateZ(-25px)}
@media(max-width:700px){
 .abstract-scene .tile-one{left:calc(50% - 175px);top:85px;transform:rotate(-10deg) translateZ(-20px)}
 .abstract-scene .tile-two{left:50%;top:20px;margin-left:-67.5px;transform:rotate(0deg) translateZ(40px)}
 .abstract-scene .tile-three{left:calc(50% + 40px);top:85px;transform:rotate(10deg) translateZ(-20px)}
}
@media(max-width:360px){
 .abstract-scene .tile-one{left:calc(50% - 155px)}
 .abstract-scene .tile-three{left:calc(50% + 20px)}
}

/* One physical card per position prevents overlapping front/back compositions. */
.abstract-tile[data-face="0"]{background:linear-gradient(145deg,#fff,#eef3fa);color:#25354e;font-size:25px;font-family:var(--display)}
.abstract-tile[data-face="1"].tile-one{background:#fff;color:#24334a;font-size:80px}
.abstract-tile[data-face="1"].tile-two{background:#3478f6;color:#fff;font-size:90px}
.abstract-tile[data-face="1"].tile-three{background:#e7e1ff;color:#8060da;font-size:80px}
.abstract-tile[data-face="2"].tile-one{background:linear-gradient(145deg,#fff,#eef3fa);color:#647da2;font-family:monospace;font-size:65px}
.abstract-tile[data-face="2"].tile-two{background:#252c3a;color:#fff;font-size:35px}
.abstract-tile[data-face="2"].tile-three{background:linear-gradient(135deg,#ffb076,#f7774b);color:#fff;font-size:95px}
@media(max-width:700px){
 .abstract-tile[data-face="0"]{font-size:17px}
 .abstract-tile[data-face="1"].tile-one,.abstract-tile[data-face="1"].tile-three{font-size:56px}
 .abstract-tile[data-face="1"].tile-two{font-size:65px}
 .abstract-tile[data-face="2"].tile-one{font-size:43px}
 .abstract-tile[data-face="2"].tile-two{font-size:25px}
 .abstract-tile[data-face="2"].tile-three{font-size:65px}
}

/* Keep card centers fixed: depth translations must not orbit with the flip. */
.abstract-scene{transform:translateX(-50%);transition:none;perspective:none}
.abstract-scene .abstract-tile{transform:none;transform-origin:center;transform-style:flat;backface-visibility:visible}
.abstract-scene .tile-one,.abstract-scene .tile-two,.abstract-scene .tile-three{transform:none}

/* Development faces: language, interface code, inclusive experience. */
.abstract-code .tile-one,.abstract-tile[data-face="2"].tile-one{font-family:var(--display);font-size:40px;font-weight:650;color:#f47735;background:#fff5ee}
.abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.9;letter-spacing:-.2px;text-align:left;background:#242c3b;color:#bcd4ff;padding:18px;box-sizing:border-box}
.abstract-code .tile-three,.abstract-tile[data-face="2"].tile-three{white-space:pre-line;font-size:21px;line-height:1.5;letter-spacing:-.6px;text-align:center;background:linear-gradient(145deg,#e7f4ff,#e6efff);color:#2361a9;font-weight:550}
@media(max-width:700px){
 .abstract-code .tile-one,.abstract-tile[data-face="2"].tile-one{font-size:29px}
 .abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:8px;padding:10px;line-height:1.9}
 .abstract-code .tile-three,.abstract-tile[data-face="2"].tile-three{font-size:15px}
}

.accessibility-mark{width:76px;height:76px;display:block;flex-shrink:0}
@media(max-width:700px){.accessibility-mark{width:55px;height:55px}}

.accessibility-mark{width:90px;height:90px;object-fit:contain}
@media(max-width:700px){.accessibility-mark{width:64px;height:64px}}

.abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:9px;line-height:1.85;letter-spacing:-.25px;padding:12px}
@media(max-width:700px){.abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:6px;letter-spacing:-.15px;padding:7px}}

.abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:10px}
@media(max-width:700px){.abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:6.8px}}

.development-swift-mark{display:block;width:90px;height:90px;object-fit:contain}
@media(max-width:700px){.development-swift-mark{width:64px;height:64px}}

.design-switch{display:block;position:relative;width:100px;height:60px;border-radius:40px;background:#34c759;box-shadow:inset 0 1px 3px #12762c18;flex-shrink:0}
.design-switch-thumb{position:absolute;right:4px;top:4px;width:52px;height:52px;background:#fff;border-radius:50%;box-shadow:0 3px 7px #15351c26,0 1px 2px #15351c14}
@media(max-width:700px){.design-switch{width:70px;height:42px}.design-switch-thumb{width:36px;height:36px;top:3px;right:3px}}

/* Neutral surface keeps the native switch as the color accent. */
.abstract-design .tile-three,.abstract-tile[data-face="1"].tile-three{background:linear-gradient(145deg,#fff,#eef3fa);color:#25354e}
.abstract-design .tile-three,.abstract-tile[data-face="1"].tile-three{background:linear-gradient(145deg,#f0fff4,#d9f5e2);border-color:#f6fff8}

/* Larger mobile cards, with a tighter symmetric spread. */
@media(max-width:700px){
 .abstract-scene{height:300px;max-width:440px}
 .abstract-scene .abstract-tile{width:160px;height:135px;border-radius:24px}
 .abstract-scene .tile-one{left:calc(50% - 190px);top:105px;margin-left:0}
 .abstract-scene .tile-two{left:50%;top:20px;margin-left:-80px}
 .abstract-scene .tile-three{left:calc(50% + 30px);top:105px;margin-left:0}
 .abstract-tile[data-face="0"]{font-size:20px}
 .abstract-tile[data-face="1"].tile-one{font-size:66px}
 .abstract-tile[data-face="1"].tile-two{font-size:75px}
 .abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:8px;padding:9px}
 .development-swift-mark,.accessibility-mark{width:76px;height:76px}
 .design-switch{width:82px;height:49px}
 .design-switch-thumb{width:43px;height:43px;right:3px;top:3px}
 .method-ready .method-stage,.method-panel{height:545px}
 .method-ready .method-sticky{min-height:760px}
}
@media(max-width:380px){
 .abstract-scene .abstract-tile{width:148px;height:128px}
 .abstract-scene .tile-one{left:calc(50% - 165px)}
 .abstract-scene .tile-two{margin-left:-74px}
 .abstract-scene .tile-three{left:calc(50% + 17px)}
 .abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:7.4px}
}

/* Preserve a clear landscape rectangle on mobile. */
@media(max-width:700px){
 .abstract-scene .abstract-tile{width:178px;height:112px;border-radius:19px}
 .abstract-scene .tile-one{left:calc(50% - 195px);top:112px}
 .abstract-scene .tile-two{left:50%;margin-left:-89px;top:20px}
 .abstract-scene .tile-three{left:calc(50% + 17px);top:112px}
 .development-swift-mark,.accessibility-mark{width:70px;height:70px}
 .abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:8px;line-height:1.65;padding:10px}
}
@media(max-width:380px){
 .abstract-scene .abstract-tile{width:160px;height:102px;border-radius:18px}
 .abstract-scene .tile-one{left:calc(50% - 168px)}
 .abstract-scene .tile-two{margin-left:-80px}
 .abstract-scene .tile-three{left:calc(50% + 8px)}
 .abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{font-size:7.3px}
}

/* Mobile layout audit: contain the spread and fit the sticky scene to the screen. */
@media(max-width:700px){
 .method-ready .method-sticky{height:100svh;min-height:0;padding:96px 22px 22px;justify-content:flex-start}
 .method-ready .method-stage{height:calc(100svh - 165px);min-height:390px;margin:24px 0 0}
 .abstract-scene{--card-width:clamp(138px,41vw,178px);top:clamp(92px,15svh,125px);height:280px;width:100%;max-width:400px}
 .abstract-scene .abstract-tile{width:var(--card-width);height:calc(var(--card-width)*.63);border-radius:18px}
 .abstract-scene .tile-one{left:calc(50% - var(--card-width));top:115px;margin-left:0}
 .abstract-scene .tile-two{left:50%;top:20px;margin-left:calc(var(--card-width)*-.5)}
 .abstract-scene .tile-three{left:50%;top:115px;margin-left:0}
 .method-copy>p{bottom:12px;font-size:12px;line-height:1.7;width:100%;max-width:325px}
 .abstract-caption{bottom:0}
 .hero{min-height:max(700px,calc(100svh - 67px))}
}
@media(max-width:700px) and (max-height:740px){
 .method-ready .method-sticky{padding-top:90px;padding-bottom:12px}
 .method-ready .method-stage{height:calc(100svh - 145px);min-height:0;margin-top:18px}
 .abstract-scene{top:76px;height:245px}
 .abstract-scene .tile-one,.abstract-scene .tile-three{top:100px}
 .method-copy h3{font-size:43px;line-height:1.15}
 .method-copy>p{font-size:11px;line-height:1.65;bottom:0}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){
 .method-ready .method-sticky{height:auto;min-height:0;position:relative}
 .method-ready .method-stage{height:auto;min-height:0}
 .method-ready .method-panel{position:relative;height:490px;margin:20px 0 40px}
}

/* Keep every tool description in the normal mobile reading flow. */
@media(max-width:700px){
 .assembly-section{height:auto}
 .toolkit-runway{height:calc(100svh + 400px)}
 .assembly-section .toolkit-sticky{height:100svh;min-height:0;padding:96px 22px 30px}
 .toolkit-runway .tool-assembly{height:180px;min-height:140px}
 .assembly-section>.assembly-details{margin:0 22px 45px;min-height:0;opacity:1!important}
 .assembly-details .tool,.assembly-details .tool.active{display:block;text-align:left;background:transparent;border-radius:0;border-bottom:1px solid var(--line)!important;padding:24px 8px!important}
 .assembly-details .tool.active:nth-child(odd){padding-left:8px!important}
 .assembly-details .tool h3{color:var(--ink)}
}

/* Bring the toolkit descriptions closer to a larger mobile dock. */
@media(max-width:700px){
 .assembly-section{--app-size:clamp(46px,13.7vw,60px);--app-gap:10px}
 .assembly-dock{width:calc(var(--app-size)*5 + var(--app-gap)*4 + 22px);height:calc(var(--app-size) + 24px)}
 .toolkit-runway{height:calc(100svh + 180px)}
 .assembly-section .toolkit-sticky{justify-content:flex-start;padding-bottom:20px}
 .toolkit-runway .tool-assembly{flex:1;height:auto;min-height:120px;margin:14px 0 0}
 .assembly-section>.assembly-details{margin-top:-60px;position:relative}
}
@media(max-width:360px){.assembly-section{--app-size:46px;--app-gap:9px}}
@media(max-width:700px){
 .toolkit-runway{height:700px}
 .assembly-section .toolkit-sticky{height:520px;min-height:0;padding-top:96px}
 .toolkit-runway .tool-assembly{flex:none;height:160px;min-height:160px}
 .assembly-section>.assembly-details{margin-top:-75px}
}

/* A continuous canvas connects the manifesto to the approach. */
.design-manifesto,.method{background:var(--bg)}
.method{margin-top:0}
.design-manifesto:before{background:radial-gradient(ellipse at 50% 50%,#e0eaff66,transparent 70%)}

/* A quiet editorial pause, with focus and tactile rhythm. */
.design-manifesto{min-height:700px;padding:110px 24px 95px;isolation:isolate}
.manifesto-kicker{font-size:9px;font-weight:600;letter-spacing:2.5px;color:#8b96a8;margin-bottom:38px}
.manifesto-text{font-weight:650;font-size:clamp(56px,7.6vw,108px);line-height:1.12;letter-spacing:-5px}
.manifesto-text>span{display:inline-block;filter:blur(calc((1 - var(--word-focus,1))*3px));transform:translateY(calc((1 - var(--word-focus,1))*10px));transition:color .25s,filter .1s,transform .1s}
.manifesto-text>.manifesto-blue{position:relative}
.manifesto-text>.manifesto-blue:after{content:'';position:absolute;left:3px;right:3px;bottom:-10px;height:3px;border-radius:3px;background:linear-gradient(90deg,#7db6ff,#426af5);transform:scaleX(var(--word-focus,0));transform-origin:left;opacity:.6}
.manifesto-note{display:flex;justify-content:center;gap:27px;margin-top:48px;font-size:14px;color:#7b8799;opacity:calc(.35 + var(--manifesto-progress,1)*.65)}
.manifesto-sense{display:inline-flex;align-items:center;gap:10px}
.manifesto-sense svg{width:22px;height:22px;color:#6585b2}
.manifesto-waves{height:22px;width:23px;display:flex;gap:3px;align-items:center}
.manifesto-waves i{width:2px;height:8px;border-radius:3px;background:#6585b2;animation:manifesto-wave 2.4s ease-in-out infinite}
.manifesto-waves i:nth-child(2),.manifesto-waves i:nth-child(4){height:15px;animation-delay:.16s}.manifesto-waves i:nth-child(3){height:22px;animation-delay:.32s}
@keyframes manifesto-wave{0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)}}
@media(max-width:700px){
 .design-manifesto{min-height:510px;padding:80px 22px}
 .manifesto-kicker{font-size:8px;letter-spacing:2px;margin-bottom:30px}
 .manifesto-text{font-size:clamp(43px,12.8vw,65px);letter-spacing:-2.5px;line-height:1.17}
 .manifesto-note{gap:18px;font-size:11px;margin-top:38px}
 .manifesto-sense{gap:7px}.manifesto-sense svg{width:18px;height:18px}
 .manifesto-text>.manifesto-blue:after{height:2px;bottom:-7px}
}
@media(prefers-reduced-motion:reduce){.manifesto-waves i{animation:none}.manifesto-text>span{filter:none;transform:none;transition:none}}

/* The claim becomes a visible refinement and a tactile response. */
.design-manifesto{padding-top:90px;padding-bottom:80px;min-height:850px}
.manifesto-text>.manifesto-blue:after{display:none}
.manifesto-note{display:block;margin-top:25px;opacity:1;font-size:16px}
.detail-demo{position:relative;width:360px;max-width:100%;margin:38px auto 0;padding:14px 18px 0}
.detail-demo-surface{position:relative;text-align:left;background:#fff;border:1px solid #e2e7ef;border-radius:calc(5px + var(--detail-refine,1)*19px);padding:26px;box-shadow:0 calc(4px + var(--detail-refine,1)*12px) 40px #314c7610}
.detail-demo-label{display:block;font-size:8px;letter-spacing:1.5px;color:#8c98a8;transform:translateX(calc((1 - var(--detail-refine,1))*12px))}
.detail-demo-surface>strong{display:block;font-size:23px;letter-spacing:-.8px;margin:14px 0 8px;transform:translateX(calc((1 - var(--detail-refine,1))*-9px))}
.detail-demo-copy{font-size:12px;color:#7b8798;display:block;margin-bottom:22px;transform:translateX(calc((1 - var(--detail-refine,1))*7px))}
.detail-demo-button{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 17px;background:#1465ef;color:white;font-size:12px;font-weight:550;border-radius:calc(3px + var(--detail-refine,1)*10px);transform:scale(calc(1 - var(--detail-press,0)*.045));box-shadow:0 calc(7px - var(--detail-press,0)*5px) 16px #1465ef26;overflow:hidden}
.detail-demo-button>span{font-size:18px}.detail-demo-button i{position:absolute;inset:0;background:white;opacity:calc(var(--detail-press,0)*.2)}
.detail-guide{position:absolute;left:44px;right:44px;height:1px;background:#81a7ed;opacity:calc((1 - var(--detail-refine,1))*.55);z-index:2}.guide-top{top:82px}.guide-bottom{bottom:90px}
.detail-demo-caption{display:flex;justify-content:space-between;gap:14px;margin:20px -5px 0;font-size:10px;color:#8a95a6}
.detail-demo-caption>span:first-child{color:color-mix(in srgb,#1465ef calc(var(--detail-refine,1)*100%),#8a95a6)}
.detail-demo-caption>span:last-child{color:color-mix(in srgb,#1465ef calc(var(--detail-press,0)*100%),#8a95a6)}
@media(max-width:700px){.design-manifesto{min-height:740px;padding:70px 22px}.manifesto-kicker{margin-bottom:24px}.manifesto-note{font-size:13px;margin-top:22px}.detail-demo{width:320px;margin-top:25px;padding-left:10px;padding-right:10px}.detail-demo-surface{padding:22px}.detail-demo-surface>strong{font-size:21px}.detail-demo-caption{font-size:9px;margin-left:0;margin-right:0}}

/* Magnify the typography itself: the detail is the experience. */
.design-manifesto{min-height:760px;padding:120px 24px;overflow:visible}
.manifesto-text{position:relative;z-index:1}
.manifesto-text>.manifesto-blue{overflow:visible;filter:none;transform:none}
.type-lens{position:absolute;left:var(--lens-x,65%);top:48%;translate:-50% -50%;display:block;width:170px;height:170px;border-radius:50%;overflow:hidden;background:#fbfdff;box-shadow:0 25px 65px #20467c25,inset 0 0 0 1px #fff;border:1px solid #bbcee9;opacity:var(--lens-reveal,1);pointer-events:none;isolation:isolate}
.type-lens-word{position:absolute;white-space:nowrap;left:50%;top:50%;margin-top:-.565em;font-size:1.65em;line-height:1.13;letter-spacing:inherit;color:#1465ef;transform:translateX(var(--lens-text-x,-100px));font-weight:inherit}
.type-lens-grid{position:absolute;inset:0;background-image:linear-gradient(#1465ef15 1px,transparent 1px),linear-gradient(90deg,#1465ef15 1px,transparent 1px);background-size:12px 12px;box-shadow:inset 0 0 20px #cbdcfb3d;z-index:2}
.type-lens-cross{position:absolute;inset:15px;z-index:3;border:1px solid #1465ef2b;border-radius:50%}
.type-lens-cross:before,.type-lens-cross:after{content:'';position:absolute;background:#1465ef55}.type-lens-cross:before{width:1px;top:0;bottom:0;left:50%}.type-lens-cross:after{height:1px;left:0;right:0;top:50%}
.manifesto-note{margin-top:60px;position:relative;z-index:0}
@media(max-width:700px){.design-manifesto{min-height:560px;padding:95px 22px}.type-lens{width:112px;height:112px}.type-lens-grid{background-size:9px 9px}.type-lens-cross{inset:10px}.manifesto-note{margin-top:48px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.type-lens{opacity:1}}

/* Optical glass, rather than a flat magnifying circle. */
.type-lens{width:192px;height:192px;border:5px solid #f8fbff;outline:1px solid #a6bada80;background:linear-gradient(135deg,#fff,#f5f9ff);box-shadow:0 30px 65px -15px #1d427b48,0 6px 12px #21477514,inset 0 0 0 1px #9bb7dd66,inset 5px 5px 18px #fff,inset -5px -5px 20px #c8d9f32b;transition:box-shadow .4s}
.type-lens-word{text-shadow:1px 0 #77a9ff66,-1px 0 #a88dff44}
.type-lens-measure{position:absolute;left:0;right:0;bottom:20px;text-align:center;font:500 6px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.1px;color:#6682a5;z-index:5}
.type-lens-glint{position:absolute;inset:0;border-radius:50%;background:linear-gradient(125deg,#fff9 0%,#fff0 38%,#fff0 60%,#dceaff33 100%);box-shadow:inset 0 3px 2px #fff;z-index:4;pointer-events:none}
.type-lens-cross{inset:19px;border-style:dashed;border-color:#1465ef2b}
@media(max-width:700px){.type-lens{width:128px;height:128px;border-width:3px}.type-lens-cross{inset:12px}.type-lens-measure{bottom:13px;font-size:4.5px;letter-spacing:.5px}}

/* Reveal the actual glyph outline and measured font metrics inside the lens. */
.type-lens-word{color:#edf4ff;-webkit-text-stroke:1.1px #2467da;text-shadow:none}
.type-baseline-marker{display:inline-block;width:0;height:0;vertical-align:baseline}
.type-lens-grid{opacity:.35}
.type-lens-cross{display:none}
.type-lens-glint{opacity:.35}
.type-construction{position:absolute;inset:0;z-index:6;pointer-events:none}
.type-metric{position:absolute;left:0;right:0;height:1px;background:#f4775799}
.type-metric i{position:absolute;right:10px;bottom:3px;font:500 6px ui-monospace,SFMono-Regular,monospace;letter-spacing:.2px;color:#a84f3e;font-style:normal;background:#fbfdffdd;padding:1px 3px;border-radius:2px}
.type-ascender{top:var(--type-ascender,20%)}
.type-xheight{top:var(--type-xheight,35%);background:repeating-linear-gradient(90deg,#ee987c 0 4px,transparent 4px 7px)}
.type-baseline{top:var(--type-baseline,70%);background:#f47757}
.type-descender{top:var(--type-descender,85%);background:repeating-linear-gradient(90deg,#ee987c 0 4px,transparent 4px 7px)}
.type-lens-measure{font-size:5px;bottom:10px;color:#6e839f}
@media(max-width:700px){.type-lens-word{-webkit-text-stroke:.8px #2467da}.type-metric i{font-size:4.5px;right:6px;bottom:2px;padding:0 2px}.type-lens-measure{font-size:4px;bottom:7px}}

/* Two balanced, purpose-led hero actions. */
.hero-actions{gap:12px;margin-top:32px}
.hero-actions .hero-project-link,.hero-actions .hero-about-link{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:55px;padding:9px 11px 9px 23px;border-radius:32px;font-size:13px;font-weight:550;letter-spacing:-.15px;transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.hero-actions .hero-project-link{background:linear-gradient(145deg,#2678ff,#1459df);border:1px solid #1e69ee;box-shadow:inset 0 1px #ffffff35,0 7px 18px #1465ef20}
.hero-actions .hero-about-link{background:#ffffff80;border:1px solid #dce3ed;color:#47566d;box-shadow:inset 0 1px #fff}
.hero-action-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;flex-shrink:0;background:#ffffff1c;transition:transform .35s var(--ease),background .3s}
.hero-action-icon svg{width:17px;height:17px;display:block}
.hero-about-link .hero-action-icon{background:#e9eef6;color:#667c9c}
@media(hover:hover) and (pointer:fine){
 .hero-actions>a:hover{transform:translateY(-3px)}
 .hero-project-link:hover .hero-action-icon{transform:rotate(45deg);background:#ffffff30}
 .hero-about-link:hover{background:#fff;box-shadow:0 8px 24px #3149740d}
 .hero-about-link:hover .hero-action-icon{transform:translateY(-1px);background:#dfe9f8}
}
.hero-actions>a:active{transform:scale(.98)}
@media(max-width:700px){
 .hero-actions{gap:9px;flex-wrap:wrap}
 .hero-actions .hero-project-link,.hero-actions .hero-about-link{font-size:11px;min-height:48px;padding:7px 8px 7px 16px;gap:12px}
 .hero-action-icon{width:29px;height:29px}.hero-action-icon svg{width:15px;height:15px}
}
@media(max-width:360px){.hero-actions{gap:7px}.hero-actions .hero-project-link,.hero-actions .hero-about-link{padding-left:12px;gap:8px;font-size:10px}.hero-action-icon{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.hero-actions>a,.hero-action-icon{transition:none}}
.hero .hero-project-link>span{font-size:inherit;line-height:1.3}
.hero .hero-project-link:hover>span{transform:none}
.hero .hero-project-link:hover>.hero-action-icon{transform:rotate(45deg)}

/* Hero actions remain visually still on hover. */
.hero-actions .hero-project-link:hover{transform:none;background:linear-gradient(145deg,#2678ff,#1459df);box-shadow:inset 0 1px #ffffff35,0 7px 18px #1465ef20}
.hero-actions .hero-about-link:hover{transform:none;background:#ffffff80;box-shadow:inset 0 1px #fff}
.hero-actions .hero-project-link:hover .hero-action-icon{transform:none;background:#ffffff1c}
.hero-actions .hero-about-link:hover .hero-action-icon{transform:none;background:#e9eef6}

.about .hello-wave{display:inline-block;color:inherit;font-size:.85em;line-height:1;vertical-align:baseline;transform-origin:75% 80%;animation:hello-wave 3.6s ease-in-out infinite;white-space:nowrap}
@keyframes hello-wave{0%,45%,100%{transform:rotate(0deg)}8%{transform:rotate(18deg)}16%{transform:rotate(-10deg)}24%{transform:rotate(18deg)}32%{transform:rotate(-6deg)}40%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:reduce){.about .hello-wave{animation:none}}

/* Project filters share the hero's button surfaces and proportions. */
.project-filters{gap:9px;align-items:center}
.project-filters .filter{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 20px;border:1px solid #dce3ed;border-radius:28px;background:#ffffff80;color:#47566d;font-size:13px;font-weight:550;letter-spacing:-.15px;box-shadow:inset 0 1px #fff;transition:background .2s,color .2s,border-color .2s}
.project-filters .filter.active{color:#fff;background:linear-gradient(145deg,#2678ff,#1459df);border-color:#1e69ee;box-shadow:inset 0 1px #ffffff35,0 7px 18px #1465ef20}
.project-filters .filter span{display:grid;place-items:center;min-width:24px;height:24px;margin:0;border-radius:50%;font-size:9px;opacity:1;background:#ffffff26;font-variant-numeric:tabular-nums}
.project-filters .filter:hover:not(.active){transform:none;background:#ffffff80}
@media(max-width:700px){.project-filters{gap:7px}.project-filters .filter{min-height:41px;padding:8px 14px;font-size:11px;gap:7px}.project-filters .filter span{min-width:21px;height:21px;font-size:8px}}
@media(max-width:360px){.project-filters{gap:5px}.project-filters .filter{padding:8px 10px;font-size:10px;gap:5px}}

/* Simple surfaces with a clear visual hierarchy. */
header{background:#f7f8faf5;border:1px solid #e5e9f0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-actions .hero-project-link,.hero-actions .hero-project-link:hover,.project-filters .filter.active{background:#1465ef;border-color:#1465ef;box-shadow:none}
.hero-actions .hero-about-link,.hero-actions .hero-about-link:hover,.project-filters .filter:not(.active),.project-filters .filter:hover:not(.active){background:#fff;border-color:#dce3ed;box-shadow:none;color:#47566d}
.hero-about-link .hero-action-icon,.hero-actions .hero-about-link:hover .hero-action-icon{background:#eef2f7;box-shadow:none}
.assembly-dock{background:#f1f4f9;border-color:#e0e6ef;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

.project-open{display:flex;align-items:center;justify-content:center;line-height:1;padding:0;flex-shrink:0}
.project-open svg{display:block;width:18px;height:18px}
:focus,:focus-visible{outline:none!important;outline-offset:0!important}

/* Compact navigation with a quiet selected state. */
header,body.scrolled header{width:calc(100% - 48px);max-width:900px;height:64px;margin:14px auto 0;top:14px;padding:0 16px 0 23px;border:1px solid #e4e8ef;border-radius:20px;background:#f9fafc;box-shadow:0 4px 16px #20365505;backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
header .brand{font-size:31px;line-height:1;letter-spacing:-2.8px;display:flex;align-items:center;min-height:44px}
header nav{gap:4px;align-items:center;font-size:12px;font-weight:500;color:#6b7483}
header nav a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border-radius:12px;white-space:nowrap;transition:color .2s,background .2s}
header nav a:after{display:none}
header nav a.current{color:#1c5edb;background:#eaf0fc}
@media(max-width:700px){
 header,body.scrolled header{width:calc(100% - 24px);height:58px;margin:10px auto 0;top:10px;padding:0 10px 0 15px;border-radius:18px}
 header .brand{font-size:28px;letter-spacing:-2.5px}
 header nav{gap:1px;font-size:10px}
 header nav a{padding:0 9px;min-height:38px;border-radius:11px}
}
@media(max-width:360px){header,body.scrolled header{padding-left:12px;padding-right:7px}header nav a{padding:0 7px}header nav{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){header nav a{transition:none}}
.assembly-section{overflow-x:clip}

/* Keep the refined navigation on a subtle glass surface. */
header,body.scrolled header{background:#ffffff9c;border-color:#ffffffd9;backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:0 6px 24px #263c5709,inset 0 1px 0 #ffffffdb}
@supports not (backdrop-filter:blur(1px)){header,body.scrolled header{background:#f9fafcf5}}
@media(prefers-reduced-transparency:reduce){header,body.scrolled header{background:#f9fafc;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Pill navigation with no hover effect. */
header,body.scrolled header{border-radius:999px}
header nav a{border-radius:999px;transition:none}
header nav a:hover{color:inherit;background:transparent;transform:none}
header nav a.current,header nav a.current:hover{color:#1c5edb;background:#eaf0fc}
header nav a:hover:after{display:none}

/* A small dot identifies the current section. */
header nav a.current,header nav a.current:hover{background:transparent;color:#34445b}
header nav a:after,header nav a:hover:after{display:block;left:50%;right:auto;bottom:2px;width:4px;height:4px;border-radius:50%;background:#1465ef;transform:translateX(-50%) scale(0);transition:none}
header nav a.current:after,header nav a.current:hover:after{transform:translateX(-50%) scale(1)}

/* Section labels read as quiet editorial introductions. */
.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{font-size:12px;font-weight:500;letter-spacing:.1px;color:#7c8798;line-height:1.5;text-transform:none}
@media(max-width:700px){.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{font-size:11px;letter-spacing:.1px}}

/* Small signature labels introduce each chapter. */
.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{display:inline-flex;align-items:center;gap:9px;color:#596c87;font-size:11px;font-weight:550;letter-spacing:.2px}
.section-label-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#e9eff9;box-shadow:inset 0 1px #fff;color:#4779c5;flex-shrink:0}
.section-label-icon svg{display:block;width:16px;height:16px}
.about .section-label-icon{background:#f1ebfa;color:#8a6aae}
.method-header .section-label-icon{background:#e9f2ed;color:#588b74}
.assembly-section .section-label-icon{background:#fff0e5;color:#b78054}
@media(max-width:700px){.section-label-icon{width:25px;height:25px;border-radius:8px}.section-label-icon svg{width:14px;height:14px}}

/* Typographic chapter signatures, without decorative icon tiles. */
.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{position:relative;display:inline-flex;gap:14px;align-items:center;font-size:9px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:#6d7889;line-height:1.4}
.about>.eyebrow.left:before,.projects>.section-heading .eyebrow.left:before,.method-header .eyebrow.left:before,.assembly-section .section-heading .eyebrow.left:before{content:'';width:22px;height:1px;background:#9baabe;flex-shrink:0}
.about>.eyebrow.left:after,.projects>.section-heading .eyebrow.left:after,.method-header .eyebrow.left:after,.assembly-section .section-heading .eyebrow.left:after{content:'';width:3px;height:3px;border-radius:50%;background:#1465ef;align-self:flex-start;margin-left:-7px;margin-top:1px}
@media(max-width:700px){.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{font-size:8px;letter-spacing:1.7px;gap:11px}}

/* Expressive chapter introductions, led by typography. */
.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{display:block;font-family:var(--display);font-size:clamp(22px,2.3vw,30px);font-weight:550;line-height:1.25;letter-spacing:-1px;text-transform:none;color:#263245}
.about>.eyebrow.left:before,.projects>.section-heading .eyebrow.left:before,.method-header .eyebrow.left:before,.assembly-section .section-heading .eyebrow.left:before,.about>.eyebrow.left:after,.projects>.section-heading .eyebrow.left:after,.method-header .eyebrow.left:after,.assembly-section .section-heading .eyebrow.left:after{display:none}
.eyebrow.left em{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;color:#2468df;letter-spacing:-.7px;font-size:1.13em}
.about>.eyebrow.left{margin-bottom:28px}
@media(max-width:700px){.about>.eyebrow.left,.projects>.section-heading .eyebrow.left,.method-header .eyebrow.left,.assembly-section .section-heading .eyebrow.left{font-size:20px;letter-spacing:-.65px}.method-header>p{display:none}.about>.eyebrow.left{margin-bottom:22px}}

/* Text-only hero actions with balanced padding. */
.hero-actions .hero-project-link,.hero-actions .hero-about-link{justify-content:center;gap:0;padding:16px 25px;min-height:52px}
@media(max-width:700px){.hero-actions .hero-project-link,.hero-actions .hero-about-link{padding:14px 20px;min-height:46px;font-size:12px}}
@media(max-width:360px){.hero-actions .hero-project-link,.hero-actions .hero-about-link{padding:13px 17px;font-size:11px}}

/* Web exploration: an editorial architecture website. */
.studio-art{height:440px;background:#e9e7f2;display:flex;align-items:flex-end;justify-content:center;padding:65px 65px 0}
.studio-browser{width:100%;max-width:900px;border-radius:15px 15px 0 0;overflow:hidden;background:#faf9f6;box-shadow:0 20px 65px #37304c26;transform:translateY(var(--parallax,0px))}
.studio-browser-bar{height:31px;background:#f1f0ed;border-bottom:1px solid #e4e2df;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:8px;color:#90908e}
.studio-site{padding:19px 30px 27px;color:#393332}.studio-site-nav{display:flex;justify-content:space-between;align-items:center}.studio-site-nav b{font-size:20px;letter-spacing:-1px}.studio-site-nav>span{font-size:8px}
.studio-site-body{position:relative;padding-top:30px}.studio-site-body>span{font-size:7px;letter-spacing:1.5px;color:#89817b}
.studio-site-body h3{font:500 57px/1.02 var(--display);letter-spacing:-2.9px;margin:15px 0 24px;position:relative;z-index:1}.studio-site-body h3 em{font-family:Georgia,serif;font-weight:400;color:#9482ae}
.studio-site-bottom{display:flex;justify-content:space-between;font-size:8px;line-height:1.6;color:#7f7772;position:relative;z-index:1}.studio-site-bottom>span:last-child{align-self:flex-end;letter-spacing:1px;font-size:7px}
.studio-sculpture{position:absolute;right:8%;top:20px;width:190px;height:200px;transform:rotate(-18deg)}
.studio-sculpture i{position:absolute;inset:0;border:28px solid #b6aac8;border-radius:48%;box-shadow:inset 5px 5px 10px #7160803d,8px 12px 18px #78678626;background:transparent;transform:rotateY(35deg)}
.studio-sculpture i:nth-child(2){inset:25px -10px -25px 10px;border-color:#cabedc}.studio-sculpture i:nth-child(3){inset:50px -20px -50px 20px;border-color:#ddd3e8}
@media(max-width:700px){.studio-art{height:335px;padding:65px 15px 0}.studio-site{padding:16px}.studio-site-nav b{font-size:16px}.studio-site-nav>span{font-size:6px}.studio-site-body{padding-top:28px}.studio-site-body h3{font-size:38px;letter-spacing:-1.7px;margin-bottom:25px}.studio-site-body>span{font-size:5.5px;letter-spacing:1px}.studio-sculpture{width:110px;height:125px;right:2%;top:36px;opacity:.8}.studio-sculpture i{border-width:17px}.studio-site-bottom{font-size:6px}.studio-site-bottom>span:last-child{font-size:5px;letter-spacing:.4px}.studio-browser-bar{font-size:6px}.project-filters{row-gap:8px}}

.fabitec-art{height:490px;background:#e6edf5;padding:65px 60px 0;display:flex;align-items:flex-start;justify-content:center}
.fabitec-browser{width:100%;max-width:950px;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 20px 55px #20395626;background:#fff;transform:translateY(var(--parallax,0px))}
.fabitec-browser-bar{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;background:#f7f9fc;font-size:9px;color:#8b97a8;border-bottom:1px solid #e8ecf2}
.fabitec-browser>img{width:100%;height:auto;display:block}
.project-visit{display:inline-flex;margin-top:26px;padding:13px 22px;border-radius:25px;background:#1465ef;color:white;font-size:13px}
.project-visit[hidden]{display:none}
@media(max-width:700px){.fabitec-art{height:280px;padding:62px 15px 0}.fabitec-browser-bar{height:25px;font-size:7px;padding:0 10px}.fabitec-browser{border-radius:10px 10px 0 0}}

/* Pointer tilt responds immediately; only the return to rest is eased. */
.project-art{transform:perspective(1000px) rotateX(var(--preview-y,0deg)) rotateY(var(--preview-x,0deg));transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.project-art.is-tracking{transition:box-shadow .35s var(--ease)}
@media(prefers-reduced-motion:reduce){.project-art{transform:none!important}}

/* A quiet, structured closing signature. */
.portfolio-footer{display:block;width:calc(100% - 108px);max-width:1212px;margin:0 auto;padding:40px 0 24px;border-top:1px solid var(--line)}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-signature{display:flex;align-items:center;gap:18px;color:var(--ink);text-decoration:none}
.footer-signature .brand{font-size:36px;line-height:1}
.footer-identity{font-size:14px;font-weight:550;letter-spacing:-.25px}
.footer-identity small{display:block;margin-top:6px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}
.footer-up{display:inline-flex;align-items:center;gap:12px;color:#59616e;font-size:12px;padding:10px 0;text-decoration:none}
.footer-up svg{width:30px;height:30px;padding:6px;border-radius:50%;background:#e9ecf2}
.footer-bottom{margin-top:36px;font-size:11px;color:#818793}
.footer-legal{display:flex;gap:24px;font-size:11px}
.footer-legal a{color:#727986;text-decoration:none;padding:8px 0}
.footer-legal a:after{display:none!important}
@media(max-width:700px){.portfolio-footer{width:calc(100% - 44px);margin:0 auto;padding:28px 0 22px}.footer-top{align-items:flex-start;gap:16px}.footer-signature{gap:12px}.footer-signature .brand{font-size:30px}.footer-identity{font-size:12px}.footer-identity small{font-size:10px;line-height:1.5}.footer-up{font-size:0;gap:0;padding:0}.footer-up svg{width:34px;height:34px}.footer-bottom{margin-top:28px;align-items:flex-start;flex-direction:column;gap:10px}.footer-legal{gap:22px;font-size:11px}}

/* Pointer interaction starts only after every icon has reached the dock. */
.assembly-section:not(.dock-ready) .assembly-flight,
.assembly-section:not(.dock-ready) .assembly-flight *{pointer-events:none!important}
.assembly-section:not(.dock-ready) .dock-item{transform:none!important;transition:none!important}
.assembly-section:not(.dock-ready) .dock-label{opacity:0!important;transition:none!important}

/* Blue accent aligned with the portfolio palette. */
.hero h1 .blue-word{background-image:linear-gradient(110deg,#175cd3 8%,#3d73e6 58%,#7168d9 100%);background-size:180% 100%}

/* One visual hierarchy: the animated step introduces the approach. */
.method-accessible-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sticky approach fills the viewport; cancel the normal anchor header offset. */
#approccio{scroll-margin-top:-110px}
@media(prefers-reduced-motion:no-preference){.method-ready .method-sticky{height:100svh;min-height:0}}

.abstract-tile .design-figma-mark{width:auto;height:58%;max-width:45%;object-fit:contain;display:block}
.abstract-tile[data-face="1"].tile-two{background:#f4f1fa}
.abstract-design .tile-two{background:#f4f1fa}

/* Legible captions under the approach cards. */
.abstract-caption{font-size:11px;font-weight:550;line-height:1.5;letter-spacing:1.3px;color:#59677c}
@media(max-width:700px){.abstract-caption{font-size:10px;letter-spacing:.8px}}

/* Stronger approach headings, preserving the original composition. */
.method-copy h3{font-size:clamp(96px,10vw,136px);font-weight:800;letter-spacing:-.065em;line-height:1.12}
@media(max-width:700px){.method-copy h3{font-size:clamp(40px,10.8vw,74px);font-weight:800;letter-spacing:-.065em;line-height:1.15}}

/* A crisp Figma-inspired pointer, only on devices with a mouse. */
@media(hover:hover) and (pointer:fine){html,body,body *{cursor:url("../assets/cursors/cursor.svg?v=483") 3 3,auto}input,textarea,[contenteditable="true"]{cursor:text}}

/* Two directional pools of light; both palettes share their shape. */
.hero{--hero-wash:rgba(59,126,235,.38);--hero-light:rgba(77,189,210,.27);background:radial-gradient(ellipse 62% 64% at 26% 69%,var(--hero-wash) 0%,transparent 85%),radial-gradient(ellipse 48% 42% at 73% 49%,var(--hero-light) 0%,transparent 90%);background-repeat:no-repeat}
.hero:before{inset:0;background:linear-gradient(180deg,var(--bg),transparent 24%,transparent 68%,var(--bg));z-index:0;pointer-events:none}
@media(max-width:700px){.hero{background:radial-gradient(ellipse 80% 53% at 27% 66%,var(--hero-wash),transparent 88%),radial-gradient(ellipse 56% 35% at 65% 43%,var(--hero-light),transparent 94%)}}
.hero-intro{position:relative;z-index:2}

/* A vertical reading indicator replaces the native scrollbar. */
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.reading-progress{position:fixed;left:auto;right:16px;top:50%;width:3px;height:120px;border-radius:999px;background:#d5dce780;transform:translateY(-50%);transform-origin:center;z-index:100;pointer-events:none;overflow:hidden}
.reading-progress:after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform:scaleY(var(--reading-progress,0));transform-origin:top}
@media(max-width:700px){.reading-progress{right:5px;width:2px;height:80px}}

/* Minimal side indicator. */
.reading-progress{right:18px;width:2px;height:100px;background:#d5dce780;border-radius:999px;overflow:visible}
.reading-progress:after{display:none}
.reading-progress-track{position:absolute;inset:0;border-radius:inherit;background:transparent}
.reading-progress-marker{position:absolute;left:0;top:calc(var(--reading-progress,0)*(100% - 16px));width:2px;height:16px;border-radius:999px;background:var(--blue)}
.reading-progress-value{display:none}
@media(max-width:700px){.reading-progress{right:6px;height:72px}}

.footer-actions{display:flex;align-items:center;gap:28px}
.footer-linkedin{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:12px;color:#59616e;text-decoration:none}
.footer-linkedin svg{width:18px;height:18px;flex-shrink:0;color:#1465ef}
@media(max-width:700px){.footer-actions{gap:14px}.footer-linkedin{min-height:34px}.footer-linkedin span{display:none}.footer-linkedin svg{width:20px;height:20px}}

/* Restrained project hover. */
.project-card:hover .project-art{box-shadow:0 8px 24px #26314b0b}
.project-card:hover .project-open{transform:none;background:transparent;border-color:#d5dbe5;color:#687181}

/* tvOS-inspired specular light, clipped to the project artwork. */
.project-art{isolation:isolate}
.project-art:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 65% 85% at var(--glow-x,50%) var(--glow-y,25%),#ffffff8c 0%,#ffffff30 32%,#ffffff08 54%,transparent 72%);mix-blend-mode:soft-light;box-shadow:inset 0 1px 0 #ffffff70,inset 0 0 0 1px #ffffff30;opacity:0;pointer-events:none;z-index:5;transition:opacity .3s ease}
@media(hover:hover) and (pointer:fine){.project-art:hover:after{opacity:1}}

/* Match the white cut-out edge of the other hero stickers. */
.sticker-symbols img,.sticker-simulator img{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)}
@media(max-width:700px){
 .sticker-symbols img{filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) blur(.8px)}
 .sticker-simulator img{filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) blur(1.2px)}
}

/* Balanced process composition with clear spacing around each card. */
.abstract-scene{--process-card:clamp(190px,20vw,224px);max-width:800px;height:330px}
.abstract-scene .abstract-tile{width:var(--process-card);height:calc(var(--process-card)*.66)}
.abstract-scene .tile-one{left:calc(50% - var(--process-card)*1.5 - 22px);right:auto;top:88px;margin-left:0}
.abstract-scene .tile-two{left:50%;right:auto;top:20px;margin-left:calc(var(--process-card)*-.5);z-index:2}
.abstract-scene .tile-three{left:calc(50% + var(--process-card)*.5 + 22px);right:auto;top:88px;margin-left:0}
.abstract-caption{bottom:8px}
@media(max-width:700px){
 .abstract-scene{--process-card:clamp(128px,39vw,170px);height:305px;max-width:400px}
 .abstract-scene .abstract-tile{height:calc(var(--process-card)*.66)}
 .abstract-scene .tile-one{left:calc(50% - var(--process-card) - 6px);top:132px}
 .abstract-scene .tile-two{left:50%;top:8px;margin-left:calc(var(--process-card)*-.5)}
 .abstract-scene .tile-three{left:calc(50% + 6px);top:132px}
 .abstract-caption{bottom:10px}
}
@media(max-width:700px) and (max-height:740px){
 .abstract-scene{height:270px}
 .abstract-scene .tile-one,.abstract-scene .tile-three{top:110px}
 .abstract-caption{bottom:8px}
}

/* Xcode Default Dark-inspired Swift syntax colours. */
.abstract-code .tile-two,.abstract-tile[data-face="2"].tile-two{background:#292a30;color:#fff}
.xcode-code{display:block;margin:0;text-align:left;white-space:pre;font:inherit;color:#fff}
.xcode-code .xc-keyword{color:#fc5fa3}
.xcode-code .xc-attribute{color:#d0a8ff}
.xcode-code .xc-type{color:#9ef1dd}
.xcode-code .xc-string{color:#fc6a5d}

/* Keep project plus buttons stable during refresh and restored hover states. */
.project-open,.project-card:hover .project-open{width:36px;height:36px;flex:0 0 36px;transform:none;rotate:none;translate:none;animation:none;transition:none}
.project-open svg{width:18px;height:18px;flex:0 0 18px;transform:none;animation:none;transition:none}

/* Original toolkit layout, extended to six tools. */
.assembly-section{--app-size:80px;--app-gap:20px}
.assembly-dock{width:calc(var(--app-size)*6 + var(--app-gap)*5 + 40px)}
.assembly-details{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:auto;min-height:190px;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.assembly-details .tool,.assembly-details .tool.active{display:block;padding:22px 16px 25px!important;border-right:1px solid var(--line);text-align:left;background:transparent}
.assembly-details .tool.active{background:#eaf1fc6b}
.assembly-details .tool:last-child{border-right:0}
.assembly-details .tool h3{font-size:18px;margin:0 0 12px;letter-spacing:-.5px}
.assembly-details .tool p{font-size:13px;line-height:1.65;min-height:43px;margin:0}
.assembly-details .tool>span{display:block;font-size:8px;letter-spacing:.7px;margin-top:20px}
@media(max-width:700px){
 .assembly-section{--app-size:clamp(40px,13vw,52px);--app-gap:6px}
 .assembly-dock{width:calc(var(--app-size)*6 + var(--app-gap)*5 + 18px);height:calc(var(--app-size) + 22px)}
 .assembly-section>.assembly-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:-75px 22px 45px;min-height:0;border:0}
 .assembly-details .tool,.assembly-details .tool.active,.assembly-details .tool.active:nth-child(odd){display:block;padding:24px 8px!important;border:0;border-bottom:1px solid var(--line)!important;background:transparent;text-align:left}
 .assembly-details .tool h3{font-size:16px;margin:0 0 8px}
 .assembly-details .tool p{font-size:12px;line-height:1.65;min-height:0}
 .assembly-details .tool>span{font-size:8px;margin-top:13px}
}
@media(prefers-reduced-motion:reduce){.assembly-section>.assembly-details{margin-top:12px}}

/* Tool icons highlight on hover or keyboard focus, without click feedback. */
.assembly-section .dock-item:active{transform:none}
@media(hover:hover) and (pointer:fine){.assembly-section .dock-item:hover:active{transform:translateY(-9px) scale(1.15)}}

/* Quiet two-blue accents; the hero has its own light-aware palette. */
:root{--title-gradient:linear-gradient(110deg,#1046b4 5%,#286ed5 48%,#168399 100%);--hero-title-gradient:linear-gradient(108deg,#103eaa 4%,#2a6ed2 48%,#147e99 100%)}
.hero h1 .blue-word,.assembly-section h2 .blue-word,#method-design .method-copy h3{background-image:var(--title-gradient);background-size:100% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:none}
.hero h1 .blue-word{background-image:var(--hero-title-gradient);background-size:100% 100%;animation:none}
@media(prefers-reduced-motion:reduce){.hero h1 .blue-word,.assembly-section h2 .blue-word,#method-design .method-copy h3{animation:none}}

.manifesto-text>.manifesto-blue,.manifesto-text>.manifesto-blue.lit{background-image:var(--title-gradient);background-size:100% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:none}
@media(prefers-reduced-motion:reduce){.manifesto-text>.manifesto-blue{animation:none}}

/* Leave room for descenders in the gradient-clipped word. */
.manifesto-text>.manifesto-blue{display:inline-block;padding-bottom:.18em;margin-bottom:-.18em;vertical-align:baseline;overflow:visible}
.manifesto-text>.manifesto-blue .type-lens{top:calc(48% - .0864em)}

/* Hold the detail composition for a scroll-driven lens pass. */
.manifesto-runway{position:relative;height:150svh;scroll-margin-top:-110px}
.manifesto-runway .design-manifesto{position:sticky;top:0;height:100svh;min-height:0;padding:100px 24px 65px;box-sizing:border-box;overflow:visible}
@media(max-width:700px){.manifesto-runway{height:145svh}.manifesto-runway .design-manifesto{padding:96px 22px 50px}}
@media(prefers-reduced-motion:reduce){.manifesto-runway{height:auto}.manifesto-runway .design-manifesto{position:relative;height:auto;min-height:560px}}

/* The white edge is drawn inside the artwork, before the entrance blur. */
.background-sticker .tool-sticker-art{overflow:visible;filter:none}
@media(max-width:700px){.sticker-symbols .tool-sticker-art{filter:blur(.8px)}.sticker-simulator .tool-sticker-art{filter:blur(1.2px)}}

.sticker-xcode .tool-sticker-art{display:block;width:100%;height:100%;overflow:visible;filter:none}
@media(max-width:700px){.sticker-xcode .tool-sticker-art{filter:blur(.35px)}}

/* Match the same cut-out weight and shadow used by the vector stickers. */
.background-sticker{filter:drop-shadow(0 2px 1px #233a6020) drop-shadow(0 12px 14px #233a6016)}
@media(max-width:700px){.background-sticker{filter:drop-shadow(0 2px 1px #233a6018) drop-shadow(0 7px 8px #233a6018)}}

/* Crisp sticker edges at rest; the entrance animation supplies its own blur. */
.sticker-symbols .tool-sticker-art,.sticker-simulator .tool-sticker-art,.sticker-xcode .tool-sticker-art{filter:none}

/* Smooth vector cut lines replace raster-alpha expansion. */
.tool-sticker-border{stroke-width:7px;stroke-linejoin:round}
@media(max-width:700px){.tool-sticker-border{stroke-width:5.2px}}

/* A single ambient canvas stays independent of the animated process cards. */
.method-sticky{--process-glow-blue:rgba(62,125,223,.43);--process-glow-ice:rgba(66,172,199,.31);background:none;isolation:isolate}
.method-sticky:before{content:'';position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse 42% 38% at 36% 52%,var(--process-glow-blue) 0%,transparent 85%),radial-gradient(ellipse 37% 35% at 66% 56%,var(--process-glow-ice) 0%,transparent 88%);mask-image:linear-gradient(180deg,transparent 12%,#000 34%,#000 72%,transparent 94%);-webkit-mask-image:linear-gradient(180deg,transparent 12%,#000 34%,#000 72%,transparent 94%)}
.abstract-halo{display:none}
@media(max-width:700px){.method-sticky:before{background:radial-gradient(ellipse 52% 32% at 43% 49%,var(--process-glow-blue) 0%,transparent 80%),radial-gradient(ellipse 42% 29% at 65% 56%,var(--process-glow-ice) 0%,transparent 80%)}}

/* Refined original signature. */
header .brand,.footer-signature .brand{font-family:var(--display);font-weight:800;letter-spacing:-2.3px;line-height:1;gap:0}
header .brand{font-size:32px}
.brand>span{margin-left:1px}
.footer-signature .brand{font-size:36px}
@media(max-width:700px){header .brand{font-size:29px;letter-spacing:-2.1px}.footer-signature .brand{font-size:31px;letter-spacing:-2.2px}}

/* Smaller background stickers need a lighter cut line. */
:is(.sticker-symbols,.sticker-simulator) .tool-sticker-border{stroke-width:4.4px}
@media(max-width:700px){:is(.sticker-symbols,.sticker-simulator) .tool-sticker-border{stroke-width:3.6px}}

/* A personal welcome in the about section. */
.about-memoji{display:block;width:144px;height:144px;object-fit:cover;border-radius:50%;margin:0 0 26px;transform:rotate(-4deg);transition:transform 1.1s var(--ease)}
.about-intro.visible .about-memoji{transform:rotate(0deg)}
.about-intro h2{margin-top:0}
@media(max-width:700px){.about-memoji{width:112px;height:112px;margin-bottom:23px}}
@media(prefers-reduced-motion:reduce){.about-memoji{transform:none;transition:none}}

/* Keep every process description directly below the mobile card scene. */
@media(max-width:700px){.method .method-copy>p{top:calc(clamp(92px,15svh,125px) + 327px);bottom:auto;max-width:325px;padding:0 6px;box-sizing:border-box}}
@media(max-width:700px) and (max-height:740px){.method .method-copy>p{top:366px}}

/* Centre the complete mobile process composition below the floating menu. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .method-ready .method-sticky{padding:82px 22px 22px;justify-content:center;box-sizing:border-box}
 .method-ready .method-stage{height:calc(clamp(92px,15svh,125px) + 389px);min-height:0;margin:0}
}
@media(max-width:700px) and (max-height:740px) and (prefers-reduced-motion:no-preference){
 .method-ready .method-stage{height:426px}
}



/* Mobile navigation expands from the original glass pill. */
.mobile-menu-toggle,.mobile-menu-contact,.mobile-menu-dismiss{display:none}
@media(max-width:700px){
 header,body.scrolled header{isolation:isolate;overflow:visible;background:transparent!important;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 16px 0 20px}
 header:before{content:'';position:absolute;inset:-1px;height:58px;border-radius:30px;background:#ffffffc9;border:1px solid #ffffffc9;box-shadow:0 8px 30px #2036550b;backdrop-filter:blur(25px) saturate(150%);-webkit-backdrop-filter:blur(25px) saturate(150%);z-index:-1;transition:height .45s var(--ease)}
 header.menu-open:before{height:353px}
 .mobile-menu-toggle{display:flex;position:relative;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;background:none;border:0;color:var(--ink);padding:0}
 .mobile-menu-toggle>span{display:block;width:19px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
 .menu-open .mobile-menu-toggle>span:first-child{transform:translateY(3.75px) rotate(45deg)}
 .menu-open .mobile-menu-toggle>span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
 header nav{position:absolute;left:0;right:0;top:64px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 24px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .4s var(--ease),visibility 0s .4s;pointer-events:none}
 header.menu-open nav{opacity:1;visibility:visible;transform:none;transition-delay:.08s;pointer-events:auto}
 header nav a{justify-content:flex-start;position:relative;min-height:53px;padding:0;font-size:24px;font-weight:550;letter-spacing:-.8px;color:var(--ink);border-radius:0;background:transparent!important}
 header nav a.current{color:var(--ink)}
 header nav a.current:after{display:block;position:static;width:6px;height:6px;margin-left:12px;border-radius:50%;background:var(--blue);transform:none}
 header nav .mobile-menu-contact{display:flex;justify-content:space-between;font-size:14px;letter-spacing:0;min-height:60px;margin-top:13px;border-top:1px solid var(--line);color:var(--blue)}
 .mobile-menu-dismiss:not([hidden]){display:block;position:fixed;inset:0;z-index:9;background:#11182720;border:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
}
@media(prefers-color-scheme:dark) and (max-width:700px){header:before{background:#1b1e25dd;border-color:#ffffff16;box-shadow:0 8px 35px #0003}}
@media(prefers-reduced-motion:reduce){header:before,header nav,.mobile-menu-toggle>span{transition:none}}

/* Give the toolkit flight more scroll distance and a gentler landing. */
@media(prefers-reduced-motion:no-preference) and (min-width:701px){.assembly-section{height:calc(100svh + 1000px)}}
@media(prefers-reduced-motion:no-preference) and (max-width:700px){.toolkit-runway{height:880px}}

/* Distant tool icons come into focus as they approach the dock. */
.assembly-section .dock-app{filter:drop-shadow(0 var(--flight-shadow-y,3px) var(--flight-shadow-blur,4px) rgb(33 54 88 / var(--flight-shadow-alpha,.07))) blur(var(--flight-blur,0px))}
@media(prefers-reduced-motion:reduce){.assembly-section .dock-app{filter:none}}

/* Pointer tilt is eased continuously in one animation loop. */
.project-art,.project-art.is-tracking{transition:box-shadow .35s var(--ease)}


/* Project preview cursor, scoped to image covers on pointer devices. */
@media(hover:hover) and (pointer:fine){body .project-art,body .project-art *{cursor:url("../assets/cursors/cursor.svg?v=483") 3 3,pointer}}

/* Only project covers open the detail dialog. */
.project-cover{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;border-radius:25px}
@media(hover:hover) and (pointer:fine){body .project-card,body .project-card .project-info,body .project-card .project-info *,body .project-card .tags,body .project-card .tags *{cursor:url("../assets/cursors/cursor.svg?v=483") 3 3,auto}}
.project-card:hover .project-art{box-shadow:none}
.project-cover:hover .project-art{box-shadow:0 8px 24px #26314b0b}

/* The Figma label fades in independently of the unchanged native cursor. */
.project-cursor-label{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s;will-change:transform}
.project-cursor-label>span{display:block;background:#1465ef;color:#fff;border:1.5px solid #fff;border-radius:4px;padding:4px 8px;font:600 10px/13px var(--body);letter-spacing:0;white-space:nowrap;box-shadow:0 2px 6px #13294c16;transform:none;transform-origin:top left;transition:none}
.project-cursor-label.is-visible{opacity:1;visibility:visible;transition-delay:0s}
.project-cursor-label.is-visible>span{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.project-cursor-label,.project-cursor-label>span{transition:none}}

/* Contact invitation, matching the reference layout. */
.contact-section{position:relative;isolation:isolate;overflow:hidden;padding:145px 24px 130px;text-align:center;scroll-margin-top:100px}
.contact-section:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.contact-content{max-width:1000px;margin:0 auto}
.contact-kicker{font:600 11px/1.5 var(--body);letter-spacing:2.4px;color:var(--muted);margin:0 0 27px}
.contact-section h2{font:800 clamp(44px,6.8vw,88px)/1.08 var(--display);letter-spacing:-.065em;margin:0}
.contact-section h2 span{background:var(--title-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.contact-description{font-size:18px;line-height:1.7;color:var(--muted);margin:28px 0 32px}
.contact-actions{display:flex;align-items:center;justify-content:center;gap:28px}
.contact-email{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;border-radius:999px;background:#1465ef;color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.contact-social{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.contact-address{display:inline-block;margin-top:25px;font-size:13px;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
@media(max-width:700px){.contact-section{padding:100px 22px 90px;scroll-margin-top:85px}.contact-kicker{margin-bottom:23px}.contact-section h2{font-size:clamp(40px,10.5vw,64px)}.contact-description{font-size:16px;margin:25px 0 29px}.contact-description br{display:none}.contact-actions{flex-direction:column;gap:22px}.contact-email{min-width:200px}.contact-address{font-size:12px;margin-top:25px}}

.project-cursor-label[hidden]{display:none!important}

/* A spatial fade softens only pixels leaving the viewport, not entire blocks. */
.scroll-edge-blur{position:fixed;inset:0 0 auto;height:125px;z-index:9;pointer-events:none;background:var(--bg);mask-image:linear-gradient(to bottom,#000 0%,#000b 25%,#0004 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000b 25%,#0004 60%,transparent 100%);opacity:0;transition:opacity .25s ease}
body.scrolled .scroll-edge-blur{opacity:1}
@media(max-width:700px){.scroll-edge-blur{height:95px}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){.scroll-edge-blur{display:none}}

/* Ideas settle into place; the conversation begins with a simple choice. */
.contact-title-line{position:relative;display:inline-block;white-space:nowrap;overflow:visible}
.contact-section h2 .contact-title-line{background:none;color:inherit}
.contact-section h2 .contact-title-word{position:relative;display:inline-block;--word-rest:0;--word-formed:1;--word-ink:1;--word-outline:0;background:none;color:transparent;transform:translate(calc(var(--word-rest)*var(--word-x)),calc(var(--word-rest)*var(--word-y))) scale(calc(1 - var(--word-rest)*.045));transform-origin:center bottom;will-change:transform}
.contact-title-word:before{content:attr(data-word);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px var(--blue);opacity:calc(var(--word-outline)*.8);pointer-events:none}
.contact-section h2 .contact-word-ink{display:inline-block;padding:.08em .12em .14em;margin:-.08em -.12em -.14em;overflow:visible;background:var(--title-gradient);background-size:var(--contact-gradient-width,100%) 100%;background-position:var(--contact-gradient-offset,0px) 0;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;color:transparent;opacity:var(--word-ink)}
@media(max-width:700px){.contact-section h2 .contact-title-word{transform:translate(calc(var(--word-rest)*var(--word-x)*.55),calc(var(--word-rest)*var(--word-y)*.65)) scale(calc(1 - var(--word-rest)*.03))}}
@media(prefers-reduced-motion:reduce){.contact-section h2 .contact-title-word{transform:none;will-change:auto}.contact-title-word:before{display:none}.contact-section h2 .contact-word-ink{opacity:1}}

/* Contact composition plays once on entry, without a scroll runway. */
.contact-section{min-height:0;overflow:hidden}
.contact-content{position:relative;top:auto}

/* Toolkit: timed entrance, with no scroll runway. */
.assembly-section{height:auto!important;min-height:0}
.assembly-section .toolkit-sticky{position:relative;height:auto;min-height:0;padding-top:110px;padding-bottom:90px}
@media(max-width:700px){
 .assembly-section .toolkit-sticky{height:auto;min-height:0;padding:95px 22px 60px}
 .assembly-section .tool-assembly{flex:none;height:160px;min-height:160px;margin:20px 0 40px}
 .assembly-section .assembly-details{margin:0;min-height:0}
}

/* Soft focus resolves as each word settles. */
.contact-section h2 .contact-title-word{filter:blur(var(--word-blur,0px))}
@media(prefers-reduced-motion:reduce){.contact-section h2 .contact-title-word{filter:none}}

/* A spacious contact canvas gives the blue glow room to dissolve. */
.contact-section{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:180px 24px 170px}
.contact-content{width:100%;flex-shrink:0}
.contact-section{--contact-glow-blue:rgba(62,125,223,.42);--contact-glow-ice:rgba(66,172,199,.30)}
.contact-section:before{background:radial-gradient(ellipse 43% 40% at 39% 54%,var(--contact-glow-blue) 0%,transparent 88%),radial-gradient(ellipse 34% 36% at 65% 52%,var(--contact-glow-ice) 0%,transparent 90%)}
@media(max-width:700px){
 .contact-section{min-height:90svh;padding:135px 22px 125px}
 .contact-section:before{background:radial-gradient(ellipse 53% 36% at 43% 53%,var(--contact-glow-blue) 0%,transparent 80%),radial-gradient(ellipse 40% 32% at 64% 51%,var(--contact-glow-ice) 0%,transparent 85%)}
}

/* Contacts use native anchor navigation, with no competing scroll restoration. */
.contact-section{min-height:100svh;padding-top:175px;padding-bottom:175px;scroll-margin-top:-110px}
@media(max-width:700px){.contact-section{min-height:100svh;padding-top:130px;padding-bottom:130px;scroll-margin-top:-110px}}

/* The invitation follows the completed title. */
.contact-content .contact-description,.contact-content .contact-actions{
 opacity:var(--contact-follow,1);
 transform:translateY(calc((1 - var(--contact-follow,1))*12px));
}
@media(prefers-reduced-motion:reduce){
 .contact-content .contact-description,.contact-content .contact-actions{opacity:1;transform:none}
}

/* Rounded speech bubble with an integrated, clean tail. */
.about-avatar{position:relative;display:flex;align-items:center;gap:20px;margin-bottom:26px;width:fit-content;max-width:100%}
.about-avatar .about-memoji{margin:0;flex-shrink:0}
.memoji-chat{position:relative;display:grid;place-items:center;min-width:110px;height:54px;padding:0 20px;background:#1465ef;color:#fff;border-radius:20px;font:600 16px/1 var(--body);isolation:isolate;transform-origin:left center}
.memoji-chat:before{content:'';position:absolute;left:-7px;top:calc(50% - 6px);width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:3px;z-index:-1}
.memoji-greeting{display:block;white-space:nowrap;transition:opacity .22s ease,transform .3s var(--ease)}
.memoji-greeting.is-changing{opacity:0;transform:translateY(4px)}
.motion-ready .about-intro .memoji-chat{opacity:0;transform:translateY(8px) scale(.94);transition:opacity .5s ease .35s,transform .7s var(--ease) .35s}
.motion-ready .about-intro.visible .memoji-chat{opacity:1;transform:none}
@media(max-width:700px){.about-avatar{gap:17px;margin-bottom:23px}.memoji-chat{min-width:100px;height:48px;font-size:14px;padding:0 16px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.motion-ready .about-intro .memoji-chat{opacity:1;transform:none;transition:none}.memoji-greeting{transition:none}}

/* A quiet surface follows the portfolio's light and dark palette. */
.memoji-chat{background:#fff;color:var(--blue);font-family:var(--display);font-weight:650;letter-spacing:-.45px;border-radius:18px;box-shadow:0 5px 20px rgb(33 54 88 / .055)}
.memoji-chat:before{border-radius:4px;width:12px;height:12px;left:-4px;top:calc(50% - 6px)}
@media(prefers-color-scheme:dark){.memoji-chat{background:#1c2028;box-shadow:0 5px 20px rgb(0 0 0 / .12)}}
@media(max-width:700px){.memoji-chat{border-radius:16px}}

/* iMessage-style silhouette, overlapping the avatar slightly. */
.about-avatar{gap:0}
.memoji-chat{--bubble-surface:#e9e9eb;margin-left:-16px;margin-top:-48px;z-index:1;background:var(--bubble-surface);color:var(--ink);min-width:116px;height:54px;padding:0 23px;border-radius:23px;font-family:var(--body);font-weight:500;letter-spacing:-.3px;box-shadow:none;isolation:isolate}
.memoji-chat:before{left:-7px;top:auto;bottom:0;width:20px;height:20px;background:var(--bubble-surface);transform:none;border-radius:0 0 15px 0;z-index:-1}
.memoji-chat:after{content:'';position:absolute;left:-13px;bottom:0;width:13px;height:23px;background:var(--bg);border-bottom-right-radius:12px;z-index:-1}
@media(prefers-color-scheme:dark){.memoji-chat{--bubble-surface:#2b2c30;background:var(--bubble-surface);box-shadow:none}}
@media(max-width:700px){.about-avatar{gap:0}.memoji-chat{margin-left:-13px;margin-top:-35px;min-width:105px;height:48px;padding:0 20px;border-radius:21px}}

/* The tail is a single silhouette: no background patch over the avatar. */
.memoji-chat:after{display:none}
.memoji-chat:before{left:-9px;bottom:0;width:22px;height:21px;border-radius:0;background:var(--bubble-surface);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M22 0H10C10 9 7 16 0 19C9 22 18 16 22 10Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath d='M22 0H10C10 9 7 16 0 19C9 22 18 16 22 10Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* A more compact greeting bubble. */
.memoji-chat{height:44px;min-width:108px;padding:0 20px;border-radius:20px}
.memoji-chat:before{width:19px;height:18px;left:-8px}
@media(max-width:700px){.memoji-chat{height:40px;min-width:98px;padding:0 17px;border-radius:18px}}

/* Match the portfolio typography and soft neutral surfaces. */
.memoji-chat{--bubble-surface:#edf0f5;background:var(--bubble-surface);color:var(--blue);font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.35px;padding:0 19px}
@media(prefers-color-scheme:dark){.memoji-chat{--bubble-surface:#222833;background:var(--bubble-surface);color:var(--blue)}}
@media(max-width:700px){.memoji-chat{font-size:13px;padding:0 17px}}

@media(prefers-color-scheme:light){
 .memoji-chat{--bubble-surface:#dce8ff;background:var(--bubble-surface);color:#1454c4}
}

@media(prefers-color-scheme:light){
 .memoji-chat{--bubble-surface:#1465ef;background:var(--bubble-surface);color:#fff}
}

@media(prefers-color-scheme:dark){
 .memoji-chat{--bubble-surface:#1465ef;background:var(--bubble-surface);color:#fff}
}

/* One blue for primary actions and selected project filters. */
:root{--action-blue:#1465ef}
.hero-actions .hero-project-link,.hero-actions .hero-project-link:hover,.contact-email,.project-filters .filter.active,.project-filters .filter.active:hover{background:var(--action-blue);border-color:var(--action-blue);color:#fff}

/* Center the counter and give its circle the same inset as the pill ends. */
.project-filters .filter[data-filter="all"]{height:46px;padding-top:0;padding-bottom:0;padding-right:10px}
.project-filters .filter[data-filter="all"] span{width:24px;min-width:24px;height:24px;flex-shrink:0;line-height:1;letter-spacing:0;text-align:center;padding:0;margin:0}
@media(max-width:700px){.project-filters .filter[data-filter="all"]{height:41px;padding-right:9px}.project-filters .filter[data-filter="all"] span{width:21px;min-width:21px;height:21px}}

@media(prefers-color-scheme:light){
 .project-filters .filter[data-filter="all"]:not(.active) span{background:#e6ebf3;color:#47566d}
}

/* Compact metadata with contextual icons and quiet surfaces. */
.project-card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:5px}
.project-card .tags span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-radius:9px;background:#fff;color:#626d7d;font:500 11px/1.4 var(--body);letter-spacing:-.1px;box-shadow:0 1px 3px rgb(25 36 54 / .04)}
.project-tag-icon{display:block;width:14px;height:14px;flex-shrink:0;object-fit:contain;color:#7a8da8}
@media(max-width:700px){.project-card .tags{gap:6px}.project-card .tags span{padding:6px 8px;font-size:10px}.project-tag-icon{width:13px;height:13px}}

/* Project details: a clear introduction and a compact case study. */
#project-dialog{padding:0;width:min(820px,calc(100% - 40px));max-width:820px;max-height:calc(100dvh - 64px);border:1px solid #ffffffbb;border-radius:30px;background:#fff;color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 100px #10182630}
#project-dialog::backdrop{background:#10182655;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
#project-dialog .dialog-close{position:sticky;top:18px;float:right;margin:18px 18px -54px 0;z-index:2;width:36px;height:36px;padding:0;display:grid;place-items:center;background:#ffffffb3;color:#667183;backdrop-filter:blur(10px);border:1px solid #ffffffb3;transition:none}
#project-dialog .dialog-close:hover{transform:none}
.project-dialog-heading{padding:52px 48px 35px;background:radial-gradient(ellipse at 95% 0%,#dce9ff77,transparent 70%),#f4f6fa}
#project-dialog #dialog-platform{padding-right:36px;font:600 10px/1.5 var(--body);letter-spacing:1.3px;color:#687992}
#project-dialog h2{font:800 clamp(38px,5vw,58px)/1.1 var(--display);letter-spacing:-2.5px;margin:17px 0 15px}
#project-dialog .dialog-intro{max-width:610px;font-size:17px;line-height:1.65;color:var(--muted);margin:0 0 24px}
#project-dialog .tags{gap:7px}
#project-dialog .tags span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-radius:9px;background:#fff;color:#626d7d;font:500 11px/1.4 var(--body)}
.project-dialog-body{padding:34px 48px 38px}
#project-dialog .dialog-columns{gap:32px;margin:0 0 30px}
#project-dialog .dialog-columns h3{font:650 17px/1.4 var(--display);letter-spacing:-.4px;margin:0 0 10px;color:var(--ink)}
#project-dialog .dialog-columns p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.dialog-bottom{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:24px;border-top:1px solid var(--line)}
#project-dialog .dialog-detail{padding:0;border:0;margin:0}
#project-dialog .dialog-detail>span{font-size:9px;letter-spacing:1.2px;color:var(--muted)}
#project-dialog .dialog-detail p{font-size:12px;line-height:1.6;margin:7px 0 0}
#project-dialog .project-visit:not([hidden]){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 19px;border-radius:999px;background:var(--action-blue);color:white;font-size:12px;font-weight:600;white-space:nowrap}
@media(max-width:700px){#project-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 32px);border-radius:24px}.project-dialog-heading{padding:46px 25px 28px}.project-dialog-body{padding:28px 25px}#project-dialog .dialog-intro{font-size:15px}#project-dialog .dialog-columns{grid-template-columns:1fr;gap:25px}#project-dialog h2{letter-spacing:-1.6px}.dialog-bottom{align-items:flex-start;flex-direction:column;gap:20px}}

/* Project sheets share the portfolio's plain canvas and type hierarchy. */
#project-dialog{background:var(--bg);border:1px solid var(--line);border-radius:25px;box-shadow:0 30px 90px #10182625}
.project-dialog-heading{background:none;padding:48px 44px 0}
.project-dialog-body{padding:30px 44px 38px}
#project-dialog #dialog-platform{font:500 11px/1.5 var(--body);letter-spacing:.2px;color:var(--muted)}
#project-dialog h2{font-weight:650;letter-spacing:-1.8px;font-size:clamp(36px,4.5vw,48px);margin:15px 0 13px}
#project-dialog .dialog-intro{font-size:16px;line-height:1.7;margin-bottom:20px}
#project-dialog .dialog-columns{gap:30px;margin-bottom:28px}
#project-dialog .dialog-columns h3{font:600 15px/1.5 var(--body);letter-spacing:-.2px}
#project-dialog .dialog-close{background:transparent;border:0;color:var(--muted);backdrop-filter:none}
#project-dialog .dialog-detail>span{font:500 11px/1.5 var(--body);letter-spacing:0;text-transform:none}
#project-dialog .project-visit:not([hidden]){font-size:13px;padding:13px 21px;min-height:46px}
@media(max-width:700px){#project-dialog{border-radius:24px}.project-dialog-heading{padding:46px 25px 0}.project-dialog-body{padding:28px 25px}.dialog-bottom{gap:18px}#project-dialog .dialog-intro{font-size:15px}}

/* Open the project as a visual story using its own cover. */
#project-dialog{width:min(850px,calc(100% - 40px));max-width:850px}
.project-dialog-heading{padding:44px 40px 25px}
#project-dialog h2{font-weight:750;font-size:clamp(38px,5vw,54px);letter-spacing:-2px}
#project-dialog .dialog-intro{margin-bottom:18px;max-width:620px}
.project-dialog-visual{position:relative;margin:0 24px;overflow:hidden;border-radius:18px;pointer-events:none}
.project-dialog-visual .project-art{position:absolute;left:0;top:0;transform-origin:top left;border-radius:0;transition:none;box-shadow:none}
.project-dialog-visual .project-art *{animation:none;transition:none}
.project-dialog-body{padding:32px 40px 36px}
#project-dialog .dialog-columns{grid-template-columns:1fr;gap:24px}
#project-dialog .dialog-columns>div{display:grid;grid-template-columns:145px 1fr;gap:20px}
#project-dialog .dialog-columns h3{margin:2px 0 0;font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.5px}
#project-dialog .dialog-columns p{font-size:14px;line-height:1.8}
@media(max-width:700px){#project-dialog{width:calc(100% - 24px)}.project-dialog-heading{padding:44px 24px 23px}.project-dialog-visual{margin:0 14px;border-radius:15px}.project-dialog-body{padding:27px 24px}#project-dialog .dialog-columns>div{grid-template-columns:1fr;gap:8px}#project-dialog .dialog-columns{gap:25px}}

/* Refine the sheet's rhythm, cover framing and fixed close affordance. */
#project-dialog{border-radius:28px;max-height:calc(100dvh - 48px);scrollbar-width:thin;scrollbar-color:#b9c3d3 transparent}
#project-dialog[open]{animation:project-sheet-enter .32s var(--ease)}
@keyframes project-sheet-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#project-dialog .dialog-close{width:36px;height:36px;background:var(--bg);box-shadow:0 0 0 5px var(--bg);right:auto;margin-right:18px;color:var(--muted)}
.project-dialog-heading{padding:42px 40px 24px}
#project-dialog #dialog-platform{font-size:10px;letter-spacing:.9px}
#project-dialog h2{font-size:clamp(36px,4.6vw,48px);line-height:1.12;letter-spacing:-1.8px;margin:15px 0 12px}
#project-dialog .dialog-intro{font-size:15px;line-height:1.7;max-width:580px;margin-bottom:18px}
.project-dialog-visual{margin:0 40px;border-radius:17px;isolation:isolate}
.project-dialog-visual .project-label,.project-dialog-visual .art-note{display:none}
.project-dialog-body{padding:30px 40px 34px}
#project-dialog .dialog-columns{gap:24px;margin-bottom:28px}
#project-dialog .dialog-columns>div{grid-template-columns:130px 1fr;gap:24px}
#project-dialog .dialog-columns h3{font-size:15px;letter-spacing:-.3px}
#project-dialog .dialog-columns p{font-size:13px;line-height:1.85}
.dialog-bottom{padding-top:22px}
@media(max-width:700px){#project-dialog{border-radius:23px;max-height:calc(100dvh - 24px)}.project-dialog-heading{padding:42px 24px 22px}.project-dialog-visual{margin:0 24px;border-radius:14px}.project-dialog-body{padding:26px 24px 28px}#project-dialog .dialog-columns>div{grid-template-columns:1fr;gap:7px}#project-dialog .dialog-columns p{font-size:14px}#project-dialog .dialog-close{top:14px;margin-top:14px;margin-right:14px}}
@media(prefers-reduced-motion:reduce){#project-dialog[open]{animation:none}}

/* The detail sheet extends the same project-card composition. */
#project-dialog{width:min(980px,calc(100% - 48px));max-width:980px;border-radius:25px}
.project-dialog-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:34px;padding:48px}
.project-dialog-heading{padding:0;background:none;min-width:0}
#project-dialog #dialog-platform{padding:0;color:var(--muted);font-size:10px;line-height:1.7;letter-spacing:.6px}
#project-dialog h2{font:750 clamp(38px,4.5vw,56px)/1.12 var(--display);letter-spacing:-2.2px;margin:14px 0 17px}
#project-dialog .dialog-intro{font-size:15px;line-height:1.8;margin:0 0 22px}
#project-dialog .tags{gap:6px}
#project-dialog .tags span{font-size:10px;padding:6px 8px}
.project-dialog-visual{margin:0;border-radius:20px;width:100%;align-self:center}
.project-dialog-body{grid-column:1/-1;padding:0;margin-top:5px}
#project-dialog .dialog-columns{grid-template-columns:1fr 1fr;gap:36px;margin:0 0 30px}
#project-dialog .dialog-columns>div{display:block}
#project-dialog .dialog-columns h3{font:650 19px/1.4 var(--display);letter-spacing:-.6px;margin:0 0 11px;color:var(--ink)}
#project-dialog .dialog-columns p{font-size:14px;line-height:1.85}
#project-dialog .dialog-bottom{gap:24px;padding-top:22px}
#project-dialog .dialog-detail p{color:var(--muted);font-size:13px}
#project-dialog .project-visit:not([hidden]){min-height:46px;padding:14px 22px;font-size:13px;border:0;box-shadow:none}
@media(max-width:700px){
 #project-dialog{width:calc(100% - 24px);border-radius:24px}
 .project-dialog-layout{grid-template-columns:1fr;gap:25px;padding:44px 24px 28px}
 #project-dialog h2{font-size:38px;letter-spacing:-1.7px;margin:12px 0 13px}
 #project-dialog .dialog-intro{font-size:15px;margin-bottom:18px}
 .project-dialog-visual{border-radius:17px}
 .project-dialog-body{margin:0}
 #project-dialog .dialog-columns{grid-template-columns:1fr;gap:25px;margin-bottom:26px}
 #project-dialog .dialog-columns h3{font-size:18px}
}

/* The cover leads the opening; the sheet stays visually quiet. */
#project-dialog[open]{animation:none}
#project-dialog .project-dialog-layout{overflow:visible}
#project-dialog .project-dialog-visual{overflow:hidden;transform-origin:center;z-index:1}
#project-dialog::backdrop{animation:project-backdrop-in .55s ease both}
@keyframes project-backdrop-in{from{background:#10182600;backdrop-filter:blur(0px)}to{background:#10182655;backdrop-filter:blur(15px)}}
#project-dialog h2{background:var(--title-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
@media(prefers-reduced-motion:reduce){#project-dialog::backdrop{animation:none}}

/* A project card opened into a larger, continuous surface. */
#project-dialog{width:min(880px,calc(100% - 40px));max-width:880px;background:var(--bg);border:0;border-radius:25px}
.project-dialog-layout{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
#project-dialog .project-dialog-visual{order:-1;width:100%;margin:0;border-radius:0;flex-shrink:0}
.project-dialog-visual .project-art{border-radius:0}
.project-dialog-visual .project-label{display:block}
#project-dialog .dialog-close{top:16px;width:36px;height:36px;margin:16px 16px -52px 0;background:#ffffffb8;color:#45536a;box-shadow:0 2px 12px #10182615;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:5}
.project-dialog-heading{display:grid;grid-template-columns:1fr auto;column-gap:24px;padding:32px 40px 0}
#project-dialog #dialog-platform{grid-column:1/-1;font-size:10px;letter-spacing:1px;margin-bottom:9px}
#project-dialog h2{grid-column:1;font:750 clamp(34px,4vw,46px)/1.12 var(--display);letter-spacing:-1.8px;margin:0;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
#project-dialog #dialog-tags{grid-column:2;grid-row:2;align-self:center;justify-content:flex-end;max-width:310px}
#project-dialog .dialog-intro{grid-column:1/-1;font-size:16px;line-height:1.75;max-width:680px;margin:18px 0 0}
.project-dialog-body{width:100%;padding:28px 40px 36px;margin:0}
#project-dialog .dialog-columns{padding-top:26px;border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:36px;margin-bottom:28px}
#project-dialog .dialog-columns h3{font:600 15px/1.5 var(--body);letter-spacing:-.2px;margin-bottom:10px}
#project-dialog .dialog-columns p{font-size:13px;line-height:1.85}
#project-dialog .dialog-bottom{border-top:0;padding-top:0}
#project-dialog .dialog-detail>span{font-size:10px;color:var(--muted)}
@media(max-width:700px){
 #project-dialog{width:calc(100% - 24px);border-radius:23px}
 .project-dialog-heading{grid-template-columns:1fr;gap:0;padding:25px 24px 0}
 #project-dialog #dialog-tags{grid-column:1;grid-row:auto;justify-content:flex-start;max-width:none;margin-top:15px}
 #project-dialog h2{font-size:35px;letter-spacing:-1.4px}
 #project-dialog .dialog-intro{font-size:15px;margin-top:18px}
 .project-dialog-body{padding:25px 24px 29px}
 #project-dialog .dialog-columns{grid-template-columns:1fr;gap:23px;padding-top:23px}
 #project-dialog .dialog-columns p{font-size:14px}
}

/* A project opens as a portfolio page, with its own reading flow. */
#project-dialog{width:calc(100% - 32px);max-width:1500px;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);border-radius:26px;margin:auto;overflow:auto;background:var(--bg);scroll-behavior:smooth}
#project-dialog .dialog-close{display:flex;align-items:center;justify-content:center;gap:10px;width:auto;height:42px;padding:0 16px;top:20px;margin:20px 24px -62px 0;border-radius:999px;font:500 12px/1 var(--body);background:#ffffffb8;box-shadow:0 5px 20px #263c5709;z-index:5}
.project-dialog-layout{width:min(1160px,100%);margin:auto;padding:100px 54px 65px;display:flex;flex-direction:column;gap:0}
.project-dialog-heading{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 42px}
#project-dialog #dialog-platform{font-size:11px;line-height:1.5;letter-spacing:1.1px;color:var(--muted);margin:0 0 18px}
#project-dialog h2{font:800 clamp(58px,7.5vw,106px)/1.08 var(--display);letter-spacing:-.065em;margin:0;color:var(--ink);overflow:visible}
#project-dialog .dialog-intro{max-width:710px;font-size:clamp(17px,1.8vw,21px);line-height:1.7;margin:24px 0 0;color:var(--muted)}
#project-dialog #dialog-tags{max-width:none;justify-content:flex-start;align-self:flex-start;margin-top:24px}
#project-dialog #dialog-tags span{font-size:11px;padding:7px 11px}
#project-dialog .project-dialog-visual{order:0;border-radius:25px;width:100%;margin:0;flex-shrink:0}
.project-dialog-body{padding:65px 0 0;margin:0;width:100%}
#project-dialog .dialog-columns{display:flex;flex-direction:column;gap:54px;padding:0;border:0;margin:0 0 50px}
#project-dialog .dialog-columns>div{display:grid;grid-template-columns:1fr 1.65fr;gap:50px}
#project-dialog .dialog-columns h3{font:650 clamp(26px,3vw,35px)/1.2 var(--display);letter-spacing:-1.1px;margin:0}
#project-dialog .dialog-columns p{font-size:17px;line-height:1.8;margin:0;max-width:650px;color:var(--muted)}
#project-dialog .dialog-columns>div,#project-dialog .dialog-bottom{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .85s var(--ease)}
#project-dialog .dialog-columns>.project-detail-visible,#project-dialog .dialog-bottom.project-detail-visible{opacity:1;transform:none}
#project-dialog .dialog-bottom{padding:28px 0 0;border-top:1px solid var(--line)}
#project-dialog .dialog-detail>span{font-size:11px}
#project-dialog .dialog-detail p{font-size:14px;margin-top:8px}
#project-dialog .project-visit:not([hidden]){min-height:50px;padding:15px 25px;font-size:14px}
@media(max-width:700px){
 #project-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
 #project-dialog .dialog-close{top:14px;margin:14px 16px -56px 0;height:40px}
 .project-dialog-layout{padding:85px 22px 45px}
 .project-dialog-heading{padding-bottom:30px}
 #project-dialog h2{font-size:clamp(52px,13vw,76px);letter-spacing:-.055em}
 #project-dialog .dialog-intro{font-size:16px;margin-top:20px}
 #project-dialog #dialog-platform{font-size:10px;margin-bottom:15px}
 #project-dialog #dialog-tags{margin-top:20px;gap:6px}
 #project-dialog #dialog-tags span{font-size:10px;padding:6px 9px}
 #project-dialog .project-dialog-visual{border-radius:20px}
 .project-dialog-body{padding-top:38px}
 #project-dialog .dialog-columns{gap:32px;margin-bottom:34px}
 #project-dialog .dialog-columns>div{grid-template-columns:1fr;gap:13px}
 #project-dialog .dialog-columns h3{font-size:27px;letter-spacing:-.8px}
 #project-dialog .dialog-columns p{font-size:15px;line-height:1.8}
 #project-dialog .dialog-bottom{gap:22px}
}
@media(prefers-reduced-motion:reduce){#project-dialog{scroll-behavior:auto}#project-dialog .dialog-columns>div,#project-dialog .dialog-bottom{opacity:1;transform:none;transition:none}}

/* A simple, generous close target with only an X. */
#project-dialog .dialog-close{display:grid;place-items:center;width:44px;height:44px;padding:0;gap:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--muted)}
#project-dialog .dialog-close svg{width:20px;height:20px}

#project-dialog .dialog-close{border-radius:50%;background:#e9edf4;color:#677184}

/* Keep project pages free of a separate scroll indicator. */
#project-dialog{scrollbar-width:none}
#project-dialog::-webkit-scrollbar{display:none;width:0;height:0}

/* A fresh inner scroller prevents dialog scroll restoration between projects. */
#project-dialog{overflow:hidden;scroll-behavior:auto;overflow-anchor:none}
.project-dialog-scroll{height:100%;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto;scrollbar-width:none}
.project-dialog-scroll::-webkit-scrollbar{display:none}
#project-dialog .dialog-close{position:absolute;top:20px;right:24px;float:none;margin:0}
@media(max-width:700px){#project-dialog .dialog-close{top:14px;right:16px;margin:0}}

/* A small reading marker stays beside the project, outside its content. */
.project-reading{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:2px;height:100px;z-index:4;background:rgb(120 135 158 / .2);border-radius:99px;pointer-events:none}
.project-reading[hidden]{display:none}
.project-reading>span{display:block;position:absolute;top:0;left:0;width:2px;height:22px;background:var(--blue);border-radius:99px;transform:translateY(calc(var(--project-progress,0)*78px))}
@media(max-width:700px){.project-reading{right:6px;height:80px}.project-reading>span{height:18px;transform:translateY(calc(var(--project-progress,0)*62px))}}

#project-dialog.project-closing::backdrop{animation:project-backdrop-out .28s ease forwards}
@keyframes project-backdrop-out{from{background:#10182655;backdrop-filter:blur(15px)}to{background:#10182600;backdrop-filter:blur(0px)}}

/* Restore the project sheet surface from the primary portfolio version. */
#project-dialog{background:#fff}

#project-dialog .dialog-close{background:#edf0f5;color:#677184}

/* Original light colors share the dark theme's gradient geometry and breakpoints. */
@media(prefers-color-scheme:light){
 :root{--title-gradient:linear-gradient(110deg,#1465ef 8%,#3478f6 58%,#6897f5);--hero-title-gradient:var(--title-gradient)}
 .hero{--hero-wash:#b7d2ff85;--hero-light:#d0d9ff85}
 .method-sticky{--process-glow-blue:rgba(79,137,255,.19);--process-glow-ice:rgba(133,113,255,.12)}
 .contact-section{--contact-glow-blue:rgba(70,127,246,.14);--contact-glow-ice:rgba(70,127,246,.065)}
}

/* A chat message grows gently from its tail, then keeps a stable silhouette. */
.memoji-chat{transform-origin:0 calc(100% - 4px)}
.memoji-greeting{transition:none;min-width:66px;text-align:center}
.memoji-chat.chat-ready,.motion-ready .about-intro .memoji-chat.chat-ready{opacity:0;transform:translate(3px,6px) scale(.88);transition:opacity .4s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.memoji-chat.chat-ready.is-present,.motion-ready .about-intro .memoji-chat.chat-ready.is-present{opacity:1;transform:none;transition:none;animation:memoji-message-arrive .55s both}
@media(max-width:700px){.memoji-greeting{min-width:58px}}
@media(prefers-reduced-motion:reduce){.memoji-chat.chat-ready,.motion-ready .about-intro .memoji-chat.chat-ready{opacity:1;transform:none;transition:none}}

/* Space separates the footer without a divider or background wash. */
.portfolio-footer{border-top:0;padding-top:48px;padding-bottom:28px}
.footer-bottom{margin-top:32px}
@media(max-width:700px){.portfolio-footer{padding-top:36px;padding-bottom:24px}.footer-bottom{margin-top:26px}}

@keyframes memoji-message-arrive{
 from{opacity:0;transform:translateY(4px) scale(.97)}
 to{opacity:1;transform:none}
}
.memoji-chat.chat-ready.is-present,.motion-ready .about-intro .memoji-chat.chat-ready.is-present{animation-timing-function:cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.memoji-chat.chat-ready.is-present,.motion-ready .about-intro .memoji-chat.chat-ready.is-present{animation:none}}

/* A backend project expressed in the same visual language as the portfolio. */
.palinsesto-art{height:440px;background:radial-gradient(ellipse at 25% 45%,#dbe8ff,transparent 75%),#eaf0f9}
.palinsesto-composition{height:100%;display:flex;align-items:center;justify-content:center;gap:60px;padding:60px 48px 30px}
.palinsesto-message{flex:1;max-width:430px}.api-overline{font-size:10px;letter-spacing:1.5px;color:#597299}
.palinsesto-message h3{font:650 35px/1.2 var(--display);letter-spacing:-1.5px;color:#263952;margin:18px 0}.palinsesto-message p{font-size:14px;line-height:1.7;color:#647995}
.api-code-window{width:380px;flex-shrink:0;border-radius:18px;background:#fff;box-shadow:0 18px 50px #3c649e15;overflow:hidden;transform:rotate(3deg)}
.api-code-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #edf0f5;font:10px var(--body);color:#8995a8}
.api-code-window pre{padding:17px 22px;margin:0;color:#677386;font:12px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace}.api-code-key{color:#1465ef}.api-code-value{color:#64876a}.api-code-caption{display:block;padding:0 22px 18px;font-size:10px;color:#8b98aa}
.api-live-demo{margin-bottom:40px;padding:26px;border-radius:20px;background:rgba(20,101,239,.04)}
.api-live-demo[hidden]{display:none}.api-live-demo h3{font-size:22px!important;margin:0 0 10px!important;letter-spacing:-.5px}.api-live-demo>p{font-size:12px!important;color:var(--muted)}
.api-live-program{padding:20px 0}.api-live-program+.api-live-program{border-top:1px solid var(--line)}
.api-live-label{display:block;font-size:9px;letter-spacing:1.2px;color:var(--blue);margin-bottom:9px}.api-live-program strong{display:block;font:600 19px/1.4 var(--display)}.api-live-time{display:block;margin-top:7px;font-size:12px;color:var(--muted)}.api-live-program p{font-size:13px!important;line-height:1.7!important;margin:12px 0!important}
.api-live-program progress{display:block;width:100%;height:4px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:var(--line);margin-top:18px}.api-live-program progress::-webkit-progress-bar{background:var(--line)}.api-live-program progress::-webkit-progress-value{background:var(--action-blue)}.api-live-program progress::-moz-progress-bar{background:var(--action-blue)}
@media(prefers-color-scheme:dark){.palinsesto-art{background:radial-gradient(ellipse at 25% 45%,#213658,transparent 75%),#181e2b}.palinsesto-message h3{color:#e1eafa}.palinsesto-message p,.api-overline{color:#a3b5d0}.api-code-window{background:#212936;box-shadow:0 18px 50px #0002}.api-code-bar{border-color:#303a49}.api-code-window pre{color:#b5c2d5}.api-code-key{color:#7dadff}.api-code-value{color:#9dbea3}}
@media(max-width:700px){.palinsesto-art{height:410px}.palinsesto-composition{display:block;padding:55px 24px 0}.palinsesto-message h3{font-size:25px;letter-spacing:-1px}.palinsesto-message p{display:none}.api-overline{font-size:8px}.api-code-window{width:100%;max-width:320px;margin:24px auto 0;transform:rotate(2deg)}.api-code-window pre{font-size:10px;line-height:1.6;padding:12px 18px}.api-code-caption{font-size:9px;padding-bottom:12px}.api-code-bar{padding:10px 14px}.api-live-demo{padding:20px}}

#project-dialog .dialog-columns.is-api-description{grid-template-columns:1fr}
#project-dialog .dialog-columns>[hidden]{display:none}



.api-code-window .api-live-json{height:245px;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:none;font-size:11px;line-height:1.65}
.api-live-json::-webkit-scrollbar{display:none}
@media(max-width:700px){.api-code-window .api-live-json{height:190px;font-size:9px;line-height:1.6}}

.api-code-window .api-code-caption{padding:18px 22px 0}
.api-code-window .api-live-json{margin-top:12px;padding-top:0}
@media(max-width:700px){.api-code-window .api-code-caption{padding:14px 18px 0}.api-code-window .api-live-json{margin-top:10px}}

.api-code-window .api-code-bar{gap:12px;flex-wrap:wrap}
.api-code-window .api-code-bar .api-code-caption{padding:0;margin-left:auto;font-size:10px;line-height:1.4}
.api-code-window .api-code-format{white-space:nowrap;font-size:9px}
.api-code-window .api-live-json{margin-top:16px}
@media(max-width:700px){.api-code-window .api-code-bar{gap:8px}.api-code-window .api-code-bar .api-code-caption{font-size:8px}.api-code-window .api-code-format{font-size:8px}.api-code-window .api-live-json{margin-top:13px}}

.api-code-window .api-code-bar{justify-content:flex-start}
.api-code-window .api-code-bar .api-code-caption{margin-left:0}
.api-code-window .api-code-format{margin-left:auto}

/* Open columns, aligned typography and a quiet category marker. */
.assembly-section .assembly-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;margin:0;min-height:0;gap:0 38px;border:0}
.assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px 0!important;border:0!important;border-top:1px solid var(--line)!important;background:transparent;border-radius:0;box-shadow:none;text-align:left}
.assembly-section .assembly-details .tool>span{order:-1;display:flex;align-items:center;gap:8px;max-width:100%;margin:0 0 15px;font:500 9px/1.5 var(--body);letter-spacing:.07em;color:var(--muted);white-space:normal}
.assembly-section .assembly-details .tool>span:before{content:'';width:4px;height:4px;flex-shrink:0;border-radius:50%;background:var(--blue);opacity:.65}
.assembly-section .assembly-details .tool h3{font:650 24px/1.3 var(--display);letter-spacing:-.75px;color:var(--ink);margin:0 0 10px;white-space:normal;overflow-wrap:break-word;transition:color .25s ease}
.assembly-section .assembly-details .tool p{font-size:14px;line-height:1.7;min-height:0;margin:0;max-width:260px;color:var(--muted);white-space:normal;overflow-wrap:break-word}
.assembly-section .assembly-details .tool.active h3{color:var(--blue)}
@media(max-width:700px){
 .assembly-section .assembly-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
 .assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){padding:23px 0!important}
 .assembly-section .assembly-details .tool>span{font-size:8px;line-height:1.6;letter-spacing:.035em;margin-bottom:13px;gap:6px;min-height:26px;align-items:flex-start}
 .assembly-section .assembly-details .tool>span:before{margin-top:4px}
 .assembly-section .assembly-details .tool h3{font-size:18px;line-height:1.35;letter-spacing:-.45px;margin-bottom:9px}
 .assembly-section .assembly-details .tool p{font-size:13px;line-height:1.65;max-width:100%}
}
@media(prefers-reduced-motion:reduce){.assembly-section .assembly-details .tool h3{transition:none}}

/* Tools sit freely on the page, without table lines or framed cells. */
.assembly-section .assembly-details{column-gap:52px;row-gap:38px;padding-top:12px}
.assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){border:0!important;padding:0!important}
.assembly-section .assembly-details .tool>span{order:0;margin:16px 0 0;font-size:9px;letter-spacing:.04em;opacity:.8}
.assembly-section .assembly-details .tool>span:before{display:none}
.assembly-section .assembly-details .tool h3{font-size:25px;margin-bottom:10px}
@media(max-width:700px){.assembly-section .assembly-details{column-gap:25px;row-gap:32px;padding-top:8px}.assembly-section .assembly-details .tool h3{font-size:19px}.assembly-section .assembly-details .tool>span{min-height:0;font-size:8px;margin-top:14px}}

/* Every tool has the same separator, including the final row. */
.assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){border:0!important;border-top:1px solid var(--line)!important;padding:22px 0 0!important}

/* Continuous dividers connect the toolkit rows and columns. */
.assembly-section .assembly-details{gap:0;padding-top:0;border:1px solid var(--line)}
.assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){border:0!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;padding:26px!important}
.assembly-section .assembly-details .tool:nth-child(3n),.assembly-section .assembly-details .tool.active:nth-child(3n){border-right:0!important}
.assembly-section .assembly-details .tool:nth-last-child(-n+3),.assembly-section .assembly-details .tool.active:nth-last-child(-n+3){border-bottom:0!important}
@media(max-width:700px){
 .assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){padding:22px 16px!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
 .assembly-section .assembly-details .tool:nth-child(2n){border-right:0!important}
 .assembly-section .assembly-details .tool:nth-last-child(-n+2){border-bottom:0!important}
}

@media(max-width:700px){
 .assembly-section .assembly-details .tool:nth-child(3n),.assembly-section .assembly-details .tool.active:nth-child(3n){border-right:1px solid var(--line)!important}
 .assembly-section .assembly-details .tool:nth-last-child(-n+3),.assembly-section .assembly-details .tool.active:nth-last-child(-n+3){border-bottom:1px solid var(--line)!important}
 .assembly-section .assembly-details .tool:nth-child(2n),.assembly-section .assembly-details .tool.active:nth-child(2n){border-right:0!important}
 .assembly-section .assembly-details .tool:nth-last-child(-n+2),.assembly-section .assembly-details .tool.active:nth-last-child(-n+2){border-bottom:0!important}
}

/* The continuous grid uses the same soft geometry as the portfolio. */
.assembly-section .assembly-details{--tool-divider:color-mix(in srgb,var(--line) 70%,transparent);border-color:var(--tool-divider);border-radius:22px;overflow:hidden;background:transparent}
.assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){padding:30px 28px!important;border-color:var(--tool-divider)!important}
.assembly-section .assembly-details .tool h3{font-size:23px;font-weight:650;letter-spacing:-.65px}
.assembly-section .assembly-details .tool p{font-size:14px;line-height:1.7}
.assembly-section .assembly-details .tool>span{font-size:8px;letter-spacing:.09em;margin-top:20px;opacity:.85}
@media(max-width:700px){.assembly-section .assembly-details{border-radius:18px}.assembly-section .assembly-details .tool,.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){padding:23px 17px!important}.assembly-section .assembly-details .tool h3{font-size:18px;letter-spacing:-.45px}.assembly-section .assembly-details .tool p{font-size:13px;line-height:1.65}.assembly-section .assembly-details .tool>span{font-size:8px;letter-spacing:.035em;margin-top:16px}}

/* A quiet surface tint links each dock icon to its description. */
.assembly-section .assembly-details .tool{transition:background-color .3s ease}
.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){background-color:rgba(20,101,239,.045)}
.assembly-section .assembly-details .tool.active h3{color:var(--ink)}
@media(prefers-color-scheme:dark){.assembly-section .assembly-details .tool.active,.assembly-section .assembly-details .tool.active:nth-child(odd){background-color:rgba(107,163,255,.065)}}
@media(prefers-reduced-motion:reduce){.assembly-section .assembly-details .tool{transition:none}}

/* A short sticky pause gives the closing invitation its own moment. */
.contact-runway{height:175svh;position:relative;scroll-margin-top:-110px}
.contact-runway .contact-section{position:sticky;top:0;height:100svh;min-height:100svh;padding:110px 24px 70px;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media(max-width:700px){.contact-runway{height:160svh}.contact-runway .contact-section{padding:95px 22px 55px}}
@media(max-height:580px){.contact-runway{height:auto}.contact-runway .contact-section{position:relative;height:auto;min-height:100svh;padding:100px 24px 70px}}
@media(prefers-reduced-motion:reduce){.contact-runway{height:auto}.contact-runway .contact-section{position:relative;height:auto;min-height:100svh}}

#project-dialog .project-cover-layer{position:fixed;z-index:4;pointer-events:none;overflow:hidden;isolation:isolate}
#project-dialog .project-cover-flight{position:absolute;pointer-events:none;overflow:hidden;transform-origin:center;background:var(--bg)}
#project-dialog .project-cover-flight .project-art{position:absolute;left:0;top:0;transform-origin:top left;border-radius:0;transition:none;box-shadow:none}
#project-dialog .project-cover-flight .project-art:after{display:none}

/* Primary calls to action share the same size and typography. */
.hero-actions .hero-project-link,.contact-actions .contact-email{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:0;padding:16px 25px;border:1px solid var(--action-blue);border-radius:999px;font-size:13px;font-weight:550;line-height:1.3;letter-spacing:-.15px}
@media(max-width:700px){.hero-actions .hero-project-link,.contact-actions .contact-email{min-height:46px;min-width:0;padding:14px 20px;font-size:12px}}
@media(max-width:360px){.hero-actions .hero-project-link,.contact-actions .contact-email{padding:13px 17px;font-size:11px}}

/* Keep small toolkit and footer text readable, including highlighted cells. */
.assembly-section .assembly-details{opacity:1!important}
.assembly-section .assembly-details .tool p,.assembly-section .assembly-details .tool>span{color:#535d6d;opacity:1}
.portfolio-footer .footer-bottom,.portfolio-footer .footer-bottom span,.portfolio-footer .footer-legal a{color:#566171;opacity:1}
@media(prefers-color-scheme:dark){
 .assembly-section .assembly-details .tool p,.assembly-section .assembly-details .tool>span{color:#a9b5c8}
 .portfolio-footer .footer-bottom,.portfolio-footer .footer-bottom span,.portfolio-footer .footer-legal a{color:#a9b5c8}
}