/* The animation belongs to the whole introduction, behind its content. */
.portfolio-page{position:relative;isolation:isolate;background:#0b0b12}
.hero-backdrop{position:absolute;z-index:-1;top:0;left:0;width:100%;height:850px;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%)}
.hero-backdrop::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 83% 30%,#673aff24 0%,transparent 48%),radial-gradient(ellipse at 58% 65%,#00ffc210 0%,transparent 42%)}
.hero-backdrop canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:.9;mask-image:linear-gradient(90deg,transparent 0%,#00000014 25%,#00000050 47%,#000 70%)}
.site-header,.hero{position:relative}
.site-header{background:transparent}
.hero-topline{gap:15px;flex-wrap:wrap}
.hero-copy{max-width:760px}
.hero-description{max-width:550px;line-height:1.85}
.hero .accent,.contact-section .accent{background:linear-gradient(115deg,#80ff00 10%,#00ffc2 95%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero h1{font-size:clamp(76px,8.5vw,132px)}
.button-dark{background:linear-gradient(115deg,#80ff00 0%,#39ff79 100%);color:#071008;box-shadow:0 0 26px #80ff0010}
.button-dark:hover{background:linear-gradient(115deg,#adff48 0%,#00ffc2 100%);color:#071008}
.featured-project{background:radial-gradient(ellipse at 0% 0%,#8862ff12,transparent 65%),linear-gradient(120deg,#15131f,#10171a);border-color:#3e394f}
.scope-map{gap:10px}.scope-map>i{min-width:9px}
.lavender{color:#b89aff}
.contact-reveal{color:#80ff00}
.contact-reveal:hover{color:#00ffc2;border-color:#00ffc2}
.hero-foot{flex-wrap:wrap;gap:15px}
.toolbox dl>div{grid-template-columns:175px 1fr}
.experience li{grid-template-columns:145px 1fr 1.2fr}
.section-heading{grid-template-columns:1fr 1.6fr 1.1fr}
.site-footer>div{gap:25px}
@media(min-width:1600px){.hero-main{padding-block:105px}.hero-backdrop{height:930px}}
@media(max-width:1100px){.hero h1{font-size:9vw}.hero-backdrop{height:800px}.hero-copy{max-width:680px}.section-heading{grid-template-columns:1fr 2fr}.hero-description{max-width:500px}.toolbox dl>div{grid-template-columns:155px 1fr}.experience li{grid-template-columns:135px 1fr 1.1fr}}
@media(max-width:760px){.hero-backdrop{height:800px}.hero-backdrop canvas{opacity:.46;mask-image:linear-gradient(90deg,#00000014 0%,#00000050 55%,#000 100%)}.hero-backdrop::before{background:radial-gradient(ellipse at 100% 30%,#744aff26,transparent 60%),radial-gradient(ellipse at 80% 60%,#00ffc20e,transparent 65%)}.hero h1{font-size:clamp(66px,13.5vw,100px)}.hero-copy{max-width:none}.hero-description{max-width:520px;font-size:17px}.hero-actions{gap:28px}.hero-topline .eyebrow,.location{font-size:12px}.hero-topline{align-items:center;gap:10px}.location{gap:7px}.hero-foot{font-size:12px;padding-block:22px}.hero-foot a{display:none}.section-heading{grid-template-columns:1fr}.scope-map{font-size:12px}.project-row-title>.eyebrow{font-size:12px}.toolbox dl>div{grid-template-columns:1fr}.experience li{grid-template-columns:115px 1fr}.experience li>span:first-child{font-size:12px}.experience li>span:last-child{font-size:13px}.experience>div{gap:15px;align-items:start;flex-wrap:wrap}.site-footer{font-size:13px;gap:13px 18px}.site-footer>p{font-size:12px}.site-footer>div{width:100%;margin-left:0;justify-content:space-between;font-size:13px}.contact-top>p:last-child{font-size:13px;max-width:165px}.contact-top{gap:18px}.contact-top .eyebrow{font-size:12px}.contact-bottom>p{font-size:15px}.copy-email,.copy-status{font-size:12px}.tags li{font-size:11px}.work-note{font-size:13px}}
@media(max-width:380px){.hero h1{font-size:clamp(48px,16.4vw,60px)}.hero-backdrop{height:850px}.hero-topline .eyebrow{font-size:11px}.location{font-size:11px}.site-header nav{font-size:12px;gap:13px}.hero-actions{gap:18px}.hero-actions .text-link{font-size:13px;gap:8px}.hero-actions .button{font-size:13px;gap:18px;padding-inline:14px}.project-intro>.eyebrow{font-size:11px}.scope-map{font-size:11px;gap:6px}.scope-map>span{gap:5px}.scope-map>i{min-width:5px}.contact-top{flex-wrap:wrap;gap:16px}.contact-top>p:last-child{max-width:none}}
@media(prefers-reduced-motion:reduce){.hero-backdrop canvas{opacity:.55}}
.hero-topline .eyebrow,.eyebrow,.project-intro>.eyebrow,.project-row-title>.eyebrow,.project-number,.project-index,.tags li,.scope-map{font-size:12px}
.hero-backdrop canvas{--field-mask-x:linear-gradient(90deg,transparent 0%,#00000014 25%,#00000050 47%,#000 70%);mask-image:var(--field-mask-x),linear-gradient(180deg,#00000010 0%,#00000030 16%,#000 34%);mask-composite:intersect}
@media(max-width:760px){.hero-backdrop canvas{--field-mask-x:linear-gradient(90deg,#00000014 0%,#00000050 55%,#000 100%)}}
