/* One visual rhythm: a quiet opening, framed work, and a paced story. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--frame:#151817}
.signature-intro{padding:64px var(--gutter) 78px;min-height:650px;position:relative;overflow:clip;background:radial-gradient(ellipse at 82% 38%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 62%)}
.signature-intro .hero-content{display:block;max-width:1280px;margin:auto;position:relative;z-index:1}
.signature-intro .hero-name{display:flex;align-items:center;gap:22px;font-size:25px}
.signature-intro .hero-name>span{font-size:12px;letter-spacing:.07em;border-left:1px solid var(--line-strong);padding-left:22px;margin:0}
.signature-intro h1{font-size:clamp(66px,7.6vw,112px);font-weight:500;letter-spacing:-.06em;line-height:1.1;max-width:1180px;margin:35px 0 42px}
.signature-intro .hero-foot{display:flex;align-items:flex-end;gap:60px;max-width:1060px}
.signature-intro .hero-credentials p:first-child{font-size:20px;line-height:1.6;max-width:590px;margin-bottom:16px}
.signature-intro .hero-credentials p:last-child{font-size:15px;line-height:1.75}
.hero-location{display:block}
.signature-intro .hero-actions{gap:12px;flex-direction:column;align-items:flex-start;margin:0}
.signature-intro .hero-resume{display:flex;align-items:center;gap:16px;font-size:14px}
.contour-field{position:absolute;right:-7%;top:0;width:78%;height:100%;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent 2%,#000 32%,#000 85%,transparent)}
.hero-scroll-note{position:absolute;bottom:24px;right:var(--gutter);display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);min-height:44px}
.scroll-track{width:36px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.scroll-track i{position:absolute;left:0;top:0;width:12px;height:1px;background:var(--accent);animation:scroll-cue 2.8s ease-in-out infinite}
@keyframes scroll-cue{0%,15%{transform:translateX(-14px)}75%,100%{transform:translateX(38px)}}

/* No invented browser controls. The black edge gives the work a clear boundary. */
.device-slab{border:7px solid #151817;border-radius:22px;background:#151817;box-shadow:0 0 0 1px #68716b70,0 22px 46px -28px #10191580;overflow:hidden}
.device-slab .device-screen{border-radius:15px;background:#151817;overflow:hidden}
.device-slab .media-player{background:#151817}
.device-slab video{border-radius:0!important}
.device-embedded.device-slab{border:7px solid #151817;background:#151817;border-radius:22px;box-shadow:0 0 0 1px #68716b70,0 22px 46px -28px #10191580}
.device-embedded.device-slab .device-screen{aspect-ratio:1.82;border-radius:15px;box-shadow:none;position:relative}
.device-embedded.device-slab .media-player{height:100%!important;aspect-ratio:auto!important;overflow:hidden}
.device-embedded.device-slab video{position:absolute;left:-5.556%;top:-9.85%;width:111.111%!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0!important}
.project-visual{background:transparent!important;padding:18px 0;border-radius:0}
.project-card .project-preview-wrap{overflow:visible}
.project-card{padding:42px 0;gap:56px}
.project-card .project-visual{aspect-ratio:1.5}
.project-card:hover .device,.project-card:focus-within .device{transform:translateY(-4px)}
.project-card .project-heading h2{letter-spacing:-.045em}
.project-affordance>span{transition:transform .5s var(--motion-ease),background .3s,color .3s}
.project-hit:active~.project-preview-wrap .device{transform:translateY(0) scale(.99)}
.primary-link{transition:transform .4s var(--motion-ease),background .25s,box-shadow .3s}
.primary-link:hover{transform:translateY(-3px);box-shadow:0 9px 20px -12px var(--accent)}
.primary-link:active{transform:translateY(0) scale(.97)}
.primary-link .ui-icon,.text-link .ui-icon,.back-link .ui-icon{transition:transform .35s var(--motion-ease)}
.primary-link:hover .ui-icon{transform:translateY(3px)}
.text-link:hover .ui-icon{transform:translate(2px,-2px)}
.back-link:hover .ui-icon{transform:translateX(-4px)}
.theme-toggle:active{transform:scale(.9)}
.app-preview-link{transition:box-shadow .3s}
.app-preview:has(.app-preview-link:hover) .phone-shell{transform:translateY(-5px)}
.phone-shell{transition:transform .6s var(--motion-ease)}
.app-info h3 a:hover{color:var(--accent)}

/* The case opens with the argument, the work, and its effect. */
.case-page,.case-page .site-header{background:var(--paper)}
.case-arrival{position:relative;isolation:isolate;padding-bottom:12px}
.case-arrival:before{content:'';position:absolute;inset:0 0 -10px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--project) 13%,transparent),transparent 94%),radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--project) 14%,transparent),transparent 67%);animation:color-arrival 1.4s var(--motion-ease) both}
[data-theme=dark] .case-arrival:before{background:linear-gradient(180deg,color-mix(in srgb,var(--project) 13%,transparent),transparent 94%),radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--project) 10%,transparent),transparent 64%)}
@keyframes color-arrival{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
.case-masthead{padding-top:30px;padding-bottom:32px}
.case-masthead .back-link{margin-bottom:30px;display:inline-flex;align-items:center;gap:10px;min-height:44px}
.case-masthead-row{grid-template-columns:1fr 1.15fr;gap:8%;align-items:end}
.case-masthead h1{font-size:clamp(60px,7vw,96px);line-height:1.06}
.case-deck{font-size:clamp(20px,1.8vw,25px);line-height:1.5;max-width:590px}
.case-credits{display:flex;gap:28px;margin-top:27px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--project) 22%,var(--line));font-size:13px;line-height:1.6;color:var(--muted)}
.case-credits>span:first-child{color:var(--ink);font-weight:600}
.case-lead{grid-template-columns:minmax(0,1.55fr) minmax(270px,1fr);gap:48px;align-items:center;padding-bottom:42px}
.case-lead .project-visual{padding:0;aspect-ratio:auto;min-height:0;background:transparent!important;max-height:none!important}
.case-lead .visual-linkedin{aspect-ratio:1.45;gap:30px;justify-content:center}
.case-lead .visual-linkedin .device-phone{width:29%;max-width:190px}
.case-lead-caption{font-size:12px;margin-top:8px;color:var(--muted)}
.case-brief{display:grid;gap:22px;align-content:start}
.case-brief h2{font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;color:var(--project);margin-bottom:8px}
.case-brief p{font-size:16px;line-height:1.7;color:var(--ink);max-width:460px}
.brief-impact{border-top:1px solid color-mix(in srgb,var(--project) 25%,var(--line));padding-top:20px}
.brief-impact strong{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.2;letter-spacing:-.045em;color:var(--ink);display:block;margin:10px 0}
.brief-impact p{font-size:14px;color:var(--muted)}
.solution-overview{max-width:1440px;margin:auto;padding:28px var(--gutter) 0}
.solution-overview-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:0 0 26px}
.solution-overview-heading h2{font-size:24px;font-weight:500;letter-spacing:-.035em}
.solution-overview-heading>span{font-size:13px;color:var(--muted)}
.solution-previews{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.solution-preview{margin:0;min-width:0}
.solution-media{aspect-ratio:1.5;display:flex;align-items:center;justify-content:center;border-radius:16px;background:color-mix(in srgb,var(--project) 6%,var(--paper));padding:22px;overflow:hidden}
.solution-media .device{width:100%;flex:none}
.solution-media .device-phone{width:29%;min-width:100px;max-width:160px}
.solution-media .device-native{width:100%;background:transparent;box-shadow:none}
.solution-media .device-native .device-screen{background:transparent}
.solution-media .device-native video{width:100%;height:auto!important;object-fit:contain}
.solution-preview figcaption{padding:16px 0 0}
.solution-preview figcaption strong{font-size:20px;font-weight:500;letter-spacing:-.03em;display:block;color:var(--ink)}
.solution-preview figcaption p{font-size:15px;line-height:1.7;margin:9px 0 8px;max-width:520px}
.solution-detail{font-size:14px;display:inline-flex;align-items:center;gap:14px;min-height:44px;color:var(--project)}
.solution-detail .ui-icon{transition:transform .3s var(--motion-ease)}
.solution-detail:hover .ui-icon{transform:translateX(5px)}
.deep-dive-link{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin:46px 0 12px}
.deep-dive-link>span:first-child{font-size:21px;font-weight:500;letter-spacing:-.025em}
.deep-dive-link>span:last-child{display:flex;align-items:center;gap:24px;font-size:14px;color:var(--muted)}
.deep-dive-link .ui-icon{font-size:22px;transition:transform .35s var(--motion-ease)}
.deep-dive-link:hover .ui-icon{transform:translateY(4px)}
.case-body{border-top:0;padding-top:40px}
.gallery-media{background:color-mix(in srgb,var(--project) 5%,var(--paper))!important;padding:22px!important}
.gallery-media .device-slab{max-height:none}
.gallery-media .device-slab:not(.device-embedded) video{max-height:none!important}
.player-toolbar{opacity:.75;transition:opacity .25s}
.player-toolbar:hover,.player-toolbar:focus-within{opacity:1}
.player-toolbar button{transition:background .25s,transform .25s}
.player-toolbar button:active,.gallery-controls button:active{transform:scale(.92)}
.gallery-tab .thumb-image{transition:box-shadow .3s,border-color .3s,transform .45s var(--motion-ease)}
.gallery-tab:hover .thumb-image{transform:translateY(-3px)}
.gallery-tab:active .thumb-image{transform:scale(.97)}

/* Arrive quickly. Reveal each meaningful section as it enters the viewport. */
.motion-capable [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--motion-ease),transform 1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-capable [data-reveal].is-visible,.motion-capable [data-reveal]:focus-within{opacity:1;transform:none}
.motion-capable [data-arrive]{animation:arrive .85s var(--motion-ease) both}
.motion-capable .hero-name{animation-delay:.08s}.motion-capable .hero-credentials{animation-delay:.32s}.motion-capable .hero-actions{animation-delay:.44s}
.motion-capable .case-masthead-row{animation-delay:.1s}.motion-capable .case-lead{animation-delay:.28s}
.signature-intro .hero-line>span{animation:line-arrive 1s var(--motion-ease) .15s both}
.signature-intro .hero-line:nth-child(2)>span{animation-delay:.26s}
.hero-scroll-note{animation:arrive 1s var(--motion-ease) .65s both}
@keyframes arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes line-arrive{from{transform:translateY(110%)}to{transform:translateY(0)}}
.gallery-panel:not([hidden]) .gallery-media{animation:media-arrive .5s var(--motion-ease) both}
@keyframes media-arrive{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.signature-intro{min-height:710px;padding-top:82px}.signature-intro h1{font-size:120px}}
@media(max-width:1100px) and (min-width:761px){.signature-intro{min-height:590px}.signature-intro .hero-foot{gap:32px}.signature-intro .hero-credentials p:first-child{font-size:18px}.case-lead{gap:32px;grid-template-columns:1.3fr 1fr}.case-brief{gap:16px}.case-brief p{font-size:15px}.brief-impact{padding-top:16px}.solution-media{padding:16px}.project-card{gap:32px}}
@media(max-width:760px){
 .signature-intro{min-height:0;padding:40px 24px 88px}.signature-intro .hero-name{display:block;font-size:24px}.signature-intro .hero-name>span{display:block;border:0;padding:0;margin-top:7px;font-size:12px}.signature-intro h1{font-size:clamp(42px,9.4vw,68px);line-height:1.14;letter-spacing:-.05em;margin:31px 0 30px}.signature-intro .hero-foot{display:block}.signature-intro .hero-credentials p:first-child{font-size:17px;line-height:1.65}.signature-intro .hero-credentials p:last-child{font-size:14px;line-height:1.75}.hero-location{max-width:350px}.signature-intro .hero-actions{flex-direction:row;align-items:center;gap:20px;margin-top:24px}.signature-intro .primary-link{font-size:14px;padding:12px 18px;gap:18px}.signature-intro .hero-resume{font-size:14px;padding:10px 0}.contour-field{width:120%;right:-37%;opacity:.7;mask-image:linear-gradient(90deg,transparent,#000 50%)}.hero-scroll-note{bottom:17px;right:24px;font-size:12px}
 .project-card{padding:26px 0 34px;gap:18px}.project-card .project-visual{padding:10px 0;aspect-ratio:1.5}.device-slab,.device-embedded.device-slab{border-width:5px;border-radius:16px}.device-slab .device-screen,.device-embedded.device-slab .device-screen{border-radius:11px}
 .case-masthead{padding:20px 24px 28px}.case-masthead .back-link{margin-bottom:22px;font-size:14px}.case-masthead-row{display:block}.case-masthead .eyebrow{font-size:12px;margin-bottom:12px}.case-masthead h1{font-size:clamp(48px,12vw,72px);letter-spacing:-.05em}.case-deck{font-size:20px;margin-top:20px;line-height:1.5}.case-credits{display:block;font-size:12px;margin-top:22px;padding-top:17px}.case-credits>span{display:block}.case-credits>span+span{margin-top:5px}
 .case-lead{display:flex;flex-direction:column;align-items:stretch;gap:25px;padding:0 24px 24px}.case-lead .project-visual{aspect-ratio:auto;padding:0}.case-lead .visual-linkedin{aspect-ratio:1.4;gap:24px}.case-lead .visual-linkedin .device-phone{width:29%;min-width:85px}.case-lead-caption{font-size:12px;margin-top:4px}.case-brief{gap:23px}.case-brief h2{font-size:12px;margin-bottom:8px}.case-brief p{font-size:16px;line-height:1.7}.brief-impact{padding-top:20px}.brief-impact strong{font-size:36px;margin:8px 0}.brief-impact p{font-size:14px}
 .solution-overview{padding:28px 24px 0}.solution-overview-heading{display:block;margin-bottom:22px}.solution-overview-heading h2{font-size:25px}.solution-overview-heading>span{display:block;margin-top:9px;font-size:13px}.solution-previews{grid-template-columns:1fr;gap:32px}.solution-media{padding:15px;aspect-ratio:1.5;border-radius:12px}.solution-media .device-phone{min-width:83px;width:29%;border-width:4px}.solution-preview figcaption{padding-top:12px}.solution-preview figcaption strong{font-size:21px}.solution-preview figcaption p{font-size:15px}.solution-detail{font-size:14px}.deep-dive-link{display:block;padding:22px 0;margin:30px 0 0}.deep-dive-link>span:first-child{display:block;font-size:22px}.deep-dive-link>span:last-child{margin-top:12px;font-size:13px;justify-content:space-between;gap:16px}
 .case-body{padding-top:0}.gallery-media{padding:14px!important}.player-toolbar{opacity:1}.gallery-tab:hover .thumb-image{transform:none}
}
@media(max-width:360px){.signature-intro{padding-inline:20px}.signature-intro h1{font-size:40px}.signature-intro .hero-actions{gap:14px}.signature-intro .primary-link{padding-inline:14px}.case-masthead,.case-lead,.solution-overview{padding-left:20px;padding-right:20px}.case-deck{font-size:19px}.solution-media{padding:11px}}
@media(prefers-reduced-motion:reduce){
 .motion-capable [data-reveal]{opacity:1;transform:none;transition:none}.motion-capable [data-arrive],.signature-intro .hero-line>span,.hero-scroll-note,.scroll-track i,.case-arrival:before,.gallery-panel:not([hidden]) .gallery-media{animation:none!important;transform:none;opacity:1}.device,.phone-shell,.gallery-tab .thumb-image,.primary-link{transition:none}.contour-field{opacity:.55}
}