.team-nav{position:relative;z-index:2}
.team-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:clamp(130px,17vw,330px) 0 60px}
.team-hero::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:transparent;z-index:-1}
.team-art{display:block;width:min(55vw,1080px);max-width:none;height:auto;object-fit:contain}
.team-stats{justify-content:center;gap:32px;margin-top:18px;padding:24px 32px;background:transparent}
@media(max-width:1023px){.team-art{width:82vw}.team-hero{padding-top:100px}}
@media(max-width:600px){
 .team-hero{padding-top:72px;padding-bottom:48px}
 .team-art{width:100vw}
 .team-stats{gap:8px;padding:24px 12px;flex-wrap:nowrap;width:100vw;margin-top:14px}
 .team-stats>div.flex{gap:8px}
 .team-stats .w-10{width:32px;height:32px}
 .team-stats>.w-px{height:36px}
}
@media(max-width:360px){.team-stats{gap:4px;padding-inline:10px}.team-stats>div.flex{gap:5px}}

.team-hero>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Shared charcoal taken from the illustration, scoped to the homepage. */
.portfolio-home>.bg-black{background:#16161b}
.portfolio-home>.bg-black>.fixed.inset-0{display:none}
.portfolio-home .team-nav,.portfolio-home .team-hero,.portfolio-home .team-stats{background:transparent}
.portfolio-home .team-art{-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.portfolio-home footer{border-color:rgba(255,255,255,.08)}

.team-visual{position:relative;width:min(55vw,1080px)}.team-visual .team-art{width:100%}.uxd-stage{position:absolute;inset:0;overflow:visible}.uxd-stage canvas{display:block;width:100%;height:100%}@media(max-width:1023px){.team-visual{width:82vw}}@media(max-width:600px){.team-visual{width:100vw}}

/* One continuous, full-width header backdrop, including the navigation. */
.portfolio-home .team-hero::before{top:-128px;bottom:0;background:#16161b}

.uxd-hero-canvas{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;z-index:1;pointer-events:none}.team-hero{overflow:visible}

.team-hero{padding-top:90px}
.team-headline{position:relative;z-index:2;font-family:'MuseoModerno',sans-serif;font-size:clamp(24px,3vw,44px);font-weight:400;line-height:1.6;letter-spacing:-.025em;color:#b8b8bc;text-align:center;margin:0 0 150px;padding:0 20px;pointer-events:none}
.team-headline span{display:block}
@media(max-width:600px){.team-hero{padding-top:60px}.team-headline{font-size:clamp(20px,5.8vw,28px);margin-bottom:110px;letter-spacing:-.03em;padding-inline:12px}}

/* Compact hero; candy can pass in front of the headline. */
.team-hero{padding-top:32px;padding-bottom:36px}
.team-headline{margin-bottom:40px;z-index:0;line-height:1.45}
.uxd-hero-canvas{z-index:1}
@media(max-width:600px){.team-hero{padding-top:24px;padding-bottom:28px}.team-headline{margin-bottom:36px}}

.hero-night-sky{position:absolute;top:-114px;left:calc(50% - 50vw);width:100vw;height:calc(100% + 114px);z-index:-1;pointer-events:none;opacity:.85;mask-image:linear-gradient(#000 0%,#000 25%,transparent 72%);-webkit-mask-image:linear-gradient(#000 0%,#000 25%,transparent 72%)}

/* Shared cinematic sky and illustration blend as one scene. */
.portfolio-home .team-hero::before{top:-114px;background-color:#16161b;background-image:linear-gradient(to bottom,rgba(22,22,27,.06),rgba(22,22,27,.08) 28%,#16161b 78%),url('/media/storm-sky.png');background-size:cover;background-position:center top;background-repeat:no-repeat}
.hero-night-sky{opacity:.55}
.portfolio-home .team-art{mix-blend-mode:lighten}
@media(max-width:600px){.portfolio-home .team-hero::before{background-size:auto 650px;background-position:65% top}}

/* Two-column hero on a clean charcoal backdrop. */
.portfolio-home .team-hero::before{background:#16161b}
.portfolio-home .team-art{mix-blend-mode:normal}
.team-hero{display:grid;grid-template-columns:.85fr 1.2fr;grid-template-rows:1fr auto;column-gap:40px;align-items:center;min-height:570px;padding:100px 0 80px}
.team-headline{grid-column:1;grid-row:1;text-align:left;padding:0;margin:0;align-self:end;font-size:clamp(28px,2.6vw,40px);line-height:1.4}
.team-visual{grid-column:2;grid-row:1 / span 2;width:100%;align-self:center}
.team-stats{grid-column:1;grid-row:2;justify-content:flex-start;gap:16px;padding:24px 0 0;margin-top:16px;align-self:start;flex-wrap:nowrap}
.team-stats>div.flex{gap:8px}.team-stats .w-10{width:32px;height:32px}
.uxd-hero-canvas{top:-114px;height:calc(100% + 114px)}
@media(max-width:900px){.team-hero{grid-template-columns:1fr;padding-top:36px;padding-bottom:36px;gap:32px;min-height:0}.team-headline{grid-column:1;grid-row:1;align-self:start;font-size:clamp(28px,4vw,40px)}.team-visual{grid-column:1;grid-row:2;width:min(100%,760px);justify-self:center;margin-top:40px}.team-stats{grid-column:1;grid-row:3;justify-content:center;align-self:start;padding:8px 0;margin:0;width:100%}}
@media(max-width:600px){.team-hero{padding-top:24px;gap:24px}.team-headline{font-size:28px}.team-visual{width:100%;margin-top:24px}.team-stats{gap:8px}.team-stats>div.flex{gap:8px}}

/* Reference typography and balanced two-column composition. */
.team-hero{grid-template-columns:1fr 1.2fr;column-gap:56px;min-height:570px;padding-top:88px;padding-bottom:72px}
.team-headline{font-size:inherit;line-height:1.25;align-self:end;color:#b8b8bc}
.team-headline .hero-intro{font-family:'Lato',sans-serif;font-weight:400;font-style:normal;font-size:clamp(26px,2.55vw,40px);letter-spacing:-.015em;margin-bottom:16px}
.team-headline .hero-passion{font-family:'MuseoModerno',sans-serif;font-weight:900;font-style:italic;font-size:clamp(30px,2.75vw,46px);line-height:1.25;letter-spacing:-.035em;white-space:nowrap}
.team-headline .hero-loves{display:inline;color:#f58216}
.team-stats{margin-top:24px;padding-top:8px;gap:20px}
@media(max-width:900px){.team-hero{grid-template-columns:1fr;gap:32px;padding-top:36px;padding-bottom:36px;min-height:0}.team-headline .hero-intro{font-size:30px}.team-headline .hero-passion{font-size:38px}.team-stats{margin-top:0}}
@media(max-width:600px){.team-hero{gap:24px;padding-top:24px}.team-headline .hero-intro{font-size:25px;margin-bottom:12px}.team-headline .hero-passion{font-size:clamp(25px,7vw,36px);white-space:normal}.team-stats{gap:8px}}

@media(min-width:901px){.team-headline,.team-stats{transform:translateY(-80px)}}

/* Homepage refinement: consistent rhythm and a single aligned introduction. */
.portfolio-home .max-w-7xl{max-width:1200px}
.team-nav{padding-top:28px;padding-bottom:28px}
.team-hero{grid-template-columns:1.05fr 1.15fr;grid-template-rows:auto;gap:28px;min-height:540px;padding:70px 0 64px}
.hero-copy{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:0}
.team-headline,.team-stats{transform:none}
.team-headline{margin:0;color:#e4e3e5}
.team-headline .hero-intro{font-size:clamp(19px,1.65vw,24px);color:#aaa9b0;letter-spacing:-.02em;margin-bottom:14px}
.team-headline .hero-passion{font-size:clamp(31px,3.1vw,44px);line-height:1.2;letter-spacing:-.045em;white-space:normal;text-wrap:balance;max-width:540px}
.team-visual{grid-column:2;grid-row:1;width:110%;max-width:720px;justify-self:center;margin:0}
.team-stats{margin:36px 0 0;padding:0;gap:18px;width:auto;justify-content:flex-start}
.team-stats .text-2xl{font-size:19px;line-height:1.3}
.team-stats .text-xs{font-size:10px;letter-spacing:.06em;line-height:1.7}
.team-stats>.w-px{height:30px;background:rgba(255,255,255,.08)}
.team-stats .w-10{width:30px;height:30px;border-radius:10px}
.portfolio-work{padding-top:48px;padding-bottom:64px;border-top:1px solid rgba(255,255,255,.07)}
.portfolio-work>.flex{margin-bottom:36px}
.portfolio-work h2{font-size:clamp(28px,3vw,40px);line-height:1.2}
.portfolio-work>.space-y-6>a{margin-top:28px}
.portfolio-work>.space-y-6>a:first-child{margin-top:0}
.portfolio-work a>div{background:rgba(255,255,255,.015);border-color:rgba(255,255,255,.08);border-radius:20px;transition:background .25s,border-color .25s,transform .25s}
.portfolio-work a:hover>div{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.16);transform:translateY(-3px)}
.portfolio-work .bg-gradient-to-r{display:none}
.portfolio-work h3{font-size:clamp(24px,2.2vw,30px);line-height:1.3}
.portfolio-work p{color:#a5a5ad;line-height:1.65}
.portfolio-work .rounded-full{background:transparent}
.portfolio-expertise{padding-top:56px;padding-bottom:64px}
.portfolio-expertise p{color:#9b9ba5;line-height:1.7}
.portfolio-home footer{padding-top:40px;padding-bottom:40px}
@media(max-width:900px){.team-hero{grid-template-columns:1fr;gap:32px;padding:40px 0 48px;min-height:0}.hero-copy{grid-column:1;grid-row:1}.team-visual{grid-column:1;grid-row:2;width:100%;max-width:680px;margin-top:24px}.team-headline .hero-passion{max-width:650px;font-size:clamp(32px,5vw,42px)}.team-stats{margin-top:28px}.portfolio-work{padding-top:36px}}
@media(max-width:600px){.portfolio-home .max-w-7xl{padding-left:24px;padding-right:24px}.team-nav{padding-top:24px;padding-bottom:24px}.team-hero{padding-top:28px;padding-bottom:36px;gap:28px}.team-headline .hero-intro{font-size:18px}.team-headline .hero-passion{font-size:34px;max-width:340px}.team-stats{gap:12px}.team-stats>div.flex{gap:7px}.team-stats .text-2xl{font-size:17px}.team-visual{width:110%;margin-top:18px}.portfolio-work>.flex{margin-bottom:28px}.portfolio-work a>div{border-radius:16px}.portfolio-expertise{padding-top:36px}}
@media(prefers-reduced-motion:reduce){.portfolio-work a:hover>div{transform:none}}

/* Give the hero illustration more presence without extending the header. */
@media(min-width:901px){.team-hero{grid-template-columns:.95fr 1.25fr;gap:24px}.team-visual{width:120%;max-width:820px}}
@media(min-width:601px) and (max-width:900px){.team-visual{width:110%;max-width:760px}}
@media(max-width:600px){.team-visual{width:116%}}

.portfolio-home .team-headline .hero-intro{font-weight:400!important;font-synthesis:none}
.portfolio-home .team-headline .hero-intro strong,.portfolio-home .team-headline .hero-intro b{font-weight:400}

/* Image-led project gallery: one flagship followed by a quiet, paired collection. */
.portfolio-work{padding-top:72px;padding-bottom:88px}
.portfolio-work>.flex{margin-bottom:48px;align-items:flex-end}
.portfolio-work>.flex h2{font-size:clamp(36px,4.6vw,60px);font-weight:500;letter-spacing:-.055em;line-height:1.1}
.portfolio-work>.flex .text-xs{font-size:10px;letter-spacing:.22em;margin-bottom:18px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:72px}
.work-project{display:block;min-width:0;color:inherit;text-decoration:none;outline-offset:10px}
.work-project:first-child{grid-column:1/-1}
.portfolio-work .work-project>div,.portfolio-work .work-project:hover>div{background:transparent;border:0;border-radius:0;transform:none}
.portfolio-work .work-project .work-image{position:relative;aspect-ratio:879/472;overflow:hidden;border-radius:8px;background:#22232a;isolation:isolate}
.work-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.3,1);will-change:transform}
.work-project:hover .work-image img{transform:scale(1.025)}
.work-open{position:absolute;right:20px;bottom:20px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f6f5f1;color:#23242b;box-shadow:0 3px 12px #0001;transition:transform .3s}
.work-project:hover .work-open{transform:rotate(45deg)}
.portfolio-work .work-caption{padding-top:25px;display:block}
.work-meta{display:flex;gap:16px;align-items:center;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.14em;color:#a5a5ad;margin-bottom:12px}
.work-index{font-variant-numeric:tabular-nums;opacity:.55}
.portfolio-work .work-project h3{font-size:clamp(24px,2.3vw,31px);font-weight:500;line-height:1.25;letter-spacing:-.04em;margin:0;max-width:590px;text-wrap:balance}
.work-tags{display:flex;flex-wrap:wrap;gap:5px 0;margin-top:16px;font-size:10px;line-height:1.6;color:#8e8e99}
.work-tags span+span::before{content:'/';padding:0 8px;opacity:.4}
.portfolio-work .work-summary p{font-size:14px;line-height:1.75;color:#a5a5ad;margin:18px 0 0;max-width:520px}
.portfolio-work .work-summary p span{color:inherit!important;font-weight:inherit!important}
.work-cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:11px;line-height:1.5;color:#dedee2}
.work-cta svg{transition:transform .25s}
.work-project:hover .work-cta svg{transform:translate(3px,-3px)}
.work-project:first-child .work-caption{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding-top:30px}
.portfolio-work .work-project:first-child h3{font-size:clamp(30px,3vw,42px)}
.portfolio-work .work-project:first-child .work-summary p{margin-top:0;font-size:16px}
.work-project:focus-visible{outline:2px solid #f58216;border-radius:8px}
html[data-theme=light] .portfolio-work .work-project>div,html[data-theme=light] .portfolio-work .work-project:hover>div{background:transparent;border:0}
html[data-theme=light] .portfolio-work .work-project .work-image{background:#e9e8e4}
html[data-theme=light] .work-meta,html[data-theme=light] .work-tags{color:#686a73}
html[data-theme=light] .work-cta{color:#23242b}
@media(max-width:900px){.work-grid{column-gap:28px;row-gap:56px}.work-project:first-child .work-caption{gap:32px}.portfolio-work{padding-top:48px}.portfolio-work .work-project h3{font-size:25px}}
@media(max-width:600px){.portfolio-work{padding-top:40px;padding-bottom:48px}.portfolio-work>.flex{margin-bottom:32px}.work-grid{grid-template-columns:1fr;row-gap:44px}.work-project:first-child{grid-column:auto}.work-project:first-child .work-caption{display:block;padding-top:22px}.portfolio-work .work-project:first-child h3,.portfolio-work .work-project h3{font-size:26px}.portfolio-work .work-project:first-child .work-summary p{font-size:14px;margin-top:18px}.work-open{right:12px;bottom:12px;width:38px;height:38px}.portfolio-work .work-caption{padding-top:22px}.work-tags{margin-top:12px}.work-cta{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.work-image img,.work-open,.work-cta svg{transition:none}.work-project:hover .work-image img,.work-project:hover .work-open,.work-project:hover .work-cta svg{transform:none}}
/* Show the product craft itself, using existing case-study imagery. */
.portfolio-work .work-project .work-image-google-meet-chat-integration{background:#252a32}
.work-image-google-meet-chat-integration img{object-fit:contain;padding:5% 8%}
.portfolio-work .work-project .work-image-sp-global-ratings-dashboard{background:#e9edf1}
.work-image-sp-global-ratings-dashboard img{object-fit:contain;padding:6%}
.portfolio-work .work-project .work-image-youtube-in-google-meet-android{background:#000}
.work-image-youtube-in-google-meet-android img{object-fit:contain;padding:3%}
html[data-theme=light] .portfolio-work .work-project .work-image-google-meet-chat-integration{background:#dfe5eb}
html[data-theme=light] .portfolio-work .work-project .work-image-youtube-in-google-meet-android{background:#000}