/* Keep product pixels clear until the browser actually delivers a frame. */
.media-player>.video-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;z-index:1;opacity:1;visibility:visible;margin:0;border-radius:0;background:inherit}
.media-player:not(.has-frame)>.motion-video{opacity:0}
.media-player.has-frame>.video-poster{opacity:0;visibility:hidden}
.motion-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.motion-video:not(:fullscreen)::-webkit-media-controls{display:none!important}
.device-embedded.device-slab .video-poster{inset:auto;left:-5.556%;top:-9.85%;width:111.111%!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0!important}
.device-phone-native .video-poster{inset:auto;top:0;left:0;width:402%!important;max-width:none!important;margin-left:-151%;margin-top:-5.5%;height:auto!important}
.project-preview-wrap{position:relative}
.preview-start{position:relative;margin:6px 0 0 auto;width:max-content;z-index:6;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 15px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:24px;font:inherit;font-size:13px;line-height:1.4;box-shadow:0 3px 16px #0000000b;cursor:pointer;transition:background .2s,transform .2s}
.preview-start[hidden]{display:none}
.preview-start svg{width:13px;height:13px;flex:none}
.preview-start:hover{background:var(--control-hover)}
.preview-start:active{transform:scale(.97)}
.preview-start:focus-visible{outline:2px solid var(--project);outline-offset:4px}
/* One consistent phone silhouette, retaining each recording's full content. */
.project-visual.visual-linkedin{align-items:center}
.project-visual.visual-linkedin .device-phone{aspect-ratio:9/20;display:flex;flex-direction:column;overflow:hidden;background:#fff;transform:none}
.project-visual.visual-linkedin .phone-status{flex:none}
.project-visual.visual-linkedin .device-phone .device-screen{flex:1;min-height:0;aspect-ratio:auto;background:#fff}
.project-visual.visual-linkedin .device-phone .media-player{height:100%!important;background:#fff}
.project-visual.visual-linkedin .device-phone:not(.device-phone-native) video{height:100%!important;object-fit:contain!important}
.project-visual.visual-linkedin .device-phone-native .device-screen{border-radius:21px}
.project-visual.visual-linkedin .device-phone-native video,.project-visual.visual-linkedin .device-phone-native .video-poster{position:absolute;top:0;left:0;margin-left:-151%;margin-top:-5.5%;height:auto!important}
/* The contour field is one continuous surface behind the opening and navigation. */
.home{--opening-header:86px;--opening-space:64px}
.home .site-header:not(.scrolled){background:transparent;box-shadow:none}
.home .signature-intro{margin-top:calc(-1 * var(--opening-header));padding-top:calc(var(--opening-space) + var(--opening-header));min-height:calc(650px + var(--opening-header))}
@media(min-width:1600px){.home{--opening-space:82px}.home .signature-intro{min-height:calc(710px + var(--opening-header))}}
@media(max-width:1100px) and (min-width:761px){.home .signature-intro{min-height:calc(590px + var(--opening-header))}}
@media(max-width:760px){
 .home{--opening-header:72px;--opening-space:40px}
 .home .signature-intro{min-height:0}
 .preview-start{font-size:12px;padding-inline:13px}
 .project-visual.visual-linkedin .device-phone{width:32%;min-width:90px;max-width:155px}
}
@media(prefers-reduced-motion:reduce){.preview-start{transition:none}}

/* Both LinkedIn previews are pixel-cropped from matching native recordings. */
.project-visual.visual-linkedin .device-phone-clean{display:block;aspect-ratio:auto;border-radius:15% / 7%;background:#151817}
.project-visual.visual-linkedin .device-phone-clean .device-screen{aspect-ratio:788/1716;border-radius:14% / 6.43%;background:#fff;overflow:hidden}
.project-visual.visual-linkedin .device-phone-clean .media-player{height:100%!important;position:relative}
.project-visual.visual-linkedin .device-phone-clean video,.project-visual.visual-linkedin .device-phone-clean .video-poster{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;margin:0!important;object-fit:fill!important;aspect-ratio:788/1716}

/* Let the opening texture dissolve into the page rather than end at a rule. */
.home .signature-intro{border-bottom:0}
.home .signature-intro::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--paper));pointer-events:none;z-index:0}
.home .hero-scroll-note{z-index:2}
/* Fit the frame to the image itself, not the wide gallery stage. */
.gallery-media .phone-still{display:block;height:100%;width:auto;aspect-ratio:var(--phone-ratio);flex:none;max-width:100%;border:4px solid #191d23;border-radius:15% / 7%;overflow:hidden;background:#191d23;box-shadow:0 0 0 1px #69706e,0 18px 30px -22px #0009}
.gallery-media .phone-still img{display:block;width:100%!important;height:100%!important;object-fit:contain;border-radius:0}
.gallery-tab .phone-still{display:contents}
.case-page .case-main .takeaway{padding:clamp(24px,4vw,48px);border:0;border-radius:16px;margin-top:32px}
.case-page .case-main .takeaway .eyebrow{display:block;margin:0 0 18px;line-height:1.5}
.case-page .case-main .takeaway p{margin:0;font-size:clamp(19px,2vw,26px);line-height:1.55}
/* A quiet change of atmosphere marks each chapter of the story. */
.case-page{--chapter-color:var(--project)}
.case-page[data-chapter-tone="1"]{--chapter-color:#7d79bd}
.case-page[data-chapter-tone="2"]{--chapter-color:#52958b}
.case-page .case-body{background:transparent;position:relative;isolation:isolate}
.case-page .gallery-media{background:color-mix(in srgb,var(--project) 6%,var(--paper))!important;transition:background-color 1.2s ease}
@media(prefers-reduced-motion:reduce){.case-page .case-body,.case-page .gallery-media{transition:none}}

/* One seamless header system: clear at the opening, frosted on scroll. */
body .site-header,body .site-header.scrolled,html[data-theme=dark] body .site-header{background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(28px) saturate(135%);backdrop-filter:blur(28px) saturate(135%);box-shadow:none;border-color:transparent}
.home .site-header:not(.scrolled){background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.case-page .case-sidebar{background:transparent!important;border-top:0;padding-top:12px}
.case-page .case-navigation a{border-radius:0 8px 8px 0}
.case-page .case-navigation a.active{background:color-mix(in srgb,var(--project) 7%,transparent)}
.case-page .case-navigation a:hover{background:color-mix(in srgb,var(--project) 5%,transparent)}
/* Full-bleed, feathered light at the margins, leaving the reading column calm. */
.case-page{overflow-x:clip}
.case-page .case-body::before,.case-page .case-body::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);transition:opacity 1.3s ease}
.case-page .case-body::before{background:radial-gradient(ellipse at 0% 20%,color-mix(in srgb,var(--project) 10%,transparent),transparent 55%),radial-gradient(ellipse at 100% 78%,color-mix(in srgb,var(--project) 7%,transparent),transparent 50%);opacity:.85}
.case-page .case-body::after{background:radial-gradient(ellipse at 100% 35%,color-mix(in srgb,#8586bf 9%,transparent),transparent 55%),radial-gradient(ellipse at 0% 75%,color-mix(in srgb,#52958b 8%,transparent),transparent 55%);opacity:0}
.case-page[data-chapter-tone="1"] .case-body::before{opacity:.25}
.case-page[data-chapter-tone="1"] .case-body::after{opacity:1}
.case-page[data-chapter-tone="2"] .case-body::before{opacity:.5}
.case-page[data-chapter-tone="2"] .case-body::after{opacity:.6}
@media(max-width:760px){.case-page .case-compass{border-bottom:0;box-shadow:none;background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(28px) saturate(135%);backdrop-filter:blur(28px) saturate(135%)}}
@media(prefers-reduced-motion:reduce){.case-page .case-body::before,.case-page .case-body::after{transition:none}}

/* Full-width surfaces, with the content grid retained inside them. */
body .site-header{max-width:none;width:100%;margin-inline:0}
@media(min-width:761px){body .site-header{padding-inline:max(var(--gutter),calc((100% - 1440px)/2))}}
.home{overflow-x:clip}
.home .selected-work::before{left:calc(50% - 50vw);right:calc(50% - 50vw)}

/* The project color begins behind the navigation, forming one opening surface. */
.case-page{--case-header-height:86px}
.case-page .case-arrival::before{top:calc(-1 * var(--case-header-height));left:calc(50% - 50vw);right:calc(50% - 50vw)}
/* Play shares the seamless opening; its frosted header keeps the page tint. */
.lab-page{--play-header-surface:#f3edff}
html[data-theme=dark] .lab-page{--play-header-surface:#251d34}
html .lab-page .site-header,html[data-theme=dark] .lab-page .site-header{background:color-mix(in srgb,var(--play-header-surface) 82%,transparent);box-shadow:none;border-color:transparent}
html body .site-header:not(.scrolled),html[data-theme=dark] body .site-header:not(.scrolled){background:transparent;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:760px){.case-page{--case-header-height:72px}}

.about-resume{display:inline-flex;align-items:center;gap:18px;min-height:44px;margin-top:18px}
.hero-actions .primary-link .ui-icon{animation:explore-nudge 3.8s ease-in-out 1.2s infinite}
@keyframes explore-nudge{0%,65%,100%{transform:translateY(0)}78%{transform:translateY(4px)}90%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-actions .primary-link .ui-icon{animation:none}}

/* Follow the thread: useful orientation and deliberate, quiet feedback. */
.case-shortcuts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:18px 0 0}
.case-shortcuts a{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:14px;font-weight:500;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--project) 32%,transparent);transition:color .2s,border-color .2s}
.case-shortcuts a span{transition:transform .3s var(--ease)}
.case-shortcuts a:hover{color:var(--project);border-color:var(--project)}
.case-shortcuts a:hover span{transform:translateY(3px)}
.chapter-identity{display:grid;gap:4px;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.chapter-identity>span{font-size:12px;color:var(--muted)}
.chapter-identity>a{display:flex;justify-content:space-between;align-items:center;min-height:30px;font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.chapter-identity>a span{font-size:17px;font-weight:400;color:var(--muted)}
.case-sidebar .case-navigation a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--project);transform:scaleY(0);transform-origin:top}
.case-sidebar .case-navigation a.active{border-left-color:color-mix(in srgb,var(--project) 22%,var(--line))}
.case-sidebar .case-navigation a.active::before{transform:scaleY(var(--section-progress,0))}
.chapter-back{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:13px;color:var(--muted);transition:color .2s}
.chapter-back:hover{color:var(--project)}
.gallery-heading{scroll-margin-top:108px}
.gallery-tab .thumb-image{transition:border-color .25s,box-shadow .25s,transform .25s}
.gallery-tab:active .thumb-image{transform:scale(.98)}
.gallery-controls button:active{transform:scale(.94)}
.gallery-tab:focus-visible{outline:2px solid var(--project);outline-offset:5px;border-radius:6px}
.career-work{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:12px;font-size:14px;color:var(--ink);font-weight:500}
.career-work span{transition:transform .3s var(--ease)}
.career-work:hover span{transform:translate(2px,-2px)}
.personal-route{gap:10px;flex-wrap:nowrap}
.personal-route>span:not(.route-thread){flex:none}
.personal-route small{font-size:12px}
.personal-route .route-thread{min-width:8px}
@media(hover:hover){.gallery-tab:not([aria-selected=true]):hover .thumb-image{border-color:var(--project);box-shadow:0 3px 12px #0000000b}.career-section article{transition:background .4s}.career-section article:has(.career-work:hover){background:color-mix(in srgb,var(--accent) 3%,transparent)}}
@media(max-width:760px){.gallery-heading{scroll-margin-top:84px}.case-shortcuts{gap:8px 22px;margin-top:14px}.case-shortcuts a{font-size:13px}.personal-route{font-size:13px;gap:7px}.personal-route small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.case-shortcuts a span,.gallery-tab .thumb-image,.career-work span,.career-section article{transition:none}}

@media(min-width:761px){.case-page .case-sidebar{max-height:calc(100svh - 128px);overflow-y:auto;scrollbar-width:thin;padding-right:4px}}

/* Lead with the work, the judgment, and what changed. */
.home .signature-intro{min-height:0;padding-bottom:70px}
.signature-intro .hero-name{animation:none}
.signature-intro .hero-credentials p:last-child{margin:0}
.work-section-heading{align-items:baseline;padding-bottom:12px}
.work-jump{display:flex;align-items:center;gap:28px}
.work-jump a{position:relative;display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;transition:color .25s}
.work-jump a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--motion-ease)}
.work-jump a:hover,.work-jump a[aria-current=location]{color:var(--ink)}
.work-jump a:hover::after,.work-jump a[aria-current=location]::after{transform:scaleX(1)}
.work-jump a:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
.project-card .project-discipline{font-size:13px;line-height:1.5;margin:7px 0 0;color:var(--muted)}
.project-card .project-heading h2{margin:22px 0 16px;text-wrap:balance}
.project-card .project-tease{margin-bottom:0;max-width:44ch}
.project-result{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px;margin:25px 0 0;padding-top:20px}
.project-result::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:color-mix(in srgb,var(--project) 28%,var(--line));transform-origin:left;transition:transform .9s .22s var(--motion-ease)}
.project-result>strong{font-size:clamp(27px,2.6vw,37px);letter-spacing:-.05em;font-weight:500;line-height:1.16;white-space:nowrap;color:var(--project)}
.project-result>strong>span{display:inline-block;font-size:.8em;margin-inline:1px}
.project-result>div{display:grid;gap:4px;max-width:230px}
.project-result>div>span{font-size:14px;line-height:1.5;color:var(--ink)}
.project-result small{font-size:12px;line-height:1.5;color:var(--muted)}
.project-card .project-affordance{margin-top:22px}
.motion-capable .project-card:not(.is-visible) .project-result::before{transform:scaleX(0)}
.motion-capable .project-card:not(.is-visible) .project-result>strong{opacity:0;transform:translateY(8px)}
.project-result>strong{transition:opacity .6s .22s,transform .8s .22s var(--motion-ease)}
.project-card:focus-within .project-result>strong{opacity:1!important;transform:none!important}
.solution-overview-heading h2{text-wrap:balance}
.solution-preview figcaption strong{max-width:27ch;line-height:1.3;font-size:clamp(21px,2vw,27px);letter-spacing:-.035em}
.solution-preview figcaption p{font-size:16px;line-height:1.7;max-width:49ch}
.case-page .chapter-note{position:relative;isolation:isolate;padding:clamp(24px,3.6vw,42px);border:0;border-radius:14px;background:linear-gradient(120deg,color-mix(in srgb,var(--project) 9%,var(--paper)),color-mix(in srgb,var(--project) 3%,var(--paper)));overflow:hidden}
.case-page .chapter-note::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--project);transform-origin:top;transition:transform 1s .15s var(--motion-ease)}
.case-page .chapter-note>span{font-size:12px;letter-spacing:.06em;margin-bottom:16px;color:var(--project)}
.case-page .chapter-note p{font-size:clamp(22px,2.3vw,31px);line-height:1.45;max-width:31ch;text-wrap:pretty;margin:0}
.motion-capable .chapter-note:not(.is-visible)::before{transform:scaleY(0)}
.case-main .metrics{border-top:0;gap:28px;margin:34px 0 38px}
.case-main .metrics>div{position:relative;border-top:0;padding-top:22px;min-width:0}
.case-main .metrics>div::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--project),color-mix(in srgb,var(--project) 12%,transparent));transform-origin:left;transition:transform .9s var(--motion-ease);transition-delay:var(--metric-delay,0ms)}
.case-main .metrics>div:nth-child(2){--metric-delay:100ms}.case-main .metrics>div:nth-child(3){--metric-delay:200ms}
.motion-capable .metrics:not(.is-visible)>div::before{transform:scaleX(0)}
.case-main .metrics strong{font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-.05em;color:var(--project)}
.case-main .metrics span{font-size:14px;line-height:1.65}
.footer-top>a{position:relative}
.footer-top .footer-address{display:block;font-size:15px;line-height:1.6;letter-spacing:0;color:var(--muted);margin-top:26px}
.footer-top>a:hover .footer-address{color:var(--ink)}
@media(min-width:761px){
 .home{--opening-space:52px}
 .signature-intro h1{font-size:clamp(66px,7.1vw,108px);line-height:1.08;margin:31px 0 34px}
 .signature-intro .hero-foot{align-items:center}
 .project-card{padding-block:48px}
}
@media(max-width:1050px) and (min-width:761px){.project-result{grid-template-columns:1fr;gap:10px}.project-result>div{max-width:none}.work-jump{gap:22px}.project-card{gap:36px}}
@media(max-width:760px){
 .home .signature-intro{padding-bottom:66px}
 .work-section-heading{display:block;padding:24px 0 10px}
 .work-jump{justify-content:space-between;gap:16px;margin-top:10px;max-width:390px}
 .work-jump a{font-size:14px;min-height:44px}
 .project-card .project-discipline{font-size:13px;margin-top:5px}
 .project-card .project-heading h2{margin-top:18px}
 .project-result{gap:18px;margin-top:22px;padding-top:19px}
 .project-result>strong{font-size:29px}
 .card-netflix .project-result{grid-template-columns:1fr;gap:10px}
 .card-netflix .project-result>div{max-width:none}
 .project-result>div>span{font-size:14px}
 .project-result small{font-size:12px}
 .case-main .metrics{gap:0}
 .case-main .metrics>div{padding:23px 0;align-items:center;gap:24px}
 .case-main .metrics strong{font-size:31px;min-width:118px;max-width:42%;overflow-wrap:normal;flex-shrink:0}
 .case-main .metrics span{font-size:14px}
 .solution-preview figcaption p{font-size:16px}
 .footer-top .footer-address{font-size:14px;margin-top:22px}
}
@media(max-width:380px){.project-result{grid-template-columns:1fr;gap:10px}.project-result>div{max-width:none}.project-result small{display:block}.case-main .metrics>div{gap:17px}.case-main .metrics strong{min-width:104px;font-size:28px}}
@media(prefers-reduced-motion:reduce){
 .project-result>strong,.work-jump a::after,.case-page .chapter-note::before,.case-main .metrics>div::before{transition:none}
 .motion-capable .project-card:not(.is-visible) .project-result>strong{opacity:1;transform:none}
 .motion-capable .project-card:not(.is-visible) .project-result::before,.motion-capable .chapter-note:not(.is-visible)::before,.motion-capable .metrics:not(.is-visible)>div::before{transform:none}
}

/* Let the type breathe: ascenders and descenders are never masked. */
.hero-line{overflow:visible;padding-bottom:0;margin-bottom:0}
.signature-intro .hero-line>span{animation:headline-arrive .85s var(--motion-ease) .08s both}
.signature-intro .hero-line:nth-child(2)>span{animation-delay:.18s}
@keyframes headline-arrive{from{opacity:0;transform:translateY(.18em)}to{opacity:1;transform:none}}
/* Selecting an artifact changes the artifact, never the reader's position. */
.artifact-gallery{overflow-anchor:none}
/* A personal route, told in three places. */
.personal-section{position:relative;isolation:isolate;--place-color:#b96945;overflow:visible;transition:none}
.personal-section[data-place=toronto]{--place-color:#588cad}
.personal-section[data-place=bay]{--place-color:#658a74}
.personal-section::before{content:"";position:absolute;inset:0 calc(50% - 50vw);pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 12% 55%,color-mix(in srgb,var(--place-color) 10%,transparent),transparent 65%);opacity:1;transition:background 1s}
@property --place-color{syntax:'<color>';inherits:true;initial-value:#b96945}
.personal-section{transition:--place-color 900ms ease}
.personal-section .personal-photo{width:100%;max-width:330px}
.personal-section .personal-photo>img{border-radius:14px}
.personal-journey{margin-top:24px}
.journey-label{display:block;color:var(--muted);font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
.personal-journey .personal-route{align-items:center;gap:9px;margin-top:0}
.personal-route [role=tab]{position:relative;flex:none;min-height:62px;padding:12px 0 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);text-align:left;font:500 14px/1.4 Manrope,sans-serif;cursor:pointer;transition:color .2s,border-color .3s}
.personal-route [role=tab]:last-child{text-align:right}
.personal-route [role=tab] small{font-size:12px;font-weight:400;color:var(--muted);margin-top:4px}
.personal-route [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--place-color)}
.personal-route [role=tab]:hover{color:var(--ink)}
.personal-route [role=tab]:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:2px}
.personal-journey .route-thread{min-width:7px;margin-top:0;opacity:.6}
.personal-journey .route-thread::before,.personal-journey .route-thread::after{display:none}
.personal-journey .route-thread i{background:var(--place-color)}
.place-stories{padding-top:17px;min-height:115px}
.place-stories p{font-size:14px;line-height:1.65;margin:0;color:var(--muted);text-wrap:pretty}
.place-stories [role=tabpanel]:not([hidden]){animation:place-arrive .35s ease both}
@keyframes place-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .personal-section .personal-photo{max-width:360px}
 .personal-journey{margin-top:20px}
 .place-stories{min-height:106px}
 .personal-section{gap:20px}
}
@media(prefers-reduced-motion:reduce){
 .signature-intro .hero-line>span{animation:none!important;opacity:1;transform:none}
 .personal-section,.personal-section::before,.personal-route [role=tab]{transition:none}
 .place-stories [role=tabpanel]:not([hidden]){animation:none}
}

/* Keep secondary links within reach while the main mobile routes stay visible. */
.mobile-more{display:none}
@media(max-width:760px){
 body .site-header,body .site-header.scrolled{gap:10px;padding-inline:18px}
 .site-header .identity{width:34px;flex:none}
 .site-header nav{flex:1;justify-content:center;gap:clamp(10px,3vw,20px)}
 .site-header .header-actions{gap:4px;flex:none}
 .header-actions>.contact-link,.header-actions>.resume-link{display:none}
 .site-header .theme-toggle{width:44px;height:44px;flex:none}
 .mobile-more{display:block;position:relative}
 .mobile-more>summary{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--line-strong);border-radius:24px;font-size:14px;font-weight:500;list-style:none;cursor:pointer;user-select:none;transition:background .2s,color .2s}
 .mobile-more>summary::-webkit-details-marker{display:none}
 .mobile-more>summary:hover{background:var(--control-hover)}
 .mobile-more[open]>summary{background:var(--ink);color:var(--paper);border-color:transparent}
 .mobile-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
 .mobile-more-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:50;width:272px;max-width:calc(100vw - 24px);padding:8px;border-radius:20px;background:color-mix(in srgb,var(--paper) 96%,transparent);color:var(--ink);box-shadow:0 12px 42px -12px #0003,0 2px 8px #0000000a;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);transform-origin:top right}
 .mobile-more[open] .mobile-more-panel{animation:mobile-more-in .18s var(--ease) both}
 .mobile-more-panel>a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;padding:14px 16px;border-radius:13px;transition:background .2s}
 .mobile-more-panel>a:hover,.mobile-more-panel>a:focus-visible{background:var(--control-hover)}
 .mobile-more-panel>a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
 .mobile-more-panel>a>span{display:grid;gap:3px}
 .mobile-more-panel strong{font-size:16px;font-weight:500;line-height:1.4}
 .mobile-more-panel small{font-size:12px;line-height:1.5;color:var(--muted)}
 .mobile-more-panel .ui-icon{width:20px;height:20px;flex:none}
}
@media(max-width:360px){body .site-header,body .site-header.scrolled{padding-inline:12px;gap:8px}.site-header nav{gap:10px}}
@keyframes mobile-more-in{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mobile-more[open] .mobile-more-panel{animation:none}.mobile-more>summary,.mobile-more-panel>a{transition:none}}

/* Authentic brand marks, balanced optically rather than stretched to one size. */
.home .project-company{align-items:center;min-height:34px;gap:20px}
.home .company-logo{display:block;flex:none;width:auto;object-fit:contain;object-position:left center}
.home .company-logo-netflix{height:25px}
.home .company-logo-google{height:28px}
.home .company-logo-linkedin{height:25px}
.home .company-logo-apple{height:30px}
html[data-theme=dark] .home .company-logo-linkedin{filter:brightness(0) invert(1)}
html[data-theme=dark] .home .company-logo-apple{filter:invert(1)}
@media(max-width:760px){.home .project-company{min-height:32px}.home .company-logo-netflix{height:23px}.home .company-logo-google{height:26px}.home .company-logo-linkedin{height:23px}.home .company-logo-apple{height:28px}}

.home .company-apple-lockup{display:inline-flex;align-items:center;gap:9px;flex:none;font-size:25px;font-weight:600;line-height:1.2;letter-spacing:-.04em;color:var(--ink)}
@media(max-width:760px){.home .company-apple-lockup{font-size:23px;gap:8px}}

/* Remove the recorded presentation canvas, preserving the complete Mandala UI. */
.case-google .device-screen:has(.mandala-cropped){background:#02080d;overflow:hidden}
.case-google .device-screen .media-player.mandala-cropped{position:relative;width:100%;height:auto!important;aspect-ratio:var(--crop-ratio)!important;overflow:hidden;background:#02080d}
.case-google .device-screen .mandala-cropped>.motion-video,.case-google .mandala-cropped>.video-poster{position:absolute!important;inset:auto!important;left:var(--crop-x)!important;top:var(--crop-y)!important;width:var(--crop-w)!important;height:var(--crop-h)!important;max-width:none!important;max-height:none!important;object-fit:fill!important;margin:0!important}

/* Clip the source's rounded device edge, not just the presentation card. */
.case-google .device-screen:has(.mandala-cropped){border-radius:3% / 4.5%}
.case-google .mandala-cropped{border-radius:3% / 4.5%;isolation:isolate}
.case-page .gallery-media>.zoom-image img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;border-radius:12px;clip-path:inset(0 round 12px)}
.case-google .zoom-image img[src*="mandala-why-this"],.case-google .thumb-image img[src*="mandala-why-this"]{clip-path:inset(.8% .6% round 3% / 4.5%)}
.case-page .thumb-image img{border-radius:10px}
.case-google .thumb-image:has(img[src*="mandala-prototype-"]){overflow:hidden}
.case-google .thumb-image img[src*="mandala-prototype-"]{padding:0!important;clip-path:inset(2.2% 1.45% round 3% / 4.5%)}

/* A media crop belongs to the asset, not its surrounding presentation stage. */
.case-page .asset-device{display:block!important;flex:none;width:100%!important;height:auto!important;max-height:none!important;background:#151817;border:6px solid #151817;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px #69706e55,0 18px 35px -25px #0008}
.case-page .asset-device .device-screen{width:100%;aspect-ratio:auto!important;border-radius:12px;background:#151817;overflow:hidden}
.case-page .asset-device .media-player.asset-cropped{position:relative;width:100%;height:auto!important;aspect-ratio:var(--crop-ratio)!important;overflow:hidden;border-radius:var(--frame-radius,12px);background:#151817}
.case-page .asset-device .asset-cropped>.motion-video,.case-page .asset-device .asset-cropped>.video-poster,.gallery-tab .asset-thumb>img{position:absolute!important;inset:auto!important;left:var(--crop-x)!important;top:var(--crop-y)!important;width:var(--crop-w)!important;height:var(--crop-h)!important;max-width:none!important;max-height:none!important;object-fit:fill!important;margin:0!important;padding:0!important;aspect-ratio:auto!important;border-radius:0!important;clip-path:none!important}
.case-page .asset-device.asset-phone{width:clamp(120px,26%,260px)!important;border-radius:15% / 7%;border-width:5px}
.case-page .asset-phone .device-screen{border-radius:14% / 6.5%}
.case-page .solution-media .asset-phone{width:clamp(130px,35%,230px)!important}
.case-page .gallery-media:has(.asset-device){padding:clamp(12px,2vw,26px)!important}
.case-page .gallery-media .phone-still img{width:100%!important;height:100%!important;border-radius:0;clip-path:none}
.gallery-tab .thumb-image:has(.asset-thumb){display:flex;align-items:center;justify-content:center}
.gallery-tab .asset-thumb{flex:none;position:relative;display:block;height:90%;width:auto;max-width:96%;aspect-ratio:var(--crop-ratio);overflow:hidden;border-radius:var(--frame-radius,8px);background:#151817}
.case-page .device-phone-ready .device-screen{border-radius:14% / 6.5%;overflow:hidden}
.case-page .device-native .device-screen{border-radius:12px;overflow:hidden}
/* Portrait media needs room for the whole phone, especially on narrow screens. */
.case-page .gallery-media:has(.asset-phone),.case-page .solution-media:has(.asset-phone){height:clamp(340px,48vw,600px)!important;aspect-ratio:auto!important;min-height:0!important;padding:24px!important;display:flex;align-items:center;justify-content:center}
.case-page .gallery-media .asset-phone,.case-page .solution-media .asset-phone{width:min(250px,calc((clamp(340px,48vw,600px) - 60px) * .45))!important}