:root{color-scheme:light;--font-sans:'Plus Jakarta Sans',sans-serif;--content-width:43.25rem;--bg:#fcfcfc;--raised:#f0f0f0;--preview:#fff;--border:#e8e8e8;--text:#202020;--muted:#6f6f6f;--ease:cubic-bezier(.23,1,.32,1)}
:root[data-theme='dark']{color-scheme:dark;--bg:#111;--raised:#222;--preview:#1a1a1a;--border:#2a2a2a;--text:#eee;--muted:#b4b4b4}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{min-width:320px;margin:0;background:var(--bg);color:var(--muted);font:400 14px/21px var(--font-sans);letter-spacing:-.09px;transition:background-color .15s,color .15s}button,input{font:inherit}button{color:inherit}h1,h2,h3,p{margin:0}a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--text)}:focus-visible{outline:2px solid var(--text);outline-offset:3px}.site-shell{width:min(100%,var(--content-width));margin:0 auto;padding:6rem 1.5rem}.text-primary{color:var(--text)}.text-muted{color:var(--muted)}
.identity{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.identity-main{display:contents}.mark{display:grid;width:32px;height:32px;place-items:center;overflow:hidden;border-radius:50%;background:var(--raised);box-shadow:0 0 0 1px var(--border);transition:background-color 140ms var(--ease)}.mark:hover{background:var(--border)}.mark img{width:20px;height:20px}.identity-copy h1,.identity-copy p{margin:0}.identity-copy h1{color:var(--text);font-size:14px;font-weight:500;line-height:21px}.identity-copy p{font-size:14px;line-height:21px}.intro{margin:24px 0 0;color:var(--muted)}.intro+.intro{margin-top:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.button-link{padding:0;border:0;background:none;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.site-shell:not(.site-shell--home){--content-width:40rem}.site-shell--home{padding-top:3rem}.identity--home{flex-direction:column;align-items:flex-start;gap:10px}.identity--home .mark{width:28px;height:28px}.identity--home .mark img{width:18px;height:18px}.site-shell--home .intro{margin-top:28px;max-width:34rem}.site-shell--home .intro+.intro{margin-top:16px}.site-shell--home .actions{margin-top:20px}
.section{margin-top:40px}.section-heading{display:flex;align-items:center;gap:6px;margin:0 0 12px;color:var(--muted);font-size:14px;font-weight:400;line-height:21px}.section-heading a{color:inherit;text-decoration:none}.section-heading a:hover{color:var(--text)}.section-icon{font-size:14px}.list{display:flex;flex-direction:column;gap:6px}.list-row{--icon:36px;position:relative;display:flex;gap:10px;padding:6px 4px;margin:0 -4px;color:inherit;text-decoration:none}.list-row:before{position:absolute;inset:0 -4px;border-radius:17px;background:transparent;content:"";transition:background-color 100ms ease}.list-row:hover:before,.list-row:focus-visible:before{background:var(--raised)}.row-icon,.row-copy{position:relative;z-index:1}.row-icon{width:var(--icon);height:var(--icon);flex:0 0 auto;border-radius:10px;background:var(--raised)}.row-copy{min-width:0;padding-top:1px}.row-title{display:flex;align-items:baseline;gap:6px;color:var(--text);font-weight:500;line-height:21px}.row-arrow{color:var(--muted);opacity:0;transition:opacity 100ms ease}.list-row:hover .row-arrow,.list-row:focus-visible .row-arrow{opacity:1}.row-description{display:block;margin-top:2px;color:var(--muted);line-height:21px}
.project-grid{display:grid;grid-template-columns:1fr;gap:16px}
.project-filters{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:0 0 20px}.project-filters button{display:inline-flex;align-items:baseline;gap:6px;padding:4px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:22px;cursor:pointer;transition:color 140ms ease,border-color 140ms ease}.project-filters button[aria-pressed="true"]{border-bottom-color:currentColor;color:var(--text);font-weight:500}.project-filters button:hover{color:var(--text)}.project-filters button:focus-visible{outline:2px solid var(--muted);outline-offset:5px;border-radius:2px}.project-filter-count{color:var(--muted);font-size:11px;font-weight:400;line-height:1}.project-grid>.project-card[hidden]{display:none}
.project-card{display:block;padding:4px;border:1px solid var(--border);border-radius:16px;background:var(--preview);box-shadow:0 1px 2px color-mix(in srgb,var(--text) 5%,transparent);color:inherit;text-decoration:none;transition:transform 160ms var(--ease),box-shadow 160ms var(--ease),border-color 160ms var(--ease)}.project-preview{display:grid;min-height:0;aspect-ratio:192/100;place-items:center;overflow:hidden;border-radius:12px;background:var(--raised)}.project-preview--honda{background:#f1f1f0}.project-preview--honda img{width:100%;height:100%;object-fit:cover}.project-card-copy{display:block;padding:12px 8px 8px}.project-card .row-arrow{display:inline-block;transform:translateX(-3px);transition:opacity 160ms var(--ease),transform 160ms var(--ease)}.project-card:hover,.project-card:focus-visible{border-color:color-mix(in srgb,var(--text) 18%,var(--border));box-shadow:0 8px 20px color-mix(in srgb,var(--text) 9%,transparent);transform:translateY(-2px)}.project-card:hover .row-arrow,.project-card:focus-visible .row-arrow{opacity:1;transform:translateX(0)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 8px;color:var(--muted);font-size:12px;line-height:16px}.breadcrumb a{color:var(--muted);text-decoration:none}.crumb-separator{opacity:.75}.back-link{display:inline-flex;align-items:center;min-height:18px;margin:0 0 16px;color:var(--muted);font-size:12px;line-height:16px;text-decoration:none;transition:color 140ms var(--ease)}.back-link:hover{color:var(--text)}.page-header{display:flex;flex-direction:column;gap:8px}.page-header h1{margin:0;color:var(--text);font-size:14px;font-weight:500;line-height:21px}.page-header p{margin:0;line-height:21px}.page-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:12px;line-height:16px}.page-body{margin-top:32px}.prose{max-width:none}.prose h2{margin:64px 0 32px;color:var(--text);font-size:14px;font-weight:500;line-height:21px;scroll-margin-top:32px}.prose h2:first-child{margin-top:0}.prose h3{margin:0 0 8px;color:var(--text);font-size:14px;font-weight:500}.prose p{margin:0 0 21px}.prose ul{margin:0 0 21px;padding-left:18px}.case-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:32px 0 64px}.case-meta dt{margin:0 0 2px;font-size:12px;line-height:16px;color:var(--muted)}.case-meta dd{margin:0;color:var(--text)}
.media-panel{position:relative;display:grid;width:100%;min-height:0;aspect-ratio:16/9;place-items:center;overflow:hidden;padding:24px;border:1px solid var(--border);border-radius:8px;background:var(--raised);color:var(--text);cursor:zoom-in}.media-panel:before,.media-panel:after{position:absolute;content:""}.media-panel:before{width:56%;aspect-ratio:1;border:1px solid var(--border);border-radius:50%;transform:translate(-23%,-6%)}.media-panel:after{width:43%;aspect-ratio:1.15;border-radius:8px;background:var(--bg);box-shadow:18px 18px 0 color-mix(in srgb,var(--text) 8%,transparent);transform:translate(24%,11%) rotate(-8deg)}.media-content{position:relative;z-index:1;text-align:center}.media-kicker{display:block;margin-bottom:4px;font-size:12px;line-height:16px;color:var(--muted)}.media-label{display:block;font-weight:500}.media-caption{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--muted)}.media-dialog{width:100%;height:100%;max-width:none;max-height:none;padding:24px;border:0;background:var(--bg);color:var(--text)}.media-dialog::backdrop{background:var(--bg)}.dialog-topline{display:flex;justify-content:flex-end}.dialog-close{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}.dialog-close:hover{background:var(--raised);color:var(--text)}.dialog-art{display:grid;min-height:80vh;place-items:center;border-radius:8px;background:var(--raised)}.case-frame{display:grid;min-height:360px;place-items:center;margin:32px 0 64px;border:1px solid var(--border);border-radius:8px;background:var(--raised);color:var(--muted);font-size:12px;line-height:16px}
.honda-case-study section{margin:0 0 64px}.honda-case-study section:last-child{margin-bottom:0}.case-media{margin:32px 0 64px}.case-media img,.honda-state-switch img{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--raised)}.case-media figcaption,.honda-media-grid figcaption,.honda-state-switch figcaption{margin-top:8px;font-size:12px;line-height:16px}.honda-hero{margin-top:0}.honda-hero img{aspect-ratio:16/9;object-fit:cover}.honda-media-grid{display:grid;gap:12px;margin:32px 0 64px}.honda-media-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}.honda-media-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.honda-media-grid video,.honda-state-switch video{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--raised)}.case-callout{margin:32px 0 64px;padding:16px;border-left:2px solid var(--text);background:var(--raised);color:var(--text)}.honda-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0 64px}.honda-card-grid article{padding:16px;border:1px solid var(--border);border-radius:8px}.honda-card-grid span{display:block;margin-bottom:16px;font-size:12px;line-height:16px;color:var(--muted);text-transform:uppercase}.honda-card-grid h3{margin:0 0 8px;color:var(--text);font-size:14px;font-weight:500;line-height:21px}.honda-card-grid p{margin:0}.honda-labeled-list{display:grid;gap:16px;margin:32px 0 64px}.honda-labeled-list dt{color:var(--text);font-weight:500}.honda-labeled-list dd{margin:2px 0 0}.honda-state-switch{margin:32px 0 64px}.honda-switch-controls{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}.honda-switch-controls button{min-height:28px;padding:0 8px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}.honda-switch-controls button[aria-pressed="true"]{border-color:var(--text);background:var(--text);color:var(--bg)}.honda-state-switch figure{margin:0}.honda-table-wrap{margin:32px 0 64px;overflow-x:auto;border:1px solid var(--border);border-radius:8px}.honda-table-wrap table{width:100%;border-collapse:collapse;text-align:left}.honda-table-wrap th,.honda-table-wrap td{padding:10px 12px;border-bottom:1px solid var(--border)}.honda-table-wrap th{color:var(--text);font-weight:500}.honda-table-wrap tr:last-child td{border-bottom:0}
.honda-prototype{display:block;width:100%;min-height:360px;margin:32px 0 0;border:1px solid var(--border);border-radius:8px;background:var(--raised)}.page-header--honda p{line-height:2}.honda-case-study p{line-height:2;margin-bottom:28px}.honda-card-grid p{line-height:21px;margin-bottom:0}.honda-placeholder{min-height:0;aspect-ratio:16/9;margin:0 0 64px;color:transparent}.honda-case-study .case-callout{line-height:2}.honda-labeled-list dt,.honda-labeled-list dd{line-height:2}.page-header--ayo p,.ayo-case-study p{line-height:2}.ayo-case-study p{margin-bottom:28px}.ayo-case-study section{margin:0 0 64px}.ayo-case-study section:last-child{margin-bottom:0}.ayo-case-study .case-callout{line-height:2}.ayo-case-study .case-callout p{margin-bottom:14px}.ayo-case-study .case-callout p:last-child{margin-bottom:0}
.profile-block{display:flex;flex-direction:column;gap:16px}.profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.profile-intro{margin-top:48px}.skills{display:flex;flex-wrap:wrap;gap:4px 8px}.experience{display:grid;gap:16px}.experience-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:32px}.experience-date{color:var(--text);font-weight:500}.experience-role{margin:0;color:var(--text);font-weight:500}.experience-place,.experience-copy{margin:4px 0 0}.experience-copy{margin-top:8px}
.footer-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:8px}.footer-links{display:flex;align-items:center;gap:2px;margin-left:-6px}.footer-control{display:inline-flex;height:24px;align-items:center;gap:6px;padding:0 6px;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;transition:color 140ms var(--ease),background-color 140ms var(--ease),transform 140ms var(--ease)}.footer-control:hover{background:var(--raised);color:var(--text)}.footer-control:active{transform:scale(.97)}.footer-icon{font-size:14px;line-height:1}.theme-switch{display:flex;gap:2px}.theme-choice{width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}.theme-choice[aria-pressed="true"],.theme-choice:hover{background:var(--raised);color:var(--text)}
.minimap-rail-zone{display:none}.command-dialog{width:min(92vw,480px);padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);box-shadow:0 18px 50px color-mix(in srgb,var(--text) 18%,transparent)}.command-dialog::backdrop{background:color-mix(in srgb,var(--bg) 82%,transparent)}.command-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.command-list a{display:flex;padding:10px;border-radius:4px;text-decoration:none}.command-list a:hover{background:var(--raised)}.toast{position:fixed;right:18px;bottom:18px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);box-shadow:0 10px 30px color-mix(in srgb,var(--text) 12%,transparent);font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s}.toast.is-visible{opacity:1;transform:none}
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}[data-reveal].is-visible{opacity:1;transform:none}[data-reveal]:nth-child(2){transition-delay:40ms}[data-reveal]:nth-child(3){transition-delay:80ms}[data-reveal]:nth-child(4){transition-delay:120ms}
@media(min-width:640px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:640px){.site-shell--home{padding-top:6rem}}
@media(min-width:1280px){.minimap-rail-zone{position:fixed;left:16px;top:50%;z-index:20;display:block;transform:translateY(-50%)}.minimap-rail{display:grid;gap:5px}.minimap-rail button{display:flex;width:24px;height:10px;align-items:center;padding:0;border:0;background:transparent;cursor:pointer}.minimap-rail span{display:block;width:var(--minimap-width,10px);height:1px;background:color-mix(in srgb,var(--muted) 58%,transparent);transition:width 180ms var(--ease),height 180ms var(--ease),background-color 180ms var(--ease)}.minimap-rail button[data-minimap-current] span{width:20px;height:2px;background:var(--text)}}
@media(max-width:540px){.case-meta{grid-template-columns:1fr;gap:16px}.experience-row{grid-template-columns:1fr;gap:2px}.profile-top{flex-direction:column}.media-panel{min-height:220px}.honda-media-grid--two,.honda-media-grid--three,.honda-card-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}
:root{--font-sans:'Inter',sans-serif;--bg:#fff;--raised:#f4f4f4;--preview:#fff;--border:#e6e6e6;--text:#2f2f2f;--muted:#696969}.site-shell:not(.site-shell--home){--content-width:43.25rem}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}body{font:400 16px/28px var(--font-sans);letter-spacing:0}.identity-copy h1,.identity-copy p{font-size:16px;line-height:28px}.site-shell--home .intro{margin-top:48px;max-width:none}.site-shell--home .intro+.intro{margin-top:16px}.site-shell--home .actions{margin-top:24px}.site-shell--home .section{margin-top:96px}.section-heading{margin-bottom:20px;color:var(--text);font-size:16px;line-height:28px}.project-card-copy{padding:16px 12px 12px}.row-title,.row-description{line-height:28px}.back-link{width:36px;height:36px;min-height:36px;justify-content:center;margin:0 0 96px;border-radius:50%;background:var(--raised);color:var(--muted);font-size:0;line-height:1;text-decoration:none}.back-link:before{content:'←';font-size:18px;line-height:1}.back-link:hover{background:var(--border);color:var(--text)}.breadcrumb{width:36px;height:36px;margin:0 0 96px;border-radius:50%;background:var(--raised);font-size:0}.breadcrumb>*{display:none}.breadcrumb a:first-child{display:grid;width:100%;height:100%;place-items:center;color:var(--muted);text-decoration:none}.breadcrumb a:first-child:before{content:'←';font-size:18px;line-height:1}.breadcrumb:hover{background:var(--border)}.page-header{gap:16px}.page-header h1{font-size:16px;font-weight:550;line-height:28px}.page-header p{line-height:28px}.page-body{margin-top:40px}.prose h2{margin:80px 0 20px;font-size:16px;font-weight:550;line-height:28px;scroll-margin-top:80px}.prose h3{margin:0 0 8px;font-size:16px;font-weight:550;line-height:28px}.prose p{margin:0 0 24px;line-height:28px}.prose a{color:inherit;text-decoration-color:var(--raised);text-underline-offset:3px}.prose a:hover{color:var(--text);text-decoration-color:var(--muted)}.media-panel,.case-media img,.honda-media-grid img{box-shadow:none}.honda-case-study p,.ayo-case-study p,.page-header--honda p,.page-header--ayo p{line-height:28px;margin-bottom:24px}.honda-case-study .case-callout,.honda-labeled-list dt,.honda-labeled-list dd,.ayo-case-study .case-callout{line-height:28px}site-footer{display:block}site-footer@media(max-width:639px){.site-shell{padding:3rem 1.5rem}.site-shell--home .section{margin-top:64px}.back-link,.breadcrumb{margin-bottom:64px}}
:root{--font-sans:'Inter',sans-serif;--bg:#fcfcfc;--raised:#f6f6f6;--preview:#fff;--border:#e8e8e8;--text:#202020;--muted:#6f6f6f}.site-shell:not(.site-shell--home){--content-width:43.25rem}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv01","ss03";font-synthesis:none}body{font:400 16px/26px var(--font-sans);letter-spacing:0}.identity-copy h1,.identity-copy p{font-size:16px;line-height:22px}.site-shell--home .intro{margin-top:32px;max-width:none}.site-shell--home .intro+.intro{margin-top:16px}.site-shell--home .actions{margin-top:24px}.site-shell--home .section{margin-top:96px}.section-heading{margin-bottom:20px;color:var(--text);font-size:16px;line-height:22px}.project-card{border-color:var(--border);box-shadow:0 0 0 1px #0000000f,0 1px 2px -1px #0000000f,0 2px 4px #0000000a}.project-card-copy{padding:16px}.row-title,.row-description{line-height:26px}.project-preview--ayo{background:#f1f1f0}
.project-preview--ayo img{width:100%;height:100%;object-fit:cover}.page-header h1{font-size:16px;font-weight:550;line-height:22px}.page-header p,.honda-case-study p,.ayo-case-study p,.page-header--honda p,.page-header--ayo p{line-height:26px}.prose p{line-height:26px}.prose h2{line-height:22px}.prose h3{line-height:22px}.honda-case-study .case-callout,.honda-labeled-list dt,.honda-labeled-list dd,.ayo-case-study .case-callout{line-height:26px}
:root{--font-sans:'Inter',sans-serif;--bg:#fcfcfc;--raised:#f6f6f6;--preview:#fff;--border:#e8e8e8;--text:#202020;--muted:#6f6f6f;--text-paragraph:lab(28.08% 0 -.00000596046)}.site-shell:not(.site-shell--home){--content-width:43.25rem}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv01","ss03";font-synthesis:none}body{font:400 16px/26px var(--font-sans);letter-spacing:0}.identity-copy h1,.identity-copy p{font-size:16px;line-height:22px}.site-shell--home{padding-top:6rem}.site-shell--home .intro{margin-top:32px;max-width:none}.site-shell--home .intro+.intro{margin-top:16px}.site-shell--home .actions{margin-top:24px}.site-shell--home .section{margin-top:96px}.site-shell--home > .section:first-of-type{margin-top:128px}.section-heading{margin-bottom:20px;color:var(--text);font-size:16px;line-height:22px}.project-card{border-color:var(--border);box-shadow:0 0 0 1px #0000000f,0 1px 2px -1px #0000000f,0 2px 4px #0000000a}.project-card-copy{padding:16px}.row-title,.row-description{line-height:26px}.project-preview--ayo{background:#f1f1f0}
.project-preview--ayo img{width:100%;height:100%;object-fit:cover}.page-header h1{font-size:16px;font-weight:550;line-height:22px}.page-header p,.page-header--honda p,.page-header--ayo p{line-height:26px}.prose p{color:var(--text-paragraph);margin:0 0 16px;line-height:26px}.honda-case-study p,.ayo-case-study p{color:var(--text-paragraph);margin-bottom:16px}.prose h2{line-height:22px}.prose h3{line-height:22px}.honda-case-study .case-callout,.honda-labeled-list dt,.honda-labeled-list dd,.ayo-case-study .case-callout{line-height:26px}

/* Reference list geometry: a 44 × 52 document preview sits beside a 56px text rail. */
.mark.profile-photo{overflow:hidden;cursor:default;user-select:none;-webkit-user-select:none}
.mark.profile-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.site-shell--home .profile-photo{width:44px;height:44px}
.list-row{--icon:44px;align-items:flex-start;gap:12px;padding:8px;margin:0 -8px;border-radius:16px}
.list-row:before{inset:0;border-radius:16px}
.list-row .row-icon{position:relative;width:44px;height:52px;flex:0 0 44px;padding:5px;border:1px solid var(--border);border-radius:6px;background:var(--preview);box-shadow:0 0 0 2px var(--bg),0 0 0 3px #0000000f,0 1px 2px -1px #0000000f,0 2px 4px #0000000a}
.list-row .row-icon:before{content:"";position:absolute;inset:9px 7px;background:linear-gradient(var(--border),var(--border)) 0 0/14px 3px no-repeat,linear-gradient(var(--border),var(--border)) 0 11px/30px 3px no-repeat,linear-gradient(var(--border),var(--border)) 0 20px/23px 3px no-repeat,linear-gradient(var(--border),var(--border)) 0 31px/30px 3px no-repeat,linear-gradient(var(--border),var(--border)) 0 40px/14px 3px no-repeat;border-radius:2px}
.list-row .row-copy{display:flex;min-height:56px;min-width:0;flex:1;flex-direction:column;justify-content:center;padding:0}
.list-row .row-title{font-weight:450;line-height:22px}
.list-row .row-description{margin-top:0;line-height:26px}
.row-arrow{display:none!important}

/* Homepage identity: the short name opens as one continuous, masked word. */
.identity--home{gap:14px}
.name-heading{font:inherit}
.name-reveal{display:inline;padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:inherit;line-height:inherit;cursor:pointer;white-space:nowrap}
.name-base{display:inline;white-space:nowrap}
.name-tail{display:inline-block;max-width:0;overflow:hidden;vertical-align:bottom;white-space:pre;transition:max-width .6s cubic-bezier(.25,.1,.25,1)}
.name-reveal:is(:hover,:focus-visible) .name-tail{max-width:12ch}
.name-reveal:focus-visible{outline-offset:4px}
.name-reveal{text-decoration:underline dashed color-mix(in srgb,var(--muted) 52%,transparent);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 180ms ease}
.name-reveal:is(:hover,:focus-visible){text-decoration-color:transparent}
.site-shell--home > .section:first-of-type{margin-top:96px}

/* Role explainer: a concise, handwritten annotation over the quiet homepage. */
.site-shell--home{position:relative}
.role-explainer-trigger{display:inline;padding:0;border:0;background:transparent;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:help;text-decoration:underline dashed color-mix(in srgb,var(--muted) 52%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}
.role-explainer-trigger:hover,.role-explainer-trigger:focus-visible{color:var(--text)}
.role-explainer{position:absolute;top:4rem;left:min(46vw,22.5rem);z-index:12;display:flex;width:min(32rem,calc(100vw - 4rem));align-items:flex-start;gap:18px;opacity:0;transform:translateY(5px);pointer-events:none;transition:opacity 180ms ease,transform 180ms ease}
.role-explainer[hidden]{display:none}
.role-explainer.is-open{opacity:1;transform:none;pointer-events:auto}
.role-explainer-arrow{position:absolute;top:76px;left:-70px;width:104px;height:76px;margin:0;overflow:visible;color:var(--muted)}
.role-explainer-arrow path{stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 560ms cubic-bezier(.22,1,.36,1) 90ms}
.role-explainer.is-open .role-explainer-arrow path{stroke-dashoffset:0}
.role-explainer-copy{max-width:29rem;margin:0;color:var(--muted);font-family:"Chalkboard SE","Chalkboard",cursive;font-size:16px;font-weight:400;line-height:20px;letter-spacing:.01em}
.role-explainer-anchor{position:relative;display:inline}
.role-explainer-anchor .role-explainer{top:-168px;left:calc(100% - 120px);display:grid;width:min(44rem,calc(100vw - 4rem));min-height:150px;padding-left:0;grid-template-columns:clamp(6rem,8vw,6.5rem) minmax(0,32rem);gap:0}
.role-explainer-anchor .role-explainer-arrow{position:relative;top:auto;left:auto;grid-column:1;grid-row:1;align-self:start;margin-top:76px}
.role-explainer-anchor .role-explainer-copy{grid-column:2;grid-row:1;margin-top:48px}
.role-explainer-copy{display:block}
.site-shell--home.is-role-explainer-open > .section,.site-shell--home.is-role-explainer-open > site-footer,.site-shell--home.is-role-explainer-open > [data-reveal] > .intro:not(:has(.role-explainer-anchor)),.site-shell--home.is-role-explainer-open .role-explainer-context{filter:blur(4px);opacity:.36;pointer-events:none}
.site-shell--home.is-role-explainer-open .mark,.site-shell--home.is-role-explainer-open .name-heading{filter:blur(4px);opacity:.4}
.site-shell--home.is-role-explainer-open .identity-copy p:not(:has(.role-explainer-trigger.is-active)){filter:blur(4px);opacity:.4}
.site-shell--home > :not(.identity),.identity--home .mark,.identity--home .name-heading,.identity--home .identity-copy p{transition:filter 220ms ease,opacity 220ms ease}
site-back{display:block}.back-control{display:grid;width:36px;height:36px;place-items:center;margin:0 0 48px;border-radius:50%;background:var(--raised);color:var(--muted);text-decoration:none;transition:background-color 140ms var(--ease),color 140ms var(--ease)}.back-control:hover{background:var(--border);color:var(--text)}.back-control svg{display:block;width:21px;height:20px;fill:currentColor}@media(max-width:639px){.back-control{margin-bottom:40px}}
.back-link:before,.breadcrumb a:first-child:before{content:"";display:block;width:20px;height:20px;background:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 31'%3E%3Cpath d='M13.5 28.3638C12.9477 28.3638 12.5 28.8115 12.5 29.3638C12.5 29.9161 12.9477 30.3638 13.5 30.3638V29.3638V28.3638ZM.292893 6.65666C-.0976311 7.04719-.0976311 7.68035.292893 8.07088L6.65685 14.4348C7.04738 14.8254 7.68054 14.8254 8.07107 14.4348C8.46159 14.0443 8.46159 13.4111 8.07107 13.0206L2.41421 7.36377L8.07107 1.70692C8.46159 1.31639 8.46159.683226 8.07107.292702C7.68054-.0978227 7.04738-.0978227 6.65685.292702L.292893 6.65666ZM13.5 29.3638V30.3638H20.5V29.3638V28.3638H13.5V29.3638ZM20.5 7.36377V6.36377H1V7.36377V8.36377H20.5V7.36377ZM31.5 18.3638H32.5C32.5 11.7364 27.1274 6.36377 20.5 6.36377V7.36377V8.36377C26.0228 8.36377 30.5 12.8409 30.5 18.3638H31.5ZM20.5 29.3638V30.3638C27.1274 30.3638 32.5 24.9912 32.5 18.3638H31.5H30.5C30.5 23.8866 26.0228 28.3638 20.5 28.3638V29.3638Z' fill='black'/%3E%3C/svg%3E");mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 31'%3E%3Cpath d='M13.5 28.3638C12.9477 28.3638 12.5 28.8115 12.5 29.3638C12.5 29.9161 12.9477 30.3638 13.5 30.3638V29.3638V28.3638ZM.292893 6.65666C-.0976311 7.04719-.0976311 7.68035.292893 8.07088L6.65685 14.4348C7.04738 14.8254 7.68054 14.8254 8.07107 14.4348C8.46159 14.0443 8.46159 13.4111 8.07107 13.0206L2.41421 7.36377L8.07107 1.70692C8.46159 1.31639 8.46159.683226 8.07107.292702C7.68054-.0978227 7.04738-.0978227 6.65685.292702L.292893 6.65666ZM13.5 29.3638V30.3638H20.5V29.3638V28.3638H13.5V29.3638ZM20.5 7.36377V6.36377H1V7.36377V8.36377H20.5V7.36377ZM31.5 18.3638H32.5C32.5 11.7364 27.1274 6.36377 20.5 6.36377V7.36377V8.36377C26.0228 8.36377 30.5 12.8409 30.5 18.3638H31.5ZM20.5 29.3638V30.3638C27.1274 30.3638 32.5 24.9912 32.5 18.3638H31.5H30.5C30.5 23.8866 26.0228 28.3638 20.5 28.3638V29.3638Z' fill='black'/%3E%3C/svg%3E");-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}
.page-header p,.prose p{color:var(--muted);line-height:26px}
@media(max-width:639px){.role-explainer-anchor .role-explainer{position:static;width:100%;min-height:0;margin-top:20px;padding-left:0;grid-template-columns:1fr;gap:12px}.role-explainer-arrow{display:none}.role-explainer-anchor .role-explainer-copy{grid-column:1}.role-explainer-copy{font-size:15px}.site-shell--home.is-role-explainer-open .identity--home{padding-bottom:66px}}
.company-link{display:inline;color:inherit;text-decoration:none;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent);text-underline-offset:3px}.company-link:hover,.company-link:focus-visible{color:var(--text);text-decoration:underline}.company-link img{width:.92em;height:.92em;margin-right:.28em;object-fit:contain;vertical-align:-.13em}.project-card-main{display:block;color:inherit;text-decoration:none}

.project-preview--asuransi{background:#f1f1f0}.project-preview--asuransi img{width:100%;height:100%;object-fit:cover}.project-preview--grab-drone{background:#f1f1f0}.project-preview--grab-drone img{width:100%;height:100%;object-fit:cover}

/* Perbait keeps the homepage quiet, then opens into a small, live browser window. */
.perbait-row{display:block;padding:8px;margin:0 -8px}.perbait-row:before{display:none}.perbait-preview-anchor{position:relative;display:block;width:100%}.perbait-preview-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.perbait-preview-trigger .row-title{display:inline-flex;text-decoration:underline dashed color-mix(in srgb,var(--muted) 52%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}.perbait-preview-trigger:hover .row-title,.perbait-preview-trigger:focus-visible .row-title{color:var(--text);text-decoration-color:transparent}.perbait-preview{position:absolute;top:calc(100% + 20px);left:0;z-index:16;width:min(30rem,calc(100vw - 3rem));opacity:0;transform:translateY(8px);transition:opacity 180ms var(--ease),transform 180ms var(--ease)}.perbait-preview[hidden]{display:none}.site-shell--home.is-perbait-preview-open .perbait-preview{opacity:1;transform:none}.perbait-preview-frame{display:block;overflow:hidden;border:1px solid color-mix(in srgb,var(--text) 20%,var(--border));border-radius:12px;background:var(--preview);box-shadow:0 16px 44px color-mix(in srgb,var(--text) 17%,transparent);color:inherit;text-decoration:none}.perbait-preview-bar{display:flex;height:25px;align-items:center;gap:4px;padding:0 9px;border-bottom:1px solid var(--border);background:var(--raised)}.perbait-preview-bar>span{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--muted) 34%,transparent)}.perbait-preview-bar em{overflow:hidden;margin-left:5px;color:var(--muted);font-size:9px;font-style:normal;line-height:1;text-overflow:ellipsis;white-space:nowrap}.perbait-preview-frame iframe{display:block;width:calc(100% / .68);height:390px;border:0;pointer-events:none;transform:scale(.68);transform-origin:top left}.site-shell--home.is-perbait-preview-open>.identity,.site-shell--home.is-perbait-preview-open>[data-reveal],.site-shell--home.is-perbait-preview-open>.section:not(.section--experiments),.site-shell--home.is-perbait-preview-open>site-footer,.site-shell--home.is-perbait-preview-open .section--experiments>.section-heading{filter:blur(4px);opacity:.36;pointer-events:none}.site-shell--home.is-perbait-preview-open>.identity,.site-shell--home.is-perbait-preview-open>[data-reveal],.site-shell--home.is-perbait-preview-open>.section,.site-shell--home.is-perbait-preview-open>site-footer{transition:filter 220ms ease,opacity 220ms ease}@media(max-width:639px){.perbait-preview{position:static;display:block;width:100%;margin-top:14px}.perbait-preview-frame iframe{height:320px}.site-shell--home.is-perbait-preview-open .section--experiments>.section-heading{filter:none;opacity:1}}

/* Decorative and pointer-transparent: each hover batch is created once in JavaScript. */
.leaf-layer{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.wind-leaf{--leaf-size:22px;--leaf-delay:0s;position:absolute;top:0;left:0;width:var(--leaf-size);height:var(--leaf-size);offset-rotate:0deg;offset-distance:0%;opacity:0;will-change:offset-distance,opacity;animation:leaf-wind 4.4s linear var(--leaf-delay) forwards}
.wind-leaf img{display:block;width:100%;height:100%;object-fit:contain;animation:leaf-roll 4.4s linear var(--leaf-delay) forwards}
.wind-leaf--two{--leaf-size:17px;--leaf-delay:260ms}
.wind-leaf--three{--leaf-size:29px;--leaf-delay:520ms;filter:blur(.4px)}
@keyframes leaf-wind{0%{offset-distance:0%;opacity:0}12%{opacity:.66}78%{opacity:.46}100%{offset-distance:100%;opacity:0}}
@keyframes leaf-roll{0%{transform:rotate(-22deg) scale(.9)}18%{transform:rotate(28deg) scale(1)}39%{transform:rotate(84deg) scale(.97)}61%{transform:rotate(150deg) scale(1.03)}81%{transform:rotate(218deg) scale(.98)}100%{transform:rotate(284deg) scale(.92)}}

@media(min-width:640px){.perbait-preview{top:-286px}}
.site-shell--home .intro{margin-top:24px}.site-shell--home .section--experiments{margin-top:64px}.site-shell--home .section--experiments+.section{margin-top:64px}.section--experiments .section-heading{margin-bottom:8px}.perbait-row{padding:0;margin:0}.perbait-preview-anchor:before{position:absolute;bottom:100%;left:0;z-index:15;display:none;width:min(30rem,calc(100vw - 3rem));height:292px;content:""}.site-shell--home.is-perbait-preview-open .perbait-preview-anchor:before{display:block}.perbait-preview-trigger .row-title{display:inline}.perbait-preview-trigger .row-description{display:inline;margin:0;color:var(--muted);font-weight:400}.perbait-preview-frame{height:270px;border-radius:16px}.perbait-preview-frame iframe{width:calc(100% / .6);height:408px;transform:scale(.6)}@media(min-width:640px){.perbait-preview{top:-280px}}@media(max-width:639px){.perbait-preview-anchor:before{display:none!important}.perbait-preview-frame{height:220px;border-radius:16px}.perbait-preview-frame iframe{height:325px}}
.site-shell--home>.section--experiments:first-of-type{margin-top:64px}.site-shell--home.is-role-explainer-open .role-explainer-trigger{filter:blur(4px);opacity:.36;pointer-events:none}.site-shell--home.is-role-explainer-open .role-explainer-trigger.is-active{filter:none;opacity:1;pointer-events:auto}.experiment-list{gap:0}.experiment-row,.perbait-row{margin:0;border-bottom:1px solid var(--border)}.experiment-row:before,.perbait-row:before{display:none}.experiment-row{align-items:center;gap:10px;padding:12px 0}.perbait-preview-trigger{display:flex;align-items:center;gap:10px;padding:12px 0}.perbait-preview-trigger .row-title,.experiment-row .row-title{display:block;color:var(--text);font-weight:500}.perbait-preview-trigger .row-description,.experiment-row .row-description{display:inline;margin:0;color:var(--muted);font-weight:400}.experiment-icon{position:relative;display:block;width:24px;height:24px;flex:0 0 24px;border:1px solid color-mix(in srgb,var(--text) 12%,var(--border));border-radius:7px;background:var(--raised)}.experiment-icon:before,.experiment-icon:after{position:absolute;content:""}.experiment-icon--perbait{background:#d9915e}.experiment-icon--perbait:before{inset:6px 5px;border:1px solid #382318;border-radius:2px;background:linear-gradient(#382318 0 0) 4px 5px/9px 1px no-repeat,linear-gradient(#382318 0 0) 4px 9px/7px 1px no-repeat}.experiment-icon--inscra{background:#cbd4d8}.experiment-icon--inscra:before{inset:6px;border:1px solid #33434a;border-radius:2px;background:linear-gradient(#33434a 0 0) 4px 5px/6px 1px no-repeat}.perbait-preview{width:min(24rem,calc(100vw - 3rem))}.perbait-preview-anchor:before{width:min(24rem,calc(100vw - 3rem));height:244px}.perbait-preview-frame{height:auto;aspect-ratio:16/9;border-radius:16px}.perbait-preview-frame img{display:block;width:100%;height:100%;object-fit:cover}.perbait-preview-frame iframe{display:none}@media(min-width:640px){.perbait-preview{top:-232px}}@media(max-width:639px){.perbait-preview-frame{height:auto;aspect-ratio:16/9}}
.site-shell--home.is-perbait-preview-open>.section--experiments{filter:none;opacity:1;pointer-events:auto}.perbait-preview-trigger{gap:0}.experiment-row{gap:0}.experiment-row:last-child{border-bottom:0}.experiment-icon{display:none}

/* Each experiment owns a text-sized hover target; previews are display-only. */
.experiment-row{border-bottom:0}.experiment-preview-anchor{position:relative;display:inline-block;max-width:100%}.experiment-preview-trigger{display:inline;color:inherit;text-decoration:none;cursor:pointer}.experiment-preview-trigger .row-title{display:inline;text-decoration:underline dashed color-mix(in srgb,var(--muted) 52%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}.experiment-preview-trigger:hover .row-title,.experiment-preview-trigger:focus-visible .row-title,.experiment-preview-trigger.is-active .row-title{color:var(--text);text-decoration-color:transparent}.experiment-preview{position:absolute;top:calc(100% + 20px);left:0;z-index:16;display:block;width:min(30rem,calc(100vw - 3rem));overflow:hidden;border:1px solid color-mix(in srgb,var(--text) 20%,var(--border));border-radius:16px;background:var(--preview);box-shadow:0 16px 44px color-mix(in srgb,var(--text) 17%,transparent);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 160ms var(--ease),transform 160ms var(--ease)}.experiment-preview[hidden]{display:none}.experiment-preview img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.site-shell--home.is-experiment-preview-open .experiment-preview-trigger.is-active+.experiment-preview{opacity:1;transform:none}.site-shell--home.is-experiment-preview-open>.identity,.site-shell--home.is-experiment-preview-open>[data-reveal],.site-shell--home.is-experiment-preview-open>.section:not(.section--experiments),.site-shell--home.is-experiment-preview-open>site-footer,.site-shell--home.is-experiment-preview-open .section--experiments>.section-heading{filter:blur(4px);opacity:.36;pointer-events:none;transition:filter 180ms ease,opacity 180ms ease}.site-shell--home.is-experiment-preview-open>.section--experiments{filter:none;opacity:1;pointer-events:auto}.site-shell--home.is-experiment-preview-open .experiment-preview-trigger:not(.is-active){filter:blur(4px);opacity:.36;pointer-events:none;transition:filter 180ms ease,opacity 180ms ease}@media(min-width:640px){.experiment-preview{top:-232px}}@media(max-width:639px){.experiment-preview{position:static;width:100%;margin-top:12px}.site-shell--home.is-experiment-preview-open .section--experiments>.section-heading{filter:none;opacity:1}}

.inscra-case-study .case-media{margin:32px 0 64px}.inscra-case-study .case-media img,.inscra-case-study .case-media video{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--raised)}.inscra-case-study .case-media figcaption{margin-top:8px;color:var(--muted);font-size:12px;line-height:18px}.inscra-case-study .case-media figcaption strong{color:var(--text);font-weight:500}.inscra-case-study kbd{padding:1px 5px;border:1px solid var(--border);border-radius:4px;background:var(--raised);color:var(--text);font:inherit;font-size:.875em}.inscra-case-study h3{margin-top:32px}

/* Keep the trigger legible: previews take normal space directly above their text. */
.experiment-row{border-bottom:0;padding:8px 0}.experiment-preview-anchor{display:inline-block;max-width:100%}.experiment-preview{position:absolute;top:auto;right:auto;bottom:calc(100% + 12px);left:0;margin:0;transform:translateY(6px)}.site-shell--home.is-experiment-preview-open .experiment-preview-trigger.is-active+.experiment-preview{transform:none}
.site-shell--home.is-role-explainer-open [data-reveal] > .intro > .role-explainer-context{filter:blur(4px);opacity:.36;pointer-events:none}
.role-explainer-anchor .role-explainer{left:0;width:min(30rem,calc(100vw - 3rem));grid-template-columns:6rem minmax(0,1fr)}
.footer-nav{margin-top:32px;padding-top:16px;border-top:1px solid var(--border)}
.section--reflections .section-heading{margin-bottom:8px}
@media (hover:none),(pointer:coarse){.role-explainer-trigger{pointer-events:none;cursor:text}.experiment-preview{display:none!important}.experiment-preview-trigger:hover .row-title,.experiment-preview-trigger:focus-visible .row-title{color:var(--text);text-decoration-color:color-mix(in srgb,var(--muted) 52%,transparent)}}

@media (max-width:639px){.role-explainer{display:none!important}.role-explainer-trigger{pointer-events:none;cursor:text;text-align:inherit;vertical-align:baseline}}
/* case-study card notes — the homepage hover explainer, aimed at a project card */
.project-preview{position:relative}
.project-card{position:relative}
.card-note{position:absolute;inset:4px 4px auto 4px;z-index:3;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:2px;aspect-ratio:192/100;padding:14px 16px 14px 6px;border-radius:12px;background:color-mix(in srgb,var(--preview) 92%,transparent);opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.project-card.is-noting .card-note{opacity:1}
.card-note-arrow{grid-column:1;align-self:center;width:100%;height:auto;overflow:visible;color:var(--muted)}
.card-note-arrow path{stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 520ms cubic-bezier(.22,1,.36,1) 80ms}
.project-card.is-noting .card-note-arrow path{stroke-dashoffset:0}
.card-note p{grid-column:2;margin:0;color:var(--text);font-family:"Chalkboard SE","Chalkboard",cursive;font-size:13.5px;line-height:19px;letter-spacing:.01em}

/* wide enough to step outside the card, the way the homepage explainer does */
@media (min-width:1300px){
.card-note{inset:auto;top:50%;width:19rem;aspect-ratio:auto;padding:0;border-radius:0;background:transparent;transform:translateY(-50%);grid-template-columns:96px minmax(0,1fr);gap:6px}
.card-note[data-side="left"]{right:calc(100% + 12px);grid-template-columns:minmax(0,1fr) 96px}
.card-note[data-side="right"]{left:calc(100% + 12px)}
/* the arrow is first in the DOM but belongs in column 2 here, and without an
   explicit row auto-placement pushes the text into a second one, which is what
   left the arrow floating above the note */
.card-note[data-side="left"] p{grid-column:1;grid-row:1}
/* the arrow annotates the note, so it points back at the text: a note on the
   left of its card keeps the arrow to its right, flipped to aim left */
.card-note[data-side="left"] .card-note-arrow{grid-column:2;grid-row:1;transform:scaleX(-1)}
.card-note p{font-size:14.5px;line-height:21px}
}

/* everything except the hovered card steps back, so the note is the only thing to read */
.site-shell--home.is-card-noting > *:not(.is-note-host){filter:blur(4px);opacity:.34;pointer-events:none;transition:filter .28s var(--ease),opacity .28s var(--ease)}
.site-shell--home.is-card-noting .is-note-host > .section-heading{filter:blur(4px);opacity:.34;transition:filter .28s var(--ease),opacity .28s var(--ease)}
.site-shell--home.is-card-noting .project-card:not(.is-noting){filter:blur(4px);opacity:.34;transition:filter .28s var(--ease),opacity .28s var(--ease)}
@media (max-width:860px){.card-note p{font-size:12.5px;line-height:17px}}
@media (hover:none),(pointer:coarse){.card-note{display:none}.site-shell--home.is-card-noting > *{filter:none;opacity:1;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){.card-note,.card-note-arrow path{transition:none}}

/* reading gate — Spectrum's account access card over a blurred remainder */
.gate-shell{position:relative;margin:24px 0 0}
.gate-locked{max-height:440px;overflow:hidden;filter:blur(9px);opacity:.5;pointer-events:none;user-select:none}
.gate-locked.is-open{max-height:none;overflow:visible;filter:none;opacity:1;pointer-events:auto;user-select:auto}
.gate-locked.is-revealing{animation:gate-reveal .62s var(--ease) both}
@keyframes gate-reveal{from{opacity:0;filter:blur(9px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.gate-veil{position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 40%,transparent) 30%,var(--bg) 88%);pointer-events:none}

.gate{position:absolute;left:0;right:0;top:96px;z-index:2;display:grid;place-items:center}
.gate__card{width:min(22.5rem,100%);padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--preview);box-shadow:0 16px 40px color-mix(in srgb,var(--text) 10%,transparent);text-align:left}
.gate__card>p,.prose .gate__card>p{margin:0 0 18px;color:var(--text);font-size:13px;line-height:21px}
.gate__card>p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.gate__card>p a:hover{text-decoration-color:var(--muted)}
.gate__row label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;line-height:18px}
.gate__row input{width:100%;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--raised);color:var(--text);font:inherit;font-size:13px;transition:border-color .24s var(--ease),background .24s var(--ease)}
.gate__row input:focus{outline:0;border-color:var(--text);background:var(--bg)}
.gate__submit{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:12px;border:1px solid var(--text);border-radius:8px;background:var(--text);color:var(--bg);font:inherit;font-size:13px;cursor:pointer;transition:opacity .24s var(--ease)}
.gate__submit:disabled{opacity:.6;cursor:default}
.gate__submit svg{width:13px;height:13px}
.gate__submit i{position:absolute;width:14px;height:14px;border:2px solid color-mix(in srgb,var(--bg) 40%,transparent);border-top-color:var(--bg);border-radius:50%;opacity:0;animation:gate-spin .7s linear infinite}
.gate.is-checking .gate__submit span,.gate.is-checking .gate__submit svg{opacity:0}
.gate.is-checking .gate__submit i{opacity:1}
@keyframes gate-spin{to{transform:rotate(360deg)}}
.gate__error{display:block;min-height:18px;margin-top:8px;color:var(--hd-red,#d81f26);font-size:11.5px;line-height:18px}
@media (max-width:600px){.gate{top:52px}.gate-locked{max-height:330px}.gate__card{padding:18px}}
@media (prefers-reduced-motion:reduce){.gate-locked.is-revealing{animation:none}.gate__submit i{animation:none}}

/* Honda Indonesia — case-study visual system ------------------------------- */
.honda-case-study{--hd-ink:#16202c;--hd-red:#d81f26;--hd-line:var(--border);--hd-soft:var(--raised);--hd-chip:var(--preview);--hd-head:#e7ecea;--hd-new:#eaf1fb;--hd-new-ink:#2d5896;--hd-new-line:#cfdef4;--hd-home:#e3f1e8;--hd-home-ink:#2b6440;--hd-home-line:#bfdcca;--hd-next:#f1effb;--hd-next-ink:#4b3f9a;--hd-next-line:#d7d1f2}
:root[data-theme='dark'] .honda-case-study{--hd-ink:#d9dee6;--hd-red:#ff6d72;--hd-head:#252b31;--hd-new:#16243a;--hd-new-ink:#9dc0ef;--hd-new-line:#27415f;--hd-home:#15281e;--hd-home-ink:#8fd2ab;--hd-home-line:#22482f;--hd-next:#1e1b32;--hd-next-ink:#b3a9ef;--hd-next-line:#332c55}
.honda-case-study .honda-bleed{width:min(1040px,calc(100vw - 48px));margin-left:calc(50% - min(520px,50vw - 24px));margin-right:calc(50% - min(520px,50vw - 24px))}
@media (max-width:1180px){.honda-case-study .honda-bleed{width:100%;margin-left:0;margin-right:0}}
.honda-case-study .honda-figure-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:18px}
.honda-figure-note strong{color:var(--text);font-weight:500}

/* anchor media */
.honda-anchor{margin:0 0 64px}
.honda-anchor video{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--raised)}
.honda-case-study .honda-anchor figcaption{margin-top:10px;color:var(--muted);font-size:12px;line-height:18px}
.honda-anchor figcaption strong{color:var(--text);font-weight:500}

/* pill tabs with a sliding indicator */
.honda-tabs{margin:32px 0 64px}
.honda-tabs__bar{position:relative;display:flex;justify-content:center;gap:0;width:fit-content;max-width:100%;margin:0 auto;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--preview);overflow:hidden}
.honda-tabs__thumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:var(--text);transition:transform .42s var(--ease),width .42s var(--ease)}
.honda-tabs__bar button{position:relative;z-index:1;min-height:32px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:13px;line-height:1;white-space:nowrap;cursor:pointer;transition:color .3s var(--ease)}
.honda-tabs__bar button[aria-selected="true"]{color:var(--bg)}
.honda-case-study .honda-tabs__lede{margin:16px auto 0;max-width:46ch;color:var(--text);font-size:13px;line-height:22px;text-align:center}
.honda-tabs__stage{display:grid;grid-template-columns:1fr minmax(0,300px) 1fr;gap:24px;align-items:center;margin-top:24px}
.honda-tabs__panels{position:relative;grid-column:2}
.honda-tabs__panel{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s}
.honda-tabs__panels{display:grid}
.honda-tabs__panel[data-active]{opacity:1;visibility:visible;transform:none}
.honda-tabs__panel video{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--raised)}
.honda-tabs__aside{position:relative;display:grid;align-content:center;min-height:120px}
.honda-tabs__aside--left{grid-column:1;text-align:right;padding-right:20px;border-right:1px solid var(--border)}
.honda-tabs__aside--right{grid-column:3;text-align:left;padding-left:20px;border-left:1px solid var(--border)}
.honda-tabs__note{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s}
.honda-tabs__aside{display:grid}
.honda-tabs__note[data-active]{opacity:1;visibility:visible;transform:none}
.honda-tabs__note span{display:inline-block;margin-bottom:10px;padding:2px 8px;border-radius:4px;background:var(--raised);color:var(--muted);font-size:11px;line-height:18px;letter-spacing:.04em;text-transform:uppercase}
.honda-tabs__note h4{margin:0 0 6px;color:var(--text);font-size:14px;font-weight:550;line-height:20px}
.honda-tabs__note p{margin:0;color:var(--muted);font-size:12px;line-height:20px}
@media (max-width:820px){.honda-tabs__stage{grid-template-columns:1fr;gap:20px}.honda-tabs__panels{grid-column:1;order:2;max-width:300px;margin:0 auto;width:100%}.honda-tabs__aside--left,.honda-tabs__aside--right{grid-column:1;padding:0;border:0;text-align:left;min-height:0}.honda-tabs__aside--left{order:1}.honda-tabs__aside--right{order:3}}

/* information architecture columns */
.honda-ia{margin:32px 0 64px}
.honda-ia__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:16px}
.honda-ia__legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:11px;line-height:18px}
.honda-ia__legend i{display:inline-block;width:8px;height:8px;margin-right:6px;border:1px solid var(--hd-line);border-radius:2px;vertical-align:1px}
.honda-ia__legend i[data-kind="new"]{border-color:var(--hd-new-line);background:var(--hd-new)}
.honda-ia__legend i[data-kind="home"]{border-color:var(--hd-home-line);background:var(--hd-home)}
.honda-ia__legend i[data-kind="next"]{border-color:var(--hd-next-line);background:var(--hd-next)}
.honda-ia__legend i[data-kind="repeat"]{border-color:var(--hd-red);background:transparent}
.honda-ia__toggle{margin-left:auto;min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:color .24s var(--ease),border-color .24s var(--ease),background .24s var(--ease)}
.honda-ia__toggle[aria-pressed="true"]{border-color:var(--hd-red);background:color-mix(in srgb,var(--hd-red) 8%,transparent);color:var(--hd-red)}
.honda-ia__frame{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--hd-soft)}
.honda-ia__frame[hidden]{display:none}
.honda-case-study .honda-ia__title{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border);color:var(--text);font-size:11px;font-weight:550;line-height:16px;letter-spacing:.07em;text-transform:uppercase}
.honda-ia__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.honda-ia__col h4{margin:0 0 8px;padding:10px 10px;border-radius:6px;background:var(--hd-head);color:var(--text);font-size:12px;font-weight:550;line-height:16px}
.honda-ia__col h4[data-kind="home"]{background:var(--hd-home);color:var(--hd-home-ink)}
.honda-ia__col ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.honda-ia__chip{display:block;width:100%;padding:7px 9px;border:1px solid var(--hd-line);border-radius:6px;background:var(--hd-chip);color:var(--text);font:inherit;font-size:11.5px;line-height:15px;text-align:left;cursor:default;transition:opacity .26s var(--ease),border-color .26s var(--ease),background .26s var(--ease),transform .26s var(--ease)}
.honda-ia__chip[data-kind="new"]{border-color:var(--hd-new-line);background:var(--hd-new);color:var(--hd-new-ink)}
.honda-ia__chip[data-kind="next"]{border-color:var(--hd-next-line);background:var(--hd-next);color:var(--hd-next-ink)}
.honda-ia__chip[data-child]{margin-left:12px;font-size:11px}
.honda-ia.is-focusing .honda-ia__chip{opacity:.28}
.honda-ia.is-focusing .honda-ia__chip.is-echo{opacity:1;border-color:var(--hd-red);box-shadow:0 0 0 1px var(--hd-red) inset;transform:translateX(2px)}
.honda-ia.is-repeats .honda-ia__chip[data-repeat]{border-color:var(--hd-red);color:var(--hd-red)}
.honda-ia__chip:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.honda-ia__empty{padding:7px 9px;color:var(--muted);font-size:11.5px;line-height:15px;font-style:italic}
.honda-case-study .honda-ia__readout{display:block;min-height:22px;margin-top:12px;color:var(--muted);font-size:12px;line-height:22px}
.honda-ia__readout b{color:var(--text);font-weight:550}
@media (max-width:860px){.honda-ia__grid{grid-auto-flow:column;grid-auto-columns:minmax(178px,1fr);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory}.honda-ia__col{scroll-snap-align:start}}

/* rider spectrum — the bar selects, the note swaps in place (Spectrum's text states) */
.honda-spectrum{margin:32px 0 64px}
.honda-case-study .honda-spectrum__scale{display:flex;justify-content:space-between;margin:0 0 8px;color:var(--muted);font-size:11px;line-height:18px}
.honda-spectrum__bar{display:flex;gap:3px}
.honda-spectrum__bar button{flex:0 0 auto;min-width:124px;padding:14px 12px;border:1px solid var(--border);border-radius:6px;background:var(--raised);font:inherit;text-align:left;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease)}
.honda-spectrum__bar button[data-lead]{flex:1}
.honda-spectrum__bar button[data-slim]{min-width:92px}
.honda-spectrum__bar b{display:block;color:var(--text);font-size:20px;font-weight:550;line-height:26px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.honda-spectrum__bar i{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-style:normal;line-height:18px;transition:color .3s var(--ease)}
.honda-spectrum__bar button[aria-selected="true"]{border-color:var(--hd-ink);background:var(--hd-ink)}
.honda-spectrum__bar button[aria-selected="true"] b{color:var(--bg)}
.honda-spectrum__bar button[aria-selected="true"] i{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.honda-spectrum__bar button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.honda-spectrum__states{display:grid;min-height:48px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.honda-case-study .honda-spectrum__state{grid-area:1/1;margin:0;color:var(--muted);font-size:13px;line-height:22px;opacity:0;visibility:hidden;transform:translateY(8px);filter:blur(4px);transition:opacity .34s var(--ease),transform .34s var(--ease),filter .34s var(--ease),visibility .34s}
.honda-spectrum__state[data-active]{opacity:1;visibility:visible;transform:none;filter:none}
.honda-spectrum__state[data-leaving]{opacity:0;visibility:visible;transform:translateY(-8px);filter:blur(4px)}
.honda-spectrum__state span{color:var(--text);font-weight:550}
@media (max-width:760px){.honda-spectrum__bar{flex-wrap:wrap}.honda-spectrum__bar button,.honda-spectrum__bar button[data-lead]{flex:1 1 44%;min-width:0}.honda-spectrum__states{min-height:70px}}
@media (prefers-reduced-motion:reduce){.honda-case-study .honda-spectrum__state{transition:none;filter:none}}

/* three inputs — a stacked deck that fans out, after Spectrum UI's animated card */
.honda-deck{margin:32px 0 64px}
.honda-deck__stage{position:relative;display:grid;place-items:center;height:330px;cursor:pointer}
.honda-deck__card{position:absolute;display:flex;flex-direction:column;width:248px;min-height:210px;padding:22px 20px 24px;border:1px solid var(--border);border-radius:14px;background:var(--preview);box-shadow:0 10px 26px color-mix(in srgb,var(--text) 8%,transparent);transform:rotate(var(--r0));transition:transform .62s var(--ease),box-shadow .62s var(--ease)}
.honda-deck.is-open .honda-deck__card{transform:translate(var(--x),var(--y)) rotate(var(--r1));box-shadow:0 16px 38px color-mix(in srgb,var(--text) 11%,transparent)}
.honda-deck__icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border:1px solid var(--border);border-radius:9px;background:var(--raised);color:var(--hd-red)}
.honda-deck__icon svg{width:19px;height:19px}
.honda-deck__card h4{margin:0 0 8px;color:var(--text);font-size:15px;font-weight:550;line-height:22px}
.honda-deck__card h4 span{display:block;color:var(--muted);font-size:12px;font-weight:400;line-height:18px}
.honda-case-study .honda-deck__card p{margin:0;color:var(--muted);font-size:12px;line-height:20px}
.honda-deck__toggle{display:block;margin:0 auto;min-height:30px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;transition:color .24s var(--ease),border-color .24s var(--ease)}
.honda-deck__toggle:hover,.honda-deck__toggle:focus-visible{border-color:var(--text);color:var(--text)}
@media (max-width:900px){
.honda-deck__stage{position:static;display:grid;grid-template-columns:1fr;gap:12px;height:auto;cursor:default}
.honda-deck__card{position:static;width:100%;min-height:0;transform:none;box-shadow:none}
.honda-deck.is-open .honda-deck__card{transform:none;box-shadow:none}
.honda-deck__toggle{display:none}
}
@media (prefers-reduced-motion:reduce){.honda-deck__card{transition:none}}

/* tree-test counters */
.honda-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0 24px}
.honda-stat{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--preview)}
.honda-stat span{display:block;margin-bottom:10px;color:var(--muted);font-size:11px;line-height:18px;letter-spacing:.04em;text-transform:uppercase}
.honda-stat strong{display:block;color:var(--text);font-size:30px;font-weight:550;line-height:36px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.honda-case-study .honda-stat em{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-style:normal;line-height:19px}
.honda-stat u{display:block;height:3px;margin-top:12px;border-radius:999px;background:var(--border);text-decoration:none;overflow:hidden}
.honda-stat u i{display:block;height:100%;width:0;border-radius:999px;background:var(--hd-ink);transition:width 1.1s var(--ease)}
.honda-stat[data-tone="up"] u i{background:var(--hd-red)}
@media (max-width:760px){.honda-stats{grid-template-columns:1fr}}

/* task table bars */
.honda-table-wrap td[data-bar]{position:relative}
.honda-table-wrap td[data-bar]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(to right,var(--hd-ink) var(--hd-w,0%),var(--border) var(--hd-w,0%));opacity:.6}

/* three connected problems — accordion (card variant) on a connecting rail */
.honda-chain{position:relative;display:grid;gap:10px;margin:32px 0 64px;padding-left:26px}
.honda-chain::before{content:"";position:absolute;left:5px;top:22px;bottom:22px;width:1px;background:var(--border)}
.honda-chain__item{position:relative;border:1px solid var(--border);border-radius:10px;background:var(--preview);transition:border-color .34s var(--ease),background .34s var(--ease)}
.honda-chain__item[data-active]{border-color:color-mix(in srgb,var(--text) 26%,var(--border))}
.honda-chain__head{display:grid;grid-template-columns:1fr 20px;align-items:start;gap:12px;width:100%;padding:16px 16px 16px 18px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.honda-chain__index{grid-column:1;display:block;margin-bottom:6px;color:var(--muted);font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase}
.honda-chain__claim{grid-column:1;display:block;color:var(--text);font-size:15px;font-weight:550;line-height:23px}
.honda-chain__mark{grid-column:2;position:relative;align-self:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);transition:border-color .3s var(--ease),background .3s var(--ease)}
.honda-chain__mark::before,.honda-chain__mark::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1px;background:var(--muted);transform:translate(-50%,-50%);transition:transform .34s var(--ease),background .34s var(--ease)}
.honda-chain__mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.honda-chain__item[data-active] .honda-chain__mark{border-color:var(--hd-red)}
.honda-chain__item[data-active] .honda-chain__mark::before,.honda-chain__item[data-active] .honda-chain__mark::after{background:var(--hd-red)}
.honda-chain__item[data-active] .honda-chain__mark::after{transform:translate(-50%,-50%) rotate(0deg)}
.honda-chain__item::before{content:"";position:absolute;left:-26px;top:26px;width:11px;height:11px;border:1px solid var(--border);border-radius:50%;background:var(--bg);transition:border-color .3s var(--ease),background .3s var(--ease)}
.honda-chain__item[data-active]::before{border-color:var(--hd-red);background:var(--hd-red)}
.honda-chain__panel{overflow:hidden;height:0;transition:height .42s var(--ease)}
.honda-case-study .honda-chain__panel p{margin:0;padding:0 44px 18px 18px;color:var(--muted);font-size:13px;line-height:22px}
.honda-chain__head:focus-visible{outline:2px solid var(--text);outline-offset:-2px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.honda-chain__panel{transition:none}}

/* 3D tilt cards, after Spectrum UI's tilt card */
.honda-tilts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0 64px;perspective:1000px}
.honda-tilt{position:relative;overflow:hidden;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--preview);transform-style:preserve-3d;transform:rotateX(0) rotateY(0) scale(1);transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.honda-tilt.is-tilting{transition:transform .08s linear,border-color .5s var(--ease),box-shadow .5s var(--ease);border-color:color-mix(in srgb,var(--text) 22%,var(--border));box-shadow:0 14px 34px color-mix(in srgb,var(--text) 10%,transparent)}
.honda-tilt__glare{position:absolute;inset:0;border-radius:12px;opacity:0;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--text) 9%,transparent),transparent 62%);transition:opacity .4s var(--ease);pointer-events:none}
.honda-tilt.is-tilting .honda-tilt__glare{opacity:1}
.honda-tilt__eyebrow{display:block;margin-bottom:14px;color:var(--muted);font-size:11px;line-height:16px;letter-spacing:.05em;text-transform:uppercase}
.honda-tilt h3{margin:0 0 8px;color:var(--text);font-size:14px;font-weight:550;line-height:21px}
.honda-case-study .honda-tilt p{margin:0;color:var(--muted);font-size:12.5px;line-height:20px}
.honda-tilt [data-depth]{transform:translateZ(0);transition:transform .5s var(--ease)}
.honda-tilt.is-tilting [data-depth]{transition:transform .08s linear}
@media (max-width:760px){.honda-tilts{grid-template-columns:1fr;perspective:none}.honda-tilt{transform:none!important}.honda-tilt [data-depth]{transform:none!important}}
@media (prefers-reduced-motion:reduce){.honda-tilt,.honda-tilt [data-depth]{transform:none!important;transition:none}}

/* tree-test chart */
.honda-chart{margin:32px 0 64px;padding:20px;border:1px solid var(--border);border-radius:8px;background:var(--hd-soft)}
.honda-chart__row{display:grid;grid-template-columns:132px minmax(0,1fr) 48px;align-items:center;gap:12px;margin-bottom:10px;color:var(--text);font-size:12.5px;line-height:18px}
.honda-chart__row--minor{color:var(--muted)}
.honda-chart__row u{display:block;height:10px;border-radius:999px;background:var(--border);text-decoration:none;overflow:hidden}
.honda-chart__row u i{display:block;width:0;height:100%;border-radius:999px;background:color-mix(in srgb,var(--hd-ink) 40%,transparent);transition:width 1s var(--ease)}
.honda-chart__row[data-tone="up"] u i{background:var(--hd-ink)}
.honda-chart__row[data-tone="down"] u i{background:var(--hd-red)}
.honda-chart__row b{color:var(--text);font-weight:550;text-align:right;font-variant-numeric:tabular-nums}
.honda-chart__row--minor b{color:var(--muted)}
.honda-chart figcaption{margin-top:16px}
@media (max-width:600px){.honda-chart__row{grid-template-columns:110px minmax(0,1fr) 44px;gap:8px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.honda-chart__row u i{transition:none}}

/* project meta line under a case-study description */
.page-meta{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:20px;letter-spacing:.01em}
.page-meta span{margin:0 6px;opacity:.5}

/* Ayo Indonesia — case-study visual system --------------------------------- */
/* The three research artefacts are drawn the way Honda's IA is: a soft frame, */
/* one column per subject, short chips, and the long copy moved into a hover   */
/* readout. The three decisions use the shared Spectrum animated card deck.    */
/* Only those four step outside the reading column; everything else stays in.  */
.ayo-case-study,.ayo-figure{--ay-line:var(--border);--ay-soft:var(--raised);--ay-card:var(--preview);--ay-radius:14px;--ay-hot:#a8352c;--ay-hot-bg:#fbeeec;--ay-warm:#8f5613;--ay-warm-bg:#fbf2e6;--ay-mid:#7a6112;--ay-mid-bg:#f9f5e5;--ay-cool:#1f6146;--ay-cool-bg:#ecf5f0}
:root[data-theme='dark'] .ayo-case-study,:root[data-theme='dark'] .ayo-figure{--ay-hot:#ef9189;--ay-hot-bg:#2a1b19;--ay-warm:#dda76c;--ay-warm-bg:#282015;--ay-mid:#d3b862;--ay-mid-bg:#252013;--ay-cool:#7ac5a0;--ay-cool-bg:#152420}

.ayo-figure{margin-block:20px 44px}
.ayo-figure>figcaption{max-width:72ch;margin-top:10px;color:var(--muted);font-size:12px;line-height:18px}
.ayo-figure>figcaption strong{color:var(--text);font-weight:500}
.ayo-hero{margin-block:0 8px}
.ayo-hero>video{display:block;width:min(272px,100%);margin:0 auto;border:1px solid var(--ay-line);border-radius:12px;background:var(--ay-soft)}
.ayo-hero>figcaption{margin-inline:auto;text-align:center}
.ayo-aside{color:var(--muted);font-size:12px;line-height:18px}

/* a row of phone screens, each sliced out of its plate and composed here.
   the row never outgrows the column: below about 150px a screen it scrolls */
.ayo-shots__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(148px,1fr);gap:16px;align-items:start;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.ayo-phone{display:grid;gap:9px;margin:0;scroll-snap-align:start}
.ayo-phone img,.ayo-phone video{display:block;width:100%;border-radius:9px}
.ayo-phone span{color:var(--muted);font-size:11px;line-height:16px;text-align:center}

/* Spectrum status badge: a tinted pill with an inset ring */
.ayo-badge{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--ay-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 22%,transparent);color:var(--muted);font-size:11.5px;line-height:18px;white-space:nowrap}
.ayo-badge[data-tone='hot']{background:var(--ay-hot-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ay-hot) 28%,transparent);color:var(--ay-hot)}
.ayo-badge[data-tone='warm']{background:var(--ay-warm-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ay-warm) 28%,transparent);color:var(--ay-warm)}
.ayo-badge[data-tone='mid']{background:var(--ay-mid-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ay-mid) 28%,transparent);color:var(--ay-mid)}
.ayo-badge[data-tone='cool']{background:var(--ay-cool-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ay-cool) 28%,transparent);color:var(--ay-cool)}

/* the behaviour map: two bands across five phases. the bar heights are an
   ordinal reading of the words printed under them, not measured values, so the
   word and the bar always ship together */
.ayo-curve__frame{padding:16px;border:1px solid var(--ay-line);border-radius:10px;background:var(--ay-soft)}
.ayo-curve__key{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px;color:var(--muted);font-size:11px;line-height:18px}
.ayo-curve__key span{display:flex;align-items:center;gap:6px}
.ayo-curve__key span::before{width:9px;height:9px;border-radius:2px;content:""}
.ayo-curve__key span[data-band='charge']::before{background:var(--ay-hot)}
.ayo-curve__key span[data-band='attention']::before{background:var(--ay-cool)}
.ayo-curve__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}
.ayo-curve__col{display:grid;grid-template-rows:auto auto auto;gap:10px;padding:10px 6px 0;border-radius:8px;transition:background .24s var(--ease),opacity .24s var(--ease)}
.ayo-curve__col[data-opening]{background:color-mix(in srgb,var(--ay-cool) 10%,transparent)}
.ayo-curve__col:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.ayo-curve__bar{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:end;gap:5px;min-height:118px}
.ayo-curve__bar i{display:block;width:100%;height:var(--h,10%);min-height:6px;border-radius:5px 5px 0 0;transition:height .42s var(--ease),opacity .24s var(--ease)}
.ayo-curve__bar[data-band='charge'] i{background:color-mix(in srgb,var(--ay-hot) 82%,transparent)}
.ayo-curve__bar[data-band='attention'] i{background:color-mix(in srgb,var(--ay-cool) 82%,transparent)}
.ayo-curve__bar[data-band='attention']{grid-template-rows:auto minmax(0,1fr);align-items:start}
.ayo-curve__bar[data-band='attention'] i{border-radius:0 0 5px 5px;order:2}
.ayo-curve__bar[data-band='attention'] em{order:1}
.ayo-curve__bar em{color:var(--muted);font-size:10px;font-style:normal;line-height:14px;text-align:center}
.ayo-curve__phase{padding-top:8px;border-top:1px solid var(--ay-line);color:var(--text);font-size:11px;line-height:15px;text-align:center}
.ayo-curve__col[data-opening] .ayo-curve__phase{font-weight:550}
.ayo-curve.is-focusing .ayo-curve__col:not([data-active]){opacity:.36}

/* the four wide frames. a `margin` shorthand on one of these would reset the
   negative side margins and push the whole thing right, so use margin-block */
.ayo-wide{width:min(1040px,calc(100vw - 48px));margin-left:calc(50% - min(520px,50vw - 24px));margin-right:calc(50% - min(520px,50vw - 24px))}
@media (max-width:1180px){.ayo-wide{width:100%;margin-left:0;margin-right:0}}

/* column matrix — Honda's IA diagram, reused */
.ayo-matrix{margin:0}
.ayo-matrix__frame{padding:16px;border:1px solid var(--ay-line);border-radius:10px;background:var(--ay-soft)}
.ayo-matrix__title,.prose .ayo-matrix__title{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--ay-line);color:var(--text);font-size:11px;font-weight:550;line-height:16px;letter-spacing:.07em;text-transform:uppercase}
.ayo-matrix__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
.ayo-matrix__col h4{margin:0 0 8px;min-height:36px;padding:10px;border-radius:6px;background:color-mix(in srgb,var(--ay-card) 70%,var(--ay-soft));color:var(--text);font-size:12px;font-weight:550;line-height:16px;transition:opacity .26s var(--ease)}
.ayo-matrix__col[data-tone='hot'] h4{background:var(--ay-hot-bg);color:var(--ay-hot)}
.ayo-matrix__col[data-tone='warm'] h4{background:var(--ay-warm-bg);color:var(--ay-warm)}
.ayo-matrix__col[data-tone='mid'] h4{background:var(--ay-mid-bg);color:var(--ay-mid)}
.ayo-matrix__col[data-tone='cool'] h4{background:var(--ay-cool-bg);color:var(--ay-cool)}
.ayo-matrix__col ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.ayo-matrix__col li{padding:7px 9px;border:1px solid var(--ay-line);border-radius:6px;background:var(--ay-card);color:var(--text);font-size:11.5px;line-height:16px;transition:opacity .26s var(--ease)}
.ayo-matrix__col li b{display:block;margin-bottom:2px;color:var(--muted);font-size:9.5px;font-weight:400;line-height:14px;letter-spacing:.06em;text-transform:uppercase}
/* the row labels are not chips, they name the rows */
.ayo-matrix__col[data-labels] h4{background:transparent}
.ayo-matrix__col[data-labels] li{border-color:transparent;background:transparent;color:var(--muted);font-size:11px}
.ayo-matrix.is-focusing .ayo-matrix__col:not([data-active]) li,
.ayo-matrix.is-focusing .ayo-matrix__col:not([data-active]) h4{opacity:.3}
.ayo-matrix.is-focusing .ayo-matrix__col[data-labels] li,
.ayo-matrix.is-focusing .ayo-matrix__col[data-labels] h4{opacity:1}
.ayo-matrix__readout,.prose .ayo-matrix__readout{display:block;min-height:40px;margin:12px 0 0;color:var(--muted);font-size:12px;line-height:20px}
.ayo-matrix__readout b{color:var(--text);font-weight:550}

/* the three decisions use the shared Spectrum animated card deck */
.ayo-case-study .honda-deck{margin-block:20px 44px}

/* pill tabs reuse the shared tab component; only the stage geometry differs */
.ayo-case-study .honda-tabs{margin-block:20px 44px}
.ayo-case-study .honda-tabs__stage{grid-template-columns:minmax(0,1fr);gap:0;margin-top:18px}
.ayo-case-study .honda-tabs__panels{grid-column:1}
.ayo-case-study .honda-tabs__lede{margin:14px auto 0;max-width:52ch;color:var(--muted);font-size:12.5px;line-height:20px;text-align:center}

@media (max-width:860px){
.ayo-matrix__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ayo-matrix__col[data-labels]{display:none}
}
@media (max-width:520px){
.ayo-matrix__grid{grid-template-columns:minmax(0,1fr)}
.ayo-curve__grid{gap:4px}
.ayo-curve__col{padding:6px 2px 0}
.ayo-curve__bar em,.ayo-curve__phase{font-size:9px;line-height:12px}
}
@media (prefers-reduced-motion:reduce){
.ayo-matrix__col li,.ayo-matrix__col h4,.ayo-curve__col,.ayo-curve__bar i{transition:none}
}

.identity-role{margin:0}

/* Grab — option rows and the handover boards */
.grab-options__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.grab-option{display:grid;gap:9px;margin:0}
.grab-option img{display:block;width:100%;border:1px solid var(--border);border-radius:10px;background:var(--raised)}
.grab-option span{color:var(--muted);font-size:11.5px;line-height:17px;text-align:center}
.grab-option[data-shipped] img{border-color:var(--text)}
.grab-option[data-shipped] span{color:var(--text);font-weight:500}
.grab-option[data-shipped] span i{display:block;margin-top:2px;color:var(--muted);font-style:normal;font-weight:400}
/* one plate for both themes. the theme swap never worked: .case-media img sets
   display:block at a higher specificity, so the hidden one rendered anyway.
   the widening needs .inscra-case-study too, because the Grab article carries
   that class and .inscra-case-study .case-media sets a margin shorthand */
.inscra-case-study figure.grab-chain{width:min(1160px,calc(100vw - 48px));margin-left:calc(50% - min(580px,50vw - 24px));margin-right:calc(50% - min(580px,50vw - 24px))}
@media (max-width:1240px){.inscra-case-study figure.grab-chain{width:100%;margin-left:0;margin-right:0}}
.grab-chain img{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:#fff}
.grab-boards__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.grab-board{display:grid;gap:9px;margin:0}
.grab-board img{display:block;width:100%;border:1px solid var(--border);border-radius:10px;background:var(--raised)}
.grab-board span{color:var(--muted);font-size:11.5px;line-height:17px;text-align:center}
@media (max-width:640px){
.grab-options__row{grid-template-columns:minmax(0,1fr);gap:20px}
.grab-boards__row{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* the role explainer reads out to the right of the label, so the eye never
   has to go up. the panel is centred on the trigger, and both transform
   states carry the centring or is-open would drop it */
.identity-role .role-explainer{top:50%;left:calc(100% + 8px);width:min(40rem,calc(100vw - 4rem));min-height:0;align-items:center;grid-template-columns:120px minmax(0,1fr);transform:translateY(-50%) translateY(5px)}
.identity-role .role-explainer.is-open{transform:translateY(-50%)}
.identity-role .role-explainer-arrow{align-self:center;margin-top:0}
/* The box is drawn 1:1 at 120x42, so the arrowhead is the same 12px barb the
   Wellington arrow uses. Aligned to the TOP of the row rather than centred:
   the row is as tall as the three-line readout, so the head (y=10 of 42) lands
   on the first line and the tail (y=36) falls by the label's baseline. Centring
   it floated the head above the text, pointing at nothing. */
.identity-role .role-explainer-arrow--arc{width:120px;height:auto;align-self:start}
/* Kahl set the three line breaks himself, so the readout keeps them, and the
   box has to clear the longest of the three or they break again underneath */
.identity-role .role-explainer-copy{max-width:32rem;white-space:pre-line}
.identity-role .role-explainer-copy{align-self:center;margin-top:0}
@media (max-width:1100px){
.identity-role .role-explainer{top:auto;left:0;width:min(30rem,calc(100vw - 3rem));grid-template-columns:minmax(0,1fr);transform:translateY(5px)}
.identity-role .role-explainer.is-open{transform:none}
.identity-role .role-explainer-arrow{display:none}
}

/* Asuransi Astra ----------------------------------------------------------- */
/* Nothing on this page steps outside the reading column. The one exception goes
   the other way: a single 1:1 phone at the full column width is 692px of one
   screen, so it comes back in and centres. */
.inscra-case-study .case-media.astra-narrow{width:min(460px,100%);margin-left:auto;margin-right:auto}

/* half a plate above the other half. four screens across the column is 173px a
   screen, which cannot be read, so these two split down their own gutter */
.astra-rows{display:grid;gap:12px;margin-block:32px 64px}
.inscra-case-study .astra-rows figcaption{margin-top:0}

/* the same screen empty and filled, at a matching aspect so the pair reads as
   one comparison rather than two figures that happen to be next to each other */
.astra-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-block:32px 64px}
.inscra-case-study .astra-pair .case-media{margin:0}
@media (max-width:720px){.astra-pair{grid-template-columns:minmax(0,1fr)}}

/* the four pieces of groundwork, drawn the way Sixty Two draws them on their
   own project page: their four marks on a filled disc with a hairline ring
   offset behind it, then the title and one line under each */
.astra-strategy{--as-blue:#0d60ae;margin-block:32px 60px}
.prose .astra-strategy__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 32px;margin:0;padding:0;list-style:none}
.astra-strategy__step{display:grid;justify-items:start;gap:0}
.astra-strategy__icon{position:relative;display:grid;place-items:center;width:54px;height:54px;margin-bottom:22px;border-radius:50%;background:var(--as-blue)}
.astra-strategy__icon::before{position:absolute;inset:-7px 7px 7px -7px;border:1px solid color-mix(in srgb,var(--text) 34%,transparent);border-radius:50%;content:""}
.astra-strategy__icon img{width:32px;height:32px}
.prose .astra-strategy__step h4{margin:0 0 12px;color:var(--text);font-size:14px;font-weight:550;line-height:21px}
.prose .astra-strategy__step p{margin:0;color:var(--muted);font-size:13px;line-height:22px}
@media (max-width:460px){.prose .astra-strategy__grid{grid-template-columns:minmax(0,1fr)}}

/* what home is responsible for, carrying the app's own label for each one */
.prose .astra-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 8px;padding:0;list-style:none}
.astra-surfaces li{padding:14px 16px 16px;border:1px solid var(--border);border-radius:10px;background:var(--preview)}
.astra-surfaces b{display:block;color:var(--text);font-size:13px;font-weight:550;line-height:19px}
.astra-surfaces i{display:block;margin:2px 0 8px;color:var(--muted);font-size:11px;font-style:normal;line-height:16px;letter-spacing:.04em}
.prose .astra-surfaces p{margin:0;color:var(--muted);font-size:12px;line-height:19px}
@media (max-width:560px){.prose .astra-surfaces{grid-template-columns:minmax(0,1fr)}}

/* the tab bar and the policy tabs, written out so the words can be read */
.prose .astra-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.astra-chips li{padding:3px 12px;border:1px solid var(--border);border-radius:999px;background:var(--preview);color:var(--muted);font-size:12px;line-height:20px}
.astra-chips li[data-primary]{border-color:transparent;background:var(--text);color:var(--bg)}

/* the recognitions run on black in both themes on purpose: one of the two
   marks is white on transparent, so a light plate would leave it invisible */
.astra-awards{margin-block:28px 56px;padding:30px 28px 32px;border:1px solid #1f1f1f;border-radius:12px;background:#000}
.prose p.astra-awards__title{margin:0 0 22px;color:#fff;font-size:15px;font-weight:550;line-height:22px}
.astra-awards__title sup{color:rgba(255,255,255,.55);font-size:11px}
.prose .astra-awards__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin:0;padding:0;list-style:none}
.astra-award{display:grid;align-content:start;gap:10px}
.prose .astra-award p{max-width:46ch;margin:0;color:rgba(255,255,255,.66);font-size:13px;line-height:21px}
.astra-award h4 a{color:inherit;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.astra-award h4 a:hover,.astra-award h4 a:focus-visible{text-decoration-color:#fff}
.astra-award span{color:rgba(255,255,255,.55);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.prose .astra-award h4{margin:0;color:#fff;font-size:17px;font-weight:500;line-height:25px}
.astra-award img{width:auto;max-width:180px;height:26px;margin-top:10px;object-fit:contain;object-position:left center}
.astra-award em{color:rgba(255,255,255,.55);font-size:12px;font-style:normal;line-height:18px}
@media (max-width:560px){.prose .astra-awards__grid{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Responsive website projects share one laptop and phone thumbnail. */
.project-preview--ayana,.project-preview--maybank{background:#eeece6;container-type:inline-size}
.project-device-laptop{position:absolute;left:13%;top:8%;width:60%;padding:1.5% 1% 1%;border:1px solid #696969;border-radius:2cqw 2cqw .5cqw .5cqw;background:#252525;box-shadow:inset 0 0 0 1px #111}
.project-device-laptop::before{position:absolute;top:.6cqw;left:50%;width:.5cqw;height:.5cqw;border-radius:50%;background:#555;content:""}
.project-device-screen{display:block;overflow:hidden;aspect-ratio:1440/1000;border-radius:.5cqw;background:#fff}
.project-device-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.project-preview--maybank .project-device-screen{aspect-ratio:1440/900}
.project-device-base{position:absolute;top:100%;left:-4%;width:108%;height:1.4cqw;border-radius:0 0 50% 50%/0 0 80% 80%;background:linear-gradient(#b5b5b5,#777)}
.project-device-base::after{display:block;width:16%;height:.5cqw;margin:auto;border-radius:0 0 1cqw 1cqw;background:#666;content:""}
.project-device-phone{position:absolute;right:13%;bottom:8%;width:17%;padding:.6%;overflow:hidden;border:1px solid #717171;border-radius:3.4cqw;background:#191919;box-shadow:inset 0 0 0 1px #343434}
.project-device-phone img{display:block;width:100%;height:auto;border-radius:2.7cqw}