:root{
  --paper:#f3f0e7;
  --ink:#11120f;
  --muted:#6b6c65;
  --line:rgba(17,18,15,.2);
  --blue:#3457f1;
  --orange:#ff5a36;
  --lime:#c9ff54;
  --pink:#ff9bc8;
  --display:"Archivo Black",sans-serif;
  --body:"Inter",sans-serif;
  --mono:"DM Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}
body.menu-open,body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{color:inherit}
.shell{width:min(1540px,calc(100% - 64px));margin-inline:auto}
.section-space{padding:150px 0}
.section-index{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-bottom:22px}
em{font-style:normal;color:var(--blue)}

.topbar{
  position:fixed;inset:0 0 auto;z-index:100;height:74px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 24px;background:rgba(243,240,231,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
.identity{justify-self:start;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.08em}
.identity-dot{width:12px;height:12px;border-radius:50%;background:var(--orange)}
.index-nav{display:flex;align-items:center;gap:27px;font-family:var(--mono);font-size:.67rem;text-transform:uppercase}
.index-nav a{display:flex;gap:6px;align-items:center;position:relative;padding:8px 0}
.index-nav a span{color:var(--orange);font-size:.55rem}
.index-nav a:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--blue);transition:width .2s ease}
.index-nav a:hover:after{width:100%}
.topbar-right{justify-self:end}
.availability{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.65rem}
.availability i{width:7px;height:7px;border-radius:50%;background:#55b86b;box-shadow:0 0 0 4px rgba(85,184,107,.12)}
.mobile-menu-button{display:none;width:42px;height:38px;border:1px solid var(--line);background:transparent;position:relative}
.mobile-menu-button span{position:absolute;left:9px;right:9px;height:1px;background:var(--ink)}
.mobile-menu-button span:first-child{top:13px}.mobile-menu-button span:last-child{top:22px}
.mobile-nav{display:none}

.hero{
  min-height:960px;padding-top:145px;display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);
  grid-template-rows:1fr auto;column-gap:80px;align-items:center
}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;margin:0 0 28px}
.hero h1{margin:0;font-family:var(--display);font-size:clamp(6.2rem,9vw,11rem);line-height:.82;letter-spacing:-.055em}
.hero h1 span{display:block}
.hero-emphasis{
  color:var(--paper);-webkit-text-stroke:2px var(--blue);
  position:relative;width:max-content
}
.hero-emphasis:after{
  content:"";position:absolute;left:-3%;right:-7%;bottom:2%;height:22%;background:var(--lime);z-index:-1;transform:rotate(-1deg)
}
.hero-sub{max-width:670px;margin:36px 0 0;font-size:1.08rem;line-height:1.68;color:#41433d}
.hero-actions{display:flex;align-items:center;gap:22px;margin-top:34px}
.primary-cta{display:flex;align-items:center;justify-content:space-between;gap:50px;min-width:250px;padding:16px 17px;background:var(--ink);color:var(--paper);font-weight:600}
.primary-cta span{font-size:1.4rem}
.primary-cta:hover{background:var(--blue)}
.secondary-cta{border-bottom:1px solid var(--ink);padding-bottom:4px;font-size:.86rem}

.hero-profile{align-self:center;border:1px solid var(--ink);background:#fffdf7;transform:rotate(1.5deg);box-shadow:14px 14px 0 var(--pink)}
.profile-label{height:46px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:.63rem}
.profile-art{height:430px;position:relative;overflow:hidden;background:var(--blue)}
.profile-art-ring{position:absolute;border:1px solid rgba(255,255,255,.55);border-radius:50%}
.ring-a{width:390px;height:390px;left:-80px;top:-60px}
.ring-b{width:270px;height:270px;right:-70px;bottom:-60px}
.profile-art-card{position:absolute;inset:75px 55px;background:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--display);font-size:4.2rem;line-height:.9;transform:rotate(-5deg)}
.profile-art-card span:last-child{color:var(--orange)}
.profile-grid{display:grid;grid-template-columns:1fr 1fr}
.profile-grid div{min-height:82px;padding:14px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.profile-grid div:nth-child(even){border-right:0}
.profile-grid span{font-family:var(--mono);font-size:.57rem;color:var(--muted);text-transform:uppercase}
.profile-grid strong{font-size:.76rem}

.hero-ticker{grid-column:1/-1;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:42px}
.ticker-track{display:flex;align-items:center;width:max-content;animation:ticker 25s linear infinite}
.ticker-track span{font-family:var(--display);font-size:1.5rem;padding:15px 20px}
.ticker-track i{font-style:normal;color:var(--orange)}
@keyframes ticker{to{transform:translateX(-50%)}}

.proof{display:grid;grid-template-columns:.85fr 1.15fr;border-bottom:1px solid var(--ink);padding:55px 0}
.proof-intro{display:grid;grid-template-columns:150px 1fr;gap:20px;padding-right:70px;border-right:1px solid var(--line)}
.proof-intro p{margin:0;max-width:520px;line-height:1.7;color:#484b44}
.proof-cells{display:grid;grid-template-columns:repeat(3,1fr)}
.proof-cells div{padding:0 28px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;min-height:100px}
.proof-cells div:last-child{border-right:0}
.proof-cells strong{font-family:var(--display);font-size:2.65rem;line-height:1}
.proof-cells span{font-size:.72rem;line-height:1.45;color:var(--muted);max-width:190px}

.section-title-row{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;margin-bottom:60px}
.section-title-row h2{margin:0;font-family:var(--display);font-size:clamp(5.2rem,7vw,8.6rem);line-height:.9;letter-spacing:-.04em}
.section-title-row>p{max-width:560px;margin:0 0 8px;justify-self:end;color:var(--muted);line-height:1.7}

.skill-stage{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}
.skill-panel{min-height:390px;padding:24px;position:relative;overflow:hidden;border-right:1px solid var(--ink);transition:color .3s ease,transform .3s ease}
.skill-panel:last-child{border-right:0}
.skill-panel:before{content:"";position:absolute;inset:100% 0 0;background:var(--skill-color);transition:inset .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.skill-panel:hover:before{inset:0}
.skill-panel:hover{transform:translateY(-8px)}
.skill-no{font-family:var(--mono);font-size:.65rem}
.skill-panel h3{margin:145px 0 15px;font-family:var(--display);font-size:3rem;line-height:1}
.skill-panel p{max-width:300px;margin:0;color:var(--muted);font-size:.85rem;line-height:1.6;transition:color .25s}
.skill-panel:hover p{color:#30322d}
.skill-blue{--skill-color:#b8c6ff}.skill-orange{--skill-color:#ffb39d}.skill-green{--skill-color:#d7f5a2}.skill-pink{--skill-color:#ffc7df}
.skill-motion{position:absolute;right:20px;top:22px;width:110px;height:90px}
.motion-target{display:grid;place-items:center}
.motion-target i{position:absolute;border:2px solid var(--blue);border-radius:50%}
.motion-target i:nth-child(1){width:80px;height:80px}.motion-target i:nth-child(2){width:50px;height:50px}.motion-target i:nth-child(3){width:18px;height:18px;background:var(--blue)}
.skill-panel:hover .motion-target i:nth-child(2){animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(.72)}}
.motion-pages i{position:absolute;width:56px;height:68px;border:2px solid var(--orange);background:rgba(255,255,255,.35)}
.motion-pages i:nth-child(1){left:7px;top:5px}.motion-pages i:nth-child(2){left:24px;top:11px}.motion-pages i:nth-child(3){left:41px;top:18px}
.skill-panel:hover .motion-pages i:nth-child(3){animation:page 1s ease-in-out infinite alternate}
@keyframes page{to{transform:translate(8px,-8px) rotate(3deg)}}
.motion-chart{display:flex;align-items:end;gap:7px;padding:10px}
.motion-chart i{width:12px;border:2px solid #4c7b27;height:25px}.motion-chart i:nth-child(2){height:45px}.motion-chart i:nth-child(3){height:62px}.motion-chart i:nth-child(4){height:40px}.motion-chart i:nth-child(5){height:76px}
.skill-panel:hover .motion-chart i{animation:chart .8s ease-in-out infinite alternate}
.motion-chart i:nth-child(2){animation-delay:-.2s}.motion-chart i:nth-child(4){animation-delay:-.4s}
@keyframes chart{to{transform:scaleY(.55)}}
.motion-flow i{position:absolute;width:22px;height:22px;border:2px solid #b64d7d;border-radius:50%}
.motion-flow i:nth-child(1){left:7px;top:34px}.motion-flow i:nth-child(2){left:44px;top:10px}.motion-flow i:nth-child(3){right:4px;bottom:4px}
.motion-flow:before,.motion-flow:after{content:"";position:absolute;height:2px;background:#b64d7d;transform-origin:left}
.motion-flow:before{width:48px;left:25px;top:37px;transform:rotate(-28deg)}.motion-flow:after{width:48px;left:60px;top:36px;transform:rotate(38deg)}
.skill-panel:hover .motion-flow i:nth-child(3){animation:flow 1s ease-in-out infinite alternate}
@keyframes flow{to{transform:translate(8px,-6px)}}

.work{padding-top:175px}
.work-heading{margin-bottom:42px}
.dossier-list{border-top:1px solid var(--ink)}
.dossier{border-bottom:1px solid var(--ink)}
.dossier-head{width:100%;display:grid;grid-template-columns:110px minmax(300px,1fr) 270px 50px;align-items:center;gap:20px;padding:30px 0;border:0;background:transparent;text-align:left;cursor:pointer}
.dossier-id{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.dossier-name{display:flex;flex-direction:column;gap:5px}
.dossier-name span{font-family:var(--display);font-size:2.2rem}
.dossier-name small{color:var(--muted)}
.dossier-role{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em}
.dossier-open{justify-self:end;width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;transition:transform .3s ease,background .2s,color .2s}
.dossier-head:hover .dossier-open{background:var(--ink);color:var(--paper)}
.dossier.is-open .dossier-open{transform:rotate(45deg)}
.dossier-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.dossier.is-open .dossier-body{grid-template-rows:1fr}
.dossier-body{background:var(--dossier-bg)}
.dossier-body-inner{}
.dossier-visual{min-height:500px;margin:0 0 0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.dossier-visual>span{position:relative;z-index:2;font-family:var(--display);font-size:2.8rem}
.dossier-visual>small{position:relative;z-index:2;font-family:var(--mono);font-size:.65rem;margin-top:6px}
.visual-uac{background:linear-gradient(115deg,var(--orange) 0 30%,#ffc0ae 30% 46%,#f2efe7 46%)}
.visual-uac:before{content:"";position:absolute;width:48%;height:60%;right:9%;top:13%;border:2px solid var(--ink);background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(17,18,15,.13) 35px 36px)}
.visual-vp{background:#bfcaff}
.visual-vp:before{content:"";position:absolute;inset:14% 9%;border:2px solid var(--ink);background:linear-gradient(90deg,transparent 49.8%,rgba(17,18,15,.3) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(17,18,15,.3) 50%,transparent 50.2%)}
.visual-vp:after{content:"A/B";position:absolute;right:12%;top:18%;font-family:var(--display);font-size:10rem;color:var(--blue)}
.visual-protectim{background:var(--lime)}
.visual-protectim:before{content:"BRAND";position:absolute;right:-2%;top:4%;font-family:var(--display);font-size:15rem;color:rgba(17,18,15,.08);transform:rotate(90deg)}
.dossier-story{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}
.story-block{padding:28px;border-right:1px solid var(--line);min-height:220px}
.story-block:last-child{border-right:0}
.story-block span{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.story-block p{margin:64px 0 0;max-width:380px;line-height:1.6;font-size:.87rem}
.dossier-footer{display:flex;align-items:center;gap:8px;padding:22px 26px;flex-wrap:wrap}
.dossier-footer>span{border:1px solid var(--ink);border-radius:999px;padding:6px 10px;font-family:var(--mono);font-size:.57rem;text-transform:uppercase}
.case-launch{margin-left:auto;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:4px 0;cursor:pointer;font-weight:600}

.playground{overflow:hidden}
.output-rail{display:flex;width:100%;gap:14px;padding-left:max(32px,calc((100vw - 1540px)/2 + 32px));padding-right:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.output-rail::-webkit-scrollbar{display:none}
.output-card{width:400px;height:500px;flex:0 0 auto;scroll-snap-align:start;padding:22px;display:flex;flex-direction:column;border:1px solid var(--ink);position:relative;overflow:hidden}
.output-card span{font-family:var(--mono);font-size:.62rem}
.output-card strong{margin-top:auto;font-family:var(--display);font-size:3rem;line-height:.95}
.output-card small{margin-top:8px;font-family:var(--mono)}
.output-a{background:#ffb29b}.output-b{background:#bdc9ff}.output-c{background:#d7f49f}.output-d{background:#ffd1e5}.output-e{background:#191b17;color:var(--paper)}
.output-card:before{content:"";position:absolute;left:15%;right:15%;top:18%;height:45%;border:2px solid currentColor;opacity:.55}
.output-card:hover:before{animation:outputShift .7s ease-in-out infinite alternate}
@keyframes outputShift{to{transform:translate(8px,-8px)}}

.thinking{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:center}
.thinking-title h2{margin:0;font-family:var(--display);font-size:clamp(4.6rem,6.2vw,7.5rem);line-height:.9}
.thinking-loop{height:670px;position:relative;border:1px solid var(--ink);background:#fffdf7}
.loop-center{position:absolute;left:50%;top:50%;width:170px;height:170px;border-radius:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center}
.loop-center span,.loop-center small{font-family:var(--mono);font-size:.6rem}
.loop-center strong{font-size:4rem;line-height:1;animation:loopSpin 8s linear infinite}
@keyframes loopSpin{to{transform:rotate(360deg)}}
.loop-step{position:absolute;width:210px;padding:16px;border:1px solid var(--ink);background:var(--paper);box-shadow:7px 7px 0 rgba(17,18,15,.12)}
.loop-step b{font-family:var(--mono);color:var(--orange);font-size:.62rem}
.loop-step span{display:block;margin:10px 0 4px;font-family:var(--display);font-size:1.7rem}
.loop-step small{color:var(--muted);font-size:.68rem}
.loop-1{left:7%;top:10%;transform:rotate(-2deg)}.loop-2{right:8%;top:10%;transform:rotate(2deg)}.loop-3{right:4%;bottom:12%;transform:rotate(-3deg)}.loop-4{left:39%;bottom:5%;transform:rotate(3deg)}.loop-5{left:5%;bottom:17%;transform:rotate(2deg)}

.stack{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center}
.stack-left h2{margin:0;font-family:var(--display);font-size:clamp(4.3rem,5.8vw,7rem);line-height:.9}
.stack-left p{max-width:420px;color:var(--muted);line-height:1.65}
.stack-cloud{min-height:580px;position:relative;border:1px dashed var(--line)}
.stack-cloud button{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));border:1px solid var(--ink);background:var(--paper);padding:16px 19px;font-family:var(--mono);font-size:.72rem;box-shadow:5px 5px 0 var(--c);transition:transform .18s ease}
.stack-cloud button:hover{transform:rotate(0) translateY(-5px) scale(1.05)}

.about{display:grid;grid-template-columns:1.1fr .9fr;gap:90px}
.about-statement h2{margin:0;font-family:var(--display);font-size:clamp(4.5rem,6.4vw,7.8rem);line-height:.9}
.about-body{padding-top:70px}
.about-body>p{max-width:660px;line-height:1.72;color:#484b44}
.about-lead{font-size:1.25rem!important;color:var(--ink)!important}
.experience-list{margin-top:60px;border-top:1px solid var(--ink)}
.experience-list div{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.experience-list span{font-family:var(--mono);font-size:.62rem;color:var(--orange)}
.experience-list strong{font-family:var(--display);font-size:1.35rem}
.experience-list small{color:var(--muted)}

.quotes{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.quotes-heading h2{margin:0;font-family:var(--display);font-size:clamp(4rem,5.5vw,6.8rem);line-height:.92}
.quote-stack{border-top:1px solid var(--ink)}
.quote-stack article{display:grid;grid-template-columns:70px 1fr 190px;gap:20px;align-items:center;min-height:190px;padding:25px 0;border-bottom:1px solid var(--line)}
.quote-stack article>span{font-family:var(--mono);font-size:.64rem;color:var(--orange)}
.quote-stack blockquote{margin:0;font-size:1.08rem;line-height:1.55}
.quote-stack footer{font-family:var(--mono);font-size:.6rem;color:var(--muted)}

.contact{padding-bottom:0}
.contact-color-block{background:var(--blue);color:#fff;padding:120px 0}
.contact .section-index{color:#d8ddff}
.contact h2{margin:0;font-family:var(--display);font-size:clamp(6rem,9vw,11rem);line-height:.82;letter-spacing:-.05em}
.contact h2 em{color:var(--lime)}
.contact-bottom{display:grid;grid-template-columns:1fr .85fr;gap:100px;margin-top:75px;align-items:start}
.direct-contact p{max-width:580px;line-height:1.6;color:#d9ddff}
.direct-contact>a{display:inline-block;margin-top:28px;font-family:var(--display);font-size:clamp(2.2rem,3.4vw,4.2rem);border-bottom:2px solid #fff;padding-bottom:8px}
.direct-contact>div{display:flex;gap:24px;margin-top:30px;font-family:var(--mono);font-size:.68rem}
.mini-form{background:var(--paper);color:var(--ink);padding:28px;display:grid;gap:15px;box-shadow:12px 12px 0 var(--lime)}
.form-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px;border-bottom:1px solid var(--ink);padding-bottom:14px}
.form-title span{font-family:var(--mono);font-size:.59rem}.form-title strong{font-family:var(--display);font-size:2rem}
.mini-form label{display:grid;grid-template-columns:140px 1fr;align-items:center;border-bottom:1px solid var(--line)}
.mini-form label>span{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.mini-form input,.mini-form select{height:50px;border:0;background:transparent;outline:0}
.mini-form button[type=submit]{margin-top:8px;height:54px;border:0;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-weight:700;cursor:pointer}
.mini-form button[type=submit]:hover{background:var(--orange)}
.form-status{min-height:1em;margin:0;font-size:.7rem;color:var(--muted)}
.honey{position:absolute!important;left:-9999px!important}

.footer{height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-family:var(--mono);font-size:.62rem}
.footer span:nth-child(2){justify-self:center}.footer a{justify-self:end}

.project-modal{position:fixed;inset:0;z-index:300;background:rgba(17,18,15,.92);backdrop-filter:blur(10px);padding:25px;overflow:auto;opacity:0;visibility:hidden;pointer-events:none;transition:.22s}
.project-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.modal-close{position:fixed;right:25px;top:25px;z-index:5;width:50px;height:50px;border-radius:50%;border:1px solid var(--paper);background:var(--ink);color:var(--paper);font-size:1.8rem;cursor:pointer}
.modal-sheet{width:min(1380px,100%);margin:auto;background:var(--paper);border:1px solid var(--ink)}
.modal-header{padding:50px 44px;display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:end}
.modal-header>span{font-family:var(--mono);font-size:.65rem;color:var(--orange)}
.modal-header h2{grid-column:2;margin:0;font-family:var(--display);font-size:clamp(4rem,7vw,8rem);line-height:.88}
.modal-header p{grid-column:2;margin:8px 0 0;color:var(--muted)}
.modal-feature{height:560px;margin:0 44px;border:1px solid var(--ink);display:grid;place-items:center;background:#c6cffd;font-family:var(--display);font-size:2.5rem}
.modal-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:38px 44px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.modal-grid>div{min-height:220px;padding:23px;border-right:1px solid var(--line)}
.modal-grid>div:last-child{border-right:0}
.modal-label{font-family:var(--mono);font-size:.6rem;color:var(--muted)}
.modal-grid p{margin:55px 0 0;font-size:.82rem;line-height:1.6}
.modal-assets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 44px 44px}
.modal-assets div{height:260px;border:1px dashed var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:.65rem;color:var(--muted)}

@media (min-width:1001px) and (max-height:1250px){
  .hero{min-height:850px;padding-top:120px}
  .profile-art{height:360px}
  .section-space{padding:125px 0}
}

@media(max-width:1100px){
  .shell{width:calc(100% - 40px)}
  .topbar{grid-template-columns:1fr auto}
  .index-nav{display:none}.availability{display:none}.mobile-menu-button{display:block}
  .mobile-nav{
    position:fixed;inset:0;z-index:250;background:var(--lime);padding:25px;
    display:flex;flex-direction:column;transform:translateY(-105%);
    transition:transform .32s cubic-bezier(.2,.8,.2,1)
  }
  .mobile-nav.is-open{transform:none}
  .mobile-nav-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:.7rem}
  .mobile-nav-top button{border:0;background:transparent;font-size:2.2rem}
  .mobile-nav>a{display:grid;grid-template-columns:70px 1fr;align-items:center;padding:18px 0;border-bottom:1px solid var(--ink)}
  .mobile-nav>a b{font-family:var(--mono);font-size:.7rem}.mobile-nav>a span{font-family:var(--display);font-size:clamp(3rem,11vw,6rem)}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:120px;gap:55px}
  .hero-profile{width:min(620px,90%);justify-self:end}
  .hero-ticker{grid-column:1}
  .proof{grid-template-columns:1fr;gap:30px}.proof-intro{border-right:0;padding-right:0}.proof-cells{border-top:1px solid var(--line);padding-top:30px}
  .skill-stage{grid-template-columns:1fr 1fr}.skill-panel:nth-child(2){border-right:0}.skill-panel:nth-child(-n+2){border-bottom:1px solid var(--ink)}
  .section-title-row{grid-template-columns:1fr;gap:26px}.section-title-row>p{justify-self:start}
  .thinking,.stack,.about,.quotes{grid-template-columns:1fr;gap:55px}
  .thinking-loop{height:650px}
  .stack-cloud{min-height:520px}
  .contact-bottom{grid-template-columns:1fr;gap:55px}
}

@media(max-width:720px){
  html{scroll-padding-top:70px}
  .shell{width:calc(100% - 26px)}
  .section-space{padding:90px 0}
  .topbar{height:66px;padding:0 13px}
  .hero{padding-top:105px}
  .hero h1{font-size:clamp(4.2rem,20vw,6.7rem)}
  .hero-emphasis{-webkit-text-stroke:1.3px var(--blue)}
  .hero-profile{width:100%;justify-self:stretch;transform:rotate(.5deg);box-shadow:7px 7px 0 var(--pink)}
  .profile-art{height:330px}.profile-art-card{inset:58px 42px;font-size:3.4rem}
  .hero-actions{align-items:flex-start;flex-direction:column}.primary-cta{width:100%}
  .proof-intro{grid-template-columns:1fr}.proof-cells{grid-template-columns:1fr}.proof-cells div{min-height:115px;padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}.proof-cells div:last-child{border-bottom:0}
  .section-title-row h2{font-size:clamp(4rem,17vw,6.3rem)}
  .skill-stage{grid-template-columns:1fr}.skill-panel{border-right:0!important;border-bottom:1px solid var(--ink);min-height:300px}.skill-panel:last-child{border-bottom:0}
  .skill-panel h3{margin-top:105px}
  .dossier-head{grid-template-columns:70px 1fr 42px;gap:12px;padding:22px 0}.dossier-role{grid-column:2}.dossier-open{grid-column:3;grid-row:1/3}.dossier-name span{font-size:1.8rem}
  .dossier-visual{min-height:360px}.dossier-visual>span{font-size:2rem}
  .dossier-story{grid-template-columns:1fr}.story-block{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.story-block:last-child{border-bottom:0}.story-block p{margin-top:30px}
  .case-launch{width:100%;margin:12px 0 0;text-align:left}
  .output-card{width:78vw;height:430px}
  .thinking-loop{height:auto;padding:18px;display:grid;gap:10px}.loop-center,.loop-step{position:static;transform:none;width:auto;height:auto}.loop-center{min-height:150px;border-radius:0}.loop-step{padding:18px;box-shadow:4px 4px 0 rgba(17,18,15,.12)}
  .stack-cloud{min-height:0;display:flex;flex-wrap:wrap;gap:10px;border:0}.stack-cloud button{position:static;transform:none!important;padding:12px 14px;box-shadow:3px 3px 0 var(--c)}
  .about-statement h2{font-size:clamp(3.7rem,16vw,6rem)}.about-body{padding-top:0}
  .experience-list div{grid-template-columns:72px 1fr}.experience-list small{grid-column:2}
  .quote-stack article{grid-template-columns:40px 1fr}.quote-stack footer{grid-column:2}
  .contact-color-block{padding:85px 0}.contact h2{font-size:clamp(4.5rem,20vw,7.2rem)}
  .direct-contact>a{font-size:clamp(2rem,9vw,3rem);overflow-wrap:anywhere}
  .mini-form{padding:18px;box-shadow:6px 6px 0 var(--lime)}.form-title{align-items:start;flex-direction:column;gap:8px}.mini-form label{grid-template-columns:1fr}.mini-form label>span{padding-top:10px}
  .footer{grid-template-columns:1fr auto}.footer span:nth-child(2){display:none}
  .project-modal{padding:8px}.modal-close{top:14px;right:14px}.modal-header{padding:70px 18px 24px;grid-template-columns:1fr}.modal-header h2,.modal-header p{grid-column:1}.modal-feature{height:320px;margin:0 18px;font-size:1.7rem;text-align:center}.modal-grid{grid-template-columns:1fr;margin:24px 18px}.modal-grid>div{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.modal-grid>div:last-child{border-bottom:0}.modal-grid p{margin-top:26px}.modal-assets{grid-template-columns:1fr;margin:0 18px 18px}.modal-assets div{height:180px}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* =========================================
   V3 audit fixes
   ========================================= */

/* Accordion: collapse one inner wrapper, not several auto-generated grid rows. */
.dossier-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .44s cubic-bezier(.2,.8,.2,1);
  background: var(--dossier-bg, transparent);
}
.dossier-body-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .24s ease, transform .32s ease;
}
.dossier.is-open .dossier-body {
  grid-template-rows: 1fr;
}
.dossier.is-open .dossier-body-inner {
  opacity: 1;
  transform: none;
}

/* Remove obsolete direct-child clipping rule from V2 behavior. */
.dossier-body > * {
  overflow: visible;
}

.dossier-head {
  transition: background .2s ease, padding-left .2s ease, padding-right .2s ease;
}
.dossier-head:hover,
.dossier-head:focus-visible {
  background: rgba(52,87,241,.055);
  padding-left: 12px;
  padding-right: 12px;
}
.dossier-head:focus-visible,
.case-launch:focus-visible,
.mobile-menu-button:focus-visible,
.mobile-nav button:focus-visible,
.tool-chip:focus-visible,
.modal-close:focus-visible,
.mini-form button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* The rail must be viewport-width so overflow belongs to the rail itself. */
.output-rail {
  width: 100%;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  padding-left: max(32px, calc((100vw - 1540px)/2 + 32px));
  scroll-padding-left: max(32px, calc((100vw - 1540px)/2 + 32px));
}
.rail-hint {
  margin: -34px 0 30px auto;
  width: max-content;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
}

/* Make Tools truly interactive instead of decorative buttons. */
.tool-chip.is-active {
  transform: rotate(0) translateY(-6px) scale(1.045) !important;
  background: var(--ink);
  color: var(--paper);
}
.tool-inspector {
  grid-column: 2;
  margin-top: -36px;
  border-left: 4px solid var(--orange);
  padding: 15px 18px 16px;
  background: rgba(255,255,255,.52);
}
.tool-inspector span {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--muted);
}
.tool-inspector p {
  margin: 7px 0 0;
  max-width: 760px;
  font-size: .82rem;
  line-height: 1.55;
}

/* Prevent project modal content from feeling stuck to the viewport edges. */
.project-modal {
  overscroll-behavior: contain;
}
.modal-sheet {
  overflow: hidden;
}

/* Safer long-copy behavior. */
.hero-sub,
.section-title-row > p,
.story-block p,
.about-body > p,
.quote-stack blockquote,
.direct-contact p,
.modal-grid p {
  overflow-wrap: anywhere;
}

@media (max-width:1100px) {
  .tool-inspector {
    grid-column: 1;
    margin-top: 0;
  }
}

@media (max-width:720px) {
  .output-rail {
    padding-left: 13px;
    padding-right: 13px;
    scroll-padding-left: 13px;
  }

  .rail-hint {
    margin: -22px 0 24px;
  }

  .dossier-head:hover {
    padding-left: 0;
    padding-right: 0;
  }

  .dossier.is-open .dossier-head {
    background: rgba(52,87,241,.055);
  }

  .tool-inspector {
    margin-top: 8px;
    padding: 13px 14px;
  }

  .tool-chip.is-active {
    transform: none !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
  }

  .modal-sheet {
    width: 100%;
  }
}


/* ===============================
   V4, real assets + profile updates
   =============================== */

.availability{
  color:inherit;
  text-decoration:none;
  padding:8px 10px;
  border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.availability:hover,
.availability:focus-visible{
  background:#fffdf7;
  border-color:var(--line);
}

.profile-art{
  background:#d7d2c6;
}
.profile-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  z-index:1;
}
.profile-art-ring{
  z-index:2;
  mix-blend-mode:screen;
  pointer-events:none;
}
.portrait-badge{
  position:absolute;
  z-index:3;
  left:18px;
  bottom:18px;
  background:var(--lime);
  color:var(--ink);
  border:1px solid var(--ink);
  padding:8px 10px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
  transform:rotate(-2deg);
}

.uac-real-visual{
  padding:0;
  display:block;
  min-height:590px;
  background:#d9ddff;
  overflow:hidden;
}
.uac-collage{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1fr 1fr;
  min-height:590px;
  gap:8px;
  background:var(--ink);
}
.uac-tile{
  margin:0;
  overflow:hidden;
  position:relative;
  background:#ddd;
}
.uac-tile-1{grid-row:1/3}
.uac-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.uac-tile-2 img{object-position:left top}
.uac-tile-3 img{object-position:center center}
.dossier.is-open .uac-tile:hover img{transform:scale(1.025)}
.uac-visual-label{
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:min(480px,70%);
  background:var(--paper);
  border:1px solid var(--ink);
  padding:14px 16px;
  box-shadow:7px 7px 0 var(--orange);
}
.uac-visual-label span{
  font-family:var(--display);
  font-size:1.55rem;
}
.uac-visual-label small{
  font-family:var(--mono);
  font-size:.57rem;
  line-height:1.45;
}

.about-photo{
  margin:48px 0 0;
  border:1px solid var(--ink);
  background:var(--ink);
  overflow:hidden;
}
.about-photo img{
  display:block;
  width:100%;
  aspect-ratio:16/8;
  object-fit:cover;
  object-position:center;
}
.about-photo figcaption{
  background:var(--ink);
  color:var(--paper);
  padding:10px 12px;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
}
.cv-note{
  font-family:var(--mono);
  font-size:.62rem!important;
  color:var(--muted)!important;
  padding-left:12px;
  border-left:3px solid var(--orange);
}

@media(max-width:720px){
  .uac-real-visual{min-height:0}
  .uac-collage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:320px 210px;
    min-height:0;
  }
  .uac-tile-1{grid-column:1/3;grid-row:1}
  .uac-tile-2{grid-column:1;grid-row:2}
  .uac-tile-3{grid-column:2;grid-row:2}
  .uac-visual-label{
    left:12px;
    bottom:12px;
    max-width:calc(100% - 24px);
    box-shadow:4px 4px 0 var(--orange);
  }
  .uac-visual-label span{font-size:1.15rem}
  .about-photo img{aspect-ratio:4/3}
}

.modal-feature img,
.modal-assets img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.modal-feature img{object-position:top center}
.modal-assets > div{overflow:hidden}
@media(max-width:1100px){
  .stack-cloud button:nth-last-child(-n+2){
    position:static;
  }
}


/* =========================================
   V5 quick-fix pass
   ========================================= */

/* Accordion fix: hidden project content must not cover later case headers. */
.dossier-body-inner{
  overflow:hidden !important;
  pointer-events:none;
  visibility:hidden;
}
.dossier.is-open .dossier-body-inner{
  pointer-events:auto;
  visibility:visible;
}
.dossier-body > *{overflow:hidden !important;}
.dossier-head{position:relative;z-index:3;}
.dossier{position:relative;}

/* SELECTED OUTPUTS, contained carousel rather than an endless off-screen rail. */
.playground{overflow:visible;}
.output-carousel{margin-top:-18px;}
.output-carousel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:18px;
  border-top:1px solid var(--ink);
  padding-top:14px;
}
.output-carousel-hint{
  margin:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.output-controls{display:flex;align-items:center;gap:10px;}
.output-controls button{
  width:46px;height:46px;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-size:1.35rem;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.output-controls button:hover,.output-controls button:focus-visible{
  background:var(--ink);color:var(--paper);transform:translateY(-2px);
}
.output-status{min-width:84px;text-align:center;font-family:var(--mono);font-size:.64rem;}
.output-viewport{overflow:hidden;width:100%;}
.output-rail{
  display:flex;
  width:100%;max-width:none;
  gap:16px;
  padding:0 !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}
.output-rail::-webkit-scrollbar{display:none;}
.output-card{
  width:calc((100% - 32px)/3);
  min-width:calc((100% - 32px)/3);
  height:470px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,box-shadow .3s ease;
}
.output-card.is-current{
  transform:translateY(-7px);
  box-shadow:8px 8px 0 var(--ink);
}
.output-card:after{
  content:'VIEW';
  position:absolute;right:18px;top:18px;
  font-family:var(--mono);font-size:.56rem;
  border:1px solid currentColor;border-radius:999px;padding:5px 8px;
  opacity:0;transform:translateY(5px);
  transition:.22s ease;
}
.output-card:hover:after,.output-card.is-current:after{opacity:.8;transform:none;}
.output-card:hover{transform:translateY(-6px) rotate(-.25deg);}
.output-dots{display:flex;justify-content:center;gap:7px;margin-top:18px;}
.output-dots button{
  width:28px;height:5px;padding:0;border:0;background:rgba(17,18,15,.18);cursor:pointer;
  transition:width .2s ease,background .2s ease;
}
.output-dots button.is-active{width:52px;background:var(--ink);}

/* PROCESS, safer layout, more color, all five cards visible. */
.thinking{align-items:center;}
.thinking-loop{
  height:650px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(53,88,241,.10), transparent 31%),
    linear-gradient(135deg,#fffdf7 0%,#f7f3e9 100%);
}
.thinking-loop:before{
  content:'';
  position:absolute;
  width:350px;height:350px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(17,18,15,.28);
  border-radius:50%;
  animation:processOrbit 18s linear infinite;
}
.thinking-loop:after{
  content:'';
  position:absolute;left:50%;top:50%;width:440px;height:440px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(17,18,15,.08);
  border-radius:50%;z-index:-1;
}
@keyframes processOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.loop-center{
  z-index:3;
  width:156px;height:156px;
  box-shadow:10px 10px 0 var(--blue);
  transition:transform .3s ease,box-shadow .3s ease;
}
.thinking-loop:hover .loop-center{transform:translate(-50%,-50%) scale(1.05);box-shadow:14px 14px 0 var(--lime);}
.loop-step{
  z-index:4;
  width:205px;
  padding:17px 18px 18px;
  background:color-mix(in srgb,var(--process-accent) 42%,#fffdf7);
  box-shadow:8px 8px 0 color-mix(in srgb,var(--process-accent) 75%,#11120f);
  transform:rotate(var(--card-rot,0deg));
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;
}
.loop-step:hover{
  z-index:8;
  transform:rotate(0deg) translateY(-8px) scale(1.035);
  box-shadow:13px 13px 0 color-mix(in srgb,var(--process-accent) 80%,#11120f);
}
.loop-step b{font-size:.68rem;color:var(--orange);}
.loop-glyph{
  position:absolute;right:14px;top:12px;
  font-style:normal;font-family:var(--display);font-size:1.25rem;color:var(--ink);
  transition:transform .35s ease;
}
.loop-step:hover .loop-glyph{transform:rotate(18deg) scale(1.2);}
.loop-step span{font-size:1.75rem;}
.loop-1{left:5%;top:9%;--card-rot:-2deg;}
.loop-2{right:5%;top:9%;--card-rot:2deg;}
.loop-3{right:4%;bottom:8%;--card-rot:-2deg;}
.loop-4{left:50%;bottom:4%;--card-rot:2deg;transform:translateX(-50%) rotate(var(--card-rot));}
.loop-4:hover{transform:translateX(-50%) translateY(-8px) rotate(0) scale(1.035);}
.loop-5{left:4%;bottom:8%;--card-rot:2deg;}

/* STACK, contextual hover/tap popover instead of the permanent note below. */
.stack{align-items:start;}
.stack-cloud{overflow:visible;}
.tool-chip{z-index:2;}
.tool-chip.is-active{
  background:var(--paper) !important;
  color:var(--ink) !important;
  transform:rotate(0) translateY(-6px) scale(1.045) !important;
}
.tool-popover{
  position:absolute;
  z-index:30;
  left:0;top:0;
  width:min(330px,calc(100% - 24px));
  min-height:130px;
  padding:17px 18px 18px 76px;
  border:1px solid var(--ink);
  background:var(--paper);
  box-shadow:8px 8px 0 var(--popover-color,var(--orange));
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.98);
  pointer-events:none;
  transition:opacity .16s ease,transform .2s ease,visibility .16s;
}
.tool-popover.is-visible{
  opacity:1;visibility:visible;transform:none;
}
.tool-popover-icon{
  position:absolute;left:16px;top:18px;
  width:44px;height:44px;
  border:1px solid var(--ink);
  display:grid;place-items:center;
  background:var(--popover-color,var(--orange));
  font-family:var(--display);font-size:1.05rem;
}
.tool-popover-title{display:block;font-family:var(--display);font-size:1.45rem;line-height:1;}
.tool-popover-desc{margin:9px 0 0;color:var(--muted);font-size:.76rem;line-height:1.55;}

@media(max-width:1100px){
  .output-card{width:calc((100% - 16px)/2);min-width:calc((100% - 16px)/2);}
  .thinking-loop{height:610px;}
  .loop-step{width:190px;}
}

@media(max-width:720px){
  .output-carousel{margin-top:0;}
  .output-carousel-top{align-items:flex-end;}
  .output-carousel-hint{max-width:150px;}
  .output-controls button{width:42px;height:42px;}
  .output-status{min-width:68px;}
  .output-card{width:88%;min-width:88%;height:420px;}
  .output-card.is-current{box-shadow:5px 5px 0 var(--ink);}

  .thinking-loop{
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
    overflow:visible;
  }
  .thinking-loop:before,.thinking-loop:after{display:none;}
  .loop-center,.loop-step{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%;transform:none!important;}
  .loop-center{min-height:132px;border-radius:0;box-shadow:6px 6px 0 var(--blue);}
  .loop-step{padding:18px;box-shadow:5px 5px 0 color-mix(in srgb,var(--process-accent) 75%,#11120f);}
  .loop-step:hover{transform:translateY(-3px)!important;}

  .stack-cloud{position:relative;overflow:visible;}
  .tool-popover{
    position:fixed;
    left:14px!important;right:14px!important;bottom:14px!important;top:auto!important;
    width:auto;
    min-height:118px;
    box-shadow:6px 6px 0 var(--popover-color,var(--orange));
  }
}

/* =========================================
   V6 polish pass from feedback
   ========================================= */

.profile-art{
  position:relative;
  background:linear-gradient(135deg,#ff5aa0 0%,#9f5bf2 48%,#3457f1 100%);
}
.profile-art:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 28%,rgba(17,18,15,.06));
  z-index:0;
}
.profile-art-glow{
  position:absolute;
  left:10%;
  right:10%;
  bottom:7%;
  height:36%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  filter:blur(18px);
  z-index:1;
  pointer-events:none;
}
.profile-art-ring,
.ring-a,
.ring-b{display:none !important;}
.profile-photo-main{
  z-index:2;
  object-fit:contain;
  object-position:center bottom;
  width:100%;
  height:100%;
  padding:14px 18px 0;
  filter:drop-shadow(0 28px 32px rgba(17,18,15,.28));
}
.portrait-badge{
  left:22px;
  bottom:22px;
  z-index:3;
  transform:rotate(-1.5deg);
  box-shadow:5px 5px 0 rgba(17,18,15,.14);
}
.portrait-meta{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.portrait-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(17,18,15,.75);
  background:rgba(243,240,231,.92);
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.08em;
}

.uac-real-visual{
  position:relative;
  min-height:570px;
  background:linear-gradient(135deg,#d6e4ff 0%,#eef2ff 100%);
}
.uac-collage{
  grid-template-columns:1.04fr .96fr;
  grid-template-rows:1fr .88fr;
  min-height:570px;
  gap:12px;
  padding:12px;
  background:transparent;
}
.uac-tile{
  border:1px solid var(--ink);
  background:#fffdf7;
  box-shadow:6px 6px 0 rgba(17,18,15,.08);
}
.uac-screen img{
  object-fit:contain;
  padding:10px;
  background:#fffdf7;
}
.uac-photo img{
  object-fit:cover;
}
.uac-visual-label{
  box-shadow:8px 8px 0 var(--blue);
}

.output-status{min-width:70px;}
.output-card{
  display:grid;
  grid-template-rows:auto auto auto auto auto;
  gap:10px;
}
.output-card:before{display:none;}
.output-media{
  position:relative;
  height:230px;
  margin-top:6px;
  border:1px solid currentColor;
  overflow:hidden;
  background:rgba(255,255,255,.28);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.output-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.output-media-sheet img{
  object-fit:contain;
  background:#fffdf7;
  padding:10px;
}
.output-card strong{
  margin-top:0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.output-card small{
  margin-top:0;
  font-size:.66rem;
  letter-spacing:.05em;
  opacity:.85;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.output-desc{
  margin:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px);
  transition:max-height .3s ease, opacity .25s ease, transform .25s ease;
  font-size:.78rem;
  line-height:1.55;
}
.output-card:hover .output-media,
.output-card.is-current .output-media{
  transform:translateY(-7px);
  box-shadow:7px 7px 0 rgba(17,18,15,.14);
}
.output-card:hover strong,
.output-card.is-current strong,
.output-card:hover small,
.output-card.is-current small{
  transform:translateY(-8px);
}
.output-card:hover .output-desc,
.output-card.is-current .output-desc{
  max-height:96px;
  opacity:1;
  transform:translateY(-4px);
}
.output-card.is-current{
  box-shadow:8px 8px 0 var(--ink);
}
.output-card.is-in-view-window:not(.is-current){
  opacity:1;
}

.thinking-loop{
  height:700px;
  overflow:hidden;
}
.loop-center{
  cursor:pointer;
  border:1px solid var(--ink);
}
.loop-center:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:4px;
}
.loop-center small{opacity:.9;}
.loop-step{
  width:188px;
}
.loop-1{left:4%;top:9%;}
.loop-2{right:4%;top:10%;}
.loop-3{right:6%;top:47%;bottom:auto;}
.loop-4{left:50%;bottom:6%;}
.loop-5{left:6%;top:48%;bottom:auto;}
.loop-step.is-active{
  z-index:12;
  outline:2px solid var(--ink);
  box-shadow:14px 14px 0 color-mix(in srgb,var(--process-accent) 85%,#11120f);
}
.loop-step.is-active .loop-glyph{transform:rotate(18deg) scale(1.16);}
.thinking-loop.is-burst .loop-center strong{
  animation:loopClick .38s ease;
}
@keyframes loopClick{
  0%{transform:scale(1);}
  50%{transform:scale(1.16) rotate(10deg);}
  100%{transform:scale(1);}
}

.about-profile-card{
  background:var(--paper);
  box-shadow:10px 10px 0 var(--blue);
}
.about-photo-art{
  position:relative;
  min-height:390px;
  overflow:hidden;
  background:linear-gradient(135deg,#1a1c19 0%,#282c27 100%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.about-photo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  padding-top:16px;
  filter:contrast(1.05) saturate(1.05) drop-shadow(0 22px 36px rgba(0,0,0,.35));
}
.about-photo-accent{
  position:absolute;
  inset:auto -8% -14% auto;
  width:54%;
  height:54%;
  background:radial-gradient(circle at 40% 40%, rgba(201,255,84,.95), rgba(201,255,84,0) 72%);
  filter:blur(28px);
}
.about-photo-label{
  position:absolute;
  left:16px;
  top:16px;
  padding:8px 10px;
  background:rgba(243,240,231,.92);
  border:1px solid var(--ink);
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
}
.about-profile-card figcaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  background:var(--paper);
  color:var(--ink);
  border-top:1px solid var(--ink);
  padding:12px 14px;
}
.about-profile-card figcaption span:first-child{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
}
.about-profile-card figcaption span:last-child{
  max-width:360px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
}

.contact-mail{
  display:flex !important;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  width:100%;
  margin-top:28px;
  padding-bottom:14px;
  border-bottom:2px solid rgba(255,255,255,.8) !important;
  font-size:inherit !important;
}
.contact-mail-label{
  font-family:var(--display);
  font-size:clamp(2.2rem,3.4vw,4.2rem);
  line-height:.95;
  overflow-wrap:anywhere;
}
.contact-mail-arrow{
  flex:0 0 auto;
  font-size:2.9rem;
  line-height:1;
}
.contact-socials{
  display:flex !important;
  flex-wrap:wrap;
  gap:12px !important;
  margin-top:28px !important;
  font-family:var(--mono) !important;
}
.contact-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);
  font-size:.72rem !important;
  letter-spacing:.05em;
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.contact-socials a:hover,
.contact-socials a:focus-visible{
  background:#fff;
  color:var(--blue);
  border-color:#fff;
  transform:translateY(-2px);
}

@media(max-width:1100px){
  .thinking-loop{height:660px;}
  .loop-step{width:176px;}
  .loop-3{right:4%;top:49%;}
  .loop-5{left:4%;top:50%;}
}

@media(max-width:720px){
  .profile-photo-main{padding:12px 10px 0;}
  .portrait-meta{right:12px;bottom:12px;gap:6px;}
  .portrait-meta span{font-size:.52rem;padding:0 8px;}
  .uac-collage{grid-template-columns:1fr 1fr;grid-template-rows:310px 220px;padding:10px;gap:10px;}
  .output-media{height:190px;}
  .output-card strong{font-size:2.45rem;}
  .output-card:hover strong,
  .output-card.is-current strong,
  .output-card:hover small,
  .output-card.is-current small{transform:none;}
  .output-card:hover .output-desc,
  .output-card.is-current .output-desc{transform:none;max-height:120px;}
  .about-photo-art{min-height:320px;}
  .about-profile-card figcaption{flex-direction:column;}
  .contact-mail{align-items:flex-start;}
  .contact-mail-arrow{font-size:2.4rem;}
}

/* =========================================
   V7 targeted fixes
   ========================================= */

/* Hero profile, cleaner portrait treatment. */
.profile-art{
  background:linear-gradient(135deg,#181a18 0%,#222520 100%) !important;
}
.profile-art:before,
.profile-art-glow{display:none !important;}
.profile-photo-main{
  padding:0 12px 0 !important;
  object-fit:contain;
  object-position:center bottom;
}
.portrait-badge{
  background:var(--lime);
}

/* What I do, reveal the supporting copy on hover, and clean up Systems motion. */
.skill-panel h3{margin-bottom:0;}
.skill-panel p{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(14px);
  transition:max-height .28s ease, opacity .24s ease, transform .24s ease, color .24s ease;
}
.skill-panel:hover p,
.skill-panel:focus-within p{
  max-height:100px;
  opacity:1;
  transform:translateY(0);
  margin-top:12px;
}
.motion-flow{width:118px;height:92px;}
.motion-flow i{width:18px;height:18px;}
.motion-flow i:nth-child(1){left:10px;top:58px;}
.motion-flow i:nth-child(2){left:48px;top:16px;}
.motion-flow i:nth-child(3){left:86px;top:52px;right:auto;bottom:auto;}
.motion-flow:before,
.motion-flow:after{
  height:2px;
  background:#b64d7d;
}
.motion-flow:before{width:46px;left:22px;top:57px;transform:rotate(-38deg);}
.motion-flow:after{width:44px;left:57px;top:34px;transform:rotate(32deg);}
@media(max-width:720px){
  .skill-panel p{max-height:none;opacity:1;transform:none;margin-top:12px;}
}

/* Output cards, keep assets fully readable where needed. */
.output-card{overflow:hidden;}
.output-media-sheet img{
  object-fit:contain;
  object-position:center;
}

/* Process section, clearer cycle state and less cramped cards. */
.thinking-loop{overflow:visible;}
.loop-center{
  --loop-progress:72deg;
  overflow:visible;
  position:absolute;
}
.loop-center::before{
  content:'';
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:conic-gradient(var(--blue) 0 var(--loop-progress), rgba(17,18,15,.12) var(--loop-progress) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  z-index:-1;
}
.loop-progress{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,118px);
  display:flex;
  gap:8px;
  z-index:7;
}
.loop-progress i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(17,18,15,.18);
  transition:transform .2s ease, background .2s ease;
}
.loop-progress i.is-active{
  background:var(--blue);
  transform:scale(1.18);
}
.loop-caption{
  position:absolute;
  left:50%;
  top:50%;
  width:280px;
  transform:translate(-50%,146px);
  text-align:center;
  z-index:6;
}
.loop-caption b{
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
}
.loop-caption span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.45;
}
.loop-step{
  width:196px;
}
.loop-step small{
  display:block;
  max-width:140px;
  line-height:1.45;
}
.loop-1{left:6%;top:7%;}
.loop-2{right:6%;top:8%;}
.loop-3{right:5%;top:45%;}
.loop-4{left:50%;bottom:5%;}
.loop-5{left:5%;top:45%;}
@media(max-width:1100px){
  .loop-step{width:184px;}
  .loop-step small{max-width:130px;}
}
@media(max-width:720px){
  .loop-progress,
  .loop-caption{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
  }
  .loop-progress{justify-content:center;order:2;}
  .loop-caption{order:3;padding-top:2px;}
}

/* Stack popover, add Piotr portrait to each card. */
.tool-popover{
  padding-right:112px;
  min-height:144px;
}
.tool-popover-face{
  position:absolute;
  right:10px;
  bottom:8px;
  width:78px;
  height:98px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 12px 14px rgba(17,18,15,.16));
}
@media(max-width:720px){
  .tool-popover{padding-right:96px;}
  .tool-popover-face{width:64px;height:86px;right:8px;bottom:10px;}
}

/* About section, swap the portrait placeholder for a CV + certification collage. */
.about-docs-art{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:58px 16px 16px;
  background:linear-gradient(135deg,#1a1c19 0%,#262925 100%);
}
.doc-collage{
  width:100%;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:14px;
}
.doc-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  min-height:122px;
  padding:16px;
  border:1px solid var(--ink);
  background:var(--paper);
  box-shadow:7px 7px 0 rgba(52,87,241,.85);
  transition:transform .18s ease, box-shadow .18s ease;
}
.doc-card:hover,
.doc-card:focus-visible{
  transform:translateY(-4px) rotate(-.4deg);
  box-shadow:10px 10px 0 rgba(52,87,241,.92);
}
.doc-card span{
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
}
.doc-card strong{
  font-family:var(--display);
  font-size:1.45rem;
  line-height:1.05;
}
.doc-card small{
  color:var(--muted);
  font-size:.73rem;
  line-height:1.45;
}
.doc-card em{
  margin-top:auto;
  font-style:normal;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--blue);
}
.doc-card-main{
  min-height:260px;
  grid-row:span 2;
  justify-content:space-between;
  background:linear-gradient(135deg,#fffdf7 0%,#f9f4ea 100%);
  box-shadow:7px 7px 0 rgba(201,255,84,.86);
}
.doc-card-main:hover,
.doc-card-main:focus-visible{
  box-shadow:10px 10px 0 rgba(201,255,84,.92);
}
.cert-card{background:#f7f3ea;}
@media(max-width:900px){
  .doc-collage{grid-template-columns:1fr;}
  .doc-card-main{grid-row:auto;min-height:190px;}
}

/* Keep the footer/contact links easy to read. */
.contact-socials a{
  font-size:.74rem !important;
}

/* =========================================
   V8 refinements
   ========================================= */

/* Section 02, make cards feel less empty while keeping the hover logic. */
.skill-stage{
  border-top:1px solid var(--ink);
}
.skill-panel{
  min-height:350px;
  padding:26px 24px 26px;
}
.skill-no{
  top:24px;
  left:24px;
}
.skill-motion{
  top:24px;
  right:24px;
  width:126px;
  height:98px;
  transform:none;
}
.skill-panel h3{
  margin:128px 0 0;
  font-size:clamp(3rem,3.6vw,4rem);
  line-height:.92;
}
.skill-panel p{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(14px);
  margin-top:12px;
  max-width:260px;
  transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
}
.skill-panel:hover p,
.skill-panel:focus-within p{
  max-height:110px;
  opacity:1;
  transform:translateY(0);
}
.motion-target i:nth-child(1){width:74px;height:74px;}
.motion-target i:nth-child(2){width:44px;height:44px;}
.motion-target i:nth-child(3){width:16px;height:16px;}
.motion-pages i{width:54px;height:64px;}
.motion-chart i{width:12px;}
.motion-flow{width:112px;height:74px;}
.motion-flow i{width:18px;height:18px;}
.motion-flow i:nth-child(1){left:8px;top:40px;}
.motion-flow i:nth-child(2){left:47px;top:0;}
.motion-flow i:nth-child(3){left:88px;top:35px;}
.motion-flow:before,
.motion-flow:after{content:"";position:absolute;height:2px;background:#b64d7d;transform-origin:left center;}
.motion-flow:before{width:48px;left:20px;top:42px;transform:rotate(-40deg);}
.motion-flow:after{width:48px;left:58px;top:18px;transform:rotate(34deg);}

/* UAC case study, make the real assets display cleaner. */
.uac-real-visual{background:#eef0ff;}
.uac-collage{gap:10px;padding:10px;box-sizing:border-box;min-height:580px;}
.uac-tile{background:#fffdf7;border:1px solid rgba(17,18,15,.08);}
.uac-screen img{
  object-fit:contain;
  object-position:center top;
  background:#fffdf7;
}
.uac-tile-1 img{object-fit:contain;object-position:center top;}
.uac-tile-2 img{object-fit:contain;object-position:left top;}
.uac-tile-3 img{object-fit:cover;object-position:center center;}
.uac-visual-label{max-width:min(380px,64%);}

/* Selected outputs, keep card 01 and the carousel alignment cleaner. */
.output-viewport{overflow:hidden;}
.output-rail{gap:16px;}
.output-card{overflow:hidden;}
@media(min-width:1101px){
  .output-card{width:calc((100% - 32px)/3);min-width:calc((100% - 32px)/3);}
}
.output-media{height:240px;}
.output-media img{object-position:center top;}
.output-a .output-media img,
.output-b .output-media img,
.output-d .output-media img{
  object-fit:contain;
  background:#fffdf7;
  padding:10px;
}
.output-a .output-media img{padding:4px;}

/* Process loop, remove the added blue progress UI and make the selected step flash more clearly. */
.loop-center::before,
.loop-progress{display:none !important;}
.loop-caption{transform:translate(-50%,122px);}
.loop-step{width:204px;}
.loop-step span{font-size:1.55rem;line-height:.95;}
.loop-step small{max-width:148px;line-height:1.45;}
.loop-step.is-active{
  z-index:12;
  outline:2px solid var(--ink);
  transform:translateY(-4px) rotate(-1deg);
  box-shadow:16px 16px 0 color-mix(in srgb,var(--process-accent) 90%,#11120f);
}
.thinking-loop.is-burst .loop-step.is-active{
  animation:activeStepFlash .42s ease;
}
.thinking-loop.is-burst .loop-center{
  animation:centerNudge .42s ease;
}
@keyframes activeStepFlash{
  0%{transform:translateY(-4px) rotate(-1deg) scale(1);}
  50%{transform:translateY(-9px) rotate(-2deg) scale(1.07);box-shadow:22px 22px 0 color-mix(in srgb,var(--process-accent) 100%,#11120f);}
  100%{transform:translateY(-4px) rotate(-1deg) scale(1);}
}
@keyframes centerNudge{
  0%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.08) rotate(8deg);}
  100%{transform:translate(-50%,-50%) scale(1);}
}

/* Tools popover, use the clean face sticker. */
.tool-popover-face{
  width:84px;
  height:104px;
  right:12px;
  bottom:8px;
  object-fit:contain;
  object-position:center bottom;
}

/* About section, longer experience list and a wider horizontal proof block. */
.about-body{padding-top:46px;}
.about-photo{margin:34px 0 0;}
.about-doc-card{width:100%;}
.about-docs-art{padding:54px 18px 18px;}
.doc-collage{
  grid-template-columns:1.35fr 1fr 1fr 1fr;
  align-items:stretch;
}
.doc-card-main{min-height:205px;grid-row:auto;}
.doc-card{min-height:160px;}
.about-profile-card figcaption{
  align-items:flex-start;
  gap:18px;
}
.experience-list{margin-top:42px;}
.experience-list div{grid-template-columns:92px 1.1fr 1.2fr;min-height:90px;}
.experience-list strong{font-size:1.2rem;line-height:1.08;}
.experience-list small{font-size:.82rem;line-height:1.5;}

/* References, closer to the previous portfolio feel, with portraits + copy. */
.quote-stack-rich article{
  grid-template-columns:48px 120px 1fr 180px;
  gap:24px;
  min-height:220px;
  align-items:center;
}
.quote-person{
  width:120px;
  height:120px;
  border:1px solid var(--ink);
  overflow:hidden;
  background:#fff;
  box-shadow:8px 8px 0 rgba(52,87,241,.2);
}
.quote-person img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.quote-stack-rich blockquote{font-size:1.12rem;line-height:1.6;}
.quote-stack-rich footer{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.62rem;
}
.quote-stack-rich footer strong{
  font-family:var(--display);
  font-size:1rem;
  color:var(--ink);
  line-height:1;
}
.quote-stack-rich footer small{
  color:var(--muted);
  font-size:.62rem;
  line-height:1.5;
}

/* Contact, make the email line cleaner and the divider less awkward. */
.contact-mail{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
  margin-top:24px;
  padding-bottom:12px;
}
.contact-mail-label{
  font-size:clamp(1.9rem,2.7vw,3.45rem);
  line-height:.94;
  max-width:13ch;
}
.contact-mail-arrow{
  font-size:2.45rem;
  transform:translateY(-4px);
}
.contact-socials{margin-top:22px !important;}
.contact-socials a{font-size:.68rem !important;}

@media(max-width:1100px){
  .doc-collage{grid-template-columns:1fr 1fr;}
  .doc-card-main{grid-column:1 / -1;}
  .quote-stack-rich article{grid-template-columns:40px 100px 1fr;}
  .quote-stack-rich footer{grid-column:2 / -1;}
}

@media(max-width:720px){
  .skill-panel{min-height:300px;}
  .skill-motion{width:106px;height:84px;right:18px;top:18px;}
  .skill-panel h3{margin-top:112px;font-size:2.6rem;}
  .uac-collage{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;}
  .uac-tile-1,.uac-tile-2,.uac-tile-3{grid-column:auto;grid-row:auto;min-height:220px;}
  .loop-step{width:100%;}
  .loop-caption{transform:none;position:relative;left:auto;top:auto;width:100%;margin-top:16px;}
  .doc-collage{grid-template-columns:1fr;}
  .doc-card,.doc-card-main{min-height:auto;grid-column:auto;}
  .quote-stack-rich article{grid-template-columns:34px 1fr;}
  .quote-person{width:86px;height:86px;grid-column:2;}
  .quote-stack-rich blockquote,
  .quote-stack-rich footer{grid-column:2;}
  .contact-mail-label{max-width:100%;font-size:2rem;}
}

/* =========================================
   V10 refinements after feedback
   ========================================= */

/* HERO PROFILE, give the card more life. */
.hero-profile{position:relative;overflow:visible;}
.profile-art{
  --mx:0;
  --my:0;
  position:relative;
  overflow:hidden;
}
.profile-art:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.12) 44%,transparent 70%);
  transform:translateX(-120%);
  animation:profileSweep 8s ease-in-out infinite;
  pointer-events:none;
}
.profile-art-glow{
  transition:transform .35s ease, opacity .35s ease;
  transform:translate(calc(var(--mx) * 18px), calc(var(--my) * 18px)) scale(1.03);
  opacity:.88;
}
.profile-photo-main{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  transform:translate(calc(var(--mx) * 10px), calc(var(--my) * 12px)) scale(1.02);
}
.hero-profile:hover .profile-photo-main{
  filter:brightness(1.03) contrast(1.03);
}
.portrait-badge,
.portrait-meta span,
.profile-float{
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .2s ease;
}
.portrait-badge{
  transform:translate(calc(var(--mx) * -6px), calc(var(--my) * -8px)) rotate(-1.5deg);
  animation:tagFloat 4.8s ease-in-out infinite;
}
.portrait-meta span:nth-child(1){
  transform:translate(calc(var(--mx) * -4px), calc(var(--my) * -5px));
  animation:tagFloat 5.4s ease-in-out infinite .2s;
}
.portrait-meta span:nth-child(2){
  transform:translate(calc(var(--mx) * -5px), calc(var(--my) * -7px));
  animation:tagFloat 5.8s ease-in-out infinite .45s;
}
.profile-float{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(17,18,15,.75);
  background:rgba(243,240,231,.92);
  font-family:var(--mono);
  font-size:.56rem;
  letter-spacing:.08em;
  box-shadow:5px 5px 0 rgba(17,18,15,.12);
}
.profile-float-a{
  left:20px;
  top:20px;
  transform:translate(calc(var(--mx) * -4px), calc(var(--my) * -4px)) rotate(-2deg);
  animation:tagFloat 6s ease-in-out infinite .1s;
}
.profile-float-b{
  right:20px;
  top:26px;
  transform:translate(calc(var(--mx) * -8px), calc(var(--my) * -4px)) rotate(2deg);
  animation:tagFloat 6.5s ease-in-out infinite .35s;
}
.profile-grid div{
  position:relative;
  overflow:hidden;
  transition:transform .24s ease, background .24s ease;
}
.profile-grid div:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:rgba(52,87,241,.08);
  transition:width .28s ease;
}
.hero-profile:hover .profile-grid div{transform:translateY(-2px);}
.hero-profile:hover .profile-grid div:before{width:100%;}
.hero-profile:hover .profile-grid div:nth-child(2):before{transition-delay:.04s;}
.hero-profile:hover .profile-grid div:nth-child(3):before{transition-delay:.08s;}
.hero-profile:hover .profile-grid div:nth-child(4):before{transition-delay:.12s;}
@keyframes profileSweep{0%,16%{transform:translateX(-120%)}24%,50%{transform:translateX(125%)}100%{transform:translateX(125%)}}
@keyframes tagFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* SKILLS, rebalance the cards and fix the Systems icon. */
.skill-panel{
  min-height:332px;
  padding:26px 22px 24px;
}
.skill-no{top:22px;left:22px;}
.skill-motion{top:26px;right:26px;transform:none;}
.skill-panel h3{
  margin:142px 0 0;
  font-size:clamp(3rem,3.65vw,4.15rem);
  line-height:.9;
}
.skill-panel p{
  margin-top:14px;
  max-width:270px;
}
.motion-flow{
  width:120px;
  height:88px;
}
.motion-flow i{
  width:18px;
  height:18px;
  border-width:2px;
}
.motion-flow i:nth-child(1){left:8px;top:46px;}
.motion-flow i:nth-child(2){left:50px;top:4px;}
.motion-flow i:nth-child(3){left:92px;top:42px;right:auto;bottom:auto;}
.motion-flow:before,
.motion-flow:after{
  height:2px;
  transform-origin:left center;
}
.motion-flow:before{width:52px;left:22px;top:49px;transform:rotate(-44deg);}
.motion-flow:after{width:52px;left:60px;top:19px;transform:rotate(39deg);}
.skill-panel:hover .motion-flow i:nth-child(1),
.skill-panel:hover .motion-flow i:nth-child(2),
.skill-panel:hover .motion-flow i:nth-child(3){animation:nodePulse .72s ease-in-out infinite alternate;}
.skill-panel:hover .motion-flow:before{animation:linkPulseA .9s ease-in-out infinite alternate;}
.skill-panel:hover .motion-flow:after{animation:linkPulseB .9s ease-in-out infinite alternate;}
@keyframes nodePulse{from{transform:scale(1)}to{transform:scale(1.2)}}
@keyframes linkPulseA{from{transform:rotate(-44deg) scaleX(1)}to{transform:rotate(-39deg) scaleX(1.08)}}
@keyframes linkPulseB{from{transform:rotate(39deg) scaleX(1)}to{transform:rotate(34deg) scaleX(1.08)}}

/* CASE 01, make the visual board smaller and cleaner. */
.uac-real-visual{
  min-height:500px;
}
.uac-collage{
  grid-template-columns:1fr 1fr;
  grid-template-rows:250px 200px;
  min-height:500px;
  gap:12px;
  padding:18px;
}
.uac-tile-1{grid-column:1;grid-row:1;}
.uac-tile-2{grid-column:2;grid-row:1;}
.uac-tile-3{grid-column:1 / span 2;grid-row:2;}
.uac-tile{
  overflow:hidden;
  border:1px solid var(--ink);
  background:#fffdf7;
  box-shadow:6px 6px 0 rgba(17,18,15,.08);
}
.uac-tile-1 img,
.uac-tile-2 img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:12px;
  background:#fffdf7;
}
.uac-tile-2 img{object-fit:cover;object-position:left top;padding:0;}
.uac-tile-3 img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.uac-visual-label{left:18px;bottom:18px;max-width:66%;}

/* OUTPUTS, prevent the first card from being clipped. */
.output-carousel{overflow:visible;}
.output-viewport{
  overflow:visible;
  padding-top:10px;
}
.output-rail{
  gap:18px;
  padding:0 !important;
  scroll-padding-left:0 !important;
  align-items:stretch;
}
.output-card{
  width:calc((100% - 36px)/3);
  min-width:calc((100% - 36px)/3);
  height:472px;
  overflow:visible;
}
.output-card .output-media,
.output-card:after{pointer-events:none;}
.output-card.is-current{transform:translateY(-8px);}
.output-card:first-child{margin-left:2px;}
.output-status{min-width:92px;}
@media(max-width:1100px){
  .output-card{width:calc((100% - 18px)/2);min-width:calc((100% - 18px)/2);}
}
@media(max-width:720px){
  .output-viewport{overflow:hidden;padding-top:6px;}
  .output-card{width:88%;min-width:88%;height:420px;overflow:hidden;}
}

/* PROCESS, align all cards better and keep card 04 consistent. */
.thinking-loop{
  height:640px;
}
.loop-caption{transform:translate(-50%,124px);}
.loop-step{width:194px;}
.loop-1{left:6%;top:9%;}
.loop-2{right:6%;top:9%;}
.loop-3{right:8%;top:45%;bottom:auto;}
.loop-4{left:50%;bottom:6%;top:auto;}
.loop-5{left:8%;top:45%;bottom:auto;}
.loop-step.loop-4{transform:translateX(-50%) rotate(var(--card-rot));}
.loop-step.loop-4.is-active{transform:translateX(-50%) translateY(-4px) rotate(0deg);}
.thinking-loop.is-burst .loop-step.loop-4.is-active{
  animation:loopFourFlash .42s ease;
}
@keyframes loopFourFlash{
  0%{transform:translateX(-50%) translateY(-4px) scale(1);}
  50%{transform:translateX(-50%) translateY(-9px) scale(1.07);box-shadow:22px 22px 0 color-mix(in srgb,var(--process-accent) 100%,#11120f);}
  100%{transform:translateX(-50%) translateY(-4px) scale(1);}
}

/* STACK, spread chips upward and out. */
.stack-cloud{min-height:520px;}
.stack-cloud .tool-chip:nth-child(1){left:5% !important;top:8% !important;}
.stack-cloud .tool-chip:nth-child(2){left:39% !important;top:1% !important;}
.stack-cloud .tool-chip:nth-child(3){left:67% !important;top:12% !important;}
.stack-cloud .tool-chip:nth-child(4){left:16% !important;top:31% !important;}
.stack-cloud .tool-chip:nth-child(5){left:50% !important;top:38% !important;}
.stack-cloud .tool-chip:nth-child(6){left:77% !important;top:47% !important;}
.stack-cloud .tool-chip:nth-child(7){left:1% !important;top:58% !important;}
.stack-cloud .tool-chip:nth-child(8){left:33% !important;top:65% !important;}
.stack-cloud .tool-chip:nth-child(9){left:61% !important;top:75% !important;}
.stack-cloud .tool-chip:nth-child(10){left:25% !important;top:86% !important;}
.stack-cloud .tool-chip:nth-child(11){left:47% !important;top:88% !important;}
.tool-popover{max-width:min(330px,64%);}

/* ABOUT, place experience top-right and the CV/cert block under the title on the left. */
.about{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  column-gap:48px;
  row-gap:28px;
  align-items:start;
}
.about-statement{grid-column:1;grid-row:1;}
.about-body{grid-column:2;grid-row:1;padding-top:18px;}
.about-proof-panel{grid-column:1;grid-row:2;align-self:start;}
.about-body > p{max-width:100%;}
.experience-list{margin-top:34px;}
.experience-list div{grid-template-columns:96px 1.12fr 1.15fr;}
.about-doc-card{width:100%;margin:0;}
.about-docs-art{padding:56px 14px 14px;}
.doc-collage{
  grid-template-columns:1.15fr 1.15fr 1fr 1fr;
  gap:14px;
}
.doc-card,
.doc-card-main{min-height:190px;}
.cv-note{margin:16px 0 0;font-size:.75rem;line-height:1.55;color:var(--muted);}
@media(max-width:1100px){
  .about{display:block;}
  .about-body{padding-top:0;}
  .about-proof-panel{margin-top:30px;}
}

/* REFERENCES, animate in and make the area less static. */
.quote-stack-rich article{
  opacity:0;
  transform:translateY(24px);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .28s ease, background .28s ease;
  transition-delay:var(--quote-delay,0ms);
  position:relative;
}
.quote-stack-rich article.is-visible{
  opacity:1;
  transform:none;
}
.quote-stack-rich article:before{
  content:"";
  position:absolute;
  left:68px;
  right:18px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, rgba(52,87,241,.15), rgba(52,87,241,0));
  transform:scaleX(.3);
  transform-origin:left center;
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.quote-stack-rich article:hover{
  background:rgba(52,87,241,.03);
}
.quote-stack-rich article:hover:before{
  opacity:1;
  transform:scaleX(1);
}
.quote-person{
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
  filter:saturate(.92);
}
.quote-stack-rich article:hover .quote-person{
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:12px 12px 0 rgba(52,87,241,.24);
  filter:saturate(1.06);
}

/* CONTACT, force one line on desktop and keep the divider clean. */
.contact-mail{
  display:flex !important;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding-bottom:14px;
  border-bottom:2px solid rgba(255,255,255,.84) !important;
}
.contact-mail-label{
  max-width:none;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  font-size:clamp(2rem,3.05vw,3.55rem);
  line-height:.92;
}
.contact-mail-arrow{font-size:2.65rem;}
@media(max-width:820px){
  .contact-mail-label{white-space:normal;}
}

/* =========================================
   V11 refinements
   ========================================= */

/* Hero profile, swap in the cutout portrait and fit it better. */
.profile-art{
  background:linear-gradient(180deg,#1b1c1c 0%,#0d0d0d 100%) !important;
}
.profile-photo-main{
  object-fit:contain !important;
  object-position:center bottom !important;
  padding:16px 22px 0 !important;
  transform:translate(calc(var(--mx) * 10px), calc(var(--my) * 10px)) scale(1.01) !important;
}
.profile-float-a{left:24px;top:16px;}
.profile-float-b{right:22px;top:22px;}
.portrait-meta{right:14px;bottom:22px;}
.hero-ticker{position:relative;}
.ticker-track{
  gap:0;
  padding-right:30px;
  animation-duration:34s !important;
}
@keyframes ticker{to{transform:translateX(-33.3333%);}}

/* Contact anchor targeting. */
#contact-start{scroll-margin-top:110px;}

/* Case 01, show the social collage and planning board better. */
.uac-collage{
  grid-template-columns:.78fr 1.22fr;
  grid-template-rows:250px 220px;
  min-height:520px;
}
.uac-tile-1{
  display:grid;
  place-items:center;
  background:#ece7da;
}
.uac-tile-1 img{
  width:58%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  padding:0;
  border:1px solid rgba(17,18,15,.2);
  box-shadow:0 0 0 10px #fffdf7;
}
.uac-tile-2 img{
  object-fit:contain;
  object-position:center top;
  padding:4px;
  background:#fffdf7;
}
.uac-tile-3 img{object-position:center 28%;}
.uac-visual-label{max-width:520px;}

/* Systems icon, use the SVG version for cleaner geometry and clearer motion. */
.motion-flow{
  width:124px;
  height:84px;
}
.motion-flow:before,
.motion-flow:after,
.motion-flow i{display:none !important;}
.motion-flow-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.motion-flow .flow-link{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:130;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .55s ease, transform .45s ease;
}
.motion-flow .flow-node{
  fill:var(--paper);
  stroke:currentColor;
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .35s ease, fill .35s ease;
}
.skill-panel:hover .motion-flow .flow-link{
  stroke-dashoffset:-26;
}
.skill-panel:hover .motion-flow .flow-node-a{animation:flowNodePulse 1s ease-in-out infinite .05s;}
.skill-panel:hover .motion-flow .flow-node-b{animation:flowNodePulse 1s ease-in-out infinite .2s;}
.skill-panel:hover .motion-flow .flow-node-c{animation:flowNodePulse 1s ease-in-out infinite .35s;}
@keyframes flowNodePulse{
  0%,100%{transform:scale(1);fill:var(--paper);}
  50%{transform:scale(1.28);fill:rgba(255,255,255,.18);}
}

/* Process, keep the help text away from the Ship card. */
.thinking-loop{height:660px;}
.loop-caption{
  width:270px;
  text-align:center;
  transform:translate(-50%,92px) !important;
  z-index:2;
}
.loop-caption span{font-size:.88rem;line-height:1.35;display:block;}
.loop-4{bottom:3%;}
.loop-step.loop-4{z-index:1;}

/* Stack cloud, rebalance placements. */
.stack-cloud{min-height:500px;}
.stack-cloud .tool-chip:nth-child(1){left:5% !important;top:9% !important;}
.stack-cloud .tool-chip:nth-child(2){left:41% !important;top:2% !important;}
.stack-cloud .tool-chip:nth-child(3){left:70% !important;top:12% !important;}
.stack-cloud .tool-chip:nth-child(4){left:15% !important;top:28% !important;}
.stack-cloud .tool-chip:nth-child(5){left:49% !important;top:36% !important;}
.stack-cloud .tool-chip:nth-child(6){left:79% !important;top:44% !important;}
.stack-cloud .tool-chip:nth-child(7){left:3% !important;top:59% !important;}
.stack-cloud .tool-chip:nth-child(8){left:33% !important;top:69% !important;}
.stack-cloud .tool-chip:nth-child(9){left:64% !important;top:77% !important;}
.stack-cloud .tool-chip:nth-child(10){left:1% !important;top:86% !important;}
.stack-cloud .tool-chip:nth-child(11){left:27% !important;top:87% !important;}

/* About section, add more breathing room, shorten the headline footprint, and let the proof block span wide. */
.about{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  column-gap:76px;
}
.about-statement h2{
  font-size:clamp(4.5rem,6.2vw,7.1rem);
  max-width:10ch;
}
.about-body{padding-top:12px;}
.about-body > p{max-width:600px;}
.experience-list{margin-top:38px;}
.experience-list div{grid-template-columns:82px 1.08fr 1.22fr;gap:18px;}
.experience-list strong{font-size:1.16rem;line-height:1.08;}
.experience-list small{font-size:.78rem;line-height:1.48;}
.about-proof-panel{
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
}
.about-doc-card{max-width:none;}
.about-docs-art{padding:56px 18px 14px;}
.doc-collage{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.doc-card,
.doc-card-main{min-height:168px;}
.about-doc-card figcaption{
  grid-template-columns:320px 1fr;
}

/* Footer top link, make it easy to click. */
.footer a{
  position:relative;
  z-index:3;
  padding:8px 0;
  cursor:pointer;
}

@media(max-width:1100px){
  .about-proof-panel{grid-column:1;}
  .doc-collage{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:820px){
  .uac-collage{grid-template-columns:1fr;grid-template-rows:200px 210px 220px;}
  .uac-tile-1,.uac-tile-2,.uac-tile-3{grid-column:auto;grid-row:auto;}
  .uac-tile-1 img{width:50%;}
  .loop-caption{transform:none !important;width:100%;}
  .doc-collage{grid-template-columns:1fr;}
}

/* =========================================
   V12 refinements
   ========================================= */

/* Process caption, lower it a touch on desktop so it breathes more. */
.loop-caption{
  transform:translate(-50%,118px) !important;
  gap:6px;
}
.loop-caption b{margin-bottom:2px;}

/* Stack, even out the chip placement and keep the lower row from piling up. */
.stack-cloud{min-height:525px;}
.stack-cloud .tool-chip:nth-child(1){left:6% !important;top:8% !important;}
.stack-cloud .tool-chip:nth-child(2){left:40% !important;top:2% !important;}
.stack-cloud .tool-chip:nth-child(3){left:73% !important;top:11% !important;}
.stack-cloud .tool-chip:nth-child(4){left:15% !important;top:28% !important;}
.stack-cloud .tool-chip:nth-child(5){left:48% !important;top:36% !important;}
.stack-cloud .tool-chip:nth-child(6){left:82% !important;top:46% !important;}
.stack-cloud .tool-chip:nth-child(7){left:5% !important;top:58% !important;}
.stack-cloud .tool-chip:nth-child(8){left:33% !important;top:68% !important;}
.stack-cloud .tool-chip:nth-child(9){left:64% !important;top:77% !important;}
.stack-cloud .tool-chip:nth-child(10){left:18% !important;top:86% !important;}
.stack-cloud .tool-chip:nth-child(11){left:39% !important;top:88% !important;}
.stack-cloud .tool-chip:nth-child(12){left:3% !important;top:87% !important;}
.tool-popover-face{
  width:86px;
  height:106px;
  right:10px;
  bottom:10px;
}

/* About headline, bring it back to a better middle ground. */
.about-statement h2{
  font-size:clamp(4.8rem,6.6vw,7.4rem);
  max-width:11ch;
}

/* UAC case study, turn the bottom BTS strip into a 4-image mosaic. */
.uac-collage{
  grid-template-columns:.8fr 1.2fr;
  grid-template-rows:250px 225px;
  min-height:530px;
}
.uac-tile-1 img{
  width:62%;
  object-position:center top;
}
.uac-bts-grid{
  display:grid;
  grid-template-columns:1.05fr .92fr .92fr 1.11fr;
  gap:8px;
  background:#11120f;
}
.uac-bts-shot{
  width:100%;
  height:100%;
  object-fit:cover;
}
.uac-bts-shot-1{object-position:46% center;}
.uac-bts-shot-2{object-position:44% center;}
.uac-bts-shot-3{object-position:43% center;}
.uac-bts-shot-4{object-position:48% center;}
.uac-visual-label{
  left:16px;
  bottom:16px;
  max-width:500px;
}

@media(max-width:820px){
  .loop-caption{transform:none !important;}
  .uac-bts-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px;}
}

/* =========================================
   V13 refinements
   ========================================= */

/* ABOUT, create more separation between the headline block and the experience block. */
.about{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(96px,9vw,150px);
  align-items:start;
}
.about-statement{padding-right:20px;}
.about-statement h2{
  max-width:6.9ch;
  font-size:clamp(4.45rem,5.95vw,6.9rem);
  line-height:.88;
}
.about-body{padding-top:34px;}

/* SELECTED WORK, make every open case read like its own card. */
.dossier-coral{--dossier-bg:#eef0ff;}
.dossier-blue{--dossier-bg:#eef5ff;}
.dossier-green{--dossier-bg:#edf7ee;}
.dossier{position:relative;}
.dossier.is-open .dossier-body-inner{
  margin:12px 0 30px;
  border:1px solid rgba(17,18,15,.14);
  background:rgba(255,253,247,.74);
  box-shadow:0 10px 0 rgba(17,18,15,.035);
}
.dossier-story,
.dossier-footer{background:rgba(255,253,247,.84);}
.dossier-footer{border-top:1px solid rgba(17,18,15,.08);}

/* UAC visual, use only the audience shot and the older green-screen shot. */
.uac-collage{
  grid-template-columns:1fr 1fr;
  grid-template-rows:250px 255px;
  min-height:0;
}
.uac-tile-1{grid-row:1;}
.uac-tile-2{grid-row:1;}
.uac-tile-1 img,
.uac-tile-2 img{
  object-fit:contain;
  object-position:center top;
}
.uac-bts-grid{
  display:grid;
  grid-column:1 / -1;
  grid-template-columns:.75fr 1.25fr;
  gap:10px;
  background:#11120f;
}
.uac-bts-panel{
  position:relative;
  overflow:hidden;
  min-height:0;
}
.uac-bts-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.uac-bts-panel-a img{object-position:50% center;}
.uac-bts-panel-b img{object-position:center center;}
.uac-visual-label{
  left:20px;
  bottom:18px;
  max-width:520px;
  box-shadow:7px 7px 0 #3457f1;
}

/* STACK, make the full area larger and rebalance the placement. */
.stack{
  grid-template-columns:minmax(280px,.62fr) minmax(620px,1.38fr);
  gap:56px;
  align-items:center;
}
.stack-left h2{font-size:clamp(4.8rem,6vw,7.35rem);}
.stack-cloud{
  min-height:615px;
  max-width:760px;
  width:100%;
  margin-left:auto;
}
.stack-cloud button{
  padding:18px 22px;
  font-size:.74rem;
}
.stack-cloud .tool-chip:nth-child(1){left:5% !important;top:9% !important;}
.stack-cloud .tool-chip:nth-child(2){left:38% !important;top:2% !important;}
.stack-cloud .tool-chip:nth-child(3){left:76% !important;top:10% !important;}
.stack-cloud .tool-chip:nth-child(4){left:14% !important;top:30% !important;}
.stack-cloud .tool-chip:nth-child(5){left:47% !important;top:40% !important;}
.stack-cloud .tool-chip:nth-child(6){left:82% !important;top:49% !important;}
.stack-cloud .tool-chip:nth-child(7){left:4% !important;top:62% !important;}
.stack-cloud .tool-chip:nth-child(8){left:28% !important;top:73% !important;}
.stack-cloud .tool-chip:nth-child(9){left:66% !important;top:82% !important;}
.stack-cloud .tool-chip:nth-child(10){left:14% !important;top:90% !important;}
.stack-cloud .tool-chip:nth-child(11){left:36% !important;top:92% !important;}
.stack-cloud .tool-chip:nth-child(12){left:2% !important;top:89% !important;}
.tool-popover{max-width:min(330px,60%);}

/* REFERENCES, switch from quote format to approved references and add placeholders. */
.quote-stack-rich article{
  grid-template-columns:42px 104px minmax(0,1fr) 195px;
  gap:22px;
  min-height:170px;
}
.quote-person{
  width:96px;
  height:96px;
  box-shadow:6px 6px 0 rgba(52,87,241,.18);
}
.quote-person-empty{
  display:grid;
  place-items:center;
  background:rgba(52,87,241,.04);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.08em;
  text-align:center;
  padding:8px;
}
.quote-person-empty span{display:block;line-height:1.4;}
.reference-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.reference-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:#fff;
  font-family:var(--mono);
  font-size:.58rem;
  letter-spacing:.05em;
}
.reference-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7fd15f;
}
.reference-body p{
  margin:0;
  max-width:540px;
  color:#444840;
  font-size:1rem;
  line-height:1.55;
}
.quote-stack-rich footer{
  gap:6px;
}

/* CONTACT, lower the direct email block a touch. */
.direct-contact{padding-top:32px;}

@media(max-width:1100px){
  .about{gap:52px;}
  .stack{grid-template-columns:1fr;gap:32px;}
  .stack-cloud{max-width:none;min-height:560px;}
}

@media(max-width:720px){
  .uac-collage{grid-template-columns:1fr;grid-template-rows:200px 210px auto;}
  .uac-bts-grid{grid-template-columns:1fr;}
  .quote-stack-rich article{grid-template-columns:34px 1fr;}
  .quote-person,
  .quote-person-empty{grid-column:2;width:92px;height:92px;}
  .reference-body,
  .quote-stack-rich footer{grid-column:2;}
  .direct-contact{padding-top:0;}
}

/* =========================================
   V14 refinements
   ========================================= */

html{scroll-padding-top:78px;}
#hero,
#work,
#skills,
#playground,
#about,
#contact,
#contact-start{scroll-margin-top:78px !important;}

/* Stack, remove the portrait from the popover, keep the title clear of the cloud, spread the bottom cards more cleanly. */
.stack{
  grid-template-columns:minmax(300px,.54fr) minmax(690px,1.46fr);
  gap:70px;
  align-items:start;
}
.stack-left h2{
  font-size:clamp(4.2rem,5.55vw,6.6rem);
  line-height:.88;
  max-width:5.2ch;
}
.stack-left p{max-width:330px;}
.stack-cloud{
  min-height:610px;
  max-width:780px;
  margin-left:auto;
  margin-top:16px;
}
.stack-cloud .tool-chip:nth-child(1){left:6% !important;top:9% !important;}
.stack-cloud .tool-chip:nth-child(2){left:39% !important;top:1% !important;}
.stack-cloud .tool-chip:nth-child(3){left:79% !important;top:10% !important;}
.stack-cloud .tool-chip:nth-child(4){left:16% !important;top:28% !important;}
.stack-cloud .tool-chip:nth-child(5){left:48% !important;top:39% !important;}
.stack-cloud .tool-chip:nth-child(6){left:84% !important;top:48% !important;}
.stack-cloud .tool-chip:nth-child(7){left:8% !important;top:60% !important;}
.stack-cloud .tool-chip:nth-child(8){left:31% !important;top:71% !important;}
.stack-cloud .tool-chip:nth-child(9){left:72% !important;top:82% !important;}
.stack-cloud .tool-chip:nth-child(10){left:24% !important;top:92% !important;}
.stack-cloud .tool-chip:nth-child(11){left:50% !important;top:95% !important;}
.stack-cloud .tool-chip:nth-child(12){left:3% !important;top:90% !important;}
.tool-popover{
  max-width:min(330px,60%);
  min-height:auto;
  padding:17px 18px 18px 76px !important;
}
.tool-popover-face{display:none !important;}

/* About, shorten the headline footprint and tighten the vertical rhythm. */
.about{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(82px,8vw,128px);
  align-items:start;
}
.about-statement h2{
  max-width:5.7ch;
  font-size:clamp(4.3rem,5.7vw,6.45rem);
  line-height:.87;
}
.about-body{padding-top:20px;}
.about-body > p{max-width:640px;}
.experience-list{margin-top:30px;}

/* Contact, push the direct email block slightly lower. */
.contact-bottom{align-items:start;}
.direct-contact{padding-top:62px;}

/* Process, lower the right visual block, make the selected card sit on top, and add the guide dialogue. */
.thinking{
  grid-template-columns:minmax(0,.76fr) minmax(590px,1.24fr);
  gap:82px;
  align-items:start;
}
.thinking-loop{
  height:690px;
  margin-top:38px;
  overflow:visible;
}
.loop-caption{
  width:282px;
  transform:translate(-50%,136px) !important;
}
.loop-step{
  cursor:pointer;
  transform-origin:center center;
}
.loop-step.is-active{
  z-index:18 !important;
  transform:translateY(-6px) rotate(0deg) scale(1.04) !important;
  box-shadow:13px 13px 0 color-mix(in srgb,var(--process-accent) 82%,#11120f) !important;
}
.loop-step.loop-4.is-active{
  transform:translateX(-50%) translateY(-6px) rotate(0deg) scale(1.04) !important;
}
.process-guide{
  position:absolute;
  right:20px;
  bottom:-28px;
  z-index:14;
  display:flex;
  align-items:flex-end;
  gap:14px;
  max-width:338px;
  pointer-events:none;
}
.process-guide-face{
  width:104px;
  flex:0 0 104px;
  filter:drop-shadow(0 14px 18px rgba(17,18,15,.14));
}
.process-guide-face img{
  display:block;
  width:100%;
  height:auto;
}
.process-guide-bubble{
  position:relative;
  flex:1;
  padding:14px 16px 15px;
  border:1px solid var(--ink);
  background:var(--paper);
  box-shadow:8px 8px 0 rgba(53,88,241,.18);
}
.process-guide-bubble::before{
  content:"";
  position:absolute;
  left:-12px;
  bottom:18px;
  width:16px;
  height:16px;
  border-left:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  transform:rotate(45deg);
}
.process-guide-kicker{
  display:block;
  margin-bottom:7px;
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.08em;
  color:var(--orange);
}
.process-guide-bubble p{
  margin:0;
  font-size:.82rem;
  line-height:1.55;
  color:#464b43;
}

/* UAC visual, keep the bottom two visuals clearly separated and animated individually. */
.uac-collage{
  grid-template-columns:.82fr 1.18fr;
  grid-template-rows:250px 238px;
  gap:12px;
  min-height:0;
}
.uac-tile-1{grid-column:1;grid-row:1;}
.uac-tile-2{grid-column:2;grid-row:1;}
.uac-tile-3{grid-column:1;grid-row:2;}
.uac-tile-4{grid-column:2;grid-row:2;}
.uac-tile-3,
.uac-tile-4{
  overflow:hidden;
}
.uac-tile-3 img,
.uac-tile-4 img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease;
}
.uac-tile-3 img{object-position:48% center;}
.uac-tile-4 img{object-position:center center;}
.dossier.is-open .uac-tile-3:hover img,
.dossier.is-open .uac-tile-4:hover img{transform:scale(1.028);}
.uac-visual-label{
  left:18px;
  bottom:18px;
  max-width:500px;
}

@media(max-width:1100px){
  .stack{grid-template-columns:1fr;gap:38px;}
  .stack-left h2{max-width:none;}
  .stack-cloud{max-width:none;min-height:560px;margin-top:0;}
  .about{grid-template-columns:1fr;gap:44px;}
  .thinking{grid-template-columns:1fr;gap:30px;}
  .thinking-loop{margin-top:0;}
}

@media(max-width:820px){
  .process-guide{position:relative;right:auto;bottom:auto;max-width:none;margin-top:18px;padding:0 6px;}
  .thinking-loop{height:auto;}
  .loop-caption{transform:none !important;width:100%;}
  .uac-collage{grid-template-columns:1fr;grid-template-rows:200px 210px 210px 220px;}
  .uac-tile-1,.uac-tile-2,.uac-tile-3,.uac-tile-4{grid-column:auto;grid-row:auto;}
}

@media(max-width:720px){
  html{scroll-padding-top:72px;}
  #hero,
  #work,
  #skills,
  #playground,
  #about,
  #contact,
  #contact-start{scroll-margin-top:72px !important;}
  .direct-contact{padding-top:0;}
  .process-guide{flex-direction:column;align-items:flex-start;gap:10px;padding:0;}
  .process-guide-bubble::before{left:18px;top:-9px;bottom:auto;border-left:1px solid var(--ink);border-top:1px solid var(--ink);border-bottom:0;transform:rotate(45deg);}
  .process-guide-face{width:88px;flex-basis:88px;}
}

/* V15 refinements */

/* Make top and bottom bars easier to read. */
.topbar{
  padding:0 28px;
}
.identity{
  font-size:.92rem;
  letter-spacing:.095em;
}
.index-nav{
  gap:30px;
  font-size:.82rem;
}
.index-nav a span{
  font-size:.62rem;
}
.availability{
  font-size:.78rem;
}
.footer{
  height:92px;
  font-size:.82rem;
  letter-spacing:.05em;
}
.footer a,
.footer span{
  line-height:1.2;
}

/* Process section, keep the title inside its own column and center it better. */
.thinking{
  grid-template-columns:minmax(0,.7fr) minmax(650px,1.3fr);
  gap:72px;
  align-items:center;
}
.thinking-title{
  align-self:center;
}
.thinking-title h2{
  max-width:4.8ch;
  font-size:clamp(4rem,5.55vw,6.8rem);
  line-height:.87;
}
.thinking-loop{
  margin-top:0;
  height:700px;
}
.loop-caption{
  transform:translate(-50%,116px) !important;
}
.process-guide{
  top:22px;
  left:47%;
  right:auto;
  bottom:auto;
  transform:translateX(-50%);
  max-width:340px;
  align-items:flex-start;
  gap:16px;
}
.process-guide-face{
  width:138px;
  flex:0 0 138px;
}
.process-guide-bubble{
  margin-top:6px;
  max-width:210px;
}
.process-guide-bubble::before{
  left:-11px;
  top:50px;
  bottom:auto;
}

/* About section, vertically center the left headline better. */
.about{
  align-items:center;
  min-height:860px;
}
.about-statement{
  display:flex;
  align-items:center;
  min-height:100%;
}
.about-statement h2{
  max-width:5.4ch;
  margin-top:12px;
  font-size:clamp(4.15rem,5.55vw,6.25rem);
  line-height:.88;
}
.about-body{
  padding-top:0;
}

/* Stack section, spread the lower cards more evenly and keep a clear gap. */
.stack{
  grid-template-columns:minmax(300px,.52fr) minmax(710px,1.48fr);
  gap:74px;
  align-items:center;
}
.stack-cloud{
  min-height:548px;
}
.stack-cloud .tool-chip:nth-child(9){left:73% !important;top:78% !important;}
.stack-cloud .tool-chip:nth-child(10){left:24% !important;top:90% !important;}
.stack-cloud .tool-chip:nth-child(11){left:55% !important;top:93% !important;}
.stack-cloud .tool-chip:nth-child(12){left:2% !important;top:89% !important;}

/* Systems icon, keep the line stable on hover. */
.motion-flow .flow-link{
  stroke-dasharray:none;
  stroke-dashoffset:0 !important;
  transform:none !important;
}
.skill-panel:hover .motion-flow .flow-link{
  stroke-dashoffset:0 !important;
  opacity:1;
}

@media(max-width:1280px){
  .thinking{grid-template-columns:minmax(0,.74fr) minmax(580px,1.26fr);gap:54px;}
  .thinking-title h2{font-size:clamp(3.7rem,5vw,6.1rem);}
  .stack{grid-template-columns:minmax(280px,.54fr) minmax(640px,1.46fr);gap:54px;}
}

@media(max-width:1100px){
  .topbar{padding:0 18px;}
  .index-nav{font-size:.74rem;gap:18px;}
  .identity{font-size:.84rem;}
  .availability{font-size:.72rem;}
  .footer{font-size:.74rem;height:86px;}
  .thinking,
  .stack,
  .about{grid-template-columns:1fr;min-height:0;gap:40px;}
  .thinking-title h2,
  .about-statement h2{max-width:none;}
  .process-guide{left:auto;right:18px;transform:none;}
}

@media(max-width:720px){
  .footer{font-size:.68rem;height:auto;padding:18px 0;row-gap:8px;}
  .topbar{padding:0 12px;}
  .identity{font-size:.76rem;}
  .index-nav{font-size:.68rem;}
  .availability{font-size:.66rem;}
  .process-guide{position:relative;top:auto;right:auto;left:auto;transform:none;max-width:none;}
  .process-guide-face{width:108px;flex-basis:108px;}
  .process-guide-bubble{max-width:none;}
  .about-statement{min-height:0;}
}

/* V16 refinements */

/* Process, keep the full title visible and give the guide more presence. */
@media(min-width:1101px){
  .thinking{
    grid-template-columns:minmax(560px,.82fr) minmax(700px,1.18fr);
    gap:54px;
  }
  .thinking-title h2{
    max-width:none;
    font-size:clamp(4rem,4.75vw,5.85rem);
    line-height:.88;
    letter-spacing:-.035em;
  }
  .process-guide{
    top:20px;
    left:47%;
    max-width:430px;
    gap:20px;
  }
  .process-guide-face{
    width:168px;
    flex-basis:168px;
  }
  .process-guide-bubble{
    max-width:250px;
    padding:17px 19px 18px;
  }
  .process-guide-kicker{
    font-size:.68rem;
  }
  .process-guide-bubble p{
    font-size:.96rem;
    line-height:1.5;
  }
}

/* Stack, shift the constellation to the right without bunching the lower row. */
@media(min-width:1101px){
  .stack-cloud .tool-chip:nth-child(1){left:10% !important;top:9% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:43% !important;top:2% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:78% !important;top:10% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:21% !important;top:29% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:54% !important;top:39% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:82% !important;top:49% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:10% !important;top:61% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:39% !important;top:70% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:72% !important;top:78% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:31% !important;top:90% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:58% !important;top:92% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:12% !important;top:89% !important;}
}

/* About, title and copy live together on the left, experience list owns the right. */
.about{
  align-items:start;
  min-height:0;
}
.about-statement{
  display:block;
  min-height:0;
  align-self:start;
}
.about-statement h2{
  max-width:none;
  margin:0;
  font-size:clamp(4.1rem,5.3vw,6.5rem);
  line-height:.88;
}
.about-copy{
  max-width:610px;
  margin-top:38px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.about-copy p{
  margin:0;
  color:#484b44;
  line-height:1.7;
}
.about-copy .about-lead{
  margin-bottom:18px;
  color:var(--ink);
  font-size:1.03rem;
}
.about-body{
  padding-top:0;
  align-self:center;
}
.experience-list{
  margin-top:0;
}

/* Make the back-to-top affordance visibly clickable. */
.footer a{
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}

@media(max-width:1100px){
  .about-copy{max-width:760px;margin-top:28px;}
  .about-body{align-self:stretch;}
}


/* V17 refinements */

/* Top navigation and footer, slightly larger typography and include process + stack. */
.topbar{
  height:76px;
  padding:0 22px;
}
.index-nav{
  gap:18px;
  font-size:.72rem;
}
.index-nav a{
  padding:9px 0;
}
.index-nav a span{
  font-size:.6rem;
}
.identity{
  font-size:.82rem;
}
.availability{
  font-size:.7rem;
}
.footer{
  font-size:.72rem;
}
.footer a{
  text-decoration:underline;
  text-underline-offset:5px;
}

/* Process section, create more breathing room between title and the loop panel. */
@media(min-width:1101px){
  .thinking{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:86px !important;
    align-items:center;
  }
  .thinking-title{
    align-self:start;
    padding-top:18px;
  }
  .thinking-title .section-index{
    margin-bottom:24px;
  }
  .thinking-title h2{
    max-width:none !important;
    font-size:clamp(4.2rem,4.65vw,5rem) !important;
    line-height:.9 !important;
    letter-spacing:-.028em;
  }
  .thinking-loop{
    width:min(700px,100%);
    max-width:700px;
    height:560px !important;
    justify-self:end;
    overflow:visible;
  }
  .loop-center{
    width:128px;
    height:128px;
  }
  .loop-center strong{
    font-size:3.25rem;
  }
  .loop-step{
    width:160px;
    padding:14px 14px 15px;
  }
  .loop-step span{
    font-size:1.05rem;
    margin:8px 0 4px;
  }
  .loop-step small{
    font-size:.56rem;
    line-height:1.35;
  }
  .loop-glyph{
    right:12px;
    top:10px;
    font-size:1rem;
  }
  .loop-step b{
    font-size:.6rem;
  }
  .loop-1{left:5%;top:8%;}
  .loop-2{right:5%;top:9%;}
  .loop-3{right:6%;top:46%;bottom:auto;}
  .loop-4{left:50%;bottom:3%;}
  .loop-5{left:8%;top:46%;bottom:auto;}
  .loop-caption{
    transform:translate(-50%,96px) !important;
  }
  .process-guide{
    top:-18px !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    gap:16px;
    max-width:420px;
    z-index:19;
  }
  .process-guide-face{
    width:116px !important;
    flex:0 0 116px !important;
    margin-top:0;
  }
  .process-guide-bubble{
    max-width:260px !important;
    padding:18px 18px 18px !important;
    margin-top:0 !important;
  }
  .process-guide-bubble::before{
    left:-10px !important;
    top:36px !important;
  }
  .process-guide-kicker{
    font-size:.66rem !important;
  }
  .process-guide-bubble p{
    font-size:1rem !important;
    line-height:1.45 !important;
  }
}

/* Stack section, move the composition to the right and lift the lower cards. */
@media(min-width:1101px){
  .stack{
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr) !important;
    gap:78px !important;
  }
  .stack-cloud{
    min-height:540px !important;
  }
  .stack-cloud .tool-chip:nth-child(1){left:12% !important;top:11% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:44% !important;top:2% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:79% !important;top:11% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:22% !important;top:32% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:53% !important;top:41% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:84% !important;top:50% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:13% !important;top:65% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:39% !important;top:76% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:73% !important;top:84% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:28% !important;top:92% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:56% !important;top:96% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:8% !important;top:92% !important;}
}

/* About section, restore the title to the top-left and center the experience list on the right. */
@media(min-width:1101px){
  .about{
    display:grid !important;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
    grid-template-rows:auto auto;
    align-items:start !important;
    gap:54px 72px !important;
    min-height:0 !important;
  }
  .about-statement{
    grid-column:1;
    grid-row:1;
    display:block !important;
    align-self:start !important;
    margin:0;
    padding:0;
  }
  .about-statement .section-index{
    position:static !important;
    margin:0 0 20px !important;
  }
  .about-statement h2{
    margin:0 !important;
    font-size:clamp(4.4rem,5.15vw,6rem) !important;
    line-height:.88 !important;
    max-width:5.7ch !important;
  }
  .about-copy{
    margin-top:24px !important;
    padding-top:0 !important;
    border-top:0 !important;
    max-width:520px !important;
  }
  .about-copy .about-lead{
    font-size:1.15rem !important;
    margin-bottom:18px !important;
  }
  .about-copy p{
    font-size:1rem;
    line-height:1.66;
  }
  .about-body{
    grid-column:2;
    grid-row:1;
    align-self:center !important;
    display:flex;
    align-items:center;
    min-height:100%;
    padding-top:0 !important;
  }
  .experience-list{
    width:100%;
    margin:0 !important;
  }
  .about-proof-panel{
    grid-column:1 / -1;
    grid-row:2;
    margin-top:12px;
  }
}

/* Keep mobile and medium view navigation readable after adding two extra entries. */
@media(max-width:1280px){
  .index-nav{
    gap:14px;
    font-size:.68rem;
  }
  .index-nav a span{
    font-size:.56rem;
  }
}
@media(max-width:1100px){
  .topbar{
    padding:0 16px;
  }
  .index-nav{
    gap:12px;
    font-size:.66rem;
  }
  .footer{
    font-size:.68rem;
  }
}


/* V18 refinements */

/* Keep the expanded top menu readable with the full process and stack labels. */
.index-nav{
  gap:14px;
  font-size:.68rem;
}
.index-nav a{
  white-space:nowrap;
}
.index-nav a span{
  font-size:.58rem;
}

/* Process section, restore a safe gap from the title and place the guide on the top line. */
@media(min-width:1101px){
  .thinking{
    grid-template-columns:minmax(400px,.72fr) minmax(560px,.9fr) !important;
    gap:112px !important;
    align-items:start !important;
  }
  .thinking-title{
    align-self:start !important;
    padding-top:96px !important;
    position:relative;
    z-index:2;
  }
  .thinking-title h2{
    max-width:8.2ch !important;
    font-size:clamp(3.9rem,4.2vw,5.05rem) !important;
    line-height:.9 !important;
    letter-spacing:-.028em !important;
  }
  .thinking-loop{
    width:100% !important;
    max-width:620px !important;
    height:600px !important;
    margin-top:70px !important;
    justify-self:end !important;
    overflow:visible !important;
  }
  .loop-center{
    width:126px;
    height:126px;
  }
  .loop-center strong{
    font-size:3.2rem;
  }
  .loop-step{
    width:166px;
  }
  .loop-1{left:6% !important;top:16% !important;}
  .loop-2{right:5% !important;top:16% !important;}
  .loop-3{right:7% !important;top:52% !important;bottom:auto !important;}
  .loop-4{left:50% !important;bottom:7% !important;top:auto !important;}
  .loop-5{left:6% !important;top:52% !important;bottom:auto !important;}
  .loop-caption{
    transform:translate(-50%,108px) !important;
  }
  .process-guide{
    top:0 !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) !important;
    max-width:446px !important;
    gap:16px !important;
    align-items:center !important;
    z-index:22 !important;
  }
  .process-guide-face{
    width:126px !important;
    flex:0 0 126px !important;
  }
  .process-guide-bubble{
    max-width:278px !important;
    padding:17px 18px 17px !important;
  }
  .process-guide-bubble::before{
    left:-10px !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) rotate(45deg) !important;
  }
  .process-guide-kicker{
    font-size:.66rem !important;
  }
  .process-guide-bubble p{
    font-size:1rem !important;
    line-height:1.46 !important;
  }
}

/* Stack section, lift the middle-lower cards to make the spacing more homogeneous. */
@media(min-width:1101px){
  .stack-cloud{
    min-height:528px !important;
  }
  .stack-cloud .tool-chip:nth-child(5){left:56% !important;top:34% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:40% !important;top:64% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:74% !important;top:74% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:56% !important;top:88% !important;}
}

@media(max-width:1380px){
  .index-nav{
    gap:10px;
    font-size:.64rem;
  }
  .index-nav a span{
    font-size:.54rem;
  }
}


/* =========================================
   V19 refinements
   ========================================= */
@media(min-width:1101px){
  .thinking{
    grid-template-columns:minmax(420px,.82fr) minmax(500px,.82fr) !important;
    gap:120px !important;
    align-items:center !important;
  }
  .thinking-title{
    align-self:center !important;
    padding-top:24px !important;
  }
  .thinking-title h2{
    font-size:clamp(4.8rem,5.7vw,6.35rem) !important;
    max-width:7.2ch !important;
    line-height:.9 !important;
  }
  .thinking-loop{
    max-width:560px !important;
    height:540px !important;
    margin-top:34px !important;
  }
  .process-guide{
    top:0 !important;
    left:54% !important;
    transform:translate(-50%,-50%) !important;
    gap:12px !important;
    max-width:430px !important;
  }
  .process-guide-face{
    width:92px !important;
    flex:0 0 92px !important;
  }
  .process-guide-bubble{
    max-width:292px !important;
    min-width:292px !important;
    padding:14px 16px !important;
  }
  .process-guide-bubble p{
    font-size:.94rem !important;
    line-height:1.42 !important;
  }
  .stack-cloud .tool-chip:nth-child(8){left:35% !important; top:72% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:70% !important; top:82% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:50% !important; top:90% !important;}
}

.doc-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.doc-language-note{
  display:flex;
  gap:6px;
}
.doc-language-note span,
.doc-link-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.doc-link-pill{
  border-color:var(--ink);
  background:#fff;
  color:var(--ink);
  text-decoration:none;
}
.doc-link-pill:hover,
.doc-link-pill:focus-visible{transform:translateY(-2px);}
.doc-collage-v19{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(150px,.72fr) minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.doc-card-main-v19{grid-row:auto;min-height:250px;}
.doc-card-ats{
  min-height:180px;
  background:linear-gradient(135deg,#f4f2ff 0%, #eeeffb 100%);
  box-shadow:7px 7px 0 rgba(170,180,255,.85);
}
.doc-card-button{text-align:left;cursor:pointer;}
.doc-card-button em{color:var(--blue);}
.video-card{background:linear-gradient(135deg,#f9f7ef 0%,#eef3ff 100%);}
.doc-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
.resource-sheet{width:min(980px,100%);}
.resource-body{padding:0 44px 44px;}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.resource-grid > div{min-height:190px;padding:22px;border-right:1px solid var(--line);}
.resource-grid > div:last-child{border-right:0;}
.resource-grid p{margin:28px 0 0;font-size:.88rem;line-height:1.6;}
.visual-ffr{background:linear-gradient(135deg,#f7f9ee 0%, #edf5c9 100%);}
@media(max-width:1100px){
  .doc-collage-v19{grid-template-columns:1fr 1fr;}
  .doc-card-main-v19{grid-column:1 / -1; min-height:210px;}
  .doc-card-ats{min-height:150px;}
  .resource-grid{grid-template-columns:1fr;}
  .resource-grid > div{border-right:0;border-bottom:1px solid var(--line);min-height:0;}
  .resource-grid > div:last-child{border-bottom:0;}
}
@media(max-width:760px){
  .doc-toolbar{flex-direction:column; align-items:flex-start;}
  .doc-collage-v19{grid-template-columns:1fr;}
}

/* =========================================
   V20 refinements
   ========================================= */

.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.site-lang-switch,
.mobile-lang-switch{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
}
.site-lang-switch a,
.mobile-lang-switch a{
  min-width:34px;
  padding:6px 8px;
  text-align:center;
  font-family:var(--mono);
  font-size:.62rem;
  line-height:1;
  border-right:1px solid var(--line);
  transition:background .18s ease,color .18s ease;
}
.site-lang-switch a:last-child,
.mobile-lang-switch a:last-child{border-right:0;}
.site-lang-switch a.is-active,
.mobile-lang-switch a.is-active{
  background:var(--ink);
  color:var(--paper);
}
.mobile-lang-switch{
  align-self:flex-start;
  margin:8px 0 18px;
}

@media(min-width:1281px){
  .thinking{
    grid-template-columns:minmax(540px,.88fr) minmax(650px,1.08fr) !important;
    gap:92px !important;
    align-items:center !important;
  }
  .thinking-title{
    padding-top:38px !important;
    align-self:center !important;
  }
  .thinking-title h2{
    font-size:clamp(5.75rem,6.25vw,7.15rem) !important;
    max-width:7.8ch !important;
    line-height:.88 !important;
    letter-spacing:-.035em !important;
  }
  .thinking-loop{
    width:100% !important;
    max-width:690px !important;
    height:630px !important;
    margin-top:52px !important;
    justify-self:end !important;
  }
  .loop-center{
    width:144px !important;
    height:144px !important;
  }
  .loop-center strong{font-size:3.65rem !important;}
  .loop-step{width:202px !important;}
  .loop-1{left:5% !important;top:15% !important;}
  .loop-2{right:4% !important;top:15% !important;}
  .loop-3{right:5% !important;top:51% !important;bottom:auto !important;}
  .loop-5{left:5% !important;top:51% !important;bottom:auto !important;}
  .loop-4{left:50% !important;bottom:4.5% !important;top:auto !important;}
  .loop-caption{
    transform:translate(-50%,76px) !important;
    width:330px !important;
    z-index:24 !important;
  }
  .loop-caption b{font-size:.7rem !important;}
  .loop-caption span{font-size:.82rem !important;line-height:1.35 !important;}
  .process-guide{
    top:0 !important;
    left:52% !important;
    transform:translate(-50%,-45%) !important;
    max-width:480px !important;
    gap:14px !important;
  }
  .process-guide-face{
    width:110px !important;
    flex:0 0 110px !important;
  }
  .process-guide-bubble{
    min-width:340px !important;
    max-width:340px !important;
    padding:16px 18px !important;
  }
  .process-guide-bubble p{
    font-size:.98rem !important;
    line-height:1.4 !important;
  }
}

@media(min-width:1101px) and (max-width:1280px){
  .thinking{
    grid-template-columns:minmax(440px,.84fr) minmax(570px,1fr) !important;
    gap:78px !important;
  }
  .thinking-title h2{
    font-size:clamp(5rem,5.7vw,6rem) !important;
    max-width:7.8ch !important;
  }
  .thinking-loop{
    max-width:610px !important;
    height:580px !important;
  }
  .loop-caption{
    transform:translate(-50%,72px) !important;
    z-index:24 !important;
  }
  .process-guide-bubble{
    min-width:310px !important;
    max-width:310px !important;
  }
}

html[lang="fr"] .index-nav{
  gap:10px;
  font-size:.62rem;
}
html[lang="fr"] .thinking-title h2{
  max-width:8.2ch !important;
}

@media(max-width:1100px){
  .site-lang-switch{display:none;}
  .topbar-right{gap:8px;}
}

/* =========================================================
   V21 polish pass
   - one-word navigation labels
   - process caption clearance
   - evenly distributed stack cards, no touching / clipping
   ========================================================= */

/* Keep desktop nav compact enough that every item stays on one line. */
.index-nav{
  gap:22px;
  white-space:nowrap;
}
.index-nav a{white-space:nowrap;}

/* Make in-page anchors land cleanly below the fixed header. */
#work,#skills,#playground,#process,#stack,#about,#contact{
  scroll-margin-top:92px;
}

@media(min-width:1101px){
  /* Move the caption down enough to clear the center button, while keeping
     enough space before the Ship card. */
  .loop-caption{
    transform:translate(-50%,116px) !important;
    width:310px !important;
    z-index:12;
  }
  .loop-caption b{
    display:block;
    margin-bottom:8px !important;
  }
  .loop-caption span{
    display:block;
    line-height:1.42 !important;
  }
  .loop-step.loop-4{
    bottom:1% !important;
  }

  /* Stack: deliberately distribute every chip through the full field.
     The lower row is lifted and separated, and the right-side cards are
     pulled upward to match the user's placement arrows. */
  .stack-cloud{
    min-height:560px !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .stack-cloud .tool-chip:nth-child(1){left:8% !important; top:10% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:40% !important; top:2% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:76% !important; top:10% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:18% !important; top:30% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:48% !important; top:36% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:76% !important; top:42% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:8% !important; top:58% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:34% !important; top:69% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:70% !important; top:66% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:27% !important; top:84% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:54% !important; top:84% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:3% !important; top:84% !important;}

  /* Give each chip a predictable footprint so nearby labels cannot collide. */
  .stack-cloud .tool-chip{
    min-width:112px;
    max-width:180px;
    line-height:1.2;
  }
}

@media(max-width:1100px){
  #work,#skills,#playground,#process,#stack,#about,#contact{
    scroll-margin-top:74px;
  }
}


/* =========================================================
   V22 polish pass
   - process section size and clearance
   - stack spacing cleanup
   - certification wall gallery
   - reference grid supports 6 approved contacts
   ========================================================= */

@media(min-width:1281px){
  .thinking{
    grid-template-columns:minmax(590px,.97fr) minmax(740px,1.12fr) !important;
    gap:92px !important;
    align-items:center !important;
  }
  .thinking-title h2{
    font-size:clamp(6.3rem,7vw,8.1rem) !important;
    max-width:8.2ch !important;
    line-height:.86 !important;
  }
  .thinking-loop{
    max-width:740px !important;
    height:690px !important;
    margin-top:32px !important;
  }
  .loop-center{
    width:156px !important;
    height:156px !important;
  }
  .loop-center strong{font-size:3.95rem !important;}
  .loop-step{width:218px !important;}
  .loop-1{left:5% !important; top:13% !important;}
  .loop-2{right:3.5% !important; top:14% !important;}
  .loop-3{right:4.8% !important; top:50% !important;}
  .loop-5{left:4.5% !important; top:51% !important;}
  .loop-step.loop-4,
  .loop-4{left:50% !important; bottom:5.8% !important; top:auto !important;}
  .loop-caption{
    transform:translate(-50%,106px) !important;
    width:344px !important;
    padding:8px 12px !important;
    background:rgba(255,253,247,.9);
    border-radius:14px;
    z-index:18 !important;
  }
  .loop-caption b{margin-bottom:6px !important;}
  .process-guide{
    top:0 !important;
    left:50.5% !important;
    transform:translate(-50%,-38%) !important;
    max-width:520px !important;
    gap:14px !important;
  }
  .process-guide-face{
    width:118px !important;
    flex:0 0 118px !important;
  }
  .process-guide-bubble{
    min-width:390px !important;
    max-width:390px !important;
    padding:16px 18px !important;
  }
  .process-guide-bubble p{
    font-size:1rem !important;
    line-height:1.45 !important;
  }
}

@media(min-width:1101px) and (max-width:1280px){
  .thinking{
    grid-template-columns:minmax(470px,.9fr) minmax(620px,1.02fr) !important;
    gap:74px !important;
  }
  .thinking-title h2{
    font-size:clamp(5.3rem,5.95vw,6.7rem) !important;
    max-width:8ch !important;
  }
  .thinking-loop{
    max-width:650px !important;
    height:620px !important;
  }
  .loop-step{width:196px !important;}
  .loop-step.loop-4,
  .loop-4{bottom:5.2% !important;}
  .loop-caption{
    transform:translate(-50%,102px) !important;
    width:322px !important;
    padding:7px 11px !important;
    background:rgba(255,253,247,.88);
    border-radius:14px;
  }
  .process-guide-bubble{
    min-width:350px !important;
    max-width:350px !important;
  }
}

@media(min-width:1101px){
  .stack-cloud{
    min-height:566px !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .stack-cloud .tool-chip:nth-child(1){left:8% !important; top:10% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:40% !important; top:2% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:77% !important; top:10% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:18% !important; top:30% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:49% !important; top:37% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:83% !important; top:48% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:8% !important; top:60% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:33% !important; top:73% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:71% !important; top:79% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:22% !important; top:90% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:50% !important; top:91% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:4% !important; top:90% !important;}
  .stack-cloud .tool-chip{
    min-width:116px;
    max-width:184px;
    line-height:1.18;
  }
}

.cert-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.cert-tile{
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid var(--ink);
  background:#fff;
  padding:12px;
  box-shadow:6px 6px 0 rgba(17,18,15,.08);
}

.cert-tile.cert-wide{grid-column:1 / -1;}

.cert-tile img{
  width:100%;
  max-width:100%;
  display:block;
  border:1px solid var(--line);
  background:#f7f3ea;
}

.cert-tile figcaption{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cert-tile figcaption strong{
  font-size:1rem;
  line-height:1.1;
}

.cert-tile figcaption span{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.4;
}

.resource-grid.cert-overview{margin-bottom:18px;}

.quote-stack-rich{
  grid-template-columns:1fr !important;
}

.quote-stack-rich article{
  grid-template-columns:42px 104px minmax(0,1fr) 255px;
}

.quote-stack-rich footer{
  align-self:center;
}

@media(max-width:860px){
  .cert-gallery{grid-template-columns:1fr;}
}


/* =========================================================
   V23 targeted fixes
   These stack positions are the current review positions.
   Do not move the stack again after user approval.
   ========================================================= */

/* Case study subheads need to read as headings, not metadata. */
.story-block > span{
  display:inline-block !important;
  font-size:.82rem !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  letter-spacing:.035em !important;
  padding-bottom:5px;
  border-bottom:2px solid var(--orange);
}
.story-block p{
  margin-top:50px !important;
}

@media(min-width:1101px){
  /* Lift DaVinci and Mailchimp / Brevo following the latest arrows. */
  .stack-cloud .tool-chip:nth-child(8){left:42% !important; top:64% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:30% !important; top:81% !important;}

  /* Keep the rest stable and keep the lower row comfortably off the edge. */
  .stack-cloud .tool-chip:nth-child(9){left:72% !important; top:76% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:56% !important; top:85% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:5% !important; top:84% !important;}
}

/* Certificate wall, fit the complete wall in one desktop viewport. */
.resource-modal{
  padding:14px !important;
  overflow:hidden !important;
}
.resource-modal .resource-sheet{
  width:min(1180px,calc(100vw - 28px)) !important;
  max-height:calc(100vh - 28px) !important;
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
}
.resource-modal .modal-header{
  padding:24px 34px 14px !important;
  grid-template-columns:120px minmax(0,1fr) !important;
  gap:10px 18px !important;
  align-items:end !important;
  flex:0 0 auto;
}
.resource-modal .modal-header h2{
  font-size:clamp(3.5rem,5vw,5.8rem) !important;
  line-height:.9 !important;
  letter-spacing:-.035em !important;
  white-space:normal !important;
  overflow:visible !important;
}
.resource-modal .modal-header p{
  margin-top:2px !important;
  font-size:.92rem !important;
}
.resource-modal .resource-body{
  padding:0 34px 28px !important;
  overflow:hidden !important;
  min-height:0;
}
.cert-gallery-compact{
  margin-top:0 !important;
  display:grid !important;
  grid-template-columns:1.4fr 1fr 1fr !important;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px !important;
  height:min(58vh,520px);
}
.cert-gallery-compact .cert-tile{
  min-height:0;
  padding:9px !important;
  gap:7px !important;
  overflow:hidden;
}
.cert-gallery-compact .cert-tile.cert-wide,
.cert-gallery-compact .cert-axio,
.cert-gallery-compact .cert-meta{
  grid-column:auto !important;
}
.cert-gallery-compact .cert-axio{
  grid-row:1 / span 2;
}
.cert-gallery-compact .cert-tile img{
  width:100%;
  height:calc(100% - 42px);
  min-height:0;
  object-fit:contain;
  object-position:center;
}
.cert-gallery-compact .cert-tile figcaption{
  min-height:34px;
  gap:2px !important;
}
.cert-gallery-compact .cert-tile figcaption strong{font-size:.86rem !important;}
.cert-gallery-compact .cert-tile figcaption span{font-size:.7rem !important;line-height:1.25 !important;}

@media(max-width:900px){
  .resource-modal{overflow:auto !important;}
  .resource-modal .resource-sheet{max-height:none !important;overflow:visible !important;}
  .resource-modal .resource-body{overflow:visible !important;}
  .cert-gallery-compact{height:auto;grid-template-columns:1fr !important;grid-template-rows:auto !important;}
  .cert-gallery-compact .cert-axio{grid-row:auto;}
  .cert-gallery-compact .cert-tile img{height:auto;}
}

/* =========================================================
   V24, case-study proof + final stable stack positions
   ========================================================= */

/* Case study visual mosaics use the supplied real work. */
.case-mini-visual{
  min-height:0 !important;
  padding:14px !important;
  justify-content:stretch !important;
  gap:12px;
  background:#eef0ff;
}
.case-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(190px,1fr));
  gap:12px;
  min-height:420px;
}
.case-mini-grid figure{
  margin:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--ink);
  background:#fbfaf5;
  transition:transform .22s ease,box-shadow .22s ease;
}
.case-mini-grid figure:hover{
  transform:translateY(-4px);
  box-shadow:5px 5px 0 var(--ink);
}
.case-mini-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img,
.case-mini-uac .case-mini-grid figure:nth-child(2) img,
.case-mini-uac .case-mini-grid figure:nth-child(4) img,
.case-mini-vp .case-mini-grid figure:nth-child(2) img,
.case-mini-vp .case-mini-grid figure:nth-child(3) img,
.case-mini-vp .case-mini-grid figure:nth-child(4) img,
.case-mini-ffr .case-mini-grid figure:nth-child(n+2) img{
  object-fit:contain;
  background:#f7f5ed;
}
.case-mini-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--ink);
  background:var(--paper);
  padding:14px 16px;
  box-shadow:6px 6px 0 var(--blue);
}
.case-mini-label strong{font-family:var(--display);font-size:1.1rem;line-height:1;}
.case-mini-label span{font-family:var(--mono);font-size:.62rem;color:var(--muted);text-align:right;}
.case-external{
  border:1px solid var(--ink);
  border-radius:999px;
  padding:6px 10px;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--mono);
  font-size:.57rem;
  text-transform:uppercase;
  transition:transform .18s ease,background .18s ease;
}
.case-external:hover,.case-external:focus-visible{transform:translateY(-2px);background:var(--ink);color:var(--paper);}

/* Make the information blocks clearly read as sub-sections. */
.story-block{padding-top:2px;}
.story-block > span{
  display:inline-flex !important;
  align-items:center;
  min-height:30px;
  padding:6px 10px !important;
  border:1px solid var(--ink) !important;
  border-bottom:1px solid var(--ink) !important;
  background:#fff8ef;
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
}
.story-block p{margin-top:18px !important;}

/* Project modal links */
.modal-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 44px 44px;
}
.modal-links:empty{display:none;}
.modal-links a,.resource-external{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  padding:11px 14px;
  text-decoration:none;
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease;
}
.modal-links a:hover,.modal-links a:focus-visible,.resource-external:hover,.resource-external:focus-visible{
  transform:translateY(-3px);
  box-shadow:5px 5px 0 var(--blue);
}

/* Selected outputs are now true clickable proof cards. */
.output-card[role="button"]{cursor:pointer;}
.output-card[role="button"]:focus-visible{outline:3px solid var(--ink);outline-offset:4px;}
.output-open-hint{
  position:absolute;
  right:16px;
  top:16px;
  z-index:3;
  border:1px solid currentColor;
  background:rgba(255,255,255,.76);
  color:var(--ink);
  padding:5px 8px;
  font-family:var(--mono);
  font-size:.55rem !important;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .2s ease,transform .2s ease;
}
.output-card:hover .output-open-hint,.output-card:focus-visible .output-open-hint{opacity:1;transform:none;}

/* Large output detail modal */
.resource-modal.is-output-detail .resource-sheet{width:min(1240px,calc(100vw - 36px)) !important;}
.resource-modal.is-output-detail .resource-body{padding:0 34px 34px !important;}
.output-detail{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.72fr);
  gap:28px;
  align-items:start;
}
.output-detail-media{
  min-height:520px;
  max-height:62vh;
  border:1px solid var(--ink);
  background:#f6f2e8;
  overflow:hidden;
}
.output-detail-media img{width:100%;height:100%;min-height:520px;max-height:62vh;object-fit:contain;display:block;}
.output-detail-copy{display:flex;flex-direction:column;gap:20px;}
.output-detail-tags{display:flex;flex-wrap:wrap;gap:7px;}
.output-detail-tags span{border:1px solid var(--ink);border-radius:999px;padding:6px 9px;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;}
.output-detail-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.output-detail-grid>div{border-top:1px solid var(--line);padding-top:14px;}
.output-detail-grid p{font-size:.9rem;line-height:1.55;margin:10px 0 0;}
.output-detail-note{padding:12px 14px;border-left:3px solid var(--orange);background:rgba(255,143,112,.08);font-size:.78rem;line-height:1.5;}

/* Certificate wall, slightly larger and visually centered inside the viewport. */
.resource-modal:not(.is-output-detail) .resource-sheet{
  width:min(1260px,calc(100vw - 36px)) !important;
  margin:auto !important;
}
.resource-modal:not(.is-output-detail) .cert-gallery-compact{
  height:min(61vh,555px) !important;
  grid-template-columns:1.45fr 1fr 1fr !important;
}

/* FINAL STACK POSITIONS, intentionally frozen after this version. */
@media(min-width:1101px){
  .stack{grid-template-columns:minmax(330px,.62fr) minmax(690px,1.38fr) !important;gap:66px !important;}
  .stack-cloud{
    min-height:620px !important;
    max-width:760px;
    width:100%;
    justify-self:end;
    overflow:visible !important;
  }
  .stack-cloud .tool-chip{white-space:nowrap;}
  .stack-cloud .tool-chip:nth-child(1){left:7% !important;top:10% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:40% !important;top:2% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:78% !important;top:10% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:16% !important;top:29% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:48% !important;top:39% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:82% !important;top:48% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:8% !important;top:62% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:35% !important;top:69% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:70% !important;top:74% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:5% !important;top:84% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:29% !important;top:84% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:55% !important;top:84% !important;}
}

/* References, four approved contacts only. */
.quote-stack-rich article{grid-template-columns:42px 92px minmax(0,1fr) 250px !important;}
.quote-stack-rich .reference-badge{display:inline-flex;width:max-content;border:1px solid var(--ink);padding:4px 7px;font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;}

@media(max-width:1100px){
  .case-mini-grid{grid-template-rows:repeat(2,minmax(150px,1fr));min-height:340px;}
  .output-detail{grid-template-columns:1fr;}
  .output-detail-media,.output-detail-media img{min-height:340px;max-height:none;}
}
@media(max-width:760px){
  .case-mini-visual{padding:9px !important;}
  .case-mini-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0;}
  .case-mini-grid figure{height:210px;}
  .case-mini-label{align-items:flex-start;flex-direction:column;gap:5px;}
  .case-mini-label span{text-align:left;}
  .modal-links{margin:0 18px 24px;}
  .output-open-hint{opacity:1;transform:none;}
  .resource-modal.is-output-detail .resource-body{padding:0 18px 24px !important;}
  .output-detail-media,.output-detail-media img{min-height:280px;}
  .quote-stack-rich article{grid-template-columns:36px 72px minmax(0,1fr) !important;}
  .quote-stack-rich footer{grid-column:3 !important;}
}

/* Keep screenshot-based case-study media readable instead of cropping UI details. */
.modal-feature,
.modal-assets > div{background:#f7f4eb;}
.modal-feature img,
.modal-assets img{object-fit:contain !important;object-position:center !important;}

@media(min-width:1101px){
  .stack-cloud .tool-chip:nth-child(10){top:82% !important;}
  .stack-cloud .tool-chip:nth-child(11){top:82% !important;}
  .stack-cloud .tool-chip:nth-child(12){top:82% !important;}
}
.case-mini-grid img{object-fit:contain !important;background:#f7f4eb;}


/* =========================================================
   V25, compact UAC case, transparent process caption,
   frozen tool layout, centered resources, clickable CV cards
   ========================================================= */

/* Case 01 only, keep the four proof images compact so the case does not
   dominate the viewport. Case 02 and 03 are deliberately untouched. */
.case-mini-uac .case-mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,165px) !important;
  min-height:0 !important;
  height:auto !important;
  gap:12px !important;
}
.case-mini-uac .case-mini-grid figure{
  min-height:0 !important;
  height:165px !important;
}
.case-mini-uac .case-mini-grid img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.case-mini-uac{
  padding:12px !important;
}

/* Remove the pill / white box behind the process helper line. */
.loop-caption{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.loop-caption span{
  background:transparent !important;
}

/* Frozen desktop tool composition. These coordinates are intentionally
   isolated here so later sections do not accidentally move the stack. */
@media(min-width:1101px){
  .stack-cloud{
    min-height:620px !important;
    max-width:760px !important;
    width:100% !important;
    overflow:visible !important;
  }
  .stack-cloud .tool-chip:nth-child(1){left:7% !important;top:9% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:40% !important;top:2% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:78% !important;top:10% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:16% !important;top:28% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:49% !important;top:36% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:82% !important;top:47% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:7% !important;top:60% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:36% !important;top:66% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:69% !important;top:70% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:7% !important;top:83% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:38% !important;top:84% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:68% !important;top:84% !important;}
}

/* Resource windows should visually sit in the viewport center, not hug the top. */
.resource-modal{
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
  overflow:auto !important;
}
.resource-modal .resource-sheet{
  margin:0 !important;
  width:min(1380px,calc(100vw - 48px)) !important;
  max-height:min(900px,calc(100vh - 48px)) !important;
}
.resource-modal .modal-header{
  padding:30px 42px 18px !important;
}
.resource-modal .resource-body{
  padding:0 42px 34px !important;
}
.resource-modal:not(.is-output-detail) .cert-gallery-compact{
  height:min(64vh,620px) !important;
  grid-template-columns:1.45fr 1fr 1fr !important;
  gap:16px !important;
}
.resource-modal:not(.is-output-detail) .cert-gallery-compact .cert-tile{
  padding:11px !important;
}

/* Whole CV cards are actionable, the small pill remains a secondary cue. */
.doc-download-card{
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.doc-download-card:hover,
.doc-download-card:focus-visible{
  transform:translateY(-4px);
  outline:2px solid var(--ink);
  outline-offset:2px;
}
.doc-download-card .doc-link-pill{pointer-events:auto;}

@media(max-width:900px){
  .resource-modal{display:block !important;padding:14px !important;}
  .resource-modal .resource-sheet{width:100% !important;max-height:none !important;margin:0 auto !important;}
  .resource-modal:not(.is-output-detail) .cert-gallery-compact{height:auto !important;}
  .case-mini-uac .case-mini-grid{grid-template-columns:1fr !important;grid-template-rows:none !important;}
  .case-mini-uac .case-mini-grid figure{height:190px !important;}
}

/* V25.1, final frozen Stack constellation: three clear columns by four rows. */
@media(min-width:1101px){
  .stack-cloud .tool-chip:nth-child(1){left:7% !important;top:8% !important;}
  .stack-cloud .tool-chip:nth-child(2){left:40% !important;top:8% !important;}
  .stack-cloud .tool-chip:nth-child(3){left:78% !important;top:8% !important;}
  .stack-cloud .tool-chip:nth-child(4){left:16% !important;top:31% !important;}
  .stack-cloud .tool-chip:nth-child(5){left:49% !important;top:31% !important;}
  .stack-cloud .tool-chip:nth-child(6){left:80% !important;top:31% !important;}
  .stack-cloud .tool-chip:nth-child(7){left:7% !important;top:57% !important;}
  .stack-cloud .tool-chip:nth-child(8){left:38% !important;top:57% !important;}
  .stack-cloud .tool-chip:nth-child(9){left:69% !important;top:57% !important;}
  .stack-cloud .tool-chip:nth-child(10){left:7% !important;top:82% !important;}
  .stack-cloud .tool-chip:nth-child(11){left:38% !important;top:82% !important;}
  .stack-cloud .tool-chip:nth-child(12){left:68% !important;top:82% !important;}
}


/* =========================================================
   V26 targeted polish fixes
   ========================================================= */

/* Case 01 should match the visual density/readability of the other case studies. */
.case-mini-uac{
  padding:14px !important;
}
.case-mini-uac .case-mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(190px,1fr)) !important;
  min-height:420px !important;
  height:auto !important;
  gap:12px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:auto !important;
  min-height:190px !important;
}
.case-mini-uac .case-mini-grid img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Process helper note, clearer contrast and slightly larger portrait. */
.process-guide{
  gap:16px !important;
}
.process-guide-face{
  width:112px !important;
  flex:0 0 112px !important;
}
.process-guide-face img{
  width:112px !important;
  height:112px !important;
}
.process-guide-bubble{
  background:#f4ead7 !important;
  border:1px solid rgba(17,18,15,.7) !important;
  box-shadow:8px 8px 0 rgba(17,18,15,.08) !important;
  padding:18px 20px !important;
}
.process-guide-bubble::before{
  background:#f4ead7 !important;
}
.process-guide-kicker{
  font-size:.67rem !important;
}
.process-guide-bubble p{
  font-size:1rem !important;
  line-height:1.55 !important;
}

/* Top nav should read bigger and clearer. */
.topbar{
  min-height:72px !important;
}
.index-nav{
  font-size:.82rem !important;
  gap:22px !important;
}
.index-nav a{
  padding:10px 0 !important;
}
.index-nav a span{
  font-size:.64rem !important;
}
.identity{
  font-size:.9rem !important;
}
.site-lang-switch a,
.availability{
  font-size:.74rem !important;
}

/* Add subtle hover feedback to the experience rows. */
.experience-list div{
  position:relative;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.experience-list div:hover,
.experience-list div:focus-within{
  background:rgba(141,164,255,.08);
  transform:translateX(6px);
  box-shadow:8px 8px 0 rgba(17,18,15,.06);
}

/* Certification wall, keep centered and make every tile feel interactive. */
.resource-modal:not(.is-output-detail){
  align-items:center !important;
  justify-items:center !important;
}
.resource-modal:not(.is-output-detail) .resource-sheet{
  width:min(1420px,calc(100vw - 52px)) !important;
  max-height:min(920px,calc(100vh - 52px)) !important;
}
.resource-modal:not(.is-output-detail) .modal-header{
  padding:34px 44px 20px !important;
}
.resource-modal:not(.is-output-detail) .resource-body{
  padding:0 44px 38px !important;
}
.cert-gallery-compact .cert-tile{
  cursor:pointer;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cert-gallery-compact .cert-tile::after{
  content:'VIEW ↗';
  position:absolute;
  right:12px;
  top:12px;
  border:1px solid var(--ink);
  background:rgba(255,255,255,.84);
  padding:4px 7px;
  font-family:var(--mono);
  font-size:.52rem;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.cert-gallery-compact .cert-tile:hover,
.cert-gallery-compact .cert-tile:focus-visible{
  transform:translateY(-5px);
  box-shadow:8px 8px 0 var(--blue);
  background:#fbf7ef;
  outline:none;
}
.cert-gallery-compact .cert-tile:hover::after,
.cert-gallery-compact .cert-tile:focus-visible::after{
  opacity:1;
  transform:none;
}

/* Certificate zoom overlay. */
.certificate-lightbox{
  position:fixed;
  inset:0;
  z-index:420;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(17,18,15,.86);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.certificate-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.certificate-lightbox-panel{
  width:min(1180px,calc(100vw - 44px));
  max-height:calc(100vh - 44px);
  overflow:auto;
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:14px 14px 0 rgba(17,18,15,.16);
}
.certificate-lightbox-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 22px 12px;
}
.certificate-lightbox-head span{
  display:block;
  font-family:var(--mono);
  color:var(--orange);
  font-size:.63rem;
  margin-bottom:6px;
}
.certificate-lightbox-head strong{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:.95;
}
.certificate-lightbox-head p{
  margin:8px 0 0;
  color:var(--muted);
}
.certificate-lightbox-close{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font-size:1.6rem;
  flex:0 0 48px;
}
.certificate-lightbox-media{
  padding:0 22px 22px;
}
.certificate-lightbox-media img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--ink);
  background:#f8f4eb;
}

/* Contact form legibility. */
.mini-form{
  padding:32px !important;
  gap:18px !important;
}
.form-title span{
  font-size:.76rem !important;
}
.form-title strong{
  font-size:1.7rem !important;
}
.mini-form label{
  grid-template-columns:170px 1fr !important;
  min-height:62px;
}
.mini-form label>span{
  font-size:.72rem !important;
  letter-spacing:.05em;
}
.mini-form input,
.mini-form select{
  height:60px !important;
  font-size:1.12rem !important;
}
.mini-form button[type=submit]{
  height:58px !important;
  font-size:.94rem !important;
}

@media(max-width:1100px){
  .index-nav{font-size:.75rem !important;gap:16px !important;}
}
@media(max-width:900px){
  .process-guide-face,
  .process-guide-face img{
    width:96px !important;
    height:96px !important;
  }
  .mini-form{
    padding:22px !important;
  }
  .mini-form label{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:760px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:210px !important;
    min-height:210px !important;
  }
  .resource-modal:not(.is-output-detail) .resource-sheet{
    width:100% !important;
    max-height:none !important;
  }
  .resource-modal:not(.is-output-detail) .resource-body{
    padding:0 18px 24px !important;
  }
  .certificate-lightbox-panel{
    width:100%;
    max-height:calc(100vh - 24px);
  }
}


/* =========================================================
   V27 final alignment polish
   ========================================================= */

/* Case 01 should stay a touch smaller than the other case studies,
   but no longer oversized. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,176px) !important;
  min-height:364px !important;
}
.case-mini-uac .case-mini-grid figure{
  min-height:176px !important;
}

/* Lower the content blocks a little so titles and copy breathe away from the top rule. */
.story-block{
  padding:38px 28px 28px !important;
  min-height:236px !important;
}
.story-block span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:4px 10px;
  border:1px solid var(--ink);
  font-family:var(--mono);
  font-size:.62rem !important;
  letter-spacing:.06em;
  background:#f8f5ec;
}
.story-block p{
  margin:34px 0 0 !important;
  line-height:1.62 !important;
}

/* Bring more color language into the case titles and tags. */
.dossier-coral .story-block span,
.dossier-coral .dossier-footer > span{
  background:#ffe3d8 !important;
  box-shadow:4px 4px 0 rgba(255,143,112,.18);
}
.dossier-blue .story-block span,
.dossier-blue .dossier-footer > span{
  background:#e4ebff !important;
  box-shadow:4px 4px 0 rgba(53,88,241,.16);
}
.dossier-lime .story-block span,
.dossier-lime .dossier-footer > span,
.dossier-green .story-block span,
.dossier-green .dossier-footer > span{
  background:#ebf6cf !important;
  box-shadow:4px 4px 0 rgba(151,183,41,.16);
}
.dossier-footer > span{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.dossier-footer > span:hover{
  transform:translateY(-2px);
}

/* Lift the Piotr note slightly and keep the face a touch higher. */
.process-guide{
  bottom:2px !important;
  right:16px !important;
}
.process-guide-face{
  transform:translateY(-6px);
}
.process-guide-bubble{
  transform:translateY(-8px);
}

@media(max-width:900px){
  .story-block{
    padding:30px 20px 24px !important;
    min-height:auto !important;
  }
  .story-block p{
    margin-top:22px !important;
  }
  .process-guide,
  .process-guide-face,
  .process-guide-bubble{
    transform:none !important;
  }
}


/* =========================================================
   V28 polish, accordion cards, process note, loop emphasis
   ========================================================= */

/* Case 01 visual size, between the too-small and too-large versions. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,184px) !important;
  min-height:380px !important;
}
.case-mini-uac .case-mini-grid figure{
  min-height:184px !important;
}

/* Lower the story labels and text slightly more inside each case section. */
.story-block{
  padding:44px 28px 28px !important;
  min-height:236px !important;
}
.story-block span{
  transform:translateY(2px);
}
.story-block p{
  margin:28px 0 0 !important;
}

/* Closed case headers, larger, slightly higher, lightly animated and color-linked. */
.dossier-head{
  position:relative;
  padding:34px 12px !important;
  border-radius:16px;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, padding-left .18s ease, padding-right .18s ease;
}
.dossier-name span{
  font-size:2.38rem !important;
  line-height:.95;
}
.dossier-name small{
  font-size:.98rem;
  margin-top:2px;
}
.dossier-role{
  font-size:.7rem !important;
}
.dossier-open{
  width:50px !important;
  height:50px !important;
  font-size:1.7rem !important;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.dossier-head:hover,
.dossier-head:focus-visible{
  transform:translateY(-3px);
  padding-left:18px !important;
  padding-right:18px !important;
}
.dossier-head:hover .dossier-open,
.dossier-head:focus-visible .dossier-open{
  transform:scale(1.04);
}
.dossier-coral .dossier-head{
  background:linear-gradient(90deg, rgba(255,143,112,.12) 0%, rgba(255,143,112,.06) 38%, rgba(255,255,255,0) 100%);
}
.dossier-blue .dossier-head{
  background:linear-gradient(90deg, rgba(53,88,241,.11) 0%, rgba(53,88,241,.055) 38%, rgba(255,255,255,0) 100%);
}
.dossier-lime .dossier-head,
.dossier-green .dossier-head{
  background:linear-gradient(90deg, rgba(151,183,41,.14) 0%, rgba(151,183,41,.06) 38%, rgba(255,255,255,0) 100%);
}
.dossier-coral .dossier-open{box-shadow:5px 5px 0 rgba(255,143,112,.22);}
.dossier-blue .dossier-open{box-shadow:5px 5px 0 rgba(53,88,241,.18);}
.dossier-lime .dossier-open,
.dossier-green .dossier-open{box-shadow:5px 5px 0 rgba(151,183,41,.2);}
.dossier-coral .dossier-id,
.dossier-coral .dossier-role{color:#cf6548;}
.dossier-blue .dossier-id,
.dossier-blue .dossier-role{color:#4660df;}
.dossier-lime .dossier-id,
.dossier-lime .dossier-role,
.dossier-green .dossier-id,
.dossier-green .dossier-role{color:#6f8c18;}

/* Process note, move it up and left like the marked example, slightly bigger. */
.process-guide{
  top:-48px !important;
  right:-18px !important;
  bottom:auto !important;
  max-width:446px !important;
  gap:12px !important;
}
.process-guide-face{
  width:118px !important;
  flex-basis:118px !important;
  transform:translateY(-12px) !important;
}
.process-guide-bubble{
  padding:18px 20px 18px !important;
  min-height:112px;
  transform:translateY(-14px) !important;
}
.process-guide-bubble p{
  font-size:1.02rem !important;
  line-height:1.42 !important;
}
.process-guide-kicker{
  font-size:.64rem !important;
}

/* Active loop card, stronger emphasis when selected. */
.loop-step.is-active{
  outline:2px solid var(--ink) !important;
  box-shadow:16px 16px 0 color-mix(in srgb,var(--process-accent) 92%,#11120f), 0 0 0 5px color-mix(in srgb,var(--process-accent) 16%,transparent) !important;
  transform-origin:center;
}
.loop-step.is-active span{
  font-weight:900 !important;
}
.loop-step.is-active small{
  font-weight:700 !important;
  opacity:1 !important;
}
.loop-step.loop-5.is-active{
  box-shadow:18px 18px 0 rgba(173,133,16,.82), 0 0 0 6px rgba(255,211,106,.22) !important;
}

@media(max-width:900px){
  .dossier-head{
    padding:24px 0 !important;
    border-radius:0;
    transform:none !important;
  }
  .dossier-name span{
    font-size:1.86rem !important;
  }
  .process-guide{
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    max-width:none !important;
  }
  .process-guide-face,
  .process-guide-bubble{
    transform:none !important;
  }
  .story-block{
    padding:32px 20px 24px !important;
  }
}


/* =========================================================
   V29, case visuals, story labels, process portrait, profile link
   ========================================================= */

/* Case 01, make the actual screenshots read larger without returning to the oversized frame. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,190px) !important;
  min-height:392px !important;
}
.case-mini-uac .case-mini-grid figure{
  min-height:190px !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img{
  transform:scale(1.48);
  transform-origin:center 38%;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img{
  transform:scale(1.26);
  transform-origin:center top;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img{
  transform:scale(1.16);
  transform-origin:center center;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img{
  transform:scale(1.24);
  transform-origin:center center;
}
.case-mini-uac .case-mini-grid img{
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.case-mini-uac .case-mini-grid figure:hover img{
  filter:saturate(1.03) contrast(1.02);
}

/* Open case study section headings, visibly larger and a touch higher. */
.story-block{
  padding:25px 28px 28px !important;
  min-height:236px !important;
}
.story-block > span{
  min-height:34px !important;
  padding:7px 13px !important;
  font-size:1.02rem !important;
  line-height:1 !important;
  font-weight:800 !important;
  transform:translateY(-2px) !important;
}
.story-block p{
  margin:24px 0 0 !important;
}

/* Process portrait, approximately 50% larger while keeping the note readable. */
.process-guide{
  top:-56px !important;
  right:-18px !important;
  bottom:auto !important;
  max-width:530px !important;
}
.process-guide-face{
  width:176px !important;
  flex:0 0 176px !important;
  transform:translateY(-18px) !important;
}
.process-guide-bubble{
  min-height:112px;
  transform:translateY(-14px) !important;
}

/* Make the hero profile card a clear, keyboard-accessible route to the CV/certification block. */
.hero-profile-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease;
}
.hero-profile-link:hover{
  transform:translateY(-5px) rotate(.15deg);
  filter:drop-shadow(0 12px 18px rgba(17,18,15,.08));
}
.hero-profile-link:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:6px;
}
.hero-profile-link .profile-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.hero-profile-link .profile-label::after{
  content:"CV + CERTS ↘";
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.06em;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .18s ease, transform .18s ease;
}
.hero-profile-link:hover .profile-label::after,
.hero-profile-link:focus-visible .profile-label::after{
  opacity:1;
  transform:translateY(0);
}
#documents{
  scroll-margin-top:110px;
}

@media(max-width:900px){
  .story-block{
    padding:28px 20px 24px !important;
  }
  .story-block > span{
    font-size:.88rem !important;
    min-height:30px !important;
  }
  .process-guide-face{
    width:112px !important;
    flex-basis:112px !important;
    transform:none !important;
  }
  .process-guide-bubble{
    transform:none !important;
  }
  .hero-profile-link:hover{
    transform:none;
  }
}

/* =========================================================
   V30 targeted polish
   ========================================================= */

/* Case 01, give the real screenshots the same overall presence as cases 02 and 03. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,205px) !important;
  min-height:422px !important;
  gap:12px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:205px !important;
  min-height:205px !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img{
  transform:scale(1.72) !important;
  transform-origin:center 40% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img{
  transform:scale(1.38) !important;
  transform-origin:center 18% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img{
  transform:scale(1.26) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img{
  transform:scale(1.34) !important;
  transform-origin:center center !important;
}

/* Case body labels, visibly larger and slightly higher. */
.story-block{
  padding:20px 30px 28px !important;
  min-height:236px !important;
}
.story-block > span{
  min-height:40px !important;
  padding:8px 15px !important;
  font-size:1.18rem !important;
  line-height:1 !important;
  letter-spacing:.035em !important;
  transform:translateY(-6px) !important;
}
.story-block p{
  margin:18px 0 0 !important;
  font-size:.9rem;
  line-height:1.64 !important;
}

/* Process note, move and size it closer to the marked target. */
.process-guide{
  top:-34px !important;
  left:170px !important;
  right:auto !important;
  bottom:auto !important;
  max-width:600px !important;
  gap:10px !important;
  align-items:flex-start !important;
}
.process-guide-face{
  width:150px !important;
  flex:0 0 150px !important;
  transform:translateY(-6px) !important;
}
.process-guide-face img{
  width:100% !important;
  height:auto !important;
}
.process-guide-bubble{
  max-width:440px !important;
  min-height:126px !important;
  padding:19px 22px 18px !important;
  transform:translateY(0) !important;
}
.process-guide-bubble p{
  font-size:1.03rem !important;
  line-height:1.48 !important;
}

/* FR hero, reduce crowding and keep the profile card from colliding with the title. */
html[lang="fr"] .hero{
  grid-template-columns:minmax(0,1.32fr) minmax(330px,.68fr);
  column-gap:56px;
}
html[lang="fr"] .hero h1{
  font-size:clamp(4.95rem,8vw,8.8rem);
  line-height:.84;
  letter-spacing:-.052em;
}
html[lang="fr"] .hero-sub{
  max-width:610px;
}

/* FR skill cards, prevent long labels from crashing into each other. */
html[lang="fr"] .skill-panel h3{
  font-size:2.48rem;
  line-height:.94;
  letter-spacing:-.02em;
}
html[lang="fr"] .skill-panel p{
  font-size:.8rem;
}

/* FR references, make the text column breathe more like EN. */
html[lang="fr"] .quote-stack-rich article{
  grid-template-columns:42px 92px minmax(0,1.45fr) 220px !important;
  gap:18px !important;
}
html[lang="fr"] .reference-body p{
  max-width:none !important;
  font-size:.98rem !important;
  line-height:1.58 !important;
}
html[lang="fr"] .quote-stack-rich footer strong{
  font-size:1.18rem;
  line-height:1.04;
}
html[lang="fr"] .quote-stack-rich footer small{
  font-size:.63rem;
  line-height:1.42;
}

@media(max-width:1100px){
  html[lang="fr"] .hero{
    grid-template-columns:1fr;
    column-gap:0;
  }
  html[lang="fr"] .hero h1{
    font-size:clamp(4.2rem,15vw,6.8rem);
  }
  .story-block{
    padding:24px 22px 24px !important;
  }
  .story-block > span{
    font-size:.98rem !important;
    min-height:34px !important;
    transform:translateY(-3px) !important;
  }
  .process-guide{
    left:auto !important;
    right:18px !important;
    top:auto !important;
    max-width:none !important;
  }
}

@media(max-width:760px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:220px !important;
    min-height:220px !important;
  }
  .story-block > span{
    font-size:.86rem !important;
    min-height:30px !important;
    transform:none !important;
  }
  .process-guide{
    position:relative;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    gap:12px !important;
  }
  .process-guide-face{
    width:108px !important;
    flex-basis:108px !important;
    transform:none !important;
  }
  .process-guide-bubble{
    max-width:none !important;
    min-height:auto !important;
  }
  html[lang="fr"] .quote-stack-rich article{
    grid-template-columns:36px 74px minmax(0,1fr) !important;
  }
  html[lang="fr"] .quote-stack-rich footer{
    grid-column:3 !important;
  }
}

/* =========================================================
   V31 focused fixes
   ========================================================= */

/* Open case study label strips, subtle animation restored. */
.case-mini-label strong,
.story-block > span{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.case-mini-label strong{
  display:inline-flex;
  align-items:center;
  padding:1px 0;
}
.case-mini-label:hover strong,
.case-mini-label:focus-within strong{
  transform:translateY(-2px);
  text-shadow:0 0 0 currentColor;
}
.story-block:hover > span,
.story-block:focus-within > span{
  transform:translateY(-7px) scale(1.015) !important;
  box-shadow:6px 6px 0 rgba(17,18,15,.08);
}

/* Case 01, decisively larger screenshot presence to match case 02 and 03. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,218px) !important;
  min-height:448px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:218px !important;
  min-height:218px !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img{
  transform:scale(1.94) !important;
  transform-origin:center 40% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img{
  transform:scale(1.50) !important;
  transform-origin:center 16% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img{
  transform:scale(1.36) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img{
  transform:scale(1.50) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:hover img{
  filter:saturate(1.05) contrast(1.03);
}

/* Open case section title cards, larger and slightly higher, as requested. */
.story-block{
  padding:16px 28px 30px !important;
  min-height:236px !important;
}
.story-block > span{
  min-height:44px !important;
  padding:9px 16px !important;
  font-size:1.22rem !important;
  transform:translateY(-10px) !important;
}
.story-block p{
  margin:16px 0 0 !important;
}

/* FR references, widen and rebalance so text runs more like the EN version. */
html[lang="fr"] .quote-stack-rich{
  width:100%;
}
html[lang="fr"] .quote-stack-rich article{
  grid-template-columns:42px 92px minmax(420px,1.75fr) minmax(185px,.9fr) !important;
  gap:14px !important;
  min-height:188px !important;
  align-items:center !important;
}
html[lang="fr"] .reference-body{
  max-width:none !important;
}
html[lang="fr"] .reference-body p{
  max-width:none !important;
  font-size:.93rem !important;
  line-height:1.48 !important;
  margin:8px 0 0 !important;
}
html[lang="fr"] .quote-stack-rich footer{
  gap:3px !important;
}
html[lang="fr"] .quote-stack-rich footer strong{
  font-size:1.08rem !important;
  line-height:1 !important;
}
html[lang="fr"] .quote-stack-rich footer small{
  font-size:.6rem !important;
  line-height:1.35 !important;
}

/* Process helper, keep horizontal placement, just vertically center face + note together. */
.process-guide{
  top:-24px !important;
  left:170px !important;
  right:auto !important;
  align-items:center !important;
  gap:10px !important;
}
.process-guide-face{
  width:178px !important;
  flex:0 0 178px !important;
  transform:translateY(0) !important;
}
.process-guide-face img{
  width:100% !important;
  height:auto !important;
}
.process-guide-bubble{
  max-width:446px !important;
  min-height:122px !important;
  transform:translateY(0) !important;
}

@media(max-width:1100px){
  .case-mini-uac .case-mini-grid{
    grid-template-rows:repeat(2,190px) !important;
    min-height:392px !important;
  }
  .story-block{
    padding:22px 22px 24px !important;
  }
  .story-block > span{
    min-height:38px !important;
    font-size:1rem !important;
    transform:translateY(-5px) !important;
  }
  html[lang="fr"] .quote-stack-rich article{
    grid-template-columns:38px 84px minmax(0,1.4fr) 180px !important;
  }
}

@media(max-width:900px){
  html[lang="fr"] .quote-stack-rich article{
    grid-template-columns:36px 72px minmax(0,1fr) !important;
    gap:14px !important;
  }
  html[lang="fr"] .quote-stack-rich footer{
    grid-column:3 !important;
  }
}

@media(max-width:760px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:220px !important;
    min-height:220px !important;
  }
  .story-block > span{
    font-size:.86rem !important;
    min-height:30px !important;
    transform:none !important;
  }
  .process-guide{
    position:relative;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    align-items:flex-start !important;
  }
  .process-guide-face{
    width:108px !important;
    flex-basis:108px !important;
  }
  .process-guide-bubble{
    max-width:none !important;
  }
}

/* =========================================================
   V32 final requested fixes
   ========================================================= */

/* Work list titles, restore a subtle hover animation. */
.dossier-head .dossier-id,
.dossier-head .dossier-name span,
.dossier-head .dossier-name small,
.dossier-head .dossier-role{
  transition:transform .2s ease,color .2s ease,opacity .2s ease;
}
.dossier-head:hover .dossier-name span,
.dossier-head:focus-visible .dossier-name span{
  transform:translateX(5px);
}
.dossier-head:hover .dossier-name small,
.dossier-head:focus-visible .dossier-name small{
  transform:translateX(3px);
}
.dossier-head:hover .dossier-role,
.dossier-head:focus-visible .dossier-role,
.dossier-head:hover .dossier-id,
.dossier-head:focus-visible .dossier-id{
  color:var(--orange);
  transform:translateX(2px);
}

/* Case 01, force the screenshots to fill more like cases 02 and 03. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,236px) !important;
  min-height:484px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:236px !important;
  min-height:236px !important;
}
.case-mini-uac .case-mini-grid img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#f7f5ed !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img{
  transform:none !important;
  object-position:center 12% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img{
  transform:none !important;
  object-position:center 9% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img{
  transform:none !important;
  object-position:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img{
  transform:none !important;
  object-position:center center !important;
}

/* Case section labels, give them a clearer subtle animation. */
.story-block > span{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.story-block:hover > span,
.story-block:focus-within > span{
  transform:translateY(-12px) scale(1.02) !important;
  box-shadow:5px 5px 0 rgba(17,18,15,.08);
}

/* FR hero title, reduce the oversized top title and keep the profile card from crowding it. */
html[lang="fr"] .hero h1{
  font-size:clamp(5.35rem,7.1vw,9.2rem) !important;
  line-height:.84 !important;
}
html[lang="fr"] .hero-profile{
  justify-self:end;
}

/* FR process title, same scale family as the bottom title. */
html[lang="fr"] .thinking-title h2{
  font-size:clamp(4.2rem,5.55vw,6.6rem) !important;
  line-height:.88 !important;
  max-width:5.2ch !important;
}

/* FR references, stretch the copy line more like the EN version. */
html[lang="fr"] .quote-stack-rich article{
  grid-template-columns:40px 86px minmax(500px,2.2fr) minmax(165px,.78fr) !important;
  gap:12px !important;
}
html[lang="fr"] .reference-body p{
  font-size:.91rem !important;
  line-height:1.5 !important;
  max-width:35ch !important;
}
html[lang="fr"] .quote-stack-rich footer{
  align-self:center !important;
}
html[lang="fr"] .quote-stack-rich footer strong{
  font-size:1.02rem !important;
}
html[lang="fr"] .quote-stack-rich footer small{
  font-size:.58rem !important;
}

@media(min-width:1101px){
  html[lang="fr"] .thinking{
    align-items:start !important;
  }
}

@media(max-width:1100px){
  .case-mini-uac .case-mini-grid{
    grid-template-rows:repeat(2,206px) !important;
    min-height:424px !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:206px !important;
    min-height:206px !important;
  }
  html[lang="fr"] .quote-stack-rich article{
    grid-template-columns:38px 80px minmax(0,1.45fr) 170px !important;
  }
}

@media(max-width:760px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:220px !important;
    min-height:220px !important;
  }
}


/* =========================================================
   V33, final UAC case-01 image sizing fix
   Make case 01 image tiles behave like case 02 and 03.
   Prioritize visible image height, allow side bars when needed.
   ========================================================= */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,236px) !important;
  min-height:484px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:236px !important;
  min-height:236px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#f5f2e9 !important;
}
.case-mini-uac .case-mini-grid figure img,
.case-mini-uac .case-mini-grid .asset-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#f5f2e9 !important;
  transform-origin:center center !important;
}

/* Per-image scaling, so UAC assets finally fill the frame more.
   Keep the full image readable, crop only the excess blank canvas. */
.case-mini-uac .case-mini-grid figure:nth-child(1) img,
.case-mini-uac .case-mini-grid figure:nth-child(1) .asset-thumb{
  transform:scale(1.68) !important;
  object-position:center 18% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img,
.case-mini-uac .case-mini-grid figure:nth-child(2) .asset-thumb{
  transform:scale(1.28) !important;
  object-position:center 10% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img,
.case-mini-uac .case-mini-grid figure:nth-child(3) .asset-thumb{
  transform:scale(1.3) !important;
  object-position:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img,
.case-mini-uac .case-mini-grid figure:nth-child(4) .asset-thumb{
  transform:scale(1.16) !important;
  object-position:center center !important;
}
.case-mini-uac .case-mini-grid figure:hover img,
.case-mini-uac .case-mini-grid figure:hover .asset-thumb{
  transform:scale(calc(var(--uac-scale, 1) + .04)) !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1){ --uac-scale:1.68; }
.case-mini-uac .case-mini-grid figure:nth-child(2){ --uac-scale:1.28; }
.case-mini-uac .case-mini-grid figure:nth-child(3){ --uac-scale:1.30; }
.case-mini-uac .case-mini-grid figure:nth-child(4){ --uac-scale:1.16; }

@media(max-width:1100px){
  .case-mini-uac .case-mini-grid{
    grid-template-rows:repeat(2,214px) !important;
    min-height:440px !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:214px !important;
    min-height:214px !important;
  }
  .case-mini-uac .case-mini-grid figure:nth-child(1) img,
  .case-mini-uac .case-mini-grid figure:nth-child(1) .asset-thumb{ transform:scale(1.58) !important; }
  .case-mini-uac .case-mini-grid figure:nth-child(2) img,
  .case-mini-uac .case-mini-grid figure:nth-child(2) .asset-thumb{ transform:scale(1.22) !important; }
  .case-mini-uac .case-mini-grid figure:nth-child(3) img,
  .case-mini-uac .case-mini-grid figure:nth-child(3) .asset-thumb{ transform:scale(1.24) !important; }
  .case-mini-uac .case-mini-grid figure:nth-child(4) img,
  .case-mini-uac .case-mini-grid figure:nth-child(4) .asset-thumb{ transform:scale(1.12) !important; }
}

@media(max-width:760px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:220px !important;
    min-height:220px !important;
  }
}


/* =========================================================
   V34, container sizing + process parity + stack atmosphere
   + reference LinkedIn links + smooth contact transition
   ========================================================= */

/* CASE 01, this time enlarge the CONTAINERS themselves.
   The previous versions enlarged only the images inside them. */
@media(min-width:1101px){
  .case-mini-uac .case-mini-grid{
    grid-template-rows:repeat(2,420px) !important;
    min-height:852px !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:420px !important;
    min-height:420px !important;
  }
}
@media(min-width:761px) and (max-width:1100px){
  .case-mini-uac .case-mini-grid{
    grid-template-rows:repeat(2,330px) !important;
    min-height:672px !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:330px !important;
    min-height:330px !important;
  }
}
@media(max-width:760px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:250px !important;
    min-height:250px !important;
  }
}

/* EN PROCESS, same visual scale as STACK, but with enough left-column width
   that MARKETING never enters the process card area. FR already had the desired balance. */
@media(min-width:1101px){
  html[lang="en"] .thinking{
    grid-template-columns:minmax(690px,1fr) minmax(540px,600px) !important;
    gap:96px !important;
  }
  html[lang="en"] .thinking-title{
    padding-top:72px !important;
  }
  html[lang="en"] .thinking-title h2{
    max-width:none !important;
    font-size:clamp(4.8rem,6vw,7.35rem) !important;
    line-height:.88 !important;
    letter-spacing:-.032em !important;
  }
  html[lang="en"] .thinking-loop{
    width:100% !important;
    max-width:600px !important;
    justify-self:end !important;
  }
}

/* STACK, keep the approved chip positions untouched, only give the whole section
   a stronger visual environment behind them. */
.stack{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 18%, rgba(52,87,241,.12), transparent 28%),
    radial-gradient(circle at 16% 78%, rgba(195,255,61,.12), transparent 25%),
    radial-gradient(circle at 88% 80%, rgba(255,103,80,.075), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.46), rgba(238,240,255,.68));
  box-shadow:inset 0 0 0 1px rgba(17,18,15,.09);
}
.stack::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.45;
  background-image:
    linear-gradient(rgba(52,87,241,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,87,241,.045) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg, transparent 0, #000 18%, #000 100%);
}
.stack-cloud{
  background:rgba(255,253,247,.72);
  box-shadow:0 22px 70px rgba(52,87,241,.07);
}
.stack-left,.stack-cloud{position:relative;z-index:1;}

/* Reference portraits now behave like real profile links. */
.quote-person-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.quote-person-link::after{
  content:"↗";
  position:absolute;
  right:5px;
  bottom:4px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:.68rem;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease;
}
.quote-person-link:hover::after,
.quote-person-link:focus-visible::after{
  opacity:1;
  transform:none;
  background:var(--ink);
  color:var(--paper);
}
.quote-person-link:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
}
.quote-person-empty.quote-person-link{
  border:1px solid var(--ink);
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
}

/* Smooth, animated handoff from the paper background into the blue contact area. */
.page-color-transition{
  width:100%;
  height:220px;
  margin:0;
  background:
    radial-gradient(circle at 18% 40%, rgba(195,255,61,.20), transparent 30%),
    radial-gradient(circle at 82% 64%, rgba(255,103,80,.12), transparent 34%),
    linear-gradient(180deg, var(--paper) 0%, #eef0ff 34%, #b7c1ff 58%, #6f85fb 78%, var(--blue) 100%);
  background-size:120% 120%,120% 120%,100% 100%;
  animation:portfolioColorDrift 9s ease-in-out infinite alternate;
}
.contact.section-space{
  padding-top:0 !important;
}
@keyframes portfolioColorDrift{
  from{background-position:0% 0%,100% 100%,center;}
  to{background-position:8% 12%,92% 88%,center;}
}
@media(prefers-reduced-motion:reduce){
  .page-color-transition{animation:none;}
}
@media(max-width:760px){
  .page-color-transition{height:140px;}
}


/* =========================================================
   V35, references spacing + stable project modal gallery
   ========================================================= */

/* FR references, give the badge/text block a little more breathing room from the portrait. */
html[lang="fr"] .quote-stack-rich .reference-body{
  padding-left:12px !important;
}
html[lang="fr"] .quote-stack-rich .reference-badge{
  margin-left:2px !important;
}

/* Project modal, make the media display deterministic for all 3 case studies. */
#projectModal .modal-feature{
  position:relative;
  overflow:hidden;
  background:#f7f4eb !important;
}
#projectModal .modal-grid,
#projectModal .modal-assets,
#projectModal .modal-links{
  position:relative;
  z-index:2;
  background:var(--paper);
}
#projectModal.has-media-wall .modal-feature{
  height:auto !important;
  display:block !important;
  padding:12px;
  margin:0 44px;
  border:1px solid var(--ink);
}
#projectModal.has-media-wall .modal-media-wall{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
#projectModal.has-media-wall .modal-media-wall figure{
  margin:0;
  min-height:260px;
  aspect-ratio:16 / 10;
  border:1px solid var(--ink);
  background:#f7f4eb;
  overflow:hidden;
  display:grid;
  place-items:center;
}
#projectModal.has-media-wall .modal-media-wall figure img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  display:block;
  background:#f7f4eb;
}
#projectModal.has-media-wall .modal-assets{
  display:none !important;
}

@media(max-width:1100px){
  #projectModal.has-media-wall .modal-feature{
    margin:0 18px !important;
    padding:10px !important;
  }
  #projectModal.has-media-wall .modal-media-wall{
    gap:10px;
  }
  #projectModal.has-media-wall .modal-media-wall figure{
    min-height:200px;
  }
}

@media(max-width:760px){
  #projectModal.has-media-wall .modal-media-wall{
    grid-template-columns:1fr;
  }
  #projectModal.has-media-wall .modal-media-wall figure{
    min-height:180px;
  }
}


/* =========================================================
   V36 refinements
   ========================================================= */

/* Case 01, keep the bigger visual containers, but add more natural paper margins
   inside the frames so each screenshot breathes and adapts better to its source ratio. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,224px) !important;
  min-height:460px !important;
  gap:14px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:224px !important;
  min-height:224px !important;
  padding:12px 18px !important;
  box-sizing:border-box !important;
  background:#f7f4eb !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1){padding:14px 22px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(2){padding:12px 18px 14px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(3){padding:10px 28px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(4){padding:14px 22px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(1) img{
  transform:scale(1.64) !important;
  transform-origin:center 40% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img{
  transform:scale(1.34) !important;
  transform-origin:center 14% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img{
  transform:scale(1.20) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img{
  transform:scale(1.36) !important;
  transform-origin:center center !important;
}

/* Case 03 header, keep the long title comfortably inside the box. */
.dossier[data-project="fftr"] .dossier-name span{
  font-size:clamp(2rem,3.65vw,2.95rem) !important;
  line-height:.93 !important;
  letter-spacing:-.028em !important;
}

/* Process caption, remove the progress label line and keep only the instruction. */
.loop-caption b,
#loopProgressLabel{
  display:none !important;
}
.loop-caption{
  padding-top:0 !important;
}
.loop-caption span{
  margin-top:0 !important;
}

/* Stack, restore the section background to neutral, and keep the visual treatment only
   inside the right-side tools square. */
.stack{
  position:static !important;
  isolation:auto !important;
  background:transparent !important;
  box-shadow:none !important;
}
.stack::before{display:none !important;}
.stack-cloud{
  background:
    radial-gradient(circle at 18% 18%, rgba(195,255,61,.18), transparent 22%),
    radial-gradient(circle at 82% 24%, rgba(52,87,241,.14), transparent 24%),
    radial-gradient(circle at 78% 78%, rgba(255,103,80,.10), transparent 24%),
    linear-gradient(135deg,#fffdf8 0%,#f2f3fb 100%) !important;
  box-shadow:0 18px 44px rgba(52,87,241,.06) !important;
  border:1px dashed rgba(17,18,15,.18) !important;
}

/* References, keep portraits consistently filled and clickable. */
.quote-person img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Make the transition into the contact area much slower and more gradual. */
.page-color-transition{
  height:320px !important;
  background:
    radial-gradient(circle at 18% 40%, rgba(195,255,61,.13), transparent 34%),
    radial-gradient(circle at 82% 62%, rgba(255,103,80,.09), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(52,87,241,.10), transparent 36%),
    linear-gradient(180deg,
      var(--paper) 0%,
      #f6f5ef 18%,
      #f1f3fb 42%,
      #e7ebff 60%,
      #d5dcff 76%,
      #b3c0ff 88%,
      #90a4ff 95%,
      var(--blue) 100%) !important;
  background-size:125% 125%, 125% 125%, 130% 130%, 100% 100% !important;
  animation:portfolioColorDriftV36 18s ease-in-out infinite alternate !important;
}
@keyframes portfolioColorDriftV36{
  from{background-position:0% 0%, 100% 100%, 50% 80%, center;}
  to{background-position:8% 6%, 92% 94%, 50% 68%, center;}
}
@media(prefers-reduced-motion:reduce){
  .page-color-transition{animation:none !important;}
}
@media(max-width:760px){
  .page-color-transition{height:200px !important;}
}


/* =========================================================
   V37 final polish adjustments
   ========================================================= */

/* Case 01, make the four preview containers taller again, like cases 02 and 03,
   while keeping the internal bars that help the screenshots adapt nicely. */
.case-mini-uac .case-mini-grid{
  grid-template-rows:repeat(2,286px) !important;
  min-height:586px !important;
  gap:14px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:286px !important;
  min-height:286px !important;
  display:grid !important;
  place-items:center !important;
  padding:10px 18px !important;
  background:#f7f4eb !important;
  overflow:hidden !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1){padding:10px 24px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(2){padding:10px 18px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(3){padding:8px 26px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(4){padding:10px 22px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(1) img{
  transform:scale(1.88) !important;
  transform-origin:center 35% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img{
  transform:scale(1.48) !important;
  transform-origin:center 12% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img{
  transform:scale(1.28) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img{
  transform:scale(1.50) !important;
  transform-origin:center center !important;
}

/* Case 03 title, reduce further so the long brand name always stays inside. */
.dossier[data-project="fftr"] .dossier-name{
  min-width:0 !important;
}
.dossier[data-project="fftr"] .dossier-name span{
  display:block !important;
  max-width:100% !important;
  font-size:clamp(1.7rem,3.05vw,2.38rem) !important;
  line-height:.92 !important;
  letter-spacing:-.04em !important;
  overflow-wrap:anywhere !important;
}

/* Process helper instruction, keep only the message and place it slightly lower. */
@media(min-width:901px){
  .loop-caption{
    transform:translate(-50%, 142px) !important;
  }
}
.loop-caption span{
  display:block !important;
  margin-top:6px !important;
}

/* Stack right-side panel, use a cleaner background that matches the site better. */
.stack-cloud{
  position:relative !important;
  isolation:isolate !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.80) 0%, rgba(252,251,247,.92) 42%, rgba(245,246,253,.96) 100%) !important;
  border:1px dashed rgba(17,18,15,.16) !important;
  box-shadow:0 18px 44px rgba(17,18,15,.05) !important;
}
.stack-cloud::before,
.stack-cloud::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.stack-cloud::before{
  background:
    radial-gradient(circle at 14% 16%, rgba(195,255,61,.10), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(52,87,241,.09), transparent 20%),
    radial-gradient(circle at 76% 78%, rgba(255,103,80,.07), transparent 18%);
  opacity:.95;
}
.stack-cloud::after{
  background:
    linear-gradient(rgba(17,18,15,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,18,15,.025) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.28;
}
.stack-cloud > *{position:relative;z-index:1;}

/* Smooth the transition into contact much more, and remove visible seam lines. */
.page-color-transition{
  position:relative !important;
  overflow:hidden !important;
  height:430px !important;
  margin-top:-2px !important;
  border:0 !important;
  background:
    linear-gradient(180deg,
      var(--paper) 0%,
      #f4f3ee 18%,
      #f0f2f6 40%,
      #eceffa 56%,
      #e3e9fc 68%,
      #d8e0fd 79%,
      #c5d0fc 88%,
      #a8b7f8 95%,
      var(--blue) 100%) !important;
  animation:pageShiftV37 28s ease-in-out infinite alternate !important;
}
.page-color-transition::before,
.page-color-transition::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  filter:blur(70px);
  opacity:.75;
}
.page-color-transition::before{
  width:46%;
  height:48%;
  left:4%;
  top:16%;
  background:rgba(195,255,61,.10);
}
.page-color-transition::after{
  width:44%;
  height:52%;
  right:6%;
  top:28%;
  background:rgba(52,87,241,.11);
}
.contact-color-block{
  margin-top:-1px !important;
}
@keyframes pageShiftV37{
  from{background-position:center top;}
  to{background-position:center 12px;}
}
@media(prefers-reduced-motion:reduce){
  .page-color-transition{animation:none !important;}
}
@media(max-width:760px){
  .page-color-transition{height:240px !important;}
}


/* =========================================================
   V38, final case-01 and modal hover polish
   ========================================================= */

/* Case 01, restore both things requested:
   1) slightly bigger preview containers,
   2) visible inner paper bars so each source adapts cleanly. */
.case-mini-uac .case-mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,258px) !important;
  min-height:530px !important;
  gap:14px !important;
}
.case-mini-uac .case-mini-grid figure{
  height:258px !important;
  min-height:258px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#f7f4eb !important;
  padding:14px 22px !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1){padding:14px 26px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(2){padding:14px 20px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(3){padding:10px 30px !important;}
.case-mini-uac .case-mini-grid figure:nth-child(4){padding:14px 24px !important;}
.case-mini-uac .case-mini-grid figure img,
.case-mini-uac .case-mini-grid figure .asset-thumb{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:#f7f4eb !important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), filter .26s ease !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img,
.case-mini-uac .case-mini-grid figure:nth-child(1) .asset-thumb{
  transform:scale(1.58) !important;
  transform-origin:center 40% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img,
.case-mini-uac .case-mini-grid figure:nth-child(2) .asset-thumb{
  transform:scale(1.20) !important;
  transform-origin:center 14% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img,
.case-mini-uac .case-mini-grid figure:nth-child(3) .asset-thumb{
  transform:scale(1.18) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img,
.case-mini-uac .case-mini-grid figure:nth-child(4) .asset-thumb{
  transform:scale(1.18) !important;
  transform-origin:center center !important;
}
.case-mini-uac .case-mini-grid figure:hover img,
.case-mini-uac .case-mini-grid figure:hover .asset-thumb{
  filter:saturate(1.03) contrast(1.02) !important;
}

/* Case-study and selected-piece detail windows, make visuals feel alive on hover. */
#projectModal .modal-feature > img,
#projectModal .modal-assets > div img,
#projectModal.has-media-wall .modal-media-wall figure img,
.resource-modal.is-output-detail .output-detail-media img{
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease !important;
  cursor:zoom-in;
}
#projectModal .modal-feature:hover > img,
#projectModal .modal-assets > div:hover img,
#projectModal.has-media-wall .modal-media-wall figure:hover img,
.resource-modal.is-output-detail .output-detail-media:hover img{
  transform:scale(1.045) !important;
  filter:saturate(1.04) contrast(1.02) !important;
}
#projectModal.has-media-wall .modal-media-wall figure,
.resource-modal.is-output-detail .output-detail-media,
#projectModal .modal-assets > div,
#projectModal .modal-feature{
  transition:transform .22s ease, box-shadow .22s ease !important;
}
#projectModal.has-media-wall .modal-media-wall figure:hover,
.resource-modal.is-output-detail .output-detail-media:hover,
#projectModal .modal-assets > div:hover,
#projectModal .modal-feature:hover{
  transform:translateY(-3px) !important;
  box-shadow:7px 7px 0 rgba(17,18,15,.08) !important;
}


/* =========================================================
   V39, case-preview sizing, modal label parity, preview clicks
   ========================================================= */

/* Case 01 PREVIEW only, use detail-view-like container height.
   Images stay contained so the paper bars appear naturally on the sides
   or top/bottom depending on each source aspect ratio. */
@media(min-width:1101px){
  .case-mini-uac .case-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,390px) !important;
    min-height:794px !important;
    gap:14px !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:390px !important;
    min-height:390px !important;
    padding:14px 18px !important;
    display:grid !important;
    place-items:center !important;
    background:#f7f4eb !important;
    overflow:hidden !important;
    cursor:zoom-in;
  }
  .case-mini-uac .case-mini-grid figure img,
  .case-mini-uac .case-mini-grid figure .asset-thumb{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
    background:#f7f4eb !important;
  }
  .case-mini-uac .case-mini-grid figure:hover img,
  .case-mini-uac .case-mini-grid figure:hover .asset-thumb{
    transform:scale(1.018) !important;
  }
}
@media(min-width:761px) and (max-width:1100px){
  .case-mini-uac .case-mini-grid{
    grid-template-rows:repeat(2,280px) !important;
    min-height:574px !important;
  }
  .case-mini-uac .case-mini-grid figure{
    height:280px !important;
    min-height:280px !important;
  }
  .case-mini-uac .case-mini-grid figure img{
    width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important;
  }
}
@media(max-width:760px){
  .case-mini-uac .case-mini-grid{grid-template-columns:1fr !important;grid-template-rows:none !important;min-height:0 !important;}
  .case-mini-uac .case-mini-grid figure{height:240px !important;min-height:240px !important;padding:10px !important;}
  .case-mini-uac .case-mini-grid figure img{width:100% !important;height:100% !important;object-fit:contain !important;transform:none !important;}
}

/* All preview images are visibly interactive and open the full project. */
.case-mini-grid figure[role="button"]{
  cursor:zoom-in;
  outline:none;
}
.case-mini-grid figure[role="button"]:focus-visible{
  box-shadow:0 0 0 3px var(--blue),7px 7px 0 var(--ink) !important;
}

/* Detail-window section labels now visually match the preview title cards. */
#projectModal .modal-grid .modal-label{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:44px;
  padding:9px 16px !important;
  border:1px solid var(--ink);
  color:var(--ink) !important;
  font-family:var(--display) !important;
  font-size:1.08rem !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  background:#f8f5ec;
  text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#projectModal .modal-grid > div:hover .modal-label{
  transform:translateY(-3px);
}
#projectModal[data-project="uac"] .modal-grid .modal-label{
  background:#ffe3d8 !important;
  box-shadow:4px 4px 0 rgba(255,143,112,.18);
}
#projectModal[data-project="vp"] .modal-grid .modal-label{
  background:#e4ebff !important;
  box-shadow:4px 4px 0 rgba(53,88,241,.16);
}
#projectModal[data-project="fftr"] .modal-grid .modal-label{
  background:#ebf6cf !important;
  box-shadow:4px 4px 0 rgba(151,183,41,.16);
}
#projectModal .modal-grid p{
  margin-top:28px !important;
}

/* Case 01 DETAIL view, preserve the good large containers and add clean
   paper bars around each visual so source ratios never look cropped. */
#projectModal[data-project="uac"].has-media-wall .modal-media-wall figure{
  padding:16px 22px !important;
  background:#f7f4eb !important;
  box-sizing:border-box;
}
#projectModal[data-project="uac"].has-media-wall .modal-media-wall figure img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#f7f4eb !important;
}


/* =========================================================
   V41, case theme consistency and interaction polish
   ========================================================= */

/* Case 03 detail section labels must use the green FitForTheRepublic theme. */
#projectModal[data-project="ffr"] .modal-grid .modal-label{
  background:#ebf6cf !important;
  box-shadow:4px 4px 0 rgba(151,183,41,.22) !important;
  border-color:var(--ink) !important;
}
#projectModal[data-project="ffr"] .modal-grid > div:hover .modal-label{
  background:#dff0ad !important;
  box-shadow:5px 5px 0 rgba(151,183,41,.28) !important;
}

/* Keep only the original VIEW badge on selected pieces. */
.output-open-hint{display:none !important;}
.output-card:after{
  opacity:0 !important;
  transform:translateY(4px) scale(.98) !important;
  transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease !important;
  background:rgba(255,253,247,.86);
  color:var(--ink);
}
.output-card:hover:after,
.output-card:focus-visible:after,
.output-card.is-current:after{
  opacity:1 !important;
  transform:translateY(-1px) scale(1.02) !important;
  box-shadow:3px 3px 0 rgba(17,18,15,.12);
}
.output-a:hover:after,.output-a:focus-visible:after{background:#ffe0d6;}
.output-b:hover:after,.output-b:focus-visible:after{background:#e4e9ff;}
.output-c:hover:after,.output-c:focus-visible:after{background:#e7f7c8;}
.output-d:hover:after,.output-d:focus-visible:after{background:#ffe0ed;}
.output-e:hover:after,.output-e:focus-visible:after{background:#f7f4eb;color:#11120f;}

/* The output detail image is also the external-link target. */
.output-detail-media-link{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer !important;
}
.output-detail-media-link img{cursor:pointer !important;}
.output-detail-media-link:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:4px;
}

/* Case 01 preview hover, match the more restrained Case 02 movement. */
.case-mini-uac .case-mini-grid figure{
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease !important;
}
.case-mini-uac .case-mini-grid figure:hover{
  transform:translateY(-2px) !important;
  box-shadow:4px 4px 0 rgba(17,18,15,.72) !important;
}
@media(min-width:1101px){
  .case-mini-uac .case-mini-grid figure:hover img,
  .case-mini-uac .case-mini-grid figure:hover .asset-thumb{
    transform:scale(1.008) !important;
    filter:saturate(1.02) contrast(1.01) !important;
  }
}

/* Preview labels and tags behave like small detail links. */
.story-block > span[role="button"],
.dossier-footer > span[role="button"],
.case-mini-label strong[role="button"]{
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}
.story-block > span[role="button"]:hover,
.story-block > span[role="button"]:focus-visible,
.dossier-footer > span[role="button"]:hover,
.dossier-footer > span[role="button"]:focus-visible,
.case-mini-label strong[role="button"]:hover,
.case-mini-label strong[role="button"]:focus-visible{
  transform:translateY(-2px) !important;
  filter:saturate(1.08);
  outline:none;
}
.case-mini-label strong[role="button"]:hover,
.case-mini-label strong[role="button"]:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* =========================================================
   V42, Case 01 hover parity + final image fitting
   ========================================================= */

/* Case 01 preview, match Case 02 hover behaviour.
   Move the whole tile up subtly, never zoom the image inside. */
.case-mini-uac .case-mini-grid figure{
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
}
.case-mini-uac .case-mini-grid figure:hover,
.case-mini-uac .case-mini-grid figure:focus-within{
  transform:translateY(-4px) !important;
  box-shadow:5px 5px 0 var(--ink) !important;
}
.case-mini-uac .case-mini-grid figure img,
.case-mini-uac .case-mini-grid figure .asset-thumb,
.case-mini-uac .case-mini-grid figure:hover img,
.case-mini-uac .case-mini-grid figure:hover .asset-thumb,
.case-mini-uac .case-mini-grid figure:focus-within img,
.case-mini-uac .case-mini-grid figure:focus-within .asset-thumb{
  transform:none !important;
  filter:none !important;
}

/* Case 01 preview fitting.
   Newsletter keeps its full vertical composition, which naturally creates
   paper bars on the left and right. The other three visuals fill the tile. */
.case-mini-uac .case-mini-grid figure{
  padding:0 !important;
  background:#f7f4eb !important;
}
.case-mini-uac .case-mini-grid figure img,
.case-mini-uac .case-mini-grid figure .asset-thumb{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  background:#f7f4eb !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(1) img,
.case-mini-uac .case-mini-grid figure:nth-child(1) .asset-thumb{
  object-fit:contain !important;
  object-position:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img,
.case-mini-uac .case-mini-grid figure:nth-child(2) .asset-thumb{
  object-fit:cover !important;
  object-position:center 16% !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(3) img,
.case-mini-uac .case-mini-grid figure:nth-child(3) .asset-thumb{
  object-fit:cover !important;
  object-position:center center !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(4) img,
.case-mini-uac .case-mini-grid figure:nth-child(4) .asset-thumb{
  object-fit:cover !important;
  object-position:center center !important;
}

@media(max-width:760px){
  .case-mini-uac .case-mini-grid figure:hover,
  .case-mini-uac .case-mini-grid figure:focus-within{
    transform:translateY(-2px) !important;
    box-shadow:3px 3px 0 var(--ink) !important;
  }
}

/* =========================================================
   V43, Case 01 true hover/fitting fix
   Fixes earlier selector-specificity conflict from V33/V38.
   ========================================================= */
.case-mini-uac .case-mini-grid figure{
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
}
.case-mini-uac .case-mini-grid figure:hover,
.case-mini-uac .case-mini-grid figure:focus-within{
  transform:translateY(-3px) !important;
  box-shadow:4px 4px 0 rgba(17,18,15,.72) !important;
}

/* Match the specificity of the old nth-child scale rules so they are truly neutralised. */
.case-mini-uac .case-mini-grid figure:nth-child(1) img,
.case-mini-uac .case-mini-grid figure:nth-child(1) .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(1):hover img,
.case-mini-uac .case-mini-grid figure:nth-child(1):hover .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(1):focus-within img,
.case-mini-uac .case-mini-grid figure:nth-child(1):focus-within .asset-thumb{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  filter:none !important;
  background:#f7f4eb !important;
}

.case-mini-uac .case-mini-grid figure:nth-child(2) img,
.case-mini-uac .case-mini-grid figure:nth-child(2) .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(2):hover img,
.case-mini-uac .case-mini-grid figure:nth-child(2):hover .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(2):focus-within img,
.case-mini-uac .case-mini-grid figure:nth-child(2):focus-within .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(3) img,
.case-mini-uac .case-mini-grid figure:nth-child(3) .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(3):hover img,
.case-mini-uac .case-mini-grid figure:nth-child(3):hover .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(3):focus-within img,
.case-mini-uac .case-mini-grid figure:nth-child(3):focus-within .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(4) img,
.case-mini-uac .case-mini-grid figure:nth-child(4) .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(4):hover img,
.case-mini-uac .case-mini-grid figure:nth-child(4):hover .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(4):focus-within img,
.case-mini-uac .case-mini-grid figure:nth-child(4):focus-within .asset-thumb{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  transform:none !important;
  filter:none !important;
  background:#f7f4eb !important;
}
.case-mini-uac .case-mini-grid figure:nth-child(2) img,
.case-mini-uac .case-mini-grid figure:nth-child(2) .asset-thumb{object-position:center 16% !important;}
.case-mini-uac .case-mini-grid figure:nth-child(3) img,
.case-mini-uac .case-mini-grid figure:nth-child(3) .asset-thumb,
.case-mini-uac .case-mini-grid figure:nth-child(4) img,
.case-mini-uac .case-mini-grid figure:nth-child(4) .asset-thumb{object-position:center center !important;}