@font-face{font-family:Manrope;src:url('assets/manrope.woff2') format('woff2');font-weight:400 600;font-display:swap}
:root{color-scheme:dark;--ink:#080909;--paper:#f4f0e8;--muted:#aaa69d;--gold:#c5a059;font-family:Manrope,Arial,sans-serif;background:var(--ink);color:var(--paper)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--gold);outline-offset:8px}a:hover{color:var(--gold)}.wrap{width:min(1440px,88%);margin-inline:auto}header{height:100px;display:flex;justify-content:space-between;align-items:center;gap:24px}.name{font-size:17px;font-weight:600}.name span{display:block;font-size:10px;letter-spacing:.2em;margin-top:6px;color:var(--muted)}nav{display:flex;gap:48px;font-size:13px}nav a{padding-block:12px}.gold{color:var(--gold)}.hero{display:grid;grid-template-columns:.85fr 1.3fr;gap:7%;align-items:center;padding-top:55px;padding-bottom:130px}.hero h1{font-size:clamp(58px,6.7vw,106px);font-weight:400;line-height:1.04;letter-spacing:-.065em;margin:0 0 48px}.hello{font-size:22px;line-height:1.6;color:var(--muted);margin:0 0 48px}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--gold);padding:17px 0;min-height:52px;font-size:15px;transition:color .2s,transform .2s}.cta span{color:var(--gold);font-size:22px}.cta:active{transform:translateY(1px)}figure{margin:0}figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;min-height:0;object-fit:cover;object-position:50% 60%}h2,h3,p{margin-top:0}h2{font-weight:400;font-size:clamp(42px,4.7vw,72px);line-height:1.12;letter-spacing:-.05em}p{font-size:17px;line-height:1.85;color:var(--muted);max-width:51ch}.label{font-size:13px;color:var(--muted)}.personal{display:grid;grid-template-columns:1fr 1.45fr;gap:12%;padding-block:160px 210px;border-top:1px solid #292a28}.personal h2{margin-bottom:48px}.personal .large{color:var(--paper);font-size:25px;line-height:1.6;max-width:33ch}.services{display:grid;grid-template-columns:1fr 1fr;gap:13%;padding-block:110px 150px}.services h2{position:sticky;top:90px;align-self:start}.service-list article{padding-bottom:100px}.service-list article:last-child{padding-bottom:0}h3{font-size:29px;font-weight:400;letter-spacing:-.035em;line-height:1.3;margin-bottom:25px}.detail{font-size:13px;color:var(--gold);margin-top:25px}.honesty{padding-block:170px 200px;border-top:1px solid #292a28}.honesty h2{font-size:clamp(36px,4.5vw,68px);max-width:24ch;line-height:1.25;margin-bottom:60px}.honesty p{margin-left:auto;max-width:48ch}.meeting{padding-block:130px 140px;border-top:1px solid #292a28}.meeting h2{font-size:clamp(64px,8vw,120px);margin-block:40px 60px}.meeting-bottom{display:flex;align-items:center;justify-content:space-between;gap:50px}.meeting-bottom p{max-width:36ch;margin-bottom:0}.email{display:inline-block;font-size:14px;color:var(--muted);margin-top:50px}footer{display:flex;justify-content:space-between;border-top:1px solid #292a28;padding-block:32px 45px;color:var(--muted);font-size:12px}.skip{position:absolute;left:20px;top:-100px;background:var(--paper);color:var(--ink);padding:16px;z-index:10}.skip:focus{top:16px}
@media(min-width:1600px){.hero{padding-top:80px}}
@media(max-width:900px){.wrap{width:88%}nav{gap:24px}nav a:first-child{display:none}.hero{grid-template-columns:1fr;gap:70px;padding-bottom:100px}.hero h1{font-size:clamp(46px,7vw,68px)}figure img{min-height:0;height:auto;aspect-ratio:1/1;object-position:50% 60%}.personal{gap:6%;padding-block:100px 130px}.services{gap:8%;padding-block:70px 100px}.honesty{padding-block:110px}.meeting{padding-block:90px}.meeting-bottom{align-items:flex-start;flex-direction:column;gap:24px}}
@media(max-width:600px){header{height:90px}.name{font-size:14px}nav{font-size:11px;max-width:145px}.hero{grid-template-columns:1fr;padding-top:55px;gap:70px;padding-bottom:90px}.hero h1{font-size:clamp(48px,12vw,72px);margin-bottom:32px}.hello{font-size:20px;margin-bottom:28px}figure img{height:auto;min-height:0;max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:50% 60%}.personal{grid-template-columns:1fr;gap:35px;padding-block:80px 110px}.personal .large{font-size:22px}.personal h2{margin-bottom:35px}.services{grid-template-columns:1fr;gap:65px;padding-block:25px 100px}.services h2{position:static}.service-list article{padding-bottom:70px}h3{font-size:27px}p{font-size:16px}.honesty{padding-block:90px}.honesty h2{font-size:36px}.meeting h2{font-size:clamp(52px,12vw,72px)}footer{gap:24px;font-size:11px}.cta{font-size:14px}.meeting{padding-bottom:90px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Photographic opening: original photo, with CSS shading for readable copy. */
header.wrap{position:absolute;inset:0 0 auto;z-index:3}
.hero.wrap{position:relative;isolation:isolate;width:100%;max-width:none;min-height:900px;min-height:max(820px,100svh);display:flex;align-items:center;padding:170px 6% 160px;margin:0;overflow:hidden}
.hero figure{position:absolute;inset:0;z-index:-2}
.hero figure img{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:50% 59%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#080909 0%,#08090970 12%,transparent 30%,transparent 66%,#080909a6 88%,#080909 100%),linear-gradient(90deg,#080909d9 0%,#0809099c 24%,#08090912 53%,transparent 75%),radial-gradient(ellipse at 58% 52%,transparent 30%,#08090935 65%,#080909b3 100%)}
.hero-copy{width:min(47%,650px);padding-bottom:100px}
.hero h1{font-size:clamp(58px,6.7vw,106px)}
.hero .hello{color:var(--paper)}
.hero .cta{color:var(--paper)}
@media(min-width:1600px){.hero.wrap{min-height:1050px}}
@media(max-width:900px){.hero.wrap{min-height:1000px;align-items:flex-start;padding-top:145px;padding-bottom:120px}.hero-copy{width:100%;padding-bottom:0}.hero h1{font-size:clamp(52px,8vw,76px);margin-bottom:24px}.hero .hello{font-size:20px;margin-bottom:18px}.hero figure img{object-position:53% 57%}.hero::after{background:linear-gradient(to bottom,#080909eb 0%,#08090999 23%,#08090920 47%,transparent 63%,#08090960 83%,#080909 100%),radial-gradient(ellipse at 53% 63%,transparent 28%,#08090950 70%,#080909a3 100%)} }
@media(max-width:600px){.hero.wrap{min-height:960px;padding-top:135px;padding-inline:6%}.hero h1{font-size:clamp(48px,12vw,72px)}.hero figure img{object-position:53% 58%}.hero .hello{font-size:18px}.hero .cta{font-size:14px}}
/* Official BLACKTOP logo in the opening navigation. */
header .name{display:block;flex-shrink:0;line-height:0}header .name img{display:block;width:180px;height:auto;max-width:100%}
@media(max-width:600px){header .name img{width:140px}}
/* Preserve official artwork; screen blending removes its black backing visually. */
header .name{mix-blend-mode:screen}header .name img{width:76px;height:76px;object-fit:contain}
@media(max-width:600px){header .name img{width:64px;height:64px}}
header.wrap{mix-blend-mode:screen}
/* Expressive headline: bold, slanted lettering with an uneven underline. */
.hero h1{font-family:'Segoe Print','Comic Sans MS',cursive;font-weight:700;font-style:italic;font-size:clamp(52px,6.2vw,98px);line-height:1.13;letter-spacing:-.065em;transform:rotate(-3deg);transform-origin:left center;position:relative;width:fit-content;text-shadow:1px 1px 0 #f4f0e840;margin-bottom:52px}
.hero h1::after{content:'';display:block;width:81%;height:9px;margin-top:15px;background:var(--gold);clip-path:polygon(0 35%,19% 15%,42% 30%,71% 0,100% 20%,95% 63%,63% 81%,32% 65%,2% 100%);transform:rotate(-1deg)}
@media(max-width:900px){.hero h1{font-size:clamp(48px,7.8vw,74px);margin-bottom:35px}}
@media(max-width:600px){.hero h1{font-size:clamp(40px,10.6vw,62px);letter-spacing:-.07em}.hero h1::after{height:7px}}
/* Dry-brush lettering: fine worn streaks through the live text. */
.hero h1{font-weight:700;transform:rotate(-4deg) skewX(-3deg);text-shadow:none;-webkit-text-stroke:.6px currentColor;filter:url(#headline-grit)}
.hero h1::after{height:12px;width:86%;clip-path:polygon(0 45%,9% 20%,20% 39%,36% 16%,47% 32%,70% 2%,85% 18%,100% 0,95% 45%,79% 67%,68% 53%,43% 87%,26% 66%,6% 100%,9% 65%,0 85%)}
/* Retro terminal headline, replacing the handwritten treatment. */
.hero h1{font-family:'Courier New',Courier,monospace;font-size:clamp(44px,5.5vw,86px);font-style:normal;font-weight:700;letter-spacing:-.065em;line-height:1.18;transform:none;filter:none;-webkit-text-stroke:0;color:var(--paper);text-shadow:0 0 12px #f4f0e824;position:relative;min-height:2.36em;margin-bottom:48px;width:max-content;max-width:100%}
.hero h1::after{content:none}.terminal-text{white-space:pre-wrap}.terminal-cursor{display:inline-block;color:var(--gold);font-size:.72em;vertical-align:.05em;margin-left:.08em;animation:cursor-blink 1s steps(1,end) infinite}.hero h1.is-glitching{animation:terminal-glitch .3s steps(2,end) 1}
@keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes terminal-glitch{0%,100%{transform:none;text-shadow:none}20%{transform:translateX(-2px);text-shadow:3px 0 #c5a059,-2px 0 #77a9a9}40%{transform:translateX(2px) skewX(-2deg);text-shadow:-3px 0 #c5a059,2px 0 #77a9a9}60%{transform:translateX(-1px);text-shadow:2px 1px #c5a059}80%{transform:none;text-shadow:-1px 0 #77a9a9}}
@media(max-width:900px){.hero h1{font-size:clamp(42px,6.7vw,68px);margin-bottom:32px}}
@media(max-width:600px){.hero h1{font-size:clamp(32px,8.7vw,52px);letter-spacing:-.065em}}
@media(prefers-reduced-motion:reduce){.terminal-cursor{animation:none}.hero h1.is-glitching{animation:none}}
@font-face{font-family:VT323;src:url('assets/VT323-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Bitmap-style terminal lettering, retaining the existing typing behavior. */
.hero h1{font-family:VT323,'Courier New',monospace;font-weight:400;font-size:clamp(62px,8vw,122px);line-height:.95;letter-spacing:0;min-height:1.9em;text-shadow:0 0 8px #f4f0e835;font-synthesis:none}
.terminal-cursor{font-family:VT323,monospace;font-size:.85em;vertical-align:0;margin-left:.04em}
@media(max-width:900px){.hero h1{font-size:clamp(58px,9vw,94px)}}
@media(max-width:600px){.hero h1{font-size:clamp(43px,11.5vw,68px);letter-spacing:0}}
.hero .terminal-cursor{font-size:.52em;vertical-align:.04em;margin-left:.08em}
/* Analog CRT signal: scanlines remain confined to the headline. */
@supports(background-clip:text){.hero .terminal-text{background:repeating-linear-gradient(to bottom,#f4f0e8 0px,#f4f0e8 3px,#aaa69d 3px,#aaa69d 4px);background-clip:text;-webkit-background-clip:text;color:transparent}}
.hero h1{position:relative;animation:signal-drift 9s linear infinite}
.hero h1::before{content:attr(data-signal);white-space:pre;position:absolute;inset:0;pointer-events:none;color:#e3c48c;opacity:0;clip-path:inset(40% 0 45% 0)}
.hero h1.is-glitching{animation:analog-interference .8s steps(1,end) both}
.hero h1.is-glitching::before{animation:signal-tear .8s steps(1,end) both}
@keyframes signal-drift{0%,94%,97%,100%{transform:none;opacity:1}95%{transform:translateX(.6px);opacity:.92}96%{transform:translateX(-.6px);opacity:1}}
@keyframes analog-interference{0%,100%{transform:none;filter:none;text-shadow:none}8%{transform:translateX(-2px) skewX(-1deg);filter:blur(.3px);text-shadow:3px 0 #c5a059,-2px 0 #699b9b}19%{transform:translateX(1px);filter:none;text-shadow:none}32%{transform:translateX(-3px) skewX(2deg);text-shadow:4px 0 #c5a05970}43%{transform:none;text-shadow:none}57%{transform:translateX(2px);filter:blur(.5px);text-shadow:-3px 0 #699b9b}66%{transform:none;filter:none;text-shadow:none}82%{transform:translateX(-1px);text-shadow:2px 0 #c5a059}91%{transform:none;text-shadow:none}}
@keyframes signal-tear{0%,100%{opacity:0;transform:none}10%{opacity:.75;clip-path:inset(17% 0 69% 0);transform:translateX(10px)}24%{opacity:0}34%{opacity:.7;clip-path:inset(57% 0 30% 0);transform:translateX(-12px)}46%{opacity:0}58%{opacity:.65;clip-path:inset(76% 0 15% 0);transform:translateX(8px)}70%{opacity:0}83%{opacity:.5;clip-path:inset(32% 0 61% 0);transform:translateX(-6px)}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero h1.is-glitching,.hero h1.is-glitching::before{animation:none}.hero h1::before{display:none}}
.hero .terminal-cursor{transform:scaleX(.35);transform-origin:left center;margin-right:-.2em}

/* Personal introduction in the open right side of the hero. */
.hero .hello{position:absolute;right:5%;top:43%;max-width:15ch;font-size:clamp(18px,1.55vw,24px);line-height:1.65;text-align:left;text-shadow:0 2px 8px #080909;margin:0}
@media(max-width:900px){.hero .hello{top:35%;right:6%;font-size:18px}}
@media(max-width:600px){.hero .hello{top:40%;right:6%;font-size:16px;max-width:14ch}}
/* More breathing room throughout the portfolio. */
.personal{padding-block:220px 270px;column-gap:15%}
.personal h2{margin-bottom:64px}
.personal .large{margin-bottom:40px}
.services{padding-block:150px 220px;column-gap:15%}
.service-list article{padding-bottom:145px}
.service-list article:last-child{padding-bottom:0}
h3{margin-bottom:36px}
.service-list p+p{margin-top:32px}
.honesty{padding-block:220px 260px}
.honesty h2{margin-bottom:90px}
.meeting{padding-block:190px 190px}
.meeting h2{margin-block:55px 90px}
.meeting-bottom{gap:80px}
.email{margin-top:70px}
footer{padding-block:45px 60px}
@media(max-width:900px){.personal{padding-block:150px 180px;column-gap:9%}.services{padding-block:100px 160px;column-gap:10%}.service-list article{padding-bottom:110px}.honesty{padding-block:160px}.meeting{padding-block:140px}.meeting-bottom{gap:45px}}
@media(max-width:600px){.personal{padding-block:110px 150px;gap:50px}.personal h2{margin-bottom:45px}.services{padding-block:50px 140px;gap:85px}.service-list article{padding-bottom:100px}h3{margin-bottom:28px}.honesty{padding-block:130px}.honesty h2{margin-bottom:65px}.meeting{padding-block:120px}.meeting h2{margin-block:45px 65px}.meeting-bottom{gap:40px}.email{margin-top:55px}}

/* Entrance Studio: selected desktop settings; mobile retains its original layout. */
@keyframes portfolio-entrance-fade{from{opacity:0}to{opacity:1}}
@media(min-width:901px){
.hero #intro{scale:0.88 0.88;translate:264px -168px;}
.hero .hello{scale:1.1532 0.7998;translate:-8px 0px;}
.hero figure{scale:1.0098 1.02;translate:0px 48px;}
.hero::after{scale:1.31 1.31;translate:0px 0px;}
header .name{scale:1.74 1.74;translate:0px 80px;animation:portfolio-entrance-fade 0.15s linear both;}
header nav{scale:0.77 0.77;translate:88px -32px;animation:portfolio-entrance-fade 0.15s linear both;}
.hero .cta{scale:1.63 1.63;translate:0px 232px;animation:portfolio-entrance-fade 0.15s linear both;}
}
@media(prefers-reduced-motion:reduce){header .name,header nav,.hero .cta{animation:none!important}}
/* Restore vignette bounds and top/bottom fade. */
.hero::after{scale:1;translate:0 0;background:linear-gradient(to bottom,#080909 0%,#08090999 12%,transparent 32%,transparent 60%,#08090999 83%,#080909 100%),linear-gradient(90deg,#080909a6 0%,#08090940 24%,transparent 52%,#08090926 80%,#08090980 100%),radial-gradient(ellipse at 55% 52%,transparent 25%,#08090940 62%,#080909c9 100%)}
@media(max-width:900px){.hero::after{background:linear-gradient(to bottom,#080909e6 0%,#08090973 22%,transparent 43%,transparent 64%,#08090980 83%,#080909 100%),radial-gradient(ellipse at 53% 55%,transparent 30%,#08090940 67%,#080909a6 100%)}}

/* BLACKTOP SYSTEMS footer. Scoped to preserve policy-page footers. */
.blacktop-footer{display:block;background:var(--ink);padding:100px 0 40px;color:var(--paper)}
.blacktop-footer-main{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;margin-bottom:64px}
.blacktop-footer-brand{display:block;position:relative;overflow:hidden;flex-shrink:0;width:240px;max-width:100%;height:52px}
.blacktop-footer-brand img{display:block;width:100%;height:auto;position:relative;top:-44px}
.blacktop-footer-navigation{display:flex;flex-direction:column;align-items:flex-end;gap:0;min-width:0}
.blacktop-footer nav{display:block;max-width:none;font-size:15px}
.blacktop-footer ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 16px;list-style:none;margin:0;padding:0}
.blacktop-footer nav a,.blacktop-footer nav a:first-child{display:inline-flex;align-items:center;min-height:26px;padding-block:4px;line-height:18px}
.blacktop-footer a:hover{color:var(--gold)}
.blacktop-footer .blacktop-footer-legal{font-size:14px;color:var(--muted)}
.blacktop-footer-copyright{border-top:1px solid #f4f0e826;padding-top:32px;text-align:center}
.blacktop-footer-copyright p{max-width:none;margin:0;font-size:13px;color:var(--gold)}
@media(max-width:767px){.blacktop-footer{padding-top:64px}.blacktop-footer-main{flex-direction:column}.blacktop-footer-navigation{align-items:flex-start;gap:0}.blacktop-footer ul{justify-content:flex-start;gap:0 16px}}
/* Responsive visual pass: keep hero copy clear of the portrait. */
header.wrap{position:relative;inset:auto;height:104px;mix-blend-mode:normal}
header .name,header nav,.hero #intro,.hero .hello,.hero figure,.hero .cta{scale:1;translate:0 0;animation:none}
header .name{mix-blend-mode:screen}
header .name img{width:72px;height:72px}
header nav{max-width:none;gap:28px;font-size:13px}
header nav a{display:inline-flex;align-items:center;min-height:44px}
.hero.wrap{width:min(1440px,88%);margin-inline:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:7%;padding:48px 0 104px;overflow:visible;align-items:center}
.hero-copy{width:100%;min-width:0;padding:0}
.hero #intro{font-size:clamp(56px,6vw,96px);margin:0 0 28px;max-width:100%}
.hero .hello{position:static;max-width:none;font-size:20px;line-height:1.6;text-align:left;text-shadow:none;margin:0 0 28px}
.hero .cta{font-size:15px;max-width:100%;min-height:48px}
.hero figure{position:relative;inset:auto;z-index:auto;min-width:0}
.hero figure img{display:block;width:100%;height:auto;min-height:0;aspect-ratio:4/5;object-fit:cover;object-position:50% 60%}
.hero::after{content:none}
.personal{padding-block:120px 140px}.services{padding-block:90px 140px}.honesty{padding-block:120px 140px}.meeting{padding-block:110px}
.service-list article{padding-bottom:80px}.honesty h2{margin-bottom:48px}.meeting h2{margin-block:32px 48px}
.blacktop-footer{padding-top:64px}.blacktop-footer-main{margin-bottom:40px}
@media(max-width:900px){
.hero.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;padding-top:24px;padding-bottom:72px}
.hero #intro{font-size:clamp(44px,6.8vw,64px)}
.hero .hello{font-size:18px}
.personal,.honesty,.meeting{padding-block:80px}.services{padding-block:64px 90px}
}
@media(max-width:600px){
header.wrap{height:88px}header .name img{width:60px;height:60px}header nav{font-size:12px;gap:0}header nav a:first-child{display:none}
header nav a:last-child{font-size:12px}header nav a:last-child span{font-size:16px;margin-left:10px}
.hero.wrap{grid-template-columns:minmax(0,1fr);gap:36px;padding:28px 0 64px}
.hero #intro{font-size:clamp(42px,11.5vw,68px);margin-bottom:20px}
.hero .hello{font-size:18px;margin-bottom:20px}
.hero .cta{font-size:14px}
.hero figure img{aspect-ratio:4/5;object-position:50% 60%}
.personal,.honesty,.meeting{padding-block:64px}.personal{gap:24px}.personal h2{margin-bottom:28px}.personal .large{font-size:21px;margin-bottom:24px}
.services{padding-block:24px 64px;gap:36px}.service-list article{padding-bottom:48px}h3{margin-bottom:20px}.service-list p+p{margin-top:20px}
.honesty h2{font-size:clamp(29px,8vw,36px);margin-bottom:28px}.meeting h2{font-size:clamp(44px,11vw,64px);margin-block:24px 32px}
.meeting-form{margin-top:32px}.email{margin-top:32px;overflow-wrap:anywhere}
.blacktop-footer-main{gap:28px}.blacktop-footer{padding-top:44px}
}
/* Full photographic hero, with copy kept above the portrait on phones. */
header.wrap{position:absolute;inset:0 0 auto;z-index:3}
.hero.wrap{width:100%;max-width:none;margin:0;min-height:860px;min-height:max(860px,100svh);display:flex;align-items:flex-start;padding:160px 6% 100px;overflow:hidden;isolation:isolate}
.hero-copy{position:relative;z-index:1;width:min(520px,43%)}
.hero figure{position:absolute;inset:0;z-index:-2}
.hero figure img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 59%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#080909b3 0%,#08090940 20%,transparent 50%,#08090960 72%,#080909 100%),linear-gradient(90deg,#080909e6 0%,#080909a6 30%,transparent 65%),radial-gradient(ellipse at 55% 48%,transparent 24%,#08090966 75%,#080909 100%)}
.hero #intro{font-size:clamp(52px,5.7vw,88px)}
.hero .hello{font-size:20px}
@media(max-width:900px){.hero.wrap{min-height:940px;padding-top:140px}.hero-copy{width:48%}.hero #intro{font-size:clamp(44px,6vw,60px)}.hero figure img{object-position:53% 58%}}
@media(max-width:600px){
.hero.wrap{min-height:1000px;padding:116px 6% 90px;display:block}
.hero-copy{width:100%;max-width:none}
.hero #intro{font-size:clamp(42px,11.5vw,68px);margin-bottom:18px}
.hero .hello{font-size:17px;line-height:1.5;margin-bottom:14px}
.hero .cta{min-height:44px;padding-block:10px}
.hero figure img{object-position:53% 0%}
.hero::after{background:linear-gradient(to bottom,#080909e6 0%,#080909b3 22%,#08090966 34%,transparent 49%,#08090926 67%,#080909a6 85%,#080909 100%),radial-gradient(ellipse at 53% 56%,transparent 28%,#08090966 76%,#080909 100%)}
}
/* Restore continuous terminal motion and the photographic header blend. */
header.wrap{mix-blend-mode:screen}
.hero #intro{animation:signal-drift 9s linear infinite}
.hero #intro.is-glitching{animation:analog-interference .8s steps(1,end) both}
.hero .terminal-cursor{animation:cursor-blink 1s steps(1,end) infinite}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
.hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#08090916 3px,#08090916 4px);opacity:.3;animation:analog-scan 12s linear infinite}
@keyframes analog-scan{0%,89%,100%{transform:translateY(0);opacity:.25}92%{transform:translateY(1px);opacity:.4}96%{transform:translateY(-1px);opacity:.3}}
.effects-paused .hero::before{animation:none}
@media(prefers-reduced-motion:reduce){.hero #intro,.hero .terminal-cursor,.hero::before{animation:none!important}.hero::before{opacity:.15}}
/* Stronger digital signal breakup, without full-screen flashes. */
@keyframes analog-interference{
0%,100%{transform:none;filter:none;text-shadow:none}
12%{transform:translateX(-5px) skewX(-2deg);text-shadow:5px 0 #c5a059,-4px 0 #699b9b}
32%{transform:translateX(4px) skewX(1deg);text-shadow:-5px 0 #c5a059,4px 1px #699b9b}
54%{transform:translateX(-3px);text-shadow:6px 0 #c5a05980,-3px -1px #699b9b}
76%{transform:translateX(2px) skewX(-1deg);text-shadow:-4px 0 #699b9b,3px 0 #e3c48c}
}
@keyframes signal-tear{
0%,100%{opacity:0;transform:none}
12%,32%{opacity:.85;clip-path:inset(18% 0 57% 0);transform:translateX(15px)}
54%,76%{opacity:.7;clip-path:inset(58% 0 19% 0);transform:translateX(-12px)}
}
.hero::before{background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,#08090935 2px,#08090935 4px);animation:analog-scan 4s steps(1,end) infinite}
@keyframes analog-scan{
0%,100%{transform:none;opacity:.3;clip-path:inset(0)}
78%{transform:translateX(7px);opacity:.45;clip-path:inset(24% 0 64% 0)}
86%{transform:translateX(-6px);opacity:.4;clip-path:inset(62% 0 25% 0)}
94%{transform:translateY(2px);opacity:.35;clip-path:inset(0)}
}
/* Three seconds of clean signal, then a brief red/blue italic warp. */
.hero #intro{animation:none}
.hero #intro.is-glitching{animation:analog-interference .09s steps(1,end) both}
.hero #intro.is-glitching::before{animation:signal-tear .09s steps(1,end) both;color:#438cff}
@keyframes analog-interference{
0%,100%{transform:none;filter:none;text-shadow:none}
8%{transform:translateX(-7px) skewX(-48deg) scaleX(1.16);text-shadow:12px 0 #ff334d,-12px 0 #287dff}
26%{transform:translateX(6px) skewX(-55deg) scaleX(.88);text-shadow:-16px 1px #ff334d,14px -1px #287dff}
44%{transform:translateX(-5px) skewX(-32deg) scaleX(1.12);text-shadow:10px 0 #ff334d,-8px 2px #287dff}
62%{transform:translateX(5px) skewX(-42deg) scaleX(.94);text-shadow:-7px -1px #ff334d,9px 1px #287dff}
80%{transform:translateX(-2px) skewX(-26deg);text-shadow:5px 0 #ff334d,-5px 0 #287dff}
}
@keyframes signal-tear{
0%,100%{opacity:0;transform:none}
8%,26%{opacity:.9;clip-path:inset(14% 0 58% 0);transform:translateX(22px) skewX(12deg);text-shadow:-12px 0 #ff334d}
44%,62%{opacity:.85;clip-path:inset(54% 0 16% 0);transform:translateX(-18px) skewX(-10deg);text-shadow:12px 0 #ff334d}
80%{opacity:.6;clip-path:inset(35% 0 44% 0);transform:translateX(12px)}
}
.hero::before{animation:none;opacity:.25}
/* Keep digital interference on the headline only; preserve the photo vignette. */
.hero::before{content:none;display:none;animation:none}

/* Position the desktop headline in the open area indicated by the user. */
@media(min-width:901px){.hero #intro{translate:clamp(120px,18vw,300px) -70px}}
/* Approved Entrance Studio desktop profile: 120% size, 128% width, -40px vertical offset. */
@media(min-width:901px){.hero #intro{scale:1.536 1.2;transform-origin:left top;translate:clamp(120px,18vw,300px) -110px}.hero #intro.is-glitching,.hero #intro.is-glitching::before{animation-duration:calc(.09s / 3.3)}}

/* Entrance Studio mobile profile, applied locally October 20. */
@media(max-width:600px){
.hero #intro{scale:1.632 1.2;translate:64px 0;transform-origin:center;width:max-content;max-width:none}
.hero .hello{translate:0 16px}
.hero .cta{translate:0 328px}
.hero figure{scale:1.48;translate:0 -168px;transform-origin:center}
/* Extend the shifted overlay to the hero's bottom; its final color matches the page. */
.hero::after{top:-104px;bottom:0;background:linear-gradient(to bottom,#080909e6 0%,#080909b3 22%,#08090966 34%,transparent 49%,#08090926 62%,#080909a6 78%,#080909 91%,#080909 100%),radial-gradient(ellipse at 53% 56%,transparent 28%,#08090966 76%,#080909 100%)}
}