/* Weifu Wen portfolio: light is the default; visitors may choose dark. */
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:24px}
.theme-toggle{appearance:none;border:1px solid #c8c8c8;border-radius:999px;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;font:500 12px Outfit,Arial,sans-serif;line-height:1;white-space:nowrap;cursor:pointer;min-height:36px;transition:background .2s,border-color .2s,color .2s}
.theme-toggle:hover{background:#ededed;border-color:#999}
.theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.theme-toggle-icon{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;flex:none}.theme-toggle-icon svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.personal-header .header-aside{display:inline}

/* Light theme */
html:not([data-theme="dark"]){color-scheme:light}
html:not([data-theme="dark"]) .personal-home{background:#fff;color:#171717}
html:not([data-theme="dark"]) .personal-header{background:#fff;color:#171717;border-bottom:1px solid #e5e5e5}
html:not([data-theme="dark"]) .personal-header nav a{color:#535353}
html:not([data-theme="dark"]) .personal-header nav a:hover{color:#111}
html:not([data-theme="dark"]) .personal-header .header-aside{color:#777}
html:not([data-theme="dark"]) .name-dot{color:#222}
html:not([data-theme="dark"]) .hero-overline,html:not([data-theme="dark"]) .work-intro>span,html:not([data-theme="dark"]) .feature-count{color:#646464}
html:not([data-theme="dark"]) .status-dot{background:#222;box-shadow:0 0 0 5px #e9e9e9}
html:not([data-theme="dark"]) .personal-hero h1 em{color:#666}
html:not([data-theme="dark"]) .hero-under p,html:not([data-theme="dark"]) .feature-details p{color:#565656}
html:not([data-theme="dark"]) .work-intro{border-color:#d7d7d7}
html:not([data-theme="dark"]) .feature-arrow{border-color:#bdbdbd}
html:not([data-theme="dark"]) .feature:hover .feature-arrow{background:#222;color:#fff}
html:not([data-theme="dark"]) .personal-about,html:not([data-theme="dark"]) .personal-approach{background:#f7f7f7;color:#171717}
html:not([data-theme="dark"]) .about-monogram{color:#222}
html:not([data-theme="dark"]) .about-monogram span{color:#fff}
html:not([data-theme="dark"]) .about-monogram i{color:#6b6b6b}
html:not([data-theme="dark"]) .art-corner,html:not([data-theme="dark"]) .section-eyebrow,html:not([data-theme="dark"]) .approach-list article>span{color:#606060}
html:not([data-theme="dark"]) .about-text p,html:not([data-theme="dark"]) .approach-intro,html:not([data-theme="dark"]) .approach-list p{color:#555}
html:not([data-theme="dark"]) .about-meta,html:not([data-theme="dark"]) .approach-layout,html:not([data-theme="dark"]) .approach-list article{border-color:#d6d6d6}
html:not([data-theme="dark"]) .about-meta span{border-color:#c8c8c8}
html:not([data-theme="dark"]) .approach-layout h2 span{color:#666}
html:not([data-theme="dark"]) .closing-statement{background:#f1f1f1;color:#171717}
html:not([data-theme="dark"]) .closing-statement span{color:#666}
html:not([data-theme="dark"]) .closing-statement .text-arrow{color:#171717}
html:not([data-theme="dark"]) .personal-footer{background:#fff;color:#555;border-top:1px solid #e1e1e1}
html:not([data-theme="dark"]) .personal-footer a:hover{color:#111}
html:not([data-theme="dark"]) .case-page{background:#fff;color:#171717}
html:not([data-theme="dark"]) .case-page .site-header{background:#fff;color:#171717;border-color:#e5e5e5}
html:not([data-theme="dark"]) .case-page .site-header nav a{color:#555}
html:not([data-theme="dark"]) .case-page .site-header nav a:hover,html:not([data-theme="dark"]) .case-page .site-header .header-cta{color:#171717}
html:not([data-theme="dark"]) .case-page .case-hero{background:#f7f7f7;color:#171717}
html:not([data-theme="dark"]) .case-page .case-hero .eyebrow{color:#606060}
html:not([data-theme="dark"]) .case-page .case-hero p.case-deck{color:#555}
html:not([data-theme="dark"]) .case-page .case-hero .case-meta span{border-color:#bdbdbd;color:#414141}
html:not([data-theme="dark"]) .case-page .case-illustration-note{color:#656565}
html:not([data-theme="dark"]) .case-page .challenge-strip{background:#ececec;color:#222}
html:not([data-theme="dark"]) .case-page .challenge-strip .section-kicker{color:#626262}
html:not([data-theme="dark"]) .case-page .next-case{background:#f1f1f1;color:#171717}
html:not([data-theme="dark"]) .case-page .next-case span{color:#666}
html:not([data-theme="dark"]) .case-page .next-case .button{background:#222;color:#fff;border-color:#222}
html:not([data-theme="dark"]) .case-page footer{background:#fff;color:#555;border-top:1px solid #e1e1e1}

/* Dark theme, including sections that were previously light. */
html[data-theme="dark"]{color-scheme:dark;--ink:#f3f3f3;--muted:#bbb;--line:#3c3c3c;--paper:#171717}
html[data-theme="dark"] .theme-toggle{border-color:#666}
html[data-theme="dark"] .theme-toggle:hover{background:#3b3b3b;border-color:#aaa}
html[data-theme="dark"] .personal-about,html[data-theme="dark"] .personal-approach{background:#202020;color:#f5f5f5}
html[data-theme="dark"] .about-art{background:#3c3c3c}
html[data-theme="dark"] .about-monogram{color:#eee}
html[data-theme="dark"] .about-monogram span{color:#777}
html[data-theme="dark"] .about-monogram i{color:#bbb}
html[data-theme="dark"] .art-corner,html[data-theme="dark"] .section-eyebrow,html[data-theme="dark"] .approach-list article>span{color:#aaa}
html[data-theme="dark"] .about-text p,html[data-theme="dark"] .approach-intro,html[data-theme="dark"] .approach-list p{color:#c6c6c6}
html[data-theme="dark"] .about-meta,html[data-theme="dark"] .approach-layout,html[data-theme="dark"] .approach-list article{border-color:#4b4b4b}
html[data-theme="dark"] .about-meta span{border-color:#646464}
html[data-theme="dark"] .approach-layout h2 span{color:#aaa}
html[data-theme="dark"] .case-page{background:#171717;color:#f2f2f2}
html[data-theme="dark"] .case-page .case-layout{background:#171717}
html[data-theme="dark"] .case-page .case-content p,html[data-theme="dark"] .case-page .case-content li{color:#c8c8c8}
html[data-theme="dark"] .case-page .case-content .goal{background:#292929;border-color:#aaa;color:#f3f3f3}
html[data-theme="dark"] .case-page .case-sidebar nav a{color:#bdbdbd}
html[data-theme="dark"] .case-page .case-sidebar nav a[aria-current="location"]{color:#fff}
html[data-theme="dark"] .case-page .case-sidebar .areas span{color:#c4c4c4}
html[data-theme="dark"] .case-page .next-case{background:#262626}
html[data-theme="dark"] .case-page footer{background:#111;color:#d5d5d5}
@media(max-width:760px){.header-tools{gap:0}.personal-header .header-aside{display:none}.theme-toggle{padding:9px 10px}.theme-toggle-label{display:none}}
@media(prefers-reduced-motion:reduce){.theme-toggle{transition:none}}
html[data-theme="dark"] .case-page .challenge-strip{background:#292929;color:#f2f2f2}
html[data-theme="dark"] .case-page .challenge-strip .section-kicker{color:#aaa}

/* Image surfaces stay borderless in both themes. */
.feature-image,.case-page .case-graphic{border:0;box-shadow:none}

/* Motion is restrained and responds to scrolling and pointer movement. */
.feature-image{--pointer-x:50%;--pointer-y:50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.feature-image::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle 220px at var(--pointer-x) var(--pointer-y),#ffffff80,transparent 72%);opacity:0;transition:opacity .35s}
.feature:hover .feature-image,.feature:focus-visible .feature-image{transform:translateY(-5px)}
.feature:hover .feature-image::after,.feature:focus-visible .feature-image::after{opacity:.11}
.feature:focus-visible{outline:2px solid currentColor;outline-offset:7px;border-radius:3px}
.motion-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-ready .feature:nth-child(2){transition-delay:.08s}
.motion-ready .feature:nth-child(3){transition-delay:.14s}
.study-chart i{transform-origin:bottom}
.motion-ready .feature.is-visible .study-chart i{animation:chart-grow .8s cubic-bezier(.2,.8,.2,1) both}
.motion-ready .feature.is-visible .study-chart i:nth-child(2){animation-delay:.08s}
.motion-ready .feature.is-visible .study-chart i:nth-child(3){animation-delay:.16s}
.motion-ready .feature.is-visible .study-chart i:nth-child(4){animation-delay:.24s}
.motion-ready .feature.is-visible .study-chart i:nth-child(5){animation-delay:.32s}
@keyframes chart-grow{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.feature-image,.feature-image::after,.motion-ready .reveal{transition:none!important}.motion-ready .reveal{opacity:1;transform:none}.motion-ready .feature.is-visible .study-chart i{animation:none}.feature:hover .feature-image,.feature:focus-visible .feature-image{transform:none}.feature-image::after{display:none}}

/* Product leadership and AI work */
.impact-strip{background:#fff;color:#171717;padding:0 0 115px}
.impact-strip .personal-shell{border-top:1px solid #dadada;padding-top:30px}
.impact-strip p{font:500 13px Outfit,Arial,sans-serif;color:#666;margin:0 0 32px}
.impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.impact-grid div{display:flex;flex-direction:column;gap:9px}
.impact-grid strong{font:500 clamp(36px,4.2vw,62px)/1 Outfit,Arial,sans-serif;letter-spacing:-.065em}
.impact-grid span{font:500 12px/1.45 Outfit,Arial,sans-serif;color:#666}
.ai-work{background:#fff;color:#171717;padding:0 0 145px}
.ai-work-heading{display:grid;grid-template-columns:38% 1fr;column-gap:10%;border-top:1px solid #dadada;padding-top:90px;align-items:start}
.ai-work-heading .section-eyebrow{grid-column:1/-1}
.ai-work-heading h2{font:500 clamp(39px,4.4vw,65px)/1.1 Outfit,Arial,sans-serif;letter-spacing:-.06em;margin:24px 0 38px}
.ai-work-heading p{font-size:18px;line-height:1.55;color:#555;max-width:550px;margin:30px 0 0}
.ai-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ai-work-grid article{border-top:1px solid #bdbdbd;padding:25px 0 0;display:flex;flex-direction:column;min-height:245px}
.ai-work-grid article>span{font:600 10px "DM Sans",Arial,sans-serif;letter-spacing:.08em;color:#777}
.ai-work-grid h3{font:500 27px/1.15 Outfit,Arial,sans-serif;letter-spacing:-.04em;margin:24px 0 12px}
.ai-work-grid p{font-size:15px;line-height:1.55;color:#555;margin:0 0 22px}
.ai-work-grid strong{font:600 13px/1.4 Outfit,Arial,sans-serif;margin-top:auto}
html[data-theme="dark"] .impact-strip,html[data-theme="dark"] .ai-work{background:#171717;color:#f3f3f3}
html[data-theme="dark"] .impact-strip .personal-shell,html[data-theme="dark"] .ai-work-heading,html[data-theme="dark"] .ai-work-grid article{border-color:#444}
html[data-theme="dark"] .impact-strip p,html[data-theme="dark"] .impact-grid span,html[data-theme="dark"] .ai-work-heading p,html[data-theme="dark"] .ai-work-grid p{color:#bbb}
html[data-theme="dark"] .ai-work-grid article>span{color:#aaa}
@media(max-width:900px){.impact-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.ai-work-heading{grid-template-columns:1fr}.ai-work-heading p{margin:0 0 32px}.ai-work-grid{grid-template-columns:1fr 1fr}.ai-work-grid article{min-height:220px}}
@media(max-width:760px){.impact-strip{padding-bottom:90px}.ai-work{padding-bottom:90px}.ai-work-heading{padding-top:70px}.ai-work-grid{grid-template-columns:1fr;gap:24px}.ai-work-grid article{min-height:0;padding-bottom:8px}.personal-header nav a:nth-child(4){display:none}.case-page .site-header nav a:nth-child(3),.case-page .site-header nav a:nth-child(4){display:none}}
@media(max-width:480px){.impact-grid strong{font-size:40px}.impact-grid{column-gap:16px}.personal-header nav a:nth-child(3){display:none}.case-page .site-header nav a:nth-child(2){display:none}}

/* Typography: Outfit for display, DM Sans for reading, Georgia for the accent. */
body{font-family:"DM Sans",Arial,sans-serif}
.personal-hero h1{letter-spacing:-.058em;line-height:1.05}
.personal-hero h1 em{letter-spacing:-.055em}
.personal-name,.case-page .brand{font-family:Outfit,Arial,sans-serif}
.case-page .case-hero h1,.case-page .case-content h2,.case-page .case-content h3,.case-page .next-case a{font-family:Outfit,Arial,sans-serif}
.case-page .case-hero h1{font-weight:600;letter-spacing:-.055em;line-height:1.09}
.case-page .case-content h2{font-weight:600;letter-spacing:-.045em}
.case-page .case-content h3{font-weight:600;letter-spacing:-.025em}
.personal-header nav,.case-page .site-header nav{font-family:"DM Sans",Arial,sans-serif}
.hero-overline,.section-eyebrow,.work-intro>span,.closing-statement span,.feature-count,.image-caption,.personal-footer,.case-page .eyebrow,.case-page .section-kicker,.case-page .case-sidebar .side-label,.case-page .next-case span,.ai-work-grid article>span,.art-corner{font-size:11px;letter-spacing:.035em;line-height:1.45}
.personal-header .header-aside{font-size:11px;letter-spacing:.045em}
.feature-details p,.ai-work-grid p,.approach-list p{font-size:16px;line-height:1.65}
.about-text p,.approach-intro{font-size:18px;line-height:1.7}
.case-page .case-content p,.case-page .case-content li{font-size:17px;line-height:1.75}
.case-page .case-meta span,.about-meta span{font-family:"DM Sans",Arial,sans-serif;font-size:11px;letter-spacing:.025em;line-height:1.3}
.case-page .case-sidebar nav a{font-size:13px;line-height:1.4}
.case-page .case-hero p.case-deck{font-size:19px;line-height:1.65}
.case-page .footer-grid{font-size:11px;letter-spacing:.035em}
@media(max-width:760px){.personal-hero h1{letter-spacing:-.06em}.about-text p,.approach-intro{font-size:17px}.case-page .case-content p,.case-page .case-content li{font-size:16px}.hero-overline{font-size:10px}}

/* Project-first layout, with a horizontal gallery and quiet page rhythm. */
.personal-hero{padding:105px 0 88px}
.personal-hero h1{max-width:1160px;margin-bottom:38px}
.hero-under{max-width:1160px}
.featured-work{padding-bottom:95px}
.work-intro{align-items:end;margin-bottom:24px}
.work-intro>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex:1}
.work-intro>div:first-child>span{font:600 11px/1.45 "DM Sans",Arial,sans-serif;letter-spacing:.035em;color:#646464;white-space:nowrap}
html[data-theme="dark"] .work-intro>div:first-child>span{color:#aaa}
.work-intro h2{max-width:none;text-align:right}
.work-controls{display:flex;gap:8px;flex-shrink:0}
.work-controls button{width:42px;height:42px;display:grid;place-items:center;border:1px solid #c9c9c9;border-radius:50%;background:transparent;color:inherit;font:400 22px Outfit,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.work-controls button svg,.text-arrow svg,.feature-arrow svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.work-controls button:hover{background:#171717;color:#fff;transform:translateY(-2px)}
.work-controls button:focus-visible,.feature-grid:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html[data-theme="dark"] .work-controls button{border-color:#686868}
html[data-theme="dark"] .work-controls button svg,.text-arrow svg,.feature-arrow svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.work-controls button:hover{background:#f3f3f3;color:#171717}
.feature-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:thin;scrollbar-color:#c2c2c2 transparent;padding-bottom:14px;overscroll-behavior-inline:contain}
.feature{flex:0 0 min(72vw,790px);scroll-snap-align:start}
.feature-host{grid-column:auto}
.feature-image,.feature-host .feature-image{height:475px}
.feature-details{padding-top:21px}
.impact-strip{padding-bottom:100px}
.impact-strip .personal-shell{padding-top:37px}
@media(max-width:900px){.work-intro>div:first-child{display:block}.work-intro h2{text-align:left;margin-top:8px}.feature{flex-basis:min(80vw,680px)}}
@media(max-width:760px){.personal-hero{padding:78px 0 68px}.featured-work{padding-bottom:75px}.feature-grid{gap:16px}.feature{flex-basis:min(84vw,500px)}.feature-image,.feature-host .feature-image{height:400px}.work-controls button{width:38px;height:38px}.impact-strip{padding-bottom:85px}}
@media(max-width:480px){.personal-hero{padding:64px 0 58px}.work-intro{gap:12px}.work-intro h2{font-size:18px}.feature{flex-basis:87vw}.feature-image,.feature-host .feature-image{height:340px}.feature-details h3{font-size:29px}.feature-details p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.work-controls button{transition:none}}

/* Case studies give future product imagery a full-width canvas. */
.case-page .case-hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:58px;min-height:0;padding-top:90px;padding-bottom:80px}
.case-page .case-hero-inner>div{width:100%}
.case-page .case-hero h1{max-width:1080px;margin-bottom:22px}
.case-page .case-hero p.case-deck{max-width:800px}
.case-page .case-hero .case-meta{margin-top:29px}
.case-page .case-graphic{width:100%;height:auto;min-height:420px;aspect-ratio:16/9}
.case-page .case-graphic .graphic-word{font-size:clamp(70px,10vw,155px)}
.case-page .case-graphic:before{width:min(34vw,470px);height:min(34vw,470px)}
.case-page .case-graphic:after{width:min(55vw,760px);height:min(55vw,760px)}
.case-page .case-illustration-note{margin-top:14px}
.case-page .next-case{background:#fff;color:#171717;border-top:1px solid #e2e2e2}
html:not([data-theme="dark"]) .case-page .next-case{background:#fff}
.case-page .next-case .container{min-height:210px}
.case-page .next-case .all-projects-link{display:inline-flex;align-items:center;gap:22px;align-self:center;padding:0 0 7px;border-bottom:1px solid currentColor;background:transparent;color:inherit;font:500 17px/1.3 Outfit,Arial,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.case-page .next-case .all-projects-link span{font:400 22px/1 Outfit,Arial,sans-serif;color:inherit;letter-spacing:0}
.case-page .next-case .all-projects-link:hover{color:#555}
html[data-theme="dark"] .case-page .next-case{background:#171717;color:#f3f3f3;border-color:#3b3b3b}
html[data-theme="dark"] .case-page .next-case .all-projects-link:hover{color:#bbb}
@media(max-width:760px){.case-page .case-hero-inner{gap:40px;padding-top:65px;padding-bottom:65px}.case-page .case-graphic{min-height:320px;aspect-ratio:4/3}.case-page .case-graphic .graphic-word{font-size:clamp(58px,12vw,95px)}.case-page .next-case .container{min-height:185px}}
@media(max-width:480px){.case-page .case-hero-inner{gap:34px;padding-top:54px;padding-bottom:54px}.case-page .case-graphic{min-height:280px}.case-page .case-graphic:before{width:230px;height:230px}.case-page .case-graphic:after{width:360px;height:360px}.case-page .next-case .container{align-items:flex-start;flex-direction:column;justify-content:center;gap:26px;padding-top:30px;padding-bottom:30px}.case-page .next-case .all-projects-link{align-self:flex-start}}

/* Unlabeled media placements throughout every case study. */
.case-page .case-hero-inner{gap:52px}
.case-page .case-hero p.case-deck{margin-bottom:0}
.case-page .challenge-strip p{margin-top:0}
.case-page .case-sidebar nav{margin-top:0}
.case-page .case-content{max-width:900px}
.case-page .case-content section{padding-bottom:78px;margin-bottom:78px}
.case-page .case-media-slot{width:100%;aspect-ratio:16/10;min-height:285px;margin:38px 0 0;padding:7%;display:flex;align-items:center;justify-content:center;gap:18px;position:relative;overflow:hidden;border-radius:10px;background:#ededed}
.case-page .case-media-slot i{display:block;position:relative;flex:none;width:29%;height:76%;border-radius:8px;background:linear-gradient(145deg,#fafafa,#d5d5d5);box-shadow:0 18px 40px #00000012}
.case-page .case-media-slot.visual-overview i:first-child,.case-page .case-media-slot.visual-design-reflection i:first-child{width:76%;height:78%}
.case-page .case-media-slot.visual-overview i:not(:first-child),.case-page .case-media-slot.visual-design-reflection i:not(:first-child){display:none}
.case-page .case-media-slot.visual-the-problem i,.case-page .case-media-slot.visual-key-design-decisions i{width:39%;height:72%}
.case-page .case-media-slot.visual-the-problem i:last-child,.case-page .case-media-slot.visual-key-design-decisions i:last-child{display:none}
.case-page .case-media-slot.visual-design-goal i:first-child{width:50%;height:82%}
.case-page .case-media-slot.visual-design-goal i:not(:first-child){display:none}
.case-page .case-media-slot.visual-my-design-approach i{width:25%;height:72%}
.case-page .case-media-slot.visual-my-design-approach i:nth-child(2){height:84%}
.case-page .case-media-slot.visual-design-reflection{background:#e3e3e3}
.case-page .case-media-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
html[data-theme="dark"] .case-page .case-media-slot{background:#303030}
html[data-theme="dark"] .case-page .case-media-slot.visual-design-reflection{background:#292929}
html[data-theme="dark"] .case-page .case-media-slot i{background:linear-gradient(145deg,#5b5b5b,#3a3a3a);box-shadow:0 18px 40px #00000028}
@media(max-width:760px){.case-page .case-content section{padding-bottom:64px;margin-bottom:64px}.case-page .case-media-slot{min-height:250px;margin-top:30px;gap:10px}}
@media(max-width:480px){.case-page .case-media-slot{min-height:210px;aspect-ratio:4/3;padding:6%;gap:8px}.case-page .case-media-slot i{border-radius:5px}}

/* Curated product screens exported from Weifu's three Figma files. */
.portfolio-scene,.feature-image.portfolio-scene,.case-page .case-graphic.portfolio-scene,.case-page .case-media-slot.portfolio-scene{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:clamp(9px,2vw,28px);position:relative;overflow:hidden;border:0;border-radius:9px;background:#f1f1ef;padding:clamp(22px,5%,62px);isolation:isolate}
.portfolio-scene::before,.portfolio-scene::after,.case-page .case-graphic.portfolio-scene::before,.case-page .case-graphic.portfolio-scene::after{display:none}
.feature-image.portfolio-scene{height:475px}
.case-page .case-graphic.portfolio-scene{width:100%;min-height:520px;aspect-ratio:16/9}
.case-page .case-media-slot.portfolio-scene{width:100%;min-height:390px;aspect-ratio:16/10;margin:38px 0 0}
.portfolio-scene img,.case-page .case-media-slot.portfolio-scene img{display:block;position:relative;inset:auto;flex:0 1 auto;min-width:0;width:auto;height:86%;max-width:34%;object-fit:contain;border:0;border-radius:9px;box-shadow:0 18px 42px #00000017;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.portfolio-scene.scene-mobile img:nth-child(1){transform:translateY(6%) rotate(-3deg)}
.portfolio-scene.scene-mobile img:nth-child(2){transform:translateY(-4%) rotate(1.5deg)}
.portfolio-scene.scene-mobile img:nth-child(3){transform:translateY(8%) rotate(3deg)}
.portfolio-scene.scene-mobile.scene-count-2 img{max-width:42%;height:87%}
.portfolio-scene.scene-mobile.scene-count-3 img{max-width:31%;height:87%}
.portfolio-scene.scene-mobile.scene-count-3 img:nth-child(2){height:96%}
.portfolio-scene.scene-mobile img[src$="consumer-charging.png"]{box-shadow:none;border-radius:0}
.portfolio-scene.scene-desktop{background:#eaeae8}
.portfolio-scene.scene-desktop img,.case-page .case-media-slot.portfolio-scene.scene-desktop img{width:100%;height:auto;max-width:100%;max-height:92%;object-fit:contain;border-radius:5px;box-shadow:0 18px 44px #00000018}
.portfolio-scene.scene-desktop.scene-stacked{flex-direction:column;gap:13px;padding:5%}
.portfolio-scene.scene-desktop.scene-stacked img{width:100%;height:auto;max-height:46%;object-fit:contain}
.portfolio-scene.scene-desktop.scene-table img{width:100%;max-height:80%}
.feature-image.portfolio-scene.scene-desktop{padding:5%}
.feature-image.portfolio-scene.scene-desktop img{width:100%;height:auto;max-height:78%;transform:rotate(-2deg)}
.feature-image.portfolio-scene.scene-mobile img{height:88%}
.feature-image.portfolio-scene.scene-mobile img:nth-child(2){height:100%}
.feature:hover .portfolio-scene img,.feature:focus-visible .portfolio-scene img{box-shadow:0 22px 52px #00000024}
html[data-theme="dark"] .portfolio-scene,html[data-theme="dark"] .feature-image.portfolio-scene,html[data-theme="dark"] .case-page .case-graphic.portfolio-scene,html[data-theme="dark"] .case-page .case-media-slot.portfolio-scene{background:#30302f}
html[data-theme="dark"] .portfolio-scene.scene-desktop{background:#292929}
@media(max-width:760px){.case-page .case-graphic.portfolio-scene{min-height:350px;aspect-ratio:4/3}.case-page .case-media-slot.portfolio-scene{min-height:300px}.portfolio-scene img,.case-page .case-media-slot.portfolio-scene img{box-shadow:0 12px 28px #00000017}}
@media(max-width:480px){.feature-image.portfolio-scene{height:340px;padding:6%}.case-page .case-graphic.portfolio-scene{min-height:290px}.case-page .case-media-slot.portfolio-scene{min-height:260px;aspect-ratio:4/3;padding:6%;gap:6px}.portfolio-scene.scene-mobile.scene-count-3 img{max-width:32%}.portfolio-scene.scene-mobile.scene-count-2 img{max-width:46%}.portfolio-scene.scene-desktop.scene-stacked{padding:5%;gap:9px}}
@media(prefers-reduced-motion:reduce){.portfolio-scene img{transition:none}}

/* A compact map showing how the five ChargerGoGo products share one network. */
.project-relationship{margin:-2px 0 38px;padding:0 0 2px;color:inherit}
.relationship-core{position:relative;width:max-content;max-width:100%;margin:0 auto 25px;padding:12px 20px;border:1px solid #bdbdbd;border-radius:999px;background:#fff;font-size:14px;font-weight:600;text-align:center}
.relationship-core::after{position:absolute;top:100%;left:50%;width:1px;height:26px;background:#c8c8c8;content:""}
.relationship-projects{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.relationship-projects::before{position:absolute;top:0;right:10%;left:10%;height:1px;background:#c8c8c8;content:""}
.relationship-projects a{position:relative;display:flex;min-height:96px;flex-direction:column;gap:7px;padding:22px 15px 14px;border:1px solid #e0e0e0;border-radius:12px;background:#fff;color:inherit;text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.relationship-projects a::before{position:absolute;bottom:100%;left:50%;width:1px;height:23px;background:#c8c8c8;content:""}
.relationship-projects a:hover,.relationship-projects a:focus-visible{transform:translateY(-3px);border-color:#888;box-shadow:0 10px 24px #0000000d}
.relationship-projects a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.relationship-projects strong{font-size:14px;font-weight:600;line-height:1.3}
.relationship-projects span{color:#626262;font-size:12px;line-height:1.45}
html[data-theme="dark"] .relationship-core,html[data-theme="dark"] .relationship-projects a{background:#202020}
html[data-theme="dark"] .relationship-core,html[data-theme="dark"] .relationship-projects a{border-color:#555}
html[data-theme="dark"] .relationship-projects span{color:#b8b8b8}
html[data-theme="dark"] .relationship-core::after,html[data-theme="dark"] .relationship-projects::before,html[data-theme="dark"] .relationship-projects a::before{background:#666}
@media(max-width:900px){.relationship-projects{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}.relationship-projects::before{display:none}.relationship-projects a::before{display:none}}
@media(max-width:600px){.project-relationship{margin-bottom:28px}.relationship-core{margin-bottom:21px}.relationship-projects{grid-template-columns:1fr;gap:9px;padding-left:18px;border-left:1px solid #c8c8c8}.relationship-projects a{min-height:0;padding:12px 14px}.relationship-projects a::before{display:block;top:50%;right:100%;bottom:auto;left:auto;width:18px;height:1px}}
@media(prefers-reduced-motion:reduce){.relationship-projects a{transition:none}}

/* Align the selected work heading with its introduction. */
.work-intro>div:first-child{display:block}
.work-intro h2{text-align:left;margin-top:8px}

/* Personal portrait in the About section. */
.about-art.about-portrait{height:auto;aspect-ratio:3/4;margin:0;display:block;background:#e9e9e9}
.about-art.about-portrait::before,.about-art.about-portrait::after{display:none}
.about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 8%}
@media(max-width:760px){.about-art.about-portrait{max-width:560px}}

/* Digital experience case studies. Brand green appears only inside product imagery. */
.digital-tile{display:grid;place-items:center;overflow:hidden;padding:32px;background:#eceee9;color:#20251d}
.digital-tile::after{display:none}
.website-tile-window,.academy-tile-window{width:92%;height:84%;background:#fff;box-shadow:0 24px 55px #232a1d22;overflow:hidden;transform:rotate(-2.5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.feature:hover .website-tile-window,.feature:hover .academy-tile-window{transform:rotate(0deg) translateY(-4px)}
.website-tile-nav,.academy-tile-nav{height:54px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 24px;border-bottom:1px solid #e7e8e5;font:500 10px Outfit,Arial,sans-serif;white-space:nowrap}
.website-tile-nav strong,.academy-tile-nav strong{font:700 17px Outfit,Arial,sans-serif;letter-spacing:-.04em}
.website-tile-nav span,.academy-tile-nav span{color:#6e7269}
.website-tile-body{height:calc(100% - 54px);display:grid;grid-template-columns:1fr 48%;background:#f6f9f1}
.website-tile-body>div{padding:11% 8%;display:flex;flex-direction:column;align-items:flex-start}
.website-tile-body strong{font:600 clamp(24px,3.3vw,47px)/1.06 Outfit,Arial,sans-serif;letter-spacing:-.055em}
.website-tile-body span{font:400 12px/1.5 Outfit,Arial,sans-serif;margin-top:13px;color:#596052}
.website-tile-body b{font:600 10px Outfit,Arial,sans-serif;background:#a2c75d;padding:10px 14px;border-radius:4px;margin-top:auto}
.website-tile-body img{width:100%;height:100%;object-fit:cover;object-position:center}
.academy-tile{background:#ebeee6}
.academy-tile-window{transform:rotate(2.5deg);padding-bottom:24px}
.academy-tile-heading{padding:27px 28px 19px;display:flex;flex-direction:column;gap:10px}
.academy-tile-heading span{font:600 10px Outfit,Arial,sans-serif;color:#729444}
.academy-tile-heading strong{font:600 clamp(25px,3vw,42px)/1.05 Outfit,Arial,sans-serif;letter-spacing:-.05em}
.academy-tile-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 28px}
.academy-tile-courses div{min-height:130px;background:#f4f6f1;border-top:3px solid #9fc459;padding:15px 12px;display:flex;flex-direction:column;gap:9px}
.academy-tile-courses span{font:600 10px Outfit,Arial,sans-serif;color:#739347}
.academy-tile-courses strong{font:600 14px/1.2 Outfit,Arial,sans-serif;letter-spacing:-.02em}
.academy-tile-courses small{font:400 10px Outfit,Arial,sans-serif;color:#747c6c;margin-top:auto}
.digital-case .digital-hero{padding:92px 0 110px}
.digital-hero-copy{max-width:850px;margin-bottom:48px}
.digital-case .digital-hero h1{font:500 clamp(54px,7vw,102px)/1.02 Outfit,Arial,sans-serif;letter-spacing:-.07em;margin:0 0 22px;max-width:none}
.digital-case .digital-hero p.case-deck{font:400 clamp(18px,2vw,25px)/1.5 Outfit,Arial,sans-serif;max-width:760px;margin:0;color:#575757}
.digital-live-link{display:inline-flex;align-items:center;gap:18px;margin-top:27px;padding-bottom:8px;border-bottom:1px solid currentColor;font:500 15px Outfit,Arial,sans-serif}
.digital-live-link span{font-size:22px}
.digital-hero-frame{width:100%;min-height:500px;background:#f3f5ee;box-shadow:0 18px 55px #181f1414;overflow:hidden;color:#232923}
.digital-window-bar{height:62px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 34px;background:#fff;border-bottom:1px solid #e8eae5;font:500 12px Outfit,Arial,sans-serif}
.digital-window-bar span:first-child{font-size:20px;font-weight:700;letter-spacing:-.04em}
.digital-window-bar span:last-child{color:#697068}
.website-hero-art{display:grid;grid-template-columns:52% 48%;min-height:438px}
.website-hero-art>div{padding:65px clamp(32px,6vw,85px);background:linear-gradient(135deg,#f7faf1,#e6f0d7);display:flex;flex-direction:column;align-items:flex-start}
.website-hero-art>div>span,.academy-hero-intro>span{font:600 12px Outfit,Arial,sans-serif;color:#719043}
.website-hero-art strong{font:600 clamp(42px,5vw,76px)/1.04 Outfit,Arial,sans-serif;letter-spacing:-.06em;margin:27px 0 20px}
.website-hero-art p{font:400 17px/1.5 Outfit,Arial,sans-serif;max-width:410px;color:#596250}
.website-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.academy-hero-frame{background:#f7f8f4}
.academy-hero-inner{min-height:438px;display:grid;grid-template-columns:48% 1fr;gap:5%;align-items:center;padding:45px clamp(35px,5vw,70px)}
.academy-hero-intro{display:flex;flex-direction:column;align-items:flex-start}
.academy-hero-intro strong{font:600 clamp(56px,6vw,86px)/.99 Outfit,Arial,sans-serif;letter-spacing:-.07em;margin:24px 0 19px}
.academy-hero-intro p{font:400 17px/1.5 Outfit,Arial,sans-serif;max-width:340px;color:#5a6256}
.academy-hero-cards{display:grid;gap:13px}
.academy-hero-cards div{background:#fff;border-left:5px solid #a0c45d;padding:19px 23px;box-shadow:0 10px 30px #141b100a;display:flex;flex-direction:column;gap:6px}
.academy-hero-cards span{font:600 10px Outfit,Arial,sans-serif;color:#739248}
.academy-hero-cards strong{font:600 22px Outfit,Arial,sans-serif;letter-spacing:-.035em}
.academy-hero-cards small{font:400 12px Outfit,Arial,sans-serif;color:#6f766a}
.digital-case .case-content{max-width:900px}
.digital-case .case-content section{scroll-margin-top:35px}
.digital-case .case-content h2{font:500 clamp(36px,4vw,53px)/1.1 Outfit,Arial,sans-serif;letter-spacing:-.055em}
.digital-case .case-content p{font:400 18px/1.68 Outfit,Arial,sans-serif;max-width:790px}
.digital-figure{box-sizing:border-box;width:100%;min-height:360px;margin:38px 0 0;padding:35px;background:#f3f4f1;color:#222921;overflow:hidden}
.audience-figure{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;align-items:stretch}
.audience-card{display:flex;flex-direction:column;min-height:275px;padding:21px 16px;background:#fff;border-top:4px solid #a2c75d}
.audience-card span{font:600 12px Outfit,Arial,sans-serif;color:#76964d}
.audience-card strong{font:600 26px/1.12 Outfit,Arial,sans-serif;letter-spacing:-.04em;margin:auto 0 12px}
.audience-card small{font:400 12px/1.4 Outfit,Arial,sans-serif;color:#70796a}
.website-photo-figure{padding:0;display:grid;grid-template-columns:44% 1fr}
.website-photo-figure img,.journey-figure img{display:block;width:100%;height:100%;object-fit:cover}
.website-photo-figure>div{padding:50px;display:flex;flex-direction:column;justify-content:center}
.website-photo-figure span,.reflection-figure>span,.academy-reflection-figure>span{font:600 12px Outfit,Arial,sans-serif;color:#77964e}
.website-photo-figure strong{font:600 clamp(28px,3vw,43px)/1.1 Outfit,Arial,sans-serif;letter-spacing:-.05em;margin:24px 0}
.website-photo-figure p{font-size:14px!important;line-height:1.5!important;color:#64705d!important}
.journey-figure{padding:0;display:grid;grid-template-columns:1fr 42%}
.journey-steps{padding:30px 40px;display:grid;align-content:center}
.journey-steps div{display:grid;grid-template-columns:40px 1fr;gap:6px 15px;border-bottom:1px solid #d8ddd3;padding:18px 0}
.journey-steps div:last-child{border:0}
.journey-steps b{font:600 13px Outfit,Arial,sans-serif;color:#77964e;grid-row:span 2}
.journey-steps strong{font:600 23px Outfit,Arial,sans-serif;letter-spacing:-.035em}
.journey-steps span{font:400 13px Outfit,Arial,sans-serif;color:#687261}
.responsive-figure{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;padding:48px;background:#e9ebe7}
.responsive-desktop,.responsive-mobile{background:#fff;box-shadow:0 20px 50px #1d241b22;overflow:hidden}
.responsive-desktop{width:78%;height:290px}
.responsive-mobile{position:absolute;width:25%;height:300px;right:5%;bottom:24px}
.responsive-top{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid #e9ece6;font:500 10px Outfit,Arial,sans-serif;color:#687064}
.responsive-top strong{font-size:13px;color:#242b22}
.responsive-main{display:grid;grid-template-columns:1fr 45%;height:calc(100% - 45px);background:#f1f7e8}
.responsive-main strong{font:600 clamp(18px,2vw,28px)/1.1 Outfit,Arial,sans-serif;letter-spacing:-.04em;padding:38px 22px}
.responsive-main div{background:linear-gradient(135deg,#c2d99e,#e8f0d8)}
.responsive-mobile .responsive-main{display:block}
.responsive-mobile .responsive-main strong{display:block;padding:28px 14px 14px;font-size:21px}
.responsive-mobile .responsive-main div{height:140px}
.reflection-figure,.academy-reflection-figure{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:360px;padding:50px;background:#eaf0e1}
.reflection-figure strong,.academy-reflection-figure strong{font:500 clamp(38px,4vw,55px)/1.12 Outfit,Arial,sans-serif;letter-spacing:-.055em;margin:26px 0 30px;max-width:740px}
.reflection-figure a,.academy-reflection-figure a{font:600 14px Outfit,Arial,sans-serif;border-bottom:1px solid currentColor;padding-bottom:8px}
.academy-path-figure{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch}
.academy-path-figure div{min-height:250px;background:#fff;border-top:4px solid #a2c75d;padding:22px 15px;display:flex;flex-direction:column}
.academy-path-figure span{font:600 13px Outfit,Arial,sans-serif;color:#77964f}
.academy-path-figure strong{font:600 22px/1.2 Outfit,Arial,sans-serif;letter-spacing:-.035em;margin-top:auto}
.academy-question-figure{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.academy-question-figure>div{padding:35px}
.academy-question-figure>div span{display:block;font:600 13px Outfit,Arial,sans-serif;color:#789650;margin-bottom:25px}
.academy-question-figure>div strong{font:500 clamp(34px,3.3vw,50px)/1.1 Outfit,Arial,sans-serif;letter-spacing:-.055em}
.academy-question-figure ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.academy-question-figure li{background:#fff;padding:15px 20px;font:500 15px Outfit,Arial,sans-serif;color:#2b3029!important}
.academy-library-figure{background:#f1f3ed}
.academy-library-header{display:flex;flex-direction:column;gap:12px;margin-bottom:27px}
.academy-library-header span{font:600 12px Outfit,Arial,sans-serif;color:#77964f}
.academy-library-header strong{font:600 clamp(28px,3vw,40px)/1.1 Outfit,Arial,sans-serif;letter-spacing:-.045em}
.academy-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.academy-library-grid article{min-height:205px;padding:22px;background:#fff;border-top:4px solid #a2c75d;display:flex;flex-direction:column;gap:14px}
.academy-library-grid span{font:600 12px Outfit,Arial,sans-serif;color:#75934a}
.academy-library-grid strong{font:600 21px/1.2 Outfit,Arial,sans-serif;letter-spacing:-.035em}
.academy-library-grid small{font:400 12px/1.4 Outfit,Arial,sans-serif;color:#66705f;margin-top:auto}
.academy-lesson-figure{padding:0;display:grid;grid-template-columns:31% 1fr;min-height:420px;background:#fff;box-shadow:0 10px 35px #1d251617}
.academy-lesson-sidebar{padding:31px 21px;background:#e9f0df;display:flex;flex-direction:column;gap:20px}
.academy-lesson-sidebar strong{font:600 20px Outfit,Arial,sans-serif;letter-spacing:-.035em;margin-bottom:15px}
.academy-lesson-sidebar span{font:500 12px Outfit,Arial,sans-serif}
.academy-lesson-main{padding:35px 40px}
.academy-lesson-main>span{font:600 11px Outfit,Arial,sans-serif;color:#78974e}
.academy-lesson-main>strong{display:block;font:600 29px Outfit,Arial,sans-serif;letter-spacing:-.04em;margin:13px 0 22px}
.academy-lesson-video{height:200px;background:linear-gradient(135deg,#dbe8c6,#a5c26f);display:grid;place-items:center}
.academy-lesson-video b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:#648538;font-size:19px}
.academy-lesson-main p{font-size:13px!important;margin:17px 0 0!important;color:#596451!important}
.academy-reflection-figure{background:#e7eee0}
html[data-theme="dark"] .digital-case .digital-hero p.case-deck{color:#bdbdbd}
html[data-theme="dark"] .digital-case .case-content p{color:#c8c8c8}
@media(max-width:900px){.audience-figure{grid-template-columns:repeat(2,1fr)}.audience-card{min-height:210px}.academy-path-figure{grid-template-columns:repeat(3,1fr)}.academy-path-figure div{min-height:175px}}
@media(max-width:760px){.digital-case .digital-hero{padding:66px 0 75px}.digital-hero-copy{margin-bottom:32px}.digital-hero-frame{min-height:0}.digital-window-bar{height:50px;padding:0 18px}.digital-window-bar span:last-child{font-size:10px}.website-hero-art,.academy-hero-inner{grid-template-columns:1fr}.website-hero-art>div{padding:36px}.website-hero-art img{height:300px}.academy-hero-inner{padding:35px;gap:24px}.academy-hero-intro strong{font-size:62px}.digital-figure{padding:24px;min-height:0}.website-photo-figure,.journey-figure{padding:0;grid-template-columns:1fr}.website-photo-figure img,.journey-figure img{height:280px}.website-photo-figure>div{padding:33px}.journey-steps{padding:22px 32px}.responsive-figure{min-height:350px}.academy-question-figure{grid-template-columns:1fr}.academy-question-figure>div{padding:15px}.academy-library-grid{grid-template-columns:1fr}.academy-library-grid article{min-height:160px}.academy-lesson-figure{grid-template-columns:1fr}.academy-lesson-sidebar{display:none}}
@media(max-width:480px){.digital-tile{padding:18px}.website-tile-window,.academy-tile-window{width:100%;height:88%}.website-tile-nav,.academy-tile-nav{padding:0 13px;height:43px}.website-tile-nav span,.academy-tile-nav span{font-size:7px}.website-tile-body{height:calc(100% - 43px)}.website-tile-body>div{padding:24px 13px}.website-tile-body strong{font-size:22px}.website-tile-body span{font-size:9px}.website-tile-body b{font-size:8px;padding:8px}.academy-tile-heading{padding:19px 17px 15px}.academy-tile-heading strong{font-size:27px}.academy-tile-courses{padding:0 17px;gap:5px}.academy-tile-courses div{min-height:115px;padding:11px 8px}.academy-tile-courses strong{font-size:10px}.academy-tile-courses small{font-size:8px}.digital-case .digital-hero h1{font-size:54px}.digital-case .digital-hero p.case-deck{font-size:17px}.digital-window-bar span:last-child{display:none}.website-hero-art strong{font-size:42px}.website-hero-art img{height:220px}.academy-hero-intro strong{font-size:55px}.academy-hero-cards strong{font-size:18px}.audience-figure{gap:8px}.audience-card{min-height:160px;padding:13px}.audience-card strong{font-size:19px}.audience-card small{font-size:10px}.academy-path-figure{grid-template-columns:repeat(2,1fr);gap:8px}.academy-path-figure div{min-height:145px}.academy-path-figure strong{font-size:17px}.academy-lesson-main{padding:25px}.academy-lesson-main>strong{font-size:23px}.reflection-figure,.academy-reflection-figure{padding:28px}.reflection-figure strong,.academy-reflection-figure strong{font-size:34px}}
@media(prefers-reduced-motion:reduce){.website-tile-window,.academy-tile-window{transition:none}}

/* Axon exports are 1728 × 1117. Let the frame follow the image. */
.feature-image.portfolio-scene.scene-desktop.scene-full{height:auto;aspect-ratio:1728/1117;padding:0;background:transparent}
.feature-image.portfolio-scene.scene-desktop.scene-full img{width:100%;height:100%;max-height:none;object-fit:contain;transform:none;border-radius:0;box-shadow:none}
.case-page .case-graphic.portfolio-scene.scene-desktop.scene-full,
.case-page .case-media-slot.portfolio-scene.scene-desktop.scene-full{display:block;aspect-ratio:1728/1117;min-height:0;padding:0;background:transparent;overflow:hidden}
.case-page .case-graphic.portfolio-scene.scene-desktop.scene-full img,
.case-page .case-media-slot.portfolio-scene.scene-desktop.scene-full img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0;box-shadow:none}
@media(max-width:760px){.case-page .case-graphic.portfolio-scene.scene-desktop.scene-full,.case-page .case-media-slot.portfolio-scene.scene-desktop.scene-full{aspect-ratio:1728/1117;min-height:0}}

/* Genuine imagery from the public ChargerGoGo and Academy sites. */
.feature-image.digital-tile.actual-photo-tile{display:block;padding:0;background:#e9ebe7}
.actual-photo-tile>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.feature:hover .actual-photo-tile>img{transform:scale(1.035)}
.actual-photo-tile .photo-corner{position:absolute;left:23px;bottom:23px;background:#fff;color:#1b1b1b;padding:12px 16px;font:600 17px Outfit,Arial,sans-serif;letter-spacing:-.03em;box-shadow:0 8px 24px #0002}
.actual-photo-tile.academy-photo-tile>img{object-position:42% center}
.digital-hero-frame.actual-media-frame{min-height:0;background:transparent;box-shadow:none}
.actual-media-frame>img{display:block;width:100%;height:auto;aspect-ratio:16/8.6;object-fit:cover}
.academy-media-frame>img{object-position:center 38%}
.actual-media-caption{display:block;margin-top:12px;font:400 12px/1.4 Outfit,Arial,sans-serif;color:#666}
.digital-figure.actual-image-figure{padding:0;min-height:0;background:transparent}
.actual-image-figure img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover}
.academy-category-figure{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;background:transparent;padding:0;min-height:0}
.academy-category-figure>div{background:#f3f4f1;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:17px}
.academy-category-figure img{width:85px;height:85px;object-fit:contain}
.academy-category-figure span{font:500 16px Outfit,Arial,sans-serif}
.academy-category-figure-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.academy-actual-resource{min-height:250px;display:flex;align-items:center;gap:30px;background:#f3f4f1}
.academy-actual-resource img{display:block;width:100px;height:100px;object-fit:contain}
.academy-actual-resource figcaption{font:600 22px/1.2 Outfit,Arial,sans-serif}
html[data-theme="dark"] .academy-category-figure>div{background:#30302f}
html[data-theme="dark"] .academy-actual-resource{background:#30302f;color:#fff}
html[data-theme="dark"] .actual-media-caption{color:#aaa}
@media(max-width:760px){.academy-category-figure,.academy-category-figure-three{grid-template-columns:repeat(2,1fr)}.actual-media-frame>img{aspect-ratio:4/3}}

/* Keep the About portrait secondary to the introduction. */
.about-layout{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:clamp(48px,7vw,112px)}
.about-art.about-portrait{width:100%;max-width:320px}
@media(max-width:760px){.about-layout{grid-template-columns:1fr;gap:36px}.about-art.about-portrait{width:min(58vw,260px);max-width:260px}}

/* The relationship comes from the grouped cards; avoid awkward connector lines. */
.relationship-core::after,.relationship-projects::before,.relationship-projects a::before{display:none}
.relationship-projects span{min-height:2.9em}
@media(max-width:760px){
  .project-relationship{margin:-8px 0 36px}
  .relationship-core{width:100%;max-width:none;margin:0 0 12px;padding:12px 15px;border-radius:10px;text-align:left}
  .relationship-projects{grid-template-columns:minmax(0,1fr);gap:8px;padding:0;border:0}
  .relationship-projects a{min-height:0;padding:13px 15px;gap:4px}
  .relationship-projects span{min-height:0;max-width:34ch}
}


/* Present every selected project as a full-width vertical sequence. */
.personal-home .feature-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:64px;overflow:visible;padding:0;scroll-snap-type:none;overscroll-behavior:initial}
.personal-home .feature{display:block;width:100%;min-width:0;flex:none;scroll-snap-align:none}
.personal-home .feature-host{grid-column:auto}
.personal-home .feature-image,.personal-home .feature-host .feature-image{height:clamp(360px,45vw,620px)}
@media(max-width:760px){
 .personal-home .feature-grid{gap:42px}
 .personal-home .feature-image,.personal-home .feature-host .feature-image{height:clamp(260px,70vw,410px)}
}




/* Keep project names as the consistent primary heading across all five case studies. */
.case-page .case-hero h1,.digital-case .digital-hero h1{font:500 clamp(48px,6vw,76px)/1.08 Outfit,Arial,sans-serif;letter-spacing:-.055em;margin:0 0 20px;max-width:1080px}
.case-page .case-hero .case-story-title{font:400 clamp(20px,2.5vw,28px)/1.35 Outfit,Arial,sans-serif;letter-spacing:-.025em;color:#c8c8c8;margin:0 0 16px;max-width:920px}
html:not([data-theme="dark"]) .case-page .case-hero .case-story-title{color:#555}